/*
 * ─────────────────────────────────────────────────────────────
 *  COMPONENTS.CSS  —  Premium section component library
 *  web-starter-kit v1
 *
 *  Depends on: tokens.css, base.css
 *
 *  COMPONENT INDEX
 *  01. Site Nav        — sticky transparent→solid on scroll
 *  02. Hero Full       — full-bleed photo + editorial overlay
 *  03. Hero Split      — 50/50 image + text asymmetric layout
 *  04. Feature Grid    — value props / key features, 3-col
 *  05. Card Grid       — product / menu / category cards (hover)
 *  06. Gallery         — editorial masonry-style image grid
 *  07. Testimonials    — horizontal testimonial row
 *  08. Story / About   — editorial split (image + rich text)
 *  09. CTA Band        — full-width call-to-action section
 *  10. Footer          — rich, multi-column footer
 *
 *  PATTERN CREDITS
 *  • Full-bleed hero + left-aligned logotype — damiandtla.com
 *  • Serif+sans pairing, thin rule dividers — locomotive.ca
 *  • Monochromatic warm palette, italic serif subheadings — saipua.com
 *  • Dark card overlays, product grid — dominiqueansel.com
 * ─────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════
 *  01 — SITE NAV
 *  Sticky header: starts transparent (on top of hero),
 *  transitions to solid on scroll. JS adds .is-scrolled.
 * ═══════════════════════════════════════════════════════════ */

.site-nav {
  position:   fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index:    var(--z-sticky);
  padding-block: var(--space-m);
  transition: background  var(--duration-slow) var(--ease-out),
              box-shadow  var(--duration-slow) var(--ease-out),
              padding     var(--duration-slow) var(--ease-out);
}

/* Transparent state (over hero image) */
.site-nav:not(.is-scrolled) {
  background: transparent;
}

.site-nav:not(.is-scrolled) .site-nav__logo,
.site-nav:not(.is-scrolled) .site-nav__link {
  color: var(--canvas);
}

.site-nav:not(.is-scrolled) .site-nav__cta {
  border-color: rgba(255,255,255,0.6);
  color: var(--canvas);
}

/* Solid state (when scrolled) */
.site-nav.is-scrolled {
  background:  var(--canvas);
  box-shadow:  0 1px 0 var(--rule), var(--shadow-s);
  padding-block: var(--space-s);
}

.site-nav__inner {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            var(--space-l);
}

.site-nav__logo {
  font-family:    var(--font-display);
  font-size:      var(--step-2);
  font-weight:    var(--weight-display);
  letter-spacing: var(--letter-spacing-tight);
  color:          var(--ink);
  text-decoration: none;
  transition:     color var(--duration-base) var(--ease-out);
  flex-shrink:    0;
}

.site-nav__links {
  display:    flex;
  list-style: none;
  gap:        var(--space-xl);
  padding:    0;
  margin:     0;
}

.site-nav__link {
  font-size:      var(--step--1);
  font-weight:    var(--weight-ui);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color:          var(--ink);
  text-decoration: none;
  transition:     color var(--duration-fast) var(--ease-out),
                  opacity var(--duration-fast) var(--ease-out);
  opacity: 0.75;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color:          var(--brand);
  opacity:        1;
  text-decoration: none;
}

.site-nav__cta {
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* Hamburger (mobile) */
.site-nav__toggle {
  display:    none;
  flex-direction: column;
  gap:        5px;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    var(--space-xs);
}

.site-nav__toggle span {
  display:          block;
  width:            24px;
  height:           2px;
  background:       currentColor;
  transition:       transform var(--duration-base) var(--ease-out),
                    opacity   var(--duration-fast) var(--ease-out);
}

/* Mobile nav */
@media (max-width: 768px) {
  .site-nav__links {
    display:        none;
    position:       fixed;
    inset:          0;
    background:     var(--canvas);
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            var(--space-2xl);
    z-index:        var(--z-overlay);
  }

  .site-nav__links.is-open {
    display: flex;
  }

  .site-nav__link {
    font-size:   var(--step-2);
    font-family: var(--font-display);
    opacity:     1;
  }

  .site-nav__toggle {
    display:    flex;
    z-index:    calc(var(--z-overlay) + 1);
    color:      var(--ink);
    position:   relative;
  }

  .site-nav:not(.is-scrolled) .site-nav__toggle {
    color: var(--canvas);
  }

  .site-nav__cta {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  02 — HERO FULL
 *  Full-bleed image hero with editorial text overlay.
 *  Left-aligned logotype / headline (damiandtla.com pattern).
 *  .hero-full
 * ═══════════════════════════════════════════════════════════ */

.hero-full {
  position:       relative;
  min-height:     100svh;
  display:        flex;
  align-items:    flex-end;  /* Text anchors to bottom third */
  overflow:       hidden;
}

.hero-full__bg {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center;
  /* Subtle scale-in on load */
  animation: heroScale 1.8s var(--ease-out) both;
}

@keyframes heroScale {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

/* Gradient overlay — darkens bottom for text legibility */
.hero-full::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.12) 40%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.72) 100%
  );
  pointer-events: none;
}

