/* BusFactor landing, from zero. SHARED SYSTEM ONLY: tokens, reset, container, type, buttons, panels, rules, nav, modals,
   entrances, hero background, hover lift, fit-text.
   Source: HOUSE-SET.md (elu anchor; Midday; Ramp; Mora on white) with the founder's overrides of Nov 11 late:
   no IBM Plex Mono anywhere in the page chrome (it lives only inside product-kit frames), kickers Inter 500 12px
   uppercase .08em #777, button labels Inter 500 14px sentence case on the elu pill shape.
   Round two (PAGE-SPEC v2 §2, FEEDBACK-R2 motion): entrances are expected (.reveal / .in, .reveal-stagger / .in-stagger,
   .count), the hero photo sits behind the hero (.hero-bg), use-case panels lift on hover (.lift), the booking modal
   carries Cal.com's own embed, the footer wordmark is fitted by Site.fitText (.fit-text).
   Section files prefix every selector with their #id and never redefine anything in here. */

/* ---------- tokens ---------- */
:root {
  /* colour */
  --white: #FFFFFF;
  --ink: #111111;
  --body: #616161;        /* secondary text: leads, bodies, answers, links */
  --grey2: #6B6B6B;       /* second sentence of a two-tone head */
  --tert: #999999;        /* inactive steps, record marks, demo line */
  --kicker: #777777;      /* kickers, labels, fine print, superscripts */
  --sand: #F4F2EE;        /* elu panel fill; Midday's backdrop done flat */
  --rule: #DBDAD7;        /* 1px rules on white */
  --rule-sand: #ECEAE7;   /* 1px rules on sand */
  --rule-kit: #EADFD2;    /* the product's own hairline, for frames sitting on the page */
  --copper: #C4895C;      /* the only accent, as a fill */
  --copper-text: #A8744B; /* the accent as text on white */
  --btn-grey: #EEEEEE;    /* second button fill */
  --ghost: #E6E4E0;       /* footer ghost wordmark fill */
  --ghost-line: #D6D3CE;  /* footer ghost wordmark outline */

  /* type: two families in the chrome. Mono is declared for the kit's benefit only. */
  --f-display: 'Sora', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --t-56: 56px;  /* H1, 1.08, tracking -1% */
  --t-48: 48px;  /* H2, 1.1 */
  --t-40: 40px;  /* H2 small (security, close), 1.1 */
  --t-32: 32px;  /* proof line, 1.2 */
  --t-24: 24px;  /* left titles, FAQ title, tools head, 1.3 */
  --t-20: 20px;  /* panel titles, active step, footer tagline, 1.3 */
  --t-18: 18px;  /* hero lead, 28 */
  --t-16: 16px;  /* lead, step body, FAQ question, nav links, 24 */
  --t-14: 14px;  /* body, links, pill labels, 22 */
  --t-12: 12px;  /* kickers, labels, fine print, demo line, source lines */
  --t-11: 11px;  /* superscript numerals */
  --t-10: 10px;  /* kept for older section text */

  /* radii */
  --r-panel: 16px;   /* elu panel */
  --r-card: 12px;    /* Ramp card, modal sheet, tiles, frames sitting on the page */
  --r-frame: 8px;    /* product frame inside a panel */
  --r-rect: 4px;     /* Ramp rectangle button */
  --r-pill: 999px;   /* pills, tool pills */

  /* spacing, 8px base */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px;
  --s-8: 64px; --s-12: 96px; --s-15: 120px; --s-17: 140px; --s-20: 160px;
  --sec-pad: 140px;       /* elu sections: product, whynow, cases */
  --sec-pad-mid: 96px;    /* Midday sections: how, tools, faq */
  --sec-pad-120: 120px;   /* records, security */
  --gap-elu: 12px;        /* inside an elu panel grid */
  --gap-ramp: 24px;       /* inside a Ramp card grid */

  /* layout */
  --wrap-max: 1360px;
  --gutter: 40px;
  --nav-h: 76px;
  --col-left: 448px;      /* Midday split, left column */
  --col-gutter: 64px;     /* Midday split, gutter */

  /* motion */
  --fade: 200ms;
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-in: cubic-bezier(.2,.7,.2,1);   /* entrances */
  --reveal-ms: 600ms;
  --reveal-y: 12px;
  --lift-ms: 300ms;

  /* hero photo wash (white to white; a contrast device, not decoration). A section may override any of the three. */
  --hero-wash-top: rgba(255,255,255,.78);
  --hero-wash-mid: rgba(255,255,255,.86);
  --hero-wash-bottom: #FFFFFF;
  --hero-wash: linear-gradient(var(--hero-wash-top), var(--hero-wash-mid) 60%, var(--hero-wash-bottom) 100%);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 var(--t-16)/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
b, strong { font-weight: 500; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -48px; z-index: 200; padding: 10px 14px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-pill); font: 500 var(--t-14)/1 var(--f-body); }
.skip:focus { top: 12px; }

