/* Fernlight Dental — fresh bright. True white, one vivid aqua at full strength, hot coral. Big, bold, rounded. */
:root{
  --white:#fff;
  --aqua:#00C4B8;
  --aqua-deep:#00867F;
  --ink:#06343A;
  --coral:#FF5C4D;
  --tint:#E5FAF8;
  --line:rgba(6,52,58,.18);
  --ease:cubic-bezier(.2,.8,.2,1);
  --t:.55s;
  --pad:clamp(20px,4.6vw,72px);
  --r:clamp(28px,4vw,56px);
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.calm{--coral:#9DEFE8;--t:1.4s}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 var(--sans);color:var(--ink);background:var(--white);overflow-x:hidden}
main{overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.045em;line-height:.98}
h2{font-size:clamp(2.5rem,5.6vw,5.4rem)}
em{font-style:normal;display:inline-block;background:var(--coral);color:var(--ink);border-radius:.32em;padding:0 .16em .04em;margin:0 -.04em;transform:rotate(-1.5deg);transition:background-color var(--t) var(--ease)}
p{max-width:58ch}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:999px}
section{scroll-margin-top:84px}
[hidden]{display:none !important}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--coral);flex:none;transition:background-color var(--t) var(--ease)}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font:700 .95rem/1 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform var(--t) var(--ease),background-color var(--t) var(--ease),color var(--t) var(--ease)}
.pill-lg{min-height:64px;padding:0 36px;font-size:1.08rem}
.pill-solid{background:var(--coral);color:var(--ink)}
.pill-solid:hover{background:var(--ink);color:var(--white);transform:translateY(-3px)}
.pill-line{border-color:currentColor;color:inherit;background:transparent}
.pill-line:hover{background:var(--ink);color:var(--white);border-color:var(--ink);transform:translateY(-3px)}
body.calm .hero .pill-line:hover,.book .pill-line:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--pad);background:var(--white)}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;min-height:44px;color:var(--ink)}
.mark svg path{stroke-width:3.4}
.mark-name{font-size:1.5rem;font-weight:800;letter-spacing:-.05em}
.mark-name b,.foot-mark b{color:var(--coral)}
.mark-name span{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;opacity:.7;margin-left:4px}
.nav{display:flex;gap:clamp(14px,2.2vw,34px)}
.nav a{font-size:.92rem;font-weight:500;text-decoration:none;padding:12px 2px;background:linear-gradient(var(--coral),var(--coral)) 0 82%/0 3px no-repeat;transition:background-size var(--t) var(--ease)}
.nav a:hover,.nav a:focus-visible{background-size:100% 3px}
.top-act{display:flex;align-items:center;gap:18px}
.tel{font-weight:700;font-size:.95rem;text-decoration:none;padding:12px 0}

/* hero — full-bleed photo, huge type */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);min-height:min(900px,calc(100vh - 104px));display:flex;align-items:flex-end;padding:clamp(40px,7vh,90px) var(--pad) clamp(34px,6vh,70px);border-radius:0 0 var(--r) var(--r);background:var(--aqua-deep)}
.hero-bg{position:absolute;inset:0;z-index:-2;object-position:70% 50%;animation:kb 18s ease-out both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,196,184,.9) 0,rgba(0,196,184,.7) 38%,rgba(0,196,184,0) 56%)}
body.calm .hero{color:var(--white)}
body.calm .hero::after{background:linear-gradient(90deg,rgba(6,52,58,.95) 0,rgba(6,52,58,.84) 36%,rgba(6,52,58,.3) 66%,rgba(6,52,58,.1) 100%)}
.hero-copy{max-width:min(760px,50vw);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero-copy.swap{opacity:0;transform:translateY(14px)}
h1{font-size:clamp(3.1rem,8.4vw,8.6rem);line-height:.92;margin-bottom:clamp(20px,3vh,34px);text-wrap:balance}
.hero .eyebrow{color:inherit}
.lede{font-size:clamp(1.05rem,1.4vw,1.28rem);font-weight:500;max-width:50ch;margin-bottom:clamp(22px,3.4vh,36px)}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(20px,3vh,34px)}
.js .hero-copy>*{animation:rise .9s var(--ease) both}
.js .hero-copy>*:nth-child(2){animation-delay:.08s}
.js .hero-copy>*:nth-child(3){animation-delay:.2s}
.js .hero-copy>*:nth-child(4){animation-delay:.3s}
.js .hero-copy>*:nth-child(5){animation-delay:.42s}
@keyframes rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}

