/* ==========================================================================
   KeyCompass — site styles
   Brand: Vault Dial mark, Archivo, zero radius, 2px rules, ink/ground/accent.
   Utility face: Martian Mono, used only for annotation-scale text.
   ========================================================================== */

:root{
  /* -- ground ------------------------------------------------------------ */
  --pitch:#141312;          /* deepest ground, hero + footer */
  --ink:#201e1d;            /* brand ink */
  --ground:#f3f2f2;         /* brand light ground */
  --white:#ffffff;

  /* -- accent ------------------------------------------------------------ */
  --accent:#ec3013;         /* brand accent — graphics, rules, floods */
  --accent-deep:#b3210e;    /* small accent text on light (brand rule) */
  --accent-press:#c62710;

  /* -- muted ------------------------------------------------------------- */
  --dim:#9a9391;            /* muted on dark */
  --dim-2:#6b6664;          /* brand muted, on light */

  /* -- lines ------------------------------------------------------------- */
  --line-d:rgba(243,242,242,.15);
  --line-l:rgba(32,30,29,.16);
  --rule:2px;

  /* -- type -------------------------------------------------------------- */
  --font:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --mono:"Martian Mono","SFMono-Regular",ui-monospace,monospace;
  --track:-.035em;

  /* -- layout ------------------------------------------------------------ */
  --max:1380px;
  --gut:clamp(1.25rem,4.2vw,3.5rem);
  --sec-y:clamp(4.5rem,9vw,8.5rem);

  --ease:cubic-bezier(.53,0,0,1);

  color-scheme:dark;
}

/* --- reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

body{
  background:var(--pitch);
  color:var(--ground);
  font-family:var(--font);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.6;
  letter-spacing:-.011em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

*:focus-visible{outline:var(--rule) solid var(--accent);outline-offset:3px}

/* Available to assistive technology, never rendered or hovered. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:99;
  background:var(--accent);color:var(--white);
  padding:.75rem 1rem;font-family:var(--mono);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{top:.75rem}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec-y);position:relative}
.sec--pitch{background:var(--pitch);color:var(--ground)}
.sec--ink{background:var(--ink);color:var(--ground)}
.sec--ground{background:var(--ground);color:var(--ink)}
.sec--accent{background:var(--accent);color:var(--ink)}
/* Fallback for a hash landing before JS runs: pull the scroll past the
   section's own top padding so its first line clears the header. */
.sec[id]{scroll-margin-top:calc(5.625rem - var(--sec-y))}

/* --- typography ---------------------------------------------------------- */
.h2{
  font-size:clamp(2rem,1.15rem + 3.6vw,4rem);
  font-weight:600;line-height:.94;letter-spacing:-.03em;text-wrap:balance;
}
.h3{
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);
  font-weight:600;line-height:1.02;letter-spacing:-.028em;
}
.h4{
  font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  font-weight:600;line-height:1.15;letter-spacing:-.022em;
}
.lead{
  font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);
  line-height:1.48;letter-spacing:-.015em;font-weight:400;
}
.sec__head{margin-block:clamp(2rem,4vw,3.25rem) clamp(2.25rem,4.5vw,3.5rem);max-width:22ch}

.micro{
  font-family:var(--mono);
  font-size:clamp(.625rem,.6rem + .08vw,.6875rem);
  font-weight:500;line-height:1.3;
  text-transform:uppercase;letter-spacing:.08em;
}
.micro--dim{color:var(--dim)}
.sec--ground .micro--dim,.sec--accent .micro--dim{color:var(--dim-2)}
.micro--chip{
  display:inline-block;background:var(--ink);color:var(--ground);
  padding:.6em .85em .5em;letter-spacing:.1em;
}

/* --- rules --------------------------------------------------------------- */
.rule{border:0;height:var(--rule);background:var(--ground);margin:0;transform-origin:left center}
.rule--dark{background:rgba(243,242,242,.9)}
.rule--light{background:var(--ink)}
.rule--accent{background:var(--accent)}
.rule--hair{height:1px;background:var(--line-d);opacity:1}
.sec--ground .rule--hair{background:var(--line-l)}

