:root{  /* Paper White, Harbour accent */
  /* ---- surfaces ---- */
  --bg:#ffffff; --panel:#f4f6f8; --fin:#f7f9fa;
  --foot:#eef2f5; --ink:#0d1418; --soft:#53646e;
  --faint:#7f8e97; --line:rgba(13,20,24,.13); --edge:rgba(13,20,24,.32);
  --veil-a:rgba(13,20,24,.028);
  --veil-b:rgba(13,20,24,.008); --grid:rgba(13,20,24,.045);
  /* ---- washes and accent ----
     Harbour blue, so the light half of the page belongs to the same family as
     the dark bands rather than arguing with them. */
  --wash-1:rgba(13,98,134,.10); --wash-2:rgba(13,98,134,.06); --wash-3:rgba(13,98,134,.07);
  --glow:#0d6286; --glow-soft:#1a84ad; --on-glow:#ffffff;
  --deep:#083f57; --bone:#0d1418; --star:#c08a1c;
  /* ---- the three planes: blue leads, green second, amber third ---- */
  --p1:#15668c; --p2:#1b7a66; --p3:#b4702a;
  --p1d:#15668c; --p2d:#1b7a66; --p3d:#b4702a;
  /* ---- light bands ---- */
  --l-card:#ffffff; --l-soft:#f4f6f8; --l-ink:#0d1418;
  --l-ink2:#24323a; --l-body:#53646e; --l-mute:#7f8e97;
  --l-line:#e4eaee; --l-accent:#0d6286;
  /* ---- semantic ---- */
  --good:#1f7a4d; --bad:#b4431f; --todo:#b4702a;
}
<style>

:root{--bg:var(--bg);--panel:var(--panel);--ink:var(--ink);--soft:var(--soft);--faint:var(--faint);
  --line:var(--line);--glow:var(--glow);--deep:var(--deep)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;letter-spacing:-0.012em;overflow-x:hidden}
.wrap{max-width:1280px;margin:0 auto;padding:0 44px}

/* viewport-fit=cover lets the page run under a phone's status bar, which is
   what put the logo hard against the top edge. The nav pays the inset back,
   so the band still reaches the edge but its contents start below the bar. */
/* First thing in the tab order, invisible until it has focus: a keyboard
   user should not have to walk the whole menu on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:13px 20px;
  background:var(--glow);color:var(--on-glow);font-weight:600;
  text-decoration:none;border-radius:0 0 12px 0}
.skip:focus{left:0}
nav{position:relative;z-index:9;padding-top:env(safe-area-inset-top,0px)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:96px}
/* On a wide screen the panel is not a box at all: display:contents hands the
   links and the button straight back to the nav's own flex row, so the desktop
   layout is the one it always was. At phone width it becomes a real panel. */
.navpanel{display:contents}
.burger{display:none}
.logo{display:block;color:var(--ink);text-decoration:none;line-height:0}
.logo{color:var(--ink)}
/* 140x58 is the logo's own 3633:1503, not a rounded guess: the mask is sized
   `contain`, so a box at the wrong ratio letterboxes the mark inside it and
   the wordmark comes out smaller than the box suggests. The nav row is 96px,
   which leaves 19px of air above and below at this height. */
.logo .logomark{display:block;height:58px;width:140px;background:currentColor;
  -webkit-mask:url(logo.961a098a60.svg) no-repeat center/contain;
  mask:url(logo.961a098a60.svg) no-repeat center/contain}
@media (max-width:560px){ .logo .logomark{height:42px;width:102px} }
nav ul{display:flex;gap:36px;list-style:none}
nav a{color:var(--soft);text-decoration:none;font-size:14.5px;font-weight:500}
nav a:hover{color:var(--ink)}
/* holds the Book button's exact width on the home page, where the hero
   already carries one, so the links stay put instead of sliding right */
.navghost{visibility:hidden;pointer-events:none}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--glow);color:var(--on-glow);
  border-radius:100px;padding:13px 25px;font-size:14.5px;font-weight:650;text-decoration:none;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--glow) 50%, transparent),0 10px 40px -8px color-mix(in srgb, var(--glow) 55%, transparent);
  transition:box-shadow .2s,transform .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb, var(--glow) 75%, transparent),0 16px 54px -8px color-mix(in srgb, var(--glow) 80%, transparent)}
