/* ── Rāngai Brand Fonts — Avenir Next (body) + Avenir Next Condensed (headings) ── */
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-DemiBold.ttf') format('truetype');
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('../fonts/AvenirNext-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next Condensed';
  src: url('../fonts/AvenirNextCondensed-Bold.ttf') format('truetype');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next Condensed';
  src: url('../fonts/AvenirNextCondensed-Heavy.ttf') format('truetype');
  font-weight: 800 900; font-style: normal; font-display: swap;
}

/* ── Rāngai Design Tokens (palette from brand guidelines/logo SVGs) ────────── */
:root {
  /* ── Dark theme (deep-green #012013 page background) ──────────────────────
     Was a light theme (white bg / ink text); flipped to dark so text and UI
     read on the deep-green background. Brand accents below are unchanged. */
  /* Brand palette refreshed Sep 2026 (see assets/NEW COLOURS.png). */
  --color-bg:        #0b3122;   /* elevated panel/card on the deep-green page */
  --color-surface:   #0f3a2a;   /* secondary surface (hovers, insets) */
  --color-border:    rgba(255,255,255,0.16);
  --color-text:      #fffbee;   /* cream body text */
  --color-muted:     #9fb2a7;   /* muted green-grey */
  --color-ink:       #231f20;   /* the old brand ink, for the rare element that must stay dark */
  /* Official palette, Sep 2026 refresh: assets/NEW COLOURS.png */
  --color-accent:    #c94110;   /* Burnt orange (was Red) */
  --color-accent-2:  #ffc06b;   /* Warm gold (was Sunrise Orange) */
  --color-yellow:    #ffc06b;   /* Warm gold (was Sunrise Yellow) */
  --color-teal:      #1a7075;   /* Teal (was Green Screen) */
  --color-ocean:     #87ffe2;   /* Mint (was Ocean Blue) */
  --color-deep:      #012013;   /* Dark Green */
  --color-darkred:   #390000;   /* Dark Red */
  --color-darkblue:  #1a7075;   /* No blue in the 2026 palette: teal stands in */
  --color-danger:    #c0271a;
  --color-success:   #00795e;

  --font-sans:       'Avenir Next', system-ui, -apple-system, sans-serif;
  --font-display:    'Avenir Next Condensed', 'Avenir Next', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-pill:     999px;

  --gap-grid:        4px;
  --container-max:   1280px;
  --container-pad:   clamp(1rem, 4vw, 2.5rem);

  --transition:      150ms ease;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  /* Flat brand deep-green (#012013) behind every page; sections with their own
     background paint over it. */
  background: #012013;
  min-height: 100svh;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ── Typography ────────────────────────────────────────────────────────────── */
/* Display headings use Avenir Next Condensed (brand: condensed, tight kerning). */
h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.8vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 { margin-block: 1.5em 0.5em; }
.entry-content p  { margin-block: 0 1em; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; list-style: revert; margin-block: 0 1em; }
.entry-content a  { color: var(--color-accent); text-decoration: underline; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Site Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
/* Logged-in admins have the fixed WP admin bar — without this the header pins
   at 0 and slides UNDER it on scroll (looks like the top bar drifting). Same
   fix .talent-top has always had. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* Under 600px WordPress makes the admin bar scroll away with the page (it goes
   position:absolute), so a sticky header still offset by its height leaves a
   46px hole above itself once you scroll. Stick to the very top there. */
@media screen and (max-width: 600px) {
  .admin-bar .site-header, .admin-bar .talent-top, .admin-bar .talent-topbar { top: 0; }
}

.site-header__inner {
  position: relative;
  height: 68px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Logo + toggle float out of flow so the nav can be a true page-centred grid */
.site-logo {
  position: absolute;
  left: var(--container-pad);
  top: 0;
  height: 68px;
  display: flex;
  align-items: center;
  z-index: 2;
}
.site-logo img { height: 40px; width: auto; }
.site-logo__text { font-size: 1.25rem; font-weight: 700; color: var(--color-accent); }

/* 3-column grid → the centre column (Hire a Student) is dead-centre on the page */
.site-header__collapse {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  gap: 0.5rem;
}
.site-header__center { display: flex; align-items: center; justify-content: center; }
.site-nav--lead  .site-nav__list { justify-content: flex-end; }   /* hug the button's left */
.site-nav--trail .site-nav__list { justify-content: flex-start; } /* hug the button's right */

.site-nav__list { display: flex; gap: 0.25rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-muted);
  transition: color var(--transition), background var(--transition);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
  color: var(--color-text);
  background: var(--color-surface);
}

/* Central CTA, the "Hire a Student" pathway (= talent). Reads as a plain nav
   link now, just bolder: no pill behind it. The .site-header prefix outranks
   .btn wherever that is declared. */
.site-header .site-header__hire {
  background: transparent;
  border-color: transparent;
  color: var(--color-text);
  font-weight: 700;
  padding: 0.55rem 0.4rem;
  white-space: nowrap;
}
.site-header .site-header__hire:hover,
.site-header .site-header__hire:focus-visible { background: transparent; color: var(--color-yellow); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }

/* ── Site Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2rem var(--container-pad);
}

.site-footer__brand { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__tagline { color: var(--color-muted); font-size: 0.8125rem; }
.site-footer__address { font-style: normal; font-size: 0.8125rem; color: var(--color-muted); }

.footer-nav__list { display: flex; flex-direction: column; gap: 0.375rem; }
.footer-nav__list a { font-size: 0.8125rem; color: var(--color-muted); transition: color var(--transition); }
.footer-nav__list a:hover { color: var(--color-text); }

.site-footer__legal {
  border-top: 1px solid var(--color-border);
  padding: 1rem var(--container-pad);
}
.site-footer__legal-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container-max);
  margin-inline: auto;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.site-footer__legal-inner a { transition: color var(--transition); }
.site-footer__legal-inner a:hover { color: var(--color-text); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
/* display:inline-flex above out-ranks the UA [hidden] rule, so a `.btn` toggled
   with el.hidden = true stayed visible (e.g. the Equipment Hire submit froze on
   "Sending…" after a successful send). Let the hidden attribute win. */
.btn[hidden] { display: none; }
.btn--primary    { background: var(--color-accent); color: #ffffff; }
.btn--primary:hover { background: #c0271a; }
.btn--ghost      { border: 1.5px solid var(--color-border); color: var(--color-text); }
.btn--ghost:hover { border-color: var(--color-muted); background: var(--color-surface); }
.btn--danger     { background: var(--color-danger); color: #fff; }
.btn--sm         { padding: 0.35rem 0.875rem; font-size: 0.8125rem; }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: 0.875rem; font-weight: 500; color: var(--color-muted); }
.form-input,
.form-select,
.form-textarea {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: border-color var(--transition);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-textarea { resize: vertical; min-height: 100px; }
/* A home address is a line or two, not a paragraph. The markup sets rows="3",
   so an explicit height is needed to actually shrink it (still drag-resizable). */
#rf-enrolment-address { min-height: 0; height: 3.6rem; }
.form-error { font-size: 0.8125rem; color: var(--color-danger); }
.form-hint  { font-size: 0.8125rem; color: var(--color-muted); }

/* ── Page Content ───────────────────────────────────────────────────────────── */
.page-content { padding-block: 4rem; }
.page-title   { margin-bottom: 2rem; }

.post-hero     { margin-bottom: 2rem; }
.post-hero__img { width: 100%; border-radius: var(--radius-md); aspect-ratio: 16/9; object-fit: cover; }

.post-header   { margin-bottom: 2rem; }
.post-meta     { font-size: 0.8125rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.post-meta a   { color: var(--color-muted); transition: color var(--transition); }
.post-meta a:hover { color: var(--color-text); }

/* Post grid (blog/archive) */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding-block: 3rem;
}

.post-card { background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; }
.post-card__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: opacity var(--transition); }
.post-card__thumb:hover img { opacity: 0.85; }
.post-card__body { padding: 1.25rem; }
.post-card__title { font-size: 1.1rem; margin-block: 0.25rem 0.5rem; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { font-size: 0.875rem; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Talent Grid (directory + profile) ─────────────────────────────────────── */
.talent-topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem var(--container-pad);
  position: sticky;
  /* The profile page has no site-header, so the topbar sticks to the very top. */
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

/* Clear the WordPress admin bar when an owner previews their own profile. */
.admin-bar .talent-topbar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .talent-topbar { top: 46px; }
}

.talent-topbar__back {
  font-size: 0.875rem;
  color: var(--color-muted);
  transition: color var(--transition);
}
.talent-topbar__back:hover { color: var(--color-text); }

.talent-topbar__name {
  font-size: 1.125rem;
  font-weight: 700;
}

.talent-topbar__tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.talent-topbar__hire {
  margin-left: auto;
}

/* Media grid — variable-span bento layout */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Row height scales with column width (set by JS) so 1×1 tiles stay ~16:9
     on every screen size. Falls back to a sane value before JS runs. */
  grid-auto-rows: var(--media-cell, 200px);
  gap: var(--gap-grid);
  padding: var(--gap-grid);
}

.media-tile {
  position: relative;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  grid-column: span 1;
  grid-row: span 1;
}

/* Column spans */
.media-tile[data-col="2"], .media-tile--wide { grid-column: span 2; }
.media-tile[data-col="3"] { grid-column: span 3; }

/* Row spans */
.media-tile[data-row="2"] { grid-row: span 2; }
.media-tile[data-row="3"] { grid-row: span 3; }

.media-tile__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Transparent graphics (logos, mockups, PNGs with alpha) are shown WHOLE and
   framed, never crop-filled — cropping a transparent image bleeds the tile
   background through the see-through areas and looks broken. A small inset +
   clean light backdrop presents them like a proper portfolio piece. */
.media-tile[data-transparent="1"] .media-tile__media {
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
}
/* Transparent images sit straight on the page background — no white card. */
.media-tile[data-transparent="1"] { background: transparent; }

/* Videos show the full frame (never cropped); images crop to fill. */
.media-tile[data-type="video"] .media-tile__media,
.media-tile[data-type="youtube"] .media-tile__media {
  object-fit: contain;
  background: #111;
}

.media-tile__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms ease;
}

.media-tile:hover .media-tile__preview {
  opacity: 1;
}

.media-tile__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  text-align: center;
  padding: 1rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  /* Silver text along the bottom (clear of the centred play button); bottom scrim keeps it legible */
  color: #d8dbde;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  background: linear-gradient(transparent 45%, rgba(0,0,0,0.7));
  opacity: 0;
  transition: opacity var(--transition);
}
.media-tile__caption-title { font-size: 0.95rem; font-weight: 700; }
.media-tile__caption-sub   { font-size: 0.78rem; font-weight: 500; color: #b6babe; }
/* Links in a description: silver + underlined so they read as clickable over
   artwork. The overlay ignores the pointer until the caption is visible, so a
   hidden link can never swallow the tap that should open the lightbox. */
.media-tile__caption { pointer-events: none; }
.media-tile__caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.media-tile:hover .media-tile__caption a,
.media-tile:focus-within .media-tile__caption a { pointer-events: auto; }

.media-tile:hover .media-tile__caption {
  opacity: 1;
}

/* ── Add-media modal (silver box) ──────────────────────────────────────────── */
.add-media {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20,20,22,0.55);
  backdrop-filter: blur(3px);
}
.add-media[hidden] { display: none; }
.add-media__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  padding: 1.75rem;
  background: #012013;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.add-media__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.add-media__close:hover { color: var(--color-text); }
.add-media__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 1rem;
}
.add-media__tabs {
  display: flex;
  gap: 0.25rem;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 0.25rem;
  margin-bottom: 1rem;
}
.add-media__tab {
  flex: 1;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--color-muted);
  transition: background var(--transition), color var(--transition);
}
.add-media__tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.add-media__pane[hidden] { display: none; }
.add-media__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  min-height: 120px;
  padding: 1.25rem;
  border: 2px dashed rgba(0,0,0,0.22);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.45);
  transition: border-color var(--transition), background var(--transition);
}
.add-media__drop:hover { border-color: var(--color-accent); background: rgba(255,255,255,0.72); }
.add-media__drop-icon { font-size: 1.8rem; opacity: 0.5; }
.add-media__drop-text { font-size: 0.9rem; font-weight: 600; color: var(--color-text); word-break: break-word; }
.add-media__hint { font-size: 0.8rem; color: var(--color-muted); margin: 0.5rem 0 0; }
.add-media__label {
  display: block;
  margin: 1rem 0 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.add-media__label span { font-weight: 400; color: var(--color-muted); font-size: 0.8em; }
.add-media__req { color: var(--color-danger); font-weight: 700; }
.add-media__row { display: grid; grid-template-columns: 1fr 6.5rem; gap: 0.75rem; }
.add-media__row .add-media__label { margin-top: 1rem; }
.add-media__status { margin-top: 0.85rem; font-size: 0.85rem; color: var(--color-muted); }
.add-media__status.is-error { color: var(--color-danger); }
.add-media__status[hidden] { display: none; }
.add-media__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .media-tile:hover .media-tile__preview { opacity: 0; }
}

/* Directory grid — separate from .media-grid so auto-rows doesn't interfere */
.talent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  padding: var(--gap-grid);
}

/* Directory student card */
.talent-card {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface);
}

.talent-card__thumb,
.talent-card__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Transparent lead graphics: frame whole on a clean backdrop, don't crop-fill. */
.talent-card__thumb--framed {
  object-fit: contain;
  padding: 10%;
  box-sizing: border-box;
  background: transparent;
}
/* …and the CARD behind a transparent lead goes transparent too, so the artwork
   sits straight on the page — no white/grey box. Both selectors needed: the
   browse-page override otherwise wins on specificity+source order. */
.talent-card:has(.talent-card__thumb--framed),
.talent-browse-page .talent-card:has(.talent-card__thumb--framed) {
  background: transparent;
}

.talent-card__preview {
  opacity: 0;
  transition: opacity 300ms ease;
}
.talent-card:hover .talent-card__preview { opacity: 1; }

.talent-card__label {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 0.625rem 0.75rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  opacity: 0;
  transition: opacity var(--transition);
  /* Sits on a dark gradient — keep all text white and bold for legibility. */
  color: #fff;
}
.talent-card:hover .talent-card__label { opacity: 1; }
.talent-card__label,
.talent-card__name,
.talent-card__discipline,
.talent-card__credit,
.talent-card__rate { color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.talent-card__name     { font-size: 0.9375rem; }
.talent-card__discipline { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Hover meta: client credit · rate (brief §3.2) */
.talent-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}
.talent-card__credit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talent-card__rate   { white-space: nowrap; }

/* Graduate badge (brief §2, §3.2) */
.talent-card__badge,
.talent-topbar__badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--color-teal, #1a7075);
  color: #012013;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.talent-card__badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 2;
}

/* Directory filter row */
.talent-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem var(--container-pad);
}

.talent-filter-btn {
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  color: var(--color-muted);
  transition: all var(--transition);
}
.talent-filter-btn:hover,
.talent-filter-btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Lightbox ───────────────────────────────────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.97);
  align-items: center;
  justify-content: center;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  max-height: 90svh;
  display: flex;
  flex-direction: column;
}

.lightbox__media {
  width: 100%;
  height: auto;
  max-height: 85svh;
  object-fit: contain;
  cursor: pointer;
}
/* YouTube embeds have no intrinsic height — give them a 16:9 box. */
iframe.lightbox__media {
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: min(92vw, 1280px);
  margin-inline: auto;
  border: 0;
  cursor: default;
}

/* Play badge on YouTube tiles (no hover preview to signal "video"). */
.media-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  font-size: 0;                 /* hide the ► glyph; draw a crisp triangle instead */
  pointer-events: none;
  z-index: 4;
  transition: transform var(--transition), background var(--transition);
}
.media-tile__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.92rem;
  /* Always dark ink: the disc behind it is white in every theme — inheriting
     --color-text made the triangle white-on-white when the site went dark. */
  border-color: transparent transparent transparent #231f20;
  margin-left: 0.18rem;         /* optical-centre the triangle */
}
.media-tile:hover .media-tile__play { transform: translate(-50%, -50%) scale(1.08); }

.lightbox__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  font-size: 1.5rem;
  color: var(--color-muted);
  transition: color var(--transition);
  padding: 0.25rem;
}
.lightbox__close:hover { color: var(--color-text); }

.lightbox__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  width: 0%;
  transition: width 0.5s linear;
  pointer-events: none;
}

/* ── Portal ─────────────────────────────────────────────────────────────────── */
.portal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100svh - 64px);
}

/* Sticky save bar at the foot of a long portal form. Was an inline frosted
   WHITE panel from the light theme — on the deep-green page that read as a
   grey slab. Dark glass instead, so the form scrolls under it cleanly. */
.portal-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem 0;
  background: rgba(6, 39, 26, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
}

.portal-sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 2rem 0;
  position: sticky;
  top: 64px;
  height: calc(100svh - 64px);
  overflow-y: auto;
}

.portal-nav { display: flex; flex-direction: column; }
.portal-nav__item a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  transition: color var(--transition), background var(--transition);
}
.portal-nav__item a:hover,
.portal-nav__item.is-active a {
  color: var(--color-text);
  background: rgba(255,255,255,0.05);
}
.portal-nav__item.is-active a { border-left: 3px solid var(--color-accent); padding-left: calc(1.5rem - 3px); }

.portal-main { padding: 2.5rem; }
.portal-title { margin-bottom: 2rem; }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition);
}
.upload-zone:hover, .upload-zone.is-dragover {
  border-color: var(--color-accent);
}
.upload-zone__icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }
.upload-zone__hint { font-size: 0.875rem; color: var(--color-muted); margin-top: 0.5rem; }

.upload-progress {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 1rem;
  overflow: hidden;
}
.upload-progress__bar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width 0.3s ease;
}

