/* ============================================================
TEMPLATE ONE - styles.css
Global styles + homepage sections.
Ported from reference/temp1-homepage-demo.html (approved demo).
Variable names follow the skill spec (TEMP1-BUILD / SKILL.md);
where the demo used short names, the skill names win.
============================================================ */
/* ---------- DESIGN TOKENS - SWAP THESE PER CLIENT ---------- */
:root{
--color-accent: #BD9B6C; /* primary brand - Aureum gold */
--color-accent-dim: #8A6C3F; /* darker gold, readable as link text on light */
--color-accent-2: #374F75; /* secondary - Aureum navy */
--color-bg-light: #F6F5F1; /* warm light background */
--color-bg-dark: #141E2C; /* near-black navy-tinted dark */
--color-bg-darkest: #0B1421; /* footer */
--color-ink-light: #1B2430; /* text on light */
--color-ink-dark: #EFF1F5; /* text on dark */
/* brand-derived tints - re-derive from --color-accent per client */
--accent-soft: rgba(189,155,108,.12); /* chips, active fills */
--accent-glow: rgba(189,155,108,.32); /* button/card glow shadows */
--offer-grad-2: #2C4165; /* offer gradient end */
--offer-tint: #E7D2AC; /* offer accent text */
--font-display: 'Fraunces', serif;
--font-body: 'Hanken Grotesk', sans-serif;
--spring: cubic-bezier(.34,1.56,.64,1);
--section-pad-v: clamp(70px, 10vw, 130px);
--section-pad-h: clamp(20px, 6vw, 100px);
--max-width: 1240px;
}
/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--color-bg-light);color:var(--color-ink-light);
overflow-x:clip; /* clip, NOT hidden - hidden breaks position:sticky */
-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:80;opacity:.04;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shell{max-width:var(--max-width);margin:0 auto;padding:0 var(--section-pad-h)}
section{padding:var(--section-pad-v) 0;position:relative}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.012em}
/* ---------- TYPOGRAPHY SCALE (skill spec) ---------- */
.t-hero{font-size:clamp(2.8rem,8vw,6.5rem)}
.t-h1{font-size:clamp(2.6rem,6vw,5rem)}
.t-h2,h2{font-variation-settings:'opsz' 100,'wght' 480;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.14;max-width:22ch}
.t-h3,h3{font-variation-settings:'opsz' 70,'wght' 500;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.12}
.t-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.t-body,p{line-height:1.68}
.t-body{font-size:clamp(1rem,1.2vw,1.12rem)}
.muted{opacity:.72;font-weight:300}
.dark{background:var(--color-bg-dark);color:var(--color-ink-dark)}
.dark .muted{opacity:.7}
/* ---------- LOAD/REVEAL INITIAL STATES (gated on html.js so a
JS failure never leaves content invisible) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(30px)}
.js [data-load]{opacity:0;transform:translateY(20px)}
/* ---------- SYSTEM 6: NUMBERED WAYFINDING ---------- */
.way{display:flex;align-items:center;gap:14px;font-size:.7rem;letter-spacing:.2em;
text-transform:uppercase;font-weight:600;color:var(--color-accent-dim)}
.dark .way{color:var(--color-accent)}
.way .num{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 500;font-size:.86rem}
.way .rule{height:1px;background:currentColor;width:clamp(36px,5vw,80px)}
.js .way .rule{transform:scaleX(0);transform-origin:left}
.hud{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:11px;
font-variant-numeric:tabular-nums;font-size:.7rem;letter-spacing:.14em;font-weight:600;
color:rgba(255,255,255,.6);mix-blend-mode:difference}
.hud .cur{color:#fff;font-size:.84rem}
.hud .hr{width:32px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hud .hr i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;
transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media(max-width:899px){.hud{display:none}}
/* ---------- SYSTEM 8: TOUCH VOCABULARY ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--color-accent);color:#fff;
text-decoration:none;border:0;cursor:pointer;font-family:var(--font-body);font-weight:700;
font-size:.94rem;padding:16px 28px;border-radius:100px;user-select:none;
transition:transform .5s var(--spring),box-shadow .4s,background .3s}
.btn:hover{background:var(--color-accent-dim);box-shadow:0 12px 36px var(--accent-glow)}
.btn:active{transform:scale(.95);transition:transform .1s ease-out}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor;opacity:.85}
.btn.ghost:hover{box-shadow:none;opacity:1;background:rgba(0,0,0,.04)}
.dark .btn.ghost:hover{background:rgba(255,255,255,.06)}
.tlink{font-weight:600;text-decoration:none;font-size:.92rem;color:var(--color-accent-dim);
background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
background-size:0% 1.5px;background-position:0 100%;padding-bottom:3px;
transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.tlink:hover{background-size:100% 1.5px}
.dark .tlink{color:var(--color-accent)}
/* ---------- SYSTEM 4: IMAGE REVEAL LANGUAGE ---------- */
.img-reveal{position:relative;overflow:hidden;border-radius:22px}
.js .img-reveal{clip-path:inset(14% 16% 14% 16% round 22px)}
.img-reveal img{width:100%;height:100%;object-fit:cover}
.js .img-reveal img{transform:scale(1.28);will-change:transform}
/* ---------- TOP BAR (multi-location) ---------- */
.topbar{background:var(--color-accent-2);color:#fff;font-size:.78rem;padding:9px 0}
.topbar .shell{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar .loc{display:flex;align-items:center;gap:8px;font-weight:600}
.topbar select{background:transparent;border:0;color:#fff;font-family:var(--font-body);
font-size:.78rem;font-weight:600;cursor:pointer;outline:none}
.topbar select option{color:var(--color-ink-light)}
.topbar .locinfo{opacity:.85}
.topbar .right{display:flex;align-items:center;gap:18px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .soc{display:flex;gap:10px;opacity:.85}
@media(max-width:820px){.topbar .locinfo,.topbar .soc,.topbar .mail{display:none}}
/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,245,241,.94);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(20,35,28,.08)}
.nav .shell{display:flex;justify-content:space-between;align-items:center;height:84px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--color-ink-light);
font-family:var(--font-display);font-variation-settings:'opsz' 50,'wght' 620;font-size:1.2rem}
.logo i{width:26px;height:26px;border-radius:8px;background:var(--color-accent);position:relative;flex-shrink:0}
.logo i::after{content:'';position:absolute;inset:7px;border:2.5px solid #fff;border-radius:50%;border-bottom-color:transparent;transform:rotate(45deg)}
.nav-links{display:flex;gap:26px;list-style:none;font-size:.9rem;font-weight:500}
.nav-links a{text-decoration:none}
.nav-links li{position:relative}
/* dropdowns */
.nav-links .drop>a::after{content:' ▾';font-size:.7em;opacity:.55}
.nav-links .drop-menu{position:absolute;top:100%;left:-14px;min-width:230px;background:#fff;
border-radius:14px;box-shadow:0 18px 50px rgba(20,35,28,.16);padding:10px;list-style:none;
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .3s,transform .3s,visibility .3s}
.nav-links .drop:hover .drop-menu,.nav-links .drop:focus-within .drop-menu{
opacity:1;visibility:visible;transform:none}
.nav-links .drop-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:.86rem}
.nav-links .drop-menu a:hover{background:var(--accent-soft);color:var(--color-accent-dim)}
.nav-phone{font-weight:700;text-decoration:none;font-size:.92rem;color:var(--color-accent-dim)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--color-ink-light);transition:.3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
@media(max-width:920px){
.nav-links,.nav-phone{display:none}
.burger{display:block;flex-shrink:0}
/* long clinic names (and the unfilled master token) must never
push the burger off-screen */
.logo{min-width:0;overflow:hidden;white-space:nowrap;font-size:1.05rem}
}
.mnav{position:fixed;inset:0;background:var(--color-bg-dark);color:var(--color-ink-dark);z-index:70;
display:flex;flex-direction:column;justify-content:center;justify-content:safe center;padding:0 32px;overflow-y:auto;
transform:translateY(-100%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.mnav.open{transform:none}
.mnav a{display:block;text-decoration:none;font-family:var(--font-display);
font-variation-settings:'opsz' 90,'wght' 480;font-size:clamp(1.8rem,7vw,2.6rem);
padding:12px 0}
.js .mnav a{opacity:0;transform:translateY(24px)}
.mnav .msub{font-size:clamp(1.05rem,4.5vw,1.3rem);opacity:.75;padding:8px 0 8px 22px}
.mnav .close{position:absolute;top:20px;right:20px;background:none;border:0;color:var(--color-ink-dark);
font-size:1.6rem;cursor:pointer;width:44px;height:44px}
/* accordion (built by initMobileNavAccordion): parent = toggle button, same type as the links */
.mnav .mparent{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
background:none;border:0;color:inherit;cursor:pointer;text-align:left;line-height:inherit;
font-family:var(--font-display);font-variation-settings:'opsz' 90,'wght' 480;
font-size:clamp(1.8rem,7vw,2.6rem);padding:12px 0}
.js .mnav .mparent{opacity:0;transform:translateY(24px)}
.mnav .mchev{flex-shrink:0;width:11px;height:11px;margin-right:8px;opacity:.6;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-3px) rotate(45deg);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.mnav .mgroup.open .mchev{transform:translateY(3px) rotate(225deg)}
.mnav .msubs{display:grid;grid-template-rows:0fr;visibility:hidden;
transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s}
.mnav .msubs>div{overflow:hidden;min-height:0}
.mnav .mgroup.open .msubs{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
/* ---------- 01 HERO ---------- */
.hero{padding:clamp(44px,6vw,80px) 0 var(--section-pad-v);overflow:hidden}
/* Layout: [copy | photo] on top, the booking form full width underneath.
The photo stretches to the copy column's height (image is absolutely
positioned so it never drives the row height). */
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:"copy photo" "form form";column-gap:clamp(30px,4.5vw,70px);
row-gap:clamp(34px,4vw,56px);align-items:stretch}
.hero .hero-copy{grid-area:copy;align-self:center}
@media(max-width:699px){
.hero .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "photo" "form";row-gap:30px}
}
.hero h1{font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8;
font-size:clamp(1.87rem,5.33vw,4.33rem);line-height:1.1;margin-top:22px}
.hero h1 .word{display:inline-block;white-space:nowrap;margin-right:.24em}
.hero h1 .ch{display:inline-block}
.js .hero h1 .ch{opacity:0;transform:translateY(.5em);
font-variation-settings:'opsz' 144,'wght' 200,'SOFT' 100,'WONK' 0}
.hero h1 .accent-word,.hero h1 .accent-word .ch{color:var(--color-accent-dim)}
.hero .tag{margin-top:16px;font-family:var(--font-display);font-style:italic;
font-variation-settings:'opsz' 90,'wght' 440,'SOFT' 50;font-size:clamp(1.15rem,2vw,1.5rem);
color:var(--color-accent-dim)}
.hero .sub{margin-top:18px;max-width:44ch}
.hero-photo{grid-area:photo;min-height:clamp(340px,34vw,500px)}
.hero-photo img{position:absolute;inset:0;object-position:50% 20%}
@media(max-width:699px){.hero-photo{min-height:0;aspect-ratio:5/3}}
/* Full-width horizontal booking form. Same multi-step form and fields;
only the arrangement changes. >=700px: current step and Back/Continue sit
side by side. >=1000px: heading + progress get their own left column. */
.hero .form-card{grid-area:form}
@media(min-width:700px){
.hero .form-card form{display:grid;grid-template-columns:minmax(0,1fr) auto;
column-gap:clamp(24px,3vw,48px);align-items:end}
.hero .form-card form>*{grid-column:1}
.hero .form-card .ms-nav{grid-column:2;grid-row:1;margin-top:0}
.hero .form-card .ms-done{grid-column:1/-1}
.hero .form-card .ms-summary{grid-template-columns:1fr 1fr;column-gap:28px}
/* final review step is taller: buttons drop underneath so the summary
and consent text get the full width */
.hero .form-card form:has([data-step="4"].active) .ms-nav{grid-column:1/-1;grid-row:auto;margin-top:26px}
}
@media(min-width:1000px){
.hero .form-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);
column-gap:clamp(36px,4vw,64px);align-items:center;padding:clamp(30px,3vw,42px) clamp(34px,3.6vw,52px)}
.hero .form-card .fc-head{grid-column:1;grid-row:1;align-self:end}
.hero .form-card .fm-progress{grid-column:1;grid-row:2;margin:20px 0 0;align-self:start}
.hero .form-card form{grid-column:2;grid-row:1/3;padding-left:clamp(36px,4vw,64px);
border-left:1px solid rgba(20,35,28,.1)}
}
.gbadge{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.86rem;font-weight:600}
.gbadge .stars,.stars{color:#F5B301;letter-spacing:2px}
/* ---------- SYSTEM 7: MULTI-STEP FORM CARD ---------- */
.form-card{background:#fff;border-radius:22px;padding:clamp(28px,3.6vw,44px);
box-shadow:0 24px 70px rgba(20,35,28,.12);border:1px solid rgba(20,35,28,.06)}
.dark .form-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);
box-shadow:none;color:var(--color-ink-dark)}
.form-card .fc-head{font-family:var(--font-display);font-variation-settings:'opsz' 70,'wght' 520;
font-size:1.3rem;line-height:1.55}
.fm-progress{display:flex;align-items:center;gap:12px;margin:34px 0 34px}
.fm-progress .bar{flex:1;height:3px;background:rgba(20,35,28,.12);border-radius:3px;overflow:hidden}
.dark .fm-progress .bar{background:rgba(255,255,255,.14)}
.fm-progress .bar i{display:block;height:100%;width:20%;background:var(--color-accent);border-radius:3px;
transition:width .55s cubic-bezier(.22,1,.36,1)}
.fm-progress .count{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
opacity:.6;white-space:nowrap;font-variant-numeric:tabular-nums}
.ms-step{display:none}
.ms-step.active{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.ms-step .q{font-weight:600;font-size:1.02rem;line-height:1.35}
.field{position:relative;margin-top:30px}
.field input{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(20,35,28,.22);
color:inherit;font-family:var(--font-body);font-size:1.08rem;padding:12px 2px 10px;outline:none}
.dark .field input{border-bottom-color:rgba(255,255,255,.25)}
.field label{position:absolute;left:2px;top:12px;opacity:.5;font-size:1rem;pointer-events:none;
transition:all .35s cubic-bezier(.65,0,.35,1)}
.field .ul{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--color-accent);
transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.field:focus-within .ul{transform:scaleX(1)}
.field:focus-within label,.field.filled label{top:-13px;font-size:.66rem;letter-spacing:.13em;
text-transform:uppercase;opacity:1;color:var(--color-accent-dim);font-weight:700}
.dark .field:focus-within label,.dark .field.filled label{color:var(--color-accent)}
.field .err{position:absolute;left:2px;top:100%;padding-top:5px;font-size:.72rem;color:#C0472F;
opacity:0;transition:opacity .3s}
.field.error .err{opacity:1}
.field.error input{border-bottom-color:#C0472F}
.ms-nav{display:flex;justify-content:space-between;align-items:center;margin-top:36px;gap:12px}
.ms-back{background:none;border:0;font-family:var(--font-body);font-size:.84rem;font-weight:600;
opacity:.55;cursor:pointer;color:inherit;padding:10px 4px;min-height:44px;visibility:hidden}
.ms-back.show{visibility:visible}
.ms-summary{margin-top:16px;display:grid;gap:4px}
.ms-summary .row{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;
padding:9px 0;border-bottom:1px solid rgba(20,35,28,.1)}
.dark .ms-summary .row{border-bottom-color:rgba(255,255,255,.1)}
.ms-summary .row span:first-child{opacity:.55}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.74rem;
line-height:1.5;opacity:.8;cursor:pointer;user-select:none}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--color-accent);flex-shrink:0;cursor:pointer}
.btn[disabled]{opacity:.45;pointer-events:none}
.ms-done{display:none;text-align:center;padding:18px 0 6px}
.ms-done.show{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
.ms-done .ok{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--color-accent-dim);
display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 14px}
/* ---------- 02/05/10 SPLITS ---------- */
.split .shell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:840px){.split .shell{grid-template-columns:1fr}}
.split h2{margin-top:18px}
.split p{margin-top:16px;max-width:48ch}
.split .cta{margin-top:26px}
.split .img-reveal{aspect-ratio:4/5;max-height:520px}
.taglinks{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.taglinks a{font-size:.8rem;font-weight:600;text-decoration:none;padding:9px 16px;border-radius:100px;
border:1px solid rgba(255,255,255,.25);transition:border-color .3s,background .3s,transform .5s var(--spring)}
.taglinks a:hover{border-color:var(--color-accent);background:var(--accent-soft)}
.taglinks a:active{transform:scale(.94);transition:transform .1s}
/* ---------- SYSTEM 2: SNAP CAROUSELS + CARDS ---------- */
.car-wrap{margin-top:clamp(32px,4vw,50px)}
.car{display:grid;gap:16px}
@media(min-width:768px){.car.cols-4{grid-template-columns:repeat(4,1fr)}.car.cols-3{grid-template-columns:repeat(3,1fr)}.car.cols-2{grid-template-columns:repeat(2,1fr);max-width:640px;margin-inline:auto}}
@media(max-width:767px){
.car{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
overscroll-behavior-x:contain;padding:4px var(--section-pad-h) 8px;margin:0 calc(-1*var(--section-pad-h));
scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.car>*{scroll-snap-align:center}
}
.car-progress{height:2px;background:rgba(20,35,28,.14);border-radius:2px;margin-top:18px;overflow:hidden}
.dark .car-progress{background:rgba(255,255,255,.14)}
.car-progress i{display:block;height:100%;width:18%;background:var(--color-accent);border-radius:2px;transition:width .15s linear}
@media(min-width:768px){.car-progress{display:none}}
/* opt-in carousel arrows (data-car-nav, built by initCarouselNav): mobile only */
.car-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.car-arrow{width:44px;height:44px;border-radius:50%;background:none;color:inherit;cursor:pointer;
border:1px solid rgba(20,35,28,.22);display:flex;align-items:center;justify-content:center;
transition:opacity .25s,border-color .25s,background .25s}
.dark .car-arrow{border-color:rgba(255,255,255,.28)}
.car-arrow:hover{border-color:var(--color-accent);background:var(--accent-soft)}
.car-arrow:disabled{opacity:.3;cursor:default;background:none}
.car.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
@media(min-width:768px){.car-nav{display:none}}
.tcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;
overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
transition:transform .5s var(--spring),border-color .4s;user-select:none}
.tcard:hover{transform:translateY(-6px);border-color:rgba(189,155,108,.5)}
.tcard:active{transform:scale(.965);transition:transform .1s}
.tcard .img-reveal{border-radius:0;aspect-ratio:4/3}
.js .tcard .img-reveal{clip-path:inset(14% 16% 14% 16% round 0)}
.tcard .body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tcard .body h3{font-size:1.2rem}
.tcard .body p{font-size:.88rem;opacity:.7;line-height:1.55}
.tcard .guest-logo{height:22px;width:auto;object-fit:contain;object-position:left center;margin-top:2px}
.tcard .go{margin-top:auto;padding-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent);
display:flex;justify-content:space-between;align-items:center}
/* ---------- 4-PHASE PROGRAM ---------- */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:clamp(18px,3vw,32px);margin-top:clamp(34px,5vw,54px)}
.phase{border-top:2px solid rgba(20,35,28,.14);padding-top:20px}
.phase .pnum{font-family:var(--font-display);font-variation-settings:'opsz' 144,'wght' 300,'SOFT' 30;
font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:.9;color:var(--color-accent-dim)}
.phase h3{margin-top:12px;font-size:1.35rem}
.phase p{margin-top:8px;font-size:.9rem;opacity:.7;line-height:1.6}
/* ---------- TEAM CARDS ---------- */
.mcard{background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--color-ink-light);
box-shadow:0 8px 28px rgba(20,35,28,.08);display:flex;flex-direction:column;
transition:transform .5s var(--spring),box-shadow .5s;user-select:none}
.mcard:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(20,35,28,.14)}
.mcard:active{transform:scale(.965);transition:transform .1s}
.mcard .img-reveal{border-radius:0;aspect-ratio:4/5}
.js .mcard .img-reveal{clip-path:inset(14% 16% 14% 16% round 0)}
.mcard .body{padding:20px 22px 22px}
.mcard .body h3{font-size:1.25rem}
.mcard .cred{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--color-accent-dim);margin-top:3px}
.mcard .pos{font-size:.86rem;opacity:.6;margin-top:5px}
.mcard .go{margin-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent-dim)}
/* ---------- 07 BODY AREAS (light, reference layout) ---------- */
.areas-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);align-items:end;margin-top:16px}
@media(max-width:840px){.areas-head{grid-template-columns:1fr}}
.areas-head .sub-h{font-family:var(--font-display);font-variation-settings:'opsz' 60,'wght' 540;
font-size:clamp(1.05rem,1.8vw,1.3rem);margin-top:16px;color:var(--color-accent-dim)}
.area-chips{display:flex;flex-wrap:wrap;gap:9px}
.area-chips a{font-size:.8rem;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:100px;
background:#fff;box-shadow:0 3px 12px rgba(20,35,28,.07);min-height:40px;display:inline-flex;align-items:center;
transition:transform .5s var(--spring),box-shadow .4s}
.area-chips a:hover{box-shadow:0 8px 22px rgba(20,35,28,.13)}
.area-chips a:active{transform:scale(.94);transition:transform .1s}
.areas-grid{display:grid;grid-template-columns:1fr minmax(230px,320px) 1fr;
gap:clamp(16px,2.5vw,30px);align-items:center;margin-top:clamp(34px,5vw,54px)}
@media(max-width:920px){.areas-grid{grid-template-columns:1fr;justify-items:center}}
.model-wrap{position:relative;width:100%;max-width:320px}
.model-wrap img{width:100%;border-radius:20px}
.mdot{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;
background:#fff;border:2px solid var(--color-accent-dim);color:var(--color-accent-dim);
font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .35s var(--spring);
box-shadow:0 4px 14px rgba(20,35,28,.2);z-index:2}
/* 44px hit target around the visible 26px dot */
.mdot::before{content:'';position:absolute;inset:-9px;border-radius:50%}
.mdot::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--color-accent);opacity:0}
.mdot.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;
transform:translate(-50%,-50%) scale(1.18)}
.mdot.active::after{opacity:1;animation:hsPulse 1.8s ease-out infinite}
@keyframes hsPulse{from{transform:scale(.55);opacity:.8}to{transform:scale(1.7);opacity:0}}
.area-col{display:grid;gap:14px;align-content:center}
@media(max-width:920px){.area-col{width:100%;max-width:520px}}
.acard{background:#fff;border-radius:18px;padding:18px 20px;border:1.5px solid transparent;cursor:pointer;
box-shadow:0 4px 18px rgba(20,35,28,.06);user-select:none;
transition:border-color .4s,box-shadow .4s,transform .5s var(--spring)}
.acard:active{transform:scale(.975);transition:transform .1s}
.acard.active{border-color:var(--color-accent);box-shadow:0 16px 40px rgba(189,155,108,.16)}
.acard .ahead{display:flex;align-items:center;gap:10px}
.acard .anum{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--color-accent-dim);
font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:background .3s,color .3s}
.acard.active .anum{background:var(--color-accent);color:#fff}
.acard h3{font-size:1rem;font-variation-settings:'opsz' 50,'wght' 560}
.acard p{font-size:.79rem;line-height:1.55;opacity:.6;margin-top:8px}
.acard .tlink{font-size:.76rem;margin-top:10px;display:inline-block}
.bm-list{margin-top:clamp(30px,4vw,44px);display:flex;flex-wrap:wrap;gap:8px 22px;
font-size:.84rem;justify-content:center}
.bm-list a{opacity:.6;text-decoration:none;transition:opacity .3s,color .3s}
.bm-list a:hover{opacity:1;color:var(--color-accent-dim)}
/* ---------- BANDS ---------- */
.band{padding:clamp(44px,6vw,70px) 0}
.logos{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);align-items:center;justify-content:center;
margin-top:26px}
.logos span,.logos img{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 560;
font-size:clamp(1rem,1.8vw,1.3rem);opacity:.42;white-space:nowrap}
.logos img{max-height:44px;width:auto}
.paper .shell{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,60px);align-items:center;
background:#fff;border-radius:24px;padding:clamp(26px,4vw,48px);box-shadow:0 12px 40px rgba(20,35,28,.07)}
@media(max-width:760px){.paper .shell{grid-template-columns:1fr}}
.paper .img-reveal{aspect-ratio:4/3}
/* ---------- 08 OFFER ---------- */
.offer{background:linear-gradient(135deg,var(--color-accent-2),var(--offer-grad-2));color:#fff;text-align:center;overflow:hidden}
.offer .way{justify-content:center;color:var(--offer-tint)}
.offer h2{margin:18px auto 0;font-size:clamp(2.1rem,5vw,4rem)}
.offer h2 em{font-style:italic;font-variation-settings:'opsz' 144,'wght' 440,'SOFT' 60;color:var(--offer-tint)}
.offer .gline{margin-top:20px;font-weight:600}
.offer .cta{margin-top:30px}
.offer .btn{background:#fff;color:var(--color-accent-2)}
.offer .btn:hover{background:#fff;box-shadow:0 14px 44px rgba(0,0,0,.3)}
/* ---------- MOVEMENT LINKS ---------- */
.movelinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.movelinks a{font-size:.86rem;font-weight:600;text-decoration:none;padding:12px 20px;border-radius:100px;
background:#fff;box-shadow:0 4px 16px rgba(20,35,28,.07);
transition:transform .5s var(--spring),box-shadow .4s;min-height:44px;display:inline-flex;align-items:center}
.movelinks a:hover{box-shadow:0 10px 28px rgba(20,35,28,.13)}
.movelinks a:active{transform:scale(.94);transition:transform .1s}
/* ---------- 09 TESTIMONIALS ---------- */
.qcard{background:#fff;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px;
box-shadow:0 8px 28px rgba(20,35,28,.07);user-select:none;
transition:transform .5s var(--spring)}
.qcard:active{transform:scale(.97);transition:transform .1s}
.qcard .stars{font-size:.86rem}
.qcard p{font-size:.94rem;line-height:1.6}
.qcard .who{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--color-accent-dim)}
/* ---------- 11 JOURNEY STATS ---------- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,46px)}
.stat .odo{display:flex;align-items:baseline;font-family:var(--font-display);
font-variation-settings:'opsz' 144,'wght' 420;font-size:clamp(2.6rem,5vw,4rem);
font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--color-accent-dim)}
.stat .odo .slot{height:1em;overflow:hidden;line-height:1}
.stat .odo .col{display:block;will-change:transform}
.stat .odo .col span{display:block;height:1em;line-height:1}
.stat .odo .suffix{font-size:.5em;margin-left:2px;color:var(--color-accent)}
.stat .odo.odo-decimal .suffix{font-size:1em;margin-left:1px;color:inherit}
/* unfilled master tokens render small and readable instead of at
display size (they'd overlap adjacent stats) */
.stat .odo .static-token{font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.3;
letter-spacing:0;word-break:break-word;font-variation-settings:'opsz' 40,'wght' 520}
.stat .odo[data-static]{align-items:center;min-height:1em}
.stat .odo[data-static] .suffix{font-size:1em}
.stat .slabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
opacity:.55;margin-top:8px}
/* ---------- 12 FAQ / SYSTEM 8 ACCORDION ---------- */
.faq-list{margin-top:30px;border-top:1px solid rgba(20,35,28,.12);max-width:820px}
.faq-item{border-bottom:1px solid rgba(20,35,28,.12)}
.dark .faq-list,.dark .faq-item{border-color:rgba(255,255,255,.12)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--font-body);
font-size:1rem;font-weight:600;text-align:left;padding:20px 4px;display:flex;
justify-content:space-between;align-items:center;gap:14px;min-height:44px;user-select:none}
.faq-q:active{opacity:.7}
.faq-q .chev{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid rgba(20,35,28,.25);
display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--color-accent-dim);
transition:transform .5s var(--spring),background .3s}
.dark .faq-q .chev{border-color:rgba(255,255,255,.3);color:var(--color-accent)}
.faq-item.open .chev{transform:rotate(135deg);background:var(--accent-soft)}
.faq-a{overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.js .faq-a{height:0} /* JS-off renders answers open (auto height) */
.faq-a p{padding:0 4px 20px;font-weight:300;opacity:.75;max-width:62ch}
/* ---------- 13 APPOINTMENT (global booking section) ---------- */
.appt .shell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:840px){.appt .shell{grid-template-columns:1fr}}
.appt h2{margin-top:18px}
.hoursbox{margin-top:26px;display:grid;gap:10px;font-size:.92rem}
.hoursbox .row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.12)}
.hoursbox .row span:first-child{opacity:.6}
.mapbox{margin-top:24px;height:180px;border-radius:16px;position:relative;overflow:hidden;background:#14312A}
.mapbox iframe{width:100%;height:100%;border:0;display:block}
/* ---------- FOOTER ---------- */
footer{background:var(--color-bg-darkest);color:var(--color-ink-dark);padding:clamp(50px,7vw,80px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(26px,4vw,60px)}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}}
.foot-grid p{font-size:.88rem;opacity:.6;margin-top:14px;max-width:34ch}
.floc h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent)}
.floc div{font-size:.88rem;line-height:1.75;opacity:.75;margin-top:12px}
.floc a{text-decoration:none}
.foot-soc{display:flex;gap:8px;margin-top:10px;margin-left:-6px;font-size:.8rem;opacity:.7}
.foot-soc a{text-decoration:none;display:inline-flex;align-items:center;padding:14px 6px;min-height:44px}
.foot-bottom{margin-top:clamp(36px,5vw,54px);padding:20px 0;border-top:1px solid rgba(255,255,255,.08);
font-size:.76rem;opacity:.5;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* ---------- SYSTEM 1: THUMB-ZONE CTA DOCK ---------- */
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:65;
transform:translateX(-50%) translateY(180%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.dock.show{transform:translateX(-50%) translateY(0)}
.dock a{display:flex;align-items:center;gap:11px;background:var(--color-accent);color:#fff;text-decoration:none;
font-weight:700;font-size:.93rem;padding:16px 28px;border-radius:100px;user-select:none;
box-shadow:0 14px 44px rgba(0,0,0,.35),0 4px 18px var(--accent-glow);
transition:transform .5s var(--spring)}
.dock a:active{transform:scale(.94);transition:transform .1s}
.dock .dot{width:8px;height:8px;border-radius:50%;background:#fff;position:relative}
.dock .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #fff;
opacity:.45;animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:.5}to{transform:scale(1.5);opacity:0}}
/* ============================================================
WP-ORIGINAL VISUAL LANGUAGE (waves, photo clusters, badges,
tinted panels, photo band) - ported from temp1-2026 Divi CSS
============================================================ */
/* ---------- LAYERED WAVE SECTION DIVIDERS ----------
Exact Divi 3-path wave. Colored via currentColor to match the
ADJACENT section's background. Markup:
*/
.wave{position:absolute;left:0;right:0;height:clamp(40px,7vw,110px);pointer-events:none;z-index:1;overflow:hidden}
.wave svg{width:100%;height:100%;display:block}
.wave-top{top:-1px;transform:rotate(180deg)}
.wave-bottom{bottom:-1px}
section.has-wave-top{padding-top:calc(var(--section-pad-v) + clamp(20px,3.5vw,55px))}
section.has-wave-bottom{padding-bottom:calc(var(--section-pad-v) + clamp(20px,3.5vw,55px))}
/* ---------- PHOTO CLUSTER (split sections) ----------
Main 4:5 photo + smaller overlapping landscape photo, framed in
the section background color. Both use the System 4 reveal. */
.photo-cluster{position:relative;margin-bottom:clamp(28px,6vw,56px)}
.photo-cluster .pc-main{aspect-ratio:4/5;max-height:520px}
.photo-cluster .pc-sub{position:absolute;bottom:-9%;left:-6%;width:52%;aspect-ratio:4/3;
border:6px solid var(--color-bg-light);border-radius:24px;box-shadow:0 18px 50px rgba(20,35,28,.18)}
.js .photo-cluster .pc-sub{clip-path:inset(14% 16% 14% 16% round 18px)}
.dark .photo-cluster .pc-sub{border-color:var(--color-bg-dark)}
@media(max-width:840px){.photo-cluster .pc-sub{left:0}}
/* ---------- CARD LOGO BADGE (treatment + team cards) ----------
Circular brand badge bridging the photo and the card body,
echoing the WP original's notch badge. */
.card-badge{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:48px;height:48px;
border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(20,35,28,.18);
display:flex;align-items:center;justify-content:center;z-index:2}
.card-badge i{width:24px;height:24px;border-radius:7px;background:var(--color-accent);position:relative}
.card-badge i::after{content:'';position:absolute;inset:6px;border:2px solid #fff;border-radius:50%;
border-bottom-color:transparent;transform:rotate(45deg)}
.tcard .body,.mcard .body{position:relative}
.tcard .body.has-badge,.mcard .body.has-badge{padding-top:34px}
/* ---------- TINTED ROUNDED PANEL (07 body areas) ---------- */
.areas-panel{background:rgba(189,155,108,.07);border-radius:clamp(22px,3vw,36px);
padding:clamp(22px,4vw,56px);margin-top:clamp(24px,3.5vw,44px)}
.areas-panel .areas-head{margin-top:0}
/* ---------- FULL-WIDTH PHOTO BAND (movement health) ---------- */
.photo-band{position:relative;border-radius:clamp(20px,2.5vw,28px);overflow:hidden;
padding:clamp(44px,7vw,90px) clamp(24px,4.5vw,64px);color:var(--color-ink-dark)}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photo-band::after{content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(8,16,9,.82) 10%,rgba(8,16,9,.45) 60%,rgba(8,16,9,.25))}
.photo-band>*:not(img){position:relative;z-index:2}
.photo-band .movelinks a{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.22);box-shadow:none}
.photo-band .movelinks a:hover{background:rgba(255,255,255,.24)}
/* ============================================================
GOOGLE REVIEWS WALL (light section; cards fed by
assets/data/reviews.json via initReviews in app.js)
============================================================ */
.section-reviews{overflow:hidden}
.reviews-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,7rem);align-items:center}
.reviews-hero h2{margin-top:18px}
.reviews-hero .t-body{margin:1.4rem 0 2.4rem;max-width:40ch}
.reviews-aggregate{display:flex;align-items:center;gap:.75rem;margin-top:2rem;padding-top:1.6rem;
border-top:1px solid rgba(20,35,28,.12)}
.reviews-agg-stars{display:inline-flex;gap:2px}
.rev-agg-star{width:14px;height:14px;fill:#FBBC04}
.reviews-agg-text{font-size:.85rem;opacity:.75}
.reviews-agg-text strong{opacity:1;font-weight:600}
.reviews-wall{display:grid;grid-template-columns:1fr 1fr;gap:12px;
height:clamp(560px,72vh,820px);overflow:hidden;position:relative;
mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 93%,transparent 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 93%,transparent 100%)}
.reviews-col{display:flex;flex-direction:column;gap:12px;will-change:transform}
.review-card{background:#fff;border-radius:18px;padding:1.1rem;flex:none;width:100%;
font-family:var(--font-body);box-shadow:0 1px 6px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.05)}
.review-card-header{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem}
.review-avatar-wrap{position:relative;flex:none}
.review-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;background:#E0DDD8}
.review-avatar-initial{display:flex;align-items:center;justify-content:center;font-size:1.05rem;
font-weight:600;color:#fff;user-select:none}
.review-g-badge{position:absolute;bottom:-2px;right:-3px;width:16px;height:16px;background:#fff;
border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.review-g-badge svg{width:10px;height:10px}
.review-name{display:block;font-size:.88rem;font-weight:600;color:#1A1A1A;line-height:1.3}
.review-date{display:block;font-size:.72rem;color:#8C8580;margin-top:.1rem}
.review-stars{display:flex;gap:2px;margin-bottom:.55rem}
.review-star{width:11px;height:11px;fill:#FBBC04}
.review-star-empty{fill:#D9D5D0}
.review-text{font-size:.84rem;line-height:1.55;color:#2A2520;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.4rem}
.review-read-more{display:block;font-size:.73rem;color:#8C8580;cursor:default}
@media(max-width:1024px){
.reviews-shell{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
.reviews-wall{height:clamp(400px,52vh,520px)}
}
@media(max-width:600px){
.reviews-wall{display:block;height:auto;padding:6px 0;
mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
-webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%)}
.reviews-col{flex-direction:row;gap:10px}
.review-card{width:clamp(260px,78vw,300px);flex:none}
#reviews-col-b{display:none}
}
/* ---------- ELFSIGHT EMBED (09 testimonials) ---------- */
.elfsight-wrap{margin-top:clamp(32px,4vw,50px);min-height:120px}
/* ---------- GSAP-OFF FALLBACK ----------
systems.js adds .gsap-off to when the GSAP CDN fails to
load; every .js-gated hidden state renders in its final position
so content is never invisible. Mirrors the reduced-motion block. */
.js.gsap-off [data-reveal],.js.gsap-off [data-load]{opacity:1;transform:none}
.js.gsap-off .hero h1 .ch{opacity:1;transform:none;font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8}
.js.gsap-off .way .rule{transform:scaleX(1)}
.js.gsap-off .img-reveal{clip-path:none}
.js.gsap-off .img-reveal img{transform:none}
.js.gsap-off .photo-cluster .pc-sub{clip-path:none}
.js.gsap-off .mnav a,.js.gsap-off .mnav .mparent{opacity:1;transform:none}
.js.gsap-off .inner-hero h1 .line-inner{translate:none;transform:none}
/* ---------- EXPANDED HIT AREAS (44px tap targets) ----------
Small chrome text links keep their visual size but gain an
invisible touch area. position:relative is layout-neutral here. */
.topbar a,.crumb a,.tlink,.nav-phone,.logo{position:relative}
.topbar a::before,.crumb a::before,.tlink::before,.nav-phone::before,.logo::before{
content:'';position:absolute;top:-12px;bottom:-12px;left:-6px;right:-6px}
/* ---------- REDUCED MOTION (all seven systems fall back) ---------- */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.js [data-reveal],.js [data-load]{opacity:1;transform:none}
.js .hero h1 .ch{opacity:1;transform:none;font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8}
.js .way .rule{transform:scaleX(1)}
.js .img-reveal{clip-path:inset(0 0 0 0 round 22px)}
.js .tcard .img-reveal,.js .mcard .img-reveal{clip-path:inset(0 0 0 0 round 0)}
.js .img-reveal img{transform:none}
.js .mnav a,.js .mnav .mparent{opacity:1;transform:none}
.mnav .msubs,.mnav .mchev{transition:none}
.mdot.active::after{animation:none;opacity:.5}
.dock,.dock .dot::after{transition:none;animation:none}
.ms-step.active,.ms-done.show{animation:none}
.faq-a{transition:none}
.hud .hr i{transition:none}
.js .photo-cluster .pc-sub{clip-path:inset(0 0 0 0 round 18px)}
.reviews-col{will-change:auto;overflow-y:auto;max-height:100%}
}
/* ==========================================================================
BRAND LOCKUP (Aureum Physio Mode B build)
The master shipped a CSS wordmark (.logo > i + the company-name token). This
client has a real transparent lockup, so .logo now carries an ![]()
and the
old mark rules no longer apply. The footer variant swaps in the derived
white knockout. Kept here rather than edited inline above so the master's
own .logo block stays intact for future clients that still use the wordmark.
========================================================================== */
.logo img{display:block;height:72px;width:auto;max-width:100%}
.logo i{display:none}
@media(max-width:900px){ .logo img{height:56px} }
/* Header matches the logo's own navy badge (#222e55) so the lockup sits on it
seamlessly. Opaque on purpose - any translucency would tint it off-match.
Top-level links, phone and burger flip to light; dropdown panels stay white. */
.nav{background:#222e55}
.nav-links>li>a{color:#fff}
.nav-phone{color:var(--color-accent)}
.burger span{background:#fff}
/* The card badge is the WP original's notch mark: the real monogram on a white
disc, bridging a card's photo and its body. */
.card-badge i{background:url('/assets/images/favicon.webp') center/contain no-repeat;
width:30px;height:30px;border-radius:0}
.card-badge i::after{content:none}
/* ---------- PRE-LAUNCH QA FIXES (2026-10-15 audit) ---------- */
/* mobile header: tap-to-call icon beside the menu button */
.nav-call{display:none}
@media(max-width:920px){
.nav-call{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
margin-left:auto;margin-right:2px;color:var(--color-accent);border-radius:50%}
}
/* mobile menu: keep the links clear of the close button when the menu is
taller than the screen (small phones with a group open) */
.mnav{padding:84px 32px 48px}
.mnav .close{position:fixed;z-index:2}
.mnav .mcall{font-family:var(--font-body);font-size:1.05rem;font-weight:700;color:var(--color-accent);padding:14px 0}
/* chat widget hidden while the mobile menu is open, and on phones while a
form's Continue / Submit button is on screen (initChatGuard) */
html.chat-off chat-widget{display:none!important}
/* footer legal links */
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
/* chrome text links: invisible hit area grows to 44px tall */
.topbar a::before,.crumb a::before,.tlink::before,.nav-phone::before,.logo::before{top:-14px;bottom:-14px}
/* phones: 16px minimum for reading text, 44px tap targets */
@media(max-width:640px){
/* !important: section rules (.phase p, .tcard .body p ...) set smaller sizes */
p,li,td,.muted,.sub,.review-text,.floc div,.foot-bottom,.hoursbox span{font-size:1rem!important}
.floc div a,.loc-info .li-row a.li-val,.loc-card a.loc-line{display:inline-flex;align-items:center;min-height:44px}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px}
.taglinks a,.movelinks a,.area-chips a,.bm-list a{display:inline-flex;align-items:center;min-height:44px}
}
.crumb a::before{left:-8px;right:-8px}