.btn.ghost{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--edge)}
.btn.ghost:hover{background:color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- hero ---------- */
/* The hero is its own stacking context so the two decorative layers can sit at
   z-index -1: above the band's background, below everything in the wrap. That
   lets the wrap drop the z-index it used to need, which was the thing isolating
   the clip's screen blend and leaving the clip as a black rectangle. */
.hero{position:relative;overflow:hidden;z-index:0}
.hero::before{content:'';position:absolute;z-index:-1;inset:-10% -10% auto -10%;height:120%;
  background:radial-gradient(760px 540px at 72% 44%, var(--wash-1), transparent 66%),
             radial-gradient(620px 420px at 12% 84%, var(--wash-2), transparent 70%);
  pointer-events:none}
.hero::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(900px 620px at 60% 46%,#000 10%,transparent 78%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  gap:48px;align-items:center;padding-top:62px;padding-bottom:104px}
.tag{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:650;
  letter-spacing:.17em;text-transform:uppercase;color:var(--glow)}
.tag b{width:28px;height:1px;background:var(--glow);display:block;
  box-shadow:0 0 12px color-mix(in srgb, var(--glow) 90%, transparent)}
h1{margin-top:26px;font-size:80px;font-weight:600;line-height:.98;letter-spacing:-0.045em}
h1 span{color:var(--glow);text-shadow:0 0 46px color-mix(in srgb, var(--glow) 55%, transparent)}
.lede{margin-top:26px;font-size:18.5px;line-height:1.62;color:var(--soft);max-width:44ch}
.cta{margin-top:38px;display:flex;gap:13px}

/* ---------- the stage: the plane and the clip share one square box ----------
   The SVG carries a 300-unit viewBox and the video is placed in percentages of
   the same box, so the figure stays inside its plane at every screen width
   without a line of script. */
.scene{position:relative;height:600px;display:grid;place-items:center}
.figbox{position:relative;height:100%;aspect-ratio:1/1;max-width:100%}
.figbox .stage{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.figbox .face{fill:var(--p1);fill-opacity:.10;stroke:var(--p1);stroke-width:2;
              vector-effect:non-scaling-stroke;filter:url(#soft)}
.figbox .cue path{fill:none;stroke:var(--p1);stroke-width:2.2;
                  stroke-linecap:round;opacity:.85}
.figbox .cue polygon{fill:var(--p1);opacity:.85}
/* The clip has a near-white ground rather than a cut-out alpha channel, so
   multiply drops the ground and leaves the mesh. One file, and it works where
   an alpha video would need two. */
.figvid{position:absolute;inset:0;width:100%;height:100%;
        mix-blend-mode:multiply;pointer-events:none}
#stage{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#stage .face{stroke-width:.9;vector-effect:non-scaling-stroke}
#stage .face.lit{stroke-width:2;filter:url(#soft)}
/* the cloud's bands: width and opacity are set per band in figure.js, which is
   the only thing that knows how many there are */
#stage #body path{stroke:var(--bone)}
.hint{display:none}

/* ---------- finding me: photo beside the address ---------- */
.finding{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.finding figure{margin:0}
.finding img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:16px;border:1px solid var(--l-line);
  box-shadow:0 1px 2px rgba(11,19,23,.05),0 14px 36px rgba(11,19,23,.06)}
@media (max-width:860px){ .finding{grid-template-columns:1fr;gap:28px} }

/* ---------- dark bands (Harbour) ----------
   Not a second set of rules: the same token-driven stylesheet with the surface,
   text and accent tokens redefined on one section. Move the class, move the band. */
.figbox-dark .figvid,
:root[data-theme="dark"] .figvid{filter:invert(1);mix-blend-mode:screen}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .figvid{
  filter:invert(1);mix-blend-mode:screen} }
/* The three-plane clip is the other kind: white mesh on pure black with its
   glow already baked into the encode. On a dark band the page's only job is to
   screen it on. No filter anywhere -- a filter on the blended element is what
   made the clip paint its own ground onto the section as a block wherever the
   filter failed to resolve, and this rule sits after the dark-mode one above so
   it wins on source order rather than needing !important. */
.figbox.hoops .figvid{filter:none;mix-blend-mode:screen}
.figbox.hoops .hoop{fill:none;vector-effect:non-scaling-stroke}
.band-dark{--bg:#0f1920;--panel:#142029;--fin:#142029;--foot:#0f1920;--ink:#f3f4f4;--soft:#b2b5b8;--faint:#8e9396;--line:rgba(243,244,244,.15);--edge:rgba(243,244,244,.72);--veil-a:rgba(243,244,244,.055);--veil-b:rgba(243,244,244,.02);--grid:rgba(243,244,244,.05);--wash-1:rgba(88,196,240,.16);--wash-2:rgba(88,196,240,.08);--wash-3:rgba(88,196,240,.10);--l-card:#142029;--l-soft:#0f1920;--l-ink:#f3f4f4;--l-ink2:#dde1e4;--l-body:#b2b5b8;--l-mute:#8e9396;--l-line:#2d3a44;--l-accent:#58c4f0;--p1:#58c4f0;--p2:#7fe0c0;--p3:#f3b263;--p1d:#58c4f0;--p2d:#7fe0c0;--p3d:#f3b263;--glow:#58c4f0;--glow-soft:#a6e4ff;--on-glow:#122730;--deep:#2f9fd0;--bone:#f3f4f4;--star:#f0bd4a;--good:#7fe0c0;--bad:#ff9173;--todo:#ffb05c;color:var(--ink)}
nav.band-dark, header.band-dark{background:var(--bg)}
nav.band-dark{border-bottom:1px solid var(--line)}
/* the filled button carries its own glow in light; on the dark ground it reads
   as a halo, so it goes — but not for the ghost, whose whole border IS a
   box-shadow (equal specificity, so without the :not() this rule wins) */
.band-dark .btn:not(.ghost){box-shadow:none}

/* ---------- photographs inside the cards and the first-hour band ---------- */

.hour-pic{margin:38px 0 0}
.hour-pic img{display:block;width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;
  border-radius:16px;border:1px solid var(--l-line);
  box-shadow:0 1px 2px rgba(11,19,23,.05),0 14px 36px rgba(11,19,23,.05)}
@media (max-width:640px){ .hour-pic img{aspect-ratio:3/2} }

/* ---------- the space: photographs of the practice ---------- */
.space-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:40px}
.space-grid figure{grid-column:span 3;margin:0}
.space-grid .s-wide{grid-column:span 12}
.space-grid picture{display:block}
.space-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:14px;border:1px solid var(--l-line);
  box-shadow:0 1px 2px rgba(11,19,23,.05),0 10px 30px rgba(11,19,23,.05)}
/* the establishing shot runs the full width, cropped to a band */
.space-grid .s-wide img{aspect-ratio:12/5}
.space-grid figcaption{margin-top:11px;font-size:13px;line-height:1.5;color:var(--l-body)}
@media (max-width:900px){
  .space-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .space-grid figure{grid-column:span 1}
  .space-grid .s-wide{grid-column:span 2}
  .space-grid .s-wide img{aspect-ratio:16/9}
}
@media (max-width:560px){
  .space-grid{grid-template-columns:1fr}
  .space-grid figure,.space-grid .s-wide{grid-column:span 1}
  .space-grid .s-wide img{aspect-ratio:4/3}
}

/* ---------- strip ---------- */
.strip{position:relative;z-index:2;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--panel)}
/* two stats, centred as a pair rather than stretched across the page */
.strip .wrap{display:flex;justify-content:center;gap:clamp(48px,9vw,120px);
  padding:34px 44px;text-align:center}
.statlink{text-decoration:none;color:inherit;border-radius:12px;
  transition:opacity .15s ease}
.statlink:hover{opacity:.78}
.statlink:focus-visible{outline:2px solid var(--glow-soft);outline-offset:6px}
.strip div span,.strip .statlink span{display:block;font-size:31px;font-weight:600;letter-spacing:-0.035em}
.strip div i,.strip .statlink i{font-style:normal;display:block;margin-top:5px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

section.planes{padding:100px 0 112px}
.eyebrow{font-size:11.5px;font-weight:650;letter-spacing:.17em;text-transform:uppercase;color:var(--glow)}
h2{margin-top:16px;font-size:46px;font-weight:600;letter-spacing:-0.036em;line-height:1.08}
.sub{margin-top:18px;font-size:17px;color:var(--soft);line-height:1.6;max-width:52ch}
.grid{margin-top:58px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;border-radius:20px;padding:30px 28px 128px;overflow:hidden;
  background:linear-gradient(180deg,var(--veil-a),var(--veil-b));
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s,transform .25s}
.card:hover{transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--glow) 42%, transparent),0 28px 60px -30px color-mix(in srgb, var(--glow) 50%, transparent)}
.card .n{font-size:11.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.card h3{margin-top:16px;font-size:25px;font-weight:600;letter-spacing:-0.028em}
.card p{margin-top:13px;font-size:15px;line-height:1.62;color:var(--soft)}
.card svg{position:absolute;right:-14px;bottom:-16px;width:170px;height:170px;opacity:.55}
.card svg *{fill:none;stroke-width:1.1}
.c1 svg *{stroke:var(--glow)}.c2 svg *{stroke:var(--p2)}.c3 svg *{stroke:var(--p3)}


/* ---------- waiting list form ---------- */
section.light.soft > .wrap.wl{display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(240px,.75fr);
  gap:clamp(28px,4.6vw,64px);align-items:start}
@media (max-width:900px){ section.light.soft > .wrap.wl{grid-template-columns:1fr} }

#wlform{margin-top:36px;display:flex;flex-direction:column;gap:20px}
#wlform .f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){ #wlform .f2{grid-template-columns:1fr} }
#wlform label{display:flex;flex-direction:column;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--l-mute)}
#wlform input[type=text],#wlform input[type=tel],#wlform input[type=email],
#wlform textarea,#wlform select{
  box-sizing:border-box;font:inherit;font-size:16px;font-weight:450;letter-spacing:0;
  text-transform:none;color:var(--l-ink);background:var(--l-card);border:1px solid var(--l-line);
  border-radius:12px;padding:13px 14px;width:100%}
#wlform textarea{resize:vertical;line-height:1.5}
#wlform input:focus-visible,#wlform textarea:focus-visible,#wlform select:focus-visible{
  outline:2px solid var(--l-accent);outline-offset:1px;border-color:var(--l-accent)}