/* Media item list in portal */
.media-item-list { display: flex; flex-direction: column; gap: 1rem; }
.media-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 1rem;
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem;
}
.media-item__thumb {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.media-item__title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.media-item__meta  { font-size: 0.8125rem; color: var(--color-muted); }
.media-item__actions { display: flex; flex-direction: column; gap: 0.5rem; }

/* Service cards */
.service-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.service-card__title    { font-weight: 700; margin-bottom: 0.375rem; }
.service-card__price    { font-size: 1.25rem; font-weight: 700; color: var(--color-accent); }
.service-card__desc     { font-size: 0.875rem; color: var(--color-muted); margin-block: 0.5rem 1rem; }
.service-card__duration { font-size: 0.8125rem; color: var(--color-muted); }

/* Hire page */
.hire-layout {
  max-width: 760px;
  margin-inline: auto;
  padding: 3rem var(--container-pad);
}

.hire-tabs { display: flex; gap: 0; margin-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); }
.hire-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -1px;
}
.hire-tab:hover { color: var(--color-text); }
.hire-tab[aria-selected="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.hire-panel { display: none; }
.hire-panel.is-active { display: block; }

/* ── Availability calendar (minimal) ──────────────────────────────────────── */
.avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-block: 1rem;
}
.avail-day {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.avail-day--header { font-weight: 600; font-size: 0.75rem; color: var(--color-muted); border: none; cursor: default; }
.avail-day--available { background: rgba(232,197,71,0.15); border-color: var(--color-accent); }
.avail-day--booked    { background: var(--color-surface); color: var(--color-muted); cursor: not-allowed; }
.avail-day--selected  { background: var(--color-accent); color: #0a0a0a; font-weight: 700; border-color: var(--color-accent); }

/* ── Admin Queue ────────────────────────────────────────────────────────────── */
.admin-queue { }
.queue-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.queue-row:last-child { border-bottom: none; }
.queue-badge {
  display: inline-flex;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.queue-badge--pending   { background: rgba(232,197,71,0.15); color: var(--color-accent); }
.queue-badge--approved  { background: rgba(71,197,100,0.15); color: #47c564; }
.queue-badge--suspended { background: rgba(232,84,71,0.15); color: var(--color-danger); }
.queue-badge--minor     { background: rgba(100,100,232,0.15); color: #6464e8; }

/* ── Alerts / notices ──────────────────────────────────────────────────────── */
.notice {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
/* `display:flex` above would otherwise override the [hidden] attribute, leaving
   empty error notices showing as a stray coloured box. */
.notice[hidden] { display: none; }
/* Quiet panels with a coloured edge. Routine "saved" confirmations were
   dropped (Sep 2026): the form coming back with its new values is the
   confirmation. What remains says something the person would not otherwise
   know (an email went, a booking changed, a document is under review), so
   it reads as one plain line: no animation, no bird, no headline. */
.notice--info,
.notice--success,
.notice--warning,
.notice--error {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.notice--error { color: var(--color-danger); }

/* Headline and detail, where a notice carries both (the password reset). */
.notice__head { font-weight: 700; font-size: 1rem; line-height: 1.2; margin: 0 0 0.15rem; }
.notice__body { color: var(--color-muted); font-size: 0.92em; margin: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .media-grid  { grid-template-columns: repeat(2, 1fr); }
  .talent-grid { grid-template-columns: repeat(2, 1fr); }
  /* clamp 3-col spans to 2 columns on tablet */
  .media-tile[data-col="3"] { grid-column: span 2; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .portal-layout { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--color-border); padding: 1rem 0; }
  .portal-nav { flex-direction: row; overflow-x: auto; }
}

@media (max-width: 768px) {
  /* Collapse the three-track nav into a dropdown panel under the bar */
  .site-header__collapse {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    /* The desktop bar rule sets height:68px — without resetting it the panel's
       background only painted one bar-height and the menu items spilled out
       transparent over the page content. */
    height: auto;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    background: #06271a;   /* solid — page content must never read through the menu */
    border-bottom: 1px solid var(--color-border);
    padding: 1.25rem var(--container-pad);
    box-shadow: 0 22px 34px rgba(0, 5, 3, 0.45);
  }
  .site-header__collapse.is-open { display: grid; }
  .site-header__center { justify-content: flex-start; }
  .site-header__hire { width: 100%; text-align: center; }
  .site-nav--lead .site-nav__list,
  .site-nav--trail .site-nav__list { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.25rem; }
  .nav-toggle { display: flex; position: absolute; right: var(--container-pad); top: 50%; transform: translateY(-50%); margin: 0; }

  .media-grid  { grid-template-columns: repeat(2, 1fr); }
  .talent-grid { grid-template-columns: repeat(2, 1fr); }
  .media-tile--wide, .media-tile[data-col="2"], .media-tile[data-col="3"] { grid-column: span 2; }

  .talent-topbar { gap: 0.75rem; }
  .talent-topbar__name { font-size: 1rem; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__legal-inner { flex-direction: column; }

  .portal-main { padding: 1.25rem; }
  .media-item { grid-template-columns: 1fr; }

  .hire-tabs .hire-tab { padding: 0.625rem 1rem; font-size: 0.875rem; }
}

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.mt-auto { margin-top: auto; }
.w-full  { width: 100%; }
.gap-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Talent browse + portfolio: silver canvas now comes from the global body
   background (assets/img/Silver.png). These pages just inherit it. ──────────── */
/* Hire landing: the header rides "negative" — mix-blend-mode: difference photo-
   inverts the lockup against the dark hero and the content that scrolls under it,
   the same trick as the talent profile. Dark page throughout, so it's always on. */
body.hire-landing-page .talent-top {
  mix-blend-mode: difference;
  backdrop-filter: none;
}
body.hire-landing-page .talent-top__logo { filter: brightness(0) invert(1); }
body.hire-landing-page .talent-top__tag,
body.hire-landing-page .talent-top__title { color: #fff; }
body.hire-landing-page .talent-burger span { background: #fff; }
body.hire-landing-page .talent-top__bar { border-bottom-color: rgba(255,255,255,0.3); }

/* ── Opening hero (split HIRE / REGISTER scene, animated characters) ────────── */
.opening-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2114 / 1080;   /* exact artwork proportions */
  overflow: hidden;
  background: transparent;     /* let the page silver flow through behind the scene */
  container-type: inline-size;  /* text sizes relative to the hero, not the viewport */
}
.opening-hero img.opening-hero__art { display: none !important; }   /* scene background hidden */
/* Brand pattern, anchored top-left, behind characters/buttons */
.opening-hero__pattern-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  z-index: 0;
  pointer-events: none;
}
.opening-hero__art,
.opening-hero__chars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Reticle as its own faint layer — nudged down; opacity 10% */
.opening-hero__reticle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;                  /* behind the seam design */
  opacity: 0.85;              /* bold, like the reference */
  pointer-events: none;
}
.opening-hero__chars { z-index: 3; pointer-events: none; }   /* animated characters overlay */
/* Left character pushed further left — left side almost touching the edge */
.opening-hero__chars#op-char-hire { transform: translateX(-7%); }
/* Right character a touch smaller and nudged toward the right edge */
.opening-hero__chars#op-char-register {
  transform-origin: bottom right;
  transform: translateX(3%) scale(0.85);
}

/* Pill buttons, level either side of centre. Sized in cqw so they stay the same
   proportion at every screen width. */
.opening-hero__text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.opening-hero__text--hire     { right: 53%; }
.opening-hero__text--register { left: 53%; }
.opening-hero__text:hover { transform: translateY(-50%) scale(1.04); }

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  width: 20vw;
  width: 20cqw;                  /* equal width → uniform buttons */
  background-color: #ffc06b;     /* brand sunrise yellow */
  border-radius: 999px;
  padding: 0.45cqw 0.45cqw 0.45cqw 1.8cqw;
  text-decoration: none;
  color: #1a1a1a;
}
.pill-button__label {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.5vw;
  font-size: 1.5cqw;
  white-space: nowrap;
  text-align: left;
}
.pill-button__icon {
  flex-shrink: 0;
  width: 3.4vw;
  width: 3.4cqw;
  height: 3.4vw;
  height: 3.4cqw;
  border-radius: 50%;
  display: block;
}


/* Pre-hide for the entrance (revealed by motion.js); visible if JS/motion is off */
.has-motion .opening-hero__art,
.has-motion .opening-hero__chars,
.has-motion .opening-hero__text { opacity: 0; }

/* ── Rāngai intro ──────────────────────────────────────────────────────────── */
.rangai-intro { padding-block: clamp(4rem, 12vh, 9rem); }
.rangai-intro__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.rangai-intro__word { margin: 0; line-height: 0; }
.rangai-intro__word img {
  width: clamp(220px, 32vw, 460px);
  height: auto;
  display: block;
}
.rangai-intro__tag {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: 700;
  text-transform: uppercase;       /* brand heading style */
  letter-spacing: -0.02em;         /* brand condensed kerning */
  line-height: 0.95;               /* tight stack — one word per line */
  text-align: left;
  color: var(--color-accent);      /* brand red */
  margin: 0;
}

/* ── Brand devices ─────────────────────────────────────────────────────────── */
.site-logo img { height: 34px; width: auto; display: block; }
.site-footer .site-logo img { height: 28px; }

.hero--brand {
  position: relative;
  background: var(--color-deep);
  color: #ffffff;
  overflow: hidden;
}
.hero--brand .hero__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.hero--brand .hero__inner { position: relative; z-index: 1; }
.hero__kicker {
  display: inline-block;
  color: var(--color-accent-2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.section-kicker {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

/* ── Nav dropdown (Forms submenu) ──────────────────────────────────────────── */
.site-nav__list > li { position: relative; }
.site-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(35,31,32,0.12);
  padding: 0.375rem;
  display: none;
  z-index: 110;
}
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { display: block; }
.site-nav__list .sub-menu a { display: block; white-space: nowrap; }

/* ── Footer socials ────────────────────────────────────────────────────────── */
.footer-socials { display: flex; gap: 1rem; margin-top: 0.75rem; }
.footer-socials a { font-size: 0.875rem; color: var(--color-muted); }
.footer-socials a:hover { color: var(--color-accent); }

/* ════ Motion system ═══════════════════════════════════════════════════════ */

/* Split text: chars rise out of clipped word containers */
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-char { display: inline-block; will-change: transform; }

/* Initial hidden states ONLY when motion is active (no-JS/reduced-motion safe) */
.has-motion [data-hero-fade] { visibility: hidden; }

/* ── Marquee band ──────────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid var(--color-border);
  padding-block: 1.1rem;
  background: var(--color-bg);
}
.marquee__track { display: inline-block; will-change: transform; }
.marquee__item {
  display: inline-block;
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-inline: 1.5rem;
}
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-accent);
}
.marquee__dot { color: var(--color-accent); padding-inline: 0.5rem; }

/* ── Stats band ────────────────────────────────────────────────────────────── */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}
.stats-band__number {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats-band__label { font-size: 0.9375rem; color: var(--color-muted); margin-top: 0.5rem; }

/* ── Course cards ──────────────────────────────────────────────────────────── */
.course-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  will-change: transform;
}
.course-card:hover { border-color: var(--color-accent); box-shadow: 0 16px 40px rgba(35,31,32,0.10); }
.course-card__date {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.course-card__title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.course-card__meta  { font-size: 0.8125rem; color: var(--color-muted); }
.course-card__desc  { font-size: 0.9375rem; color: var(--color-muted); flex: 1; }
.course-card__link  { font-size: 0.875rem; font-weight: 600; color: var(--color-accent); }

/* ── Hero decorative layers ────────────────────────────────────────────────── */
.hero__pattern {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  will-change: transform;
}
/* Camera reticle = focal point / precision pointer (brand guide p.18).
   Used SMALL, marking a focus target — never as large decoration. */
.hero__reticle {
  position: absolute;
  right: clamp(1.5rem, 8vw, 6rem);
  top: 22%;
  width: clamp(56px, 7vw, 96px);
  pointer-events: none;
  z-index: 2;
}

/* Inline reticle marker: the "precision pointer" aimed at section titles */
/* (.reticle-marker retired 2026-07-24 — the crosshair icon was removed from the
   section kickers.) */

/* ── Section heading treatment ───────────────────────────────────────────────
   One big-title voice across the site — the same heavy uppercase display face
   as the hire page's GROUP BOOKINGS / BUSINESS ACCOUNT. No index numbers, no
   gradients, no underline rules. */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  color: var(--color-text);
  margin-bottom: 1.75rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .hero__reticle { width: 44px; top: 18%; }
}

@media (max-width: 768px) {
  /* Submenus inline inside the open mobile nav (no hover on touch) */
  .site-nav.is-open .sub-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 1rem;
  }
}

/* ── Flock band (kaupapa) ──────────────────────────────────────────────────── */
/* The band is just a spacer that defines the scroll window for the fixed stage. */
.flock-band {
  position: relative;
  overflow: hidden;      /* clips the section-relative white panel to the band */
  background: #0d0d0d;   /* opaque — the band itself is never white-backed */
  color: #fff;
  min-height: 100vh;
  min-height: 100svh;    /* one page tall */
  /* Overlap neighbours by 1px so no white page background flashes through a
     sub-pixel seam at the top/bottom edge while scrolling. */
  margin-block: -1px;
}
/* The stage is anchored to the viewport; JS clips it to the band's on-screen rect,
   so forest + birds + copy stay put while the panels above/below slide over. */
.flock-fixed {
  position: absolute;   /* section-relative — no longer viewport-fixed (no bleed) */
  left: 0;
  right: 0;
  top: -25%;            /* oversized so the scroll-parallax never reveals an edge */
  height: 150%;
  z-index: 1;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  overflow: hidden;
  will-change: transform;
}
.flock-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  /* Light scrim — the multiply lighting layer above adds the rest of the shade. */
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.15);
}

#flock-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Canopy light/shade layer ABOVE the birds. Heavily blurred so it carries only
   broad light/shade — not leaf texture — so birds stay solid (not see-through),
   just darker under shade and bright over sunlit gaps. The negative inset keeps
   the blur's soft edges out of the visible window. */
.flock-shadow {
  position: absolute;
  inset: -60px;
  z-index: 2;
  background-size: cover;
  background-position: center;
  filter: blur(34px);
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
/* Each bird is an animated GIF positioned by JS (transform = translate + rotate). */
.flock-bird {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  pointer-events: none;
  will-change: transform;
  user-select: none;
}
.flock-band__copy {
  position: relative;
  z-index: 3;   /* above the birds + lighting layer within the fixed stage */
  padding-block: 4rem;
  pointer-events: none;   /* the flock reacts to the cursor through the text */
}

/* White left half over the forest — mirrored diagonal of the discipline split.
   Lives inside the fixed stage so it stays anchored with the forest + birds. */
.flock-split {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #fff;
  clip-path: polygon(0 0, 45% 0, 55% 100%, 0 100%);  /* opposite lean to the split */
  display: flex;
  align-items: center;
}
.flock-split__inner {
  max-width: 34ch;
  padding-left: clamp(1.5rem, 6vw, 6rem);
  padding-right: 1.5rem;
  color: var(--color-text);   /* ink / black */
}
.flock-def__logo {
  display: block;
  width: clamp(160px, 22vw, 300px);
  height: auto;
  margin-bottom: 1.5rem;
}
.flock-def__meaning {
  font-family: var(--font-sans);   /* Avenir Next */
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}
/* Masked words for the rise-in reveal (see motion.js) */
.flock-def__meaning .rw { display: inline-block; overflow: hidden; vertical-align: top; }
.flock-def__meaning .rw-i { display: inline-block; will-change: transform; }
@media (max-width: 768px) {
  /* widen the white area so the copy fits on narrow screens */
  .flock-split { clip-path: polygon(0 0, 78% 0, 88% 100%, 0 100%); }
  .flock-split__inner { max-width: 30ch; }
}

/* ── Education / Services diagonal split ───────────────────────────────────── */
.split {
  position: relative;
  height: 100vh;
  height: 100svh;   /* full screen, accounting for mobile browser chrome */
  overflow: hidden;
  /* Just the silver now (was diagonal colour halves) — scatter-point cloud + labels on top */
  background: #012013;
  isolation: isolate;
  container-type: inline-size;   /* cqw units resolve to the split's width */
}
/* Colour halves retired — the split is a flat silver panel now */
.split__fill { display: none; }
/* Diagonal colour halves — gentle near-vertical seam (55% top → 45% bottom).
   The seam shifts toward the inactive side when a discipline is selected, so the
   active colour grows across a bit (.is-edu / .is-svc set by JS). */
.split__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Settle (return to the resting seam) is slow — "falls back to meet the shape above" */
  transition: clip-path 4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
}
.split__fill--edu { clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%); }       /* left */
.split__fill--svc { clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%); } /* right */
/* Growing out is quick, with a slight overshoot/pop */
.split.is-edu .split__fill,
.split.is-svc .split__fill {
  transition: clip-path 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.45s ease;
}

/* Education active → its colour grows toward Services */
.split.is-edu .split__fill--edu { clip-path: polygon(0 0, 65% 0, 55% 100%, 0 100%); }
.split.is-edu .split__fill--svc { clip-path: polygon(65% 0, 100% 0, 100% 100%, 55% 100%); }
/* Services active → its colour grows toward Education */
.split.is-svc .split__fill--edu { clip-path: polygon(0 0, 45% 0, 35% 100%, 0 100%); }
.split.is-svc .split__fill--svc { clip-path: polygon(45% 0, 100% 0, 100% 100%, 35% 100%); }

/* One shared particle cloud spanning the whole section (positioned by JS) */
.split__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.split__content {
  position: absolute;
  top: 50%;
  z-index: 3;
  max-width: 36%;
  color: var(--color-text);           /* dark labels on the silver panel */
  text-align: center;                 /* centred within each side */
  transform: translate(-50%, -50%);
}
.split__content--edu { left: 25%; }   /* middle of the left half */
.split__content--svc { left: 75%; }   /* middle of the right half */

.split__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1;
  margin: 0 0 1rem;
}
.split__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centre the discipline buttons under the title */
  gap: 0.35rem;
}
.split__item {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.1rem 0;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  letter-spacing: -0.005em;
  transition: color 0.2s ease, transform 0.2s ease;
  text-align: inherit;
}
.split__item:hover,
.split__item:focus-visible,
.split__item.is-active {
  color: var(--color-accent);
  outline: none;
}
.split__content--edu .split__item:hover,
.split__content--edu .split__item.is-active { transform: translateX(4px); }
.split__content--svc .split__item:hover,
.split__content--svc .split__item.is-active { transform: translateX(-4px); }

@media (max-width: 768px) {
  .split { height: 85svh; }
  .split__content { max-width: 44%; }
}

/* ── Red→orange brand gradient utilities ───────────────────────────────────── */
/* (.text-gradient / .rule-gradient / .section-head__index retired 2026-07-24 —
   section titles now use the plain .section-title voice.) */

/* ── Header CTA ────────────────────────────────────────────────────────────── */
.site-header__cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.site-header__login {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
}
.site-header__login:hover { color: var(--color-text); }

@media (max-width: 768px) {
  /* On mobile keep the Join button visible next to the hamburger; hide Log in
     (it lives in the open nav drawer too) */
  .site-header__cta { gap: 0.5rem; margin-left: auto; }
  .site-header__login { display: none; }
  .nav-toggle { margin-left: 0; }
}

/* ── CTA band (front page / directory) ─────────────────────────────────────── */
.cta-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-block: 1px solid var(--color-border);
}
.cta-band__cell {
  padding: 3.5rem var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.cta-band__cell + .cta-band__cell { border-left: 1px solid var(--color-border); }
.cta-band__cell--accent { background: var(--color-accent); color: #fff; }
.cta-band__cell--accent .text-muted { color: rgba(255,255,255,0.8); }
@media (max-width: 640px) {
  .cta-band__cell + .cta-band__cell { border-left: none; border-top: 1px solid var(--color-border); }
}

/* ── Pattern ribbon + mission media (fixes tall-SVG overflow) ──────────────── */
.hero__pattern--ribbon {
  width: clamp(48px, 7vw, 96px);
  height: 100%;
  right: 0;            /* flush against the hero's right edge */
  top: 0;
  object-fit: cover;
  object-position: top;
  opacity: 0.35;
}
/* Editorial media: sharp, gallery-clean, revealed by a cinematic wipe */
.mission__media { position: relative; }
.mission__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  will-change: transform;
}
.mission__media figure { margin: 0; overflow: hidden; }
.mission__media figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.mission__media figcaption::before {
  content: '';
  width: 28px;
  height: 3px;
  align-self: center;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
}

@media (max-width: 768px) {
  .hero__pattern--ribbon { display: none; }   /* decoration only — clears mobile */
  .mission__media img { aspect-ratio: 4 / 3; }
}

/* ── Portal dashboard components ───────────────────────────────────────────── */
.portal-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.portal-stat__label { font-size: 0.8125rem; color: var(--color-muted); margin-bottom: 0.375rem; }
.portal-stat__value { font-size: 1.625rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.portal-stat__value small { font-size: 0.8125rem; font-weight: 400; color: var(--color-muted); }
.portal-stat--money .portal-stat__value { color: var(--color-accent); }

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.portal-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}
.portal-alert a { white-space: nowrap; }

.income-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.income-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.income-table td { padding: 0.75rem; border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.income-table tr:last-child td { border-bottom: none; }
.pay-badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.pay-badge--paid      { background: #e3f2ec; color: var(--color-success); }
.pay-badge--scheduled { background: #fdf0e3; color: #9a5b00; }

/* ── Media Editor (portal My Media WYSIWYG) ─────────────────────────────────── */
.media-editor { display: flex; flex-direction: column; gap: 0; }

.media-editor__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.media-editor__header-actions {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  flex-shrink: 0;
}
.media-editor__upload-btn { position: relative; overflow: hidden; }

/* Dark preview shell matches talent-profile-page palette */
.media-editor__preview {
  background: #0a0a0a;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: var(--gap-grid);
  margin-bottom: 0;
}

.media-editor__empty {
  color: rgba(255,255,255,0.35);
  text-align: center;
  padding: 4rem 2rem;
  font-size: 0.9375rem;
}

/* The editor grid IS the .media-grid — tiles are exactly the public size */
.media-editor__grid { margin: 0; }

/* ── Per-tile editing overlays ───────────────────────────────────────────────── */
.media-editor__tile { cursor: grab; user-select: none; }
.media-editor__tile:active { cursor: grabbing; }

/* Selection ring */
.media-editor__tile.is-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--color-accent);
  pointer-events: none;
  z-index: 20;
}

/* Drag-in-progress — ghost remains in grid but fades */
.media-editor__tile.is-dragging { opacity: 0.35; cursor: grabbing; }

/* Delete fade-out */
.media-editor__tile.is-deleting {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Controls overlay — fades in on hover / always visible when selected */
.media-editor__tile-controls {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0;
  opacity: 0;
  transition: opacity 180ms;
  pointer-events: none;
  z-index: 15;
}
.media-editor__tile:hover .media-editor__tile-controls,
.media-editor__tile.is-selected .media-editor__tile-controls {
  opacity: 1;
  pointer-events: auto;
}

.media-editor__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  line-height: 1;
  padding-top: 0.125rem;
}

.media-editor__tile-btns {
  display: flex;
  gap: 0.25rem;
}

.media-editor__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  transition: background 120ms;
  border: none;
  cursor: pointer;
}
.media-editor__btn:hover { background: rgba(255,255,255,0.2); }

/* Drag handle — bottom-right corner, barely visible */
.media-editor__drag-handle {
  position: absolute;
  bottom: 0.375rem;
  right: 0.375rem;
  color: rgba(255,255,255,0.3);
  font-size: 1rem;
  pointer-events: none;
  z-index: 5;
  line-height: 1;
  opacity: 0;
  transition: opacity 180ms;
}
.media-editor__tile:hover .media-editor__drag-handle { opacity: 1; }

/* Size badge — shows current col×row in bottom-left */
.media-editor__size-badge {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 180ms;
}
.media-editor__tile:hover .media-editor__size-badge,
.media-editor__tile.is-selected .media-editor__size-badge { opacity: 1; }

/* Pin badge */
.media-editor__pin-badge {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 8;
  backdrop-filter: blur(4px);
  background: rgba(201,65,16,0.25);
  color: #f08a5a;
  border: 1px solid rgba(201,65,16,0.35);
}

/* ── Hero picker (choose an existing media item) ──────────────────────────────── */
.hero-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
/* Respect the hidden attribute (class display above would otherwise override it). */
.hero-picker[hidden] { display: none; }
#yt-panel { display: flex; }
#yt-panel[hidden] { display: none; }
.hero-picker__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: min(720px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.hero-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  padding: 1rem;
  overflow-y: auto;
}
.hero-picker__item {
  position: relative;
  aspect-ratio: 16/10;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: #111 center/cover no-repeat;
  cursor: pointer;
  transition: border-color 120ms;
}
.hero-picker__item:hover { border-color: var(--color-accent); }

/* ── Edit panel ───────────────────────────────────────────────────────────────── */
.media-editor__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  animation: panel-slide-down 0.18s ease;
}
@keyframes panel-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.media-editor__panel-inner {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.media-editor__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.media-editor__panel-close {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background 120ms;
}
.media-editor__panel-close:hover { background: var(--color-accent); color: #fff; }

/* ── Save bar ─────────────────────────────────────────────────────────────────── */
.media-editor__savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem 0 0.25rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1rem;
}
.media-editor__dirty-msg {
  font-size: 0.875rem;
  color: var(--color-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .media-editor__header { flex-direction: column; gap: 0.75rem; }
  .media-editor__panel-inner > div[style*="grid-template-columns"] {
    display: flex; flex-direction: column;
  }
}

/* ── Size picker popover ───────────────────────────────────────────────────── */
.size-picker {
  position: fixed;
  background: rgba(8,8,8,0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  min-width: 130px;
  animation: picker-in 0.12s ease;
  transform-origin: top right;
}
@keyframes picker-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.size-picker__label-top {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;
}

.size-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(3, 22px);
  gap: 3px;
}

.sp-cell {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: background 60ms;
  padding: 0;
}
.sp-cell.is-hover { background: rgba(255,255,255,0.3); }
.sp-cell.is-active { background: var(--color-accent); }

.size-picker__readout {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Row labels on the left of the picker grid */
.size-picker__inner {
  display: flex;
  gap: 0.375rem;
  align-items: flex-start;
}
.size-picker__row-labels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 0;
}
.size-picker__row-labels span {
  height: 22px;
  font-size: 0.5625rem;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 1rem;
  font-variant-numeric: tabular-nums;
}
.pay-badge--upcoming  { background: var(--color-surface); color: var(--color-muted); }

/* ════════════════════════════════════════════════════════════════════════════
   TALENT BROWSE + PORTFOLIO — boss redesign
   Centred logo lockup + burger, left filter/info sidebar, photo grid.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Shared top bar ────────────────────────────────────────────────────────── */
.talent-top {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Transparent so the body's silver gradient runs unbroken behind the header.
     A light frosted blur keeps the lockup legible if content scrolls under. */
  background: transparent;
  backdrop-filter: blur(8px);
}
.admin-bar .talent-top { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .talent-top { top: 46px; } }

.talent-top__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 0.75rem var(--container-pad);
  margin: 0 var(--container-pad);
  border-bottom: 1.5px solid var(--color-text);
}

/* Logo + small stacked tagline, centred */
.talent-top__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.talent-top__logo { height: 34px; width: auto; display: block; }
.talent-top__tag {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.6875rem;
  color: var(--color-text);
}

/* Burger — pinned right of the centred logo */
.talent-burger {
  position: absolute;
  right: var(--container-pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 26px;
  padding: 0;
}
.talent-burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.talent-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.talent-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.talent-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Sub-bar (portfolio): Hide · name · Book Me */
.talent-top__sub {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem var(--container-pad);
  margin: 0 var(--container-pad);
}
.talent-top__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
}
.talent-top__back:hover { color: var(--color-darkred); }
.talent-top__title {
  justify-self: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: -0.01em;
}
.talent-top__cta {
  justify-self: end;
  background: var(--color-accent-2);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 1.4rem;
  border-radius: var(--radius-pill);
  transition: background var(--transition), transform var(--transition);
}
.talent-top__cta:hover { background: var(--color-accent); transform: translateY(-1px); }
.talent-top__cta-spacer { justify-self: end; }

/* Slide-down site menu */
.talent-menu {
  position: absolute;
  right: var(--container-pad);
  top: calc(100% - 0.25rem);
  min-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
  padding: 0.5rem;
  z-index: 70;
}
.talent-menu[hidden] { display: none; }
.talent-menu__list { display: flex; flex-direction: column; }
.talent-menu__list a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  transition: background var(--transition);
}
.talent-menu__list a:hover { background: var(--color-surface); }

