/* ==========================================================================
   Thrive at Work: inner-page system (pages.css)
   Loaded after /redesign.css on every page except the homepage. redesign.css owns the
   tokens, fonts, type primitives (.label .display .lede), buttons (.pill .tlink .bullet),
   header, menu overlay, footer, reveals (.rv, data-split), the FAQ accordion, .pt-list
   rows and .idx link lists. Nothing here redefines a token value.
   Class names the page scripts query (#wkGrid .wk-card .wk-chip #wkEmpty, the booking
   wizard's .wz-* .f-* .size-chip .spon-card .btn, the /blog cards .wk-card.gd-card) are
   styled as they are: that markup is frozen, so the look comes from here.
   ========================================================================== */

/* ---------- Roles and legacy names ---------- */
:root{
  /* role colours that flip on dark chapters (set again under .ch--night / .ch--ink) */
  --fg2:var(--ink-2);
  --rule:var(--line);
  /* inner-page scale: one step between display and title for chapter headings */
  --fs-h2:clamp(2.2rem,4.4vw,4.6rem);
  --sec-in:clamp(88px,9vw,152px);
  /* title-size serif: Instrument Serif's hyphen sits wide in running text, so it borrows
     Outfit's (the 'Serif Hyphen' face from redesign.css, as the footer does) */
  --serif-t:'Serif Hyphen',var(--serif);
  /* Old style.css names. The booking form (byte-identical on 12 pages) and the cards the
     /blog and /events scripts build carry inline styles that still use them. */
  --ink-soft:var(--ink-2);
  --ink-faint:var(--ink-2);
  --brass:var(--t-coral);
  --brass-deep:var(--t-coral-sm);
  --forest:var(--night);
  --forest-2:var(--ink);
  --cream:var(--paper);
  --cream-2:var(--stone);
  --surface:var(--paper);
  --line-soft:var(--line);
}
main{display:block}

/* ---------- Headings and copy ---------- */
.h2{font:400 var(--fs-h2)/1 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.h3{font:400 var(--fs-title)/1.1 var(--serif-t);letter-spacing:-.01em;text-wrap:balance}
.copy{color:var(--fg2);max-width:36em;text-wrap:pretty}
.copy>*+*{margin-top:1em}
.copy b,.copy strong{color:var(--fg1,var(--ink));font-weight:600}
.note{max-width:46em;margin-inline:auto;text-align:center;font-size:var(--fs-small);line-height:1.65;color:var(--fg2);text-wrap:pretty}
.note a,.copy a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .3s}
.note a:hover,.copy a:hover{color:var(--t-coral-sm)}
/* fine print, e.g. a representative's authorisation line: readable floor, never smaller */
.fine{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);font-size:var(--fs-label);line-height:1.7;color:var(--fg2);max-width:46em}

/* ---------- Header variant: /team-bonding-activities (Google Ads landing page) ----------
   Cut to the logo and one button on purpose: no Menu button, no overlay. */
.hd--lp .hd-brand{grid-column:2}
.hd--lp .hd-cta{grid-column:3}

/* ---------- Chapters (sections on alternating grounds) ----------
   Every chapter also carries data-tone="<ground>" so the header follows it. */
.ch{position:relative;padding:var(--sec-in) 0;background:var(--ground,var(--stone))}
.ch--stone{--ground:var(--stone)}
.ch--paper{--ground:var(--paper)}
.ch--night,.ch--ink{color:var(--paper);--fg1:var(--paper);--fg2:var(--paper-2);--rule:var(--line-d)}
.ch--night{--ground:var(--night)}
.ch--ink{--ground:var(--ink)}
.ch--night .label,.ch--ink .label,.ch--night .lede,.ch--ink .lede{color:var(--paper-2)}
.ch--night :is(.h2,.display,.h3) em,.ch--ink :is(.h2,.display,.h3) em{color:var(--amber)}
.ch--night .pill,.ch--ink .pill{background:var(--paper);color:var(--ink)}
.ch--night .pill::before,.ch--ink .pill::before{background:var(--amber)}
.ch--night .pill:focus-visible,.ch--ink .pill:focus-visible{outline-color:var(--paper)}
.ch--flush{padding-top:0}
.ch--tight{padding:clamp(56px,6vw,96px) 0}

/* chapter head: label, heading, optional lede on the right (the homepage's sec-head grid) */
.ch-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:26px;margin-bottom:clamp(48px,6vw,96px)}
.ch-head>.label{grid-column:1/-1}
.ch-head>:is(.h2,.display,.h3){grid-column:1/11}
.ch-head>.lede{grid-column:7/13}
.ch-head--center{justify-items:center;text-align:center}
.ch-head--center>*{grid-column:2/12}
.ch-head--center .lede{grid-column:3/11}
/* two columns: a sticky head on the left, the content on the right (the homepage FAQ grid) */
.ch-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.ch-side{position:sticky;top:calc(var(--hd) + 40px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ch-side .h2,.ch-side .display{max-width:9em}
/* main column + a narrower sticky aside (e.g. takeaways + who is involved) */
.ch-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,7vw,128px);align-items:start}
.ch-main>.label{margin-bottom:26px}
.ch-main>:is(.h2,.display){margin-bottom:clamp(36px,4.4vw,64px)}
.ch-aside{position:sticky;top:calc(var(--hd) + 40px)}
/* a closing line under a chapter: a label and a link over a hairline */
.ch-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin-top:clamp(64px,7vw,112px);padding-top:18px;border-top:1px solid var(--rule)}
.ch-foot .label{margin:0}
/* a down arrow (jump to the form) moves down, not sideways, on hover */
.pill:hover .ic--down,.pill:focus-visible .ic--down{transform:translateY(3px)}