.nervous{display:flex;align-items:center;gap:16px;width:100%;max-width:520px;padding:12px 28px 12px 12px;border-radius:999px;border:0;background:var(--white);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 18px 40px -18px rgba(0,40,40,.6);transition:transform var(--t) var(--ease),background-color var(--t) var(--ease)}
.nervous:hover{transform:translateY(-3px)}
.nervous[aria-checked="true"]{background:var(--aqua)}
body.calm .nervous:focus-visible{outline-color:var(--white)}
.sw{flex:none;width:72px;height:44px;border-radius:999px;background:var(--ink);padding:5px;transition:background-color var(--t) var(--ease)}
.sw span{display:block;width:34px;height:34px;border-radius:50%;background:var(--coral);transition:transform var(--t) var(--ease),background-color var(--t) var(--ease)}
.nervous[aria-checked="true"] .sw span{transform:translateX(28px);background:var(--white)}
.nervous-txt{font-size:.95rem;line-height:1.3}
.nervous-txt strong{font-weight:800;display:block;font-size:1.02rem}

.sticker{position:absolute;right:clamp(20px,5vw,80px);bottom:clamp(30px,7vh,80px);width:clamp(150px,15vw,210px);aspect-ratio:1;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;text-decoration:none;transition:transform var(--t) var(--ease),background-color var(--t) var(--ease);animation:pop .8s .7s var(--ease) both}
.sticker:hover{transform:scale(1.07) rotate(6deg)}
.sticker svg{position:absolute;inset:0;animation:spin 22s linear infinite}
.sticker text{font:800 14.5px var(--sans);letter-spacing:.06em;fill:currentColor}
.sticker span{font:800 clamp(2.1rem,3.4vw,3.2rem)/1 var(--sans);letter-spacing:-.05em;text-align:center}
.sticker small{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-40deg)}to{opacity:1;transform:none}}
body.calm .sticker{display:none}

/* breathing guide: calm mode only. 4s in, 6s out */
.breath{display:none}
body.calm .breath{position:absolute;right:clamp(20px,5vw,80px);bottom:clamp(30px,7vh,80px);display:grid;place-items:center;width:clamp(150px,15vw,210px);aspect-ratio:1;color:var(--white);font-weight:700;letter-spacing:.08em;font-size:.85rem}
.breath-dot{position:absolute;inset:0;border-radius:50%;background:var(--aqua);opacity:.9;animation:breathe 10s cubic-bezier(.37,0,.2,1) infinite}
.breath-word{position:relative;display:block;width:7em;height:1.4em;text-align:center;color:var(--ink)}
.breath-word b{position:absolute;inset:0;opacity:0;font-weight:800}
.breath-word b:first-child{animation:word-in 10s linear infinite}
.breath-word b:last-child{animation:word-out 10s linear infinite}
@keyframes breathe{0%,100%{transform:scale(.62)}40%{transform:scale(1)}}
@keyframes word-in{0%{opacity:0}6%,34%{opacity:1}40%,100%{opacity:0}}
@keyframes word-out{0%,40%{opacity:0}47%,92%{opacity:1}100%{opacity:0}}
body.calm .hero-bg{animation:breathe-img 10s cubic-bezier(.37,0,.2,1) infinite}
@keyframes breathe-img{0%,100%{transform:scale(1)}40%{transform:scale(1.04)}}