/* ── Shell layout (sidebar + content) ──────────────────────────────────────── */
.talent-shell {
  display: grid;
  grid-template-columns: clamp(180px, 18vw, 240px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.75rem var(--container-pad) 4rem;
  align-items: start;
}

/* ── Filter sidebar (browse) ───────────────────────────────────────────────── */
.tf-panel { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 96px; }

.tf-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  position: relative;
}

/* Typo-tolerant search suggestions */
.tf-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
  z-index: 40;
  overflow: hidden;
}
.tf-suggest[hidden] { display: none; }
.tf-suggest__hint {
  display: block;
  padding: 0.4rem 0.7rem 0.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.tf-suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--color-text);
}
.tf-suggest__item:hover,
.tf-suggest__item.is-active { background: var(--color-surface); }
.tf-search__label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.0625rem;
  white-space: nowrap;
}
.tf-search__input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  background: rgba(255,255,255,0.7);
}
.tf-search__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.tf-group { display: flex; flex-direction: column; gap: 0.2rem; }
.tf-group__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
/* Borderless select to match the clean mockup (bold label + plain value).
   width/max-width matter: a select's intrinsic width is its WIDEST option
   (long institution names ~330px), and grid tracks won't shrink below that —
   on a phone two such columns pushed the whole panel to ~680px and the page
   scrolled sideways. Cap it to the track and ellipsise instead. */
.tf-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-muted);
  padding: 0 1.1rem 0 0;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6a6b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.tf-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Location filter — typeable field with the NZ places datalist */
.tf-loc-input {
  border: none;
  border-bottom: 1.5px solid var(--color-border);
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 0.15rem 0;
  width: 100%;
}
.tf-loc-input::placeholder { color: var(--color-muted); }
.tf-loc-input:focus { outline: none; border-bottom-color: var(--color-accent); }
.tf-loc-readout { font-size: 0.78rem; color: var(--color-muted); margin: 0.3rem 0 0; }

.tf-group--check .tf-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.tf-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-check__box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-text);
  border-radius: 3px;
  display: inline-block;
  position: relative;
  flex: none;
  order: 2;
}
.tf-check__text { order: 1; }
.tf-check input:checked + .tf-check__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.tf-check input:checked + .tf-check__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tf-check input:focus-visible + .tf-check__box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Browse content (sort + grid) ──────────────────────────────────────────── */
.talent-browse { min-width: 0; }
.talent-browse__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  /* Drop off the rule line so SORT BY lines up with the SEARCH row */
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.tf-sort__label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.tf-sort {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.7);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-accent);
  padding: 0.2rem 1.8rem 0.2rem 0.7rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e83322' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

/* Browse cards are a touch more square than 16:9 to match the mockup tiles */
.talent-browse-page .talent-grid { padding: 0; gap: var(--gap-grid); }
.talent-browse-page .talent-card { aspect-ratio: 4 / 3; background: #e7e5e2; }

.talent-browse__empty,
.talent-browse__noresults,
.talent-browse__loading {
  padding: 3rem 0;
  color: var(--color-muted);
  text-align: center;
}

.talent-browse__loading {
  padding: 1.5rem 0;
}

/* Infinite-scroll trip wire — sits just below the grid, invisible. */
.talent-sentinel {
  width: 100%;
  height: 1px;
}

/* ── Portfolio info sidebar ────────────────────────────────────────────────── */
/* Portfolio layout: full-width gallery on top, profile facts as a row underneath */
.talent-shell.talent-shell--profile {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}
.talent-shell--profile .media-grid { order: 1; width: 100%; }
.tp-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.talent-shell--profile .tp-info {
  order: 2;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem 2.75rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}
.tp-info__row { display: flex; flex-direction: column; gap: 0.15rem; }
.tp-info__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.tp-info__value { font-size: 0.9rem; color: var(--color-muted); }
.tp-info__line { display: block; }
.tp-info__value--verified[data-verified="1"] { color: var(--color-success); font-weight: 700; }
.tp-info__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-teal);
  color: var(--color-deep);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Profile media grid: drop the dark canvas, sit on the light shell */
.talent-profile-page .media-grid { padding: 0; }
.talent-profile-page .media-tile { background: #e7e5e2; }
/* …except transparent artwork, which blends with the page itself. */
.talent-profile-page .media-tile[data-transparent="1"] { background: transparent; }

/* Portfolio: the sticky header goes photo-negative once the gallery scrolls
   beneath it — white content + difference blend inverts against each tile, so
   it stays legible over both dark and light imagery (images still show through). */
.talent-top.is-neg {
  mix-blend-mode: difference;
  backdrop-filter: none;
}
.talent-top.is-neg .talent-top__logo { filter: brightness(0) invert(1); }
.talent-top.is-neg .talent-top__tag,
.talent-top.is-neg .talent-top__title,
.talent-top.is-neg .talent-top__back { color: #fff; }
.talent-top.is-neg .talent-burger span { background: #fff; }
.talent-top.is-neg .talent-top__bar { border-bottom-color: rgba(255,255,255,0.3); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .talent-shell {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .tf-panel, .tp-info { position: static; }
  .tf-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
  }
  /* Grid items default to min-width:auto — without this the widest select
     dictates the track and the panel overflows the phone viewport. */
  .tf-panel > * { min-width: 0; }
  .tf-search { grid-column: 1 / -1; }
  .tp-info {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
  }
}
@media (max-width: 600px) {
  .talent-top__tag { display: none; }
  .talent-browse-page .talent-grid,
  .talent-profile-page .media-grid { grid-template-columns: repeat(2, 1fr); }
  .talent-top__title { font-size: 1.05rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   HIRE LANDING — marketing page that funnels into /talent
   ════════════════════════════════════════════════════════════════════════════ */

/* "Login / Register" link under the burger */
.talent-top__account {
  position: absolute;
  right: var(--container-pad);
  bottom: 9px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--transition);
}
.talent-top__account:hover { color: var(--color-accent); }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hire-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #000;
  color: #fff;
  padding: clamp(2.5rem, 7vw, 5rem) var(--container-pad) clamp(3rem, 9vw, 6rem);
}
/* Video hero: full-bleed loop behind the content, same gradient as the old
   still so the type stays readable over bright frames. Sized to own the first
   screen below the ~64px sticky header, leaving ~60px of the next section
   peeking as a scroll cue; content is vertically centred against the footage.
   svh (not vh) so it doesn't jump when mobile browser chrome shows/hides. */
.hire-hero--video {
  overflow: hidden;
  min-height: calc(100vh - 69px);      /* fallback for browsers without svh */
  min-height: calc(100svh - 69px);     /* fills to the fold below the 68px header and its hairline: no band of the next section */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 6vh, 4rem);
}
.hire-hero--video .hire-hero__inner { width: 100%; }
@media (max-width: 640px) {
  /* Phones: let it breathe to full height minus header — the stacked title +
     search + three CTAs need the room, and a peek still lands naturally. */
  .hire-hero--video { min-height: calc(100vh - 4rem); min-height: calc(100svh - 4rem); }
}
.hire-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* No overlay on the video — a text-shadow keeps the type readable instead.
   (Not on the fluid-canvas variant: transparent glyphs would smudge.) */
.hire-hero--video .hire-hero__inner { position: relative; z-index: 2; }
.hire-hero--video .hire-hero__title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.hire-hero--video .hire-hero__title--fluid { text-shadow: none; }
.hire-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.hire-hero__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(2.75rem, 8vw, 6rem);
  color: #fff;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
/* Mouse-reactive fluid rendered into the glyphs (hire-fluid.js, /hire only) */
.hire-fluid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hire-hero__title--fluid { color: transparent; }

.hire-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.96);
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1.5rem;
  max-width: 820px;
  margin-bottom: 1.1rem;
}
.hire-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.55rem 0;
}
.hire-search__input:focus { outline: none; }
.hire-search__btn {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-accent-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.hire-search__btn:hover { background: var(--color-accent); }

/* Hero search — location field */
.hire-search__sep { flex: none; width: 1px; height: 26px; background: rgba(0,0,0,0.18); }
.hire-search__pin { flex: none; color: var(--color-muted); font-size: 1.15rem; line-height: 1; }
.hire-search__loc {
  flex: 0 1 220px;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.55rem 0;
}
.hire-search__loc:focus { outline: none; }
/* The dark-theme global input rule gives every text field its own dark box +
   border; inside the pill that reads as a box-in-a-pill. Blend them back in —
   the pill is the only container we want. (Compound selector out-ranks the
   input[type=...] rule.) */
.hire-search .hire-search__input,
.hire-search .hire-search__loc {
  background: transparent;
  border: none;
}
@media (max-width: 560px) {
  .hire-search { flex-wrap: wrap; border-radius: 20px; }
  .hire-search__sep { display: none; }
  .hire-search__loc { flex: 1 1 100%; border-top: 1px solid rgba(0,0,0,0.12); padding-top: 0.6rem; }
}

.hire-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 820px; }

/* Phones: bigger hero title + chunkier CTA text for a punchier, more legible
   above-the-fold. Title floor lifts well above the desktop clamp's minimum. */
@media (max-width: 640px) {
  .hire-hero__title { font-size: clamp(3.4rem, 14vw, 4.5rem); }
  /* Compound selector so it out-ranks the base .hire-cta rule that follows it
     in source order (media queries don't add specificity). */
  .hire-hero__ctas .hire-cta { font-size: 1.1rem; padding: 0.7rem 1.4rem; }
}
.hire-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  /* "CButton" sweep — a BRIGHT brand fill grows in from the left on hover */
  background-color: rgba(0,0,0,0.45);
  background-image: linear-gradient(var(--color-accent-2), var(--color-accent-2)); /* orange */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  background-origin: border-box;   /* fill covers the full button, under the transparent-on-hover border */
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition), border-color var(--transition);
}
/* Bright fills need BLACK text/arrow to stay legible */
.hire-cta:hover { background-size: 100% 100%; color: #000; border-color: transparent; }
.hire-cta__arrow {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  transition: color var(--transition), transform var(--transition);
}
.hire-cta:hover .hire-cta__arrow { color: #000; transform: translateX(3px); }
/* Each pill fills with a different bright on hover — the resting outline matches
   its fill colour (same treatment as the production-services category pills). */
.hire-cta { border-color: var(--color-accent-2); }
.hire-hero__ctas .hire-cta:nth-child(2) { background-image: linear-gradient(var(--color-yellow), var(--color-yellow)); border-color: var(--color-yellow); } /* yellow */
.hire-hero__ctas .hire-cta:nth-child(3) { background-image: linear-gradient(var(--color-ocean), var(--color-ocean));   border-color: var(--color-ocean); } /* light blue */

/* ── Sections ──────────────────────────────────────────────────────────────── */
.hire-section {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--container-pad);
}
.hire-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: 1.75rem;
}

/* Popular Services strip (Sep 2026, direction 1 of the popular round): the
   cards take the section's whole width, so they line up with the title and
   the sections above and below. Prev and next sit in the title row, top
   right, as small round outline buttons that fill on hover the way the
   page's other buttons do. "1 to 5 of 10" sits beside them. */
.hire-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; }
.hire-section__head .hire-section__title { margin-bottom: 0; }
.pop-nav { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.35rem; }
.pop-nav[hidden] { display: none; }
.pop-nav__count { font-size: 0.85rem; color: var(--color-muted); margin-right: 0.35rem; font-variant-numeric: tabular-nums; }
.pop-nav__count:empty { display: none; }
@media (max-width: 560px) {
  .hire-section__head { flex-wrap: wrap; }
  .pop-nav { width: 100%; justify-content: flex-end; padding-bottom: 0; }
}
.pop-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  border: 1.5px solid var(--color-accent-2);
  background-color: transparent;
  background-image: linear-gradient(var(--color-accent-2), var(--color-accent-2));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  background-origin: border-box;
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition), border-color var(--transition), opacity var(--transition);
}
.pop-arrow:hover:not(:disabled) { background-size: 100% 100%; color: #000; border-color: transparent; }
.pop-arrow:disabled { opacity: 0.35; cursor: default; }
.pop-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0.25rem 0 0.5rem;
}
.pop-track::-webkit-scrollbar { display: none; }
/* Cards sized so exactly 5 fill the row: no partial card cut off; the rest
   overflow and are revealed whole by the arrows. */
.pop-card { flex: 0 0 calc((100% - 4 * 1rem) / 5); scroll-snap-align: start; }
.pop-card:hover .pop-card__label { text-decoration: underline; text-underline-offset: 3px; }
.pop-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #ddd center/cover no-repeat;
  background-image: linear-gradient(135deg, var(--color-teal), var(--color-ocean));
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* Label: plain bold text under the picture. It used to be an outlined pill,
   which read as a button. */
.pop-card__label {
  display: block;
  margin: 0.7rem 0 0;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--color-text);
  white-space: normal;
  overflow-wrap: break-word;
}

/* Group Bookings */
.hire-group__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.hire-group__text p { margin-bottom: 1rem; font-size: 0.95rem; max-width: 34ch; }
.hire-group__imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.hire-group__img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #ddd center/cover no-repeat;
}

/* Wide placeholder CTAs */
.hire-wide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  /* See-through GREEN at rest (the page shows through); a BRIGHT brand fill
     sweeps in from the left on hover (dark ink text/arrow once filled). */
  background-color: transparent;
  background-image: linear-gradient(var(--color-accent-2), var(--color-accent-2)); /* orange */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  background-origin: border-box;   /* fill covers the full button, under the transparent-on-hover border */
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition), border-color var(--transition);
}
.hire-wide-btn { border-color: var(--color-accent-2); } /* outline matches the fill */
.hire-wide-btn:hover { background-size: 100% 100%; color: #000; border-color: transparent; }
.hire-wide-btn[data-placeholder] { cursor: default; }
.hire-wide-btn .hire-cta__arrow {
  color: var(--color-accent);
  transition: color var(--transition), transform var(--transition);
}
.hire-wide-btn:hover .hire-cta__arrow { color: #000; transform: translateX(3px); }
.hire-biz .hire-wide-btn { background-image: linear-gradient(var(--color-ocean), var(--color-ocean)); border-color: var(--color-ocean); } /* light blue */

/* Business Account features */
.hire-biz__features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.hire-biz__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}
.hire-biz__icon { color: var(--color-text); line-height: 0; }
.hire-biz__icon img { width: 84px; height: 84px; object-fit: contain; display: block; }
.hire-biz__label { font-weight: 700; font-size: 0.9rem; }

@media (max-width: 1024px) {
  .pop-card { flex-basis: calc((100% - 3 * 1rem) / 4); } /* 4 across */
}
@media (max-width: 768px) {
  .hire-group__body { grid-template-columns: 1fr; }
  .hire-biz__features { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .pop-card { flex-basis: calc((100% - 2 * 1rem) / 3); } /* 3 across */
}
@media (max-width: 560px) {
  .pop-card { flex-basis: calc((100% - 1rem) / 2); } /* 2 across */
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOKING FORM (hire a student) — wireframe rebuild
   ════════════════════════════════════════════════════════════════════════════ */
.booking-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.5rem var(--container-pad) 3rem;
}
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* ── Onboarding wizard (reuses the booking-form layout) ────────────────────── */
/* Drop the right column's fields so the Travel/Vehicle pills line up with the
   left's first input (the left has a subhead above First Name that the right lacks). */
.onb-form .booking-col--right .booking-h--right + .bk-row { margin-top: 2.85rem; }
.onb-form select.bk-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6a6b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  cursor: pointer;
}
.onb-mini-label {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  margin: 1.4rem 0 0.6rem;
}
.onb-days { display: flex; gap: 0.45rem; justify-content: center; flex-wrap: wrap; }
.onb-day input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.onb-day span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.onb-day input:checked + span { background-color: var(--color-accent-2); color: var(--color-ink); border-color: transparent; }
.onb-day input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.onb-rate { position: relative; flex: 1; }
.onb-rate__prefix { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--color-muted); pointer-events: none; }
.onb-rate .bk-input { padding-left: 1.9rem; }
.onb-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0.55rem 0;
  cursor: pointer;
}
.onb-consent input { margin-top: 0.2rem; flex: none; }
.onb-save-later {
  display: block;
  margin: 0.85rem auto 0;
  background: none;
  border: 0;
  color: var(--color-muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
}
.onb-save-later:hover { color: var(--color-text); }

/* Step headers (two big lockups, left + right) */
.onb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; max-width: 1100px; margin: 0 auto 1.75rem; }
.onb-head--single { justify-content: flex-start; }
.onb-head .booking-h { margin: 0; }

/* Step 2 — services */
.onb-services, .onb-money { max-width: 1100px; margin: 0 auto; }
.onb-services__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin-bottom: 2rem; }
.onb-search { display: flex; align-items: center; gap: 1rem; }
.onb-search__label { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.onb-search__input { flex: 1; min-width: 0; border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); padding: 0.5rem 1rem; font: inherit; background: rgba(255, 255, 255, 0.7); }
.onb-search__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.onb-services__hint { font-size: 0.9rem; color: var(--color-muted); margin: 0; }

.onb-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem 1.25rem; align-items: start; }
.onb-cat__pill {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1.5px solid var(--color-text);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1rem;
  background: rgba(255, 251, 238, 0.08);
  transition: background var(--transition), color var(--transition);
}
.onb-cat__pill::-webkit-details-marker { display: none; }
.onb-cat__pill::marker { content: ''; }
/* Replace the browser's dashed focus outline on the <summary> with a clean ring
   (no ring on mouse click; keyboard users still get one). */
.onb-cat__pill:focus { outline: none; }
.onb-cat__pill:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.onb-cat[open] .onb-cat__pill { background-color: var(--color-accent-2); color: var(--color-ink); border-color: transparent; }
.onb-cat__count { background: var(--color-ink); color: var(--color-accent-2); font-size: 0.7rem; border-radius: 999px; padding: 0 0.4rem; min-width: 1.1rem; text-align: center; }
.onb-cat__count[hidden] { display: none; }
.onb-cat__list { padding: 0.65rem 0.5rem 0.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
.onb-svc { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; cursor: pointer; }

/* Step 3 — pricing */
.onb-soon { background: rgba(0, 0, 0, 0.05); border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.85rem; margin: 1rem 0; }
.onb-rates { width: 100%; }
.onb-rates__head { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--color-border); }
.onb-rates__row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid var(--color-border); }
.onb-rates__name { font-weight: 600; }
.onb-rates__rate { display: flex; align-items: center; gap: 0.35rem; }
.onb-rates__rate .form-input { width: 90px; }

