/* Brand fonts as cached woff2 files, preloaded from each page head. Paths are relative to assets/site.css. */
@font-face{font-family:'Fraunces';src:url(brand/fonts/fraunces.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url(brand/fonts/public-sans.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(brand/fonts/inter-tight.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Layout concept: navy "instrument stage" bands for depth and motion, cream "reading rooms" for content.
   Soft geometry: every box has rounded corners from the four radius tokens below (see "Rounded corners").
   Full-width bands stay square. Gold appears once per view, as a spark. */
:root{
  --navy:#0B1F3F;
  --navy-2:#102849;
  --navy-3:#1A3560;
  --cream:#F6F1E7;
  --bone:#EFE5CD;
  --gold:#C8A45C;
  --ink-2:#3A4962;
  --ink-3:#5F6B80;
  --bone-2:rgba(239,229,205,.74);
  --bone-3:rgba(239,229,205,.5);
  --rule:#DDD3BE;
  --rule-dark:rgba(239,229,205,.14);
  --f-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --f-label:"Public Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --gutter:clamp(16px,4.5vw,64px);
  --max:1240px;
  --nav-h:64px;
  --nav-clear:calc(var(--nav-h) + 20px); /* the floating pill plus its gaps: sticky bars stick below this */
  --r-xs:8px;    /* small parts inside a box: calendar days, grid cells, play badges */
  --r-sm:12px;   /* controls: buttons, inputs, selects, toggles */
  --r:18px;      /* cards and panels */
  --r-lg:24px;   /* large feature panels and media */
  --r-pill:999px;/* chips and filter pills */
  color-scheme:light;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease-out)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html{scrollbar-color:var(--navy-3) var(--cream)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--navy-3);border:2px solid var(--cream);border-radius:var(--r-pill)}

h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--f-label);font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.55;max-width:58ch}
.measure{max-width:65ch}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{background:var(--navy);color:var(--cream);position:relative;isolation:isolate}
.stage .lead,.stage p{color:var(--bone-2)}
.stage.grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rule-dark) 1px,transparent 1px),linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.gold{color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:var(--f-body);font-size:15px;letter-spacing:.005em;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease-out)}
.btn:hover svg.arrow{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--bone)}
.btn-navy{background:var(--navy);color:var(--cream)}
.btn-navy:hover{background:var(--navy-3)}
.btn-line{border-color:var(--rule);color:var(--navy);background:transparent}
.btn-line:hover{border-color:var(--navy)}
.stage .btn-line{border-color:var(--rule-dark);color:var(--cream)}
.stage .btn-line:hover{border-color:var(--bone)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* booking button (03/11/2026): one look for every booking link. On hover or keyboard focus a thin underline draws in
   under the label from the left, the button lifts 2px onto a deeper shadow, and an arrow nudges right. Only transform
   and opacity move: the deeper shadow is a pseudo-element that fades in. Reduced motion: nothing moves, the underline
   just appears. Gold underline on navy and light buttons; navy on gold buttons, where gold would vanish. */
.btn-book{--bk-inset:20px;position:relative;isolation:isolate;box-shadow:0 8px 18px -14px rgba(11,31,63,.55);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .3s var(--ease-out)}
.btn-book::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:0 16px 28px -14px rgba(11,31,63,.6);opacity:0;transition:opacity .3s var(--ease-out)}
.btn-book::after{content:"";position:absolute;left:var(--bk-inset);right:var(--bk-inset);bottom:11px;height:1.5px;
  border-radius:var(--r-pill);background:var(--gold);pointer-events:none;transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease-out)}
