/* The Workshop - shared brand tokens.
 *
 * Extracted 13 Aug 2026. Every v2 page carried its own :root block: nine
 * different subsets of the same 46 tokens, which is how a brand quietly drifts.
 * They agreed on every value except --surface (#fff vs #ffffff), so pulling
 * them into one file changes nothing on screen and gives one place to change
 * the palette.
 *
 * Load this BEFORE a page's own <style>, so page rules still win.
 */
:root {
  /* surfaces and ink */
  --paper: #FBF7F0;
  --surface: #fff;
  --ink: #211a14;
  --muted: #786a5c;
  --dim: #9c8f7f;
  --line: #ece2d4;
  /* brand */
  --yellow: #FED620;
  --orange: #EA5F25;
  --orange-d: #B64A1D;
  --pink: #FF0064;
  --blue: #477EC0;
  --teal: #3D8174;
  --coral: #F5A891;
  --coral-soft: #FBDDD1;
  --block: #9F4119;
  /* block shadows */
  --blk1: 1px 1px 0 var(--block);
  --blk2: var(--blk1),2px 2px 0 var(--block);
  --blk3: var(--blk2),3px 3px 0 var(--block);
  --blk4: var(--blk3),4px 4px 0 var(--block);
  --blk5: var(--blk4),5px 5px 0 var(--block);
  --ink1: 1px 1px 0 var(--ink);
  --ink2: var(--ink1),2px 2px 0 var(--ink);
  --ink3: var(--ink2),3px 3px 0 var(--ink);
  --ink4: var(--ink3),4px 4px 0 var(--ink);
  --ink5: var(--ink4),5px 5px 0 var(--ink);
  --wht1: 1px 1px 0 #fff;
  --wht2: var(--wht1),2px 2px 0 #fff;
  --wht3: var(--wht2),3px 3px 0 #fff;
  --wht4: var(--wht3),4px 4px 0 #fff;
  --wht5: var(--wht4),5px 5px 0 #fff;
  --drk1: 1px 1px 0 rgba(0,0,0,.28);
  --drk2: var(--drk1),2px 2px 0 rgba(0,0,0,.28);
  --drk3: var(--drk2),3px 3px 0 rgba(0,0,0,.28);
  --drk4: var(--drk3),4px 4px 0 rgba(0,0,0,.28);
  --drk5: var(--drk4),5px 5px 0 rgba(0,0,0,.28);
  /* everything else */
  --paper-alt: #F6EEE0;
  --org1: 1px 1px 0 var(--orange);
  --org2: var(--org1),2px 2px 0 var(--orange);
  --org3: var(--org2),3px 3px 0 var(--orange);
  --org4: var(--org3),4px 4px 0 var(--orange);
  --org5: var(--org4),5px 5px 0 var(--orange);
  --org6: var(--org5),6px 6px 0 var(--orange);
  --org7: var(--org6),7px 7px 0 var(--orange);
  --org8: var(--org7),8px 8px 0 var(--orange);
  --org9: var(--org8),9px 9px 0 var(--orange);
  --org10: var(--org9),10px 10px 0 var(--orange);
  --orange-dark: #c4451a;
  --orange-soft: #fdeee7;
  --card: #fff;
}

/* The reset every v2 page repeats verbatim. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* Hero heading: ONE rule for every marketing page. Templates must not set
   their own hero size - five pages ended up at the browser default (32px,
   bold, sentence case) because their local `.hero h1` rule had no `.hero`
   ancestor to match. Measured 24 Sep 2026; keep the selector list in step
   with the hero containers the templates actually use. */
