/* ============================================================
   NexDesk — website styles
   Brand tokens are sampled from the logo:
     navy  #12296C  the ND monogram and wordmark
     cream #FEF8ED  the logo's own paper
     sky   #C8E0FC  the shirt cuffs in the handshake
   Two devices recur, both taken from the monogram:
     - the D-shaped bowl (hero stage, page headers)
     - the sky offset block behind key panels
   ============================================================ */

@font-face{font-family:"Sora";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/sora-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/sora-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/sora-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Cabin";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/cabin-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cabin";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cabin-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cabin";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/cabin-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cabin";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/cabin-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cabin";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/cabin-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cabin";font-weight:600;font-style:italic;font-display:swap;src:url(../fonts/cabin-latin-600-italic.woff2) format("woff2")}

:root{
  --ink:#12296C;
  --ink-deep:#0B1A4C;
  --mid:#3B57A0;
  --cream:#FEF8ED;
  --sky:#C8E0FC;
  --band:#EBF3FD;
  --paper:#FFFDF9;
  --muted:#4C5B8A;
  --on-ink:#C9D6F2;
  --rule:rgba(18,41,108,.14);
  --rule-strong:rgba(18,41,108,.32);
  --alert:#B3261E;
  --ease:cubic-bezier(.2,.7,.2,1);
  --lift:0 14px 26px -14px rgba(18,41,108,.55);
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --sans:"Cabin",Candara,Optima,"Segoe UI",system-ui,sans-serif;
  --notch:polygon(56px 0,100% 0,100% 100%,0 100%,0 45px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
::selection{background:var(--sky);color:var(--ink)}
img,video,svg{max-width:100%}
img,video{display:block;height:auto}
svg{flex:none}
a{color:var(--ink);text-underline-offset:.2em;text-decoration-thickness:1.5px}
p{margin:0 0 1rem;text-wrap:pretty}
ul,ol{margin:0;padding:0}
h1,h2,h3{font-family:var(--display);margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.75rem);font-weight:700;line-height:1.06;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:700;line-height:1.12;letter-spacing:-.025em}
h3{font-size:1.2rem;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.lede{font-size:clamp(1.08rem,1.6vw,1.22rem);color:var(--muted);max-width:56ch}
.small{font-size:.9rem;color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wrap{width:min(1160px,90vw);margin-inline:auto}
.narrow{max-width:760px}
.section{padding:clamp(3.6rem,8vw,6.2rem) 0}
.sect-head{max-width:60ch;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.sect-head p{margin:.9rem 0 0;color:var(--muted)}
.split{display:grid;gap:1.4rem 4rem}
@media(min-width:880px){.split{grid-template-columns:1fr 1.15fr;align-items:start}}
.prose p{max-width:62ch;color:var(--muted)}
.prose p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}
.closer :focus-visible,.why :focus-visible,.desk-navy :focus-visible{outline-color:var(--sky)}

.skip{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--ink);color:var(--cream);padding:.6rem 1rem;border-radius:6px;
  font-weight:700;text-decoration:none;transition:top .2s var(--ease);
}
.skip:focus{top:1rem}

/* ---------- links with an arrow ---------- */
.arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;
  background:linear-gradient(var(--sky),var(--sky)) left bottom/100% .32em no-repeat;
  transition:background-size .3s var(--ease);
}
.arrow::after{content:"";width:.9rem;height:.9rem;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease)}
.arrow:hover,.arrow:focus-visible{background-size:100% 100%}
.arrow:hover::after{transform:translateX(3px)}
.desk-navy .arrow{color:var(--cream);background-image:linear-gradient(rgba(200,224,252,.28),rgba(200,224,252,.28))}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:1rem;font-weight:700;line-height:1.2;
  padding:.8rem 1.4rem;border-radius:8px;
  background:var(--ink);color:var(--cream);text-decoration:none;text-align:center;
  transition:background .2s ease,color .2s ease,transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--ink-deep);border-color:var(--ink-deep);transform:translateY(-1px);box-shadow:var(--lift)}