.hero-full__content {
  position:       relative;
  z-index:        var(--z-raised);
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  padding-block-end: clamp(3rem, 6vw, 6rem);
  width:          100%;
}

.hero-full__eyebrow {
  color:          rgba(255,255,255,0.7);
  margin-bottom:  var(--space-m);
}

.hero-full__heading {
  font-family:    var(--font-display);
  font-size:      var(--step-6);
  font-weight:    300; /* Elegant lightness for display serifs */
  letter-spacing: var(--letter-spacing-tight);
  color:          #ffffff;
  line-height:    1.05;
  max-width:      14ch;
  margin-bottom:  var(--space-l);
  text-wrap:      balance;
}

.hero-full__sub {
  font-size:   var(--step-1);
  font-weight: 300;
  color:       rgba(255,255,255,0.85);
  max-width:   44ch;
  margin-bottom: var(--space-2xl);
  line-height: var(--line-height-body);
}

.hero-full__actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-m);
  align-items: center;
}

/* Scroll indicator */
.hero-full__scroll {
  position:   absolute;
  bottom:     var(--space-l);
  right:      var(--container-pad);
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        var(--space-xs);
  color:      rgba(255,255,255,0.6);
  font-size:  var(--step--1);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  z-index:    var(--z-raised);
  animation:  scrollBounce 2s var(--ease-in-out) infinite;
  text-decoration: none;
}

.hero-full__scroll::after {
  content:      '';
  display:      block;
  width:        1px;
  height:       40px;
  background:   currentColor;
  margin-top:   var(--space-xs);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(6px); opacity: 0.9; }
}


/* ═══════════════════════════════════════════════════════════
 *  03 — HERO SPLIT
 *  Asymmetric 50/50 grid: image left (taller), content right.
 *  (dominiqueansel.com + locomotive.ca pattern)
 * ═══════════════════════════════════════════════════════════ */

.hero-split {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  min-height:     90svh;
  overflow:       hidden;
}

.hero-split__image-col {
  position:       relative;
  overflow:       hidden;
}

.hero-split__image-col img {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center;
  transition:     transform var(--duration-slow) var(--ease-out);
}

.hero-split:hover .hero-split__image-col img {
  transform: scale(1.02);
}

.hero-split__content-col {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 5rem);
  background:      var(--surface);
}

.hero-split__eyebrow {
  margin-bottom: var(--space-l);
}

.hero-split__heading {
  font-family:  var(--font-display);
  font-size:    var(--step-5);
  font-weight:  300;
  line-height:  1.1;
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-l);
}

.hero-split__body {
  font-size:    var(--step-1);
  font-weight:  300;
  color:        var(--muted);
  max-width:    44ch;
  margin-bottom: var(--space-2xl);
}

.hero-split__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-m);
}

/* Reversed: image right, text left */
.hero-split--reversed {
  direction: rtl;
}

.hero-split--reversed > * {
  direction: ltr;
}

/* Tinted content col variant */
.hero-split--tinted .hero-split__content-col {
  background: var(--brand-2);
  color:      var(--canvas);
}

.hero-split--tinted .hero-split__heading,
.hero-split--tinted .hero-split__body {
  color: var(--canvas);
}

