/* ============================================================================
   NeXGen Custom Builders — nxgbuilds.com
   ----------------------------------------------------------------------------
   Concept: hand-applied material (plaster, millwork) meets construction-
   document precision. Charcoal ground, gold rationed to roughly 5% of the
   surface, rules and typography carrying the page in place of photography.

   Palette and type come from the official brand kit (brand/colors.txt):
     Gold      #C4A363   Charcoal #17130F   Cream #F2ECE0
     Display   Cormorant Garamond 600
     Labels    Archivo 600, +0.3em, uppercase

   Contrast: every text token below is checked against the --ground value.
   All text is --cream-2 (8.7:1); pure --cream is no longer used for text.
   --cream-3 is 6.2:1 for fine print. --cream-4 is decorative ONLY and
   must never carry text.
   ========================================================================= */

/* ============================================================================
   SELF-HOSTED FONTS
   ----------------------------------------------------------------------------
   Previously loaded from fonts.googleapis.com. Self-hosting buys four things:
     · one fewer third-party origin (fonts.googleapis + fonts.gstatic both gone
       from the CSP, and no request to Google on page load)
     · no render-blocking round trip to an external stylesheet before any text
       can paint — these are same-origin and preloaded
     · privacy: no visitor IP handed to Google merely for typography
     · the files are immutable and cache-busted by name, so they can carry a
       one-year immutable Cache-Control (see _headers)

   Both families are VARIABLE fonts, which is why there are 6 files and not 14:
   Google serves one file per family+subset covering the whole weight axis, so
   the 500/600 (Cormorant) and 400/500/600 (Archivo) cuts are interpolated from
   a single download rather than fetched separately.

   The latin-ext files are declared but only fetched if a character on the page
   actually falls in that range — unicode-range makes them free for English
   content. Real transfer for this site is ~109KB, not the 207KB on disk.
   ========================================================================= */

/* ── Cormorant Garamond — display ── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;          /* variable axis */
  font-display: swap;
  src: url('assets/fonts/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Archivo — labels, UI, body ── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;          /* variable axis */
  font-display: swap;
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* Tells the browser this page is dark. This is the real fix for autofill
     painting inputs near-white: Chrome assumes a light page unless told
     otherwise, and overrides author styles when it does. With color-scheme: dark
     it renders autofill, scrollbars, and native select dropdowns in their dark
     variants natively. The :-webkit-autofill box-shadow rules further down are
     the legacy fallback for older engines — this is the part that actually
     works on current Chrome and Safari. */
  color-scheme: dark;

  /* ── Ground: charcoal pushed warm, so the neutral reads chosen ── */
  --ground:    #100d0a;
  --ground-2:  #171310;   /* brand charcoal — raised panels */
  --ground-3:  #1f1a15;   /* hover / inset */

  /* ── Brand metal ── */
  --gold:      #c4a363;
  --gold-hi:   #e3c88a;
  --gold-deep: #8a6e3a;

  /* ── Text on charcoal ── */
  --cream:     #f2ece0;
  --cream-2:   rgba(242, 236, 224, 0.72);  /* body copy   — 8.7:1 on --ground */
  /* Raised from 0.52 to 0.60. Several small items (map caption, licence
     numbers, spec chips) sit on --ground-2 rather than --ground, where 0.52
     measured 4.96:1 — passing, but with no headroom at 9–12px. */
  --cream-3:   rgba(242, 236, 224, 0.60);  /* fine print  — 6.2:1 on --ground */
  --cream-4:   rgba(242, 236, 224, 0.30);  /* DECORATIVE ONLY — never text */

  /* ── Lines ── */
  --rule:      rgba(196, 163, 99, 0.20);
  --rule-firm: rgba(196, 163, 99, 0.42);

  --danger:    #d98878;

  /* ── Type ── */
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ── Scale (4px grid) ── */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.5rem;  --s8: 3rem;
  --s9: 4rem;    --s10: 5rem;   --s12: 7rem;   --s14: 9rem;

  --measure: 1220px;
  --gut: clamp(1.25rem, 4vw, 3rem);

  /* One easing curve site-wide. Ease-out only — never overshoot. */
  --out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --t: 0.4s var(--out);
}

/* ── Vertical rhythm on small screens ──
   The large steps are tuned for a desktop column. Left alone, --s14 puts 144px
   of padding above and below every section on a 375px phone, which reads as
   dead space rather than generosity. Only the big steps scale; the small ones
   stay put so component internals keep their proportions. */
@media (max-width: 860px) {
  :root { --s12: 4.5rem; --s14: 5.5rem; }
}
@media (max-width: 560px) {
  :root { --s9: 3rem; --s10: 3.5rem; --s12: 3.5rem; --s14: 4rem; }
}

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

body {
  background: var(--ground);
  color: var(--cream-2);
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ambient warm wash + film grain. Fixed and STATIC — nothing loops. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 68% 48% at 74% 6%, rgba(196,163,99,0.13) 0%, transparent 62%),
    radial-gradient(ellipse 52% 40% at 4% 88%, rgba(196,163,99,0.07) 0%, transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 200px 200px;
}

