/* Medmatis site styles. Sections: base, header, hero, logos, doors, story, vitals, video-story, results, pledges, video, team, blog, faq, cta, ambient. Footer/cities/editorial styles are in site-extra.css */

:root{--bg:#fbfdfe;--soft:#f1f7fa;--ink:#0a2233;--muted:#5d7486;--line:rgba(10,60,90,.12);--teal:#0aa5a0;--blue:#1478c8;--mint:#2dffd0;--night:#04151b}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:'Space Grotesk',Inter,sans-serif;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.it{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:.9}
p{text-wrap:pretty}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:#fff;padding:10px 16px;border-radius:10px;z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.15)}.skip:focus{top:12px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.label{font:600 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
h2{font-size:clamp(32px,8.4vw,60px);margin:14px 0 0}
.lead{color:var(--muted);font-size:clamp(16.5px,4.4vw,19px);max-width:560px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 32px;border-radius:999px;font-weight:600;font-size:16px;background:linear-gradient(100deg,var(--teal),var(--blue));color:#fff;box-shadow:0 12px 30px rgba(10,140,170,.26);border:0;cursor:pointer;will-change:transform}
.btn.sm{min-height:42px;padding:0 20px;font-size:14.5px;box-shadow:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.js .rv{opacity:0;transform:translateY(26px)}
.tlink{font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center;min-height:44px}.tlink span{color:var(--teal)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.tag-sample{position:absolute;left:12px;top:12px;font:600 10.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.07em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ink);padding:5px 10px;border-radius:999px;z-index:3}

/* header (v2 pill) + top scroll bar */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#14d3c4,var(--blue),#2dffd0);z-index:130}
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:calc(10px + env(safe-area-inset-top)) 12px 0}
.pill{max-width:1160px;margin:0 auto;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:10px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 14px 40px rgba(20,90,130,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.logo{margin-right:auto}.logo img{height:36px;width:auto}
.desk{display:none}
.bpm{display:none;align-items:center;gap:8px;font:600 12px ui-monospace,Menlo,Consolas,monospace;color:var(--teal);margin-right:4px}
.bpm i{width:9px;height:9px;border-radius:50%;background:#ff5ea8;animation:beat 1s infinite}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.5)}28%{transform:scale(1)}42%{transform:scale(1.35)}}
.menu-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer}
.menu-btn i{display:block;width:16px;height:2px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)}
#menu{position:fixed;inset:0;z-index:99;background:rgba(251,253,254,.98);padding:104px 28px 40px;display:none;flex-direction:column;overflow:auto}
#menu.open{display:flex}#menu a{font:600 clamp(28px,8vw,40px) 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;padding:12px 0;border-bottom:1px solid var(--line)}
@media(min-width:600px){.bpm{display:flex}}
@media(min-width:900px){.desk{display:flex;gap:30px;font-size:15px;color:var(--muted);font-weight:500;margin:0 auto}.desk a:hover{color:var(--ink)}.menu-btn{display:none}.logo{margin-right:0}.logo img{height:40px}.pill{padding-left:24px}}

/* HERO */
.hero{padding:112px 0 56px;position:relative;overflow:hidden;background:radial-gradient(900px 500px at 88% 10%,rgba(20,211,196,.11),transparent 65%),radial-gradient(700px 420px at 0% 0%,rgba(20,120,200,.07),transparent 60%)}
.hero-in{display:grid;gap:36px;align-items:center}
.hero .label{display:inline-flex;align-items:center;gap:8px}
.hero .label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(10,165,160,.16)}
.hero h1{font-size:clamp(32px,9.2vw,64px);letter-spacing:-.04em;margin:16px 0 20px;line-height:1.02}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .it{font-size:1.16em;color:var(--teal);display:inline-block;background:linear-gradient(100deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em}
.hero .lead{margin:0 0 28px}
.fig{position:relative;margin:0 4px 0 0}
.fig::before{content:"";position:absolute;inset:5% -3% -4% 7%;border-radius:34px;background:linear-gradient(135deg,rgba(20,211,196,.38),rgba(20,120,200,.32));transform:rotate(2.5deg)}
.fig .ph{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/4.6;box-shadow:0 30px 70px rgba(10,60,100,.26);background:#dcecf3}
.fig .ph img{width:100%;height:100%;object-fit:cover;object-position:56% 40%}
.aichip{position:absolute;right:-4px;bottom:26px;padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.97);box-shadow:0 14px 34px rgba(10,60,100,.2);font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center;border:1px solid var(--line)}
.aichip b{color:var(--teal)}
@media(min-width:900px){.hero{padding:132px 0 96px}.hero-in{grid-template-columns:1.05fr .95fr;gap:72px}.hero h1{font-size:clamp(50px,5.2vw,74px)}.fig .ph{aspect-ratio:4/5}.aichip{right:-18px;bottom:44px}}

/* logo roll */
.logos{padding:30px 0;background:#fff;border-block:1px solid var(--line)}
.logos p{text-align:center;color:var(--muted);font:600 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.marq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:20px;width:max-content;animation:scroll 34s linear infinite}
.track div{height:62px;padding:10px 22px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:#fff}
.track img{max-height:40px;max-width:150px;object-fit:contain}
@keyframes scroll{to{transform:translateX(-50%)}}

/* DOORS */
.doors{padding:100px 0 60px}
.dgrid{display:grid;gap:18px;margin-top:38px}
.door{display:block;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px rgba(20,90,130,.10);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.door .ph{aspect-ratio:16/10;position:relative;background:#dcecf3;overflow:hidden}
.door .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.door .tx{padding:22px 24px 26px}
.door h3{font-size:clamp(24px,6.4vw,30px)}.door p{color:var(--muted);font-size:16px;margin-top:8px}
.door .go{margin-top:16px;font-weight:600;font-size:15px;color:var(--teal);display:inline-flex;gap:8px}
@media(hover:hover){.door:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(20,90,130,.18)}.door:hover .ph img{transform:scale(1.05)}}
@media(min-width:900px){.doors{padding:140px 0 80px}.dgrid{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}}

/* HOW IT WORKS (pinned) */
#how{background:linear-gradient(180deg,#f4fafc 0%,#e6f3f8 100%);position:relative;padding:80px 0 40px}
.js #how{height:100svh;min-height:620px;padding:0;overflow:hidden}
.story-in{max-width:1160px;margin:0 auto;padding:0 20px}
.js .story-in{height:100%;padding:76px 20px 16px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px}
.phone-wrap{display:none;place-items:center;--ph:min(50svh,440px)}.js .phone-wrap{display:grid}
.copy{position:relative}
.chap{margin-bottom:46px}
.js .chap{position:absolute;inset:0;margin:0;visibility:hidden;opacity:0}.js .chap:first-child{visibility:visible;opacity:1}
.chap h2{font-size:clamp(31px,8.6vw,48px);margin:8px 0 12px;letter-spacing:-.035em}
.chap p{color:var(--muted);font-size:clamp(16px,4.3vw,19px);max-width:460px}
@media(min-width:900px){.js .story-in{grid-template-rows:none;grid-template-columns:1.06fr .94fr;align-items:center;gap:64px;padding:0 28px}.js .copy{height:min(420px,70svh);order:1}.js .phone-wrap{--ph:min(74svh,640px);order:2}.chap h2{font-size:clamp(42px,4.6vw,64px)}}
.phone{height:var(--ph);width:calc(var(--ph)*.5);font-size:calc(var(--ph)/35);border-radius:3em;background:#0a2233;padding:.75em;box-shadow:0 2.6em 5.6em rgba(10,60,100,.3),0 0 0 .12em #163a52 inset;position:relative}
.screen{position:relative;width:100%;height:100%;border-radius:2.3em;background:#fff;overflow:hidden}
.notch{position:absolute;top:.75em;left:50%;transform:translateX(-50%);width:6.2em;height:1.6em;border-radius:1em;background:#0a2233;z-index:5}
.scr{position:absolute;inset:0;padding:4.2em 1.4em 1.4em;opacity:0}.screen>.scr:nth-child(2){opacity:1}
.sbar{display:flex;align-items:center;gap:.7em;padding:.85em 1em;border-radius:1.1em;background:#eef6fa;font-size:1.02em;min-height:3.4em}.sbar b{color:var(--teal)}
.caret{display:inline-block;width:3px;height:.82em;background:var(--teal);margin-left:3px;vertical-align:-.05em;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.tiny{font:600 .78em Inter;letter-spacing:.1em;color:var(--muted);margin:1.6em 0 .6em;text-transform:uppercase}
.sug{font-size:.95em;color:var(--muted);line-height:2.3}
.ai-msg{font-size:1.06em;line-height:1.6}.ai-msg mark{background:rgba(20,211,196,.26);border-radius:.4em;padding:.05em .3em;font-weight:600;color:var(--ink)}
.js .w,.js .ch{opacity:0}
.src{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.9em}.src span{font-size:.82em;padding:.35em .75em;border-radius:999px;border:1px solid var(--line)}.js .src span{opacity:0;transform:translateY(.6em)}
.why{margin-top:1.3em;display:grid;gap:.55em}.why div{display:flex;gap:.6em;font-size:.98em;padding:.7em .8em;border-radius:1em;background:#f4fafb;border:1px solid var(--line)}.why i{font-style:normal;color:var(--teal);font-weight:700}
.map{height:15em;border-radius:1.3em;background:#d9ebf2;position:relative;overflow:hidden}
.map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.75) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.75) 2px,transparent 2px);background-size:3.2em 3.2em;transform:rotate(-8deg) scale(1.4)}
.pin{position:absolute;left:50%;top:40%;width:2.4em;height:2.4em;margin-left:-1.2em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#ff5e8f;box-shadow:0 .7em 1.4em rgba(255,94,143,.4)}.pin::after{content:"";position:absolute;inset:.7em;border-radius:50%;background:#fff}.js .pin{opacity:0}
.place{margin-top:1.1em}.place b{font:600 1.2em 'Space Grotesk'}.place small{font-size:.9em;color:var(--muted)}
.stars{position:relative;display:inline-block;font-size:1.25em;letter-spacing:.1em;color:#d6e2e9}.stars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#ffb400;font-style:normal;width:98%}.js .stars i{width:0}
.rev{margin-top:.8em;padding:.9em 1em;border-radius:1.1em;background:#f4fafb;border:1px solid var(--line);font-size:.92em;color:var(--muted)}.rev b{color:var(--ink);font-size:.95em}
.call{margin-top:1.2em;display:flex;gap:.7em}.call div{flex:1;text-align:center;padding:.95em;border-radius:1em;font-weight:600;font-size:.98em;background:#eef6fa}.call .book{background:linear-gradient(100deg,var(--teal),var(--blue));color:#fff}
.toast{margin-top:1.1em;padding:1.1em;border-radius:1.1em;background:#e9f9f4;border:1px solid #bfe9dc;font-size:.98em}.toast b{color:#0a8a6a}.js .toast{opacity:0;transform:translateY(1em)}
.slots{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.1em}.slots span{padding:.55em .9em;border-radius:999px;border:1px solid var(--line);font-size:.9em;color:var(--muted)}.slots .on{background:#e9f9f4;border-color:#bfe9dc;color:#0a8a6a;font-weight:600}

/* VITALS */
.vitals{padding:96px 0;background:var(--night);color:#d8fff5;position:relative;overflow:hidden}
.vitals::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 0%,rgba(45,255,208,.10),transparent 70%);pointer-events:none}
.vitals h2{color:#fff}.vitals .lead{color:#8fb7b0}.vitals .label{color:var(--mint)}
.mon{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.vit{border:1px solid rgba(45,255,208,.22);border-radius:20px;padding:18px 16px 14px;background:linear-gradient(180deg,rgba(45,255,208,.07),transparent);overflow:hidden}
.vit small{font:600 10.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.1em;color:#5fdcc0;text-transform:uppercase}
.vit .v{font:700 clamp(38px,11vw,58px)/1 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;color:#fff;margin-top:8px}.vit .v em{font-size:.4em;color:var(--mint);font-style:normal;margin-left:3px}
.vit .d{font:600 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--mint);margin-top:6px}
.vit svg{width:100%;height:48px;margin-top:10px}.vit .base{fill:none;stroke:rgba(45,255,208,.16);stroke-width:1.6}
.vit .pl{fill:none;stroke:var(--mint);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:90 560;animation:trace 3.4s linear infinite;filter:drop-shadow(0 0 5px var(--mint))}
.vit:nth-child(2) .pl{animation-delay:-.8s}.vit:nth-child(3) .pl{animation-delay:-1.6s}.vit:nth-child(4) .pl{animation-delay:-2.4s}
@keyframes trace{from{stroke-dashoffset:650}to{stroke-dashoffset:0}}
.mono-note{margin-top:22px;font-size:12px;color:#5b8a82}
@media(min-width:900px){.vitals{padding:140px 0}.mon{grid-template-columns:repeat(4,1fr);gap:16px}.vit{padding:24px}}

/* CAMERA-SHY TO CONFIDENT */
.shy{padding:100px 0 90px;background:#fff}
.shy .beat{display:block;width:100%;height:60px;margin:34px 0 0}
.shy .beat path{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.shy .beat .base{stroke:rgba(10,165,160,.16)}
.js .shy .beat .draw{stroke-dasharray:1;stroke-dashoffset:1}
.sgrid{display:grid;gap:18px;margin-top:22px}
.sstep{border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px rgba(20,90,130,.10)}
.sstep .ph{aspect-ratio:4/3;position:relative;background:#dcecf3}
.sstep .ph img{width:100%;height:100%;object-fit:cover}
.sstep .tx{padding:20px 24px 26px}
.sstep .n{font:600 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.sstep h3{font-size:26px;margin:8px 0}.sstep p{color:var(--muted);font-size:16px}
@media(min-width:900px){.shy{padding:140px 0 120px}.sgrid{grid-template-columns:repeat(3,1fr);gap:22px}}

/* RESULTS: documented, not promised */
.results{padding:90px 0 40px;background:var(--soft)}
.note{font-size:12.5px;color:var(--muted);margin-top:8px}

/* NEVER CHASE US */
.tbc{display:inline-block;font:600 10.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#a56a00;background:#fff3d6;border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:2px}

/* STORIES (video) */
.stories{padding:20px 0 90px}
.lite{display:block;width:100%;border:0;cursor:pointer;position:relative;overflow:hidden;border-radius:26px;aspect-ratio:16/11;margin-top:34px;background:#0a2233;text-align:left;color:#fff;box-shadow:0 26px 70px rgba(20,90,130,.24)}
.lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,21,27,0) 40%,rgba(4,21,27,.78))}
.lite .pl{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;z-index:2;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.lite .pl::after{content:"";border-left:21px solid var(--ink);border-block:13px solid transparent;margin-left:6px}
.lite .cap{position:absolute;left:20px;right:20px;bottom:16px;z-index:2}.lite .cap b{font:600 20px 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;display:block}.lite .cap span{font-size:14px;opacity:.9}
.more{display:grid;gap:14px;margin-top:14px}
.lite.sm{aspect-ratio:16/8;margin-top:0;border-radius:20px;box-shadow:0 14px 40px rgba(20,90,130,.16)}
.lite.sm .pl{width:52px;height:52px;top:42%}.lite.sm .pl::after{border-left-width:14px;border-block-width:9px;margin-left:4px}.lite.sm .cap b{font-size:16px}
@media(min-width:900px){.stories{padding:40px 0 130px}.vgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:50px}.lite{margin-top:0}.more{margin-top:0;grid-template-rows:1fr 1fr}.lite.sm{aspect-ratio:auto;height:100%;min-height:170px}}

/* TEAM */
.team{padding:60px 0 60px;background:var(--soft)}
.faces{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:34px -20px 0;padding:6px 20px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.faces::-webkit-scrollbar{display:none}
.face{flex:0 0 68%;max-width:250px;scroll-snap-align:center}
.face img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:26px;background:#7feddd;box-shadow:0 14px 36px rgba(20,90,130,.16)}
.face b{display:block;font:600 17px 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;margin-top:12px}.face span{font-size:13.5px;color:var(--muted)}
@media(min-width:900px){.team{padding:100px 0 90px}.faces{overflow:visible;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}.face{flex:none;max-width:none}}
.handle{padding:44px 0 90px;background:var(--soft)}
.handle h3{font:600 13px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pills a{padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:500;font-size:15px;min-height:44px;display:inline-flex;align-items:center}.pills a:hover{border-color:var(--teal);color:var(--teal)}

/* INSIGHTS */
.blog{padding:90px 0}
.posts{margin-top:34px;display:grid;gap:16px}
.post{display:block;background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 14px 40px rgba(20,90,130,.09)}
.post .im{height:130px;position:relative}.post .im svg{position:absolute;inset:0;width:100%;height:100%}.post .im svg path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.post:nth-child(1) .im{background:linear-gradient(135deg,var(--blue),#37d5c6)}.post:nth-child(2) .im{background:linear-gradient(135deg,#ff5e8f,var(--blue))}.post:nth-child(3) .im{background:linear-gradient(135deg,var(--teal),#8fe3c6)}
.post .tx{padding:20px 22px 22px}.post small{font:600 11.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.post h3{font-size:21px;margin:8px 0}.post p{font-size:15px;color:var(--muted)}
.by{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--muted)}.by img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#7feddd}
@media(min-width:900px){.blog{padding:120px 0}.posts{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}}

/* FAQ */
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 0;font:600 clamp(18px,5vw,22px) 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:space-between;gap:18px;min-height:56px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--teal);font-size:28px;line-height:1;transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--muted);font-size:16.5px}

/* CTA + footer */
.final{padding:110px 0 170px;background:var(--night);color:#fff;text-align:center;position:relative;overflow:hidden}
.founder{display:inline-flex;align-items:center;gap:14px;padding:8px 20px 8px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(45,255,208,.22);margin-bottom:26px;text-align:left}
.founder img{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#7feddd}.founder b{display:block;font:600 16px 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif}.founder span{font-size:13px;color:#8fb7b0}
.final h2{font-size:clamp(38px,10.4vw,86px);max-width:960px;margin:0 auto;color:#fff}
.final h2 .it{color:var(--mint)}
.final .lead{margin:22px auto 34px;color:#8fb7b0}
.final .btn{background:linear-gradient(100deg,var(--mint),#1b9fd9);color:#04141b;box-shadow:0 12px 40px rgba(45,255,208,.25)}
.final .cta-row{justify-content:center}.final .tlink{color:#b9fff0}
.flat{position:absolute;left:0;right:0;bottom:30px;width:100%;height:96px}
.flat path{fill:none;stroke:var(--mint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(45,255,208,.6))}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* Ambient background motion: cells, ECG-paper grid + scan, pulse rings, rising motes.
   Rules: low opacity, slow, behind content, pauses off-screen, calm on mobile, off for reduced-motion. */
[data-amb]{position:relative}
[data-amb]>.wrap,[data-amb]>.story-in,[data-amb]>.hero-in{position:relative;z-index:1}
.amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:paint;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 110px,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 110px,#000 calc(100% - 110px),transparent)}
.amb-in{position:absolute;inset:-90px 0;will-change:transform}
.amb *{pointer-events:none}
.amb-off *{animation-play-state:paused!important}

/* 1. cells: soft glows + ringed cells that drift like a microscope view */
.cell{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(20,211,196,.30),rgba(20,120,200,.12) 52%,transparent 70%);
  filter:blur(var(--b,22px));opacity:var(--o,.5);
  animation:cellDrift var(--d) ease-in-out var(--dl) infinite alternate,cellBreathe 10s ease-in-out var(--dl) infinite}
.cell.ring{background:none;filter:none;border:1px solid rgba(10,165,160,.5);opacity:var(--o,.22)}
.cell.ring::after{content:"";position:absolute;left:34%;top:36%;width:24%;height:24%;border-radius:50%;background:rgba(10,165,160,.55)}
@keyframes cellDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx),var(--dy),0)}}
@keyframes cellBreathe{0%,100%{scale:1}50%{scale:1.07}}
.amb.on-dark .cell{background:radial-gradient(circle at 35% 30%,rgba(45,255,208,.28),rgba(20,120,200,.10) 52%,transparent 70%)}
.amb.on-dark .cell.ring{border-color:rgba(45,255,208,.5)}.amb.on-dark .cell.ring::after{background:rgba(45,255,208,.5)}

/* 2. ECG-paper grid (small + large squares) sliding very slowly */
.amb-grid{position:absolute;inset:-120px -120px;opacity:var(--go,.55);
  background-image:
   linear-gradient(rgba(10,165,160,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(10,165,160,.10) 1px,transparent 1px),
   linear-gradient(rgba(10,165,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,165,160,.05) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 20%,transparent 78%);
  animation:gridDrift 120s linear infinite}
.amb.on-dark .amb-grid{background-image:
   linear-gradient(rgba(45,255,208,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(45,255,208,.13) 1px,transparent 1px),
   linear-gradient(rgba(45,255,208,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(45,255,208,.06) 1px,transparent 1px)}
@keyframes gridDrift{to{transform:translate3d(96px,48px,0)}}
.amb-scan{position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(45,255,208,.09),transparent);animation:scan 11s linear infinite}
@keyframes scan{from{transform:translateX(-60%)}to{transform:translateX(320%)}}

/* 3. pulse rings: a signal going out (means "found") */
.amb-rings{position:absolute;left:50%;top:50%;width:min(120vw,900px);aspect-ratio:1;translate:-50% -50%;z-index:0}
.amb-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(10,165,160,.55);opacity:0;animation:ringPulse 8s ease-out infinite}
.amb-rings i:nth-child(2){animation-delay:2.6s}.amb-rings i:nth-child(3){animation-delay:5.2s}
.amb-rings.on-dark i{border-color:rgba(45,255,208,.55)}
.phone-wrap{position:relative}.phone-wrap .amb-rings{width:min(150%,900px)}.phone-wrap .phone{position:relative;z-index:1}
@keyframes ringPulse{0%{transform:scale(.3);opacity:.0}12%{opacity:.30}100%{transform:scale(1.15);opacity:0}}

/* 4. motes: tiny bubbles rising slowly (dark sections) */
.mote{position:absolute;left:var(--x);bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;background:rgba(45,255,208,.7);opacity:0;animation:moteRise var(--d) linear var(--dl) infinite}
.amb:not(.on-dark) .mote{background:rgba(10,165,160,.5)}
@keyframes moteRise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.5}85%{opacity:.35}100%{transform:translate3d(var(--dx),calc(var(--rise) * -1),0);opacity:0}}

@media (max-width:899px){.amb-grid{animation:none}.amb-scan{display:none}}
@media (prefers-reduced-motion:reduce){.amb *,.amb-rings i{animation:none!important}.amb-rings{display:none}.mote{display:none}}


@media(min-width:900px) and (max-width:999px){.menu-btn{display:grid}}


/* ================= header dropdowns + mobile menu ================= */
.desk{display:none}
.ni{position:relative}
.nb,.nl{font:500 15px Inter,sans-serif;color:var(--muted);background:none;border:0;cursor:pointer;padding:10px 4px;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.nb:hover,.nl:hover,.ni:focus-within .nb{color:var(--ink)}
.nb i{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.ni.open .nb i{transform:rotate(-135deg) translateY(-2px)}
.drop{position:absolute;left:50%;top:calc(100% + 14px);translate:-50% 0;min-width:280px;padding:18px 20px 16px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px rgba(20,90,130,.18);display:none;z-index:120}
.drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.drop.cols2{min-width:520px}
.ni:hover .drop,.ni.open .drop,.ni:focus-within .drop{display:block}
.ni:hover .drop.cols2,.ni.open .drop.cols2,.ni:focus-within .drop.cols2{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.dh{font:600 11px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:2px 0 8px;grid-column:1/-1}
.cols2 .dh{grid-column:auto}
.dl{display:grid;gap:2px}
.drop.cols2 > .dl{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:2px 22px}
.drop.cols2 > .dh{grid-column:1/-1}
.dl a{display:block;padding:9px 12px;border-radius:14px;color:var(--ink)}
.dl a:hover{background:var(--soft)}
.dl a b{display:block;font:600 14.5px 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-.01em}
.dl a span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.dl.simple a,.dl.simple .soon{font:500 14.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;padding:8px 12px;border-radius:12px}
.soon{display:block;color:#8fa3b1;cursor:default}
.soon em{font:600 9.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:#8a6d1a;background:#fff3d6;border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:1px}
.dfoot{grid-column:1/-1;margin-top:8px;padding:12px 12px 4px;border-top:1px solid var(--line);font-weight:600;font-size:14px;color:var(--teal)}
#menu{padding-bottom:80px;background:#fbfdfe!important}
#menu a,#menu summary{font:600 clamp(24px,7vw,34px) 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;padding:14px 0;border-bottom:1px solid var(--line);display:block;letter-spacing:-.02em}
#menu summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}
#menu summary::-webkit-details-marker{display:none}
#menu summary::after{content:"+";color:var(--teal)}
#menu details[open] summary::after{content:"–"}
.mlist{padding:6px 0 12px;display:grid}
.mlist a,.mlist .soon{font:500 17px Inter,system-ui,-apple-system,Segoe UI,sans-serif!important;padding:10px 6px!important;border:0!important;letter-spacing:0!important;color:var(--muted)}
.mlist .soon{display:block}
.mh{font:600 11px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:12px 6px 2px}
#menu .mcta{margin-top:22px;border:0;text-align:center;background:linear-gradient(100deg,var(--teal),var(--blue));color:#fff;border-radius:999px;font-size:19px;padding:16px}
@media(min-width:900px) and (max-width:999px){.menu-btn{display:grid}}
@media(min-width:1000px){.desk{display:flex;align-items:center;gap:14px;margin:0 auto}.menu-btn{display:none}.logo{margin-right:0}.pill{padding-left:24px}}
@media(max-width:1179px){.bpm{display:none}}
@media(min-width:1180px){.bpm{display:flex}}

/* ================= where we work (cities + specialities) ================= */
.where{padding:100px 0 90px;background:#fff}
.wgrid{display:grid;gap:34px;margin-top:38px}
.wcol h3{font:600 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips a,.chips span{padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 15px Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.chips a:hover{border-color:var(--teal);color:var(--teal)}
.chips span{background:var(--soft);color:#6b8496}
.chips span em{font:600 9.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:#8a6d1a;background:#fff3d6;border-radius:999px;padding:2px 7px}
.where .note2{margin-top:26px;color:var(--muted);font-size:15px;max-width:760px}
@media(min-width:900px){.where{padding:130px 0 110px}.wgrid{grid-template-columns:1.1fr .9fr;gap:70px}.wcol.wide{grid-column:1/-1}}

/* ================= E-E-A-T: standards ================= */
.eeat{padding:20px 0 80px;background:var(--soft)}
.estd{display:grid;gap:14px;margin-top:34px}
.ecard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 14px 40px rgba(20,90,130,.08)}
.ecard .k{font:600 11px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.ecard h3{font-size:22px;margin:8px 0 8px}.ecard p{color:var(--muted);font-size:15.5px}
@media(min-width:900px){.estd{grid-template-columns:repeat(4,1fr);gap:16px}.eeat{padding:20px 0 110px}}
.byline{margin-top:26px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.byline img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#7feddd}
.byline b{color:var(--ink)}

/* ================= tags / ribbons ================= */
.postsoon{display:inline-block;font:600 10.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a6d1a;background:#fff3d6;border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:2px}
.lite.static{cursor:default}
.lite .soonchip{position:absolute;right:14px;top:14px;z-index:3;font:600 11px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.94);border-radius:999px;padding:5px 11px}

/* ================= FOOTER (light, structured) ================= */
.sf{position:relative;background:#f1f7fa;border-top:1px solid var(--line);padding:70px 0 calc(34px + env(safe-area-inset-bottom));color:var(--muted);font-size:15px}
.sf-fade{position:absolute;left:0;right:0;top:-90px;height:90px;background:linear-gradient(180deg,transparent,#f1f7fa);pointer-events:none}
.sf-grid{display:grid;gap:38px}
.sf-brand{max-width:340px}
.sf-logo img{height:48px;width:auto}
.sf-def{margin:14px 0 18px;color:var(--ink);font:500 18px/1.4 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-.02em}
.sf-nap{font-style:normal;display:grid;gap:14px}
.sf-ni{display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.sf-ni i{flex:none;width:32px;height:32px;margin-top:1px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(10,165,160,.12),rgba(20,120,200,.12))}
.sf-ni svg{width:16px;height:16px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sf-nap strong{color:var(--ink)}
.sf-nap a{color:var(--ink)}
.sf-nap a:hover,.sf-col a:hover,.sf-bottom a:hover,.sf-social a:hover{color:var(--teal)}
.sf-map{color:var(--teal)!important;font-weight:600;font-size:13.5px}
.sf-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sf-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);transition:background .3s,border-color .3s,transform .3s}
.sf-social a:hover{background:linear-gradient(135deg,var(--teal),var(--blue));border-color:transparent;color:#fff!important;transform:translateY(-3px)}
.sf-social svg{width:17px;height:17px;fill:currentColor}
.sf-col{display:flex;flex-direction:column;gap:10px}
.sf-col h3{font:600 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.sf-col a{color:var(--ink);font-size:15px;line-height:1.35;width:fit-content;transition:color .25s ease}
.sf-col a:hover{color:var(--teal)}
.sf-cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:28px 26px;margin-bottom:44px;border-radius:26px;background:linear-gradient(135deg,rgba(10,165,160,.1),rgba(20,120,200,.1));border:1px solid rgba(10,165,160,.22)}
.sf-cta b{display:block;font:600 clamp(19px,4vw,24px)/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.sf-cta b+span{display:block;margin-top:4px;color:var(--muted);font-size:14.5px}
.sf-legal{margin:24px 0 0;font-size:11.5px;line-height:1.6;color:#9fb0bc}

.sf-bottom{display:flex;flex-direction:column;gap:12px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:14px}
.sf-bottom nav{display:flex;flex-wrap:wrap;gap:8px 20px}
@media(min-width:700px){.sf-grid{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:1.2fr 1fr;gap:6px 40px}.sf-brand .sf-logo,.sf-brand .sf-def{grid-column:1}.sf-brand .sf-nap{grid-column:2;grid-row:1/4}.sf-brand .sf-social{grid-column:1}}
@media(min-width:1000px){
  .sf{padding-top:90px}
  .sf-grid{grid-template-columns:2fr 1fr 1fr;gap:60px}
  .sf-brand{display:block;grid-column:auto}
  .sf-bottom{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ================= hero scenes: photo, word and chip change together ================= */
.fig .ph .figimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .fig .ph .figimg{opacity:0;transition:opacity 1.1s ease;transform:scale(1.07)}
.js .fig .ph .figimg.on{opacity:1;transform:scale(1);transition:opacity 1.1s ease,transform 7.5s cubic-bezier(.2,.6,.2,1)}
.fig .ph{isolation:isolate}
.aichip span{display:inline-block;transition:opacity .35s ease,transform .35s ease}
.aichip.swap span{opacity:0;transform:translateY(6px)}
.scenes{display:flex;gap:6px;margin-top:38px;max-width:520px}
.scn{flex:1;text-align:left;background:none;border:0;cursor:pointer;padding:12px 4px 0;position:relative;color:var(--muted);font-family:Inter,sans-serif;min-height:44px}
.scn::before,.scn::after{content:"";position:absolute;left:4px;right:4px;top:0;height:2px;border-radius:2px}
.scn::before{background:var(--line)}
.scn::after{background:linear-gradient(90deg,var(--teal),var(--blue));transform:scaleX(0);transform-origin:left}
.scn.done::after{transform:scaleX(1)}
.scn.on::after{animation:scnfill var(--dur,5.2s) linear forwards}
@keyframes scnfill{to{transform:scaleX(1)}}
.scn .n{display:block;font:600 11px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.12em;color:#9bb0be}
.scn .lab{display:block;font:500 15px 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-.01em;margin-top:2px}
.scn.on{color:var(--ink)}.scn.on .n{color:var(--teal)}
.scn:hover{color:var(--ink)}
@media(max-width:899px){.scenes{margin-top:26px;gap:4px}.scn .lab{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.scn.on::after{animation:none;transform:scaleX(1)}}
/* ================= HERO STAGE: a doctor's Reel with kinetic captions + sticker cards ================= */
.fig::before{display:none}
.fig{margin:0;display:block}
.stage{--rx:0;--ry:0;position:relative;width:min(100%,430px);aspect-ratio:430/560;margin:0 auto;perspective:1200px}
.disc{position:absolute;left:14%;right:-2%;top:6%;bottom:10%;border-radius:46% 54% 50% 50%/40% 44% 56% 60%;background:linear-gradient(140deg,rgba(20,211,196,.42),rgba(20,120,200,.34) 60%,rgba(255,94,168,.18));transform:translate3d(calc(var(--rx)*-14px),calc(var(--ry)*-10px),0) rotate(6deg);animation:blobmorph 16s ease-in-out infinite alternate}
@keyframes blobmorph{to{border-radius:54% 46% 44% 56%/52% 40% 60% 48%;rotate:-4deg}}
.floor{position:absolute;left:8%;right:8%;bottom:1%;height:9%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,60,100,.28),transparent 68%);filter:blur(8px)}
.reelwrap{position:absolute;left:19%;top:1%;width:60%;animation:reelfloat 6.5s ease-in-out infinite}
@keyframes reelfloat{50%{transform:translateY(-9px)}}
.reel{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#0a2233;box-shadow:0 34px 70px rgba(10,60,100,.34),0 0 0 5px #fff,0 0 0 6px rgba(10,60,100,.10);transform:rotate(-2.2deg) rotateY(calc(var(--rx)*7deg)) rotateX(calc(var(--ry)*-5deg));transition:transform .25s ease-out;transform-style:preserve-3d}
.reelimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:reelzoom 14s ease-in-out infinite alternate}
@keyframes reelzoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,21,27,.45) 0%,transparent 22%,transparent 46%,rgba(4,21,27,.82) 100%)}
.rtop{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;gap:8px;color:#fff;font:600 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.rtop .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:grid;place-items:center;font:700 10px Inter,system-ui,-apple-system,Segoe UI,sans-serif;border:1.5px solid #fff}
.rtop .fol{margin-left:auto;padding:4px 11px;border:1px solid rgba(255,255,255,.8);border-radius:999px;font:600 11px Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.rside{position:absolute;right:10px;bottom:74px;display:flex;flex-direction:column;gap:14px;color:#fff;font:600 11px Inter,system-ui,-apple-system,Segoe UI,sans-serif;text-align:center}
.rside span{display:block}.rside i{display:block;font-style:normal;font-size:20px;line-height:1;margin-bottom:2px}
.caps{position:absolute;left:14px;right:52px;bottom:60px}
.cap{display:none;font:600 clamp(19px,5.2vw,22px)/1.14 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.cap.on{display:block}
.cap mark{background:none;color:#2dffd0}
.js .cap .cw{display:inline-block;opacity:0;transform:translateY(.55em) scale(.96)}
.js .cap.on .cw{animation:cwin .4s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i)*.06s + .12s)}
@keyframes cwin{to{opacity:1;transform:none}}
.rbar{position:absolute;left:12px;right:12px;bottom:12px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.85);font:500 12px Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.hearts{position:absolute;right:16px;bottom:96px;width:30px;height:120px;pointer-events:none}
.hearts i{position:absolute;bottom:0;left:0;font-style:normal;color:#ff5ea8;font-size:16px;opacity:0}
.stage[data-s="3"] .hearts i{animation:heartup 2.6s ease-out infinite}
.hearts i:nth-child(2){animation-delay:.5s!important;left:8px}.hearts i:nth-child(3){animation-delay:1.1s!important;left:-6px}.hearts i:nth-child(4){animation-delay:1.7s!important;left:14px}
@keyframes heartup{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-110px) scale(1.15);opacity:0}}

/* sticker cards: spring in one beat at a time, and stay as the story builds */
.stk{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:20px;background:#fff;box-shadow:0 18px 40px rgba(10,60,100,.22),0 0 0 1px rgba(10,60,100,.06);font-family:Inter,sans-serif;white-space:nowrap;opacity:0;transform:translate3d(0,14px,0) scale(.6) rotate(var(--r,0deg));transition:opacity .35s ease,transform .7s cubic-bezier(.34,1.6,.4,1)}
.stk.on,.stk.seen{opacity:1;transform:translate3d(calc(var(--rx)*var(--d,10)*1px),calc(var(--ry)*var(--d,10)*1px),0) scale(1) rotate(var(--r,0deg))}
.stk.seen{opacity:.94}
.stk .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:#fff;background:linear-gradient(135deg,var(--teal),var(--blue))}
.stk b{display:block;font:600 14px 'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
.stk small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.s1{left:-2%;top:12%;--r:-5deg;--d:16}
.s2{right:-3%;top:31%;--r:4deg;--d:-12}
.s3{left:-6%;top:41%;--r:-3deg;--d:14}.s3 .ic{background:linear-gradient(135deg,#1478c8,#14d3c4)}
.s4{right:-1%;bottom:8%;--r:3deg;--d:-16}.s4 .ic{background:linear-gradient(135deg,#25d366,#128c7e)}
.s1 .ic{background:linear-gradient(135deg,#ff5e8f,#ff9a5e)}.s2 .ic{background:linear-gradient(135deg,#ffb400,#ff8a00)}
.no-js .stk{opacity:1;transform:none}
html:not(.js) .stk.s1{opacity:1;transform:rotate(-5deg)}
.stage-note{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font:600 10.5px Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.85);padding:4px 12px;border-radius:999px;white-space:nowrap}
@media(max-width:899px){.stage{width:min(100%,360px)}.stk{padding:8px 12px 8px 8px;border-radius:16px}.stk .ic{width:32px;height:32px;font-size:15px;border-radius:10px}.stk b{font-size:12.5px}.stk small{font-size:10.5px}.s1{left:-1%}.s2{right:-1%}.s3{left:-1%}.s4{right:0}}
@media (prefers-reduced-motion:reduce){.reelwrap,.reelimg,.disc{animation:none}.reel{transition:none}.stk{transition:none}}
/* ---- hero stage: more room, cards beside the reel (not on it), fewer at once ---- */
.stage{width:min(100%,540px);aspect-ratio:540/620}
.reelwrap{left:25%;top:2%;width:50%}
.disc{left:20%;right:4%;top:8%;bottom:12%}
.stk{padding:9px 15px 9px 9px}
.s1{left:-1%;top:9%;right:auto;bottom:auto}
.s2{right:-1%;left:auto;top:26%;bottom:auto}
.s3{left:-3%;right:auto;top:49%;bottom:auto}
.s4{right:-1%;left:auto;top:auto;bottom:11%}
.stk.seen{opacity:.55}
.stage-note{bottom:-2px}
@media(max-width:899px){
  .stage{width:min(100%,350px);aspect-ratio:350/500}
  .reelwrap{left:19%;top:8%;width:62%}
  .disc{left:10%;right:0;top:12%;bottom:14%}
  .stk.seen{display:none}
  .s1{left:0;top:-1%}
  .s2{right:0;top:-1%}
  .s3{left:0;top:-1%}
  .s4{right:0;top:auto;bottom:6%}
}
/* ---- hero stage v3: bigger reel; cards live above/below the caption zone, never on the text ---- */
@media(min-width:900px){
  .stage{width:min(100%,540px);aspect-ratio:540/650}
  .reelwrap{left:22%;top:1%;width:56%}
  .disc{left:16%;right:2%;top:7%;bottom:10%}
  .s1{left:-3%;top:13%}
  .s2{right:-2%;top:28%}
  .s3{left:-6%;top:43%}
  .s4{right:-2%;bottom:5%}
  .stk.seen{opacity:.38}
}
/* ---- hero cards: compact ---- */
.stk{gap:8px;padding:6px 12px 6px 6px;border-radius:14px;box-shadow:0 12px 26px rgba(10,60,100,.20),0 0 0 1px rgba(10,60,100,.06)}
.stk .ic{width:26px;height:26px;border-radius:9px;font-size:13px}
.stk b{font-size:12px}
.stk small{font-size:10px;margin-top:0}
@media(min-width:900px){
  .s1{left:-1%}
  .s2{right:0}
  .s3{left:-3%}
  .s4{right:0}
}
@media(max-width:899px){
  .stk{padding:5px 10px 5px 5px;border-radius:12px}
  .stk .ic{width:24px;height:24px;font-size:12px;border-radius:8px}
  .stk b{font-size:11.5px}.stk small{font-size:9.5px}
}
/* ---- hero cards: ~70% outside the reel, only an inner corner touches the frame ---- */
@media(min-width:900px){
  .s1{left:2%;right:auto;top:14%}
  .s2{right:2%;left:auto;top:29%}
  .s3{left:1%;right:auto;top:44%}
  .s4{right:2%;left:auto;top:auto;bottom:9%}
}
@media(max-width:899px){
  .s4{bottom:3%}
}
@media(min-width:900px){
  .s1{left:-3%}
  .s2{right:-3%}
  .s3{left:-5%}
  .s4{right:-3%}
}
/* ================= hero reel as a swipe-up feed ================= */
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;overflow:hidden;background:#0a2233;transform:translate3d(0,101%,0);transition:transform .6s cubic-bezier(.65,0,.25,1),opacity .6s ease;will-change:transform}
.slide.on{transform:none;z-index:3;opacity:1}
.slide.prev{transform:translate3d(0,-26%,0);z-index:2;opacity:.35}
.slide.snap{transition:none!important}
html:not(.js) .slide:not(.on){display:none}
.reelvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.reelvid.live{opacity:1}
.rside,.caps,.rbar,.hearts{z-index:6}
.slide .shade{z-index:1}.slide .rtop{z-index:2}
.reel{isolation:isolate}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
/* ---- "Booked" card: hang off the reel's right edge (was below the frame) ---- */
@media(min-width:900px){
  .s4{right:-3%;left:auto;top:42%;bottom:auto}
}
@media(max-width:899px){
  .s4{right:0;left:auto;top:-1%;bottom:auto}
}
/* ---- one card at a time (no lingering previous card); Booked clear of the like counts ---- */
.stk.seen{display:none}
@media(min-width:900px){
  .s4{right:-6%;left:auto;top:30%;bottom:auto}
}
/* ================= "Which of these sounds like you?" interactive story ================= */
.sit{padding:100px 0 90px;background:#fff}
.sit-tabs{display:grid;gap:10px;margin-top:34px}
.sit-tab{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px 18px 16px 58px;cursor:pointer;font-family:Inter,system-ui,sans-serif;color:var(--ink);min-height:64px;transition:border-color .3s,box-shadow .3s,background .3s}
.sit-tab .n{position:absolute;left:18px;top:16px;font:600 12px Inter,sans-serif;letter-spacing:.12em;color:#9bb0be}
.sit-tab b{display:block;font:600 clamp(19px,5vw,24px) 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em;line-height:1.15}
.sit-tab small{display:block;margin-top:3px;color:var(--muted);font-size:14.5px}
.sit-tab:hover{border-color:rgba(10,165,160,.5)}
.sit-tab.on{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,var(--teal),var(--blue)) border-box;border:1.5px solid transparent;box-shadow:0 18px 44px rgba(10,120,160,.16)}
.sit-tab.on .n{color:var(--teal)}
.sit-panel{margin-top:26px;display:grid;gap:22px;border-radius:32px;padding:22px;background:linear-gradient(160deg,#f4fafc,#e9f5f9);border:1px solid var(--line)}
.js .sit-panel[hidden]{display:none}
.tiny2{font:600 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tiny2.teal{color:var(--teal)}
.thoughts{list-style:none;margin:14px 0 0;display:grid;gap:12px}
.thoughts li{font:600 clamp(20px,5.2vw,27px)/1.22 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink);padding-left:16px;border-left:3px solid rgba(10,165,160,.35)}
.js .thoughts li{opacity:0;transform:translateY(14px)}
.js .sit-panel.play .thoughts li{animation:thin .7s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--k)*.95s + .25s)}
@keyframes thin{to{opacity:1;transform:none}}
.turn{margin-top:26px;padding-top:22px;border-top:1px dashed rgba(10,60,90,.22)}
.turn h3{font-size:clamp(24px,6vw,34px);margin:8px 0 8px}
.turn p{color:var(--muted);font-size:16.5px;max-width:470px;margin-bottom:20px}
.js .turn{opacity:0;transform:translateY(12px)}
.js .sit-panel.play .turn{animation:thin .8s cubic-bezier(.2,.9,.2,1) both;animation-delay:3.4s}
/* visual card */
.vz{background:#fff;border-radius:26px;box-shadow:0 22px 54px rgba(20,90,130,.14);border:1px solid var(--line);overflow:hidden;align-self:start}
.vzh{display:flex;justify-content:center;padding:14px 14px 4px}
.tg{display:inline-flex;background:var(--soft);border-radius:999px;padding:4px}
.tg button{border:0;background:none;cursor:pointer;font:600 13px Inter,sans-serif;color:var(--muted);padding:9px 16px;border-radius:999px;min-height:38px}
.tg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(10,60,100,.14)}
.sit-panel.after .tg button[aria-pressed="true"]{background:linear-gradient(100deg,var(--teal),var(--blue));color:#fff}
.vzb{padding:16px 18px 10px;min-height:300px;display:grid;align-content:start;gap:10px}
.vzf{padding:0 18px 14px;font-size:11.5px;color:#8ea3b1;text-align:center}
.sit-panel:not(.after) .a-only{display:none}
.sit-panel.after .b-only{display:none}
.a-only{animation:thin .6s ease both}
/* A: new clinic */
.mapq{font-size:13px;color:var(--muted);padding:9px 12px;border-radius:12px;background:var(--soft)}
.mapq b{color:var(--ink)}
.row{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);font-size:14px;align-items:center}
.row b{font:600 14.5px 'Space Grotesk',system-ui,sans-serif}.row span{color:var(--muted);font-size:12.5px;white-space:nowrap}
.row.ghost{border-style:dashed;background:transparent;color:#8ea3b1}.row.ghost b{color:#8ea3b1}
.row.hit{border-color:transparent;background:linear-gradient(100deg,rgba(20,211,196,.16),rgba(20,120,200,.10));box-shadow:0 8px 20px rgba(10,150,170,.16)}
.row.hit span{color:#0a8a6a;font-weight:600}
.slotsl{font:600 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.slots{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.slot{height:26px;border-radius:8px;border:1.5px dashed #cbd9e2;background:transparent;transition:background .5s,border-color .5s;transition-delay:calc(var(--q)*.12s)}
.sit-panel.after .slot{background:linear-gradient(135deg,var(--teal),var(--blue));border-color:transparent}
.sit-panel.after .slot:nth-child(n+7){background:transparent;border-color:#cbd9e2}
/* B: switching agencies */
.chat{display:grid;gap:8px}
.m{max-width:86%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.4}
.m.me{background:#e8f0f5;border-bottom-right-radius:5px;justify-self:end}
.m.them{background:linear-gradient(100deg,rgba(20,211,196,.22),rgba(20,120,200,.14));border-bottom-left-radius:5px;font-weight:500}
.seen{justify-self:end;font-size:11.5px;color:#a26a00;background:#fff3d6;border-radius:999px;padding:2px 10px}
.rep{display:flex;justify-content:space-between;gap:10px;margin-top:6px;padding:11px 14px;border-radius:14px;border:1px dashed #cbd9e2;font:600 13px Inter,sans-serif;color:var(--muted)}
.rep.ok{border:1px solid rgba(10,165,160,.4);color:#0a8a6a;background:rgba(20,211,196,.08)}
/* C: expanding */
.locs{display:grid;gap:14px;padding-top:6px}
.loc{display:grid;grid-template-columns:82px 1fr 78px;gap:10px;align-items:center;font-size:13px}
.loc b{font:600 13.5px 'Space Grotesk',system-ui,sans-serif}
.loc em{font-style:normal;color:var(--muted);font-size:12px;text-align:right}
.bar{display:block;height:12px;border-radius:999px;background:#e8f0f5;overflow:hidden}
.bar i{display:block;height:100%;width:var(--b);border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--blue));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.sit-panel.after .bar i{width:var(--a)}
.lnote{margin-top:10px;font-size:14px;color:var(--muted);text-align:center;padding:10px;border-radius:12px;background:var(--soft)}
@media(min-width:900px){
  .sit{padding:140px 0 110px}
  .sit-tabs{grid-template-columns:repeat(3,1fr);gap:14px}
  .sit-tab{padding:20px 20px 20px 62px}
  .sit-panel{grid-template-columns:1.05fr .95fr;gap:40px;padding:44px;border-radius:38px;margin-top:22px}
  .vzb{min-height:340px}
}
@media (prefers-reduced-motion:reduce){.js .thoughts li,.js .turn{opacity:1;transform:none}.bar i,.slot{transition:none}}
.vzb{min-height:0}
@media(min-width:900px){.vzb{min-height:0}.sit-panel{align-items:start}}

/* ================= "Right now" section: blunt opener + auto-playing story (overrides earlier card layout) ================= */
.sit h2{max-width:900px}
.sit h2 .it{color:var(--teal)}
.sq{display:flex;align-items:center;gap:10px;margin-top:22px;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:0 12px 30px rgba(20,90,130,.10);max-width:560px;font:500 16px Inter,system-ui,sans-serif;flex-wrap:wrap}
.sq-i{color:var(--teal);font-size:18px}
.sq #sqtxt{color:var(--ink);font-weight:600}
.sq em{font-style:normal;color:var(--muted);font-size:13px;margin-left:auto}
.sit-tabs{display:flex;gap:6px;margin-top:30px;max-width:640px}
.sit-tab{flex:1;position:relative;background:none;border:0;border-radius:0;box-shadow:none;padding:12px 4px 0;min-height:44px;text-align:left;color:var(--muted)}
.sit-tab::before,.sit-tab::after{content:"";position:absolute;left:4px;right:4px;top:0;height:2px;border-radius:2px}
.sit-tab::before{background:var(--line)}
.sit-tab::after{background:linear-gradient(90deg,var(--teal),var(--blue));transform:scaleX(0);transform-origin:left}
.sit-tab.done::after{transform:scaleX(1)}
.sit-tab.on::after{animation:sitfill var(--sdur,9s) linear forwards}
.sit-tab.stop.on::after{animation:none;transform:scaleX(1)}
@keyframes sitfill{to{transform:scaleX(1)}}
.sit-tab .n{position:static;display:block;font:600 11px Inter,sans-serif;letter-spacing:.12em;color:#9bb0be}
.sit-tab b{font:500 15px 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.01em;margin-top:2px}
.sit-tab.on{background:none;border:0;box-shadow:none;color:var(--ink)}
.sit-tab.on .n{color:var(--teal)}
.sit-tab:hover{color:var(--ink);border:0}
.worry{margin-top:14px;font:600 clamp(30px,8vw,52px)/1.08 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.js .worry{opacity:0;transform:translateY(16px)}
.js .sit-panel.play .worry{animation:thin .8s cubic-bezier(.2,.9,.2,1) both .1s}
.turn{margin-top:24px;padding-top:20px}
.turn h3{margin:8px 0 18px}
.js .turn{opacity:0;transform:translateY(12px);pointer-events:none}
.js .sit-panel.after .turn{animation:thin .7s cubic-bezier(.2,.9,.2,1) both;pointer-events:auto}
.thoughts{display:none}
@media(min-width:900px){
  .sit-panel{grid-template-columns:1fr 1fr;padding:44px 48px;align-items:center}
  .sit-tabs{gap:10px}
}
@media(max-width:899px){.sq em{margin-left:0;width:100%}}

/* ---- Today / With Medmatis: a real sliding switch ---- */
.tg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;background:var(--soft);border-radius:999px}
.tg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 4px 12px rgba(10,60,100,.16);transition:transform .6s cubic-bezier(.34,1.35,.4,1),background .45s ease,box-shadow .45s ease}
.sit-panel.after .tg::before{transform:translateX(100%);background:linear-gradient(100deg,var(--teal),var(--blue));box-shadow:0 8px 20px rgba(10,140,170,.32)}
.tg button,.tg button[aria-pressed="true"],.sit-panel.after .tg button[aria-pressed="true"]{position:relative;z-index:1;background:none;box-shadow:none;padding:9px 22px;text-align:center;transition:color .35s ease}
.sit-panel:not(.after) .tg button[data-s="b"]{color:var(--ink)}
.sit-panel.after .tg button[data-s="a"]{color:#fff}

/* ---- calmer section: less text, more air ---- */
.sit h2{font-size:clamp(34px,5.4vw,64px);max-width:760px}
.sit .lead{font-size:18px;margin-top:14px}
.sq{margin-top:20px;max-width:none;display:inline-flex}
.sq em{margin-left:14px}
@media(max-width:899px){.sit-tab b{font-size:13.5px}.sq{display:flex}}

/* ================= "Right now": the whole story fits one desktop screen ================= */
@media(min-width:1000px){
  .sit{min-height:100svh;display:grid;align-items:center;padding:96px 0 40px}
  .sit .wrap{width:100%;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .sit-l{min-width:0}
  .sit h2{font-size:clamp(32px,3.5vw,52px);max-width:none;margin-top:12px}
  .sit .lead{margin-top:12px;font-size:17px}
  .sq{margin-top:18px}
  .sit-tabs{margin-top:22px;max-width:none}
  .sit-r{min-width:0}
  .sit-panel{grid-template-columns:1fr;gap:16px;padding:26px 28px 22px;margin-top:0;border-radius:32px;align-items:start}
  .worry{margin-top:8px;font-size:clamp(30px,3vw,42px)}
  .turn{margin-top:14px;padding-top:14px}
  .turn h3{font-size:clamp(20px,1.9vw,26px);margin:6px 0 12px}
  .turn .btn{min-height:46px;padding:0 24px;font-size:15px}
  .vzh{padding:10px 12px 0}
  .vzb{padding:12px 16px 6px;gap:8px}
  .vzf{padding:0 16px 10px}
  .row{padding:9px 12px}
  .slot{height:20px}
  .m{padding:8px 12px}
  .loc{gap:8px}
  .locs{gap:10px}
}

@media(min-width:1000px) and (max-height:800px){
  .sit{padding:80px 0 24px}
  .sit h2{font-size:clamp(30px,3vw,42px)}
  .sit .lead{display:none}
  .sq{margin-top:14px;padding:9px 16px}
  .sit-tabs{margin-top:16px}
  .sit-panel{padding:20px 24px 16px;gap:12px}
  .worry{font-size:clamp(26px,2.6vw,34px)}
  .turn{margin-top:10px;padding-top:10px}
  .vzb{padding:10px 14px 4px;gap:6px}
  .row{padding:7px 12px}
  .slot{height:16px}
  .tiny2{font-size:10px}
}
/* ================= steady card (no height change between situations or states) + roomier left column ================= */
@media(min-width:1000px){
  .worry{white-space:nowrap;font-size:clamp(24px,2.5vw,38px)}
  .turn h3{white-space:nowrap;font-size:clamp(18px,1.9vw,26px)}
  .vzb{height:262px;overflow:hidden;align-content:start}
  .js .sit-panel.play .vz{animation:thin .7s cubic-bezier(.2,.9,.2,1) both .15s}
  /* roomier left column */
  .sit-l .label{margin-bottom:6px}
  .sit h2{margin-top:20px}
  .sq{margin-top:32px}
  .sit .lead{margin-top:24px}
  .sit-tabs{margin-top:44px}
}
@media(min-width:1000px) and (max-height:800px){
  .vzb{height:226px}
  .sit h2{margin-top:14px}
  .sq{margin-top:22px}
  .sit-tabs{margin-top:28px}
}

@media(min-width:1000px){.vzb{height:282px}}
@media(min-width:1000px) and (max-height:800px){.vzb{height:250px}}

/* ================= "Right now": structured left column (3 groups, hairlines, steps anchored to bottom) + fix moved under the scene ================= */
.sit{overflow:hidden}
.sq{position:relative}
.sq-i{position:relative;display:inline-grid;place-items:center;width:28px;height:28px}
.sq-i::before,.sq-i::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:1px solid rgba(10,165,160,.55);opacity:0;pointer-events:none;animation:ping 5.6s ease-out infinite}
.sq-i::after{animation-delay:2.8s}
@keyframes ping{0%{transform:scale(.6);opacity:0}12%{opacity:.38}100%{transform:scale(15);opacity:0}}
.sit-g1,.sit-g3{position:relative;z-index:2}
.sit-g2{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.sq-i::before,.sq-i::after{animation:none;display:none}}

@media(min-width:1000px){
  .sit .wrap{align-items:stretch}
  .sit-l{display:flex;flex-direction:column;justify-content:space-between;gap:0;padding:4px 0}
  .sit-g1{padding-bottom:30px}
  .sit-g2{border-top:1px solid var(--line);padding:30px 0}
  .sit-g3{border-top:1px solid var(--line);padding-top:26px}
  .sit-g1 h2{margin-top:18px}
  .sq{margin-top:0}
  .sit .lead{margin-top:20px}
  .sit-tabs{margin-top:0}
  /* worry on top, scene in the middle, the fix + button at the bottom (empty space before the flip reads as padding) */
  .sit-copy{display:contents}
  .sit-copy .tiny2:first-child{order:1}
  .sit-copy .worry{order:2}
  .sit-panel .vz{order:3}
  .sit-copy .turn{order:4;margin-top:6px;padding-top:16px}
  .sit-panel{gap:14px}
}
@media(min-width:1000px) and (max-height:800px){
  .sit-g1{padding-bottom:16px}
  .sit-g2{padding:16px 0}
  .sit-g3{padding-top:14px}
}

/* ping ring: drawn large and scaled up from tiny so the border stays a hairline */
.sq-i::before,.sq-i::after{width:440px;height:440px;margin:-220px 0 0 -220px;border-width:1px;animation-name:ping2}
@keyframes ping2{0%{transform:scale(.06);opacity:0}10%{opacity:.4}100%{transform:scale(1);opacity:0}}
/* live dot in the hero eyebrow: soft blip + expanding ring */
.hero .label::before{animation:live 2.2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(10,165,160,.5)}70%{box-shadow:0 0 0 9px rgba(10,165,160,0)}100%{box-shadow:0 0 0 0 rgba(10,165,160,0)}}
@media (prefers-reduced-motion:reduce){.hero .label::before{animation:none}}

/* story chapter labels read as clock times */
#how .label.time{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em}

/* ================= "How it works" as a night scene: deep indigo-to-night, glowing phone, ghost clock behind each chapter ================= */
#how{background:radial-gradient(70% 60% at 72% 46%,rgba(20,120,200,.34),transparent 70%),linear-gradient(180deg,#0b1e3a 0%,#071a2c 50%,#04151b 82%,#04151b 100%);color:#e8f6fb}
#how .chap h2{color:#fff}
#how .chap h2 .it{color:#2dffd0}
#how .chap p{color:rgba(216,240,250,.74)}
#how .label.time{color:#2dffd0}
.chap{position:relative}
.chap::before{content:attr(data-t);position:absolute;left:-.04em;top:-.62em;z-index:-1;font:700 clamp(120px,17vw,250px)/1 var(--font-h,"Space Grotesk",system-ui,sans-serif);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(120,220,255,.16);pointer-events:none;white-space:nowrap}
#how .phone{box-shadow:0 0 0 .12em #1d4a68 inset,0 0 5.6em rgba(45,255,208,.22),0 3em 6em rgba(0,0,0,.5)}
#how .phone-wrap::before{content:"";position:absolute;width:150%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(45,200,255,.28),transparent 62%);z-index:0}
#how .amb-rings i{border-color:rgba(45,255,208,.5)}
@media(max-width:899px){.chap::before{font-size:96px;top:-.5em}}

/* smoothness: promote moving layers so scrubbing never repaints big text or glows */
#how .chap,#how .phone,#how .pic,#how .scr{will-change:transform,opacity;backface-visibility:hidden}
#how .chap::before{will-change:auto}
/* the story photo: hangs off the phone edge, swaps with each beat */
.pics{position:absolute;z-index:3;left:-8%;bottom:9%;width:min(58%,230px);aspect-ratio:4/5}
.pic{position:absolute;inset:0;margin:0;border-radius:1.2em;overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:0 22px 50px rgba(0,0,0,.5);background:#0a2233}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,21,27,.85))}
.pic figcaption{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;color:#fff;font:600 13px/1.25 var(--font-b,Inter,system-ui,sans-serif)}
.pic figcaption b{display:block;color:#2dffd0;font:600 11px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;margin-bottom:2px}
.pics .tag-sample{position:absolute;top:8px;left:8px;z-index:4}
@media(min-width:900px){.pics{left:-24%;bottom:12%;width:min(48%,250px)}}
@media(max-width:899px){.pics{left:-4%;bottom:6%;width:34%}.pic figcaption{font-size:10px;left:8px;right:8px}.pic figcaption b{font-size:9px}}

/* phone text must stay dark ink (the section colour is light for the night scene) */
#how .phone,#how .phone .screen{color:#0a2233}
#how .phone .ai-msg,#how .phone .sbar,#how .phone .place,#how .phone .rev,#how .phone .why,#how .phone .toast{color:#0a2233}
/* story photo: layered, tilted, floating card with sheen and a live dot */
.pics{transform:rotate(-4deg);animation:picfloat 7s ease-in-out infinite;transform-origin:70% 90%}
@keyframes picfloat{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-9px)}}
.pics::before,.pics::after{content:"";position:absolute;inset:0;border-radius:1.2em;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(45,255,208,.16),rgba(20,120,200,.1))}
.pics::before{transform:translate(-14px,10px) rotate(-5deg);opacity:.75}
.pics::after{transform:translate(-26px,20px) rotate(-9deg);opacity:.4}
.pic{border-color:rgba(255,255,255,.4);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 4px rgba(255,255,255,.06),0 0 40px rgba(45,255,208,.16)}
.pic::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,transparent 34%);pointer-events:none}
.pic figcaption b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#2dffd0;margin-right:6px;vertical-align:1px;animation:live 2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.pics{animation:none}.pic figcaption b::before{animation:none}}

/* phone booking screen: time slots as a clear vertical list (scoped: the Right-now section has its own .slots) */
#how .slots{display:flex;flex-direction:column;gap:.5em;margin-top:.5em}
#how .slots span{display:flex;align-items:center;gap:.7em;padding:.75em .9em;border-radius:1em;border:1px solid #dbe6ee;font-size:.98em;color:#3f5a6b;white-space:nowrap;background:#fff;transition:none}
#how .slots span i{width:1em;height:1em;border-radius:50%;border:.14em solid #b7c8d4;flex:none}
#how .slots .on{background:#e9f9f4;border-color:#9fdcc8;color:#0a8a6a;font-weight:600}
#how .slots .on i{border-color:#0a8a6a;background:radial-gradient(circle,#0a8a6a 42%,transparent 46%)}
#how .call{margin-top:.8em}
#how .call div{white-space:nowrap;padding:.8em .5em;font-size:.95em}
#how .call div:first-child{flex:.55}
#how .slots span{padding:.62em .9em}
#how .toast{margin-top:.8em;padding:.8em 1em}
#how .toast b{display:block;white-space:nowrap}
#how .toast br{display:none}
#how .toast{font-size:.9em;line-height:1.5}
#how .toast b{font-size:1em}

/* ================= type cohesion: every section heading/lead follows the site scale (h2 60, lead 19). "Right now" only shrinks on short screens so it still fits one screen. ================= */
@media(min-width:1000px) and (min-height:860px){
  .sit h2{font-size:60px}
  .sit .lead{font-size:19px}
}
@media(min-width:900px){.chap h2{font-size:clamp(42px,4.2vw,60px)}}
#how .label.time{font-family:Inter,system-ui,sans-serif;letter-spacing:.14em}
/* With Medmatis: "Your clinic" rises to the top of the list */
.sit-panel.after .row.hit{animation:rise .7s cubic-bezier(.2,.9,.2,1) both}
@keyframes rise{0%{opacity:0;transform:translateY(46px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sit-panel.after .row.hit{animation:none}}


/* ================= Patient journey (continues the night: same base as the end of the phone story, no seam) ================= */
.journey{position:relative;overflow:hidden;color:#d8f0fa;padding:64px 0 72px;background:radial-gradient(60% 50% at 78% 55%,rgba(20,120,200,.2),transparent 70%),radial-gradient(45% 45% at 12% 100%,rgba(10,165,160,.14),transparent 70%),linear-gradient(180deg,#04151b 0%,#061a28 100%)}
.journey h2{color:#fff}.journey h2 .it{color:#2dffd0}.journey .lead{color:rgba(216,240,250,.72)}.journey .label{color:#2dffd0}
.journey .mono-note{color:rgba(216,240,250,.45);margin-top:14px}
.jr{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px;position:relative}
.jr-s{position:relative;display:grid;gap:6px;padding:16px 16px 16px 76px;border-radius:20px;border:1px solid rgba(120,220,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.jr-n{position:absolute;left:16px;top:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(45,255,208,.25),rgba(20,120,200,.3));border:1px solid rgba(45,255,208,.5);box-shadow:0 0 24px rgba(45,255,208,.25)}
.jr-n svg{width:20px;height:20px;fill:none;stroke:#2dffd0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jr-day{font:600 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7fd8ff}
.jr-pl{font:600 20px/1.2 'Space Grotesk',Inter,sans-serif;color:#fff}
.jr-did{color:rgba(216,240,250,.78);font-size:15px}
.jr-th{margin-top:6px;padding:10px 12px;border-radius:14px;background:rgba(45,255,208,.09);border:1px solid rgba(45,255,208,.22);color:#eafff8;font:italic 400 17px/1.35 'Instrument Serif',Georgia,serif}
.jr-th small{display:block;font:600 10px/1.4 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#2dffd0;margin-bottom:2px}
.jr-psy{justify-self:start;margin-top:4px;padding:3px 10px;border-radius:999px;background:#2dffd0;color:#04151b;font:700 11px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.jr-close{margin-top:28px;font:600 clamp(20px,5vw,28px)/1.2 'Space Grotesk',Inter,sans-serif;color:#fff;max-width:640px}
@media(min-width:1000px){
  .journey{padding:110px 0 90px;min-height:100svh;display:grid;align-items:center}
  .jr{grid-template-columns:repeat(5,1fr);gap:16px;margin-top:36px}
  .jr::before{content:"";position:absolute;left:5%;right:5%;top:22px;height:2px;background:linear-gradient(90deg,rgba(45,255,208,.15),rgba(45,255,208,.7),rgba(45,255,208,.15));transform-origin:left;z-index:0}
  .jr-s{padding:64px 14px 16px;align-content:start;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
  .jr-n{left:50%;top:-22px;margin-left:-22px;z-index:1;background:#06202c}
  .jr-s{margin-top:22px}
  .jr-pl{font-size:19px}
  .jr-th{font-size:18px}
  .jr-close{margin-top:34px}
}
@media(min-width:1000px) and (max-height:820px){.journey{padding:96px 0 40px}.jr{margin-top:26px}.jr-s{padding-top:56px}.jr-th{font-size:16px}.jr-close{margin-top:20px}}
/* reveal: line draws, steps rise in order, the thought bubble lands last (progressive enhancement) */
.js .journey .jr::before{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.js .journey .jr-s{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--i)*.28s + .2s)}
.js .journey .jr-th,.js .journey .jr-psy{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i)*.28s + .75s)}
.js .journey .jr-close{opacity:0;transition:opacity .8s ease 2.1s}
.journey.go .jr::before{transform:scaleX(1)}
.journey.go .jr-s,.journey.go .jr-th,.journey.go .jr-psy,.journey.go .jr-close{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .journey .jr::before,.js .journey .jr-s,.js .journey .jr-th,.js .journey .jr-psy,.js .journey .jr-close{transition:none;opacity:1;transform:none}}
@media(min-width:1000px){.jr-did{min-height:3em}.jr-th{min-height:5.4em;align-content:start}.jr-s{grid-template-rows:auto auto auto auto 1fr auto}.jr-psy{align-self:end}}
@media(min-width:1000px){.jr{grid-template-columns:repeat(4,1fr);gap:22px}.jr::before{left:6%;right:6%}.jr-s{padding:66px 20px 20px}.jr-th{min-height:4.6em}.jr-pl{font-size:21px}.jr-did{font-size:16px}}
@media(min-width:1000px){.jr-th{min-height:0}.jr-did{min-height:0}.jr-s{padding:60px 20px 18px}.jr{margin-top:30px}.jr-s{grid-template-rows:none}.jr-psy{align-self:start;margin-top:10px}.hero .lead{max-width:590px}}

/* team + trust merged: slim four-item trust strip under the faces */
.tstrip{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
.tstrip li{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:#fff;display:grid;gap:4px}
.tstrip b{font:600 17px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.tstrip span{color:var(--muted);font-size:15px}
@media(min-width:900px){.tstrip{grid-template-columns:repeat(4,1fr);gap:16px}}

/* ================= Case-study trail: walk a path through four stations; the last one is the 'treat' ================= */
.results{padding:90px 0 80px}
.ct-tabs{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.ct-tab{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 15px Inter,system-ui,sans-serif;color:var(--muted);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.ct-tab.on{background:linear-gradient(100deg,var(--teal),var(--blue));color:#fff;border-color:transparent}
.ct{margin-top:26px}
.ct-who{display:flex;align-items:center;gap:14px}
.ct-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 6px 18px rgba(10,60,100,.18)}
.ct-who b{display:block;font:600 18px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.ct-sample{display:inline-block;margin-top:2px;font:600 10.5px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a6b00;background:#fff4cc;border-radius:999px;padding:2px 9px}
.ct-path{position:relative;margin-top:26px}
.ct-svg,.ct-walker{display:none}
.ct-steps{list-style:none;margin:0;padding:0 0 0 30px;display:grid;gap:14px;position:relative}
.ct-steps::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(180deg,#b9d3de 0 6px,transparent 6px 12px)}
.ct-st{position:relative;display:grid;gap:4px;padding:16px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(10,60,100,.06)}
.ct-node{position:absolute;left:-30px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--teal);color:var(--teal);font:700 13px Inter,sans-serif}
.ct-t{font:600 11px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.ct-h{font:600 20px/1.2 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.ct-p{color:var(--muted);font-size:15px}
.ct-m{display:flex;gap:18px;margin-top:6px;flex-wrap:wrap}
.ct-m span{font:600 12px Inter,system-ui,sans-serif;color:rgba(255,255,255,.85);display:grid;gap:0}
.ct-m em{font:700 clamp(34px,9vw,48px)/1 'Space Grotesk',Inter,sans-serif;font-style:normal;color:#fff}
.ct-st.win{background:linear-gradient(135deg,#0aa5a0,#1478c8);border-color:transparent;color:#fff}
.ct-st.win .ct-t{color:#b6fff0}.ct-st.win .ct-h{color:#fff}.ct-st.win .ct-node{background:#2dffd0;border-color:#2dffd0;color:#04151b}
.ct-more{margin-top:18px;font:600 15px Inter,system-ui,sans-serif}.ct-more span{color:var(--muted)}.ct-more a{color:var(--teal)}
/* progressive enhancement: stations light up in turn */
.js .ct-st{opacity:.28;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.2,1)}
.js .ct-st.on{opacity:1;transform:none}
.js .ct-st.win.on .ct-m em{animation:pop .7s cubic-bezier(.2,1.4,.3,1) both .15s}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.js .ct-st{opacity:1;transform:none;transition:none}.js .ct-st.win.on .ct-m em{animation:none}}
@media(min-width:1000px){
  .results{padding:96px 0 90px}
  .ct-path{margin-top:34px;padding-top:46px}
  .ct-svg{display:block;position:absolute;left:0;top:0;width:100%;height:120px;overflow:visible}
  .ct-base{fill:none;stroke:#c6dbe5;stroke-width:2.5;stroke-dasharray:3 9;stroke-linecap:round}
  .ct-line{fill:none;stroke:url(#ctg);stroke:var(--teal);stroke-width:3.5;stroke-linecap:round}
  .ct-walker{display:block;position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(10,165,160,.2),0 0 26px rgba(10,165,160,.6);z-index:2}
  .ct-steps{padding:0;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:64px}
  .ct-steps::before{display:none}
  .ct-st{padding:22px 20px 22px;min-height:190px;align-content:start}
  .ct-node{left:50%;top:-64px;margin-left:-14px;z-index:1}
  .ct-h{font-size:22px}
}
@media(min-width:1000px){.ct-st{min-height:0}.ct-m{flex-wrap:nowrap;gap:18px}.ct-m em{font-size:38px}.ct-h{font-size:21px}}
.ct-m em{white-space:nowrap}@media(min-width:1000px){.ct-m em{font-size:34px}.ct-m span{white-space:nowrap}}

/* ================= How we work: two heartbeats over six months (monitor look, same night palette) ================= */
.never{padding:90px 0 96px;background:radial-gradient(60% 55% at 80% 30%,rgba(20,120,200,.18),transparent 70%),linear-gradient(180deg,#04151b,#061a28);color:#d8f0fa;position:relative;overflow:hidden}
.never h2{color:#fff}.never h2 .it{color:#2dffd0}.never .lead{color:rgba(216,240,250,.72)}.never .label{color:#2dffd0}
.rh{margin-top:38px;display:grid;gap:22px}
.rh-row{display:grid;gap:8px}
.rh-lab{font:600 12px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(216,240,250,.6)}
.rh-our .rh-lab{color:#2dffd0}
.rh-track{position:relative;height:110px;border-radius:20px;border:1px solid rgba(120,220,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));overflow:visible}
.rh-track svg{position:absolute;inset:0;width:100%;height:100%;padding:0 10px}
.rh-base{fill:none;stroke:rgba(120,220,255,.14);stroke-width:1.5}
.rh-line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:0}
.rh-typ .rh-line{stroke:#8aa3b3}
.rh-our .rh-line{stroke:#2dffd0;filter:drop-shadow(0 0 6px rgba(45,255,208,.6))}
.rh-quiet{position:absolute;right:14px;top:50%;transform:translateY(-50%);padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font:500 13px Inter,system-ui,sans-serif;color:#b9c9d4}
.rh-tag{position:absolute;bottom:-14px;transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:999px;background:#2dffd0;color:#04151b;font:700 11px/1.5 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.rh-axis{display:grid;grid-template-columns:repeat(6,1fr);text-align:center;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(216,240,250,.45);margin-top:10px}
.rh-close{margin-top:34px;font:600 clamp(22px,5.4vw,32px)/1.2 'Space Grotesk',Inter,sans-serif;color:#fff;max-width:620px}
.never .btn{margin-top:22px}
/* draw-in: typical line fades to flat and goes quiet, then ours draws with a steady beat */
.js .never .rh-quiet,.js .never .rh-tag{opacity:0}
.js .never .rh-tag{transform:translateX(-50%) translateY(6px)}
.never.go .rh-tag{opacity:1;transform:translateX(-50%);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(3.6s + var(--k)*.55s)}
@media(prefers-reduced-motion:reduce){.js .never .rh-quiet,.js .never .rh-tag{opacity:1;transition:none!important;transform:translateX(-50%)}}
@media(min-width:900px){.never{padding:120px 0 120px}.rh-track{height:130px}.rh{gap:30px}}
@media(max-width:699px){.rh-tag:not(:first-of-type){display:none}.rh-tag{font-size:10px}.rh-axis span:nth-child(even){visibility:hidden}.rh-quiet{font-size:11px;padding:4px 8px}}
@media(max-width:699px){.rh-tag:first-of-type,.never.go .rh-tag:first-of-type,.js .never .rh-tag:first-of-type{left:6px!important;transform:none}.rh-axis span{white-space:nowrap;font-size:10px}.rh-quiet{top:auto;bottom:8px;transform:none}}

/* one heartbeat: silence first, then a steady pulse (no comparison) */
.rh-track{height:150px}
.rh-line{stroke:#2dffd0;filter:drop-shadow(0 0 6px rgba(45,255,208,.6))}
.rh-sil{position:absolute;left:18px;top:50%;margin-top:14px;max-width:11%;font:italic 400 17px/1.25 'Instrument Serif',Georgia,serif;color:rgba(216,240,250,.55)}
.rh-axis{grid-template-columns:14% repeat(6,1fr)}
.js .never .rh-sil{opacity:0}
.never.go .rh-sil{opacity:1;transition:opacity 1s ease .3s}
.never.go .rh-tag{transition-delay:var(--t)}
@media(prefers-reduced-motion:reduce){.js .never .rh-sil{opacity:1;transition:none}}
@media(max-width:699px){.rh-sil{font-size:13px;left:10px;max-width:15%}.rh-track{height:130px}}

.rh-line{stroke-dashoffset:0}
.rh-head{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#eafff8;box-shadow:0 0 0 4px rgba(45,255,208,.25),0 0 22px rgba(45,255,208,.9);pointer-events:none;opacity:0;transition:opacity .4s}
.never.go .rh-head{opacity:1}
@media(prefers-reduced-motion:reduce){.rh-head{display:none}}/* logo-faithful beats: sharp straight lines (no rounding), drawn in real pixels */
.rh-line{stroke-linejoin:miter;stroke-miterlimit:6;stroke-linecap:butt;stroke-width:2.4}
.rh-track{height:170px}
.rh-track svg{padding:0}
@media(max-width:699px){.rh-track{height:150px}}
.rh-sil{top:36%;margin-top:0}
@media(max-width:699px){.rh-sil{top:30%}}
@media(max-width:699px){.rh-axis span{font-size:9px;letter-spacing:.03em}.rh-sil{max-width:22%}}

/* journey steps under the trace: each lights up as the heartbeat passes it */
.rh-sil,.rh-tag,.rh-axis{display:none!important}
.rh-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.rh-steps li{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(120,220,255,.12);opacity:.4;transition:opacity .5s ease}
.rh-steps li.on{opacity:1}
.rh-steps b{font:600 11px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#2dffd0}
.rh-steps span{font:600 16px/1.3 'Space Grotesk',Inter,sans-serif;color:#fff}
.no-js .rh-steps li,.rh-steps li:only-child{opacity:1}
@media(min-width:900px){
  .rh-steps{grid-template-columns:repeat(6,1fr);gap:0;margin-top:14px}
  .rh-steps li{display:grid;grid-template-columns:1fr;gap:6px;padding:14px 10px 0;border-top:0;text-align:center;justify-items:center}
  .rh-steps span{font-size:16px;max-width:15ch}
}

/* ================= Patient journey v2: a vertical dialogue. Left = what she did, right = what she thought. Rows reveal top to bottom. ================= */
.jv{list-style:none;margin:30px 0 0;padding:0;position:relative;display:grid;gap:14px}
.jv-s{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"n l" "n r";gap:6px 14px;position:relative}
.jv-l{grid-area:l;display:grid;gap:2px}
.jv-n{grid-area:n;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#06202c;border:1px solid rgba(45,255,208,.5);box-shadow:0 0 22px rgba(45,255,208,.25);position:relative;z-index:1}
.jv-n svg{width:20px;height:20px;fill:none;stroke:#2dffd0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jv-r{grid-area:r;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.jv-day{font:600 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7fd8ff}
.jv-pl{font:600 20px/1.2 'Space Grotesk',Inter,sans-serif;color:#fff}
.jv-did{color:rgba(216,240,250,.78);font-size:15px}
.jv-th{padding:10px 14px;border-radius:16px;background:rgba(45,255,208,.09);border:1px solid rgba(45,255,208,.24);color:#eafff8;font:italic 400 19px/1.3 'Instrument Serif',Georgia,serif}
.jv-th small{display:block;font:600 10px/1.4 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#2dffd0;margin-bottom:2px}
.jv-psy{padding:3px 10px;border-radius:999px;background:#2dffd0;color:#04151b;font:700 11px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.jv-close{margin-top:26px}
@media(min-width:1000px){
  .jv{margin-top:26px;gap:0}
  .jv::before{content:"";position:absolute;left:50%;top:22px;bottom:22px;width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(45,255,208,.7),rgba(45,255,208,.15));transform-origin:top}
  .jv-s{grid-template-columns:1fr 44px 1fr;grid-template-areas:"l n r";gap:0 28px;align-items:center;padding:10px 0}
  .jv-l{text-align:right;justify-items:end}
  .jv-pl{font-size:21px}
  .jv-r{justify-content:flex-start}
  .journey{padding:96px 0 70px}
  .jv-close{margin-top:22px}
}
@media(min-width:1000px) and (max-height:820px){.jv-s{padding:6px 0}.jv-th{font-size:17px;padding:8px 12px}.journey{padding:88px 0 40px}}
.js .journey .jv::before{transform:scaleY(0);transition:transform 2.4s cubic-bezier(.2,.8,.2,1)}
.js .journey .jv-s .jv-l,.js .journey .jv-s .jv-n{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--i)*.6s + .2s)}
.js .journey .jv-s .jv-r{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i)*.6s + .6s)}
.journey.go .jv::before{transform:scaleY(1)}
.journey.go .jv-s .jv-l,.journey.go .jv-s .jv-n,.journey.go .jv-s .jv-r{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .journey .jv::before,.js .journey .jv-s .jv-l,.js .journey .jv-s .jv-n,.js .journey .jv-s .jv-r{transition:none;opacity:1;transform:none}}
@media(min-width:1000px){.journey .wrap{width:100%}.journey{padding:112px 0 64px}}
@media(min-width:1000px) and (max-height:820px){.journey{padding:96px 0 36px}}

/* journey v2b: symmetric cards either side of the line, header centred, tag inside the thought bubble (less clumsy) */
@media(min-width:1000px){
  .journey .label,.journey h2,.journey .lead,.journey .mono-note{text-align:center;margin-left:auto;margin-right:auto}
  .journey .lead{max-width:none}
  .jv{max-width:1020px;margin:26px auto 0}
  .jv-s{grid-template-columns:1fr 44px 1fr;gap:0 26px;align-items:stretch;padding:7px 0}
  .jv-n{align-self:center}
  .jv-l{text-align:left;justify-items:start;align-content:center;padding:14px 20px;border-radius:18px;border:1px solid rgba(120,220,255,.16);background:rgba(255,255,255,.04);position:relative}
  .jv-r{display:block;position:relative}
  .jv-th{display:block;height:100%;padding:14px 20px;border-radius:18px;box-sizing:border-box;font-size:20px}
  .jv-psy{position:absolute;top:14px;right:16px}
  .jv-l::after,.jv-r::before{content:"";position:absolute;top:50%;width:26px;height:2px;background:rgba(45,255,208,.35)}
  .jv-l::after{right:-26px}.jv-r::before{left:-26px}
  .jv-close{text-align:center;margin-left:auto;margin-right:auto}
  .jv-close+.mono-note{margin-top:8px}
}
@media(min-width:1000px){
  .jv-s{padding:4px 0}
  .jv-l{padding:9px 18px;gap:0}
  .jv-pl{font-size:19px}.jv-did{font-size:14px}
  .jv-th{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;font-size:19px}
  .jv-psy{top:50%;transform:translateY(-50%)}
  .journey{padding:104px 0 40px}
  .jv{margin-top:20px}.jv-close{margin-top:16px;font-size:24px}
}
@media(min-width:1000px) and (max-height:820px){.journey{padding:92px 0 24px}.jv-l{padding:6px 16px}.jv-th{padding:6px 16px}.jv-close{margin-top:10px;font-size:22px}}

/* case trail: station 4 keeps the gradient card, but its number circle matches 1-3 */
.ct-st.win .ct-node{background:#fff;border-color:var(--teal);color:var(--teal)}
.lite .soonchip{color:#0a2233}

/* ================= Client stories v2: cinema mode. A 3D ring of vertical 9:16 cards on the same night backdrop. ================= */
.stories{padding:78px 0 84px;background:radial-gradient(60% 50% at 50% 62%,rgba(20,120,200,.22),transparent 70%),linear-gradient(180deg,#04151b,#061a28);color:#d8f0fa;overflow:hidden;position:relative}
.stories h2{color:#fff}.stories h2 .it{color:#2dffd0}.stories .label{color:#2dffd0}
.vdeck{position:relative;margin-top:26px;outline:none;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab}
.vdeck:active{cursor:grabbing}
.vd-glow{position:absolute;left:50%;top:42%;width:min(560px,90vw);aspect-ratio:1;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(45,255,208,.28),rgba(20,120,200,.12) 45%,transparent 68%);pointer-events:none;transition:opacity .8s,transform .8s}
.vdeck.playing .vd-glow{opacity:1;transform:scale(1.3)}
.vd-stage{position:relative;perspective:1700px;perspective-origin:50% 42%;height:calc(var(--cw) * 16 / 9 + 70px);display:flex;justify-content:center;align-items:center;--cw:clamp(176px,52vw,232px);transform-style:preserve-3d}
.vd-ring{position:relative;width:var(--cw);aspect-ratio:9/16;transform-style:preserve-3d;will-change:transform}
.vc{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#0a2233;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(45,255,208,.06);will-change:transform,opacity;cursor:pointer}
.vc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.vc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,21,27,.05) 40%,rgba(4,21,27,.85));pointer-events:none}
.vc::after{content:"";position:absolute;inset:0;background:#04151b;opacity:var(--dim,0);pointer-events:none;transition:none}
.vc.front{border-color:rgba(45,255,208,.55);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 60px rgba(45,255,208,.28)}
.vc-name{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:grid;gap:2px;color:#fff;pointer-events:none}
.vc-name b{font:600 17px/1.2 'Space Grotesk',Inter,sans-serif}
.vc-name span{font:500 12.5px Inter,system-ui,sans-serif;color:rgba(216,240,250,.8)}
.vc-play{position:absolute;left:50%;top:44%;width:66px;height:66px;margin:-33px 0 0 -33px;z-index:3;border-radius:50%;border:0;background:rgba(255,255,255,.96);cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 8px rgba(255,255,255,.18);animation:vcpulse 2.4s ease-out infinite}
.vc-play i{border-left:19px solid #0a2233;border-block:11px solid transparent;margin-left:5px}
@keyframes vcpulse{0%{box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 20px rgba(255,255,255,0)}100%{box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 0 rgba(255,255,255,0)}}
.vc:not(.front) .vc-play{animation:none}
.vc .soonchip{position:absolute;left:12px;top:12px;z-index:3;font:600 10.5px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.94);border-radius:999px;padding:4px 10px;color:#0a2233}
.vc iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:6;background:#000}
.vdeck.playing .vc:not(.front){filter:blur(3px) brightness(.6);transition:filter .6s}
.vd-meta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
.vd-ctrl{display:flex;align-items:center;gap:16px}
.vd-ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .3s}
.vd-ctrl button:hover{background:rgba(45,255,208,.18);transform:scale(1.08)}
.vd-ctrl svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vd-dots{display:flex;gap:8px}
.vd-dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.28);transition:width .4s,background .4s}
.vd-dots i.on{width:26px;background:#2dffd0}
.vd-hint{margin:0;font:500 13px Inter,system-ui,sans-serif;color:rgba(216,240,250,.5)}
@media(min-width:700px){.vd-stage{--cw:clamp(210px,24vw,250px)}}
@media(min-width:1000px){.stories{padding:96px 0 100px}.vd-stage{--cw:clamp(230px,17.5vw,270px)}}
@media(max-height:820px) and (min-width:1000px){.vd-stage{--cw:clamp(200px,15vw,236px)}.stories{padding:88px 0 60px}}
@media(prefers-reduced-motion:reduce){.vc-play{animation:none}}
.vc:not(.front) .vc-play{opacity:0;pointer-events:none}
.vc .vc-play{transition:opacity .4s}

/* glassy play button + a grab strip so the ring can be turned while a video plays */
.vc-play{background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 8px rgba(255,255,255,.1)}
.vc-play i{border-left-color:rgba(255,255,255,.95)}
@keyframes vcpulse{0%{box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 0 rgba(255,255,255,.4)}70%{box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 20px rgba(255,255,255,0)}100%{box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 0 rgba(255,255,255,0)}}
.vc-grab{position:absolute;left:0;right:0;top:0;height:34px;z-index:8;display:grid;place-items:center;cursor:grab;font:600 10.5px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(4,21,27,.7),rgba(4,21,27,0));text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vc-grab::before{content:"";position:absolute;top:7px;width:36px;height:4px;border-radius:9px;background:rgba(255,255,255,.55)}
.vc-grab{padding-top:14px}

/* play icon: clearly see-through glass */
.vc-play{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 26px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
.vc-play i{border-left-color:rgba(255,255,255,.82)}
@keyframes vcpulse{0%{box-shadow:0 8px 26px rgba(0,0,0,.22),0 0 0 0 rgba(255,255,255,.3)}70%{box-shadow:0 8px 26px rgba(0,0,0,.22),0 0 0 22px rgba(255,255,255,0)}100%{box-shadow:0 8px 26px rgba(0,0,0,.22),0 0 0 0 rgba(255,255,255,0)}}

/* ================= Journey: scroll-linked reveal (desktop). A taller section holds the content in view while rows appear as you scroll. ================= */
@media(min-width:1000px) and (min-height:640px){
  .journey{overflow:clip;display:block;min-height:0;height:172svh;padding:0}
  .journey>.wrap{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:72px;padding-bottom:24px}
  .js .journey.sc .jv::before{transform:scaleY(var(--lp,0));transition:none}
  .js .journey.sc .jv-s .jv-l,.js .journey.sc .jv-s .jv-n,.js .journey.sc .jv-s .jv-r,.js .journey.sc .jv-close,.js .journey.sc .mono-note{transition:opacity .45s ease,transform .45s ease;transition-delay:0s}
  .js .journey.sc .jv-s .jv-l,.js .journey.sc .jv-s .jv-n{opacity:0;transform:translateY(16px)}
  .js .journey.sc .jv-s .jv-r{opacity:0;transform:translateX(-14px)}
  .js .journey.sc .jv-s.on .jv-l,.js .journey.sc .jv-s.on .jv-n{opacity:1;transform:none}
  .js .journey.sc .jv-s.on .jv-r{opacity:1;transform:none;transition-delay:.12s}
  .js .journey.sc .jv-close{opacity:0}.js .journey.sc.fin .jv-close{opacity:1}
}
@media(min-width:1000px) and (min-height:640px){.journey>.wrap{width:100%}.jv{width:100%}}

/* one continuous night: client stories, How we work and the journey share the same base so there is no seam between them */
.stories,.never{background:radial-gradient(60% 50% at 50% 30%,rgba(20,120,200,.18),transparent 70%),#061a28}
.stories{background:radial-gradient(60% 50% at 50% 62%,rgba(20,120,200,.2),transparent 70%),#061a28}

/* five process stages under the trace */
.rh-steps{grid-template-columns:1fr}
.rh-steps li i{font:600 11px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.12em;color:rgba(45,255,208,.6)}
.rh-steps span{font-weight:500;font-size:15px;color:rgba(216,240,250,.85);max-width:24ch}
.rh-steps b{font:600 20px 'Space Grotesk',Inter,sans-serif;letter-spacing:0;text-transform:none;color:#fff}
@media(min-width:900px){.rh-steps{grid-template-columns:repeat(5,1fr)}.rh-steps li{gap:4px}}
@media(max-width:899px){.rh-steps li{grid-template-columns:34px 92px 1fr}.rh-steps span{max-width:none}}
@media(min-width:900px){.rh-steps li{align-content:start;align-items:start;padding-top:14px}}

/* ================= Team v2: founder feature card + tilted, flip-on-hover crew cards. Serious domain, playful delivery. ================= */
.faces{display:none}
.crew{margin-top:34px;display:grid;gap:26px}
.tg2{display:inline-block;padding:5px 12px;border-radius:999px;background:#fff4a8;color:#0a2233;font:700 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;transform:rotate(-2deg);box-shadow:0 4px 0 rgba(10,34,51,.12)}
.tg2.sm{font-size:10.5px;padding:4px 10px}
.boss{display:grid;gap:18px;padding:16px;border-radius:32px;background:linear-gradient(135deg,#0aa5a0,#1478c8);color:#fff;box-shadow:0 30px 60px rgba(10,90,140,.25);position:relative;overflow:hidden}
.boss::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.boss-ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;background:#7feddd;display:block}
.boss-tx{display:grid;gap:10px;align-content:center;position:relative}
.boss-tx h3{font:600 clamp(28px,7vw,40px)/1.05 'Space Grotesk',Inter,sans-serif;color:#fff;margin:4px 0 0}
.bub{position:relative;margin:6px 0 0;padding:16px 18px;border-radius:22px 22px 22px 6px;background:#fff;color:#0a2233;font:italic 400 clamp(20px,5vw,26px)/1.25 'Instrument Serif',Georgia,serif}
.boss-sub{font:500 14px Inter,system-ui,sans-serif;color:rgba(255,255,255,.85)}
.mates{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mate{all:unset;box-sizing:border-box;display:block;cursor:pointer;perspective:900px;transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.mate:hover,.mate:focus-visible{transform:rotate(0) translateY(-8px)}
.mate:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:26px}
.mate-in{display:block;position:relative;aspect-ratio:4/5;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.9,.2,1)}
.mate:hover .mate-in,.mate:focus-visible .mate-in,.mate.flip .mate-in{transform:rotateY(180deg)}
.mate-f,.mate-b{position:absolute;inset:0;border-radius:24px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px rgba(20,90,130,.2)}
.mate-f img{width:100%;height:100%;object-fit:cover;background:#7feddd;display:block}
.mate-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;background:linear-gradient(180deg,transparent,rgba(4,21,27,.82));display:grid;gap:6px;color:#fff}
.mate-cap b{font:600 16px/1.15 'Space Grotesk',Inter,sans-serif}
.mate-b{transform:rotateY(180deg);background:linear-gradient(160deg,#04151b,#0b2a3c);color:#fff;padding:18px 16px;display:grid;align-content:center;gap:12px;text-align:left}
.mate-b b{font:600 16px 'Space Grotesk',Inter,sans-serif;color:#2dffd0}
.mate-b em{font:italic 400 clamp(18px,4.6vw,22px)/1.25 'Instrument Serif',Georgia,serif;font-style:italic;color:#eafff8}
.mate-b .tg2{justify-self:start}
@media(min-width:900px){
  .crew{grid-template-columns:1.15fr 1.85fr;gap:34px;align-items:center;margin-top:44px}
  .boss{grid-template-columns:1fr;padding:20px}
  .mates{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(min-width:1200px){.crew{grid-template-columns:1fr 2fr}.mates{grid-template-columns:repeat(4,1fr);gap:18px}}
@media(prefers-reduced-motion:reduce){.mate,.mate-in{transition:none}.mate{transform:none}}
@media(min-width:900px){
  .crew{grid-template-columns:1fr;gap:26px;align-items:stretch}
  .boss{grid-template-columns:300px 1fr;gap:34px;padding:20px 34px 20px 20px;align-items:center}
  .boss-ph img{aspect-ratio:1}
  .mates{grid-template-columns:repeat(4,1fr);gap:22px}
  .mate-cap b{font-size:18px}
}
@media(min-width:900px) and (max-height:820px){.boss{grid-template-columns:230px 1fr}.mates{gap:16px}}

.boss-ph{align-self:start}.boss-tx .tg2{justify-self:start}
@media(min-width:900px){.boss{align-items:center}.boss-ph{width:300px}}
.boss-ph img,.mate-f img{height:auto}
.mate-f img{height:100%}
@media(min-width:900px){.boss{grid-template-columns:250px 1fr}.boss-ph{width:250px}}
.mate-cap .tg2{justify-self:start}
.mate.rv,.js .mate.rv.in{transform:rotate(var(--r,0deg))}
.mate.rv:hover,.js .mate.rv.in:hover{transform:rotate(0) translateY(-8px)}

/* trust: four commitments with icons (replaces the plain strip and the visible "Reviewed by" line) */
.tstrip,.byline{display:none}
.tr-h{margin-top:56px;display:flex;align-items:center;gap:16px;font:600 12px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.tr-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.tr{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.tr li{position:relative;display:grid;gap:8px;align-content:start;padding:22px 20px 22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(10,60,100,.06);transition:transform .4s cubic-bezier(.2,.9,.2,1),box-shadow .4s}
.tr li:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(10,60,100,.13)}
.tr-i{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--blue));box-shadow:0 10px 22px rgba(10,140,170,.3);margin-bottom:6px}
.tr-i svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tr b{font:600 20px/1.2 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.tr li>span:last-child{color:var(--muted);font-size:15.5px;line-height:1.45}
@media(min-width:700px){.tr{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tr{grid-template-columns:repeat(4,1fr);gap:18px}}
@media(prefers-reduced-motion:reduce){.tr li{transition:none}}

/* ================= Team v3: same design language as the rest of the site (ink/teal/mint, hairlines, uppercase teal labels, dark accent card). No tilt, no yellow. ================= */
.tg2{background:none;box-shadow:none;transform:none;padding:0;border-radius:0;font:600 11.5px/1.3 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.tg2.sm{font-size:10.5px;padding:0}
.crew{gap:22px}
.boss{background:radial-gradient(70% 90% at 85% 0%,rgba(20,120,200,.3),transparent 70%),linear-gradient(180deg,#061a28,#04151b);border:1px solid rgba(120,220,255,.14);box-shadow:0 30px 70px rgba(4,21,27,.28);border-radius:28px}
.boss::before{display:none}
.boss-ph img{border-radius:20px;background:#7feddd}
.boss-tx{gap:12px}
.boss-tx .tg2{color:#2dffd0}
.boss-tx h3{color:#fff;font-size:clamp(28px,6vw,38px);margin:0}
.bub{background:none;padding:0;border-radius:0;color:#eafff8;font:italic 400 clamp(22px,4.6vw,30px)/1.25 'Instrument Serif',Georgia,serif;max-width:32ch}
.bub::before{content:"";display:block;width:34px;height:2px;background:#2dffd0;margin-bottom:14px}
.boss-sub{color:rgba(216,240,250,.7);font-size:14.5px}
.mate,.mate.rv,.js .mate.rv.in{transform:none}
.mate:hover,.mate:focus-visible,.mate.rv:hover,.js .mate.rv.in:hover{transform:translateY(-6px)}
.mate-f,.mate-b{border-radius:22px;box-shadow:0 14px 34px rgba(10,60,100,.12);border:1px solid var(--line)}
.mate-cap{padding:44px 16px 16px;background:linear-gradient(180deg,transparent,rgba(4,21,27,.86))}
.mate-cap b{font:600 18px/1.15 'Space Grotesk',Inter,sans-serif}
.mate-cap .tg2{color:#7fe9dc}
.mate-f::after{content:"";position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2233' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0113.5-5.8L20 8M20 4v4h-4M20 12a8 8 0 01-13.5 5.8L4 16M4 20v-4h4'/%3E%3C/svg%3E") center/16px no-repeat}
.mate-b{background:radial-gradient(80% 60% at 80% 0%,rgba(20,120,200,.3),transparent 70%),#04151b;border-color:rgba(120,220,255,.14);padding:22px 20px;gap:14px}
.mate-b b{color:#fff;font-size:18px}
.mate-b em{color:#eafff8;font-size:clamp(19px,2.2vw,23px)}
.mate-b .tg2{color:#2dffd0}
.mate-b::before{content:"";width:28px;height:2px;background:#2dffd0}

/* team: no corner icon; motion instead */
.mate-f::after{display:none}
.boss-tx .tg2::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2dffd0;margin-right:8px;vertical-align:1px;animation:live 2.2s ease-out infinite}
.boss::after{content:"";position:absolute;right:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(45,255,208,.2),transparent 65%);animation:drift 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-50px,-30px)}}
.boss-ph img{transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.boss:hover .boss-ph img{transform:scale(1.05)}
.boss-ph{overflow:hidden;border-radius:20px}
.js .boss.rv .bub::before{width:0;transition:width 1s cubic-bezier(.2,.9,.2,1) .5s}
.js .boss.rv.in .bub::before{width:34px}
.mate-f img{transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.mate:hover .mate-f img{transform:scale(1.06)}
.mate-cap .tg2{position:relative;justify-self:start}
.mate-cap .tg2::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:#7fe9dc;transition:width .6s ease}
.mate:hover .mate-cap .tg2::after{width:100%}
@media(prefers-reduced-motion:reduce){.boss::after,.boss-tx .tg2::before{animation:none}.boss-ph img,.mate-f img{transition:none}}

.js .rv.in{opacity:1;transform:none}
.js .rv.in.mate{transform:none}

.boss-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.bl{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(120,220,255,.28);background:rgba(255,255,255,.06);color:#eafff8;font:600 14px Inter,system-ui,sans-serif;text-decoration:none;transition:background .3s,border-color .3s,transform .3s}
.bl svg{width:18px;height:18px;fill:currentColor;flex:none}
.bl:hover{background:rgba(45,255,208,.16);border-color:rgba(45,255,208,.6);transform:translateY(-2px)}
.bl:focus-visible{outline:2px solid #2dffd0;outline-offset:3px}

/* founder links: small round icon buttons */
.bl{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;gap:0}
.bl svg{width:17px;height:17px}
.boss-links{gap:8px}

/* trust icons: each does one small, meaningful thing -- on hover only (2026-09-28: was an always-on loop;
   the section now stays calm at rest and each icon plays its character animation only while its card is
   hovered, same idea as the services page icons below). Static/resting state shows each icon "resolved" --
   heart and person at rest, the shield's checkmark fully drawn, the eye open -- and hovering replays the
   gesture that explains it. */
.ti-heart svg{transform-origin:50% 55%}
.ti-person svg{transform-origin:50% 100%}
.ti-shield .ck{stroke-dasharray:1;stroke-dashoffset:0}
.ti-eye .pu{transform-origin:12px 12px}
.tr li:hover .ti-heart svg{animation:heartbeat 1.6s ease-in-out infinite}
.tr li:hover .ti-person svg{animation:nod 1.6s ease-in-out infinite}
.tr li:hover .ti-shield .ck{animation:ckdraw 1.6s ease-in-out infinite}
.tr li:hover .ti-eye .pu{animation:blink 1.6s ease-in-out infinite}
@keyframes heartbeat{0%,45%,100%{transform:scale(1)}8%{transform:scale(1.18)}16%{transform:scale(1)}26%{transform:scale(1.12)}36%{transform:scale(1)}}
@keyframes nod{0%,45%,100%{transform:translateY(0)}12%{transform:translateY(-3px)}24%{transform:translateY(0)}}
@keyframes ckdraw{0%,100%{stroke-dashoffset:0}45%{stroke-dashoffset:1}70%{stroke-dashoffset:0}}
@keyframes blink{0%,30%,100%{transform:scaleY(1)}36%{transform:scaleY(.1)}42%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.tr li:hover .ti-heart svg,.tr li:hover .ti-person svg,.tr li:hover .ti-shield .ck,.tr li:hover .ti-eye .pu{animation:none}}
.tr-i{transition:transform .4s cubic-bezier(.2,.9,.2,1)}
/* hover: a gentle grow, no tilt */
.tr li:hover{transform:scale(1.03)}
.tr li:hover .tr-i{transform:scale(1.12)}

/* deck of story cards: the two ghost cards behind the photo breathe slightly as cards are dealt off the top */
.pics::before{animation:deckA 6s ease-in-out infinite alternate}
.pics::after{animation:deckB 7s ease-in-out infinite alternate}
@keyframes deckA{from{transform:translate(-14px,10px) rotate(-5deg)}to{transform:translate(-18px,12px) rotate(-7deg)}}
@keyframes deckB{from{transform:translate(-26px,20px) rotate(-9deg)}to{transform:translate(-32px,22px) rotate(-11deg)}}
@media(prefers-reduced-motion:reduce){.pics::before,.pics::after{animation:none}}
/* ghost cards sit BEHIND the photo (they were drawing a see-through outline over it) */
.pics::before,.pics::after{z-index:-1}
.pic{z-index:1}

/* ================= Blog: an answer-first library, magazine feel. Reuses the site's ink/teal/blue/mint language. ================= */
.crumbs{font:600 12px Inter,system-ui,sans-serif;letter-spacing:.06em;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:14px}
.crumbs a{color:var(--teal)}
.lib-hero{padding:132px 0 20px}
/* was missing a font-size entirely -- fell back to the browser's UA-default h1 size (~32px), well off the
   design system's scale (found 2026-09-29 auditing H1 sizes site-wide: Home 74px, About 58px, Services 50px,
   this was 32px). Matches Services' tier since both are secondary/listing pages, not a primary hero. */
.lib-hero h1{max-width:820px;font-size:clamp(32px,6.4vw,50px)}
.lib-hero .lead{max-width:640px;margin-top:16px}
.lib-chips{padding:22px 0 6px}
.chips2{display:flex;flex-wrap:wrap;gap:10px}
.chips2 a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 14px Inter,system-ui,sans-serif;color:var(--ink);transition:background .3s,border-color .3s,color .3s}
.chips2 a em{font-style:normal;color:var(--muted);font-size:12px}
.chips2 a:hover{border-color:var(--teal)}
.chips2 a.on{background:linear-gradient(100deg,var(--teal),var(--blue));border-color:transparent;color:#fff}
.chips2 a.on em{color:rgba(255,255,255,.8)}
.lib-grid{padding:26px 0 90px}
.pcards{display:grid;gap:22px;grid-template-columns:1fr}
.pcard{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);box-shadow:0 14px 34px rgba(10,60,100,.06);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s}
.pcards .pcard:nth-child(4n+2){border-top-color:var(--blue)}
.pcards .pcard:nth-child(4n+3){border-top-color:var(--ink)}
.pcards .pcard:nth-child(4n+4){border-top-color:#0aa5a0}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(10,60,100,.13)}
.pcard-top{display:flex;justify-content:space-between;align-items:center;font:600 11.5px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.pcard-tag{color:var(--teal)}
.pcard-min{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.pcard h2{font:600 22px/1.28 'Space Grotesk',Inter,sans-serif;letter-spacing:-.01em;margin:0;color:var(--ink)}
.pcard p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.pcard-by{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.pcard-by img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#7feddd}
.pcard-by span{font-size:13px;color:var(--muted)}
.pempty{padding:60px 30px;border-radius:24px;border:1px dashed var(--line);text-align:center;background:#fff}
.pempty b{font:600 20px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.pempty p{color:var(--muted);margin-top:8px}
.pempty a{color:var(--teal);font-weight:600}
.lib-other{margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}
@media(min-width:700px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.pcards{grid-template-columns:repeat(3,1fr)}.lib-hero{padding:148px 0 26px}}

/* ---- one post ---- */
.post-pg{padding:132px 0 90px}
.post-pg>.wrap{max-width:740px}
.post-pg h1{font-size:clamp(30px,6.4vw,46px);max-width:none}
.post-meta{display:flex;align-items:center;gap:12px;margin-top:18px;color:var(--muted);font-size:14.5px}
.post-meta img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#7feddd}
.post-meta b{color:var(--ink)}
.short-a{margin-top:30px;padding:22px 24px;border-radius:22px;background:linear-gradient(160deg,#061a28,#04151b);color:#eafff8;position:relative;overflow:hidden}
.short-a::before{content:"";position:absolute;right:-40px;top:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(45,255,208,.22),transparent 70%)}
.short-a-k{display:inline-flex;align-items:center;gap:8px;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#2dffd0}
.short-a-k::before{content:"";width:7px;height:7px;border-radius:50%;background:#2dffd0;box-shadow:0 0 0 4px rgba(45,255,208,.18)}
.short-a p{margin:10px 0 0;font:italic 400 clamp(19px,3vw,23px)/1.45 'Instrument Serif',Georgia,serif;position:relative}
.kpts{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.kpts li{position:relative;padding-left:26px;color:var(--ink);font-size:16px;line-height:1.5}
.kpts li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue))}
.post-body{margin-top:30px;font-size:17px;line-height:1.75;color:var(--ink)}
.post-body h2{font-size:clamp(23px,3.6vw,29px);margin:44px 0 14px;letter-spacing:-.01em}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin:0 0 8px}
.post-body strong{color:var(--ink)}
.post-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.rx{margin-top:38px;padding:24px 26px;border-radius:22px;border:1.5px dashed rgba(10,165,160,.4);background:#f1fbf9}
.rx-h{display:flex;align-items:center;gap:10px;font:600 13px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.rx-h i{font-style:normal;font-size:20px;font-weight:700}
.rx ol{margin:14px 0 0;padding-left:22px;display:grid;gap:8px}
.rx li{font-size:16px;color:var(--ink)}
.post-faq{margin-top:38px}
.post-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.post-faq summary{cursor:pointer;font:600 17px 'Space Grotesk',Inter,sans-serif;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";font-size:22px;color:var(--teal);flex:none;transition:transform .3s}
.post-faq details[open] summary::after{transform:rotate(45deg)}
.post-faq p{margin:12px 0 0;color:var(--muted);line-height:1.6}
.post-by{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:28px}
.pb{display:flex;gap:12px;align-items:center}
.pb img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#7feddd}
.pb div{display:grid;gap:1px}
.pb b{font:600 15.5px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.pb span:last-child{color:var(--muted);font-size:13.5px}
.post-related{margin-top:48px}
.pcards.sm{grid-template-columns:1fr;gap:16px}
.pcards.sm .pcard{padding:18px;gap:8px}
.pcards.sm h2{font-size:18px}
@media(min-width:700px){.pcards.sm{grid-template-columns:repeat(3,1fr)}}
.post-cta{margin-top:56px;padding:34px 28px;border-radius:24px;background:linear-gradient(135deg,#0aa5a0,#1478c8);color:#fff;text-align:center}
.post-cta h3{margin:0 0 18px;font:600 clamp(20px,4vw,26px)/1.3 'Space Grotesk',Inter,sans-serif}
.post-cta .btn{background:#fff;color:var(--ink)}

/* ================= Insights teaser: one dark featured guide + a shelf of two, distinct from the plain library grid ================= */
.ins-grid{margin-top:34px;display:grid;gap:18px}
.ins-feat{position:relative;display:block;overflow:hidden;padding:30px 26px 26px;border-radius:28px;background:radial-gradient(65% 60% at 88% 0%,rgba(20,120,200,.28),transparent 70%),linear-gradient(160deg,#061a28,#04151b);color:#eafff8;box-shadow:0 30px 60px rgba(4,21,27,.28);transition:transform .5s cubic-bezier(.2,.9,.2,1),box-shadow .5s}
.ins-feat:hover{transform:translateY(-6px);box-shadow:0 40px 80px rgba(4,21,27,.36)}
.ins-glow{position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(45,255,208,.24),transparent 70%);animation:insDrift 8s ease-in-out infinite alternate;pointer-events:none}
@keyframes insDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.12)}}
.ins-top{display:flex;align-items:center;gap:10px;position:relative}
.ins-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(45,255,208,.14);border:1px solid rgba(45,255,208,.35);flex:none;transition:transform .5s cubic-bezier(.2,.9,.2,1),background .3s}
.ins-ic svg{width:17px;height:17px;fill:none;stroke:#2dffd0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* icon hover, sitewide rule (2026-09-29): no tilt, scale only -- plus a twinkle on the icon itself wherever it's
   just a single shape (.ic-tw, shared with the services page's per-icon animations, see the .sv-card block
   below for the full set of icon-gesture classes). Was rotate(-8deg) here and on .ins-row/.ab-card had no icon
   reaction at all; audited and made consistent across Home/About/Services/Blog. */
.ins-ic svg path{transform-box:fill-box;transform-origin:center}
.ins-feat:hover .ins-ic{transform:scale(1.08);background:rgba(45,255,208,.22)}
.ins-feat:hover .ins-ic .ic-tw{animation:icTwinkle 1.1s ease-in-out infinite}
/* @keyframes icTwinkle/icWave/icBlink/icDraw are defined once, near the services page's .sv-card icon rules
   further down (search "ic-tw = twinkle") -- reused here and on .ab-card, order doesn't matter for @keyframes. */
.ins-tag{font:600 11px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#2dffd0}
.ins-min{margin-left:auto;font:500 13px Inter,system-ui,sans-serif;color:rgba(216,240,250,.55)}
.ins-feat h3{margin:16px 0 0;font:600 clamp(23px,3vw,32px)/1.28 'Space Grotesk',Inter,sans-serif;color:#fff;max-width:46ch;position:relative}
.ins-feat p{margin:12px 0 0;color:rgba(216,240,250,.78);font-size:16px;line-height:1.6;max-width:56ch;position:relative}
.ins-by{margin-top:22px;display:flex;align-items:center;gap:10px;position:relative}
.ins-by img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#7feddd}
.ins-by span{font-size:13.5px;color:rgba(216,240,250,.65)}
.ins-arrow{margin-left:auto;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:17px;color:#2dffd0;transition:transform .4s cubic-bezier(.2,.9,.2,1),background .3s}
.ins-feat:hover .ins-arrow{transform:translateX(5px);background:rgba(45,255,208,.22)}
.ins-side{display:grid;gap:12px;align-content:start}
.ins-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(10,60,100,.06);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s,border-color .3s}
.ins-row:hover{transform:translateX(4px);box-shadow:0 16px 34px rgba(10,60,100,.12);border-color:rgba(10,165,160,.35)}
.ins-row .ins-ic{background:linear-gradient(135deg,rgba(10,165,160,.14),rgba(20,120,200,.14));border-color:var(--line)}
.ins-row .ins-ic svg{stroke:var(--teal)}
.ins-row:hover .ins-ic{transform:scale(1.08)}
.ins-row:hover .ins-ic .ic-tw{animation:icTwinkle 1.1s ease-in-out infinite}
.ins-row-tx{display:grid;gap:3px;min-width:0}
.ins-row-tx .ins-tag{color:var(--teal)}
.ins-row-tx b{font:600 15.5px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-row-tx small{color:var(--muted);font-size:12.5px}
.ins-row .ins-arrow{width:30px;height:30px;font-size:15px;background:var(--soft);color:var(--teal)}
.ins-row:hover .ins-arrow{transform:translateX(3px);background:linear-gradient(100deg,var(--teal),var(--blue));color:#fff}
.ins-more{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:20px;border:1.5px dashed rgba(10,165,160,.4);color:var(--teal);font:600 14.5px Inter,system-ui,sans-serif;transition:background .3s,border-color .3s}
.ins-more:hover{background:#f1fbf9;border-color:var(--teal)}
@media(min-width:900px){
  .ins-grid{grid-template-columns:1.3fr 1fr;gap:26px}
  .ins-feat{padding:40px 40px 34px}
  .ins-side{gap:14px}
}
@media(prefers-reduced-motion:reduce){.ins-glow{animation:none}.ins-feat,.ins-row,.ins-ic,.ins-arrow{transition:none}}

/* ================= FAQ: a real accordion (numbered, animated open/close), not bare <details> ================= */
.faq{padding:96px 0}
.faq-hd{display:grid;gap:16px}
.faq-hd .lead{max-width:480px;color:var(--muted)}
.faq-hd .lead a{color:var(--teal);font-weight:600}
.faql{margin-top:34px;max-width:820px;display:grid;gap:14px}
.facc{border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(10,60,100,.05);transition:border-color .3s,box-shadow .3s}
.facc.open{border-color:rgba(10,165,160,.4);box-shadow:0 18px 40px rgba(10,60,100,.1)}
.faq-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;padding:20px 22px;-webkit-tap-highlight-color:transparent}
.js .faq-row{cursor:pointer}
.faq-n{flex:none;font:600 13px ui-monospace,Menlo,Consolas,monospace;color:rgba(10,165,160,.5);transition:color .3s}
.facc.open .faq-n{color:var(--teal)}
.faq-q{flex:1;font:600 17px/1.4 'Space Grotesk',Inter,sans-serif;color:var(--ink);text-align:left}
.faq-x{flex:none;position:relative;width:22px;height:22px}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--teal);border-radius:2px;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.faq-x::after{transform:rotate(90deg)}
.facc.open .faq-x::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:1fr}
.js .faq-a{grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.9,.2,1)}
.js .facc.open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden}
.faq-a p{margin:0;padding:0 22px 22px 54px;color:var(--muted);font-size:15.5px;line-height:1.6}
@media(min-width:900px){
  .faq{padding:120px 0}
}
@media(prefers-reduced-motion:reduce){.faq-a{transition:none}.faq-x::before,.faq-x::after{transition:none}}
@media(min-width:700px){.sf-cta{flex-direction:row;align-items:center;justify-content:space-between}}

/* ================= ABOUT PAGE ================= */
/* Page opener: breadcrumb + a real headline moment before "Our mission" starts, since the page used to start cold. */
.ab-open{padding:132px 0 0}
.ab-eyebrow{display:flex;align-items:center;gap:9px;font:500 13.5px Inter,system-ui,sans-serif;color:var(--muted)}
.ab-eyebrow .dot{flex:none;width:6px;height:6px;border-radius:50%;background:#9fb7c4;box-shadow:0 0 0 3px rgba(10,165,160,.1);animation:live 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.ab-eyebrow .dot{animation:none}}
/* Mission: a calm, centred statement, no side graphic (four different graphics were tried and rejected here; the words carry it) */
.ab-mission{padding:28px 0 80px;overflow:hidden}
.ab-mission-tx{max-width:760px}
.ab-mission-tx h1{font-size:clamp(34px,7.2vw,58px)}
.ab-mission-tx h1 .it{color:var(--teal)}
/* the entity-definition line: a plain crawlable sentence naming what Medmatis is, sitting between the H1 and
   the emotional .lead below it - deliberately smaller/muted so it reads as context, not a second headline. */
.ab-mission-tx .entity-line{max-width:600px;margin-top:14px;font-size:15px;line-height:1.5;color:var(--muted)}
.ab-mission-tx .lead{max-width:560px;margin-top:16px;font-size:18px}
@media(min-width:900px){.ab-open{padding:150px 0 0}.ab-mission{padding:32px 0 100px}}

.ab-origin{padding:90px 0;background:radial-gradient(60% 55% at 80% 10%,rgba(20,120,200,.2),transparent 70%),linear-gradient(180deg,#04151b,#061a28);color:#d8f0fa}
.ab-origin h2{color:#fff;max-width:760px;margin-top:12px;font-size:clamp(28px,5vw,42px)}
.ab-origin .label{color:#2dffd0}
.ab-origin-grid{display:grid;gap:34px;margin-top:34px}
.ab-origin-body p{color:rgba(216,240,250,.8);font-size:16.5px;line-height:1.7;max-width:640px}
.ab-origin-body p+p{margin-top:16px}
.ab-tl{list-style:none;margin:0;padding:0;display:grid;gap:16px;border-left:2px solid rgba(45,255,208,.3)}
.ab-tl li{padding:2px 0 2px 22px;position:relative}
.ab-tl li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:#2dffd0;box-shadow:0 0 0 4px rgba(45,255,208,.18)}
/* only the current/ongoing entry (last in the list, "2025-Present") gets the site's live-pulse ring -- the
   same one used for the hero's "right now" indicator. The 2021 and 2022-24 entries are closed periods; a
   pulsing dot there would be decoration with no meaning, not motion tied to the actual story. */
.ab-tl li:last-child::before{animation:live 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.ab-tl li:last-child::before{animation:none}}
.ab-tl-y{display:block;font:600 12px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#2dffd0}
.ab-tl-t{display:block;color:#fff;font:500 15.5px 'Space Grotesk',Inter,sans-serif;margin-top:2px}
@media(min-width:900px){.ab-origin{padding:120px 0}.ab-origin-grid{grid-template-columns:1.4fr 1fr;gap:60px}}

.ab-note{padding:80px 0}
.ab-note-grid{display:grid;gap:28px;justify-items:center}
.ab-note-photo{margin:0}
.ab-note-photo img{width:140px;height:140px;border-radius:26px;object-fit:cover;background:#7feddd;box-shadow:0 20px 46px rgba(10,60,100,.16)}
.ab-note-body{width:100%;max-width:640px;padding:36px 28px;border-radius:28px;background:var(--soft);border:1px solid var(--line)}
.ab-note-body .label{margin-bottom:12px}
.ab-note-body blockquote{margin:0;font:italic 400 clamp(18px,3vw,22px)/1.55 'Instrument Serif',Georgia,serif;color:var(--ink)}
.ab-note-body blockquote p+p{margin-top:14px}
/* the one line pulled out for emphasis, so the note has a visual landing point instead of five uniform
   paragraphs of italic body text back to back -- specificity (not !important) beats the p+p rule above */
.ab-note-body blockquote p.ab-note-pull{font:italic 600 clamp(23px,4vw,30px)/1.4 'Instrument Serif',Georgia,serif;color:var(--teal);margin:22px 0}
.ab-note-sign{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.ab-note-sign b{display:block;font:600 15.5px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.ab-note-sign span{color:var(--muted);font-size:13.5px}
@media(min-width:800px){
  .ab-note{padding:110px 0}
  .ab-note-grid{grid-template-columns:220px 1fr;align-items:start;justify-items:stretch;gap:48px;max-width:900px;margin:0 auto}
  .ab-note-photo img{width:220px;height:220px;border-radius:30px}
  .ab-note-body{max-width:none;padding:48px 50px}
}

.ab-why{padding:80px 0}
.ab-why h2 .it{color:var(--teal)}
.ab-cards{margin-top:34px;display:grid;gap:16px;grid-template-columns:1fr}
.ab-card{padding:24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(10,60,100,.06);display:grid;gap:10px;align-content:start;transition:transform .3s,box-shadow .3s}
.ab-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(10,60,100,.12)}
.ab-card .ins-ic{background:linear-gradient(135deg,rgba(10,165,160,.14),rgba(20,120,200,.14));border:1px solid var(--line);transition:transform .4s cubic-bezier(.2,.9,.2,1),background .3s}
.ab-card .ins-ic svg{stroke:var(--teal)}
.ab-card:hover .ins-ic{transform:scale(1.1);background:rgba(45,255,208,.22)}
.ab-card:hover .ins-ic .ic-tw{animation:icTwinkle 1.1s ease-in-out infinite}
.ab-card b{font:600 18px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.ab-card span{color:var(--muted);font-size:14.5px;line-height:1.5}
@media(min-width:700px){.ab-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ab-cards{grid-template-columns:repeat(4,1fr)}.ab-why{padding:100px 0}}
/* literal-search-phrase kicker above each card's creative headline (copywriter, 2026-09-28) -- DORMANT, unused:
   cut the same day the owner said the full batch was "so much text and no storytelling". Kept, not deleted, in
   case a lighter version of this idea comes back; nothing in about.blade.php currently uses .ab-card-kicker. */
.ab-card-kicker{font:600 10.5px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}

/* founder's note headline, added 2026-09-28 above the (now multi-paragraph) blockquote */
.ab-note-h{font:700 clamp(22px,3.6vw,30px)/1.25 'Space Grotesk',Inter,sans-serif;color:var(--ink);margin:14px 0 22px;max-width:600px}

/* ================= Proof points and "What Medmatis does" below: DORMANT, unused. Both were added 2026-09-28
   per copywriter review, then pulled from about.blade.php the same day -- the owner's reaction to the full
   batch was "so much text and no storytelling", and these two were the least essential of everything added.
   Kept here so the CSS doesn't need rebuilding if either comes back properly scoped; see config/about.php's
   'proof' key for the matching dormant content and the full story. ================= */
/* Proof points ("add proof after the story"). Stats are placeholders until the owner supplies real figures --
   see config/about.php; .ab-proof-note is the visible flag for that. ================= */
.ab-proof{padding:70px 0}
.ab-proof h2{max-width:640px}
.ab-stats{margin-top:30px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.ab-stat{padding:20px;border-radius:18px;background:var(--soft);border:1px solid var(--line)}
.ab-stat b{display:block;font:700 clamp(24px,4vw,34px) 'Space Grotesk',Inter,sans-serif;color:var(--teal)}
.ab-stat span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.ab-proof-note{margin-top:14px;font-size:12.5px;color:var(--muted);font-style:italic}
.ab-work{margin-top:26px;display:grid;gap:14px}
.ab-work-card{padding:18px 20px;border-radius:16px;border:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ab-work-card b{font:600 16px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.ab-work-card span{color:var(--muted);font-size:14px}
@media(min-width:700px){.ab-stats{grid-template-columns:repeat(4,1fr)}.ab-work{grid-template-columns:1fr 1fr}}

/* What Medmatis does: compact linked list, real live service pages, not new duplicate copy -- an
   internal-linking node, not a second services page. ================= */
.ab-does{padding:70px 0}
.ab-does h2{max-width:680px}
.ab-does-list{margin-top:30px;display:grid;gap:2px}
.ab-does-row{display:grid;gap:2px;padding:16px 18px;border-radius:14px;color:var(--ink)}
.ab-does-row:hover{background:var(--soft)}
.ab-does-row b{font:600 16px 'Space Grotesk',Inter,sans-serif}
.ab-does-row span{color:var(--muted);font-size:14px}
.ab-does-foot{display:inline-block;margin-top:18px;font:600 14.5px Inter,system-ui,sans-serif;color:var(--teal)}
@media(min-width:700px){.ab-does-list{grid-template-columns:1fr 1fr;gap:4px 24px}}

.ab-team{padding:60px 0 100px}
.ab-team h2 .it{color:var(--teal)}
.ab-faces{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.ab-faces figure{margin:0;width:76px;height:76px;border-radius:50%;overflow:hidden;background:#7feddd;flex:none}
.ab-faces img{width:100%;height:100%;object-fit:cover}
.ab-team .tlink{margin-top:26px}

/* ================= Mission visual v7 (2026-10-18): the About radar. A patient searches, the beam sweeps a gently tilted plane,
   a practice is found. Driven by site.js ("the About radar"); this CSS is also the complete static state for
   reduced motion and no JS. ================= */
.ab-mission-in{display:grid;gap:44px;align-items:center}
.radar{position:relative;justify-self:center;width:min(86vw,360px);text-align:center}
.radar-stage{position:relative}
.radar svg{display:block;width:100%;height:auto;overflow:visible}
.radar-ring{fill:none;stroke:rgba(10,60,90,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.radar-cross{stroke:rgba(10,60,90,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.rw{fill:var(--teal)}
.rw1{opacity:.03}.rw2{opacity:.06}.rw3{opacity:.11}.rw4{opacity:.2}.rw5{opacity:.5}
.radar-sweep{filter:blur(6px)}
.radar-blip{fill:#a9c0cd;filter:drop-shadow(0 0 3px rgba(159,183,196,.7))}
.radar-glow{fill:rgba(45,255,208,.4);opacity:.5;animation:radarGlow 4s ease-in-out infinite;filter:blur(10px)}
@keyframes radarGlow{0%,100%{opacity:.3;r:26}50%{opacity:.65;r:36}}
.rd-dots{transition:opacity .6s ease}
.radar.locked .rd-dots{opacity:.32}
/* the found target: a lifted dot with a thin beam, a ripple on the plane, and a label that stands upright above it */
.rd-target{opacity:0;transition:opacity .35s ease}
.rd-target.is-on{opacity:1}
.rd-found{fill:var(--teal);filter:drop-shadow(0 0 12px rgba(10,165,160,.75));transform-box:fill-box;transform-origin:center}
.rd-beam{stroke:url(#radarBeamGrad);stroke-width:1.6;stroke-linecap:round}
.rd-ripple{fill:none;stroke:var(--teal);stroke-width:1.6;opacity:0}
.radar-tag{position:absolute;transform:translate(-50%,0);white-space:nowrap;background:linear-gradient(100deg,var(--teal-ink),var(--blue));color:#fff;font:700 11.5px Inter,system-ui,sans-serif;letter-spacing:.03em;padding:5px 13px;border-radius:999px;opacity:0;box-shadow:0 8px 20px rgba(10,140,170,.3);transition:opacity .3s ease}
.radar-tag.is-on{opacity:1}
/* the two caption lines under the radar: what the patient searched, then what was found. Height is fixed so the
   section never reflows while the lines change. */
/* the search bar above the radar: the patient's query is typed into it, then it "sends" and the beam goes looking */
.radar-bar{display:flex;align-items:center;gap:10px;height:46px;padding:0 18px;margin:0 auto 12px;max-width:340px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(10,60,90,.08);text-align:left;transition:border-color .3s ease,box-shadow .3s ease}
.radar-bar svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--teal-ink);stroke-width:2.2;stroke-linecap:round}
.radar-bar .hud-q{flex:1;min-width:0;display:block;height:26px;overflow:hidden;white-space:nowrap;font:500 14px/26px Inter,system-ui,sans-serif;color:var(--ink)}
.radar.typing .hud-q::after{content:"";display:inline-block;width:1.5px;height:16px;margin-left:2px;vertical-align:-3px;background:var(--teal-ink);animation:radarCaret 1s steps(1) infinite}
@keyframes radarCaret{50%{opacity:0}}
.radar-bar.sent{border-color:var(--teal);box-shadow:0 0 0 4px rgba(10,165,160,.14),0 10px 26px rgba(10,60,90,.08)}
.radar-hud{position:relative;margin-top:14px;height:44px;display:grid;align-content:start;text-align:center}
.hud-f{font:600 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:.01em}
.hud-f{color:var(--teal-ink);opacity:0;transition:opacity .4s ease}
.hud-f.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.radar-glow{animation:none}.rd-target,.radar-tag,.hud-f{transition:none}}
@media(min-width:900px){.ab-mission{padding:32px 0 90px}.ab-mission-in{grid-template-columns:1.05fr .95fr}}
@media(prefers-reduced-motion:reduce){.radar-sweep,.radar-glow,.radar-found,.radar-ripple,.l1,.l2{animation:none}.radar-found{r:7;filter:drop-shadow(0 0 8px rgba(10,165,160,.6))}.l2{opacity:1;position:static}.l1{display:none}}

/* ================= Services overview page (rebuilt 2026-09-28, replacing the old SEOLand template).
   Simplified again the same day -- owner: "keep it basic and simple, inspired by the old website" after two
   over-elaborate passes (a signature pulse-mark graphic; a 3-group/numbered-stage structure). Back to the old
   page's actual shape (title, then a flat grid of 9 icon/title/description cards), just in the new design
   system. The one twist kept: a quiet 01-09 index per card. ================= */
.sv-intro{padding:16px 0 46px}
.sv-intro h1{max-width:680px;font-size:clamp(32px,6vw,50px)}
.sv-intro .lead{max-width:620px;margin-top:16px;font-size:18px}
.sv-intro .lead + .lead{margin-top:12px}
@media(min-width:900px){.sv-intro{padding:24px 0 60px}}

.sv-grid{padding:0 0 80px}
.sv-cards{display:grid;gap:14px;grid-template-columns:1fr}
.sv-card{position:relative;display:grid;gap:8px;align-content:start;padding:26px 52px 24px 24px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(10,60,100,.05);transition:transform .3s,box-shadow .3s}
.sv-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(10,60,100,.1)}
.sv-idx{position:absolute;top:22px;right:24px;font:600 12px 'Space Grotesk',Inter,sans-serif;color:#5d7486}
/* higher-contrast icon (2026-10-01, owner: "the logo redesign required in the service main page" -- same
   complaint and same fix as .svp-ic on the individual service pages: the light-tint .ins-ic base reads as
   washed out for a tile this prominent, one per card. Solid teal-to-blue gradient + white icon, matching the
   homepage's commitments tiles (.tr-i), instead. */
.sv-card .ins-ic{background:linear-gradient(135deg,var(--teal),var(--blue));border:none;box-shadow:0 10px 22px rgba(10,140,170,.3);margin-bottom:4px;transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.sv-card .ins-ic svg{stroke:#fff}
/* icon hover: no tilt (was rotate+scale) -- each icon is split into a static part and a small animated part in
   services.blade.php ($icons array), and only that part moves, so the gesture means something instead of the
   whole icon doing one generic motion (owner: "currently its vague"). Same idea as the home page's commitments
   icons (.ti-heart/.ti-shield etc: each does one small, specific thing), static at rest, animates on hover only.
   ic-tw = twinkle/pulse (sparkle, star, share nodes, tag rivet), ic-wave = a sound wave pulsing outward (ads),
   ic-blink = a quick flicker (camera "recording" light, browser cursor), ic-draw = the part draws itself in
   (pathLength="1" on those <path>s makes the dash maths work regardless of the path's actual length).
   transform-box/transform-origin for .ic-tw etc is set once, sitewide, near the base .ins-ic rule. */
.sv-card .ins-ic svg .ic-draw{stroke-dasharray:1;stroke-dashoffset:0}
.sv-card:hover .ins-ic{transform:scale(1.12)}
.sv-card:hover .ins-ic svg .ic-tw{animation:icTwinkle 1.1s ease-in-out infinite}
.sv-card:hover .ins-ic svg .ic-wave{animation:icWave 1.3s ease-in-out infinite}
.sv-card:hover .ins-ic svg .ic-blink{animation:icBlink 1.1s ease-in-out infinite}
.sv-card:hover .ins-ic svg .ic-draw{animation:icDraw 1.2s ease-in-out infinite}
.sv-card:hover .ins-ic svg .ic-n2{animation-delay:.15s}
.sv-card:hover .ins-ic svg .ic-n3{animation-delay:.3s}
.sv-card:hover .ins-ic svg .ic-d2{animation-delay:.15s}
@keyframes icTwinkle{0%,100%{transform:scale(1)}45%{transform:scale(1.3)}}
@keyframes icWave{0%,100%{opacity:.45;transform:scale(.72)}50%{opacity:1;transform:scale(1.06)}}
@keyframes icBlink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes icDraw{0%,100%{stroke-dashoffset:0}45%{stroke-dashoffset:1}70%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.sv-card:hover .ins-ic svg .ic-tw,.sv-card:hover .ins-ic svg .ic-wave,.sv-card:hover .ins-ic svg .ic-blink,.sv-card:hover .ins-ic svg .ic-draw{animation:none}}
.sv-card b{display:block;font:600 17px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
/* NOTE: keep these scoped to .sv-hook/.sv-desc/.sv-cta, never a bare "span" -- .ins-ic is also rendered as a
   <span>, and a bare ".sv-card span" selector matches it too, out-specificities the base .ins-ic{display:grid}
   rule, and breaks the icon's centering (found 2026-09-28: "icons... shift at a corner" -- not a rendering bug,
   a CSS collision). */
.sv-card .sv-hook{display:block;font:600 14.5px/1.45 Inter,sans-serif;color:var(--ink)}
.sv-card .sv-desc{display:block;color:var(--muted);font-size:14px;line-height:1.55}
.sv-cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:600 13px 'Space Grotesk',Inter,sans-serif;color:var(--teal)}
.sv-arrow{display:inline-block;font-style:normal;transition:transform .25s}
.sv-card:hover .sv-arrow{transform:translateX(4px)}
@media(min-width:700px){.sv-cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.sv-grid{padding:0 0 100px}}

/* ================= INDIVIDUAL SERVICE PAGES (rebuilt 2026-09-29): one shared template
   (resources/views/services/show.blade.php) drives all 9 /healthcare-{slug} pages, config/service_pages.php
   holds the per-page text. Deliberately reuses the existing design system throughout -- same card/icon/FAQ
   patterns as elsewhere -- rather than inventing new components per page; see design-direction.md 6d for why
   (psychology-first: loss-aversion opener, concrete "what's included" over a decorative diagram, the risk
   box as de-risking not a feature list, FAQ as objection-handling). ================= */
.svp-intro{padding:16px 0 60px}
.svp-intro-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
/* higher-contrast icon (2026-10-01, owner: "the logo we are using is low contrast, I like the logos of the
   home page, our commitments type logo") -- the base .ins-ic tile is a light tint, tuned for sitting inside a
   list of many icons; this is the one large "logo" moment for the page, right above the H1, so it gets the
   same solid gradient + white icon treatment as the homepage's commitments tiles (.tr-i) instead. */
.svp-ic{width:56px;height:56px;border-radius:16px;margin-bottom:18px;background:linear-gradient(135deg,var(--teal),var(--blue));border:none;box-shadow:0 10px 22px rgba(10,140,170,.3);transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.svp-ic svg{width:26px;height:26px;stroke:#fff}
/* this icon isn't inside a card (it's a standalone "logo" mark above the H1, not something a visitor would
   naturally hover), so it had no animation trigger at all (owner: "we need the animation in the service
   pages"). Gets its own hover, matching the sitewide icon-hover rule (design-direction.md section 4) -- same
   gesture classes as everywhere else, just triggered on the tile itself instead of a wrapping card. */
.svp-ic:hover{transform:scale(1.1)}
.svp-ic:hover svg .ic-tw{animation:icTwinkle 1.1s ease-in-out infinite}
.svp-ic:hover svg .ic-wave{animation:icWave 1.3s ease-in-out infinite}
.svp-ic:hover svg .ic-blink{animation:icBlink 1.1s ease-in-out infinite}
.svp-ic:hover svg .ic-draw{animation:icDraw 1.2s ease-in-out infinite}
.svp-ic svg .ic-draw{stroke-dasharray:1;stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.svp-ic:hover svg .ic-tw,.svp-ic:hover svg .ic-wave,.svp-ic:hover svg .ic-blink,.svp-ic:hover svg .ic-draw{animation:none}}
.svp-intro h1{max-width:680px;font-size:clamp(32px,6.4vw,50px)}
.svp-pain{max-width:560px;margin-top:14px;font-size:18px;line-height:1.5}
.svp-pain + .svp-pain{margin-top:8px}
.svp-pain strong,.svp-approach-p strong{color:var(--ink)}
@media(min-width:900px){
  .svp-intro{padding:16px 0 26px}
  .svp-intro-grid{grid-template-columns:1.15fr .85fr;gap:56px}
}

/* the Today/With Medmatis story (2026-09-30, second pass -- see the long comment in services/show.blade.php):
   one interactive card -- toggle, photo, sticker, caption -- instead of a bare photo plus a separate plain
   text switch further down the page. Fills the previously-empty right column on desktop ("the right looks
   empty") AND gives the before/after a human anchor ("no story human images... just flat stuff"). Photo
   aspect ratio shortened 2026-10-02 (owner: "the image and the text below it is long, so doesn't fit the
   initial screen wholely upon opening" -- measured via CDP: the section was running 57-237px past the fold at
   1440x900 down to 1280x720) from 640/760 (portrait, ~1.19 tall) to 640/480 (~0.75), plus tighter
   padding/gaps below -- together bring the whole intro comfortably inside one screen at the standard laptop
   sizes (rule 6/CLAUDE.md: 1440x900, 1366x768, 1280x720). */
.svp-story{display:grid;gap:12px}
.svp-story-ph{position:relative;aspect-ratio:640/760;border-radius:28px;overflow:hidden;box-shadow:0 24px 50px rgba(10,60,100,.12)}
/* shorter crop on desktop only -- mobile's single-column layout has no fold pressure and the owner already
   confirmed the taller portrait crop looks right there ("mobile view is good"). */
@media(min-width:900px){.svp-story-ph{aspect-ratio:640/430}}
/* two photos crossfade in place (2026-10-01: "the image changes upon before after") -- both stacked via
   position:absolute, opacity swapped by the same .svp-story.after trigger as the sticker/caption below. */
.svp-story-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.svp-story-img[data-panel="today"]{opacity:1}
.svp-story.after .svp-story-img[data-panel="today"]{opacity:0}
.svp-story.after .svp-story-img[data-panel="with"]{opacity:1}
@media(prefers-reduced-motion:reduce){.svp-story-img{transition:none}}
/* sticker overlay on the photo (2026-09-30): same visual language as the homepage hero reel's sticker cards
   (.stk -- icon tile + label, white card, drop shadow) but simplified to a single fixed position and two
   toggled states instead of four auto-playing ones. Illustrative label only, never a number -- nothing that
   could read as a measured claim (rule 8). */
.svp-stk{position:absolute;left:16px;bottom:16px;right:16px;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;background:#fff;box-shadow:0 14px 30px rgba(10,60,100,.22),0 0 0 1px rgba(10,60,100,.06);font:600 13px Inter,system-ui,sans-serif;opacity:0;transition:opacity 1s ease}
.svp-stk i{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:15px;color:#fff}
.svp-stk.bad i{background:linear-gradient(135deg,#ff6b5e,#e8493c)}
.svp-stk.good i{background:linear-gradient(135deg,var(--teal),var(--blue))}
.svp-stk[data-panel="today"]{opacity:1}
.svp-story.after .svp-stk[data-panel="today"]{opacity:0}
.svp-story.after .svp-stk[data-panel="with"]{opacity:1}
@media(prefers-reduced-motion:reduce){.svp-stk{transition:none}}
.svp-story-cap{padding:2px 4px 0;font-size:15.5px;line-height:1.45;color:var(--ink)}
.svp-story-cap[data-panel="with"]{display:none}
.svp-story.after .svp-story-cap[data-panel="today"]{display:none}
.svp-story.after .svp-story-cap[data-panel="with"]{display:block}
/* the sliding-switch mechanics (.tg/.tg::before) are shared with the homepage's "Right now" situations --
   see the "Today / With Medmatis: a real sliding switch" block earlier in this file -- only the ".after"
   trigger is scoped separately here (.svp-story, not .sit-panel) so the two can't affect each other. */
.svp-story:not(.after) .tg button[data-s="b"]{color:var(--ink)}
.svp-story.after .tg::before{transform:translateX(100%);background:linear-gradient(100deg,var(--teal),var(--blue));box-shadow:0 8px 20px rgba(10,140,170,.32)}
.svp-story.after .tg button[data-s="a"]{color:#fff}

.svp-incl{padding:0 0 70px}
.svp-incl-grid{margin-top:20px;display:grid;gap:14px;grid-template-columns:1fr}
.svp-incl-card{padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;gap:6px}
.svp-incl-card b{font:600 16.5px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.svp-incl-card span{color:var(--muted);font-size:14.5px;line-height:1.5}
@media(min-width:700px){.svp-incl-grid{grid-template-columns:repeat(2,1fr)}}

.svp-approach{padding:0 0 70px}
.svp-approach-p{max-width:680px;margin-top:16px;font-size:17px}
.svp-approach-p + .svp-approach-p{margin-top:10px}

.svp-risk{padding:0 0 70px}
.rx p{margin:14px 0 0;font-size:16px;color:var(--ink);line-height:1.6}

.svp-faq{padding:0 0 70px}

.svp-related{padding:0 0 80px}
.svp-rel-row{margin-top:20px;display:grid;gap:12px;grid-template-columns:1fr}
.svp-rel-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(10,60,100,.06);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s,border-color .3s}
.svp-rel-card:hover{transform:translateX(4px);box-shadow:0 16px 34px rgba(10,60,100,.12);border-color:rgba(10,165,160,.35)}
.svp-rel-card b{flex:1;font:600 15.5px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.svp-rel-card .sv-arrow{color:var(--teal);opacity:0;transform:translateX(-4px)}
.svp-rel-card:hover .sv-arrow{opacity:1;transform:translateX(0)}
@media(min-width:700px){.svp-rel-row{grid-template-columns:repeat(3,1fr)}}

/* ---------- Services overview: hub graphic beside the intro (added 2026-10-08, reworked same day) ----------
   Reworked after owner feedback ("looks very unprofessional... not clickable... everyone is asking for attention at a
   time"): the 9 icons are now QUIET at rest (white tile, fine border, teal line icon, no float, no links) and the
   logo is the one strong element. A patient dot comes in from the outer ring, passes through one service (only that
   tile fills teal-blue and plays its gesture) and arrives at the logo. One thing at a time; behaviour in site.js
   ([data-hub]). Purely decorative (aria-hidden), so no hover, focus or click states. */
.sv-intro-in{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.sv-intro-in{grid-template-columns:1.05fr .95fr;gap:48px}}
.hub-wrap{justify-self:center;width:min(92vw,380px)}
@media(min-width:900px){.hub-wrap{width:min(100%,460px,80vh)}}
.hub{position:relative;aspect-ratio:400/280}
.hub-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-ring{fill:none;stroke:rgba(10,60,90,.11);stroke-width:1}
.hub-dash{fill:none;stroke:rgba(10,165,160,.38);stroke-width:1.6;stroke-dasharray:.1 11;stroke-linecap:round}
/* the outer dotted ring is an ellipse, so it turns by sliding its dashes along the path (rotating the shape would spin the ellipse itself) */
.hub-dash{animation:hubDash 160s linear infinite}
@keyframes hubDash{to{stroke-dashoffset:1650}}
.hub-rim{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
.hub-flare{fill:rgba(45,255,208,.55);opacity:0;filter:blur(10px);transform-box:fill-box;transform-origin:center}
.hub-stream circle{fill:var(--teal);opacity:0}
/* the sun is still at rest (no continuous beat, no redraw: owner, "it beats once, when the patient arrives, not always");
   site.js gives it one beat, a flare and a ripple on each arrival. */
.hub-sun{transform-box:fill-box;transform-origin:center}
.hub-pulse{fill:none;stroke:var(--teal);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.hub-dot{fill:var(--teal);filter:drop-shadow(0 0 5px rgba(45,255,208,.9));opacity:0}
.hub-n{position:absolute;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;pointer-events:none;will-change:transform,opacity}
.hub-n .ins-ic{position:relative;width:100%;height:100%;border-radius:50%;background:#fff;border:1px solid rgba(10,60,90,.12);box-shadow:0 6px 16px rgba(10,60,90,.07);transition:transform .5s cubic-bezier(.2,.9,.2,1),background .45s,border-color .45s,box-shadow .45s}
/* the teal-blue fill is a fading layer (a gradient can't transition), so the icon never sits white-on-white mid-switch */
.hub-n .ins-ic::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,var(--teal),var(--blue));opacity:0;transition:opacity .45s}
.hub-n .ins-ic svg{position:relative;width:50%;height:50%;stroke:var(--teal);transition:stroke .45s}
.hub-n.fire .ins-ic::before{opacity:1}
.hub-n .ic-draw{stroke-dasharray:1;stroke-dashoffset:0}
.hub-n.fire .ins-ic{transform:scale(1.12);border-color:transparent;box-shadow:0 0 0 6px rgba(45,255,208,.2),0 12px 26px rgba(10,140,170,.35)}
.hub-n.fire .ins-ic svg{stroke:#fff}
.hub-n.fire svg .ic-tw{animation:icTwinkle 1.1s ease-in-out infinite}
.hub-n.fire svg .ic-wave{animation:icWave 1.3s ease-in-out infinite}
.hub-n.fire svg .ic-blink{animation:icBlink 1.1s ease-in-out infinite}
.hub-n.fire svg .ic-draw{animation:icDraw 1.2s ease-in-out infinite}
.hub-n.fire svg .ic-n2{animation-delay:.15s}
.hub-n.fire svg .ic-n3{animation-delay:.3s}
.hub-n.fire svg .ic-d2{animation-delay:.15s}
.hub-cap{position:relative;height:22px;margin:14px 0 0;text-align:center;font:600 13px 'Space Grotesk',Inter,sans-serif;letter-spacing:.03em;color:var(--muted)}
/* two stacked spans crossfade, so one service name dissolves into the next instead of swapping */
.hub-cap span{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .6s ease}
.hub-cap span.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hub-dash{animation:none}
  .hub-n.fire svg .ic-tw,.hub-n.fire svg .ic-wave,.hub-n.fire svg .ic-blink,.hub-n.fire svg .ic-draw{animation:none}
}

/* ---------- Brand typography on the Services pages (2026-10-08): two typefaces plus a colour accent, same as About ----------
   Space Grotesk headings + Inter body + one Instrument Serif italic accent phrase per heading (`.it`, set once near the
   top of this file), in teal on light and mint on dark. The Services pages used to be flat (plain headings, section
   titles as tiny caps labels); owner: "the service page is flat". Full rules: design-direction.md section 4b. */
.sv-intro h1 .it,.svp-intro h1 .it{color:var(--teal)}
.svp-h2{font-size:clamp(28px,5vw,42px);max-width:760px;margin:0}
.svp-h2 .it{color:var(--teal)}

/* ---------- NMC compliance pages (2026-10-14): /nmc-advertising-guidelines-2026 and /nmc-compliant-healthcare-marketing-agency ----------
   The guide reuses the Insights article chrome (.post-pg, .short-a, .kpts, .post-faq, .post-cta); these are the extra
   pieces: fact card, table of contents, clause cards with a clause chip, penalty ladder, checklists, the
   headline-vs-notice table, and the agency page's step/question lists. Brand typography per design-direction.md 4b. */
.nmc-pg h1{font-size:clamp(30px,5.6vw,44px)}
.nmc-pg h1 .it,.nmc-intro h1 .it{color:var(--teal)}
.nmc-facts{margin:28px 0 0;padding:0;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
.nmc-facts>div{display:grid;gap:3px;padding:14px 20px;border-top:1px solid var(--line)}
.nmc-facts>div:first-child{border-top:0}
.nmc-facts dt{font:600 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.nmc-facts dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
@media(min-width:700px){.nmc-facts>div{grid-template-columns:140px 1fr;gap:18px;align-items:baseline}}
.nmc-src{margin:14px 2px 0;font-size:14.5px;color:var(--muted)}
.nmc-src a,.nmc-sources a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.nmc-toc{margin:30px 0 0;padding:18px 22px;border-radius:18px;background:#f1fbf9;border:1px solid rgba(10,165,160,.2)}
.nmc-toc-k{font:600 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.nmc-toc ol{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.nmc-toc a{font-size:14.5px;font-weight:500;color:var(--ink);border-bottom:1px solid transparent}
.nmc-toc a:hover{color:var(--teal);border-bottom-color:currentColor}
.nmc-sec{margin-top:60px;scroll-margin-top:96px}
.nmc-h2{font-size:clamp(26px,4.4vw,36px);margin:0;max-width:none}
.nmc-h2 .it{color:var(--teal)}
.nmc-sec>p{margin:16px 0 0;font-size:17px;line-height:1.7}
.nmc-sec>p.nmc-lead{margin-bottom:6px;color:var(--muted)}
.nmc-sec strong{color:var(--ink)}
.nmc-items{margin-top:20px;display:grid;gap:12px}
.nmc-item{padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.nmc-item-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.nmc-item h3{margin:0;font:600 17px/1.3 'Space Grotesk',Inter,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.nmc-cl{display:inline-block;font:600 11.5px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.04em;white-space:nowrap;color:var(--teal);background:rgba(10,165,160,.1);border-radius:999px;padding:3px 10px}
.nmc-item p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.nmc-callout{margin-top:16px;padding:18px 22px;border-radius:18px;border:1.5px dashed rgba(10,165,160,.4);background:#f1fbf9}
.nmc-callout b{font:600 15px 'Space Grotesk',Inter,sans-serif;color:var(--teal)}
.nmc-callout p{margin:6px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.nmc-ladder{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.nmc-ladder li{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.nmc-step-n{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:600 14px 'Space Grotesk',Inter,sans-serif}
.nmc-ladder b{display:block;font:600 16px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.nmc-ladder li span:not(.nmc-step-n){display:block;font-size:15px;line-height:1.5;color:var(--muted)}
.nmc-group{margin-top:24px}
.nmc-group h3{margin:0 0 10px;font:600 18px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.nmc-checks{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.nmc-checks li{position:relative;padding-left:28px;font-size:16px;line-height:1.55;color:var(--ink)}
.nmc-checks li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue))}
.nmc-checks li::after{content:"";position:absolute;left:4.5px;top:10px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.nmc-tbl{margin-top:20px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.nmc-tr{display:grid;gap:6px;padding:16px 20px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--muted)}
.nmc-tr:nth-child(2){border-top:0}
.nmc-th{display:none}
.nmc-said{font:600 15.5px/1.4 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.nmc-tr .nmc-cl{margin-left:4px}
@media(min-width:760px){.nmc-tr{grid-template-columns:.8fr 1.4fr;gap:24px}.nmc-th{display:grid;border-top:0;background:#f1fbf9;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);padding-top:12px;padding-bottom:12px}}
.nmc-more{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nmc-sources{margin:16px 0 0;padding-left:22px;display:grid;gap:8px;font-size:15.5px;line-height:1.5}
.nmc-log{margin-top:20px;padding:16px 20px;border-radius:16px;background:#f6fafc;border:1px solid var(--line);font-size:15px;line-height:1.6}
.nmc-log b{color:var(--ink)}
.nmc-log p{margin:6px 0 0;color:var(--muted)}
.nmc-disc{margin-top:18px;font-size:14px;line-height:1.6;color:var(--muted)}
/* agency page */
.nmc-intro-links{margin-top:18px}
.nmc-asec{padding:0 0 70px}
.nmc-alead{max-width:680px;margin-top:12px;font-size:18px;color:var(--muted)}
.nmc-asec .svp-incl-grid,.nmc-asec .sv-cards{margin-top:22px}
.svp-incl-card .nmc-cl,.sv-card .nmc-cl{justify-self:start;margin-top:4px}
.nmc-steps{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:nmcs;max-width:820px}
.nmc-steps li{counter-increment:nmcs;position:relative;display:grid;gap:4px;padding:18px 20px 18px 70px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.nmc-steps li::before{content:counter(nmcs);position:absolute;left:18px;top:16px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:600 15px 'Space Grotesk',Inter,sans-serif}
.nmc-steps b{font:600 17px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.nmc-steps span{font-size:15.5px;line-height:1.55;color:var(--muted)}
.nmc-asks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.nmc-asks li{position:relative;padding:14px 18px 14px 46px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink)}
.nmc-asks li::before{content:"?";position:absolute;left:17px;top:9px;font:italic 400 26px 'Instrument Serif',Georgia,serif;color:var(--teal)}
@media(min-width:760px){.nmc-asks{grid-template-columns:repeat(2,1fr)}}
.nmc-asec .post-faq{max-width:820px}
.rx .svp-nmc{margin:16px 0 0;font-size:14.5px;color:var(--muted)}
.rx .svp-nmc a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nmc-badge{justify-self:center;width:min(100%,400px);padding:26px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px rgba(10,60,100,.1)}
.nmc-badge-k{display:block;margin-bottom:14px;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.nmc-badge .nmc-checks{gap:11px}
.nmc-badge .nmc-checks li{font:500 16px/1.4 'Space Grotesk',Inter,sans-serif}
.nmc-badge-n{display:block;margin-top:16px;font-size:13.5px;color:var(--muted)}
.nmc-intro .sv-intro-tx h1{max-width:680px}
.nmc-checks-list{margin-top:18px;max-width:820px}
.nmc-checks-list li{font-size:16.5px}
.nmc-checks li b{color:var(--ink)}
.nmc-related{margin:10px 0 0;padding-left:22px;display:grid;gap:6px;font-size:16px}
.nmc-related a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.nmc-badge-i{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--muted)}
.nmc-badge .nmc-checks li{font:500 15.5px/1.45 'Space Grotesk',Inter,sans-serif}
.nmc-badge{width:min(100%,430px)}
.nmc-commit{margin-top:12px}
/* Homepage case-study section, process-only examples (B3, 2026-10-15): a card instead of the four-station trail. */
.ct-proc .ct-text{max-width:680px;margin:18px 0 0;font-size:18px;line-height:1.55;color:var(--ink)}
.ct-proc .ct-focus{max-width:680px;margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.ct-proc .ct-focus b{color:var(--ink)}
.ct-proc .ct-who b{font-size:22px}

/* ---------- Accessibility pass (2026-10-15, Lighthouse + manual) ----------
   The brand teal #0aa5a0 is 3:1 on white: fine for big type, too faint for small text (WCAG AA wants 4.5:1). Small teal
   text on LIGHT backgrounds now uses --teal-ink (5.4:1); large heading accents use --teal-lg (3.4:1, enough for 24px+).
   Dark sections keep the mint colour they already override. Footer legal text and the home mock-up greys were 2:1. */
:root{--teal-ink:#067672;--teal-lg:#0a9a95}
.label,.crumbs a,.sf-col h3,.sf-map,.dh,.mh,.wcol h3,.ecard .k,.pcard-tag,.post-body a,.pempty a,.rx-h,.ins-row-tx .ins-tag,.faq-hd .lead a,.ab-card-kicker,.ab-does-foot,.sv-cta,.door .go,.ct-more a,.nmc-facts dt,.nmc-src a,.nmc-sources a,.nmc-toc-k,.nmc-cl,.nmc-callout b,.nmc-more,.nmc-related a,.nmc-badge-k,.rx .svp-nmc a{color:var(--teal-ink)}
.sf-map{color:var(--teal-ink)!important}
.ab-origin .label,.vitals .label,.journey .label,.never .label,.stories .label{color:var(--mint)}
.sv-intro h1 .it,.svp-intro h1 .it,.nmc-pg h1 .it,.nmc-intro h1 .it,.nmc-h2 .it,.svp-h2 .it,.sit h2 .it,.ab-mission-tx h1 .it,.ab-why h2 .it,.ab-team h2 .it{color:var(--teal-lg)}
.sf-legal{color:#4f6677}
.vzf,.row.ghost,.row.ghost b{color:#5d7486}
.nmc-cl,.nmc-facts dt,.nmc-toc-k,.nmc-badge-k{font-size:12px}
@media(max-width:899px){
  .sf-col a{display:block;padding:8px 0}
  .sf-ni a,.sf-bottom nav a,.sf-map{display:inline-block;padding:8px 0}
  .crumbs a{display:inline-block;padding:13px 0}
  .nmc-toc a,.nmc-more,.rx .svp-nmc a{display:inline-block;padding:8px 0}
  .nmc-related a,.nmc-sources a{display:inline-block;padding:6px 0}
}

/* Layout-fit pass (2026-10-15): team cards' back face overflowed on phones (two columns, ~166px wide). Taller card, tighter type. */
@media(max-width:899px){
  .mate-in{aspect-ratio:4/5.7}
  .mate-b{padding:14px 12px;gap:8px}
  .mate-b b{font-size:14px}
  .mate-b em{font-size:16px;line-height:1.22}
}

/* Eight service cards: 2 columns on tablets (even rows); on desktop a 6-column track so the last two cards share the final row. */
@media(min-width:700px){.sv-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .sv-cards{grid-template-columns:repeat(6,1fr)}
  .sv-card{grid-column:span 2}
  .sv-card:nth-last-child(-n+2){grid-column:span 3}
}

/* FAQ accordions inside articles, the NMC pages and service pages: the base `details`/`summary` padding stacked on the
   .post-faq padding and made every row ~100px tall; tighten to a compact row. */
.post-faq{margin-top:28px}
.post-faq summary{padding:0;min-height:44px;align-items:center}
.post-faq details{padding:12px 0}
.post-faq details p{padding:0;margin:8px 0 4px}

/* About: founder note, wider and shorter. Photo, name and role sit together in one rectangle card beside the note. */
.ab-note-photo{width:100%;max-width:640px;padding:14px 14px 18px;border-radius:28px;background:linear-gradient(160deg,#04151b,#0b2a3c);box-shadow:0 22px 50px rgba(10,60,100,.18);color:#fff;text-align:left}
.ab-note-photo img{width:100%;height:auto;aspect-ratio:1;border-radius:20px;box-shadow:none;display:block}
.ab-note-photo figcaption{display:grid;gap:2px;padding:14px 6px 0}
.ab-note-photo figcaption b{font:600 18px 'Space Grotesk',Inter,sans-serif;color:#fff}
.ab-note-photo figcaption span{font-size:13px;line-height:1.4;color:#8fb3c6}
@media(max-width:899px){.ab-note-photo{max-width:340px}.ab-note-photo img{aspect-ratio:4/3;object-position:50% 20%}}
@media(min-width:900px){
  .ab-note-grid{grid-template-columns:300px 1fr;max-width:1120px;gap:36px;align-items:stretch}
  .ab-note-photo{display:flex;flex-direction:column;max-width:none;padding:16px 16px 20px}
  .ab-note-photo img{aspect-ratio:1;flex:none}
  .ab-note-photo figcaption{margin-top:auto;padding:16px 6px 0}
  .ab-note-body{padding:42px 48px}
  .ab-note-body blockquote{font-size:21px;line-height:1.5}
  .ab-note-body blockquote p+p{margin-top:12px}
  .ab-note-body blockquote p.ab-note-pull{margin:16px 0;font-size:28px}
  .ab-note-h{max-width:720px}
  .ab-origin-body p{max-width:none}
}
@media(min-width:900px){
  .ab-note-grid{align-items:center}
  .ab-note-photo{align-self:center}
  .ab-note-photo figcaption{margin-top:0}
}
@media(min-width:900px){.ab-note-grid{max-width:1160px}}

/* Founder note (rewritten 2026-10-15): longer, so slightly smaller type on desktop and an emphasised closing line. */
.ab-note-body blockquote strong{font-weight:600;color:var(--ink)}
@media(min-width:900px){
  .ab-note-body{padding:38px 46px}
  .ab-note-body blockquote{font-size:19.5px;line-height:1.48}
  .ab-note-body blockquote p+p{margin-top:10px}
  .ab-note-body blockquote p.ab-note-pull{font-size:26px;margin:12px 0}
}
.ab-note-body blockquote strong{font:600 .86em/1.5 'Space Grotesk',Inter,sans-serif;font-style:normal;color:var(--ink)}
.ab-note-h .it{color:var(--teal-lg)}
/* Brand guide 4b: every headline accent phrase is teal. These four were still plain ink. */
#team h2 .it,#insights h2 .it,#faq h2 .it,#h1 .it{color:var(--teal-lg)}
.ab-tl-t a{color:inherit;text-decoration:underline;text-decoration-color:rgba(45,255,208,.5);text-underline-offset:3px}
.ab-tl-t a:hover{text-decoration-color:#2dffd0}

/* "Read the original notice" button on the NMC guide, under the short answer. */
.nmc-orig{display:inline-flex;align-items:center;gap:10px;margin-top:16px;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--teal-ink);color:var(--teal-ink);font:600 14.5px Inter,system-ui,sans-serif;background:#fff;transition:background .2s,color .2s}
.nmc-orig:hover,.nmc-orig:focus-visible{background:var(--teal-ink);color:#fff}
.nmc-orig i{font-style:normal;font-size:16px}

/* Homepage NMC band (2026-10-15): short pointer to the agency page and the guide, between "How we work" and the team. */
.nmcb{padding:64px 0;background:#fff}
.nmcb-in{display:grid;gap:30px;align-items:center}
.nmcb h2{color:var(--ink);margin:12px 0 0;max-width:640px}
.nmcb h2 .it{color:var(--teal-lg)}
.nmcb .lead{margin-top:16px;max-width:560px}
.nmcb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:24px}
.nmcb-card{padding:26px 26px 22px;border-radius:26px;background:var(--soft);border:1px solid var(--line);box-shadow:0 18px 44px rgba(10,60,100,.07)}
.nmcb-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.nmcb-card li{position:relative;padding-left:34px;font:500 16px/1.45 Inter,system-ui,sans-serif;color:var(--ink)}
.nmcb-card li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:700 12px/22px Inter,sans-serif;text-align:center}
.nmcb-card p{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--muted)}
@media(min-width:900px){.nmcb{padding:96px 0}.nmcb-in{grid-template-columns:1.1fr .9fr;gap:60px}}

/* ---------- Contact page (2026-10-15) ---------- */
.ct-in{align-items:start}
.ct-intro .sv-intro-tx{min-width:0}
.ct-quick{margin-top:30px;padding:22px;border-radius:24px;background:var(--soft);border:1px solid var(--line)}
.ct-quick-h{font:600 17px 'Space Grotesk',Inter,sans-serif;color:var(--ink);margin:0 0 14px}
.ct-wa{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 20px;border-radius:18px;background:#128c4a;color:#fff;box-shadow:0 12px 26px rgba(18,140,74,.25);transition:transform .2s,box-shadow .2s}
.ct-wa:hover,.ct-wa:focus-visible{transform:translateY(-2px);box-shadow:0 16px 32px rgba(18,140,74,.32)}
.ct-wa .wa-i{width:28px;height:28px;flex:none;fill:currentColor}
.ct-wa span{display:grid;line-height:1.25}
.ct-wa b{font:600 16px 'Space Grotesk',Inter,sans-serif}
.ct-wa small{font-size:13px;opacity:.9}
.ct-wa-big{margin:20px 0 6px}
.ct-ways{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.ct-ways a{display:flex;align-items:center;gap:14px;min-height:48px;padding:6px 4px;border-radius:14px;color:var(--ink)}
.ct-ways a:hover{background:#fff}
.ct-ways .ins-ic{flex:none;width:38px;height:38px}
.ct-ways span{display:grid;font-size:14.5px;line-height:1.35;color:var(--muted);min-width:0}
.ct-ways b{font:600 14px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.ct-card{padding:28px 24px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 54px rgba(10,60,100,.1)}
.ct-form-h{font:600 22px/1.2 'Space Grotesk',Inter,sans-serif;color:var(--ink);margin:0 0 18px}
.ct-row{display:grid;gap:0 14px}
.ct-f{display:block;margin-bottom:16px}
.ct-f>span{display:block;font:600 13.5px Inter,system-ui,sans-serif;color:var(--ink);margin-bottom:6px}
.ct-f>span i{font-style:normal;color:#c0392b}
.ct-f>span em{font-style:normal;font-weight:400;color:var(--muted)}
.ct-f input,.ct-f select,.ct-f textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid #cfdde6;border-radius:14px;background:#fff;color:var(--ink);font:400 16px Inter,system-ui,sans-serif;transition:border-color .2s,box-shadow .2s}
.ct-f textarea{resize:vertical;min-height:110px}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(10,165,160,.16)}
.ct-roles{border:0;margin:0 0 16px;padding:0}
.ct-roles legend{font:600 13.5px Inter,system-ui,sans-serif;color:var(--ink);margin-bottom:8px;padding:0}
.ct-roles{display:flex;flex-wrap:wrap;gap:8px}
.ct-roles legend{width:100%}
.ct-roles label{cursor:pointer}
.ct-roles input{position:absolute;opacity:0;pointer-events:none}
.ct-roles span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid #cfdde6;font:500 14.5px Inter,system-ui,sans-serif;color:var(--ink);background:#fff;transition:all .2s}
.ct-roles input:checked+span{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.ct-roles input:focus-visible+span{box-shadow:0 0 0 4px rgba(10,165,160,.25)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;font-size:14px;line-height:1.5;color:var(--muted);cursor:pointer}
.ct-consent input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--teal-ink)}
.ct-consent a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.ct-submit{width:100%;justify-content:center}
.ct-submit[disabled]{opacity:.7;cursor:progress}
.ct-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.ct-errors{margin:0 0 18px;padding:14px 16px;border-radius:14px;background:#fdecea;border:1px solid #f1b8b1;color:#8a2a1f;font-size:14.5px}
.ct-errors ul{margin:0;padding-left:18px}
.ct-sent{text-align:center;padding:12px 4px}
.ct-sent h2{font:600 24px/1.25 'Space Grotesk',Inter,sans-serif;color:var(--ink);margin:14px 0 10px}
.ct-sent p{color:var(--muted);line-height:1.6;margin:0}
.ct-sent .ct-note{margin:8px 0 14px}
.ct-tick{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:700 24px/1 Inter,sans-serif}
@media(min-width:900px){
  .ct-in{grid-template-columns:.9fr 1.1fr;gap:56px}
  .ct-card{padding:36px 38px}
  .ct-row{grid-template-columns:1fr 1fr}
}
.ct-wa span{text-align:left}

/* ---------- Legal pages, Team page, 404 (2026-10-16) ---------- */
.lg-hd{padding:16px 0 8px}
.lg-hd h1,.tm-intro h1,.er h1{font-size:clamp(32px,6vw,50px);max-width:760px}
.lg-body{padding:12px 0 80px}
.legal{max-width:780px;font-size:16.5px;line-height:1.75;color:#2d4556}
.legal h2{font:600 clamp(22px,3.6vw,28px)/1.2 'Space Grotesk',Inter,sans-serif;color:var(--ink);margin:44px 0 12px}
.legal h3{font:600 19px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink);margin:30px 0 8px}
.legal h4{font:600 16.5px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink);margin:22px 0 6px}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px}
.legal li{margin:0 0 7px}
.legal a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal strong{color:var(--ink)}
.tm-intro{padding:16px 0 30px}
.tm-intro .lead{max-width:620px;margin-top:16px;font-size:18px}
.tm-body{padding:0 0 60px}
.tm-body .boss{margin-bottom:26px}
.tm-name{font:600 clamp(26px,4vw,34px)/1.1 'Space Grotesk',Inter,sans-serif;color:#fff;margin:4px 0 0}
.tm-grid{display:grid;gap:18px;grid-template-columns:1fr}
.tm-card{overflow:hidden;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(10,60,100,.07)}
.tm-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#7feddd;display:block}
.tm-card-tx{padding:18px 20px 22px;display:grid;gap:6px;justify-items:start}
.tm-card .tm-name{color:var(--ink);font-size:20px}
.tm-card-tx p{margin:6px 0 0;font:italic 400 19px/1.35 'Instrument Serif',Georgia,serif;color:var(--ink)}
.tm-card .tg2{background:var(--soft);color:var(--teal-ink)}
.tm-more{padding:20px 0 90px}
.tm-pts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.tm-pts li{display:grid;gap:4px;padding:20px 22px;border-radius:20px;background:var(--soft);border:1px solid var(--line)}
.tm-pts b{font:600 17px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.tm-pts span{font-size:15px;line-height:1.5;color:var(--muted)}
.tm-pts a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.er{padding:150px 0 100px}
.er-code{font:700 clamp(90px,18vw,180px)/1 'Space Grotesk',Inter,sans-serif;color:transparent;-webkit-text-stroke:2px #cfe6ee;margin:0 0 6px}
.er .lead{margin-top:14px;max-width:560px}
.er-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:26px}
@media(min-width:700px){.tm-grid{grid-template-columns:repeat(2,1fr)}.tm-pts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tm-grid{grid-template-columns:repeat(4,1fr)}.tm-pts{grid-template-columns:repeat(4,1fr)}}
.tm-card .tg2,.tm-card .tg2.sm{font-size:12px}
.lg-lead{max-width:640px;margin-top:14px;font-size:18px}

/* ---------- "How patients find you" phone story: Google-style screens (2026-10-16) ----------
   Realistic and internally consistent: she searches at 10:02 PM, the clinic is CLOSED (opens 9 AM), she books tomorrow
   10:30 AM. Look inspired by search and maps apps; no Google logo; the sample clinic and reviews are labelled. */
#how .g-i{width:1.5em;height:1.5em;flex:none;fill:none;stroke:#5f6b76;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#how .g-bar{display:flex;align-items:center;gap:.7em;padding:.75em .95em;border-radius:2em;background:#fff;border:1px solid #dfe3e8;box-shadow:0 .15em .6em rgba(32,33,36,.18);font-size:1.02em;min-height:3.2em;color:#202124}
#how .g-bar #jq{white-space:nowrap}
#how .g-bar .caret{margin-left:-.5em;background:#4285f4}
#how .g-mic{margin-left:auto}
#how .g-bar-s{box-shadow:none;background:#f1f3f4;border-color:transparent;min-height:2.7em;padding:.55em .9em}
#how .g-bar-s span{font-size:.94em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#how .g-dd{margin-top:-.4em;padding:1em 0 .3em;border-radius:0 0 1.4em 1.4em;background:#fff;box-shadow:0 .5em 1em rgba(32,33,36,.18);border:1px solid #e3e6ea;border-top:0}
#how .g-row{display:flex;align-items:center;gap:.8em;padding:.62em 1em;font-size:.95em;color:#202124;white-space:nowrap}
#how .g-row .g-i{stroke:#9aa0a6;width:1.2em;height:1.2em}
#how .g-row b{font-weight:600;color:#202124}
#how .g-tabs{display:flex;gap:1.1em;margin:.8em 0 .5em;font-size:.86em;color:#5f6368;border-bottom:1px solid #e3e6ea;padding-bottom:.45em}
#how .g-tabs .on{color:#1a73e8;font-weight:600;box-shadow:0 .5em 0 -.3em #1a73e8}
#how .g-ai{padding:.85em .9em;border-radius:1.1em;background:linear-gradient(135deg,#eef3fd,#f6effa);border:1px solid #dde5f7}
#how .g-ai-k{font:600 .8em Inter,sans-serif;color:#3c4a67;margin-bottom:.45em}
#how .g-ai-k i{font-style:normal;color:#7b61ff;margin-right:.25em}
#how .g-ai .ai-msg{font-size:.9em;line-height:1.5;color:#202124}
#how .g-ai .src{margin-top:.6em}
#how .g-ai .src span{font-size:.74em;background:#fff}
#how .g-pack{margin-top:.8em;display:grid;gap:.5em}
#how .g-pk{display:grid;gap:.1em;padding:.7em .85em;border-radius:1em;border:1px solid #e3e6ea;background:#fff}
#how .g-pk b{font:600 .96em Inter,sans-serif;color:#1a0dab}
#how .g-pk.dim b{color:#3c4043}
#how .g-r{font-size:.82em;color:#5f6368}
#how .g-r i{font-style:normal;color:#202124;margin-right:.2em}
#how .g-pk small{font-size:.78em;color:#5f6368}
#how .g-pk em{font-style:normal;color:#c5221f}
#how .g-ph{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:.3em;height:9.2em;border-radius:1.1em;overflow:hidden}
#how .g-map{grid-row:1/3;position:relative;background:#e8eef0;border-radius:0}
#how .g-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.9) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.9) 2px,transparent 2px),linear-gradient(135deg,#dcefe0 0 22%,transparent 22%);background-size:2.6em 2.6em,2.6em 2.6em,100% 100%;transform:rotate(-8deg) scale(1.5)}
#how .g-map .pin{left:50%;top:34%;width:1.9em;height:1.9em;margin-left:-.95em;background:#ea4335}
#how .g-t{background:linear-gradient(135deg,#bfe3e6,#9fcdd6)}
#how .g-t.t2{background:linear-gradient(135deg,#f2dcc4,#e6c3a1)}
#how .g-title{display:grid;gap:.15em;margin-top:.75em}
#how .g-title b{font:600 1.18em 'Space Grotesk',Inter,sans-serif;color:#202124}
#how .g-title small{font-size:.8em;color:#5f6368}
#how .g-title .g-closed{color:#c5221f;font-weight:600}
#how .g-title .stars{font-size:1em;letter-spacing:.05em}
#how .g-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;margin:.75em 0 .3em}
#how .g-acts span{text-align:center;padding:.55em 0;border-radius:2em;border:1px solid #d2e3fc;color:#1a73e8;font-size:.82em;font-weight:600}
#how .g-acts .bk{background:#1a73e8;color:#fff;border-color:#1a73e8}
#how .rev{margin-top:.5em;padding:.6em .8em;font-size:.84em;line-height:1.4}
#how .g-title-b{margin-top:0}
#how .ph-note{position:absolute;left:50%;bottom:-2.4em;transform:translateX(-50%);white-space:nowrap;font:500 .72em Inter,sans-serif;color:#5d7486}
#how .phone-wrap{padding-bottom:1.6em}
#how .g-row{font-size:.88em;gap:.7em;padding:.6em .9em}
#how .g-row span{overflow:hidden;text-overflow:ellipsis}
#how .g-bar-s span{font-size:.86em}
#how .g-tabs{margin:.6em 0 .45em}
#how .g-ai{padding:.7em .8em}
#how .g-ai .ai-msg{font-size:.86em;line-height:1.45}
#how .g-ai .src{flex-wrap:nowrap;margin-top:.5em}
#how .g-ai .src span{white-space:nowrap;padding:.28em .6em}
#how .g-pack{margin-top:.6em;gap:.4em}
#how .g-pk{padding:.55em .8em}
#how .toast b{white-space:normal;font-size:.92em}
#how .g-row{font-size:.8em}
#how .g-row span{text-overflow:clip}
#how .g-bar-s span{font-size:.8em}
#how .g-row{font-size:.77em;padding:.62em .7em;gap:.6em}


/* ---------- Contact form, refined (2026-10-16): calmer, more professional (owner: "looks amateur") ----------
   Smaller radii, 1px borders, a segmented control instead of bubbly pills, grouped sections, custom select. */
.ct-card{padding:30px 28px 26px;border-radius:18px;box-shadow:0 18px 44px rgba(10,60,100,.08)}
.ct-form-h{font:600 20px/1.25 'Space Grotesk',Inter,sans-serif;margin:0 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ct-sec{display:flex;align-items:center;gap:12px;margin:22px 0 14px;font:600 11.5px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.ct-sec::after{content:"";flex:1;height:1px;background:var(--line)}
.ct-form-h+.ct-errors+.ct-sec,.ct-form-h+.ct-sec{margin-top:20px}
.ct-row{gap:0 16px}
.ct-f{margin-bottom:16px}
.ct-f>span{font:600 13px Inter,system-ui,sans-serif;color:#2d4556;margin-bottom:6px}
.ct-f>span em{font-weight:400;color:#7b8c99}
.ct-f>span i{color:#b3261e}
.ct-f input,.ct-f select,.ct-f textarea{min-height:46px;padding:11px 14px;border:1px solid #c5d3dc;border-radius:10px;font:400 15.5px Inter,system-ui,sans-serif;color:var(--ink);background:#fff;box-shadow:inset 0 1px 0 rgba(10,60,100,.03)}
.ct-f input::placeholder,.ct-f textarea::placeholder{color:#93a3af}
.ct-f input:hover,.ct-f select:hover,.ct-f textarea:hover{border-color:#9db2c0}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{border-color:var(--teal-ink);box-shadow:0 0 0 3px rgba(6,118,114,.16)}
.ct-f select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d7486' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
.ct-f textarea{min-height:112px;line-height:1.5}
.ct-roles{display:block;margin:0 0 16px}
.ct-roles legend{display:block;font:600 13px Inter,system-ui,sans-serif;color:#2d4556;margin-bottom:6px;padding:0}
.ct-seg{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#c5d3dc;border:1px solid #c5d3dc;border-radius:10px;overflow:hidden}
.ct-seg label{display:block;cursor:pointer;background:#fff}
.ct-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 6px;border:0;border-radius:0;font:500 14px Inter,system-ui,sans-serif;color:#2d4556;text-align:center;background:#fff;transition:background .15s,color .15s}
.ct-seg label:hover span{background:#f2f7fa}
.ct-seg input:checked+span{background:var(--teal-ink);color:#fff;font-weight:600}
.ct-seg input:focus-visible+span{box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 0 0 3px rgba(6,118,114,.35)}
.ct-consent{align-items:flex-start;gap:10px;margin:2px 0 10px;font-size:13.5px;line-height:1.5;color:#4f6677}
.ct-consent input{width:18px;height:18px;margin-top:2px;border-radius:4px}
.ct-submit{margin-top:8px;min-height:50px;border-radius:12px;font-size:15.5px}
.ct-note{font-size:12.5px;color:#7b8c99}
@media(max-width:560px){.ct-seg{grid-template-columns:repeat(3,1fr)}.ct-card{padding:24px 18px 20px}}
@media(min-width:900px){.ct-card{padding:34px 36px 28px}}
.ct-seg{grid-template-columns:1fr 1fr 1.1fr 1.9fr 1fr}
@media(max-width:560px){.ct-seg{grid-template-columns:repeat(3,1fr)}.ct-seg label:last-child{grid-column:span 2}}

/* ---------- How we work: ECG monitor with the process content (2026-10-16) ---------- */
.rh-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.rh-month{position:absolute;right:16px;top:12px;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#2dffd0;padding:4px 10px;border-radius:999px;background:rgba(45,255,208,.1);border:1px solid rgba(45,255,208,.28);z-index:2}
.rh-steps li{transition:opacity .5s ease}
.rh-steps li b,.rh-steps li .rh-d{transition:opacity .25s ease}
.rh-steps li.swap b,.rh-steps li.swap .rh-d{opacity:0}
.rh-steps .rh-d{font:400 14.5px/1.5 Inter,system-ui,sans-serif;color:rgba(216,240,250,.85);max-width:none}
@media(min-width:900px){
  .rh-steps li{min-height:170px;padding:14px 12px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
  .rh-steps .rh-d{max-width:22ch}
}
@media(max-width:899px){
  .rh-steps{gap:12px}
  .rh-steps li{grid-template-columns:34px 1fr;gap:2px 10px;align-items:start;padding:14px 0;text-align:left}
  .rh-steps li i{grid-row:1/3}
  .rh-steps li b,.rh-steps li .rh-d{grid-column:2}
}

/* ---------- Soft section transitions (2026-10-16): light and dark sections used to meet at a hard edge ---------- */
/* light -> dark into the pinned phone story: a zero-height marker in front of it paints a white-to-clear fade over the first 220px of the dark scene
   (it is outside the pinned element, so it scrolls away when the story pins) */
.blend-in{position:relative;height:0;z-index:5;pointer-events:none}
.blend-in::before{content:"";position:absolute;left:0;right:0;top:0;height:240px;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.82) 22%,rgba(255,255,255,.4) 55%,rgba(255,255,255,0) 100%)}
/* dark -> light: "How we work" into the NMC band, and the closing CTA after the FAQ */
.never{padding-bottom:170px;background:radial-gradient(60% 55% at 80% 30%,rgba(20,120,200,.18),transparent 70%),linear-gradient(180deg,#061a28,#04151b)}
.never::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 45%,rgba(255,255,255,.82) 78%,#fff 100%);pointer-events:none;z-index:0}
.never .wrap{position:relative;z-index:1}
.final{padding-top:170px}
.final::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,#fbfdfe 0%,rgba(251,253,254,.78) 28%,rgba(251,253,254,.34) 62%,rgba(251,253,254,0) 100%);pointer-events:none;z-index:1}
/* the pale team band melts into the white NMC band above it and the page below it */
.team{position:relative}
.team::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0));pointer-events:none}
.team::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(251,253,254,0),#fbfdfe);pointer-events:none}
.team .wrap{position:relative;z-index:1}
@media(max-width:899px){.never{padding-bottom:150px}.final{padding-top:140px}.blend-in::before{height:160px}}
/* "Patient journey" (blue-tinted glow at its foot) into "Client stories" (flat navy): fade the glow out so the two dark bands join without a visible line */
.journey{isolation:isolate}
.journey::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(180deg,rgba(6,26,40,0),#061a28);pointer-events:none;z-index:-1}
/* tighter hand-off from the pinned journey scene to "Client stories" (the pin leaves some empty space below the last line) */
@media(min-width:1000px) and (min-height:640px){.journey>.wrap{padding-bottom:0;justify-content:flex-end;padding-bottom:12vh}.stories{padding-top:28px}}

.rtop .av{overflow:hidden;width:30px;height:30px;flex:none}
.rtop .av img{width:100%;height:100%;object-fit:cover;display:block}


/* ---------- Hero, rebuilt communication (2026-10-16): the phone is HER phone ----------
   The reel shows what the patient sees (a doctor's profile: face, name, video); her thought sits in a bubble under the phone;
   Medmatis speaks only in the headline. Nothing is written over the doctor any more. */
.shade{background:linear-gradient(180deg,rgba(4,21,27,.42) 0%,transparent 22%,transparent 100%)}
.rtop{left:10px;right:auto;top:10px;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 4px 14px rgba(4,21,27,.22)}
.rtop .av{width:28px;height:28px;border:0}
.rtop b{font:600 12px Inter,system-ui,sans-serif;color:var(--ink);white-space:nowrap}
.fig{display:flex;flex-direction:column;align-items:center}
.thought{position:relative;z-index:6;width:min(100%,340px);margin:-6px auto 0;padding:13px 20px 15px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(10,60,100,.14)}
.thought::before{content:"";position:absolute;left:50%;top:-8px;width:16px;height:16px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.th-k{display:block;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:5px}
.thought .caps{position:static;left:auto;right:auto;bottom:auto;min-height:2.4em;z-index:auto}
.thought .cap{font:600 clamp(18px,5vw,21px)/1.2 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink);text-shadow:none}
.thought .cap mark{color:var(--teal-ink)}
.hero-proof{display:flex;align-items:flex-start;gap:9px;margin:18px 0 0;max-width:520px;font:500 13.5px/1.5 Inter,system-ui,sans-serif;color:var(--muted)}
.hero-proof svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--teal-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-proof a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(max-width:899px){.hero-proof{font-size:13px}.thought{margin-top:-2px}}
/* Doctor name on the reel: the real Reels / Shorts format, a round avatar and a plain white name at the bottom-left over the video (no pill, no top bar) */
.shade{background:linear-gradient(180deg,rgba(4,21,27,.18) 0%,transparent 20%,transparent 66%,rgba(4,21,27,.72) 100%)}
.rtop{top:auto;bottom:14px;left:14px;right:14px;padding:0;background:none;box-shadow:none;border-radius:0;gap:9px}
.rtop .av{width:34px;height:34px;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.rtop b{font:600 14px Inter,system-ui,sans-serif;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);letter-spacing:-.005em}

.rtop .who{display:grid;gap:1px;min-width:0}
.rtop .who b{line-height:1.2}
.rtop .who small{font:500 11px/1.25 Inter,system-ui,sans-serif;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.55)}
.rtop{bottom:12px}
.shade{background:linear-gradient(180deg,rgba(4,21,27,.18) 0%,transparent 20%,transparent 58%,rgba(4,21,27,.78) 100%)}
/* Right now, one idea (2026-10-16): headline and its one supporting line sit together, vertically centred beside the card */
@media(min-width:1000px) and (min-height:640px){
  .sit-l{justify-content:center;gap:22px}
  .sit-g1{padding-bottom:0}
  .sit-g2{border-top:0;padding:0}
}

/* four service cards on speciality pages: an even 2x2 (the 8-card rule above would make a 2+2 split of different widths) */
@media(min-width:1000px){.sv-cards-4 .sv-card,.sv-cards-4 .sv-card:nth-last-child(-n+2){grid-column:span 3}}

.nmc-specs{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin-top:18px}
.nmc-specs li{margin:0}
.nmc-specs a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--teal-ink);font:600 14.5px Inter,system-ui,sans-serif;transition:background .2s,border-color .2s}
.nmc-specs a:hover{background:var(--soft);border-color:var(--teal-ink)}


/* Dropdown group headers (Specialities, Cities): a clear label with a rule, and room above each group so they no longer blend into the links */
.cols2 .dh{display:flex;align-items:center;gap:10px;margin:20px 0 8px;padding:0 12px;font-weight:700;color:var(--teal-ink)}
.cols2 .dh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(6,118,114,.35),rgba(6,118,114,0))}
.cols2>div>.dh:first-child{margin-top:2px}
.mh{margin:16px 0 6px;padding:0 12px;font:700 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}


/* ---------- Speciality pages: easier to read (2026-10-17) ----------
   Short-answer box, a dark band for the rules with a verdict tag on every rule, a pale do/don't band, bold lead in FAQ answers. */
.sp-short-sec{padding:6px 0 18px}
.sp-short-sec .short-a{max-width:820px;margin-top:0}
.sp-dark{position:relative;padding:78px 0 84px;background:radial-gradient(60% 55% at 80% 20%,rgba(20,120,200,.2),transparent 70%),linear-gradient(180deg,#061a28,#04151b);color:#d8f0fa;overflow:hidden}
.sp-dark::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,#fbfdfe,rgba(251,253,254,0));pointer-events:none;z-index:1}
.sp-dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(180deg,rgba(241,247,250,0),#f1f7fa);pointer-events:none;z-index:1}
.sp-dark .wrap{position:relative;z-index:2}
.sp-dark h2{color:#fff}.sp-dark h2 .it{color:#2dffd0}
.sp-dark .nmc-alead{color:rgba(216,240,250,.78)}
.sp-rules{margin-top:26px;display:grid;gap:14px;grid-template-columns:1fr}
.sp-rule{display:grid;gap:8px;align-content:start;padding:22px 24px 20px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(120,220,255,.16)}
.sp-rule b{font:600 18px/1.25 'Space Grotesk',Inter,sans-serif;color:#fff}
.sp-rd{font-size:14.5px;line-height:1.55;color:rgba(216,240,250,.84)}
.sp-v{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:4px 11px 4px 6px;border-radius:999px;font:700 11px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;border:1px solid transparent}
.sp-v i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:11px;line-height:1}
.sp-no .sp-v{background:rgba(255,120,110,.14);border-color:rgba(255,140,130,.45);color:#ffb3ac}.sp-no .sp-v i{background:#ff8a80;color:#3a0b07}
.sp-care .sp-v{background:rgba(255,200,90,.14);border-color:rgba(255,210,120,.45);color:#ffd98a}.sp-care .sp-v i{background:#ffc857;color:#3a2700}
.sp-yes .sp-v{background:rgba(45,255,208,.12);border-color:rgba(45,255,208,.4);color:#8ff5dd}.sp-yes .sp-v i{background:#2dffd0;color:#04302a}
.sp-duty .sp-v{background:rgba(120,180,255,.14);border-color:rgba(140,190,255,.45);color:#b5d4ff}.sp-duty .sp-v i{background:#8fbcff;color:#07203d}
.sp-no{border-left:3px solid #ff8a80}.sp-care{border-left:3px solid #ffc857}.sp-yes{border-left:3px solid #2dffd0}.sp-duty{border-left:3px solid #8fbcff}
.sp-soft{background:var(--soft);padding:72px 0 80px}
.sp-dd{margin-top:26px;display:grid;gap:16px;grid-template-columns:1fr}
.sp-col{padding:24px 26px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.sp-col h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:700 20px 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.sp-col h3 i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-size:14px;color:#fff}
.sp-do{border-top:4px solid var(--teal-ink)}.sp-do h3 i{background:var(--teal-ink)}
.sp-dont{border-top:4px solid #c0392b}.sp-dont h3 i{background:#c0392b}
.sp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sp-col li{position:relative;padding-left:26px;font:500 15.5px/1.45 Inter,system-ui,sans-serif;color:var(--ink)}
.sp-col li::before{position:absolute;left:0;top:0;font-weight:700}
.sp-do li::before{content:"✓";color:var(--teal-ink)}
.sp-dont li::before{content:"✕";color:#c0392b}
.svp-faq .post-faq p strong,.nmc-asec .post-faq p strong{color:var(--ink);font-weight:600}
@media(min-width:900px){.sp-rules{grid-template-columns:1fr 1fr;gap:16px}.sp-dd{grid-template-columns:1fr 1fr;gap:22px}.sp-dark{padding:100px 0 110px}}
.sp-short-sec{padding:6px 0 44px}
.sp-soft{position:relative}
.sp-soft::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(180deg,rgba(251,253,254,0),#fbfdfe);pointer-events:none}
.sp-soft .wrap{position:relative;z-index:1}
.sp-dark::before{height:60px}.sp-dark::after{height:70px}

/* NMC guide and agency page: same readability pattern (2026-10-17) */
.nmc-item-prohibited{border-left:4px solid #e0574b}
.nmc-item-allowed{border-left:4px solid #0a9a95}
.nmc-vt{display:inline-flex;align-items:center;justify-self:start;margin-bottom:8px;padding:3px 11px;border-radius:999px;font:700 11px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.nmc-item-prohibited .nmc-vt{background:#fdecea;color:#a3271d}
.nmc-item-allowed .nmc-vt{background:#e6f7f4;color:#066d68}
.nmc-sec .post-faq p strong{color:var(--ink);font-weight:600}
.sp-dark .nmc-steps li{background:rgba(255,255,255,.05);border-color:rgba(120,220,255,.16)}
.sp-dark .nmc-steps b{color:#fff}
.sp-dark .nmc-steps li span{color:rgba(216,240,250,.84)}
/* speciality pages: update stamp under the short answer */
.sp-upd{margin:12px 0 0;font:500 13px/1.5 Inter,system-ui,sans-serif;color:#4f6677;max-width:760px}
.short-a-k{font-size:12px}
/* small labels: legible minimum */
.ins-tag{font-size:12px}
.tg2.sm{font-size:11.5px}

/* service pages (2026-10-18): who this is for, process steps, speciality rows, what we need */
.sv-whosec,.sv-procsec{padding-top:70px;padding-bottom:84px}
.sv-who{margin-top:24px;display:grid;gap:14px;grid-template-columns:1fr}
.sv-who-c{position:relative;display:grid;gap:8px;align-content:start;padding:22px 24px 22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(10,60,90,.06)}
.sv-who-n{font:italic 400 30px/1 'Instrument Serif',Georgia,serif;color:var(--teal-lg)}
.sv-who-c b{font:600 18px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.sv-who-c span:last-child{font-size:15px;line-height:1.55;color:var(--muted)}
.sv-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.sv-steps li{position:relative;display:grid;gap:6px;padding:0 0 28px 66px}
.sv-steps li::before{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:linear-gradient(var(--teal),rgba(10,165,160,.15))}
.sv-steps li:last-child{padding-bottom:0}.sv-steps li:last-child::before{display:none}
.sv-sn{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal-ink),#0f6fa8);color:#fff;font:700 18px 'Space Grotesk',Inter,sans-serif;box-shadow:0 8px 20px rgba(10,100,140,.25)}
.sv-steps b{font:600 18px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink);padding-top:10px}
.sv-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.sv-specsec{padding-top:70px}
.sv-spec{margin-top:22px;display:grid;gap:12px;grid-template-columns:1fr}
.sv-spec-c{position:relative;display:grid;gap:6px;align-content:start;padding:20px 54px 20px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.sv-spec-c:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 16px 34px rgba(10,100,140,.1)}
.sv-spec-c b{font:600 17px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.sv-spec-c span{font-size:14.5px;line-height:1.55;color:var(--muted)}
.sv-spec-c .sv-arrow{position:absolute;right:20px;top:20px;color:var(--teal-ink)}
.sv-nw{display:grid;gap:18px;grid-template-columns:1fr}
.sv-need{padding:26px 26px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(10,60,90,.06)}
.sv-need ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.sv-need li{position:relative;padding-left:28px;font:500 15.5px/1.45 Inter,system-ui,sans-serif;color:var(--ink)}
.sv-need li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--teal-ink)}
.sv-need-k{color:var(--teal-ink)}.sv-need-k::before{background:var(--teal-ink);box-shadow:0 0 0 4px rgba(6,118,114,.15)}
@media(min-width:700px){.sv-who{grid-template-columns:repeat(2,1fr)}.sv-spec{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.sv-nw{grid-template-columns:.8fr 1.2fr;align-items:stretch}.sp-rules .sp-rule:last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:1000px){
  .sv-steps{grid-template-columns:repeat(5,1fr);gap:18px}
  .sv-steps li{padding:68px 0 0}
  .sv-steps li:last-child{padding-bottom:0}
  .sv-steps li::before{left:48px;right:-18px;top:21px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--teal),rgba(10,165,160,.15))}
  .sv-steps li:last-child::before{display:none}
  .sv-steps b{padding-top:0}
}
@media(min-width:1100px){.sv-who{grid-template-columns:repeat(4,1fr)}.sv-spec{grid-template-columns:repeat(3,1fr)}}

/* "Where we work" page: office card (2026-10-18) */
.cy-nap{margin-top:24px;display:grid;gap:14px;grid-template-columns:1fr}
.cy-nap-c{display:grid;gap:8px;align-content:start;padding:22px 24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(10,60,90,.06);font-size:15.5px;line-height:1.5;color:var(--ink)}
.cy-nap-c address{font-style:normal}
.cy-k{font:600 12px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.cy-big{font:600 21px/1.25 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.cy-nap-c a:not(.cy-big){color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
.cy-note{font-size:14px;color:var(--muted)}
@media(min-width:900px){.cy-nap{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px){.cy-lang{grid-template-columns:repeat(3,1fr)}}

/* location pages: place chips grouped by area (2026-10-18) */
.cy-places{margin-top:8px}
.cy-pg{margin-top:22px}
.cy-pg b{display:block;margin-bottom:10px;font:600 16px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.cy-pg .chips{margin:0}
.cy-pg .chips span{min-height:40px;padding:8px 16px;font-size:14.5px}
.cy-big{display:inline-flex;align-items:center;min-height:44px}
.cy-nap-c a:not(.cy-big){padding:11px 0}

/* footer: one closed accordion for the specialities, Where we work as a quiet row (2026-10-18) */
.sf-sp{margin:36px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.sf-sp>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:56px;padding:6px 0}
.sf-sp>summary::-webkit-details-marker{display:none}
.sf-sp>summary span{font:600 12px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.sf-sp>summary em{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--muted);flex:1 1 220px}
.sf-sp>summary::after{content:"+";margin-left:auto;font:500 22px/1 Inter,sans-serif;color:var(--teal-ink)}
.sf-sp[open]>summary::after{content:"+";transform:rotate(45deg)}
.sf-sgs{display:grid;gap:22px;padding:8px 0 10px}
.sf-sg h4{margin:0 0 6px;padding-bottom:9px;border-bottom:1px solid var(--line);font:600 13px Inter,system-ui,sans-serif;letter-spacing:.04em;color:var(--ink)}
.sf-sg-l{display:grid}
.sf-sg-l a{display:block;padding:8px 0;font-size:14.5px;line-height:1.35;color:var(--muted);transition:color .2s ease}
.sf-sg-l a:hover{color:var(--teal)}
.sf-where{margin:22px 0 0;padding:16px 20px;border-radius:18px;background:rgba(10,165,160,.06);border:1px solid rgba(10,165,160,.16);display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.sf-where h3{margin:0;font:600 12px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.sf-where p{margin:0;font-size:14px;color:var(--muted)}
.sf-where-l{display:flex;flex-wrap:wrap;gap:8px}
.sf-where-l a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px Inter,system-ui,sans-serif;color:var(--ink)}
.sf-where-l a:hover{border-color:var(--teal);color:var(--teal-ink)}
@media(min-width:900px){
  .sf-sgs{grid-template-columns:repeat(4,1fr);gap:36px}
  .sf-sg-l a{padding:5px 0}
  .sf-where{flex-wrap:nowrap}
}
/* the dots flash by scaling: SVG scales from the picture's origin unless told to use the shape's own centre */
.radar-blip{transform-box:fill-box;transform-origin:center}

/* Closing call-to-action: main form button + outlined Call and WhatsApp buttons (partial site/cta-row) */
.cta-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.btn-alt{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 24px;border-radius:999px;font-weight:600;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn-alt svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--teal-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-alt:hover,.btn-alt:focus-visible{border-color:var(--teal);box-shadow:0 8px 22px rgba(10,140,170,.16);transform:translateY(-1px)}
.final .btn-alt{background:rgba(255,255,255,.06);color:#e9fffb;border-color:rgba(185,255,240,.38)}
.final .btn-alt svg{stroke:var(--mint)}
.final .btn-alt:hover,.final .btn-alt:focus-visible{border-color:var(--mint);background:rgba(45,255,208,.1);box-shadow:0 8px 26px rgba(45,255,208,.16)}
.final .cta-row{gap:14px 16px}
.post-cta .cta-row{justify-content:center;gap:12px}
.post-cta .btn-alt{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55)}
.post-cta .btn-alt svg{stroke:#fff}
.post-cta .btn-alt:hover,.post-cta .btn-alt:focus-visible{background:rgba(255,255,255,.22);border-color:#fff}
.cta-small .btn,.cta-small .btn-alt{min-height:46px;padding:0 20px;font-size:15px}
@media (max-width:640px){
  .final .cta-row{flex-direction:column;align-items:stretch;max-width:340px;margin:0 auto}
  .final .cta-row .btn{width:100%}
  .final .cta-alt{flex-wrap:nowrap}
  .final .cta-alt .btn-alt{flex:1;padding:0 12px}
  .cta-small.cta-row{flex-direction:column;align-items:stretch}
  .cta-small .cta-alt{flex-wrap:nowrap}.cta-small .btn-alt{flex:1;padding:0 12px}
}

/* ---------- Contact page redesign (2026-10-18): dark hero + form card, then "other ways to reach us" ---------- */
.cx-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:128px 0 150px;
  background-image:radial-gradient(60% 50% at 88% 12%,rgba(10,165,160,.32),transparent 70%),radial-gradient(50% 45% at 6% 78%,rgba(20,120,200,.22),transparent 70%),linear-gradient(rgba(45,255,208,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(45,255,208,.045) 1px,transparent 1px);
  background-size:auto,auto,56px 56px,56px 56px}
.cx-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,rgba(251,253,254,0),#fbfdfe 92%);pointer-events:none;z-index:1}
.cx-grid{position:relative;z-index:2;display:grid;gap:40px;align-items:start}
.cx-tx{min-width:0}
.cx-hero .crumbs{color:rgba(216,240,250,.7)}.cx-hero .crumbs a{color:var(--mint)}
.cx-hero .ab-eyebrow{color:#8fb7b0}
.cx-hero .ab-eyebrow .dot{background:var(--mint);box-shadow:0 0 0 3px rgba(45,255,208,.16)}
.cx-hero h1{margin:16px 0 0;max-width:620px;color:#fff;font-size:clamp(34px,7.2vw,58px)}
.cx-hero h1 .it{color:var(--mint)}
.cx-hero .lead{color:#a9c9c4;max-width:540px}
.cx-quick{margin-top:26px}
.cx-quick-h{margin:0 0 12px;font:600 13px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8fb7b0}
.cx-quick .cta-alt{justify-content:flex-start}
.cx-hero .btn-alt{background:rgba(255,255,255,.06);color:#e9fffb;border-color:rgba(185,255,240,.38)}
.cx-hero .btn-alt svg{stroke:var(--mint)}
.cx-hero .btn-alt:hover,.cx-hero .btn-alt:focus-visible{border-color:var(--mint);background:rgba(45,255,208,.1);box-shadow:0 8px 26px rgba(45,255,208,.16)}
.cx-next{margin-top:38px;padding-top:30px;border-top:1px solid rgba(185,255,240,.16)}
.cx-next-h{margin:0 0 18px;font:600 20px/1.2 'Space Grotesk',Inter,sans-serif;color:#fff}
.cx-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative}
.cx-steps::before{content:"";position:absolute;left:17px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(180deg,rgba(45,255,208,.45) 0 6px,transparent 6px 12px)}
.cx-steps li{position:relative;display:flex;gap:16px;align-items:flex-start}
.cx-n{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--night);border:2px solid var(--mint);color:var(--mint);font:700 14px Inter,system-ui,sans-serif;position:relative;z-index:1}
.cx-steps b{display:block;font:600 17px/1.3 'Space Grotesk',Inter,sans-serif;color:#fff}
.cx-steps li span:not(.cx-n){display:block;margin-top:3px;font-size:15px;line-height:1.55;color:#a9c9c4}
.cx-card{box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
.cx-more{margin:2px 0 16px;border:1px dashed #c5d3dc;border-radius:12px;background:#f7fbfd}
.cx-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 14px;font:600 14px Inter,system-ui,sans-serif;color:var(--teal-ink)}
.cx-more summary::-webkit-details-marker{display:none}
.cx-more summary::before{content:"+";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--teal-ink);color:#fff;font:600 16px/1 Inter,sans-serif}
.cx-more[open] summary::before{content:"\2212"}
.cx-more[open]{border-style:solid;background:#fff}
.cx-more .ct-row{padding:6px 14px 0}
.cx-more .ct-f:last-child{margin-bottom:14px}
.cx-ways{padding:30px 0 90px;text-align:center}
.cx-ways h2{font-size:clamp(30px,6.4vw,46px);margin:0 auto;max-width:720px}
.cx-ways h2 .it{color:var(--teal-lg)}
.cx-ways .lead{margin:14px auto 0}
.cx-tiles{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:1fr;text-align:left}
.cx-tile{display:grid;gap:4px;align-content:start;height:100%;padding:22px 22px 24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px rgba(10,60,100,.07);color:var(--ink);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cx-tile:hover,.cx-tile:focus-visible{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 18px 40px rgba(10,60,100,.12)}
.cx-tile .ins-ic{width:44px;height:44px;margin-bottom:10px;border-radius:14px;background:linear-gradient(135deg,rgba(10,165,160,.14),rgba(20,120,200,.14));border:1px solid var(--line);transition:transform .4s cubic-bezier(.2,.9,.2,1),background .3s}
.cx-tile .ins-ic svg{width:22px;height:22px;stroke:var(--teal)}
.cx-tile:hover .ins-ic{transform:scale(1.1);background:rgba(45,255,208,.22)}
.cx-tile:hover .ins-ic .ic-tw{animation:icTwinkle 1.1s ease-in-out infinite}
.cx-tile b{font:600 18px 'Space Grotesk',Inter,sans-serif}
.cx-v{font-size:15px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
@media(min-width:620px){.cx-tiles{grid-template-columns:1fr 1fr}}
@media(min-width:900px){
  .cx-hero{padding:152px 0 160px}
  .cx-grid{grid-template-columns:1fr minmax(0,560px);gap:64px}
}
@media(min-width:1000px){.cx-tiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:899px){.cx-hero{padding-bottom:140px}.cx-hero::after{height:110px}}
@media(max-width:640px){.cx-quick .cta-alt{flex-wrap:nowrap}.cx-quick .btn-alt{flex:1;padding:0 12px}.cx-quick .cta-alt{justify-content:stretch}}
@media(prefers-reduced-motion:reduce){.cx-tile,.cx-tile .ins-ic{transition:none}.cx-tile:hover .ins-ic .ic-tw{animation:none}}
.cx-hero #h1 .it{color:var(--mint)}
/* contact hero: text, then form card, then "what happens next" on phones; two columns from 900px */
.cx-next{margin-top:0;padding-top:30px}
@media(min-width:900px){
  .cx-grid{grid-template-rows:auto 1fr;align-items:start}
  .cx-tx{grid-column:1;grid-row:1}
  .cx-card{grid-column:2;grid-row:1 / span 2}
  .cx-next{grid-column:1;grid-row:2;margin-top:0;align-self:start}
}
.cx-more summary{justify-content:flex-start;text-align:left}
.cx-more summary::after{content:none!important;display:none!important}

/* ================= Home on phones: mobile pass (2026-10-18, owner review of the 390px view) ================= */
@media(max-width:899px){
  /* hero reel: each tag is attached to the reel's top corner (it was floating above the frame, away from the video) */
  .s1,.s3{left:5%;right:auto;top:5%;bottom:auto}
  .s2,.s4{right:5%;left:auto;top:5%;bottom:auto}

  /* pinned phone story: the supporting photo card ran off the left edge; off on phones until the videos replace it */
  .pics{display:none}

  /* "Right now": the worry, the toggle card and the fix must be on ONE screen, or the story breaks */
  .sit{padding:84px 0 44px}
  .sit h2{font-size:clamp(28px,7.6vw,32px);margin-top:10px}
  .sit .lead,.sit-g2{display:none}
  .sit-panel{margin-top:18px;padding:16px 16px 14px;gap:10px;border-radius:26px}
  .worry{margin-top:2px;font-size:clamp(25px,6.8vw,29px)}
  .turn{margin-top:6px;padding-top:10px}
  .turn h3{font-size:20px;margin:4px 0 10px}
  .turn .btn{min-height:44px;padding:0 20px;font-size:15px}
  .vzh{padding:10px 12px 0}
  .vzb{padding:10px 14px 6px;gap:7px}
  .tg button{padding:7px 14px;min-height:34px}
  .mapq{padding:7px 10px}
  .row{padding:9px 12px}

  /* "Rewind": a compact timeline (it ran past 1,050px) */
  .journey{padding:60px 0 56px}
  .journey h2{font-size:clamp(28px,7.6vw,32px)}
  .journey .lead{display:none}
  .jv{margin-top:22px;gap:12px}
  .jv::before{content:"";position:absolute;left:17px;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,rgba(45,255,208,.6),rgba(45,255,208,.12))}
  .jv-s{grid-template-columns:36px 1fr;gap:2px 12px}
  .jv-n{width:36px;height:36px}.jv-n svg{width:17px;height:17px}
  .jv-pl{font-size:18px}.jv-did{font-size:14px}
  .jv-th{padding:6px 12px;font-size:17px}
  .jv-th small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .jv-psy{font-size:10px;padding:2px 8px}
  .jv-close{margin-top:20px}

}
/* "How we work" on phones (owner: the vertical trace looked bad, the one-card version too slow): the horizontal monitor on top, numbered markers
   under each beat, and ALL five steps as compact rows that pop and light as their beat fires, so the whole story is one frame. */
.rh-mks{display:none}
@media(max-width:899px){
  .rh{gap:0;margin-top:26px}
  .rh-track{height:124px}
  .rh-mks{display:block;position:relative;height:30px;margin:8px 0 6px}
  .rh-mk{position:absolute;top:0;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px Inter,system-ui,sans-serif;color:rgba(45,255,208,.65);border:1.5px solid rgba(45,255,208,.3);background:#061a28;transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
  .rh-mk.on{background:#2dffd0;color:#04151b;border-color:#2dffd0;box-shadow:0 0 16px rgba(45,255,208,.7)}
  .rh-steps{margin-top:6px;gap:8px}
  .rh-steps li{grid-template-columns:34px 1fr;gap:1px 12px;align-items:start;padding:11px 14px 12px;border:1px solid rgba(120,220,255,.14);border-radius:16px;background:rgba(255,255,255,.025);opacity:.5;transition:opacity .45s ease,background .5s ease,border-color .5s ease,box-shadow .5s ease}
  .rh-steps li i{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:0;color:rgba(45,255,208,.65);border:1.5px solid rgba(45,255,208,.3);transition:background .35s ease,color .35s ease}
  .rh-steps li.on{opacity:1;background:linear-gradient(100deg,rgba(45,255,208,.13),rgba(20,120,200,.1));border-color:rgba(45,255,208,.5);box-shadow:0 0 26px rgba(45,255,208,.12)}
  .rh-steps li.on i{background:#2dffd0;color:#04151b;border-color:#2dffd0}
  .rh-steps li b{font-size:18px;line-height:1.25}
  .rh-steps li .rh-d{font-size:13.5px;line-height:1.45}
  .rh-steps li.pop{animation:rhPop .7s cubic-bezier(.2,.9,.2,1)}
}
@keyframes rhPop{0%{transform:translateX(-10px) scale(.985);box-shadow:0 0 0 rgba(45,255,208,0)}45%{transform:none;box-shadow:0 0 38px rgba(45,255,208,.45)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.rh-steps li.pop{animation:none}.rh-steps li,.rh-mk{transition:none}}

/* "How we work" on phones: the whole story is pinned to ONE screen while the scroll drives the heartbeat (site.js, rhythm block) */
@media(max-width:899px){
    .rh-frame{padding:0}
  .rh-frame h2{font-size:clamp(26px,7vw,30px);margin-top:8px}
  .rh-frame .lead{display:none}
  .rh{margin-top:14px}
  .rh-track{height:clamp(80px,11.5svh,100px)}
  .rh-mks{margin:6px 0 2px}
  .rh-steps{gap:6px;margin-top:4px}
  .rh-steps li{padding:9px 13px 10px}
  .rh-steps li b{font-size:17px}
  .rh-steps li .rh-d{font-size:13px;line-height:1.4}
}
@media(max-width:899px) and (max-height:780px){
  .rh-frame h2{font-size:25px}
  .rh{margin-top:10px}
  .rh-steps{gap:5px}
  .rh-steps li{padding:7px 12px 8px}
  .rh-steps li b{font-size:16px}
  .rh-steps li .rh-d{font-size:12.5px;line-height:1.35}
  .rh-steps li i,.rh-mk{width:26px;height:26px}
  .rh-steps li{grid-template-columns:30px 1fr;gap:1px 10px}
}
@media(max-width:899px) and (max-height:690px){
  .rh-frame .label{display:none}
  .rh-frame h2{font-size:23px}
  .rh-steps li .rh-d{font-size:12px}
}
/* phones: no month badge on the pinned heartbeat (the month never changes there); a little more room at 640px tall; header button on one line at 375px */
@media(max-width:899px){.rh-track .rh-month{display:none}}
@media(max-width:899px) and (max-height:660px){
  .rh-frame h2{font-size:22px;margin-top:4px}
  .rh{margin-top:8px}
  .rh-track{height:72px}
  .rh-mks{margin:4px 0 0}
  .rh-steps{gap:4px}
  .rh-steps li{padding:6px 11px 7px}
  .rh-steps li b{font-size:15.5px}
  .rh-steps li .rh-d{font-size:12px;line-height:1.3}
}
@media(max-width:400px){.btn.sm{white-space:nowrap;padding-left:16px;padding-right:16px;font-size:14.5px}}

/* client logo strip (owner: too small): the PNGs are now cropped to the logo itself (assets/images/client/crop), shown about three times larger */
.logos{padding:34px 0}
.track{gap:18px}
.track div{flex:none;box-sizing:border-box;width:244px;height:84px;padding:12px 20px;border-radius:16px}
.track img{height:var(--h,52px);width:auto;max-width:100%;max-height:none;object-fit:contain}
@media(max-width:899px){.track div{width:216px;height:76px;padding:10px 18px}.track img{height:calc(var(--h,52px)*.885);max-width:100%}}
/* header logo a little larger */
.logo img{height:42px}
@media(min-width:900px){.logo img{height:44px}}
@media(max-width:400px){.btn.sm{padding-left:13px;padding-right:13px;font-size:14px}}

/* pinned story video cards (hidden until all four videos exist: config home.how_clips) */
.pic video{width:100%;height:100%;object-fit:cover;display:block;background:#0a2233}

/* "Who we work with" on the home page: segment and service links (2026-10-18) */
.serve{padding:90px 0 30px;background:linear-gradient(180deg,#fff,#f6fafc)}
.serve h2{font-size:clamp(33px,5vw,60px);max-width:900px;margin-top:12px}
.serve h2 .it{color:var(--teal-lg)}
.serve .label{color:var(--teal-ink)}
.serve .lead{max-width:820px}
.serve .cy-places{margin-top:34px}
.serve-h3{margin:44px 0 0;font:600 clamp(22px,3vw,30px)/1.2 'Space Grotesk',Inter,sans-serif;color:var(--ink)}
.serve-svc{margin-top:22px}
@media(min-width:900px){.serve{padding:120px 0 40px}}
@media(max-width:640px){.serve .chips{gap:8px}.serve .chips a{padding:8px 14px;font-size:14px;min-height:44px}.serve .cy-places{margin-top:26px}.serve-h3{margin-top:34px}}
/* closing band heartbeat on phones: the 1600-wide line was squeezed into the screen (a thin needle); show it at natural proportions, centred on the beat */
@media(max-width:899px){.flat{left:50%;right:auto;width:1600px;margin-left:-800px}}