/* ticker */
.ticker{overflow:hidden;padding:clamp(18px,3vw,40px) 0}
.ticker-in{display:flex;align-items:center;width:max-content;animation:tick 26s linear infinite}
body.calm .ticker-in{animation-duration:70s}
.ticker span{font-size:clamp(3rem,9vw,8.4rem);font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap;color:var(--aqua)}
.ticker span:nth-of-type(3n+2){color:var(--ink)}
.ticker i{flex:none;width:clamp(22px,3vw,44px);aspect-ratio:1;border-radius:50%;background:var(--coral);margin:0 clamp(18px,3vw,48px);transition:background-color var(--t) var(--ease)}
@keyframes tick{to{transform:translateX(-50%)}}

/* comfort menu — solid aqua field */
.comfort{padding:0 clamp(8px,1.5vw,24px);margin-bottom:clamp(20px,3vw,40px)}
.js body:not(.calm) .comfort{display:none}
.comfort-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,80px);align-items:center;background:var(--aqua);border-radius:var(--r);padding:clamp(32px,6vw,96px) clamp(24px,5vw,80px)}
body.calm .comfort-in{animation:rise 1.2s var(--ease) both}
.comfort em{background:var(--white)}
.comfort .dot{background:var(--ink)}
.comfort-lede{font-weight:500;font-size:1.12rem;margin:24px 0 30px}
.menu{list-style:none;padding:0;max-width:680px}
.menu li{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:1.05rem;font-weight:500}
.menu li i{flex:1;min-width:24px;border-bottom:3px dotted rgba(6,52,58,.45)}
.menu li b{background:var(--ink);color:var(--white);border-radius:999px;padding:6px 16px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.menu-more{margin-top:26px;font-size:.95rem;max-width:60ch}
.tallpill{border-radius:999px;overflow:hidden;aspect-ratio:1/1.8;max-height:640px;margin-left:auto;border:10px solid var(--white)}
.tallpill img{object-position:55% 50%}

/* care */
.care{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,110px);padding:clamp(40px,6vw,90px) var(--pad) clamp(50px,8vw,120px)}
.care-side{position:sticky;top:110px;align-self:start}
.care-side h2{margin-bottom:26px}
.care-side>p{font-weight:500}
.care-img{margin-top:38px;border-radius:999px;overflow:hidden;aspect-ratio:16/9}
.group{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 12px;display:flex;align-items:center;gap:14px}
.group::after{content:"";flex:1;height:4px;border-radius:4px;background:var(--aqua)}
.care-list ul{list-style:none;padding:0;margin-bottom:48px}
.row{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(110px,auto);gap:18px;align-items:center;padding:20px 26px;margin:0 -26px;border-radius:32px;transition:background-color var(--t) var(--ease),transform var(--t) var(--ease)}
.row:hover{background:var(--tint);transform:translateX(8px)}
.row h4{font-size:1.18rem;letter-spacing:-.025em;line-height:1.2;margin-bottom:4px;font-weight:700}
.row p{font-size:.95rem;line-height:1.5;color:#2F5A5F}
.row .feel{color:var(--ink);font-weight:500;margin-top:8px;padding:10px 16px;background:var(--tint);border-radius:18px}
.row:hover .feel{background:var(--white)}
.js body:not(.calm) .feel{display:none}
body.calm .feel{animation:rise 1.2s var(--ease) both}
.time{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2F5A5F;text-align:right;white-space:nowrap}
.price{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:800;letter-spacing:-.04em;line-height:1;text-align:right;white-space:nowrap}
.price small{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2F5A5F}
.fine{font-size:.8rem;color:#2F5A5F}

/* first visit — aqua field */
.first{padding:clamp(50px,8vw,120px) var(--pad);background:var(--aqua);border-radius:var(--r);margin:0 clamp(8px,1.5vw,24px)}
.first em{background:var(--white)}
.first .dot{background:var(--ink)}
.first-head{margin-bottom:clamp(30px,5vw,70px)}
.path{position:relative}
.path-line{position:absolute;left:0;right:0;top:-8px;width:100%;height:100px;color:var(--ink);opacity:.5}
.path-line path{stroke-width:3;stroke-dasharray:2 12}
.path ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,48px);position:relative}
.path li:nth-child(even){margin-top:64px}
.clock{display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:50%;background:var(--white);font-size:1.7rem;font-weight:800;letter-spacing:-.04em;margin-bottom:22px;transition:transform var(--t) var(--ease),background-color var(--t) var(--ease)}
.path li:hover .clock{transform:scale(1.1) rotate(-6deg);background:var(--coral)}
.path h3{font-size:1.45rem;margin-bottom:10px;letter-spacing:-.03em}
.path p{font-size:1rem;font-weight:500}