/* Real content sits above the wash */
.nav, .mobile-menu, main, .site-footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ground);
  padding: var(--s3) var(--s5);
  font: 600 0.6875rem/1 var(--ui);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.skip:focus { left: var(--s4); top: var(--s4); }


.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gut); }

/* ============================================================================
   TYPOGRAPHY
   ========================================================================= */

/* Brand spec: Archivo 600, +0.3em, uppercase */
.lab {
  font-family: var(--ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.d1, .d2, .d3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--cream-2);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.85rem, 7.6vw, 6.25rem); }
.d2 { font-size: clamp(2rem, 4.2vw, 3.4rem);  line-height: 1.06; }
.d3 { font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.14; letter-spacing: -0.012em; }
.d1 em, .d2 em, .d3 em { font-style: italic; font-weight: 500; color: var(--gold); }

.lede {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.68;
  color: var(--cream-2);
  max-width: 54ch;
}

.copy { color: var(--cream-2); line-height: 1.72; max-width: 62ch; }
.copy + .copy { margin-top: var(--s4); }
.copy strong { color: var(--cream-2); font-weight: 600; }

.fine { font-size: 0.8125rem; line-height: 1.6; color: var(--cream-3); }


/* ============================================================================
   BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: 1.05rem var(--s7);
  font-family: var(--ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn svg { width: 13px; height: auto; flex-shrink: 0; transition: transform var(--t); }
.btn:hover svg { transform: translateX(4px); }

.btn--gold { background: var(--gold); color: var(--ground); }
.btn--gold:hover { background: var(--gold-hi); }

.btn--line { border-color: var(--rule-firm); color: var(--cream-2); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }

.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn[disabled]:hover svg { transform: none; }

.tlink {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 24px;              /* WCAG 2.5.8 target size */
  color: var(--cream-2);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t);
}
.tlink:hover { color: var(--gold); }

/* ============================================================================
   NAV
   ========================================================================= */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--s5) 0;
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), padding var(--t);
}
.nav.is-stuck {
  background: rgba(16, 13, 10, 0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--rule);
  padding: var(--s3) 0;
}
.nav__in {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
}

/* ── Brand lockup ──
   This is the real logo now: the exact geometry and text from the brand kit's
   nxg-horizontal-dark.svg, inlined rather than linked as an <img>.

   Inlining is what makes it correct. An SVG loaded through <img> is an isolated
   document with no access to the page's fonts, so the "NXG" letters would fall
   back to Georgia — the brand kit's own README warns about exactly this. Inline,
   the same markup resolves against the self-hosted Cormorant Garamond and
   Archivo, so the letterforms are right at any size with no raster step.

   Two changes from the source file: the baked `<rect fill="#17130f">` background
   was dropped so the mark sits on any ground, and the viewBox was tightened from
   0 0 300 120 to the actual art bounds to remove the file's built-in padding. */
.brand { display: flex; align-items: center; }
.brand__lockup {
  height: 46px;
  width: auto;
  display: block;
  transition: height var(--t);
}
.nav.is-stuck .brand__lockup { height: 38px; }
.site-footer .brand__lockup { height: 52px; }

@media (max-width: 760px) {
  .brand__lockup,
  .nav.is-stuck .brand__lockup { height: 36px; }
}

.nav__links { display: flex; align-items: center; gap: var(--s6); }
@media (max-width: 1000px) { .nav__links { display: none; } }
.nav__links a {
  position: relative;
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-2);
  padding: var(--s2) 0;
  transition: color var(--t);
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__phone { color: var(--cream-2) !important; font-variant-numeric: tabular-nums; }

.nav__cta { background: var(--gold); color: var(--ground) !important; padding: var(--s3) var(--s5) !important; }
.nav__cta::after { display: none !important; }
.nav__cta:hover { background: var(--gold-hi); }

/* ── Menu button ──
   Two hairlines of unequal length rather than the default three equal bars.
   The asymmetry echoes the hairline rules used for every section divider and
   the chevron's own angled geometry, so the control belongs to this design
   rather than being generic UI furniture.

   On open the short rule grows to match the long one as both rotate, so the
   close state is a true symmetric X instead of a lopsided one. 44x44 keeps it
   comfortably above the 24px minimum target size. */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  color: var(--cream-2);
  background: none;
  border: none;
  transition: color var(--t);
}
@media (max-width: 1000px) { .burger { display: block; } }
.burger:hover { color: var(--gold); }

.burger span {
  position: absolute;
  right: 7px;
  height: 1.5px;
  background: currentColor;
  transition: width var(--t), top var(--t), transform var(--t);
}
.burger span:nth-child(1) { top: 18px; width: 26px; }
.burger span:nth-child(2) { top: 25px; width: 16px; }

