/* ============================================================
   STONEFORM CONCRETE STUDIOS — styles.css
   Mobile-first (min-width breakpoints only)
   ============================================================ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Colours */
  --color-dark:       #1a1a18;
  --color-dark-mid:   #2a2a26;
  --color-cream:      #f5f0e8;
  --color-warm-white: #faf8f4;
  --color-stone:      #8c8476;
  --color-stone-light:#b5afa5;
  --color-gold:       #c9a96e;
  --color-body:       #3a3830;
  --color-border:     #ddd8cf;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Font sizes */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3.5rem;    /* 56px */
  --text-6xl:  4.5rem;    /* 72px */

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max:    80rem;
  --section-padding:  clamp(3.75rem, 7.82vw, 6.25rem);

  /* Misc */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --transition:  250ms ease;
  --nav-height:  5rem;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-body);
  background-color: var(--color-warm-white);
  line-height:      1.6;
  overflow-x:       hidden;
}

body.cs-open { overflow: hidden; }

img, picture { display: block; max-width: 100%; }
img { object-fit: cover; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Shared Utilities ─────────────────────────────────────── */
.cs-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Topper (eyebrow label) */
.cs-topper {
  display:        block;
  font-family:    var(--font-body);
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-bottom:  var(--space-4);
}

/* Section title */
.cs-title {
  font-family:  var(--font-heading);
  font-size:    clamp(2rem, 5vw, 3.25rem);
  font-weight:  600;
  line-height:  1.1;
  color:        var(--color-dark);
  margin-bottom: var(--space-6);
}

/* Body text */
.cs-text {
  font-size:   var(--text-base);
  line-height: 1.75;
  color:       var(--color-stone);
}

/* Solid CTA button */
.cs-button-solid {
  display:          inline-block;
  padding:          var(--space-4) var(--space-8);
  background-color: var(--color-dark);
  color:            var(--color-cream);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      500;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  border:           1px solid var(--color-dark);
  transition:        background-color var(--transition), color var(--transition);
  white-space:       nowrap;
}

.cs-button-solid:hover {
  background-color: transparent;
  color:            var(--color-dark);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#cs-navigation {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1000;
  height:     var(--nav-height);
  transition: background-color var(--transition), box-shadow var(--transition);
}

/* Transparent by default (over hero) */
#cs-navigation .cs-container {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-6);
}

/* Solid on scroll */
#cs-navigation.cs-scrolled {
  background-color: var(--color-dark);
  box-shadow:       0 2px 16px rgba(0,0,0,0.3);
}

/* Logo */
#cs-navigation .cs-logo {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  color:       var(--color-cream);
  flex-shrink: 0;
}

#cs-navigation .cs-logo-mark {
  color:      var(--color-cream);
  flex-shrink: 0;
}

#cs-navigation .cs-logo-text {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.25em;
  color:          var(--color-cream);
}

/* Nav CTA */
#cs-navigation .cs-nav-button {
  display: none;
  border-color: var(--color-cream);
}

#cs-navigation .cs-nav-button:hover {
  background-color: transparent;
  color:            var(--color-cream);
  border-color:     var(--color-cream);
}

@media (min-width: 64em) {
  #cs-navigation .cs-nav-button {
    display: inline-block;
  }
}

/* Mobile toggle */
.cs-toggle {
  display:      flex;
  align-items:  center;
  justify-content: center;
  width:        2.5rem;
  height:       2.5rem;
  flex-shrink:  0;
}

.cs-box {
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  width:          1.5rem;
  height:         1rem;
}

.cs-line {
  display:          block;
  width:            100%;
  height:           1.5px;
  background-color: var(--color-cream);
  transition:       transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

/* Hamburger → X when active */
#cs-navigation.cs-active .cs-line1 {
  transform: translateY(calc(0.5rem - 0.75px)) rotate(45deg);
}
#cs-navigation.cs-active .cs-line2 { opacity: 0; }
#cs-navigation.cs-active .cs-line3 {
  transform: translateY(calc(-0.5rem + 0.75px)) rotate(-45deg);
}

