/* Open Line Studio: "After hours". One committed world: sunset > night > dawn > morning. */
@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces-Italic.woff2") format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/Figtree.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Tilt Neon";src:url("../fonts/TiltNeon.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --plum:#2b1b2e;--wine:#5a2d44;--rose:#a24b50;--ember:#e0835a;--apricot:#f5b467;--honey:#ffc56e;--cream:#fff4e6;
  --night:#1a1122;--deep:#221733;--predawn:#3a2d5c;--dawn:#8a6aa0;--peach:#ffd9b5;--morning:#fff1de;
  --ink:#2b1b2e;--ink-2:#5a4150;--soft:#e9d3c3;
  --display:"Fraunces",Georgia,serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1rem,5vw,3.5rem);--max:78rem;--ease:cubic-bezier(.2,.8,.2,1);--pad:clamp(2rem,5vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ember) var(--night);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--night)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--honey),var(--ember));border-radius:99px;border:2px solid var(--night)}
body{margin:0;background:var(--night);color:var(--cream);font:400 1.0625rem/1.6 var(--body)}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;text-wrap:balance;margin:0}
h2{font-size:clamp(2.1rem,5vw,4rem);line-height:1.03}
.lead{font-size:clamp(1.06rem,1.6vw,1.22rem);max-width:34rem;margin:1rem 0 0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:50;padding:.7rem 1rem;border-radius:.6rem;background:var(--cream);color:var(--plum);font-weight:700}
.skip:focus{top:1rem}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;padding:.9em 1.5em;border:0;border-radius:99px;font:700 1rem/1.2 var(--body);text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.cream{background:var(--cream);color:var(--plum);box-shadow:0 12px 30px -12px rgba(43,27,46,.7)}
.btn.line{border:1.5px solid rgba(255,244,230,.55);color:var(--cream)}
.btn.ink{background:var(--plum);color:var(--cream);box-shadow:0 12px 30px -14px rgba(43,27,46,.8)}
.btn.inkline{border:1.5px solid rgba(43,27,46,.35);color:var(--plum)}
.btn.wa{background:#25d366;color:#08331b}
.more{display:inline-block;margin-top:1.6rem;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--honey);padding:.8rem 0 .2rem}
.on-light .more,.more.dark{border-color:var(--ember)}

/* the open line: a honey thread across the top that fills as you scroll */
.thread{position:fixed;z-index:40;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--honey),var(--ember));transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(255,197,110,.7)}