/* Both rules converge on the vertical centre at equal width, then cross. */
.burger.is-open span { top: 21px; width: 25px; }
.burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ground-2);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s9) var(--s6);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-weight: 600;
  color: var(--cream-2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.mobile-menu a:last-child { color: var(--gold); border-bottom: none; }

/* ============================================================================
   HERO
   ========================================================================= */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
  padding: var(--s14) 0 var(--s10);
  overflow: hidden;
}

/* Architectural linework backdrop — replaces the old particle canvas */
.hero__draft { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(242,236,224,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,236,224,0.05) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse 78% 68% at 44% 44%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 44% 44%, #000 12%, transparent 76%);
}
.hero__chev {
  position: absolute; right: -9%; top: 48%;
  transform: translateY(-50%);
  width: min(56vw, 740px); height: auto;
  color: var(--gold); opacity: 0.12;
}
.hero__chev path { stroke: currentColor; }

/* .hero is a flex container, so this .wrap would otherwise size to its content
   and then get centred by its own `margin: 0 auto` — leaving the hero text
   indented ~270px further right than every other section. width:100% makes it
   share the same 1220px column and the same left edge as the rest of the page. */
.hero__in { position: relative; z-index: 1; width: 100%; }

.hero__eyebrow { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); }
.hero__eyebrow::after { content: ''; width: clamp(36px, 7vw, 88px); height: 1px; background: var(--gold); opacity: 0.5; }

.hero .d1 { max-width: 17ch; margin-bottom: var(--s6); }
.hero .lede { margin-bottom: var(--s8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s4); --d: 0.54s; }

/* Masked line reveal — the highest-value motion on the page. Each line rises
   from behind its own overflow edge, so it reads as typesetting.

   The padding/negative-margin pair is load-bearing, not decoration. `overflow:
   hidden` is what makes the mask work, but with line-height 1.02 the line box
   is shorter than the glyphs' ink, so Cormorant's descenders — the g in
   "higher" — were being sliced off by 7px. The padding gives the clip box
   descender room; the equal negative margin removes it again from layout, so
   vertical rhythm is unchanged. */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--out);
  transition-delay: var(--d, 0s);
}
.is-lit .line > span { transform: translateY(0); }

/* Tracking settle — used exactly once, on the hero eyebrow */
.settle { display: inline-block; letter-spacing: 0.55em; opacity: 0; transition: letter-spacing 1.2s var(--out), opacity 0.8s var(--out); }
.is-lit .settle { letter-spacing: 0.3em; opacity: 1; }

/* ============================================================================
   LICENSE RAIL — verifiable credential table
   ========================================================================= */

.rail { background: var(--ground-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: relative; z-index: 1; }
.rail__in {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px) { .rail__in { grid-template-columns: 1fr 1fr; } }
.rail__cell {
  padding: var(--s6) var(--s5);
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--s2);
}
.rail__cell:first-child { border-left: none; padding-left: 0; }
.rail__cell:last-child { padding-right: 0; }
@media (max-width: 860px) {
  .rail__cell { padding: var(--s5); border-top: 1px solid var(--rule); }
  .rail__cell:nth-child(1), .rail__cell:nth-child(2) { border-top: none; }
  .rail__cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .rail__cell:nth-child(even) { padding-right: 0; }
}
.rail__code { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--cream-2); line-height: 1; }
.rail__nm { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cream-2); }
/* Same treatment as the contact-block licence numbers: brand face, tabular
   figures for alignment, no code font. */
.rail__no { font-family: var(--ui); font-size: 0.6875rem; color: var(--cream-3); font-variant-numeric: tabular-nums; }
/* Padded to clear the 24x24 minimum target size (WCAG 2.5.8). The border sits
   on an inner span so the underline still hugs the text rather than floating
   at the bottom of the padded box. */
.rail__verify {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  min-height: 24px; padding: var(--s1) 0;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold);
  transition: color var(--t);
}
.rail__verify > span { border-bottom: 1px solid currentColor; }
.rail__verify:hover { color: var(--gold-hi); }

/* ============================================================================
   SECTION SHELL
   ========================================================================= */

.sec { padding: var(--s14) 0; position: relative; }
.sec--panel { background: var(--ground-2); }
.sec--ruled { border-top: 1px solid var(--rule); }

/* Rule-led head, left-aligned. Centred heads on every section were a large part
   of why the previous layout read as monotonous.

   This was a two-column grid holding the heading and an annotation note. The
   notes are gone, so the grid is too — with one child it left every heading
   squeezed into 7/11 of the width beside a phantom empty column. */
.head {
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s10);
}
.head .lab { display: block; margin-bottom: var(--s4); }


/* ============================================================================
   ABOUT — no photography. A typographic credential card carries the weight.
   ========================================================================= */

.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: var(--s12); align-items: start; }
@media (max-width: 1000px) { .about__grid { grid-template-columns: 1fr; gap: var(--s9); } }

.cardstack { display: flex; flex-direction: column; gap: var(--s6); }

