*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  /* Brand canon — Stem Visual Identity Guidelines (Oct 2025). Nine named colors, two families.
     Earth tones lead; aqua tones (sky/ocean/deep-sea) accent sparingly. */
  --espresso:#40312E;   /* primary brand brown */
  --chocolate:#291E1C;  /* darkest brown */
  --vanilla:#FFFCF4;    /* warm off-white base */
  --ash:#ECE8E0;        /* light warm cream */
  --sand:#C5BEB6;       /* taupe */
  --driftwood:#847971;  /* mid greige */
  --sky:#CCDFFF;        /* pale blue — the only true blue, accent only */
  --ocean:#2F3C50;      /* mid navy */
  --deep-sea:#04192A;   /* darkest navy */

  /* semantic aliases used across the sheet (mapped to canon colors) */
  --brown:var(--chocolate); --navy:var(--deep-sea); --navy-2:var(--ocean);
  --iceblue:var(--sky);
  --cream:var(--ash); --cream-2:var(--vanilla);
  --taupe:var(--sand); --taupe-2:var(--sand); --taupe-deep:var(--driftwood);
  --ink:var(--chocolate); --ink-soft:rgba(41,30,28,.66); --ink-faint:rgba(41,30,28,.42);
  --line:rgba(41,30,28,.18); --line-light:rgba(236,232,224,.18);
  --serif:"Sorts Mill Goudy", Georgia, "Times New Roman", serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --step--1:clamp(.78rem,.74rem + .18vw,.88rem);
  --step-0:clamp(1rem,.95rem + .24vw,1.14rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.32rem + .9vw,2.1rem);
  --step-3:clamp(1.95rem,1.6rem + 1.7vw,3rem);
  --step-4:clamp(2.5rem,1.9rem + 3vw,4.4rem);
  --step-5:clamp(3.1rem,2.1rem + 5vw,6.4rem);
  --step-6:clamp(3.6rem,2rem + 8vw,9rem);

  --sp-2xs:.5rem; --sp-xs:.85rem; --sp-sm:1.15rem; --sp-md:1.6rem;
  --sp-lg:2.4rem; --sp-xl:3.6rem; --sp-2xl:5.2rem; --sp-3xl:7.5rem; --sp-4xl:10.5rem;
  --maxw:1480px; --gutter:clamp(1.5rem,6vw,7rem); --nav-maxw:1480px;
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans); font-size:var(--step-0); line-height:1.6;
  color:var(--ink); background:var(--navy);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:-.012em; text-wrap:balance; }
/* prevent widows / stranded last words: balance short blocks, pretty the longer ones */
.sec-head .sub,.assess-center p,.method-close,.close-inner p,.hero .lede,.proof h2,.rhythm-statement,.bleed-statement{ text-wrap:balance; }
.mstep p,.pillar p,.serve-card p,.tier .tdesc,.offer-row .od,.foot-brand p{ text-wrap:pretty; }
em{ font-style:italic; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto; }
.eyebrow{
  font-family:var(--sans); font-size:var(--step--1); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brown);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.eyebrow.on-dark{ color:var(--taupe-2); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }

/* buttons — brand CTA: cream fill, brown text, circular icon (minicircle cue) */
.btn{
  --bg:var(--cream); --fg:var(--brown); --ic:rgba(41,30,28,.10);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:var(--step--1); letter-spacing:.02em;
  background:var(--bg); color:var(--fg); padding:.7em .8em .7em 1.5em; border-radius:100px;
  border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  will-change:transform;
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:currentColor; opacity:0; transition:opacity .4s var(--ease-out); }
.btn:hover::before{ opacity:.10; }
.btn .arw{ display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; background:var(--ic); transition:transform .5s var(--ease-out), background .4s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -16px rgba(0,0,0,.45); }
.btn:hover .arw{ transform:translateX(3px); }
.btn.ghost{ --bg:transparent; --fg:var(--brown); --ic:rgba(41,30,28,.10); border-color:var(--line); padding:.85em 1.5em; }
.btn.ghost .arw{ display:none; }
.btn.ghost:hover{ box-shadow:none; }
.btn.on-dark.ghost{ --fg:var(--cream); border-color:var(--line-light); }
.btn.no-arw{ padding:.85em 1.6em; }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal].slide{ transform:translateX(-52px); }
[data-reveal].slide.in{ transform:none; }
[data-reveal].blur{ filter:blur(8px); }
[data-reveal].blur.in{ filter:blur(0); }
/* slide-in words: each word masked then rises */
.slidewords{ display:inline; }
.slidewords .w{ display:inline-block; overflow:hidden; vertical-align:top; }
.slidewords .w > span{ display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease-out); }
.slidewords.in .w > span{ transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .slidewords .w > span{ transform:none !important; }
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem max(var(--gutter), calc((100% - var(--nav-maxw)) / 2));
  color:var(--cream);
  transform:translateY(0);
  transition:background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), border-color .5s, transform .6s var(--ease-out);
  border-bottom:1px solid transparent;
}
/* frosted-glass blur behind the nav bar itself, so over an image the header has a soft blurred backdrop
   without dimming the image or text behind it */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask:linear-gradient(180deg,#000 58%, transparent);
  mask:linear-gradient(180deg,#000 58%, transparent);
  transition:opacity .5s var(--ease);
}
.site-header.solid::before{ opacity:0; }
.site-header.scrolled{ padding-block:.8rem; }
/* contextual theming: the bar adopts the color of the section beneath it.
   over image sections (hero/bleed/close) it has no theme class -> stays transparent (see-through). */
.site-header.solid{
  backdrop-filter:blur(12px) saturate(120%);
  box-shadow:0 10px 40px -22px rgba(0,0,0,.5);
  border-bottom:1px solid transparent;
}
.site-header.hdr-taupe.solid{ background:rgba(197,190,182,.85); border-bottom-color:rgba(41,30,28,.08); box-shadow:0 10px 40px -26px rgba(0,0,0,.28); }
.site-header.hdr-brown.solid{ background:rgba(41,30,28,.9);  border-bottom-color:rgba(236,232,224,.1); }
.site-header.hdr-navy.solid{  background:rgba(4,25,42,.88); border-bottom-color:rgba(236,232,224,.1); }
/* taupe is a light bar -> dark text, dark logo, inverted brown CTA */
.site-header.hdr-taupe{ color:var(--ink); }
.site-header.hdr-taupe .brand{ color:var(--ink); }
.site-header.hdr-taupe .wordmark{ filter:brightness(0); opacity:.88; }
.site-header.hdr-taupe .header-cta .btn{ --bg:var(--brown); --fg:var(--cream); --ic:rgba(236,232,224,.16); }
/* over navy the CTA becomes sky pale-blue (brand rule: sky only on navy) */
.site-header.hdr-navy .header-cta .btn{ --bg:var(--sky); --fg:var(--navy); --ic:rgba(4,25,42,.14); }
.brand{ display:inline-flex; align-items:center; gap:.65rem; color:var(--cream); }
.brand .wordmark{ transition:filter .5s var(--ease), opacity .5s var(--ease); }
.header-cta .btn{ transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .45s var(--ease), color .45s var(--ease); }
.brand .wordmark{ height:19px; width:auto; }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.2rem); }
.nav a.link{ font-family:var(--sans); font-size:var(--step--1); font-weight:500; letter-spacing:.02em; position:relative; padding:.3em 0; opacity:.98; }
.nav a.link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor; transition:width .4s var(--ease-out); }
.nav a.link:hover{ opacity:1; }
.nav a.link:hover::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:1.1rem; }
.header-cta .signin{ font-family:var(--sans); font-size:var(--step--1); font-weight:500; opacity:.98; }
.header-cta .signin:hover{ opacity:1; }
.menu-btn{ display:none; background:none; border:0; color:inherit; cursor:pointer; }
@media (max-width:940px){
  .nav{ display:none; }
  .header-cta .signin{ display:none; }
}

/* ============ HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(41,30,28,.55) 0%, rgba(41,30,28,.08) 34%, rgba(41,30,28,.30) 62%, rgba(41,30,28,.86) 100%),
    linear-gradient(90deg, rgba(4,25,42,.5) 0%, rgba(4,25,42,0) 55%);
}
.hero-inner{ position:relative; z-index:2; padding-bottom:calc(clamp(3rem,7vh,6rem) + 10svh); }
.hero h1{ font-size:var(--step-5); font-weight:300; letter-spacing:-.02em; white-space:nowrap; text-shadow:0 2px 40px rgba(0,0,0,.25); }
@media (max-width:560px){ .hero h1{ white-space:normal; } }
.hero h1 em{ color:inherit; font-style:normal; }
.hero .lede{ margin-top:1.6rem; max-width:44ch; font-size:var(--step-1); font-weight:300; color:var(--cream); font-family:var(--sans); font-style:normal; line-height:1.4; }
.hero .actions{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-stagger{ opacity:0; transform:translateY(26px); }
.hero.ready .hero-stagger{ animation:heroIn 1.2s var(--ease-out) forwards; }
.hero.ready .hero-stagger:nth-child(1){ animation-delay:.15s; }
.hero.ready .hero-stagger:nth-child(2){ animation-delay:.34s; }
.hero.ready .hero-stagger:nth-child(3){ animation-delay:.52s; }
.hero.ready .hero-stagger:nth-child(4){ animation-delay:.68s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero.ready .hero-stagger{ animation:none; opacity:1; transform:none; }
}

/* ============ SECTION SCAFFOLD ============ */
section{ position:relative; }
.section{ padding-block:var(--sp-3xl); }
.section.dark{ background:var(--navy); color:var(--cream); }
.section.brown{ background:var(--brown); color:var(--cream); }
.sec-head{ display:grid; grid-template-columns:1fr; gap:20px; max-width:64ch; margin-bottom:var(--sp-2xl); }
.sec-head h2{ font-size:clamp(2rem,1.3rem + 3vw,3.625rem); font-weight:300; }
.sec-head h2 em{ color:inherit; font-style:normal; }
.sec-head .sub{ font-size:22px; color:var(--ink-soft); max-width:52ch; font-weight:300; }
.section.dark .sub,.section.brown .sub,.rhythm .sub{ color:rgba(236,232,224,.72); }

