/* ==========================================================================
   SereBloom Wellness — JAW Co demo
   Built on the JAW design system: intent tokens + documented .btn-* only.
   Brand values sampled from serebloom.com's own stylesheet. No invented hex.
   ========================================================================== */

/* ---- ROLE TOKENS (client palette) ---------------------------------------
   Sampled from Charlie's own TKO Demo Pros logo PNG (tkodemopros.com). Tints
   are derived with color-mix from these tokens, never invented.             */
:root{
  --primary:#0066EA;            /* Electric Blue — logo glow/banner          */
  --secondary:#000C30;          /* Logo Navy — outline + banner shadow       */
  --accent-1:#60849C;           /* Steel — chrome shading; lines/icons only  */
  --accent-2:#D8E4E4;           /* Chrome — letterform highlight; on dark    */
  --on-primary:#FFFFFF;         /* 5.1:1                                     */
  --on-secondary:#F0FCFC;       /* Chrome White — 18.9:1                     */
  --on-accent-1:#FFFFFF;
  --on-accent-2:#000C30;

  /* ---- SEMANTIC INTENT — components reference these, never raw hex ------- */
  --lead:var(--primary);      --on-lead:var(--on-primary);
  --deep:var(--secondary);    --on-deep:var(--on-secondary);
  --soft:var(--primary);
  --pop:var(--accent-2);      --on-pop:var(--on-accent-2);

  /* ---- NEUTRALS (derived tints of the brand tokens) --------------------- */
  --n-white:#FFFFFF;
  --n-cream:color-mix(in srgb, var(--accent-1) 7%, #FFFFFF);     /* cool steel wash */
  --n-harvest:color-mix(in srgb, var(--accent-1) 13%, #FFFFFF);
  --page:#FFFFFF;
  --surface:var(--n-white);
  --ink-display:var(--secondary);
  --ink-body:color-mix(in srgb, var(--secondary) 84%, #FFFFFF);
  --ink-muted:#5A6472;          /* cool muted grey — 5.4:1 on the steel wash  */
  --hairline:color-mix(in srgb, var(--accent-1) 22%, #FFFFFF);

  /* ---- SCALE ------------------------------------------------------------ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px;
  --radius:12px; --radius-sm:8px; --radius-pill:999px;
  --radius-arch:999px 999px 8px 8px;
  --shadow-1:0 1px 2px rgba(0,12,48,.07);
  --shadow-2:0 1px 2px rgba(0,12,48,.06), 0 10px 30px rgba(0,12,48,.09);
  --shadow-3:0 8px 24px rgba(0,12,48,.12), 0 30px 60px rgba(0,12,48,.14);

  /* JAW house pairing (jaw.json proven pairings): DM Sans + Inter           */
  --font-display:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --demobar-h:0px;
  --nav-h:82px;
  --header-h:calc(var(--demobar-h) + var(--nav-h));
  --wrap:1180px;
}

/* ---- RESET / BASE ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink-body);
  background:var(--page);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:var(--font-display);color:var(--ink-display);
  font-weight:700;line-height:1.12;margin:0 0 var(--sp-4);
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.5rem,5.2vw,4rem)}
h2{font-size:clamp(1.95rem,3.5vw,2.85rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
p{margin:0 0 var(--sp-4)}
a{color:var(--lead)}
.wrap{width:min(100% - 40px, var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 40px, 780px);margin-inline:auto}
.center{text-align:center}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--deep);color:var(--on-deep);
  padding:12px 20px;z-index:200;border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--lead);outline-offset:3px;border-radius:2px}

/* ---- ELEVATION / RHYTHM ------------------------------------------------- */
/* white -> cream -> dark; never two of the same stacked                     */
.sec{padding:var(--sp-9) 0}
.sec--tight{padding:var(--sp-8) 0}
.sec--white{background:var(--n-white)}
.sec--cream{background:var(--n-cream)}
.sec--harvest{background:var(--n-harvest)}
.sec--deep{background:var(--deep);color:var(--on-deep)}
.sec--deep h2,.sec--deep h3{color:var(--on-deep)}
.sec--deep .lede,.sec--deep p{color:color-mix(in srgb, var(--on-deep) 82%, transparent)}

.eyebrow{
  font-size:.74rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--lead);margin:0 0 var(--sp-3);display:block;
}
.sec--deep .eyebrow{color:var(--pop)}
.lede{font-size:1.1rem;color:var(--ink-muted);max-width:62ch}
.center .lede{margin-inline:auto}
.rule{width:54px;height:1px;background:var(--soft);border:0;margin:var(--sp-5) 0}
.center .rule{margin-inline:auto}

/* ---- BUTTONS — documented .btn-* system -------------------------------- */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* memoryRule: a flex row inside a text-centered block does NOT centre from
   text-align — it needs an explicit justify-content. Never inline styles.   */
.center .btnrow,.center .hero-actions{justify-content:center}
.btn{
  font:inherit;font-weight:600;font-size:14px;border-radius:var(--radius-sm);
  padding:10px 18px;cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;line-height:1;
  min-height:44px;                             /* DoD: 44x44 tap targets     */
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn-primary{background:var(--lead);color:var(--on-lead)}
.btn-primary:hover{background:var(--deep);color:var(--on-deep)}
.btn-dark{background:var(--deep);color:var(--on-deep)}
.btn-dark:hover{background:var(--lead);color:var(--on-lead)}
.btn-secondary{background:transparent;color:var(--lead);border-color:var(--lead)}
.btn-secondary:hover{background:var(--lead);color:var(--on-lead)}
.btn-ghost{background:transparent;color:var(--ink-body)}
.btn-ghost:hover{background:var(--n-cream)}
.btn-lg{padding:15px 28px;font-size:15px}
.btn-sm{padding:8px 14px;font-size:13px;min-height:38px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.sec--deep .btn-secondary{color:var(--on-deep);border-color:color-mix(in srgb, var(--on-deep) 45%, transparent)}
.sec--deep .btn-secondary:hover{background:var(--on-deep);color:var(--deep)}

/* ---- NAV (F10 navStyle: center) ---------------------------------------- */
.nav{
  position:sticky;top:0;z-index:100;background:var(--n-white);
  border-bottom:1px solid var(--hairline);height:var(--nav-h);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);height:100%}
/* memoryRule: the image optimizer treats the FIRST <img> as above-fold. A nav
   <img> would steal that slot and force loading=lazy onto the real hero (the
   LCP element). Render the brandmark as a CSS background instead.            */
.nav__brand{
  display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;
  text-decoration:none;min-height:44px;color:var(--ink-display);
}
.nav__mark{
  display:block;width:104px;height:50px;flex:0 0 auto;
  background-image:url("images/logo-tko.png");
  background-image:image-set(url("images/logo-tko.webp") type("image/webp"),
                             url("images/logo-tko.png")  type("image/png"));
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.nav__name{display:flex;flex-direction:column;line-height:1.1}
.nav__name b{font-family:var(--font-display);font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.nav__name small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-top:3px}
@media (max-width:520px){ .nav__mark{width:92px;height:44px} }   /* TKO lockup is ~2:1 — never square it */
.nav__links{display:flex;align-items:center;gap:var(--sp-6);list-style:none;margin:0;padding:0}
.nav__links a{
  text-decoration:none;color:var(--ink-body);font-size:.93rem;font-weight:500;
  padding:10px 2px;display:inline-flex;align-items:center;min-height:44px;
  position:relative;
}
.nav__links a:hover{color:var(--lead)}
/* memoryRule: nav active indicator is mandatory + aria-current              */
.nav__links a[aria-current="page"]{color:var(--lead);font-weight:600}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--lead);
}
.nav__cta{flex:0 0 auto}
.nav__toggle{
  display:none;background:none;border:1px solid var(--hairline);
  border-radius:var(--radius-sm);width:46px;height:46px;cursor:pointer;
  align-items:center;justify-content:center;color:var(--ink-display);
}
.nav__toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}

@media (max-width:880px){
  .nav__toggle{display:inline-flex}
  .nav__links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--n-white);border-bottom:1px solid var(--hairline);
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--sp-3) 20px var(--sp-5);
    box-shadow:var(--shadow-2);
    /* memoryRule: keep the mobile dropdown in-bounds — re-declare inside the
       mobile query so source order wins over any desktop hover transform.   */
    transform:none;
    display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--hairline);width:100%}
  .nav__links a[aria-current="page"]::after{bottom:10px;right:auto;width:26px}
  .nav__cta{display:none}
  .nav__links .nav__cta-mobile{display:block;border-bottom:0;margin-top:var(--sp-4)}
  .nav__links .nav__cta-mobile .btn{width:100%}
}
@media (min-width:881px){ .nav__cta-mobile{display:none} }