.creds { border: 1px solid var(--rule); background: var(--ground-2); }
.creds__hd { padding: var(--s6); border-bottom: 1px solid var(--rule); }
.creds__name { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--cream-2); line-height: 1.05; }
.creds__role { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-top: var(--s3); }
.creds__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--rule);
}
.creds__row dt { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3); }
.creds__row dd { color: var(--cream-2); font-size: 0.875rem; font-weight: 500; text-align: right; }
.creds__stat {
  padding: var(--s6);
  display: flex; align-items: baseline; gap: var(--s4);
  background: var(--gold); color: var(--ground);
}
.creds__stat b { font-family: var(--display); font-size: 3.25rem; font-weight: 600; line-height: 0.85; }
.creds__stat span { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }

/* Project pedigree — framed as Adam's personal record, not company contracts */
.ped { border-top: 1px solid var(--rule); margin-top: var(--s7); }
.ped li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule);
}
.ped__name { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--cream-2); }
.ped__meta { font-family: var(--ui); font-size: 0.6875rem; color: var(--cream-3); text-align: right; }
.ped__note { margin-top: var(--s4); }

/* ============================================================================
   SERVICES — editorial numbered rows, not six identical boxes
   ========================================================================= */

.svcs { border-top: 1px solid var(--rule-firm); }
.svc {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s6);
  align-items: start;
  padding: var(--s7) var(--s4) var(--s7) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--t), transform var(--t);
}
.svc:hover { background: var(--ground-2); transform: translateX(2px); }
@media (max-width: 860px) {
  .svc { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s4); }
  .svc__body { grid-column: 2; margin-top: var(--s3); }
}
.svc__ix { font-family: var(--ui); font-size: 0.6875rem; color: var(--gold); padding-top: 0.5rem; font-variant-numeric: tabular-nums; }
.svc__title { font-family: var(--display); font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; color: var(--cream-2); line-height: 1.14; letter-spacing: -0.012em; }
.svc__lic {
  display: inline-block; margin-top: var(--s3);
  padding: 0.3rem var(--s3);
  border: 1px solid var(--rule-firm);
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
.svc__body { color: var(--cream-2); line-height: 1.72; }
.svc__specs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); }
.svc__specs li { font-size: 0.75rem; color: var(--cream-3); display: flex; align-items: center; gap: var(--s2); }
.svc__specs li::before { content: ''; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }

/* ============================================================================
   SIGNATURE ROOMS — a short list. Names only; the conversation happens on the
   phone, so there is nothing here to read past.
   ========================================================================= */

.roomlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-firm);
}
.roomlist li {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s5) var(--s4) var(--s5) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--t);
}
.roomlist li:nth-child(even) { padding-left: var(--s6); border-left: 1px solid var(--rule); }
.roomlist li:hover { background: var(--ground-2); }

.roomlist__ix {
  font-family: var(--ui);
  font-size: 0.6875rem;
  color: var(--gold);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.roomlist__n {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 600;
  color: var(--cream-2);
  line-height: 1.16;
  letter-spacing: -0.012em;
}

@media (max-width: 760px) {
  .roomlist { grid-template-columns: 1fr; }
  .roomlist li:nth-child(even) { padding-left: 0; border-left: none; }
}

.rooms__cta {
  margin-top: var(--s10);
  padding: var(--s8);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s7);
  align-items: center;
}
@media (max-width: 860px) { .rooms__cta { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s6); } }
/* ============================================================================
   PROCESS — deliverable-based phases
   ========================================================================= */

.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 1000px) { .phases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .phases { grid-template-columns: 1fr; } }

.phase { background: var(--ground); padding: var(--s7) var(--s6); display: flex; flex-direction: column; gap: var(--s3); transition: background var(--t); }
.phase:hover { background: var(--ground-2); }
.phase__no {
  font-family: var(--ui); font-size: 0.6875rem; color: var(--gold);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-firm); margin-bottom: var(--s2);
  font-variant-numeric: tabular-nums;
}
.phase__t { font-family: var(--display); font-size: 1.375rem; font-weight: 600; color: var(--cream-2); line-height: 1.12; }
.phase__b { font-size: 0.875rem; color: var(--cream-2); line-height: 1.68; flex: 1; }
.phase__out { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--rule-firm); }
.phase__out dt { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s1); }
.phase__out dd { font-size: 0.8125rem; color: var(--cream-2); line-height: 1.55; }
.phase__out dd + dt { margin-top: var(--s3); }

/* ============================================================================
   SERVICE AREA — interactive Leaflet map on free CARTO dark tiles.
   Library and CSS are injected by script.js only when the map is about to
   enter the viewport, so nothing here is on the critical path.
   ========================================================================= */

.area__grid {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1000px) { .area__grid { grid-template-columns: 1fr; gap: var(--s8); } }

.areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  margin: var(--s6) 0;
}
@media (max-width: 520px) { .areas { grid-template-columns: 1fr; } }
.areas li {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem; color: var(--cream-2);
}
.areas li:nth-child(even) { padding-left: var(--s5); border-left: 1px solid var(--rule); }
@media (max-width: 520px) { .areas li:nth-child(even) { padding-left: 0; border-left: none; } }
.areas li::before { content: ''; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }

