/* AKKA — homepage styles
   Recreated from design handoff "Homepage v10" (high fidelity).
   Fully fluid: clamp() + auto-fit grids only — no media queries by design. */

/* ---------- Fonts (self-hosted) ----------
   Both are variable fonts, so one file per family covers every weight we use.
   Latin subset only. Replaces the Google Fonts CDN — removes two external
   origins from the render path and one IP-sharing disclosure from the
   privacy policy. Both OFL-licensed, so self-hosting is permitted. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
/* ---------- Tokens ---------- */
:root {
  --canvas: #f7f4ed;
  --canvas-raised: #fbfaf8;
  --card: #fff;
  --card-next: #fdfcf8;
  --ink: #23211d;
  --ink-78: rgba(35, 33, 29, .78);
  --ink-75: rgba(35, 33, 29, .75);
  --ink-72: rgba(35, 33, 29, .72);
  --ink-66: rgba(35, 33, 29, .66);
  --ink-60: rgba(35, 33, 29, .6);
  --ink-55: rgba(35, 33, 29, .55);
  --ink-50: rgba(35, 33, 29, .5);
  --rule: rgba(35, 33, 29, .13);
  --rule-list: rgba(35, 33, 29, .16);
  --rule-card: rgba(35, 33, 29, .18);
  --accent: #c8801d;
  --accent-deep: #a3660f;
  /* The same amber, dark enough to clear WCAG AA for small text on the cream
     grounds. --accent-deep measures 4.28:1 on --canvas, which fails the 4.5:1
     floor for anything under 24px (or under 18.66px bold) — and every use of
     it that fails is small: the 11.5px mono eyebrows, the 10px bio roles, and
     the outlined button. This measures 4.77:1 on --canvas, 5.02:1 on
     --canvas-raised, 5.23:1 on white.
     Not invented: it is the amber from the favicon artwork, so it is a colour
     the brand already contains. --accent-deep is left alone because its larger
     uses pass as they are and darkening them would be a visual change nobody
     asked for. */
  --accent-deep-aa: #96610C;
  --accent-light: #e0a34a;
  --error: #a13d2f;
  --photo-bg: #ded8ca;
  --on-dark: #f7f4ed;
  --on-dark-78: rgba(247, 244, 237, .78);
  --on-dark-72: rgba(247, 244, 237, .72);
  --on-dark-60: rgba(247, 244, 237, .6);
  --on-dark-30: rgba(247, 244, 237, .3);
  --on-dark-rule: rgba(247, 244, 237, .22);
  --on-dark-hairline: rgba(247, 244, 237, .16);
  /* Two body sizes, and only two. Running copy is --text-body; asides that sit
     under something else — notes, fine print, spec rows — are --text-small. The
     offer panels had drifted to five sizes each (18/17.5/17/16/15.5), with the
     same role set differently in each panel, which is what read as sloppy. */
  --text-body: clamp(16px, 1.5vw, 17.5px);
  --text-small: 15.5px;
  --font-display: Archivo, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --pad-x: clamp(18px, 4vw, 52px);
  --pad-y-major: clamp(72px, 10vw, 132px);
  --pad-y-minor: clamp(56px, 7vw, 88px);
  --photo-filter: saturate(.5) sepia(.1) brightness(1.03);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  font-family: var(--font-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-deep); }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.wrap { max-width: 1240px; margin: 0 auto; }