/* Mobile nav drawer */
.cs-ul-wrapper {
  display:          none;
  position:         fixed;
  top:              var(--nav-height);
  left:             0;
  right:            0;
  background-color: var(--color-dark);
  padding:          var(--space-6) var(--space-6) var(--space-8);
}

#cs-navigation.cs-active .cs-ul-wrapper {
  display: block;
}

.cs-ul {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.cs-li-link {
  display:        block;
  padding:        var(--space-3) 0;
  font-size:      var(--text-lg);
  color:          var(--color-cream);
  border-bottom:  1px solid rgba(255,255,255,0.08);
  transition:     color var(--transition);
}

.cs-li-link:hover { color: var(--color-gold); }

/* Desktop nav */
@media (min-width: 64em) {
  .cs-toggle { display: none; }

  .cs-ul-wrapper {
    display:  block;
    position: static;
    padding:  0;
    background-color: transparent;
  }

  .cs-ul {
    flex-direction: row;
    gap:            var(--space-8);
  }

  .cs-li-link {
    padding:     0;
    font-size:   var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    border-bottom: none;
    color:       var(--color-cream);
    position:    relative;
  }

  .cs-li-link::after {
    content:          '';
    position:         absolute;
    bottom:           -4px;
    left:             0;
    right:            0;
    height:           1px;
    background-color: var(--color-gold);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform var(--transition);
  }

  .cs-li-link:hover { color: var(--color-cream); }
  .cs-li-link:hover::after { transform: scaleX(1); }
}

/* ============================================================
   HERO
   ============================================================ */
#hero-229 {
  position:        relative;
  min-height:      100svh;
  display:         flex;
  align-items:     flex-end;
  overflow:        hidden;
  background-color: var(--color-dark);
}

#hero-229 .cs-picture {
  position:   absolute;
  inset:      0;
  z-index:    0;
}

#hero-229 .cs-picture img {
  width:  100%;
  height: 100%;
}

/* Dark gradient overlay */
#hero-229::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    rgba(20, 18, 14, 0.92) 0%,
    rgba(20, 18, 14, 0.5)  50%,
    rgba(20, 18, 14, 0.2)  100%
  );
  z-index: 1;
}

#hero-229 .cs-container {
  position:      relative;
  z-index:       2;
  padding-top:   calc(var(--nav-height) + var(--space-20));
  padding-bottom: var(--section-padding);
}

#hero-229 .cs-flex-group {
  max-width: 44rem;
}

#hero-229 .cs-button-solid:hover {
  background-color: transparent;
  color:            var(--color-cream);
  border-color:     var(--color-cream);
}

#hero-229 .cs-title {
  font-family:  var(--font-heading);
  font-size:    clamp(2.75rem, 7vw, 5.5rem);
  font-weight:  500;
  line-height:  1.0;
  color:        var(--color-cream);
  margin-bottom: var(--space-6);
}

#hero-229 .cs-text {
  font-size:    var(--text-lg);
  color:        rgba(245, 240, 232, 0.75);
  margin-bottom: var(--space-8);
  max-width:    36rem;
  line-height:  1.7;
}

#hero-229 .cs-button-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

/* Gold outline button (hero secondary CTA) */
.cs-button-gold-outline {
  display:          inline-block;
  padding:          var(--space-4) var(--space-8);
  background-color: transparent;
  color:            var(--color-gold);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      500;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  border:           1px solid var(--color-gold);
  transition:       background-color var(--transition), color var(--transition);
}

.cs-button-gold-outline:hover {
  background-color: var(--color-gold);
  color:            var(--color-dark);
}

/* Transparent ghost button */
.cs-button-transparent {
  display:        inline-block;
  padding:        var(--space-4) var(--space-8);
  background-color: transparent;
  color:          var(--color-cream);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border:         1px solid rgba(245, 240, 232, 0.4);
  transition:     border-color var(--transition), background-color var(--transition);
}

.cs-button-transparent:hover {
  border-color:     var(--color-cream);
  background-color: rgba(245, 240, 232, 0.08);
}

/* ============================================================
   ABOUT / STORY — Side-by-side
   ============================================================ */
.sbs-about {
  padding:          var(--section-padding) 0;
  background-color: var(--color-cream);
}