/* ============ METHOD (warm taupe) ============ */
.method{ background:var(--taupe); }
.method .sec-head{ margin-inline:auto; text-align:center; max-width:66rem; }
.method .sec-head .sub{ margin-inline:auto; max-width:none; }
.method .sec-head h2 em{ color:inherit; }
.method .sec-head .eyebrow{ justify-content:center; }
.method .sec-head .eyebrow::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.method-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.6vw,1.5rem); }
.mstep{ background:var(--taupe); border:1px solid rgba(41,30,28,.08); border-radius:20px; padding:var(--sp-lg) var(--sp-md) calc(var(--sp-lg) + .3rem); position:relative; overflow:hidden; transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.mstep:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(41,30,28,.45); }
.mstep .mnum{ font-family:var(--serif); font-size:var(--step-2); font-weight:300; color:var(--ink-soft); display:block; margin-bottom:var(--sp-md); font-feature-settings:"tnum"; }
.mstep h3{ font-size:var(--step-1); font-weight:400; line-height:1.2; min-height:2.4em; margin-bottom:var(--sp-md); }
.mstep p{ font-size:16px; color:var(--ink-soft); line-height:1.66; }
.method-close{ margin:var(--sp-xl) auto 0; max-width:none; text-align:center; font-size:22px; font-weight:300; color:var(--ink-soft); }
@media (max-width:900px){ .method-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .method-grid{ grid-template-columns:1fr; } }

/* ============ FULL-BLEED (cinematic stat) ============ */
.bleed{ position:relative; min-height:88svh; display:flex; align-items:center; color:var(--cream); overflow:hidden; background:var(--navy); }
.bleed-media{ position:absolute; inset:-8% 0; z-index:0; background-size:cover; background-position:center; transform:translateY(var(--py,0)); will-change:transform; }
.bleed::after{ content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(41,30,28,.74) 0%, rgba(41,30,28,.5) 45%, rgba(41,30,28,.82) 100%),
    linear-gradient(90deg, rgba(4,25,42,.5) 0%, rgba(4,25,42,0) 55%); }
.bleed-inner{ position:relative; z-index:2; width:100%; padding-block:var(--sp-3xl); }
.bleed-grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,6vw,6rem); align-items:end; }
.bleed-stat{ font-family:var(--serif); font-weight:300; font-size:var(--step-6); line-height:.9; letter-spacing:-.03em; }
.bleed-stat sup{ font-size:.4em; vertical-align:super; color:var(--taupe-2); }
.bleed-stat + .bleed-cap{ margin-top:1rem; }
.bleed-cap{ font-family:var(--sans); font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:rgba(236,232,224,.72); max-width:26ch; }
.bleed-statement{ font-family:var(--serif); font-weight:300; font-size:var(--step-3); line-height:1.16; max-width:20ch; }
.bleed-statement em{ color:var(--taupe-2); }
.bleed .sec-head{ max-width:60rem; margin-bottom:5.625rem; }
.bleed .sec-head h2{ text-shadow:0 2px 30px rgba(0,0,0,.4); white-space:normal; max-width:none; text-wrap:balance; }
.bleed .sec-head .sub{ max-width:none; }
.bleed-close{ margin:var(--sp-2xl) 0 0; max-width:48rem; text-align:left; font-family:var(--serif); font-weight:300; font-size:clamp(1.15rem,1rem + .8vw,1.6rem); line-height:1.4; color:rgba(236,232,224,.92); text-wrap:pretty; }
.bleed .pillar h3{ min-height:2.4em; }
.bleed .sec-head h2 em{ color:inherit; }
.bleed .sub{ color:rgba(236,232,224,.94); }
.bleed-tag{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:var(--step-1); color:var(--taupe-2); }
@media (max-width:760px){ .bleed-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ============ RHYTHM / SERVE (dark) ============ */
.rhythm{ background:var(--brown); color:var(--cream); }
.rhythm-statement{ font-family:var(--serif); font-weight:300; font-size:var(--step-3); line-height:1.18; max-width:24ch; margin-bottom:var(--sp-2xl); }
.rhythm-statement em{ color:var(--taupe-2); }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.5rem); margin-bottom:0; }
.pillar{ background:rgba(41,30,28,.42); border:1px solid rgba(236,232,224,.14); border-radius:20px; padding:var(--sp-lg) var(--sp-md); -webkit-backdrop-filter:blur(11px) saturate(115%); backdrop-filter:blur(11px) saturate(115%); transition:transform .55s var(--ease-out), background .5s, border-color .5s; }
.pillar:hover{ transform:translateY(-6px); background:rgba(41,30,28,.56); border-color:rgba(236,232,224,.24); }
.pillar .k{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe-2); }
.pillar h3{ font-size:var(--step-1); font-weight:400; margin:.7rem 0 .7rem; }
.pillar p{ font-size:16px; color:rgba(236,232,224,.92); line-height:1.66; }
.serve{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem); }
.serve-card{ border:1px solid rgba(236,232,224,.16); border-radius:20px; padding:clamp(1.6rem,3vw,2.5rem); transition:transform .55s var(--ease-out), border-color .5s; }
.serve-card:hover{ transform:translateY(-6px); border-color:rgba(236,232,224,.28); }
.serve-card h3{ font-family:var(--serif); font-weight:400; font-size:var(--step-1); line-height:1.2; margin-bottom:var(--sp-md); }
.serve-card p{ font-family:var(--sans); font-size:16px; font-weight:400; color:rgba(236,232,224,.82); line-height:1.66; }
.serve-card .meta{ margin-top:1.3rem; font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe-2); }
@media (max-width:820px){ .bleed .sec-head h2{ white-space:normal; } .bleed .pillar h3{ min-height:0; } .pillars{ grid-template-columns:1fr; } .serve{ grid-template-columns:1fr; } .assess-center h2{ white-space:normal; } .assess-center p .p-break{ display:none; } .rhythm .sub .sub-break{ display:none; } .offer .sub .sub-break{ display:none; } }