section[id] { scroll-margin-top: 70px; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 5px;
  /* <button> doesn't inherit font or drop its border on its own — without this a
     submit styled .btn renders with a UA outline and the default system font. */
  border: 0;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
a.btn:hover { color: #fff; }
/* Secondary action, for the one place two buttons sit side by side. Outlined
   rather than filled so the pair reads as a primary and an alternative instead
   of two equal choices. Has to be declared after a.btn:hover, which it ties
   with on specificity and beats only on source order. */
/* The border carries .8 alpha, not less: it is the only thing drawing this
   button's edge, so WCAG 1.4.11 wants 3:1 against the page. At .62 it measured
   2.44:1 and failed; .8 measures 3.32:1. */
.btn--secondary { background: transparent; color: var(--accent-deep-aa); border: 1.5px solid rgba(150, 97, 12, .8); }
.btn--secondary:hover { background: rgba(200, 128, 29, .06); border-color: var(--accent-deep-aa); }
a.btn--secondary:hover { color: var(--accent-deep-aa); }

/* ---------- Sticky nav ---------- */
/* The bar is full-bleed — background, blur and bottom rule run edge to edge — but
   its contents ride in the same .wrap column as every section below, so the logo
   and the CTA line up with the page rather than with the viewport. */
.site-nav {
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: rgba(247, 244, 237, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
/* Brand lockup: one image, the "Akian & Karofsky" wordmark with the tagline
   set beneath it. Its height is a ratio of --brand-cap so it scales with the
   viewport; at 15px it is 44px tall, the height of the CTA beside it.
   The clamp's floor is what fits beside the CTA at 375px; its cap keeps the
   lockup from overpowering the bar on desktop. */
.site-nav__brand {
  --brand-cap: clamp(12px, .75vw + 9px, 15px);
  display: block;
}
.site-nav__logo { display: block; height: calc(var(--brand-cap) * 2.93); width: auto; }
.site-nav__cta { min-height: 44px; font-size: 14.5px; padding: 11px 24px; border-radius: 4px; }
/* Below ~400px the lockup and the CTA together outgrow the bar and it wraps to
   two rows, doubling the height of a sticky header. Tightening the button's
   padding buys back the ~16px that keeps them on one line down to 360px, which
   covers the narrowest phones still in real use. */
@media (max-width: 400px) {
  .site-nav__cta { padding-left: 16px; padding-right: 16px; }
}
/* ---------- Hero ---------- */
/* Stacked by default: copy, the photo edge to edge, the names, and on the
   general page the buttons last, under the names. */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "photo" "people" "ctas";
}
.hero__copy { grid-area: copy; }
.hero__photo { grid-area: photo; }
.hero__people { grid-area: people; }
.hero__ctas { grid-area: ctas; }
/* The copy column is a size container so the headline can be sized against the
   column it sits in rather than the viewport. */
.hero__copy {
  padding: clamp(28px, 6vw, 64px) var(--pad-x) 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  container-type: inline-size;
}
.hero__people { padding: 0 var(--pad-x) clamp(28px, 6vw, 64px); }
/* Stacked, the buttons sit under the names, each only as wide as its label. */
.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px var(--pad-x) 36px;
}
.hero:has(.hero__ctas) .hero__people { padding-bottom: 0; }
.hero__ctas .btn { min-height: 48px; font-weight: 800; font-size: 15px; padding: 13px 22px; }

/* Two equal columns. The photo spans every row and bleeds to the viewport's
   right edge and to the hero's top and bottom; the copy and the buttons centre
   as one group in the rows above the names, which stay pinned to the bottom.
   The two flexible rows have a floor so the copy never touches the nav. */
@media (min-width: 880px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr lets the photo's 1551px intrinsic width
     set the column's floor, which widened it past half and scrolled the page. */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(clamp(28px, 4vw, 56px), 1fr) auto auto minmax(clamp(28px, 4vw, 56px), 1fr) auto;
    grid-template-areas:
      ".      photo"
      "copy   photo"
      "ctas   photo"
      ".      photo"
      "people photo";
    /* Tied to the width, not the window height, so the photo's crop stays
       close to square: a tall, narrow column would crop Stephen and Eric out
       of its sides. */
    min-height: clamp(480px, 50vw, 680px);
  }
  .hero__copy { padding-top: 0; padding-bottom: 0; }
  /* Start the copy on the page column's left edge instead of the viewport's, so
     the hero lines up with every .wrap section below it.
     620px is half of .wrap's max-width; the percentage resolves against this grid
     column, which is exactly half the viewport here, so (100% - 620px) is the same
     inset .wrap gets — and needs no viewport units, which would count the
     scrollbar and push the text a few px past the column. --pad-x is the floor and
     wins below ~1344px, which is where .wrap starts centering. Both values move
     together: change .wrap's max-width and this has to change with it. */
  .hero__copy,
  .hero__ctas,
  .hero__people { padding-left: max(var(--pad-x), calc(100% - 620px)); padding-right: var(--pad-x); }
  .hero__ctas { flex-direction: row; flex-wrap: wrap; gap: 12px; padding-top: 26px; padding-bottom: 0; }
  /* One size for both, a step down from the page's other primary buttons (56px):
     the hero pair sits above the fold, where two full-size buttons shout. */
  .hero__ctas .btn { min-height: 52px; font-size: 15.5px; padding: 15px 28px; }
  .hero__people,
  .hero:has(.hero__ctas) .hero__people { padding-bottom: clamp(28px, 4vw, 52px); }
  .hero__frame { aspect-ratio: auto; height: 100%; }
  /* Eric stands nearer the photo's right edge than Stephen does its left, so a
     centred crop of the narrower column cuts him first. */
  .hero__photo img { object-position: 58% 30%; }
  /* The general page's photo has the pair centred, so a centred crop keeps both. */
  .page-smb .hero__photo img { object-position: 50% 20%; }
}
.hero__title { letter-spacing: -.03em; max-width: 640px; margin: clamp(22px, 2.4vw, 30px) 0 clamp(10px, 1.4vw, 16px); }
/* "tomorrow&nbsp;morning." is joined so the headline never ends on one word, and
   joined it cannot wrap: at this weight and tracking it is 8.9em wide. The
   second term keeps it inside the column — without it the phrase ran under the
   photo at every two-column width. Raise the 9 if a longer unbreakable run is
   written into either hero. */
.hero__payoff {
  display: block;
  font-size: min(clamp(34px, 5.6vw, 68px), 100cqi / 9);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--accent-deep);
  text-wrap: balance;
}
/* Highlight orange for the payoff clause of a two-part heading. */
.hl-accent { color: var(--accent); }
.hero__audience {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent-deep);
  text-wrap: balance;
}

/* Stacked, the photo already separates the copy from the names — no rule needed. */
.hero__divider { display: none; }
/* Two columns: the rule follows the copy, where it does the separating.
   Declared after the base rule so it wins. */
@media (min-width: 880px) {
  .hero__divider {
    display: block;
    border: none;
    border-top: 1px solid var(--rule);
    margin: 30px 0 0;
  }
}
.hero__chips { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.chip__name { font-weight: 700; font-size: 13.5px; }
.chip__role { font-size: 12px; color: var(--ink-72); }

/* The general page's role lines run about a third longer than the contractor
   page's (81 characters against 46 and 60), which is enough to wrap the two
   chips onto separate rows at desktop width, where the contractor page keeps
   them side by side. This holds the same two-across split the narrow-screen
   rule below already uses, so the two heroes read as the same component. */
.page-smb .hero__chips { flex-wrap: nowrap; }
.page-smb .chip { flex: 1 1 0; min-width: 0; }

@media (max-width: 640px) {
  .hero__payoff { font-size: min(clamp(30px, 8.7vw, 40px), 100cqi / 9); }
  /* Two across, scaled down to fit the narrow column. */
  .hero__chips { flex-wrap: nowrap; gap: 16px; }
  .chip { flex: 1 1 0; min-width: 0; }
  .chip__name { font-size: 13px; }
  .chip__role { font-size: 11.5px; line-height: 1.4; }
}
.hero__photo { background: var(--photo-bg); min-height: 0; }
/* Stacked: edge to edge at 4:3, a little taller than the photo's own 1.56:1
   so the two of them read at phone size. */
.hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(.55) contrast(1) sepia(.12) brightness(1.02);
}
.hero__caption {
  position: absolute;
  left: clamp(18px, 2vw, 28px);
  bottom: clamp(14px, 1.7vw, 24px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--ink);
  background: rgba(247, 244, 237, .84);
  padding: 5px 9px;
}

/* ---------- Testimonials (off until real ones are in — showTestimonials) ---------- */
.testimonials {
  border-top: 1px solid var(--rule);
  padding: var(--pad-y-major) var(--pad-x);
}
.testimonials__kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--accent-deep-aa);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}
.testimonial {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule-card);
}
.testimonial__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--photo-bg);
}
.testimonial__media img,
.testimonial__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.testimonial__play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px 9px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .08em;
  cursor: pointer;
}
.testimonial__play::before {
  content: "";
  border-left: 9px solid var(--accent-light);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.testimonial__play:hover { background: #000; }
.testimonial__quote {
  margin: 0;
  padding: 22px 22px 0;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}
.testimonial__attr {
  padding: 14px 22px 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-78);
}

/* One short quote under the class sign-up button. */
.panel-quote {
  margin: 0;
  padding: 22px clamp(18px, 1.5vw, 21px) 24px;
  border-top: 1px solid var(--on-dark-rule);
}
.panel-quote__video { aspect-ratio: 16 / 9; margin-bottom: 18px; }
.panel-quote__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.panel-quote__text {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.panel-quote__who { display: flex; align-items: center; gap: 14px; }
.panel-quote__face {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--photo-bg);
}
.panel-quote__face[data-video] { cursor: pointer; }
.panel-quote__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.panel-quote__face[data-video]::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l5 3-5 3z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.testimonial__attr span,
.panel-quote__attr span { display: block; }
.panel-quote__attr {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-72);
}

