/* ==========================================================================
   SKU BEAUTY - MASTER GLOBAL STYLESHEET
   ========================================================================== */

/* ── 1. BRAND TOKENS & VARIABLES ── */
:root {
  --navy:          #2E4077;
  --navy-mid:      #3A5099;
  --navy-deep:     #1E2B52;
  --yellow:        #EEE75C;
  --yellow-d:      #E0DA46;
  --slate:         #8A93A8;
  --slate-light:   #C4CAD8;
  --slate-lt:      #C4CAD8;
  --text-gray:     #4A4A4A;
  --diamond:       #F4F5F7;
  --off-white:     #F7F8FA;
  --offwhite:      #F7F8FA;
  --bg-light:      #FDFDFD;
  --white:         #FFFFFF;
  --ink:           #1A1C23;
  --rule:          rgba(46,64,119,0.10);
  --sky:           #7BAECF;

  /* Status Colors (for Intake Form) */
  --status-red:        #C0392B;
  --status-red-bg:     #FDF0ED;
  --status-red-border: #E8B4AC;
  --status-orange:     #C05818;
  --status-orange-bg:  #FDF3EC;
  --status-orange-border:#E8C090;
  --status-amber:      #8A6A10;
  --status-amber-bg:   #FDF8E8;
  --status-amber-border:#E0C860;
  --status-green:      #1E6B40;
  --status-green-bg:   #EEF6F1;
  --status-green-border:#88CCA8;

  /* Typography */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Layout */
  --header-h: 108px;
  --sidebar-w: 240px;
  --t: 0.14s ease;
  --hero-overlay-opacity: 0.48;
}

/* ── 2. RESET & BASE STYLES ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { 
  background: var(--off-white); 
  color: var(--ink); 
  font-family: var(--font-body); 
  line-height: 1.6; 
  -webkit-font-smoothing: antialiased; 
  overflow-x: hidden; 
  cursor: none; 
}
img, video { display: block; max-width: 100%; }
a, button { text-decoration: none; color: inherit; font: inherit; background: none; border: none; }
ul { list-style: none; margin: 0; padding: 0; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--diamond); }
::-webkit-scrollbar-thumb { background: var(--slate-light); border-radius: 2px; }

/* Skip nav */
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--navy); color: var(--yellow); padding: 10px 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; z-index: 9999; transition: top .2s; border: none; }
.skip-link:focus { top: 16px; }

/* ── 3. CUSTOM CURSOR ── */
.cursor, .sku-cursor { width: 9px; height: 9px; background: var(--navy); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .15s, height .15s, background .2s; mix-blend-mode: multiply; }
.cursor-ring, .sku-cursor-ring { width: 32px; height: 32px; border: 1.5px solid var(--navy); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); opacity: .32; transition: width .2s, height .2s; }
.cursor.hov, .sku-cursor.hov { width: 18px; height: 18px; background: var(--yellow); mix-blend-mode: normal; }
.cursor-ring.hov, .sku-cursor-ring.hov { width: 48px; height: 48px; opacity: .18; }
@media(hover:none) {
  .cursor, .cursor-ring, .sku-cursor, .sku-cursor-ring { display: none; }
  body { cursor: auto; }
  a, button, input, textarea { cursor: pointer; }
}

/* ── 4. NAVIGATION ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; justify-content: space-between; align-items: center; padding: 28px 56px; transition: background .35s, padding .35s, box-shadow .35s; }
.nav.scrolled { background: rgba(247,248,250,.97); backdrop-filter: blur(14px); padding: 18px 56px; box-shadow: 0 1px 0 var(--rule); }
.nav-logo { display: flex; align-items: center; cursor: none; font-family: var(--font-serif); font-weight: 600; font-size: 2.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); gap: 0.5rem;}
.nav-logo img { height: 46px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); opacity: .82; transition: opacity .2s; cursor: none; }
.nav-links a:hover, .nav-btn:hover { opacity: 1; color: var(--text-gray); }

/* Dropdowns */
.nav-item { position: relative; list-style: none; }
.nav-item > a, .nav-item > button, .nav-btn { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); opacity: .82; transition: opacity .2s, color 0.2s; cursor: none; background: none; border: none; font-family: var(--font-body); padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 5px; }
.nav-item > a:hover, .nav-item > button:hover { opacity: 1; }
.nav-chevron { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: rotate(45deg) translateY(-1px); opacity: .5; transition: transform .2s, opacity .2s; flex-shrink: 0; }
.nav-item:hover .nav-chevron, .nav-item.open .nav-chevron { transform: rotate(-135deg) translateY(-1px); opacity: 1; border-right-color: var(--navy); border-bottom-color: var(--navy);}
.nav-dropdown { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--white); border: 1px solid var(--rule); box-shadow: 0 12px 36px rgba(46,64,119,.10); min-width: 260px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s, visibility .22s, transform .22s; z-index: 600; border-top: 2px solid var(--navy); }
.nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: var(--white); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); rotate: 45deg; }
.nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); display: block; }
.nav-dd-link { display: flex; align-items: flex-start; gap: 10px; padding: 13px 18px; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); cursor: none; transition: background .15s, color .15s; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.nav-dd-link:last-child { border-bottom: none; }
.nav-dd-link:hover, .nav-dd-link.is-current:hover { background: rgba(46,64,119,0.03); color: var(--navy); }
.nav-dd-link.is-current { background: var(--diamond); border-left: 2.5px solid var(--yellow); padding-left: 16px; }
.nav-dd-link-inner { display: flex; flex-direction: column; gap: 3px; }
.nav-dd-sub { font-size: 8.5px; font-weight: 400; letter-spacing: .1em; text-transform: none; color: var(--text-gray); font-family: var(--font-serif); font-style: italic; margin-top: 0.25rem; }

/* Call To Action Buttons */
.nav-cta { background: var(--navy)!important; color: var(--white)!important; opacity: 1!important; padding: 11px 24px; font-size: 9.5px!important; letter-spacing: .2em!important; transition: background .2s!important; border-radius: 2px; display: inline-flex; align-items: center; gap: 0.5rem; border: none!important; }
.nav-cta:hover { background: #1a2442!important; }
.nav.scrolled .nav-cta { background: var(--navy)!important; color: var(--yellow)!important; border: none!important; }
.nav.scrolled .nav-cta:hover { background: var(--navy-mid)!important; }

/* Back Link (For Story/Article pages) */
.back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(46,64,119,.6); cursor: none; transition: color .2s; }
.back-link:hover { color: var(--navy); }
.back-link svg { transition: transform .2s; }
.back-link:hover svg { transform: translateX(-4px); }
.nav.scrolled .back-link { color: var(--navy); opacity: .72; }
.nav.scrolled .back-link:hover { color: var(--navy-mid); opacity: 1; }