/* ---- HERO — jaw.json heroSystem source layout "Split Authority" -----------
   Local-service archetype shortlist (Full-Bleed Cinematic / Split Authority /
   Proof Cards). Split chosen because the headline must carry two audiences
   (communities + homeowners) and his best photo is a landscape job-site shot.
   (Block below originally written for F13 on the Krisler demo; tag, trust line,
   chip row and credibility note are reused as the Split Authority accessories.) 
   F13 = courses, schools, workshops ("Education / cohort"): calendar cues,
   syllabus tag, instructor note, date CTA + syllabus CTA. Laid out as the
   JAW default split-grid (copy left, one real portrait right) because her
   library is portraits, not classroom wides (memoryRule: choose the route
   against the asset library you actually have).                             */
.hero{
  background:var(--n-white);
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
  padding:var(--sp-7) 0;
  position:relative;
}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:var(--sp-8);align-items:center;
}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero__tag{                                   /* F13 syllabus tag            */
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--deep);background:var(--n-cream);border:1px solid var(--hairline);
  border-radius:var(--radius-pill);padding:6px 14px;margin:0 0 var(--sp-4);
}
.hero__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lead)}
.hero h1{
  font-size:clamp(2.3rem,4.3vw,3.9rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.04;
  max-width:15ch;margin:0 0 var(--sp-4);
}
.hero h1 em{font-style:normal;color:var(--lead)}
.hero__lede{
  font-size:1.08rem;color:var(--ink-muted);
  max-width:48ch;margin:0 0 var(--sp-6);
}
.hero .hero-actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;
  margin-bottom:var(--sp-5);
}
.hero__trust{
  font-size:.85rem;color:var(--ink-muted);letter-spacing:.01em;margin:0;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:flex-start;align-items:center;
}
.hero__trust span{display:inline-flex;align-items:center;gap:6px}
.hero__trust svg{width:15px;height:15px;stroke:var(--soft);fill:none;stroke-width:2}

/* F13 calendar cues — the college year as "cohort dates" */
.hero__cal{
  display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-6) 0 0;padding:0;list-style:none;
}
.hero__cal li{
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);border:1px solid var(--hairline);border-radius:var(--radius-pill);
  padding:7px 13px;background:var(--n-white);
}
.hero__cal li b{color:var(--lead);font-weight:700;margin-right:6px}

/* the portrait — aspect LOCKED to the source crop (4:5 desktop, 1:1 mobile) */
.hero__media{position:relative;justify-self:end;width:100%;max-width:600px}
.hero__media figure{
  margin:0;width:100%;aspect-ratio:4/3;               /* = source crop */
  border-radius:var(--radius);overflow:hidden;background:var(--n-cream);
  box-shadow:var(--shadow-3);
}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__note{                                  /* F13 instructor note          */
  position:absolute;left:calc(-1 * var(--sp-7));bottom:var(--sp-6);
  background:var(--n-white);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-2);padding:var(--sp-4) var(--sp-5);max-width:250px;
}
.hero__note strong{display:block;font-family:var(--font-display);font-weight:700;
  color:var(--ink-display);font-size:.98rem;line-height:1.25}
.hero__note span{display:block;font-size:.82rem;color:var(--ink-muted);margin-top:4px;line-height:1.4}
.hero__accent{                                /* coral rule behind the photo  */
  position:absolute;top:calc(-1 * var(--sp-4));right:calc(-1 * var(--sp-4));
  width:45%;height:45%;border-top:3px solid var(--pop);border-right:3px solid var(--pop);
  border-radius:0 var(--radius) 0 0;pointer-events:none;
}