.btn:active{transform:none;box-shadow:none}
.btn:disabled{cursor:progress}
.btn-lg{padding:.95rem 1.7rem;font-size:1.04rem}
.btn-sm{padding:.55rem 1rem;font-size:.92rem}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-light{background:var(--sky);color:var(--ink);border-color:var(--sky)}
.btn-light:hover,.btn-light:focus-visible{background:var(--cream);border-color:var(--cream);color:var(--ink);box-shadow:0 14px 26px -14px rgba(0,0,0,.6)}
.btn-ghost-light{background:transparent;color:var(--cream);border-color:rgba(254,248,237,.55)}
.btn-ghost-light:hover,.btn-ghost-light:focus-visible{background:var(--cream);color:var(--ink);border-color:var(--cream);box-shadow:none}
.btn .spin{position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:0;animation:spin .7s linear infinite}
.btn.loading .spin{opacity:1}
.btn.loading .lbl{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
@media(max-width:520px){.cta-row .btn{width:100%}}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(254,248,237,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease;
}
.masthead.scrolled{border-bottom-color:var(--rule);box-shadow:0 10px 24px -20px rgba(18,41,108,.6)}
.bar{display:flex;align-items:center;gap:1.4rem;padding:.75rem 0;flex-wrap:wrap}
.brand{display:inline-flex;margin-right:auto}
.brand img{height:30px;width:auto}
#site-nav ul{list-style:none;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
#site-nav a:not(.btn){
  display:block;padding:.5rem .8rem;font-weight:600;font-size:.98rem;text-decoration:none;border-radius:6px;
  background:linear-gradient(var(--sky),var(--sky)) .8rem calc(100% - .3rem)/0 .3em no-repeat;
  transition:background-size .3s var(--ease);
}
#site-nav a:not(.btn):hover,#site-nav a[aria-current=page]{background-size:calc(100% - 1.6rem) .3em}
.nav-cta{margin-left:.6rem}
.menu-btn{display:none}

@media(max-width:899px){
  .js .menu-btn{
    display:inline-flex;align-items:center;gap:.6rem;
    background:transparent;border:1.5px solid var(--ink);color:var(--ink);
    font:700 .92rem/1 var(--sans);padding:.6rem .9rem;border-radius:8px;cursor:pointer;
  }
  .menu-ico{display:grid;gap:4px;width:18px}
  .menu-ico i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
  .menu-btn[aria-expanded=true] .menu-ico i:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-btn[aria-expanded=true] .menu-ico i:last-child{transform:translateY(-3px) rotate(-45deg)}
  #site-nav{width:100%;order:3}
  #site-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 1rem}
  #site-nav li{border-top:1px solid var(--rule)}
  #site-nav a:not(.btn){padding:.9rem .2rem;font-size:1.05rem;background-position:.2rem calc(100% - .5rem)}
  #site-nav a:not(.btn):hover,#site-nav a[aria-current=page]{background-size:2.2rem .3em}
  .nav-cta{margin:.9rem 0 0;border-top:0!important}
  .nav-cta .btn{width:100%}
  .js #site-nav{display:none}
  .js #site-nav.open{display:block}
}

/* ---------- hero ---------- */
.hero{padding:clamp(2.4rem,6vw,4.6rem) 0 clamp(3rem,6vw,4.8rem);overflow:hidden}
.hero-grid{display:grid;gap:2.6rem;align-items:center}
.hero-copy h1{max-width:15ch}
.hero-copy .lede{margin:1.5rem 0 2rem}
.stage{
  display:grid;place-items:center;
  background:var(--band);
  border-radius:0 999px 999px 0;
  padding:2.4rem 1rem 2.4rem 0;margin-right:-5vw;
}
.player{
  position:relative;width:min(70vw,300px);aspect-ratio:478/850;
  border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;
  background:var(--ink-deep);box-shadow:12px 12px 0 var(--sky);
}
.player video{width:100%;height:100%;object-fit:cover}
.play{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.9rem;padding-bottom:13%;
  background:linear-gradient(180deg,rgba(11,26,76,0) 45%,rgba(11,26,76,.62));
  border:0;cursor:pointer;color:var(--cream);font-family:var(--sans);
  transition:opacity .3s ease,visibility .3s;
}
.play-disc{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--ink);
  box-shadow:0 0 0 8px rgba(254,248,237,.28);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.play-disc svg{width:30px;height:30px;margin-left:4px}