.sbs-about .cs-container {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-12);
}

@media (min-width: 64em) {
  .sbs-about .cs-container {
    flex-direction: row;
    align-items:    center;
    gap:            clamp(var(--space-12), 6vw, var(--space-20));
  }

  .sbs-about .cs-content  { flex: 1; }
  .sbs-about .cs-image-group { flex: 1; }
}

/* Title colour on cream bg */
.sbs-about .cs-title { color: var(--color-dark); }

/* Stats row */
.cs-stats {
  display:       flex;
  gap:           var(--space-8);
  margin-bottom: var(--space-8);
}

.cs-stat {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.cs-number {
  font-family: var(--font-heading);
  font-size:   clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  color:       var(--color-dark);
  line-height: 1;
}

.cs-label {
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-stone);
}

.sbs-about .cs-text { margin-bottom: var(--space-4); }
.sbs-about .cs-text:last-child { margin-bottom: 0; }

/* Image group — picture + quote card overlay */
.cs-image-group {
  position: relative;
}

.cs-image-group .cs-picture {
  width:  100%;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.cs-image-group .cs-picture img {
  width:  100%;
  height: 100%;
}

/* Quote card absolutely positioned */
.cs-quote-card {
  position:         absolute;
  bottom:           -2rem;
  left:             -1.5rem;
  background-color: var(--color-dark);
  padding:          var(--space-6) var(--space-8);
  max-width:        22rem;
}

@media (min-width: 64em) {
  .cs-quote-card {
    bottom: -2.5rem;
    left:   -2.5rem;
  }
}

.cs-quote-text {
  font-family:  var(--font-heading);
  font-size:    var(--text-2xl);
  font-style:   italic;
  font-weight:  400;
  color:        var(--color-cream);
  line-height:  1.3;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid {
  padding:          var(--section-padding) 0;
  background-color: var(--color-warm-white);
  padding-top:      calc(var(--section-padding) + 3.5rem); /* offset quote card bleed */
}

.services-grid .cs-content {
  text-align:    center;
  margin-bottom: var(--space-12);
}

.services-grid .cs-title { margin-bottom: 0; }

/* 1-col → 2-col → 3-col grid */
.services-grid .cs-card-group {
  display: grid;
  gap:     2px;
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .services-grid .cs-card-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .services-grid .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

.services-grid .cs-item { position: relative; overflow: hidden; }

.services-grid .cs-link {
  display:  block;
  position: relative;
}

.services-grid .cs-picture {
  display:       block;
  aspect-ratio:  4/3;
  overflow:      hidden;
}

.services-grid .cs-picture img {
  width:      100%;
  height:     100%;
  transition: transform 0.6s ease;
}

.services-grid .cs-item:hover .cs-picture img {
  transform: scale(1.06);
}

/* Dark gradient overlay + label */
.services-grid .cs-link::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    rgba(20, 18, 14, 0.75) 0%,
    rgba(20, 18, 14, 0.1) 60%
  );
  transition: opacity var(--transition);
}

.services-grid .cs-item:hover .cs-link::after {
  opacity: 0.85;
}


/* Services card overlay: name + description */
.services-grid .cs-overlay {
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  z-index:        1;
  padding:        var(--space-6);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.services-grid .cs-name {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xl);
  font-weight:    500;
  color:          var(--color-cream);
  line-height:    1.1;
}

.services-grid .cs-desc {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    400;
  color:          rgba(245, 240, 232, 0.7);
  letter-spacing: 0.03em;
}

/* View all link */
.cs-view-all {
  display:      block;
  text-align:   center;
  margin-top:   var(--space-10);
  font-size:    var(--text-sm);
  font-weight:  500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:        var(--color-stone);
  transition:   color var(--transition);
}

.cs-view-all:hover { color: var(--color-dark); }

/* ============================================================
   PORTFOLIO GALLERY
   ============================================================ */
.portfolio-gallery {
  padding:          var(--section-padding) 0;
  background-color: var(--color-dark);
}

.portfolio-gallery .cs-content {
  text-align:    center;
  margin-bottom: var(--space-12);
}

.portfolio-gallery .cs-title { color: var(--color-cream); }

.portfolio-gallery .cs-text {
  color: rgba(245, 240, 232, 0.6);
}

/* CSS grid — masonry-like with tall items */
.portfolio-gallery .cs-image-group {
  display: grid;
  gap:     var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .portfolio-gallery .cs-image-group {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:        18rem;
  }

  .portfolio-gallery .cs-item.cs-item--tall {
    grid-row: span 2;
  }
}

@media (min-width: 64em) {
  .portfolio-gallery .cs-image-group {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows:        16rem;
  }
}

.portfolio-gallery .cs-item { overflow: hidden; }

.portfolio-gallery .cs-picture {
  width:  100%;
  height: 100%;
}

.portfolio-gallery .cs-item:not(.cs-item--tall) .cs-picture {
  aspect-ratio: 4/3;
}

.portfolio-gallery .cs-item.cs-item--tall .cs-picture {
  aspect-ratio: 3/4;
}

@media (min-width: 48em) {
  .portfolio-gallery .cs-item .cs-picture,
  .portfolio-gallery .cs-item.cs-item--tall .cs-picture {
    aspect-ratio: unset;
    height:       100%;
  }
}

.portfolio-gallery .cs-picture img {
  width:      100%;
  height:     100%;
  transition: transform 0.6s ease;
}

.portfolio-gallery .cs-item:hover .cs-picture img {
  transform: scale(1.04);
}

/* Outline button (portfolio section) */
.cs-button-outline {
  display:        block;
  width:          fit-content;
  margin:         var(--space-10) auto 0;
  padding:        var(--space-4) var(--space-10);
  background-color: transparent;
  color:          var(--color-cream);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border:         1px solid rgba(245, 240, 232, 0.3);
  transition:     border-color var(--transition), background-color var(--transition);
}

.cs-button-outline:hover {
  border-color:     var(--color-cream);
  background-color: rgba(245, 240, 232, 0.05);
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
#why-choose-289 {
  padding:          var(--section-padding) 0;
  background-color: var(--color-cream);
}

#why-choose-289 .cs-content {
  text-align:    center;
  margin-bottom: var(--space-12);
}