/* ---------- "We've done both." ---------- */
.both { background: var(--ink); color: var(--on-dark); padding: var(--pad-y-major) var(--pad-x); }
.both__setup {
  margin-bottom: 30px;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.6;
  color: var(--on-dark);
  max-width: 700px;
}
.both__payoff {
  font-size: clamp(30px, 4.7vw, 60px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--accent-light);
  max-width: 1000px;
}

/* ---------- Split sections (heading | body) ---------- */
.split { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); align-items: flex-start; }
.split__head { flex: 1 1 260px; max-width: 400px; }
.split__body { flex: 2 1 420px; }

.section-h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.offer-h2 {
  /* Original scale, but never allowed to wrap: on narrow screens the second term
     shrinks the type just enough to keep the headline on one line. The divisor is
     the width of the longest offer headline in ems at this weight and tracking —
     raise it if a longer headline is added, or the line will break. */
  font-size: min(clamp(34px, 5vw, 64px), calc((100vw - 2 * var(--pad-x)) / 11.5));
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.04em;
  text-wrap: balance;

  /* Locks under the nav while you're inside the panel, so there's always a label
     for where you are — these two sections are ~1700px and ~2800px tall. Releases
     on its own at the bottom of .wrap, which is the end of the panel.
     The flow box is frozen at one line so the stuck state can shrink the text
     without moving anything below it: the type lives in the inner <span>, and the
     band is drawn by ::before, so neither resize touches layout. */
  position: sticky;
  top: var(--nav-h, 77px);
  z-index: 10;
  min-height: 1.03em; /* matches line-height — the natural height of the one line */
  /* Text sits at the top of the frozen line box so the band can start flush
     against the nav; the stuck state's padding is what re-centers it in the
     shorter band. Left to normal flow the shrunk text would ride the full-size
     baseline instead, which drops it well below the middle of the band. */
  display: flex;
  align-items: flex-start;
  --band-pad: 6px;
  --band-line: 1.03em;
  --stuck-size: clamp(20px, 2.2vw, 26px);
  /* One step down from the headline's 800. At display size the extra weight is
     what gives the type its presence; at bar size it just fills in the counters
     and reads as heavy. Archivo is variable (100–900), so this interpolates. */
  --stuck-weight: 700;
  /* The headline's -.04em is display tracking — it only works at 34px and up. Held
     at bar size the letters nearly touch, so the stuck state resets to normal.
     Tracking scales with size: the bigger the type, the tighter it wants to be. */
  --stuck-tracking: 0;
  /* Long enough to read as a movement rather than a jump. Every property in the
     shrink shares it, so the type, the band and the color all land together —
     staggering them is what makes a resize look like it stutters. */
  --stick-ease: .34s cubic-bezier(.4, 0, .2, 1);
  transition: padding-top var(--stick-ease);
}
.offer-h2 > span { transition: font-size var(--stick-ease), font-weight var(--stick-ease), letter-spacing var(--stick-ease); }
.offer-h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* The headline sits inside .wrap, so the band has to reach well past it to run
     edge to edge. Overshoot deliberately — the panel's overflow-x: clip trims it
     to the section's own width at any viewport. */
  left: -50vw;
  right: -50vw;
  /* Starts 1px above the headline so it always meets the nav's bottom edge. A
     fractional nav height would otherwise leave a hairline of scrolling content
     showing between the two; the nav's higher z-index hides the overlap. */
  top: -1px;
  height: calc(var(--band-line) + 2 * var(--band-pad) + 1px);
  background-color: var(--band-bg);
  box-shadow: var(--band-shadow);
  transition: height var(--stick-ease), background-color var(--stick-ease), box-shadow var(--stick-ease);
}
.offer-h2.is-stuck > span {
  font-size: var(--stuck-size);
  font-weight: var(--stuck-weight);
  letter-spacing: var(--stuck-tracking);
}
.offer-h2.is-stuck {
  --band-line: calc(var(--stuck-size) * 1.03);
  padding-top: var(--band-pad);
}
.offer-h2.is-stuck::before {
  background-color: var(--band-bg-stuck);
  box-shadow: var(--band-shadow-stuck);
}

/* Opaque. At rest the band is the panel's own color, so it's invisible; stuck, it
   lifts off the panel to read as a bar — a deeper tone plus a drop shadow.
   The light panel's stuck color is deeper than the nav (#f7f4ed) — staying
   lighter than it left too little contrast against the panel to see. It sits
   between --canvas and --photo-bg, so it reads as a step down the existing warm
   palette rather than a new tone.
   The rest shadow carries the same layers at zero alpha, not `none`: same layer
   count and geometry is what lets the browser interpolate it, so the shadow
   fades in on the same curve as the shrink instead of snapping on. */
.session .offer-h2 {
  --band-bg: var(--ink);
  --band-bg-stuck: #443f36;
  --band-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0), 0 16px 37px 0 rgba(0, 0, 0, 0);
  --band-shadow-stuck:
    0 3px 8px 0 rgba(0, 0, 0, .519),   /* contact layer */
    0 16px 37px 0 rgba(0, 0, 0, .61);  /* main drop */
}
.group .offer-h2 {
  --band-bg: var(--canvas-raised);
  --band-bg-stuck: #e6e1d0;
  --band-shadow: 0 16px 37px 0 rgba(0, 0, 0, 0);
  --band-shadow-stuck: 0 16px 37px 0 rgba(0, 0, 0, .26);
}

/* The resize is the motion, so it goes instant. The color and the shadow stay
   animated: nothing moves in a cross-fade, and a band that blinks from invisible
   to a hard-edged bar reads as a glitch rather than as the headline locking. */
@media (prefers-reduced-motion: reduce) {
  .offer-h2,
  .offer-h2 > span { transition: none; }
  .offer-h2::before { transition: background-color var(--stick-ease), box-shadow var(--stick-ease); }
}
.offer-subline {
  margin-top: 18px;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.card-h3 { font-size: clamp(19px, 1.9vw, 22px); font-weight: 700; letter-spacing: -.02em; }

/* ---------- Gap section ---------- */
.gap {
  background: var(--canvas-raised);
  border-top: 1px solid var(--rule);
  padding: var(--pad-y-major) var(--pad-x);
}
.gap__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.62;
  color: var(--ink-72);
  max-width: 620px;
}
.gap__lead {
  font-size: clamp(19px, 1.9vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink);
}
.gap__strong { color: var(--ink); font-weight: 600; }