.hero-split--tinted .hero-split__body {
  color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-split__image-col {
    aspect-ratio: 4 / 3;
    position:     relative;
    height:       auto;
  }

  .hero-split__image-col img {
    position: static;
    height:   100%;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  04 — FEATURE GRID
 *  3-column value props / key features.
 *  Thin rule separator between items (locomotive.ca).
 * ═══════════════════════════════════════════════════════════ */

.features {
  padding-block: var(--section-pad);
  background:    var(--canvas);
}

.features__header {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  margin-bottom:  var(--space-3xl);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-m);
}

.features__grid {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            0;
}

.feature-item {
  padding:        var(--space-2xl) var(--space-xl);
  border-top:     1px solid var(--rule);
  position:       relative;
  transition:     background var(--duration-base) var(--ease-out);
}

.feature-item:hover {
  background: var(--surface);
}

/* Vertical divider between columns */
.feature-item:not(:last-child) {
  border-right: 1px solid var(--rule);
}

.feature-item__icon {
  width:         40px;
  height:        40px;
  margin-bottom: var(--space-l);
  color:         var(--accent);
  flex-shrink:   0;
}

.feature-item__number {
  font-family:    var(--font-display);
  font-size:      var(--step-4);
  font-weight:    300;
  color:          var(--rule);
  line-height:    1;
  margin-bottom:  var(--space-s);
  letter-spacing: var(--letter-spacing-tight);
}

.feature-item__title {
  font-family:    var(--font-display);
  font-size:      var(--step-2);
  font-weight:    var(--weight-display);
  margin-bottom:  var(--space-m);
  line-height:    var(--line-height-heading);
}

.feature-item__body {
  font-size:      var(--step-0);
  color:          var(--muted);
  max-width:      36ch;
  line-height:    var(--line-height-body);
}

@media (max-width: 900px) {
  .features__grid {
    grid-template-columns: 1fr;
  }

  .feature-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
}


/* ═══════════════════════════════════════════════════════════
 *  05 — CARD GRID
 *  Product / menu / category cards with hover overlay.
 *  (dominiqueansel.com dark overlay pattern + locomotive hover)
 * ═══════════════════════════════════════════════════════════ */

.card-grid {
  padding-block: var(--section-pad);
  background:    var(--canvas);
}

.card-grid--dark {
  background: var(--brand-2);
}

.card-grid--dark .card-grid__title,
.card-grid--dark .card-grid__eyebrow,
.card-grid--dark .section-header__heading {
  color: var(--canvas);
}

.card-grid__header {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  margin-bottom:  var(--space-2xl);
  display:        flex;
  align-items:    flex-end;
  justify-content: space-between;
  gap:            var(--space-xl);
  flex-wrap:      wrap;
}

.card-grid__grid {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            var(--space-l);
}

/* 4-column variant */
.card-grid__grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* 2-column variant */
.card-grid__grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Card ── */
.card {
  display:         flex;
  flex-direction:  column;
  background:      var(--surface);
  border-radius:   var(--radius-m);
  overflow:        hidden;
  text-decoration: none;
  transition:      box-shadow var(--duration-base) var(--ease-out),
                   transform  var(--duration-base) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-l);
  transform:  translateY(-4px);
}

.card__image-wrap {
  position:       relative;
  overflow:       hidden;
  aspect-ratio:   4 / 3;
  flex-shrink:    0;
}

.card__image-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card:hover .card__image-wrap img {
  transform: scale(1.05);
}

/* Dark overlay on hover (dominiqueansel.com pattern) */
.card__overlay {
  position:   absolute;
  inset:      0;
  background: var(--overlay);
  display:    flex;
  align-items: center;
  justify-content: center;
  opacity:    0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.card:hover .card__overlay {
  opacity: 1;
}

.card__overlay-cta {
  color:          #ffffff;
  font-size:      var(--step--1);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  font-weight:    var(--weight-ui);
  border:         1.5px solid rgba(255,255,255,0.7);
  padding:        var(--space-s) var(--space-l);
  border-radius:  var(--radius-s);
  transition:     background var(--duration-fast) var(--ease-out);
}

.card__overlay-cta:hover {
  background: rgba(255,255,255,0.2);
}

/* Optional badge */
.card__badge {
  position:     absolute;
  top:          var(--space-m);
  left:         var(--space-m);
  background:   var(--accent);
  color:        var(--ink);
  font-size:    var(--step--1);
  font-weight:  var(--weight-ui);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding:      var(--space-2xs) var(--space-s);
  border-radius: var(--radius-pill);
  z-index:      var(--z-raised);
}

.card__body {
  padding:    var(--space-l);
  flex:       1;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-xs);
}