#wlform fieldset{border:0;padding:0;margin:0;box-sizing:border-box}
#wlform legend{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l-mute);padding:0 0 12px}
#wlform legend em{font-style:normal;color:var(--l-accent);margin-left:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;border:1px solid var(--l-line);border-radius:100px;padding:9px 16px;
  font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--l-body);
  background:var(--l-card);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip input:checked + span{background:var(--l-ink);border-color:var(--l-ink);color:var(--l-card)}
.chip input:focus-visible + span{outline:2px solid var(--l-accent);outline-offset:1px}
#wlform label.consent{flex-direction:row;align-items:flex-start;gap:12px;font-size:14px;
  font-weight:450;letter-spacing:0;text-transform:none;color:var(--l-body);line-height:1.5;
  max-width:58ch}
#wlform label.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;
  accent-color:var(--l-ink)}
#wlform button{align-self:flex-start}
#wlform button[disabled]{opacity:.5;cursor:not-allowed}
.btn.dark{background:var(--l-ink);color:var(--l-card);box-shadow:none}
.btn.dark:hover{background:var(--l-ink2)}
.formmsg{font-size:14.5px;font-weight:600;line-height:1.5;max-width:52ch;margin:0}
.formmsg.ok{color:var(--good)}
.formmsg.bad{color:var(--bad)}
.wlside{border-left:2px solid var(--l-line);padding-left:28px;margin-top:36px}
.wlside .hours{color:var(--l-body)}
.wlside .hours strong{color:var(--l-ink)}
.wlside h3{font-size:19px;font-weight:600;letter-spacing:-0.02em;color:var(--l-ink)}
.wlside p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--l-body)}
.wlside .contact strong{font-size:19px;color:var(--l-ink);letter-spacing:-0.01em}
.wlside .small{font-size:13.5px;color:var(--l-mute)}
@media (max-width:900px){ .wlside{border-left:0;border-top:2px solid var(--l-line);
  padding-left:0;padding-top:24px} }