/* Wizard footer nav */
.onb-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1100px; margin: 2.5rem auto 0; flex-wrap: wrap; }
.onb-footer__right { display: flex; gap: 0.75rem; align-items: center; }
.onb-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; border-radius: var(--radius-pill); padding: 0.85rem 2rem; transition: filter var(--transition); text-decoration: none; }
.onb-btn:hover { filter: brightness(1.05); }
/* Rest-state button colours (wireframe) — the brand sweep wipes over them on hover */
.onb-btn--save { background-color: var(--color-teal); color: var(--color-deep); }
.onb-btn--back { background-color: #ffc06b; color: var(--color-ink); }
/* NEXT / Finish — outlined at rest (transparent fill, 2px orange stroke); the rainbow wipe fills it on hover */
.onb-btn--next,
.onb-form .bk-submit {
  background-color: transparent;
  border: 2px solid var(--color-accent-2);
  color: var(--color-accent-2);
}
.onb-btn--next { min-width: 9rem; }

/* ── Multicolour brand wipe (red · orange · yellow · light blue) ───────────────
   Only on HOVER: a multicolour fill grows left → right across the control
   (mirrors the /hire CTA wipe). At rest the control keeps its solid colour. */
.onb-btn,
.onb-form .bk-submit,
.onb-cat__pill,
.onb-day span {
  background-image: linear-gradient(var(--color-ocean), var(--color-ocean));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  background-origin: border-box;   /* fill covers the full button, under the (transparent-on-hover) border */
  transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition), border-color var(--transition);
}
.onb-btn:hover,
.onb-form .bk-submit:hover,
.onb-cat__pill:hover,
.onb-day:hover span {
  background-image: linear-gradient(var(--color-ocean), var(--color-ocean));
  background-size: 100% 100%;
  /* Restated on purpose — see the note on the rainbow rule below. */
  background-repeat: no-repeat;
  background-origin: border-box;
  color: var(--color-text);
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}
/* On the plain mint sweep, dark type; cream would vanish into the mint. */
.onb-cat__pill:hover, .onb-day:hover span, .onb-btn--save:hover, .onb-btn--back:hover { color: var(--color-deep); text-shadow: none; }
/* NEXT / Finish only — multicolour rainbow wipe (red · orange · yellow · light blue) */
.onb-btn--next, .onb-btn--next:hover,
.onb-form .bk-submit, .onb-form .bk-submit:hover {
  background-image: linear-gradient(90deg,
    var(--color-accent), var(--color-accent-2), var(--color-yellow), var(--color-ocean));
  /* `.bk-submit:hover` sets the `background` SHORTHAND, which at equal
     specificity (and later in this file) silently resets repeat to `repeat` and
     origin to `padding-box`. The fill then tiles inside the padding box and its
     tail colour leaks into the 2px border strip — a teal sliver at the pill's
     left edge. Restate both so the gradient spans the whole button, once. */
  background-repeat: no-repeat;
  background-origin: border-box;
}
/* Day circles fill FULLY with brand orange on hover/selected — a left→right wipe
   looks incomplete on a round shape, so use a clean uniform fill instead. */
.onb-day span {
  background-image: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.onb-day:hover span,
.onb-day input:checked + span {
  background-color: var(--color-accent-2);
  background-image: none;
  color: var(--color-ink);
  border-color: transparent;
  text-shadow: none;
}

@media (max-width: 900px) {
  .onb-head { flex-direction: column; gap: 0.5rem; }
  .onb-head .booking-h--right { text-align: left; }
  .onb-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .onb-services__intro { grid-template-columns: 1fr; }
}

.booking-h {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 1.5rem;
}
.booking-h--right { text-align: right; }
.booking-h__name { color: var(--color-accent); }

/* Inputs — rounded pill/box outline like the wireframe */
.bk-row { margin-bottom: 0.85rem; }
.bk-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.bk-row--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.bk-row--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.bk-target-title { text-align: center; font-weight: 700; margin: 1.25rem 0 0.6rem; }
.bk-input {
  width: 100%;
  border: 1.5px solid var(--color-text);
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 0.7rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
}
.bk-input::placeholder { color: var(--color-muted); }
.bk-input:focus { outline: none; border-color: var(--color-accent); }
.bk-textarea { border-radius: 18px; resize: vertical; min-height: 7rem; line-height: 1.4; }
.bk-row--4 .bk-input { border-radius: var(--radius-pill); padding: 0.6rem 0.7rem; text-align: center; font-size: 0.82rem; }
.bk-hint { font-size: 0.72rem; color: var(--color-muted); margin: 0.35rem 0.5rem 0; line-height: 1.3; text-align: center; }

/* Predictive suburb combobox */
.bk-combo { position: relative; }
.bk-combo__list {
  position: absolute;
  top: calc(100% - 0.5rem);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}
.bk-combo__list[hidden] { display: none; }
.bk-combo__group {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  padding: 0.35rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.bk-combo__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
  color: var(--color-text);
}
.bk-combo__item:hover { background: var(--color-surface); }
.bk-combo__empty { padding: 0.6rem 0.9rem; font-size: 0.85rem; color: var(--color-muted); }

/* Uploads */
.bk-uploads {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%;
  border: 1.5px solid var(--color-text);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bk-uploads:hover { border-color: var(--color-accent); }
.bk-uploads__plus { font-size: 1.3rem; line-height: 1; color: var(--color-accent); }
.bk-uploads__input { display: none; }
.bk-uploads__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.bk-uploads__list li { font-size: 0.78rem; color: var(--color-muted); }

/* Estimate */
.bk-estimate-wrap { margin-top: 1.5rem; }
.bk-estimate-title { text-align: center; font-weight: 700; margin-bottom: 0.4rem; }
.bk-estimate { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bk-estimate th {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-weight: 700;
  padding: 0.25rem 0.4rem;
}
.bk-estimate th:first-child, .bk-estimate td:first-child { text-align: left; }
.bk-estimate th:last-child, .bk-estimate td:last-child { text-align: right; }
.bk-estimate th:nth-child(2), .bk-estimate td:nth-child(2),
.bk-estimate th:nth-child(3), .bk-estimate td:nth-child(3) { text-align: center; }
.bk-estimate td { padding: 0.25rem 0.4rem; }
.bk-estimate tbody td { color: var(--color-text); }
.bk-estimate tfoot td { padding-top: 0.4rem; }
.bk-estimate tfoot tr:first-child td { border-top: 1px solid var(--color-border); padding-top: 0.6rem; }
.bk-estimate__grand td { font-weight: 800; font-size: 0.95rem; }

/* Submit */
.bk-submit {
  width: 100%;
  margin-top: 1.25rem;
  background: var(--color-accent-2);
  color: var(--color-text);          /* dark ink on orange — passes WCAG AA */
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1rem;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.5rem;
  transition: background var(--transition), transform var(--transition);
}
.bk-submit:hover { background: var(--color-accent); transform: translateY(-1px); }
.bk-submit.is-disabled, .bk-submit:disabled { opacity: 0.45; pointer-events: none; }

/* ── Booking account gate ──────────────────────────────────────────────────── */
.bk-loggedin {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.bk-loggedin a { color: var(--color-accent); font-weight: 600; }

/* The gate is a silver .rg-modal pop-up; these add the close button + login box. */
.bk-gate .rg-modal__card { position: relative; max-width: 380px; }
.rg-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
}
.rg-modal__close:hover { color: var(--color-text); }

.bk-login { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.bk-login__label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }
.bk-login .rg-modal__btn { margin-top: 0.75rem; align-self: stretch; }
.bk-login__error { margin: 0.4rem 0 0; }

/* Tiny "already have an account? log in" trigger once the pop-up is dismissed */
.bk-gate-reopen { margin: 0 0 1.25rem; font-size: 0.85rem; color: var(--color-muted); }
.bk-linkbtn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
}

/* Inline create-account block inside Project Details — flows with the form
   (no box), so its pill inputs line up with the other rows. */
.bk-account { margin-top: 0.25rem; }
.bk-account__title { margin: 0.5rem 0 0.25rem; font-weight: 700; }
.bk-account__err { margin: 0.4rem 0 0.85rem; color: var(--color-danger, #c94110); font-size: 0.85rem; font-weight: 600; }

/* About anchor + footer facts */
.booking-about { text-align: center; margin: 2.5rem 0 2rem; }
.booking-about a { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-text); display: inline-flex; align-items: center; gap: 0.4rem; }
.booking-about__arrow { color: var(--color-accent); }
.booking-about a:hover { color: var(--color-accent); }

.booking-facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}
.booking-fact { display: flex; flex-direction: column; gap: 0.2rem; text-align: center; }
.booking-fact__k { font-size: 0.7rem; color: var(--color-muted); }
.booking-fact__v { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }

/* Success state */
.booking-success { max-width: 540px; margin: 3rem auto; text-align: center; }
.booking-success h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; margin-bottom: 0.75rem; }
.booking-success p { color: var(--color-muted); margin-bottom: 1.5rem; }
.booking-success .hire-cta { background: rgba(0,0,0,0.04); border-color: var(--color-border); color: var(--color-text); }

/* Business account application */
.bk-subhead {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  text-align: center;
  margin: 1.4rem 0 0.6rem;
}
.biz-support { text-align: center; }
.biz-support__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.biz-support p { font-size: 0.95rem; margin-bottom: 0.75rem; }
.biz-support__lead { font-weight: 600; }
.biz-support__list {
  display: inline-block;
  text-align: left;
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0 auto;
}
.biz-support__list li { font-size: 0.92rem; margin-bottom: 0.35rem; }
.bk-submit--center { width: 100%; max-width: 560px; margin: 1.75rem auto 0; }

/* Business portal — team management */
.biz-user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.biz-user__tag {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  color: var(--color-muted);
  vertical-align: middle;
}
.biz-user__tag--you { background: var(--color-teal); color: var(--color-deep); border-color: transparent; }
.biz-details { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.5rem; font-size: 0.9rem; }
.biz-details dt { font-weight: 700; color: var(--color-muted); }
.biz-details dd { margin: 0; }

/* Portal shell — silver-theme card panel (business portal etc.) */
.portal-wrap {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}
.portal-wrap .page-title { margin-top: 0; }

/* Student dashboard on the silver canvas — fit the taller talent topbar (~79px),
   frost the sidebar, and give nav items a visible light highlight. */
.portal-dash-page .portal-layout { min-height: calc(100svh - 79px); }
.portal-dash-page .portal-sidebar {
  top: 79px;
  height: calc(100svh - 79px);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.admin-bar.portal-dash-page .portal-sidebar { top: 111px; height: calc(100svh - 111px); }
.portal-dash-page .portal-nav__item a:hover,
.portal-dash-page .portal-nav__item.is-active a { background: rgba(0, 0, 0, 0.05); color: var(--color-text); }
@media (max-width: 1024px) {
  .portal-dash-page .portal-sidebar { height: auto; top: 0; border-right: none; }
}

/* Business portal — dashboard panels (sidebar switches between these) */
.biz-panel { display: none; }
/* Reading-width content: panels, notices and the heading stretched across
   the whole viewport read badly on wide screens — cap them like a document. */
.biz-panel { max-width: 860px; }
.portal-dash-page .portal-main > .notice,
.portal-dash-page .portal-main > .page-title,
.portal-dash-page .portal-main > .text-muted { max-width: 860px; }
.biz-panel.is-active { display: block; animation: bizFade 0.18s ease; }
@keyframes bizFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.biz-panel__title { font-size: 1.25rem; margin-bottom: 0.75rem; }

.biz-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.biz-stat {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.biz-stat__label { display: block; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.35rem; }
.biz-stat__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.biz-stat__num--sm { font-size: 1.4rem; }

/* Business portal — document library */
.biz-docs { list-style: none; margin: 0; padding: 0; }
.biz-doc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border);
}
.biz-doc__name { font-weight: 600; color: var(--color-yellow); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.biz-doc__name:hover { text-decoration-thickness: 2px; }

/* Business application — “what happens next” aside note */
.biz-support__note { font-size: 0.85rem; color: var(--color-muted); margin-top: 1rem; }

@media (max-width: 860px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-h--right { text-align: left; }
  .booking-facts { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (max-width: 460px) {
  .bk-row--4 { grid-template-columns: 1fr 1fr; }
  .bk-row--3 { grid-template-columns: 1fr; }
}

/* ── Login page (branded) ──────────────────────────────────────────────────── */
.login-wrap { display: flex; justify-content: center; align-items: flex-start; padding: clamp(2rem, 6vw, 4rem) var(--container-pad) 5rem; }
.login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.login-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; margin: 0 0 0.25rem; }
.login-card__sub { color: var(--color-muted); margin: 0 0 1.5rem; font-size: 0.92rem; }
.login-form { display: flex; flex-direction: column; }
.login-form__label { font-weight: 600; font-size: 0.85rem; margin: 0.75rem 0 0.3rem; }
.login-form__hint { font-size: 0.78rem; color: var(--color-muted); margin: 0.3rem 0 0; }
.login-form__remember { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-muted); margin: 0.9rem 0 0; cursor: pointer; }
.login-form__submit { margin-top: 1.25rem; width: 100%; }
.login-card__links { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.85rem; }
.login-card__links a { color: var(--color-accent); font-weight: 600; }
.login-card__links span { color: var(--color-muted); }

/* ── Branded confirm / alert modal (rangaiConfirm / rangaiAlert) ────────────── */
.rg-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20, 20, 22, 0.55);
  backdrop-filter: blur(3px);
}
.rg-modal[hidden] { display: none; }
.rg-modal__card {
  width: 100%;
  max-width: 400px;
  border-radius: 18px;
  padding: 1.75rem;
  background: #012013;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.rg-modal__title { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.rg-modal__msg { color: var(--color-text); font-size: 0.95rem; line-height: 1.45; margin: 0 0 1.5rem; }
.rg-modal__btns { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.rg-modal__btn {
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.6rem;
  transition: filter var(--transition);
}
.rg-modal__btn:hover { filter: brightness(1.05); }
.rg-modal__btn--primary { background: var(--color-accent-2); color: var(--color-text); }
.rg-modal__btn--danger { background: var(--color-danger, #c94110); color: #fff; }
.rg-modal__btn--ghost { background: rgba(0, 0, 0, 0.06); color: var(--color-text); }

/* ── Accessibility: visible keyboard focus across the chromeless flows ────────
 * Several components set `outline:none` on :focus with only a weak/colour-only
 * cue. These :focus-visible rules win for keyboard users and add a clear ring
 * (red, for contrast on both the silver and white surfaces). */
.split__item:focus-visible,
.hire-search__input:focus-visible,
.hire-search__loc:focus-visible,
.pop-arrow:focus-visible,
.onb-btn:focus-visible,
.btn:focus-visible,
.rg-modal__btn:focus-visible,
.bk-submit:focus-visible,
.talent-burger:focus-visible,
.nav-toggle:focus-visible,
.bk-linkbtn:focus-visible,
.rg-modal__close:focus-visible,
.talent-top__account:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: none;
}
/* Form fields: a clear ring on top of the border-colour change. */
.form-input:focus-visible,
.bk-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* ── Flock ratings (social proof) ──────────────────────────────────────────
 * Numbers use brand ink (AA on white/silver); the 🐦 emoji carries the colour. */
.talent-card__flock { font-size: 0.85em; font-weight: 700; margin-left: 0.35rem; white-space: nowrap; }

.tp-info__row--flock .tp-flock { display: flex; flex-direction: column; gap: 0.1rem; }
.tp-flock__count { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--color-text); }
.tp-flock__sub { font-size: 0.78rem; color: var(--color-muted); }

.tp-reviews { max-width: 720px; margin: 2.5rem auto 1rem; padding: 0 var(--container-pad); }
.tp-reviews__title { font-family: var(--font-display); font-weight: 800; margin-bottom: 1rem; }
.tp-reviews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.tp-review { display: flex; gap: 0.85rem; align-items: baseline; border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; }
.tp-review__birds { font-weight: 700; color: var(--color-text); white-space: nowrap; }
.tp-review__comment { color: var(--color-text); }

.flock-rate { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--color-border); }
.flock-rate__label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; }
.flock-rate__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.flock-rate__birds { width: 5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: 8px; }
.flock-rate__upto { font-size: 0.8rem; color: var(--color-muted); }
.flock-rate__comment { flex: 1; min-width: 8rem; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: 8px; }
.flock-given { margin-top: 0.6rem; font-weight: 600; color: var(--color-text); }

/* Owner/admin preview banner on a not-yet-approved profile. */
.tp-preview-banner {
  margin: 0 auto 1.5rem;
  max-width: 760px;
  padding: 0.75rem 1.25rem;
  /* Solid surface + accent edge — same language as the notices, no glass. */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent-2);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 0.9rem;
  text-align: center;
}

/* Finished items (completed/cancelled/refunded/closed) sink to the bottom (sorted
   in PHP) and grey out so the past reads as past — but stay fully clickable; hover
   lifts the dimming to show they're still interactive. */
.dash-item.is-done { opacity: 0.5; filter: saturate(0.55); transition: opacity var(--transition), filter var(--transition); }
.dash-item.is-done:hover,
.dash-item.is-done:focus-within { opacity: 1; filter: none; }

/* ── Cinematic headline bands (front page) ─────────────────────────────────
   Each [data-cine] band is a pre-rendered JPG frame sequence drawn to a canvas
   by home-scroll.js — it plays through once on scroll-in and holds the formed
   frame. Height is kept at/below the source frame height so frames downscale
   (stay crisp) rather than upscale. White bg matches the flattened frames. */
.cine {
	position: relative;
	height: 100vh;
	width: 100%;
	background: #012013;
	overflow: hidden;
}
.cine__canvas,
.cine__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.cine__fallback { object-fit: cover; }

/* ── Character hero — scrubbed handshake + transparent HIRE overlay ────────── */
.char-hero {
	position: relative;
	height: 100vh;
	width: 100%;
	background: #012013;
	overflow: hidden;
}

/* ── Chapter tabs — jump straight to a hero chapter without scrolling ─────────
   Pinned near the top of the hero (it fills the viewport, so fixed-ish reads as
   "under the header"). Capsule tabs in the brand voice; the active one fills. */
/* Carousel indicators with an editor-timeline accent, bottom-centre: three
   "story" segments on a hairline timeline. The active segment stretches, and
   FILLS as its chapter's clip actually plays (char-hero.js drives the fills
   from the real playhead — rewinding drains them); a tiny red playhead needle
   rides the leading edge of the active fill. Fixed to the viewport
   (char-hero.js re-parents it to <body>) so the hero's pin can't move it. */