.hero h1, .hero-copy h1, .hero-main h1, .hub-hero h1, .tl-hero h1 {
  font-size: clamp(43px, 5.8vw, 54px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
}

/* Enquiry form: ONE style, in the house vocabulary (paper, ink border, block
   shadow, orange CTA). product.html, spaces/workstations.html and the landing
   tour bento all use it. The per-page copies were deleted 24 Sep 2026: two of
   them had drifted into an orange gradient panel with borderless white inputs
   and a black blur-shadow button that matched nothing else on the site. */
.enq { background:var(--surface); color:var(--ink); border:2.5px solid var(--ink); border-radius:2px;
  box-shadow:var(--ink5); padding:38px 34px; }
.enq h2 { font-size:clamp(25px,3.6vw,34px); font-weight:800; letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); }
.enq > p { color:var(--muted); margin:9px 0 26px; font-size:15.5px; }
.enq .tour-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.enq .tour-grid .full { grid-column:1 / -1; }
.enq label { display:block; font-size:13.5px; font-weight:800; margin-bottom:6px; color:var(--ink); }
.enq label span { font-weight:600; color:var(--dim); }
.enq input, .enq textarea { width:100%; font:inherit; font-size:16px; font-weight:600; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:2px; padding:12px 13px; outline:none; }
.enq input:focus, .enq textarea:focus { box-shadow:var(--ink2); }
.enq input::placeholder, .enq textarea::placeholder { color:var(--dim); font-weight:500; }
.enq textarea { min-height:104px; resize:vertical; }
.enq .btn-send, .btn-send.enq-btn { display:inline-flex; align-items:center; gap:8px; margin-top:20px; background:var(--orange); color:#fff;
  font:inherit; font-weight:800; font-size:16px; padding:14px 29px; border:2px solid var(--block); border-radius:2px;
  cursor:pointer; box-shadow:var(--blk5); transition:transform .1s ease, box-shadow .1s ease; }
.enq .btn-send:hover, .btn-send.enq-btn:hover { transform:translate(2px,2px); box-shadow:var(--blk3); }
.enq .btn-send:active, .btn-send.enq-btn:active { transform:translate(5px,5px); box-shadow:0 0 0 var(--block); }
.enq .ok { background:var(--paper); border:2px solid var(--ink); border-radius:2px; padding:17px 19px; font-size:15px; }
.enq .ok a { color:var(--orange-d); font-weight:700; }
@media (max-width:640px) { .enq { padding:26px 20px; } .enq .tour-grid { grid-template-columns:1fr; } }

/* Lead-on cards on the product pages: the homepage pricing card (same photo
   band, coloured block shadow, kicker/title/price/link), one shared copy, laid
   out as a row that scrolls off the right edge instead of wrapping to a second
   line. The negative margins let the row bleed to BOTH viewport edges, with
   matching padding so the first card still starts on the content grid: a
   card scrolled leftwards slides off the edge of the screen rather than being
   cut off at the grid line (Haydn, 25 Sep 2026). */
.scards { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0 22px;
  --gutter:max(22px, calc((100vw - 1120px) / 2 + 22px));   /* the .wrap's left edge, in px */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:var(--gutter); padding-right:calc(var(--gutter) + 20px);
  /* scroll-padding must NOT use a %: there it means the scrollport, so 50vw-50%
     came out as 0 and Chrome snapped the first card under the gutter on load */
  scroll-padding-left:var(--gutter);
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.scards::-webkit-scrollbar { display:none; }
/* the gutter tracks .wrap, which steps up on big screens - left at 1120px the
   first card started inset from the heading above it */
@media (min-width:1500px){ .scards { --gutter:calc((100vw - 1280px) / 2 + 22px); } }
@media (min-width:1900px){ .scards { --gutter:calc((100vw - 1440px) / 2 + 22px); } }
@media (min-width:2300px){ .scards { --gutter:calc((100vw - 1600px) / 2 + 22px); } }
.scard { flex:0 0 min(320px, 78vw); scroll-snap-align:start; position:relative; overflow:hidden;
  background:var(--surface); color:var(--ink); border:2.5px solid var(--ink); border-radius:2px;
  padding:calc(var(--shot-h,132px) + 24px) 26px 26px; text-decoration:none;
  display:flex; flex-direction:column; transition:transform .1s ease, box-shadow .1s ease;
  box-shadow:1px 1px 0 var(--c),2px 2px 0 var(--c),3px 3px 0 var(--c),4px 4px 0 var(--c),
             5px 5px 0 var(--c),6px 6px 0 var(--c),7px 7px 0 var(--c),8px 8px 0 var(--c); }
.scard:hover { transform:translate(4px,4px);
  box-shadow:1px 1px 0 var(--c),2px 2px 0 var(--c),3px 3px 0 var(--c),4px 4px 0 var(--c); }
.scard::before { content:""; position:absolute; top:0; left:0; right:0; height:var(--shot-h,132px);
  background-image:var(--shot); background-size:cover; background-position:center; border-bottom:2.5px solid var(--ink); }
.scard > * { position:relative; z-index:1; }
.scard .kicker { font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--orange-d); }
.scard h3 { font-size:21px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin-top:5px; }
.scard p { font-size:14px; color:var(--muted); margin:9px 0 16px; flex:1; }
.scard .price { font-size:20px; font-weight:800; }
.scard .price small { font-size:12.5px; font-weight:700; color:var(--muted); }
.scard .go { margin-top:12px; font-size:13.5px; font-weight:800; color:var(--orange-d); }