/* ---------- light bands ---------- */
section.light{background:var(--l-card);color:var(--l-ink)}
section.light.soft{background:var(--l-soft)}
section.light .eyebrow{color:var(--l-accent)}
section.light .sub{color:var(--l-body)}
section.light h2{color:var(--l-ink)}
/* the services page has no page head, so its first section heading is the h1;
   it should still read as a section heading, not as a 80px page title */
section.light h1.h2like{margin-top:16px;font-size:clamp(28px,4.2vw,46px);font-weight:600;
  letter-spacing:-0.036em;line-height:1.08;color:var(--l-ink)}

section.light .card{background:var(--l-card);box-shadow:0 1px 2px rgba(11,19,23,.05),
  0 20px 44px -28px rgba(11,19,23,.34);border:1px solid var(--l-line)}
section.light .card:hover{transform:translateY(-4px);
  box-shadow:0 30px 60px -30px rgba(11,19,23,.3)}
section.light .card .n{color:var(--l-mute)}
section.light .card h3{color:var(--l-ink)}
section.light .card p{color:var(--l-body)}
section.light .c1 svg *{stroke:var(--l-accent)}
section.light .c2 svg *{stroke:var(--p2d)}
section.light .c3 svg *{stroke:var(--p3d)}
section.light .card svg{opacity:.3}

/* numbered steps on a light band */
.steps{margin-top:58px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{border-top:2px solid var(--l-ink);padding-top:24px}
.step b{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l-accent)}
.step h3{margin-top:14px;font-size:23px;font-weight:600;letter-spacing:-0.026em}
.step p{margin-top:12px;font-size:15.5px;line-height:1.66;color:var(--l-body)}

/* review band */
section.quote{background:var(--panel);padding:96px 0}
.bigq{font-size:34px;font-weight:500;line-height:1.3;letter-spacing:-0.028em;max-width:24ch}
.bigq span{color:var(--glow)}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.score{display:flex;align-items:baseline;gap:16px}
.score b{font-size:76px;font-weight:600;letter-spacing:-0.05em;line-height:.85}
.score i{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.stars{color:var(--star);font-size:21px;letter-spacing:3px}
.who{margin-top:26px;font-size:13px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

/* finale */
section.finale{position:relative;background:var(--fin);color:var(--ink);
  padding:100px 0 112px;overflow:hidden;border-top:1px solid var(--line)}
section.finale::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 18% 34%, var(--wash-1), transparent 68%)}
section.finale .wrap{position:relative;z-index:1}
section.finale .eye{color:var(--glow)}
section.finale h2{font-size:54px;letter-spacing:-0.04em;line-height:1.02}
section.finale>.wrap>p{margin-top:20px;font-size:18px;line-height:1.6;max-width:50ch;
  color:var(--soft)}
.twoup{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.twoup>div{border-radius:20px;padding:30px 28px 32px;display:flex;
  flex-direction:column;align-items:flex-start;gap:12px;
  background:linear-gradient(180deg,var(--veil-a),var(--veil-b));
  box-shadow:inset 0 0 0 1px var(--line)}
.twoup>div:first-child{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--glow) 34%, transparent)}
.twoup .step{font-size:11.5px;font-weight:700;letter-spacing:.17em;color:var(--faint)}
.twoup h3{font-size:23px;font-weight:600;letter-spacing:-0.026em;color:var(--ink)}
.twoup p{font-size:15.5px;line-height:1.6;color:var(--soft);margin:0;flex:1}
@media (max-width:760px){ .twoup{grid-template-columns:1fr} }


/* ---------- committed dark design: no theme blocks, every colour explicit ---------- */
:root{color-scheme:dark}

/* ---------- side gutter, safe-area aware ---------- */
.wrap{padding-left:max(44px,env(safe-area-inset-left,0px));
      padding-right:max(44px,env(safe-area-inset-right,0px))}
.strip .wrap{padding-left:max(44px,env(safe-area-inset-left,0px));
             padding-right:max(44px,env(safe-area-inset-right,0px))}

h1{font-size:clamp(38px,6.4vw,80px)}
h2{font-size:clamp(28px,4.2vw,46px)}
section.finale h2{font-size:clamp(34px,5vw,54px)}
.bigq{font-size:clamp(23px,3.1vw,34px)}