/* rooms */
.rooms{padding:clamp(60px,9vw,140px) var(--pad) clamp(50px,7vw,100px)}
.rooms-h{max-width:13ch;margin-bottom:clamp(30px,5vw,64px)}
.shapes{display:grid;grid-template-columns:1.1fr .8fr 1fr 1.1fr;gap:clamp(12px,2.4vw,36px);align-items:end}
.s{overflow:hidden;background:var(--aqua)}
.s-arch{border-radius:999px 999px 64px 64px;aspect-ratio:3/4.2}
.s-circle{border-radius:50%;aspect-ratio:1;margin-bottom:12%}
.s-pill{border-radius:999px;aspect-ratio:3/5}
.s-arch-down{border-radius:64px 64px 999px 999px;aspect-ratio:3/4.2;margin-bottom:-6%}
.s img{transition:transform 1.2s var(--ease)}
.s:hover img{transform:scale(1.08)}
.s-pill img{object-position:50% 78%}

/* words — coral field */
.words{position:relative;padding:clamp(50px,8vw,120px) var(--pad);background:var(--coral);border-radius:var(--r);margin:0 clamp(8px,1.5vw,24px);transition:background-color 1.4s var(--ease)}
.score{display:flex;align-items:center;gap:clamp(18px,3vw,44px);margin-bottom:clamp(30px,5vw,64px)}
.score-num{font-size:clamp(7rem,19vw,17rem);font-weight:800;line-height:.78;letter-spacing:-.07em}
.score h2{font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:-.02em;line-height:1.2;max-width:20ch;margin-bottom:12px}
.stars{line-height:0;margin-bottom:10px}
.score-sub{font-size:.9rem;font-weight:500}
.words-img{position:absolute;right:var(--pad);top:clamp(40px,6vw,90px);width:clamp(180px,22vw,330px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:10px solid var(--white)}
.words-img img{object-position:30% 40%}
.bubbles{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px)}
.b{padding:clamp(24px,3vw,40px);border-radius:40px;font-size:1.08rem;line-height:1.5;font-weight:500;background:var(--white);transition:transform var(--t) var(--ease)}
.b:hover{transform:translateY(-6px) rotate(-.6deg)}
.b p{max-width:none}
.b footer{margin-top:18px;font-size:.85rem;font-weight:800}
.b footer span{font-weight:500}
.b1{grid-column:1/8;border-bottom-left-radius:8px;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.02em;background:var(--ink);color:var(--white)}
.b2{grid-column:8/13;border-bottom-right-radius:8px;align-self:end}
.b3{grid-column:2/7;border-top-left-radius:8px}
.b4{grid-column:7/13;border-top-right-radius:8px}