/* ---------- container ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
main { padding-top: var(--nav-h); }   /* the nav is fixed; sections start under it */
.sec { position: relative; }

/* ---------- type ---------- */
/* kicker: Inter 500 12px uppercase, tracking .08em, #777. Centred 24px above an H2, or top-left inside a .band. */
.kicker {
  display: block;
  font: 500 var(--t-12)/1 var(--f-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kicker);
  text-align: center;
}
.kicker.left { text-align: left; }
.band > .kicker.left { position: absolute; top: var(--s-3); left: var(--s-3); }

.h1 {
  font: 400 var(--t-56)/1.08 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  text-wrap: balance;
}
/* h2: Sora 400 48/1.1, centred at a 700 measure; a two-tone head widens to 1000. */
.h2 {
  font: 400 var(--t-48)/1.1 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  text-wrap: balance;
}
.h2.two-tone { max-width: 1000px; }
.h2.small, .h2.s40 { font-size: var(--t-40); }
.h2.s32 { font-size: var(--t-32); line-height: 1.2; }
.h2.s24 { font-size: var(--t-24); line-height: 1.3; letter-spacing: 0; }
.h2.left { text-align: left; margin: 0; }
/* two-tone: the first sentence ink, the second (wrapped in <span class="grey">) #6B6B6B, same size and weight. */
.two-tone .grey { color: var(--grey2); }