/* ---------- Page hero ---------- */
.ph{position:relative;padding:calc(var(--hd) + clamp(36px,5vw,88px)) 0 clamp(72px,8vw,128px);background:var(--ground,var(--stone))}
.ph-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.ph-copy{grid-column:1/8;min-width:0}
.ph-media{grid-column:8/13;min-width:0;margin:0}
.ph--solo .ph-copy{grid-column:1/11}
.ph--narrow .ph-copy{grid-column:1/9}
.ph-back{display:inline-flex;align-items:center;gap:.6em;min-height:44px;margin:0 0 clamp(18px,2.4vw,34px) -2px;font-size:var(--fs-small);font-weight:500;color:var(--fg2);transition:color .3s}
.ph-back .ic{transition:transform .5s var(--ease)}
.ph-back:hover{color:var(--ink)}
.ph-back:hover .ic{transform:translateX(-4px)}
.ph-k{margin-bottom:clamp(18px,2.4vw,30px)}
.ph-h{font:400 var(--fs-display)/.98 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.ph-h--xl{font-size:var(--fs-mega);line-height:.92;letter-spacing:-.025em}
.ph-h em{color:var(--t-coral);letter-spacing:-.015em}
.ph-lede{margin-top:clamp(22px,2.6vw,34px);max-width:30em;color:var(--fg2);text-wrap:pretty}
.ph-lede+.ph-lede{margin-top:12px;font-size:var(--fs-small)}
.ph-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(26px,3vw,40px)}
/* photos: square-cornered, their own proportions; --tall crops to a portrait frame */
.ph-media figure{position:relative;margin:0;overflow:hidden;background:#d9d2c6}
.ph-media img{width:100%;height:auto}
.ph-media--tall figure{aspect-ratio:4/5}
.ph-media--tall img{height:100%;object-fit:cover}
/* two photos, staggered like the homepage's floating pair */
.ph-media--duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.4vw,20px);align-items:start}
.ph-media--duo figure:nth-child(2){margin-top:clamp(40px,7vw,112px)}
.ph-media--duo img{height:100%;object-fit:cover}
.ph-media--duo figure{aspect-ratio:3/4}

/* co-brand lockup: Thrive at Work x partner */
.lockup{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:clamp(22px,2.6vw,34px)}
.lockup-n{display:flex;flex-direction:column;gap:4px;font:400 1.35rem/1 var(--serif-t);letter-spacing:-.005em}
.lockup-r{font:500 var(--fs-label)/1.2 var(--sans);letter-spacing:.02em;color:var(--fg2)}
.lockup-x{font:400 1.5rem/1 var(--serif-t);color:var(--t-coral)}
.lockup img{height:38px;width:auto;max-width:150px;object-fit:contain}

/* spec line under the lede (format, venue, headcount): the homepage's dotted assurances */
.specs{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(24px,2.6vw,32px);padding-top:18px;border-top:1px solid var(--rule);max-width:36em}
.specs li{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-small);line-height:1.35;color:var(--fg2)}
.specs li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.specs li:nth-child(3n+2)::before{background:var(--blue)}
.specs li:nth-child(3n)::before{background:var(--amber)}

/* hero entrance: the H1 and the lede (either can be the LCP element, the lede often is on
   phones) never animate; the small parts around them fade up and the photos settle
   (transform only, so they paint at once) */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.is-ready) .ph :is(.ph-back,.lockup,.ph-k,.specs,.ph-cta){opacity:0;transform:translateY(16px)}
  html.js:not(.is-ready) .ph-media img{transform:scale(1.12)}
}
html.is-ready .ph :is(.ph-back,.lockup,.ph-k,.specs,.ph-cta){transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.is-ready .ph .specs{transition-delay:.2s}
html.is-ready .ph .ph-cta{transition-delay:.28s}
html.is-ready .ph-media img{transition:transform 1.8s var(--ease)}
html.js:not(.rd) .ph :is(.ph-back,.lockup,.ph-k,.specs,.ph-cta),html.js:not(.rd) .ph-media img{animation:failsafe .6s ease 2s forwards}

/* ---------- Editorial lists ---------- */
/* numbered rows over hairlines: number | title + text (--wide: number | title | text) */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:clamp(40px,5vw,72px) minmax(0,1fr);column-gap:clamp(16px,2.4vw,40px);padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--rule)}
.row-n{font:500 var(--fs-label)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--fg2);padding-top:.7em}
.row-t{font:400 var(--fs-title)/1.1 var(--serif-t);letter-spacing:-.01em;text-wrap:balance}
.row-p{grid-column:2;margin-top:12px;font-size:var(--fs-small);line-height:1.65;color:var(--fg2);max-width:40em;text-wrap:pretty}
.rows--wide .row{grid-template-columns:clamp(40px,5vw,72px) minmax(0,5fr) minmax(0,7fr)}
.rows--wide .row-p{grid-column:3;margin-top:0}