/* ---------- Offer cards ---------- */
.offerings { border-top: 1px solid var(--rule); padding: clamp(64px, 8vw, 104px) var(--pad-x); }
.offerings__h2 { max-width: 620px; }
.offer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  grid-template-rows: auto auto auto 1fr auto auto;
  column-gap: clamp(20px, 2.5vw, 28px);
  row-gap: 12px;
  margin-top: clamp(32px, 4vw, 44px);
  align-items: stretch;
}
.offer-card {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  background: var(--card);
  border: 1px solid var(--rule-card);
  border-top: 3px solid var(--accent);
  border-radius: 6px;
  padding: clamp(26px, 3vw, 38px);
}
.offer-card:hover { border-color: rgba(35, 33, 29, .4); border-top-color: var(--accent); color: var(--ink); }
.offer-card__hook {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.35;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 22px;
}
.offer-card__kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; }
.offer-card__kicker--accent { color: var(--accent-deep); }
.offer-card__kicker--muted { color: var(--ink-55); }
.offer-card__title {
  font-weight: 800;
  font-size: clamp(23px, 2.4vw, 28px);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.offer-card__desc { font-size: clamp(16px, 1.6vw, 17.5px); line-height: 1.6; color: var(--ink-72); }
.offer-card__price {
  align-self: start;
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px solid rgba(35, 33, 29, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--accent-deep);
}
.offer-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.offer-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--ink-72);
}
.offer-card__foot strong { font-weight: 700; color: var(--ink); }

/* ---------- Workshop (#session, dark) ---------- */
/* clip, not hidden: it trims the sticky headline's full-bleed band to this
   section without creating a scroll container, which would break the sticking. */
.session { background: var(--ink); color: var(--on-dark); padding: var(--pad-y-major) var(--pad-x); overflow-x: clip; }
.session .wrap { min-width: 0; }
.session__h2 { overflow-wrap: break-word; }
.session__subline { color: var(--accent-light); }
.session__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(24px, 3vw, 32px);
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--on-dark);
  max-width: 720px;
}
.session__intro-strong { color: var(--on-dark); font-weight: 600; }
.session__narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 56px);
  max-width: 720px;
}
.session__narrative .card-h3 { margin-bottom: 4px; }
.session__narrative .card-h3--accent { color: var(--accent-light); }
.session__narrative p { font-size: var(--text-body); line-height: 1.62; color: var(--on-dark); }
.session__quote {
  margin: 4px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  background: rgba(224, 163, 74, .08);
  font-style: italic;
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--on-dark);
}
.session__quote p { margin: 0 0 10px; }
.session__quote-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; }
.session__list-intro { margin-bottom: 18px; font-size: var(--text-body); line-height: 1.62; color: var(--on-dark); }
/* Subsection break. One treatment across both offer panels: a thin accent rule
   above the heading that opens the block. These are the only rules inside the
   panels, so a line always means "new subsection" — the row hairlines that used to
   compete with them are gone. The first heading in a column takes the rule too, so
   every subsection opens the same way; it just needs no space above it.
   .session__alt is also the last block in the content column, so it's the final
   thing read before the price panel and sits directly above it once stacked. Its
   rows reuse .session__list, so it needs no list styling of its own. */
.session__list-col > .card-h3:first-child,
.session__capability,
.session__alt,
.group__how-h3,
.group__skip {
  padding-top: clamp(24px, 3vw, 30px);
  border-top: 1px solid var(--accent);
}
.session__capability,
.session__alt,
.group__skip { margin-top: clamp(32px, 4vw, 44px); }
.session__capability .card-h3 { margin-bottom: 12px; }
.session__capability p { font-size: var(--text-body); line-height: 1.62; color: var(--on-dark); }
.session__capability p + p { margin-top: 12px; }
.session__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 4.5vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}
.session__list-col { min-width: 0; }
.session__list-col .card-h3 { margin-bottom: 18px; }
.session__list { display: flex; flex-direction: column; }
/* No rules between rows — the bold lead-in and the padding do the separating. A
   line inside these panels always means a new subsection now, never a next row. */
.session__item {
  padding: 16px 0;
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--on-dark);
}
.session__item strong { font-weight: 700; color: var(--on-dark); }
/* The last row answers the three above it, so it gets the accent. */
.session__item--ours {
  margin-top: 8px;
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: rgba(200, 128, 29, .12);
}
.session__item--ours strong { color: var(--accent-light); }
.session__panel { min-width: 0; border: 1px solid var(--on-dark-rule); border-radius: 6px; overflow: hidden; }

.session__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--on-dark-rule);
}
.session__price-cell { min-width: 0; background: var(--ink); padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2.4vw, 28px); }
.session__price {
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95;
}
.session__price--team { color: var(--accent-light); }
.session__price-label { margin-top: 10px; font-size: var(--text-small); font-weight: 600; color: var(--on-dark); }
.session__cta-block {
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--on-dark-rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.session__cta { width: 100%; min-height: 56px; font-weight: 800; font-size: 16px; padding: 16px 30px; }
.session__note { font-size: var(--text-small); line-height: 1.6; color: var(--on-dark); }
/* The footnote the "Booked privately*" lines point at. Quieter than the note
   above the button, and its link takes the panel's accent, not the page's
   default, which is a dark-ground colour made for a light page. */
.session__footnote { font-size: 13px; line-height: 1.5; color: var(--on-dark-72); }
.session__footnote a { font-weight: 600; color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }
.session__footnote a:hover { color: var(--on-dark); }
/* Dates listed, none open: the button says so and has nowhere to go. */
.session__cta[aria-disabled] { opacity: .55; cursor: default; pointer-events: none; }
/* ---------- #session schedule picker ----------
   Filled by js/session-classes.js from the classes function. Everything but
   .session__empty starts hidden and is revealed only once a schedule loads. */
.session__empty { font-size: var(--text-small); line-height: 1.6; color: var(--on-dark-72); }
/* Every upcoming date, one row each, in a quiet box so the eye lands here
   first. Each row is a real radio when there is more than one; the native
   control is hidden and the dot beside it drawn, so the checked state and the
   focus ring both show on a dark ground. A sold-out or private date keeps its
   row, disabled and muted, with a tag on the right saying which. */
.session__open { width: 100%; padding: 14px 16px 6px; background: rgba(247, 244, 237, .05); border-radius: 5px; }
.session__open-label {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.session__open-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--on-dark-hairline); }
.session__open-row:first-child { border-top: 0; }
label.session__open-row { cursor: pointer; }
.session__open-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.session__open-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 50%;
  border: 2px solid var(--on-dark-60);
  box-sizing: border-box;
}
.session__open-radio:checked + .session__open-dot {
  border-color: var(--accent-light);
  background: radial-gradient(circle, var(--accent-light) 0 4px, transparent 5px);
}
.session__open-radio:focus-visible + .session__open-dot { box-shadow: 0 0 0 3px rgba(224, 163, 74, .35); }
.session__open-radio:disabled + .session__open-dot { opacity: .4; }
.session__open-body { flex: 1; min-width: 0; }
/* Date left, tag right, on one line. */
.session__open-dateline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.session__open-date { display: block; font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; line-height: 1.1; color: var(--on-dark-78); }
.session__open-radio:checked ~ .session__open-body .session__open-date,
div.session__open-row .session__open-date { color: var(--on-dark); }
.session__open-when { display: block; margin-top: 4px; font-size: var(--text-small); line-height: 1.5; color: var(--on-dark-72); }
/* Nearly full: the panel's one warm line, in the tag colour, so it reads as news. */
.session__open-seats { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--accent-light); }
/* A date nobody browsing can have. The muted grey is #969085 nudged two
   steps lighter: on the box's ground (the panel's ink under a 5% wash) the
   spec value measures 4.40:1 and this 4.58:1, which is what the 15.5px time
   line needs. A sold-out date is struck through; a private one is not, since
   the class is happening, just not for the reader. */