.lead {
  font: 400 var(--t-16)/24px var(--f-body);
  color: var(--body);
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.lead.hero { font-size: var(--t-18); line-height: 28px; max-width: 640px; }
.lead.left { text-align: left; margin: 0; }

/* label: the small Inter label that replaced the mono one. 12px #777; .caps for an uppercase .08em row label;
   .ink and .tert recolour. ".mono" is kept only as an alias so older spec text still resolves; it is NOT mono. */
.label, .mono {
  font: 500 var(--t-12)/1.4 var(--f-body);
  letter-spacing: .02em;
  color: var(--kicker);
}
.label.caps, .mono.caps { text-transform: uppercase; letter-spacing: .08em; }
.label.ink, .mono.ink { color: var(--ink); }
.label.tert, .mono.tert { color: var(--tert); }
.label.reg, .mono.reg { font-weight: 400; }

/* fine print: 12px #777 (close line, source lines). */
.fine { font: 400 var(--t-12)/1.5 var(--f-body); color: var(--kicker); text-align: center; }
/* demo line: "Demo data. Roles shown, not names." 12px #999 centred, 24px under the frames. */
.demo-line {
  display: block;
  font: 400 var(--t-12)/1.4 var(--f-body);
  color: var(--tert);
  text-align: center;
  margin-top: var(--s-3);
}
/* superscript numeral after a title: Inter 500 11px, raised, 6px after the title. */
.sup {
  font: 500 var(--t-11)/1 var(--f-body);
  color: var(--kicker);
  letter-spacing: .04em;
  margin-left: 6px;
  position: relative;
  top: -.8em;
  vertical-align: baseline;
}
/* underlined text link, 14px. */
.tlink {
  font: 400 var(--t-14)/22px var(--f-body);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color var(--fade);
}
.tlink:hover { text-decoration-color: var(--ink); }

/* ---------- buttons ----------
   Two shapes, as the house set has them (PAGE-SPEC v2 §2):
   .btn       Ramp's in-page rectangle: 44px, radius 4, padding 0 16, Inter 16 weight 500 ink on a copper fill.
              .btn-grey #EEE fill, ink label. .btn-ink ink fill, white label. .wide full width.
   .btn-pill  elu's pill for the booking controls: 44px (42 in the nav), radius 999, ink fill, Inter 500 14px sentence
              case label, a 36px white circle holding a 14px ink arrow at the right end. .btn-copper copper fill, ink
              label. .btn-grey #EEE fill, ink label. .wide full width, label left, circle right (phones).
   Every booking control also carries .btn-book; every video control .vid. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--r-rect);
  background: var(--copper);
  color: var(--ink);
  font: 500 var(--t-16)/1 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color var(--fade);
}
.btn:hover { background: #B87D52; }
.btn.btn-grey { background: var(--btn-grey); color: var(--ink); }
.btn.btn-grey:hover { background: #E4E4E4; }
.btn.btn-ink { background: var(--ink); color: var(--white); }
.btn.btn-ink:hover { background: #2A2A2A; }
.btn.btn-copper { background: var(--copper); color: var(--ink); }
.btn.wide { display: flex; width: 100%; height: 48px; }
.btn .lbl-short { display: none; }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 4px 0 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font: 500 var(--t-14)/1 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color var(--fade);
}
.btn-pill::after {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0 0 0 1px var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11L11 3M4.5 3H11v6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.btn-pill.wide { display: flex; width: 100%; justify-content: space-between; height: 48px; padding-left: 20px; }
.btn-pill.wide::after { width: 40px; height: 40px; }
.btn-pill .lbl-short { display: none; }

/* ---------- glass pills (founder, Nov 12: "I really like the aesthetic and animation on speedrun.a16z.com for the
   apply button... the physics exactly like theirs, but it still needs to contrast with the background. Also use it
   for Book a 30-minute call"). Measured on their live page and read from their shipped script:
   MATERIAL: a translucent pill with a 12px blur behind it, a -75deg sheen (white .05 to .20 to .05, times a shine
   factor), an inset top shadow, an inset bottom glow, a soft drop, and a 1px edge drawn by a conic gradient that is
   bright at two opposite corners; hover brightens the sheen and turns the edge light once round (1.1s); press sits
   1px down. PHYSICS: glass.js, the shockwave ripple on pointer enter.
   CONTRAST: every .btn-pill is SMOKED glass (an 84% ink tint under the sheen, white label, the white circle with the
   ink arrow), so it reads on the pale sky and on white alike; .btn-glass-light and .pill-glass are the clear glass
   with an ink label for the secondary video controls on the photo. */
@property --ga { syntax: '<angle>'; inherits: false; initial-value: -75deg; }
@property --gs { syntax: '<number>'; inherits: false; initial-value: 1; }
.btn-pill {
  --gs: .35; --ga: -75deg; --tint: rgba(17,17,17,.84); --edge: rgba(255,255,255,.45); --edge-base: rgba(255,255,255,.12); --drop: rgba(0,0,0,.45);
  position: relative; isolation: isolate;
  background:
    linear-gradient(-75deg, rgba(255,255,255,calc(.05 * var(--gs))), rgba(255,255,255,calc(.20 * var(--gs))), rgba(255,255,255,calc(.05 * var(--gs)))),
    linear-gradient(var(--tint), var(--tint));
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.18),
    inset 0 -.125em .125em rgba(255,255,255,calc(.5 * var(--gs))),
    0 .25em .125em -.125em var(--drop),
    inset 0 0 .1em .25em rgba(255,255,255,calc(.2 * var(--gs)));
  transition: --gs 400ms cubic-bezier(.65,0,.35,1), box-shadow 400ms cubic-bezier(.65,0,.35,1), transform 200ms cubic-bezier(.65,0,.35,1), background-color 200ms;
}
.btn-pill::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ga) at 50% 50%, var(--edge), transparent 5% 40%, var(--edge) 50%, transparent 60% 95%, var(--edge)), linear-gradient(var(--edge-base), var(--edge-base));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: --ga 1100ms cubic-bezier(.65,0,.35,1);
}
.btn-pill:hover { --gs: .9; background-color: transparent; box-shadow: inset 0 .125em .125em rgba(0,0,0,.18), inset 0 -.125em .125em rgba(255,255,255,calc(.5 * var(--gs))), 0 .45em .4em -.2em var(--drop), inset 0 0 .1em .25em rgba(255,255,255,calc(.2 * var(--gs))); }
.btn-pill:hover::before { --ga: 285deg; }
.btn-pill:active { transform: translateY(1px); box-shadow: inset 0 .2em .25em rgba(0,0,0,.3), inset 0 -.05em .1em rgba(255,255,255,.25), 0 .1em .1em -.05em var(--drop), inset 0 0 .1em .25em rgba(255,255,255,.12); }
.btn-pill > * { position: relative; z-index: 2; }
.btn-pill::after { position: relative; z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.12); }
/* the clear glass, ink label (secondary controls on the photo) */
.btn-pill.btn-glass-light, .btn-pill.btn-grey, .btn-pill.btn-white { --gs: 1; --tint: rgba(0,0,0,.065); --edge: rgba(0,0,0,.5); --edge-base: rgba(255,255,255,.5); --drop: rgba(0,0,0,.2); color: var(--ink); background: linear-gradient(-75deg, rgba(255,255,255,calc(.05 * var(--gs))), rgba(255,255,255,calc(.20 * var(--gs))), rgba(255,255,255,calc(.05 * var(--gs)))), linear-gradient(var(--tint), var(--tint)); }
.btn-pill.btn-glass-light:hover, .btn-pill.btn-grey:hover, .btn-pill.btn-white:hover { --gs: 1.8; background-color: transparent; }
.btn-pill.btn-glass-light::after, .btn-pill.btn-grey::after, .btn-pill.btn-white::after { box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.08); }
.btn-pill.btn-copper { --tint: rgba(196,137,92,.9); --drop: rgba(120,70,30,.35); color: var(--ink); }
/* the small 28px video pill in the clear material */
.pill-glass {
  position: relative; isolation: isolate;
  --gs: 1; --ga: -75deg;
  border-color: transparent !important; color: var(--ink);
  background:
    linear-gradient(-75deg, rgba(255,255,255,calc(.05 * var(--gs))), rgba(255,255,255,calc(.20 * var(--gs))), rgba(255,255,255,calc(.05 * var(--gs)))),
    linear-gradient(rgba(0,0,0,.065), rgba(0,0,0,.065)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 .1em .1em rgba(0,0,0,.05), inset 0 -.1em .1em rgba(255,255,255,calc(.5 * var(--gs))), 0 .2em .1em -.1em rgba(0,0,0,.18), inset 0 0 .08em .2em rgba(255,255,255,calc(.2 * var(--gs))) !important;
  transition: --gs 400ms cubic-bezier(.65,0,.35,1), box-shadow 400ms cubic-bezier(.65,0,.35,1) !important;
}
.pill-glass::before { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ga) at 50% 50%, rgba(0,0,0,.5), transparent 5% 40%, rgba(0,0,0,.5) 50%, transparent 60% 95%, rgba(0,0,0,.5)), linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: --ga 1100ms cubic-bezier(.65,0,.35,1); }
.pill-glass:hover { --gs: 1.8; }
.pill-glass:hover::before { --ga: 285deg; }
@media (prefers-reduced-motion: reduce) { .btn-pill, .btn-pill::before, .pill-glass, .pill-glass::before { transition: none; } }