@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-7);justify-items:center}
  .hero__copy{align-items:center;text-align:center}
  .hero h1{margin-inline:auto}
  .hero__lede{margin-inline:auto}
  .hero .hero-actions{justify-content:center}
  .hero__trust{justify-content:center}
  .hero__cal{justify-content:center}
  .hero__media{justify-self:center;max-width:560px}
  .hero__note{left:var(--sp-4);bottom:calc(-1 * var(--sp-5))}
  .hero__accent{display:none}
}
@media (max-width:880px){
  .hero{min-height:auto;padding:var(--sp-6) 0 var(--sp-8)}
}

/* ---- INTERIOR PAGE HEADER ---------------------------------------------- */
.pagehead{background:var(--n-cream);padding:var(--sp-8) 0;border-bottom:1px solid var(--hairline)}
.pagehead h1{font-size:clamp(2.1rem,4.2vw,3.2rem);margin-bottom:var(--sp-3)}
.pagehead .lede{margin-inline:auto}

/* ---- CARD GRIDS --------------------------------------------------------- */
.grid{display:grid;gap:var(--sp-5)}
.grid + .center,
.svcgrid + .center{margin-top:var(--sp-7)}   /* clearance under a card grid */
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}

.card{
  background:var(--n-white);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--sp-6);
}
.card__icon{
  width:42px;height:42px;border-radius:var(--radius-pill);
  background:var(--n-cream);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-4);
}
.card__icon svg{width:20px;height:20px;stroke:var(--soft);fill:none;stroke-width:1.7}
.card h3{margin-bottom:var(--sp-2)}
.card p{color:var(--ink-muted);font-size:.96rem;margin:0}
.sec--cream .card{background:var(--n-white)}

/* ---- SPLIT (text + photo) ---------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center}
.split--flip .split__media{order:-1}
.split__media{
  border-radius:var(--radius);overflow:hidden;background:var(--n-cream);
  aspect-ratio:4/5;                            /* bounded frame — portraits  */
}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media--arch{border-radius:var(--radius-arch)}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--sp-6)}
  .split--flip .split__media{order:0}
  .split__media{aspect-ratio:4/3;max-height:420px}
}

.ticks{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.ticks li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:.98rem}
.ticks svg{width:18px;height:18px;stroke:var(--soft);fill:none;stroke-width:2;flex:0 0 auto;margin-top:3px}

/* ---- SERVICES ----------------------------------------------------------- */
.svcgrid{
  display:flex;flex-wrap:wrap;gap:var(--sp-5);justify-content:center;
}
.svcgrid > .svc{flex:0 1 calc((100% - 2 * var(--sp-5)) / 3);min-width:280px}
@media (max-width:900px){ .svcgrid > .svc{flex:1 1 100%} }

.svc{
  background:var(--n-white);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--sp-6);
  display:flex;flex-direction:column;
}
.svc__price{
  font-family:var(--font-display);font-size:1.5rem;color:var(--lead);
  margin:0 0 var(--sp-2);
}
.svc h3{margin-bottom:var(--sp-3)}
.svc__desc{color:var(--ink-muted);font-size:.95rem;flex:1;margin:0 0 var(--sp-5)}
.svc__tag{
  display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);border:1px solid var(--hairline);border-radius:var(--radius-pill);
  padding:5px 12px;margin-bottom:var(--sp-4);align-self:flex-start;
}
.svc--feature{border-color:var(--lead);border-width:1.5px}
.svc--feature .svc__tag{background:var(--lead);color:var(--on-lead);border-color:var(--lead)}

/* ---- STEPS -------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);counter-reset:step}
.steps > div{counter-increment:step;position:relative;padding-top:var(--sp-7)}
.steps > div::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--soft);
  position:absolute;top:0;left:0;
}
.steps h3{margin-bottom:var(--sp-2)}
.steps p{color:var(--ink-muted);font-size:.96rem;margin:0}
.sec--deep .steps p{color:color-mix(in srgb, var(--on-deep) 75%, transparent)}
.sec--deep .steps > div::before{color:var(--pop)}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:var(--sp-5)}}

/* ---- TESTIMONIALS ------------------------------------------------------- */
.quote{
  background:var(--n-white);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--sp-6);display:flex;flex-direction:column;
}
.quote__stars{display:flex;gap:3px;margin-bottom:var(--sp-4)}
.quote__stars svg{width:15px;height:15px;fill:var(--lead);stroke:none}
.quote blockquote{margin:0;flex:1}          /* UA default is 1em 40px */
.quote p{font-size:.97rem;color:var(--ink-body);margin:0}
.quote__by{
  font-family:var(--font-display);font-size:1rem;color:var(--ink-display);
  margin:var(--sp-4) 0 0;font-style:normal;
}
.quote__when{font-size:.8rem;color:var(--ink-muted);display:block;font-family:var(--font-body)}

/* ---- CTA BAND ----------------------------------------------------------- */
.ctaband{background:var(--deep);color:var(--on-deep);padding:var(--sp-9) 0;text-align:center}
.ctaband h2{color:var(--on-deep)}
.ctaband .lede{color:color-mix(in srgb, var(--on-deep) 80%, transparent);margin-inline:auto}
.ctaband .btnrow{justify-content:center;margin-top:var(--sp-6)}

/* ---- FORM --------------------------------------------------------------- */
.form{display:grid;gap:var(--sp-4)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:700px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-display)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.97rem;color:var(--ink-body);
  border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:13px 14px;background:var(--n-white);width:100%;min-height:48px;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--lead);outline-offset:1px;border-color:var(--lead);
}
.form__note{font-size:.83rem;color:var(--ink-muted);margin:0}

/* ---- CONTACT DETAILS ---------------------------------------------------- */
.detail-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-5)}
.detail-list h3{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-muted);font-family:var(--font-body);font-weight:600;margin:0 0 var(--sp-1)}
.detail-list a,.detail-list p{
  font-family:var(--font-display);font-size:1.14rem;color:var(--ink-display);
  text-decoration:none;margin:0;
}
.detail-list a{display:inline-flex;align-items:center;min-height:44px}
.detail-list + .split__media{margin-top:var(--sp-7)}
.detail-list a:hover{color:var(--lead)}

/* ---- FOOTER (byte-identical on every page) ------------------------------ */
.footer{background:var(--deep);color:color-mix(in srgb, var(--on-deep) 74%, transparent);padding:var(--sp-8) 0 var(--sp-6);font-size:.9rem}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-7);padding-bottom:var(--sp-7);
  border-bottom:1px solid color-mix(in srgb, var(--on-deep) 14%, transparent)}
