/* ==========================================================================
   DESIGN SYSTEM — LAYOUTS
   ==========================================================================

   Page-level layout patterns composed from variables and components.
   These define how sections, heroes, and content areas are structured
   on a page. They sit above components but below channel adapters.

   NAMING CONVENTION: BEM (Block Element Modifier)
   - Block:    .hero                  — the layout pattern
   - Element:  .hero__title           — a piece inside it
   - Modifier: .hero--split           — a variant

   LAYOUTS IN THIS FILE:
   1. Section         — Full-width page section wrapper
   2. Hero            — Large hero for page openers
   2b. Hero Landing   — Full-viewport hero with bar + nav
   2c. Case Study     — case-hero, case-header, case-image, case-duo, case-grid, case-approach
   3. Page Header     — Simpler header for inner pages
   4. Split           — Two-column content + media (+ body, footer, tags, action, nav-back)
   5. CTA Band        — Call-to-action strip
   6. Full-Bleed      — Break out of container to viewport width
   7. Site Header     — Sticky navigation bar (global)
   8. Site Footer     — Page footer with columns (global)
   9. Utilities       — Containers, rows, stacks, grids
   10. Process Flow   — Horizontal 4-step process
   11. Alignment      — text-center, justify-center

   IMPORT ORDER:
   1. globals.css    (variables)
   2. base.css       (element styles)
   3. components.css (components)
   4. layouts.css    (this file — layouts + layout utilities)
   5. [channel adapter].css

   ========================================================================== */


/* ==========================================================================
   1. SECTION
   ==========================================================================
   Full-width page section wrapper. Controls vertical rhythm between
   major content blocks. Nest a .container inside for content width.

   Usage: <section class="section">
            <div class="container container--2xl">
              ...content...
            </div>
          </section>

   Variants:
     Spacing:  --sm, --lg, --flush (zero padding), --full-height (100vh)
     Bleed:    --hero-bleed (pulls behind fixed header)
     Surface:  --filled (subtle contrast)
               --contrast (inverted — dark in light mode, light in dark mode)
               --primary (brand color background)
   ========================================================================== */

.section {
  width: 100%;
  padding: var(--space-4xl) 0;
}

.section--sm {
  padding: var(--space-2xl) 0;
}

.section--lg {
  padding: var(--space-4xl) 0;
}

/* Zero-padding for full-bleed image sections */
.section--flush {
  padding: 0;
}

/* Pulls section behind the fixed header for edge-to-edge hero images */
.section--hero-bleed {
  padding: 0;
  margin-top: calc(-1 * (var(--header-height) + var(--space-lg) + var(--space-md)));
  position: relative;
  z-index: 0;
}

/* 100vh sections for gallery showcase or dramatic moments */
.section--full-height {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Surface Variants --- */

/* Subtle contrast — sunken background for alternating sections */
.section--filled {
  background-color: var(--color-surface-sunken);
}

/* Strong contrast — inverts against the page.
   Light mode: dark background, light text.
   Dark mode: light background, dark text (variables handle the flip). */
.section--contrast {
  background-color: var(--color-neutral-900);
  color: var(--color-text-inverse);
}

.section--contrast h1,
.section--contrast h2,
.section--contrast h3,
.section--contrast h4,
.section--contrast h5,
.section--contrast h6 {
  color: inherit;
}

.section--contrast p {
  color: var(--color-text-inverse);
  opacity: var(--opacity-subtle);
}

.section--contrast .section-header__eyebrow,
.section--contrast .hero__eyebrow {
  color: var(--color-primary-light);
  opacity: var(--opacity-full);
  
}

.section--contrast .section-header__title,
.section--contrast .hero__title,
.section--contrast .cta-band__title {
  opacity: var(--opacity-full);
}

.section--contrast .btn--outline {
  color: inherit;
  border-color: currentColor;
}

.section--contrast .btn--outline:hover {
  background-color: var(--color-text-inverse);
  color: var(--color-neutral-900);
}

/* Cards and raised surfaces inside contrast sections */
.section--contrast .card,
.section--contrast .testimonial--card {
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Process-step cards in contrast: borderless, tall, icon-top / text-bottom */
.section--contrast .process-step--card {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: var(--space-2xl) var(--space-lg);
  min-height: 20rem;
}

.section--contrast .process-step--card .process-step__title {
  margin-top: auto;
}

.section--contrast .process-step__number,
.section--contrast .process-step__title {
  color: var(--color-text-inverse);
}

.section--contrast .process-step__description {
  color: var(--color-text-inverse);
  opacity: var(--opacity-subtle);
}

/* Colored process-step cards in contrast sections — pastel bg overrides transparent */
.section--contrast .process-step--purple,
.section--contrast .process-step--mint,
.section--contrast .process-step--peach,
.section--contrast .process-step--blue {
  border-radius: 0;
}

.section--contrast .process-step--purple { background-color: var(--color-primary-light); }
.section--contrast .process-step--mint   { background-color: var(--color-secondary-light); }
.section--contrast .process-step--peach  { background-color: var(--color-tertiary-light); }
.section--contrast .process-step--blue   { background-color: var(--color-accent-1-light); }

.section--contrast .process-step--purple .process-step__number svg { color: var(--color-primary-dark); }
.section--contrast .process-step--mint   .process-step__number svg { color: var(--color-secondary-dark); }
.section--contrast .process-step--peach  .process-step__number svg { color: var(--color-tertiary-dark); }
.section--contrast .process-step--blue   .process-step__number svg { color: var(--color-accent-1-dark); }

.section--contrast .process-step--purple .process-step__title,
.section--contrast .process-step--mint   .process-step__title,
.section--contrast .process-step--peach  .process-step__title,
.section--contrast .process-step--blue   .process-step__title {
  color: var(--color-neutral-900);
  margin-top: 0;
}

.section--contrast .process-step--purple .process-step__description,
.section--contrast .process-step--mint   .process-step__description,
.section--contrast .process-step--peach  .process-step__description,
.section--contrast .process-step--blue   .process-step__description {
  color: var(--color-neutral-700);
  opacity: var(--opacity-full);
}

.section--contrast .process-step--lg {
  padding: var(--space-3xl) var(--space-xl);
  min-height: 24rem;
}

/* Editorial prose inherits inverse text in contrast sections — full opacity (main content) */
.section--contrast .prose--editorial p {
  color: var(--color-text-inverse);
  opacity: var(--opacity-full);
}

/* Metrics in contrast sections */
.section--contrast .metric__value {
  color: var(--color-primary-light);
}

.section--contrast .metric__label {
  color: var(--color-text-inverse);
  opacity: var(--opacity-subtle);
}

/* Testimonial in contrast sections */
.section--contrast .testimonial__quote {
  color: var(--color-text-inverse);
}

.section--contrast .testimonial__author {
  color: var(--color-text-inverse);
}

.section--contrast .testimonial__role {
  color: var(--color-text-inverse);
  opacity: var(--opacity-muted);
}

/* Left-aligned editorial — breaks the all-centered pattern */
.section--editorial {
  text-align: left;
}

/* Brand primary background */
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.section--primary h1,
.section--primary h2,
.section--primary h3,
.section--primary h4,
.section--primary h5,
.section--primary h6 {
  color: var(--color-white);
}

.section--primary p {
  color: var(--color-white);
  opacity: var(--opacity-subtle);
}

.section--primary .section-header__eyebrow,
.section--primary .hero__eyebrow {
  color: var(--color-white);
  opacity: var(--opacity-muted);
}

.section--primary .btn--primary {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.section--primary .btn--primary:hover {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-100);
}

.section--primary .btn--outline {
  color: var(--color-white);
  border-color: var(--color-white);
}

.section--primary .btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Hero landing — 90vh with ultra-subtle mesh gradient.
   Uses brand tints at ~4% opacity for a barely-there texture. */
/* Hero landing wrapper — takes remaining viewport after header,
   pushes logo bar to bottom edge. Wrap .section--hero + logo bar
   in a .hero-landing div. */
.hero-landing {
  display: flex;
  flex-direction: column;
  min-height: max(calc(100vh - var(--header-height)), 600px);
}

/* Section--hero inside hero-landing stretches to fill available height */
.hero-landing > .section--hero {
  flex: 1;
  display: flex;
  padding: 0;
}

.hero-landing > .section--hero .container--full {
  flex: 1;
  display: flex;
}

/* First split in flush section: header border-bottom provides the top line */
.section--flush > .split:first-child {
  border-top: none;
}

/* Hero bar — CTAs + logo slider in one row (20/20/60) */
.hero-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border-top: var(--border-thin) solid var(--color-neutral-800);
}

.hero-bar .logo-bar {
  border-left: none;
}

/* Hero nav — 2-column grid bar (standalone fallback) */
.hero-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--border-thin) solid var(--color-neutral-800);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