/* a row of buttons: 16px apart, centred; .left to start them. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; align-items: center; }
.btn-row.left { justify-content: flex-start; }

/* ---------- panels, frames, rules ---------- */
/* elu panel: sand, radius 16, no border, no shadow, crops whatever floats inside. */
.panel {
  position: relative;
  background: var(--sand);
  border-radius: var(--r-panel);
  overflow: hidden;
}
/* a product frame floating inside an elu panel: white, radius 8, soft shadow, no rule. Builders set left, top, width.
   Works whether .kit-float is the .kit itself or a wrapper around one. */
.kit-float {
  position: absolute;
  background: var(--white);
  border-radius: var(--r-frame);
  box-shadow: 0 8px 24px rgba(43,37,32,.08);
  overflow: hidden;
}
.panel .kit-float.kit, .panel .kit-float > .kit { border-color: transparent; }
.panel .kit-float > .kit { box-shadow: none; }
/* a product frame sitting on sand, in a ruled cell, or as the section itself: white, radius 8, 1px rule, never a shadow.
   .frame.page: the v2 frame sitting directly on the page, radius 12, the product's own hairline. */
.frame {
  background: var(--white);
  border-radius: var(--r-frame);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.panel .frame, .frame.on-sand { border-color: var(--rule-sand); }
.frame.square { border-radius: 0; }
.frame.page { border-radius: var(--r-card); border-color: var(--rule-kit); }

.rule { display: block; width: 100%; height: 1px; margin: 0; border: 0; background: var(--rule); }
/* band: 1px rule above and below, no fill; a .kicker.left inside sits 24px in from the top-left. */
.band { position: relative; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: none; }

/* Midday split: left 448, gutter 64, right the rest (848 on 1360). Stacks under 1100. */
.two-col {
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 1fr);
  column-gap: var(--col-gutter);
  align-items: start;
}