/* hairline columns: a key, a title, a short text (facts, models, checks) */
.cols{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(24px,3vw,48px)}
.cols--3{--n:3}
.cols--2{--n:2}
.col{border-top:1px solid var(--rule);padding-top:22px;min-width:0}
.col-k{display:block;margin-bottom:clamp(20px,2.4vw,36px);font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.col-t{font:400 var(--fs-title)/1.08 var(--serif-t);letter-spacing:-.01em;margin-bottom:14px;text-wrap:balance}
.col p{font-size:var(--fs-small);line-height:1.6;color:var(--fg2);text-wrap:pretty}
.col p+p{margin-top:10px}
.col .tlink{margin-top:8px}

/* ticks: a short list of outcomes, one per hairline row, check icon in the margin */
.ticks{border-top:1px solid var(--rule)}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);color:var(--fg1,var(--ink));text-wrap:pretty}
.ticks .ic{width:20px;height:20px;margin-top:.2em;color:var(--t-teal);stroke-width:2}
.ch--night .ticks .ic,.ch--ink .ticks .ic{color:var(--amber)}
.ticks--sm li{font-size:var(--fs-small);padding:14px 0}

/* flow: four numbered steps on the homepage's staircase */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,40px)}
.flow-step{border-top:1px solid var(--rule);padding-top:20px}
.flow-step:nth-child(2){margin-top:clamp(0px,4vw,56px)}
.flow-step:nth-child(3){margin-top:clamp(0px,8vw,112px)}
.flow-step:nth-child(4){margin-top:clamp(0px,12vw,168px)}
.flow-n{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:clamp(20px,2.4vw,32px);font:400 var(--fs-display)/.8 var(--serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* the logo's ring in miniature, this step's segment lit (coral, amber, teal, blue) */
.flow-n::after{content:"";flex:none;width:12px;height:12px;margin-top:.1em;border-radius:50%;--s1:var(--rule);--s2:var(--rule);--s3:var(--rule);--s4:var(--rule);--s5:var(--rule);background:conic-gradient(from 3.5deg,var(--s1) 0 65deg,transparent 0 72deg,var(--s2) 0 137deg,transparent 0 144deg,var(--s3) 0 209deg,transparent 0 216deg,var(--s4) 0 281deg,transparent 0 288deg,var(--s5) 0 353deg,transparent 0);-webkit-mask:radial-gradient(circle closest-side,transparent 26%,#000 31%);mask:radial-gradient(circle closest-side,transparent 26%,#000 31%)}
.flow-step:nth-child(1) .flow-n::after{--s1:var(--coral)}
.flow-step:nth-child(2) .flow-n::after{--s2:var(--amber)}
.flow-step:nth-child(3) .flow-n::after{--s3:var(--teal)}
.flow-step:nth-child(4) .flow-n::after{--s4:var(--blue)}
.flow-t{font:400 var(--fs-title)/1.08 var(--serif-t);letter-spacing:-.01em;margin-bottom:12px}
.flow-step>p:not(.flow-n){font-size:var(--fs-small);line-height:1.6;color:var(--fg2);max-width:21em;text-wrap:pretty}

/* people: who is involved (a round face or initials, name, role, a line) */
.people{border-top:1px solid var(--rule)}
.person{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.person-face{display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#d9d2c6}
.person-face img{width:100%;height:100%;object-fit:cover}
.person-init{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--rule);font:400 1.15rem/1 var(--serif-t);letter-spacing:.02em}
.person-n{font:400 var(--fs-title)/1.1 var(--serif-t);letter-spacing:-.01em}
.person-r{margin-top:6px;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.person-b{margin-top:10px;font-size:var(--fs-small);line-height:1.6;color:var(--fg2);text-wrap:pretty}

/* figure + text pair */
.pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center}
.pair--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pair--rev>:first-child{order:2}
.pair figure{margin:0;overflow:hidden;background:#d9d2c6}
.pair figure img{width:100%;height:auto}

/* a photo on its own (e.g. a guide's hero photo between the title and the text); --wide crops to a band */
.fig{margin:0;overflow:hidden;background:#d9d2c6}
.fig img{width:100%;height:auto}
.fig--wide img{aspect-ratio:2/1;object-fit:cover}

/* link list over hairlines with an arrow (the homepage's guides/spaces index, any page) */
.lk-h{margin-bottom:18px;font:400 var(--fs-title)/1.1 var(--serif-t);letter-spacing:-.01em}
.lk-list{border-top:1px solid var(--rule)}
.lk-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-body);font-weight:500}
.lk-list a>span{transition:transform .5s var(--ease)}
.lk-list .ic{color:var(--fg2);transition:transform .5s var(--ease),color .3s}
.lk-list a:hover>span{transform:translateX(8px)}
.lk-list a:hover .ic{transform:translate(2px,-2px) rotate(45deg);color:var(--t-coral)}
/* with a description: title | description | arrow */
.lk-list--desc a{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;column-gap:28px;padding:18px 0}
.lk-list--desc .lk-d{font-size:var(--fs-small);font-weight:400;color:var(--fg2)}

/* byline / meta line */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:var(--fs-small);color:var(--fg2);font-variant-numeric:tabular-nums}
.meta>*+*::before{content:"";display:inline-block;width:4px;height:4px;margin:0 14px;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.6}
.meta b{font-weight:500;color:var(--fg1,var(--ink))}

/* ---------- Long-form prose (privacy note, guides) ---------- */
.prose{max-width:40em;color:var(--fg2)}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:1.9em;font:400 clamp(1.9rem,2.9vw,2.7rem)/1.05 var(--serif-t);letter-spacing:-.012em;color:var(--fg1,var(--ink));text-wrap:balance}
.prose h3{margin-top:1.7em;font:400 var(--fs-title)/1.12 var(--serif-t);letter-spacing:-.008em;color:var(--fg1,var(--ink));text-wrap:balance}
.prose>:first-child{margin-top:0}
.prose :is(h2,h3)+*{margin-top:.65em}
.prose p,.prose li{line-height:1.7;text-wrap:pretty}
.prose b,.prose strong{font-weight:600;color:var(--fg1,var(--ink))}
.prose a{color:var(--fg1,var(--ink));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .3s}
.prose a:hover{color:var(--t-coral-sm)}
.prose ul>li{position:relative;padding-left:1.4em}
.prose ul>li::before{content:"";position:absolute;left:.2em;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--t-coral)}
.prose ol{counter-reset:li}
.prose ol>li{position:relative;padding-left:1.8em;counter-increment:li}
.prose ol>li::before{content:counter(li) ".";position:absolute;left:0;font-weight:500;font-variant-numeric:tabular-nums;color:var(--fg1,var(--ink))}
.prose li+li{margin-top:.55em}
.prose .lede{color:var(--fg2)}
/* a fact set off by hairlines */
.prose .fact,.fact{margin-block:1.8em;padding:22px 0;border-block:1px solid var(--rule);color:var(--fg1,var(--ink))}
/* interactive checklist (guides) */
.chk{margin-block:2em;border-top:1px solid var(--rule)}
.chk .chk-t{padding:20px 0 6px;font:400 var(--fs-title)/1.1 var(--serif-t);color:var(--fg1,var(--ink))}
.chk label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;min-height:44px;padding:12px 0;border-bottom:1px solid var(--rule);cursor:pointer;line-height:1.55}
.chk input{width:20px;height:20px;margin:.15em 0 0;accent-color:var(--ink);cursor:pointer}
.chk input:checked+span{color:var(--fg2);text-decoration:line-through;text-decoration-color:var(--t-coral)}
/* which-workshop chooser (guides): answers stay open without JavaScript */
.pick{margin-block:2em;padding:24px 0;border-block:1px solid var(--rule)}
.pick .pick-t{font:400 var(--fs-title)/1.1 var(--serif-t);color:var(--fg1,var(--ink))}
.pick .pick-q{margin-top:6px;font-size:var(--fs-small);color:var(--fg2)}
.pick .pick-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pick button{min-height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;font:500 var(--fs-small)/1 var(--sans);color:var(--fg1,var(--ink));transition:border-color .3s}
.pick button:hover{border-color:var(--ink)}
.pick button.sel{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pick .pick-a{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
html.js .pick .pick-a{display:none}
html.js .pick .pick-a.show{display:block}
/* an FAQ inside a text column */
.prose .faq-list,.faq-list--inline{margin-top:1.2em}
.prose .faq-list :is(h3,p,.faq-a){margin:0}

/* ---------- Filter grid (/workshops, /spaces and its sub-pages) and guide cards (/blog) ----------
   The filter scripts toggle .is-out / .is-in on .wk-card and aria-pressed on .wk-chip.
   Cards never carry .rv: the filter's FLIP owns their transform, and it clears .is-in. */
.wk-filter{display:none}
.js .wk-filter{position:sticky;top:var(--hd);z-index:40;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:clamp(32px,4vw,56px);padding:14px 0;background:var(--ground,var(--stone));border-bottom:1px solid var(--rule)}
.js .wk-filter::-webkit-scrollbar{display:none}
.wk-chip{flex:none;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;font:500 var(--fs-small)/1 var(--sans);color:var(--ink-2);white-space:nowrap;transition:border-color .3s}
.wk-chip:hover{border-color:var(--ink);color:var(--ink)}
.wk-chip-n{font-weight:400;font-variant-numeric:tabular-nums}
.wk-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* an occasion keeps its own colour when chosen (text tier: paper type stays legible on it) */
.wk-chip[data-for="celebrate"][aria-pressed="true"]{background:var(--t-coral);border-color:var(--t-coral)}
.wk-chip[data-for="bond"][aria-pressed="true"]{background:var(--t-amber);border-color:var(--t-amber)}
.wk-chip[data-for="care"][aria-pressed="true"]{background:var(--t-teal);border-color:var(--t-teal)}
.wk-chip[data-for="develop"][aria-pressed="true"]{background:var(--t-blue);border-color:var(--t-blue)}
.wk-chip[data-for="broadcast"][aria-pressed="true"]{background:var(--t-pink);border-color:var(--t-pink)}

.wk-grid,.gd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,6vw,96px) clamp(24px,3vw,48px)}
.wk-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wk-card{position:relative;display:flex;flex-direction:column;min-width:0;color:inherit}
.wk-thumb{position:relative;aspect-ratio:3/2;margin-bottom:22px;overflow:hidden;background:#d9d2c6}
.wk-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.wk-body{display:flex;flex-direction:column;flex:1;min-width:0}
.wk-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.02em;color:var(--ink-2)}
.wk-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t-coral)}
.wk-card h3{font:400 clamp(1.75rem,2.5vw,2.5rem)/1.04 var(--serif-t);letter-spacing:-.015em;text-wrap:balance;transition:transform .6s var(--ease)}
.wk-partner{margin-top:8px;font:400 1.2rem/1.25 var(--serif-t);color:var(--ink-2)}
.wk-partner b{font-weight:400;font-style:italic;color:var(--ink)}
.wk-desc{margin-top:14px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2);max-width:34em;text-wrap:pretty}
/* the foot sits on the card's last line, so feet line up across a row */
.wk-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 20px;margin-top:auto;padding-top:10px;border-top:1px solid var(--rule)}
.wk-body>:has(+.wk-foot,+.sp-foot){margin-bottom:22px}
.wk-meta{font-size:var(--fs-small);color:var(--ink-2)}
.wk-link{display:inline-flex;align-items:center;gap:.55em;min-height:44px;font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.wk-link svg{width:1em;height:1em;flex:none;transition:transform .5s var(--ease)}
a.wk-card:hover .wk-thumb img{transform:scale(1.045)}
a.wk-card:hover h3{transform:translateX(6px)}
a.wk-card:hover .wk-link svg,.wk-link:hover svg{transform:translateX(4px)}
a.wk-card:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
.wk-card.is-out{display:none}
/* entering cards slide only, never fade: a stalled animation must still show the card */
.wk-card.is-in{animation:wk-in .5s var(--ease)}
@keyframes wk-in{from{transform:translateY(18px)}to{transform:none}}
.wk-empty{display:none;padding:56px 0;text-align:center;color:var(--ink-2)}
.wk-empty.on{display:block}
/* guide cards (markup written by scripts/publish-due-posts.js: style only, never edit it) */
.gd-date{display:block;margin:-6px 0 12px;font-size:var(--fs-label);color:var(--ink-2);font-variant-numeric:tabular-nums}
.gd-card .wk-desc{margin-bottom:0}
.gd-empty{max-width:40em;padding:28px 0;border-block:1px solid var(--rule);color:var(--ink-2)}
.gd-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
/* venue cards: the spec line is the only place a rate appears */
.sp-card .wk-desc{margin-top:0}
.sp-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0;border-block:1px solid var(--rule)}
.sp-spec li{padding:14px 12px 14px 0;font-size:var(--fs-label);line-height:1.4;color:var(--ink-2);min-width:0}
.sp-spec li+li{padding-left:16px;border-left:1px solid var(--rule)}
.sp-spec b{display:block;margin-bottom:4px;font:400 clamp(1.45rem,1.9vw,1.85rem)/1.05 var(--serif-t);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.sp-facil{margin-top:14px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.sp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;margin-top:auto;padding-top:10px;border-top:1px solid var(--rule)}

/* ---------- Booking chapter + the wizard ----------
   The <form id="wizard"> markup is byte-identical on 12 pages: it is styled here by its
   own classes only. booking.js toggles .wz-step.active, .wz-dot.on, .size-chip.on,
   .spon-card.on, .spon-cards.shake, and inserts .wz-error and .wz-pre. */
.book-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.book-side{position:sticky;top:calc(var(--hd) + 40px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.book-side .h2{max-width:9em}
.book-side .ticks{align-self:stretch;margin-top:8px}

.wizard{position:relative;padding:clamp(24px,3.4vw,52px);background:var(--paper);color:var(--ink);box-shadow:0 40px 90px -60px rgba(22,24,28,.45)}
.ch--paper .wizard{background:var(--stone)}
.wizard .wz-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(26px,3vw,40px)}
.wizard .wz-progress{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:240px}
.wizard .wz-dot{height:2px;background:var(--line);transition:background-color .5s var(--ease)}
.wizard .wz-dot.on:nth-child(1){background:var(--coral)}
.wizard .wz-dot.on:nth-child(2){background:var(--amber)}
.wizard .wz-dot.on:nth-child(3){background:var(--teal)}
.wizard .wz-step-label{font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.wizard .wz-step{display:none}
.wizard .wz-step.active{display:block;animation:wz-in .6s var(--ease)}
@keyframes wz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* .ft is the step title here, not the site footer: undo redesign.css's .ft */
.wizard .ft{margin-bottom:10px;padding:0;overflow:visible;background:none;color:var(--ink);font:400 clamp(1.75rem,2.4vw,2.4rem)/1.06 var(--serif-t);letter-spacing:-.012em;text-wrap:balance}
.wizard .fs{max-width:36em;margin-bottom:clamp(26px,3vw,36px);font-size:var(--fs-small);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.wizard .f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.wizard .f-group{margin-bottom:22px;min-width:0}
.wizard .f-group label,.wizard .f-label{display:block;margin-bottom:9px;font:500 var(--fs-small)/1.3 var(--sans);color:var(--ink)}
.wizard .f-group :is(input,select,textarea){display:block;width:100%;min-height:54px;padding:14px 16px;font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--stone);border:1px solid transparent;border-bottom-color:rgba(22,24,28,.42);border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .3s,background-color .3s,box-shadow .3s}
.ch--paper .wizard .f-group :is(input,select,textarea){background:var(--paper)}
.wizard .f-group select{padding-right:48px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.wizard .f-group textarea{min-height:120px;resize:vertical}
.wizard .f-group :is(input,select,textarea):hover{border-bottom-color:var(--ink)}
.wizard .f-group :is(input,select,textarea):focus{outline:none;background-color:var(--paper);border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ch--paper .wizard .f-group :is(input,select,textarea):focus{background-color:var(--stone)}
.wizard ::placeholder{color:var(--ink-2);opacity:.8}
.wizard .f-hint{margin:-8px 0 22px;font-size:var(--fs-label);line-height:1.6;color:var(--ink-2)}
/* team size: four buttons, a tap records it and moves on */
.wizard .size-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wizard .size-chip{min-height:56px;padding:8px 10px;border:1px solid var(--line);border-radius:999px;font:500 1rem/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);transition:border-color .3s,background-color .3s,color .3s}
.wizard .size-chip:hover{border-color:var(--ink)}
.wizard .size-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* funding: three options, read like radio rows */
.wizard .spon-cards{display:grid;gap:10px}
.wizard .spon-card{position:relative;display:block;width:100%;padding:20px 64px 22px 22px;text-align:left;border:1px solid var(--line);transition:border-color .3s,background-color .3s,box-shadow .3s}
.wizard .spon-card::after{content:"";position:absolute;top:24px;right:22px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(22,24,28,.42);transition:background-color .3s,box-shadow .3s,border-color .3s}
.wizard .spon-card:hover{border-color:var(--ink)}
.wizard .spon-card.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wizard .spon-card.on::after{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 4px var(--paper)}
.ch--paper .wizard .spon-card.on::after{box-shadow:inset 0 0 0 4px var(--stone)}
.wizard .spon-name{font:400 clamp(1.45rem,1.8vw,1.75rem)/1.1 var(--serif-t);letter-spacing:-.008em;color:var(--ink)}
.wizard .spon-sub{margin-top:4px;font:500 var(--fs-small)/1.4 var(--sans);color:var(--t-teal)}
.wizard .spon-card p{margin-top:10px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.wizard .spon-cards.shake{animation:wz-shake .4s}
@keyframes wz-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* step navigation */
.wizard .wz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(28px,3vw,40px);padding-top:24px;border-top:1px solid var(--line)}
.wizard .btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-width:128px;min-height:52px;padding:0 1.6em;border:1px solid transparent;border-radius:999px;font:500 .9375rem/1 var(--sans);letter-spacing:.01em;white-space:nowrap;transition:color .45s var(--ease),border-color .3s}
.wizard .btn svg{width:1em;height:1em;flex:none;transition:transform .5s var(--ease)}
.wizard .btn-brass,.wizard .btn-primary{background:var(--ink);color:var(--paper)}
.wizard .btn-brass::before,.wizard .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--night);transform:translateY(101%);transition:transform .55s var(--ease)}
.wizard .btn-brass:hover::before,.wizard .btn-brass:focus-visible::before{transform:none}
.wizard .btn-brass:hover svg,.wizard .btn-brass:focus-visible svg{transform:translateX(4px)}
.wizard .btn-brass:focus-visible{outline-color:var(--ink)}
.wizard .btn-ghost{border-color:var(--line);color:var(--ink)}
.wizard .btn-ghost:hover{border-color:var(--ink)}
.wizard .btn:active{transform:scale(.98)}
.wizard .btn:disabled{cursor:progress;opacity:.7}
.wizard .btn-wa{width:100%;background:var(--t-teal);color:var(--paper)}
.wizard .btn-wa:hover{background:var(--teal);color:var(--ink)}
/* consent block (AIA wording, both boxes required, unticked): legibility first */
.wizard .wz-consent{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.wizard .wz-terms{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:12px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font:500 var(--fs-small)/1 var(--sans);color:var(--ink);transition:border-color .3s}
.wizard .wz-terms:hover{border-color:var(--ink)}
.wizard .wz-terms svg{width:15px;height:15px;flex:none;color:var(--ink-2)}
.wizard .wz-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;font-size:.875rem;line-height:1.65;color:var(--ink-2);cursor:pointer}
.wizard .wz-check+.wz-check{border-top:1px solid var(--line)}
.wizard .wz-check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.wizard .wz-check b{font-weight:600;color:var(--ink)}
.wizard .wz-check a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.wizard .wz-approval{margin:0 0 0 36px;font-size:.875rem;line-height:1.65;color:var(--ink-2)}
.wizard .wz-rep{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-label);line-height:1.65;color:var(--ink-2)}
.wizard .wz-error{margin-top:16px;font-size:var(--fs-small);font-weight:500;line-height:1.5;color:var(--t-coral-sm)}
.wizard .wz-error:empty{display:none}
.wizard .wz-pre{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;font:500 var(--fs-label)/1.4 var(--sans);color:var(--ink)}
.wizard .wz-pre::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal)}
/* step 4: sent */
.wizard .wz-step h2{font:400 clamp(2rem,3vw,2.75rem)/1.04 var(--serif-t);letter-spacing:-.015em;color:var(--ink)}
.wizard .intro{max-width:30em;margin:14px auto 22px;color:var(--ink-2);text-wrap:pretty}