.play:hover .play-disc,.play:focus-visible .play-disc{transform:scale(1.07);box-shadow:0 0 0 12px rgba(254,248,237,.3)}
.play-txt{font-weight:700;font-size:.95rem;background:var(--ink);padding:.4rem .9rem;border-radius:999px}
.player.is-playing .play{opacity:0;visibility:hidden}

@media(min-width:960px){
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:3rem}
  .stage{margin-right:0;margin-left:-2rem;padding:3.2rem 3rem 3.2rem 2rem;justify-self:stretch}
  .player{width:300px}
}

/* one orchestrated moment: the hero settles in on load */
@media(prefers-reduced-motion:no-preference){
  .hero-copy h1,.hero-copy .lede,.hero-copy .cta-row{opacity:0;transform:translateY(16px);animation:hero-rise .7s var(--ease) forwards}
  .hero-copy .lede{animation-delay:.12s}
  .hero-copy .cta-row{animation-delay:.24s}
  .stage{opacity:0;transform:translateX(28px);animation:slide .9s var(--ease) .1s forwards}
  @keyframes hero-rise{to{opacity:1;transform:none}}
  @keyframes slide{to{opacity:1;transform:none}}
}

/* ---------- facts ---------- */
.facts{background:var(--paper);border-block:1px solid var(--rule)}
.facts ul{list-style:none;display:grid;grid-template-columns:1fr}
.facts li{padding:1.3rem 0;border-top:1px solid var(--rule)}
.facts li:first-child{border-top:0}
.facts b{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;line-height:1.3}
.facts span{display:block;margin-top:.2rem;font-size:.92rem;color:var(--muted);line-height:1.45}
@media(min-width:560px){.facts ul{grid-template-columns:1fr 1fr}.facts li:nth-child(2){border-top:0}.facts li:nth-child(even){padding-left:1.6rem;border-left:1px solid var(--rule)}}
@media(min-width:980px){
  .facts ul{grid-template-columns:repeat(4,1fr)}
  .facts li{border-top:0;padding:1.6rem 1.6rem;border-left:1px solid var(--rule)}
  .facts li:first-child{border-left:0;padding-left:0}
  .facts li:nth-child(even){padding-left:1.6rem}
}

/* ---------- ticks ---------- */
.ticks{list-style:none;display:grid;gap:.15rem}
.ticks li{display:flex;gap:.75rem;align-items:flex-start;padding:.42rem 0;line-height:1.45}
.tk{width:20px;height:20px;padding:4px;margin-top:.12rem;border-radius:50%;background:var(--sky);color:var(--ink)}

/* ---------- the two desks ---------- */
.desks{display:grid;gap:2.2rem}
@media(min-width:880px){.desks{grid-template-columns:1fr 1fr;gap:2.8rem}}
.desk{padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column}
.desk p{color:var(--muted)}
.desk .ticks{margin:.6rem 0 1.6rem;flex:1}
.desk-paper{background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;box-shadow:10px 10px 0 var(--sky)}
.desk-navy{
  background:var(--ink);color:var(--on-ink);
  clip-path:var(--notch);border-radius:0 14px 14px 14px;
  padding-top:clamp(2.6rem,4vw,3.2rem);
}
.desk-navy h3{color:var(--cream)}
.desk-navy p{color:var(--on-ink)}
.desk-navy .tk{background:rgba(200,224,252,.18);color:var(--sky)}
.desk h3{font-size:clamp(1.3rem,2.4vw,1.6rem);margin-bottom:.6rem}