/* ---------- hover lift (use-case panels; FEEDBACK-R2 "the squares could be a bit more animated") ----------
   300ms: the panel rises 4px and takes a 1px copper edge light; a .kit-float inside rises a further 6px.
   Nothing under reduced motion (see the end of the file). */
.lift {
  transition: transform var(--lift-ms) var(--ease-in), box-shadow var(--lift-ms) var(--ease-in);
  will-change: transform;
}
.lift .kit-float { transition: transform var(--lift-ms) var(--ease-in); }
.lift:hover, .lift:focus-within {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(196,137,92,.55);
}
.lift:hover .kit-float, .lift:focus-within .kit-float { transform: translateY(-6px); }

/* ---------- entrances (FEEDBACK-R2 motion rule lifted) ----------
   .reveal (alias .in): starts opacity 0, translateY 12px; .is-in lands when the element is 20% in view, once, and it
   transitions to visible over 600ms. .reveal-stagger (alias .in-stagger): the PARENT carries the class; each child
   starts hidden and lands 60ms after the one before (site.js sets --d on each child, up to 12). Only html.js hides
   anything: with scripts off every element is simply visible. Static under reduced motion. */
html.js .reveal, html.js .in,
html.js .reveal-stagger > *, html.js .in-stagger > * {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-ms) var(--ease-in), transform var(--reveal-ms) var(--ease-in);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.js .reveal.is-in, html.js .in.is-in,
html.js .reveal-stagger.is-in > *, html.js .in-stagger.is-in > * {
  opacity: 1;
  transform: none;
}
html.js .reveal.is-in.reveal-done, html.js .in.is-in.reveal-done,
html.js .reveal-stagger.is-in.reveal-done > *, html.js .in-stagger.is-in.reveal-done > * { will-change: auto; transition-delay: 0ms; }
/* a counted figure keeps its width while the digits change */
.count { font-variant-numeric: tabular-nums; }

/* ---------- hero background (FEEDBACK-R2 "it should have some sort of a background") ----------
   .hero-bg on a section places a/hero-bg.jpg (1920 by 1280) full-bleed behind it with object-fit cover (background-size
   cover: cropped, never stretched), reaching up under the translucent nav, with the wash --hero-wash over it. The wash
   defaults to the spec's white .78 to .86 to pure white so the copy sits on near-white and the section ends on white.
   A section sets --hero-wash (or the three parts) on itself to change it; `.hero-bg.flat` is a single .88 white. */
