/* =========================================================
   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}

/* ---------- 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}
}