.btn-gold.btn-book::after{background:var(--navy)}
.btn-book:focus-visible{transform:translateY(-2px)}
.btn-book:focus-visible::before{opacity:1}
.btn-book:focus-visible::after{transform:scaleX(1)}
.btn-book:focus-visible svg.arrow{transform:translateX(3px)}
@media (hover:hover){
  .btn-book:hover{transform:translateY(-2px)}
  .btn-book:hover::before{opacity:1}
  .btn-book:hover::after{transform:scaleX(1)}
}
.btn-book:active{transform:translateY(0) scale(.97)}
@media (prefers-reduced-motion:reduce){
  .btn-book,.btn-book:hover,.btn-book:focus-visible,.btn-book:active{transform:none}
  .btn-book svg.arrow,.btn-book:hover svg.arrow,.btn-book:focus-visible svg.arrow{transform:none}
  .btn-book::after,.btn-book:hover::after,.btn-book:focus-visible::after{transform:none}
  .btn-book::after{opacity:0}
  .btn-book:focus-visible::after{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (hover:hover){.btn-book:hover::after{opacity:1}}
.link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s ease,gap .2s var(--ease-out)}
.link:hover{gap:12px}
.link svg{width:14px;height:14px}

/* nav: a floating cream pill (v3, 28/10/2026). It overlaps the beige page hero, which reserves room for it. */
.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:40;width:calc(100% - 2 * var(--gutter));max-width:var(--max);margin:12px auto 0;border-radius:var(--r-pill);background:rgba(246,241,231,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 0 0 1px rgba(11,31,63,.08),0 12px 32px -20px rgba(11,31,63,.45);color:var(--navy)}
#nav:has(+ main > :is(.ph,.h-hero,.lhead):first-child){margin-bottom:calc(-1 * (var(--nav-h) + 12px))}
#nav + main > :is(.ph,.h-hero,.lhead):first-child{border-top:calc(var(--nav-h) + 12px) solid transparent}
.nav .wrap{height:var(--nav-h);max-width:none;padding-inline:20px 8px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone)}
.nav .brand{color:var(--navy)}
.brand svg{width:34px;height:34px}
.nav .brand svg{width:30px;height:30px}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-word b{font-family:var(--f-display);font-weight:400;font-size:23px;letter-spacing:-.01em}
.brand-word span{font-family:var(--f-label);font-weight:500;font-size:7.6px;letter-spacing:.36em;color:var(--gold);margin-top:6px}
.nav .brand-word span{color:var(--ink-3)}
.nav-links{display:none;align-items:center;gap:2px}
.nav-links a:not(.btn){text-decoration:none;font-size:14.5px;color:var(--ink-2);padding:8px 13px;border-radius:var(--r-pill);transition:background-color .25s ease,color .25s ease}
.nav-links a:not(.btn):hover{background:rgba(11,31,63,.06);color:var(--navy)}
.nav-links a[aria-current="page"]{color:var(--navy);background:rgba(200,164,92,.18)}
.nav .btn{min-height:46px;padding:0 20px;font-size:14.5px;margin-left:10px;border-radius:var(--r-pill)}
.menu-btn{display:inline-flex;background:none;border:0;border-radius:50%;width:46px;height:46px;cursor:pointer;color:inherit;align-items:center;justify-content:center}
.nav .menu-btn:hover{background:rgba(11,31,63,.06)}
.menu-btn svg{width:18px;height:18px}
.nav .progress{display:none!important}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform-origin:left;transform:scaleX(0);display:none}
@supports (animation-timeline: scroll()){.progress{display:block;animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
/* the menu sheet is static HTML (D-44): hidden until opened by :target without JavaScript, or by .open with it */
.sheet{position:fixed;inset:0;z-index:60;background:var(--navy);color:var(--cream);padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 24px);display:none;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.sheet:target,.sheet.open{display:flex}
.sheet .menu-btn{display:inline-flex;color:var(--bone)}
.sheet-top{display:flex;justify-content:space-between;align-items:center;height:48px}
.sheet nav{display:flex;flex-direction:column;margin-top:36px}
.sheet nav a{font-family:var(--f-display);font-size:34px;letter-spacing:-.02em;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule-dark);color:var(--bone)}
.sheet nav a[aria-current="page"]{color:var(--gold)}
.sheet .btn{margin-top:auto}
/* nav breakpoint (03/11/2026): with two links and one button the full nav fits from 861px, the same width at which the
   phone booking bar stops, so booking is one tap away at every width. Phones see the menu button. */
@media (min-width:861px){.nav-links{display:flex}.nav .menu-btn{display:none}}

/* footer (v4, 03/11/2026): small, calm and centred. Logo, three links, then the business details the law requires
   (SI 2015/17 reg 25; E-Commerce Regulations 2002 reg 6) as real HTML in small type. ink-2, not ink-3: ink-3 on bone is
   4.3:1 and fails AA for small text. Every link has a 44px tap height (WCAG 2.5.5). */
.foot{position:relative;background:var(--bone);text-align:center;padding:clamp(44px,6vw,72px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + clamp(36px,5vw,56px))}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold)}
.foot-inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,20px)}
.foot .brand{color:var(--navy);min-height:44px;text-align:left}
.foot .brand svg{width:30px;height:30px}
.foot .brand-word span{color:var(--ink-3)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center}
.foot-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:14.5px;color:var(--ink-2);text-decoration:none;transition:color .2s ease}
.foot-links a:hover{color:var(--navy);text-decoration:underline}
.foot-links a+a::before{content:"·";content:"·" / "";position:absolute;left:0;transform:translateX(-50%);color:var(--ink-3)}
.foot-legal{display:flex;flex-direction:column;gap:2px;max-width:70ch;font-size:12px;line-height:1.7;color:var(--ink-2)}
.foot-legal span{white-space:nowrap}
.foot-legal a{display:inline-block;line-height:20px;padding-block:12px;margin-block:-12px;color:var(--navy);text-decoration:underline;text-decoration-color:var(--rule)}
.foot-legal a:hover{text-decoration-color:currentColor}
.copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-row span{user-select:all;color:var(--cream)}
.copy-btn{min-height:44px;background:none;border:1px solid var(--rule-dark);border-radius:var(--r-pill);color:var(--bone-2);font-size:12.5px;padding:5px 12px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.copy-btn:hover{border-color:var(--bone);color:var(--cream)}
.light .copy-row span{color:var(--navy)}
.light .copy-btn{border-color:var(--rule);color:var(--ink-2)}
.light .copy-btn:hover{border-color:var(--navy);color:var(--navy)}

/* short page heroes: every page opens on a coloured band (bone, navy or white), never bare */
.ph{padding-block:clamp(52px,6.5vw,88px) clamp(40px,5vw,64px);position:relative;isolation:isolate}
.ph h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.04em;max-width:17ch}
.ph .lead{margin-top:18px;color:var(--ink-2)}
.ph.t-bone{background:var(--bone)}
.ph.t-bone::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold)}
.ph.t-white{background:#FCFAF5;border-bottom:1px solid var(--rule)}
.ph.stage .lead{color:var(--bone-2)}
.ph .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.ph .chip{white-space:normal;line-height:1.5}
.t-bone .chip{border-color:#D3C5A4}

/* page header (inner pages) */
.phead{padding-block:clamp(64px,9vw,120px) clamp(48px,6vw,80px)}
.phead h1{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.035em;max-width:15ch}
.phead .lead{margin-top:24px}
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-words .w>span{display:inline-block}

/* shared bits */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-label);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--rule);color:var(--ink-2);border-radius:var(--r-pill);white-space:nowrap}
.stage .chip{border-color:var(--rule-dark);color:var(--bone-2)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}
.chip.hollow i{background:transparent;border:1px solid var(--gold)}
.note{font-size:13px;color:var(--ink-3)}
.stage .note{color:var(--bone-3)}
.rule-line{height:1px;background:var(--rule);border:0;margin:0}
.section{padding-block:clamp(72px,10vw,136px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .progress{display:none}
}

/* designed video thumbnails (shared by video pages) */
.thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r);background:var(--navy);overflow:hidden;display:flex;align-items:flex-end;padding:7% 7% 6%;max-width:100%;color:var(--cream);isolation:isolate}
.thumb::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;background-image:linear-gradient(var(--rule-dark) 1px,transparent 1px),linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px);background-size:28px 28px}
.thumb.tall{aspect-ratio:9/16;align-items:flex-end}
.t-art{position:absolute;right:6%;top:12%;width:44%;transition:transform .6s var(--ease-out)}
.thumb.tall .t-art{width:72%;right:14%;top:14%}
.t-text{position:relative;font-family:var(--f-display);font-size:clamp(18px,2.1vw,26px);line-height:1.04;letter-spacing:-.025em;max-width:62%}
.thumb.tall .t-text{max-width:none;font-size:clamp(17px,1.7vw,21px)}
.t-text em{font-style:normal;color:var(--gold)}
.t-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:var(--navy)}
.t-play{z-index:3;position:absolute;left:7%;top:9%;width:34px;height:34px;border:1px solid var(--rule-dark);border-radius:var(--r-pill);display:grid;place-items:center;color:var(--cream);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.t-play svg{width:12px;height:12px}
a:hover .t-art,a:focus-visible .t-art{transform:translate(-3%,-3%) scale(1.04)}
a:hover .t-play,a:focus-visible .t-play{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* learning pages (shared) */
.bar{height:6px;background:var(--rule);position:relative;overflow:hidden;border-radius:var(--r-pill)}
.bar i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--navy);transition:width .6s var(--ease-out)}
.stage .bar{background:var(--rule-dark)}
.stage .bar i{background:var(--gold)}
.ltype{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.ltype svg{width:15px;height:15px}
.tick{width:22px;height:22px;border:1px solid var(--rule);border-radius:50%;display:grid;place-items:center;flex:none;color:var(--cream);transition:background-color .3s ease,border-color .3s ease}
.tick svg{width:12px;height:12px;opacity:0;transition:opacity .2s ease}
.is-done .tick{background:var(--navy);border-color:var(--navy)}
.is-done .tick svg{opacity:1}
.t-img~.t-play{opacity:0;transition:opacity .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease}
a:hover .t-img~.t-play,a:focus-visible .t-img~.t-play,.big .t-img~.t-play{opacity:1;background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* service motifs: each loops quietly and never stops, hover included. Resting state = the finished picture. */
.motif{width:64px;height:64px;display:block;flex:none}
.motif svg{width:100%;height:100%;overflow:visible}
.motif .ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.motif .ln.thin{stroke-width:1.6}
.motif .faint{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.28}
.motif .dot{fill:currentColor}
.motif .gd{fill:var(--gold)}
.motif .gs{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round}
/* time: the hand winds back and a gold arc of reclaimed hours grows and settles */
.m-time .hand{transform-origin:32px 32px;animation:mt-hand 9s linear infinite}
.m-time .arc{stroke-dasharray:151;stroke-dashoffset:61;animation:mt-arc 9s var(--ease-in-out) infinite}
@keyframes mt-hand{to{transform:rotate(-360deg)}}
@keyframes mt-arc{0%{stroke-dashoffset:151}55%{stroke-dashoffset:51}100%{stroke-dashoffset:151}}
/* connect: circle one, two, three fill in turn and wire to the hub, then the hub turns gold */
.m-con .pt{fill:currentColor;stroke:currentColor;stroke-width:1.6}
.m-con .ln{stroke-dasharray:30;stroke-dashoffset:0}
.m-con .hub{fill:var(--gold);stroke:var(--gold);stroke-width:2}
.m-con .d1{animation:mc-d1 6s ease infinite}.m-con .d2{animation:mc-d2 6s ease infinite}.m-con .d3{animation:mc-d3 6s ease infinite}
.m-con .l1{animation:mc-l1 6s ease infinite}.m-con .l2{animation:mc-l2 6s ease infinite}.m-con .l3{animation:mc-l3 6s ease infinite}
.m-con .hub{animation:mc-hub 6s ease infinite}
@keyframes mc-d1{0%,4%{fill:transparent}10%,86%{fill:currentColor}94%,100%{fill:transparent}}
@keyframes mc-d2{0%,20%{fill:transparent}26%,86%{fill:currentColor}94%,100%{fill:transparent}}
@keyframes mc-d3{0%,36%{fill:transparent}42%,86%{fill:currentColor}94%,100%{fill:transparent}}
@keyframes mc-l1{0%,10%{stroke-dashoffset:30}18%,86%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:30}}
@keyframes mc-l2{0%,26%{stroke-dashoffset:30}34%,86%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:30}}
@keyframes mc-l3{0%,42%{stroke-dashoffset:30}50%,86%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:30}}
@keyframes mc-hub{0%,52%{fill:transparent;stroke:currentColor}60%,86%{fill:var(--gold);stroke:var(--gold)}94%,100%{fill:transparent;stroke:currentColor}}
/* visibility: bars rise and fall like live figures, the last one gold */
.m-vis rect{fill:currentColor;transform-box:fill-box;transform-origin:bottom}
.m-vis rect.gd{fill:var(--gold)}
.m-vis .b1{transform:scaleY(.45);animation:mv-a 2.8s ease-in-out infinite alternate}
.m-vis .b2{transform:scaleY(.7);animation:mv-b 3.4s ease-in-out infinite alternate -.6s}
.m-vis .b3{transform:scaleY(.55);animation:mv-c 2.4s ease-in-out infinite alternate -1.1s}
.m-vis .b4{transform:scaleY(1);animation:mv-d 3.1s ease-in-out infinite alternate -.3s}
@keyframes mv-a{0%{transform:scaleY(.3)}40%{transform:scaleY(.62)}70%{transform:scaleY(.42)}100%{transform:scaleY(.55)}}
@keyframes mv-b{0%{transform:scaleY(.5)}35%{transform:scaleY(.86)}65%{transform:scaleY(.62)}100%{transform:scaleY(.78)}}
@keyframes mv-c{0%{transform:scaleY(.66)}45%{transform:scaleY(.38)}100%{transform:scaleY(.72)}}
@keyframes mv-d{0%{transform:scaleY(.7)}50%{transform:scaleY(1)}100%{transform:scaleY(.84)}}
/* read: a scan line does the first read; one line is flagged for a person */
.m-read .scan{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:0;animation:mr-scan 3.6s var(--ease-in-out) infinite}
.m-read .flag{fill:var(--gold);opacity:.9;animation:mr-flag 3.6s ease infinite}
@keyframes mr-scan{0%{transform:translateY(0);opacity:0}8%{opacity:.9}80%{transform:translateY(42px);opacity:.9}90%,100%{transform:translateY(42px);opacity:0}}
@keyframes mr-flag{0%,40%{opacity:0}48%,88%{opacity:.9}100%{opacity:0}}
/* fit: a gold piece turns and slots into the one gap in the frame */
.m-fit .cell{fill:none;stroke:currentColor;stroke-width:1.8;opacity:.85}
.m-fit .slot{fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:3 3;opacity:.45}
.m-fit .piece{fill:none;stroke:var(--gold);stroke-width:2.6;transform-box:fill-box;transform-origin:center;animation:mf-piece 4.4s var(--ease-in-out) infinite}
@keyframes mf-piece{0%{transform:translate(14px,-30px) rotate(-30deg);opacity:0}12%{opacity:1}40%,82%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@media (prefers-reduced-motion:reduce){.motif *{animation:none!important}.m-read .scan{opacity:0}}

/* Rounded corners, site-wide (decided 11/10/2026: square corners read as hard and cold; rounded reads as
   modern and approachable). One home for every radius. Full-width bands (heroes, stages, footer) and edge-to-edge columns (the lesson sidebar) stay square.
   Oracle: tools/boxes.py lists any visible box whose corner radius is under 6px; it should print nothing. */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:var(--r-sm)}