.hero-bg { position: relative; isolation: isolate; overflow: hidden; }
.hero-bg::before, .hero-bg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(-1 * var(--nav-h));
  z-index: -1;
  pointer-events: none;
}
.hero-bg::before {
  background: url("a/hero-bg.jpg") center / cover no-repeat;
}
.hero-bg::after { background: var(--hero-wash); }
.hero-bg.flat { --hero-wash: rgba(255,255,255,.88); }
.hero-bg > * { position: relative; z-index: 1; }
/* an <img class="hero-bg-img"> inside .hero-bg if a section prefers an element (lazy, alt="") to the background */
.hero-bg .hero-bg-img { position: absolute; inset: calc(-1 * var(--nav-h)) 0 0 0; width: 100%; height: calc(100% + var(--nav-h)); object-fit: cover; z-index: -2; max-width: none; }


/* ---------- field: a slow-moving colour ground (founder, Nov 12 afternoon: elu's security block and CTA "have this
   moving animation of this cool thing"; "colored and cool, or animated and cool", "simple") ----------
   One element: a flat copper base (--field-base), three soft blobs of lighter and deeper copper drifting on a long
   ease (26s, alternate) under a 40px blur, and a fine grain over it all. GPU work only (transform on one layer).
   Copper is the page's only accent, so the field is copper-family only: cream to deep copper. Text on it is white.
   Static under reduced motion (the end of the file). Per-element tints: --field-base, --field-a (light), --field-b
   (deep), --field-c (mid). */