/* header: frosted bar over the sky; the phone menu is a sibling, never inside it */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background-color .4s,box-shadow .4s}
.top.scrolled{background:rgba(26,17,34,.62);box-shadow:0 1px 0 rgba(255,244,230,.08);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.top .wrap{display:flex;align-items:center;gap:1.4rem;min-height:4.4rem}
.logo{display:flex;align-items:center;gap:.55rem;min-height:2.75rem;margin-right:auto;font:600 1.25rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo .mark{width:1.6em;height:1.6em;flex:none;color:var(--honey);filter:drop-shadow(0 0 4px rgba(255,197,110,.8));animation:neon 3s ease-in-out infinite}
@keyframes neon{50%{filter:drop-shadow(0 0 1.5px rgba(255,197,110,.5))}}
.on-light .top:not(.scrolled) .logo .mark{color:#b5532f;filter:none;animation:none}
@media (prefers-reduced-motion:reduce){.logo .mark{animation:none}}
@keyframes glow{50%{box-shadow:0 0 4px var(--honey)}}
.nav{display:none;gap:1.6rem;list-style:none;margin:0;padding:0;font-weight:500}
.nav a{position:relative;text-decoration:none;opacity:.8;transition:opacity .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:2px;border-radius:2px;background:var(--honey);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after,.nav a:hover::after{transform:scaleX(1)}
.top .call{display:none;font-weight:600;text-decoration:none}
.top .btn{min-height:2.6rem;padding:.55em 1.1em;white-space:nowrap}
.menu-btn{display:grid;place-items:center;width:2.8rem;height:2.8rem;border:0;border-radius:50%;background:rgba(255,244,230,.12);color:var(--cream);cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:1.1rem;height:2px;background:currentColor;border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
@media (min-width:980px){.nav,.top .call{display:flex}.menu-btn{display:none}}
@media (max-width:520px){.top .wrap{gap:.7rem}.logo{font-size:1.08rem}.top .btn{min-height:2.5rem;padding:.5em .95em;font-size:.9rem}}
@media (max-width:350px){.top .btn{display:none}}
.sheet{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;padding:1rem var(--gut) 2rem;background:linear-gradient(170deg,var(--plum),var(--wine) 60%,var(--rose));visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s;overflow-y:auto}
.sheet.open{visibility:visible;opacity:1;transition:opacity .35s}
.sheet .row{display:flex;justify-content:space-between;align-items:center;min-height:3.4rem}
.sheet .close{width:2.8rem;height:2.8rem;border:0;border-radius:50%;background:rgba(255,244,230,.14);color:var(--cream);font-size:1.5rem;cursor:pointer}
.sheet ul{list-style:none;margin:2rem 0 auto;padding:0;display:grid;gap:.4rem}
.sheet ul a{display:block;padding:.45rem 0;font:500 2.2rem/1.15 var(--display);text-decoration:none}
.sheet ul a[aria-current="page"]{color:var(--honey)}
.sheet.open ul li{animation:up .5s var(--ease) backwards}
.sheet.open ul li:nth-child(2){animation-delay:.05s}.sheet.open ul li:nth-child(3){animation-delay:.1s}.sheet.open ul li:nth-child(4){animation-delay:.15s}
.sheet .btns{flex-direction:column;margin-top:2rem}
.sheet .btns .btn{width:100%}
@media (max-height:520px){.sheet ul{margin-top:.5rem}.sheet ul a{font-size:1.6rem;padding:.2rem 0}.sheet .btns{flex-direction:row;margin-top:1rem}.sheet .btns .btn{width:auto}}

@keyframes up{from{opacity:0;transform:translateY(18px)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.92)}}
.rv.on{animation:up .9s var(--ease) backwards}

/* ---------- home: 1 sunset hero (the sky drifts on its own layer, transform only) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(5.5rem,11vw,7.5rem) clamp(2.2rem,5vw,3.2rem)}
.hero::before{content:"";position:absolute;z-index:-1;inset:0 0 -45% 0;background:linear-gradient(172deg,#2b1b2e 0%,#5a2d44 24%,#a24b50 46%,#e0835a 66%,#f5b467 80%,#f5b467 100%);animation:sky 20s ease-in-out infinite alternate;will-change:transform}
@keyframes sky{to{transform:translateY(-30%)}}
.hero .wrap{display:grid;gap:2.2rem;align-items:center}
@media (min-width:980px){.hero .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.hero h1{font-size:clamp(2.6rem,7vw,6rem);line-height:.98}
.hero .lead{color:#fbe3d3}
.hero .btns{margin-top:1.8rem}
.hero .small{margin:1rem 0 0;font-size:.95rem;color:#f6d2c0}
.hero h1,.hero .lead,.hero .btns,.hero .small{animation:up 1s var(--ease) backwards}
.hero .lead{animation-delay:.12s}.hero .btns{animation-delay:.24s}.hero .small{animation-delay:.34s}
.chat{display:flex;flex-direction:column;gap:.7rem;width:min(25rem,100%);justify-self:center;padding:1.4rem;border-radius:1.8rem;background:rgba(43,27,46,.3);border:1px solid rgba(255,244,230,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 40px 60px -30px rgba(43,27,46,.7)}
.chat .when{align-self:center;font-size:.82rem;color:#f3c9b6}
.b{max-width:86%;margin:0;padding:.75rem 1rem;border-radius:1.2rem;font-size:.98rem;line-height:1.4}
.b.them{align-self:flex-start;background:var(--cream);color:var(--plum);border-bottom-left-radius:.35rem}
.b.us{align-self:flex-end;background:var(--honey);color:var(--plum);border-bottom-right-radius:.35rem}
.b small{display:block;margin-top:.2rem;font-size:.74rem;opacity:.72}
.chat .b{animation:pop .55s cubic-bezier(.3,1.4,.5,1) backwards}
.chat .b:nth-of-type(1){animation-delay:.7s}.chat .b:nth-of-type(2){animation-delay:1.7s}.chat .b:nth-of-type(3){animation-delay:2.7s}.chat .b:nth-of-type(4){animation-delay:3.6s}

/* 2 the sign switches on as the sun goes down */
.neon{padding-block:clamp(2.8rem,6vw,4.2rem) var(--pad);background:linear-gradient(180deg,#f5b467 0%,#d06f55 10%,#7d3a4a 28%,#3d2238 48%,#1a1122 76%)}
.neon .wrap{display:grid;gap:2.2rem;align-items:center}
@media (min-width:980px){.neon .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.neon .lead{color:#e6cfd6}
.sign{justify-self:center;display:grid;justify-items:center;gap:.3rem;width:min(25rem,100%);padding:1.2rem 1rem 1.5rem;border:3px solid #ffe2b8;border-radius:1.8rem;
  box-shadow:0 0 6px var(--honey),0 0 22px var(--honey),0 0 50px rgba(255,197,110,.4),inset 0 0 16px rgba(255,197,110,.5);animation:hum 7s steps(1) infinite}
.sign .word{font:400 clamp(4.4rem,15vw,8.4rem)/1 "Tilt Neon",var(--body);color:#ffe3e3;letter-spacing:.02em;
  text-shadow:0 0 3px #fff,0 0 10px #ff6f7d,0 0 26px #ff6f7d,0 0 56px #ff5f6f,0 0 90px rgba(255,95,111,.55)}
.sign .all{font:400 clamp(1rem,3.4vw,1.4rem)/1 "Tilt Neon",var(--body);letter-spacing:.24em;color:#fff0d4;text-shadow:0 0 4px #fff,0 0 12px var(--honey),0 0 26px var(--honey)}
@keyframes hum{0%,100%{opacity:1}61%{opacity:.86}62%{opacity:1}64%{opacity:.9}65%{opacity:1}}
.neon.on .word{animation:flick 2s linear .2s backwards}
.neon.on .all{animation:flick 1.6s linear 1s backwards}
@keyframes flick{0%{opacity:.06;text-shadow:none}10%{opacity:1}14%{opacity:.12;text-shadow:none}22%{opacity:1}40%{opacity:.35}46%,100%{opacity:1}}

/* 3 round the clock */
.stars{background:
  radial-gradient(1.2px 1.2px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 32% 70%,#fff6 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 68% 26%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 86% 62%,#fff5 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 50% 44%,#fff5 50%,transparent 51%),var(--night)}
.clock{padding-block:var(--pad)}
.clock .wrap{display:grid;gap:2.2rem;align-items:center}
@media (min-width:980px){.clock .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.clock h2{font-size:clamp(2.5rem,5.8vw,4.8rem)}
.clock .lead{margin-top:1.1rem;max-width:30rem;color:#e6d8e0}
.dial{width:min(25rem,100%);justify-self:center}
.dial svg{display:block;width:100%;height:auto;overflow:visible}
.dial .face{fill:rgba(255,244,230,.06);stroke:rgba(255,244,230,.22);stroke-width:1.5}
.dial .tick{stroke:rgba(255,244,230,.35);stroke-width:1.5}
.dial .tick.big{stroke:var(--cream);stroke-width:2.5}
.dial .hr{font:600 13px var(--body);fill:#d8c6cf;text-anchor:middle;dominant-baseline:middle}
.dial .hand{transform-box:view-box;transform-origin:200px 200px;animation:sweep 16s linear infinite}
.dial .hand line{stroke:var(--honey);stroke-width:2.5;stroke-linecap:round}
.dial .hand circle{fill:var(--honey)}
.dial .bk{fill:var(--cream);transform-box:fill-box;transform-origin:center;animation:dot 16s linear infinite}
.dial .bk.late{fill:var(--honey)}
.dial .n{font:500 78px var(--display);fill:var(--cream);text-anchor:middle}
.dial .cap{font:500 14px var(--body);fill:#d8c6cf;text-anchor:middle}
.dial .cap.late{fill:var(--honey)}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes dot{0%{transform:scale(2.2)}6%,100%{transform:scale(1)}}

/* 4 what you get */
.get{padding-block:var(--pad);background:linear-gradient(180deg,var(--night),var(--deep))}
.get .lead{color:#d9c9d6}
.items{display:grid;gap:1.6rem 2.5rem;margin:2rem 0 0;padding:0;list-style:none}
@media (min-width:700px){.items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.items{grid-template-columns:repeat(3,minmax(0,1fr))}}
.items li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding-top:1.2rem;border-top:1px solid rgba(255,244,230,.14)}
.items svg{width:2.6rem;height:2.6rem;stroke:var(--honey);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.items h3{font-size:1.35rem;line-height:1.15;margin-bottom:.3rem}
.items p{margin:0;color:#cdbccb;font-size:.98rem}
.next{margin:2rem 0 0;padding:1rem 1.3rem;border-radius:1rem;border:1px dashed rgba(255,197,110,.45);color:#f1dcc6;max-width:44rem}
.next b{color:var(--honey)}

/* 5 how it works: the open line itself */
.how{padding-block:var(--pad);background:linear-gradient(180deg,var(--deep),var(--predawn))}
.how .lead{color:#dcd0e6}
.path{position:relative;list-style:none;margin:2.2rem 0 0;padding:0 0 0 2.4rem;display:grid;gap:1.5rem}
.path::before{content:"";position:absolute;left:.62rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(var(--honey),rgba(255,197,110,.25))}
.path .pulse{position:absolute;left:calc(.62rem - 6px);top:0;width:14px;height:14px;border-radius:50%;background:#fff3d6;box-shadow:0 0 14px 5px rgba(255,197,110,.85);animation:runv 5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes runv{0%{top:0;opacity:0}8%,92%{opacity:1}100%{top:calc(100% - 14px);opacity:0}}
.path li{position:relative}
.path li::before{content:"";position:absolute;left:-2.25rem;top:.35rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--deep);border:2px solid var(--honey)}
.path .k{display:block;font:500 .95rem/1 var(--body);color:var(--honey);margin-bottom:.4rem}
.path h3{font-size:1.5rem;line-height:1.1}
.path p{margin:.4rem 0 0;color:#d6cbe0;max-width:22rem}
@media (min-width:980px){
  .path{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;padding:2.6rem 0 0}
  .path::before{left:0;right:0;top:.45rem;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--honey),rgba(255,197,110,.3))}
  .path .pulse{top:calc(.45rem - 6px);left:0;animation:runh 5s cubic-bezier(.5,0,.5,1) infinite}
  .path li::before{left:0;top:-2.6rem}
}
@keyframes runh{0%{left:0;opacity:0}8%,92%{opacity:1}100%{left:calc(100% - 14px);opacity:0}}

/* 6 example designs: made-up businesses, free-licence photos */
.work{padding-block:var(--pad);background:linear-gradient(180deg,var(--predawn),#5e4884 70%,var(--dawn))}
.work .lead{color:#e6dcef}
.exs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15.5rem,78%);gap:1.6rem;margin:2.6rem calc(var(--gut) * -1) 0;padding:1rem var(--gut) 1.4rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-color:var(--honey) transparent}
@media (min-width:700px){.exs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:0;padding-inline:0;overflow:visible;gap:3rem 2rem}}
@media (min-width:1100px){.exs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.exs.six,.exs.tight{grid-template-columns:repeat(3,minmax(0,1fr))}}
.exs li{scroll-snap-align:start}
.ex{position:relative;margin:0}
.ex .phone{container-type:inline-size;position:relative;aspect-ratio:9/18.5;overflow:hidden;border-radius:2rem;border:.45rem solid #120c17;background:var(--eb);color:var(--et);box-shadow:0 40px 50px -30px rgba(18,12,23,.95),0 0 0 1px rgba(255,244,230,.08);transition:transform .6s var(--ease)}
.exs li:hover .phone{transform:translateY(-8px)}
.ex-photo{position:relative;height:56%;background:#3a2f3a center/cover no-repeat}
.ex-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 28%,transparent 55%,var(--eb) 100%)}
.ex-bar{position:absolute;z-index:1;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:6cqi 7cqi;color:#fff;font:var(--ef);font-size:5.6cqi;letter-spacing:var(--el,0)}
.ex-bar i{width:7.5cqi;height:1.1cqi;border-radius:1cqi;background:currentColor;box-shadow:0 2.5cqi 0 currentColor,0 -2.5cqi 0 currentColor}
.ex-body{position:relative;margin-top:-16cqi;padding:0 7cqi}
.ex-stars{display:inline-flex;align-items:center;gap:1.6cqi;padding:1.4cqi 3cqi;border-radius:99px;background:var(--ec);font-size:3.6cqi;font-weight:700}
.ex-stars b{color:var(--ea);letter-spacing:.3cqi}
.ex-h{margin:3.5cqi 0 2.4cqi;font:var(--ef);font-size:10.5cqi;line-height:1.02;letter-spacing:var(--el,0)}
.ex-p{margin:0;font-size:4.3cqi;line-height:1.4;opacity:.78}
.ex-btn{display:block;margin-top:5cqi;padding:3.8cqi;border-radius:var(--er);background:var(--ea);color:var(--eat);text-align:center;font-weight:700;font-size:4.6cqi}
.ex-chips{display:flex;gap:2cqi;margin-top:4cqi}
.ex-chips span{flex:1;padding:2.4cqi 0;border-radius:var(--er);background:var(--ec);text-align:center;font-size:3.6cqi;font-weight:600}
/* Toasts sit fully inside their own phone's footprint (never bleed into a neighbouring
   card or float disconnected in the grid gap), sized to fit even the smallest card. */
/* Every card's toast uses the exact same spot, size and shape (icon + bold line + one
   detail line, all single-line via ellipsis), so the row reads as one consistent detail
   rather than badges scattered at different positions and sizes across the six cards. */
.toast{position:absolute;z-index:2;left:.7rem;bottom:14%;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.1rem .6rem;align-items:center;width:13rem;height:3.4rem;max-width:calc(100% - 1.4rem);padding:0 .8rem;border-radius:1rem;background:rgba(255,255,255,.96);color:var(--plum);box-shadow:0 20px 30px -16px rgba(18,12,23,.8);animation:bob 5s ease-in-out infinite}
.toast i{grid-row:span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;background:var(--ea);color:var(--eat);font-style:normal;font-weight:800;font-size:.9rem}
.toast b,.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast b{font-size:.84rem;line-height:1.2}
.toast span{font-size:.76rem;line-height:1.25;color:#6b5560}
@keyframes bob{50%{transform:translateY(-6px)}}
.ex figcaption{margin-top:1.1rem}
.ex figcaption b{display:block;font:500 1.3rem/1.2 var(--display)}
.ex figcaption span{display:block;color:#e6dcef;font-size:.95rem}
.ex-note{margin:1.4rem 0 0;color:#efe6f4;font-size:.95rem}
.e-barber{--eb:#141316;--et:#f3eadc;--ea:#c9a45c;--eat:#141316;--ec:rgba(255,255,255,.1);--ef:800 1em/1 var(--body);--el:-.02em;--er:1.4cqi}
.e-barber .ex-h{text-transform:uppercase}
.e-bath{--eb:#f4f7fb;--et:#0f2748;--ea:#ff7a1a;--eat:#fff;--ec:#e3ebf5;--ef:800 1em/1 var(--body);--el:-.03em;--er:2.6cqi}
.e-salon{--eb:#f8e7e2;--et:#3c2230;--ea:#3c2230;--eat:#f8e7e2;--ec:rgba(60,34,48,.08);--ef:italic 500 1em/1 var(--display);--er:99cqi}
.e-groom{--eb:#e8f6ef;--et:#173d34;--ea:#ff7b6b;--eat:#fff;--ec:rgba(23,61,52,.08);--ef:800 1em/1 var(--body);--el:-.02em;--er:5cqi}
.e-plaster{--eb:#eeece6;--et:#262521;--ea:#b5532f;--eat:#fff;--ec:rgba(38,37,33,.07);--ef:700 1em/1 var(--body);--el:-.01em;--er:0}
.e-physio{--eb:#ffffff;--et:#13303a;--ea:#1f8a96;--eat:#fff;--ec:#e8f4f5;--ef:500 1em/1 var(--display);--er:2.4cqi}

/* 7 your part / our part: morning arrives */
.part{padding-block:clamp(2.8rem,6vw,4.2rem) var(--pad);color:var(--ink);background:linear-gradient(180deg,var(--dawn) 0%,#e59d93 16%,#ffc9a4 36%,var(--peach) 60%,var(--morning) 100%)}
.part .lead{color:#4a3440}
.cols{display:grid;gap:1.2rem;margin-top:1.8rem;align-items:start}
@media (min-width:860px){.cols{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.col{padding:1.6rem 1.5rem 1.8rem;border-radius:1.6rem}
.col.you{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8)}
.col.us{background:var(--plum);color:var(--cream)}
.col h3{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:1.6rem;margin-bottom:1rem}
.col h3 span{font:600 .95rem var(--body);color:var(--rose)}
.col.us h3 span{color:var(--honey)}
.col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.col.us ul{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));column-gap:1.4rem}
.col li{display:grid;grid-template-columns:1.3rem minmax(0,1fr);gap:.55rem;line-height:1.4}
.col li::before{content:"";width:.7rem;height:.7rem;margin-top:.42rem;border-radius:50%;background:var(--rose)}
.col.us li::before{background:var(--honey)}
.yours{margin:2rem 0 0;font:500 clamp(1.4rem,3vw,2rem)/1.2 var(--display);max-width:34rem}
.also{margin:.8rem 0 0;color:var(--ink-2);max-width:40rem}

/* 8 FAQ */
.faq{padding-block:var(--pad);background:var(--morning);color:var(--ink)}
.faq .wrap{display:grid;gap:2.2rem}
@media (min-width:980px){.faq .wrap{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.faq .lead{color:#4a3440}
.qs{display:grid;gap:.7rem;align-content:start}
.qs details{border-radius:1.2rem;background:rgba(255,255,255,.7);border:1px solid var(--soft);transition:background-color .3s}
.qs details[open]{background:#fff}
.qs summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.3rem;font-weight:700;cursor:pointer;list-style:none;min-height:3.2rem}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:.7rem;height:.7rem;border-right:2px solid var(--rose);border-bottom:2px solid var(--rose);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.qs details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.qs details p{margin:0;padding:0 1.3rem 1.2rem;color:var(--ink-2);max-width:40rem}
.qs details[open] p{animation:up .45s var(--ease)}
.qs h2{margin:1.8rem 0 .3rem;font-size:clamp(1.5rem,3vw,2rem)}
.qs h2:first-child{margin-top:0}
.faq.solo .wrap{display:block}
.faq.solo .qs{max-width:52rem}

/* 9 contact and the free preview form: full morning light */
.contact{padding-block:var(--pad);color:var(--ink);background:radial-gradient(60% 70% at 85% 0%,rgba(255,197,110,.55),transparent 70%),linear-gradient(180deg,var(--morning),#ffe4c2)}
.contact .wrap{display:grid;gap:2.4rem;align-items:start}
@media (min-width:980px){.contact .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.contact h2{font-size:clamp(2.5rem,5.8vw,4.8rem)}
.contact .lead{color:#4a3440}
.alt{display:grid;gap:.9rem;margin-top:1.8rem;justify-items:start}
.alt a{font-weight:700;padding-block:.5rem}
.mail{font:500 clamp(1.25rem,3.2vw,1.7rem)/1.2 var(--display);text-decoration-color:var(--ember);text-underline-offset:.2em;overflow-wrap:anywhere}
.sid{margin:0;color:var(--ink-2)}
form{display:grid;gap:1rem;padding:clamp(1.3rem,3vw,2rem);border-radius:1.8rem;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);box-shadow:0 40px 60px -40px rgba(122,58,74,.45)}
.two{display:grid;gap:1rem}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
label{display:grid;gap:.35rem;font-weight:700;font-size:.95rem}
label span{font-weight:400;color:#7a6070}
input,textarea{width:100%;padding:.85rem 1rem;border-radius:.9rem;border:1.5px solid var(--soft);background:#fff;color:var(--ink);font:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 4px rgba(224,131,90,.18)}
textarea{min-height:6.5rem;resize:vertical}
form .btn{width:100%;font-size:1.02rem}
.note{margin:0;font-size:.88rem;color:#7a6070}
.err{margin:0;font-size:.92rem;font-weight:600;color:#a3303a}

/* footer */
.foot{padding-block:2.6rem;background:var(--plum);color:#e7d3d9;font-size:.95rem}
.foot .wrap{display:grid;gap:1.5rem}
@media (min-width:860px){.foot .wrap{grid-template-columns:1fr auto;align-items:center}}
.foot ul{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;margin:0;padding:0}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .tag{font:500 1.15rem var(--display);color:var(--cream);margin:0 0 .2rem}
.foot p{margin:0}

/* ---------- inner pages ---------- */
.phero{position:relative;padding-block:clamp(7.5rem,14vw,10rem) clamp(2.8rem,6vw,4rem)}
.phero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:1;max-width:16ch}
.phero .lead{max-width:38rem}
.phero h1,.phero .lead,.phero .btns{animation:up 1s var(--ease) backwards}
.phero .lead{animation-delay:.12s}.phero .btns{animation-delay:.24s}
.phero .btns{margin-top:1.8rem}
.dusk{background:linear-gradient(172deg,#2b1b2e 0%,#5a2d44 38%,#a24b50 70%,#e0835a 100%)}
.dusk .lead{color:#fbe3d3}
.nightsky .lead{color:#dccbd6}
.dawnsky{background:linear-gradient(180deg,var(--deep),var(--predawn) 60%,#5e4884)}
.dawnsky .lead{color:#e6dcef}
.morningsky{background:radial-gradient(60% 80% at 90% 0%,rgba(255,197,110,.6),transparent 70%),linear-gradient(180deg,#ffd9b5,var(--morning));color:var(--ink)}
.morningsky .lead{color:#4a3440}
.on-light .top:not(.scrolled){color:var(--ink)}
.on-light .top:not(.scrolled) .menu-btn{background:rgba(43,27,46,.1);color:var(--ink)}
.on-light .top:not(.scrolled) .btn.cream{background:var(--plum);color:var(--cream)}

.band{padding-block:var(--pad)}
.band.night{background:var(--night)}
.band.deep{background:linear-gradient(180deg,var(--night),var(--deep))}
.band.dawn{background:linear-gradient(180deg,#5e4884,var(--dawn))}
.band.light{background:var(--morning);color:var(--ink)}
.band.light .lead{color:#4a3440}
.band.cream{background:#fff8ee;color:var(--ink)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.steps > li{display:grid;gap:1rem 2.5rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:1.8rem;background:rgba(255,244,230,.05);border:1px solid rgba(255,244,230,.12)}
@media (min-width:900px){.steps > li{grid-template-columns:8rem minmax(0,1fr) minmax(0,1fr)}}
.steps .num{font:400 clamp(3.4rem,7vw,5rem)/.9 var(--display);color:var(--honey)}
.steps h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.steps p{margin:.7rem 0 0;color:#dccbd6;max-width:32rem}
.who{display:grid;gap:.8rem;align-content:start}
.who div{padding:1rem 1.1rem;border-radius:1.1rem;background:rgba(255,244,230,.07)}
.who b{display:block;margin-bottom:.2rem;color:var(--honey);font-size:.9rem}
.who span{color:#eadbe3;font-size:.98rem}

.split{display:grid;gap:2rem 4rem}
@media (min-width:900px){.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.ticklist li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.6rem;line-height:1.45}
.ticklist li::before{content:"";width:.75rem;height:.75rem;margin-top:.42rem;border-radius:50%;background:var(--honey);box-shadow:0 0 10px rgba(255,197,110,.6)}
.band.light .ticklist li::before{background:var(--ember);box-shadow:none}

.prose{max-width:40rem}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:2.2rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose a{text-decoration-color:var(--ember);text-underline-offset:.18em}
.big-quote{margin:0;font:400 clamp(1.6rem,3.8vw,2.6rem)/1.2 var(--display);max-width:26ch}

.cta{padding-block:var(--pad);text-align:left;background:radial-gradient(60% 90% at 80% 100%,rgba(255,197,110,.45),transparent 70%),linear-gradient(180deg,var(--deep),var(--wine))}
.cta .wrap{display:grid;gap:1.6rem;align-items:end}
@media (min-width:900px){.cta .wrap{grid-template-columns:minmax(0,1.2fr) auto}}
.cta .lead{color:#f1dcd6}

.card{padding:clamp(1.4rem,3vw,2.2rem);border-radius:1.8rem;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);box-shadow:0 40px 60px -40px rgba(122,58,74,.45);color:var(--ink)}
.card h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.card .btns{margin-top:1.4rem}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}