#why-choose-289 .cs-card-group {
  display:   grid;
  gap:       var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  #why-choose-289 .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

#why-choose-289 .cs-item {
  text-align: center;
  padding:    var(--space-8);
}

.cs-icon-wrap {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            4.5rem;
  height:           4.5rem;
  border:           1px solid var(--color-border);
  margin-bottom:    var(--space-6);
  color:            var(--color-dark);
}

.cs-icon { display: block; }

#why-choose-289 .cs-h3 {
  font-family:   var(--font-heading);
  font-size:     var(--text-2xl);
  font-weight:   600;
  color:         var(--color-dark);
  margin-bottom: var(--space-3);
}

#why-choose-289 .cs-item-text {
  font-size:   var(--text-base);
  line-height: 1.7;
  color:       var(--color-stone);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section {
  padding:          var(--section-padding) 0;
  background-color: var(--color-warm-white);
}

.contact-section .cs-container {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-12);
}

@media (min-width: 64em) {
  .contact-section .cs-container {
    flex-direction: row;
    gap:            clamp(var(--space-12), 6vw, var(--space-20));
    align-items:    flex-start;
  }

  .contact-section .cs-left  { flex: 0 0 36%; }
  .contact-section .cs-right { flex: 1; }
}

.contact-section .cs-title { color: var(--color-dark); }

/* Studio blocks */
.cs-studio-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8);
  margin-top:     var(--space-8);
}

.cs-studio-name {
  font-family:   var(--font-heading);
  font-size:     var(--text-xl);
  font-weight:   600;
  color:         var(--color-dark);
  margin-bottom: var(--space-2);
}

.cs-studio-contact {
  font-size:     var(--text-sm);
  color:         var(--color-stone);
  margin-bottom: var(--space-3);
}

.cs-studio-link {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  color:       var(--color-stone);
  margin-bottom: var(--space-2);
  transition:  color var(--transition);
}

.cs-studio-link:hover { color: var(--color-dark); }