.hero-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  text-decoration: none;
  border-right: var(--border-thin) solid var(--color-neutral-800);
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.hero-nav__item svg {
  width: 1.25em;
  height: 1.25em;
}

/* Base 2-col hero-nav: square tiles, bigger icons, column layout, hover-reveal */
.hero-nav:not([class*="hero-nav--"]) .hero-nav__item {
  flex-direction: column;
  gap: 0;
  aspect-ratio: 5 / 3;
  padding: var(--space-xl);
  overflow: hidden;
}

.hero-nav:not([class*="hero-nav--"]) .hero-nav__item svg {
  width: 24px;
  height: 24px;
  transition: width var(--duration-default) var(--ease-default),
              height var(--duration-default) var(--ease-default);
}

.hero-nav:not([class*="hero-nav--"]) .hero-nav__item:hover svg {
  width: 18px;
  height: 18px;
}

.hero-nav:not([class*="hero-nav--"]) .hero-nav__item:hover .hero-nav__label {
  max-height: 2em;
  opacity: 1;
}

.hero-nav__item:last-child {
  border-right: none;
}

/* Secondary hover — peach bg, text stays black */
.hero-nav__item:hover {
  background-color: var(--color-tertiary-light);
  color: var(--color-text-primary);
}

/* Next project — mint hover */
.hero-nav__item--next:hover {
  background-color: var(--color-secondary-light);
}

/* Primary — purple CTA, white text, darker on hover */
.hero-nav__item--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.hero-nav__item--primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* Mid-width: hide hero-bar icons before text wraps */
@media (max-width: 1439px) {
  .hero-bar > .hero-nav__item svg {
    display: none;
  }
}

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

  .hero-bar .logo-bar {
    border-left: none;
    /* No extra border-top — hero-bar children already bordered by bottom of previous item */
  }

  .hero-bar > .hero-nav__item {
    border-right: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
    padding: var(--space-2xl) var(--space-xl);
    font-size: var(--text-xl);
  }

  .hero-nav {
    grid-template-columns: 1fr;
  }

  .hero-nav__item {
    border-right: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
    padding: var(--space-xl);
    font-size: var(--text-lg);
  }

  .hero-nav__item:last-child {
    border-bottom: none;
  }

  .hero-nav--5col {
    grid-template-columns: repeat(5, 1fr);
  }

  .hero-nav--5col .hero-nav__item {
    border-right: var(--border-thin) solid var(--color-neutral-800);
    border-bottom: none;
  }

  .hero-nav--5col .hero-nav__item:last-child {
    border-right: none;
  }

  .hero-nav--3col {
    grid-template-columns: 1fr;
  }

  .hero-nav--3col .hero-nav__item {
    border-right: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
  }

  .hero-nav--3col .hero-nav__item:last-child {
    border-bottom: none;
  }

  .hero-nav--4col {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hero-nav--4col .hero-nav__item {
    border-right: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
    gap: var(--space-sm);
  }

  .hero-nav--4col .hero-nav__item:nth-child(odd) {
    border-right: var(--border-thin) solid var(--color-neutral-800);
  }

  .hero-nav--4col .hero-nav__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  /* Show labels on mobile — no hover needed */
  .hero-nav--4col .hero-nav__label {
    max-height: 2em;
    opacity: 1;
  }

  /* Don't stretch to full viewport on mobile */
  .contact-board {
    min-height: auto;
  }
}

/* Hero nav — 5-column variant (social links, icon rows) */
.hero-nav--5col {
  grid-template-columns: repeat(5, 1fr);
}