.map-frame { border: 1px solid var(--rule); background: var(--ground-2); padding: var(--s3); }

#serviceMap {
  width: 100%;
  height: clamp(340px, 44vw, 500px);
  background: var(--ground-3);
}

/* ── Loading skeleton ──
   Shown only while Leaflet is in flight. Deliberately shaped like the thing
   that is coming — a tile grid with pins — rather than a generic grey bar, so
   the wait reads as "the map is loading" instead of "something is broken".

   This is the one animation on the site that repeats, and it earns it: a
   skeleton that does not move reads as a failure state. It exists for at most
   a few hundred milliseconds and is removed from the DOM on mount. */
.map-skel { display: none; }
#serviceMap.is-loading .map-fallback { display: none; }
#serviceMap.is-loading .map-skel {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(to right, rgba(242,236,224,0.045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(242,236,224,0.045) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--ground-3);
}
/* Sweep */
#serviceMap.is-loading .map-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(196,163,99,0.10) 45%,
    rgba(196,163,99,0.16) 50%,
    rgba(196,163,99,0.10) 55%,
    transparent 80%);
  background-size: 220% 100%;
  animation: skelSweep 1.4s ease-in-out infinite;
}
@keyframes skelSweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Placeholder pins, positioned roughly where the real ones land */
.map-skel__pin {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(196,163,99,0.28);
}
.map-skel__pin:nth-child(1) { left: 22%; top: 32%; }
.map-skel__pin:nth-child(2) { left: 26%; top: 49%; }
.map-skel__pin:nth-child(3) { left: 34%; top: 58%; }
.map-skel__pin:nth-child(4) { left: 40%; top: 73%; }
.map-skel__pin:nth-child(5) { left: 55%; top: 45%; }
.map-skel__pin:nth-child(6) { left: 70%; top: 68%; }
.map-skel__pin:nth-child(7) { left: 76%; top: 78%; }

.map-skel__label {
  position: absolute;
  left: 50%; bottom: var(--s5);
  transform: translateX(-50%);
  font-family: var(--ui);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-3);
}

@media (prefers-reduced-motion: reduce) {
  #serviceMap.is-loading .map-skel::after { animation: none; opacity: 0.5; }
}

/* No-JS / pre-init state. Real content rather than an empty dark rectangle, so
   the section reads as finished even with scripting off. Leaflet replaces it. */
.map-fallback {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s4);
  padding: var(--s6);
  text-align: center;
}
.map-fallback__t {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--cream-2);
  line-height: 1.15;
}
.map-fallback__d {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--cream-2);
  max-width: 42ch;
}
.map-fallback__a {
  font-family: var(--ui);
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid currentColor;
  min-height: 24px; display: inline-flex; align-items: center;
}
.map-fallback__a:hover { color: var(--gold-hi); }

/* While the library is in flight */
#serviceMap.is-loading .map-fallback__a { opacity: 0.4; pointer-events: none; }
#serviceMap.is-failed {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s6); text-align: center;
}
#serviceMap.is-failed p { font-size: 0.875rem; color: var(--cream-2); }
#serviceMap.is-failed a { color: var(--gold); border-bottom: 1px solid currentColor; }

.map-frame__cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s2) var(--s1);
  font-family: var(--ui); font-size: 0.5625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-3);
  flex-wrap: wrap;
}
.map-frame__cap a { color: var(--gold); border-bottom: 1px solid currentColor; min-height: 24px; display: inline-flex; align-items: center; }

/* ── Leaflet chrome, retoned to charcoal and gold ── */
.leaflet-container {
  font-family: var(--ui) !important;
  background: var(--ground-3) !important;
}
.leaflet-control-zoom a {
  background: var(--ground-2) !important;
  color: var(--gold) !important;
  border-color: var(--rule) !important;
  font-weight: 400 !important;
}
.leaflet-control-zoom a:hover { background: var(--ground-3) !important; color: var(--gold-hi) !important; }
.leaflet-bar { border: 1px solid var(--rule) !important; box-shadow: none !important; }
.leaflet-control-attribution {
  background: rgba(16, 13, 10, 0.82) !important;
  color: var(--cream-3) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--gold) !important; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--ground-2) !important;
  color: var(--cream-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.leaflet-popup-content { font-size: 12.5px !important; line-height: 1.5 !important; margin: 12px 16px !important; }
.leaflet-popup-content strong { color: var(--cream-2); font-weight: 600; }
.leaflet-popup-close-button { color: var(--cream-3) !important; }
.leaflet-popup-close-button:hover { color: var(--gold) !important; }

/* Community label on hover */
.map-tip {
  background: var(--ground) !important;
  border: 1px solid var(--rule-firm) !important;
  border-radius: 0 !important;
  color: var(--gold) !important;
  font-family: var(--ui) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  padding: 3px 7px !important;
}
.map-tip::before { display: none !important; }

/* The office marker: a gold square, so it reads differently from the round
   community markers without needing a legend. */
.map-office span {
  display: block;
  width: 12px; height: 12px;
  margin: 2px;
  background: var(--gold);
  border: 2px solid var(--ground);
  box-shadow: 0 0 0 1px var(--gold);
}
/* ============================================================================
   CONTACT
   ========================================================================= */

.contact__grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 1000px) { .contact__grid { grid-template-columns: 1fr; gap: var(--s9); } }