/* ---------- package ladder (home) ---------- */
.ladder-group+.ladder-group{margin-top:2.6rem}
.ladder-group>h3{margin-bottom:.4rem}
.ladder{list-style:none;border-top:1.5px solid var(--ink)}
.rung{
  display:grid;gap:.3rem 1.6rem;align-items:center;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);
}
.rung-name{display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em}
.rung-name::before{
  content:"";width:34px;height:14px;flex:none;
  background:linear-gradient(to right,var(--ink) calc(var(--n) * 33.4%),var(--sky) 0);
  -webkit-mask:repeating-linear-gradient(to right,#000 0 9px,transparent 9px 12.5px);
          mask:repeating-linear-gradient(to right,#000 0 9px,transparent 9px 12.5px);
  border-radius:2px;
}
.r1{--n:1}.r2{--n:2}.r3{--n:3}
.rung-aud{color:var(--muted);font-size:.97rem;line-height:1.45}
.rung-hrs{font-size:.92rem;line-height:1.45}
.rung-go{
  font-weight:700;text-decoration:none;justify-self:start;
  padding:.45rem .95rem;border:1.5px solid var(--ink);border-radius:999px;font-size:.9rem;
  transition:background .2s ease,color .2s ease;
}
.rung-go:hover,.rung-go:focus-visible{background:var(--ink);color:var(--cream)}
@media(min-width:900px){
  .rung{grid-template-columns:minmax(12rem,1fr) 2.3fr 1.5fr auto}
  .rung-go{justify-self:end}
}
.ladder-foot{margin:2rem 0 0}

/* ---------- why ---------- */
.why{
  background:var(--ink);color:var(--on-ink);
  clip-path:var(--notch);
  padding:clamp(4rem,8vw,6rem) 0 clamp(3.4rem,7vw,5.2rem);
}
.why-grid{display:grid;gap:2rem 4rem}
@media(min-width:900px){.why-grid{grid-template-columns:.85fr 1.15fr;align-items:start}}
.why h2{color:var(--cream)}
.why-copy p{margin:1.1rem 0 0;color:var(--on-ink);max-width:44ch}
.why-list{list-style:none;display:grid;gap:0 2.4rem}
@media(min-width:560px){.why-list{grid-template-columns:1fr 1fr}}
.why-list li{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid rgba(200,224,252,.2);font-weight:600;color:var(--cream);line-height:1.4}
.why .tk{background:rgba(200,224,252,.18);color:var(--sky)}

/* ---------- how it works ---------- */
.steps{list-style:none;display:grid;gap:0}
.steps li{position:relative;display:grid;grid-template-columns:2.6rem 1fr;gap:.1rem 1.1rem;padding-bottom:1.9rem}
.steps li:last-child{padding-bottom:0}
.steps .num{
  grid-row:span 2;position:relative;z-index:1;
  width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--cream);font-family:var(--display);font-weight:700;
}
.steps li:not(:last-child)::after{content:"";position:absolute;left:calc(1.3rem - 1px);top:2.6rem;bottom:.2rem;width:2px;background:var(--rule-strong)}
.steps h3{padding-top:.45rem;font-size:1.1rem}
.steps p{margin:0;color:var(--muted);max-width:44ch}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(5,1fr)}
  .steps li{display:block;padding:0 1.3rem 0 0}
  .steps .num{margin-bottom:1.2rem}
  .steps li:not(:last-child)::after{left:3.3rem;right:.7rem;top:1.3rem;bottom:auto;width:auto;height:2px}
  .steps h3{padding-top:0}
  .steps p{font-size:.97rem}
}