.footer__mark{height:96px;width:auto;margin-bottom:var(--sp-4)}
.footer h4{font-family:var(--font-body);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-deep);margin:0 0 var(--sp-4);font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.footer li{display:flex;align-items:center;min-height:44px}
.footer a{
  color:color-mix(in srgb, var(--on-deep) 74%, transparent);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.footer a:hover{color:var(--pop)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);
  padding-top:var(--sp-5);font-size:.8rem;color:color-mix(in srgb, var(--on-deep) 55%, transparent)}
.footer__disclaimer{max-width:70ch;font-size:.78rem;line-height:1.6;color:color-mix(in srgb, var(--on-deep) 50%, transparent);margin:var(--sp-5) 0 0}
@media (max-width:900px){.footer__top{grid-template-columns:1fr;gap:var(--sp-6)}}

/* ---- MOTION ----------------------------------------------------------------
   Card hover follows the design system's documented .palcard treatment
   (translateY(-3px) + shadow-2). Scroll reveal follows the established JAW
   pattern: .fade-up + IntersectionObserver -> .is-visible, fired once.

   Two safeguards, both load-bearing:
   1. The opacity:0 start is scoped to .js-reveal, a class JS adds to <html>.
      With JS off the class never appears and every section renders normally —
      a bare .fade-up{opacity:0} would hide the whole page.
   2. prefers-reduced-motion cancels the offset AND the opacity, so reduced
      motion never means invisible content.
   The HERO is deliberately excluded — IO reveals delay the mobile LCP.        */

.card,.svc{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,.svc:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  border-color:var(--soft);
}
.svc--feature:hover{border-color:var(--lead)}
/* testimonials are not actionable — they warm, they don't lift */
.quote{transition:box-shadow .18s ease, border-color .18s ease}
.quote:hover{box-shadow:var(--shadow-1);border-color:var(--soft)}

.js-reveal .fade-up{
  opacity:0;translate:0 14px;
  /* `translate` is its own property, so the reveal offset and the hover's
     `transform` animate independently at their own speeds. Listing hover's
     properties here too is required: this rule (0,2,0) out-specifies
     .card/.svc (0,1,0) and would otherwise strip their hover transitions.  */
  transition:opacity .55s ease, translate .55s ease,
             transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.js-reveal .fade-up.is-visible{opacity:1;translate:none}
/* gentle stagger for siblings inside a grid */
.js-reveal .grid > .fade-up:nth-child(2),
.js-reveal .svcgrid > .fade-up:nth-child(2),
.js-reveal .steps > .fade-up:nth-child(2){transition-delay:.09s}
.js-reveal .grid > .fade-up:nth-child(3),
.js-reveal .svcgrid > .fade-up:nth-child(3),
.js-reveal .steps > .fade-up:nth-child(3){transition-delay:.18s}
.js-reveal .svcgrid > .fade-up:nth-child(4){transition-delay:.09s}
.js-reveal .svcgrid > .fade-up:nth-child(5){transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  .js-reveal .fade-up{opacity:1;translate:none;transition:none}
  .card:hover,.svc:hover{transform:none}
}

/* ---- DEMO BADGE --------------------------------------------------------- */
.demobar{background:var(--pop);color:var(--on-pop);text-align:center;
  font-size:.78rem;letter-spacing:.05em;padding:7px 20px;font-weight:600}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- TESTIMONIAL MARK (replaces star rows: written testimonials, not ratings) */
.quote__mark{font-family:var(--font-display);font-weight:800;font-size:3rem;line-height:.6;
  color:var(--lead);display:block;height:26px;margin-bottom:var(--sp-3)}

/* ---- INTERIOR PAGE HEADER — split with one portrait (shared by all interior pages)
   Same F13 grammar as the home hero at a smaller scale: tag, h1, lede, CTAs,
   one real portrait in a frame LOCKED to its 4:5 crop.                       */
.pagehead--split{background:var(--n-white);border-bottom:0;padding:var(--sp-8) 0}
.pagehead__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:var(--sp-8);align-items:center}
.pagehead--split h1{font-size:clamp(2.1rem,3.8vw,3.25rem);font-weight:800;letter-spacing:-.025em;line-height:1.06;max-width:17ch}
.pagehead--split h1 em{font-style:normal;color:var(--lead)}
.pagehead--split .lede{margin-inline:0;margin-bottom:var(--sp-6)}
.pagehead__media{justify-self:end;width:100%;max-width:400px;margin:0;aspect-ratio:4/5;
  border-radius:var(--radius);overflow:hidden;background:var(--n-cream);box-shadow:var(--shadow-3)}
.pagehead__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:900px){
  .pagehead__inner{grid-template-columns:1fr;gap:var(--sp-6);text-align:center}
  .pagehead--split h1,.pagehead--split .lede{margin-inline:auto}
  .pagehead--split .hero-actions,.pagehead--split .btnrow{justify-content:center}
  .pagehead__media{justify-self:center;max-width:300px}
}
.svc__price small{font-family:var(--font-body);font-size:.85rem;color:var(--ink-muted);font-weight:500}
.svc > .btn{align-self:flex-start}

/* ---- LIGHT CARDS ON DARK SECTIONS ------------------------------------------
   .sec--deep h3 sets cream headings; a white .card/.svc/.quote nested in a deep
   section must reset to ink or its titles vanish (found on About, 9/28/26).  */
.sec--deep .card h3,.sec--deep .svc h3,.sec--deep .quote h3{color:var(--ink-display)}
.sec--deep .card p,.sec--deep .svc p,.sec--deep .quote p{color:var(--ink-muted)}

/* ---- [hidden] must win over component display rules --------------------------
   .btn{display:inline-flex} (author origin) beats the UA [hidden]{display:none},
   so JS-hidden buttons stayed visible (found on the Parents quiz, 9/28/26).     */
[hidden]{display:none !important}

/* ---- TEXT LINKS as standalone actions get a 44px tap target -------------- */
.textlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-weight:600;color:var(--lead);text-decoration:underline;text-underline-offset:3px}
.textlink:hover{color:var(--deep)}
.footer li a{min-width:44px}