.crows { border-top: 1px solid var(--rule); margin-top: var(--s7); }
.crow {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
@media (max-width: 480px) { .crow { grid-template-columns: 1fr; gap: var(--s1); } }
.crow dt { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.crow dd { color: var(--cream-2); line-height: 1.5; font-size: 0.9375rem; }
/* Standalone contact links, so they get the 24px target floor. The inline
   "Privacy Policy" link in .form__note is deliberately left alone — WCAG 2.5.8
   exempts targets sitting inside a sentence, and padding it would break the
   line it lives in. */
.crow a {
  display: inline-flex; align-items: center; min-height: 24px;
  border-bottom: 1px solid var(--rule-firm);
  transition: border-color var(--t);
}
.crow a:hover { border-color: var(--gold); }
.crow--big dd { font-family: var(--display); font-size: 1.625rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* ── Form ── */
.form-card { border: 1px solid var(--rule); background: var(--ground-2); padding: clamp(1.25rem, 3.5vw, 2.25rem); }
.form { display: flex; flex-direction: column; gap: var(--s5); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 620px) { .frow { grid-template-columns: 1fr; } }

.fld { display: flex; flex-direction: column; gap: var(--s2); position: relative; }
.fld > label { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-3); }
.fld > label .rq { color: var(--gold); }
/* Was --cream-4 at 9px, which measured 2.47:1 — a straight AA failure on real
   text, and --cream-4 is documented as decorative-only.
   Also was --mono (Consolas): a code face sitting inside an Archivo field label
   read as an editor artefact rather than part of the form. Now matches the
   label it belongs to. */
.fld__opt {
  font-family: var(--ui);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--cream-3);
  text-transform: none;
}

.fld input, .fld select, .fld textarea {
  font-family: var(--ui); font-size: 0.9375rem; color: var(--cream-2);
  background: transparent;
  border: none; border-bottom: 1px solid var(--rule-firm);
  padding: var(--s3) 0;
  border-radius: 0; appearance: none; -webkit-appearance: none;
  transition: border-color var(--t);
}
.fld textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
/* `outline: none` was here. It suppressed the focus ring for keyboard users
   too, leaving only a 1px border-colour change — which fails WCAG 2.4.11
   (Focus Appearance) and is one of the most commonly cited defects in
   machine-written CSS. The global :focus-visible ring is now allowed through;
   the gold underline is an addition to it, not a replacement. */
/* ── Autofill ──
   Chrome/Safari paint autofilled fields with their own near-white background and
   dark text, which wrecks a dark form. `background-color` cannot override it —
   the UA style wins. A large inset box-shadow can, because it paints over the
   background layer, and -webkit-text-fill-color is the only way to recolour the
   text. --ground-2 matches .form-card exactly, so the fill is invisible.

   The absurd transition delay is a documented belt-and-braces trick: it defers
   the UA's background paint effectively forever on engines where the box-shadow
   alone still flashes. :autofill (unprefixed) covers Firefox. */
.fld input:-webkit-autofill,
.fld input:-webkit-autofill:hover,
.fld input:-webkit-autofill:focus,
.fld input:-webkit-autofill:active,
.fld textarea:-webkit-autofill,
.fld select:-webkit-autofill {
  -webkit-text-fill-color: var(--cream-2);
  -webkit-box-shadow: 0 0 0 1000px var(--ground-2) inset;
  box-shadow: 0 0 0 1000px var(--ground-2) inset;
  caret-color: var(--cream-2);
  transition: background-color 9999s ease-in-out 0s;
}
.fld input:autofill,
.fld textarea:autofill,
.fld select:autofill {
  -webkit-text-fill-color: var(--cream-2);
  box-shadow: 0 0 0 1000px var(--ground-2) inset;
  caret-color: var(--cream-2);
}

.fld input:focus, .fld select:focus, .fld textarea:focus { border-bottom-color: var(--gold); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--cream-3); opacity: 0.7; }
.fld select { cursor: pointer; }
.fld select option { background: var(--ground-2); color: var(--cream-2); }
.fld select:invalid { color: var(--cream-3); }

.fld--sel::after {
  content: ''; position: absolute; right: 2px; bottom: 1.05rem;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg); pointer-events: none;
}

/* Error state is applied by script.js only after a submit attempt, so nothing
   turns red while the visitor is still typing. */
.fld.is-bad input, .fld.is-bad select, .fld.is-bad textarea { border-bottom-color: var(--danger); }
.fld__err { font-size: 0.75rem; color: var(--danger); display: none; }
.fld.is-bad .fld__err { display: block; }