/* CTA band: ONE style for every "Not sure yet? / Book a tour" bar (Haydn,
   12 Oct 2026). Ten pages each carried their own copy: some black buttons,
   one orange band, no pattern, and an inner box stuck at 1120px so on a big
   screen the text sat inset from everything around it. Now: yellow, the
   brand dot grid fading in from the right, the orange block-shadow button,
   and an inner width that steps up with .wrap. A page may still box it
   (border/shadow on .band) - the inside stays the same. */
.band { background:var(--yellow); color:var(--ink); position:relative; overflow:hidden; }
.band::after { content:""; position:absolute; top:0; bottom:0; right:0; width:46%; z-index:0; pointer-events:none;
  background:url("dots-orange.svg") right center / 240px auto repeat; opacity:.75;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%); }
.band-in { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:34px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
@media (min-width:1500px){ .band-in { max-width:1280px; } }
@media (min-width:1900px){ .band-in { max-width:1440px; } }
@media (min-width:2300px){ .band-in { max-width:1600px; } }
.band-in h2, .band-in h3 { font-size:clamp(20px,2.8vw,27px); font-weight:800; letter-spacing:-.01em; line-height:1.15;
  text-transform:uppercase; color:var(--ink); }
.band-in p { font-size:14.5px; color:rgba(33,26,20,.78); margin-top:5px; max-width:620px; }
.band-ctas { display:flex; gap:14px; flex-wrap:wrap; }
.band .btn-cta { display:inline-flex; align-items:center; gap:8px; background:var(--orange); color:#fff; font:inherit;
  font-weight:800; font-size:16px; text-decoration:none; padding:14px 27px; border-radius:2px; border:2px solid var(--block);
  cursor:pointer; box-shadow:var(--blk5); transition:transform .1s ease, box-shadow .1s ease; white-space:nowrap; }
.band .btn-cta:hover { transform:translate(2px,2px); box-shadow:var(--blk3); }
.band .btn-cta:active { transform:translate(5px,5px); box-shadow:0 0 0 var(--block); }
/* boxed variant: a band sitting inside the content column as a card */
.band.band-box { border:2.5px solid var(--ink); border-radius:2px; box-shadow:var(--ink5); }
.band.band-box .band-in { padding:26px 24px; max-width:none; }

/* Drag to scroll (the script lives in _site_foot.html): a grab hand on the
   card rows, and while a drag is in progress snapping is paused so the row
   follows the mouse instead of fighting it. */
.scards, .evs, .cmp-scroll { cursor:grab; }   /* .why/.little only scroll on a phone, where there's no cursor */
.is-dragging { cursor:grabbing !important; scroll-snap-type:none !important; scroll-behavior:auto !important; user-select:none; }
.is-dragging a, .is-dragging img { pointer-events:none; }
/* With a mouse or trackpad, snapping (mandatory OR proximity) pulled short
   sideways flicks straight back to the first card, so small trackpad swipes
   looked like they did nothing. So no snapping for fine pointers - the
   trackpad scrolls freely, and a mouse drag snaps once on release (see the
   drag script). Touch keeps mandatory: there it feels right. "html" in the
   selector so it beats the page's own .evs rule. overscroll-behavior stops a
   swipe past the end turning into the browser's back/forward gesture. */
.scards, .evs, .why, .little { overscroll-behavior-x:contain; }
@media (hover:hover) and (pointer:fine) {
  html .scards, html .evs { scroll-snap-type:none; }
}

/* Colour cards: floor-colour fill, a big faded number, an optional white icon
   disc and zig stripes in the corner. Born on the About page's values, then
   used for every "How it works" row (Haydn, 12 Oct 2026). Set --c per card;
   it needs a colour white text reads on (orange, blue, teal, pink - not yellow). */
.vcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr)); gap:18px; }
.vcard { position:relative; overflow:hidden; background:var(--c); color:#fff; border:2.5px solid var(--ink); border-radius:2px;
  padding:26px 24px 30px; box-shadow:var(--ink5); transition:transform .12s ease, box-shadow .12s ease; }