/* ---- A btnrow that IS the .center element (not inside one) ----------------
   `.center .btnrow` only matches a descendant; `<div class="center btnrow">`
   left the row flush-left under step 01 (memoryRule: centered CTA rows
   actually centered — the audit's alignment check missed the same-element case). */
.btnrow.center{justify-content:center}
.steps + .btnrow,.grid + .btnrow{margin-top:var(--sp-7)}

/* ---- Footer logo: wide TKO lockup ------------------------------------------ */
.footer__mark{height:72px;width:auto}

/* ---- Small screens: keep the demo bar to one line, tighten the hero tag ---- */
@media (max-width:600px){
  .demobar{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:12px}
  .hero__tag{letter-spacing:.06em;font-size:.68rem}
}

/* ---- Reset <figure> margins in components --------------------------------------
   UA default is `margin:1em 40px` — the same trap as the blockquote memoryRule.
   Testimonial cards are <figure>s: at 390px they lost 80px and became a 206px
   text tower (found in QA 9/28/26).                                          */
figure.quote,.hero__media figure,figure.pagehead__media{margin:0}
@media (max-width:600px){ .quote{padding:var(--sp-5)} }

/* ---- INLINE NEWSLETTER SIGNUP (one field + one button) ------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.signup{display:flex;gap:var(--sp-3);max-width:520px;margin:0}
.center .signup{margin-inline:auto}
.signup__input{
  flex:1 1 auto;min-width:0;min-height:52px;font:inherit;font-size:1rem;
  padding:0 var(--sp-4);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  background:var(--n-white);color:var(--ink-body);
}
.signup__input:focus{outline:2px solid var(--lead);outline-offset:1px;border-color:var(--lead)}
.signup .btn{flex:0 0 auto}
.signup__note{font-size:.85rem;color:var(--ink-muted);margin:var(--sp-3) 0 0}
.signup__note .textlink{font-size:.85rem;margin-left:4px}
.signup__done{font-weight:600;color:var(--deep);margin:var(--sp-3) 0 0}
@media (max-width:520px){ .signup{flex-direction:column} .signup .btn{width:100%} }

/* ---- Mobile nav fixes (Dustin, 9/28/26) ----------------------------------------
   1. The <nav> wrapper is the last flex item (its list is absolutely positioned,
      so it is invisible) — space-between parked the hamburger in the MIDDLE.
      Push the toggle to the far right.
   2. `.nav__links a{color:ink}` (0,1,1) out-specified `.btn-primary` (0,1,0), so
      the menu's Request-a-Consult button rendered dark ink on red. Restore the
      button's own colours/padding inside the menu.                           */
@media (max-width:880px){
  .nav__toggle{margin-left:auto}
  .nav__inner > nav{flex:0 0 0;width:0;margin-left:calc(-1 * var(--sp-5))}   /* cancel the flex gap it still claims */
  .nav__links a.btn{
    color:var(--on-lead);border-bottom:0;padding:14px 20px;
    justify-content:center;font-weight:600;
  }
  .nav__links a.btn:hover{color:var(--on-deep);background:var(--deep)}
}

/* ---- Hover on dark sections (Dustin, 9/28/26) ---------------------------------
   .btn-primary hovers to --deep (maroon). Inside a maroon section that is the
   section's own colour, so the button vanished on hover. On dark surfaces the
   primary hovers LIGHT instead: cream fill + maroon text (pill-hover rule).   */
.sec--deep .btn-primary:hover,.ctaband .btn-primary:hover,.sec--deep .btn-primary:focus-visible{
  background:var(--on-deep);color:var(--deep);
}

@media (max-width:600px){ .demobar{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4} }
/* 44px tap area for the demo-bar links without growing the bar */
.demobar a,.demobar button{display:inline-block;padding:15px 6px;margin:-15px 0}

/* ---- 5 nav items + CTA wrap between 881–1180px: tighten there */
@media (min-width:881px) and (max-width:1180px){
  .nav__links{gap:var(--sp-4)}
  .nav__links a{font-size:.86rem}
  .nav__name small{display:none}
  .nav__cta .btn{padding-inline:14px}
}
@media (min-width:881px) and (max-width:1000px){
  .nav__name{display:none}
}

/* ---- Demo form confirmation ------------------------------------------------ */
.form__done{padding:var(--sp-5);border:1px solid var(--hairline);border-left:4px solid var(--lead);
  border-radius:var(--radius-sm);background:var(--n-cream);color:var(--ink-display);font-weight:600}
.form__done:focus{outline:none}

/* ---- PHOTO SLOT — honest placeholder until Charlie sends shower/countertop
   photos (none exist publicly). Same locked aspect as a real photo so the
   layout doesn't shift when the image lands.                                 */
.photo-slot{margin:0;aspect-ratio:4/3;border:2px dashed var(--hairline);border-radius:var(--radius);
  background:var(--n-cream);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);text-align:center;padding:var(--sp-5);color:var(--ink-muted)}
.photo-slot--portrait{aspect-ratio:4/5}
.photo-slot__icon{width:56px;height:56px;border-radius:50%;background:var(--n-white);border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center}
.photo-slot__icon svg{width:26px;height:26px;stroke:var(--lead);fill:none;stroke-width:1.7}
.photo-slot figcaption{display:flex;flex-direction:column;gap:4px;font-size:.9rem;line-height:1.4}
.photo-slot figcaption b{color:var(--ink-display);font-family:var(--font-display);font-weight:700;font-size:1rem}