@media (max-width:860px){
  nav .wrap{height:auto;padding-block:20px 18px}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;margin-right:-10px;padding:0;cursor:pointer;
    background:none;border:0;color:var(--ink)}
  .burger span{display:block;width:22px;height:2px;margin:0 auto;border-radius:2px;
    background:currentColor;transition:transform .22s ease, opacity .18s ease}
  nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.open .burger span:nth-child(2){opacity:0}
  nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .burger:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

  .navpanel{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:6px max(20px,env(safe-area-inset-left,0px)) 20px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s}
  nav.open .navpanel{opacity:1;visibility:visible;transform:none}
  .navpanel ul{flex-direction:column;align-items:stretch;gap:0}
  .navpanel li{border-top:1px solid var(--line)}
  .navpanel li:first-child{border-top:0}
  .navpanel a{display:block;padding:14px 2px;font-size:16px}
  .navpanel .btn{display:block;margin-top:16px;text-align:center}
  .navpanel .navghost{visibility:visible;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
  .burger span,.navpanel{transition:none}
}

@media (max-width:980px){
  .hint{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:12px}
  .scene{height:440px;order:-1}
  .qrow{grid-template-columns:1fr;gap:28px}
  .grid,.steps{grid-template-columns:1fr}
  .strip .wrap{gap:clamp(36px,10vw,80px)}
}
@media (max-width:560px){
  .wrap,.strip .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));
                     padding-right:max(20px,env(safe-area-inset-right,0px))}
  .scene{height:360px}
    .strip .wrap{gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .rig{animation:none!important}
  .pl{transition:none}
}

/* ---------- page header ---------- */
.phead{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phead::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 14% 60%,var(--wash-3),transparent 70%)}
.phead .wrap{position:relative;z-index:1;padding-block:clamp(44px,6vw,80px) clamp(32px,4.4vw,56px)}
.phead .eyebrow{color:var(--glow)}
/* the bare head has no headline, so the lede does the work and needs room */
.phead.bare .lede{font-size:clamp(18px,2.3vw,23px);max-width:46ch;margin-top:18px}
.phead.bare{padding-bottom:clamp(26px,3vw,38px)}
.phead h1{margin-top:16px;font-size:clamp(36px,6.2vw,72px);font-weight:600;
  letter-spacing:-0.045em;line-height:1}
.phead .lede{margin-top:20px;max-width:54ch;font-size:clamp(16px,1.7vw,18.5px);
  color:var(--soft);line-height:1.6}

/* ---------- about ---------- */
section.light .about-grid{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4.6vw,62px);align-items:start}
@media (max-width:900px){ section.light .about-grid{grid-template-columns:1fr} }
.portrait{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,var(--l-line),var(--l-line) 58%,var(--l-soft));display:grid;place-items:center;
  border:1px solid var(--l-line)}
.portrait .tag{position:absolute;top:14px;left:14px;font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;padding:7px 12px;border-radius:100px;
  background:var(--l-ink);color:var(--l-card)}
.portrait svg{width:46%;opacity:.3}
/* the photograph is cut to the same 4:5 the frame is, so cover only guards rounding */
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.creds{margin-top:24px;display:flex;flex-direction:column}
.creds div{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:13px 0;
  border-top:1px solid var(--l-line);align-items:baseline}