/* ── 5. BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; gap: 12px; background: var(--navy); color: var(--yellow); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 18px 36px; border: none; cursor: none; transition: background .2s, transform .2s; white-space: nowrap; }
.btn-primary:hover { background: var(--navy-mid); transform: translateY(-2px); }
.btn-primary svg, .btn-yellow svg { transition: transform .2s; }
.btn-primary:hover svg, .btn-yellow:hover svg { transform: translateX(5px); }
.btn-ghost { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); opacity: .6; border-bottom: 1px solid rgba(46,64,119,.3); padding-bottom: 3px; cursor: none; transition: opacity .2s, border-color .2s; background: transparent; border-top: none; border-left: none; border-right: none;}
.btn-ghost:hover { opacity: 1; border-color: var(--navy); }
.btn-yellow { display: inline-flex; align-items: center; gap: 12px; background: var(--yellow); color: var(--navy-deep); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 14px 32px; cursor: none; align-self: flex-start; transition: background .2s, transform .2s; }
.btn-yellow:hover { background: #f5f06a; transform: translateY(-2px); }
.btn-outline { display: inline-flex; align-items: center; gap: 12px; border: 1.5px solid var(--navy); color: var(--navy); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 16px 36px; cursor: none; transition: background .2s, color .2s; }
.btn-outline:hover { background: var(--navy); color: var(--yellow); }

/* ── 6. GLOBAL SECTIONS & TYPOGRAPHY ── */
.section-label { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.section-label::after { content: ''; width: 40px; height: 1px; background: var(--slate-lt); }
.section-label--light { color: rgba(255,255,255,.4); }
.section-label--light::after { background: rgba(255,255,255,.12); }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 300; margin: 0; }
h1 { font-family: var(--font-display); font-size: clamp(72px, 13vw, 148px); line-height: 0.92; color: var(--navy-deep); letter-spacing: 0.01em; margin-bottom: 2rem; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.2; color: var(--navy); margin-bottom: 1.5rem; }
h2 em { font-style: italic; color: var(--navy-mid); }
h3 { font-weight: 600; font-size: 1.15rem; color: var(--navy); margin-bottom: 0.6rem; }
p { font-size: 0.975rem; font-weight: 400; color: var(--ink); line-height: 1.8; max-width: 660px; margin-bottom: 1.2rem; }

/* ── 7. HOME HERO ── */
.hero { min-height: 100vh; background: var(--yellow); display: grid; grid-template-rows: 1fr auto; padding: 0 56px 56px; position: relative; overflow: hidden; }
.hero-grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }
.hero-diag { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(-54deg, transparent, transparent 110px, rgba(46,64,119,.038) 110px, rgba(46,64,119,.038) 111px); }
.hero-ghost { position: absolute; bottom: 160px; right: 60px; height: clamp(200px,30vw,420px); width: auto; line-height: 1; pointer-events: none; z-index: 1; user-select: none; }
.hero-inner { display: flex; flex-direction: column; justify-content: flex-end; padding-top: 150px; padding-bottom: 64px; position: relative; z-index: 2; max-width: 900px; margin: 0 0;}
.hero-eyebrow { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 44px; opacity: 0; animation: riseIn .7s ease .2s forwards; }
.eyebrow-tag { background: var(--navy); color: var(--yellow); font-size: 9px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding: 7px 16px; border: 1px solid rgba(46,64,119,.3); }
.eyebrow-rule { width: 48px; height: 1px; background: rgba(46,64,119,.35); }
.eyebrow-copy { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); opacity: .9; }
.hero-hed { opacity: 0; animation: riseIn .8s ease .35s forwards; line-height: .86; }
.hero-hed-outline { display: block; font-family: var(--font-display); font-size: clamp(88px,15vw,210px); color: transparent; -webkit-text-stroke: 2.5px var(--navy); letter-spacing: .01em; }
.hero-hed-solid { display: block; font-family: var(--font-display); font-size: clamp(88px,15vw,210px); color: var(--navy); letter-spacing: .01em; }
.hero-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-top: 56px; opacity: 0; animation: riseIn .7s ease .55s forwards; }
.hero-tagline-h { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px,2.4vw,30px); font-weight: 300; color: var(--navy); line-height: 1.3; margin-bottom: 18px; }
.hero-tagline-p { font-size: 15px; line-height: 1.85; font-weight: 500; color: var(--navy); max-width: 420px; }
.hero-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hero-stats { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid rgba(46,64,119,.2); padding-top: 36px; position: relative; z-index: 2; opacity: 0; animation: riseIn .6s ease .9s forwards; }
.hero-stat-item { display: flex; flex-direction: column; gap: 5px; }
.stat-n { font-family: var(--font-display); font-size: 40px; letter-spacing: .04em; color: var(--navy); line-height: 1; }
.stat-l { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); opacity: .9; }
.hero-systems { display: flex; gap: 44px; align-items: center; }
.system-badge { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.system-badge-label { font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); opacity: .82; }
.system-badge-name { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--navy); opacity: .75; }

/* Hero Media Mode */
.hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0); pointer-events: none; transition: background .4s ease; }
.hero--media { background: var(--navy-deep); }
.hero--media .hero-media { display: block; }
.hero--media .hero-overlay { background: rgba(0,0,0,var(--hero-overlay-opacity)); }
.hero--media .hero-grain, .hero--media .hero-diag { z-index: 2; }
.hero--media .hero-inner, .hero--media .hero-stats { z-index: 3; }
.hero--media .hero-hed-outline { -webkit-text-stroke-color: rgba(255,255,255,.92); }
.hero--media .hero-hed-solid { color: var(--white); }
.hero--media .hero-tagline-h, .hero--media .hero-tagline-p { color: rgba(255,255,255,.92); }
.hero--media .hero-ghost { -webkit-text-stroke-color: rgba(255,255,255,.05); }
.hero--media .stat-n, .hero--media .stat-l { color: rgba(255,255,255,.9); }
.hero--media .hero-stats { border-top-color: rgba(255,255,255,.2); }
.hero--media .btn-ghost { color: rgba(255,255,255,.75); border-bottom-color: rgba(255,255,255,.35); }
.hero--media .btn-ghost:hover { color: var(--white); border-color: var(--white); }
.hero--media .system-badge-name { color: rgba(255,255,255,.9); }

/* ── 8. HOME COMPONENTS ── */

/* Marquee */
.marquee, .marquee-bar { background: var(--navy); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marquee-track { display: flex; white-space: nowrap; animation: ticker 30s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 28px; padding: 0 36px; font-family: var(--font-display); font-size: 13.5px; letter-spacing: .2em; color: var(--yellow); }
.marquee-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--yellow); opacity: .3; flex-shrink: 0; }

/* Visual Strip */
.visual-strip { background: var(--navy-deep); padding: 0; overflow: hidden; display: grid; grid-template-columns: repeat(3,1fr); height: 420px; }
.visual-cell { position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.06); }
.visual-cell:last-child { border-right: none; }
.visual-cell-img, .visual-cell-video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.05); transition: transform .6s ease, filter .5s ease; }
.visual-cell:hover .visual-cell-img { transform: scale(1.04); filter: grayscale(0%) contrast(1.05); }
.visual-cell-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(30,43,82,.7) 0%,transparent 55%); pointer-events: none; }
.visual-cell-label { position: absolute; bottom: 28px; left: 28px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,1); }
.visual-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; background: var(--navy-deep); }
.visual-placeholder-icon { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.visual-placeholder-text { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.2); }