/* Honeypot — off-screen, skipped by keyboard and screen readers */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Reserves the widget's height up front so the submit button never jumps when
   Turnstile mounts — that shift is the single largest CLS risk on this page.
   A static placeholder rather than a shimmer: a third-party widget can
   legitimately fail to load, and an endless shimmer would then be a lie.
   :has(iframe) drops the placeholder chrome once the real widget is in. */
/* No border or fill. The dashed placeholder box read as build scaffolding on a
   finished form; the reserved height alone is what prevents the submit button
   jumping when the widget mounts. */
.turnstile-slot {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.turnstile-slot:has(iframe) { min-height: 0; }

.form__foot { display: flex; flex-direction: column; gap: var(--s3); }
.form__note { font-size: 0.75rem; color: var(--cream-3); text-align: center; }
.form__note a { color: var(--gold); border-bottom: 1px solid currentColor; }

.spinner {
  width: 13px; height: 13px;
  border: 1.5px solid rgba(16,13,10,0.3);
  border-top-color: var(--ground);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status { font-size: 0.8125rem; text-align: center; min-height: 1.2em; color: var(--cream-2); }
.form-status.is-error { color: var(--danger); }

/* Success panel. Shown alongside the form rather than replacing its markup, so
   the form survives and "send another" needs no page reload. */
.sent { display: none; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); padding: var(--s9) var(--s5); }
.sent.is-on { display: flex; }
.form.is-off { display: none; }
.sent__chev { width: 46px; height: auto; color: var(--gold); }
.sent__chev path { stroke: currentColor; }
.sent h3 { font-family: var(--display); font-size: 1.875rem; font-weight: 600; color: var(--cream-2); }
.sent p { font-size: 0.9375rem; color: var(--cream-2); max-width: 36ch; }
.sent__again { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid currentColor; cursor: pointer; margin-top: var(--s2); }

/* ============================================================================
   FOOTER
   ========================================================================= */

/* Compacted: was --s12 (112px) top and three stacked rows below the columns.
   Now --s9 (64px) top with licences, copyright and legal on one bar. */
.site-footer { background: var(--ground-2); border-top: 1px solid var(--rule); padding: var(--s9) 0 var(--s5); }

.foot__top {
  display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  gap: var(--s7) var(--s7);
  padding-bottom: var(--s6); border-bottom: 1px solid var(--rule);
}
@media (max-width: 1000px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .foot__top { grid-template-columns: 1fr; gap: var(--s7); } }

.foot__blurb { font-size: 0.8125rem; line-height: 1.65; max-width: 32ch; margin-top: var(--s4); color: var(--cream-2); }

.foot__col h2 { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s3); font-family: var(--ui); }
.foot__col a, .foot__col span { display: block; font-size: 0.8125rem; color: var(--cream-2); padding: 0.15rem 0; transition: color var(--t); }
.foot__col a:hover { color: var(--gold); }

/* One compact bar: licences, copyright, legal. Previously three stacked rows
   with their own padding and dividers, which made the footer taller than the
   contact section above it. */
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s6);
  padding-top: var(--s5);
  font-size: 0.75rem;
  color: var(--cream-3);
}

.foot__lic {
  font-family: var(--ui);
  font-size: 0.6875rem;
  color: var(--cream-3);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
}
.foot__lic b { color: var(--gold); font-weight: 400; letter-spacing: 0.08em; }
.foot__sep { color: var(--rule-firm); }

.foot__copy { font-size: 0.6875rem; color: var(--cream-3); }

/* Below 760 the bar becomes a tight stack rather than fighting space-between
   across a narrow row. */
@media (max-width: 760px) {
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .foot__lic { gap: 0 var(--s2); }
}
.foot__legal { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
/* min-height clears the 24x24 minimum target size (WCAG 2.5.8) */
.foot__legal a { display: inline-flex; align-items: center; min-height: 24px; transition: color var(--t); }
.foot__legal a:hover { color: var(--gold); }

/* Same floor for inline text links and the footer column links, both of which
   otherwise land around 17-18px on mobile. */
.foot__col a { min-height: 24px; display: flex; align-items: center; }

/* ============================================================================
   LEGAL PAGES — privacy-policy.html, terms-of-service.html
   Single narrow reading column. Deliberately plainer than the homepage: this is
   a document, and the job is legibility, not atmosphere.
   ========================================================================= */

.legal-hero {
  padding: calc(var(--s14) + 3rem) 0 var(--s8);
  border-bottom: 1px solid var(--rule);
}
.legal-hero .lab { display: block; margin-bottom: var(--s4); }
.legal-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 600;
  color: var(--cream-2);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.legal-hero__meta {
  font-family: var(--ui);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--s5);
}

.legal { padding: var(--s10) 0 var(--s12); }

/* One column, ~68ch. Long legal prose needs a measure, not the full grid. */
.legal__doc { max-width: 68ch; }

.legal__back {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 24px;
  font-family: var(--ui);
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s8);
  transition: color var(--t);
}
.legal__back:hover { color: var(--gold-hi); }