.hero-nav--5col .hero-nav__item {
  flex-direction: column;
  gap: 0;
  height: 8rem;
  padding: var(--space-lg);
  font-size: var(--text-sm);
  overflow: hidden;
  transition: background-color var(--duration-fast) var(--ease-default),
              gap var(--duration-default) var(--ease-default);
}

.hero-nav--5col .hero-nav__item svg {
  width: 24px;
  height: 24px;
  transition: width var(--duration-default) var(--ease-default),
              height var(--duration-default) var(--ease-default);
}

.hero-nav--5col .hero-nav__item:hover svg {
  width: 18px;
  height: 18px;
}

.hero-nav--5col .hero-nav__item:hover {
  gap: var(--space-sm);
}

/* Label hidden by default, revealed on hover */
.hero-nav__label {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: max-height var(--duration-default) var(--ease-default),
              opacity var(--duration-default) var(--ease-default);
}

.hero-nav--5col .hero-nav__item:hover .hero-nav__label {
  max-height: 2em;
  opacity: 1;
}

/* Hero nav — 3-column variant (direct contact tiles) */
.hero-nav--3col {
  grid-template-columns: repeat(3, 1fr);
}

.hero-nav--3col .hero-nav__item {
  flex-direction: column;
  gap: var(--space-sm);
  height: 10rem;
  padding: var(--space-xl);
  font-size: var(--text-lg);
}

.hero-nav--3col .hero-nav__item svg {
  width: 32px;
  height: 32px;
}

/* Hero nav — 4-column variant (contact board, 4×2 grid) */
.hero-nav--4col {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
}

.hero-nav--4col .hero-nav__item {
  flex-direction: column;
  gap: 0;
  padding: var(--space-xl);
  font-size: var(--text-sm);
  overflow: hidden;
  transition: background-color var(--duration-fast) var(--ease-default),
              gap var(--duration-default) var(--ease-default);
}

.hero-nav--4col .hero-nav__item svg {
  width: 40px;
  height: 40px;
  transition: width var(--duration-default) var(--ease-default),
              height var(--duration-default) var(--ease-default);
}

.hero-nav--4col .hero-nav__item:hover svg {
  width: 28px;
  height: 28px;
}

.hero-nav--4col .hero-nav__item:hover {
  gap: var(--space-sm);
}

.hero-nav--4col .hero-nav__item:hover .hero-nav__label {
  max-height: 2em;
  opacity: 1;
}

/* 4col borders: right on all except 4th, bottom on first row */
.hero-nav--4col .hero-nav__item:nth-child(4n) {
  border-right: none;
}

.hero-nav--4col .hero-nav__item:nth-child(-n+4) {
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

/* Contact board — full-viewport flex wrapper */
.contact-board {
  display: flex;
  flex-direction: column;
  min-height: max(calc(100vh - var(--header-height)), 600px);
}

.contact-board > .hero-nav--4col {
  flex: 1;
}

/* --- Contact page mobile overrides (must come after desktop --4col styles) --- */
@media (max-width: 768px) {
  .hero-nav--4col {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hero-nav--4col .hero-nav__item {
    border-right: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
    gap: var(--space-md);
    font-size: var(--text-xs);
  }

  .hero-nav--4col .hero-nav__item:nth-child(odd) {
    border-right: var(--border-thin) solid var(--color-neutral-800);
  }

  .hero-nav--4col .hero-nav__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .hero-nav--4col .hero-nav__label {
    max-height: 2em;
    opacity: 1;
  }

  .contact-board {
    min-height: auto;
  }

  .contact-board > .hero-nav--4col {
    flex: none;
  }
}

/* Pulse animation for accent banners */
@keyframes pulse-mint {
  0%, 100% { background-color: var(--color-secondary-light); }
  50% { background-color: var(--color-secondary); }
}

.hero-nav__item--accent {
  animation: pulse-mint 4s ease-in-out infinite;
}

/* Hero nav — compact strip (inline CTA bar, flat tiles, always-visible labels) */
.hero-nav--compact {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  border-top: var(--border-thin) solid var(--color-neutral-800);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

.hero-nav--compact .hero-nav__item {
  flex-direction: row;
  gap: var(--space-sm);
  padding: 0 var(--space-xl);
  min-height: 72px;
  justify-content: center;
  align-items: center;
}

.hero-nav--compact .hero-nav__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: none;
}

.hero-nav--compact .hero-nav__item:hover svg {
  width: 20px;
  height: 20px;
}

.hero-nav--compact .hero-nav__label {
  max-height: none;
  opacity: 1;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
}

.hero-nav--compact .hero-nav__item:hover .hero-nav__label {
  max-height: none;
  opacity: 1;
}

.hero-nav--compact .hero-nav__item:hover {
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .hero-nav--compact {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-nav--compact .hero-nav__item {
    border-right: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
  }

  .hero-nav--compact .hero-nav__item:nth-child(odd) {
    border-right: var(--border-thin) solid var(--color-neutral-800);
  }

  .hero-nav--compact .hero-nav__item:last-child,
  .hero-nav--compact .hero-nav__item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
}

/* Hero nav — full-width single item (Book a Call, single CTA) */
.hero-nav--full {
  grid-template-columns: 1fr;
}

/* Stacked hero-navs: remove double border between them */
.hero-nav + .hero-nav {
  border-top: none;
}

/* Accent item — mint background for status banners */
.hero-nav__item--accent {
  background-color: var(--color-secondary-light);
  color: var(--color-text-primary);
}

.hero-nav__item--accent:hover {
  background-color: var(--color-secondary);
}

/* Info item — multi-line text block, left-aligned */
.hero-nav__item--info {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Hero-nav inside split__footer: footer already has border-top */
.split__footer > .hero-nav:first-child {
  border-top: none;
}

/* Social links (5col) inside split__footer: explicit border-top (higher specificity to beat :first-child rule) */
.split__footer > .hero-nav.hero-nav--5col {
  border-top: var(--border-thin) solid var(--color-neutral-800);
}

/* Last hero-nav in footer: split already has border-bottom */
.split__footer > .hero-nav:last-child {
  border-bottom: none;
}

/* --- Case Study Hero ---
   Full-viewport wrapper: hero image fills remaining space,
   meta band sits at the bottom. Together they fill 100vh. */

.case-hero {
  display: flex;
  flex-direction: column;
  height: max(calc(100vh - var(--header-height)), 600px);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
  overflow: hidden;
}

.case-hero__image {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  background-color: var(--color-neutral-900);
}

.case-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.case-hero .deliverables {
  border-top: var(--border-thin) solid var(--color-neutral-800);
  flex-shrink: 0;
}

/* Case-hero deliverables — fully static, zero hover effects */
.case-hero .deliverables__item,
.case-hero .deliverables__item:hover {
  background-color: var(--color-surface-page);
  gap: var(--space-md);
  cursor: default;
  transition: none;
}

.case-hero .deliverables__item svg,
.case-hero .deliverables__item:hover svg {
  width: 48px;
  height: 48px;
  color: var(--color-neutral-600);
  transition: none;
}

.case-hero .deliverables__label,
.case-hero .deliverables__item:hover .deliverables__label {
  max-height: none;
  opacity: 1;
}

/* --- Case Study Title ---
   Full-width bordered block. Title scales to fill ~90% of screen width.
   Sits as its own grid row between hero and description. */

/* --- Case Study Header ---
   Two-column bordered block: title left, overview right. */

.case-header {
  display: grid;
  grid-template-columns: 2fr 3fr;
  width: 100%;
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

.case-header__title {
  display: flex;
  align-items: flex-start;
  padding: var(--space-4xl) var(--space-3xl);
  border-right: var(--border-thin) solid var(--color-neutral-800);
}

.case-header__title h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.case-header__overview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4xl) var(--space-3xl);
}

/* --- Case Study Image ---
   Full-width bordered image block. Grid-connected (no top border). */

.case-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
  overflow: hidden;
  background-color: var(--color-neutral-900);
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Case Study Duo ---
   Two images side by side, 50/50, full-width bordered.
   Grid lines via gap + background-color. */

.case-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--border-thin);
  background-color: var(--color-neutral-800);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

.case-duo__item {
  overflow: hidden;
  background-color: var(--color-neutral-900);
}

.case-duo__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Case Study Grid ---
   Flexible grid for case study content blocks.
   Grid lines via gap + background-color. */

.case-grid {
  display: grid;
  gap: var(--border-thin);
  background-color: var(--color-neutral-800);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

.case-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.case-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.case-grid__cell {
  overflow: hidden;
  background-color: var(--color-surface-page);
}

/* Image cell — photo fills the cell */
.case-grid__cell--image {
  padding: 0;
  background-color: var(--color-neutral-900);
}

.case-grid__cell--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark cell variant for testimonials */
.case-grid__cell--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4xl);
}

.case-grid__cell--dark .testimonial {
  border: none;
  background-color: transparent;
  padding: 0;
  gap: var(--space-lg);
}

.case-grid__cell--dark .testimonial__attribution {
  padding-top: var(--space-xl);
}

.case-grid__cell--dark .testimonial__quote {
  color: var(--color-text-inverse);
}

.case-grid__cell--dark .testimonial__author {
  color: var(--color-text-inverse);
}

.case-grid__cell--dark .testimonial__role {
  color: var(--color-neutral-400);
}

/* Inner 2x2 grid for stats/items inside a cell */
.case-grid__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--border-thin);
  background-color: var(--color-neutral-800);
  height: 100%;
}