.char-hero__tabs {
	position: fixed;
	bottom: clamp(1.75rem, 4.5vh, 3.25rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 90;   /* over the hero, under the header (100) */
	display: flex;
	align-items: center;
	gap: 10px;
	transition: opacity 0.25s ease;
}
/* the timeline RULER running behind/past the segments — frame ticks rising
   off a 1px baseline, fading out at both ends */
.char-hero__tabs::before {
	content: "";
	position: absolute;
	left: -26px;
	right: -26px;
	top: calc(50% - 4px);
	height: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	background: repeating-linear-gradient(90deg,
		rgba(255, 255, 255, 0.22) 0 1px,
		transparent 1px 8px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
/* one segment per chapter */
.char-hero__tab {
	appearance: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	position: relative;
	width: 30px;
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.24);
	font: inherit;
	font-size: 0;          /* hide the label text; it stays for screen readers */
	color: transparent;
	transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background var(--transition);
}
.char-hero__tab.is-active { width: 74px; background: rgba(255, 255, 255, 0.30); }
.char-hero__tab:hover { background: rgba(255, 255, 255, 0.45); }
/* generous hit target around the slim bar */
.char-hero__tab::after { content: ""; position: absolute; inset: -14px -5px; }
/* hover/focus reveals the chapter name as a floating tag above */
.char-hero__tab::before {
	content: attr(data-label);
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fffbee;
	background: rgba(0, 20, 12, 0.78);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.char-hero__tab:hover::before,
.char-hero__tab:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.char-hero__tab:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* clip-progress fill inside each segment */
.char-hero__seg-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #e25c26, #c94110);
	transform: scaleX(0);
	transform-origin: left center;
}
.char-hero__tab.is-active .char-hero__seg-fill { box-shadow: 0 0 10px rgba(201,65,16, 0.55); }
/* the editor-style playhead: grabber triangle on top, hairline dropping
   through the track — riding the active fill's leading edge */
.char-hero__needle {
	position: absolute;
	top: -10px;
	bottom: -6px;
	left: 0;
	width: 1px;
	background: #e25c26;
	transform: translateX(-50%);
	filter: drop-shadow(0 0 4px rgba(201,65,16, 0.7));
	pointer-events: none;
}
.char-hero__needle::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid #e25c26;
}

/* Transport glyph + live SMPTE timecode, left of the segments */
.char-hero__transport {
	font-size: 0.6rem;
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(255,251,238, 0.55);
	min-width: 1.4em;   /* ▶ / ❚❚ / ◀◀ without the timecode shifting */
	text-align: center;
	transition: color var(--transition);
}
.char-hero__transport.is-live { color: #e25c26; }
.char-hero__timecode {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 0.72rem;
	line-height: 1;
	letter-spacing: 0.06em;
	color: #fffbee;
	margin-right: 8px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Fade out once the hero pin is scrolled past. */
.char-hero__tabs.is-hidden { opacity: 0; pointer-events: none; }
/* (No admin-bar offset needed — the rail is vertically centred.) */

/* ── Mobile hero (≤900px) — the scroll-video is desktop-only. Phones get a
   designed still: Te Ika cover-cropped, tagline as real text, all six chapter
   CTAs stacked. char-hero.js skips frame loading when this is visible. */
.char-hero__mobile { display: none; }
@media (max-width: 900px) {
	.char-hero { height: auto; min-height: 100vh; min-height: 100svh; }
	/* Compound selectors: the base .char-hero__canvas { display:block } sits
	   LATER in this file and would out-cascade a bare class at equal specificity. */
	.char-hero .char-hero__canvas,
	.char-hero .char-hero__cta,
	.char-hero__tabs { display: none; }

	/* "Open sky": the whole content block — tagline then buttons — sits at the
	   TOP over the empty sky, so it reads immediately on any screen height.
	   The island art runs behind and below it. */
	.char-hero__mobile {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		/* Art still fills the first screen (minus the site header). svh so it's
		   steady when the phone's URL bar collapses. */
		min-height: calc(100vh - 72px);
		min-height: calc(100svh - 72px);
	}
	.char-hero__mobile-art {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 76% center;   /* aim the crop at the island, not the letterbox */
	}
	/* Legibility scrim — a soft green wash at the TOP behind the content block;
	   the island below stays clear. */
	.char-hero__mobile::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(1,32,19,0.5) 0%, rgba(1,32,19,0.25) 34%, rgba(1,32,19,0) 58%);
		pointer-events: none;
	}
	.char-hero__mobile-tag {
		position: relative;
		z-index: 2;   /* over the scrim AND the birds */
		margin: 0;
		padding: 1.5rem var(--container-pad) 0;
		font-family: var(--font-display);
		font-weight: 800;
		text-transform: uppercase;
		line-height: 0.95;
		letter-spacing: 0.01em;
		font-size: clamp(2.2rem, 11vw, 3.2rem);
		color: #fffbee;
		display: flex;
		flex-direction: column;
	}
	.char-hero__mobile-ctas {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		padding: 1.25rem var(--container-pad) 1.5rem;   /* sits right under the tagline */
	}
	/* The desktop hero buttons are 34rem monsters — refit them to a phone. */
	.char-hero__mobile .char-hero__btn {
		min-width: 0;
		width: 100%;
		padding: 0.9rem 1.5rem;
		font-size: 1.05rem;
	}
	/* Secondary journeys: outlined chips, 2×2 — quieter than four more capsules */
	.char-hero__mobile-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
	.char-hero__chip {
		flex: 1 1 45%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.65rem 0.5rem;
		border: 1px solid rgba(255,255,255,0.5);
		border-radius: var(--radius-pill);
		color: #fffbee;
		font-weight: 600;
		font-size: 0.85rem;
		white-space: nowrap;
		text-decoration: none;
	}
	.char-hero__chip:hover,
	.char-hero__chip:focus-visible { background: rgba(255,255,255,0.12); color: #fff; }
}
.char-hero__canvas,
.char-hero__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.char-hero__fallback { object-fit: contain; }

/* ── Services page — three-panel selector (Production / Development / Equipment
   Hire). Capsule tabs in the CTA red; active tab filled, inactive outlined. */
.svc-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	margin: 0 auto 3rem;
}
.svc-tab {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	padding: 0.85rem 2.2rem;
	border-radius: var(--radius-pill);
	border: 2px solid #c94110;
	background: transparent;
	color: var(--color-text);
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.svc-tab:hover { background: rgba(201,65,16,0.18); transform: translateY(-1px); }
.svc-tab.is-active { background: #c94110; color: #fff; }
.svc-panel { max-width: 72ch; margin-inline: auto; }
.svc-panel--wide { max-width: 1100px; }
.svc-panel > h1:first-child, .svc-panel h1 { margin-bottom: 1rem; }
.svc-panel p { margin-bottom: 1rem; }
.svc-intro { max-width: 60ch; }
.svc-outro { margin-top: 2rem; }

/* Offering cards (Development panel) — dark glass on the deep green */
.svc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
}
.svc-card {
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 1.5rem;
	transition: transform var(--transition), border-color var(--transition);
}
.svc-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.32); }
.svc-card__title { font-size: 1.15rem; margin-bottom: 0.5rem; }
.svc-card__desc  { font-size: 0.9375rem; color: var(--color-muted); flex: 1; }
.svc-card__link  { font-weight: 600; color: var(--color-accent-2); }
.svc-card__link:hover { color: #fff; }
/* The card CTA as a <button> (request-a-quote flow) */
button.svc-card__req {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

/* "I want to make ___" — the Development mad-lib (services page) */
.mk { text-align: center; padding-block: 1rem 3rem; }
.mk__lead {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	margin-bottom: 1.5rem;
}
.mk__line {
	/* Regular sans, lighter weight — the heavy condensed display face was
	   unreadable at this size. Only the blank word carries the bold. */
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.8vw, 2.2rem);
	letter-spacing: 0.01em;
	line-height: 1.35;
	margin-bottom: 0.75rem;
}
.mk__word {
	display: inline-block;             /* transformable for the pop animation */
	font-weight: 700;                  /* the emphasis lives on the word alone */
	color: var(--color-ocean);
	text-decoration: underline;        /* hugs the glyphs, unlike a border */
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.16em;
}
.mk__word.is-swap { animation: mk-pop 420ms cubic-bezier(.2,.9,.3,1.2); }
@keyframes mk-pop {
	0%   { opacity: 0; transform: translateY(0.5em); }
	100% { opacity: 1; transform: none; }
}
.mk__desc {
	min-height: 1.6em;
	max-width: 52ch;
	margin: 0 auto 1.75rem;
	color: var(--color-muted);
	opacity: 0;
	transition: opacity 300ms ease;
}
.mk__desc.is-in { opacity: 1; }
.mk__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 0.9rem;
	max-width: 780px;
	margin-inline: auto;
}
/* Production's chip row grows as admin adds service types — give it the full
   panel width on desktop so it stays one line; small screens wrap as normal.
   (Development keeps the 780px two-row cluster on purpose.) */
@media (min-width: 768px) {
	#production .mk__chips { max-width: none; }
}
.mk__chip {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	font-size: clamp(0.95rem, 1.3vw, 1.1rem);
	padding: 0.7rem 1.6rem;
	border-radius: var(--radius-pill);
	border: 2px solid var(--chip-c);
	color: var(--color-text);
	background: linear-gradient(var(--chip-c), var(--chip-c)) left center / 0% 100% no-repeat;
	background-origin: border-box;   /* fill extends under the 2px border — no unfilled ring at the pill's curves */
	transition: background-size 260ms ease, color 260ms ease, transform var(--transition);
}
.mk__chip:hover,
.mk__chip:focus-visible,
.mk__chip.is-picked {
	background-size: 100% 100%;
	color: var(--chip-ink);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.mk__word.is-swap { animation: none; }
	.mk__chip, .mk__chip:hover { transform: none; transition: none; }
}

/* ── Equipment hire: date picker + kit grid ──────────────────────────────── */
/* One rhythm for the whole hire flow: dates → request bar → kits */
.kit-dates,
.kit-bar,
.kit-auth,
.kit-filters,
.kit-grid { --kit-gap: 3rem; }

.kit-dates {
	/* Right-aligned, sitting snug on top of the request bar */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 1rem 1.5rem;
	margin-bottom: 0;
}
.kit-dates + .kit-bar { margin-top: 1rem; }
.kit-dates label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 700; color: #fff; font-size: 1.05rem; }
.kit-dates input {
	min-width: 13rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: #fff;
	padding: 0.8rem 1rem;
	border: 1.5px solid rgba(255,255,255,0.55);
	color-scheme: dark;   /* white calendar icon to match */
}
.kit-dates input:focus { border-color: var(--color-ocean); }
.kit-dates__note { width: 100%; text-align: center; color: var(--color-muted); margin: 0; }