/* ---------- team ---------- */
.team-snap{background:var(--band);border-block:1px solid var(--rule)}
.roles{list-style:none;display:grid;gap:0}
.roles li{padding:1.4rem 0;border-top:1px solid var(--rule-strong)}
.roles h3{margin-bottom:.4rem}
.roles p{margin:0;color:var(--muted);max-width:36ch}
@media(min-width:860px){
  .roles{grid-template-columns:repeat(3,1fr)}
  .roles li{padding:1.6rem 2rem 0 0}
  .roles li+li{padding-left:2rem;border-left:1px solid var(--rule-strong)}
  .roles li{border-top:1.5px solid var(--ink)}
}
.vetting{margin-top:2.6rem;padding-top:1.6rem;border-top:1px dashed var(--rule-strong)}
.vetting p{max-width:70ch}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:1.4rem 4rem}
@media(min-width:900px){.faq-grid{grid-template-columns:.8fr 1.2fr;align-items:start}.faq-grid .sect-head{margin:0;position:sticky;top:6rem}}
details{border-bottom:1px solid var(--rule)}
.faq-list details:first-child{border-top:1px solid var(--rule)}
summary{
  display:flex;align-items:center;gap:1rem;padding:1.2rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.06rem;line-height:1.35;letter-spacing:-.01em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";margin-left:auto;flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  font:500 1.5rem/1 var(--sans);background:var(--sky);color:var(--ink);
  transition:transform .35s var(--ease),background .2s ease,color .2s ease;
}
details[open]:not(.closing) summary::after{transform:rotate(135deg);background:var(--ink);color:var(--cream)}
.ans{padding:0 0 1.4rem}
.ans p{margin:0;color:var(--muted);max-width:64ch}
.faq-more{margin-top:2rem;color:var(--muted)}

/* ---------- closer ---------- */
.closer{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);padding:clamp(3.4rem,7vw,5.4rem) 0}
.closer::before{
  content:"";position:absolute;pointer-events:none;right:-6%;top:50%;transform:translateY(-50%);
  width:min(520px,62vw);aspect-ratio:560/377;background:var(--sky);opacity:.09;
  -webkit-mask:url(../img/logo-mark.png) center/contain no-repeat;mask:url(../img/logo-mark.png) center/contain no-repeat;
}
.closer .wrap{position:relative}
.closer h2{color:var(--cream)}
.closer p{color:var(--on-ink);margin:1rem 0 0;max-width:46ch}
.closer-grid{display:grid;gap:2.2rem 4rem}
@media(min-width:900px){.closer-grid{grid-template-columns:.9fr 1.1fr;align-items:center}}
.closer-row{display:grid;gap:1.6rem 3rem}
@media(min-width:900px){.closer-row{grid-template-columns:1fr auto;align-items:center}}
.closer-slim{padding:clamp(2.8rem,6vw,4rem) 0}

/* ---------- inner page header ---------- */
.page-head{position:relative;overflow:hidden;background:var(--band);border-bottom:1px solid var(--rule);padding:clamp(3rem,7vw,5rem) 0 clamp(2.4rem,5vw,3.6rem)}
.page-head::after{
  content:"";position:absolute;right:-9rem;top:50%;transform:translateY(-50%);
  width:26rem;height:26rem;border-radius:50%;background:var(--sky);opacity:.45;pointer-events:none;
}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:20ch}
.page-head .lede{margin:1.1rem 0 0}
.page-head .cta-row{margin-top:1.8rem}
.jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.jump a{
  padding:.55rem 1.1rem;border:1.5px solid var(--ink);border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;
  background:var(--paper);transition:background .2s ease,color .2s ease;
}
.jump a:hover,.jump a:focus-visible{background:var(--ink);color:var(--cream)}