/* ---- CLIENT LOGO STRIP (his own portfolio logos) ------------------------ */
.clients{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.clients li{height:84px;min-width:150px;flex:0 1 auto;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-3) var(--sp-5);background:var(--n-white);border:1px solid var(--hairline);border-radius:var(--radius-sm)}
.clients img{max-height:48px;max-width:180px;width:auto;height:auto;object-fit:contain}
.clients__text{font-family:var(--font-display);font-weight:700;color:var(--ink-display);font-size:.95rem;text-align:center;line-height:1.2}
.clients__text small{display:block;font-family:var(--font-body);font-weight:500;font-size:.72rem;color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.clients picture{display:contents}
@media (max-width:600px){ .clients li{min-width:0;flex:1 1 40%;height:72px;padding:var(--sp-2) var(--sp-3)} .clients img{max-height:40px;max-width:100%} }

/* ---- Icons inside text links / trust lines are inline — size them, or an
   un-sized <svg> renders at its 300px default (found on Showers, 9/29/26). */
.textlink svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2}
/* TKO: longest labels ("Senior Living & Commercial") wrap right above the 880 menu breakpoint */
@media (min-width:881px) and (max-width:1000px){
  .nav__links{gap:var(--sp-3)}
  .nav__links a{font-size:.8rem}
  .nav__mark{width:88px;height:42px}
  .nav__cta .btn{padding-inline:12px;font-size:13px}
  .nav__cta .btn svg{display:none}
}
/* Rush Creek's logo has white lettering designed for a dark background */
.clients li.clients__dark{background:var(--deep);border-color:var(--deep)}
.sec--deep .clients li.clients__dark{border-color:color-mix(in srgb, var(--on-deep) 28%, transparent)}

/* Portrait photo slots inside a content split shouldn't out-shout the copy
   (Senior Living "occupied buildings" slot rendered ~560x700 of empty box). */
.split .photo-slot--portrait,.split > div > .photo-slot--portrait{max-width:440px;width:100%;margin-inline:auto}

/* ---- Phone call bar (11/5): sticky bottom on phones only ----------------- */
.callbar{display:none}
@media (max-width:880px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));background:var(--n-white);
    border-top:1px solid var(--hairline);box-shadow:var(--shadow-2)}
  .callbar .btn{width:100%;justify-content:center;min-height:48px}
  .callbar .btn svg{width:18px;height:18px}
  .footer{padding-bottom:calc(var(--sp-6) + 72px)}
}
/* ==========================================================================
   HOME — page-specific CSS (tokens only)
   ========================================================================== */

/* ---- Two audience paths: equal size, equal weight ------------------------ */
.pg-home__paths{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-6);margin-top:var(--sp-7);
}
.pg-home__path{
  background:var(--n-white);border:1px solid var(--hairline);
  border-top:4px solid var(--lead);border-radius:var(--radius);
  padding:var(--sp-7);display:flex;flex-direction:column;align-items:flex-start;
  box-shadow:var(--shadow-1);
}
.pg-home__pathhead{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.pg-home__pathicon{
  width:56px;height:56px;border-radius:var(--radius-pill);background:var(--n-cream);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.pg-home__pathicon svg{width:28px;height:28px;stroke:var(--lead);fill:none;stroke-width:1.7}
.pg-home__pathtag{
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
}
.pg-home__path h3{font-size:clamp(1.4rem,2.2vw,1.85rem);margin-bottom:var(--sp-3)}
.pg-home__path p{color:var(--ink-muted);margin:0}
.pg-home__path .ticks{margin:var(--sp-5) 0 var(--sp-6);flex:1}
.pg-home__path .btn{align-self:flex-start;text-align:left}
@media (max-width:900px){
  .pg-home__paths{grid-template-columns:1fr}
  .pg-home__path{padding:var(--sp-6)}
}

/* ---- Two-column section header (h2 left, lede right) --------------------- */
.pg-home__head{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--sp-8);align-items:end;margin-bottom:var(--sp-7);
}
.pg-home__head h2{margin:0;max-width:22ch}
.pg-home__head .lede{margin:0;max-width:none}
@media (max-width:900px){
  .pg-home__head{grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:var(--sp-6)}
  .pg-home__head h2{max-width:none}
}

/* ---- Past clients: tidy 4-up grid --------------------------------------- */
.pg-home__clientslabel{
  font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-muted);margin:var(--sp-8) 0 var(--sp-4);
}
.clients.pg-home__clients{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);
}
.clients.pg-home__clients li{min-width:0;flex:none;height:96px}
@media (max-width:900px){
  .clients.pg-home__clients{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .clients.pg-home__clients li{height:76px}
}

/* ---- Closing CTA split -------------------------------------------------- */
.pg-home__finish{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-8);align-items:center;
}
.pg-home__finish h2{max-width:14ch}
.pg-home__finish .lede{margin-bottom:var(--sp-6)}
.pg-home__finished{margin:0}
.pg-home__finished picture{display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-2);background:var(--n-white)}
.pg-home__finished img{width:100%;height:100%;object-fit:cover}
.pg-home__finished figcaption{font-size:.85rem;color:var(--ink-muted);margin-top:var(--sp-3)}
@media (max-width:900px){
  .pg-home__finish{grid-template-columns:1fr;gap:var(--sp-6)}
  .pg-home__finish h2{max-width:none}
}

.clients.pg-home__clients img{max-height:64px}
@media (max-width:600px){ .clients.pg-home__clients img{max-height:44px} }

.pg-home__path .btn{line-height:1.3}
@media (max-width:600px){ .pg-home__path .btn{align-self:stretch;text-align:center} }

.sec--deep .center + .steps{margin-top:var(--sp-7)}

/* ---- Who we work for: 4-up cards (11/5 rework) -------------------------- */
.grid.pg-home__who{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1050px){ .grid.pg-home__who{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .grid.pg-home__who{grid-template-columns:1fr} }
.pg-home__also{margin:var(--sp-6) 0 0;color:var(--ink-muted);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4)}
/* ==========================================================================
   SERVICES + shared closing band — page-specific CSS (tokens only)
   ========================================================================== */
.pg-svc__jump{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.pg-svc__jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-5);
  border:1px solid var(--hairline);border-radius:var(--radius-pill);background:var(--n-white);
  color:var(--ink-display);font-weight:600;font-size:.92rem;text-decoration:none}
.pg-svc__jump a:hover{border-color:var(--lead);color:var(--lead)}
.svcgrid.pg-svc__grid{margin-top:var(--sp-7)}
.svcgrid.pg-svc__grid--after{margin-top:var(--sp-8)}
.svcgrid.pg-svc__grid--after > .svc{flex-basis:calc((100% - 3 * var(--sp-5)) / 4);min-width:240px}
@media (max-width:900px){ .svcgrid.pg-svc__grid--after > .svc{flex-basis:100%} }

.pg-svc__cities{list-style:none;margin:var(--sp-7) auto var(--sp-7);padding:0;max-width:900px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3)}
.pg-svc__cities li{padding:var(--sp-2) var(--sp-5);border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--on-deep) 30%, transparent);color:var(--on-deep);font-weight:500}