.vcard:hover { transform:translate(2px,2px); box-shadow:var(--ink3); }
.vcard::after { content:""; position:absolute; right:-30px; bottom:-30px; width:150px; height:150px; pointer-events:none;
  background:rgba(255,255,255,.2);
  -webkit-mask:url("zig-white.svg") 0 0 / 70px auto repeat; mask:url("zig-white.svg") 0 0 / 70px auto repeat; }
.vcard .v-top { display:flex; justify-content:space-between; align-items:flex-start; min-height:46px; margin-bottom:18px; }
.vcard .num { font-size:54px; font-weight:800; letter-spacing:-.05em; line-height:.9; color:rgba(255,255,255,.38); margin:0; }
.vcard .v-ic { width:46px; height:46px; border-radius:50%; background:#fff; color:var(--c); display:grid; place-items:center;
  border:2px solid var(--ink); flex:none; }
.vcard .v-ic svg { width:22px; height:22px; }
.vcard h3 { font-size:19px; font-weight:800; margin:0 0 8px; letter-spacing:-.01em; position:relative; color:#fff; }
.vcard p { font-size:14.5px; color:rgba(255,255,255,.9); position:relative; margin:0; }
.vcard p a { color:#fff; font-weight:800; }

/* Overscroll: pulling past the top or bottom of a page shows the html
   background, so make it the nav yellow. The page itself stays on paper. */
html { background:var(--yellow) !important; }
body { background:var(--paper); min-height:100vh; }

/* Phones: calmer heroes on every page (Haydn, 13 Oct 2026). The 43px floor
   above made headlines run to four lines and button pairs stacked at odd
   widths. `html body` lifts these over each page's own (later) hero rules. */
@media (max-width:560px){
  html body :is(.hero, .hero-copy, .hero-main, .hub-hero, .tl-hero) h1 { font-size:clamp(30px, 8.6vw, 36px); }
  html body :is(.hero-ctas, .tl-ctas, .jb-hero-cta, .hero-cta:has(> .btn-cta)) {
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; }
  html body :is(.hero-ctas, .tl-ctas, .jb-hero-cta, .hero-cta:has(> .btn-cta)) > a {
    width:100%; justify-content:center; text-align:center; padding:12px 8px; font-size:14px; line-height:1.25; }
}
/* Shorter button labels on phones, so a hero button pair never wraps:
   <span class="cta-lg">long</span><span class="cta-sm">short</span> */
.cta-sm { display:none; }
@media (max-width:560px){ .cta-lg { display:none; } .cta-sm { display:inline; } }

/* Phones: sub-page heroes take the homepage's shape (Haydn, 13 Oct 2026) -
   photo first at a short height, the yellow price tag in its bottom-right
   corner and the white tags top-left, both inside the photo. Covers the
   product pages + Workstations (.hero-stage gallery), hub, Day Pass, Taster,
   About and Rooms. `html body` beats each page's own later rules. */
@media (max-width:560px){
  html body :is(.hero-main, .hero, .tl-hero) > :is(.hero-stage, .hero-shot, .tl-shot) { order:-1; }
  html body :is(.hero-main, .hero, .tl-hero) { display:grid; grid-template-columns:1fr; }

  /* one height for every hero photo */
  html body .hero-stage .hero-shot img.hero-img,
  html body .hero-main > .hero-shot img.hero-img,
  html body :is(.hero, .hero-main) > .hero-shot > picture img,
  html body :is(.hero, .hero-main) > .hero-shot > img,
  html body .tl-shot img,
  html body .hero-stage .collage { height:clamp(176px, 27vh, 232px); aspect-ratio:auto; max-height:none; }
  html body .hero-stage .collage > div { min-height:0; }

  /* galleries: thumbs go (the arrows still step through), arrows sit inside */
  html body .hero-main .hero-thumbs { display:none; }
  html body .hero-stage .hero-nav { width:34px; height:34px; font-size:17px; box-shadow:var(--ink2); }
  html body .hero-stage .hero-nav.prev { left:8px; } html body .hero-stage .hero-nav.next { right:8px; }

  /* the product pages' plate wrapper stops being a row under the photo */
  html body .hero-stage > .hero-plate:has(.plate-big) { display:contents; }

  /* yellow tags: bottom-right, inside */
  html body .hero-stage .plate-big,
  html body .hero-shot .hero-pricetag,
  html body .tl-shot .tl-pricetag,
  html body .hero-stage:has(> .collage) > .hero-plate {
    position:absolute; top:auto; left:auto; right:10px; bottom:10px; z-index:4; margin:0;
    transform:rotate(2deg); text-align:center; padding:7px 12px; max-width:150px; box-shadow:var(--ink3); }
  html body .hero-stage .plate-big .n, html body .hero-shot .hero-pricetag b,
  html body .tl-shot .tl-pricetag b, html body .hero-stage:has(> .collage) > .hero-plate .n { font-size:21px; }
  html body .hero-stage .plate-big .n small { font-size:11px; }
  html body .hero-stage .plate-big .l, html body .hero-shot .hero-pricetag span,
  html body .tl-shot .tl-pricetag span, html body .hero-stage:has(> .collage) > .hero-plate small { font-size:9px; letter-spacing:.06em; margin-top:3px; }
  html body .hero-stage:has(> .collage) > .hero-plate { display:flex; gap:10px; align-items:center; max-width:none; }
  html body .hero-stage:has(> .collage) > .hero-plate .n em { font-size:12px; }

  /* white tags: top-left, inside */
  html body .hero-stage .plate-row,
  html body .hero-shot .hero-tags,
  html body .tl-shot .tl-tags,
  html body .hero-shot > .htag {
    position:absolute; left:10px; top:10px; right:auto; bottom:auto; z-index:4; margin:0;
    display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-width:calc(100% - 20px); }
  html body .hero-stage .plate-mini, html body .hero-shot .htag, html body .tl-shot .htag {
    font-size:11px; padding:5px 9px; box-shadow:var(--ink2); }
}
@media (max-width:560px){
  html body .hero-stage .plate-big { max-width:190px; padding:7px 11px; }
  html body .hero-stage .plate-big .l { font-size:8.5px; line-height:1.25; }
}

/* Breadcrumb bar for pages whose hero has no crumb of its own (13 Oct 2026).
   Same look as the per-page .crumb rules on product/day pass/community. */
.crumbbar { max-width:1120px; margin:0 auto; padding:12px 22px 0; }
@media (min-width:1500px){ .crumbbar { max-width:1280px; } }
@media (min-width:1900px){ .crumbbar { max-width:1440px; } }
.crumbbar .crumb { font-size:12.5px; color:var(--dim); }
.crumbbar .crumb a { color:var(--muted); text-decoration:none; font-weight:600; }
.crumbbar .crumb a:hover { color:var(--orange-d); }
.crumbbar .crumb .sep { margin:0 8px; opacity:.6; }

/* Phones: tags sit like the homepage's - white ones hang off the photo's left
   edge, the yellow one pokes out of the bottom-right corner (13 Oct 2026) */
@media (max-width:560px){
  html body .hero-stage .plate-row, html body .hero-shot .hero-tags,
  html body .tl-shot .tl-tags, html body .hero-shot > .htag { left:-6px; top:10px; }
  html body .hero-stage .plate-big, html body .hero-shot .hero-pricetag,
  html body .tl-shot .tl-pricetag, html body .hero-stage:has(> .collage) > .hero-plate { right:-8px; bottom:-10px; }
}
@media (max-width:560px){
  /* one gap between the breadcrumb and the hero on every page */
  html body :is(.tl-hero, .hero, .hero-main) { padding-top:16px; }
}
@media (max-width:560px){
  /* Rooms: the three-photo collage can't fit the short hero, so phones show
     the lead photo alone, framed like every other hero (13 Oct 2026) */
  html body .hero-stage .collage { display:block; padding:0; background:none; overflow:hidden; }
  html body .hero-stage .collage > div:first-child { height:100%; aspect-ratio:auto; border:0; border-radius:0; }
  html body .hero-stage .collage > div:not(:first-child) { display:none; }
}