/* About Section (Home) */
.about { background: var(--white); padding: 130px 56px; display: grid; grid-template-columns: 360px 1fr; gap: 110px; align-items: start; }
.about-sticky { position: sticky; top: 108px; }
.about-hed { font-family: var(--font-serif); font-size: clamp(34px,4.5vw,58px); font-weight: 300; line-height: 1.08; color: var(--navy); margin-bottom: 28px; }
.about-hed em { font-style: italic; }
.about-hed strong { font-weight: 600; display: block; }
.about-body { font-size: 15px; line-height: 1.9; font-weight: 500; color: #1A1C23; max-width: 320px; margin-bottom: 18px; }
.about-steps { display: flex; flex-direction: column; }
.about-step { border-top: 1px solid var(--rule); padding: 38px 0; display: grid; grid-template-columns: 72px 1fr; gap: 28px; }
.about-step:last-child { border-bottom: 1px solid var(--rule); }
.step-num { font-family: var(--font-display); font-size: 48px; color: var(--navy); opacity: .1; line-height: 1; padding-top: 2px; }
.step-tag { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #5A6480; margin-bottom: 9px; }
.step-title { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--navy); margin-bottom: 11px; line-height: 1.2; }
.step-body { font-size: 14.5px; line-height: 1.85; font-weight: 500; color: #1A1C23; }
.step-chip { display: inline-block; margin-top: 14px; background: var(--diamond); color: var(--navy); font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--rule); }

/* Services Section (Home) */
.services { background: var(--white); padding: 130px 56px; border-top: 1px solid var(--rule); }
.services-label { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.services-label::after { content: ''; width: 40px; height: 1px; background: var(--slate-lt); }
.services-hed { font-family: var(--font-serif); font-size: clamp(34px,5vw,62px); font-weight: 300; color: var(--navy); line-height: 1.08; margin: 0; }
.services-hed em { font-style: italic; color: var(--navy); display: block; }
.services-hed strong { font-style: normal; font-weight: 300; display: block; }
.services-header-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 80px; }
.services-tagline { font-family: var(--font-serif); font-size: clamp(22px,2.4vw,32px); font-style: italic; font-weight: 300; color: var(--navy); border-left: 3px solid var(--yellow); padding-left: 24px; line-height: 1.3; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.svc { border-left: 1px solid var(--rule); padding: 52px 44px; transition: background .25s; }
.svc:hover { background: var(--diamond); }
.svc-num { font-family: var(--font-display); font-size: 16px; letter-spacing: .22em; color: var(--sky); opacity: 1; margin-bottom: 18px; }
.svc-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--navy); line-height: 1.15; margin-bottom: 16px; }
.svc-body { font-size: 14px; line-height: 1.85; font-weight: 400; color: var(--ink); opacity: .75; margin-bottom: 32px; }
.svc-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.svc-list li { font-size: 13px; letter-spacing: .03em; font-weight: 400; color: var(--ink); opacity: .82; display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; }
.svc-list li::before { content: '—'; color: var(--sky); opacity: .6; flex-shrink: 0; margin-top: 1px; }

/* SKU System */
.sku-system { background: var(--offwhite); padding: 0; border-bottom: 4px solid var(--yellow); }
.sku-system-header { padding: 110px 56px 64px; }
.sku-system-header-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sku-system-hed { font-family: var(--font-serif); font-size: clamp(34px,4.8vw,62px); font-weight: 300; line-height: 1.05; color: var(--navy); margin-bottom: 24px; }
.sku-system-hed em { font-style: italic; display: block; margin-bottom: 16px; }
.sku-system-hed strong { font-weight: 300; font-style: italic; display: block; border-left: 3px solid var(--yellow); padding-left: 20px; }
.sku-system-body { font-size: 15px; line-height: 1.9; font-weight: 400; color: var(--ink); max-width: 540px; }
.sku-system-tagline { font-family: var(--font-serif); font-size: clamp(20px,2.2vw,28px); font-style: italic; font-weight: 300; color: var(--navy); margin-top: 28px; line-height: 1.25; border-left: 2px solid var(--yellow); padding-left: 18px; }
.sku-system-header-right { display: flex; align-items: flex-start; justify-content: flex-end; }
.sku-system-phases { width: 100%; }
.sku-system-phase { display: block; padding: 15px 0; border-left: 2px solid transparent; padding-left: 0; border-bottom: 1px solid var(--rule); transition: border-color .25s, padding-left .25s; }
.sku-system-phase:first-child { border-top: 1px solid var(--rule); }
.sku-system-phase:hover { border-left-color: #EEE75C; padding-left: 12px; }
.sku-system-phase-main { display: flex; align-items: flex-start; gap: 16px; }
.sku-system-phase-num { font-size: 10px; font-weight: 700; letter-spacing: .22em; color: var(--slate); opacity: .6; flex-shrink: 0; min-width: 24px; padding-top: 6px; }
.sku-system-phase-name-wrap { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.sku-system-phase-name { font-family: var(--font-display); font-size: 22px; letter-spacing: .1em; color: var(--navy); text-transform: uppercase; cursor: default; line-height: 1; }
.sku-system-phase-tag { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); opacity: .4; transition: opacity .25s; }
.sku-system-phase:hover .sku-system-phase-tag { opacity: .15; }
.sku-system-phase-desc { max-height: 0; overflow: hidden; opacity: 0; font-size: 13px; line-height: 1.75; color: var(--slate); transition: max-height .35s ease, opacity .3s ease, padding-top .35s ease; padding-top: 0; max-width: 420px; }
.sku-system-phase:hover .sku-system-phase-desc { max-height: 120px; opacity: 1; padding-top: 10px; }

/* Results Band */
.results-band { background: var(--offwhite); padding: 72px 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.results-band-label { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); margin-bottom: 20px; }
.results-statement { font-family: var(--font-serif); font-size: clamp(20px,2.4vw,30px); font-weight: 300; font-style: italic; color: var(--navy); line-height: 1.5; max-width: 720px; margin-bottom: 56px; }
.results-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 2px solid var(--yellow); }
.results-pillar { padding: 32px 32px 32px 0; border-right: 1px solid var(--rule); transition: background .25s, transform .25s, padding .25s, box-shadow .25s; }
.results-pillar:last-child { border-right: none; padding-right: 0; }
.results-pillar:not(:first-child) { padding-left: 32px; }
.results-pillar:hover { background: var(--white); transform: translateY(-6px); border-top: 2px solid var(--yellow); margin-top: -2px; padding-top: 34px; }
.results-pillar-label { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); opacity: .5; margin-bottom: 12px; transition: opacity .25s; }
.results-pillar:hover .results-pillar-label { opacity: 1; }
.results-pillar-text { font-size: 13px; color: var(--ink); line-height: 1.8; opacity: .75; transition: opacity .25s; }
.results-pillar:hover .results-pillar-text { opacity: 1; }