/* ---------- services page ---------- */
.line-customer{background:var(--band);border-block:1px solid var(--rule)}
.line-intro{display:grid;gap:1.2rem 4rem;margin-bottom:2.6rem}
@media(min-width:880px){.line-intro{grid-template-columns:1fr 1.25fr;align-items:start}}
.line-sub{margin:.6rem 0 0;color:var(--muted);font-weight:600}
.tasks{padding:1.6rem 0 2rem;border-top:1.5px solid var(--ink)}
.tasks h3{margin-bottom:.6rem}
.ticks.cols{gap:0 2.4rem}
@media(min-width:720px){.ticks.cols{grid-template-columns:1fr 1fr}}
.note-p{margin:1.1rem 0 0;max-width:70ch;color:var(--muted)}
.pick-title{margin:1.2rem 0 1.4rem;font-size:1.5rem}
.pkgs{display:grid;gap:1.6rem;align-items:stretch}
@media(min-width:960px){.pkgs{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.pkg{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;overflow:hidden}
.pkg-head{padding:1.4rem 1.5rem 1.3rem}
.pkg-head h3{font-size:1.4rem}
.pkg-head p{margin:.5rem 0 0;font-size:.94rem;line-height:1.45}
.tier-1 .pkg-head{background:var(--sky);color:var(--ink)}
.tier-2 .pkg-head{background:var(--mid);color:var(--cream)}
.tier-3 .pkg-head{background:var(--ink);color:var(--cream)}
.tier-2 .pkg-head h3,.tier-3 .pkg-head h3{color:var(--cream)}
.pkg-body{padding:1.3rem 1.5rem;flex:1}
.inherits{margin:0 0 .5rem;padding:.55rem .8rem;background:var(--band);border-radius:8px;font-size:.93rem;color:var(--ink)}
.pkg .ticks li{font-size:.97rem;padding:.36rem 0}
.pkg-foot{padding:1.2rem 1.5rem 1.5rem;border-top:1px solid var(--rule)}
.hours-title{margin:0;font-size:.88rem;font-weight:700;color:var(--muted)}
.hours{list-style:none;margin:.2rem 0 1.1rem;font-size:.97rem;font-weight:600}
.pkg .btn{width:100%}
.pricing-note{background:var(--paper);border-top:1px solid var(--rule)}
.pricing-note p{color:var(--muted)}
.pricing-note h2{margin-bottom:1rem}

/* ---------- forms ---------- */
.form{display:grid;gap:1.1rem}
.row{display:grid;gap:1.1rem}
@media(min-width:620px){.row{grid-template-columns:1fr 1fr}}
.f{display:grid;gap:.4rem;align-content:start}
.f label{font-weight:700;font-size:.93rem}
.opt{font-weight:400;color:var(--muted);font-size:.86rem;margin-left:.3rem}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);width:100%;
  padding:.8rem 1rem;border:1.5px solid var(--rule-strong);border-radius:8px;background:var(--paper);
  transition:border-color .2s ease,box-shadow .25s ease;
}
textarea{resize:vertical;min-height:8rem;line-height:1.5}
select{
  appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2312296C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") right 1rem center/14px no-repeat;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--sky)}
[aria-invalid=true]{border-color:var(--alert)}
[aria-invalid=true]:focus-visible{box-shadow:0 0 0 4px rgba(179,38,30,.16)}
.fe{margin:0;color:var(--alert);font-size:.9rem;font-weight:600}
.fe-form{padding:.8rem 1rem;border-left:4px solid var(--alert);background:rgba(179,38,30,.07);border-radius:6px}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:.4rem}
.fineprint{margin:0;font-size:.86rem;color:var(--muted);flex:1 1 14rem}
.closer .form label{color:var(--cream)}
.closer .fineprint,.closer .fineprint a{color:var(--on-ink)}
.closer .btn{background:var(--sky);color:var(--ink);border-color:var(--sky)}
.closer .btn:hover,.closer .btn:focus-visible{background:var(--cream);border-color:var(--cream);box-shadow:0 14px 26px -14px rgba(0,0,0,.6)}
.closer .fe{color:#FFB4AC}
.closer .fe-form{background:rgba(255,255,255,.1);border-left-color:#FF9B93}
.closer input:focus-visible,.closer select:focus-visible{box-shadow:0 0 0 4px rgba(200,224,252,.4)}

/* booking page */
.book-grid{display:grid;gap:3rem 4.5rem}
@media(min-width:940px){.book-grid{grid-template-columns:1.35fr .85fr;align-items:start}}
.book-side h2{font-size:1.4rem;margin-bottom:1rem}
.mini-steps{list-style:none;counter-reset:s;display:grid;gap:.9rem}
.mini-steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:.8rem;align-items:start;line-height:1.5}
.mini-steps li::before{
  content:counter(s);width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--sky);color:var(--ink);font:700 .92rem/1 var(--display);
}
.side-note{margin-top:2.2rem;padding:1.4rem 1.5rem;background:var(--band);border-left:4px solid var(--ink);border-radius:0 10px 10px 0}
.side-note h3{margin-bottom:.5rem;font-size:1.05rem}
.side-note p{margin:0 0 .8rem}
.side-note .small{margin:.9rem 0 0}

