/* =========================================================
   INSYT FAMILYCARE — DESIGN SYSTEM v2 · "QUIET SANCTUARY"
   Supersedes Appendix A (Master Build Prompt Section 3).
   Base: insyt-homepage-v2-design-reference.html (matched verbatim),
   extended with the components the remaining 15 pages require.
   Easing everywhere: cubic-bezier(.2,.65,.25,1) · 0.7–0.9s · nothing bounces.
========================================================= */

:root{
  --teal:#20b3b0; --teal-ink:#0c4d4b; --teal-deep:#0f6d6a; --green:#88b63f;
  --char:#2f3133; --char2:#6a6d70; --cream:#f7f6f2; --paper:#fdfcfa; --white:#fff;
  --gold:#c9a24b; --line:#e9e6de; --mist:#e8f2f1;
  /* typefaces matched to the live insytfamilycare.ng (Astra theme):
     display = Wix Madefor Display @600, body = Manrope. Both loaded
     in one request via FONTS_URL in src/lib/constants.ts. */
  --display:'Wix Madefor Display',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:22px; --maxw:1200px;
  --shadow:0 24px 60px rgba(12,77,75,.08);
  --ease:cubic-bezier(.2,.65,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--char);background:var(--paper);line-height:1.85;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:var(--display);font-weight:500;line-height:1.14;letter-spacing:-.015em;color:var(--char)}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.22rem;font-weight:600}