.legal__doc > p { color: var(--cream-2); line-height: 1.75; margin-bottom: var(--s5); }

.legal__doc h2 {
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 600;
  color: var(--cream-2);
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin: var(--s9) 0 var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.legal__doc h2:first-of-type { margin-top: var(--s8); }

.legal__doc h3 {
  font-family: var(--ui);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  margin: var(--s6) 0 var(--s3);
}

.legal__doc ul, .legal__doc ol { margin: 0 0 var(--s5); }
.legal__doc li {
  position: relative;
  padding-left: var(--s6);
  margin-bottom: var(--s3);
  color: var(--cream-2);
  line-height: 1.7;
}
.legal__doc ul > li::before {
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Ordered lists carry real numbering (the mediation steps in the Terms are a
   sequence), so they get a counter rather than the diamond. */
.legal__doc ol { counter-reset: legalitem; }
.legal__doc ol > li { counter-increment: legalitem; }
.legal__doc ol > li::before {
  content: counter(legalitem) '.';
  position: absolute; left: 0; top: 0;
  font-family: var(--ui);
  font-size: 0.8125rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.legal__doc strong { color: var(--cream-2); font-weight: 600; }

.legal__doc a:not(.legal__back) {
  color: var(--cream-2);
  border-bottom: 1px solid var(--gold);
  transition: color var(--t);
}
.legal__doc a:not(.legal__back):hover { color: var(--gold); }

/* Address / contact block at the end of each document */
.legal__contact {
  margin-top: var(--s6);
  padding: var(--s6);
  border: 1px solid var(--rule);
  background: var(--ground-2);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--cream-2);
}
.legal__contact strong { display: block; color: var(--cream-2); margin-bottom: var(--s2); }
.legal__contact a { color: var(--cream-2); border-bottom: 1px solid var(--gold); }

@media (max-width: 620px) {
  .legal-hero { padding: calc(var(--s12) + 2.5rem) 0 var(--s7); }
  .legal__doc h2 { margin-top: var(--s7); }
}

/* ============================================================================
   ONE-OFF POSITIONS
   These existed as inline style="" attributes. They are here instead so the CSP
   can forbid inline styles outright — `style-src 'unsafe-inline'` is a real
   weakening, because an injected style attribute can exfiltrate data and
   reposition or mask UI. Note that script.js setting el.style.setProperty() is
   unaffected: CSPOM writes from script are governed by script-src, not
   style-src, so the staggered service/phase rows still work.
   ========================================================================= */

/* Hero entrance timings, previously style="--d:…". The .hero__cta and .ped
   values were folded into their primary definitions above rather than left as a
   second block for the same selector. */
.hero .d1 .line:nth-of-type(1) > span { transition-delay: 0.05s; }
.hero .d1 .line:nth-of-type(2) > span { transition-delay: 0.15s; }
.hero .lede    { --d: 0.42s; }

.ped__hd       { padding-bottom: var(--s4); }
.rooms__cta h3 { margin-bottom: var(--s3); }
/* Licence numbers in the contact block. These were --mono (Consolas), which put
   a code face in the middle of a client-facing address panel. Archivo with
   tabular figures keeps the digits vertically aligned — which was the only real
   reason to reach for a mono face — without the editor look.
   Renamed from .mono: the element was still *called* mono while being styled as
   Archivo, and only won over the global `code, .mono` rule on specificity. */
/* Set to match the lede ("Send the details below or call…") exactly: same face,
   size, weight, line-height and colour, with proportional figures.

   The family was already the same. What made this block read as a different,
   denser face was the tight 22.5px leading against the lede's 26.88px, plus
   pure-white text against the lede's 72% cream. tabular-nums is dropped too —
   it shifts Archivo's digit widths by 0.05px, so it bought nothing. */
/* Selector is `.crow dd.crow__lic`, not `.crow__lic`, deliberately: `.crow dd`
   above is 0,1,1 and was silently winning the font-size and line-height, so the
   block kept rendering at 15px/1.5 instead of matching the lede. */
.crow dd.crow__lic {
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: normal;
  font-variant-numeric: normal;
  color: var(--cream-2);
}

/* ============================================================================
   REVEAL
   ========================================================================= */

.rv { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--out), transform 0.9s var(--out); transition-delay: var(--d, 0s); }
.rv.is-lit { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .line > span       { transform: none !important; }
  .settle            { letter-spacing: 0.3em !important; opacity: 1 !important; }
  .rv                { opacity: 1 !important; transform: none !important; }
  .spinner           { animation-duration: 1.6s; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .nav, .burger, .mobile-menu, .hero__draft, .form-card, .turnstile-slot { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .sec--panel, .site-footer, .rail { background: #fff; }
  /* `.cream` was here but is a custom-property name, not a class — it matched
     nothing. Replaced with the elements that actually carry cream text. */
  .d1, .d2, .d3, .creds__name, .svc__title, .roomlist__n, .phase__t { color: #000 !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.7em; }
}