/* ── Scroll story pass ───────────────────────────────────────────────
   One entrance curve for the whole page, seamless section grounds,
   the pinned results story, the how-it-works timeline, the tab glide.
   Everything motion-related sits behind html.anim (set only when the
   visitor hasn't asked for reduced motion), so the static page is whole. */
:root{
  --e-in:cubic-bezier(.05,.7,.1,1);     /* entrances: fast start, long soft landing */
  --e-snap:cubic-bezier(.2,0,0,1);      /* hovers, state changes */
  --e-pop:cubic-bezier(.34,1.56,.64,1); /* small things that land with a bounce */
}

/* one entrance for every block that rises in */
html.anim .rise{transform:translateY(20px);transition:opacity .6s var(--e-in),transform .6s var(--e-in)}

/* section headings: words lift out of a mask, 40ms apart */
.sec-head h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sec-head h2 .wi{display:inline-block}
html.anim .sec-head.rise .wi{transform:translateY(105%);transition:transform .6s var(--e-in);transition-delay:calc(var(--i) * 40ms)}
html.anim .sec-head.rise.in .wi{transform:none}

/* ── Grounds: each section ends on the colour the next one starts with ── */
.hero > .wrap{position:relative;z-index:1}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,251,253,0),var(--sky-0))}
#portfolio{background:linear-gradient(180deg,var(--sky-0) 0%,#fff 18%,#fff 82%,var(--sky-0) 100%)}


/* ── Results: the pinned story ── */
.sec-res{padding:0 0 72px}
.story{position:relative}
.story-pin{padding:72px 0 24px}
.story-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.story-copy .sec-head{margin-bottom:26px}
.beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.beat b{display:block;font-size:32px;font-weight:750;letter-spacing:-.045em;line-height:1;color:var(--navy)}
.beat span{display:block;color:var(--ink-2);font-size:17px;margin-top:6px;max-width:34ch}
.beat-dots{display:none}
.story-chart{margin:0;display:flex;flex-direction:column;gap:10px}
.story-chart .cap{color:var(--faint)}
.story-chart .head{display:none}
.story-chart .head .dot{fill:var(--orange);stroke:#fff;stroke-width:3}
.story-chart .head .halo{fill:rgba(240,144,42,.22)}

/* scrub mode: the chart draws as you scroll, one beat at a time */
html.scrub .story{height:330vh}
html.scrub .story-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:84px 0 28px;overflow:hidden}
html.scrub .story-pin > .wrap{width:100%}
html.scrub .beats{display:grid}
/* exits are quick and quiet, the next beat lands just after: never two numbers on screen at once */
html.scrub .beat{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .18s ease-in,transform .18s ease-in}
html.scrub .beat.on{opacity:1;transform:none;transition:opacity .45s var(--e-in) .16s,transform .5s var(--e-in) .16s}
html.scrub .beat.past{transform:translateY(-18px)}
html.scrub .beat b{font-size:clamp(44px,5.4vw,72px);letter-spacing:-.05em}
html.scrub .beat span{font-size:clamp(17px,1.6vw,21px);margin-top:12px}
html.scrub .beat-dots{display:flex;gap:8px;margin-top:30px}
.beat-dots i{display:block;width:30px;height:4px;border-radius:2px;background:var(--line);transition:background .3s var(--e-snap)}
.beat-dots i.done{background:var(--navy)}
.beat-dots i.on{background:var(--orange)}
html.scrub .story-chart .head{display:inline}

/* ── Receipts: the raw analytics, folded away until asked for ── */
.receipts{margin-top:30px}
.receipts summary{display:inline-flex;align-items:center;gap:10px;list-style:none;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 18px;font-weight:650;font-size:15px;color:var(--navy);
  box-shadow:var(--shadow);transition:transform .15s var(--e-snap),box-shadow .15s var(--e-snap)}
.receipts summary::-webkit-details-marker{display:none}
.receipts summary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.receipts summary svg{width:16px;height:16px;transition:transform .25s var(--e-snap)}
.receipts[open] summary svg{transform:rotate(180deg)}
html.anim .receipts[open] .lish{animation:receipts-in .5s var(--e-in)}
@keyframes receipts-in{from{opacity:0;transform:translateY(14px)}}