.kit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-top: var(--kit-gap);
}
.kit-card {
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 1.4rem;
	transition: border-color var(--transition), transform var(--transition), opacity var(--transition);
}
.kit-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.32); }
.kit-card.is-picked { border-color: #c94110; box-shadow: 0 0 0 2px rgba(201,65,16,0.4); }
/* Asset tag on the info face — spec-sheet metadata, not a feature. */
.kit-card__asset {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0.5rem 0 0;
}
/* Booked cards stay fully requestable — people book ahead of gear that is out
   today. Dim the spec face so the card READS as booked, but leave the status
   line and the Add-to-request button at full strength. */
.kit-card.is-booked > .kit-card__flip,
.kit-card.is-booked > .kit-card__front { opacity: 0.5; }

.kit-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.kit-card__title { font-size: 1.05rem; margin: 0; }
.kit-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.kit-card[hidden] { display: none; }
.kit-bar__price {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.kit-bar__tier {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--color-yellow);
}
.kit-card__rate {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}
.kit-card__rate-unit {
  font-family: var(--font-body, inherit);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-left: 0.15rem;
}
/* ── Hire filters: kits/items pills + category dropdown ── */
.kit-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  /* Same rhythm above as below: the grid's own margin-top supplies the gap under */
  margin-top: var(--kit-gap);
  margin-bottom: 0;
}
.kit-filters__kind { display: flex; gap: 0.4rem; }
.kit-filters__btn {
  /* Same proportions AND colour treatment as the mk colour chips: each pill
     its own brand colour, filling with it (dark ink text) on hover/active. */
  border: 2px solid var(--fc, var(--color-accent));
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.kit-filters__kind .kit-filters__btn:nth-child(1) { --fc: var(--color-accent); }   /* red */
.kit-filters__kind .kit-filters__btn:nth-child(2) { --fc: var(--color-yellow); }   /* yellow */
.kit-filters__kind .kit-filters__btn:nth-child(3) { --fc: var(--color-ocean); }    /* ocean */
.kit-filters__btn:hover,
.kit-filters__btn.is-on {
  background: var(--fc, var(--color-accent));
  color: #012013;
}
.kit-filters__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.kit-filters__btn--cat {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  padding: 0.55rem 1.2rem;
}
.kit-filters__cat {
  background: rgba(0,0,0,0.35);
  border: 2px solid var(--color-accent-2);   /* orange joins the family */
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  min-width: 0;
  max-width: 100%;
}
/* The open list is native UI — give options explicit brand colours so they
   don't inherit unreadable combos (dark red on dark green). */
.kit-filters__cat option {
  background: #06271a;
  color: #fffbee;
  font-weight: 500;
}
.kit-card__cat {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	white-space: nowrap;
}
.kit-card__list {
	list-style: none;
	margin: 0.75rem 0 1rem;
	padding: 0;
	font-size: 0.85rem;
	color: var(--color-muted);
	flex: 1;
}
.kit-card__list li { padding-left: 0.9rem; position: relative; }
.kit-card__list li::before { content: '·'; position: absolute; left: 0; }
.kit-card__status { font-weight: 700; font-size: 0.85rem; margin: 0 0 0.75rem; color: var(--color-teal); }
.kit-card.is-booked .kit-card__status { color: var(--color-accent); }
.kit-card__btn {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0.6rem 1.2rem;
	border-radius: var(--radius-pill);
	border: 2px solid #c94110;
	background: #c94110;   /* filled, not outline — holds its own over photos */
	color: #fff;
	transition: background var(--transition), color var(--transition), filter var(--transition);
}
.kit-card__btn:hover:not(:disabled) { filter: brightness(1.12); }
.kit-card__btn:disabled { cursor: not-allowed; opacity: 0.5; border-color: var(--color-border); }
/* The button carries the state (Sep 2026, the hire-card round): its label on
   the left, the availability on the right in small caps. The same orange in
   every state; booked keeps the dimmed look above. The old status line is
   still in the markup for screen readers and the info sheet, unseen. */
.kit-card__btn--state { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; text-align: left; }
.kit-card__btn-state { flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; white-space: nowrap; }
.kit-req-name { font-weight: 700; font-size: 1.05rem; }
/* Chosen kits list in the request form */
.kit-chosen { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kit-chosen li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.3rem 0.6rem 0.3rem 0.85rem;
	border-radius: var(--radius-pill);
	background: rgba(201,65,16,0.18);
	border: 1px solid #c94110;
}
.kit-chosen__x {
	background: none;
	border: none;
	padding: 0 0.1rem;
	color: inherit;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity var(--transition);
}
.kit-chosen__x:hover { opacity: 1; }
.kit-chosen__q {
	background: none;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 50%;
	width: 1.15rem;
	height: 1.15rem;
	padding: 0;
	color: inherit;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
}
.kit-chosen__q:disabled { opacity: 0.35; cursor: default; }
.kit-chosen__n { font-variant-numeric: tabular-nums; }
/* Cards keep their CTA on the bottom edge no matter how short the contents are */
.kit-card__flip { flex: 1 0 auto; }
/* Service cards: auto-fill (not auto-fit) so one visible card doesn't stretch
   to the full row — it stays the same size as an equipment card. */
.kit-grid--svc { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ── Package add-ons: name · price · +/− stepper rows under a service card.
   Above the photo-flip layer so they stay usable. ── */
.kit-addons {
  position: relative;
  z-index: 2;
  margin: 0.75rem 0 0.9rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.6rem;
}
.kit-addons__title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.kit-addon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.88rem;
}
.kit-addon__name { flex: 1; min-width: 0; }
.kit-addon__price { font-weight: 700; white-space: nowrap; }
.kit-addon__step { display: flex; align-items: center; gap: 0.35rem; }
.kit-addon__q {
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.kit-addon__q:hover { border-color: var(--color-ocean); background: rgba(135,255,226,0.12); }
.kit-addon__n { min-width: 1.1rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.kit-addon.is-picked .kit-addon__n { color: var(--color-ocean); }

/* ── Add-on CARDS: white, sitting in their own section under the packages ── */
.kit-addons-sec { margin-top: var(--kit-gap, 3rem); }
.kit-addons-sec__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin-bottom: 1.25rem;
}
.kit-card--addon {
  background: #fff;
  border-color: #e3e1da;
  color: #231f20;
}
.kit-card--addon .kit-card__title { color: #06271a; }
.kit-card--addon .kit-card__rate { color: #06271a; }
.kit-card--addon .kit-card__rate-unit { color: #787066; }
.kit-card--addon .kit-card__list li { color: #4a463f; }
.kit-card--addon.is-picked { border-color: #c94110; }
.kit-card__flag { color: var(--color-yellow); font-size: 0.8em; }

/* ── Card flip: PHOTO face first (title overlaid on the image), hover flips
   to the info face. Availability line + button stay put on top throughout. ── */
.kit-card { position: relative; perspective: 1000px; }
.kit-card__flip.has-img .kit-card__front,
.kit-card__back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.kit-card__back {
  /* Positioned against the CARD, so the photo fills the full card face.
     Base state = info face (touch devices with no hover keep the info). */
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  border-radius: 13px;   /* sits just inside the card's 14px radius */
  overflow: hidden;
  background: #fff;
  z-index: 1;
}
.kit-card__back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Scrims top AND bottom: product shots are white — the top one carries the
   overlaid title, the bottom one keeps status + button readable. */
.kit-card__back::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;   /* deep enough for a two-line title + price */
  background: linear-gradient(0deg, rgba(6,39,26,0) 0%, rgba(6,39,26,0.94) 72%);
}
/* Title + price live in ONE flowing overlay block — the old fixed-offset rate
   (top: 2.55rem) sat under a ONE-line title and collided with wrapped names. */
.kit-card__back-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  padding: 1.1rem 1.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.kit-card__back-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.15;
  color: #fff;
}
.kit-card__back-rate {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}
/* Status text sits straight on the photo now (no bottom scrim) — shadow it */
.kit-card__status { text-shadow: 0 1px 8px rgba(6,39,26,0.95), 0 0 3px rgba(6,39,26,0.9); }
.kit-card__status,
.kit-card__btn { position: relative; z-index: 2; }
@media (hover: hover) {
  /* HIRE cards (--imgfirst): photo at rest, info on hover. */
  .kit-card__flip--imgfirst.has-img .kit-card__front { transform: rotateY(-180deg); }
  .kit-card__flip--imgfirst.has-img .kit-card__back { transform: rotateY(0deg); }
  .kit-card:hover .kit-card__flip--imgfirst.has-img .kit-card__front { transform: rotateY(0deg); }
  .kit-card:hover .kit-card__flip--imgfirst.has-img .kit-card__back { transform: rotateY(180deg); }
  /* Everything else (production services): info at rest, photo on hover. */
  .kit-card:hover .kit-card__flip.has-img:not(.kit-card__flip--imgfirst) .kit-card__front { transform: rotateY(-180deg); }
  .kit-card:hover .kit-card__flip.has-img:not(.kit-card__flip--imgfirst) .kit-card__back { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-card__flip.has-img .kit-card__front,
  .kit-card__back { transition: none; }
}
.kit-chosen:empty { margin: 0; }

/* Request bar — selection summary + submit (replaces the old details form) */
.kit-bar {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: var(--kit-gap);
	padding: 1.25rem 1.5rem;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--color-border);
	border-radius: 14px;
}
.kit-bar__count { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.5rem; }
.kit-bar__note { display: flex; flex-direction: column; gap: 0.35rem; min-width: min(22rem, 100%); }
.kit-bar__submit { white-space: nowrap; }
.kit-bar__msg { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.kit-bar__msg:empty { display: none; }   /* otherwise it still claims a grid row */
.kit-bar__count { margin-bottom: 0; }
.kit-chosen:not(:empty) { margin: 0.5rem 0 0; }
.kit-bar.is-sent { border-color: var(--color-success); }
.kit-bar.is-sent .kit-bar__msg { color: var(--color-teal); }
@media (max-width: 720px) {
	.kit-bar { grid-template-columns: 1fr; }
}

/* Inline log-in / create-account step before a hire request is sent */
.kit-auth { margin-top: var(--kit-gap); }
.kit-auth__tabs { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.kit-auth__tab {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0.5rem 1.2rem;
	border-radius: var(--radius-pill);
	border: 2px solid #c94110;
	background: transparent;
	color: var(--color-text);
	transition: background var(--transition), color var(--transition);
}
.kit-auth__tab.is-active { background: #c94110; color: #fff; }
.kit-auth__msg { margin-top: 0.75rem; font-weight: 600; color: var(--color-accent); }
/* The submit sits right under the last field — give it room, and match the
   capsule padding of the tabs above so the panel reads as one piece. */
.kit-auth__pane .btn {
	margin-top: 1.5rem;
	padding: 0.85rem 2rem;
	border-radius: var(--radius-pill);
}

/* Request-a-quote form block under the offering cards */
.svc-form {
	max-width: 640px;
	margin: 3.5rem auto 0;
	padding: 2rem;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--color-border);
	border-radius: 14px;
}
.svc-form h2 { margin-bottom: 0.35rem; }
.svc-form > .text-muted { margin-bottom: 1.5rem; }

/* The kaupapa flock over the hero (hero-birds.js) — flies in on the Māui
   chapter to escort the About Us pill. Above the canvas + CTAs, but
   click-through so the button stays usable. */
.hero-bird {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}

/* Hero CTAs — one group per chapter (data-cta="0","1",…). char-hero.js adds
   .is-in to the group whose chapter just landed, and removes it when you scroll
   on. Capsule pills in the header CTA red, centred between the two characters. */
.char-hero__cta {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.4rem, 4vh, 2.6rem);
	opacity: 0;
	visibility: hidden;            /* keeps them out of the tab order while hidden */
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 500ms;
}
.char-hero__cta.is-in {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 500ms ease, transform 500ms ease, visibility 0s;
}
.char-hero__cta.is-in .char-hero__btn { pointer-events: auto; }

.char-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(34rem, 88vw);         /* 2× */
	padding: 1.8rem 4.8rem;              /* 2× */
	background: #c94110;                 /* exactly the header CTA (.site-header__hire) */
	color: #fff;
	font-weight: 700;
	font-size: clamp(2rem, 2.7vw, 2.4rem);   /* 2× */
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius-pill);   /* capsule, like the header CTA */
	box-shadow: 0 14px 36px rgba(0,0,0,0.3);
	transition: background var(--transition), transform var(--transition);
}
.char-hero__btn:hover,
.char-hero__btn:focus-visible {
	background: #a8360d;                 /* same hover as the header CTA */
	color: #fff;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.char-hero__cta,
	.char-hero__cta.is-in { transition: none; transform: none; }
	.char-hero__btn:hover, .char-hero__btn:focus-visible { transform: none; }
}

/* ── Birds in a circle — orbiting flock (replaces the discipline split) ───── */
.birds-ring {
	position: relative;
	width: 100%;
	min-height: clamp(420px, 60vh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #012013;
	overflow: hidden;
}
#birds-circle {
	position: relative;
	width: min(560px, 82vw);
	aspect-ratio: 1.12 / 1;
}
.ring-bird {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: center;
	will-change: transform, opacity;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Rounded forest still beside the kaupapa blurb */
.mission__forest {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	max-width: 360px;
	margin-inline: auto;
	box-shadow: 0 18px 50px rgba(0,0,0,0.16);
}
.mission__forest img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Lenis smooth scroll (front page) ──────────────────────────────────────
   Lenis drives scroll position per-frame; native CSS smooth-scroll fights it
   and makes scrolling feel jacky/inconsistent. Disable scroll-behavior only
   while Lenis is active (it adds the .lenis class to <html>). */
html.lenis,
html.lenis body { height: auto; }
html.lenis,
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ── Dark-theme adjustments (deep-green #012013 background) ─────────────────
   The palette tokens were flipped to dark; these handle things that were
   hardcoded light and don't follow the tokens. */

/* Brand wordmark: the dark logo.svg reads as white on the dark background. */
img[src*="logo.svg"] { filter: brightness(0) invert(1); }

/* Form fields: dark inputs with light text + subtle light border. */
.form-input,
.bk-input,
.onb-form select,
textarea,
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="password"], input[type="date"], input[type="search"] {
	background: rgba(255,255,255,0.06);
	color: var(--color-text);
	border-color: var(--color-border);
}
.form-input::placeholder,
.bk-input::placeholder,
textarea::placeholder,
input::placeholder { color: var(--color-muted); }

/* Select dropdown lists render with the OS colours. Ask the browser for its
   dark scheme so the list, its group headings and the selected row all draw
   dark, then colour the rows and the region headings ourselves. Without the
   optgroup rules Chrome paints the headings in grey on dark and leaves white
   bands where the groups sit. */
select { color-scheme: dark; }
select option { background: #0b3122; color: var(--color-text); }
select optgroup { background: #0b3122; color: var(--color-yellow); font-weight: 700; font-style: normal; }
select optgroup option { background: #0b3122; color: var(--color-text); font-weight: 400; }

/* Frosted panels: were frosted-WHITE (now show as grey on dark) → dark glass. */
.site-header { background: rgba(6,39,26,0.82); border-bottom-color: var(--color-border); }
.portal-sidebar,
.portal-dash-page .portal-sidebar { background: rgba(255,255,255,0.05); border-right-color: var(--color-border); }
.portal-wrap,
.login-card,
.biz-stat,
.hero-picker__panel,
.rg-modal__card { background: rgba(255,255,255,0.06); border-color: var(--color-border); }
/* The hero search sits over VIDEO, not a solid dark panel — the 6% glass used
   for the panels above disappears against the footage, so it gets a proper,
   legible dark-glass fill of its own. */
.hire-search {
  background: rgba(6, 39, 26, 0.82);
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hire-search__input::placeholder,
.hire-search__loc::placeholder { color: rgba(255,255,255,0.78); }
.hire-search__sep { background: rgba(255,255,255,0.28); }
@media (max-width: 560px) {
  .hire-search__loc { border-top-color: rgba(255,255,255,0.18); }
}
/* Active/hover nav items: dark-on-dark tint was invisible → light tint. */
.portal-dash-page .portal-nav__item a:hover,
.portal-dash-page .portal-nav__item.is-active a { background: rgba(255,255,255,0.08); color: var(--color-text); }
/* Dark-on-dark hardcoded borders that vanished → subtle light border. */
.biz-stat, .login-card { border-color: var(--color-border); }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Booking forms: "When & how long" block + labelled fields ─────────────────
   From the booking-forms design session: visible labels over every scheduling
   control (bare date inputs read as cryptic dd/mm/yyyy otherwise), days
   auto-derived from the dates (main.js), and breathing room before UPLOADS. */
.bk-when { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.bk-when__legend { font-weight: 700; font-size: 0.9rem; padding: 0; margin-bottom: 0.6rem; }
.bk-when .bk-row { margin-bottom: 1rem; }
.bk-field { min-width: 0; }
.bk-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.3rem 1.1rem; /* aligns with the pill input's own padding */
}
.bk-label__opt { font-weight: 400; text-transform: none; letter-spacing: 0; }
.bk-field .bk-input { width: 100%; }
.bk-input[type="date"] { color-scheme: dark; text-align: left; } /* visible calendar icon on the dark green */
.bk-hint--left { text-align: left; margin-left: 1.1rem; }

/* Breathing room: hints stop crowding whatever follows them (UPLOADS). */
.bk-hint { margin-bottom: 0.4rem; }
.bk-hint + .bk-row { margin-top: 1.2rem; }
.bk-submit { margin-top: 1.75rem; }

@media (max-width: 700px) {
  .bk-input, .bk-uploads { min-height: 44px; } /* real touch targets */
}
@media (max-width: 460px) {
  .bk-when .bk-row--2 { grid-template-columns: 1fr; }
}

/* ── Facility Hire suite cards + session rows ───────────────────────────────── */
.fac-suite { min-height: 220px; }
.fac-suite.is-picked { outline: 2px solid var(--color-accent-2, #ffc06b); outline-offset: 2px; }
.kit-card__rate--tbc { font-size: 0.8rem; opacity: 0.7; text-transform: lowercase; }
/* ── Shared reveal: add-on sections + cards rise in with a soft stagger ──────
   Used by the Facility Hire session section AND the production add-ons.
   .rg-pop = start state (applied just before unhiding), .rg-pop--in = settled. */
.rg-pop {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.rg-pop.rg-pop--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rg-pop { transition: none; transform: none; opacity: 1; }
}

/* Card buttons pin to the bottom — a short card never floats its button up.
   (.kit-card is already flex-column; auto top margin absorbs the slack.) */
.kit-card > .kit-card__btn { margin-top: auto; }

/* ── Hire "More info" spec-sheet modal (approved mock-up variant 2) ─────────── */
.kit-card__more {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: center;
  padding: 0.15rem;
  margin-top: 0.35rem;
}
.kit-card__more:hover, .kit-card__more:focus-visible { opacity: 1; }

.kit-info {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(0, 20, 12, 0.74);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.kit-info[hidden] { display: none; }
.kit-info__sheet {
  position: relative;
  width: min(880px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-deep, #012013);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2.2rem 2.2rem 2rem;
  animation: rgNoticeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.kit-info__title {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.05;
  margin: 0 2.5rem 0.25rem 0;
  text-wrap: balance;
}
.kit-info__tag {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 0 0 1.4rem;
  text-transform: uppercase;
}
.kit-info__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  align-items: start;
}
.kit-info__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}
.kit-info__specs > .kit-info__row:first-of-type { border-top: 1px solid var(--color-border); }
.kit-info__k { color: var(--color-muted); }
.kit-info__contents { margin: 1.1rem 0 0; padding: 0 0 0 1.1rem; font-size: 0.92rem; }
.kit-info__contents li { margin: 0.22rem 0; }
.kit-info__photo {
  background: #fff;
  border-radius: 12px;
  padding: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kit-info__photo img { max-width: 100%; max-height: 300px; object-fit: contain; }
.kit-info__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.6rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.kit-info__price { font-weight: 800; font-size: 1.5rem; }
.kit-info__x {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  appearance: none;
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
}
.kit-info__x:hover, .kit-info__x:focus-visible { background: rgba(255,255,255,0.22); }
@media (max-width: 700px) {
  .kit-info__grid { grid-template-columns: 1fr; }
  .kit-info__photo { order: -1; }
  .kit-info__sheet { padding: 1.6rem 1.25rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .kit-info__sheet { animation: none; } }

/* ═══ ABOUT PAGE — take five, photo-led (Lochlan Packman stills) ════════════ */
.abt { overflow-x: hidden; }
.abt section { padding: 4.5rem 1.5rem; }
.abt-in { max-width: 1080px; margin: 0 auto; }
.abt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.abt-reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .abt-reveal { opacity: 1; transform: none; transition: none; } }

/* Scene slate: plain text, no chrome */
.abt-slate { margin-bottom: 1.8rem; font-size: .9rem; font-weight: 600; color: var(--color-muted); }
.abt-slate b { color: var(--color-yellow); font-weight: 600; }

/* Hero: full-bleed night-unit still under the title */
.abt-hero {
  position: relative; min-height: 88vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center 38%;
  padding: 0 !important;
}
.abt-hero__tint { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(1,32,19,.5) 0%, rgba(1,32,19,.12) 40%, rgba(1,32,19,.94) 88%, var(--color-deep) 100%); }
.abt-hero__box { position: relative; width: 100%; padding: 0 1.5rem 3.8rem; }
.abt-hero h1 {
  font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.01em;
  font-size: clamp(2.8rem, 8vw, 6rem); margin: 0; max-width: 14ch; text-wrap: balance;
}
.abt-go { color: var(--color-accent); }
.abt-hero__cap { margin: 1.1rem 0 0; font-size: .88rem; color: var(--color-muted); }

/* Photo frames: B&W stills that wake up in colour, click to enlarge */
.abt-ph {
  position: relative; margin: 0; border: 1px solid var(--color-border); background: #000;
  border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in;
}
.abt-ph img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05); transition: filter .35s ease; }
.abt-ph--col img { filter: none; }
.abt-ph:hover img, .abt-ph:focus-visible img { filter: grayscale(0) contrast(1.02); }
.abt-ph:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; }
.abt-ph__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .85rem;
  font-size: .82rem; font-weight: 500; color: var(--color-text);
  background: linear-gradient(180deg, transparent, rgba(0,26,16,.88) 55%);
}

/* Scene 01 */
.abt-s1 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.6rem; align-items: center; }
.abt-lead { font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.4; margin: 0; font-weight: 600; max-width: 26ch; }
.abt-lead em { font-style: normal; color: var(--color-teal); }
.abt-lead b { color: var(--color-yellow); font-weight: 700; }
.abt-fac { margin: 1.5rem 0 0; color: var(--color-muted); font-size: .97rem; max-width: 52ch; }
.abt-s1 .abt-ph { aspect-ratio: 3 / 2; }

/* B-roll strip */
.abt-roll { background: #001a10; border-block: 1px solid var(--color-border); padding: 3.2rem 1.5rem; }
.abt-roll__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.abt-roll .abt-ph { aspect-ratio: 4 / 3; }

/* Scene 02 */
.abt-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 2.2rem; }
.abt-bo { background: #001a10; padding: 1.9rem 1.5rem 1.7rem; }
.abt-bo b { display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.abt-bo:nth-child(1) b { color: var(--color-yellow); }
.abt-bo:nth-child(2) b { color: var(--color-ocean); }
.abt-bo:nth-child(3) b { color: var(--color-accent-2); }
.abt-bo span { display: block; margin-top: .6rem; color: var(--color-muted); font-size: .9rem; max-width: 24ch; }
.abt-why__low { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.4rem; align-items: stretch; }
.abt-why__pts { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-content: center; }
.abt-pt b { display: block; font-weight: 600; font-size: 1.02rem; }
.abt-pt p { margin: .15rem 0 0; color: var(--color-muted); font-size: .93rem; max-width: 46ch; }
.abt-why__low .abt-ph { min-height: 100%; }

/* Scene 03: dailies board + screening still */
.abt-s3 { display: grid; grid-template-columns: .95fr 1.05fr; gap: 2.4rem; align-items: stretch; }
.abt-board { border: 1px solid var(--color-border); background: var(--color-deep);
  border-radius: var(--radius-md); overflow: hidden; }
.abt-dl { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--color-border); }
.abt-dl:last-child { border-bottom: 0; }
.abt-dl b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.abt-dl__k { color: var(--color-muted); font-size: .9rem; font-weight: 500; }
.abt-ok { color: var(--color-teal); }
.abt-stamp { font-size: .82rem; color: var(--color-muted); margin-top: 1rem; }
.abt-s3 .abt-ph { aspect-ratio: 3 / 2; align-self: center; }
.abt-dailies { background: #001a10; border-block: 1px solid var(--color-border); }

/* CTA over the classic-car still: a proper closing scene, most of a screen
   tall, with the title at hero scale (Sep 2026, was a shallow band). */
.abt-cta { position: relative; text-align: center; padding: clamp(5rem, 12vw, 9rem) 1.5rem !important;
  min-height: 72vh; min-height: 72svh; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center 42%; overflow: hidden; }
.abt-cta__tint { position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--color-deep) 0%, rgba(1,32,19,.5) 28%, rgba(1,32,19,.72) 100%); }
.abt-cta__in { position: relative; width: 100%; }
.abt-cta h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: .92; letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: balance; }
.abt-cta p { color: var(--color-text); opacity: .85; font-size: clamp(1.05rem, 1.6vw, 1.35rem); margin: 0 0 2.2rem; }
.abt-btn { display: inline-flex; align-items: center; gap: .7rem; font-weight: 700; color: #fff;
  text-decoration: none; background: var(--color-accent); border-radius: var(--radius-pill);
  padding: .85rem 2rem; font-size: 1rem; }
.abt-cta .abt-btn { padding: 1.05rem 2.6rem; font-size: 1.15rem; }
.abt-btn:hover { filter: brightness(1.12); color: #fff; }

/* Lightbox: every frame enlarges, credited to the photographer */
.abt-lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .9rem; background: rgba(0,26,16,.94); padding: 2rem; cursor: zoom-out; }
.abt-lb[hidden] { display: none; }
.abt-lb img { max-width: min(1100px, 94vw); max-height: 78vh; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); display: block; }
.abt-lb__cap { font-size: .95rem; color: var(--color-text); text-align: center; }
.abt-lb__credit { font-size: .82rem; color: var(--color-muted); }
.abt-lb__x { position: absolute; top: 1rem; right: 1.2rem; font-size: 1.8rem; line-height: 1;
  color: var(--color-text); background: none; border: 0; cursor: pointer; padding: .25rem .5rem; }
.abt-lb__x:focus-visible { outline: 2px solid var(--color-ocean); }

@media (max-width: 820px) {
  .abt-s1, .abt-why__low, .abt-s3 { grid-template-columns: 1fr; }
  .abt-roll__grid { grid-template-columns: 1fr 1fr; }
  .abt-why__grid { grid-template-columns: 1fr; }
  .abt-hero { min-height: 74vh; }
}

/* ═══ STUDENT PROFILE, Sep 2026 design ═══════════════════════════════════════
   The "One-sheet": the lead still is the page, with the name set over it like
   a film title; a facts table and a numbered services index on hairlines; the
   work as a contact sheet with the pattern rising behind it; About Me on the
   page colour; What clients say on a solid band. One colourway per student
   (rangai_profile_colourway): every colour here is a --tp-* custom property
   set on .tp2, and the roles that keep type readable on each look (the button
   colours, the band and its heading) are derived there, never hard-coded. */
.tp2 { background: var(--tp-bg); color: var(--tp-text); overflow-x: hidden; }
.tp2 a { color: inherit; }
.tp2-preview { margin: 1.5rem auto 0; }

/* The piwakawaka, as a mask so it takes whatever colour the text has. */
.flock-icon {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  background: currentColor;
  -webkit-mask: url(../img/profile/piwakawaka.png) center / contain no-repeat;
          mask: url(../img/profile/piwakawaka.png) center / contain no-repeat;
}
.flock-icon--lg { width: 1.6em; height: 1.6em; vertical-align: middle; }

/* Every band shares the same measure. */
.tp2-hero__in, .tp2-facts, .tp2-work__in, .tp2-about, .tp2-reviews__in {
  width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box;
}

/* Headings in the colourway's heading colour; on the band, its own. */
.tp2-h2 {
  font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.01em;
  font-size: clamp(2rem, 4vw, 3.5rem); color: var(--tp-head); margin: 0;
}

/* ── Hero: the still, tinted with the page colour ───────────────────────── */
.tp2-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 44rem; display: flex; align-items: flex-end;
}
.tp2-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: var(--tp-photo) center / cover no-repeat; filter: grayscale(1) contrast(1.05);
}
/* Multiply on the dark looks, screen on the light ones, so the name and the
   line under it read on the still whatever the photo. */
.tp2-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--tp-bg); opacity: var(--tp-photo-tint, 0.78); mix-blend-mode: var(--tp-photo-blend, multiply);
}
/* A soft scrim from the page colour up to clear over the bottom of the still,
   so the name reads whatever the photo and a two-line name never crosses an
   edge. The one gradient on the page, and it earns its place. */
.tp2-hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26rem; z-index: -1;
  background: linear-gradient(to top, var(--tp-bg) 0%, color-mix(in srgb, var(--tp-bg) 85%, transparent) 45%, transparent 100%);
}
.tp2-hero__in {
  padding: 6rem var(--container-pad) 2.75rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.tp2-hero__id { min-width: 0; }
.tp2-eyebrow { margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-head); }
.tp2-name {
  margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 0.92; letter-spacing: -0.01em;
  font-size: clamp(3rem, 9vw, 8rem); color: var(--tp-head); overflow-wrap: anywhere;
}
.tp2-tagline { margin: 0.6rem 0 0; font-size: 1.25rem; font-weight: 600; color: var(--tp-text); }
.tp2-hero__act { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.tp2 .tp2-cta {
  display: inline-flex; align-items: center; height: 3.5rem; padding: 0 2.1rem; border-radius: var(--radius-pill);
  background: var(--tp-cta-bg); color: var(--tp-cta-text);
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; transition: filter var(--transition), transform var(--transition);
}
.tp2 .tp2-cta:hover, .tp2 .tp2-cta:focus-visible { filter: brightness(1.06); transform: translateY(-1px); color: var(--tp-cta-text); outline: none; }
.tp2-socials { display: flex; justify-content: center; gap: 1rem; margin: 0; }
.tp2 .tp2-socials__link { display: inline-flex; width: 1.5rem; height: 1.5rem; color: var(--tp-head); transition: transform var(--transition); }
.tp2-socials__link svg { width: 100%; height: 100%; }
.tp2 .tp2-socials__link:hover, .tp2 .tp2-socials__link:focus-visible { transform: translateY(-2px); color: var(--tp-head); outline: none; }

/* ── Facts table and services index ─────────────────────────────────────── */
.tp2-facts {
  padding: 2.5rem var(--container-pad) 2.75rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--tp-text) 16%, transparent);
}
.tp2-table { margin: 0; border-top: 2px solid var(--tp-head); }
.tp2-table__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.8rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tp-text) 25%, transparent);
}
.tp2-table__row:last-child { border-bottom: 0; }
.tp2-table dt { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: var(--tp-head); }
.tp2-table dd { margin: 0; font-size: 1.05rem; line-height: 1.4; text-align: right; }
.tp2-table dd small { display: block; font-size: 0.875rem; color: var(--tp-muted); }
.tp2-table__line { display: block; }
.tp2-flock { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; line-height: 1; }

.tp2-index { border-top: 2px solid var(--tp-head); }
.tp2-index__label { margin: 0; padding: 0.8rem 0 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-muted); }
.tp2-index ol { list-style: none; margin: 0; padding: 0; }
.tp2-index li {
  display: flex; gap: 1rem; align-items: baseline; padding: 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tp-text) 16%, transparent);
}
.tp2-index li:last-child { border-bottom: 0; }
.tp2-index__n { flex: none; width: 1.75rem; font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--tp-head); }
.tp2-index__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
/* A long list of services runs in two columns and one size down, so the
   band stays roughly the height of the table beside it. */
.tp2-index--many ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.tp2-index--many li:last-child, .tp2-index--many li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.tp2-index--many .tp2-index__name { font-size: 1.25rem; }

/* ── Selected work: the contact sheet, pattern rising behind it ─────────── */
.tp2-work { position: relative; isolation: isolate; }
/* The pattern file as a mask filled with the colourway's tile colour, pinned
   to the bottom of this section and scaled to cover its lower part. Used
   whole, never cut or repeated. */
.tp2-work::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: -1;
  background: var(--tp-tile, rgba(201,65,16,0.55));
  -webkit-mask: var(--tp-pattern) center bottom / cover no-repeat;
          mask: var(--tp-pattern) center bottom / cover no-repeat;
}
.tp2-work__in { padding: 3rem var(--container-pad) 3.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tp2-work__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tp2-work__count { font-size: 0.875rem; color: var(--tp-muted); }
.tp2 .media-grid { --gap-grid: 10px; padding: 0; }
.tp2 .media-tile { background: rgba(0,0,0,0.22); border-radius: 4px; }
.tp2 .media-tile[data-transparent="1"] { background: transparent; }
.tp2-empty {
  margin: 0; padding: 3rem 1.5rem; text-align: center; color: var(--tp-muted);
  border: 2px dashed var(--tp-muted); border-radius: 10px;
}

/* ── About Me: on the page colour ───────────────────────────────────────── */
.tp2-about {
  padding: 4rem var(--container-pad) 4.5rem;
  display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); gap: 3rem; align-items: start;
}
.tp2-bio { max-width: 45rem; font-size: 1.2rem; font-weight: 600; line-height: 1.55; }
.tp2-bio p { margin: 0 0 0.9rem; }
.tp2-bio p:last-child { margin-bottom: 0; }
.tp2-bio--hint { margin: 0; color: var(--tp-muted); font-style: italic; font-weight: 400; }