/* Form */
.cs-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.cs-label {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  font-size:      var(--text-sm);
  font-weight:    500;
  color:          var(--color-body);
  letter-spacing: 0.03em;
}

.cs-input {
  width:            100%;
  padding:          var(--space-4) var(--space-5);
  background-color: var(--color-cream);
  border:           1px solid var(--color-border);
  border-radius:    0;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-body);
  transition:       border-color var(--transition);
  appearance:       none;
  -webkit-appearance: none;
}

.cs-input:focus {
  outline:      none;
  border-color: var(--color-dark);
}

.cs-input::placeholder { color: var(--color-stone-light); }

.cs-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8476' stroke-width='1.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--space-4) center;
  background-size:     1rem;
  padding-right:       2.5rem;
  cursor:              pointer;
}

.cs-textarea { resize: vertical; min-height: 8rem; }

.cs-submit {
  width:            100%;
  padding:          var(--space-5) var(--space-8);
  background-color: var(--color-gold);
  color:            var(--color-dark);
  border:           1px solid var(--color-gold);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      500;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  cursor:           pointer;
  transition:       background-color var(--transition), color var(--transition);
}

.cs-submit:hover {
  background-color: transparent;
  color:            var(--color-gold);
}

.cs-note {
  font-size: var(--text-xs);
  color:     var(--color-stone-light);
}

/* ============================================================
   FOOTER
   ============================================================ */
#cs-footer-269 {
  background-color: var(--color-dark);
  padding-top:      var(--section-padding);
}

#cs-footer-269 > .cs-container {
  display:        grid;
  gap:            var(--space-12);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-16);
}

@media (min-width: 48em) {
  #cs-footer-269 > .cs-container {
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-8);
  }
}

/* Column 1: Brand */
.cs-logo-group .cs-logo {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  margin-bottom: var(--space-5);
  color:         var(--color-cream);
}

.cs-logo-group .cs-logo-mark { color: var(--color-cream); }

.cs-logo-group .cs-logo-text {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.25em;
  color:          var(--color-cream);
}

.cs-logo-group .cs-text {
  font-size:     var(--text-sm);
  color:         rgba(245, 240, 232, 0.5);
  line-height:   1.7;
  margin-bottom: var(--space-6);
}

/* Ghost button on dark bg */
.cs-logo-group .cs-button-solid {
  background-color: transparent;
  color:            var(--color-cream);
  border-color:     rgba(245, 240, 232, 0.3);
}

.cs-logo-group .cs-button-solid:hover {
  background-color: var(--color-cream);
  color:            var(--color-dark);
  border-color:     var(--color-cream);
}

/* Column 2 & 3: Nav lists */
.cs-nav,
.cs-contact {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.cs-header {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-bottom:  var(--space-2);
}

.cs-nav-link {
  font-size:  var(--text-sm);
  color:      rgba(245, 240, 232, 0.6);
  transition: color var(--transition);
}

.cs-nav-link:hover { color: var(--color-cream); }

.cs-contact-li {
  font-size: var(--text-sm);
  color:     rgba(245, 240, 232, 0.6);
}

.cs-contact-link {
  color:      rgba(245, 240, 232, 0.6);
  transition: color var(--transition);
}

.cs-contact-link:hover { color: var(--color-cream); }

/* Copyright bar */
.cs-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding:    var(--space-5) 0;
}

.cs-bottom-bar .cs-container {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-3);
  align-items:     center;
  text-align:      center;
}

@media (min-width: 48em) {
  .cs-bottom-bar .cs-container {
    flex-direction:  row;
    justify-content: space-between;
    text-align:      left;
  }
}

.cs-copyright {
  font-size: var(--text-xs);
  color:     rgba(245, 240, 232, 0.35);
}

.cs-legal {
  display: flex;
  gap:     var(--space-6);
}

.cs-legal-link {
  font-size:  var(--text-xs);
  color:      rgba(245, 240, 232, 0.35);
  transition: color var(--transition);
}

.cs-legal-link:hover { color: rgba(245, 240, 232, 0.7); }

.cs-powered {
  color:      rgba(245, 240, 232, 0.35);
  transition: color var(--transition);
}

.cs-powered:hover { color: var(--color-gold); }