/* people */
.people{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,7vw,120px);align-items:center;padding:clamp(60px,9vw,140px) var(--pad)}
.people-art{position:relative;max-width:440px;justify-self:center;width:100%}
.people-art::before{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:var(--coral);right:-12%;top:-6%;transition:background-color var(--t) var(--ease)}
.people-art::after{content:"";position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:var(--aqua);left:-10%;bottom:8%}
.arch{position:relative;z-index:1;overflow:hidden}
.arch-sm{aspect-ratio:3/4.1;border-radius:999px 999px 56px 56px}
.people-copy h2{margin-bottom:28px}
.people-copy p{margin-bottom:16px}
.facts{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 22px}
.facts div{background:var(--tint);border-radius:999px;padding:12px 26px;display:flex;align-items:baseline;gap:10px}
.facts dt{font-size:1.6rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.facts dd{margin:0;font-size:.88rem;font-weight:500}
.lic{font-size:.78rem !important;color:#2F5A5F;letter-spacing:.03em}

/* find */
.find{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);padding:clamp(40px,7vw,100px) var(--pad);background:var(--tint);border-radius:var(--r);margin:0 clamp(8px,1.5vw,24px) clamp(8px,1.5vw,24px)}
.find h2{margin-bottom:26px;max-width:11ch}
address{font-style:normal;font-size:1.3rem;font-weight:700;line-height:1.35;margin-bottom:12px}
.towns{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.towns li{background:var(--white);border-radius:999px;padding:10px 18px;font-size:.92rem;font-weight:700}
.towns span{font-weight:500;margin-left:6px;font-size:.82rem;color:#2F5A5F}
.towns li:first-child{background:var(--aqua)}
.towns li:first-child span{color:var(--ink)}
.find-b h3{font-size:1.7rem;margin-bottom:14px}
.find-b h3:not(:first-child){margin-top:38px}
.hours{border-collapse:collapse;width:100%;max-width:480px}
.hours th,.hours td{padding:11px 0;font-weight:700;text-align:left;border-bottom:2px solid rgba(6,52,58,.12);font-size:.98rem}
.hours td{text-align:right;font-weight:500}

/* book — ink field */
.book{padding:0 clamp(8px,1.5vw,24px) clamp(8px,1.5vw,24px)}
.book-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);background:var(--ink);color:var(--white);border-radius:var(--r);padding:clamp(36px,7vw,110px) clamp(24px,5vw,80px)}
.book em{background:var(--aqua)}
.book-copy h2{margin-bottom:26px}
.book-copy p{margin-bottom:10px;color:#CDEEEB}
.book-tel a{font-size:clamp(2.2rem,4.4vw,4rem);font-weight:800;letter-spacing:-.05em;line-height:1.1;color:var(--aqua);text-decoration:none;display:inline-block;padding:10px 0}
.book-copy a{color:var(--white);text-underline-offset:4px}
.book :focus-visible{outline-color:var(--aqua)}
.form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:8px;font-size:.85rem;font-weight:700;color:#CDEEEB}
.form input[type=text],.form input[type=tel],.form input[type=email],.form select{width:100%;min-height:60px;border-radius:999px;border:2px solid rgba(255,255,255,.35);background:transparent;color:var(--white);font:500 1rem var(--sans);padding:0 26px;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 26px center;background-size:13px}
.form select option{color:#06343A;background:#fff}
.form input:hover,.form select:hover,.form input:focus,.form select:focus{border-color:var(--aqua);background-color:rgba(0,196,184,.12)}
.check{display:flex !important;align-items:center;gap:14px;min-height:44px;cursor:pointer;font-size:.98rem !important;color:var(--white) !important}
.check input{appearance:none;flex:none;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.5);transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.check input:checked{background:var(--aqua);box-shadow:inset 0 0 0 6px var(--ink);border-color:var(--aqua)}
.book .pill-solid{justify-self:start}
.book .pill-solid:hover{background:var(--white);color:var(--ink)}
.form-note{background:rgba(0,196,184,.18);border-radius:24px;padding:14px 22px;font-size:.95rem;font-weight:500}

/* footer */
.foot{padding:clamp(40px,6vw,80px) var(--pad) 60px}
.foot-in{display:grid;gap:14px;justify-items:center;text-align:center;font-size:.95rem}
.foot-mark{font-size:clamp(3rem,8vw,6rem);font-weight:800;letter-spacing:-.06em;line-height:1}
.foot a{text-underline-offset:4px;display:inline-block;padding:6px 0}
.foot-fine{font-size:.78rem;color:#2F5A5F;max-width:70ch}

.dock{display:none}

/* reveal */
.js .rv{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
body.calm .rv{transition-duration:1.6s}

/* scroll-driven drift (progressive enhancement) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .s-arch img,.s-pill img{animation:drift-up linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .s-circle img,.s-arch-down img{animation:drift-down linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .score-num{animation:slide-in linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .words-img{animation:spin-in linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  }
}
@keyframes drift-up{from{transform:scale(1.18) translateY(6%)}to{transform:scale(1.18) translateY(-6%)}}
@keyframes drift-down{from{transform:scale(1.18) translateY(-6%)}to{transform:scale(1.18) translateY(6%)}}
@keyframes slide-in{from{transform:translateX(-30%)}to{transform:none}}
@keyframes spin-in{from{transform:scale(.5) rotate(-30deg)}to{transform:none}}

@media (max-width:1080px){.nav{display:none}}
@media (max-width:860px){
  body{font-size:16px}
  .top{padding:10px 20px}
  .tel{display:none}
  .top .pill{min-height:44px;padding:0 18px;font-size:.88rem}
  .hero{min-height:calc(100svh - 150px);padding:120px 20px 28px;align-items:flex-end}
  .hero-bg{object-position:74% 50%}
  .hero-copy{max-width:100%}
  .hero::after{background:linear-gradient(0deg,rgba(0,196,184,1) 0,rgba(0,196,184,.96) 56%,rgba(0,196,184,0) 80%)}
  body.calm .hero::after{background:linear-gradient(0deg,rgba(6,52,58,.97) 0,rgba(6,52,58,.88) 52%,rgba(6,52,58,.2) 100%)}
  h1{font-size:clamp(3rem,14.5vw,4.6rem)}
  .lede{font-size:1rem}
  .hero-act .pill{flex:1 1 auto;min-height:58px}
  .nervous{padding:10px 18px 10px 10px;gap:12px;border-radius:40px}
  .sw{width:64px;height:40px}.sw span{width:30px;height:30px}
  .nervous[aria-checked="true"] .sw span{transform:translateX(24px)}
  .sticker,body.calm .breath{top:22px;bottom:auto;right:16px;width:112px}
  .sticker text{font-size:15px}
  .sticker span{font-size:1.7rem}
  .comfort-in{grid-template-columns:1fr;padding:30px 22px 40px}
  .comfort-art{order:-1}
  .tallpill{aspect-ratio:16/10;max-height:none;margin:0;border-width:6px}
  .menu li{font-size:.95rem;gap:8px}
  .care{grid-template-columns:1fr}
  .care-side{position:static}
  .care-img{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto;padding:18px 0;margin:0;border-radius:0;gap:6px 14px;border-bottom:2px solid rgba(6,52,58,.1)}
  .row:hover{background:transparent;transform:none}
  .time{grid-column:1;grid-row:2;text-align:left}
  .price{grid-column:2;grid-row:1/3}
  .path-line{display:none}
  .path ol{grid-template-columns:1fr;gap:0}
  .path li{display:grid;grid-template-columns:76px 1fr;column-gap:18px;padding-bottom:30px;position:relative}
  .path li:nth-child(even){margin-top:0}
  .path li:not(:last-child)::before{content:"";position:absolute;left:37px;top:76px;bottom:0;border-left:3px dotted rgba(6,52,58,.5)}
  .clock{width:76px;height:76px;font-size:1.3rem;grid-row:1/3;margin:0}
  .path h3{align-self:end;margin-bottom:6px}
  .shapes{grid-template-columns:1fr 1fr;row-gap:22px}
  .s-circle{margin:0;align-self:center}
  .s-arch-down{margin:0}
  .score{flex-direction:column;align-items:flex-start}
  .words-img{width:120px;border-width:6px;top:34px;right:20px}
  .bubbles{grid-template-columns:1fr}
  .b{grid-column:1/-1 !important;border-radius:30px}
  .people{grid-template-columns:1fr}
  .people-art{max-width:270px}
  .find{grid-template-columns:1fr}
  .book-in{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .foot{padding-bottom:110px}
  .dock{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;padding:8px;border-radius:999px;background:var(--white);box-shadow:0 12px 40px -10px rgba(6,52,58,.55)}
  .dock a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;font-weight:800;text-decoration:none;border:2px solid var(--ink)}
  .dock-main{background:var(--coral);border-color:var(--coral) !important;color:var(--ink)}
}

/* Reduce Motion: arrivals become plain fades, the ticker and sticker ring slow right down;
   the Ken Burns zoom, the breathing zoom on the photo, lifts and scroll drift stay off. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg,body.calm .hero-bg{animation:none}
  .js .hero-copy>*,.sticker,body.calm .comfort-in,body.calm .feel{animation-name:fadein}
  .sticker svg{animation-duration:70s}
  .ticker-in,body.calm .ticker-in{animation-duration:70s}
  .sticker:hover,.nervous:hover{transform:none}
  .js .rv{transform:none;transition:opacity .8s ease;transition-delay:var(--d,0s)}
  .hero-copy.swap{transform:none}
  @keyframes fadein{from{opacity:0}}
}

/* iteration: hero fit */
.lede{max-width:40ch}
@media (max-width:860px){
  .hero{background:var(--aqua);padding-top:236px;min-height:0}
  .hero-bg{height:290px;bottom:auto;object-position:58% 80%}
  .hero::after{background:linear-gradient(0deg,rgba(0,196,184,1) 0,rgba(0,196,184,1) calc(100% - 250px),rgba(0,196,184,0) calc(100% - 150px))}
  body.calm .hero{background:var(--ink)}
  body.calm .hero::after{background:linear-gradient(0deg,rgba(6,52,58,1) 0,rgba(6,52,58,1) calc(100% - 250px),rgba(6,52,58,.25) calc(100% - 120px))}
  .hero .pill-line{display:none}
  .hero .eyebrow{font-size:.7rem;margin-bottom:14px}
  .lede{margin-bottom:20px}
  .hero-act{margin-bottom:16px}
}
.words-img img{object-position:50% 45%}
@media (max-width:860px){.hero-act{display:none}.lede{margin-bottom:24px}}
em{white-space:nowrap}
/* true arches (percent radii so small corners are not scaled away) */
.s-arch{border-radius:50% 50% 14% 14% / 35.7% 35.7% 10% 10%}
.s-arch-down{border-radius:14% 14% 50% 50% / 10% 10% 35.7% 35.7%}
.arch-sm{border-radius:50% 50% 12% 12% / 36.6% 36.6% 8.8% 8.8%}
@media (max-width:860px){
  .hero{padding-top:196px}
  .hero-bg{height:250px}
  .hero::after{background:linear-gradient(0deg,rgba(0,196,184,1) 0,rgba(0,196,184,1) calc(100% - 215px),rgba(0,196,184,0) calc(100% - 130px))}
  body.calm .hero::after{background:linear-gradient(0deg,rgba(6,52,58,1) 0,rgba(6,52,58,1) calc(100% - 215px),rgba(6,52,58,.25) calc(100% - 110px))}
  .sticker,body.calm .breath{width:100px;top:16px}
  .sticker span{font-size:1.5rem}
  .lede{font-size:1rem;margin-bottom:18px}
  h1{margin-bottom:14px}
  /* phone opening: the photo runs full-bleed behind the type (like desktop) instead of sitting above it as a strip */
  .hero{padding-top:160px}
  .hero-bg{height:100%;object-position:62% 0}
  .hero::after{background:linear-gradient(0deg,rgba(0,196,184,1) 0,rgba(0,196,184,.97) 34%,rgba(0,196,184,.84) 52%,rgba(0,196,184,.35) 70%,rgba(0,196,184,0) 86%)}
  body.calm .hero::after{background:linear-gradient(0deg,rgba(6,52,58,1) 0,rgba(6,52,58,.96) 36%,rgba(6,52,58,.8) 56%,rgba(6,52,58,.25) 78%,rgba(6,52,58,.1) 100%)}
  .hero .eyebrow{font-size:.78rem}
  .fine,.lic{font-size:.86rem !important}
  .facts dd,.score-sub{font-size:.95rem}
  .find a,.foot a,.book-copy p a{display:inline-block;padding:12px 0}
}