/* ============ ASSESSMENT (dark, biograph-style scattered tiles) ============ */
.assess{ background:var(--navy); color:var(--cream); overflow:hidden; }
.assess-hero{ position:relative; display:grid; place-items:center; margin-bottom:var(--sp-2xl); }
.assess-center{ position:relative; z-index:3; text-align:center; max-width:920px; margin-inline:auto; display:grid; grid-template-columns:1fr; gap:20px; }
.assess-center .eyebrow{ justify-content:center; color:var(--taupe-2); }
.assess-center .eyebrow::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.assess-center h2{ font-size:clamp(2rem,1.3rem + 3vw,3.625rem); font-weight:300; margin:0; letter-spacing:-.015em; line-height:1.08; white-space:nowrap; }
.assess-center h2 em{ color:inherit; font-style:normal; }
.assess-center p{ font-size:22px; font-weight:300; color:rgba(236,232,224,.78); max-width:76ch; margin-inline:auto; line-height:1.5; }
/* mobile: let the assessment headline wrap (base rule above forces nowrap) */
@media (max-width:820px){ .assess-center h2{ white-space:normal; } }
.assess-cta{ display:inline-flex; margin-top:18px; }
.assess .btn{ --bg:var(--sky); --fg:var(--navy); --ic:rgba(4,25,42,.14); }