/* Fit Section */
.fit { background: var(--white); padding: 130px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 88px; border-top: 1px solid var(--rule); }
.fit-label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; }
.fit-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fit-label.yes { color: var(--navy); }
.fit-label.yes::before { background: var(--yellow); border: 1.5px solid var(--navy); }
.fit-label.no { color: #C0392B; }
.fit-label.no::before { background: #C0392B; border: 1.5px solid #C0392B; }
.fit-hed { font-family: var(--font-serif); font-size: clamp(28px,3.2vw,44px); font-weight: 300; line-height: 1.2; margin-bottom: 44px; color: var(--navy); }
.fit-hed em { font-style: italic; color: var(--navy); }
.fit-hed-no { color: var(--ink); }
.fit-hed-no em { color: var(--ink); }
.fit-items { display: flex; flex-direction: column; }
.fit-item { border-top: 1px solid var(--rule); padding: 20px 0; font-size: 15px; line-height: 1.78; font-weight: 400; color: var(--ink); display: flex; gap: 16px; align-items: flex-start; }
.fit-item:last-child { border-bottom: 1px solid var(--rule); }
.fit-item-no { color: var(--slate); }
.fit-icon { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fit-icon.yes { background: var(--navy); }
.fit-icon.no { background: #C0392B; border: none; }
.fit-callout { margin-top: 56px; padding: 40px; background: var(--offwhite); border-left: 3px solid var(--yellow); }
.fit-callout-label { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.fit-callout-text { font-family: var(--font-serif); font-style: italic; font-size: 21px; font-weight: 600; color: var(--navy-deep); line-height: 1.45; }

/* Begin Section */
.begin { background: var(--offwhite); padding: 130px 56px; }
.begin-inner { display: grid; grid-template-columns: 360px 1fr; gap: 110px; align-items: start; }
.begin-sticky { position: sticky; top: 108px; }
.begin-hed { font-family: var(--font-serif); font-size: clamp(32px,4vw,52px); font-weight: 300; line-height: 1.1; color: var(--navy); margin-bottom: 24px; }
.begin-hed em { font-style: italic; }
.begin-hed strong { font-weight: 600; display: block; }
.begin-intro { font-size: 15px; line-height: 1.88; font-weight: 500; color: #1A1C23; max-width: 300px; }
.begin-steps { display: flex; flex-direction: column; }
.begin-step { border-top: 1px solid var(--rule); padding: 34px 0; display: grid; grid-template-columns: 36px 1fr; gap: 26px; align-items: start; }
.begin-step:last-child { border-bottom: 1px solid var(--rule); }
.begin-n { font-family: var(--font-display); font-size: 26px; color: var(--navy); opacity: .22; line-height: 1; }
.begin-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--navy); margin-bottom: 9px; }
.begin-body { font-size: 14.5px; line-height: 1.85; font-weight: 500; color: #1A1C23; }
.begin-chip { display: inline-block; margin-top: 13px; border: 1px solid rgba(46,64,119,.18); color: var(--navy); font-size: 8.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 5px 13px; }

/* Cases Section */
.cases { background: var(--offwhite); padding: 130px 56px; }
.cases-header { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 72px; }
.cases-hed { font-family: var(--font-serif); font-size: clamp(34px,4.5vw,58px); font-weight: 300; line-height: 1.08; color: var(--navy); }
.cases-hed em { font-style: italic; }
.cases-hed strong { font-weight: 600; display: block; }
.cases-intro { font-size: 15px; line-height: 1.88; font-weight: 500; color: #1A1C23; max-width: 420px; margin-top: 16px; }
.cases-grid { display: block; }
.case-card { background: var(--white); display: grid; grid-template-columns: 55% 45%; min-height: 520px; border: 1px solid var(--rule); transition: box-shadow .3s; cursor: none; }
.case-card:hover { box-shadow: 0 20px 60px rgba(46,64,119,.10); }
.case-card-visual { position: relative; overflow: hidden; min-height: 520px; }
.case-card-visual-img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.case-card:hover .case-card-visual-img { transform: scale(1.04); }
.case-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 100%); display: flex; align-items: flex-end; justify-content: flex-start; flex-direction: column; gap: 10px; min-height: 520px; position: relative; overflow: hidden; }
.case-placeholder svg { opacity: .15; }
.case-placeholder-label { font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.2); }
.case-card-content { padding: 64px 60px; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid var(--rule); }
.case-tag { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #5A6480; margin-bottom: 24px; }
.case-title { font-family: var(--font-serif); font-size: clamp(24px,2.8vw,36px); font-weight: 400; color: var(--navy); line-height: 1.15; margin-bottom: 20px; }
.case-body { font-size: 14px; line-height: 1.88; font-weight: 500; color: #1A1C23; margin-bottom: 32px; max-width: 380px; }
.case-results { display: flex; gap: 0; margin-bottom: 48px; border-top: 1px solid var(--rule); padding-top: 28px; }
.case-result-item { display: flex; flex-direction: column; gap: 5px; padding-right: 32px; margin-right: 32px; border-right: 1px solid var(--rule); }
.case-result-item:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.case-result-n { font-family: var(--font-display); font-size: 36px; color: var(--navy); letter-spacing: .04em; line-height: 1; }
.case-result-l { font-size: 8.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.case-link { font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid rgba(46,64,119,.25); padding-bottom: 3px; display: inline-flex; align-items: center; gap: 8px; transition: gap .2s, border-color .2s; }
.case-card:hover .case-link { gap: 14px; border-color: var(--navy); }
.case-card-wide { background: var(--white); display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; transition: background .22s; cursor: none; }
.case-card-wide:hover { background: var(--diamond); }
.case-card-wide .case-card-visual { min-height: 380px; }
.case-card-wide:hover .case-card-visual-img { transform: scale(1.04); }
.cases-cta { margin-top: 56px; display: flex; justify-content: center; }

/* Testimonials */
.testimonials { background: var(--navy-deep); padding: 130px 56px; overflow: hidden; position: relative; }
.testimonials::before { content: ''; position: absolute; top: -60px; right: -60px; width: 400px; height: 400px; border-radius: 50%; background: rgba(238,231,92,.03); pointer-events: none; }
.testimonials-header { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 80px; }
.testimonials-hed { font-family: var(--font-serif); font-size: clamp(34px,4.5vw,58px); font-weight: 400; color: var(--white); line-height: 1.05; }
.testimonials-hed em { font-style: italic; color: var(--yellow); }
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: rgba(255,255,255,.06); }
.testi-card { background: var(--navy-deep); padding: 52px 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; transition: background .25s; cursor: none;}
.testi-card:hover { background: rgba(255,255,255,.03); }
.testi-quote { font-family: var(--font-serif); font-size: clamp(17px,1.8vw,21px); font-weight: 400; font-style: italic; color: rgba(255,255,255,.95); line-height: 1.65; }
.testi-attr { display: flex; align-items: center; gap: 16px; }
.testi-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-avatar-placeholder { font-family: var(--font-display); font-size: 18px; color: var(--yellow); opacity: .9; line-height: 1; }
.testi-name { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--white); opacity: 1; margin-bottom: 3px; letter-spacing: .02em; }
.testi-role { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.68); letter-spacing: .04em; }
.testi-brand { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); opacity: .9; margin-top: 2px; }

/* Team Section */
.team { background: var(--offwhite); padding: 130px 56px; }
.team-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 88px; }
.team-hed { font-family: var(--font-serif); font-size: clamp(34px,4.5vw,58px); font-weight: 300; color: var(--navy); line-height: 1.05; }
.team-hed em { font-style: italic; }
.team-hed strong { font-weight: 600; display: block; }
.team-intro { font-size: 15px; line-height: 1.9; font-weight: 500; color: #1A1C23; padding-top: 8px; }
.team-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.team-card { background: var(--white); display: flex; flex-direction: column; transition: box-shadow .3s; border: 1px solid rgba(46,64,119,.07); box-shadow: 0 2px 20px rgba(46,64,119,.05); cursor: none;}
.team-card:hover { box-shadow: 0 8px 40px rgba(46,64,119,.12); }
.team-card-photo { height: 700px; background: linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 100%); position: relative; overflow: hidden; flex-shrink: 0; }
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .55s ease; }
.team-card:hover .team-card-photo img { transform: scale(1.03); }
.team-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: flex-start; padding: 28px; }
.team-photo-initials { font-family: var(--font-display); font-size: 120px; color: rgba(255,255,255,.06); line-height: 1; letter-spacing: -.02em; user-select: none; }
.team-card-content { padding: 40px 40px 44px; display: flex; flex-direction: column; border-top: 3px solid var(--yellow); }
.team-card-name { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--navy); margin-bottom: 8px; line-height: 1.1; }
.team-card-title { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); background: var(--navy); display: inline-block; padding: 5px 14px; margin-bottom: 22px; align-self: flex-start; }
.team-card-bio { font-size: 14px; line-height: 1.88; font-weight: 500; color: #1A1C23; margin-bottom: 28px; }
.team-card-links { display: flex; gap: 12px; }
.team-card-link { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); opacity: .6; cursor: none; transition: opacity .2s; }
.team-card-link:hover { opacity: 1; }