.creds div:last-child{border-bottom:1px solid var(--l-line)}
.creds .k{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--l-mute)}
.creds .v{font-size:15px;font-weight:600;color:var(--l-ink);line-height:1.45}
.creds .v a{color:inherit}
/* a qualification often has a second, quieter line: the institution and the year */
.creds .v em{font-style:normal;font-weight:500;font-size:13.5px;color:var(--l-mute)}
.creds .v ul{margin:0;padding:0;list-style:none}
.creds .v li{font-size:14.5px;font-weight:600;line-height:1.4}
.creds .v li + li{margin-top:7px}
.todo{display:inline-block;border:1px dashed var(--todo);color:var(--todo);padding:1px 8px;
  border-radius:100px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.body-copy p{font-size:16.5px;line-height:1.72;color:var(--l-body);max-width:60ch}
.body-copy p + p{margin-top:14px}
.pull{margin-top:26px;border-left:3px solid var(--l-accent);padding:2px 0 2px 20px;
  font-size:clamp(19px,2.3vw,24px);font-weight:600;letter-spacing:-0.025em;line-height:1.3;
  color:var(--l-ink);max-width:34ch}

/* ---------- q&a grid ---------- */
.qa{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.qa > div{border-radius:18px;padding:26px 24px 28px;background:var(--l-card);border:1px solid var(--l-line);
  display:flex;flex-direction:column;gap:9px}
.qa h4{font-size:16.5px;font-weight:600;letter-spacing:-0.018em;color:var(--l-ink);line-height:1.3}
.qa p{font-size:14.8px;line-height:1.62;color:var(--l-body)}
section.quote .qa > div{background:var(--veil-a);border-color:var(--line)}
section.quote .qa h4{color:var(--ink)}
section.quote .qa p{color:var(--soft)}

/* ---------- session cards (policy + fees) ---------- */
/* the compact four-up on the home page: the same session types as the
   Services page, cut down to what someone scrolling needs */
.svc{margin-top:40px;display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.svccard{background:var(--l-card);border:1px solid var(--l-line);border-radius:20px;
  padding:24px 22px 26px;display:flex;flex-direction:column;overflow:hidden}
/* the three in-person sessions carry a photograph; the online one has nothing
   honest to show, so it gets a tinted panel instead of a stock picture of a
   laptop */
.svccard.haspic{padding-top:0}
.svccard figure{margin:0 -22px 22px;aspect-ratio:3/2;background:var(--l-soft);
  flex:none;min-height:0;overflow:hidden}
.svccard figure img{display:block;width:100%;height:100%;object-fit:cover}
.svccard.nopic{background:linear-gradient(170deg,
  color-mix(in srgb,var(--l-accent) 9%,var(--l-card)), var(--l-card) 58%);
  justify-content:center}
.svccard.nopic .svclink{margin-top:20px;padding-top:0}
.svccard .n{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--l-accent)}
.svccard h3{margin:12px 0 0;font-size:19px;font-weight:600;letter-spacing:-0.025em;
  color:var(--l-ink)}
.svccard .dur{margin:7px 0 0;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--l-mute)}
.svccard p{margin:14px 0 0;font-size:14.8px;line-height:1.6;color:var(--l-body)}
.svccard .svclink{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;
  color:var(--l-accent);text-decoration:none}
.svccard .svclink:hover{text-decoration:underline}
@media (max-width:980px){ .svc{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .svc{grid-template-columns:1fr} }

.sessions{margin-top:48px;display:flex;flex-direction:column;gap:18px}
.sess{border-radius:20px;background:var(--l-card);border:1px solid var(--l-line);
  padding:clamp(24px,3.2vw,36px)}
.sesshead{display:flex;align-items:flex-start;gap:18px;padding-bottom:18px;
  border-bottom:1px solid var(--l-line)}
.sesshead .n{font-size:clamp(28px,3.6vw,42px);font-weight:600;letter-spacing:-0.05em;
  line-height:.9;color:var(--l-accent)}
.sesshead h3{font-size:clamp(19px,2.3vw,25px);font-weight:600;letter-spacing:-0.028em;
  line-height:1.1;color:var(--l-ink)}
.sesshead .meta{margin-top:7px;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--l-mute)}
.sess .purpose{margin-top:18px;font-size:16px;color:var(--l-body);line-height:1.65;max-width:70ch}
.sess h4{margin-top:24px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--l-mute)}
.sess ul{margin:10px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px 26px}
.sess li{position:relative;padding:5px 0 5px 24px;font-size:14.8px;line-height:1.5;color:var(--l-body)}
.sess li::before{position:absolute;left:0;top:4px;font-weight:700;font-size:16px}
.sess ul.yes li::before{content:'+';color:var(--good)}
.sess ul.no li::before{content:'–';color:var(--bad)}
.sess ul.no li{color:var(--l-mute)}
.sess .sep{margin-top:12px;font-size:13.5px;color:var(--l-mute);font-style:italic}
.sess .note{margin-top:20px;border-left:3px solid var(--l-accent);padding:2px 0 2px 18px;
  font-size:14.8px;color:var(--l-body);line-height:1.6;max-width:66ch}

/* ---------- footer ---------- */
footer.foot{background:var(--foot);border-top:1px solid var(--line);color:var(--soft)}
footer.foot .wrap{padding-block:46px 40px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px 36px;font-size:14px}
/* auto-fit lays out as many 190px tracks as the row will take -- six, at this
   width -- so three blocks sat bunched in the left half once Pages went. Above
   the phone breakpoint they get a third of the row each instead. */
@media (min-width:861px){
  footer.foot .wrap{grid-template-columns:repeat(3,minmax(0,1fr))} }
footer.foot b{display:block;color:var(--ink);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
footer.foot a{color:var(--soft);text-decoration:none;display:block;padding:3px 0}
footer.foot a:hover{color:var(--glow)}
footer.foot span{display:block;padding:3px 0;line-height:1.5}
footer.foot .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;align-items:center;color:var(--soft)}
footer.foot .pop{border:1px solid var(--line);border-radius:100px;padding:2px 10px;
  font-weight:600;letter-spacing:.05em;color:var(--soft)}
/* Back to top. Fixed, so it crosses light bands and dark ones alike and cannot
   take its colours from the band behind it; the harbour panel colour reads on
   both. It is hidden with visibility, not opacity alone, so it leaves the tab
   order while it is off screen. */
.totop{position:fixed;z-index:20;right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));
  width:46px;height:46px;padding:0;border:0;border-radius:100px;cursor:pointer;
  display:grid;place-items:center;background:#142029;color:#f3f4f4;
  box-shadow:0 0 0 1px rgba(243,244,244,.26),0 14px 34px -12px rgba(5,10,14,.65);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s,transform .22s,visibility .22s,background .18s,color .18s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--p1d);color:#f3f4f4}
.totop:focus-visible{outline:2px solid var(--p1d);outline-offset:3px}
.totop svg{width:19px;height:19px;display:block}
@media (prefers-reduced-motion:reduce){ .totop{transition:none} }

/* the footer's generic `a` rule makes every link a full-width block; these are
   chips in a row, so they take their own display and padding */