.assess-sub{ font-family:var(--sans); font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe-2); margin-bottom:var(--sp-md); }
.domains{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.4vw,1.1rem); margin-bottom:36px; }
.domain{ display:flex; align-items:center; gap:1rem; padding:var(--sp-md); border:1px solid rgba(236,232,224,.16); border-radius:16px; overflow:hidden; transition:background .4s, border-color .5s, transform .55s var(--ease-out); position:relative; }
.domain::before{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--iceblue); transition:width .5s var(--ease-out); }
.domain:hover{ background:rgba(204,223,255,.05); border-color:rgba(236,232,224,.3); transform:translateY(-4px); }
.domain:hover::before{ width:100%; }
.domain .thumb{ width:58px; height:58px; flex:none; border-radius:12px; overflow:hidden; }
.domain .thumb img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:transform .8s var(--ease-out); }
.domain:hover .thumb img{ transform:scale(1.08); }
.domain .dtext{ display:flex; flex-direction:column; gap:.25rem; }
.domain .idx{ font-family:var(--sans); font-size:.64rem; letter-spacing:.18em; color:var(--taupe-2); }
.domain .nm{ font-family:var(--serif); font-size:var(--step-0); font-weight:400; line-height:1.15; }
@media (max-width:820px){ .domains{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .domains{ grid-template-columns:1fr; } }

/* radial tile WHEEL above the assessment headline — mirrors biograph's rotating "Circle":
   12 spoke-arms hold photo tiles on the rim of a big wheel; only the top arc shows;
   the wheel rotates continuously AND with scroll (see JS). */
.assess-hero{ padding-top:clamp(160px,23vw,320px); }
.awheel-stage{ position:absolute; inset:0 0 auto 0; height:clamp(240px,27vw,360px); overflow:hidden; pointer-events:none; z-index:1;
  -webkit-mask:linear-gradient(180deg,#000 70%, transparent); mask:linear-gradient(180deg,#000 70%, transparent); }
/* geometry mirrors biograph: tile ~5.6vw (107px @1920), wheel ~96vw (1800px @1920), tiles on the rim */
.awheel{ --wheel:min(1800px,96vw); --tile:clamp(51px,4.48vw,88px); --R:calc(var(--wheel)*.47);
  position:absolute; left:50%; top:0; width:var(--wheel); height:var(--wheel);
  transform:translateX(-50%) rotate(-6deg); transform-origin:50% 50%; will-change:transform; }
.arm{ position:absolute; left:50%; top:50%; width:var(--tile); height:var(--tile);
  transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateY(calc(var(--R) * -1)); }
.wtile{ display:block; width:100%; height:100%; border-radius:16px; overflow:hidden;
  border:1px solid rgba(236,232,224,.18); box-shadow:0 26px 54px -22px rgba(0,0,0,.6); background:var(--navy-2); }
.wtile img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92) brightness(.97); }
@media (prefers-reduced-motion: reduce){ .awheel{ transform:translateX(-50%) rotate(-6deg) !important; } }
@media (max-width:640px){ .awheel{ --wheel:min(1100px,235vw); --tile:clamp(59px,12vw,86px); } .awheel-stage{ height:clamp(190px,36vw,250px); } }

/* ============ PROOF / TRUSTED-BY (light band) ============ */
.proof{ background:var(--navy); color:var(--cream); padding-block:var(--sp-3xl); border-top:1px solid rgba(236,232,224,.14); }
.proof .sec-head{ margin-inline:auto; text-align:center; max-width:60ch; margin-bottom:var(--sp-3xl); }
.proof .sec-head .eyebrow{ justify-content:center; }
.proof .sec-head .eyebrow::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.proof h2{ font-size:clamp(2rem,1.3rem + 3vw,3.625rem); font-weight:300; line-height:1.14; color:var(--taupe-2); }
.proof h2 em{ font-style:normal; color:var(--taupe-2); }
/* infinite logo marquee — mirrors growyourbrand.ca (.marquee-track, 35s linear, translateX 0→-50%, logos duplicated) */
.logo-wall{ overflow:hidden; min-height:44px; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width:max-content; align-items:center; gap:clamp(2.4rem,6vw,5rem);
  animation:marquee 35s linear infinite; will-change:transform; }
.logo-wall:hover .marquee-track{ animation-play-state:paused; }
.marquee-track a{ display:grid; place-items:center; flex:none; }
/* fixed height gives each logo a layout box before it loads — prevents the 0-height flex/lazy-load deadlock
   grayscale+invert renders every logo as a light-grey monochrome; mix-blend screen drops white/opaque backs into the navy so no box shows */
.marquee-track img{ height:clamp(27px,2.9vw,37px); width:auto; max-width:300px; object-fit:contain;
  opacity:.82; transition:opacity .5s var(--ease); }
/* per-logo size tuning so marks read at a consistent optical size */
.marquee-track img[src*="buildit"]{ height:clamp(31px,3.3vw,43px); }
.marquee-track img[src*="cotton-house"]{ height:clamp(32px,3.5vw,44px); }
.marquee-track img[src*="greenshield"], .marquee-track img[src*="wow-mobile"]{ height:clamp(30px,3.2vw,41px); }
.marquee-track img[src*="mazin"]{ height:clamp(23px,2.5vw,31px); }
.marquee-track a:hover img{ opacity:1; }
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
@media (max-width:480px){ .marquee-track img{ max-height:30px; } }

/* ============ OFFER (cream editorial list) ============ */
.offer{ background:var(--taupe); }
.offer-list{ border-top:1px solid var(--line); }
.offer-row{ display:grid; grid-template-columns:auto 1.1fr 1.4fr auto; gap:clamp(1rem,4vw,3rem); align-items:center; padding:var(--sp-lg) 0; border-bottom:1px solid var(--line); position:relative; transition:padding-left .5s var(--ease-out); }
.offer-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--brown); z-index:-1; transition:width .5s var(--ease-out); }
.offer-row:hover{ padding-left:1.6rem; }
.offer-row .oi{ font-family:var(--serif); font-size:.95rem; color:var(--taupe-deep); }
.offer-row .on{ font-family:var(--serif); font-size:var(--step-2); font-weight:300; }
.offer-row .od{ font-size:16px; line-height:1.66; color:var(--ink-soft); }
.offer-row .arw2{ font-size:1.3rem; color:var(--taupe-deep); transition:transform .5s var(--ease-out), color .4s; }
.offer-row:hover .arw2{ transform:translateX(6px); color:var(--navy); }
/* dark-brown text: How Stem Works (method) + More Ways (offer) sections */
.method .sec-head .sub, .method .mstep .mnum, .method .mstep p, .method-close,
.offer .sec-head .sub, .offer-row .oi, .offer-row .od, .offer-row .arw2{ color:var(--brown); }
@media (max-width:820px){ .offer-row{ grid-template-columns:auto 1fr auto; } .offer-row .od{ display:none; } }