.case-grid__inner-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-3xl) var(--space-xl);
  background-color: var(--color-surface-page);
  text-align: center;
}

/* --- Case Study Approach Grid ---
   2x2 dark grid with icon + title + description per cell. */

/* When nested inside a case-grid cell */
.case-grid__cell--approach {
  padding: 0;
  background-color: var(--color-neutral-800);
}

/* 3-column variant for full-width approach grids */
.case-approach--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

.case-approach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--border-thin);
  height: 100%;
  background-color: var(--color-neutral-700);
  color: var(--color-text-inverse);
}

.case-approach__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  background-color: var(--color-neutral-800);
}

/* Full-width image section (used below approach grid on about page) */
.section--image-hero {
  height: 60vh;
  overflow: hidden;
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

.section--image-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-approach__content svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-bottom: var(--space-xl);
}

.case-approach__content {
  max-width: 90%;
}

.case-approach__content h4 {
  font-size: var(--text-xl);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-sm);
}

.case-approach__content p {
  font-size: var(--text-base);
  color: var(--color-neutral-400);
  margin: 0;
}

@media (max-width: 768px) {
  .case-hero .deliverables--5col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hide client tile on mobile */
  .case-hero .deliverables--5col .deliverables__item:first-child {
    display: none;
  }

  .case-hero .deliverables--5col .deliverables__item:nth-child(odd) {
    border-right: var(--border-thin) solid var(--color-neutral-800);
  }

  .case-hero .deliverables--5col .deliverables__item:nth-child(even) {
    border-right: none;
  }

  .case-header {
    grid-template-columns: 1fr;
  }

  .case-header__title {
    border-right: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
  }

  .case-approach {
    grid-template-columns: 1fr;
  }

  .case-approach__content h4 {
    font-size: var(--text-base);
  }

  .case-approach__content p {
    font-size: var(--text-xs);
  }

  .case-duo {
    grid-template-columns: 1fr;
  }

  .case-grid--2,
  .case-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Mid-width (≤1200px): case grids collapse to single column */
@media (max-width: 1200px) {
  .case-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Mid-range: tighten case-approach text between mobile and desktop */
@media (min-width: 769px) and (max-width: 1439px) {
  .case-approach__content h4 {
    font-size: var(--text-lg);
  }

  .case-approach__content p {
    font-size: var(--text-sm);
  }
}

/* Large screens: case-approach text stays at base size, description steps up */
@media (min-width: 1440px) {
  .case-approach__content p {
    font-size: var(--text-base);
  }
}

.section--hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-page);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(159, 147, 246, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 85% 75%, rgba(246, 147, 196, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(147, 196, 246, 0.03) 0%, transparent 70%);
}


/* ==========================================================================
   2. HERO
   ==========================================================================
   Large hero section for page openers. Centers content by default.
   Always wraps text elements in .hero__content for consistent structure.

   Usage: <section class="section section--lg">
            <div class="container container--2xl">
              <div class="hero">
                <div class="hero__content">
                  <div class="hero__eyebrow">Category</div>
                  <h1 class="hero__title">Big Statement</h1>
                  <p class="hero__subtitle">Supporting context here.</p>
                  <div class="hero__actions">
                    <a class="btn btn--primary btn--lg" href="#">CTA</a>
                    <a class="btn btn--outline btn--lg" href="#">Secondary</a>
                  </div>
                </div>
              </div>
            </div>
          </section>

   With media:
          <div class="hero hero--split">
            <div class="hero__content">...</div>
            <div class="hero__media"><img src="..." alt="..." /></div>
          </div>

   Variants:
     Alignment: --left, --split
     Size:      --compact (less padding, smaller title for inner pages)
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
  margin: var(--space-3xl);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  text-align: inherit;
  gap: var(--space-lg);
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  color: var(--color-text-primary);
  margin: 0;
  max-width: 20ch;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--measure-default);
  margin: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.hero__media {
  width: 100%;
  max-width: var(--container-3xl);
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Left Aligned --- */

.hero--left {
  align-items: flex-start;
  text-align: left;
}

/* --- Split (content + media side by side) --- */

.hero--split {
  flex-direction: row;
  text-align: left;
  align-items: stretch;
  gap: 0;
  margin: 0;
  height: 100%;
}

.hero--split .hero__content {
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-3xl);
}