footer.foot .social{display:flex;gap:10px;margin:16px 0 0;padding:0}
footer.foot .social a{display:grid;place-items:center;width:38px;height:38px;
  padding:0;border-radius:100px;color:var(--soft);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .18s,box-shadow .18s,background .18s}
footer.foot .social a:hover{color:var(--ink);background:var(--veil-a);
  box-shadow:inset 0 0 0 1px var(--edge)}
footer.foot .social a:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
footer.foot .social svg{display:block;width:18px;height:18px}

footer.foot .flogo{display:block;height:45px;width:109px;opacity:.85;margin-bottom:12px;
  background:var(--ink);
  -webkit-mask:url(logo.961a098a60.svg) no-repeat center/contain;
  mask:url(logo.961a098a60.svg) no-repeat center/contain}
.quote .eyebrow{color:var(--glow)}
.quote h2{color:var(--ink)}
.quote .qa > div{background:var(--veil-a);border-color:var(--line)}
.quote .qa h4{color:var(--ink)}
.quote .qa p{color:var(--soft)}

/* ---------- reviews: the rating here, the reviews on Google ---------- */
/* The Google links move once every four and a half seconds, then wait. A
   constant jiggle nags; one nudge with a long pause catches the eye and then
   lets go. In the banner five stars light up in turn and the arrow follows, so
   the link says "reviews" before the words are read. Both stop on hover (you
   have found it by then) and for anyone whose system asks for less motion. */
@keyframes gostar{
  0%,55%,100%{color:var(--faint);transform:translateY(0)}
  62%{color:var(--star);transform:translateY(-3px)}
  75%{color:var(--star);transform:translateY(0)}
}
.goline{letter-spacing:.1em}
.gostar{display:inline-block;font-weight:inherit;color:var(--faint);
  animation:gostar 4.5s ease-in-out infinite}
.gostar:nth-of-type(2){animation-delay:.07s}
.gostar:nth-of-type(3){animation-delay:.14s}
.gostar:nth-of-type(4){animation-delay:.21s}
.gostar:nth-of-type(5){animation-delay:.28s}
a:hover .gostar{animation:none;color:var(--star)}

@keyframes goarrow{
  0%,68%,100%{transform:translateX(0)}
  76%{transform:translateX(6px)}
  84%{transform:translateX(0)}
  90%{transform:translateX(3px)}
  96%{transform:translateX(0)}
}
.goarrow{display:inline-block;font-weight:inherit;
  animation:goarrow 4.5s ease-in-out infinite}
a:hover .goarrow{animation:none;transform:translateX(6px);transition:transform .18s ease}
@media (prefers-reduced-motion:reduce){
  .goarrow,.gostar{animation:none}
  .gostar{color:var(--star)}
  a:hover .goarrow{transition:none}
}
.revmore{margin-top:26px;font-size:14.5px}
.revmore a{color:var(--glow-soft);text-decoration:none;font-weight:600}
.revmore a:hover{text-decoration:underline}

/* ---------- blog ---------- */
.postgrid{margin-top:8px;display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
/* Two on the home page are twice as wide as three on the index, so a 3:2
   picture becomes enormous. Flatten it and let the card stay card-sized. */
.postgrid.two{margin-top:38px;grid-template-columns:repeat(2,1fr)}
.postgrid.two .postcard figure{aspect-ratio:21/9}
.postcard{background:var(--l-card);border:1px solid var(--l-line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column}
.postcard figure{margin:0;aspect-ratio:3/2;background:var(--l-soft);
  flex:none;min-height:0;overflow:hidden}
.postcard figure img{display:block;width:100%;height:100%;object-fit:cover}
.pcbody{padding:22px 22px 26px}
.pcmeta{margin:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l-mute)}
.postcard h3{margin:11px 0 0;font-size:20px;line-height:1.25;font-weight:600;
  letter-spacing:-0.025em}
.postcard h3 a{color:var(--l-ink);text-decoration:none}
.postcard h3 a:hover{color:var(--l-accent)}
.postcard p{margin:11px 0 0;font-size:14.8px;line-height:1.6;color:var(--l-body)}
@media (max-width:980px){ .postgrid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .postgrid,.postgrid.two{grid-template-columns:1fr} }

/* a post reads one column wide, whatever the window does */
.post .wrap{max-width:760px}
.post h1{margin:14px 0 0;font-size:clamp(30px,5vw,46px);line-height:1.08;font-weight:700;
  letter-spacing:-0.035em;color:var(--l-ink)}
.posthero{margin:34px 0 0;border-radius:20px;overflow:hidden;background:var(--l-soft)}
.posthero img{display:block;width:100%;height:auto}
.postbody{margin-top:34px;font-size:17.5px;line-height:1.72;color:var(--l-body)}
.postbody > * + *{margin-top:22px}
.postbody h2{margin-top:44px;font-size:clamp(21px,2.6vw,27px);line-height:1.25;font-weight:600;
  letter-spacing:-0.025em;color:var(--l-ink)}
.postbody h3{margin-top:36px;font-size:19px;font-weight:600;color:var(--l-ink)}
.postbody a{color:var(--l-accent)}
.postbody strong{color:var(--l-ink);font-weight:650}
.postbody ul,.postbody ol{padding-left:22px;display:grid;gap:9px}
.postbody li{line-height:1.62}
.postbody blockquote{margin:30px 0;padding:2px 0 2px 22px;border-left:3px solid var(--l-accent)}
.postbody blockquote p{margin:0;font-size:19px;line-height:1.55;color:var(--l-ink);
  letter-spacing:-0.015em}
.postbody code{font-size:.92em;background:var(--l-soft);border:1px solid var(--l-line);
  border-radius:5px;padding:1px 5px}
.postbody hr{border:0;border-top:1px solid var(--l-line);margin:36px 0}
.postback{margin-top:46px;padding-top:24px;border-top:1px solid var(--l-line);font-size:14.5px}
.postback a{color:var(--l-accent);text-decoration:none;font-weight:600}

/* ---------- fees notice ---------- */
.notice{margin-top:30px;border:1px solid var(--l-line);border-radius:18px;
  background:var(--l-card);padding:26px 26px 28px;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px;max-width:62ch}
.notice b{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--l-accent)}
.notice p{font-size:15.5px;line-height:1.65;color:var(--l-body);margin:0}