/* ---------- Closing band: the homepage's glow sphere, rising at the foot of a night band ----------
   redesign.js drifts the sphere (--sy) as on the homepage; the band uses a fraction of it
   and ignores the scale (--ss), so the arc never climbs into the copy. */
.cta.cta--band{display:block;min-height:0;padding:clamp(104px,11vw,168px) var(--gutter) calc(min(116vw,1080px) * .22 + clamp(80px,8vw,128px))}
.cta--band .cta-in{margin-inline:auto}
.cta--band .cta-sphere{top:auto;bottom:0;width:min(116vw,1080px);transform:translate(-50%,78%) translateY(calc(var(--sy,0px) * .4))}
.cta--band .cta-h{max-width:12em}
.cta--band .cta-lede{max-width:30em}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ph-copy{grid-column:1/9}
  .ph-media{grid-column:9/13}
  .ch-head>.lede{grid-column:5/13}
  .rows--wide .row{grid-template-columns:clamp(40px,5vw,72px) minmax(0,1fr)}
  .rows--wide .row-p{grid-column:2;margin-top:12px}
  .cols{--n:2}
  .cols--3{--n:3}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px}
  .flow-step:nth-child(n){margin-top:0}
  .flow-step:nth-child(even){margin-top:72px}
  .wk-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .ph-in{row-gap:clamp(40px,7vw,64px)}
  .ph-copy,.ph-media,.ph--solo .ph-copy,.ph--narrow .ph-copy{grid-column:1/-1}
  .ph-media:not(.ph-media--duo){max-width:640px}
  .ch-split,.ch-grid,.book-grid{grid-template-columns:minmax(0,1fr)}
  .ch-side,.ch-aside,.book-side{position:static}
  .pair,.pair--rev{grid-template-columns:minmax(0,1fr)}
  .pair--rev>:first-child{order:0}
  .pair figure{max-width:560px}
}
@media (max-width:760px){
  .hd--lp .hd-in{grid-template-columns:minmax(0,1fr) auto}
  .hd--lp .hd-brand,.hd--lp .hd-cta{grid-column:auto}
  .ch-head>*,.ch-head--center>*,.ch-head>.lede,.ch-head--center .lede{grid-column:1/-1}
  .cols,.cols--3{--n:1}
  .flow{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .flow-step:nth-child(even){margin-top:0}
  .wk-grid,.wk-grid--3,.gd-grid{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .lk-list--desc a{grid-template-columns:minmax(0,1fr) auto}
  .lk-list--desc .lk-d{grid-column:1}
  .lk-list--desc .ic{grid-column:2;grid-row:1/span 2}
  .fig--wide img{aspect-ratio:4/3}
  .meta{flex-direction:column;align-items:flex-start;gap:2px}
  .meta>*+*::before{display:none}
  .wizard{margin-inline:calc(var(--gutter) * -1);padding:28px var(--gutter) 32px;box-shadow:none}
  .wizard .f-row{grid-template-columns:minmax(0,1fr)}
  .wizard .size-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wizard .spon-card{padding:18px 56px 20px 18px}
  .wizard .spon-card::after{right:18px;top:22px}
  .wizard .wz-head{flex-wrap:wrap}
  .sp-spec li+li{padding-left:12px}
  .cta.cta--band{padding:96px var(--gutter) calc(52vw + 72px)}
  .cta--band .cta-sphere{top:auto;bottom:0;width:118vw;-webkit-mask-image:none;mask-image:none;transform:translate(-50%,58%) translateY(calc(var(--sy,0px) * .4))}
  .cta--band .cta-lede{color:var(--paper-2)}
}
@media (max-width:400px){
  .wizard .btn{min-width:0;padding:0 1.25em}
  .sp-spec li{padding-right:8px}
  .sp-spec li+li{padding-left:10px}
}

/* ---------- Reduced motion: everything static and shown ---------- */
@media (prefers-reduced-motion:reduce){
  .ph :is(.ph-back,.lockup,.ph-k,.specs,.ph-cta),.ph-media img{opacity:1;transform:none}
  .wk-card.is-in,.wizard .wz-step.active,.wizard .spon-cards.shake{animation:none}
}

/* ---------- Print / PDF: load-bearing (compliance reviews printed pages) ----------
   Reveals never fire in print, so they are forced visible, and the booking wizard prints
   every step that collects data (1 to 3) so the consent wording and fields are on paper. */
@media print{
  html.js .rv,.split .wd>span,.ph :is(.ph-back,.lockup,.ph-k,.specs,.ph-cta),.ph-media img{opacity:1!important;transform:none!important;clip-path:none!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .hd{position:static!important}
  .menu,.skip,.hd-menu,.wk-filter{display:none!important}
  .ch-side,.ch-aside,.book-side{position:static!important}
  .ch,.ph{padding:28px 0!important}
  .wk-card,.row,.col,.person,.flow-step{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .wizard .wz-step:not([data-step="4"]){display:block!important;animation:none!important}
  .wizard .wz-step[data-step="4"]{display:none!important}
  .wizard .wz-step+.wz-step{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
  .wizard .wz-nav{display:none!important}
}

/* ---------- Sitewide fixes from the page-group reviews (30/10/2026) ---------- */
/* A jump to a chapter (the Book pill's #enquire, in-page anchors) lands the chapter itself at the
   top of the screen, under the header, so the header takes that chapter's tone. Without this the
   html scroll-padding stops 12px short and the header stays on the previous (often night) ground.
   Chapters keep their own top padding, so their first line still clears the header. */
.ch[id]:not(.ch--flush){scroll-margin-top:calc(-12px - var(--hd))}
/* The mega H1 stops growing where the page stops growing (1440px wide = 8.1rem); past that the
   column is fixed and a vw-sized line would crowd the photo or stack into huge lines. */
.ph-h--xl{font-size:min(var(--fs-mega),8.1rem)}
/* Small laptops keep the desktop 7/5 hero split, so the photos stay photos, not thumbnails. */
@media (min-width:961px) and (max-width:1100px){
  .ph-copy{grid-column:1/8}
  .ph-media{grid-column:8/13}
}
/* Hero label: when it wraps on a phone, balance the two lines (no word or hyphen half left alone). */
.ph-k{text-wrap:balance}
/* A text-partner lockup below 375px: start the second row with the "x" so it never reads like a close button. */
@media (max-width:374px){
  .lockup>.lockup-n:first-child{flex-basis:100%}
}
/* Filter chips: the focus ring sits inside the pill, so the bar's sideways scroll never clips it
   and the pressed chip's ring stays visible on its own colour. */
.wk-chip:focus-visible{outline-offset:-6px}
/* Phones: the chip bar runs to the screen edge, so a cut-off chip reads as "scroll for more". */
@media (max-width:760px){
  .js .wk-filter{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}
/* Link lists: on hover the title moves (the first child), whether or not a description follows. */
.lk-list a>span{transition:none}
.lk-list a:hover>span{transform:none}
.lk-list a>:first-child{transition:transform .5s var(--ease)}
.lk-list a:hover>:first-child{transform:translateX(8px)}
/* The closing band's text block is centred by its own max-widths, not the homepage CTA's 620px box. */
.cta--band .cta-in{max-width:none}
/* Chapter-foot links (e.g. "Planning guide" links on workshop pages). Tablets: the links stay in
   one column after the label. Phones: a title long enough to wrap is underlined line by line
   (the shared .tlink's background underline would strike through its second line), with the
   arrow following the last word. Same 1px rule, 44px tap height. */
@media (min-width:761px) and (max-width:960px){
  .ch-foot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .ch-foot .tlink{grid-column:2;justify-self:start}
}
@media (max-width:760px){
  .ch-foot .tlink{display:block;padding:10px 1.3em 10px 0;line-height:1.6;text-wrap:balance;background:none;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.42em}
  .ch-foot .tlink .ic{display:inline-block;margin:0 -1.3em 0 .3em;vertical-align:-.12em}
}
/* A topic named in a tick list links to the booking form with that topic filled in
   (booking.js ?w= deep link). Underlined like a text link; a taller hit area without moving the line. */
.ticks .pick-link{padding:.45em 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:color .3s,text-decoration-color .3s}
.ticks .pick-link:hover{color:var(--t-coral);text-decoration-color:currentColor}