.hero--split .hero__media {
  flex: 1;
  margin-top: 0;
  max-width: none;
  border-left: var(--border-thin) solid var(--color-neutral-800);
}

/* --- Compact (inner pages) --- */

.hero--compact .hero__title {
  font-size: var(--text-4xl);
}

.hero--compact .hero__subtitle {
  font-size: var(--text-md);
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .hero {
    margin: var(--space-xl);
  }

  .hero--split {
    flex-direction: column;
  }

  .hero--split .hero__content {
    align-items: center;
    text-align: center;
  }
}


/* ==========================================================================
   3. PAGE HEADER
   ==========================================================================
   Simpler header for inner/sub pages. Sits at the top of content pages
   like blog listings, about pages, etc. Less dramatic than a hero.

   Usage: <div class="page-header">
            <nav class="page-header__breadcrumb">
              <a href="#">Home</a>
              <span class="separator">/</span>
              <a href="#">Blog</a>
              <span class="separator">/</span>
              <span>Current Page</span>
            </nav>
            <h1 class="page-header__title">Page Title</h1>
            <p class="page-header__description">Optional subtitle or description.</p>
            <div class="page-header__meta">
              <span class="badge badge--primary">Category</span>
              <small class="text-caption">Jan 15, 2026</small>
            </div>
          </div>
   ========================================================================== */

.page-header {
  padding: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: var(--border-thin) solid var(--color-border-default);
}

.page-header__breadcrumb {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.page-header__breadcrumb a {
  color: var(--color-text-tertiary);
  font-weight: var(--weight-regular);
}

.page-header__breadcrumb a:hover {
  color: var(--color-text-link);
}

.page-header__breadcrumb .separator {
  color: var(--color-text-tertiary);
  opacity: var(--opacity-disabled);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.page-header__description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--measure-default);
  margin: var(--space-sm) 0 0 0;
}

.page-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}


/* ==========================================================================
   4. SPLIT
   ==========================================================================
   Two-column layout for content + media side by side. Used for feature
   sections, about blocks, and anywhere you need text next to an image.

   Usage: <div class="split">
            <div class="split__content">
              <div class="section-header__eyebrow">Feature</div>
              <h2>Content Title</h2>
              <p>Description text here.</p>
              <a class="btn btn--primary" href="#">Learn More</a>
            </div>
            <div class="split__media">
              <img src="..." alt="..." />
            </div>
          </div>

   Sub-components:
     split__body     — Top section of content, fills available space
     split__footer   — Bottom hook, anchored below body
     split__tags     — 2-column badge grid inside footer
     split__action   — Full-width CTA slot below tags/testimonial
     split__nav-back — Icon-reveal back link (replaces split__media)

   Variants:
     Order:  --reverse (media left, content right)
     Ratio:  --wide (60/40 content-heavy), --narrow (40/60 media-heavy)
     Align:  --start (top-align instead of center)
     Height: --hero-height (90vh), --stacks-early (collapses at 1200px)
     Media:  split__media--transparent (no bg, for info sidebars)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  min-height: 600px;
  border-top: var(--border-thin) solid var(--color-neutral-800);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
  background-color: var(--color-surface-page);
  overflow: hidden;
}

/* Stacked splits: collapse double border between them */
.split + .split {
  border-top: none;
}

/* Collapse borders when compact nav or logo-bar sits between splits */
.split + .hero-nav--compact,
.split + .logo-bar--bordered {
  border-top: none;
}

.hero-nav--compact + .split,
.logo-bar--bordered + .split {
  border-top: none;
}

.split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-3xl);
  align-self: stretch;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Split body — top section, fills available space */
.split__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  flex: 1;
  max-width: 90%;
}

/* Split footer — bottom hook, anchored to bottom of split content */
.split__footer {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin-left: calc(-1 * var(--space-3xl));
  margin-right: calc(-1 * var(--space-3xl));
  margin-bottom: calc(-1 * var(--space-3xl));
}

/* Testimonial inside footer — no side/bottom borders, flush with footer, page background */
.split__footer > .testimonial {
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: none;
  padding: var(--space-3xl);
  background-color: var(--color-surface-page);
}

/* Cap testimonial text width for breathing room */
.split__footer > .testimonial .testimonial__quote,
.split__footer > .testimonial .testimonial__attribution {
  max-width: 90%;
}

/* Tag strip — flex row of small outline badges, no padding (sits inside split__body) */
.split__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0;
}

/* Reset overrides — badges inherit .badge defaults (small, outline, ui font) */
.split__tags .badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: var(--border-thin) solid var(--color-neutral-800);
  cursor: default;
  pointer-events: none;
}

/* Action slot — full-width CTA anchored below testimonial/deliverables */
.split__action {
  border-top: var(--border-thin) solid var(--color-neutral-800);
}

.split__action .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 0;
  border: none;
  font-size: var(--text-lg);
  padding: var(--space-xl);
}

/* Deliverables inside split footer — border-top grid line + always-static (no hover reveal) */
.split__footer .deliverables {
  border-top: var(--border-thin) solid var(--color-neutral-800);
}