.pg-svc__close{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:var(--sp-7);align-items:center}
.pg-svc__close h2{margin-bottom:var(--sp-3)}
.pg-svc__close .lede{margin:0;max-width:56ch}
@media (max-width:900px){ .pg-svc__close{grid-template-columns:1fr;gap:var(--sp-5)} }
/* ==========================================================================
   PROJECTS — page-specific CSS (tokens only)
   ========================================================================== */
.pg-proj__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-7)}
.pg-proj__shot{margin:0}
.pg-proj__frame{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--n-white);box-shadow:var(--shadow-2)}
.pg-proj__frame picture,.pg-proj__frame img{display:block;width:100%;height:100%;object-fit:cover}
.pg-proj__shot figcaption{font-size:.88rem;color:var(--ink-muted);margin-top:var(--sp-3)}
@media (max-width:900px){ .pg-proj__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .pg-proj__grid{grid-template-columns:1fr} }
.clients.pg-proj__clients{margin-top:var(--sp-7)}
/* ==========================================================================
   ABOUT & CONTACT — page CSS. Tokens only; every new class prefixed pg-about.
   ========================================================================== */

/* ---- Story --------------------------------------------------------------- */
.pg-about__story p{max-width:56ch}
.pg-about__pull{
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.4;
  color:var(--ink-display);border-left:3px solid var(--lead);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-5);margin:var(--sp-5) 0;
}
.pg-about__tagline{
  font-family:var(--font-display);font-weight:800;font-size:1.35rem;
  color:var(--lead);margin:var(--sp-5) 0 0;
}

/* ---- Timeline (4 steps, horizontal on desktop) ---------------------------- */
.pg-about__timeline{
  list-style:none;margin:var(--sp-8) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);
  position:relative;
}
.pg-about__timeline::before{               /* the rail the dots sit on */
  content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--hairline);
}
.pg-about__timeline > li{
  position:relative;padding-top:var(--sp-7);display:flex;flex-direction:column;
}
.pg-about__timeline > li::before{          /* the dot */
  content:"";position:absolute;top:0;left:var(--sp-5);z-index:1;
  width:20px;height:20px;border-radius:var(--radius-pill);
  background:var(--n-white);border:3px solid var(--lead);
}
.pg-about__timeline > .pg-about__now::before{background:var(--lead)}
.pg-about__tl-card{
  flex:1;background:var(--n-cream);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--sp-5);
}
.pg-about__now .pg-about__tl-card{border-color:var(--lead);border-width:1.5px}
.pg-about__figure{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;letter-spacing:-.02em;
  color:var(--lead);margin-bottom:var(--sp-3);
}
.pg-about__tl-card h3{margin-bottom:var(--sp-2)}
.pg-about__tl-card p{color:var(--ink-muted);font-size:.96rem;margin:0}
.pg-about__badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--on-lead);
  background:var(--lead);border-radius:var(--radius-pill);padding:6px 12px;line-height:1.3;
}
.pg-about__badge svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9}

@media (max-width:900px){
  .pg-about__timeline{grid-template-columns:1fr;gap:var(--sp-5);margin-top:var(--sp-7)}
  .pg-about__timeline::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .pg-about__timeline > li{padding-top:0;padding-left:var(--sp-7)}
  .pg-about__timeline > li::before{left:0;top:var(--sp-5)}
}

/* ---- Equipment (copy left, 2x2 justified gallery right) ------------------- */
.pg-about__equip{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--sp-8);align-items:center;
}
.pg-about__equip-copy p{max-width:48ch}
.pg-about__chips{
  list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2);
}
.pg-about__chips li{
  font-size:.82rem;font-weight:600;color:var(--on-deep);
  border:1px solid color-mix(in srgb, var(--on-deep) 35%, transparent);
  border-radius:var(--radius-pill);padding:7px 14px;line-height:1.3;
}
/* Each row shares one height: column widths follow the photos' aspect ratios
   (1:1 next to 4:3, both rows), and every frame is locked to its own crop.             */
.pg-about__gallery{
  display:grid;grid-template-columns:1fr 1.3333fr;gap:var(--sp-5) var(--sp-4);align-items:start;
}
.pg-about__shot{margin:0;min-width:0}
.pg-about__frame{
  border-radius:var(--radius);overflow:hidden;background:var(--n-cream);
  box-shadow:var(--shadow-2);
}
.pg-about__shot--sq .pg-about__frame{aspect-ratio:1/1}
.pg-about__shot--wide .pg-about__frame{aspect-ratio:4/3}
.pg-about__frame img{width:100%;height:100%;object-fit:cover}
.pg-about__shot figcaption{
  font-size:.85rem;margin-top:var(--sp-2);
  color:color-mix(in srgb, var(--on-deep) 82%, transparent);
}

@media (max-width:1000px){
  .pg-about__equip{grid-template-columns:1fr;gap:var(--sp-7)}
  .pg-about__equip-copy p{max-width:62ch}
}
@media (max-width:600px){
  .pg-about__gallery{grid-template-columns:1fr}
}

/* ---- Contact -------------------------------------------------------------- */
.pg-about__contact{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--sp-8);align-items:start;
}
.pg-about__phone{
  display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1;
  color:var(--lead);text-decoration:none;margin:var(--sp-2) 0 var(--sp-5);
}
.pg-about__phone svg{width:1em;height:1em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8}
.pg-about__phone:hover{color:var(--deep)}
.pg-about__facts{list-style:none;margin:0 0 var(--sp-6);padding:0;display:grid;gap:var(--sp-3)}
.pg-about__facts li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:.98rem}
.pg-about__facts svg{width:18px;height:18px;stroke:var(--soft);fill:none;stroke-width:1.9;flex:0 0 auto;margin-top:3px}
.pg-about__steps-title{
  font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--sp-3);
}
.pg-about__steps{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);counter-reset:pgstep;
  border-top:1px solid var(--hairline);
}
.pg-about__steps li{
  counter-increment:pgstep;position:relative;display:grid;gap:2px;
  padding:var(--sp-3) 0 var(--sp-3) var(--sp-7);border-bottom:1px solid var(--hairline);
}
.pg-about__steps li::before{
  content:counter(pgstep,decimal-leading-zero);
  position:absolute;left:0;top:var(--sp-3);
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--lead);
}
.pg-about__steps b{font-family:var(--font-display);font-weight:700;color:var(--ink-display)}
.pg-about__steps span{font-size:.93rem;color:var(--ink-muted)}
.pg-about__formcard{
  background:var(--n-white);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--sp-6);box-shadow:var(--shadow-2);
}
.pg-about__formcard .form__done{margin:0}
@media (max-width:900px){
  .pg-about__contact{grid-template-columns:1fr;gap:var(--sp-7)}
}
@media (max-width:600px){
  .pg-about__formcard{padding:var(--sp-5)}
}
/* ==========================================================================
   FREE ESTIMATE — page-specific CSS (tokens only)
   ========================================================================== */