.card__eyebrow {
  color:      var(--muted);
}

.card__title {
  font-family:  var(--font-display);
  font-size:    var(--step-2);
  font-weight:  var(--weight-display);
  line-height:  var(--line-height-heading);
  color:        var(--ink);
  letter-spacing: var(--letter-spacing-tight);
}

.card__desc {
  font-size:  var(--step--1);
  color:      var(--muted);
  flex:       1;
  max-width:  none;
}

.card__footer {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-top:     auto;
  padding-top:    var(--space-m);
  border-top:     1px solid var(--rule);
}

.card__price {
  font-family:    var(--font-mono);
  font-size:      var(--step-1);
  font-weight:    var(--weight-ui);
  color:          var(--brand);
}

/* Card without image — text only */
.card--text-only .card__body {
  padding-block: var(--space-2xl);
}

/* Featured card (spans 2 columns) */
.card--featured {
  grid-column: span 2;
}

.card--featured .card__image-wrap {
  aspect-ratio: 16 / 7;
}

@media (max-width: 1024px) {
  .card-grid__grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
  .card--featured {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .card-grid__grid,
  .card-grid__grid--4col,
  .card-grid__grid--2col {
    grid-template-columns: 1fr;
  }

  .card--featured {
    grid-column: span 1;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  06 — GALLERY
 *  Editorial image grid — two-row asymmetric layout.
 *  Inspired by damiandtla.com's full-width image with caption.
 * ═══════════════════════════════════════════════════════════ */

.gallery {
  padding-block: var(--section-pad);
  background:    var(--brand-2);
  overflow:      hidden;
}

.gallery__header {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  margin-bottom:  var(--space-2xl);
  display:        flex;
  align-items:    flex-end;
  justify-content: space-between;
  gap:            var(--space-xl);
}

.gallery__header-text .section-header__heading,
.gallery__header-text .eyebrow {
  color: var(--canvas);
}

/* Masonry-inspired grid using CSS Grid */
.gallery__grid {
  max-width:      var(--container-wide);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:    auto auto;
  gap:                   var(--space-s);
}

/* Big feature image: 7 cols */
.gallery__item--feature {
  grid-column: span 7;
  grid-row:    span 2;
}

/* Tall portrait: 5 cols, single row */
.gallery__item--tall {
  grid-column: span 5;
}

/* Wide landscape: 5 cols */
.gallery__item--wide {
  grid-column: span 5;
}

/* Small square: 3 cols */
.gallery__item--small {
  grid-column: span 3;
}

/* Two smalls side by side: 2 cols each */
.gallery__item--half {
  grid-column: span 2;
}

.gallery__item {
  position:   relative;
  overflow:   hidden;
  background: var(--surface);
  border-radius: var(--radius-s);
}

.gallery__item img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  transition:     transform var(--duration-slow) var(--ease-out);
  min-height:     200px;
}

.gallery__item:hover img {
  transform: scale(1.04);
}

/* Caption hover reveal */
.gallery__caption {
  position:    absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding:     var(--space-l);
  background:  linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color:       #ffffff;
  font-size:   var(--step--1);
  font-style:  italic;
  font-family: var(--font-display);
  opacity:     0;
  transform:   translateY(8px);
  transition:  opacity   var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out);
}

.gallery__item:hover .gallery__caption {
  opacity:   1;
  transform: none;
}

@media (max-width: 900px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__item--feature,
  .gallery__item--tall,
  .gallery__item--wide,
  .gallery__item--small,
  .gallery__item--half {
    grid-column: span 1;
    grid-row:    auto;
  }

  .gallery__item img {
    min-height: 240px;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  07 — TESTIMONIALS
 *  Horizontal row of testimonial cards.
 *  Block quote pattern with accent border (base.css blockquote).
 * ═══════════════════════════════════════════════════════════ */

.testimonials {
  padding-block: var(--section-pad);
  background:    var(--surface);
  overflow:      hidden;
}

.testimonials__header {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  margin-bottom:  var(--space-3xl);
  text-align:     center;
}

.testimonials__row {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            var(--space-xl);
  align-items:    start;
}

.testimonial-card {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-l);
  padding:         var(--space-2xl);
  background:      var(--canvas);
  border-radius:   var(--radius-m);
  border-top:      3px solid var(--accent);
  transition:      box-shadow var(--duration-base) var(--ease-out),
                   transform  var(--duration-base) var(--ease-out);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-m);
  transform:  translateY(-2px);
}

/* Star rating */
.testimonial-card__stars {
  display:    flex;
  gap:        2px;
  color:      var(--accent);
  font-size:  var(--step-0);
}

.testimonial-card__quote {
  font-family:  var(--font-display);
  font-style:   italic;
  font-size:    var(--step-1);
  line-height:  var(--line-height-heading);
  color:        var(--ink);
  position:     relative;
  max-width:    none;
}

/* Large decorative quotation mark */
.testimonial-card__quote::before {
  content:      '\201C';
  font-size:    var(--step-5);
  line-height:  0.8;
  color:        var(--accent);
  display:      block;
  margin-bottom: var(--space-s);
  font-style:   normal;
  opacity:      0.7;
}

.testimonial-card__author {
  display:    flex;
  align-items: center;
  gap:        var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.testimonial-card__avatar {
  width:         48px;
  height:        48px;
  border-radius: var(--radius-pill);
  object-fit:    cover;
  flex-shrink:   0;
}

/* Initials fallback */
.testimonial-card__avatar-fallback {
  width:           48px;
  height:          48px;
  border-radius:   var(--radius-pill);
  background:      var(--brand);
  color:           var(--canvas);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--step-0);
  font-weight:     var(--weight-ui);
  flex-shrink:     0;
}

.testimonial-card__name {
  font-weight:    var(--weight-ui);
  font-size:      var(--step-0);
  color:          var(--ink);
}

.testimonial-card__meta {
  font-size:  var(--step--1);
  color:      var(--muted);
}

@media (max-width: 900px) {
  .testimonials__row {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  08 — STORY / ABOUT SPLIT
 *  Editorial two-column section (image + rich text).
 *  Asymmetric: image 55%, text 45% — off-grid feel.
 *  (damiandtla.com gallery + locomotive.ca two-column)
 * ═══════════════════════════════════════════════════════════ */

.story {
  padding-block: var(--section-pad);
  background:    var(--canvas);
  overflow:      hidden;
}

.story__inner {
  max-width:      var(--container-wide);
  margin-inline:  auto;
  display:        grid;
  grid-template-columns: 55fr 45fr;
  min-height:     600px;
}

.story__image-col {
  position:   relative;
  overflow:   hidden;
  min-height: 520px;
}

.story__image-col img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.story:hover .story__image-col img {
  transform: scale(1.02);
}

.story__content-col {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         clamp(3rem, 6vw, 7rem) clamp(2.5rem, 5vw, 5rem);
  background:      var(--surface);
}

.story__eyebrow {
  margin-bottom: var(--space-l);
}

.story__heading {
  font-family:  var(--font-display);
  font-size:    var(--step-4);
  font-weight:  300;
  line-height:  1.15;
  margin-bottom: var(--space-m);
}

/* Italic serif subheading (saipua.com pattern) */
.story__subtitle {
  font-family:  var(--font-display);
  font-style:   italic;
  font-size:    var(--step-2);
  color:        var(--muted);
  margin-bottom: var(--space-l);
  line-height:  var(--line-height-heading);
  max-width:    none;
}

.story__body {
  font-size:      var(--step-0);
  color:          var(--muted);
  max-width:      none;
  margin-bottom:  var(--space-2xl);
  line-height:    var(--line-height-body);
}

.story__body + .story__body {
  margin-top: calc(-1 * var(--space-l));
}

/* Thin rule + stat (editorial accent) */
.story__stats {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-2xl);
  padding-top: var(--space-xl);
  border-top:  1px solid var(--rule);
  margin-top:  var(--space-l);
  margin-bottom: var(--space-2xl);
}

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

.story__stat-number {
  font-family:    var(--font-display);
  font-size:      var(--step-4);
  font-weight:    300;
  color:          var(--brand);
  line-height:    1;
}

.story__stat-label {
  font-size:      var(--step--1);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color:          var(--muted);
}

/* Reversed: text left, image right */
.story--reversed .story__inner {
  grid-template-columns: 45fr 55fr;
}

.story--reversed .story__image-col {
  order: 2;
}

.story--reversed .story__content-col {
  order: 1;
}

@media (max-width: 900px) {
  .story__inner,
  .story--reversed .story__inner {
    grid-template-columns: 1fr;
  }

  .story__image-col,
  .story--reversed .story__image-col {
    order:        1;
    position:     relative;
    min-height:   320px;
    height:       340px;
  }

  .story__content-col,
  .story--reversed .story__content-col {
    order: 2;
  }

  .story__image-col img {
    position: absolute;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  09 — CTA BAND
 *  Full-width brand-coloured call-to-action section.
 *  Two variants: solid brand / editorial image background.
 * ═══════════════════════════════════════════════════════════ */

.cta-band {
  padding-block:  clamp(4rem, 8vw, 8rem);
  background:     var(--brand);
  position:       relative;
  overflow:       hidden;
  text-align:     center;
}

/* Subtle texture overlay */
.cta-band::before {
  content:     '';
  position:    absolute;
  inset:       0;
  background-image:  radial-gradient(ellipse at 70% 50%,
    rgba(var(--accent-rgb), 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.cta-band__inner {
  position:       relative;
  z-index:        var(--z-raised);
  max-width:      var(--container-text);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-l);
}

.cta-band__eyebrow {
  color:          rgba(255,255,255,0.65);
}

.cta-band__heading {
  font-family:    var(--font-display);
  font-size:      var(--step-4);
  font-weight:    300;
  letter-spacing: var(--letter-spacing-tight);
  color:          #ffffff;
  text-align:     center;
  line-height:    1.15;
}

.cta-band__body {
  font-size:   var(--step-1);
  font-weight: 300;
  color:       rgba(255,255,255,0.8);
  text-align:  center;
  max-width:   44ch;
}

.cta-band__actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-m);
  justify-content: center;
  margin-top: var(--space-m);
}

/* Image background variant */
.cta-band--image {
  background:  var(--brand-2);
}

.cta-band--image .cta-band__bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.35;
}

/* Dark (inverted) variant */
.cta-band--dark {
  background:  var(--ink);
}

/* Light (canvas) variant — on dark pages */
.cta-band--light {
  background: var(--canvas);
}

.cta-band--light .cta-band__heading,
.cta-band--light .cta-band__body {
  color: var(--ink);
}

.cta-band--light .cta-band__eyebrow {
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════
 *  10 — FOOTER
 *  Rich 4-column footer with newsletter + social links.
 *  Dense small type (locomotive.ca footer pattern).
 * ═══════════════════════════════════════════════════════════ */

.site-footer {
  background:    var(--brand-2);
  color:         rgba(255,255,255,0.75);
  padding-top:   clamp(4rem, 8vw, 8rem);
  padding-bottom: var(--space-2xl);
}

/* Top rule (editorial) */
.site-footer::before {
  content:    '';
  display:    block;
  max-width:  var(--container);
  margin:     0 auto var(--space-3xl);
  padding-inline: var(--container-pad);
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* Resets the pseudo-element hack */
.site-footer__top-rule {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  border-top:     1px solid rgba(255,255,255,0.12);
  margin-bottom:  var(--space-3xl);
}

.site-footer__grid {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap:            var(--space-3xl) var(--space-2xl);
}

/* Col 1: Brand + description */
.site-footer__brand .site-footer__logo {
  font-family:    var(--font-display);
  font-size:      var(--step-3);
  font-weight:    300;
  letter-spacing: var(--letter-spacing-tight);
  color:          #ffffff;
  text-decoration: none;
  display:        block;
  margin-bottom:  var(--space-l);
}

.site-footer__brand p {
  font-size:  var(--step--1);
  color:      rgba(255,255,255,0.55);
  max-width:  30ch;
  line-height: var(--line-height-body);
}

.site-footer__social {
  display:    flex;
  gap:        var(--space-m);
  margin-top: var(--space-l);
  list-style: none;
  padding:    0;
}

.site-footer__social a {
  display:    flex;
  align-items: center;
  justify-content: center;
  width:      36px;
  height:     36px;
  border-radius: var(--radius-pill);
  border:     1px solid rgba(255,255,255,0.2);
  color:      rgba(255,255,255,0.6);
  transition: border-color var(--duration-fast) var(--ease-out),
              color        var(--duration-fast) var(--ease-out),
              background   var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.site-footer__social a:hover {
  border-color: var(--accent);
  color:        var(--accent);
  background:   rgba(var(--accent-rgb), 0.1);
  text-decoration: none;
}

.site-footer__social svg {
  width:  16px;
  height: 16px;
  display: block;
}

/* Col 2 & 3: Link columns */
.site-footer__col-title {
  font-size:      var(--step--1);
  font-weight:    var(--weight-ui);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color:          #ffffff;
  margin-bottom:  var(--space-l);
}

.site-footer__links {
  list-style: none;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-s);
}

.site-footer__links a {
  font-size:   var(--step--1);
  color:       rgba(255,255,255,0.55);
  text-decoration: none;
  transition:  color var(--duration-fast) var(--ease-out);
}

.site-footer__links a:hover {
  color:           rgba(255,255,255,0.9);
  text-decoration: none;
}

/* Col 4: Newsletter */
.site-footer__newsletter-title {
  color:         #ffffff;
  margin-bottom: var(--space-m);
}

.site-footer__newsletter-form {
  display:   flex;
  gap:       var(--space-xs);
  flex-wrap: wrap;
}

.site-footer__newsletter-form input {
  flex:        1;
  min-width:   0;
  background:  rgba(255,255,255,0.08);
  border:      1.5px solid rgba(255,255,255,0.15);
  color:       #ffffff;
  font-size:   var(--step--1);
  padding:     var(--space-s) var(--space-m);
}

.site-footer__newsletter-form input::placeholder {
  color: rgba(255,255,255,0.35);
}

.site-footer__newsletter-form input:focus-visible {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(var(--accent-rgb), 0.2);
}

.site-footer__newsletter-form .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Bottom bar */
.site-footer__bottom {
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  padding-top:    var(--space-2xl);
  margin-top:     var(--space-3xl);
  border-top:     1px solid rgba(255,255,255,0.08);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            var(--space-m);
}

.site-footer__copy {
  font-size:   var(--step--1);
  color:       rgba(255,255,255,0.35);
  max-width:   none;
}

.site-footer__legal {
  display:    flex;
  gap:        var(--space-l);
  list-style: none;
  padding:    0;
}

.site-footer__legal a {
  font-size:   var(--step--1);
  color:       rgba(255,255,255,0.35);
  text-decoration: none;
  transition:  color var(--duration-fast) var(--ease-out);
}

.site-footer__legal a:hover {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-2xl);
  }

  .site-footer__bottom {
    flex-direction: column;
    text-align:     center;
  }

  .site-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  SHARED SECTION-HEADER PATTERN
 *  Reusable across all sections.
 * ═══════════════════════════════════════════════════════════ */

.section-header {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-m);
}

.section-header--center {
  text-align:  center;
  align-items: center;
}

.section-header__heading {
  font-family:    var(--font-display);
  font-size:      var(--step-4);
  font-weight:    300;
  line-height:    var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  max-width:      16ch;
  text-wrap:      balance;
}

.section-header--center .section-header__heading {
  max-width: 24ch;
}

.section-header__sub {
  font-size:   var(--step-1);
  font-weight: 300;
  color:       var(--muted);
  max-width:   48ch;
  line-height: var(--line-height-body);
}


/* ═══════════════════════════════════════════════════════════
 *  NAV SCROLL BEHAVIOUR — JS helper target
 *  Add this small snippet in the page's <script> tag:
 *
 *  const nav = document.querySelector('.site-nav');
 *  window.addEventListener('scroll', () => {
 *    nav.classList.toggle('is-scrolled', window.scrollY > 40);
 *  }, { passive: true });
 *
 *  const toggle = document.querySelector('.site-nav__toggle');
 *  const links  = document.querySelector('.site-nav__links');
 *  toggle?.addEventListener('click', () => {
 *    links.classList.toggle('is-open');
 *  });
 * ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
 *  REVEAL ANIMATION — JS helper target
 *  Add this snippet to wire up scroll reveals:
 *
 *  const els = document.querySelectorAll('.reveal');
 *  els.forEach(el => el.classList.add('is-hidden'));
 *  const io = new IntersectionObserver((entries) => {
 *    entries.forEach(e => {
 *      if (e.isIntersecting) {
 *        e.target.classList.remove('is-hidden');
 *        io.unobserve(e.target);
 *      }
 *    });
 *  }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
 *  els.forEach(el => io.observe(el));
 * ═══════════════════════════════════════════════════════════ */