/* ==========================================================================
   AKGraphics - shared stylesheet
   Built on APPLE_DESIGN_SYSTEM.md.
   Deliberate departure: the accent hue is warm gold, not Apple blue.
   Apple's RULE is kept (one accent, and it means "interactive").
   Committed dark theme - every colour is painted explicitly.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Segoe UI Variable", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* apple.com scale, large breakpoint */
  --t-hero: 56px;      --t-hero-lh: 1.07143;    --t-hero-ls: -0.005em;
  --t-headline: 48px;  --t-headline-lh: 1.08349; --t-headline-ls: -0.002em;
  --t-promo: 40px;     --t-promo-lh: 1.1;        --t-promo-ls: 0em;
  --t-callout: 32px;   --t-callout-lh: 1.125;    --t-callout-ls: 0.002em;
  --t-subhead: 28px;   --t-subhead-lh: 1.14286;  --t-subhead-ls: 0.007em;
  --t-intro: 21px;     --t-intro-lh: 1.19048;    --t-intro-ls: 0.011em;
  --t-lead: 19px;      --t-lead-lh: 1.21053;     --t-lead-ls: 0.012em;
  --t-body: 17px;      --t-body-lh: 1.47059;     --t-body-ls: -0.022em;
  --t-small: 14px;     --t-small-lh: 1.42859;    --t-small-ls: -0.016em;
  --t-caption: 12px;   --t-caption-lh: 1.33337;  --t-caption-ls: -0.01em;

  /* ---- Colour --------------------------------------------------------- */
  --ink:        #f5f5f7;   /* primary text */
  --ink-2:      #86868b;   /* secondary  */
  --ink-3:      #6e6e73;   /* tertiary   */

  --bg:         #000000;   /* pure black, per the reference */
  --bg-1:       #0a0a0b;
  --bg-2:       #161617;
  --bg-3:       #1d1d1f;
  --line:       #333336;
  --line-2:     #424245;

  /* the one accent - warm gold, meaning "interactive" */
  --gold:       #e8a33d;
  --gold-hi:    #f2b458;
  --gold-lo:    #d8901f;
  --gold-ink:   #1a1206;   /* text on a gold fill */
  --gold-tint:  rgba(232, 163, 61, 0.12);

  --ok:         #30d158;
  --warn:       #ff9230;

  /* ---- Layout --------------------------------------------------------- */
  --content: 1260px;
  --wide: 1680px;
  --media: 1048px;
  --gut-in: 20px;
  --gut-out: 24px;
  --nav-h: 52px;

  /* ---- Radii ---------------------------------------------------------- */
  --r-pill: 980px;
  --r-card: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --r-xs: 8px;

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-inout: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-content: cubic-bezier(0.25, 0.1, 0.3, 1);
  --ease-hero: cubic-bezier(0.28, 0.11, 0.32, 1);
  --d-micro: 120ms; --d-ui: 240ms; --d-lg: 320ms; --d-copy: 600ms; --d-slide: 800ms;

  /* ---- Glass ---------------------------------------------------------- */
  --glass-body: rgba(22, 22, 23, 0.44);
  --glass-line: rgba(255, 255, 255, 0.14);
  --glass-rim-a: rgba(255, 255, 255, 0.30);
  --glass-rim-b: rgba(255, 255, 255, 0.06);
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --glass-angle: 135deg;
}