.split__footer .deliverables__item {
  height: auto;
  min-height: 96px;
  padding: var(--space-xl) var(--space-md);
  gap: var(--space-sm);
  cursor: default;
  transition: none;
}

.split__footer .deliverables__item:hover {
  background-color: var(--color-surface-page);
  gap: var(--space-sm);
}

.split__footer .deliverables__item svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: none;
}

.split__footer .deliverables__item:hover svg {
  width: 28px;
  height: 28px;
  color: var(--color-neutral-600);
}

.split__footer .deliverables__label {
  max-height: none;
  opacity: 1;
  font-size: var(--text-xs);
}

.split__footer .deliverables__item:hover .deliverables__label {
  max-height: none;
  opacity: 1;
}

/* Nav-back cell — icon-reveal link filling the second column of a split */
.split__nav-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background-color: var(--color-surface-page);
  border-left: var(--border-thin) solid var(--color-neutral-800);
  color: var(--color-neutral-600);
  text-decoration: none;
  overflow: hidden;
  transition: background-color var(--duration-default) var(--ease-default),
              gap var(--duration-default) var(--ease-default);
}

.split__nav-back svg {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  transition: width var(--duration-default) var(--ease-default),
              height var(--duration-default) var(--ease-default);
}

.split__nav-back:hover {
  background-color: var(--color-tertiary-light);
  gap: var(--space-md);
}

.split__nav-back:hover svg {
  width: 28px;
  height: 28px;
  color: var(--color-neutral-900);
}

.split__nav-back-label {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-900);
  transition: max-height var(--duration-default) var(--ease-default),
              opacity var(--duration-default) var(--ease-default);
}

.split__nav-back:hover .split__nav-back-label {
  max-height: 2em;
  opacity: 1;
}

/* Remove default margins from headings and paragraphs inside split content */
.split__content h1,
.split__content h2,
.split__content h3,
.split__content h4,
.split__content p {
  margin-bottom: 0;
}

/* Description text competes with testimonial — needs weight */
.split__body > p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.split__media {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-left: var(--border-thin) solid var(--color-neutral-800);
  background-color: var(--color-neutral-900);
  align-self: stretch;
  min-height: 0;
}

.split__media img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  display: block;
}

/* Transparent media — no background, used for info sidebars */
.split__media--transparent {
  background: none;
  padding: var(--space-3xl);
  gap: var(--space-2xl);
}

/* --- Narrow splits: image locked to viewport height regardless of content length --- */

.split--narrow .split__media {
  min-height: max(calc(100vh - var(--header-height)), 600px);
  align-self: stretch;
}

.split--narrow .split__media img {
  height: 100%;
  object-fit: cover;
}

/* --- Order: media left, content right --- */

.split--reverse .split__content {
  order: 2;
  border-left: var(--border-thin) solid var(--color-neutral-800);
}

.split--reverse .split__media {
  order: 1;
  border-left: none;
  border-right: none;
}

/* --- Ratio Variants --- */

.split--wide {
  grid-template-columns: 7fr 3fr;
}

.split--narrow {
  grid-template-columns: 3fr 7fr;
  min-height: max(calc(100vh - var(--header-height)), 600px);
}

/* --- Alignment --- */

.split--start {
  align-items: start;
}

/* --- Responsive --- */

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

  /* Image-first on mobile: media moves above content */
  .split .split__media {
    order: -1;
    border-left: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
    max-height: 45vh;
  }

  .split .split__media img {
    height: 100%;
    object-fit: cover;
  }

  /* Info sidebars and nav-back stay below content on mobile */
  .split .split__media--transparent,
  .split .split__nav-back {
    order: initial;
    border-bottom: none;
    border-top: var(--border-thin) solid var(--color-neutral-800);
  }

  .split--reverse .split__content,
  .split--reverse .split__media {
    order: initial;
  }

  .split--reverse .split__content {
    border-left: none;
  }

  /* Reverse also gets image-first on mobile */
  .split--reverse .split__media {
    order: -1;
    border-right: none;
  }

  /* Scale down content padding on mobile */
  .split__content {
    padding: var(--space-xl);
  }

  /* Match footer negative margins to mobile padding */
  .split__footer {
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
    margin-bottom: calc(-1 * var(--space-xl));
  }

  /* Testimonial inside footer matches mobile padding */
  .split__footer > .testimonial {
    padding: var(--space-xl);
  }

  /* Tags: no extra padding on mobile — inherits from split__body gap */

  /* Narrow splits: natural height on mobile */
  .split--narrow {
    min-height: auto;
  }

  /* Split h2 title: mobile size */
  .split__content h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
  }

  /* Split body paragraph: scale down on mobile */
  .split__body > p {
    font-size: var(--text-base);
  }
}

/* --- Hero height: viewport minus header, 600px floor --- */
.split--hero-height {
  height: max(calc(100vh - var(--header-height)), 600px);
}

/* --- Stacks early: viewport-height on desktop, collapses to single column at 1200px --- */
.split--stacks-early {
  height: max(calc(100vh - var(--header-height)), 600px);
}

/* Mid-width (≤1200px): splits with case-approach go 3fr content / 1fr image strip */
@media (max-width: 1200px) {
  .split--hero-height {
    height: auto;
  }

  .split--stacks-early {
    grid-template-columns: 1fr;
    min-height: auto;
    align-items: initial;
  }

  .split--stacks-early .split__content {
    order: initial;
  }

  /* Media-first when stacked: dark grid above text */
  .split--stacks-early .split__media {
    order: -1;
    border-left: none;
    border-bottom: var(--border-thin) solid var(--color-neutral-800);
  }
}

/* Tablet / small desktop: balanced splits, tighter text */
@media (min-width: 769px) and (max-width: 1439px) {
  .split--narrow {
    grid-template-columns: 2fr 3fr;
  }

  .split--wide {
    grid-template-columns: 1fr 1fr;
  }

  .split__content h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
  }

}

/* Large desktop: full 30/70 ratio with scaled headings */
@media (min-width: 1440px) and (max-width: 1999px) {
  .split__content h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-none);
  }
}

/* Extra-large desktop (2K+): headline scales up */
@media (min-width: 2000px) {
  .split__content h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-none);
  }
}