/* ── How: your part / my part, then the timeline ── */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:46px}
.part{border-radius:var(--r-lg);padding:22px 26px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.part.me{background:var(--navy);border-color:var(--navy);color:#fff}
.part-k{font-weight:700;font-size:14px;color:var(--teal-ink)}
.part.me .part-k{color:var(--orange)}
.part p{font-size:17.5px;line-height:1.5;margin-top:8px}
.part.me p{color:rgba(255,255,255,.88)}

.tl{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.tl::before,.tl::after{content:"";position:absolute;left:10px;right:10px;top:9px;height:3px;border-radius:2px}
.tl::before{background:var(--line)}
.tl::after{background:linear-gradient(90deg,var(--teal),var(--orange));transform-origin:0 50%;transform:scaleX(var(--p,1))}
.tl-step{position:relative;padding-top:38px}
.tl-dot{position:absolute;top:0;left:0;width:21px;height:21px;border-radius:50%;background:#fff;border:3px solid var(--line);z-index:1;
  transition:border-color .3s var(--e-snap),background .3s var(--e-snap),transform .35s var(--e-pop)}
.tl-step.on .tl-dot{border-color:var(--orange);background:var(--orange);box-shadow:inset 0 0 0 3px #fff;transform:scale(1.15)}
.tl-step .k{color:var(--teal-ink)}
.tl-step h4{font-size:18px;letter-spacing:-.025em;line-height:1.2;margin-top:6px}
.tl-step p{color:var(--muted);font-size:14.5px;line-height:1.45;margin-top:6px}
/* progress lives in the dot and the line; the text stays fully readable at every frame */
.tl-step .k{transition:color .3s var(--e-snap)}
html.anim .tl-step:not(.on) .k{color:var(--muted)}

/* ── Talk: a client's words beside the decision ── */
.mini-quote{display:flex;align-items:center;gap:14px;margin-top:22px;max-width:56ch}
.mini-quote .av{position:relative;overflow:hidden;flex:none;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.mini-quote .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mini-quote q{display:block;font-weight:650;color:var(--navy);font-size:17px;line-height:1.4}
.mini-quote p span{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}

/* ── Portfolio tabs: one pill slides between tabs, panels cross in ── */
.tabs{position:relative}
.tab{position:relative;z-index:1}
.tab-glide{position:absolute;top:0;left:0;border-radius:999px;background:var(--navy);box-shadow:var(--shadow);pointer-events:none;z-index:0}
html.anim .tab-glide{transition:transform .45s var(--e-in),width .45s var(--e-in)}
.tabs.glides .tab[aria-selected="true"]{background:transparent;box-shadow:none}
html.anim .panel.on{animation:panel-in .5s var(--e-in)}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}}

/* ── Smaller screens ── */
@media (max-width:980px){
  .tl{grid-template-columns:minmax(0,1fr);gap:0}
  .tl::before,.tl::after{left:9px;right:auto;top:6px;bottom:30px;width:3px;height:auto}
  .tl::after{transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .tl-step{padding:0 0 26px 42px}
  .tl-step .k{display:block;padding-top:1px}
}
@media (max-width:900px){
  .story-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  html.scrub .story-pin{padding:76px 0 16px}
  html.scrub .story-copy{display:contents}
  html.scrub .story-copy .sec-head{order:0;margin-bottom:0}
  html.scrub .story-copy .sec-head h2{font-size:30px}
  html.scrub .story-copy .sec-head p{display:none}
  html.scrub .story-chart{order:1}
  html.scrub .beats{order:2}
  html.scrub .beat-dots{order:3;margin-top:4px}
  html.scrub .story-chart .cap,html.scrub .story-chart .lic-delta{display:none}
  html.scrub .beat b{font-size:40px}
  .story-chart .lic-chart text{font-size:27px}
  .parts{grid-template-columns:1fr;margin-bottom:36px}
}
@media (max-width:720px){
  .sec-res{padding-bottom:48px}
}

/* ── Page transition to and from the booking page (browsers without it just navigate) ──
   Shared origin: the new page opens as a circle from the button you pressed, the old one
   sinks back behind it. The animation itself is driven from the inline head script. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
html.vt-back::view-transition-old(root){z-index:2}

/* ── Nav travel: the heading replays its lift on arrival ── */
html.anim .replay .wi,html.anim .replay.rise,html.anim .rise.replay{transition:none !important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}