/* ---------- how I work: two pictures, few words ---------- */
#method{--ill-ink:var(--l-ink);--ill-mute:var(--l-mute);--ill-bg:var(--l-card);
  --ill-body:var(--l-body);
  --ill-accent:var(--l-accent);--ill-sag:var(--p1d);--ill-fro:var(--p2d);--ill-tra:var(--p3d)}
.layer{margin-top:40px;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2vw,26px);
  align-items:center}
@media (max-width:860px){ .layer{grid-template-columns:1fr;gap:10px} }
.layer figure{margin:0;border:1px solid var(--l-line);border-radius:20px;overflow:hidden;
  background:var(--l-card)}
.layer .known{background:var(--l-soft)}
.layer .added{box-shadow:0 0 0 1px var(--l-accent)}
/* the photographs run to the card edge; the card's own radius clips them */
.layer .planepic{display:block;width:100%;height:auto;aspect-ratio:1400/880;
  object-fit:cover;background:var(--l-soft)}
/* the motion arrows are drawn over the photograph rather than into it, so they
   stay sharp at any size and take their colours from the palette */
.layer .planepic-wrap{position:relative}
.layer .planepic-wrap .ill{position:absolute;inset:0;pointer-events:none}
.layer .planepic-wrap .ill svg{display:block;width:100%;height:100%}
.layer figcaption{padding:20px 24px 26px;font-size:15.5px;line-height:1.6;color:var(--l-body)}
.layer figcaption b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--l-mute);margin-bottom:9px}
.layer .added figcaption b{color:var(--l-accent)}
.layer .arrow{color:var(--l-mute);width:60px}
.layer .arrow svg{display:block;width:100%}
@media (max-width:860px){ .layer .arrow{width:34px;transform:rotate(90deg);margin:2px auto} }

/* the chain diagram and its numbered links */
.chainrow{margin-top:30px;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(28px,4vw,60px);align-items:center}
.chainrow .ill svg{display:block;width:100%;height:auto;max-height:340px;margin:0 auto}
.chain-copy p{font-size:16px;line-height:1.66;color:var(--l-body)}
.chain-copy p + p{margin-top:14px}
.chain-copy .chain-close{margin-top:18px;padding-top:18px;border-top:1px solid var(--l-line);
  color:var(--l-ink);font-weight:500}
.links{list-style:none;margin:22px 0 20px;padding:0;display:grid;gap:11px}
.links li{display:flex;gap:12px;align-items:flex-start}
.links li p{margin:0;font-size:15px;line-height:1.55;color:var(--l-body)}
.links span{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--l-accent);
  color:var(--on-glow);font-size:12px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:1px}
.links b{color:var(--l-ink);font-weight:650;margin-right:7px}
@media (max-width:860px){ .chainrow{grid-template-columns:1fr}
  .chainrow .ill svg{max-height:270px} }

/* worked example */
.worked{margin-top:clamp(44px,5vw,64px);border-top:1px solid var(--l-line);padding-top:34px}
.worked-lead{font-size:clamp(18px,2.1vw,22px);letter-spacing:-0.02em;color:var(--l-body)}
.worked-lead b{color:var(--l-ink);font-weight:650}
.worked-grid{margin-top:24px;display:grid;grid-template-columns:.8fr 1.5fr;
  gap:clamp(14px,2vw,22px);align-items:stretch}
@media (max-width:860px){ .worked-grid{grid-template-columns:1fr} }
.worked-grid figure{margin:0;border:1px solid var(--l-line);border-radius:20px;
  background:var(--l-soft);overflow:hidden;display:flex;flex-direction:column}
.worked-grid figure.added{background:var(--l-card);box-shadow:0 0 0 1px var(--l-accent)}
.worked-grid .ill{padding:16px 16px 0}
.worked-grid .ill svg{display:block;width:100%;height:auto;max-height:190px}
.worked-grid figcaption{padding:8px 24px 26px;font-size:15.5px;line-height:1.62;
  color:var(--l-body);margin-top:auto}
.worked-grid figcaption b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--l-mute);margin-bottom:9px}
.worked-grid .added figcaption b{color:var(--l-accent)}