@media (max-width: 1068px) {
  :root {
    --t-hero: 48px;     --t-hero-lh: 1.08349;  --t-hero-ls: -0.002em;
    --t-headline: 40px; --t-headline-lh: 1.1;  --t-headline-ls: 0em;
    --t-promo: 32px;    --t-promo-lh: 1.125;   --t-promo-ls: 0.002em;
    --t-callout: 28px;  --t-callout-lh: 1.14286; --t-callout-ls: 0.007em;
    --t-subhead: 24px;  --t-subhead-lh: 1.16667; --t-subhead-ls: 0.009em;
    --t-intro: 19px;    --t-intro-lh: 1.21053; --t-intro-ls: 0.012em;
    --t-lead: 17px;     --t-lead-lh: 1.23536;  --t-lead-ls: -0.022em;
    --media: 784px;
  }
}
@media (max-width: 734px) {
  :root {
    --t-hero: 32px;     --t-hero-lh: 1.125;   --t-hero-ls: 0.002em;
    --t-headline: 32px; --t-headline-lh: 1.125; --t-headline-ls: 0.002em;
    --t-callout: 24px;  --t-callout-lh: 1.16667; --t-callout-ls: 0.009em;
    --t-subhead: 19px;  --t-subhead-lh: 1.21053; --t-subhead-ls: 0.012em;
    --t-lead: 14px;     --t-lead-lh: 1.28577; --t-lead-ls: -0.016em;
    --content: 420px;   --media: 284px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` not `hidden`: hidden computes to `overflow: hidden auto`, making body a
     scroll container, which breaks position:sticky on the nav. clip does not. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--gold); color: var(--gold-ink); }

/* ==========================================================================
   Type utilities
   ========================================================================== */
.t-hero, .t-headline, .t-promo, .t-callout { font-weight: 600; margin: 0; text-wrap: balance; }
.t-hero     { font-size: var(--t-hero);     line-height: var(--t-hero-lh);     letter-spacing: var(--t-hero-ls); }
.t-headline { font-size: var(--t-headline); line-height: var(--t-headline-lh); letter-spacing: var(--t-headline-ls); }
.t-promo    { font-size: var(--t-promo);    line-height: var(--t-promo-lh);    letter-spacing: var(--t-promo-ls); }
.t-callout  { font-size: var(--t-callout);  line-height: var(--t-callout-lh);  letter-spacing: var(--t-callout-ls); }
.t-subhead  { font-size: var(--t-subhead);  line-height: var(--t-subhead-lh);  letter-spacing: var(--t-subhead-ls); font-weight: 400; margin: 0; }
.t-intro    { font-size: var(--t-intro);    line-height: var(--t-intro-lh);    letter-spacing: var(--t-intro-ls); margin: 0; }
.t-lead     { font-size: var(--t-lead);     line-height: var(--t-lead-lh);     letter-spacing: var(--t-lead-ls); margin: 0; }
.t-body     { font-size: var(--t-body);     line-height: var(--t-body-lh);     letter-spacing: var(--t-body-ls); margin: 0; }
.t-small    { font-size: var(--t-small);    line-height: var(--t-small-lh);    letter-spacing: var(--t-small-ls); margin: 0; }
.t-caption  { font-size: var(--t-caption);  line-height: var(--t-caption-lh);  letter-spacing: var(--t-caption-ls); margin: 0; }

.dim  { color: var(--ink-2); }
.dim3 { color: var(--ink-3); }
.center { text-align: center; }

/* EXIF voice - the mono utility register, borrowed from camera metadata */
.exif {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.exif b { color: var(--ink-2); font-weight: 500; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

/* location / established stamp above the hero headline */
.stamp { display: grid; gap: 6px; margin-bottom: 20px; }
.stamp .eyebrow { margin: 0; }
.eyebrow-sub {
  margin: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { max-width: var(--content); margin-inline: auto; padding-inline: var(--gut-out); }
.wrap-wide { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut-out); }

.band { padding: 96px 0 196px; }
.band-tight { padding: 96px 0 96px; }
.band-slim { padding: 72px 0; }
@media (max-width: 734px) {
  .band { padding: 64px 0 120px; }
  .band-tight { padding: 64px 0 64px; }
  .band-slim { padding: 52px 0; }
}
.band-1 { background: var(--bg-1); }
.band-2 { background: var(--bg-2); }

.sec-head { max-width: 46ch; margin-bottom: 64px; }
.sec-head .t-headline { margin-bottom: 18px; }
.sec-head-center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   Grain + gradient-field imagery
   Placeholder art. Swap for real photography - see README.
   ========================================================================== */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.field {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-2);
  background-image:
    radial-gradient(circle at 22% 24%, var(--f1) 0%, transparent 52%),
    radial-gradient(circle at 78% 20%, var(--f2) 0%, transparent 50%),
    radial-gradient(circle at 30% 82%, var(--f3) 0%, transparent 54%),
    radial-gradient(circle at 82% 78%, var(--f4) 0%, transparent 50%),
    linear-gradient(147deg, var(--f5), var(--f6));
}

/* Per-category colour fields. Each evokes the light that genre is shot in. */
.f-portraits   { --f1:#c9743a; --f2:#7a3f2a; --f3:#e0a05c; --f4:#3d2216; --f5:#2a1710; --f6:#12090a; }
.f-engagements { --f1:#e0894a; --f2:#b8536b; --f3:#f0b46e; --f4:#5c2740; --f5:#33161f; --f6:#0f0a0d; }
.f-weddings    { --f1:#d9c9ae; --f2:#8f8577; --f3:#f2e8d5; --f4:#4a443c; --f5:#2b2721; --f6:#0e0d0c; }
.f-baby        { --f1:#e8b4a0; --f2:#9dc4bd; --f3:#f4d7c6; --f4:#4a5c58; --f5:#2b302f; --f6:#0d0f0f; }
.f-marketing   { --f1:#4a90c4; --f2:#2c3e52; --f3:#8fd0e8; --f4:#1a2733; --f5:#151d24; --f6:#080b0d; }
/* graduation: academic navy with a gold-tassel warmth */
.f-graduation  { --f1:#c8a253; --f2:#31405e; --f3:#e6cf9a; --f4:#1d2740; --f5:#161c2b; --f6:#0a0c12; }
.f-studio      { --f1:#e8a33d; --f2:#6b4a1f; --f3:#f2c67d; --f4:#2e2114; --f5:#1c150c; --f6:#0a0806; }
/* faded silver-gelatin: yellowed highlights, sunk blacks, magenta shift */
.f-restore     { --f1:#b09a72; --f2:#7d6a55; --f3:#d8c4a0; --f4:#4a3f38; --f5:#2b2622; --f6:#100e0c; }

/* Real photography drops into the same slot as a gradient field, so it inherits
   the absolute positioning and the hover push-in for free. The gradient stays
   underneath as the placeholder colour while the file downloads - a slow
   connection sees the genre's palette instead of a grey hole.
   No .grain here: that texture is for the placeholder art, not for photographs
   that were already graded. */
img.field {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}

/* ==========================================================================
   Glass - chrome only, per the reference. Never on content.
   ========================================================================== */
.glass {
  position: relative;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: var(--glass-body);
  border: 1px solid var(--glass-line);
  box-shadow:
    inset  1px  1px 1px var(--glass-rim-a),
    inset -1px -1px 1px var(--glass-rim-b),
    inset  0    0  22px rgba(255, 255, 255, 0.05),
    0 8px 32px var(--glass-shadow);
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(var(--glass-angle),
    rgba(255,255,255,0.62) 0%, rgba(255,255,255,0) 34%,
    rgba(255,255,255,0) 66%, rgba(255,255,255,0.34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .nav, .cat-rail {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-2) !important;
    border-color: var(--line) !important;
  }
  .glass::before { display: none; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-in {
  max-width: var(--content); margin-inline: auto;
  padding-inline: var(--gut-out);
  height: 100%; display: flex; align-items: center; gap: 12px;
}
.brand {
  display: flex; align-items: baseline; gap: 7px;
  margin-right: auto; text-decoration: none; color: var(--ink);
  font-size: 15px; font-weight: 600; letter-spacing: -0.016em;
  white-space: nowrap;
}
.brand-ak {
  width: 28px; height: 28px;
  object-fit: contain;
  align-self: center;
  flex: none;
}

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em;
  color: var(--ink); opacity: 0.72; text-decoration: none;
  transition: opacity var(--d-ui) var(--ease), color var(--d-ui) var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a[aria-current="page"] { opacity: 1; color: var(--gold); }
/* Below 833px the links become a drop-down panel behind the hamburger.
   Deliberately the *same* <nav> element rather than a second copy of the
   links: one set of markup, so a page cannot end up with a desktop menu and a
   mobile menu that disagree. */
@media (max-width: 833px) {
  .nav-links {
    display: grid; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 4px var(--gut-out) 14px;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  .nav-links a {
    font-size: 16px; letter-spacing: -0.02em; opacity: 1;
    padding: 15px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-links a:first-child { border-top: 0; }
  /* Closed is the default, so a failed script leaves the menu shut and the
     hamburger visible rather than a panel stuck open over the page. */
  .nav:not(.is-open) .nav-links { display: none; }
}

/* The hamburger itself. Absent above 833px - not merely invisible - so it can
   never take a tab stop on desktop. */
.nav-toggle { display: none; }
@media (max-width: 833px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: 4px;
    padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
  .nav-toggle span {
    position: relative; display: block;
    width: 17px; height: 1.5px; border-radius: 2px;
    background: currentColor;
    transition: background-color var(--d-micro) var(--ease);
  }
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: ""; position: absolute; left: 0;
    width: 17px; height: 1.5px; border-radius: 2px; background: currentColor;
    transition: transform var(--d-ui) var(--ease), top var(--d-ui) var(--ease);
  }
  .nav-toggle span::before { top: -5.5px; }
  .nav-toggle span::after  { top: 5.5px; }
  /* Open state crosses the bars, so the control shows what it will do next. */
  .nav.is-open .nav-toggle span { background: transparent; }
  .nav.is-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
  .nav.is-open .nav-toggle span::after  { top: 0; transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: none; }
}

/* ==========================================================================
   Buttons - Apple geometry, gold accent
   ========================================================================== */
.btn {
  display: inline-block; box-sizing: content-box;
  min-width: 28px; padding: 9px 16px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--font-sans); font-weight: 500;
  font-size: 14px; line-height: 1.28577; letter-spacing: -0.016em;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--d-ui) var(--ease),
              color var(--d-ui) var(--ease),
              border-color var(--d-ui) var(--ease);
}
.btn:hover  { background: var(--gold-hi); }
.btn:active { background: var(--gold-lo); }
.btn[disabled] { opacity: 0.36; pointer-events: none; }

.btn-elevated { padding: 12px 22px; font-size: 17px; line-height: 1.17648; letter-spacing: -0.022em; }
.btn-super    { padding: 18px 31px; font-size: 17px; line-height: 1.17648; letter-spacing: -0.022em; }
.btn-reduced  { padding: 4px 11px;  font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }

.btn-secondary {
  background: transparent; border-color: var(--gold); color: var(--gold);
}
.btn-secondary:hover { background: var(--gold); color: var(--gold-ink); }

.btn-ghost {
  background: rgba(255,255,255,0.10); color: var(--ink);
  border-color: rgba(255,255,255,0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.18); }

.btn-block { display: block; width: 100%; box-sizing: border-box; border-radius: var(--r-xs); }

/* chevron CTA */
.cta {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gold); text-decoration: none;
  font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em;
}
.cta:hover { text-decoration: underline; }
.cta::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--d-ui) var(--ease);
}
.cta:hover::after { transform: rotate(45deg) translateY(-1px) translateX(3px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: -8%;
  z-index: 0;
  background-color: #000;
  background-image:
    radial-gradient(ellipse 52% 42% at 20% 26%, rgba(232,163,61,0.50) 0%, transparent 62%),
    radial-gradient(ellipse 46% 40% at 80% 22%, rgba(184,83,107,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 50% 44% at 30% 80%, rgba(74,144,196,0.32) 0%, transparent 62%),
    radial-gradient(ellipse 44% 38% at 78% 76%, rgba(216,144,31,0.34) 0%, transparent 58%),
    linear-gradient(150deg, #1a1208 0%, #08070a 58%, #000 100%);
  filter: saturate(115%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg { animation: drift 26s var(--ease-inout) infinite alternate; }
}
@keyframes drift {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-2.5%, -2%, 0); }
}

/* vignette keeps the type legible over the brightest part of the field */
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 76% 62% at 50% 46%, transparent 0%, rgba(0,0,0,0.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.44) 0%, transparent 26%, transparent 62%, rgba(0,0,0,0.82) 100%);
}
.hero-in { position: relative; z-index: 3; width: 100%; padding: 96px 0; }
@media (max-width: 734px) { .hero-in { padding: 64px 0; } }

/* two columns: copy left, logo right */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1068px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; justify-items: start; }
}

.hero-copy { max-width: 20ch; }
.hero .t-hero { font-size: clamp(38px, 7.4vw, 84px); line-height: 1.03; letter-spacing: -0.022em; }

/* spec lines - label in the mono instrument voice, detail in prose */
.hero-specs {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; gap: 0; max-width: 44ch;
}
.hero-specs li {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-specs li:first-child { border-top: 0; padding-top: 0; }
.hero-specs b {
  flex: none; font-weight: 500;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
}
.hero-specs i { font-style: normal; color: rgba(245, 245, 247, 0.34); }
.hero-specs span {
  font-size: 15px; letter-spacing: -0.018em;
  color: rgba(245, 245, 247, 0.78);
}

.hero-ctas { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-top: 38px; }

/* the mark, sitting right */
.hero-logo { justify-self: end; width: min(30vw, 300px); }
.hero-logo img { width: 100%; height: auto; }
@media (max-width: 1068px) { .hero-logo { justify-self: start; width: 180px; } }
/* Gone on phones. At 140px it was neither a mark nor an image - just a badge
   competing with the headline for the only column there is. */
@media (max-width: 734px)  { .hero-logo { display: none; } }



/* ==========================================================================
   Stat strip
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gut-in); }
.stats-center { text-align: center; justify-items: center; }
.stats-center .stat-c { max-width: 22ch; margin-inline: auto; }
/* Edge columns: a centred bubble would hang off the viewport, so anchor the
   first one to its left edge and the last one to its right. */
.stats > div:first-child .note-bubble { left: 0; right: auto; transform: none; }
.stats > div:last-child  .note-bubble { left: auto; right: 0; transform: none; }
@media (max-width: 833px) {
  /* two columns: the right-hand one is now items 2 and 4 */
  .stats > div:nth-child(2n) .note-bubble { left: auto; right: 0; transform: none; }
  .stats > div:nth-child(2n+1) .note-bubble { left: 0; right: auto; transform: none; }
}

@media (max-width: 833px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 40px var(--gut-in); } }
.stat-v {
  font-size: 56px; line-height: 1.07143; letter-spacing: -0.005em; font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 0 0 4px;
}
@media (max-width: 734px) { .stat-v { font-size: 40px; } }
.stat-c { color: var(--ink-2); font-size: 15px; letter-spacing: -0.02em; margin: 0; }

/* footnote marker with a hover/focus note */
.note-wrap { position: relative; display: inline-block; }
.note-wrap[tabindex] { cursor: help; }
.note-wrap[tabindex]:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}
.note-mark {
  border: 0; background: none; margin: 0; padding: 0 0 0 2px;
  font: inherit; line-height: 1; color: var(--gold); cursor: help;
}
.note-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content; max-width: 250px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: var(--ink-2); text-align: left;
  font-family: var(--font-sans); font-size: 13px;
  line-height: 1.45; letter-spacing: -0.014em;
  opacity: 0; visibility: hidden; z-index: 20;
  transition: opacity var(--d-ui) var(--ease), visibility var(--d-ui) var(--ease);
}
/* focus-within so a keyboard or touch user can reach it too, not just hover */
.note-wrap:hover .note-bubble,
.note-wrap:focus .note-bubble,
.note-wrap:focus-within .note-bubble { opacity: 1; visibility: visible; }

/* ==========================================================================
   Category tiles (home) + portfolio grid
   ========================================================================== */
.tiles {
  display: grid; gap: var(--gut-in);
  grid-template-columns: repeat(6, 1fr);
}
.tile {
  position: relative; display: block;
  grid-column: span 2;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line);
  transition: transform var(--d-lg) var(--ease-hero),
              border-color var(--d-lg) var(--ease);
}
.tile-lg { grid-column: span 3; aspect-ratio: 3 / 2; }
.tile-full { grid-column: span 6; aspect-ratio: 21 / 9; }
@media (max-width: 734px) { .tile-full { aspect-ratio: 4 / 3; } }
@media (max-width: 1068px) { .tile, .tile-lg { grid-column: span 3; } }
@media (max-width: 734px)  { .tile, .tile-lg { grid-column: span 6; aspect-ratio: 4 / 3; } }

.tile .field { position: absolute; inset: 0; z-index: 0; transition: transform var(--d-slide) var(--ease-hero); }
.tile:hover { transform: translateY(-4px); border-color: var(--line-2); }
@media (prefers-reduced-motion: no-preference) {
  .tile:hover .field { transform: scale(1.06); }
}
/* Tile collage: three prints fanned over the gradient.

   The gradient stays as the ground - it is what gives each discipline its own
   light - and the photographs sit on it like prints dropped on a table. Thin
   warm-white borders and a real shadow do the "print" reading; without the
   border they look like three cropped rectangles.

   aria-hidden and empty alt throughout: the tile is a link that already says
   "Graduations", and three unlabelled decorative crops announced after it would
   be noise to a screen reader. */
.tile-collage {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  /* Lift the stack off the label, which owns the bottom of the tile. */
  padding-bottom: 11%;
}
.tile-collage img {
  width: 31%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 3px solid rgba(245, 245, 247, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  background: var(--bg-3);
  transition: transform var(--d-slide) var(--ease-hero);
}
/* Overlap by pulling the outer two under the middle one. */
.tile-collage img:nth-child(1) { z-index: 1; margin-right: -6%; transform: rotate(-9deg) translateY(3%); }
.tile-collage img:nth-child(2) { z-index: 3; width: 34%; transform: rotate(2deg) translateY(-4%); }
.tile-collage img:nth-child(3) { z-index: 2; margin-left: -6%; transform: rotate(10deg) translateY(4%); }

/* Fan out on hover, the way a stack of prints spreads when you push it. */
@media (prefers-reduced-motion: no-preference) {
  .tile:hover .tile-collage img:nth-child(1) { transform: rotate(-15deg) translate(-13%, 1%); }
  .tile:hover .tile-collage img:nth-child(2) { transform: rotate(0deg) translateY(-8%); }
  .tile:hover .tile-collage img:nth-child(3) { transform: rotate(16deg) translate(13%, 2%); }
}

/* The wide tiles are half as tall for their width, so the same percentage
   would make postage stamps. */
.tile-lg .tile-collage img { width: 23%; }
.tile-lg .tile-collage img:nth-child(2) { width: 25%; }

@media (max-width: 1068px) {
  .tile-lg .tile-collage img { width: 28%; }
  .tile-lg .tile-collage img:nth-child(2) { width: 31%; }
}
@media (max-width: 734px) {
  .tile-collage { padding-bottom: 16%; }
  .tile-collage img, .tile-lg .tile-collage img { width: 25%; }
  .tile-collage img:nth-child(2), .tile-lg .tile-collage img:nth-child(2) { width: 28%; }
}

.tile-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 42%, rgba(0,0,0,0.84) 100%);
}
.tile-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 24px;
  display: grid; gap: 6px;
}
.tile-name { font-size: 24px; font-weight: 600; letter-spacing: 0.009em; margin: 0; }

/* ==========================================================================
   Portfolio - category rail + morphing indicator
   ========================================================================== */
.cat-rail-outer { position: sticky; top: var(--nav-h); z-index: 150; padding: 16px 0; background: linear-gradient(180deg, var(--bg) 55%, transparent); }
/* Not pinned on a phone. Wrapped onto four rows the rail is ~160px tall, and
   holding that under the nav costs a fifth of the screen on every scroll - and
   parks it over the copy underneath. Let it scroll away; the filter is a thing
   you use once on the way in, not a control you need in reach the whole time. */
@media (max-width: 833px) {
  .cat-rail-outer { position: static; background: none; padding: 8px 0 4px; }
}
.cat-rail {
  position: relative;
  display: flex; gap: 4px; padding: 5px;
  border-radius: var(--r-pill);
  overflow-x: auto; scrollbar-width: none;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(22,22,23,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  width: max-content; max-width: 100%;
  margin-inline: auto;
}
.cat-rail::-webkit-scrollbar { display: none; }

/* On a phone the rail was a pill wider than the screen: the last chips sat off
   the right edge with no hint they were there, and the selected one could be
   scrolled out of sight entirely. Wrap it into rows instead - every discipline
   visible, nothing to discover by swiping. */
@media (max-width: 833px) {
  .cat-rail {
    flex-wrap: wrap; justify-content: center;
    width: auto; overflow: visible;
    border-radius: var(--r-card);
    padding: 6px;
    gap: 4px;
  }
  .cat-btn { padding: 9px 14px; }
}
@media (max-width: 400px) { .cat-btn { padding: 9px 11px; font-size: 13px; } }

/* the indicator that slides + resizes between chips */
.cat-pill {
  position: absolute; top: 5px; left: 0; z-index: 0;
  /* These two are the no-JS fallback only. site.js sets both from the active
     chip so the indicator can follow it onto a second row once the rail wraps
     on narrow screens - `calc(100% - 10px)` is the whole rail once it is two
     rows tall, which would be a gold slab rather than a pill. */
  height: calc(100% - 10px);
  border-radius: var(--r-pill);
  background: var(--gold);
  transition: transform var(--d-lg) var(--ease-hero), width var(--d-lg) var(--ease-hero),
              top var(--d-lg) var(--ease-hero), height var(--d-lg) var(--ease-hero);
  will-change: transform, width;
}
.cat-btn {
  position: relative; z-index: 1;
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 17px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.016em; white-space: nowrap;
  color: var(--ink-2);
  transition: color var(--d-ui) var(--ease);
}
.cat-btn:hover { color: var(--ink); }
.cat-btn[aria-selected="true"] { color: var(--gold-ink); }

/* Reserves the heading's line box so switching category does not jog the grid
   up and down. Was taller when a blurb sat under the heading. */
.cat-intro { min-height: 44px; margin: 40px 0 36px; text-align: center; }
.cat-intro h2 { margin: 0 0 8px; }
.cat-intro p { margin: 0 auto; max-width: 56ch; }

/* Quiet callout: a standing note that has to be read but must not shout. Used
   for the portfolio's consent line and the booking page's travel note. */
.callout {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 62ch; margin: -18px auto 44px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  color: var(--ink-2);
  font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
  text-align: left;
}
.callout-mark { flex: none; width: 18px; height: 18px; color: var(--gold); margin-top: 1px; }
.callout-mark svg { width: 100%; height: 100%; display: block; }
/* The portfolio's copy sits tight under the frame count; elsewhere it stands
   on its own and needs its own air. */
.callout-tight { margin: -18px auto 44px; }
@media (max-width: 734px) { .callout-tight { margin: -8px auto 36px; } }

/* filter animation */
.shot {
  transition: opacity var(--d-lg) var(--ease-content),
              transform var(--d-lg) var(--ease-content);
}
.shot.is-out {
  opacity: 0;
  transform: scale(0.94) translateY(12px);
  pointer-events: none;
}
.grid-fade { transition: opacity var(--d-ui) var(--ease); }
.grid-fade.is-swapping { opacity: 0.25; }

.shots {
  display: grid; gap: var(--gut-in);
  /* Ten columns: an upright frame is a fifth of the row, so five fit across.
     Small enough to take in a discipline at a glance rather than scrolling it
     one print at a time. Ten still divides several ways - five uprights, or a
     wide and three uprights, or two wides and an upright - so the packer has
     somewhere to put a run of landscape frames. */
  grid-template-columns: repeat(10, 1fr);
  align-items: start;
  /* A filter that hides part of the set can still leave a hole mid-grid.
     Dense backfills it. */
  grid-auto-flow: row dense;
}
.shot { grid-column: span 2; }
.shot-tall { grid-column: span 2; }
.shot-wide { grid-column: span 4; }
/* A wide frame with nothing left to pair with. Full row rather than a hole -
   see pack() in build-images.py. */
.shot-full { grid-column: span 10; }
/* Narrower screens drop to a six-column grid rather than keeping ten and
   picking a span that does not divide into it - three across needs 10/3, which
   leaves a sliver of empty track on every row. Six divides by three, two and
   one, which is every arrangement the smaller widths need. Five across below
   1068px would put an upright frame under 140px: a thumbnail, not a
   photograph. */
@media (max-width: 1068px) {
  .shots { grid-template-columns: repeat(6, 1fr); }
  .shot, .shot-tall { grid-column: span 2; }              /* three across */
  .shot-wide, .shot-full { grid-column: span 6; }
}
/* Two across from 833px down.
   `.shot-wide` and `.shot-full` are restated *after* the narrow rule on
   purpose. Every wide frame also carries `.shot`, and `.shot` and `.shot-wide`
   have identical specificity - so whichever is written last wins. Without this
   a landscape frame gets a half-width slot, and a 16:10 image in a slot sized
   for a 4:5 one leaves the rest of the row empty underneath it. */
@media (max-width: 833px) {
  .shot, .shot-tall { grid-column: span 3; }
  .shot-wide, .shot-full { grid-column: span 6; }
}

.frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.shot-tall .frame { aspect-ratio: 4 / 5; }
.shot-wide .frame { aspect-ratio: 16 / 10; }
/* 16:9 rather than the 21:9 used for the home tiles: these are photographs,
   and a cinematic crop that deep starts taking the tops off heads. */
.shot-full .frame { aspect-ratio: 16 / 9; }
.frame .field { position: absolute; inset: 0; transition: transform var(--d-slide) var(--ease-hero); }
@media (prefers-reduced-motion: no-preference) {
  .shot:hover .frame .field { transform: scale(1.05); }
}
.frame-tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.5); color: rgba(245,245,247,0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
}
.shot-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; align-items: baseline; }
.shot-title { font-size: 15px; font-weight: 500; letter-spacing: -0.018em; margin: 0; }

/* ==========================================================================
   Process steps - a real sequence, so numbering is meaningful
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px var(--gut-in); counter-reset: step; }
@media (max-width: 833px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.step-n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--gold);
}
.step h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0.012em; }

/* ==========================================================================
   Delivery options - stat-band rhythm, with icons
   ========================================================================== */
.deliv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px var(--gut-in); }
@media (max-width: 833px) { .deliv { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .deliv { grid-template-columns: 1fr; } }

.deliv-item { display: grid; gap: 10px; align-content: start; }
.deliv-icon { width: 32px; height: 32px; color: var(--gold); }
.deliv-icon svg { width: 100%; height: 100%; display: block; }
.deliv-name {
  margin: 6px 0 0; font-size: 21px; font-weight: 600;
  letter-spacing: 0.011em; line-height: 1.19048;
}
.deliv-item p.t-small { color: var(--ink-2); max-width: 30ch; }

/* ==========================================================================
   Care / assurances - one lead promise, three supporting.
   Asymmetric on purpose: the archive guarantee is the biggest claim, so it
   gets the weight rather than being flattened into an equal 4-up row.
   ========================================================================== */
.care { display: grid; gap: var(--gut-in); }
.care-lead {
  --r: var(--r-card);
  border-radius: var(--r); padding: 44px;
  border: 1px solid rgba(232, 163, 61, 0.34);
  background:
    linear-gradient(160deg, rgba(232,163,61,0.12), transparent 54%),
    var(--bg-2);
  display: grid; grid-template-columns: 64px 1fr; gap: 28px; align-items: start;
}
@media (max-width: 734px) {
  .care-lead { padding: 28px; grid-template-columns: 1fr; gap: 18px; }
}
.care-lead-icon { width: 64px; height: 64px; color: var(--gold); }
.care-lead-icon svg { width: 100%; height: 100%; display: block; }
.care-lead h3 {
  margin: 0 0 12px; font-size: 32px; font-weight: 600;
  letter-spacing: 0.002em; line-height: 1.125;
}
@media (max-width: 734px) { .care-lead h3 { font-size: 24px; letter-spacing: 0.009em; } }
.care-lead p { margin: 0; max-width: 62ch; color: var(--ink-2); }
.care-badge {
  display: inline-block; margin-top: 18px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.care-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut-in); }
@media (max-width: 833px) { .care-row { grid-template-columns: 1fr; } }
.care-item {
  --r: var(--r-md);
  border-radius: var(--r); padding: 28px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: grid; gap: 12px; align-content: start;
  transition: border-color var(--d-ui) var(--ease);
}
.care-item:hover { border-color: var(--line-2); }
.care-icon { width: 26px; height: 26px; color: var(--gold); }
.care-icon svg { width: 100%; height: 100%; display: block; }
.care-item h4 {
  margin: 4px 0 0; font-size: 19px; font-weight: 600;
  letter-spacing: 0.012em; line-height: 1.21053;
}
.care-item p { margin: 0; color: var(--ink-2); }

/* ==========================================================================
   Booking - packages
   ========================================================================== */
.pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gut-in); align-items: start; }
@media (max-width: 1068px) { .pkgs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px)  { .pkgs { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
/* Four cards in the space that held three, so the padding and the price come
   down a step to stop the columns going narrow and tall. */
@media (min-width: 1069px) {
  .pkg { padding: 26px 22px; }
  .pkg-amt { font-size: 36px; }
  .pkg-flag { left: 22px; }
}

.pkg {
  --r: var(--r-card);
  position: relative;
  border-radius: var(--r); padding: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid; gap: 20px; align-content: start;
  transition: border-color var(--d-ui) var(--ease), transform var(--d-lg) var(--ease-hero);
}
.pkg:hover { border-color: var(--line-2); transform: translateY(-3px); }
.pkg-featured {
  border-color: rgba(232,163,61,0.42);
  background:
    linear-gradient(180deg, rgba(232,163,61,0.09), transparent 42%),
    var(--bg-2);
}
.pkg-featured:hover { border-color: rgba(232,163,61,0.62); }

.pkg-flag {
  position: absolute; top: -11px; left: 32px;
  padding: 3px 10px; border-radius: 5px;
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.pkg-name { font-size: 21px; font-weight: 600; letter-spacing: 0.011em; margin: 0; }
.pkg-price { display: flex; align-items: baseline; gap: 6px; }
.pkg-amt {
  font-size: 44px; font-weight: 600; letter-spacing: -0.003em; margin: 0;
  font-variant-numeric: tabular-nums;
}
.pkg-cur { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.pkg-per { color: var(--ink-2); font-size: 14px; letter-spacing: -0.016em; }

.pkg-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.pkg-list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: start;
  font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2);
}
.pkg-list li::before {
  content: ""; width: 15px; height: 15px; margin-top: 3px;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.9L2.6 8.3l1-1 2.6 2.6L13 3.1l1 1z'/%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 16 16'%3E%3Cpath d='M6.2 11.9L2.6 8.3l1-1 2.6 2.6L13 3.1l1 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pkg-list li.is-off { color: var(--ink-3); opacity: 0.62; }
.pkg-list li.is-off::before { background: var(--ink-3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7.2h8v1.6H4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7.2h8v1.6H4z'/%3E%3C/svg%3E"); }

/* add-ons table */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  background: var(--bg-2); white-space: nowrap;
}
td { color: var(--ink-2); letter-spacing: -0.016em; }
td:first-child { color: var(--ink); }
td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Booking form
   ========================================================================== */
.form-card { border-radius: var(--r-card); padding: 34px; }
@media (max-width: 734px) { .form-card { padding: 24px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 734px) { .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: auto; } }

.field-l { display: grid; gap: 7px; }
.field-l > span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
input, select, textarea {
  width: 100%;
  font-family: var(--font-sans); font-size: 15px; letter-spacing: -0.018em;
  color: var(--ink);
  background: rgba(0,0,0,0.34);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  transition: border-color var(--d-ui) var(--ease), background-color var(--d-ui) var(--ease);
}
textarea { resize: vertical; min-height: 96px; }
input:hover, select:hover, textarea:hover { border-color: #56565a; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.5); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2386868b' stroke-width='1.6'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px;
  padding-right: 38px;
}

.form-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--gold-tint); color: var(--gold-hi);
  font-size: 13px; line-height: 1.5; letter-spacing: -0.014em;
  margin-top: 20px;
}

.quote-out {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 0 0; margin-top: 20px; border-top: 1px solid var(--line);
}
.quote-amt { font-size: 32px; font-weight: 600; letter-spacing: 0.002em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: 0; max-width: 74ch; margin-inline: auto; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 19px; font-weight: 500; letter-spacing: 0.012em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--d-ui) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq p { margin: 12px 0 0; max-width: 66ch; color: var(--ink-2); }

/* ==========================================================================
   Contact channels
   ========================================================================== */
.channels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut-in);
  max-width: 940px; margin: 34px auto 0;
}
@media (max-width: 833px) { .channels { grid-template-columns: 1fr; max-width: 420px; } }

.channel {
  --r: var(--r-md);
  position: relative;
  display: grid; gap: 9px; justify-items: center; align-content: start;
  padding: 22px 20px; border-radius: var(--r);
  background: var(--bg-1); border: 1px solid var(--line);
  text-align: center; text-decoration: none; color: var(--ink);
  transition: border-color var(--d-ui) var(--ease),
              background-color var(--d-ui) var(--ease),
              transform var(--d-lg) var(--ease-hero);
}
a.channel:hover {
  border-color: rgba(232, 163, 61, 0.5);
  background: var(--bg-2);
  transform: translateY(-3px);
}
.channel-icon { width: 28px; height: 28px; color: var(--gold); }
.channel-icon svg { width: 100%; height: 100%; display: block; }
.channel-kicker {
  margin: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.channel-value {
  margin: 0; font-size: 17px; letter-spacing: -0.022em; color: var(--ink);
  word-break: break-word;
}
a.channel:hover .channel-value { color: var(--gold-hi); }

/* not live yet - present, legible, clearly inert */
.channel.is-soon { opacity: 0.42; cursor: default; }
.channel.is-soon .channel-icon { color: var(--ink-2); }
.channel-soon {
  margin: 2px 0 0; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--line); color: var(--ink-2);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* Honeypot. Off-screen rather than display:none - some bots skip anything
   that computes to hidden, and this needs to look real to them. Never
   focusable, never announced. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   Enquiry form status
   ========================================================================== */
.form-status {
  margin-top: 20px; padding: 18px 20px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg-1); color: var(--ink-2);
  font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
}
.form-status p { margin: 0 0 8px; }
.form-status p:last-child { margin-bottom: 0; }
.form-status b { color: var(--ink); font-weight: 600; }
.form-status a { color: var(--gold); }
.form-status.is-good { border-color: rgba(48, 209, 88, 0.35); }
.form-status.is-bad { border-color: rgba(255, 146, 48, 0.45); color: var(--warn); }
.form-status-alt { color: var(--ink-3); font-size: 13px; }
.form-status-copy {
  width: 100%; min-height: 120px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 12px;
}

/* A button that has to read as prose, because it sits mid-sentence. */
.linkish {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: var(--gold); text-decoration: underline;
}
.linkish:hover { color: var(--gold-hi); }

/* Fields the send step rejected. */
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--warn);
}

/* ==========================================================================
   Delivery modal - asked on Enquire, before the form
   ========================================================================== */
/* A native <dialog> so focus trapping, Esc and inertness of the page behind it
   are the browser's job rather than ours. Without JS the Enquire buttons stay
   plain anchors to the form, so nothing here is load-bearing. */
.modal {
  width: min(560px, calc(100vw - 32px));
  padding: 0; border: 0; background: transparent;
  color: var(--ink); overflow: visible;
}
.modal::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card {
  border-radius: var(--r-card); padding: 32px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  display: grid; gap: 22px;
}
@media (max-width: 734px) { .modal-card { padding: 24px; } }
.modal-card h2 { font-size: 24px; font-weight: 600; letter-spacing: 0.009em; margin: 0 0 6px; }
.modal-head p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.opt-list { display: grid; gap: 8px; }
.opt {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center;
  padding: 13px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-1); cursor: pointer;
  transition: border-color var(--d-ui) var(--ease), background-color var(--d-ui) var(--ease);
}
.opt:hover { border-color: var(--line-2); }
.opt:has(input:checked) { border-color: rgba(232,163,61,0.55); background: var(--gold-tint); }
.opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt input { width: auto; margin: 0; accent-color: var(--gold); }
.opt-name { font-size: 15px; font-weight: 500; letter-spacing: -0.018em; }
.opt-note { display: block; font-size: 13px; color: var(--ink-2); letter-spacing: -0.016em; margin-top: 2px; font-weight: 400; }
.opt-price {
  font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--gold);
}

/* ==========================================================================
   Other services - cards on their own page
   ========================================================================== */
.svc { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gut-in); }
@media (max-width: 833px) { .svc { grid-template-columns: 1fr; } }
.svc-item {
  border-radius: var(--r-card); padding: 30px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: grid; gap: 13px; align-content: start;
  transition: border-color var(--d-ui) var(--ease), transform var(--d-lg) var(--ease-hero);
}
.svc-item:hover { border-color: var(--line-2); transform: translateY(-3px); }
.svc-icon { width: 30px; height: 30px; color: var(--gold); }
.svc-icon svg { width: 100%; height: 100%; display: block; }
.svc-name { font-size: 21px; font-weight: 600; letter-spacing: 0.011em; margin: 0; }
.svc-item p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.46; letter-spacing: -0.018em; }
.svc-price {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
  border-top: 1px solid var(--line); padding-top: 13px; margin-top: 3px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--bg-1); border-top: 1px solid var(--line); padding: 64px 0 44px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px var(--gut-in); }
@media (max-width: 833px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h4 {
  margin: 0 0 14px; font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: 14px; letter-spacing: -0.016em; }
.foot a:hover { color: var(--ink); }
.foot-base {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

/* ==========================================================================
   Reveal
   ========================================================================== */
/* Gated on .js: if the script never runs, content stays visible rather than
   being stranded at opacity 0. Progressive enhancement, not a dependency. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity var(--d-copy) var(--ease-content),
                transform var(--d-copy) var(--ease-content);
  }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}