.session__open-row--sold-out { cursor: default; }
.session__open-row--private { cursor: default; }
.session__open-row--sold-out .session__open-date,
.session__open-row--private .session__open-date,
.session__open-row--sold-out .session__open-when,
.session__open-row--private .session__open-when { color: #99938a; }
.session__open-row--sold-out .session__open-date { text-decoration: line-through; text-decoration-thickness: 2px; }
.session__open-tag {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid #8a5a20;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-light);
}
a.session__open-tag:hover { color: var(--on-dark); border-color: var(--on-dark-60); }
.session__open-more { display: inline-block; margin: 4px 0 8px; font-size: var(--text-small); font-weight: 700; color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }
.session__open-more:hover { color: var(--on-dark); }

.session__closer { padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--on-dark-rule); }

/* ---------- Weekly coaching group (#group) ---------- */
.group {
  background: var(--canvas-raised);
  border-top: 1px solid var(--rule);
  padding: var(--pad-y-major) var(--pad-x);
  overflow-x: clip; /* see .session — trims the sticky headline's band */
}
.group__subline { color: var(--accent-deep); max-width: 760px; }
.group__intro { margin-top: 14px; font-size: var(--text-body); line-height: 1.62; color: var(--ink-72); max-width: 700px; }
.group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 56px);
}
.group__how-h3 { margin-bottom: 24px; }
.group__steps { display: flex; flex-direction: column; gap: 30px; }
.group__step { display: flex; gap: 16px; }
.group__step-num {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-deep);
  flex: none;
  width: 46px;
}
.group__step-title { font-weight: 700; font-size: var(--text-body); margin-bottom: 5px; }
.group__step-desc { font-size: var(--text-body); line-height: 1.62; color: var(--ink-72); }
.group__recorded { margin-top: 26px; font-size: var(--text-small); line-height: 1.6; color: var(--ink-72); max-width: 460px; }
/* .group__skip and .group__how-h3 take the shared subsection-break rule up in the
   workshop panel's block. This was a 2px solid --ink slab — the heaviest line on
   the page, heavier even than the rules dividing the sections themselves. */
.group__skip .card-h3 { margin-bottom: 12px; }
.group__skip-body { font-size: var(--text-body); line-height: 1.62; color: var(--ink-72); max-width: 480px; }
.example-q {
  font-size: var(--text-body);
  line-height: 1.62;
  font-style: italic;
  color: var(--ink-72);
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.group__examples { display: flex; flex-direction: column; gap: 15px; margin-top: 36px; }
.cohort-card {
  border: 1px solid var(--rule-card);
  border-radius: 6px;
  padding: clamp(24px, 3vw, 36px);
  align-self: start;
  background: var(--card);
}
.cohort-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cohort-card__badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--accent-deep);
  border: 1.5px solid rgba(163, 102, 15, .55);
  border-radius: 3px;
  padding: 6px 10px;
  transform: rotate(-3deg);
}
.cohort-card__price-row { display: flex; align-items: baseline; gap: 8px; }
.cohort-card__price {
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--accent-deep);
}
/* Words in the price slot ("Pricing TBD") sit smaller than a dollar figure would:
   at the numeral's 64px a two-word phrase overpowers the card. */
.cohort-card__price--text { font-size: clamp(28px, 2.8vw, 34px); letter-spacing: -.025em; line-height: 1.1; }
.cohort-card__per { font-size: var(--text-small); color: rgba(35, 33, 29, .7); }
.cohort-card__cancel { margin-top: 6px; font-size: var(--text-small); color: rgba(35, 33, 29, .7); }
.cohort-card__why { margin-top: 14px; font-size: var(--text-small); line-height: 1.6; color: var(--ink-72); }
.cohort-card__specs {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--ink-72);
}
/* No rules between rows, matching the workshop panel's lists — the label/value
   split carries the structure on its own. */
.cohort-card__spec {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
}
.cohort-card__spec strong { font-weight: 700; color: var(--ink); text-align: right; }
.cohort-card__cta { min-height: 56px; text-align: center; font-weight: 800; font-size: 16px; padding: 18px 38px; margin-top: 24px; }

/* ---------- Where this goes next ---------- */
.next { border-top: 1px solid var(--rule); padding: var(--pad-y-minor) var(--pad-x); }
.next__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  color: var(--ink-55);
  margin-bottom: 12px;
}
.next__intro { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--ink-72); max-width: 640px; }
.next-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(20px, 2.5vw, 28px);
  row-gap: 12px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.next-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  background: var(--card-next);
  border: 1px solid var(--rule-card);
  border-radius: 6px;
  padding: clamp(24px, 2.8vw, 32px);
}
.next-card__kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; color: var(--ink-55); }
.next-card__title { font-size: clamp(21px, 2.1vw, 25px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.next-card__body { font-size: 16px; line-height: 1.62; color: var(--ink-72); }
.next-card__examples { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.next-card__examples .example-q { font-size: 15px; color: var(--ink-66); }
.next-card__strong { margin-top: 14px; color: var(--ink); font-weight: 600; }
.text-link {
  align-self: start;
  justify-self: start;
  margin-top: 20px;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-deep);
  border-bottom: 1px solid rgba(163, 102, 15, .4);
}

/* ---------- Bios (#who) ---------- */
.who { border-top: 1px solid var(--rule); padding: var(--pad-y-major) var(--pad-x); }
.who__h2 { margin-bottom: clamp(36px, 5vw, 56px); max-width: 620px; }
.who__photo {
  width: 100%;
  height: clamp(220px, 40vw, 560px);
  overflow: hidden;
  border-radius: 5px;
  background: var(--photo-bg);
  margin-bottom: clamp(32px, 5vw, 56px);
}
/* Biased above centre so what little is cropped comes off the floor, not their heads. */
.who__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: var(--photo-filter);
}
.who__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 60px);
}
.bio__name { margin-bottom: 6px; font-size: clamp(21px, 2.1vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.bio__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--accent-deep);
  margin-bottom: 18px;
}
.bio__p { font-size: 16px; line-height: 1.62; color: var(--ink-72); }
.bio__p + .bio__p { margin-top: 14px; }