/* ============ MEMBERSHIP (cream) ============ */
.membership{ background:var(--brown); }
.mem-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:var(--sp-2xl); }
.mem-head h2{ font-size:clamp(2rem,1.3rem + 3vw,3.625rem); font-weight:300; max-width:20ch; color:var(--cream); }
.mem-head h2 em{ color:inherit; font-style:normal; }
.membership .eyebrow{ color:var(--taupe-2); }
.membership .seg{ background:rgba(236,232,224,.08); border-color:var(--line-light); }
.membership .seg button{ color:rgba(236,232,224,.7); }
.membership .seg .thumb{ background:var(--taupe); }
.membership .seg button[aria-selected="true"]{ color:var(--brown); }
.membership .tiers[data-seg-group="business"][data-active="true"]{ display:block; }
.membership .tiers[data-seg-group="business"] .tier{ width:100%; }
.membership .tiers[data-seg-group="business"] ul{ display:grid; grid-auto-flow:column; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,auto); column-gap:var(--sp-lg); row-gap:.7rem; }
.membership .founder p{ color:rgba(236,232,224,.75); }
.seg{ display:inline-flex; position:relative; background:rgba(41,30,28,.06); border:1px solid var(--line); border-radius:100px; padding:4px; }
.seg .thumb{ position:absolute; top:4px; left:0; height:calc(100% - 8px); background:var(--brown); border-radius:100px; transition:transform .5s var(--ease-out), width .5s var(--ease-out); z-index:0; }
.seg button{ position:relative; z-index:1; background:none; border:0; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:var(--step--1); letter-spacing:.02em; padding:.8em 1.9em; border-radius:100px; color:var(--ink-soft); transition:color .4s; }
.seg button[aria-selected="true"]{ color:var(--cream); }
[data-seg-group]{ display:none; }
[data-seg-group][data-active="true"]{ display:grid; }
.tiers{ grid-template-columns:1fr 1fr; gap:var(--sp-lg); }
.tier{ border:1px solid rgba(236,232,224,.14); border-radius:16px; padding:var(--sp-lg); background:rgba(236,232,224,.04); color:var(--cream); display:flex; flex-direction:column; transition:transform .5s var(--ease-out), background .45s, border-color .4s; }
.tier:hover{ transform:translateY(-4px); background:rgba(236,232,224,.06); border-color:rgba(236,232,224,.26); }
.tier.feature{ background:rgba(236,232,224,.07); border-color:rgba(236,232,224,.3); position:relative; }
.tier .tname{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-2); }
.tier .price{ font-family:var(--serif); font-size:var(--step-1); font-weight:400; line-height:1.2; letter-spacing:-.012em; margin:.8rem 0 .7rem; color:var(--cream); }
.tier .price small{ font-size:.9rem; color:rgba(236,232,224,.7); font-family:var(--sans); }
.tier .tdesc{ font-size:16px; color:rgba(236,232,224,.74); margin-bottom:var(--sp-md); }
.tier ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:var(--sp-lg); }
.tier li{ display:flex; gap:.6rem; font-size:16px; align-items:flex-start; color:rgba(236,232,224,.9); }
.tier li::before{ content:""; width:16px; height:16px; margin-top:.25em; flex:none; border-radius:50%; background:var(--cream); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.tier .btn{ margin-top:auto; align-self:flex-start; }
.founder{ margin-top:var(--sp-lg); display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-lg); }
.founder p{ font-size:var(--step--1); color:rgba(236,232,224,.75); max-width:none; }
.founder p strong{ color:var(--cream); font-weight:700; }
@media (max-width:720px){ .tiers{ grid-template-columns:1fr; } .membership .tiers[data-seg-group="business"] .tier{ width:100%; } .membership .tiers[data-seg-group="business"] ul{ grid-auto-flow:row; grid-template-columns:1fr; grid-template-rows:auto; } }

/* ============ CLOSE (dark full-bleed) ============ */
.close{ position:relative; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--cream); overflow:hidden; background:var(--brown); }
.close-media{ position:absolute; inset:-8% 0; z-index:0; background-size:cover; background-position:center; transform:translateY(var(--py,0)); }
.close::after{ content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(41,30,28,.74) 0%, rgba(41,30,28,.5) 45%, rgba(41,30,28,.82) 100%),
    linear-gradient(90deg, rgba(4,25,42,.5) 0%, rgba(4,25,42,0) 55%); }
.close-inner{ position:relative; z-index:2; padding:var(--sp-3xl) var(--gutter); }
.close-inner .eyebrow{ margin-bottom:1.4rem; }
.close-inner h2{ font-size:var(--step-5); font-weight:300; letter-spacing:-.02em; line-height:1.35; margin-bottom:1.8rem; }
.close-inner h2 em{ color:inherit; font-style:normal; }
.close-inner p{ font-size:var(--step-1); font-weight:400; color:rgba(236,232,224,.82); max-width:58ch; margin:0 auto 2.2rem; font-family:var(--sans); font-style:normal; }
.close-inner .actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy); color:var(--cream); padding-top:var(--sp-3xl); }
.foot-grid{ display:grid; grid-template-columns:1fr 2.6fr; gap:clamp(2rem,5vw,4rem); padding-bottom:var(--sp-2xl); border-bottom:1px solid rgba(236,232,224,.14); }
.foot-brand p{ margin:1.4rem 0 0; color:rgba(236,232,224,.66); max-width:38ch; font-size:var(--step--1); line-height:1.7; }
.foot-visit{ margin-top:1.8rem; }
.foot-visit p{ margin:0 0 .7rem; color:rgba(236,232,224,.66); font-size:var(--step--1); line-height:1.6; }
.foot-visit a{ display:block; color:rgba(236,232,224,.7); font-size:var(--step--1); margin-bottom:.5rem; transition:color .3s; }
.foot-visit a:hover{ color:var(--cream); }
.foot-nav{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1.2rem,2.4vw,2.4rem); }
.foot-col h4{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-2); margin-bottom:1.1rem; }
.foot-col a{ display:block; color:rgba(236,232,224,.7); font-size:var(--step--1); margin-bottom:.7rem; transition:color .3s; }
.foot-col a:hover{ color:var(--cream); }
.foot-base{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-md); font-size:.78rem; color:rgba(236,232,224,.5); flex-wrap:wrap; gap:1rem; }
.foot-legal a{ margin-left:1.4rem; color:inherit; }
.foot-legal a:hover{ color:var(--cream); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .foot-nav{ grid-template-columns:1fr 1fr; } }