p{color:var(--char2)}
a{color:var(--teal-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}
section{padding:120px 0}
.section-alt{background:var(--cream)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:22px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.lead{font-size:1.16rem;max-width:60ch;font-weight:400}
.sub{font-size:.82rem;color:var(--char2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;font-weight:600;font-size:.95rem;transition:transform .25s var(--ease),box-shadow .25s;border:0;cursor:pointer;text-decoration:none}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-wa{background:var(--teal-ink);color:#fff}
.btn-wa:hover{box-shadow:0 16px 34px rgba(12,77,75,.28)}
.btn-quiet,.btn-ghost{background:transparent;color:var(--char);border:1px solid var(--line);backdrop-filter:blur(6px)}
.btn-quiet:hover,.btn-ghost:hover{box-shadow:0 14px 30px rgba(12,77,75,.08)}
.btn-white{background:#fff;color:var(--teal-ink)}
.btn-white:hover{box-shadow:0 16px 34px rgba(0,0,0,.18)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:80;transition:background .4s,border .4s}
.nav.scrolled{background:rgba(253,252,250,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1320px;margin:0 auto;padding:20px 32px}
.brand{position:relative;display:block;line-height:0;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{display:block;height:52px;width:auto;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.brand-light{position:absolute;left:0;top:0;opacity:0;filter:drop-shadow(0 2px 14px rgba(0,0,0,.32))}
.brand:hover .brand-mark{transform:translateY(-1px) scale(1.015)}
@media(max-width:640px){.brand-mark{height:42px}}
.nav ul{display:flex;gap:2px;list-style:none;align-items:center;flex-wrap:nowrap}
.nav ul a{padding:9px 11px;border-radius:99px;font-size:.83rem;font-weight:600;color:var(--char2);white-space:nowrap}
.nav ul a:hover{background:var(--mist);color:var(--char);text-decoration:none}
.nav ul a[aria-current="page"]{color:var(--teal-deep)}
.nav .btn{padding:11px 20px;font-size:.82rem;margin-left:8px}
@media(max-width:1240px){.nav-inner{padding:20px 24px}.nav ul a{padding:9px 9px;font-size:.79rem}.nav .btn{padding:10px 16px}}
.nav.on-hero ul a{color:#fff}
.nav.on-hero ul a:hover{background:rgba(255,255,255,.14)}
.nav.on-hero .btn-wa{background:#fff;color:var(--teal-ink)}
.nav.on-hero .menu-btn{color:#fff;border-color:rgba(255,255,255,.45)}
/* over media the lockup switches to its light cut; once the paper nav
   slides under it, the full-colour logo returns */
.nav.on-hero:not(.scrolled) .brand-dark{opacity:0}
.nav.on-hero:not(.scrolled) .brand-light{opacity:1}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);color:var(--char);border-radius:99px;padding:9px 18px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal-ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* =========================================================
   MEDIA PLACEHOLDER SYSTEM  (.ph = photo slot, .ph-video = video slot)
   Every slot: soft teal-mist duotone gradient + slow ken-burns drift,
   shimmer sweep, corner chip with SLOT ID + ratio, caption of exact shot.
   Swap: replace inner .ph-art with <img>/<video> — chip & caption
   hidden globally when SHOW_MEDIA_LABELS=false.
========================================================= */
.ph{position:relative;overflow:hidden;border-radius:var(--r);background:#dfe9e7;isolation:isolate}
.ph-art{position:absolute;inset:-6%;background:
  radial-gradient(120% 90% at 20% 15%,#cfe6e2 0%,transparent 55%),
  radial-gradient(110% 90% at 85% 80%,#e7e0cd 0%,transparent 50%),
  linear-gradient(150deg,#eef4f1 0%,#d6e6e2 45%,#cfe0d4 100%);
  animation:ken 26s ease-in-out infinite alternate}
@keyframes ken{to{transform:scale(1.09) translate(1.6%,-1.4%)}}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translateX(-120%);animation:shimmer 5.5s ease-in-out infinite;z-index:2}
@keyframes shimmer{12%,100%{transform:translateX(120%)}}
.ph .ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(3rem,9vw,7rem);color:rgba(12,77,75,.10);z-index:1;font-weight:400}
.ph .chip{position:absolute;top:14px;left:14px;z-index:3;background:rgba(20,40,38,.55);color:#fff;backdrop-filter:blur(8px);font-size:.66rem;font-weight:700;letter-spacing:.1em;padding:7px 12px;border-radius:99px;display:flex;gap:8px;align-items:center}
.ph .chip i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.ph-cap{font-size:.8rem;color:var(--char2);margin-top:12px;display:flex;gap:8px;align-items:baseline}
.ph-cap b{color:var(--teal-deep);font-weight:700;white-space:nowrap}
/* real media, once supplied, fills the slot exactly like .ph-art */
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* video slot */
.ph-video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3}
.ph-video .play span{width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);background:rgba(255,255,255,.24)}}
/* ratio helpers — explicit dimensions, zero CLS */
/* the slot's own ratio always wins over any container default */
.ph.r-4x5{aspect-ratio:4/5}.ph.r-3x4{aspect-ratio:3/4}.ph.r-16x11{aspect-ratio:16/11}
.ph.r-16x9{aspect-ratio:16/9}.ph.r-21x9{aspect-ratio:21/9}.ph.r-9x16{aspect-ratio:9/16}.ph.r-1x2{aspect-ratio:540/1076}

/* ---------- hero ---------- */
.hero{position:relative;height:92vh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;padding:0}
.hero.hero-inner{height:76vh;min-height:520px}
.hero.hero-short{height:58vh;min-height:420px}
.hero .ph{position:absolute;inset:0;border-radius:0}
.hero .ph-art{background:
  radial-gradient(120% 90% at 75% 20%,#2c6f6b 0%,transparent 60%),
  radial-gradient(100% 80% at 15% 85%,#8aa46a 0%,transparent 55%),
  linear-gradient(160deg,#123f3d 0%,#1d5a56 48%,#3f7d6d 100%)}
.hero .ph .ghost{color:rgba(255,255,255,.07);font-size:clamp(4rem,12vw,9rem)}
/* full-bleed slot chips must clear the fixed nav */
.hero>.ph .chip,.peace>.ph .chip{top:auto;bottom:14px;left:auto;right:14px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,32,30,.28) 0%,rgba(10,32,30,.05) 40%,rgba(8,28,26,.62) 100%);z-index:2}
.hero-content{position:relative;z-index:4;width:100%;max-width:1320px;margin:0 auto;padding:0 32px 84px;color:#fff;display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:end}
.hero-content.solo{grid-template-columns:1fr}
.hero h1{color:#fff;max-width:15ch}
.hero-content.solo h1{max-width:22ch}
.hero .eyebrow{color:#dcefe0}
.hero .eyebrow::before{background:var(--gold)}
.hero p.lead{color:rgba(255,255,255,.85);margin:26px 0 34px;max-width:52ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-quiet,.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .crumbs,.hero .crumbs a,.hero .crumbs span{color:rgba(255,255,255,.72)}
.hero .crumbs{margin-bottom:14px}

/* live ticker — refined signature */
.ticker{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);border-radius:18px;padding:22px 24px;color:#fff;max-width:360px;justify-self:end}
.ticker .t-head{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;margin-bottom:10px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;letter-spacing:.08em;color:#d8f3e2}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#9fd65e;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(159,214,94,.55)}70%{box-shadow:0 0 0 9px rgba(159,214,94,0)}100%{box-shadow:0 0 0 0 rgba(159,214,94,0)}}
.t-line{font-size:.9rem;min-height:3.2em;color:rgba(255,255,255,.92)}
.t-line b{color:#fff}
.t-sub{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:8px}

/* ---------- trust strip ---------- */
.strip{border-bottom:1px solid var(--line);background:var(--paper)}
.strip .container{display:flex;justify-content:space-between;gap:20px;padding-top:26px;padding-bottom:26px;flex-wrap:wrap;align-items:center}
.strip span{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--char2);display:inline-flex;gap:9px;align-items:center}
.strip i{color:var(--green);font-style:normal}
.trust-row{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:26px}
.trust-row span{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.82);display:inline-flex;gap:8px;align-items:center;text-transform:uppercase}
.trust-row .tick{color:#9fd65e;font-style:normal}
section .trust-row span{color:var(--char2)}
section .trust-row .tick{color:var(--green)}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.78rem;color:var(--char2);display:flex;gap:9px;flex-wrap:wrap;align-items:center;letter-spacing:.02em}
.crumbs a{color:var(--char2)}
.crumbs a:hover{color:var(--teal-deep)}
.crumb-bar{border-bottom:1px solid var(--line);padding:18px 0}

/* ---------- editorial split ---------- */
.split,.feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split-wide{grid-template-columns:1.1fr .9fr;gap:70px}
.statement{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.45;font-weight:400;color:var(--char);max-width:30ch;margin-top:26px}
h2+.statement,h1+.statement{margin-top:28px}
.statement em{font-style:italic;color:var(--teal-deep)}

/* ---------- quick answer (AEO block — restyled, gold edge kept) ---------- */
.qa-box{background:#fff;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r);padding:40px 44px;max-width:74ch}
.qa-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.qa-box p{color:var(--char);font-size:1.04rem}

/* ---------- services — minimal editorial list ---------- */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:70px 1fr 2fr auto;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:background .3s;border-radius:12px;color:inherit}
.svc-row:hover{background:var(--cream);text-decoration:none}
.svc-row .n{font-family:var(--display);color:#b9b5aa;font-size:1rem}
.svc-row h3{font-size:1.34rem;font-weight:500}
.svc-row p{font-size:.95rem;max-width:52ch}
.svc-row .go{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--teal-deep);transition:all .3s;flex:none}
.svc-row:hover .go{background:var(--teal-ink);color:#fff;border-color:var(--teal-ink);transform:translateX(4px)}

/* ---------- triptych ---------- */
.trip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}

/* ---------- dashboard card (one per page max) ---------- */
.app-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.dash,.app-card{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:30px;max-width:440px}
.dash .d-head,.app-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:14px}
.dash .d-head b,.app-head b{font-size:.95rem}
.dash .live,.app-card .live{color:var(--teal-deep)}
.vital{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #f0eee8;font-size:.92rem;color:var(--char2);gap:14px}
.vital b{color:var(--teal-ink);font-size:1rem;text-align:right}
.vital:last-of-type{border-bottom:0}
.bar{height:6px;border-radius:99px;background:#eef0ea;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--green));width:0;transition:width 1.6s var(--ease)}
.app-note{font-size:.78rem;margin-top:16px}
/* quiet device frame for the 9:16 screen-recording slot */
.phone{max-width:300px;margin:0 auto;padding:12px;background:#fff;border:1px solid var(--line);border-radius:40px;box-shadow:var(--shadow)}
.phone .ph{border-radius:30px}
.phone+.ph-cap{max-width:340px;margin-left:auto;margin-right:auto;text-align:center}

/* ---------- remote reach ---------- */
.remote{background:var(--cream)}
.remote-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.mini-phs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.pill-soft,.pill{display:inline-block;font-size:.78rem;font-weight:700;background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:99px;color:var(--char2);margin:4px 4px 0 0}
.pill-row{display:flex;flex-wrap:wrap;gap:0;margin-top:24px}

/* ---------- peace band ---------- */
.peace{position:relative;padding:0;height:66vh;min-height:480px;display:flex;align-items:center;overflow:hidden}
.peace .ph{position:absolute;inset:0;border-radius:0}
.peace .ph-art{background:radial-gradient(110% 90% at 80% 30%,#7a9a6b 0%,transparent 55%),linear-gradient(150deg,#0f3b39 0%,#20605c 55%,#57876f 100%)}
.peace::after{content:"";position:absolute;inset:0;background:rgba(8,30,28,.45);z-index:2}
.peace .container{position:relative;z-index:3;color:#fff}
.peace .serif{font-size:clamp(1.9rem,4vw,3.1rem);max-width:22ch;color:#fff;line-height:1.3;font-weight:400}
.peace .sub{color:rgba(255,255,255,.75);margin-top:18px;font-size:1rem;max-width:60ch}
.peace .attrib{font-size:.86rem;color:rgba(255,255,255,.58);margin-top:14px}

/* ---------- calm steps ---------- */
.calm-steps,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);counter-reset:cs}
.steps,.calm-steps.four{grid-template-columns:repeat(4,1fr)}
.calm-step,.step{padding:44px 36px 44px 0;border-bottom:1px solid var(--line)}
.calm-step+.calm-step,.step+.step{padding-left:36px;border-left:1px solid var(--line)}
.calm-step::before,.step::before{counter-increment:cs;content:"0" counter(cs);font-family:var(--display);color:var(--gold);font-size:1rem;letter-spacing:.1em;display:block;margin-bottom:14px}
.calm-step h3,.step h3{font-weight:500;font-size:1.25rem;margin-bottom:10px}
.calm-step p,.step p{font-size:.95rem}

/* ---------- inline stats — no boxes ---------- */
.stats{display:flex;flex-wrap:wrap;gap:64px;margin-top:50px;border-top:1px solid var(--line);padding-top:44px}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.1rem,4vw,3rem);font-weight:400;color:var(--teal-ink);line-height:1}
.stat span{display:block;font-size:.82rem;color:var(--char2);margin-top:10px;max-width:20ch}

/* ---------- ruled editorial cards (replaces v1 boxed card grid) ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px}
.card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:34px 0 0;margin-top:44px}
.card .icon{display:block;font-size:1.4rem;margin-bottom:14px;filter:saturate(.85)}
.card h3{font-weight:600;font-size:1.16rem;margin-bottom:10px}
.card p{font-size:.95rem}
.card p+p{margin-top:10px}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--teal-deep)}
.more::after{content:"→";transition:transform .3s var(--ease)}
.more:hover{text-decoration:none}
.more:hover::after{transform:translateX(4px)}
.card.quote{border-top-color:var(--gold)}
.card.quote h3{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.35}

/* ---------- tier cards ---------- */
.tier{border-top:1px solid var(--line);padding-top:28px;margin-top:0}
.tier.mid{border-top-color:var(--teal)}
.tier.top{border-top-color:var(--gold)}
.tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--char2);margin-bottom:12px}
.tier.mid .tag{color:var(--teal-deep)}
.tier.top .tag{color:var(--gold)}

/* ---------- check list — thin ✓ discs ---------- */
.check-list{list-style:none;margin-top:30px}
.check-list li{position:relative;padding:0 0 22px 44px;font-size:1rem;color:var(--char2)}
.check-list li::before{content:"✓";position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--teal-deep);font-size:.72rem;display:flex;align-items:center;justify-content:center;background:#fff}
.check-list li b{color:var(--char);font-weight:700}

/* ---------- notice ---------- */
.notice{border-top:1px solid var(--gold);background:transparent;padding:26px 0 0;margin-top:44px;font-size:.95rem;color:var(--char2);max-width:78ch}

/* ---------- FAQ — thin ruled accordions ---------- */
.faq-item{border-bottom:1px solid var(--line);padding:0}
.faq-item summary{cursor:pointer;list-style:none;padding:28px 40px 28px 0;font-family:var(--display);font-size:1.16rem;font-weight:500;color:var(--char);position:relative;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:26px;font-family:'Manrope',sans-serif;font-size:1.3rem;font-weight:400;color:var(--teal-deep);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--teal-deep)}
.faq-item .fa{padding:0 60px 30px 0;font-size:1rem;color:var(--char2)}

/* ---------- CTA panel — solid deep teal, centered ---------- */
.cta,.cta-band{background:var(--teal-ink);border-radius:32px;padding:90px 70px;color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before,.cta-band::before{content:"";position:absolute;inset:-40%;background:radial-gradient(60% 50% at 50% 0%,rgba(136,182,63,.25),transparent 70%)}
.cta h2,.cta-band h2{color:#fff;position:relative;max-width:26ch;margin:0 auto}
.cta p,.cta-band p{color:rgba(255,255,255,.78);max-width:52ch;margin:18px auto 0;position:relative}
.cta-band .btn,.cta .btn{position:relative;margin-top:34px}
.cta .sub,.cta-band .sub{font-size:.8rem;color:rgba(255,255,255,.55);margin-top:18px;position:relative}
.cta-band .sub a,.cta-band .sub button{color:#fff}

/* ---------- locations ---------- */
.zone{margin-top:70px}
.zone h3{font-family:var(--display);font-weight:500;font-size:1.5rem;padding-bottom:18px;border-bottom:1px solid var(--line)}
.state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
.state{border-bottom:1px solid var(--line);padding:26px 0}
.state b{display:block;font-family:var(--display);font-weight:500;font-size:1.08rem;color:var(--char);margin-bottom:6px}
.state span,.state p{font-size:.88rem;color:var(--char2)}
.zone .ph{margin:34px 0 8px}
.zone h3 small{font-family:'Manrope',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--char2);margin-left:12px}

/* ---------- marquee (services hub only · 60s) ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:70px}
.marquee-track{display:flex;gap:52px;width:max-content;animation:slide 60s linear infinite}
.marquee-track span{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--char2);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- comparison / admin table ---------- */
table.cmp{width:100%;border-collapse:collapse;margin-top:34px;font-size:.92rem}
table.cmp th,table.cmp td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp th{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--char2)}
table.cmp tbody tr:hover{background:var(--cream)}

/* ---------- footer ---------- */
footer{padding:90px 0 40px;border-top:1px solid var(--line);color:var(--char2);font-size:.9rem;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:52px}
.foot-grid h4{font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--char);margin-bottom:20px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:11px}
.foot-grid a{display:block;color:var(--char2);font-size:.9rem;margin-bottom:11px}
.foot-grid a.btn{display:inline-flex;margin-bottom:0}
.foot-grid a:hover{color:var(--teal-deep)}
.foot-logo{display:block;width:212px;height:auto;margin:-6px 0 22px -6px}
.nap{font-style:normal;line-height:1.9}
.nap b{color:var(--char);font-family:var(--display);font-weight:500;font-size:1.05rem;display:block;margin-bottom:10px}
.foot-note{margin-top:60px;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.82rem}
.foot .serif,.foot-note .serif{color:var(--char)}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}

/* ---------- reveal + stagger ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}.stagger.in>*:nth-child(2){transition-delay:.15s}
.stagger.in>*:nth-child(3){transition-delay:.25s}.stagger.in>*:nth-child(4){transition-delay:.35s}
.stagger.in>*:nth-child(5){transition-delay:.45s}.stagger.in>*:nth-child(6){transition-delay:.55s}

/* ---------- media labels off in production ---------- */
body.no-media-labels .ph .chip,body.no-media-labels .ph-cap{display:none}

@media(max-width:980px){
 .hero-content,.split,.feature,.app-wrap,.remote-grid,.split-wide{grid-template-columns:1fr}
 .split,.feature{gap:44px}
 .ticker{justify-self:start}
 .trip{grid-template-columns:1fr}
 .calm-steps,.steps{grid-template-columns:1fr}
 .calm-step+.calm-step,.step+.step{padding-left:0;border-left:0}
 .calm-step,.step{padding-right:0}
 .svc-row{grid-template-columns:40px 1fr auto;grid-template-rows:auto auto}
 .svc-row p{grid-column:2/4}
 .nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:rgba(253,252,250,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:14px 24px 22px}
 .nav ul.open{display:flex}
 .nav ul a,.nav.on-hero ul a{color:var(--char2)}
 .nav.on-hero .btn-wa{background:var(--teal-ink);color:#fff}
 .nav ul .btn{justify-content:center;margin-top:10px}
 .menu-btn{display:inline-block}
 section{padding:80px 0}
 .cta,.cta-band{padding:60px 30px}
 .grid-2,.grid-3,.grid-4,.state-grid{grid-template-columns:1fr;gap:0}
 .mini-phs{grid-template-columns:1fr}
 .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
 .stats{gap:40px}
 .qa-box{padding:32px 28px}
 .hero.hero-inner,.hero.hero-short{height:auto;min-height:520px;padding-top:120px}
}
@media(max-width:620px){
 .container{padding:0 22px}
 .hero-content{padding:0 22px 60px}
 .foot-grid{grid-template-columns:1fr}
 .stats{flex-direction:column;gap:34px}
 .faq-item .fa{padding-right:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.stagger>*{opacity:1;transform:none}}

/* =========================================================
   v3 — LIFE LAYER
   Real photography treatment · richer motion · concierge
   personality. Additive over Quiet Sanctuary; same easing,
   same restraint. Nothing bounces, nothing spins.
========================================================= */

/* ---------- real media replaces placeholder chrome ---------- */
.ph-live{background:var(--mist)}
.ph-live::after{display:none}          /* no shimmer across a real photograph */
.ph-live .ph-art,.ph-live .ghost{display:none}
.ph-live img,.ph-live video{will-change:transform}

/* a whisper of warmth so every frame sits inside the brand */
.ph-live img{filter:saturate(1.03) contrast(1.02)}

/* ---------- curtain reveal for in-flow photography ---------- */
.js .ph-live.r-4x5,.js .ph-live.r-3x4,.js .ph-live.r-16x11,
.js .ph-live.r-16x9,.js .ph-live.r-21x9,.js .ph-live.r-9x16{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--ease)}
.ph-live.seen{clip-path:inset(0 0 0 0)}
.js .ph-live.r-4x5 img,.js .ph-live.r-3x4 img,.js .ph-live.r-16x11 img,
.js .ph-live.r-16x9 img,.js .ph-live.r-21x9 img,.js .ph-live.r-9x16 img{
  transform:scale(1.14);transition:transform 1.6s var(--ease)}
.ph-live.seen img{transform:scale(1)}

/* hover — the photograph leans in, never jumps */
.split .ph-live,.trip .ph-live,.mini-phs .ph-live{cursor:default}
.split .ph-live.seen:hover img,
.trip .ph-live.seen:hover img,
.mini-phs .ph-live.seen:hover img{transform:scale(1.05)}

/* ---------- hero + peace band: slow ken-burns on the still ---------- */
.hero .ph-live img{animation:heroKen 30s ease-in-out infinite alternate}
.peace .ph-live img{animation:heroKen 38s ease-in-out infinite alternate}
@keyframes heroKen{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.6%,-1.9%,0)}}

/* ---------- hero headline: word-by-word rise ---------- */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);
  transition:transform .95s var(--ease)}
.hero.lit h1 .w i{transform:none}

/* the rest of the hero follows the headline up.
   Scoped to .js so the hero is never blank without JavaScript. */
.js .hero .eyebrow,.js .hero p.lead,.js .hero .hero-ctas,
.js .hero .trust-row,.js .hero .crumbs,.js .hero .ticker{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.lit .eyebrow,.hero.lit p.lead,.hero.lit .hero-ctas,
.hero.lit .trust-row,.hero.lit .crumbs,.hero.lit .ticker{opacity:1;transform:none}
.hero.lit .crumbs{transition-delay:.05s}
.hero.lit .eyebrow{transition-delay:.12s}
.hero.lit p.lead{transition-delay:.42s}
.hero.lit .hero-ctas{transition-delay:.52s}
.hero.lit .trust-row{transition-delay:.62s}
.hero.lit .ticker{transition-delay:.72s}

/* ---------- scroll progress hairline ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:95;
  background:linear-gradient(90deg,var(--teal),var(--green));
  transform:scaleX(0);transform-origin:0 50%}

/* ---------- nav: steps aside on the way down, returns on the way up ---------- */
.nav{transform:translateY(0);transition:background .4s,border .4s,transform .55s var(--ease)}
.nav.tucked{transform:translateY(-104%)}

/* ---------- buttons: magnetic pull ---------- */
.btn{will-change:transform}
.btn-wa::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(60% 120% at 50% 120%,rgba(136,182,63,.45),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease)}
.btn-wa{position:relative;overflow:hidden;isolation:isolate}
.btn-wa>*{position:relative;z-index:1}
.btn-wa:hover::after{opacity:1}

/* ---------- service rows: a warm sweep, a living numeral ---------- */
.svc-row{position:relative;isolation:isolate}
.svc-row::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;
  background:linear-gradient(90deg,var(--mist) 0%,rgba(232,242,241,.25) 60%,transparent 100%);
  transform:translateX(-101%);transition:transform .8s var(--ease)}
.svc-row:hover::before{transform:none}
.svc-row:hover{background:transparent}
.svc-row .n{transition:color .5s var(--ease),transform .5s var(--ease)}
.svc-row:hover .n{color:var(--teal);transform:translateX(4px)}
.svc-row h3{transition:transform .5s var(--ease)}
.svc-row:hover h3{transform:translateX(4px)}

/* ---------- dashboard card: breathes on approach ---------- */
.app-card{transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.app-card:hover{transform:translateY(-6px);box-shadow:0 34px 74px rgba(12,77,75,.14)}

/* ---------- progressive disclosure: the 37 territories ---------- */
.pill-wrap.folded .pill-soft:nth-of-type(n+13),
.pill-wrap.folded .pill:nth-of-type(n+13){display:none}
.pill-toggle{margin-top:18px;background:none;border:0;cursor:pointer;padding:0;
  font-family:'Manrope',sans-serif;font-size:.84rem;font-weight:700;color:var(--teal-deep);
  letter-spacing:.02em;border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:border-color .4s var(--ease),color .4s var(--ease)}
.pill-toggle:hover{border-color:var(--teal);color:var(--teal-ink)}

/* ---------- versatility band: what "concierge" actually means ---------- */
.versatile{background:var(--teal-ink);color:#fff;padding:78px 0;overflow:hidden;position:relative}
.versatile::before{content:"";position:absolute;inset:-40%;
  background:radial-gradient(50% 40% at 50% 0%,rgba(136,182,63,.22),transparent 70%)}
.versatile .container{position:relative;z-index:1}
.versatile .eyebrow{color:#bfe6df}
.versatile .eyebrow::before{background:var(--gold)}
.versatile h2{color:#fff;max-width:24ch}
.versatile p.lead{color:rgba(255,255,255,.78);margin-top:18px}
.vmar{margin-top:44px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vmar-track{display:flex;gap:18px;width:max-content;animation:slide 46s linear infinite}
.vmar:hover .vmar-track{animation-play-state:paused}
.vmar-track span{white-space:nowrap;font-size:.86rem;font-weight:600;
  padding:12px 22px;border-radius:99px;border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);background:rgba(255,255,255,.05);
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.vmar-track span:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.vmar-track span b{color:var(--gold);font-weight:700;margin-right:9px}
.vmar+.vmar .vmar-track{animation-duration:58s;animation-direction:reverse}

/* ---------- statement: gold rule draws itself ---------- */
.statement{position:relative;padding-left:26px}
.statement::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .9s var(--ease)}
.rv.in .statement::before,.statement.in::before{transform:scaleY(1)}

/* ---------- reduced motion always wins ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.stagger>*{opacity:1;transform:none}
  .ph-live,.ph-live.seen{clip-path:none}
  .ph-live img{transform:none!important}
  .hero h1 .w i{transform:none}
  .hero .eyebrow,.hero p.lead,.hero .hero-ctas,
  .hero .trust-row,.hero .crumbs,.hero .ticker{opacity:1;transform:none}
  .nav.tucked{transform:none}
  .progress{display:none}
}

/* =========================================================
   v4 — ROOM TO BREATHE  +  THE LOVE LAYER
   Three moves, in this order:
     SPACE  — every rhythm opened up; nothing is crowded.
     LOVE   — warmth in the paper, warmth around every photograph.
     MOTION — blocks 16–21. Slow, generous, never showy.
   Same easing as v2/v3. Nothing bounces. Nothing spins.
========================================================= */

/* ---------------------------------------------------------
   SPACE — the single most luxurious material we have
--------------------------------------------------------- */
:root{--r:26px}

section{padding:148px 0}
.container{padding:0 40px}

.split,.feature{gap:96px}
.split-wide{gap:84px}
.trip{gap:34px}
.app-wrap{gap:96px}

.hero-content{padding:0 40px 100px;gap:52px}
.peace{height:72vh;min-height:520px}

.statement{margin-top:34px;padding-left:32px}
.qa-box{padding:52px 56px}
.calm-step,.step{padding:56px 44px 56px 0}
.calm-step+.calm-step,.step+.step{padding-left:44px}

.stats{gap:76px;margin-top:64px;padding-top:56px}
.grid-2{gap:0 72px}
.grid-3{gap:0 60px}
.grid-4{gap:0 48px}
.card{padding:40px 0 0;margin-top:56px}

.zone{margin-top:88px}
.marquee{margin-top:88px;padding:26px 0}
.cta,.cta-band{padding:112px 80px}
footer{padding:112px 0 48px}
.foot-note{margin-top:72px;padding-top:32px;align-items:center}

@media(max-width:980px){
  section{padding:96px 0}
  .split,.feature{gap:56px}
  .app-wrap{gap:56px}
  .cta,.cta-band{padding:68px 34px}
  .qa-box{padding:38px 32px}
  .calm-step,.step{padding:44px 0}
  .calm-step+.calm-step,.step+.step{padding-left:0}
  .stats{gap:48px}
  footer{padding:88px 0 40px}
}

/* ---------------------------------------------------------
   LOVE — warmth you feel before you can name it
--------------------------------------------------------- */

/* a barely-there wash of morning light over the whole page */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(80% 55% at 12% 0%,rgba(201,162,75,.055),transparent 60%),
    radial-gradient(70% 50% at 92% 18%,rgba(32,179,176,.05),transparent 62%),
    radial-gradient(90% 60% at 50% 100%,rgba(136,182,63,.04),transparent 60%)}

/* cream sections warm instead of sitting flat */
.section-alt{background:
  linear-gradient(178deg,var(--cream) 0%,#f9f7f1 46%,var(--cream) 100%)}

/* every photograph is matted like a print: a hairline of light on the
   edge, a warm shadow beneath. It stops looking pasted-on. */
.ph-live{box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.55),
  0 26px 58px -22px rgba(74,54,22,.28)}
.hero .ph-live,.peace .ph-live{box-shadow:none}

/* warmer grade on the imagery itself */
.ph-live img{filter:saturate(1.05) contrast(1.02) brightness(1.01)}

/* gold hairline under every section eyebrow already exists —
   here it gains a soft glow so it reads as candlelight, not a rule */
.eyebrow::before{box-shadow:0 0 8px rgba(201,162,75,.55)}

/* the footer heartbeat — the ECG line from the logo, still beating */
.pulse{display:block;flex:0 0 auto;width:190px;color:var(--teal)}
.pulse svg{display:block;width:100%;height:20px;overflow:visible}
.pulse path{fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.js .pulse path{stroke-dasharray:52 420;stroke-dashoffset:472;
  animation:beat 4.6s linear infinite}
@keyframes beat{to{stroke-dashoffset:0}}

/* ---------------------------------------------------------
   MOTION v4
--------------------------------------------------------- */

/* 16 — departures. Leaving a page, cream closes softly over it, so the
   next page opens instead of snapping into place. Deliberately NOT an
   entry veil: nothing is allowed to sit in front of the hero poster,
   because that poster is the LCP frame. */
.veil{position:fixed;inset:0;z-index:200;pointer-events:none;
  background:var(--cream);opacity:0;transition:opacity .36s var(--ease)}
.veil.up{opacity:1}

/* 17 — quiet lines rise word by word, the way someone speaks them */
.js .wr .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.08em}
.js .wr .w i{display:inline-block;font-style:normal;transform:translateY(115%);
  transition:transform 1s var(--ease)}
.wr.lit .w i{transform:none}

/* 18 — content photography keeps breathing after it lands.
   transform = ken-burns · translate = scroll drift · scale = hover.
   Three independent properties, so none of them fight. */
.ph-live.settled img{animation:contentKen 46s ease-in-out infinite alternate;
  transition:scale .9s var(--ease),filter .9s var(--ease)}
.ph-live.settled:nth-of-type(even) img{animation-duration:58s;
  animation-direction:alternate-reverse}
@keyframes contentKen{
  from{transform:scale(1)}
  to{transform:scale(1.075) translate3d(-1.2%,-1.4%,0)}}
.split .ph-live.settled:hover img,
.trip .ph-live.settled:hover img,
.mini-phs .ph-live.settled:hover img,
.zone .ph-live.settled:hover img{scale:1.035}

/* 19 — warm light follows the cursor across the dark bands */
.bloom{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity 1.1s var(--ease);
  background:radial-gradient(340px 340px at var(--bx,50%) var(--by,50%),
    rgba(201,162,75,.20),rgba(201,162,75,.07) 42%,transparent 70%)}
.bloom.on{opacity:1}
.hero .bloom{z-index:3}
.peace .bloom{z-index:3}
.cta .bloom,.cta-band .bloom,.versatile .bloom{z-index:0}

/* 20 — the gold rule draws itself in */
.js .eyebrow::before{width:0;transition:width 1s var(--ease) .1s}
.eyebrow.drawn::before{width:34px}

/* 21 — the footer heartbeat (styles live in the LOVE block above,
   the beat is pure CSS: no JavaScript needed) */

/* ---------- inside the visual editor's frame ----------
   Belt and braces: even if an overlay layer is somehow created while the
   page is framed, it must never be able to swallow a click or paint over
   the content the user is trying to edit. */
.framed .veil,.framed .bloom{display:none!important}
.framed body::before{opacity:.55}

/* ---------- reduced motion always wins (v4 additions) ---------- */
@media(prefers-reduced-motion:reduce){
  .veil{display:none}
  .js .wr .w i,.wr .w i{transform:none}
  .ph-live.settled img{animation:none}
  .bloom{display:none}
  .js .eyebrow::before,.eyebrow::before{width:34px;transition:none}
  .js .pulse path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}

/* =========================================================
   v5 — THE TOP BAR, AND ROOM AROUND IT
   The lockup, eight links and a CTA cannot share a laptop
   width without colliding. So the links step aside earlier,
   the CTA never leaves, and the hero stops sliding underneath.
========================================================= */

/* ---------- the bar itself ---------- */
.nav-inner{gap:30px;padding:16px 32px}
.brand-mark{height:46px}
.nav ul{margin-left:auto;gap:4px}
.nav ul a{padding:9px 12px}
.nav-end{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav .btn{margin-left:0}
/* the CTA stays white over photography at every width */
.nav.on-hero .btn-wa{background:#fff;color:var(--teal-ink)}

/* Below 1180px the links collapse into the menu rather than crowding the
   lockup. The WhatsApp button and the Menu button stay in the bar. */
@media(max-width:1180px){
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;margin-left:0;
    background:rgba(253,252,250,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);padding:16px 24px 24px}
  .nav ul.open{display:flex}
  .nav ul a,.nav.on-hero ul a{color:var(--char2);padding:13px 14px;font-size:.92rem}
  .nav ul a:hover{background:var(--mist);color:var(--char)}
  .menu-btn{display:inline-block}
}
@media(max-width:560px){
  .nav-inner{gap:14px;padding:14px 20px}
  .brand-mark{height:38px}
  .nav-end{gap:9px}
  .nav .btn-wa{padding:9px 14px;font-size:.76rem}
  .menu-btn{padding:8px 14px;font-size:.8rem}
}

/* ---------- the hero grows instead of hiding behind the bar ----------
   Hero content is bottom-aligned, so on a short or narrow window anything
   taller than the frame overflowed upward — straight under the top bar.
   Now the hero lengthens to fit, and reserves room for the nav. */
.hero{height:auto;min-height:92vh}
.hero-inner{height:auto;min-height:76vh}
.hero-short{height:auto;min-height:58vh}
.hero-content{padding:136px 40px 100px}
@media(max-width:980px){
  .hero-content{padding:128px 24px 72px}
  .hero.hero-inner,.hero.hero-short{min-height:520px;padding-top:0}
}

/* =========================================================
   v6 — THE CARE FEED
   The hero's live card becomes a stack of push notifications
   from the Insyt Care App. Each one drops in, settles, and
   the stack peels back to let the next one through.
========================================================= */

/* the wrapper keeps its reveal hooks but hands the glass to the cards */
.ticker{background:none;border:0;backdrop-filter:none;padding:0;
  border-radius:0;max-width:394px;width:100%;justify-self:end}

.notif-stack{position:relative;min-height:200px}

.notif{position:absolute;left:0;right:0;top:0;
  display:flex;gap:13px;align-items:flex-start;
  padding:15px 17px;border-radius:20px;color:#fff;text-align:left;
  background:rgba(26,36,34,.36);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6);
  transition:transform .85s var(--ease),opacity .85s var(--ease),
    filter .85s var(--ease)}

.notif-icon{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.34)}
.notif-icon img{display:block;width:100%;height:100%;object-fit:cover}

.notif-body{flex:1;min-width:0}
.notif-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.74)}
.notif-time{font-variant-numeric:tabular-nums;letter-spacing:.04em;
  color:rgba(255,255,255,.6);font-weight:600}
.notif-text{font-size:.95rem;line-height:1.45;margin:5px 0 0;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-place{display:block;margin-top:3px;font-size:.78rem;
  color:rgba(255,255,255,.62)}

/* depth — newest in front, the ones behind peel away downward */
.notif[data-d="0"]{transform:translateY(0) scale(1);opacity:1;z-index:4}
.notif[data-d="1"]{transform:translateY(15px) scale(.955);opacity:.52;z-index:3}
.notif[data-d="2"]{transform:translateY(28px) scale(.915);opacity:.22;z-index:2}
.notif[data-d="3"]{transform:translateY(37px) scale(.89);opacity:0;z-index:1}

/* arrival — drops from above, soft focus resolving into place */
.js .notif.arriving{transform:translateY(-32px) scale(.97);opacity:0;filter:blur(7px)}

.notif-foot{display:flex;align-items:center;gap:9px;margin-top:18px;
  font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.66)}
.live-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--green)}
.js .live-dot{animation:livePulse 2.8s var(--ease) infinite}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(136,182,63,.55)}
  70%{box-shadow:0 0 0 10px rgba(136,182,63,0)}
  100%{box-shadow:0 0 0 0 rgba(136,182,63,0)}}

@media(max-width:980px){
  .ticker{justify-self:start;max-width:392px}
  .notif-stack{min-height:186px}
}

@media(prefers-reduced-motion:reduce){
  /* one calm card, no arrivals, no pulse */
  .js .notif.arriving{transform:none;opacity:1;filter:none}
  .notif[data-d="1"],.notif[data-d="2"],.notif[data-d="3"]{display:none}
  .notif-stack{min-height:0}
  .js .live-dot{animation:none}
}

/* =========================================================
   v7 — THE MOVING TRUST BAR, AND CLOSING THE GAP
========================================================= */

/* ---------- accreditations drift past, forward only ---------- */
.strip{border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden}
.strip-mar{overflow:hidden;padding:24px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.strip-track{display:flex;width:max-content}
.js .strip-track{animation:slide 52s linear infinite}
.strip-mar:hover .strip-track{animation-play-state:paused}
/* internal gap and set padding match, so the loop point is invisible */
.strip-set{display:flex;align-items:center;gap:58px;padding-right:58px}
.strip span{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--char2);
  display:inline-flex;gap:9px;align-items:center;white-space:nowrap}
.strip i{color:var(--green);font-style:normal}

/* screen readers get the four claims once, not twelve times */
.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}

/* ---------- the numbers sit close under the bar ----------
   This band used to open with the Quick Answer box, so the stats carried a
   64px top margin on top of the full 148px section rhythm — 212px of nothing
   above the hairline. With the box gone, the band tightens up. */
.band-tight{padding:60px 0 104px}
.container>.stats:first-child{margin-top:0;padding-top:42px}

@media(max-width:980px){
  .band-tight{padding:44px 0 72px}
  .strip-mar{padding:18px 0}
  .strip-set{gap:44px;padding-right:44px}
}

@media(prefers-reduced-motion:reduce){
  /* the bar holds still and simply shows the four claims */
  .js .strip-track{animation:none}
  .strip-track{width:auto}
  .strip-set:nth-child(2){display:none}
  .strip-set{flex-wrap:wrap;gap:34px;padding:0 32px}
  .strip-mar{-webkit-mask-image:none;mask-image:none}
}

/* =========================================================
   v8 — EVERY PAGE COMFORTABLE
   The v5 hero fix used `.hero-inner` (0,1,0) but the original
   rule is `.hero.hero-inner` (0,2,0), so it lost the cascade
   and only the homepage was ever fixed. Every inner page kept
   a fixed height and pushed its own headline under the nav.
   Matching the specificity here, once and for all.
========================================================= */

.hero.hero-inner{height:auto;min-height:600px}
.hero.hero-short{height:auto;min-height:500px}

/* room for the bar above, room to breathe below */
.hero.hero-inner .hero-content{padding-top:140px;padding-bottom:92px}
.hero.hero-short .hero-content{padding-top:136px;padding-bottom:80px}

/* the crumb trail is the first thing in the frame; give it air */
.hero .crumbs{margin-bottom:20px}

@media(max-width:1180px){
  /* the bar is taller here (logo + CTA + Menu on one line) */
  .hero.hero-inner .hero-content,.hero.hero-short .hero-content{padding-top:132px}
}
@media(max-width:980px){
  .hero.hero-inner,.hero.hero-short{min-height:480px;padding-top:0}
  .hero.hero-inner .hero-content,.hero.hero-short .hero-content{
    padding-top:124px;padding-bottom:64px}
}
@media(max-width:620px){
  .hero.hero-inner,.hero.hero-short{min-height:440px}
  .hero.hero-inner .hero-content,.hero.hero-short .hero-content{
    padding-top:112px;padding-bottom:56px}
}

/* ---------- no band should open with a stranded top margin ----------
   Several rows carry a top margin because something used to sit above
   them. Whenever they lead their container, that margin is dead space. */
.container>.stats:first-child,
.container>.marquee:first-child,
.container>.zone:first-child,
.container>.trip:first-child{margin-top:0}

/* ============================================================
   v9 — NO DOUBLE PADDING AT THE FOOT OF EVERY PAGE
   Measured across all 15 pages: 434px of dead space above every
   closing CTA heading, and 341px above every footer. Cause was
   additive, not accidental — the closing panel already carries
   112px of its own air, and it sat inside a section carrying a
   further 148px top AND bottom. The panel supplies the breathing
   room; the section only has to seat it.
   Target is the site's own band rhythm (~270px content-to-content),
   not a tighter page.
   Specificity note: `.cta-sec` (0,1,0) beats `section` (0,0,1) at
   every breakpoint, and `.cta,.cta-band` here matches the earlier
   rule's form exactly so it wins on order.
   ============================================================ */
.cta-sec{padding:56px 0 64px}
.cta,.cta-band{padding:96px 80px}

/* Section padding is the air between bands; nothing inside a band
   may stack its own top margin on top of it. */
.container>*:first-child{margin-top:0}

/* ============================================================
   v10 — THE PHOTOGRAPHS WERE THERE ALL ALONG
   Every in-flow photograph on the site was invisible. Not
   missing, not a bad path: clipped 100% away and never revealed.

     .js .ph-live.r-4x5{clip-path:inset(0 0 100% 0)}   0,3,0  won
     .ph-live.seen     {clip-path:inset(0 0 0 0)}      0,2,0  lost

   So .seen could never open the curtain, and because the image
   was fully clipped the browser never even decoded it
   (naturalWidth stayed 0). The hero and the peace band escaped
   only because full-bleed slots are rendered without a ratio
   class, so the clipping selector never matched them.

   Reduced-motion visitors were hit too: its `clip-path:none`
   was also written at 0,2,0 and lost the same way.

   Both are restated below at a specificity that actually wins.
   This is the third bug of exactly this shape in this stylesheet
   (hero height, inner-page hero, now photography) — the `.js`
   prefix silently adds a class to the left-hand side, so ANY
   override of a `.js`-scoped rule needs the `.js` prefix too.
   ============================================================ */
.js .ph-live.r-4x5.seen,.js .ph-live.r-3x4.seen,.js .ph-live.r-16x11.seen,
.js .ph-live.r-16x9.seen,.js .ph-live.r-21x9.seen,.js .ph-live.r-9x16.seen{
  clip-path:inset(0 0 0 0)}
.js .ph-live.r-4x5.seen img,.js .ph-live.r-3x4.seen img,.js .ph-live.r-16x11.seen img,
.js .ph-live.r-16x9.seen img,.js .ph-live.r-21x9.seen img,.js .ph-live.r-9x16.seen img{
  transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .js .ph-live.r-4x5,.js .ph-live.r-3x4,.js .ph-live.r-16x11,
  .js .ph-live.r-16x9,.js .ph-live.r-21x9,.js .ph-live.r-9x16,
  .js .ph-live.r-4x5.seen,.js .ph-live.r-3x4.seen,.js .ph-live.r-16x11.seen,
  .js .ph-live.r-16x9.seen,.js .ph-live.r-21x9.seen,.js .ph-live.r-9x16.seen{
    clip-path:none}
}

/* ============================================================
   v11 — THE PHOTOGRAPH THAT CROSSES THE PAGE
   The peace band on the homepage is the one photograph on this
   site that runs edge to edge, and it is the one the client
   pointed at. So the photograph above every page's FAQ now does
   the same thing.

   Proportions are borrowed from .peace on purpose. A band much
   wider than ~2.2:1 starts slicing heads and hands off these
   frames; object-position sits slightly above centre because in
   almost every one of these photographs the faces are in the
   upper-middle of the frame and the hands just below it.

   No scrim: .peace darkens its photograph by 45% because there
   is white text over it. There is no text here, so the
   photograph is left alone. No radius, no shadow — a band, not
   a card.
   ============================================================ */
/* height matched to .peace (72vh/520 after the v4 override) so the band
   the client pointed at and these bands read as the same device. At 62vh
   it measured 2.58:1 on a laptop, wide enough to start clipping faces. */
.bleed-band{position:relative;padding:0;height:70vh;min-height:480px;max-height:760px;
  overflow:hidden;background:var(--mist)}
.bleed-band .ph{position:absolute;inset:0;border-radius:0;box-shadow:none}
.bleed-band .ph img,.bleed-band .ph video{object-position:50% 44%}
.bleed-band .ph-art{background:radial-gradient(110% 90% at 80% 30%,#7a9a6b 0%,transparent 55%),
  linear-gradient(150deg,#0f3b39 0%,#20605c 55%,#57876f 100%)}

@media(max-width:980px){
  .bleed-band{height:52vh;min-height:380px}
}
@media(max-width:620px){
  /* a wide crop of a portrait subject is unkind on a phone —
     give the band back some height rather than slicing the frame */
  .bleed-band{height:46vh;min-height:320px;max-height:440px}
}

/* ============================================================
   v12 — TYPEFACE MATCHED TO THE LIVE SITE
   The live insytfamilycare.ng runs Wix Madefor Display for every
   heading (weight 600) and Manrope for body copy. Manrope was
   already the body face here, so only the display face changed:
   Fraunces, a serif, out — Wix Madefor Display, a sans, in.

   A sans is NOT a drop-in for a serif at the same settings.
   Fraunces was set at weight 500 with -.015em tracking, which is
   right for a high-contrast serif and leaves a geometric sans
   looking underweight and loose. Three corrections, matched to
   what the live site actually specifies:

     weight 500 → 600   (the live site's h1–h6 weight)
     tracking -.015em → -.022em on the largest sizes
     line-height 1.14 → 1.18  (a sans needs slightly more air;
                               the live site uses 1.3, which is
                               too loose for display sizes here)

   Everything that was italic-serif in spirit — the pull quotes,
   the peace band, the statement paragraphs — is now regular
   weight sans, which reads calmer rather than more corporate.
   ============================================================ */
h1,h2,h3,.serif{font-weight:600;line-height:1.18}
h1{letter-spacing:-.022em}
h2{letter-spacing:-.02em}
h3{font-weight:600;letter-spacing:-.012em}

/* display-set quotes and statements: keep them light. At 600 they
   shout; the whole point of these blocks is that they murmur. */
.statement,.card.quote h3,.peace .serif{font-weight:400;letter-spacing:-.012em}
.peace .serif{line-height:1.32}

/* the numerals — step counters, stat figures, service row numbers.
   Fraunces gave these an old-style, engraved feel at weight 400.
   Wix Madefor needs 600 and open tracking to read as deliberate
   rather than as an accident of the body font. */
.calm-step::before,.step::before{font-weight:700;letter-spacing:.14em}
.stat b{font-weight:600;letter-spacing:-.018em}
.svc-row .n{font-weight:600;letter-spacing:.04em}
.ph .ghost{font-weight:700;letter-spacing:-.02em}

/* FAQ questions and the small display labels */
.faq-item summary{font-weight:600;letter-spacing:-.008em}
.zone h3,.state b,.nap b{font-weight:600;letter-spacing:-.01em}
.foot-grid h4{font-weight:700}

/* ============================================================
   v12b — THE FOUR-STEP BAND NEVER COLLAPSED ON A PHONE
   Found while checking the new typeface for overflow. Not caused
   by it — the wider sans merely made a pre-existing bug visible.

   .steps,.calm-steps.four{grid-template-columns:repeat(4,1fr)}
   scores 0,2,0. The mobile collapse
     @media(max-width:980px){.calm-steps,.steps{...:1fr}}
   scores only 0,1,0, so it lost — and the four-item bands stayed
   four columns wide at 390px. Each cell became ~87px, the text
   inside spilled past the viewport, and the page scrolled
   sideways on /, /diaspora/ and /locations/.

   THE FOURTH BUG OF THIS EXACT SHAPE in this stylesheet (hero
   height · inner-page hero · photography curtain · now this).
   The rule stands: before writing an override, grep the original
   selector and match its specificity.
   ============================================================ */
@media(max-width:980px){
  .steps,.calm-steps.four{grid-template-columns:1fr}
}

/* ============================================================
   v13 (revised in v14) — HOW A SEGMENT IS INTRODUCED
   The original design was a gold dash followed by wide-tracked
   caps:

       ——— CONCIERGE HOME HEALTHCARE · NIGERIA-WIDE

   The dash is gone, per the client. A numbered chapter mark was
   tried next (01 / 02 / 03 above each label) and rejected: the
   client wants the text standing alone, larger, and in a
   different voice.

   So the label now carries itself. No ornament of any kind — no
   dash, no numeral, no rule, no dot. Instead the label is
   promoted from small wide-tracked caps into a legible line in
   the display face:

     · the DISPLAY face, not the body face — it now belongs to
       the heading it introduces rather than floating above it
     · roughly TWICE the old size (.72rem → 1.32rem fluid)
     · sentence case, NOT uppercase — caps at this size shout,
       and shouting is the opposite of this brand
     · tracking reset to near zero; the .22em spacing existed
       only to make tiny caps readable and is wrong at this size
     · gold, so it still reads as a label and not as a second
       heading competing with the h2 below it

   The result is a quiet italic-feeling overline: a spoken phrase
   introducing the section, not a tag stuck to it.
   ============================================================ */

.eyebrow{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.12rem,1.6vw,1.32rem);
  font-weight:500;
  letter-spacing:-.004em;
  line-height:1.34;
  text-transform:none;                 /* was uppercase */
  color:var(--gold);
  margin-bottom:18px;
  max-width:44ch
}

/* NO ORNAMENT. Both pseudo-elements are emptied rather than
   hidden, so neither the old gold dash nor the numbered chapter
   mark can come back, and the motion code that used to animate
   them has nothing to act on. */
.eyebrow::before,.eyebrow::after{content:none!important;display:none!important}

/* on dark grounds the label must lift off the photograph.
   Gold at this size on a dark image goes muddy, so the hero and
   the other dark bands use a warm off-white instead. */
.hero .eyebrow{color:#eaf5ee;font-weight:500}
.versatile .eyebrow{color:#e4f3ee}
.peace .eyebrow{color:#eaf5ee}
.cta .eyebrow,.cta-band .eyebrow{color:#f0e2bf}

@media(max-width:620px){
  .eyebrow{margin-bottom:15px;line-height:1.3}
}

/* ---- the label's arrival ------------------------------------
   ⚠ DELIBERATELY NOT GATED ON JAVASCRIPT — and now there is
   nothing left to gate. The label is real copy, so it must be
   present whether or not any script runs. motion.js block 20
   still adds .drawn on scroll-in; it is now harmless and inert,
   left in place only because the hero's own reveal sequence
   shares the selector.
   ------------------------------------------------------------- */

/* ============================================================
   v14b — THE NUMBERS ROW, WITH A FOUR-FIGURE FIGURE IN IT
   "130+" became "3,600". The row is a flex row whose cells size
   to their content, so the widest figure was pulling its own
   cell wider than the rest and leaving the short labels to wrap
   at a different point from their neighbours.

   Give every cell the same floor so the four read as a set, and
   let the label breathe to 22ch — "States, plus the Federal
   Capital Territory" is the longest and was breaking to three
   lines against its neighbours' two.
   ============================================================ */
.stat{flex:0 1 auto;min-width:9.5rem}
.stat span{max-width:22ch}

@media(max-width:620px){
  /* two up rather than one long column — the figures are short
     enough to pair, and four stacked cells is a lot of scrolling
     for what is meant to be a glance. */
  .stats{gap:34px 22px}
  .stat{flex:1 1 calc(50% - 22px);min-width:0}
  .stat span{max-width:none}
}

/* ============================================================
   v15 — CLOSER TOGETHER, AND THE LABELS IN CAPS
   Two requests:

   1. "the space between all segments is a bit too much … i would
       like a smoother view where it doesnt seem like we're done"

      That last phrase is the real brief. 148px of empty space
      between bands reads as a full stop — the visitor's eye
      finds nothing in it and concludes the page has ended. The
      whole point of scroll on a page like this is that the next
      thing should always be *pulling*.

      So the rhythm tightens by roughly a third:
          148px → 96px   (laptop and up)
           96px → 68px   (tablet)
           80px → 56px   (phone)

      That is still generous — more air than most sites ever give
      a band — but it now reads as a pause rather than a stop.
      The v4 comment above ("space, the most luxurious material")
      stands; there is simply such a thing as too much of it.

      What is NOT reduced: the container's side padding, the
      split/feature column gaps, and the internal padding of the
      CTA panel. Those are breathing room *inside* a thought.
      Only the gaps *between* thoughts are closed.

   2. "use block letters for the headings that you just changed …
       make it all caps"

      The segment labels go back to uppercase — but at the new
      larger size, not the old tiny one. Caps at 20px need their
      tracking opened again (tight tracking is for lowercase),
      and a slightly heavier weight to hold the line.
   ============================================================ */

/* ---- 1. the rhythm between bands ---- */
section{padding:96px 0}

/* the numbers band sits closer still — it belongs to the hero
   above it, not to the section below */
.band-tight{padding:44px 0 72px}

/* the closing CTA already brings its own padding (see v9), so its
   section wrapper only needs enough to separate it */
.cta-sec{padding:40px 0 52px}

@media(max-width:980px){
  section{padding:68px 0}
  .band-tight{padding:36px 0 56px}
  .cta-sec{padding:30px 0 40px}
}
@media(max-width:620px){
  section{padding:56px 0}
  .band-tight{padding:30px 0 44px}
  .cta-sec{padding:24px 0 34px}
}

/* ---- 2. the segment labels, in block capitals ---- */
.eyebrow{
  text-transform:uppercase;
  font-weight:600;
  /* caps need their space back — tight tracking is a lowercase
     device, and at this size caps set solid look like a warning
     sign rather than an invitation */
  letter-spacing:.1em;
  font-size:clamp(.98rem,1.35vw,1.12rem);
  line-height:1.42;
  margin-bottom:20px;
  max-width:38ch
}
.hero .eyebrow{letter-spacing:.13em;font-weight:600}

@media(max-width:620px){
  .eyebrow{letter-spacing:.085em;margin-bottom:16px;line-height:1.38}
}

/* ============================================================
   v17 — FASTER, AND EARLIER
   "can you make the motion a bit faster, especially for the
    images loading. if someone is scrolling fast, it looks like
    the spaces are blank"

   The diagnosis is not really speed, it is LATENESS. Two things
   were making a fast scroll land on empty space:

     1. The curtain took 1.15s to open and the ken-burns 1.6s to
        settle. At a normal scroll speed a photograph was still
        half-revealed by the time it had crossed the screen.
     2. Worse, nothing started until the image was already 18%
        into view, with a -6% bottom margin holding it back
        further. The reveal began AFTER the visitor arrived.

   So: open sooner (rootMargin in motion.js pre-loads the reveal
   before the band enters the viewport) and open quicker.

       curtain      1.15s -> 0.62s
       ken-burns    1.6s  -> 0.9s
       .rv fade     0.9s  -> 0.5s
       stagger step 0.10s -> 0.055s

   Still eased, still nothing that snaps. The site should feel
   unhurried because of its spacing and its typography, not
   because its animations are slow.
   ============================================================ */

/* the curtain */
.js .ph-live.r-4x5,.js .ph-live.r-3x4,.js .ph-live.r-16x11,
.js .ph-live.r-16x9,.js .ph-live.r-21x9,.js .ph-live.r-9x16{
  transition:clip-path .62s var(--ease)}
.js .ph-live.r-4x5 img,.js .ph-live.r-3x4 img,.js .ph-live.r-16x11 img,
.js .ph-live.r-16x9 img,.js .ph-live.r-21x9 img,.js .ph-live.r-9x16 img{
  /* a gentler starting scale too: 1.14 needed the long duration to
     look intentional, and at .9s it would read as a lurch */
  transform:scale(1.07);transition:transform .9s var(--ease)}

/* text reveals */
.rv{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stagger>*{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stagger.in>*:nth-child(1){transition-delay:.02s}
.stagger.in>*:nth-child(2){transition-delay:.075s}
.stagger.in>*:nth-child(3){transition-delay:.13s}
.stagger.in>*:nth-child(4){transition-delay:.185s}
.stagger.in>*:nth-child(5){transition-delay:.24s}
.stagger.in>*:nth-child(6){transition-delay:.295s}
.stagger.in>*:nth-child(n+7){transition-delay:.35s}

/* the full-bleed band's photograph is large; give it slightly
   more than the in-column images so it does not feel abrupt */
.bleed-band .ph-live{transition:clip-path .74s var(--ease)}

/* word-rise on section headings: tighten the per-word cascade */
.js .wr .w i{transition:transform .62s var(--ease)}

/* ============================================================
   v19 — LEGAL PAGES
   Carried over from the previous site. These are read by people
   who are worried, or by a payment gateway's compliance check,
   so the priority is legibility over beauty: a narrow measure,
   clear hierarchy, generous line height, and nothing that moves.
   ============================================================ */
.legal{max-width:74ch}
.legal-effective{font-size:.86rem;color:var(--char2);letter-spacing:.02em;
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:40px}
.legal>p{margin-bottom:20px;line-height:1.8}
.legal .legal-h{font-size:clamp(1.28rem,2vw,1.6rem);margin:46px 0 18px;
  padding-top:26px;border-top:1px solid var(--line)}
.legal .legal-h:first-of-type{margin-top:0;padding-top:0;border-top:0}

.legal-list{list-style:none;margin:0 0 24px;padding:0}
.legal-list li{position:relative;padding-left:26px;margin-bottom:12px;line-height:1.75}
.legal-list li::before{content:"";position:absolute;left:6px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* defined terms: the term carries the weight, the definition explains */
.legal-defs{margin:0 0 26px}
.legal-defs dt{font-weight:700;color:var(--char);margin-top:18px;font-size:.98rem}
.legal-defs dd{margin:6px 0 0;color:var(--char2);line-height:1.75}

.legal-contact{margin-top:52px;padding:30px 0 0;border-top:1px solid var(--gold)}
.legal-contact p{line-height:2}

.legal-nav{margin-top:54px;padding-top:32px;border-top:1px solid var(--line)}
.legal-nav a{display:inline-block;margin:0 26px 10px 0;font-weight:600;
  font-size:.95rem;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.legal-nav a:hover{border-bottom-color:var(--teal);text-decoration:none}

/* the legal rule in the footer */
.foot-legal{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:14px;width:100%}
.foot-legal a{font-size:.8rem;color:var(--char2);border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.foot-legal a:hover{color:var(--teal-deep);border-bottom-color:var(--line);text-decoration:none}

@media(max-width:620px){
  .legal-effective{margin-bottom:30px}
  .legal .legal-h{margin:34px 0 14px}
  .foot-legal{gap:0 18px}
}

/* ============================================================
   v20 — city landing pages + care guides (blog)
   ============================================================ */

/* --- city shortcut buttons on /locations/ ---------------------
   The client asked for the cities not to show outright, but to be
   clickable. So: one tidy row of buttons rather than thirty more
   headings. It sits above the zone list and adds a single line of
   height, not a new section. */
.citybtns{margin:38px 0 8px;padding:26px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.citybtns-lead{font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--char2);margin-bottom:16px}
.citybtn-row{display:flex;flex-wrap:wrap;gap:10px}
.citybtn{display:inline-block;font-size:.92rem;font-weight:600;color:var(--teal-ink);background:var(--mist);border:1px solid transparent;padding:10px 20px;border-radius:99px;text-decoration:none;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.citybtn:hover,.citybtn:focus-visible{background:#fff;border-color:var(--teal);transform:translateY(-1px)}

/* --- service links on a city page --- */
.citylinks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.citylink{display:flex;flex-direction:column;gap:3px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);text-decoration:none;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.citylink:hover,.citylink:focus-visible{border-color:var(--teal);transform:translateY(-2px)}
.citylink b{font-size:1rem;font-weight:600;color:var(--char)}
.citylink span{font-size:.86rem;color:var(--char2)}

/* --- care guides index --- */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.guide{display:block;border-top:1px solid var(--line);padding:32px 0 34px;text-decoration:none;transition:border-top-color .2s var(--ease)}
.guide:hover,.guide:focus-visible{border-top-color:var(--teal)}
.guide-cat{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:12px}
.guide h3{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.3;color:var(--char);margin-bottom:10px}
.guide:hover h3{color:var(--teal-ink)}
.guide p{font-size:.95rem;color:var(--char2);margin-bottom:14px}
.guide-meta{font-size:.82rem;color:var(--char2)}

/* --- a single guide --------------------------------------------
   Narrower measure than the rest of the site on purpose: long-form
   prose is unreadable at 1200px, and these pages are meant to be
   read, not skimmed. */
.guide-head{padding:60px 0 0}
.guide-head h1{max-width:20ch;margin:10px 0 14px}
.guide-answer{padding:34px 0 10px}
.guide-answer p{max-width:62ch;font-size:1.12rem;line-height:1.62;color:var(--char)}
.guide-body{max-width:68ch}
.guide-body p{font-size:1.02rem;line-height:1.72;margin-bottom:20px}
.guide-h{font-family:var(--display);font-weight:600;font-size:1.42rem;line-height:1.3;margin:40px 0 16px}
.guide-list{margin:0 0 24px;padding-left:0;list-style:none}
.guide-list li{position:relative;padding-left:26px;margin-bottom:12px;font-size:1.02rem;line-height:1.66}
.guide-list li:before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.guide-note{border-left:3px solid var(--gold);background:var(--cream);padding:20px 24px;border-radius:0 var(--r) var(--r) 0;margin:28px 0 30px}
.guide-note p{margin:0;font-size:.98rem;line-height:1.64}

@media(max-width:980px){
  .citylinks{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .citylinks,.guides{grid-template-columns:1fr;gap:0}
  .citybtns{margin:30px 0 4px;padding:22px 0 24px}
  .citybtn{font-size:.88rem;padding:9px 17px}
  .guide{padding:26px 0 28px}
  .guide-head{padding:44px 0 0}
  .guide-h{font-size:1.28rem;margin:32px 0 14px}
}

/* ============================================================
   v21 — app store download buttons (Care App page)
   ============================================================ */
/* Superseded by v26. The custom .store buttons used a generic glyph in
   place of the real store marks, which Apple's guidelines forbid, and
   their .stores rule would have collided with the v26 one below. Removed
   rather than left to rot — nothing in src/ references them. */

/* ============================================================
   v22 — mobile refinement
   ------------------------------------------------------------
   Measured with a real browser at 360, 375 and 390px, not eyeballed.
   Horizontal overflow was already clean at every width; the layout
   was fine. What actually made the site feel less good on a phone
   was two things the desktop view never reveals:

     1. tap targets below the ~44px a fingertip needs. The footer
        phone number was 27px tall, the menu button 36px, the form
        opener 24px. On desktop a cursor hits those precisely; on a
        phone you miss and try again.
     2. small type. Pills at 12.5px and sub-labels at 12.8px read
        fine on a 27-inch monitor and are a squint on a handset.

   Everything here is inside a mobile media query, so the desktop
   design the client already approved is untouched.
   ============================================================ */
@media(max-width:820px){
  /* --- tap targets ------------------------------------------- */
  /* Phone numbers and mail links are the highest-intent taps on the
     whole site: someone reaching for these wants help now. */
  /* The footer wrapper is .foot-grid, not .foot — an earlier pass used
     the wrong selector and the 27px phone link survived it. Verified
     against the rendered DOM this time. */
  .foot-grid a[href^="tel:"],
  .foot-grid a[href^="mailto:"],
  .foot-grid a[href^="https://wa.me"],
  .legal a[href^="tel:"],
  .legal a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;padding:4px 0
  }
  .foot-grid a{display:inline-flex;align-items:center;min-height:42px}
  .menu-btn{min-height:44px;padding:11px 20px;font-size:.92rem}
  .lead-open{min-height:44px;padding:10px 2px;font-size:1rem}
  .pill-toggle{min-height:44px;padding:11px 2px;font-size:.95rem}
  .more{display:inline-flex;align-items:center;min-height:44px}
  .brand{display:flex;align-items:center;min-height:44px}
  /* nav links in the opened mobile menu get real spacing */
  .nav ul.open a{display:flex;align-items:center;min-height:46px}
  /* footer link columns */
  .foot-nav a,.foot-legal a{display:inline-flex;align-items:center;min-height:42px}

  /* --- readable type ----------------------------------------- */
  .pill,.pill-soft{font-size:.9rem;padding:9px 17px}
  /* hero trust chips: 12.8px uppercase is a squint on a handset */
  .trust-row span{font-size:.84rem;letter-spacing:.05em}
  .trust-row{gap:14px 20px}
  .sub,p.sub{font-size:.9rem;line-height:1.55}
  .citybtns-lead{font-size:.86rem}
  /* Two more found by probing the rendered DOM rather than guessing at
     selectors. Both sit outside .trust-row, which is why the first pass
     missed them: the scrolling credential ticker, and the footer note. */
  .strip-set span{font-size:.86rem}
  .foot-note{font-size:.86rem}
  /* These four needed matching specificity, not just a later rule.
     `.cta .sub` is 0,2,0 and beat a bare `.sub`; the same trap has
     bitten this stylesheet before, so the selectors below deliberately
     mirror the originals instead of assuming source order wins. */
  .cta .sub,.cta-band .sub{font-size:.88rem}
  .stat span{font-size:.88rem}
  .dash .live,.app-card .live,.live{font-size:.78rem}
  .tag,.tier.mid .tag,.tier.top .tag{font-size:.76rem;letter-spacing:.14em}
  .app-note{font-size:.88rem;line-height:1.55}
  .guide-cat{font-size:.78rem}
  .guide-meta{font-size:.88rem}
  .tag{font-size:.78rem}
  .live{font-size:.76rem}
  .notif-time,.notif-place{font-size:.86rem}
  .notif-foot{font-size:.85rem}
  .ph-cap{font-size:.88rem;line-height:1.55}

  /* --- breathing room ---------------------------------------- */
  /* Long-form guides are read on phones more than anywhere else. */
  .guide-body p,.guide-list li{font-size:1.04rem;line-height:1.75}
  .guide-answer p{font-size:1.06rem}
  /* form fields at least 44px so they are easy to hit and do not
     trigger iOS zoom, which needs 16px to stay put */
  .lead-form input,.lead-form select,.lead-form textarea{
    min-height:46px;font-size:16px
  }
}

/* ================================================================== *
   v23 — family feedback page
   Real submitted responses, quoted verbatim. Deliberately quiet: a
   review page that shouts is a review page nobody believes. Stars are
   thin gold glyphs on the cream ground, not the saturated orange of a
   marketplace widget.

   Every class below was grepped against this file before being written
   (.stars .star .rev .revs .rating-* .ask-list all returned 0 matches).
   The specificity trap in this stylesheet has cost seven fixes already.
 * ================================================================== */

/* --- the headline number ------------------------------------------ */
.rating-head{display:flex;align-items:center;gap:0 40px;border-top:1px solid var(--line);padding-top:32px}
.rating-num{font-family:var(--display);font-weight:600;font-size:3.4rem;line-height:1;color:var(--teal-ink);letter-spacing:-.02em}
.rating-of{display:block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--char2);margin-top:8px}
.rating-meta{font-size:.92rem;color:var(--char2);max-width:52ch;margin-top:12px;line-height:1.6}

/* --- stars ---------------------------------------------------------
   Unearned stars stay visible but hollow, so a 4 reads as 4 and not as
   a shorter row the eye mistakes for 5. aria-label carries the number
   for screen readers; the glyphs are aria-hidden. */
.stars{display:inline-flex;gap:3px;font-size:1.02rem;line-height:1}
.star{color:var(--line)}
.star.on{color:var(--gold)}

/* --- the quotes ---------------------------------------------------- */
.revs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.rev{border-top:1px solid var(--line);padding:30px 0 34px}
.rev .stars{margin-bottom:16px}
.rev-body{font-family:var(--display);font-weight:400;font-size:1.22rem;line-height:1.5;color:var(--char);letter-spacing:-.012em}
.rev-extra{font-size:.95rem;color:var(--char2);margin-top:14px;line-height:1.65}
.rev-attrib{font-size:.85rem;color:var(--char2);margin-top:18px}
.rev-attrib b{color:var(--char);font-weight:700}
.rev-note{font-size:.9rem;color:var(--char2);max-width:72ch;margin-top:34px;line-height:1.65}
.rev-note a{color:var(--teal-deep);font-weight:700}

/* --- what we were asked to fix -------------------------------------
   Gold rules rather than teal: this is the section that costs us
   something to publish, and it should not look like a feature list. */
.ask-list{list-style:none;margin-top:34px;max-width:70ch}
.ask-list li{position:relative;border-top:1px solid var(--line);padding:20px 0 20px 34px;font-size:1rem;color:var(--char2)}
.ask-list li::before{content:"→";position:absolute;left:0;top:20px;color:var(--gold);font-size:.95rem}

@media(max-width:820px){
  .rating-head{gap:0 26px;padding-top:26px}
  .rating-num{font-size:2.7rem}
  .revs{grid-template-columns:1fr;gap:0}
  /* larger on phones, where this page is mostly read */
  .rev-body{font-size:1.14rem;line-height:1.55}
  .rev-extra,.rev-note,.rating-meta{font-size:.95rem;line-height:1.7}
  .ask-list li{font-size:1.02rem;line-height:1.65}
  .stars{font-size:1.08rem}

  /* inline links inside prose were 21px tall — too small to hit reliably.
     `.rev-note a` matches the base rule's specificity (0,1,1) and comes
     later in the file, so it wins without needing !important. */
  .rev-note a{display:inline-flex;align-items:center;min-height:40px}

  /* Breadcrumb "Home" measured 23px on every page of the site, not just
     this one. `.hero .crumbs a` is 0,2,1 — a bare `.crumbs a` at 0,1,1
     would silently lose to it, which is exactly the trap that has cost
     this stylesheet seven fixes. Both selectors are stated. */
  .hero .crumbs a,.crumbs a{display:inline-flex;align-items:center;min-height:40px}
  .hero .crumbs,.crumbs{gap:4px 9px}
}

/* ---------- v24 — two CTA routes: WhatsApp and the intake form ---------- */

/* The CTA panels now offer two destinations. They sit on one row where
   there is room and stack where there is not, and the pair is centred as
   a unit so the panel's existing centre axis is preserved.

   `.cta .btn` / `.cta-band .btn` already set `margin-top:34px` (line 284);
   that margin now belongs to the flex row, so it is neutralised on the
   buttons themselves — otherwise the row inherits the gap twice and the
   supporting text drifts away from the buttons. */
/* PRE-EXISTING BUG, found while measuring the new button row.
   `.cta,.cta-band{padding:96px 80px}` near line 897 is a ROOT-LEVEL rule
   that sits after the mobile media queries at lines 355/564, so it beat
   both of them at every width. Every CTA panel on all 32 pages was still
   carrying 80px of desktop side padding on a 390px handset: a 310px panel
   with 160px of padding left only 150px of usable width.

   The two earlier media queries were correct; they were simply being
   overridden by source order. Restating them AFTER the offending rule is
   the minimal fix — the alternative, reordering ~500 lines of stylesheet,
   risks far more than it repairs. */
@media(max-width:980px){ .cta,.cta-band{padding:68px 34px} }
@media(max-width:620px){ .cta,.cta-band{padding:60px 26px} }

/* `display:flex` on a child of a block container is shrink-to-fit, and the
   panel is `text-align:center`, so the row must state its own width or the
   buttons' `width:100%` resolves against a collapsed box. */
.cta-actions{position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:14px;margin-top:34px;width:100%}
.cta .cta-actions .btn,.cta-band .cta-actions .btn{margin-top:0}

/* The second route on a deep-teal panel. `btn-ghost` is built for light
   backgrounds (var(--char) on a transparent fill) and is close to
   invisible here, so the outline cut is explicit. */
.btn-outline-white{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}

/* The CtaBand variant keeps its buttons left-aligned in its right-hand
   column, rather than centred like the full-width panel. */
.cta-band .cta-actions{justify-content:flex-start}

@media(max-width:820px){
  /* Full-width buttons below 820px: side by side they fall under the
     40px tap-target minimum on a narrow handset. */
  .cta-actions{flex-direction:column;align-items:stretch;gap:12px}
  .cta-actions .btn{justify-content:center;width:100%}
  .cta-band .cta-actions{justify-content:stretch}
}

/* ---------- v26 — Care App: "included + get the app" ---------- */

/* Two full-width text-only sections were merged into one two-column block.
   Measured before the change at 1440px: content stopped at 656px of a
   1200px container, leaving the right 45% empty on BOTH, stacked into
   ~1,140px of near-blank page. The phone frame is the counterweight. */
.get-app{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}

.get-points{list-style:none;margin:34px 0 0;padding:0}
.get-points li{display:flex;flex-direction:column;gap:3px;position:relative;
  border-top:1px solid var(--line);padding:18px 0 18px 30px}
.get-points li::before{content:"✓";position:absolute;left:0;top:18px;
  color:var(--green);font-weight:700;font-size:.95rem}
.get-points b{font-size:.98rem;font-weight:600;color:var(--char)}
.get-points span{font-size:.9rem;color:var(--char2)}

/* Store badges.
   Apple's marketing guidelines require the supplied artwork used as-is,
   set a 40px minimum onscreen height, and ask for minimum clear space of
   one quarter of the badge height — hence the gap, and no filter, border,
   shadow or hover transform on the artwork itself. Apple's badge goes
   first in the lineup, as their guidelines also require.

   The two badges are drawn to different proportions by their owners
   (Apple 119.7x40 with no bleed; Google 646x250 with its clear space
   baked in), so matching their box heights would make the Apple mark
   look larger. The heights below are tuned so the two visually match. */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.store-badge{display:inline-flex;align-items:center;border-radius:10px;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.store-badge:hover,.store-badge:focus-visible{opacity:.82;transform:translateY(-2px)}
.store-badge img{display:block;height:47px;width:auto}
.store-badge:last-child img{height:61px;margin:-7px 0 -7px -8px}

.store-note{margin-top:20px;font-size:.86rem;color:var(--char2)}
.store-note a{color:var(--teal-deep);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}

.phone-sm{max-width:270px}

@media(max-width:980px){
  .get-app{grid-template-columns:1fr;gap:54px}
  /* the phone leads on a narrow screen only if it is not pushed off the
     bottom of the copy — it reads better under it, centred */
  .get-app-visual{display:flex;justify-content:center}
}
@media(max-width:620px){
  .stores{gap:10px}
  /* Apple's minimum onscreen badge height is 40px; these stay above it. */
  .store-badge img{height:44px}
  .store-badge:last-child img{height:57px;margin:-6px 0 -6px -8px}
  .phone-sm{max-width:230px}
}

/* ---------- v27 — triptych captions (who the care is for) ---------- */

/* The three photographs on the homepage showed care happening but never
   said who it was for. These captions name the person: the new mother, the
   parent in the village, the one learning to walk again.

   Kept quiet on purpose — the photograph is the message, the words only
   place it. Not a card: no fill, no border box, just a hairline above,
   matching the ruled-editorial treatment used elsewhere (.card, .get-points). */
.trip-cap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.trip-cap b{display:block;font-family:var(--display);font-weight:600;
  font-size:1.02rem;line-height:1.3;color:var(--teal-ink)}
.trip-cap p{margin-top:8px;font-size:.88rem;line-height:1.62;color:var(--char2)}

/* The three columns hold photographs of equal height but captions of
   unequal length, so the grid rows must align to the top or the shortest
   column floats. `.trip` sets no align-items, which defaults to stretch —
   that is fine for the cell, but the inner div needs to start at the top. */
.trip>div{display:flex;flex-direction:column;align-items:stretch}

@media(max-width:980px){
  /* .trip collapses to one column at this width (line 342), so the caption
     is no longer competing for a narrow column and can breathe. */
  .trip-cap{margin-top:14px;padding-top:13px}
  .trip-cap p{font-size:.9rem}
}