/* Brief Band */
.brief { background: var(--white); overflow: hidden; }
.brief-band { background: var(--yellow); padding: 108px 56px 80px; position: relative; overflow: hidden; }
.brief-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }
.brief-band-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.brief-hed { font-family: var(--font-serif); font-size: clamp(34px,5vw,62px); font-weight: 300; color: var(--navy); line-height: 1.05; }
.brief-hed em { font-style: italic; }
.brief-hed strong { font-weight: 600; display: block; }
.brief-tagline { font-size: 15px; line-height: 1.88; font-weight: 500; color: var(--navy); max-width: 460px; margin-top: 20px; }
.brief-posts-wrap { padding: 0 56px 0; background: var(--white); }
.brief-posts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--rule); }
.brief-post { background: var(--white); padding: 48px 40px; transition: background .22s; cursor: none; }
.brief-post:hover { background: var(--offwhite); }
.brief-post-tag { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #5A6480; margin-bottom: 16px; }
.brief-post-title { font-family: var(--font-serif); font-size: 21px; font-weight: 400; color: var(--navy); line-height: 1.3; margin-bottom: 14px; }
.brief-post-excerpt { font-size: 14px; line-height: 1.82; font-weight: 500; color: #1A1C23; margin-bottom: 28px; }
.brief-post-link { font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid rgba(46,64,119,.25); padding-bottom: 3px; display: inline-block; transition: border-color .2s; opacity: 1; }
.brief-post:hover .brief-post-link { border-color: var(--navy); }

/* Email List & Contact */
.email-list { background: var(--navy-deep); padding: 96px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.email-list-kicker { font-size: 9px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); opacity: .7; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.email-list-kicker::after { content: ''; width: 32px; height: 1px; background: rgba(238,231,92,.3); }
.email-list-hed { font-family: var(--font-serif); font-size: clamp(28px,3.8vw,50px); font-weight: 300; color: var(--white); line-height: 1.1; margin-bottom: 20px; }
.email-list-hed em { font-style: italic; color: var(--yellow); }
.email-list-sub { font-size: 15px; line-height: 1.88; font-weight: 400; color: rgba(255,255,255,.88); max-width: 380px; }
.email-form { display: flex; flex-direction: column; gap: 14px; }
.email-input-wrap { display: flex; gap: 0; }
.email-input { flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-right: none; color: var(--white); font-family: var(--font-body); font-size: 14px; font-weight: 300; padding: 18px 24px; outline: none; transition: border-color .2s; }
.email-input::placeholder { color: rgba(255,255,255,.45); }
.email-input:focus { border-color: rgba(238,231,92,.45); }
.email-submit { background: var(--yellow); color: var(--navy); font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 18px 28px; border: none; cursor: none; white-space: nowrap; transition: background .2s, transform .2s; flex-shrink: 0; }
.email-submit:hover { background: var(--yellow-d); transform: translateY(-2px); }
.email-note { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.65); line-height: 1.68; }
.email-note a { color: rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.4); cursor: none; }
.email-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.email-topic { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.35); padding: 6px 14px; }

.contact { background: var(--navy-deep); padding: 130px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 110px; }
.contact-hed { font-family: var(--font-serif); font-size: clamp(34px,4.5vw,60px); font-weight: 300; color: var(--white); line-height: 1.05; margin-bottom: 26px; }
.contact-hed em { font-style: italic; color: var(--yellow); }
.contact-body { font-size: 14.5px; line-height: 1.88; font-weight: 400; color: rgba(255,255,255,.88); max-width: 370px; margin-bottom: 48px; }
.contact-detail-label { font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 5px; }
.contact-detail a { font-size: 13px; color: var(--yellow); opacity: .75; transition: opacity .2s; cursor: none; display: block; margin-bottom: 24px; }
.contact-detail a:hover { opacity: 1; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-size: 8.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.form-input, .form-textarea { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: var(--white); font-family: var(--font-body); font-size: 13.5px; font-weight: 300; padding: 14px 18px; outline: none; width: 100%; transition: border-color .2s; }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,.2); }
.form-input:focus, .form-textarea:focus { border-color: rgba(238,231,92,.45); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-privacy { font-size: 10px; line-height: 1.65; color: rgba(255,255,255,.6); font-weight: 400; }
.form-privacy a { color: rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.4); cursor: none; }