.field { position: relative; isolation: isolate; overflow: hidden; background: var(--field-base, #C4895C); color: var(--white); }
.field::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 24% 28%, var(--field-a, #F6E4D0) 0%, rgba(246,228,208,.55) 38%, rgba(246,228,208,0) 70%),
    radial-gradient(closest-side at 78% 62%, var(--field-b, #9A5A33) 0%, rgba(154,90,51,.5) 40%, rgba(154,90,51,0) 72%),
    radial-gradient(closest-side at 50% 92%, var(--field-c, #E6B48C) 0%, rgba(230,180,140,0) 66%),
    radial-gradient(closest-side at 88% 10%, var(--field-a, #F6E4D0) 0%, rgba(246,228,208,0) 62%),
    radial-gradient(closest-side at 10% 78%, var(--field-b, #9A5A33) 0%, rgba(154,90,51,0) 60%);
  filter: blur(28px) saturate(1.1);
  transform-origin: 50% 50%;
  animation: field-drift 14s cubic-bezier(.45,0,.55,1) infinite alternate;
  /* the pointer parallax: a separate translate, so it composes with the drift animation's transform */
  translate: calc(var(--mx, 0) * -3%) calc(var(--my, 0) * -3%);
  transition: translate 600ms var(--ease-in);
  will-change: transform, translate;
}
/* the texture: Cohere's fine vertical streaks (refs/r5/cohere.jpg) over a grain, both faint, both static */
.field::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .4;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 6px, rgba(0,0,0,.04) 6px 7px, rgba(0,0,0,0) 7px 19px, rgba(255,255,255,.07) 19px 21px, rgba(0,0,0,0) 21px 34px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='.35'/></svg>") repeat;
  background-size: auto, 240px 240px;
  mix-blend-mode: overlay;
}
.field > * { position: relative; z-index: 1; }
/* a second light on its own period (founder: "where the white shadow is, make it move"): a soft white blob, 60% of the
   box, wandering a figure-eight path over 11s; add <i class="field-glow"></i> as the first child of a .field */
.field > .field-glow {
  position: absolute; left: -10%; top: -10%; z-index: 0; pointer-events: none;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 72%);
  filter: blur(22px);
  animation: field-glow 11s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change: transform;
}
@keyframes field-glow {
  0%   { transform: translate3d(0%, 0%, 0) scale(1); }
  30%  { transform: translate3d(70%, 20%, 0) scale(1.15); }
  60%  { transform: translate3d(45%, 85%, 0) scale(.9); }
  100% { transform: translate3d(-5%, 60%, 0) scale(1.1); }
}
/* pointer effects (founder, Nov 12: "when I hover, it moves something in the square"): .field-hover tilts up to 4deg
   toward the pointer (perspective 900), the drift layer slides 3% the other way, and .field-light (one child) is a
   soft white spot following the pointer. Eases back on leave. The script sets --mx/--my (-1..1) and --px/--py (%). */
.field-hover, html.js .reveal-stagger.is-in > .field-hover, html.js .reveal.is-in.field-hover { transform: perspective(900px) rotateX(calc(var(--my, 0) * -4deg)) rotateY(calc(var(--mx, 0) * 4deg)); transition: transform 600ms var(--ease-in), box-shadow 600ms var(--ease-in); will-change: transform; }
.field-hover.is-hover { transition-duration: 120ms; }
.field-hover.is-hover::before { transition-duration: 120ms; }
.field-light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(360px circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.26), rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 70%);
  opacity: 0; transition: opacity 400ms var(--ease-in);
}
.field-hover.is-hover .field-light { opacity: 1; }
@keyframes field-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(5%, -4%, 0) rotate(9deg) scale(1.08); }
  100% { transform: translate3d(-5%, 5%, 0) rotate(-7deg) scale(1.03); }
}

/* ---------- fit text (the footer wordmark) ----------
   Site.fitText(el, width) sets the font-size so the whole word spans the width. Mark the element .fit-text (and give it
   data-fit, optionally data-fit-max for a px ceiling) and site.js fits it on load, on fonts ready and on resize. */
.fit-text { display: block; white-space: nowrap; line-height: 1; width: 100%; overflow: hidden; }

/* ---------- nav (elu) ----------
   76px, white .94 from the first pixel (the hero photo runs under it), a 1px rule after 40px of scroll. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid transparent;
  transition: background-color var(--fade), border-color var(--fade);
}
.nav.scrolled, .nav.open { background: rgba(255,255,255,.94); border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; height: calc(var(--nav-h) - 1px); }
.brand { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.brand-mark { width: 32px; height: 32px; border-radius: 7px; }
.brand-word { font: 500 var(--t-16)/24px var(--f-body); color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: var(--s-4); }
.nav-links a { font: 400 var(--t-16)/1 var(--f-body); color: var(--ink); padding: 10px 0; transition: color var(--fade); }
.nav-links a:hover { color: var(--body); }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); flex: 1 1 0; min-width: 0; }
.nav-signin { font: 400 var(--t-16)/1 var(--f-body); color: var(--ink); padding: 10px 0; transition: color var(--fade); }
.nav-signin:hover { color: var(--body); }
.nav .btn-pill { height: 42px; padding: 0 3px 0 16px; }
.nav-menu-btn { display: none; height: 44px; padding: 0 4px; font: 500 var(--t-14)/1 var(--f-body); color: var(--ink); }
.nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--rule); }
.nav-menu[hidden] { display: none; }
.nav-menu .wrap { display: flex; flex-direction: column; }
.nav-menu a { display: flex; align-items: center; height: 56px; border-top: 1px solid var(--rule); font: 400 var(--t-16)/1 var(--f-body); color: var(--ink); }
.nav-menu a:first-child { border-top: 0; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--s-3); }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.4); }
.modal-sheet {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
  width: 100%;
}
/* booking: the sheet is 1080 by 760 and never scrolls; Cal's iframe is pinned to the sheet's height (Cal's own resize
   messages are overridden) so the booker scrolls inside its own columns and there is never a second scrollbar, no
   horizontal one, no grey canvas showing round it (fourth review: "this doesn't look [good] whatsoever"). A fine line
   under the frame carries the plain link to the booking page at all times. */
.modal-sheet-book { max-width: 1080px; width: min(1080px, calc(100vw - 2 * var(--s-3))); height: auto; max-height: calc(100vh - 2 * var(--s-3)); display: flex; flex-direction: column; overflow: visible; background: var(--white); }
.modal-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; border-radius: inherit; display: flex; flex-direction: column; background: var(--white); }
.cal-inline { flex: 0 0 auto; min-height: 420px; width: 100%; background: var(--white); }
#cal-inline, #cal-inline > :not(style):not(script) { width: 100% !important; max-width: 100% !important; display: block; }
#cal-inline > style, #cal-inline > script { display: none !important; }
#cal-inline iframe { border: 0; width: 100% !important; min-height: 420px; background: var(--white); }   /* height: Cal's own resize message, so the sheet hugs the booker */
#cal-inline cal-inline, #cal-inline .cal-embed { width: 100% !important; max-width: 100% !important; overflow: hidden; }
.modal-wait {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex: 0 0 auto; min-height: 40px; padding: 10px var(--s-4);
  border-top: 1px solid var(--rule);
  font: 400 var(--t-12)/18px var(--f-body); color: var(--kicker); text-align: center;
  order: 2;
}
.modal-wait[hidden] { display: flex; }
.modal-wait[hidden] .modal-wait-text { display: none; }
.modal-wait .tlink { font-size: var(--t-12); line-height: 18px; color: var(--ink); }
.modal-sheet-video { max-width: 1120px; aspect-ratio: 16 / 9; max-height: calc(100vh - 2 * var(--s-3)); }
.modal-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--rule);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 2l10 10M12 2L2 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
  transition: background-color var(--fade);
}
.modal-close:hover { background-color: var(--sand); }
/* the booking sheet's close sits just outside its top-right corner, clear of Cal's own controls; inside on phones */
.modal-sheet-book .modal-close { top: -22px; right: -22px; }
.modal-iframe { width: 100%; height: 100%; border: 0; }
.modal-video { width: 100%; height: 100%; object-fit: contain; background: var(--white); }

/* ---------- breakpoints ---------- */
@media (max-width: 1100px) {
  .nav-links { gap: var(--s-3); }
  .two-col { grid-template-columns: 1fr; row-gap: var(--s-5); }
}
@media (max-width: 1080px) {
  .nav-links, .nav-signin { display: none; }
  .nav-menu-btn { display: inline-flex; align-items: center; }
  .nav-right { gap: var(--s-2); }
  .nav .btn-pill { height: 44px; padding: 0 4px 0 16px; }
  .nav .btn-pill .lbl-full { display: none; }
  .nav .btn-pill .lbl-short { display: inline; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .h1 { font-size: 34px; }
  .h2 { font-size: 32px; }
  .h2.small, .h2.s40 { font-size: 28px; }
  .h2.s32 { font-size: 24px; }
  .h2.s24 { font-size: 22px; }
  .lead.hero { font-size: var(--t-16); line-height: 24px; }
  .band > .kicker.left { position: static; margin-bottom: var(--s-2); }   /* stacks above the band's content instead of overlapping it */
  .hero-bg { --hero-wash: rgba(255,255,255,.88); }
  .modal { padding: 0; }
  .modal-sheet { border-radius: 0; border: 0; }
  /* booking sheet full screen on phones: the desktop width/max-height clamps are cleared here or they win over
     height 100dvh (QA round 1: a 342 by 796 sheet with 24px gutters). The close control keeps a 56px strip of its
     own above Cal's header so it never sits over Cal's controls. */
  .modal-sheet-book { width: 100vw; max-width: none; height: 100vh; height: 100dvh; overflow: hidden; }
  .modal-sheet-book .modal-body { padding-top: 56px; }
  .modal-sheet-book .modal-close { top: 6px; right: 6px; }
  .modal-sheet-video { max-width: none; aspect-ratio: auto; height: 100vh; height: 100dvh; display: flex; align-items: center; }
  .modal-video { height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- reduced motion: everything in its final state, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html.js .reveal, html.js .in, html.js .reveal-stagger > *, html.js .in-stagger > * { opacity: 1; transform: none; will-change: auto; }
  .lift:hover, .lift:focus-within { transform: none; box-shadow: inset 0 0 0 1px rgba(196,137,92,.55); }
  .lift:hover .kit-float, .lift:focus-within .kit-float { transform: none; }
  .field::before { animation: none; translate: 0 0; }
  .field > .field-glow { animation: none; }
  .field-hover { transform: none; }
  .field-light { display: none; }
}