/*
Theme Name: Citrus Connections
Theme URI: https://citrusconnections.com
Description: Product development and marketing agency theme. A Thrive x Shark Design blend: proof-led section stack, mega menu, four-stage pipeline and case studies with hard metrics, over an expanded grotesk type system. Every proof block hides until real content is added. Fully editable through the Customizer.
Version: 5.0.0
Author: Citrus Connections
Author URI: https://citrusconnections.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: citrus-connections
Domain Path: /languages
Requires at least: 6.0
Requires PHP: 7.4
Tags: business, portfolio, one-column, custom-menu, custom-logo, editor-style, accessibility-ready
*/

/* ==========================================================================
   CITRUS CONNECTIONS v4
   Design thesis: the business is a production line — a single continuous
   chain from sketch to shelf. The site is built around one literal rail
   that runs down the page and marks stations. Everything else stays quiet.

   Colour   ink #16181A / paper #FFF / field #10312A / haze #EFF1EC
            zest #F4650F (display >=24px only) / zest-ink #A63C05 (text)
            rind #E8A33D (amber, for use on the dark field)
   Type     Archivo variable (width axis used for display) + IBM Plex Mono
   Contrast every text pairing verified >= 4.5:1, display type >= 3:1
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------- */
  --paper:      #ffffff;
  --haze:       #eff1ec;   /* cool pale leaf, quiet bands */
  --haze-deep:  #e2e6dd;
  --ink:        #16181a;   /* 17.8:1 on paper */
  --ink-muted:  #55595d;   /* 7.06:1 on paper */
  --ink-faint:  #7b8085;   /* borders and disabled only, never body text */
  --field:      #0c1c18;   /* near-black with a citrus-leaf cast — Shark's
                              dark bands, but carrying the brand hue */
  --field-soft: #1b3a33;
  --on-field:   #ffffff;   /* 14.05:1 */
  --on-field-mute: #c9d3cb;/* 9.14:1 */
  --zest:       #f4650f;   /* BRAND. display type >=24px, fills, rules */
  --zest-ink:   #a63c05;   /* 6.42:1 — links, small type, buttons */
  --rind:       #e8a33d;   /* 6.51:1 on field */
  --rule:       #d8dcd4;
  --rule-strong:#16181a;

  /* --- type --------------------------------------------------------- */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- metrics ------------------------------------------------------ */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;
  --rail: 2px;
  /* Both references lean rounded: Thrive on cards, Shark on cards and
     pill CTAs. Two radii only, so it stays disciplined. */
  --r: 10px;
  --r-sm: 6px;
  --r-pill: 100px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- vertical rhythm: three deliberate step sizes, not one ------- */
  --band-s: clamp(3rem, 6vw, 4.5rem);
  --band-m: clamp(4.5rem, 9vw, 7rem);
  --band-l: clamp(6rem, 13vw, 10rem);
  --lift: 0 18px 40px -24px rgba(12, 28, 24, 0.30);
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--haze); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* Focus: visible, branded, never removed. */
:focus-visible {
  outline: 3px solid var(--zest-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.field :focus-visible, .site-footer :focus-visible, .announce :focus-visible {
  outline-color: var(--rind);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 0.9rem 1.4rem;
  font-family: var(--f-mono); font-size: 0.8rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }

/* Bands own their own padding. Never style padding via a generic
   `section` selector — that is how the old build got specificity wars. */
.band { padding-block: var(--band-m); }
.band--s { padding-block: var(--band-s); }
.band--l { padding-block: var(--band-l); }
.band--flush-top { padding-top: 0; }
.band--haze  { background: var(--haze); }
.band--field { background: var(--field); color: var(--on-field); }
.band--field p { color: var(--on-field-mute); }
.band--rule-top { border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   TYPE SCALE
   Display uses Archivo's width axis — expanded, tight, and set in
   sentence case. This is the one loud move on the site.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }

.display-xl, h1.display-xl {
  font-size: clamp(2.75rem, 8.5vw, 6.5rem);
  font-weight: 800;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112, "wght" 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.display-l {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  font-stretch: 108%;
  font-variation-settings: "wdth" 108, "wght" 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.display-m { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.display-s { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; }

/* Zest is only ever allowed on display-size type. Enforced by only
   attaching it to these two classes. */
.display-xl .zest, .display-l .zest { color: var(--zest); }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.band--field .lede { color: var(--on-field-mute); }

p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 0.9em; }

a { color: var(--zest-ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Scoped away from .btn deliberately. `.band--field a` is (0,1,1) and
   would otherwise outrank `.btn--zest` (0,1,0), repainting the primary
   CTA amber-on-orange at 1.45:1 — an unreadable button on the single
   most important conversion band on the site. */
.band--field a:not(.btn) { color: var(--rind); }

/* Mono data label — carries real information (station number, count,
   turnaround), never used as decoration. */
.tag {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-block;
}
.tag--zest { color: var(--zest-ink); }
.band--field .tag { color: var(--rind); }

/* --------------------------------------------------------------------------
   BUTTONS — rectangular, 2px radius. Ink on zest reads 5.69:1.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 1.9rem; border-radius: var(--r-pill); border: 2px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform 0.2s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn--zest { background: var(--zest); color: var(--ink); border-color: var(--zest); box-shadow: 0 10px 24px -12px rgba(244,101,15,0.7); }
.btn--zest:hover { background: #ff7a2b; border-color: #ff7a2b; color: var(--ink); }

.btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink:hover { background: #000; color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

.band--field .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.band--field .btn--ghost:hover { background: #fff; color: var(--field); border-color: #fff; }

/* Inline arrow link */
.arrow-link {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--zest-ink); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 0.2rem;
}
.arrow-link:hover { text-decoration: none; }
.arrow-link svg { transition: transform 0.2s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
.band--field .arrow-link { color: var(--rind); }

/* --------------------------------------------------------------------------
   ANNOUNCE + HEADER
   -------------------------------------------------------------------------- */
.announce {
  background: var(--field); color: var(--on-field);
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.03em;
  text-align: center; padding: 0.6rem 1rem;
}
.announce a { color: var(--rind); text-underline-offset: 0.2em; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--rule-strong); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name {
  font-family: var(--f-display); font-weight: 800; font-size: 1rem;
  font-stretch: 108%; font-variation-settings: "wdth" 108, "wght" 800;
  letter-spacing: -0.01em; text-transform: uppercase; line-height: 1;
}
.brand-name .zest { color: var(--zest-ink); }
.brand img.custom-logo { max-height: 40px; width: auto; }

/* --------------------------------------------------------------------------
   NAVIGATION — driven by wp_nav_menu, with a hardcoded fallback.
   Mobile uses a real full-height panel, and the toggle actually works.
   -------------------------------------------------------------------------- */
/* On desktop the shell is transparent to layout — the nav participates
   in the header flex row exactly as if the wrapper were not there. */
.nav-shell { display: contents; }

.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center; border-radius: var(--r);
}
.nav-toggle-bars { display: block; width: 22px; height: 14px; position: relative; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.15s var(--ease), top 0.25s var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.primary-nav { display: flex; align-items: center; gap: 2rem; }
.nav-list { display: flex; align-items: center; gap: 2rem; }
.nav-list > li { position: relative; }

.nav-list > li > a {
  font-family: var(--f-body); font-weight: 600; font-size: 0.9375rem;
  color: var(--ink); text-decoration: none; padding: 0.5rem 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current_page_item > a { border-bottom-color: var(--zest); text-decoration: none; }

.nav-caret { width: 12px; height: 12px; transition: transform 0.2s var(--ease); flex: none; }
.nav-list > li.is-open > .nav-caret-btn .nav-caret { transform: rotate(180deg); }
/* Sized to clear the 24px minimum target on desktop; enlarged to a full
   44px on mobile below, where it is the only way into a submenu. */
.nav-caret-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0.4rem; margin-left: -0.2rem; }

/* Submenu: a plain list on a white card with a hard 1px border — no
   drop shadow, no float. Reads like a printed index. */
.sub-menu {
  position: absolute; top: calc(100% + 0.75rem); left: -1.25rem;
  min-width: 300px; background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--r);
  padding: 0.5rem; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu,
.nav-list > li.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s;
}
.sub-menu.sub-menu--wide { min-width: 560px; columns: 2; column-gap: 0.5rem; padding: 0.75rem; }
.sub-menu li { break-inside: avoid; }
.sub-menu a {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.5rem 0.7rem; border-radius: var(--r);
  font-size: 0.9rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.sub-menu a:hover { background: var(--haze); text-decoration: none; }
.sub-menu a .num { font-family: var(--f-mono); font-size: 0.7rem; color: var(--zest-ink); flex: none; }

/* --------------------------------------------------------------------------
   HERO — full-bleed asymmetric split. The rail is born here and continues
   down the page. Type is the hero, not a floating badge card.
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.hero-copy { padding-bottom: clamp(2rem, 5vw, 4rem); }
.hero-copy .tag { margin-bottom: 1.5rem; }
.hero-copy h1 { margin-bottom: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

.hero-figure { position: relative; align-self: stretch; min-height: 320px; }
/* <picture> is the img's parent, so it needs a resolved height too —
   otherwise height:100% on the img falls back to auto and the photo
   sits short inside a stretched figure. */
.hero-figure picture { display: block; height: 100%; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
/* Spec caption sits ON the image edge — states what the photo actually is. */
.hero-figure figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: var(--ink); color: #fff;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.05em;
  padding: 0.55rem 0.85rem;
  display: flex; justify-content: space-between; gap: 1rem;
}

/* --------------------------------------------------------------------------
   ✦ SIGNATURE: THE LINE
   A single 2px rail running down the left gutter, with square station
   markers. It encodes the actual pitch — one unbroken chain — instead of
   decorating. Stations are numbered because the order is real.
   -------------------------------------------------------------------------- */
.line { position: relative; --st-pad: clamp(1.75rem, 3.5vw, 2.75rem); --st-mid: calc(var(--st-pad) + 0.35em + 8px); }

.station { position: relative; padding-left: 3.25rem; padding-block: var(--st-pad); }

/* The rail is drawn per station rather than once down the whole list, so
   it begins at the first marker and terminates at the last instead of
   running past both ends. */
.station::after {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0;
  width: var(--rail); background: var(--rule);
}
.station:first-child::after { top: var(--st-mid); }
.station:last-child::after { top: 0; bottom: auto; height: var(--st-mid); }
.station:only-child::after { display: none; }
.line--field .station::after { background: var(--field-soft); }

.station::before {
  content: ""; position: absolute; left: 0; top: calc(var(--st-mid) - 8px); z-index: 1;
  width: 16px; height: 16px; background: var(--paper);
  border: var(--rail) solid var(--ink); border-radius: 1px;
}
.station--live::before { background: var(--zest); border-color: var(--zest); }
.line--field .station::before { background: var(--field); border-color: var(--on-field-mute); }
.line--field .station--live::before { background: var(--rind); border-color: var(--rind); }

.station-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.station-n { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600; color: var(--zest-ink); letter-spacing: 0.08em; }
.line--field .station-n { color: var(--rind); }
.station p { max-width: 54ch; color: var(--ink-muted); margin-top: 0.5rem; }
.line--field .station p { color: var(--on-field-mute); }

/* Deliverable chips — real outputs, not adjectives. */
.station-out { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.station-out li {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.03em;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 0.28rem 0.6rem; color: var(--ink-muted);
}
.line--field .station-out li { border-color: var(--field-soft); color: var(--on-field-mute); }

/* --------------------------------------------------------------------------
   SPLIT ROWS (the two practices)
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split + .split { margin-top: var(--band-m); padding-top: var(--band-m); border-top: 1px solid var(--rule); }
.split--flip .split-media { order: 2; }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }
.split-copy > .tag { margin-bottom: 1rem; }
.split-copy h3 { margin-bottom: 1rem; }
.split-copy p { color: var(--ink-muted); margin-bottom: 1.5rem; }

/* Practice contents list — a real index of what's inside, so the page
   surfaces its own keywords instead of hiding them behind an accordion. */
.index-list { display: grid; gap: 0; margin: 1.5rem 0; border-top: 1px solid var(--rule); }
.index-list li { border-bottom: 1px solid var(--rule); }
.index-list a {
  display: flex; align-items: baseline; gap: 0.9rem; padding: 0.7rem 0;
  color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.index-list a:hover { color: var(--zest-ink); text-decoration: none; }
.index-list .num { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-muted); flex: none; }

/* --------------------------------------------------------------------------
   FACTS STRIP — real, checkable claims only. Each has a source note slot.
   -------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.fact { background: var(--paper); padding: clamp(1.4rem, 3vw, 2rem); }
.band--haze .fact { background: var(--haze); }
.fact-n {
  font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800; font-stretch: 108%; font-variation-settings: "wdth" 108, "wght" 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.fact-n .unit { color: var(--zest); }
.fact-l { font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.5rem; max-width: 24ch; }

/* --------------------------------------------------------------------------
   SERVICE SPEC SHEET (service pages)
   Content is visible by default and marked up as real headings —
   <details> progressively enhances, so it still works with JS off and
   crawlers still see every word.
   -------------------------------------------------------------------------- */
.spec { border-top: 2px solid var(--ink); }
.spec-group { border-bottom: 1px solid var(--rule); }
.spec-group[open] { border-bottom-color: var(--ink); }

.spec-group > summary {
  display: flex; align-items: center; gap: 1.25rem; padding: 1.4rem 0;
  cursor: pointer; list-style: none;
}
.spec-group > summary::-webkit-details-marker { display: none; }
.spec-group > summary:hover .spec-title { color: var(--zest-ink); }
.spec-n { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-muted); flex: none; min-width: 2.5rem; }
.spec-title { font-family: var(--f-display); font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; flex: 1; margin: 0; }
.spec-count { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-muted); flex: none; }
.spec-sign { width: 14px; height: 14px; flex: none; transition: transform 0.22s var(--ease); }
.spec-group[open] > summary .spec-sign { transform: rotate(45deg); }

.spec-body { padding: 0 0 1.75rem 3.75rem; }
.spec-item { padding: 1rem 0; border-top: 1px solid var(--rule); }
.spec-item:first-child { border-top: none; padding-top: 0; }
.spec-item h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; margin-bottom: 0.35rem; }
.spec-item p { font-size: 0.95rem; color: var(--ink-muted); max-width: 68ch; }
.spec-item dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin-top: 0.5rem; font-size: 0.9rem; }
.spec-item dt { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); padding-top: 0.25em; }
.spec-item dd { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   FORM — real server-rendered states, no alert()
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.form-field { margin-bottom: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-field label { display: block; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5rem; }
.form-field .opt { color: var(--ink-muted); text-transform: none; letter-spacing: 0; }

.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink-faint); border-radius: var(--r);
  padding: 0.8rem 0.9rem; font-size: 1rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 9rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(166,60,5,0.18);
}
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: #a4161a; border-width: 2px; }
.field-error { display: block; font-size: 0.85rem; color: #a4161a; margin-top: 0.4rem; font-weight: 500; }

/* Honeypot — hidden from people, visible to bots. */
.hp-field { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-muted); margin-top: 0.9rem; max-width: 44ch; line-height: 1.5; }

.notice { border-left: 4px solid; padding: 1rem 1.25rem; border-radius: var(--r); margin-bottom: 2rem; }
.notice p { max-width: none; }
.notice--ok { background: #eef4ee; border-color: #1b6b3a; color: #123d22; }
.notice--err { background: #fdeeee; border-color: #a4161a; color: #6d0f12; }
.notice h2 { font-size: 1.05rem; margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.notice ul { list-style: disc; padding-left: 1.2rem; margin-top: 0.4rem; }

/* Contact detail rail */
.detail-list { border-top: 1px solid var(--rule); }
.detail-list > div { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.detail-list dt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3rem; }
.detail-list dd { font-size: 1rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   ARTICLE / EDITOR CONTENT
   The old build had zero styling for these — every WP page rendered raw.
   -------------------------------------------------------------------------- */
.entry-content { max-width: 72ch; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.2em; }
.entry-content h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 1.8em; }
.entry-content h4 { font-size: 1.1rem; margin-top: 1.6em; }
.entry-content ul { list-style: disc; padding-left: 1.3em; }
.entry-content ol { list-style: decimal; padding-left: 1.3em; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content blockquote {
  border-left: var(--rail) solid var(--zest); padding-left: 1.4rem;
  font-size: 1.15rem; font-style: italic; color: var(--ink);
}
.entry-content img, .entry-content figure { border-radius: var(--r); }
.entry-content figcaption { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.5rem; }
.entry-content pre { background: var(--haze); padding: 1.1rem; border-radius: var(--r); overflow-x: auto; font-family: var(--f-mono); font-size: 0.85rem; }
.entry-content code { font-family: var(--f-mono); font-size: 0.88em; background: var(--haze); padding: 0.12em 0.35em; border-radius: var(--r); }
.entry-content pre code { background: none; padding: 0; }
.entry-content table { font-size: 0.95rem; }
.entry-content th, .entry-content td { border: 1px solid var(--rule); padding: 0.6rem 0.8rem; text-align: left; }
.entry-content th { background: var(--haze); font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.entry-content a { font-weight: 500; }
.alignwide { max-width: min(1100px, 92vw); }
.alignfull { max-width: none; width: 100%; }
.aligncenter { margin-inline: auto; }

.page-header { border-bottom: 1px solid var(--rule); padding-bottom: 2rem; margin-bottom: 2.5rem; }
.page-header .tag { margin-bottom: 0.9rem; }

/* Post list */
.post-list { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.post-list article { border-bottom: 1px solid var(--rule); padding: 1.75rem 0; display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; }
.post-list .post-meta { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-muted); }
.post-list h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-bottom: 0.5rem; }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { color: var(--zest-ink); }
.post-list p { color: var(--ink-muted); font-size: 0.97rem; }

.pagination { margin-top: 3rem; display: flex; gap: 0.5rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: 0.85rem; }
.pagination .page-numbers { padding: 0.5rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .page-numbers:hover { border-color: var(--ink); }

.search-form { display: flex; gap: 0.5rem; max-width: 26rem; }
.search-form input[type="search"] { flex: 1; padding: 0.7rem 0.85rem; border: 1px solid var(--ink-faint); border-radius: var(--r); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--field); color: var(--on-field); padding-top: var(--band-m); }
.footer-sign {
  font-family: var(--f-display); font-weight: 800;
  font-stretch: 112%; font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(1.9rem, 6vw, 4.25rem); line-height: 0.95;
  letter-spacing: -0.035em; color: #fff; max-width: 18ch;
  padding-bottom: var(--band-s);
}
.footer-sign .zest { color: var(--rind); }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: var(--band-s); border-top: 1px solid var(--field-soft); }
.footer-cols h2 { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rind); margin-bottom: 1rem; }
.footer-cols p { color: var(--on-field-mute); font-size: 0.92rem; }
.footer-cols li + li { margin-top: 0.35rem; }
.footer-cols a { color: var(--on-field-mute); font-size: 0.92rem; text-decoration: none; display: inline-block; padding-block: 0.28rem; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }
.footer-base { border-top: 1px solid var(--field-soft); padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.footer-base p, .footer-base a { font-family: var(--f-mono); font-size: 0.72rem; color: var(--on-field-mute); }

/* --------------------------------------------------------------------------
   MOTION — one orchestrated reveal, not scattered effects.
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal] { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { min-height: 0; aspect-ratio: 16/10; }
  .split, .split--flip .split-media { grid-template-columns: 1fr; order: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  /* Viewport-sized clipping box. Exactly as wide as the screen, so the
     panel inside can translate out without widening the document. */
  .nav-shell {
    display: block;
    position: fixed; inset: 0; overflow: hidden;
    pointer-events: none; visibility: hidden; z-index: 90;
  }
  .nav-shell.is-open { pointer-events: auto; visibility: visible; }

  .primary-nav {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 400px);
    background: var(--paper); border-left: 1px solid var(--rule-strong);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 6rem var(--gutter) 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.28s var(--ease);
  }
  .primary-nav.is-open { transform: translateX(0); }

  /* Without JS there is no toggle, so the menu is simply part of the page. */
  .no-js .nav-shell { position: static; overflow: visible; pointer-events: auto; visibility: visible; }
  .no-js .primary-nav { position: static; width: auto; transform: none; padding: 0 0 1rem; border: none; }
  .no-js .nav-toggle { display: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-list > li { border-bottom: 1px solid var(--rule); }
  .nav-list > li > a { padding: 1rem 0; font-size: 1.05rem; width: 100%; }
  .nav-caret-btn { position: absolute; right: 0; top: 0.4rem; min-width: 44px; min-height: 44px; padding: 0.75rem; }

  /* Mobile submenus are driven purely by the caret button. Hover must
     not participate here — a :hover rule outranks .is-open on
     specificity and silently wins on touch devices, which leaves the
     submenu stuck closed after a tap. */
  .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; border-top: 1px solid var(--rule); border-radius: 0;
    min-width: 0; columns: 1; padding: 0.4rem 0 0.9rem 0.6rem;
    display: none;
  }
  .nav-list > li:hover > .sub-menu,
  .nav-list > li:focus-within > .sub-menu { display: none; }
  .nav-list > li.is-open > .sub-menu { display: block; }
  .sub-menu.sub-menu--wide { columns: 1; }

  .nav-cta { margin-top: 1.5rem; }
  .nav-cta .btn { width: 100%; justify-content: center; }

  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(22,24,26,0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
    z-index: 80;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.28s var(--ease), visibility 0s; }

  body.nav-locked { overflow: hidden; }

  .post-list article { grid-template-columns: 1fr; gap: 0.5rem; }
  .spec-body { padding-left: 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .announce, .nav-backdrop, .btn, .site-footer { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   PROOF LAYER — the Thrive × Shark blend
   Both reference sites run roughly 70% evidence by page area. These are
   the components that carry it. Every one hides itself when empty rather
   than rendering placeholder content.
   ========================================================================== */

/* ---------- Editor-only prompt (never seen by visitors) ---------- */
.editor-prompt {
  border: 2px dashed var(--zest);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fffaf6;
  margin-block: var(--band-s);
}
.editor-prompt .tag { color: var(--zest-ink); margin-bottom: 0.5rem; }
.editor-prompt p { color: var(--ink-muted); }
.editor-prompt h2 { margin-bottom: 0.5rem; }

/* ---------- Hero CTA reassurance (Shark: "takes just 1 minute") ---------- */
.cta-note {
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--ink-muted); margin-top: 0.85rem;
}
.band--field .cta-note { color: var(--on-field-mute); }

/* ---------- Quick service pills under the hero (Shark) ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.pill-row a {
  font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.04em;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: 0.5rem 1rem; color: var(--ink); text-decoration: none;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.pill-row a:hover { border-color: var(--ink); background: var(--haze); text-decoration: none; }

/* ---------- Trust bar: awards + client logos ---------- */
.trust { border-block: 1px solid var(--rule); background: var(--paper); }
.trust-label {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-muted);
  text-align: center; margin-bottom: 1.75rem;
}
.logo-wall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center; justify-items: center;
}
.logo-wall img {
  max-height: 44px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.62;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.logo-wall a:hover img, .logo-wall img:hover { filter: none; opacity: 1; }

/* ---------- Review counts (Thrive) ---------- */
.reviews { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; justify-content: center; }
.review-stat { text-align: center; }
.review-stat .rs-n {
  font-family: var(--f-display); font-weight: 800; font-stretch: 108%;
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1; letter-spacing: -0.03em;
}
.review-stat .rs-l { font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-muted); margin-top: 0.4rem; }
.stars { display: inline-flex; gap: 2px; margin-top: 0.4rem; color: var(--zest); }
.stars svg { width: 15px; height: 15px; }

/* ---------- Featured work grid (Shark) ---------- */
.work-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.work-card {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--haze); aspect-ratio: 4/3;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.work-card:hover { transform: translateY(-4px); box-shadow: var(--lift); }
.work-card:hover img { transform: scale(1.04); }
.work-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: 0.9rem 1.1rem 0.95rem;
  /* Solid across the whole caption box. A gradient that fades *within*
     the text area measured 1.01:1 on the title row over a bright
     photograph — the scrim has to be opaque wherever glyphs sit, and
     feather only above them. */
  background: rgba(12, 28, 24, 0.94);
  color: #fff;
}
.work-card figcaption::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px;
  background: linear-gradient(to top, rgba(12, 28, 24, 0.94), rgba(12, 28, 24, 0));
  pointer-events: none;
}
.work-card .wc-t { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; display: block; }
.work-card .wc-s { font-family: var(--f-mono); font-size: 0.72rem; color: #e4e9e6; margin-top: 0.25rem; display: block; }

/* ---------- Service cards with "Includes" list (Shark) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.svc-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.band--haze .svc-card { background: var(--paper); }
.svc-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--lift); }
.svc-card .svc-n { font-family: var(--f-mono); font-size: 0.72rem; color: var(--zest-ink); letter-spacing: 0.06em; }
.svc-card h3 { font-size: 1.2rem; margin: 0.6rem 0 0.6rem; letter-spacing: -0.02em; }
.svc-card > p { font-size: 0.95rem; color: var(--ink-muted); margin-bottom: 1.25rem; }
.svc-inc { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: auto; }
.svc-inc .tag { display: block; margin-bottom: 0.6rem; }
.svc-inc li {
  font-size: 0.9rem; color: var(--ink-muted);
  padding-left: 1.4rem; position: relative; margin-bottom: 0.35rem;
}
.svc-inc li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--zest);
}
.svc-card .arrow-link { margin-top: 1.25rem; align-self: flex-start; }

/* ---------- Four-stage pipeline (Shark) ---------- */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.stage { position: relative; padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 2rem); }
.stage + .stage { border-left: 1px solid var(--field-soft); }
.stage-n {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 0.85;
  letter-spacing: -0.04em; color: #557a70; display: block;
  margin-bottom: 0.75rem;
}
/* 3.69:1 on the field. A ghost numeral at --field-soft measured 1.42:1,
   which is invisible — and these numbers carry the stage order, so they
   are content rather than decoration. */
.stage h3 { color: #fff; font-size: 1.3rem; margin-bottom: 0.5rem; }
.stage p { color: var(--on-field-mute); font-size: 0.94rem; max-width: 34ch; }
.stage--live .stage-n { color: var(--zest); }

/* ---------- Case study cards with metrics (Thrive) ---------- */
.case-grid { display: grid; gap: 1.25rem; }
.case-card {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden;
}
.case-media { position: relative; align-self: stretch; min-height: 260px; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0; }
.case-body .tag { margin-bottom: 0.6rem; }
.case-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 0.75rem; }
.case-body > p { color: var(--ink-muted); font-size: 0.97rem; margin-bottom: 1.5rem; }
.metrics { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: 1.5rem; }
.metric .m-n {
  font-family: var(--f-display); font-weight: 800; font-stretch: 108%;
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1;
  letter-spacing: -0.035em; color: var(--zest-ink);
}
.metric .m-l { font-size: 0.84rem; color: var(--ink-muted); margin-top: 0.35rem; max-width: 18ch; line-height: 1.35; }

/* ---------- Numbered why-us (Shark 01–04) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.why-card {
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2rem); background: var(--paper);
}
.why-card .why-n {
  font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500;
  color: var(--zest-ink); letter-spacing: 0.08em; display: block; margin-bottom: 1rem;
}
.why-card h3 { font-size: 1.12rem; margin-bottom: 0.5rem; letter-spacing: -0.015em; }
.why-card p { font-size: 0.92rem; color: var(--ink-muted); }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.quote-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column;
}
.quote-card blockquote { font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin-bottom: 1.5rem; }
.quote-card blockquote p { max-width: none; }
.quote-who { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.quote-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-who .qw-n { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; display: block; letter-spacing: -0.01em; }
.quote-who .qw-r { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-muted); display: block; margin-top: 0.15rem; }

/* ---------- Locations (both) ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem 2rem; }
.loc h3 { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--zest-ink); margin-bottom: 0.5rem; }
.loc p { font-size: 0.92rem; color: var(--ink-muted); line-height: 1.5; }
.band--field .loc h3 { color: var(--rind); }

/* ---------- Mega menu (Thrive: icons + featured card) ---------- */
.sub-menu--mega { min-width: 720px; display: grid; grid-template-columns: 1fr 1fr 240px; gap: 0.35rem 1rem; padding: 1.1rem; columns: initial; }
.mega-feature {
  grid-column: 3; grid-row: 1 / -1;
  background: var(--haze); border-radius: var(--r-sm); padding: 1.1rem;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%;
}
.mega-feature img { border-radius: var(--r-sm); margin-bottom: 0.85rem; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.mega-feature .tag { display: block; margin-bottom: 0.3rem; }
.mega-feature strong { font-family: var(--f-display); font-size: 0.95rem; letter-spacing: -0.01em; display: block; margin-bottom: 0.6rem; }

@media (max-width: 1000px) {
  .case-card { grid-template-columns: 1fr; }
  .case-media { min-height: 220px; aspect-ratio: 16/10; }
  .case-body { padding: 0 clamp(1.25rem,3vw,2rem) clamp(1.5rem,3vw,2rem); }
  .stage + .stage { border-left: none; border-top: 1px solid var(--field-soft); }
}

@media (max-width: 860px) {
  .sub-menu--mega { min-width: 0; grid-template-columns: 1fr; padding: 0.4rem 0 0.9rem 0.6rem; }
  .mega-feature { display: none; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .work-card .wc-t { font-size: 0.88rem; }
}