.rowhead{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;padding-bottom:.7rem;
}

/* --- lockup -------------------------------------------------------------- */
.lockup{
  display:inline-flex;align-items:center;gap:.22em;
  font-size:19px;font-weight:800;letter-spacing:var(--track);
  line-height:1;text-decoration:none;color:currentColor;
}
.lockup__mark{width:.78em;height:.78em;flex:none}
.lockup--lg{font-size:clamp(24px,3.4vw,34px)}

/* --- buttons ------------------------------------------------------------- */
.btn{
  --btn-y:1rem;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;
  padding:var(--btn-y) 1.6rem;
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;line-height:1;
  text-decoration:none;border:var(--rule) solid transparent;
  transition:color .28s var(--ease),border-color .28s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .34s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn--sm{--btn-y:.7rem;padding-inline:1.1rem;font-size:.6875rem}

.btn--accent{background:var(--accent);color:var(--white);border-color:var(--accent)}
.btn--accent::before{background:var(--white)}
.btn--accent:hover,.btn--accent:focus-visible{color:var(--accent-deep);border-color:var(--white)}

.btn--ghost{color:var(--ground);border-color:rgba(243,242,242,.35)}
.btn--ghost::before{background:var(--ground)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ink);border-color:var(--ground)}

.btn--ink{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--ink::before{background:var(--white)}
.btn--ink:hover,.btn--ink:focus-visible{color:var(--ink)}

.btn--outline-ink{color:var(--ink);border-color:var(--ink);text-transform:none;letter-spacing:.02em}
.btn--outline-ink::before{background:var(--ink)}
.btn--outline-ink:hover,.btn--outline-ink:focus-visible{color:var(--white)}

/* --- header -------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--pitch);
  border-bottom:var(--rule) solid transparent;
  transition:border-color .3s var(--ease);
}
.hdr.is-stuck{border-bottom-color:rgba(243,242,242,.18)}
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:4.25rem}
.hdr__nav{display:flex;gap:clamp(1rem,2.2vw,2rem);margin-left:auto}
.hdr__nav a{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.07em;text-decoration:none;
  color:var(--dim);padding-block:.4rem;position:relative;
  transition:color .24s var(--ease);
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--rule);
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.hdr__nav a:hover,.hdr__nav a:focus-visible{color:var(--ground)}
.hdr__nav a:hover::after,.hdr__nav a:focus-visible::after{transform:scaleX(1)}
.hdr .btn{margin-left:auto}
.hdr__nav+.btn{margin-left:0}

/* Netlify injects a "Powered by Netlify" badge into every published page as an
   iframe. Hidden here; the redirect in netlify.toml also tries to stop the
   script loading at all. */
#nl-badge-frame,#nl-hud-frame,netlify-hud{display:none!important}

/* --- mobile menu --------------------------------------------------------- */
.narrow-only{display:none}
.menubtn{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:.35rem;padding:0;
  background:none;border:0;border-radius:0;cursor:pointer;color:var(--ground);
}
.menubtn__rules{display:block;width:22px}
.menubtn__rules i{
  display:block;height:2px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.menubtn__rules i+i{margin-top:5px}
.hdr.is-open .menubtn__rules i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.is-open .menubtn__rules i:nth-child(2){opacity:0}
.hdr.is-open .menubtn__rules i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* [hidden] hides via the UA stylesheet, whose specificity loses to the class
   rule below — so this has to be stated explicitly or the panel renders open. */
.menu[hidden]{display:none}
.menu{
  position:fixed;inset:0;z-index:40;background:var(--pitch);
  padding:6rem var(--gut) var(--gut);
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;
  overflow-y:auto;
}
.menu__nav{display:flex;flex-direction:column;border-top:var(--rule) solid rgba(243,242,242,.9)}
.menu__nav a{
  padding:1.15rem 0;border-bottom:1px solid var(--line-d);
  font-size:clamp(1.5rem,7vw,2.125rem);font-weight:600;letter-spacing:-.028em;
  line-height:1.1;text-decoration:none;color:var(--ground);
  transition:color .2s var(--ease),padding-left .3s var(--ease);
}
.menu__nav a:hover,.menu__nav a:focus-visible{color:var(--accent);padding-left:.5rem}
.menu__cta{align-self:flex-start;flex:0 0 auto}
.menu:focus{outline:none}

/* --- hero ---------------------------------------------------------------- */
.hero{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero__grid{
  display:grid;gap:clamp(3rem,6vw,5rem);
  grid-template-columns:minmax(0,1fr);
  padding-top:clamp(2.5rem,5vw,4rem);
}
.hero__title{
  font-size:clamp(2.1rem,.95rem + 4.85vw,4.6rem);
  font-weight:700;line-height:.9;letter-spacing:-.038em;
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
.ln{display:block}
.ln--alt{color:var(--dim);font-weight:500}
.ln i{display:block;font-style:normal}
.hero__lead{
  font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem);
  line-height:1.5;letter-spacing:-.014em;color:#cfc9c7;max-width:44ch;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  margin-top:clamp(1.75rem,3vw,2.25rem);
  padding-top:1.25rem;border-top:1px solid var(--line-d);
}
.hero__facts li{position:relative;padding-left:1rem}
.hero__facts li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:6px;height:6px;background:var(--accent);
}

/* --- signature: custody plan --------------------------------------------- */
.plan{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.plan__svg{width:100%;height:auto;overflow:visible}

.ring{fill:none;stroke:var(--ground);stroke-width:2}
.ring--1{stroke-width:2.5}
.ring--2{stroke:rgba(243,242,242,.55)}
.ring--core{fill:none;stroke:var(--ground);stroke-width:2.5}

.plan__names text{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;fill:var(--dim);
}
.plan__names text:last-child{fill:var(--ground);font-size:11px;letter-spacing:.1em}

.ch{cursor:pointer}
.ch__hit{fill:transparent}
.ch__fill{fill:var(--accent);opacity:0;transition:opacity .3s var(--ease)}
.ch__edge{
  stroke:rgba(243,242,242,.3);stroke-width:2;stroke-dasharray:5 5;
  transition:stroke .3s var(--ease),stroke-dasharray .3s var(--ease);
}
.ch__lbl{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;fill:var(--dim);pointer-events:none;
  transition:fill .3s var(--ease);
}
.ch.is-on .ch__fill{opacity:.16}
.ch.is-on .ch__edge{stroke:var(--accent);stroke-dasharray:none}
.ch.is-on .ch__lbl{fill:var(--white)}
.ch:focus{outline:none}
.ch:focus-visible .ch__hit{fill:rgba(236,48,19,.16);stroke:var(--accent);stroke-width:2}

.tblock{border-top:var(--rule) solid rgba(243,242,242,.9);padding-top:.7rem}
.tblock__row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.7rem}
.tblock__read{
  font-family:var(--mono);font-size:.6875rem;line-height:1.7;
  letter-spacing:.02em;padding-top:.7rem;color:var(--ground);
  /* Fixed height for the tallest readout. If this box grows on hover, the
     drawing shifts under the cursor and the hover state oscillates. */
  min-height:5.4em;
}
.tblock__hint{display:block;color:var(--dim)}

/* --- boundary ------------------------------------------------------------ */
.boundary__grid{
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr);
  padding-top:clamp(2.5rem,5vw,4rem);
}
.boundary__head{color:var(--ink)}
.boundary__body{display:flex;flex-direction:column;gap:1.15rem;max-width:56ch}
.boundary__body p{color:#3a3634}
.boundary__body .lead{color:var(--ink)}
.boundary__pin{
  border-left:var(--rule) solid var(--accent);
  padding-left:1.1rem;margin-top:.5rem;
  font-weight:500;color:var(--ink)!important;
}

/* --- service cards ------------------------------------------------------- */
.cards{display:grid;grid-template-columns:minmax(0,1fr)}
.card{display:flex;flex-direction:column;gap:1.1rem;padding-block:0 clamp(2rem,3.5vw,3rem)}
.card+.card{border-top:1px solid var(--line-d);padding-top:clamp(2rem,3.5vw,3rem)}
.card__spec{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  flex-wrap:wrap;padding-bottom:1.1rem;border-bottom:1px solid var(--line-d);
}
.card__price{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(1.125rem,1rem + .7vw,1.5rem);
  letter-spacing:-.02em;color:var(--accent);
}
.card__for{font-weight:500;color:var(--ground)}
.card p{color:#bdb7b5}
.card__for{color:var(--ground)}
.card__sub{color:var(--dim);padding-top:.4rem}
.ticks{display:flex;flex-direction:column;gap:.7rem}
.ticks li{position:relative;padding-left:1.6rem;color:#bdb7b5}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border:var(--rule) solid var(--accent);
}
.note{
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:1.5rem;max-width:70ch;
  border-top:1px solid var(--line-d);
  font-size:.9375rem;line-height:1.6;color:var(--dim);
}

/* --- steps --------------------------------------------------------------- */
.steps{display:grid;gap:var(--rule);grid-template-columns:minmax(0,1fr);background:var(--line-l)}
.step{
  background:var(--ground);padding:clamp(1.5rem,2.6vw,2.25rem) 0 clamp(1.5rem,2.6vw,2.25rem);
  display:grid;gap:.6rem;align-content:start;
}
.step__n{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;color:var(--accent-deep);
}
.step p{color:#4a4543;max-width:60ch}

/* --- profiles ------------------------------------------------------------ */
.profiles{display:grid;gap:clamp(2rem,3.4vw,3rem) clamp(2rem,4vw,4rem);grid-template-columns:minmax(0,1fr)}
.profile{padding-top:1.25rem;border-top:var(--rule) solid rgba(243,242,242,.9)}
.profile__q{
  font-size:clamp(1.125rem,1.02rem + .55vw,1.4375rem);
  font-weight:500;line-height:1.24;letter-spacing:-.024em;
  margin-bottom:.85rem;text-wrap:balance;
}
.profile__a{color:#bdb7b5;font-size:.96875rem;line-height:1.6}
.profile__tag{
  display:block;font-family:var(--mono);font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:.5rem;
}

/* --- founder ------------------------------------------------------------- */
.founder__grid{
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr);
  padding-top:clamp(2.5rem,5vw,4rem);
}
.founder__copy{display:flex;flex-direction:column;gap:1.25rem;max-width:56ch}
.founder__copy .h2{margin-bottom:.5rem;max-width:18ch}
.founder__copy p{color:#bdb7b5}
.founder__copy .lead{color:var(--ground)}
/* Profile links. Quiet by default; the icons are the label. */
.social{
  display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
  margin-top:.6rem;padding-top:1.5rem;border-top:1px solid var(--line-d);
}
.social__link{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--dim);text-decoration:none;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
  transition:color .24s var(--ease);
}
.social__link svg{width:18px;height:18px;display:block;flex:none}
.social__link:hover,.social__link:focus-visible{color:var(--ground)}

/* The only photograph on the site. No frame, no filter, no radius — it is
   already monochrome and sits in the palette unaided. */
.portrait{width:100%;overflow:hidden}
.portrait img{display:block;width:100%;height:auto}

/* --- faq ----------------------------------------------------------------- */
.faq{border-top:var(--rule) solid var(--ink)}
.qa{border-bottom:1px solid var(--line-l)}
.qa summary{
  display:flex;align-items:flex-start;gap:1rem;cursor:pointer;list-style:none;
  padding:1.35rem 0;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);
  font-weight:500;letter-spacing:-.022em;line-height:1.3;
  transition:color .24s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
.qa summary::after{
  content:"";flex:none;width:14px;height:14px;margin-top:.36em;
  background:var(--accent-deep);
  clip-path:polygon(0 43%,100% 43%,100% 57%,0 57%);
  transition:transform .34s var(--ease),clip-path .34s var(--ease);
}
.qa[open] summary::after{clip-path:polygon(0 43%,100% 43%,100% 57%,0 57%);transform:rotate(180deg)}
.qa:not([open]) summary::after{
  clip-path:polygon(0 43%,43% 43%,43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%);
}
.qa summary:hover{color:var(--accent-deep)}
.qa__body{padding-bottom:1.5rem;max-width:68ch}
.qa__body p{color:#4a4543}
.qa__body p + p{margin-top:1rem}
.qa__body strong{color:var(--ink);font-weight:600}

/* --- book ---------------------------------------------------------------- */
.book__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:minmax(0,1fr);align-items:end}
.book__mark{width:clamp(72px,11vw,140px);height:auto;color:var(--ink);justify-self:start}
.book__head{margin:clamp(1.5rem,3vw,2.25rem) 0 clamp(1.25rem,2.4vw,1.75rem);max-width:16ch}
.book__lead{
  font-size:clamp(1.25rem,1.05rem + .85vw,1.75rem);
  font-weight:700;line-height:1.28;letter-spacing:-.026em;max-width:26ch;
}
.book__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(2rem,3.6vw,2.75rem)}

/* --- footer -------------------------------------------------------------- */
.ftr{padding-block:clamp(3rem,6vw,5rem) 2.5rem}
.ftr__grid{
  display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr);
  padding:clamp(2rem,4vw,3.25rem) 0;
}
.ftr__tag{margin-top:1rem;color:var(--dim);max-width:34ch;font-size:.9375rem}
.ftr__nav{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.ftr__nav .micro{margin-bottom:.4rem}
.ftr__nav a{
  text-decoration:none;font-size:.9375rem;color:#cfc9c7;
  border-bottom:1px solid transparent;transition:border-color .24s var(--ease),color .24s var(--ease);
}
.ftr__nav a:hover,.ftr__nav a:focus-visible{color:var(--white);border-bottom-color:var(--accent)}
.ftr__legal{
  padding-top:1.75rem;max-width:92ch;
  font-size:.8125rem;line-height:1.65;color:var(--dim);
}
.ftr__meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:2rem}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:600px){
  .profiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__grid{grid-template-columns:1.6fr 1fr 1fr}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);align-items:start}
  /* Sized to the column, not the viewport, so the four lines never overrun it.
     No nowrap: an edited headline that is longer just wraps instead of clipping. */
  .hero__title{font-size:min(5.2vw,4.6rem)}
  .boundary__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
  .founder__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,4vw,4rem)}
  .step{padding-inline:0}
  .book{text-align:left}
}
@media (min-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding-right:clamp(2rem,3.6vw,3.5rem);padding-block:0}
  .card+.card{
    border-top:0;border-left:1px solid var(--line-d);
    padding-top:0;padding-left:clamp(2rem,3.6vw,3.5rem);padding-right:0;
  }
  .book__grid{grid-template-columns:minmax(0,1fr) auto}
  .book__mark{justify-self:end}
}
@media (min-width:1100px){
  .profile__q{min-height:3.75em}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));background:none;gap:0}
  .step{
    background:none;padding:1.5rem clamp(1rem,1.6vw,1.75rem) 0 0;
    border-top:var(--rule) solid var(--ink);
  }
  .step+.step{padding-left:clamp(1rem,1.6vw,1.75rem)}
  .profiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .hdr__nav{display:none}
  /* The nav is hidden but still in the DOM, so .hdr__nav+.btn kept matching and
     cancelled the auto-margin — leaving the CTA stranded beside the logo. */
  .hdr__nav+.btn{margin-left:auto}
  .menubtn{display:inline-flex}
  .wide-only{display:none}          /* the header CTA shortens to "Book" */
  .narrow-only{display:inline}
  /* Thumb-sized hit areas: both of these fell short of the 44px minimum. */
  .hdr .btn{min-height:44px}
  .social__link{min-height:44px}
}
@media (min-width:821px){
  .menu{display:none!important}
}