/* ── What clients say: a solid band in the disc colour ──────────────────── */
.tp2-reviews { background: var(--tp-band); color: var(--tp-band-text); }
.tp2-reviews__in {
  padding: 4rem var(--container-pad) 4.5rem;
  display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); gap: 3rem; align-items: start;
}
.tp2-reviews .tp2-h2 { color: var(--tp-band-head); }
.tp2-reviews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.4rem; max-width: 45rem; }
.tp2-review { display: flex; gap: 1.1rem; align-items: flex-start; }
.tp2-review__birds { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; min-width: 6rem; font-weight: 700; font-size: 1.25rem; line-height: 1; }
.tp2-review__birds .flock-icon { flex: none; width: 2em; height: 2em; }
.tp2-review__comment { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.5; }
.tp2-reviews:not(.is-open) .tp2-review--extra { display: none; }
.tp2-reviews__more {
  display: inline-block; margin-top: 1.4rem; padding: 0; background: none; border: 0;
  color: inherit; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.tp2-reviews__more:hover, .tp2-reviews__more:focus-visible { color: var(--tp-band-head); outline: none; }
.tp2-reviews.is-open .tp2-reviews__more { display: none; }

/* ── Phones and tablets: the same bands, stacked ────────────────────────── */
@media (max-width: 900px) {
  .tp2-hero { min-height: 0; }
  .tp2-hero__in { flex-direction: column; align-items: flex-start; padding-top: 4rem; gap: 1.75rem; }
  .tp2-hero__act { align-self: stretch; }
  .tp2-name { font-size: clamp(3rem, 14vw, 5.5rem); }
  .tp2-facts { grid-template-columns: 1fr; gap: 2rem; }
  .tp2-table__row { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .tp2-table dd { text-align: left; }
  .tp2-index--many ol { grid-template-columns: 1fr; }
  .tp2-index--many li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid color-mix(in srgb, var(--tp-text) 16%, transparent); }
  .tp2-about, .tp2-reviews__in { grid-template-columns: 1fr; gap: 1.25rem; }
  .tp2-work::before { height: 55%; }
}

/* ═══ Colourway picker (onboarding step 1 + portal Settings) ═══════════════
   Each swatch is a miniature of the look: page colour, the disc, a dot of
   the heading colour. "Pick for me" wears every colour and keeps the default. */
.cw-pick { display: flex; flex-wrap: wrap; gap: 0.7rem 0.6rem; margin: 0.4rem 0 1.2rem; }
.cw-pick__opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 4.8rem; cursor: pointer; }
.cw-pick__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cw-pick__swatch {
  position: relative; width: 3.4rem; height: 3.4rem; border-radius: 50%; overflow: hidden;
  background: var(--cw-bg, #333); border: 3px solid rgba(255,255,255,0.18);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.cw-pick__disc { position: absolute; left: -32%; top: 14%; width: 72%; height: 72%; border-radius: 50%; background: var(--cw-disc); }
.cw-pick__dot  { position: absolute; right: 20%; top: 24%; width: 22%; height: 22%; border-radius: 50%; background: var(--cw-head); }
.cw-pick__opt--auto .cw-pick__swatch {
  background: conic-gradient(#390000, #c94110, #ffc06b, #fffbee, #231f20, #012013, #1a7075, #87ffe2, #390000);
}
.cw-pick__opt:hover .cw-pick__swatch { transform: scale(1.06); }
.cw-pick__opt input:checked + .cw-pick__swatch { border-color: var(--color-text); transform: scale(1.1); box-shadow: 0 0 0 2px var(--color-deep), 0 0 0 4px var(--color-text); }
.cw-pick__opt input:focus-visible + .cw-pick__swatch { outline: 2px solid var(--color-ocean); outline-offset: 3px; }
.cw-pick__name { font-size: 0.72rem; line-height: 1.15; text-align: center; color: var(--color-muted); }
.cw-pick__opt input:checked ~ .cw-pick__name { color: var(--color-text); font-weight: 700; }

/* Delivery address inside the hire request bar, shown once something is
   picked: the NZ Post picker, then the suburb, town and postcode it fills in
   (editable, and usable on their own). */
.kit-bar .kit-address { grid-column: 1 / -1; margin: 0; max-width: 34rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.kit-address[hidden] { display: none; }   /* .form-group's flex would otherwise override [hidden] */
.kit-addr { position: relative; }
.kit-addr .bk-combo__list { top: calc(100% + 0.25rem); }
.kit-addr__parts { display: grid; grid-template-columns: 1fr 1fr 6.5rem; gap: 0.5rem; margin-top: 0.5rem; }
.kit-addr__hint { margin: 0.4rem 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--color-muted); }


/* ═══ TALENT DIRECTORY, Sep 2026 design ══════════════════════════════════════
   The "contact sheet": the standard site header, a headline with one big
   search, the filters as a row of chips, and uniform cards that name the
   person on the picture. Each card's still is tinted with that student's
   colourway (the --tc-* custom properties set per card by
   rangai_render_talent_card), with the name in the colourway's heading colour
   over it and discipline, place, flock and rate always visible underneath.
   Everything is scoped to .tdir so the filter script's hooks (ids and
   data-filter attributes) are untouched. */
.tdir { background: var(--color-deep); color: var(--color-text); }
.tdir-head__in, .tdir-filters__in, .tdir-grid-wrap, .tdir .tf-loc-readout {
  width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding-inline: var(--container-pad);
}

/* ── Headline band ──────────────────────────────────────────────────────── */
.tdir-head__in {
  padding-top: 2.75rem; padding-bottom: 1.75rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
/* Carries the landing page's title class so hire-fluid.js paints inside the
   glyphs; these lines restore this page's own type from that rule. */
.tdir .tdir-title {
  position: relative; margin: 0 0 0.75rem; padding-right: 0.25em; text-transform: none;
  /* No tracking: the canvas draws the glyphs untracked, and a tracked box
     would clip its last letter. */
  font-family: var(--font-display); font-weight: 800; line-height: 0.95; letter-spacing: 0;
  font-size: clamp(2.5rem, 5vw, 4rem); color: #fffbee;
}
/* Once the script has taken over the glyphs, the heading itself steps back,
   or the type shows twice. */
.tdir .tdir-title.hire-hero__title--fluid { color: transparent; }
.tdir-sub { margin: 0; font-size: 1.125rem; color: rgba(255,251,238,0.8); }
.tdir-search { position: relative; width: min(100%, 35rem); flex: none; }
.tdir-search .tf-search__label { position: absolute; left: -10000px; }
.tdir-search .tf-search__input {
  box-sizing: border-box; width: 100%; height: 3.25rem; padding: 0 1rem 0 2.9rem;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,251,238,0.24);
  background: var(--color-bg); color: var(--color-text); font: 600 1rem var(--font-sans);
}
.tdir-search .tf-search__input::placeholder { color: rgba(255,251,238,0.6); }
.tdir-search .tf-search__input:focus { outline: 2px solid var(--color-yellow); outline-offset: 2px; }
.tdir-search__icon { position: absolute; left: 1rem; top: 50%; width: 1.35rem; height: 1.35rem; transform: translateY(-50%); color: var(--color-yellow); pointer-events: none; }

/* ── Filters as chips ───────────────────────────────────────────────────── */
.tdir-filters__in {
  padding-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.tdir-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tdir-chip {
  position: relative; display: inline-flex; align-items: center; height: 2.5rem;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,251,238,0.24);
  background: var(--color-bg); color: var(--color-text);
}
.tdir-chip:focus-within { outline: 2px solid var(--color-yellow); outline-offset: 2px; }
.tdir-chip .tf-select, .tdir-chip .tf-sort {
  appearance: none; -webkit-appearance: none; height: 100%; max-width: 16rem;
  padding: 0 2.1rem 0 1rem; border: 0; border-radius: inherit; background: transparent; color: inherit;
  font: 600 0.875rem var(--font-sans); cursor: pointer;
}
.tdir-chip .tf-select:focus-visible, .tdir-chip .tf-sort:focus-visible { outline: none; }
.tdir-chip .tf-select option, .tdir-chip .tf-sort option { color: var(--color-ink); background: #fff; }
.tdir-chip--select::after {
  content: ""; position: absolute; right: 0.95rem; top: 50%; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.tdir-chip .tf-loc-input {
  height: 100%; width: 11rem; padding: 0 1rem; border: 0; border-radius: inherit; background: transparent; color: inherit;
  font: 600 0.875rem var(--font-sans);
}
.tdir-chip .tf-loc-input::placeholder { color: inherit; opacity: 1; }
.tdir-chip .tf-loc-input:focus { outline: none; border-bottom: 0; }
.tdir-chip--check { padding: 0 1rem; gap: 0.5rem; cursor: pointer; font: 600 0.875rem var(--font-sans); }
.tdir-chip--check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tdir-chip--check .tf-check__box { display: none; }
.tdir-chip--check .tf-check__text { order: 0; }
.tdir-chip--check:has(input:checked) { background: var(--color-yellow); color: var(--color-ink); border-color: var(--color-yellow); }
.tdir-tools { display: flex; align-items: center; gap: 0.9rem; }
.tdir-count { font-size: 0.875rem; color: rgba(255,251,238,0.72); }
.tdir .tf-loc-readout { margin-top: -0.5rem; margin-bottom: 1rem; font-size: 0.8rem; color: rgba(255,251,238,0.72); }

/* ── The grid and its cards ─────────────────────────────────────────────── */
.tdir-grid-wrap { padding-bottom: 3rem; }
.tdir .talent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; }
.tdir .talent-card {
  position: relative; display: flex; flex-direction: column; aspect-ratio: auto; overflow: hidden;
  border-radius: 4px; background: var(--color-bg); color: var(--color-text); text-decoration: none; cursor: pointer;
  transition: transform var(--transition);
}
.tdir .talent-card:hover, .tdir .talent-card:focus-visible { transform: translateY(-2px); outline: none; }
.tdir .talent-card:focus-visible .talent-card__still { outline: 2px solid var(--color-yellow); outline-offset: -2px; }
.tdir .talent-card__still { position: relative; aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate; background: var(--tc-bg, #390000); }
.tdir .talent-card__thumb, .tdir .talent-card__preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05); padding: 0;
}
.tdir .talent-card__thumb--framed { object-fit: contain; padding: 6%; box-sizing: border-box; }
.tdir .talent-card__tint {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--tc-bg, #390000); opacity: var(--tc-tint, 0.78); mix-blend-mode: var(--tc-blend, multiply);
}
.tdir .talent-card__title {
  position: absolute; left: 1rem; right: 1rem; bottom: 0.85rem;
  font-family: var(--font-display); font-weight: 800; line-height: 0.95; letter-spacing: -0.01em;
  font-size: clamp(1.4rem, 2vw, 1.9rem); color: var(--tc-head, #ffc06b); text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.tdir .talent-card:hover .talent-card__title { text-decoration: underline; text-underline-offset: 3px; }
.tdir .talent-card__badge {
  position: absolute; left: 0.75rem; top: 0.75rem; right: auto; bottom: auto; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--tc-head, #ffc06b); color: var(--tc-bg, #390000);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: none;
}
.tdir .talent-card__body { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem 0.9rem; }
.tdir .talent-card__col { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tdir .talent-card__col--end { align-items: flex-end; flex: none; }
.tdir .talent-card__discipline {
  font-size: 0.875rem; font-weight: 600; color: var(--color-text); text-transform: none; letter-spacing: 0; text-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tdir .talent-card__place { font-size: 0.8rem; color: rgba(255,251,238,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdir .talent-card__flock { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.95rem; color: var(--color-text); text-shadow: none; }
.tdir .talent-card__flock .flock-icon { width: 1.3em; height: 1.3em; }
.tdir .talent-card__new { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); background: rgba(255,251,238,0.14); }
.tdir .talent-card__rate { font-size: 0.8rem; font-weight: 400; color: rgba(255,251,238,0.72); text-shadow: none; white-space: nowrap; }
.tdir .talent-browse__empty, .tdir .talent-browse__noresults, .tdir .talent-browse__loading { margin: 0; padding: 2rem 0; text-align: center; color: rgba(255,251,238,0.72); }

@media (max-width: 900px) {
  .tdir-head__in { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .tdir .talent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tdir .talent-grid { grid-template-columns: 1fr; }
  .tdir-chip .tf-loc-input { width: 8rem; }
  .tdir-chip .tf-select, .tdir-chip .tf-sort { max-width: 11rem; }
}



/* ═══ JOBS PANEL, Sep 2026 ══════════════════════════════════════════════════
   The adverts a business or client placed, in the Business Portal and the
   Client Dashboard. Both sit on the dark green like the rest of the site, so
   everything here runs through the site tokens: cream text, muted green-grey
   detail, 6% glass panels with the standard hairline. The student portal
   reuses the thread through .stu-thread. */
.jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.portal-nav__count { margin-left: auto; background: var(--color-accent); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; }
.jobs-panel .biz-stat__num { color: var(--color-text); }

.job-card {
  background: rgba(255,255,255,0.06); border: 1px solid var(--color-border); border-radius: 14px;
  padding: 1.1rem 1.25rem; margin: 0 0 0.75rem;
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center;
}
.job-card h3 { margin: 0; font-size: 1.05rem; }
.job-card h3 a { color: inherit; text-decoration: none; }
.job-card h3 a:hover { text-decoration: underline; }
.job-card__meta { font-size: 0.82rem; color: var(--color-muted); margin: 0.15rem 0 0.55rem; }
.job-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.job-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.job-chip { font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(255,251,238,0.12); color: var(--color-text); }
.job-chip--hot { background: var(--color-accent); color: #fff; }
.job-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.job-pill--open { background: var(--color-ocean); color: var(--color-deep); }
.job-pill--filled { background: var(--color-yellow); color: var(--color-ink); }
.job-pill--closed { background: rgba(255,251,238,0.14); color: var(--color-text); }
.job-crumb { display: inline-block; font-size: 0.85rem; color: var(--color-muted); text-decoration: none; margin-bottom: 0.5rem; }
.job-crumb:hover { color: var(--color-text); }

/* The actions row: two of the buttons open a small form under themselves. */
.job-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-start; margin: 0.75rem 0 1.25rem; }
.job-actions details summary { list-style: none; cursor: pointer; user-select: none; }
.job-actions details summary::-webkit-details-marker { display: none; }
.job-actions details[open] summary { background: rgba(255,255,255,0.08); }
.job-form {
  background: rgba(255,255,255,0.06); border: 1px solid var(--color-border); border-radius: 12px;
  padding: 1rem 1.1rem; margin-top: 0.6rem; display: grid; gap: 0.6rem; width: min(640px, 80vw);
}
.job-form__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

.job-two { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.25rem; align-items: start; max-width: 1000px; }
.job-box { background: rgba(255,255,255,0.06); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.1rem 1.25rem; }
.job-box + .job-box { margin-top: 1.25rem; }
.job-box h4 { margin: 0 0 0.75rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.job-stu {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.5rem; margin: 0 -0.5rem;
  border-bottom: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: inherit;
}
.job-stu:last-of-type { border-bottom: 0; }
.job-stu:hover, .job-stu.is-open { background: rgba(255,255,255,0.06); }
.job-av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--color-yellow); color: var(--color-ink); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
}
.job-av--me { background: var(--color-accent); color: #fff; }
.job-stu__name { font-weight: 700; font-size: 0.92rem; color: var(--color-text); }
.job-stu__sub { font-size: 0.78rem; color: var(--color-muted); }
.job-stu__state { margin-left: auto; text-align: right; font-size: 0.78rem; white-space: nowrap; color: var(--color-text); }
.job-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; vertical-align: 1px; background: rgba(255,251,238,0.35); }
.job-dot--replied { background: var(--color-ocean); }
.job-dot--booked { background: var(--color-accent); }
.job-dot--seen { background: var(--color-muted); }

.job-msg { display: grid; grid-template-columns: 36px 1fr; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.job-msg__who { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.15rem; }
.job-msg__who b { color: var(--color-text); }
.job-msg p { margin: 0; font-size: 0.92rem; white-space: pre-wrap; }
.job-reply { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.job-reply .form-textarea { min-height: 76px; }
.job-reply__row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.78rem; color: var(--color-muted); }
.job-brief dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.88rem; }
.job-brief dt { color: var(--color-muted); font-weight: 600; }
.job-brief dd { margin: 0; }
.job-brief p { font-size: 0.88rem; margin: 0.75rem 0 0; white-space: pre-wrap; }
.stu-thread { max-width: 620px; margin: 0 0 1.25rem; }

/* The team on a job: one row per person, their money on the right, the
   actions under. States are pills; waiting states go gold so they read. */
.job-mem { display: grid; grid-template-columns: 36px 1fr auto; gap: 0.35rem 0.75rem; align-items: start; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.job-mem:last-child { border-bottom: 0; }
.job-mem--off { opacity: 0.5; }
.job-mem__name { font-weight: 700; font-size: 0.92rem; }
.job-mem__sub { font-size: 0.78rem; color: var(--color-muted); }
.job-mem__money { text-align: right; font-size: 0.82rem; color: var(--color-muted); white-space: nowrap; }
.job-mem__money b { display: block; font-size: 0.98rem; color: var(--color-text); }
.job-mem__acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.2rem; }
.job-mem__acts form { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.job-mem__acts .form-input { width: 96px; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.job-mem__acts .form-input--wide { width: 200px; }
.job-mem__acts details { display: inline-block; }
.job-mem__acts details summary { list-style: none; cursor: pointer; display: inline-flex; }
.job-mem__acts details summary::-webkit-details-marker { display: none; }
.job-mem__acts details[open] { flex-basis: 100%; }
.job-mem__acts details[open] form { margin-top: 0.4rem; }
.job-state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255,251,238,0.12); color: var(--color-text); white-space: nowrap; }
.job-state--wait { background: var(--color-yellow); color: var(--color-ink); }
.job-state--ok { background: var(--color-ocean); color: var(--color-deep); }
.job-state--done { background: var(--color-accent); color: #fff; }
.job-money { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; font-size: 0.9rem; margin: 0 0 0.85rem; }
.job-money dt { color: var(--color-muted); }
.job-money dd { margin: 0; text-align: right; }
.job-money .is-total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--color-border); padding-top: 0.4rem; }
.job-money .is-due { color: var(--color-yellow); font-weight: 700; }
.job-pay { display: grid; gap: 0.6rem; }
.job-pay .btn--primary { justify-self: start; }
.job-pill--booked { background: var(--color-accent); color: #fff; }
.job-pill--done { background: var(--color-yellow); color: var(--color-ink); }
.job-hint { font-size: 0.8rem; color: var(--color-muted); margin: 0.5rem 0 0; }
.job-trail { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.78rem; color: var(--color-muted); }
.job-trail li { padding: 0.2rem 0; border-top: 1px solid var(--color-border); }

/* ═══ JOBS PANEL, round two (Sep 2026) ═════════════════════════════════════
   Picking the team is the "Checkout": every student the job went to in one
   list with an On the team switch and the hours and rate in the row, and a
   receipt on the right. Once paid it is "Needs you first": a gold top-up
   banner when money is owed, a Needs you strip of decision cards, then All
   good. Chosen from rangai-design/payments (1.2, 2.2, 3.2). */
.btn--lg { padding: 0.85rem 1.6rem; font-size: 1rem; }
/* The team and the money need more room than a reading-width panel. */
.biz-panel.jobs-panel, .jobs-panel { max-width: 1100px; }
.jh { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.jh__title { margin: 0 0 0.35rem; font-size: 1.5rem; }
.jh__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; font-size: 0.88rem; color: var(--color-muted); }
.job-chip--gold { background: var(--color-yellow); color: var(--color-ink); }

/* Job options: one menu instead of a row of buttons. */
.job-opts { position: relative; }
.job-opts > summary { list-style: none; cursor: pointer; user-select: none; }
.job-opts > summary::-webkit-details-marker { display: none; }
.job-opts[open] > summary { background: rgba(255,255,255,0.08); }
.job-opts[open] { flex-basis: 100%; }
.job-opts__menu {
  margin-top: 0.5rem; width: min(600px, 100%);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35); padding: 0.4rem;
}
.job-opts__menu > details > summary, .job-opts__item {
  display: block; width: 100%; text-align: left; padding: 0.6rem 0.8rem; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--color-text); background: none; border: 0; list-style: none;
}
.job-opts__menu > details > summary::-webkit-details-marker { display: none; }
.job-opts__menu > details > summary:hover, .job-opts__item:hover { background: rgba(255,255,255,0.06); }
.job-opts__item--danger { color: var(--color-danger); }
.job-opts__menu .job-form { width: auto; margin: 0.2rem 0.4rem 0.6rem; }

/* The Checkout list and its switches. */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.6rem; align-items: start; max-width: 1060px; }
.co-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.co-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin: 0; }
.co-head .text-muted { font-size: 0.85rem; }
.co-list { background: rgba(255,255,255,0.06); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.co-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px 80px 84px; gap: 0.4rem 0.75rem; align-items: center; padding: 0.9rem 1rem; border-top: 1px solid rgba(255,255,255,0.08); }
.co-labels { border-top: 0; padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); font-weight: 700; background: rgba(255,255,255,0.03); }
.co-labels .r, .co-fee { text-align: right; }
.co-row.on { background: rgba(135,255,226,0.05); }
.co-row.dis { color: var(--color-muted); }
.co-sw-form { margin: 0; }
.co-p { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
.co-p .job-av { width: 32px; height: 32px; font-size: 0.75rem; }
.co-n { font-weight: 700; font-size: 0.92rem; line-height: 1.25; color: var(--color-text); text-decoration: none; }
.co-n:hover { text-decoration: underline; }
.co-s { font-size: 0.78rem; color: var(--color-muted); }
.co-tag { font-size: 0.75rem; font-weight: 600; color: var(--color-ocean); margin-left: 0.4rem; }
.co-new { margin-left: 0.35rem; padding: 0.05rem 0.5rem; font-size: 0.7rem; }
.co-in.form-input { width: 100%; padding: 0.35rem 0.45rem; font-size: 0.85rem; text-align: right; }
.co-in:disabled { opacity: 0.7; }
.co-row.dim .co-in { opacity: 0.55; }
.co-row.dim .co-in:focus { opacity: 1; }
.co-fee { font-weight: 700; font-variant-numeric: tabular-nums; }
.co-fee.off { color: var(--color-muted); font-weight: 600; font-size: 0.8rem; }
.co-wide { grid-column: 3 / -1; }
.co-q { grid-column: 2 / -1; font-size: 0.85rem; margin: 0 0 0 2.75rem; padding-left: 0.6rem; border-left: 2px solid var(--color-border); color: var(--color-text); }
.co-gold { grid-column: 2 / -1; margin: 0 0 0 2.75rem; font-size: 0.78rem; color: var(--color-yellow); }
.co-upd { margin: 0; }
.co-thread { padding: 0.25rem 1rem 1rem 4.5rem; border-top: 0; }
.co-thread .job-msg { border-bottom-color: rgba(255,255,255,0.08); }
.co-foot { padding: 0.75rem 1rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.85rem; color: var(--color-muted); background: rgba(255,255,255,0.02); }
.co .link { color: var(--color-yellow); font-weight: 600; text-decoration: none; }
.co .link:hover { text-decoration: underline; }
.co-brief { margin-top: 1.1rem; }
.sw { width: 40px; height: 22px; border-radius: 999px; background: rgba(255,251,238,0.2); position: relative; display: inline-block; flex: none; border: 0; padding: 0; cursor: pointer; vertical-align: middle; transition: background var(--transition); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: left var(--transition); }
.sw.on { background: var(--color-ocean); }
.sw.on::after { left: 21px; background: var(--color-deep); }
.sw:hover { box-shadow: 0 0 0 3px rgba(255,192,107,0.35); }
.sw:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 2px; }
.sw.is-off { cursor: default; opacity: 0.35; }
.sw.is-off:hover { box-shadow: none; }

/* The receipt. */
.rcpt { position: relative; background: var(--color-bg); border-radius: 16px 16px 0 0; padding: 1.25rem 1.35rem 1.5rem; margin-bottom: 0.75rem; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.rcpt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: linear-gradient(135deg, var(--color-bg) 50%, transparent 50%) 0 -8px / 16px 16px repeat-x,
              linear-gradient(-135deg, var(--color-bg) 50%, transparent 50%) 0 -8px / 16px 16px repeat-x; }
.rcpt-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.25rem; }
.rcpt-h b { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.rcpt-h span { font-size: 0.75rem; font-weight: 700; background: var(--color-ocean); color: var(--color-deep); border-radius: 999px; padding: 0.05rem 0.55rem; }
.rcpt-for { font-size: 0.78rem; color: var(--color-muted); margin: 0 0 1rem; }
.rcpt-empty { font-size: 0.88rem; color: var(--color-muted); margin: 0 0 0.5rem; }
.rcpt hr { border: 0; border-top: 1px dashed rgba(255,251,238,0.22); margin: 0.9rem 0; }
.rl { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.9rem; }
.rl .who { line-height: 1.25; }
.rl .who small { display: block; font-size: 0.78rem; color: var(--color-muted); }
.rl .lead { flex: 1; border-bottom: 1.5px dotted rgba(255,251,238,0.28); margin-bottom: 5px; min-width: 12px; }
.rl .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.rl.fee { font-size: 0.875rem; }
.rl.fee .who { color: var(--color-muted); }
.rl.tot { align-items: baseline; margin: 0; }
.rl.tot .who { font-weight: 700; font-size: 0.95rem; }
.rl.tot .who small { display: inline; margin-left: 0.25rem; }
.rl.tot .amt { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -0.01em; }
.co-pay { width: 100%; justify-content: center; margin-top: 1.1rem; padding: 0.95rem 0.75rem; font-size: 0.97rem; }
.ways-h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); font-weight: 700; margin: 1.25rem 0 0.25rem; }
.ways { margin: 0; padding: 0; list-style: none; }
.ways li { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; font-size: 0.8rem; color: var(--color-muted); padding: 0.55rem 0; border-top: 1px solid rgba(255,255,255,0.08); }
.ways li b { color: var(--color-text); font-weight: 600; }
.ways svg { color: var(--color-text); margin-top: 1px; }
.rcpt-note { font-size: 0.78rem; color: var(--color-muted); margin: 0.9rem 0.25rem 0; line-height: 1.45; }

/* Top-up banner: gold when money is owed, mint when it is owed back. */
.topup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; align-items: center; background: var(--color-yellow); color: var(--color-ink); border-radius: 14px; padding: 1.35rem 1.6rem; margin: 0 0 1.4rem; max-width: 1060px; }
.topup--back { background: var(--color-ocean); color: var(--color-deep); grid-template-columns: 1fr; }
.topup__lbl { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; background: var(--color-ink); color: var(--color-yellow); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.6rem; }
.topup--back .topup__lbl { background: var(--color-deep); color: var(--color-ocean); }
.topup__hl { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.01em; }
.topup p { margin: 0.5rem 0 0; font-size: 0.9rem; opacity: 0.85; max-width: 580px; }
.topup__go { display: grid; justify-items: end; gap: 0.55rem; text-align: right; }
.topup__go form { margin: 0; }
.topup__btn { padding: 0.85rem 1.6rem; font-size: 1rem; }
.topup__bank { font-size: 0.8rem; max-width: 320px; }
.topup__bank summary { cursor: pointer; font-weight: 700; list-style: none; text-decoration: underline; }
.topup__bank summary::-webkit-details-marker { display: none; }
.topup__bank p { margin: 0.4rem 0 0; font-size: 0.8rem; text-align: right; }

/* Needs you strip and its decision cards. */
.nf-strip { border: 1px solid rgba(255,192,107,0.5); background: rgba(255,192,107,0.07); border-radius: 18px; padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1.6rem; max-width: 1060px; }
.nf-hd, .nf-good-hd { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.9rem; }
.nf-hd h3, .nf-good-hd h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; margin: 0; }
.nf-hd .text-muted, .nf-good-hd .text-muted { font-size: 0.85rem; }
.nf-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-yellow); box-shadow: 0 0 0 5px rgba(255,192,107,0.2); flex: none; margin: 0 3px; }
.nf-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--color-ocean); color: var(--color-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; flex: none; }
.nf-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) 260px; gap: 1.25rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.25rem 1.35rem; }
.nf-card + .nf-card { margin-top: 0.75rem; }
.job-av--lg { width: 52px; height: 52px; font-size: 1.1rem; }
.nf-q { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.05; margin: 0.1rem 0 0.5rem; }
.nf-why { margin: 0 0 1rem; font-size: 0.9rem; color: var(--color-muted); }
.nf-why q { color: var(--color-text); font-style: italic; }
.nf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.nf-acts > form { margin: 0; }
.nf-or { font-size: 0.85rem; color: var(--color-muted); }
.nf-send { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.nf-num { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-muted); }
.nf-num .form-input { width: 76px; text-align: center; font-weight: 700; padding: 0.5rem; }
.nf-send .form-input[name="note"] { width: 200px; padding: 0.5rem 0.7rem; font-size: 0.85rem; }
.nf-diff { display: inline-block; }
.nf-diff > summary { list-style: none; cursor: pointer; }
.nf-diff > summary::-webkit-details-marker { display: none; }
.nf-diff[open] { flex-basis: 100%; }
.nf-diff[open] > .nf-send { margin-top: 0.6rem; }
.nf-cost { border-left: 1px solid var(--color-border); padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nf-lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-yellow); font-weight: 700; }
.nf-crow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-size: 0.875rem; }
.nf-crow span { color: var(--color-muted); }
.nf-crow b { font-variant-numeric: tabular-nums; }
.nf-crow b.big { font-size: 1.25rem; color: var(--color-yellow); }
.nf-sub { display: block; font-size: 0.78rem; color: var(--color-muted); line-height: 1.45; }
.nf-list { border-top: 1px solid var(--color-border); max-width: 1060px; }
.nf-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 90px auto; gap: 1rem; align-items: center; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--color-border); }
.nf-row--off { opacity: 0.5; }
.nf-nm { font-size: 0.95rem; }
.nf-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.nf-row-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; align-items: center; }
.nf-row-acts > form { margin: 0; }
.nf-remove { background: none; border: 0; color: var(--color-danger); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0.3rem 0.4rem; }
.nf-remove:hover { text-decoration: underline; }
.nf-ico { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(135,255,226,0.5); color: var(--color-ocean); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.nf-about { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); font-weight: 700; margin: 1.75rem 0 0.6rem; }
.nf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; max-width: 1060px; }
.nf-two .job-box + .job-box { margin-top: 0; }
.nf-thread { max-width: 1060px; margin-top: 1.1rem; }