/* ===================================================================
   SUBPAGE COMPONENTS + MOBILE NAV  (added for multi-page build)
   =================================================================== */

/* --- working mobile menu --- */
.mobile-nav{ position:fixed; inset:0 0 auto 0; z-index:55; background:var(--brown); color:var(--cream);
  padding:calc(72px + 1rem) var(--gutter) 2rem; transform:translateY(-100%); transition:transform .5s var(--ease-out);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55); display:none; }
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav > a{ display:block; font-family:var(--serif); font-size:1.5rem; padding:.55rem 0; border-bottom:1px solid var(--line-light); color:var(--cream); }
.mobile-nav > a:last-of-type{ border-bottom:0; }
.mobile-nav .m-cta{ margin-top:1.4rem; display:flex; gap:.8rem; flex-wrap:wrap; }
body.nav-locked{ overflow:hidden; }
@media (max-width:900px){ .menu-btn{ display:inline-flex; } .mobile-nav{ display:block; } }

/* --- interior page hero --- */
.pagehero{ position:relative; background:var(--brown); color:var(--cream); padding:calc(72px + var(--sp-3xl)) 0 var(--sp-3xl); overflow:hidden; }
.pagehero.navy{ background:var(--navy); }
.pagehero.image{ background:var(--navy); }
.pagehero .pagehero-media{ position:absolute; inset:-8% 0; z-index:0; background-size:cover; background-position:center; }
.pagehero.image::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(41,30,28,.72),rgba(4,25,42,.72)); }
.pagehero .wrap{ position:relative; z-index:2; }
.pagehero .crumbs{ font-family:var(--sans); font-size:var(--step--1); letter-spacing:.02em; color:rgba(236,232,224,.6); margin-bottom:1.4rem; }
.pagehero .crumbs a{ color:rgba(236,232,224,.6); } .pagehero .crumbs a:hover{ color:var(--cream); }
.pagehero h1{ font-size:clamp(2.4rem,1.6rem + 3.6vw,4.4rem); font-weight:300; max-width:18ch; }
.pagehero h1 em{ font-style:normal; color:var(--taupe-2); }
.pagehero .lead{ margin-top:1.4rem; max-width:56ch; font-size:22px; font-weight:300; color:rgba(236,232,224,.82); line-height:1.5; }
.pagehero .actions{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* --- generic light/dark section helpers already exist (.section, .section.dark/.brown) --- */
.section.taupe{ background:var(--taupe); color:var(--ink); }
.lead-block{ max-width:64ch; }
.lead-block p{ font-size:22px; font-weight:300; line-height:1.55; color:var(--ink-soft); }
.section.dark .lead-block p, .section.brown .lead-block p{ color:rgba(236,232,224,.8); }

/* --- feature split (text + media) --- */
.fsplit{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.fsplit.rev .fsplit-media{ order:-1; }
.fsplit-media{ border-radius:22px; overflow:hidden; aspect-ratio:4/3; background:var(--taupe-deep); }
.fsplit-media img{ width:100%; height:100%; object-fit:cover; }
.fsplit h2{ font-size:var(--step-3); font-weight:300; margin-bottom:1.1rem; }
.fsplit p{ font-size:var(--step-0); line-height:1.7; color:var(--ink-soft); margin-bottom:1rem; }
.section.dark .fsplit p,.section.brown .fsplit p{ color:rgba(236,232,224,.8); }
.ticks{ list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.ticks li{ display:flex; gap:.6rem; align-items:flex-start; font-size:16px; color:var(--ink-soft); }
.section.dark .ticks li,.section.brown .ticks li{ color:rgba(236,232,224,.88); }
.ticks li::before{ content:""; width:16px; height:16px; margin-top:.25em; flex:none; border-radius:50%;
  background:currentColor; opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat; }

/* --- hub cards (services/explore/membership landing) --- */
.hubgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.hubcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; padding:clamp(1.6rem,3vw,2.3rem); transition:transform .5s var(--ease-out), border-color .5s, background .5s; background:transparent; }
.section.dark .hubcard,.section.brown .hubcard{ border-color:var(--line-light); }
.hubcard:hover{ transform:translateY(-6px); border-color:var(--taupe-deep); }
.hubcard .hc-idx{ font-family:var(--serif); font-size:.95rem; color:var(--taupe-deep); }
.hubcard h3{ font-family:var(--serif); font-weight:400; font-size:var(--step-2); margin:.5rem 0 .7rem; }
.hubcard p{ font-size:16px; line-height:1.66; color:var(--ink-soft); margin-bottom:1.4rem; }
.section.dark .hubcard p,.section.brown .hubcard p{ color:rgba(236,232,224,.82); }
.hubcard .hc-link{ margin-top:auto; font-family:var(--sans); font-weight:600; font-size:var(--step--1); letter-spacing:.02em; display:inline-flex; align-items:center; gap:.5em; }
.hubcard .hc-link .arw2{ transition:transform .4s var(--ease-out); }
.hubcard:hover .hc-link .arw2{ transform:translateX(5px); }

/* --- FAQ (native details) --- */
.faq{ max-width:64rem; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); }
.section.dark .faq details,.section.brown .faq details{ border-color:var(--line-light); }
.faq summary{ list-style:none; cursor:pointer; padding:1.3rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:center;
  font-family:var(--serif); font-size:var(--step-1); font-weight:400; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:none; width:22px; height:22px; position:relative; transition:transform .4s var(--ease-out); }
.faq summary .pm::before,.faq summary .pm::after{ content:""; position:absolute; background:currentColor; }
.faq summary .pm::before{ left:0; top:10px; width:22px; height:2px; }
.faq summary .pm::after{ left:10px; top:0; width:2px; height:22px; transition:opacity .3s; }
.faq details[open] summary .pm::after{ opacity:0; }
.faq details[open] summary .pm{ transform:rotate(90deg); }
.faq .fa{ padding:0 0 1.4rem; max-width:70ch; font-size:16px; line-height:1.7; color:var(--ink-soft); }
.section.dark .faq .fa,.section.brown .faq .fa{ color:rgba(236,232,224,.78); }

/* --- team grid --- */
.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(1rem,2.2vw,1.8rem); }
.team-card .avatar{ aspect-ratio:1/1; border-radius:18px; overflow:hidden; background:var(--taupe-deep); margin-bottom:1rem; }
.team-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.team-card h3{ font-family:var(--serif); font-weight:400; font-size:var(--step-1); }
.team-card .role{ font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe-2); margin-top:.3rem; }