/* ==========================================================================
   Motion — orchestrated load, then quiet scroll reveals
   ========================================================================== */
/* Initial states are scoped to .js so the page is fully visible without it. */
.js .ln i{transform:translateY(45%);opacity:0}
.js .hero__lead,.js .hero__acts,.js .hero__facts,.js .plan{opacity:0;transform:translateY(14px)}
.js .plan__rings .ring,.js .ring--core{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .ch__edge,.js .ch__lbl,.js .plan__names text{opacity:0}

.is-ready .ln i{
  transform:translateY(0);opacity:1;
  transition:transform .9s var(--ease),opacity .7s var(--ease);
}
.is-ready .ln:nth-child(1) i{transition-delay:.05s}
.is-ready .ln:nth-child(2) i{transition-delay:.13s}
.is-ready .ln:nth-child(3) i{transition-delay:.21s}
.is-ready .ln:nth-child(4) i{transition-delay:.29s}

.is-ready .hero__lead,.is-ready .hero__acts,.is-ready .hero__facts,.is-ready .plan{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.is-ready .hero__lead{transition-delay:.36s}
.is-ready .hero__acts{transition-delay:.44s}
.is-ready .hero__facts{transition-delay:.52s}
.is-ready .plan{transition-delay:.2s}

.is-ready .plan__rings .ring,.is-ready .ring--core{
  stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease);
}
.is-ready .ring--1{transition-delay:.45s}
.is-ready .ring--2{transition-delay:.62s}
.is-ready .ring--core{transition-delay:.79s}
.is-ready .ch__edge,.is-ready .ch__lbl,.is-ready .plan__names text{
  opacity:1;transition:opacity .7s var(--ease) 1.05s;
}
.is-ready .ch.is-on .ch__lbl{transition:fill .3s var(--ease)}

/* scroll reveals */
.js [data-reveal] .rowhead{opacity:0}
.js [data-reveal] .rule{opacity:0;transform:scaleX(0)}
.js [data-reveal] .wrap>*:not(.rowhead):not(.rule){opacity:0;transform:translateY(18px)}

/* Sections jumped over by an in-page link: shown, but never animated, so they
   are not caught mid-transition as the page flies past them. */
.no-anim .rowhead,.no-anim .rule,.no-anim .wrap>*{transition:none!important}

[data-reveal].is-in .rowhead{opacity:1;transition:opacity .6s var(--ease)}
[data-reveal].is-in .rule{opacity:1;transform:scaleX(1);transition:transform .9s var(--ease) .08s,opacity .1s}
[data-reveal].is-in .wrap>*:not(.rowhead):not(.rule){
  opacity:1;transform:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.js [data-reveal] .portrait img{transform:scale(1.06)}
[data-reveal].is-in .portrait img{transform:none;transition:transform 1.5s var(--ease)}

[data-reveal].is-in .wrap>*:nth-child(3){transition-delay:.14s}
[data-reveal].is-in .wrap>*:nth-child(4){transition-delay:.2s}
[data-reveal].is-in .wrap>*:nth-child(5){transition-delay:.26s}

/* Reached from the nav: the reveal already overlaps the tail of the scroll, so
   it runs shorter and with a tighter stagger than one met by scrolling. */
[data-reveal].is-nav.is-in .rowhead{transition-duration:.42s}
[data-reveal].is-nav.is-in .rule{transition-duration:.58s;transition-delay:.06s}
[data-reveal].is-nav.is-in .wrap>*:not(.rowhead):not(.rule){transition-duration:.55s}
[data-reveal].is-nav.is-in .wrap>*:nth-child(3){transition-delay:.09s}
[data-reveal].is-nav.is-in .wrap>*:nth-child(4){transition-delay:.14s}
[data-reveal].is-nav.is-in .wrap>*:nth-child(5){transition-delay:.19s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  .ln i,.hero__lead,.hero__acts,.hero__facts,.plan,
  [data-reveal] .rowhead,[data-reveal] .rule,[data-reveal] .wrap>*{
    opacity:1!important;transform:none!important;
  }
  /* the drawing's rotated labels keep their transform — only the fade is dropped */
  .ch__edge,.ch__lbl,.plan__names text{opacity:1!important}
  .portrait img{transform:none!important}
  .plan__rings .ring,.ring--core{stroke-dashoffset:0!important}
}

@media print{
  body{background:#fff;color:#000}
  .hdr,.hero__acts,.book__acts{display:none}
}

/* ring path lengths for the draw-on animation */
.ring--1{--len:1408}
.ring--2{--len:896}
.ring--core{--len:256}