/* Social Strip */
.social-strip { background: var(--white); padding: 72px 56px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.social-label { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #5A6480; margin-bottom: 12px; }
.social-hed { font-family: var(--font-serif); font-size: clamp(22px,3vw,36px); font-weight: 300; color: var(--navy); line-height: 1.2; }
.social-hed em { font-style: italic; }
.social-links { display: flex; gap: 20px; align-items: center; }
.social-link { display: flex; align-items: center; gap: 10px; border: 1.5px solid rgba(46,64,119,.15); padding: 14px 24px; color: var(--navy); cursor: none; transition: border-color .2s, background .2s, color .2s; }
.social-link:hover { border-color: var(--navy); background: var(--navy); color: var(--yellow); }
.social-link:hover svg path, .social-link:hover svg rect, .social-link:hover svg circle { stroke: var(--yellow); }
.social-link-name { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.social-link-handle { font-size: 12px; font-weight: 400; color: #5A6480; margin-top: 2px; transition: color .2s; }
.social-link:hover .social-link-handle { color: rgba(238,231,92,.7); }
.social-link-text { display: flex; flex-direction: column; }


/* ── 9. OUR STORY PAGE SPECIFIC STYLES ── */

/* Story Hero */
.story-hero { min-height: 70vh; background: #cfe8f5; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }
.story-hero-grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }
.story-hero-left { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 100px 48px 64px; border-right: 1px solid rgba(46,64,119,0.15); }
.story-hero-back-home { display: inline-flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(46,64,119,.6); cursor: none; transition: color .2s, gap .2s; align-self: flex-start; }
.story-hero-back-home:hover { color: var(--navy); gap: 12px; }
.story-hero-back-home svg { transition: transform .2s; flex-shrink: 0; }
.story-hero-back-home:hover svg { transform: translateX(-3px); }
.story-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 48px; opacity: 0; animation: riseIn .6s ease .15s forwards; }
.story-hero-hed { font-family: var(--font-serif); font-size: clamp(56px,7.5vw,100px); font-weight: 300; color: var(--navy-deep); line-height: .96; margin-bottom: 0; opacity: 0; animation: riseIn .9s ease .3s forwards; }
.story-hero-hed em { font-style: italic; color: var(--navy-mid); }
.story-hero-hed strong { font-weight: 600; display: block; }
.story-hero-rule { width: 48px; height: 1.5px; background: rgba(46,64,119,.25); margin: 28px 0; opacity: 0; animation: riseIn .6s ease .55s forwards; }
.story-hero-sub { font-size: 15px; line-height: 1.88; font-weight: 400; color: rgba(30,43,82,.72); max-width: 380px; opacity: 0; animation: riseIn .7s ease .65s forwards; }
.story-hero-right { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 100px 48px 64px; }
.story-hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.story-hero-stat { border-top: 1px solid rgba(46,64,119,.12); padding: 28px 24px 28px 0; opacity: 0; }
.story-hero-stat:nth-child(even) { padding: 28px 0 28px 24px; border-left: 1px solid rgba(46,64,119,.12); }
.story-hero-stat:nth-child(3), .story-hero-stat:nth-child(4) { border-bottom: 1px solid rgba(46,64,119,.12); }
.story-hero-stat:nth-child(1) { animation: riseIn .6s ease .5s forwards; }
.story-hero-stat:nth-child(2) { animation: riseIn .6s ease .65s forwards; }
.story-hero-stat:nth-child(3) { animation: riseIn .6s ease .8s forwards; }
.story-hero-stat:nth-child(4) { animation: riseIn .6s ease .95s forwards; }
.story-hero-stat-n { font-family: var(--font-display); font-size: 38px; color: var(--navy); letter-spacing: .04em; line-height: 1; margin-bottom: 4px; }
.story-hero-stat-n.text { font-size: 22px; letter-spacing: .08em; }
.story-hero-stat-title { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-deep); margin-bottom: 5px; }
.story-hero-stat-l { font-size: 11px; font-weight: 400; letter-spacing: .06em; color: rgba(30,43,82,.55); line-height: 1.5; }
.story-hero-scroll { position: absolute; bottom: 36px; left: 56px; z-index: 3; display: flex; align-items: center; gap: 12px; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(46,64,119,.4); opacity: 0; animation: riseIn .6s ease 1.1s forwards; }
.story-hero-scroll-line { width: 40px; height: 1px; background: rgba(46,64,119,.2); }

/* Story Teaser */
.story-teaser { background: var(--navy-deep); padding: 110px 56px; }
.story-teaser-inner { display: grid; grid-template-columns: 360px 1fr; gap: 100px; align-items: center; }
.story-teaser-label .section-label { color: rgba(255,255,255,.35); }
.story-teaser-label .section-label::after { background: rgba(255,255,255,.1); }
.story-teaser-hed { font-family: var(--font-serif); font-size: clamp(36px,5vw,64px); font-weight: 300; line-height: 1.05; color: var(--white); margin-bottom: 0; margin-top: 20px; }
.story-teaser-hed em { font-style: italic; color: var(--yellow); }
.story-teaser-content { padding-top: 0; }
.story-teaser-body { font-size: 15px; line-height: 1.92; font-weight: 400; color: rgba(255,255,255,.78); margin-bottom: 36px; }
.story-teaser-body p { margin-bottom: 1.2em; color: rgba(255, 255, 255, 0.78); }
.story-teaser-body p:last-child { margin-bottom: 0; }
.story-teaser-link { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); border-bottom: 1px solid rgba(238,231,92,.35); padding-bottom: 3px; cursor: none; transition: gap .2s, border-color .2s; }
.story-teaser-link:hover { gap: 16px; border-color: var(--yellow); }

/* Origin Section */
.origin { background: var(--white); padding: 130px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.origin-sticky { position: sticky; top: 120px; }
.origin-hed { font-family: var(--font-serif); font-size: clamp(34px,4.5vw,58px); font-weight: 300; line-height: 1.08; color: var(--navy); margin-bottom: 28px; }
.origin-hed em { font-style: italic; }
.origin-hed strong { font-weight: 600; display: block; }
.origin-pull { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px,2vw,24px); font-weight: 300; color: var(--navy); line-height: 1.45; border-left: 3px solid var(--yellow); padding-left: 24px; margin-bottom: 28px; }
.origin-body { font-size: 15px; line-height: 1.95; font-weight: 400; color: var(--ink); }
.origin-body p { margin-bottom: 1.4em; }
.origin-body p:last-child { margin-bottom: 0; }

/* Problem Band */
.problem-band { background: var(--yellow); padding: 96px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; overflow: hidden; }
.problem-band::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }
.problem-band-left { position: relative; z-index: 2; }
.problem-band-hed { font-family: var(--font-display); font-size: clamp(44px,7vw,98px); color: var(--navy); line-height: .88; margin-bottom: 24px; letter-spacing: .01em; }
.problem-band-sub { font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); opacity: .6; }
.problem-band-right { position: relative; z-index: 2; }
.problem-body { font-size: 16px; line-height: 1.9; font-weight: 400; color: var(--navy-deep); }
.problem-body p { margin-bottom: 1.3em; }
.problem-body p:last-child { margin-bottom: 0; }
.problem-glitch { font-family: var(--font-serif); font-style: italic; font-size: 20px; font-weight: 700; color: var(--navy); border-left: 3px solid var(--navy); padding-left: 20px; line-height: 1.5; }

/* Mission Section */
.mission { background: var(--offwhite); padding: 80px 56px; }
.mission-inner { max-width: 960px; margin: 0 auto; }
.mission-label { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.mission-label::after { content: ''; width: 40px; height: 1px; background: var(--slate-lt); }
.mission-hed { font-family: var(--font-serif); font-size: clamp(28px,3.5vw,46px); font-weight: 300; line-height: 1.08; color: var(--navy); margin-bottom: 16px; }
.mission-hed em { font-style: italic; }
.mission-hed strong { font-weight: 600; }
.mission-tagline { font-size: 15px; line-height: 1.88; font-weight: 400; color: var(--ink); margin-bottom: 12px; max-width: 760px; }
.mission-sub { font-size: 15px; line-height: 1.88; font-weight: 400; color: var(--ink); margin-bottom: 44px; max-width: 760px; }
.mission-values-label { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.mission-values-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.mission-values { display: flex; flex-direction: column; gap: 2px; margin-top: 0; }
.mission-value { padding: 28px 36px; background: var(--white); border-left: 3px solid var(--yellow); display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start; transition: background .2s; }
.mission-value:hover { background: var(--diamond); }
.mission-value-num { font-family: var(--font-display); font-size: 13px; letter-spacing: .2em; color: var(--sky); line-height: 1; padding-top: 4px; }
.mission-value-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--navy); margin-bottom: 8px; line-height: 1.2; }
.mission-value-body { font-size: 13.5px; line-height: 1.78; font-weight: 400; color: var(--ink); }
.mission-value-body p { margin-bottom: 6px; }
.mission-value-body p:last-child { margin-bottom: 0; }

/* Credentials Section */
.credentials { background: var(--navy-deep); padding: 130px 56px; display: grid; grid-template-columns: 360px 1fr; gap: 100px; align-items: start; }
.credentials-sticky { position: sticky; top: 120px; }
.credentials-hed { font-family: var(--font-serif); font-size: clamp(32px,4.5vw,54px); font-weight: 300; line-height: 1.1; color: var(--white); margin-bottom: 20px; }
.credentials-hed em { font-style: italic; color: var(--yellow); }
.credentials-hed strong { font-weight: 600; display: block; }
.credentials-intro { font-size: 15px; line-height: 1.88; font-weight: 400; color: rgba(255,255,255,.75); max-width: 280px; }
.credentials-list { display: flex; flex-direction: column; }
.credential-item { border-top: 1px solid rgba(255,255,255,.07); padding: 36px 0; display: grid; grid-template-columns: 56px 1fr; gap: 24px; }
.credential-item:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }
.credential-icon { width: 36px; height: 36px; border: 1.5px solid rgba(238,231,92,.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 4px; }
.credential-icon svg { opacity: .7; }
.credential-title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: var(--white); line-height: 1.2; margin-bottom: 10px; }
.credential-body { font-size: 14px; line-height: 1.82; font-weight: 400; color: rgba(255,255,255,.7); }