/* ==========================================================================
   5. CTA BAND
   ==========================================================================
   Centered call-to-action block. Used for conversion points, newsletter
   signups, and closing sections. Pair with .section surface variants.

   Usage: <section class="section section--filled">
            <div class="container container--2xl">
              <div class="cta-band">
                <h2 class="cta-band__title">Ready to Get Started?</h2>
                <p class="cta-band__description">Start building with the design system today.</p>
                <div class="cta-band__actions">
                  <a class="btn btn--primary btn--lg" href="#">Sign Up</a>
                  <a class="btn btn--outline btn--lg" href="#">Contact Us</a>
                </div>
              </div>
            </div>
          </section>
   ========================================================================== */

.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.cta-band__description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--measure-default);
  margin: 0;
}

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

/* --- Inherit section surface colors --- */

.section--contrast .cta-band__title {
   color: inherit;
}

.section--contrast .cta-band__description {
  color: inherit;
  opacity: var(--opacity-subtle);
}

.section--primary .cta-band__title {
  color: var(--color-white);
}

.section--primary .cta-band__description {
  color: var(--color-white);
  opacity: var(--opacity-subtle);
}


/* ==========================================================================
   6. FULL-BLEED
   ==========================================================================
   Breaks an element out of its container to fill the full viewport width.
   Useful for hero images, full-width galleries, and edge-to-edge media.

   Usage: <div class="full-bleed">
            <img src="..." alt="..." />
          </div>

   Note: Requires the parent to NOT have overflow: hidden.
   ========================================================================== */

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full-bleed img {
  width: 100%;
  height: auto;
  display: block;
}

.full-bleed--cover {
  height: 60vh;
  min-height: 300px;
}

.full-bleed--cover img {
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   7. SITE HEADER
   ==========================================================================
   Sticky navigation bar. Global element — identical on every page.
   Owns its own horizontal padding so pages don't need to wrap it
   in a container. Always full-width.

   Usage: <header class="site-header">
            <div class="site-header__inner">
              <a class="site-header__wordmark" href="/">
                <img src="logo.svg" alt="Simon Creates">
              </a>
              <nav class="site-header__nav">
                <a href="/work">Work</a>
                <a href="/about">About</a>
              </nav>
              <a class="btn btn--primary btn--lg btn--icon-right site-header__cta" href="/contact">Book a Call ...</a>
              <button class="site-header__toggle" aria-label="Menu">
                <span></span><span></span><span></span>
              </button>
            </div>
          </header>
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface-raised);
  border: none;
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
  transition: transform var(--duration-default) var(--ease-out);
  will-change: transform;
}

.site-header--hidden {
  transform: translateY(-100%);
}

/* Offset body for fixed header */
.has-site-header {
  padding-top: var(--header-height);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 7fr 1fr 1fr 1fr 1fr;
  align-items: stretch;
  height: var(--header-height);
}

.site-header__wordmark {
  display: flex;
  align-items: center;
  padding: 0 var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.site-header__wordmark img {
  height: 1.5rem;
  width: auto;
}

.site-header__slash {
  margin-left: var(--motif-slash-gap-left);
  margin-right: var(--motif-slash-gap-right);
  opacity: var(--opacity-muted);
}

/* Nav wrapper becomes transparent to grid */
.site-header__nav {
  display: contents;
}

.site-header__nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-xl);
  border-left: var(--border-thin) solid var(--color-neutral-800);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.site-header__nav a:hover {
  background-color: var(--color-tertiary-light);
}

/* CTA button — flush to edge, no radius, divider border */
.site-header .site-header__cta {
  border-radius: 0;
  border: none;
  border-left: var(--border-thin) solid var(--color-neutral-800);
  font-size: var(--text-lg);
  white-space: nowrap;
}

/* Toggle button — square, icon-driven */
.site-header__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: var(--header-height);
  height: var(--header-height);
  align-items: center;
  justify-content: center;
}

.site-header__toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  color: var(--color-text-primary);
}

/* Close icon hidden by default, menu icon visible */
.site-header__toggle .icon-close { display: none; }
.site-header__toggle .icon-menu  { display: block; }

/* Swap icons when menu is open */
.mobile-menu-open .site-header__toggle .icon-menu  { display: none; }
.mobile-menu-open .site-header__toggle .icon-close { display: block; }

/* Toggle stays visible above the overlay */
.mobile-menu-open .site-header {
  z-index: calc(var(--z-overlay) + 1);
  background-color: var(--color-neutral-900);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.site-header__wordmark .logo-light {
  display: none;
}

.mobile-menu-open .site-header__wordmark .logo-dark {
  display: none;
}

.mobile-menu-open .site-header__wordmark .logo-light {
  display: block;
}

.mobile-menu-open .site-header__toggle svg {
  color: var(--color-neutral-300);
}

@media (max-width: 768px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__cta {
    display: none;
  }

  .site-header__toggle {
    display: flex;
    border-left: var(--border-thin) solid var(--color-neutral-800);
  }
}


/* ==========================================================================
   7b. MOBILE MENU
   ==========================================================================
   Full-screen overlay navigation for mobile/tablet.
   Triggered by .site-header__toggle. Covers viewport with stacked
   links — each link fills equal vertical space.

   Usage: <div class="mobile-menu" id="mobile-menu">
            <nav class="mobile-menu__nav">
              <a class="mobile-menu__link" href="/work">Work</a>
              <a class="mobile-menu__link" href="/about">About</a>
              <a class="mobile-menu__link" href="/contact">Contact</a>
              <a class="mobile-menu__link mobile-menu__link--primary" href="/contact">Book a Call</a>
            </nav>
          </div>

   Activation: JS toggles .mobile-menu--open + body.mobile-menu-open
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-neutral-900);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-default) var(--ease-default),
              visibility var(--duration-default) var(--ease-default);
}

.mobile-menu--open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--header-height);
}

.mobile-menu__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-neutral-300);
  text-decoration: none;
  border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.2);
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.mobile-menu__link:last-child {
  border-bottom: none;
}

.mobile-menu__link:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Primary CTA link — stands out from the nav links */
.mobile-menu__link--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-bottom: none;
}

.mobile-menu__link--primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* Lock body scroll when menu is open */
.mobile-menu-open {
  overflow: hidden;
}