/* --- stats --- */
.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(1.4rem,3vw,3rem); }
.statb .n{ font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,1.6rem+4vw,5rem); line-height:1; letter-spacing:-.02em; }
.statb .l{ margin-top:.6rem; font-size:16px; color:var(--ink-soft); max-width:26ch; }
.section.dark .statb .l,.section.brown .statb .l{ color:rgba(236,232,224,.72); }

/* --- contact + forms --- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); }
.contact-info p{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin-bottom:.5rem; }
.section.dark .contact-info p,.section.brown .contact-info p{ color:rgba(236,232,224,.8); }
.contact-info a{ color:inherit; border-bottom:1px solid currentColor; }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label{ font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe-2); }
.field input,.field textarea{ font-family:var(--sans); font-size:16px; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--line-light);
  background:rgba(236,232,224,.06); color:var(--cream); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(236,232,224,.4); }
.section.taupe .field input,.section.taupe .field textarea{ background:rgba(41,30,28,.04); border-color:var(--line); color:var(--ink); }

/* --- legal prose --- */
.legal{ max-width:70ch; margin-inline:auto; }
.legal h2{ font-family:var(--serif); font-weight:400; font-size:var(--step-2); margin:2.2rem 0 .8rem; }
.legal p,.legal li{ font-size:16px; line-height:1.8; color:var(--ink-soft); margin-bottom:1rem; }
.legal ul{ padding-left:1.2rem; }
.placeholder-note{ display:inline-block; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--taupe-deep); border:1px dashed var(--taupe-deep); border-radius:100px; padding:.4em 1em; margin-bottom:1.6rem; }

/* --- blog list --- */
.bloglist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(1.2rem,2.4vw,2rem); }
.blogcard{ border:1px solid var(--line-light); border-radius:20px; overflow:hidden; transition:transform .5s var(--ease-out), border-color .5s; }
.blogcard:hover{ transform:translateY(-6px); border-color:var(--taupe-deep); }
.blogcard .thumb{ aspect-ratio:16/10; background:var(--taupe-deep); overflow:hidden; }
.blogcard .thumb img{ width:100%; height:100%; object-fit:cover; }
.blogcard .bc-body{ padding:1.4rem 1.5rem 1.7rem; }
.blogcard .cat{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe-2); }
.blogcard h3{ font-family:var(--serif); font-weight:400; font-size:var(--step-1); margin:.6rem 0; }
.blogcard p{ font-size:15px; line-height:1.6; color:rgba(236,232,224,.7); }

/* --- generic CTA band (reuses .close styling but standalone) --- */
.ctaband{ background:var(--brown); color:var(--cream); text-align:center; }
.ctaband .wrap{ max-width:60rem; }
.ctaband h2{ font-size:clamp(2rem,1.3rem+3vw,3.625rem); font-weight:300; }
.ctaband p{ margin:1.1rem auto 2rem; max-width:52ch; font-size:22px; font-weight:300; color:rgba(236,232,224,.82); }
.ctaband .actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

@media (max-width:820px){
  .fsplit{ grid-template-columns:1fr; } .fsplit.rev .fsplit-media{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
}