/* Story CTA */
.story-cta { background: var(--white); padding: 100px 56px; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; border-top: 1px solid var(--rule); }
.story-cta-hed { font-family: var(--font-serif); font-size: clamp(28px,3.5vw,46px); font-weight: 300; line-height: 1.15; color: var(--navy); }
.story-cta-hed em { font-style: italic; }
.story-cta-hed strong { font-weight: 600; }
.story-cta-body { font-size: 15px; line-height: 1.82; font-weight: 400; color: var(--ink); margin-top: 14px; max-width: 480px; }


/* ── 10. INSIGHTS PAGE (The SKU Brief) ── */
.header { padding: 6rem 4rem 4rem; text-align: center; }
.header h1 { font-family: var(--font-serif); font-size: 4rem; color: var(--navy); margin-bottom: 1rem; line-height: 1.1; letter-spacing: normal; }
.header p { font-size: 1.2rem; color: var(--text-gray); max-width: 600px; margin: 0 auto; }
.insights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 3rem; padding: 2rem 4rem 6rem; max-width: 1200px; margin: 0 auto; }
.insight-card { background: #fff; padding: 2rem; border-top: 4px solid var(--yellow); box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; cursor: none; }
.insight-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); }
.card-meta { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 1rem; }
.card-title { font-size: 2rem; line-height: 1.1; margin-bottom: 1rem; }
.card-excerpt { font-size: 1rem; color: var(--text-gray); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; }
.card-link { font-weight: 600; color: var(--navy); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.card-link:hover { color: var(--yellow); }

/* ── 11. ARTICLE PAGES ── */
.journal-header { background: var(--navy-deep); padding: 48px 56px; border-bottom: 2px solid var(--yellow); }
.journal-label { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 10px; }
.journal-title { font-family: var(--font-serif); font-size: 28px; font-weight: 300; color: white; }
.article { max-width: 780px; margin: 0 auto; padding: 96px 56px; border-bottom: 1px solid var(--rule); }
.article-title { font-family: var(--font-serif); font-size: clamp(32px,4vw,52px); font-weight: 300; line-height: 1.08; color: var(--navy); margin-bottom: 28px; }
.article-intro { font-family: var(--font-serif); font-size: 20px; font-weight: 300; font-style: italic; line-height: 1.65; color: var(--slate); border-left: 3px solid var(--yellow); padding-left: 24px; margin-bottom: 56px; }
.article-body p { font-size: 16px; line-height: 1.95; font-weight: 400; color: var(--ink); margin-bottom: 28px; }
.article-pull { font-family: var(--font-serif); font-size: 22px; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--navy); border-left: 3px solid var(--yellow); padding: 20px 0 20px 28px; margin: 48px 0; }
.article-stat { background: var(--offwhite); border-left: 3px solid var(--yellow); padding: 20px 28px; margin: 40px 0; }
.article-stat-num { font-family: var(--font-serif); font-size: 42px; font-weight: 300; color: var(--navy); line-height: 1; margin-bottom: 6px; }
.article-source { font-size: 11px; color: var(--slate); opacity: .6; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); line-height: 1.8; }

/* ── 12. INTAKE FORM STYLES ── */
.intake-layout { display: flex; min-height: calc(100vh - var(--header-h)); }
.intake-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--navy-deep); border-right: 1px solid rgba(255,255,255,0.05); position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 24px 0 40px; }
.intake-main { flex: 1; padding: 48px 72px 100px 96px; max-width: 960px; }
.intake-section { display: none; }
.intake-section.active { display: block; animation: fadeUp 0.18s ease; }
.q-block { margin-bottom: 28px; }
.radio-grid, .check-grid, .flag-grid { display: grid; gap: 8px; }
.radio-opt, .check-opt, .flag-opt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--white); border: 1px solid var(--slate-light); border-radius: 3px; cursor: pointer; font-size: 13px; color: var(--ink); user-select: none; }
.radio-opt.sel, .check-opt.sel { background: #EEF1F8; border-color: var(--navy); color: var(--navy); }
.flag-opt.sel { background: var(--status-amber-bg); border-color: var(--status-amber-border); color: var(--status-amber); }
.text-input, .select-input, .num-input, .date-input { width: 100%; padding: 11px 14px; background: var(--white); border: 1px solid var(--slate-light); border-radius: 3px; font-family: var(--font-body); font-size: 13px; outline: none; }

/* ── 13. LEGAL PAGES ── */
.legal-hero { padding: 160px 56px 80px; background: var(--white); border-bottom: 1px solid var(--rule); }
.legal-hero-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.legal-hero-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--slate-lt); }
.legal-hero-hed { font-family: var(--font-serif); font-size: clamp(44px,6vw,80px); font-weight: 300; color: var(--navy-deep); line-height: .96; margin-bottom: 20px; }
.legal-hero-hed em { font-style: italic; color: var(--navy-mid); }
.legal-hero-meta { font-size: 12px; font-weight: 400; color: var(--slate); letter-spacing: .06em; }

.legal-body { max-width: 800px; margin: 0 auto; padding: 80px 56px 120px; }
.legal-section { margin-bottom: 56px; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section-num { font-family: var(--font-display); font-size: 12px; letter-spacing: .22em; color: var(--slate); margin-bottom: 12px; }
.legal-section-title { font-family: var(--font-serif); font-size: clamp(22px,2.5vw,30px); font-weight: 600; color: var(--navy); margin-bottom: 20px; line-height: 1.15; }
.legal-section-body { font-size: 15px; line-height: 1.95; font-weight: 400; color: var(--ink); }
.legal-section-body p { margin-bottom: 1.4em; }
.legal-section-body p:last-child { margin-bottom: 0; }
.legal-section-body ul { margin: 0 0 1.4em 1.5em; }
.legal-section-body li { margin-bottom: .55em; line-height: 1.8; }
.legal-rule { width: 100%; height: 1px; background: var(--rule); margin: 56px 0; }

.legal-disclaimer { background: var(--diamond); border-left: 3px solid var(--yellow); padding: 28px 36px; margin-bottom: 56px; }
.legal-disclaimer p { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--navy); line-height: 1.7; margin-bottom: 0; }

.legal-contact { background: var(--navy-deep); padding: 64px 56px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.legal-contact-text h2 { font-family: var(--font-serif); font-size: clamp(22px,2.5vw,32px); font-weight: 300; color: var(--white); line-height: 1.2; margin-bottom: 10px; }
.legal-contact-text h2 em { font-style: italic; color: var(--yellow); }
.legal-contact-text p { font-size: 14px; color: rgba(255,255,255,.6); font-weight: 300; margin-bottom: 0; }

/* ── 14. FOOTER (Light Theme) ── */
.footer { background-color: var(--white); color: var(--ink); padding: 5rem 4rem 2rem; position: relative; overflow: hidden; border-top: 1px solid var(--rule); }
.footer-rule-top { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,var(--rule) 35%,var(--rule) 65%,transparent); }
.footer-tagline-band { padding: 3rem 56px 2.6rem; border-bottom: 1px solid var(--rule); position: relative; z-index: 1; }

/* Home & Story Footer Layout */
.footer-top { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-bottom: 1px solid var(--rule); position: relative; z-index: 1; }
.footer-brand-col { padding: 2.6rem 56px; border-right: 1px solid var(--rule); }
.footer-nav-group { display: flex; flex-direction: column; padding: 2.6rem 40px; }
.footer-nav-group + .footer-nav-group { border-left: 1px solid var(--rule); }