/* sent state */
.sent{padding:clamp(1.6rem,4vw,2.6rem);background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;box-shadow:10px 10px 0 var(--sky);animation:rise .5s var(--ease)}
.sent h2,.sent h3{margin:1rem 0 .7rem}
.sent p{color:var(--muted);max-width:52ch}
.sent .btn{margin-top:.6rem}
.tick-lg{width:56px;height:56px;fill:var(--sky);stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tick-lg circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s var(--ease) forwards}
.tick-lg path{fill:none;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s var(--ease) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- contact page ---------- */
.contact-grid{display:grid;gap:3rem 4.5rem}
@media(min-width:940px){.contact-grid{grid-template-columns:1.1fr .9fr;align-items:start}}
.contact-form h2{margin-bottom:1.4rem;font-size:1.6rem}
.reach{list-style:none}
.reach li{display:flex;align-items:flex-start;gap:1.1rem;padding:1rem 0;border-top:1px solid var(--rule)}
.reach li:first-child{border-top:1.5px solid var(--ink)}
.ico{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--paper);border:1px solid var(--rule)}
.ico svg{width:20px;height:20px}
.who{display:block;font-size:.84rem;font-weight:700;color:var(--muted);line-height:1.2;margin-bottom:.25rem}
.lines{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem;margin-bottom:.15rem}
.reach a.main{
  font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;
  background:linear-gradient(var(--sky),var(--sky)) left bottom/0 .35em no-repeat;transition:background-size .3s var(--ease);
}
.reach a.main:hover,.reach a.main:focus-visible{background-size:100% .35em}
.plainval{font-weight:600;line-height:1.5}
.chip{font-size:.8rem;font-weight:700;text-decoration:none;padding:.22rem .7rem;border-radius:999px;background:var(--sky);transition:background .2s ease,color .2s ease}
.chip:hover,.chip:focus-visible{background:var(--ink);color:var(--cream)}
.visit{margin-top:2rem;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--sky)}
.visit-info{padding:1.4rem 1.6rem}
.visit-info h3{font-size:1.1rem}
.visit-info address{font-style:normal;margin-top:.5rem;color:var(--muted)}
.visit-info a{display:inline-block;margin-top:.8rem;font-weight:700}
.visit iframe{width:100%;height:230px;border:0;border-top:1.5px solid var(--ink);background:var(--band);display:block}

/* ---------- legal pages ---------- */
.legal-doc h2{font-size:1.35rem;margin:2.2rem 0 .6rem}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p{color:var(--muted)}
.notfound{padding-block:clamp(4rem,10vw,7rem)}

/* ---------- footer ---------- */
.site-foot{padding:clamp(2.8rem,5vw,3.6rem) 0 2rem;font-size:.95rem;color:var(--muted);background:var(--paper);border-top:1px solid var(--rule)}
.foot-grid{display:grid;gap:2rem}
@media(min-width:640px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.foot-grid{grid-template-columns:1.4fr .8fr 1fr 1fr;gap:3rem}}
.site-foot h3{font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:0;margin-bottom:.7rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-brand img{width:112px;height:auto;margin-bottom:.9rem}
.foot-brand p{max-width:34ch}
.plain{list-style:none;display:grid;gap:.35rem}
.hrs{display:inline-block;margin-top:.6rem}
.legal{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--rule);font-size:.88rem}
.legal .top{margin-left:auto;font-weight:700;color:var(--ink)}

/* ---------- WhatsApp shortcut ---------- */
.wa-float{
  position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:90;
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem .85rem;
  background:var(--cream);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;
  font-weight:700;font-size:.93rem;text-decoration:none;box-shadow:5px 5px 0 var(--sky);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wa-float svg{width:22px;height:22px}
.wa-float span{display:none}
@media(min-width:640px){.wa-float{padding:.7rem 1.1rem .7rem .95rem}.wa-float span{display:inline}}
.wa-float:hover,.wa-float:focus-visible{transform:translateY(-2px);box-shadow:7px 7px 0 var(--sky)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .tick-lg circle,.tick-lg path{stroke-dashoffset:0!important}
}