/* ---------- Video (optional, off by default) ---------- */
.demo { border-top: 1px solid var(--rule); padding: var(--pad-y-major) var(--pad-x); }
.demo__h2 { margin-bottom: 12px; }
.demo__intro { margin-bottom: 32px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; color: var(--ink-72); max-width: 600px; }
.demo__placeholder {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px dashed rgba(35, 33, 29, .3);
  border-radius: 6px;
  background: #f2efe8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}
.demo__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(35, 33, 29, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo__play-tri {
  width: 0;
  height: 0;
  border-left: 15px solid var(--ink-50);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.demo__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-55); }
.demo__sub { font-size: 13.5px; color: var(--ink-50); }

/* ---------- Who this is for ---------- */
.for { background: var(--canvas-raised); border-top: 1px solid var(--rule); padding: var(--pad-y-major) var(--pad-x); }
.for__audience {
  margin-top: 20px;
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.for__trades { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-66); }
.for__list { display: flex; flex-direction: column; max-width: 620px; }
.for__item {
  padding: 16px 0;
  border-top: 1px solid var(--rule-list);
  font-size: clamp(16px, 1.5vw, 17.5px);
  line-height: 1.55;
}
.for__item:last-child { border-bottom: 1px solid var(--rule-list); }

/* ---------- FAQ ---------- */
.questions { border-top: 1px solid var(--rule); padding: var(--pad-y-major) var(--pad-x); }
.questions__col { max-width: 660px; }
.faq-group { display: flex; flex-direction: column; margin-bottom: clamp(40px, 5vw, 60px); }
.faq-group__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-bottom: 14px;
}
.faq-group details { border-top: 1px solid var(--rule-card); }
.faq-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 19px);
  letter-spacing: -.015em;
  color: var(--ink);
  list-style: none;
}
.faq-group summary::-webkit-details-marker { display: none; }
.faq-mark {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(35, 33, 29, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  transition: transform .18s;
}
details[open] .faq-mark { transform: rotate(45deg); }
.faq-answer {
  padding: 0 0 22px;
  font-size: clamp(16px, 1.5vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-78);
  max-width: 620px;
}

/* ---------- Talk to us (#contact) ---------- */
.contact { background: var(--canvas-raised); border-top: 1px solid var(--rule); padding: var(--pad-y-major) var(--pad-x); }
.contact__h2 { margin-bottom: 14px; }
.contact__lede { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; color: var(--ink-72); max-width: 440px; }
.contact__col { max-width: 480px; }

/* Contact form */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.fld { margin-bottom: 18px; }
.fldlabel { display: block; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
.inp {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--rule-card);
  border-radius: 5px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
}
.inp.area { min-height: 100px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 128, 29, .18); }
.inp.errb { border-color: var(--error); }
.err { color: var(--error); font-size: 13px; margin-top: 6px; font-weight: 600; }
.intent { display: flex; flex-wrap: wrap; gap: 10px; }
.intent-opt {
  border: 1px solid var(--rule-card);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-72);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
}
.intent-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Matches .session__cta so every primary button on the site is one size. */
.contact__submit { width: 100%; min-height: 56px; font-weight: 800; font-size: 16px; padding: 16px 30px; margin-top: 4px; }
.success h3 { font-weight: 700; font-size: 20px; color: var(--ink); }

/* ---------- Footer ---------- */
/* A dark band that closes every page: the newsletter headline on the left, its
   form stacked on the right, and a thin bar with the lockup and links below. */
.site-footer {
  background: var(--ink);
  color: var(--on-dark-72);
  padding: clamp(56px, 7vw, 72px) var(--pad-x) 0;
}
.site-footer__band {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 64px);
}
.site-footer__big {
  max-width: 520px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--on-dark);
  text-wrap: balance;
}
.site-footer__big em { font-style: normal; color: var(--accent-light); }
/* 2px down so the eyebrow's capitals start level with the headline's. */
.site-footer__news { display: flex; flex-direction: column; gap: 12px; max-width: 420px; padding-top: 2px; }
.site-footer__eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.site-footer__note { font-size: 15.5px; line-height: 1.55; color: var(--on-dark-72); }
.news { display: flex; flex-direction: column; gap: 12px; }
/* A cream field: on the dark band a light box reads as the place to type. */
.news__inp { min-height: 48px; background: var(--on-dark); border-color: transparent; }
.news__inp::placeholder { color: var(--ink-55); }
.news__btn { width: 100%; min-height: 48px; font-size: 15.5px; }
/* --error is too dark to read on ink; this is the same red, lifted. */
.news .err { margin-top: -4px; color: #f0a596; }
.news .inp.errb { border-color: #f0a596; }
.news__done { font-size: 15.5px; font-weight: 600; color: var(--on-dark); }
.site-footer button:focus-visible, .site-footer a:focus-visible { outline-color: var(--accent-light); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0 28px;
  border-top: 1px solid var(--on-dark-hairline);
  font-size: 13px;
}
/* The nav's lockup in its white version, at the footprint the old two-line
   footer lockup took (173 × 36px). */
.site-footer__logo { display: block; height: 36px; width: auto; }
.site-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__links a { color: var(--on-dark-72); }
.site-footer__links a:hover { color: var(--accent-light); }

@media (max-width: 760px) {
  .site-footer__band { grid-template-columns: 1fr; gap: 28px; }
}

/* Newsletter opt-in on the Talk to us form. */
.optin { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14.5px; color: var(--ink-72); cursor: pointer; }
.optin input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-deep); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Legal page (privacy-terms.html) ---------- */
.legal { padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(64px, 8vw, 110px); }
.legal .wrap { max-width: 760px; } /* measure for long-form reading, not the 1240 grid */
.legal__head { padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--rule); }
.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
/* Matches the homepage h1 treatment so the page reads as the same site. */
.legal__h1 {
  margin-top: 14px;
  font-size: clamp(34px, 5.6vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--accent-deep);
  text-wrap: balance;
}
.legal__updated { margin-top: 18px; font-size: 14px; color: var(--ink-60); }