/* The student's hours strip on Bookings. */
.hs { border: 1px solid rgba(255,192,107,0.55); background: rgba(255,192,107,0.06); border-radius: 16px; margin: 0 0 2rem; max-width: 900px; }
.hs-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 1rem 1.35rem; border-bottom: 1px solid rgba(255,192,107,0.25); }
.hs-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-yellow); box-shadow: 0 0 0 5px rgba(255,192,107,0.2); flex: none; }
.hs-title { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1; margin: 0; }
.hs-n { background: var(--color-yellow); color: var(--color-ink); font-weight: 700; font-size: 0.8rem; padding: 0.05rem 0.6rem; border-radius: 999px; }
.hs-aside { margin-left: auto; font-size: 0.8rem; color: var(--color-muted); }
.hs-row { padding: 1.1rem 1.35rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); }
.hs-row:first-of-type { border-top: 0; }
.hs-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.hs-ref { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.hs-job { font-size: 1.05rem; margin: 0.15rem 0 0.2rem; }
.hs-meta { font-size: 0.82rem; color: var(--color-muted); }
.hs-put { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0; }
.hs-stepper { display: inline-flex; align-items: center; height: 50px; border: 1.5px solid var(--color-border); border-radius: 999px; background: rgba(255,255,255,0.04); overflow: hidden; }
.hs-sb { width: 48px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; color: var(--color-text); background: none; border: 0; cursor: pointer; }
.hs-sb:hover { background: rgba(255,255,255,0.08); }
.hs-v { min-width: 96px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 0.25rem; border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); }
.hs-v input { width: 60px; background: none; border: 0; color: var(--color-text); text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; -moz-appearance: textfield; }
.hs-v input::-webkit-outer-spin-button, .hs-v input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hs-v input:focus { outline: none; }
.hs-v:focus-within { background: rgba(255,255,255,0.06); }
.hs-v small { font-size: 0.75rem; font-weight: 600; color: var(--color-muted); padding-top: 0.35rem; }
.hs-calc { display: flex; flex-direction: column; line-height: 1.15; }
.hs-calc b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hs-calc span { font-size: 0.75rem; color: var(--color-muted); }
.hs-note { flex-basis: 100%; font-size: 0.85rem; }
.hs-note summary { cursor: pointer; color: var(--color-yellow); font-weight: 600; list-style: none; }
.hs-note summary::-webkit-details-marker { display: none; }
.hs-note .form-input { margin-top: 0.5rem; max-width: 480px; }
.hs-hint { display: block; margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--color-muted); }
.hs-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: stretch; }
.hs-vs { border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.hs-vs--theirs { border-color: rgba(255,192,107,0.6); background: rgba(255,192,107,0.08); }
.hs-who { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.hs-vs--theirs .hs-who { color: var(--color-yellow); }
.hs-big { font-family: var(--font-display); font-weight: 800; font-size: 2.9rem; line-height: 1; }
.hs-big small { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; color: var(--color-muted); margin-left: 0.25rem; }
.hs-fee { font-size: 0.875rem; }
.hs-fee b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.hs-quote { margin: 0; font-size: 0.85rem; font-style: italic; }
.hs-quote span { display: block; font-style: normal; font-size: 0.75rem; color: var(--color-muted); margin-top: 0.2rem; }
.hs-mine { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
.hs-spacer { flex: 1; }
.hs-vs form { margin: 0; }
.hs-or { align-self: center; font-size: 0.8rem; color: var(--color-muted); }
.hs-list-title { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; margin: 0 0 0.75rem; }
.hs-pointer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--color-muted); }
.hs-pointer .link { color: var(--color-yellow); font-weight: 600; text-decoration: none; }

@media (max-width: 1100px) {
  .co { grid-template-columns: 1fr; }
  .co aside { max-width: 480px; }
}
@media (max-width: 900px) {
  .nf-card { grid-template-columns: 1fr; }
  .nf-card > .job-av { display: none; }
  .nf-cost { border-left: 0; border-top: 1px solid var(--color-border); padding: 0.9rem 0 0; }
  .nf-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .nf-amt { grid-column: 2; text-align: left; }
  .nf-row-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .nf-two { grid-template-columns: 1fr; }
  .topup { grid-template-columns: 1fr; }
  .topup__go { justify-items: start; text-align: left; }
  .topup__bank p { text-align: left; }
  .topup__hl { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .co-row { grid-template-columns: 44px minmax(0, 1fr) 60px; }
  .co-row .co-in[name="rate"] { display: none; }
  .co-fee { grid-column: 2 / -1; text-align: left; }
  .co-labels span:nth-child(4), .co-labels span:nth-child(5) { display: none; }
  .co-q, .co-gold { margin-left: 0; }
  .co-thread { padding-left: 1rem; }
  .hs-versus { grid-template-columns: 1fr; }
  .hs-or { justify-self: center; }
  .hs-aside { margin-left: 0; flex-basis: 100%; }
}

/* The hours box on a student's booking: the agreed number, what the business
   said, and the form to put in their own. */
.hours-box { margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 0.875rem; }
.hours-box__head { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; font-weight: 600; margin-bottom: 0.5rem; }
.hours-box__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.hours-box__row .form-input { flex: 1 1 160px; }
.hours-box p { margin: 0 0 0.6rem; }
.hours-box details summary { list-style: none; cursor: pointer; display: inline-flex; }
.hours-box details summary::-webkit-details-marker { display: none; }
.hours-box .form-hint { display: block; margin-top: 0.6rem; }

@media (max-width: 900px) {
  .job-two { grid-template-columns: 1fr; }
  .job-mem { grid-template-columns: 36px 1fr; }
  .job-mem__money { grid-column: 2; text-align: left; white-space: normal; }
  .job-mem__money b { display: inline; margin-right: 0.4rem; }
  .job-card { grid-template-columns: 1fr; }
  .job-card__side { flex-direction: row; align-items: center; }
  .job-form { width: 100%; }
  .job-form__row { grid-template-columns: 1fr; }
}

/* ═══ FILE LINKS, Sep 2026 ══════════════════════════════════════════════════
   Files attached to a job or an enquiry read as links: gold, underlined, a
   paperclip in front, side by side and wrapping. The site's base `a` rule
   strips colour and underline, which left them looking like plain text. */
.file-links { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.file-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--color-yellow); font-weight: 600; word-break: break-word;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.file-link::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}
.file-link:hover, .file-link:focus-visible { text-decoration-thickness: 2px; }

/* Widen targeting: the live count of who a choice reaches. */
.job-widen__count { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--color-ocean); }
.job-widen__count.is-none { color: var(--color-muted); font-weight: 400; }
.job-widen .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══ MOBILE PASS, logged-in pages (Sep 2026) ═══════════════════════════════
   The student portal, the business portal and the client dashboard on a
   phone. The content column is a grid track, which grew to fit its widest
   child (the income table, the availability rows) and pushed every page
   sideways. It is held to the screen now; wide things wrap or scroll inside. */
.portal-main { min-width: 0; }
.av-time-range .form-input { width: 9.5rem; }
.co-tag { white-space: nowrap; }
/* A status badge with no colour of its own reads as a pill, not stray text. */
.queue-badge { background: rgba(255,255,255,0.08); color: var(--color-text); }
@media (max-width: 1024px) {
  .portal-layout { grid-template-columns: minmax(0, 1fr); }
  /* The section tabs: one row that scrolls sideways, each label on one line,
     the active tab underlined in orange in place of the desktop side bar. */
  .portal-sidebar, .portal-dash-page .portal-sidebar { padding: 0.5rem 0; }
  .portal-nav { gap: 0.25rem; padding: 0 1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .portal-nav::-webkit-scrollbar { display: none; }
  .portal-nav > .portal-nav__item { flex: none; margin-top: 0 !important; }
  .portal-nav__item a { white-space: nowrap; padding: 0.6rem 0.85rem; border-radius: 10px; }
  .portal-nav__item.is-active a { border-left: 0; padding-left: 0.85rem; box-shadow: inset 0 -2px 0 var(--color-accent); }
}
@media (max-width: 600px) {
  /* Availability: the day on one line, its times full width under it. */
  .av-day-row { flex-wrap: wrap; row-gap: 0.4rem; }
  .av-time-range { flex: 1 1 100%; padding-left: 1.6rem; }
  .av-time-range .form-input { flex: 1; width: auto; min-width: 0; }
  /* A card's price and status sit under its title, left-aligned, instead of
     a right-aligned block stranded on its own line. */
  .card-head__side { width: 100%; text-align: left !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
  .card-head__side .queue-badge { border-radius: 10px; line-height: 1.35; }
}
/* The income table scrolls sideways inside its card on a phone: numbers and
   dates stay on one line, only the job name wraps. */
.income-table th, .income-table td { white-space: nowrap; }
.income-table td:nth-child(2) { white-space: normal; min-width: 10rem; }

/* ═══ MOBILE PASS, public pages (Sep 2026) ══════════════════════════════════
   From a phone audit of every public page at 390px and 360px wide. */

/* Gold buttons carry dark text. The site went dark and --color-text turned
   cream, which left cream on gold (about 1.5:1). Hover still turns orange
   with cream text. */
.bk-submit, .rg-modal__btn--primary, .talent-top__cta, .hire-search__btn { color: var(--color-deep); }
.bk-submit:hover, .talent-top__cta:hover, .hire-search__btn:hover { color: var(--color-text); }

/* Buttons centre their label, and a disabled one looks it. */
.btn { justify-content: center; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Sign-up day circles: the light-theme white fill made cream day names vanish. */
.onb-day span { background-color: rgba(255,251,238,0.08); border-color: rgba(255,251,238,0.35); color: var(--color-text); }
.onb-consent a { text-decoration: underline; text-underline-offset: 2px; }
.cw-pick { margin-top: 0.9rem; }

/* Footer: the logo sits flush with the lines under it (the img's 140px width
   attribute boxed a narrower logo); legal links in a row. */
.site-footer__brand img { height: 34px; width: auto; display: block; }
.site-footer__brand > a { align-self: flex-start; display: inline-block; }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

/* A profile's colour runs straight into the footer, no band of site green. */
.site-main:has(> .tp2) + .site-footer { margin-top: 0; }

/* The Estimate footer's totals line up with the rows above (the total is the
   second cell there, which the centred-column rule caught). */
.bk-estimate tfoot td:last-child { text-align: right; }
.bk-estimate th { font-size: 0.75rem; }
/* Two inputs side by side stay level when one label wraps. */
.bk-row--2 { align-items: end; }

/* Content pages whose text opens with its own heading show one H1, not two. */
.page-content .page-title:has(+ .entry-content > h1:first-child) { display: none; }
.text-muted a:not(.btn), .link { text-decoration: underline; text-underline-offset: 2px; }

/* 404 */
.error-404 { padding-block: 3rem 5rem; }
.error-404 p { margin: 0.75rem 0 1.5rem; }

/* Small text lifted to a readable floor. */
.kit-card__cat, .kit-card__asset, .booking-fact__k, .bk-hint, .cw-pick__name { font-size: 0.75rem; }
.tdir-sub, .tp2-tagline { text-wrap: pretty; }

/* Pop-up close button: a thumb-sized target. */
.rg-modal__close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; top: 0.2rem; right: 0.3rem; }

/* The More info sheet copies the parts list; its "+N more" line stays on the card. */
.kit-card__list-more { display: none; font-style: italic; color: var(--color-muted); }
[data-info-contents] .kit-card__list-more { display: none !important; }

@media (max-width: 768px) {
  /* iPhones zoom into any field under 16px and stay zoomed. */
  .bk-input, .bk-row--4 .bk-input, .form-input, .form-select, .form-textarea, .co-in.form-input,
  .tdir-chip .tf-select, .tdir-chip .tf-sort, .tdir-chip .tf-loc-input { font-size: 16px; }

  /* Mobile menu: every item a full-height row, Hire a Student in line with them. */
  .site-header .site-header__hire { padding: 0.65rem 0.75rem; justify-content: flex-start; }
  .site-nav__list a { display: block; padding: 0.65rem 0.75rem; }

  /* Burger on the talent pages: a 44px target, the icon where it was. */
  .talent-burger { width: 54px; height: 46px; padding: 10px; margin-right: -10px; }

  /* Footer links: taller rows to tap. */
  .footer-nav__list { gap: 0; }
  .footer-nav__list a, .footer-socials a { display: inline-block; padding-block: 0.35rem; }

  /* One portfolio piece fills the width rather than half of it. */
  .tp2 .media-grid:has(> .media-tile:only-child) { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Home hero buttons: one full-width stack, same width each. */
  .hire-hero__ctas { flex-direction: column; }
  .hire-hero__ctas .hire-cta { width: 100%; }
}

@media (max-width: 600px) {
  /* Kit cards list the first three parts; the rest are in More info. */
  .kit-card__list li:nth-child(n+4):not(.kit-card__list-more) { display: none; }
  .kit-card__list .kit-card__list-more { display: list-item; }
  /* Colour picker: three to a row, centred. */
  .cw-pick { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; }
}

@media (max-width: 560px) {
  /* Services: date pickers full width instead of stranded on the right. */
  .kit-dates { justify-content: stretch; }
  .kit-dates label { flex: 1 1 100%; }
  .kit-dates input { min-width: 0; width: 100%; }
  /* Services tabs: a tidy two-by-two. */
  .svc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .svc-tab { padding: 0.8rem 0.5rem; }
  /* Home search: service on row one, location and the button together on row two. */
  .hire-search__input { flex: 1 1 100%; }
  .hire-search__pin { display: none; }
  .hire-search .hire-search__loc { flex: 1 1 0; }
  /* /talent filters: an even two-column grid of chips, sort across the row. */
  .tdir-chips { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tdir-chip { width: 100%; }
  .tdir-chip .tf-select, .tdir-chip .tf-loc-input, .tdir-chip .tf-sort { width: 100%; max-width: none; }
  .tdir-tools { width: 100%; }
  .tdir-tools .tdir-chip { flex: 1; }
}

@media (max-width: 420px) {
  /* Seven day circles on one row. */
  .onb-days { flex-wrap: nowrap; gap: 0.3rem; }
  .onb-day span { width: 2.6rem; height: 2.6rem; font-size: 0.8rem; }
}