.pg-est__top h1{font-size:clamp(2rem,4.2vw,3rem);margin:var(--sp-3) 0 var(--sp-4)}
.pg-est__top h1 em{font-style:normal;color:var(--lead)}
.pg-est__top .lede{margin-bottom:var(--sp-5)}
.pg-est__top input[type=file]{padding:var(--sp-3);background:var(--n-white);border:1px dashed var(--hairline);border-radius:var(--radius-sm);width:100%;font:inherit}
.pg-est__faq{display:grid;gap:var(--sp-3);margin-top:var(--sp-7)}
.pg-est__q{background:var(--n-white);border:1px solid var(--hairline);border-radius:var(--radius);padding:0 var(--sp-5)}
.pg-est__q summary{cursor:pointer;min-height:56px;display:flex;align-items:center;
  font-family:var(--font-display);font-weight:700;color:var(--ink-display);font-size:1.05rem}
.pg-est__q p{margin:0 0 var(--sp-5);color:var(--ink-body)}
.form__err{color:#b3261e;font-size:.9rem;margin:var(--sp-3) 0 0}
/* ==========================================================================
   LAUNCH CHECKLIST (private, Charlie only) — page-specific CSS (tokens only)
   ========================================================================== */
.pg-launch__top{padding-bottom:var(--sp-7)}
.pg-launch__top h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:var(--sp-4) 0}
.pg-launch__top h1 em{font-style:normal;color:var(--lead)}
.pg-launch__toc{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pg-launch__toc a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);border-radius:var(--radius-pill);
  border:1px solid var(--hairline);color:var(--ink-display);font-size:.88rem;font-weight:600;text-decoration:none;background:var(--n-white)}
.pg-launch__toc a:hover{border-color:var(--lead);color:var(--lead)}
.pg-launch__body{padding-top:var(--sp-7)}
.pg-launch__form{gap:var(--sp-5)}
.pg-launch__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pg-launch__step{margin:0;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--n-white);
  padding:var(--sp-6);display:grid;gap:var(--sp-4);box-shadow:var(--shadow-1);min-width:0;scroll-margin-top:calc(var(--header-h) + 16px)}
.pg-launch__legend{display:flex;align-items:center;gap:var(--sp-3);padding:0;float:left;width:100%;margin-bottom:var(--sp-1)}
.pg-launch__legend + *{clear:both}
.pg-launch__num{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--lead);color:var(--on-lead);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800}
.pg-launch__title{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink-display);display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2)}
.pg-launch__opt{font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);background:var(--n-cream);border-radius:var(--radius-pill);padding:3px 10px}
.pg-launch__sub{margin:0;color:var(--ink-muted)}
.pg-launch__hint{margin:0;font-size:.92rem;color:var(--ink-muted)}
.pg-launch__how{margin:0;padding-left:1.3em;display:grid;gap:var(--sp-2);color:var(--ink-body)}
.pg-launch__radios,.pg-launch__choices{display:grid;gap:var(--sp-2)}
.pg-launch__radio,.pg-launch__choice,.pg-launch__check{display:flex;gap:var(--sp-3);align-items:flex-start;cursor:pointer;
  border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);min-height:48px;background:var(--n-white)}
.pg-launch__radio:has(input:checked),.pg-launch__choice:has(input:checked),.pg-launch__check:has(input:checked){border-color:var(--lead);background:var(--n-cream)}
.pg-launch__radio input,.pg-launch__choice input,.pg-launch__check input,.pg-launch__chip input{accent-color:var(--lead);width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.pg-launch__choice span{display:grid;gap:2px}
.pg-launch__choice b{color:var(--ink-display);font-family:var(--font-display)}
.pg-launch__choice small{font-size:.9rem;color:var(--ink-muted)}
.pg-launch__pick{justify-self:start;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-lead);background:var(--lead);border-radius:var(--radius-pill);padding:2px 9px}
.pg-launch__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pg-launch__chip{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;min-height:44px;padding:0 var(--sp-4);
  border:1px solid var(--hairline);border-radius:var(--radius-pill);background:var(--n-white);font-weight:500}
.pg-launch__chip input{margin-top:0}
.pg-launch__chip:has(input:checked){border-color:var(--lead);background:var(--n-cream)}
.pg-launch__faqs{display:grid;gap:var(--sp-3)}
.pg-launch__faq{display:grid;gap:4px;padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--lead);background:var(--n-cream);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pg-launch__faq b{color:var(--ink-display)}
.pg-launch__faq span{font-size:.93rem;color:var(--ink-body)}
.field textarea.pg-launch__short{min-height:96px}
.pg-launch__send{display:grid;gap:var(--sp-3);justify-items:start;padding-top:var(--sp-2)}
.pg-launch__err{margin:0;color:var(--deep);font-weight:600}
.pg-launch__done{background:var(--n-white);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--sp-8) var(--sp-6);text-align:center}
.pg-launch__doneicon{display:inline-flex;width:64px;height:64px;border-radius:50%;background:var(--lead);align-items:center;justify-content:center;margin-bottom:var(--sp-4)}
.pg-launch__doneicon svg{width:32px;height:32px;stroke:var(--on-lead);fill:none;stroke-width:2.4}
@media (max-width:600px){ .pg-launch__step{padding:var(--sp-5)} .pg-launch__send .btn{width:100%} }
.pg-launch__step input[type=file]{padding:var(--sp-3);border:1px dashed var(--hairline);border-radius:var(--radius-sm);background:var(--n-white);width:100%;font:inherit}