/* Typography & Colors for Light Theme */
.footer-tagline-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.footer-tagline { font-family: var(--font-serif); font-size: clamp(1.35rem,2.4vw,2rem); font-weight: 300; font-style: italic; color: var(--navy); line-height: 1.3; letter-spacing: .01em; max-width: 620px; }

.footer-logo { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 600; color: var(--navy); margin-bottom: 1rem; display: inline-block; }
.footer-logo img { height: 26px; filter: none; opacity: .9; margin-bottom: 16px; }
.footer-wordmark { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.footer-wordmark span { color: var(--yellow-d); }
.footer-brand-desc, .footer-desc { font-size: 12px; font-weight: 400; color: var(--slate); line-height: 1.75; letter-spacing: .03em; max-width: 210px; }

.footer-nav-label, .footer-col-title { font-family: var(--font-body); font-size: 8.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--navy); opacity: .7; margin-bottom: 18px; }
.footer-nav-link, .footer-col a { font-size: 12.5px; font-weight: 500; color: var(--slate); cursor: none; transition: color .2s, padding-left .2s; letter-spacing: .04em; padding: 5px 0; display: flex; align-items: center; gap: 0; }
.footer-nav-link::before { content: ''; width: 0; height: 1px; background: var(--navy); transition: width .22s ease; flex-shrink: 0; margin-right: 0; }
.footer-nav-link:hover, .footer-col a:hover { color: var(--navy); }
.footer-nav-link:hover::before { width: 10px; margin-right: 7px; }

/* Insights Page Footer Specifics */
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4rem; max-width: 1200px; margin: 0 auto 4rem; }
.footer-brand { max-width: 350px; }
.footer-email { color: var(--navy); font-weight: 600; font-size: 1rem; transition: opacity 0.2s; }
.footer-email:hover { color: var(--navy-mid); }
.footer-links { display: flex; gap: 4rem; }
.footer-col { display: flex; flex-direction: column; gap: 1rem; }

/* Bottom Row */
.footer-bottom { max-width: 1200px; margin: 0 auto; padding: 2rem 56px 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--slate); z-index: 1; position: relative;}
.footer-copy { font-size: 10px; font-weight: 500; color: var(--slate); letter-spacing: .08em; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); cursor: none; transition: color .2s; }
.footer-legal a:hover { color: var(--navy); }
.footer-legal a.is-current-legal { color: var(--navy); font-weight: 700; }

.footer-social { display: flex; gap: 1.5rem; }
.footer-social a { color: var(--slate); transition: color 0.2s; cursor: none; font-weight: 500;}
.footer-social a:hover { color: var(--navy); }

/* ── 15. ANIMATIONS ── */
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s ease, transform .85s ease; }
.reveal.visible, .reveal.in { opacity: 1; transform: translateY(0); }

/* ── 16. RESPONSIVE ── */
@media(max-width:1060px) {
  .nav, .nav.scrolled { padding-left: 32px; padding-right: 32px; }
  .nav-links li:not(:last-child) { display: none; }
  .nav-dropdown { display: none!important; }
  
  .hero { padding: 0 32px 44px; }
  .hero-subgrid { grid-template-columns: 1fr; gap: 36px; }
  
  .about, .begin-inner { grid-template-columns: 1fr; gap: 56px; }
  .about-sticky, .begin-sticky { position: static; }
  
  .services-grid, .brief-posts, .fit, .cases-grid, .results-pillars { grid-template-columns: 1fr; }
  .services-header-wrap { grid-template-columns: 1fr; gap: 32px; }
  .svc { border-left: none; border-top: 1px solid var(--rule); }
  
  .contact, .email-list { grid-template-columns: 1fr; gap: 56px; }
  .form-row, .email-input-wrap { flex-direction: column; }
  .email-input { border-right: 1px solid rgba(255,255,255,.12); }
  .email-submit { width: 100%; }
  
  .case-card, .case-card-wide { grid-template-columns: 1fr; }
  .case-card-visual, .case-card-wide .case-card-visual { min-height: 280px; }
  .case-placeholder { min-height: 280px!important; }
  .case-card-content { padding: 40px 32px; }
  
  .social-strip { flex-direction: column; gap: 36px; align-items: flex-start; }
  .social-links { flex-direction: column; width: 100%; }
  .social-link { width: 100%; }
  
  .visual-strip { grid-template-columns: 1fr 1fr; height: auto; }
  .visual-cell { height: 220px; }
  
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--rule); }
  .footer-tagline-band, .footer-brand-col, .footer-nav-group, .footer-bottom { padding-left: 28px; padding-right: 28px; }
  
  .about, .services, .fit, .begin, .contact, .cases, .story-teaser { padding: 80px 32px; }
  .story-teaser-inner { grid-template-columns: 1fr; gap: 32px; }
  
  .brief-band { padding: 80px 32px 64px; }
  .brief-band-inner { grid-template-columns: 1fr; }
  .brief-posts-wrap { padding: 0 32px 0; }
  
  .email-list { padding: 80px 32px; }
  .social-strip { padding: 56px 32px; }
  .footer { padding: 56px 32px 36px; }
  
  .testimonials-grid, .team-grid, .team-header, .testimonials-header, .sku-system-header-inner { grid-template-columns: 1fr; }
  .team-card-photo { height: 300px; }
  .testimonials, .team { padding: 80px 32px; }
  .sku-system-header { padding: 72px 32px 48px; }

  /* Our Story Specific Responsive Overrides */
  .story-hero { grid-template-columns: 1fr; min-height: auto; }
  .story-hero-left { padding: 120px 32px 56px; }
  .story-hero-right { padding: 48px 32px 72px; border-top: 1px solid rgba(46,64,119,.06); }
  .story-hero-scroll { display: none; }
  .origin { grid-template-columns: 1fr; gap: 48px; padding: 80px 32px; }
  .origin-sticky { position: static; }
  .problem-band { grid-template-columns: 1fr; gap: 40px; padding: 72px 32px; }
  .mission { padding: 80px 32px; }
  .mission-values { grid-template-columns: 1fr; }
  .credentials { grid-template-columns: 1fr; gap: 48px; padding: 80px 32px; }
  .credentials-sticky { position: static; }
  .credentials-intro { max-width: 100%; }
  .story-cta { grid-template-columns: 1fr; gap: 32px; padding: 72px 32px; }

  /* Legal Pages Responsive */
  .legal-hero { padding: 120px 28px 60px; }
  .legal-body { padding: 60px 28px 80px; }
  .legal-contact { flex-direction: column; align-items: flex-start; padding: 48px 28px; }
}

@media (max-width: 768px) {
  .marquee-track { animation-duration: 18s; }
  .hero-ghost { display: none; }
  .hero-hed-outline, .hero-hed-solid { font-size: clamp(72px, 18vw, 120px); }
  
  .nav { padding: 1.5rem 2rem; }
  .nav-links { display: none; }
  .header { padding: 4rem 2rem 2rem; }
  .header h1 { font-size: 3rem; }
  .insights-grid { padding: 2rem; grid-template-columns: 1fr; }
  
  .footer { padding: 4rem 2rem 2rem; }
  .footer-grid { flex-direction: column; gap: 2.5rem; }
  .footer-links { flex-direction: column; gap: 2.5rem; }
  .footer-bottom { flex-direction: column-reverse; gap: 1rem; text-align: center; }
  .article { padding: 64px 28px; }
}

@media(max-width:520px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-nav-group+.footer-nav-group { border-left: none; border-top: 1px solid rgba(255,255,255,.07); }
}