.legal__toc { display: flex; flex-wrap: wrap; gap: 22px; margin-top: clamp(28px, 4vw, 40px); }
.legal__toc a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border-bottom: 1px solid rgba(163, 102, 15, .4);
}

.legal__doc { margin-top: clamp(48px, 7vw, 88px); scroll-margin-top: 80px; }
.legal__doc-h2 { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.legal__lede {
  margin-top: 26px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -.01em;
}
.legal__doc .card-h3 { margin-top: clamp(30px, 4vw, 42px); }
.legal__doc p { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--ink-78); }
.legal__doc p strong { color: var(--ink); font-weight: 700; }
.legal__list { margin: 14px 0 0; padding-left: 20px; }
.legal__list li {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-78);
  padding-left: 4px;
}
.legal__list li::marker { color: var(--accent); }
.legal__list li strong { color: var(--ink); font-weight: 700; }
.legal__link { color: var(--accent-deep); border-bottom: 1px solid rgba(163, 102, 15, .4); }
.legal__mono { font-family: var(--font-mono); font-size: .92em; color: var(--ink); }
.legal__doc-h2 + .legal__lede + .card-h3 { margin-top: clamp(30px, 4vw, 42px); }
.legal__back { margin-top: clamp(48px, 6vw, 72px); }

/* ==========================================================================
   Classes and sign-up
   Added with the class sign-up system. Everything here reuses the existing
   tokens and the .fld / .inp / .err / .btn form controls — no new type scale,
   no new colours.
   ========================================================================== */

/* Nav gains one link beside the CTA. The nav element was carrying a single
   .btn, which is display:flex and therefore block-level — an inline link beside
   it would drop to its own row. Making the nav itself a flex row keeps them on
   one line. */
.site-nav__inner nav { display: flex; align-items: center; }
.site-nav__link {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-72);
  margin-right: clamp(12px, 2vw, 22px);
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link[aria-current="page"] { color: var(--accent-deep); }
/* Below 400px the lockup and the CTA already use the whole bar — the note on
   .site-nav__cta above records that its 16px padding is the floor that keeps
   them on one row at 360px. This link needs ~65px more than there is, and the
   alternatives both cost more than they buy: a second nav row doubles a sticky
   header to 125px on the smallest phones, and shrinking the CTA further undoes
   the fix that comment describes. So the link drops here and the footer's
   Classes link, which is on every page, carries it on phones. */
@media (max-width: 400px) {
  .site-nav__link { display: none; }
}

/* ---------- Class list ---------- */
.classes { padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(64px, 8vw, 110px); }
.classes .wrap { max-width: 860px; }
.classes__head { padding-bottom: clamp(24px, 3vw, 34px); border-bottom: 1px solid var(--rule); }
.classes__lede {
  margin-top: 18px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-78);
}
.classes__price { margin-top: 14px; font-size: var(--text-small); color: var(--ink-72); }
.classes__price strong { color: var(--ink); font-weight: 700; }

.classes__list { margin-top: clamp(28px, 4vw, 40px); display: grid; gap: 14px; }
.classes__state { font-size: 16px; line-height: 1.65; color: var(--ink-72); }

.class-card {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--rule-card);
  border-radius: 8px;
  padding: clamp(18px, 2.4vw, 26px);
}
.class-card--closed { background: var(--canvas-raised); }
.class-card__main { min-width: 220px; flex: 1 1 260px; }
.class-card__name { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--accent-deep); }
.class-card__date { font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.class-card__time { margin-top: 5px; font-size: 16px; color: var(--ink-78); }
.class-card__where {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-60);
}
/* A minimum width, so the column starts in the same place on every card. Sized
   to its own content it lands wherever the longest line puts it, which is why a
   private card's status sat left of an open card's. */
.class-card__side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 210px; }
.class-card__status { font-size: var(--text-small); font-weight: 700; }
.class-card__status--open { color: var(--accent-deep); }
.class-card__status--closed { color: var(--ink-55); }
.class-card__cta { padding: 11px 22px; font-size: 15px; }
.classes__note { margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--rule); }
.classes__note p { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--ink-78); }

/* ---------- Sign-up form ---------- */
.signup { padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(64px, 8vw, 110px); }
.signup .wrap { max-width: 660px; }
.signup__head { padding-bottom: clamp(24px, 3vw, 34px); border-bottom: 1px solid var(--rule); }
.signup__next { margin-top: 14px; font-size: var(--text-small); color: var(--ink-72); }
.signup__form { margin-top: clamp(28px, 4vw, 40px); }

.signup__set { border: 0; padding: 0; margin: 0 0 clamp(26px, 3.4vw, 38px); }
.signup__legend {
  padding: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.signup__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }
.fldnote { margin: 0 0 7px; font-size: 13.5px; line-height: 1.5; color: var(--ink-60); }
select.inp { padding-right: 38px; }

.signup__set--legal {
  background: var(--canvas-raised);
  border: 1px solid var(--rule-card);
  border-radius: 8px;
  padding: clamp(18px, 2.4vw, 26px);
}
/* A <legend> is cut into the border at its own vertical midpoint. The base
   rule's 14px of bottom padding put that midpoint below the text, which left
   the label floating above the card. Zero vertical padding centres the words
   on the line; the horizontal padding opens the gap around them, and the
   negative margin keeps the text where it was. */
.signup__set--legal .signup__legend { padding: 0 9px; margin-left: -9px; }
.signup__legalintro { font-size: var(--text-small); line-height: 1.6; color: var(--ink-72); }
.signup__legalnote { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-60); }
/* The one document nobody has to agree to, so it carries no checkbox and no
   heading to give it weight. Bold is what stops it reading as a footnote. */
.signup__legalnote .legal__link { font-weight: 700; }

.ack { margin-top: 20px; }
.ack__title { font-weight: 700; font-size: 15px; color: var(--ink); }
.ack__title a { margin-left: 8px; font-weight: 600; font-size: 13.5px; }
.ack__ver { margin-top: 3px; font-size: 13px; color: var(--ink-60); }
.ack__opt { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; cursor: pointer; }
.ack__opt input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
/* The things you are actually agreeing to, in the brand colour so they read as
   the commitments they are rather than as more body copy. --accent-deep, not
   --accent: the lighter one does not carry enough contrast for running text. */