.case,.slide,.ccard,.sim,.flow,.tracker,.slot,.q,.cert,.side,.lessons,.clock,.player,.dv,.card{border-radius:var(--r)}
.chero{border-radius:var(--r-lg)}
.day,.cell{border-radius:var(--r-xs)}
.day{overflow:hidden}
.log li,.opt,.flowline span,.testnote,.cempty,.awaiting,.private{border-radius:var(--r-sm)}
.story,.add{border-radius:var(--r)}
.index-list .go,.plus,.node .dot,.cert .seal{border-radius:50%}
.slide,.case,.ccard,.sim,.flow,.tracker,.player,.chero,.cert{overflow:hidden}

/* prose: long-form text such as the privacy notice */
.prose{max-width:68ch;padding-block:clamp(40px,6vw,80px)}
.prose h2{font-size:clamp(24px,2.4vw,30px);margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin:24px 0 8px}
.prose p,.prose li{font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:22px}
.prose a{color:var(--navy)}

/* sticky booking bar, phones only (SPEC "Phone rules"): clears the home bar; site.js decides when it shows */
.bookbar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:45;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:var(--r-pill);background:var(--navy);color:var(--cream);text-decoration:none;font-size:16px;box-shadow:0 10px 28px -12px rgba(11,31,63,.6);transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
.bookbar.show{transform:none;opacity:1;pointer-events:auto}
.bookbar svg{width:16px;height:16px;flex:none}
@media (min-width:861px){.bookbar{display:none}}
@media (prefers-reduced-motion:reduce){.bookbar{transition:none}}