/* ==========================================================================
   8. SITE FOOTER
   ==========================================================================
   Full website footer. Global element — identical on every page.
   Owns its own horizontal padding. Content uses an internal grid.

   Usage: <footer class="site-footer">
            <div class="site-footer__inner">
              <div class="site-footer__brand">
                <a href="/"><img src="logo-light.svg" alt="Simon Creates"></a>
                <p class="site-footer__tagline">Brand & web design for bold ideas.</p>
              </div>
              <nav class="site-footer__nav">
                <a href="/work">Work</a>
                <a href="/services">Services</a>
                <a href="/about">About</a>
                <a href="/contact">Contact</a>
              </nav>
              <div class="site-footer__contact">
                <a href="mailto:simon@simoncreates.me">simon@simoncreates.me</a>
                <span>Tel Aviv, Israel</span>
              </div>
            </div>
            <div class="site-footer__bottom">
              <small>&copy; 2026 Simon Creates. All rights reserved.</small>
            </div>
          </footer>
   ========================================================================== */

.site-footer {
  background-color: var(--color-neutral-900);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Top: CTA fills full width --- */

.site-footer__top {
  flex: 1;
  display: flex;
  background-color: var(--color-surface-page);
  color: var(--color-text-primary);
}

.site-footer__cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-2xl);
}

.site-footer__cta-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 15rem);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

/* Highlight — accent phrase inside footer CTA title */
.site-footer__cta-title .highlight {
  color: var(--color-primary);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-2xl);
  border-left: var(--border-thin) solid rgba(255, 255, 255, 0.2);
}

.site-footer__brand img {
  height: 1.5rem;
  width: auto;
}

.site-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
  margin: 0;
}

.site-footer__email {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.site-footer__email:hover {
  color: var(--color-white);
}

.site-footer__location {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
}

/* --- Links: single row across full width --- */

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.2);
}

.site-footer__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-neutral-300);
  text-decoration: none;
  border-right: var(--border-thin) solid rgba(255, 255, 255, 0.2);
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.site-footer__links a:last-child {
  border-right: none;
}

.site-footer__links a:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.05);
}

/* --- Social icons row --- */

.site-footer__social {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.2);
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--color-neutral-300);
  text-decoration: none;
  border-right: var(--border-thin) solid rgba(255, 255, 255, 0.2);
}

.site-footer__social a:last-child {
  border-right: none;
}

.site-footer__social a:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.05);
}

.site-footer__social svg {
  width: 22px;
  height: 22px;
}

/* --- Contact link accent --- */

.site-footer__links a.site-footer__link--accent {
  color: var(--color-primary-light);
}

.site-footer__links a.site-footer__link--accent:hover {
  color: var(--color-white);
}

/* --- Bottom bar: logo left, copyright right --- */

.site-footer__bottom {
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.2);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-footer__bottom img {
  height: 1.5rem;
  width: auto;
}

.site-footer__bottom small {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
}

/* Flash animation when footer is targeted via #footer link */
@keyframes footer-flash {
  0%   { background-color: transparent; }
  20%  { background-color: rgba(255, 255, 255, 0.08); }
  60%  { background-color: rgba(255, 255, 255, 0.08); }
  100% { background-color: transparent; }
}

#footer:target .site-footer__links {
  animation: footer-flash 1.4s ease-out;
}

/* --- Footer responsive --- */

@media (max-width: 768px) {
  .site-footer__cta {
    padding: var(--space-2xl);
  }

  .site-footer__links {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__links a {
    border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.2);
    font-size: var(--text-base);
  }

  /* No right-edge border on right column */
  .site-footer__links a:nth-child(2n) {
    border-right: none;
  }

  /* No bottom border on last row (avoids double border with social section's border-top) */
  .site-footer__links a:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .site-footer__social {
    grid-template-columns: repeat(3, 1fr);
  }

  /* No right-edge border on right column (3rd item in each row) */
  .site-footer__social a:nth-child(3n) {
    border-right: none;
  }
}


/* ==========================================================================
   9. UTILITIES
   ==========================================================================
   Reusable layout patterns built from system variables.
   Containers, rows, stacks, and grids — structural helpers
   that prevent inline styles and keep layouts consistent.
   ========================================================================== */

/* --- Containers --- */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.container--xs {
  max-width: var(--container-xs);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--lg {
  max-width: var(--container-lg);
}

.container--xl {
  max-width: var(--container-xl);
}

.container--2xl {
  max-width: var(--container-2xl);
}

.container--3xl {
  max-width: var(--container-3xl);
}

.container--4xl {
  max-width: var(--container-4xl);
}

.container--full {
  max-width: none;
}

/* --- Flex Row --- */

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.row--sm {
  gap: var(--space-sm);
}

.row--lg {
  gap: var(--space-lg);
}

.row--xl {
  gap: var(--space-xl);
}

.row--center {
  align-items: center;
}

.row--start {
  align-items: flex-start;
}

.row--end {
  align-items: flex-end;
}

.row--between {
  justify-content: space-between;
}

/* --- Stack (vertical) --- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stack--start {
  align-items: flex-start;
}

.stack--sm {
  gap: var(--space-sm);
}

.stack--lg {
  gap: var(--space-lg);
}

.stack--xl {
  gap: var(--space-xl);
}

.stack--2xl {
  gap: var(--space-2xl);
}

/* --- Grid --- */

.grid {
  display: grid;
  gap: 0;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.grid--flush {
  gap: 0;
}

/* Responsive: collapse to single column on small screens */
@media (max-width: 768px) {

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   10. PROCESS FLOW
   ==========================================================================
   Horizontal 4-step process with arrows between steps.
   Steps and arrows sit in a single row on desktop, stack on mobile.

   Usage: <div class="process-flow">
            <div class="process-step">...</div>
            <div class="process-flow__arrow">→</div>
            <div class="process-step">...</div>
          </div>
   ========================================================================== */

.process-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: 0 var(--space-lg);
}

.process-flow .process-step__number {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-primary);
}

.process-step__arrow {
  width: 1em;
  height: 1em;
  color: var(--color-neutral-200);
  flex-shrink: 0;
}

/* --- Responsive --- */

@media (min-width: 769px) {
  .process-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    padding: 0 var(--space-xl);
  }
}


/* ==========================================================================
   11. ALIGNMENT UTILITIES
   ========================================================================== */

.text-center {
  text-align: center;
}

.justify-center {
  justify-content: center;
}