.ack__opt span { font-size: 15px; line-height: 1.5; color: var(--accent-deep); }

.ack__state { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-60); }
.ack--done .ack__state { color: var(--accent-deep); }
/* Only hidden once doc-panel.js has said it is there to show them again. */
.has-docpanel .ack .ack__opts { display: none; }

/* The document sheet. Off-canvas on desktop, full-screen on a phone — a 380px
   strip sliding in from the right is unreadable at 375px wide. */
.docpanel { position: fixed; inset: 0; z-index: 60; }
.docpanel__scrim { position: absolute; inset: 0; background: rgba(35, 33, 29, .45); }
.docpanel__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--card);
  box-shadow: -18px 0 48px rgba(35, 33, 29, .18);
  animation: docpanel-in .22s ease-out;
}
@keyframes docpanel-in { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.docpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--rule);
}
.docpanel__title { font-size: 17px; font-weight: 700; color: var(--ink); }
.docpanel__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-60);
  cursor: pointer;
}
.docpanel__close:hover { background: var(--photo-bg); color: var(--ink); }
.docpanel__body { flex: 1 1 auto; overflow-y: auto; padding: 22px var(--pad-x); }
.docpanel__body:focus { outline: none; }
.docpanel__body .card-h3 { margin-top: 22px; }
.docpanel__body p, .docpanel__body li { font-size: 15px; line-height: 1.65; color: var(--ink-78); }
.docpanel__body p + p { margin-top: 12px; }
.docpanel__foot {
  flex: 0 0 auto;
  padding: 16px var(--pad-x) 20px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
/* The way out sits with the checkboxes, where the thumb already is. On a phone
   the only other close is the corner button at the top of the screen. */
.docpanel__next { width: 100%; padding: 13px 20px; font-size: 15px; }
.docpanel__foot .ack__opts + .docpanel__next { margin-top: 16px; }
body.is-panelled { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .docpanel__sheet { animation: none; }
}

@media (max-width: 640px) {
  /* Under 16px, iOS Safari zooms the page every time a field is focused and
     never zooms back. Eleven fields deep that is the whole experience. */
  .inp { font-size: 16px; }
  .ack__opt input { width: 20px; height: 20px; margin-top: 1px; }
  /* A 43x16 link is below every touch-target guideline there is. The hit area
     is an invisible box over the link rather than padding: .legal__link draws
     its underline as a border-bottom, and padding would push that border down
     onto the line beneath. This leaves every pixel of the layout alone. */
  .ack__title a,
  .signup__legalnote a { position: relative; }
  .ack__title a::after,
  .signup__legalnote a::after { content: ""; position: absolute; inset: -14px -8px; }
  .docpanel__sheet { width: 100%; }
}

/* Every upcoming date, listed. The card is a 6-row subgrid, so the whole list
   lives inside the foot cell rather than becoming a seventh child. The label
   sits on its own line above them; each date is its own line under it. */
.offer-card__foot-label { flex: 0 0 100%; }
.offer-card__dates { flex: 0 0 100%; display: flex; flex-direction: column; gap: 3px; }
.offer-card__date { font-weight: 700; color: var(--ink); }
/* The date stays black; only the fact that it has gone is coloured. */
.offer-card__gone { color: var(--accent-deep); }

/* A private class on /classes: shown, explained, not offered. */
.class-card--private { opacity: .86; }
.class-card__status--private { color: var(--accent-deep); font-weight: 700; }
.class-card__mark { margin-left: 1px; }
/* The footnote is the last item in the list grid, so the grid gap spaces it. */
.classes__footnote { font-size: 14px; line-height: 1.55; color: var(--ink-60); }
.classes__footnote-mark { color: var(--accent-deep); font-weight: 700; }

.signup__submit { width: 100%; min-height: 50px; font-size: 16px; }
/* Not finished yet. Still a button, still clickable — clicking is what walks
   someone to the first thing they missed — but it stops claiming to be ready. */
.btn--waiting {
  background: transparent;
  color: var(--ink-60);
  box-shadow: inset 0 0 0 1.5px var(--rule-card);
}
.btn--waiting:hover { background: rgba(200, 128, 29, .06); color: var(--ink); }
.signup__ready { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--ink-60); }
.signup__formerr { margin-top: 12px; text-align: center; }
.signup__returnnote { margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--card); font-size: var(--text-small); line-height: 1.55; color: var(--ink); }
.signup__success { margin-top: clamp(28px, 4vw, 40px); }
.signup__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 22px; }
.signup__forward { width: fit-content; padding: 12px 22px; font-size: 15px; }
.signup__forwardwrap { max-width: 300px; }
/* Helper text belongs to the button above it: small, muted, tight to it.
   Scoped under the success panel so its 16px paragraph style doesn't win. */
.signup__success .signup__forwardnote { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-60); }
.signup__success p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--ink-78); }

/* ---- Booking seats and paying (2026-10-02) --------------------------------
   A team booking, a coupon and a choice of card or invoice, built from the
   form's own pieces: .fld / .inp / .ack__opt. Nothing here adds a type size. */
.fldopt { font-weight: 400; color: var(--ink-60); }
.signup__seats { max-width: 120px; }
.colleague { padding-top: 16px; border-top: 1px solid var(--rule); }
.colleague + .colleague { margin-top: 6px; }
.colleague__n {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.signup__coupon { display: flex; gap: 10px; }
.signup__coupon .inp { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.signup__apply { flex: 0 0 auto; padding: 0 20px; min-height: 44px; font-size: 15px; }
.signup__couponstate { margin-top: 7px; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }
.signup__total { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.signup__total s { color: var(--ink-60); }
.signup__pay { margin-bottom: 18px; }
.signup__seatsrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.signup__seatsnote { font-size: 14px; font-weight: 600; color: var(--accent-deep); }
.signup__invoicenote { font-size: var(--text-small); line-height: 1.6; color: var(--ink-72); }
.signup__paynote { margin-top: 10px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--ink-60); }
/* The code and the invoice are for people looking for them: plain words, the
   size of the notes around them, underlined only to say they can be pressed. */
.signup__paylinks { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--ink-60); }
.signup__quiet {
  padding: 4px 2px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup__quiet:hover { color: var(--ink); }
/* Right under the total, so anyone holding a code sees where it goes before
   the full price makes them think they're being overcharged. */
.signup__codelink { display: block; margin: -8px 0 14px; font-size: 14px; }
.signup__codelink[hidden] { display: none; }