/* =============================================================
   Brixel Project — Miami
   Dark minimal luxury: warm near-black, champagne gold, hairlines.
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0a0a09;
  --bg-2:      #0d0d0c;
  --bg-3:      #111110;
  --surface:   #121211;
  --surface-2: #171614;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.15);
  --text:      #f2f0ea;
  --muted:     #9d988c;
  --dim:       #6e6a60;

  --gold:      #c9a961;
  --gold-lt:   #e6d3a3;
  --gold-dp:   #8f7434;
  --on-gold:   #17140c;

  --display:     "Bricolage Grotesque", system-ui, sans-serif;
  --display-alt: "Archivo", "Bricolage Grotesque", system-ui, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --sans:    "Inter", system-ui, -apple-system, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gutter: clamp(1.3rem, 5vw, 4.5rem);
  --maxw: 1200px;
  --r: 3px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
input { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #fffdf8;
  font-variation-settings: "opsz" 48;
}
/* One serif-italic phrase per headline, in solid champagne. Restraint is the luxury. */
h1 em, h2 em, h3 em {
  font-family: var(--serif);
  font-weight: 400; font-style: italic;
  letter-spacing: -0.005em;
  color: var(--gold);
}

/* ---- Black marble ----------------------------------------------------
   Two feTurbulence vein layers over warm black: fine white veining plus a
   broader, softer gold seam. Fixed, so the stone stays put while you scroll. */
/* translateZ promotes both marble layers to their own compositor layer. Without
   it a fixed background is re-rasterised on every scroll frame, which is the
   single most expensive thing on this page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transform: translateZ(0);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0016 0.05' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0.16 0.42 0.16 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23v)' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0011 0.03' numOctaves='4' seed='23'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0.3 0.7 0.3 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1600' height='1600' filter='url(%23g)' fill='%23c9a961'/%3E%3C/svg%3E");
  background-size: 1300px 1300px, 1700px 1700px;
  background-position: 0 0, 320px 240px;
  opacity: .5;
}
/* Uneven light across the slab, so it does not read as flat paint. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transform: translateZ(0);
  background:
    radial-gradient(85% 60% at 18% 8%,  rgba(255,255,255,.045), transparent 62%),
    radial-gradient(70% 55% at 88% 78%, rgba(201,169,97,.055), transparent 66%);
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =============================================================
   3. Utilities + logo
   ============================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .65rem 1.1rem; background: var(--gold); color: var(--on-gold);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Logo — a brick bond at bottom-left scattering into pixels at top-right.
   Mark only, no wordmark: it has to work at 28px in the chat button. */
.lg-b1 { fill: var(--gold); }
.lg-b2 { fill: var(--gold-lt); }
.lg-b3 { fill: var(--gold); opacity: .85; }
.lg-p1 { fill: var(--gold); opacity: .6; }
.lg-p2 { fill: var(--gold); opacity: .42; }
.lg-p3 { fill: var(--gold); opacity: .3; }
.lg-p4 { fill: var(--gold); opacity: .2; }

.kicker {
  display: block;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.6rem;
}

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* The reveal needs overflow:hidden as a mask — but a hidden-overflow inline
   block aligns on its bottom margin edge instead of its text baseline, and that
   edge scales with each word's font size. On a headline mixing 98px and 63px
   words that throws the big one ~13px off the writing line. So the mask is
   dropped the moment the animation is over, which puts every word back on a
   real shared baseline.
   The padding/margin pair stops the mask slicing descenders (j, g, y). */
.split-word {
  display: inline-block; overflow: hidden; vertical-align: baseline;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.split-word.is-done { overflow: visible; }
.split-word > span { display: inline-block; }
.js [data-split] .split-word > span { transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.js [data-split].is-in .split-word > span { transform: none; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1.05rem 2rem;
  border-radius: var(--r);
  font-weight: 500; font-size: .88rem;
  letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .45s var(--ease-out), border-color .45s var(--ease-out),
              color .45s var(--ease-out), transform .45s var(--ease-out);
}
.btn-lg { padding: 1.2rem 2.4rem; }
.btn-sm { padding: .62rem 1.25rem; font-size: .74rem; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-lt); transform: translateY(-2px); }
.btn-glass { border-color: var(--line-2); color: var(--text); }
.btn-glass:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* =============================================================
   5. Nav
   ============================================================= */
/* No bar on the home page. The mark and the buttons simply sit on the
   photograph and scroll away with it. */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border: 0;
}
/* A page that opens on its own statement does not want a black strip across
   it: the mark and the buttons float on the page and scroll away with it. */
.nav.is-float { position: absolute; background: transparent; border: 0; }
.nav.is-float .nav-links a { color: #d8d3c7; text-shadow: 0 1px 10px rgba(0,0,0,.85); }
.nav.is-float .brand-logo { filter: drop-shadow(0 1px 6px rgba(0,0,0,.8)); }

/* Inner pages have no photograph behind the bar, so it becomes a real one. */
.nav.is-solid {
  position: sticky;
  background: rgba(10,10,9,.94);
}
@supports (backdrop-filter: blur(14px)) {
  .nav.is-solid { background: rgba(10,10,9,.8); backdrop-filter: blur(20px); }
}
.nav.is-solid .nav-links a { text-shadow: none; color: var(--muted); }
.nav.is-solid .nav-links a:hover,
.nav.is-solid .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-inner { display: flex; align-items: center; gap: .5rem; height: 92px; position: relative; }
@media (min-width: 560px) { .nav-inner { gap: 1.25rem; } }
.brand { display: flex; align-items: center; margin-right: auto; }

/* Internal navigation. Sits on the photograph, so it needs a shadow to stay
   readable over the bright part of the sky. */
.nav-links { display: none; gap: 1.7rem; margin-right: 1.6rem; }
.nav-links a {
  position: relative;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: #d8d3c7; text-shadow: 0 1px 10px rgba(0,0,0,.8);
  transition: color .35s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--gold); transition: right .45s var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-links a[aria-current="page"]::after, .nav-links a:hover::after { right: 0; }
/* Six items need 640px; at a 900px window there are 772px of it, so the
   real menu now reaches tablets instead of hiding behind a burger. */
@media (min-width: 900px) { .nav-links { display: flex; } }

.brand-logo {
  /* matched to the intro mark, so the logo reads the same size everywhere */
  width: 26px; height: auto; flex: none;
  transition: transform .5s var(--ease-out);
}
.brand:hover .brand-logo { transform: translateY(-2px); }
.nav-right { display: flex; align-items: center; gap: .9rem; }
.lang {
  font-size: .7rem; font-weight: 500; letter-spacing: .16em;
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .45rem .7rem; color: var(--muted);
  transition: border-color .35s var(--ease-out);
}
.lang:hover { border-color: var(--gold); }
.lang-on { color: var(--gold); }
.lang-sep { opacity: .3; margin-inline: .22rem; }
.lang-off { opacity: .65; }

/* ---- Mobile menu -------------------------------------------------------
   The horizontal nav only fits from 1040px up, which left every inner page
   unreachable from the top of a phone screen — the footer sitemap was the only
   way through. This is the way through. */
.burger {
  display: grid; place-content: center;
  width: 44px; height: 44px; flex: none; border-radius: var(--r);
  position: relative; z-index: 320;
}
.burger i {
  display: block; width: 22px; height: 1.5px; border-radius: 2px;
  background: var(--text);
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out),
              background .35s var(--ease-out);
}
.burger i + i { margin-top: 6px; }
.burger:hover i { background: var(--gold); }
/* The two bars fold into a cross; 3.75px is half the 7.5px between centres. */
.burger[aria-expanded="true"] i:first-child { transform: translateY(3.75px)  rotate(45deg); }
.burger[aria-expanded="true"] i:last-child  { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 900px) { .burger { display: none; } }

.mnav {
  position: fixed; inset: 0; z-index: 310;
  background: rgba(8,8,7,.965);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  display: grid; align-content: center;
  padding: 6.6rem var(--gutter) 2.6rem;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .45s var(--ease-out);
}
/* Same trap as the chat panel: the display above beats the hidden attribute
   unless this sits after it. */
.mnav[hidden] { display: none; }
.mnav.is-open { opacity: 1; }
/* The way out. Inside the overlay because the burger's own X is buried
   under it: the header is a stacking context at z-100, the overlay is 310. */
.mnav-close {
  position: absolute; top: 1.05rem; right: var(--gutter);
  display: grid; place-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-2);
  color: var(--text); cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.mnav-close:active { background: rgba(201,169,97,.18); color: var(--gold-lt); }

.mnav-list { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; }
.mnav-list a {
  display: block; padding: .5rem 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 7.6vw, 2.5rem); line-height: 1.14;
  letter-spacing: -0.035em; color: #fffdf8;
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              color .3s var(--ease-out);
}
.mnav.is-open .mnav-list a { opacity: 1; transform: none; }
/* Staggered so the list assembles itself rather than snapping in as a block. */
.mnav-list li:nth-child(1) a { transition-delay: .06s; }
.mnav-list li:nth-child(2) a { transition-delay: .11s; }
.mnav-list li:nth-child(3) a { transition-delay: .16s; }
.mnav-list li:nth-child(4) a { transition-delay: .21s; }
.mnav-list li:nth-child(5) a { transition-delay: .26s; }
.mnav-list li:nth-child(6) a { transition-delay: .31s; }
.mnav-list li:nth-child(7) a { transition-delay: .36s; }
.mnav-list li:nth-child(8) a { transition-delay: .41s; }
/* Brixel Intro is the film, and it wears the film's own two colours: the gold
   of the brand running into the purple the water fades to at the end. Guarded,
   because without background-clip the letters would vanish instead of shining. */
.nav-intro{ color: var(--gold-lt); }
/* Desktop keeps the gradient. It is NOT used in the phone menu: iOS Safari
   drops background-clip:text when the element carries a filter and an
   ancestor runs backdrop-filter — the phone menu has both, so phones showed
   plain text. Solid two-tone below cannot fail. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav-links a.nav-intro {
    background: linear-gradient(96deg, #f0d67a 0%, #d8b45f 34%, #a97fd6 78%, #8d63c9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 14px rgba(169,127,214,.4));
  }
  .nav-links a.nav-intro:hover {
    filter: drop-shadow(0 0 20px rgba(240,214,122,.55));
  }
}
/* the phone menu: gold word, purple word, and a soft purple halo */
.mnav-list a.nav-intro{
  color:#f0d67a;
  text-shadow:0 0 18px rgba(169,127,214,.45);
}
.mnav-list a.nav-intro .ni-b{ color:#a97fd6; }
.mnav-list a.nav-intro:active{ color:#e6d3a3; }
.mnav-list a.nav-intro:active .ni-b{ color:#bb99e0; }
/* the underline the other links get would read as a stray purple bar */
.nav-links a.nav-intro::after{ display: none; }

/* The paid door reads gold wherever it appears. The current page is still
   told apart by its underline in the top bar, so gold here is a category
   marker rather than a "you are here". */
.nav-links a.nav-he, .mnav-list a.nav-he { color: var(--gold); }
.nav-links a.nav-he:hover { color: var(--gold-lt); }
.mnav-list a.nav-he:active { color: var(--gold-lt); }

/* How it works / What's included / Why free are chapters of the free story,
   not destinations of their own — on the phone they sit under the main list
   at a size that says so. */
.mnav-sub {
  list-style: none; margin: -1.4rem 0 2.4rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem 1.5rem;
}
.mnav-sub a {
  display: block; padding: .2rem 0;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out) .42s, transform .5s var(--ease-out) .42s,
              color .3s var(--ease-out);
}
.mnav.is-open .mnav-sub a { opacity: 1; transform: none; }
.mnav-sub a[aria-current="page"] { color: var(--gold); }

/* On a short phone the panel ran 85px past the fold, so the last item and the
   contact row were below the edge on open. Nothing is dropped — the type and
   the padding give the space back, and the whole menu lands on one screen
   from the iPhone SE upward. */
@media (max-height: 730px) {
  .mnav { padding-top: 5rem; padding-bottom: 1.6rem; }
  .mnav-list { margin-bottom: 1.6rem; }
  .mnav-list a { padding: .3rem 0; font-size: clamp(1.45rem, 6.2vw, 2.1rem); }
  .mnav-sub { margin: -.9rem 0 1.7rem; }
  .mnav-cta { padding-top: .85rem; padding-bottom: .85rem; }
}

/* the current page reads as plain text in the phone menu: gold there is a
   category marker (High-end), not a "you are here" */
.mnav-list a:active { color: var(--gold); }

.mnav-cta {
  width: 100%; justify-content: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease-out) .46s, transform .55s var(--ease-out) .46s,
              background .45s var(--ease-out);
}
.mnav.is-open .mnav-cta { opacity: 1; transform: none; }
.mnav-foot {
  margin-top: 1.6rem; display: grid; gap: .5rem; text-align: center;
  font-size: .95rem; color: var(--muted);
  opacity: 0; transition: opacity .55s var(--ease-out) .56s;
}
.mnav.is-open .mnav-foot { opacity: 1; }
.mnav-foot a { color: var(--gold); }
/* Without this the page behind keeps scrolling under the open panel. */
html.menu-open, html.menu-open body { overflow: hidden; }

/* On a short screen — an SE, or any phone held in landscape — the full-size
   list pushes the Apply button below the fold. Tightening it keeps the whole
   menu, CTA included, on one screen. */
@media (max-height: 660px) {
  .mnav { padding: 5.4rem var(--gutter) 2rem; align-content: start; }
  .mnav-list { margin-bottom: 1.5rem; }
  .mnav-list a { font-size: clamp(1.3rem, 5.6vw, 1.75rem); padding: .3rem 0; }
  .mnav-cta { padding-block: .95rem; }
  .mnav-foot { margin-top: 1.1rem; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav-list a, .mnav-cta, .mnav-foot { transition-duration: .01ms; }
  .mnav-list a, .mnav-cta { transform: none; }
}


/* The questions were floating straight on the marble, which read as an unfinished
   page rather than a form. A raised panel gives the application somewhere to live. */
.sf-card {
  background: rgba(18,18,17,.78);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  border-radius: 10px;
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1.4rem, 4.5vw, 3rem) clamp(1.4rem, 4vw, 2.2rem);
  /* Depth instead of an outline — the no-lines rule still holds. */
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9),
              0 4px 30px rgba(0,0,0,.35),
              inset 0 1px 0 rgba(255,255,255,.05);
}
.sf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.sf-head b {
  font-size: .68rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.sf-count {
  font-size: .72rem; letter-spacing: .12em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.sf-count i { font-style: normal; color: var(--dim); }
/* Inside a panel the questions no longer need the page's own min-height. */
.sf-card .sf-step { min-height: 16.5rem; }
@media (max-width: 560px) { .sf-card .sf-step { min-height: 15rem; } }

/* =============================================================
   Step form — one question per screen
   The single long form asked for everything at once, which is the
   moment most people leave. One question fills the screen, so each
   answer costs almost nothing and the momentum carries them.
   ============================================================= */
.sf-wrap { min-height: 74svh; display: grid; align-content: center; max-width: 46rem; }
.sf-prog { height: 2px; background: rgba(255,255,255,.06); border-radius: 2px; margin-bottom: clamp(2.4rem,7vw,4rem); }
.sf-prog i { display: block; height: 100%; width: 0%; background: var(--gold); border-radius: 2px;
             transition: width .55s var(--ease-out); }

.sf-step { display: none; }
.sf-step.is-on { display: block; animation: sfIn .5s var(--ease-out) both; }
@keyframes sfIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sf-q { display: flex; gap: .9rem; align-items: baseline; margin-bottom: .5rem; }
.sf-num { flex: none; font-size: .95rem; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.sf-num::after { content: " →"; opacity: .5; }
.sf-q h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 5.4vw, 2.35rem); line-height: 1.16; letter-spacing: -.035em;
}
.sf-q h2 .opt { color: var(--dim); font-weight: 500; font-size: .55em; letter-spacing: -.01em; }
.sf-help { color: var(--muted); font-size: .97rem; margin: 0 0 1.6rem calc(.95rem + .9rem); max-width: 34rem; }

/* Bare field with a gold rule under it — the input is the only lit thing on screen. */
.sf-field { margin-left: calc(.95rem + .9rem); }
.sf-field input, .sf-field textarea {
  width: 100%; background: transparent; border: 0; outline: 0; color: var(--text);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 3.6vw, 1.6rem); padding: .5rem 0 .8rem;
  border-bottom: 2px solid rgba(201,169,97,.35);
  transition: border-color .35s var(--ease-out);
  resize: none;
}
.sf-field textarea { line-height: 1.5; }
.sf-field input::placeholder, .sf-field textarea::placeholder { color: var(--dim); font-weight: 400; }
.sf-field input:focus, .sf-field textarea:focus { border-bottom-color: var(--gold); }

/* Lettered choices, panels not outlines — the no-lines rule still holds. */
.sf-opts { margin-left: calc(.95rem + .9rem); display: grid; gap: .7rem; max-width: 34rem; }
.sf-opt { position: relative; display: block; cursor: pointer; }
.sf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-opt input + span {
  display: flex; align-items: center; gap: .95rem;
  background: rgba(255,255,255,.045); border-radius: var(--r);
  padding: 1.05rem 1.2rem; font-size: 1.02rem; color: var(--text);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.sf-opt input + span::before {
  content: attr(data-k); flex: none;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(201,169,97,.16); color: var(--gold);
  border-radius: 3px; font-size: .82rem; font-weight: 700;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.sf-opt:hover input + span { background: rgba(255,255,255,.07); }
.sf-opt input:checked + span { background: rgba(201,169,97,.14); }
.sf-opt input:checked + span::before { background: var(--gold); color: var(--on-gold); }
.sf-opt input:focus-visible + span { background: rgba(201,169,97,.1); }

.sf-go { margin: 2rem 0 0 calc(.95rem + .9rem); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sf-hint { font-size: .82rem; color: var(--dim); }
.sf-hint b { color: var(--muted); font-weight: 600; }
.sf-err { margin: .9rem 0 0 calc(.95rem + .9rem); color: #d98b74; font-size: .93rem; }

.sf-nav { display: flex; gap: .4rem; justify-content: flex-end; margin-top: 2.6rem; }
.sf-nav button {
  width: 38px; height: 34px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border-radius: 3px; color: var(--muted);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.sf-nav button:hover:not(:disabled) { background: rgba(201,169,97,.18); color: var(--gold); }
.sf-nav button:disabled { opacity: .3; cursor: default; }
.sf-nav svg { width: 13px; height: 13px; fill: currentColor; }

@media (max-width: 560px) {
  .sf-help, .sf-field, .sf-opts, .sf-go, .sf-err { margin-left: 0; }
  .sf-q { gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-step.is-on { animation: none; }
  .sf-prog i { transition: none; }
}


/* The step form is the page, so the header above it is trimmed hard — the first
   question has to be on screen without scrolling or the format loses its point. */
[data-page="apply"] .page-hero {
  padding-top: clamp(6.5rem, 13vw, 8rem);
  padding-bottom: 0;
}
[data-page="apply"] .page-hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
[data-page="apply"] .page-hero .sec-lead { margin-top: .6rem; font-size: .95rem; }
[data-page="apply"] .msg { padding-block: clamp(2rem, 6vw, 3.5rem); background: transparent; }
[data-page="apply"] .sf-wrap { min-height: 0; }
[data-page="apply"] .sf-prog { margin-bottom: clamp(1.6rem, 5vw, 2.6rem); }
@media (max-width: 560px) {
  [data-page="apply"] .page-hero { padding-top: 6rem; }
  [data-page="apply"] .sf-nav { margin-top: 1.6rem; }
}


/* No clipping mask on the hero: the fade hides the start position, and the
   mask was what re-seated the baseline afterwards — the "pop" under the hero.
   With overflow visible from the first frame the layout never moves. */
.hero-title .split-word {
  overflow: visible; padding-bottom: 0; margin-bottom: 0;
}
/* The accent word simply sits in gold: the ink-wipe was removed along with
   the rest of the headline motion. */
.hero-title-free em { color: var(--gold); }


/* =============================================================
   Sticky apply bar — the competitor's strongest weapon, adapted.
   Mobile/tablet only (desktop keeps the header CTA in view), slides
   up once the hero is behind you, and never fights the menu.
   ============================================================= */
.scta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
  background: rgba(10,10,9,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 40px rgba(0,0,0,.45);
  transform: translateY(110%);
  transition: transform .5s var(--ease-out);
}
.scta.is-on { transform: translateY(0); }
.scta .btn { width: 100%; justify-content: center; }
html.menu-open .scta { transform: translateY(110%); }
/* Follows the burger: the sticky bar is the small-screen substitute for the
   menu, so it retires at the same width the real menu arrives. */
@media (min-width: 900px) { .scta { display: none; } }
@media (max-width: 1039px) {
  body.scta-on .bot-fab { bottom: calc(5.3rem + env(safe-area-inset-bottom)); }
  .bot-fab { transition: bottom .4s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .scta { transition: none; } }

/* Mid-page CTA after the proof block: the reader just saw the work,
   this is the moment to hand them the pen. */
.mid-cta {
  margin-top: clamp(2.8rem, 7vw, 4.2rem); text-align: center;
  display: grid; gap: .8rem; justify-items: center;
}
.mid-cta span { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }


/* While the panel is open the launcher has no job — and on small screens it
   sat exactly on top of the message box. */
.bot-fab[aria-expanded="true"] {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

/* =============================================================
   Ticker — proof marquee right under the hero
   First thing that appears when scrolling starts: real client
   names with real page counts, drifting right, with a pinned
   badge. Separation by panel background, never a stroke.
   ============================================================= */
.ticker {
  position: relative; overflow: hidden;
  background: rgba(10,10,9,.62);
  padding: 1.05rem 0;
  /* long fade on the left so items dissolve under the badge, short on the right */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(150px,22vw,270px), #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(150px,22vw,270px), #000 92%, transparent 100%);
}
.ticker-track {
  display: flex; width: max-content;
  animation: tickRight 30s linear infinite;
}
.ticker-g {
  display: flex; align-items: center; white-space: nowrap;
  gap: 2.8rem; padding-right: 2.8rem;
}
.ticker-g i {
  font-style: normal; font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.ticker-g i b { color: var(--gold); font-weight: 700; letter-spacing: .12em; }
.tick-vf {
  width: 14px; height: 14px; flex: none;
  vertical-align: -2px; display: inline-block; margin: 0 .1rem 0 .05rem;
}
.ticker-g em {
  width: 5px; height: 5px; flex: none;
  background: var(--gold); opacity: .7;
  transform: rotate(45deg);
}
/* moving right: start shifted a full copy left, drift to zero */
@keyframes tickRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.ticker-badge {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--gold); color: var(--on-gold);
  border-radius: 4px; padding: .42rem .8rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 10px 26px -8px rgba(201,169,97,.5);
  white-space: nowrap;
}

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


/* =============================================================
   Showcase carousel — slides sideways with a peek of the next
   site, so five client builds cost the height of one.
   ============================================================= */
.wcar-wrap { position: relative; max-width: 66rem; margin-inline: auto; }
.wcar {
  display: flex; gap: 1.6rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1.4rem .2rem 1.6rem;   /* room for the badge above */
  scrollbar-width: none; -ms-overflow-style: none;
  outline: none;
}
.wcar::-webkit-scrollbar { display: none; }
.wslide {
  position: relative; flex: 0 0 82%;
  scroll-snap-align: center;
}
@media (max-width: 700px) { .wslide { flex-basis: 82%; } }
.wslide .wcar .bframe-badge { top: -1rem; left: .4rem; }

.wnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,10,9,.85); color: var(--gold);
  border: 1px solid var(--line-2); font-size: 1.15rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out),
              opacity .3s var(--ease-out);
}
.wnav:hover { border-color: var(--gold); color: var(--gold-lt); }
.wnav-l { left: -.6rem; }
.wnav-r { right: -.6rem; }
@media (min-width: 1200px) { .wnav-l { left: -3.2rem; } .wnav-r { right: -3.2rem; } }

/* =============================================================
   Home showcase — real client sites in device frames
   The page sells websites and showed none. Screenshots are of the
   LIVE sites and every frame links to the real thing: the honesty
   is that anyone can click and check.
   ============================================================= */
.wshow-stage { position: relative; max-width: 62rem; margin-inline: auto; }

.bframe {
  display: block; background: #141412; border-radius: 12px; overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), 0 8px 40px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.bframe:hover { transform: translateY(-6px);
  box-shadow: 0 80px 140px -50px rgba(0,0,0,.95), 0 12px 50px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.08); }
.bframe-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .72rem 1.1rem; background: #1b1a18;
}
.bframe-dots { flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 17px 0 0 rgba(255,255,255,.14), 34px 0 0 rgba(255,255,255,.14); }
.bframe-url {
  flex: 1; max-width: 22rem; margin-inline: auto;
  text-align: center; font-size: .72rem; letter-spacing: .06em;
  color: var(--muted); background: rgba(255,255,255,.05);
  border-radius: 5px; padding: .3rem .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bframe img { width: 100%; height: auto; display: block; }
.bframe-badge {
  position: absolute; top: -1rem; left: -0.6rem; z-index: 3;
  background: var(--gold); color: var(--on-gold); border-radius: 4px;
  padding: .5rem .95rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 14px 30px -10px rgba(201,169,97,.45);
}


.wshow-row {
  display: grid; gap: 1.4rem; max-width: 62rem;
  margin: clamp(2.2rem, 6vw, 3.4rem) auto 0;
}
@media (min-width: 700px) { .wshow-row { grid-template-columns: 1fr 1fr; } }
.wshow-row .bframe { position: relative; }
.wshow-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .95rem 1.15rem .2rem;
}
.wshow-cap b { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: #fffdf8; }
.wshow-cap span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.wshow-note { text-align: center; color: var(--dim); font-size: .85rem; margin-top: 2.6rem; }

/* ---- Verifiable numbers band ---- */
.proof {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
  max-width: 62rem; margin: clamp(3rem, 8vw, 5rem) auto 0;
}
@media (min-width: 860px) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof-i {
  background: rgba(10,10,9,.62); border-radius: var(--r);
  padding: 1.9rem 1.4rem; text-align: center;
}
.proof-i strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 2.7rem); letter-spacing: -.03em;
  color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1;
}
.proof-i span {
  display: block; margin-top: .6rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ---- Founder note — a person answers for the team ---- */
.founder {
  max-width: 44rem; margin: clamp(3.4rem, 9vw, 5.5rem) auto 0; text-align: center;
}
.founder p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); line-height: 1.55;
  color: var(--text);
}
.founder p b { color: var(--gold); font-weight: 400; }
.founder-sig {
  margin-top: 1.8rem; display: grid; gap: .3rem; justify-items: center;
}
.founder-sig strong {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.9rem; color: var(--gold-lt); letter-spacing: .01em;
}
.founder-sig span {
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}

/* ---- Gold button sheen: felt more than seen ---- */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%;
  width: 45%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,253,245,.42), transparent);
  animation: sheen 5.8s var(--ease-soft) infinite;
}
@keyframes sheen { 0%, 82% { left: -70%; } 100% { left: 145%; } }

/* ---- Cursor glow, desktop only: a faint warm light that follows the mouse ---- */
.glow {
  position: fixed; left: 0; top: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(201,169,97,.05), transparent 65%);
  opacity: 0; transition: opacity .8s ease;
}
.glow.is-live { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-gold::after { animation: none; display: none; }
  .glow { display: none; }
  .bframe { transition: none; }
}
/* Legal pages: long-form reading, wider measure than a marketing section
   but still short enough lines to be comfortable. */
.legal-body { max-width: 46rem; margin-inline: auto; }
.legal-body p { color: var(--muted); font-size: 1.02rem; line-height: 1.85; }
.legal-body p + p { margin-top: 1.15rem; }
.legal-body em { color: var(--gold); font-style: italic; }
body[data-page="legal"] .page-hero h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }


/* ---- Assistant: face + brand mark on the launcher --------------------
   The photo carries the human signal, the gold logo keeps it unmistakably
   Brixel. Falls back to the logo alone if the portrait is missing. */
.bot-fab { position: relative; overflow: visible; }
.bot-fab-face {
  position: absolute; inset: 3px; border-radius: 50%;
  background: #171614 url("assets/img/bot-face.webp") center/cover no-repeat;
  background-image: -webkit-image-set(url("assets/img/bot-face.webp") 1x,
                                      url("assets/img/bot-face@2x.webp") 2x);
  background-image: image-set(url("assets/img/bot-face.webp") 1x,
                              url("assets/img/bot-face@2x.webp") 2x);
  background-size: cover; background-position: center;
  z-index: 1;
}
.bot-fab-logo {
  position: absolute; right: -3px; bottom: -3px; z-index: 2;
  width: 22px; height: 22px; padding: 4px;
  background: var(--bg-2); border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,.6);
}
.bot-dot { z-index: 3; }

/* ---- Typed conversation ---- */

/* Once someone starts typing, the suggestion chips have done their job: they
   fold away so the conversation gets the height instead of fighting for it. */
.bot-chips {
  max-height: 260px; overflow: hidden;
  transition: max-height .45s var(--ease-out), opacity .3s ease,
              padding .45s var(--ease-out);
}


/* =============================================================
   6. Sections — shared
   ============================================================= */
main { position: relative; z-index: 1; }
section { padding-block: clamp(6rem, 14vw, 11rem); position: relative; }
.sec-head { max-width: 50rem; margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.sec-head h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1.4rem; }
.sec-lead { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 42rem; }

/* =============================================================
   7. Hero — full-bleed Miami, heavy dark veil
   ============================================================= */
.hero {
  position: relative;
  min-height: 86vh; min-height: 86svh;
  display: flex; align-items: flex-end;
  padding-top: 6rem; padding-bottom: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
/* --hero-fade is driven by scroll in main.js: the photograph dissolves
   into the marble instead of ending on a hard edge. */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  opacity: calc(1 - var(--hero-fade, 0));
  will-change: opacity;
}
.hero-media img,
.hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  /* The source is a 2.36 panorama. In a tall phone viewport `cover` throws away
     ~83% of the width, and dead-centre keeps the least interesting slice, so
     narrow screens frame on the sun and the towers instead — see the media
     query at the end of this block. */
  filter: saturate(.62) contrast(1.04) brightness(.72);
  /* Fades out from the bottom up, so it melts into the stone. */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.35) 12%, #000 42%);
  mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.35) 12%, #000 42%);
}
/* The still image keeps its slow drift; the video's motion is baked in, so
   layering a CSS zoom on top of it would double the movement. */
.hero-media img {
  transform: scale(1.05);
  animation: heroDrift 32s var(--ease-soft) infinite alternate;
}
@keyframes heroDrift { to { transform: scale(1.11) translate3d(-1%, -.8%, 0); } }

/* Phones and narrow tablets: pan the framing towards the sun so the crop keeps
   the strongest part of the shot rather than a plain slice of mid-skyline. */
@media (max-width: 900px) {
  .hero-media img,
  .hero-media video { object-position: 72% 42%; }
}
/* Below this width index.html serves the portrait cut of both the poster and
   the clip, and those files are already framed on the sun and the towers.
   Panning them again would push the framing straight off the good part. */
@media (max-width: 760px) {
  .hero-media img,
  .hero-media video { object-position: center center; }
}

/* iPhone Low Power Mode blocks autoplay outright, and plenty of visitors browse
   with the battery yellow — they would otherwise meet a dead photograph. The
   element still paints its poster, and a CSS transform is not blocked the way
   playback is, so the hero keeps drifting either way. */
.hero.is-still .hero-video {
  transform: scale(1.05);
  animation: heroDrift 32s var(--ease-soft) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero.is-still .hero-video { animation: none; transform: none; }
}
/* The veil must reach the hero's bottom edge fully transparent. If it ends on
   solid --bg, that opaque strip sits over the fixed marble texture and the
   moment the marble reappears below the hero it reads as a hard line. */
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, transparent 0%, rgba(10,10,9,.72) 9%, rgba(10,10,9,.9) 26%, rgba(10,10,9,.58) 60%, rgba(10,10,9,.68) 100%),
    radial-gradient(62% 48% at 76% 50%, rgba(201,169,97,.13), transparent 72%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
/* Sized down and widened from the old three-word headline: this one is a full
   sentence, so it needs room to breathe instead of filling the screen. */
.hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 5vw, 4.3rem);
  font-variation-settings: normal;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  /* Wide enough that FREE shares its line with the next word — alone on a line
     it has nothing to sit against and reads as floating. */
  max-width: 30ch;
  margin-bottom: 2rem;
}
.hero-lead {
  color: #cfcabf;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  max-width: 44rem; margin-bottom: 3rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.hero-marks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 2rem; }
.hero-marks li { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.hero-marks li::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--gold); margin-right: .8rem; vertical-align: .3em; }

/* =============================================================
   8. Services
   ============================================================= */
.services { background: transparent; }
.svc-grid { display: grid; gap: 1.1rem; }
.svc {
  position: relative;
  background: rgba(10,10,9,.62);
  padding: 3rem 2.4rem 3.2rem;
  transition: background .6s var(--ease-out);
}
.svc:hover { background: rgba(26,24,21,.78); }
.svc-idx {
  display: block;
  font-size: .7rem; font-weight: 500; letter-spacing: .3em;
  color: var(--gold); margin-bottom: 2rem;
}
.svc h3 { font-size: 1.34rem; margin-bottom: 1rem; letter-spacing: -0.028em; font-weight: 700; }
.svc p { color: var(--muted); font-size: .94rem; }

/* =============================================================
   9. Send-a-message form
   ============================================================= */
.msg { background: rgba(0,0,0,.42); }
.msg-form { max-width: 46rem; margin-inline: auto; display: grid; gap: 1.1rem; text-align: left; }
.msg-row { display: grid; gap: 1.1rem; }
.msg-field { display: block; }
.msg-field > span {
  display: block; margin-bottom: .55rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.msg-field input, .msg-field textarea {
  width: 100%; background: transparent; color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 1rem 1.2rem; font-size: .96rem; font-family: inherit;
  transition: border-color .35s var(--ease-out);
}
.msg-field textarea { resize: vertical; min-height: 8rem; line-height: 1.65; }
.msg-field input:focus, .msg-field textarea:focus { outline: none; border-color: var(--gold); }
.msg-field input::placeholder, .msg-field textarea::placeholder { color: #57544c; }
.msg-form .btn { justify-self: center; margin-top: .6rem; }

/* ---- project brief: visual pickers instead of open questions ---- */
.brief-form { max-width: 52rem; }
.brief-step {
  font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin: 2.6rem 0 .4rem; padding-top: 2.2rem;
}
.brief-step:first-child { margin-top: 0; padding-top: 0; }

.pick-group { display: block; }
.pick-label {
  display: block; margin-bottom: .8rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.pick-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.pick-row-wide { display: grid; gap: .7rem; }
@media (min-width: 620px) { .pick-row-wide { grid-template-columns: repeat(2, 1fr); } }

.pick { position: relative; cursor: pointer; }
.pick input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.pick > .pick-name, .pick-colour, .pick-style {
  display: block; border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .85rem 1.2rem; font-size: .92rem; color: var(--text);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.pick:hover > .pick-name, .pick-colour:hover, .pick-style:hover { border-color: var(--gold); }
.pick input:checked ~ .pick-name { border-color: var(--gold); background: rgba(201,169,97,.1); color: var(--gold); }
/* the colour and style cards carry the border themselves, so highlight the label */
.pick-colour:has(input:checked), .pick-style:has(input:checked) {
  border-color: var(--gold); background: rgba(201,169,97,.08);
}
.pick-colour > .pick-name, .pick-style > .pick-name { border: 0; padding: 0; }

.pick-colour { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; }
.pick-swatch { display: flex; flex: none; border-radius: 4px; overflow: hidden; }
.pick-swatch i { display: block; width: 20px; height: 28px; }
.pick-colour .pick-name { font-size: .88rem; }

.pick-style { text-align: left; padding: 1.1rem 1.3rem; }
.pick-style .pick-name { font-weight: 600; font-size: .96rem; margin-bottom: .3rem; }
.pick-style .pick-desc { display: block; font-size: .86rem; color: var(--muted); }
.pick-style:has(input:checked) .pick-desc { color: var(--text); }

/* At the five-page cap the remaining boxes go quiet rather than vanish, so it
   reads as a limit rather than a bug. */
.pick.is-off { cursor: not-allowed; }
.pick.is-off > .pick-name { opacity: .35; border-color: var(--line); }
.pick-note { margin-top: .8rem; font-size: .84rem; color: var(--muted); }
.pick-note.is-full { color: var(--gold); }

.msg-out { margin-top: 2.5rem; max-width: 46rem; margin-inline: auto; }
.msg-warn {
  border: 1px solid var(--line-2); border-top: 1px solid #b06a4a;
  padding: 1.2rem 1.4rem; font-size: .95rem; text-align: center;
}
.msg-sending {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  border: 1px solid var(--line-2); padding: 1.4rem;
  color: var(--muted); font-size: .96rem;
}
.msg-spin {
  width: 18px; height: 18px; flex: none;
  border: 1px solid var(--line-2); border-top-color: var(--gold);
  border-radius: 50%; animation: msgSpin .9s linear infinite;
}
@keyframes msgSpin { to { transform: rotate(360deg); } }
.msg-warn strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: .6rem; }
.msg-warn p { color: var(--muted); font-size: .93rem; margin-bottom: 1.1rem; }
.msg-warn a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.msg-ok { border: 1px solid rgba(201,169,97,.45); padding: 1.8rem 1.8rem; text-align: center; }
.msg-ok strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-bottom: .7rem; }
.msg-ok p { color: var(--muted); font-size: .93rem; margin-bottom: 1.2rem; }
.msg-ok a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.msg-copy {
  text-align: left; white-space: pre-wrap; word-break: break-word;
  background: rgba(0,0,0,.4); border: 1px solid var(--line);
  padding: 1.1rem 1.2rem; margin-bottom: 1.1rem;
  font-family: inherit; font-size: .88rem; color: var(--muted); line-height: 1.6;
}

@media (min-width: 720px) {
  .msg-row { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   10. Numbers
   ============================================================= */
.numbers { background: transparent; }
.num-grid { display: grid; gap: 1.1rem; }
.num-card { background: rgba(10,10,9,.62); border-radius: var(--r); padding: 3rem 2.4rem; }
.num-fig {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 4.8rem); line-height: 1;
  letter-spacing: -0.05em; margin-bottom: 1.4rem; color: var(--gold);
  font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums;
}
.num-card p { color: var(--muted); font-size: .96rem; }

/* =============================================================
   11. Care
   ============================================================= */
.care { background: rgba(0,0,0,.42); }
.care-grid { display: grid; gap: 1.1rem; }
.care-item { background: rgba(10,10,9,.62); border-radius: var(--r); padding: 2.2rem 2rem; }
.care-item strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.07rem; letter-spacing: -0.022em; margin-bottom: .7rem;
}
.care-item strong::before {
  content: ""; display: inline-block; width: 12px; height: 1px;
  background: var(--gold); margin-right: .75rem; vertical-align: .32em;
}
.care-item p { color: var(--muted); font-size: .92rem; }
.care-note {
  margin-top: 2.4rem; color: var(--muted); font-size: .95rem;
  background: rgba(201,169,97,.05); border-radius: var(--r); padding: 1.2rem 1.4rem;
}

/* =============================================================
   12. Work
   ============================================================= */
.work { background: transparent; }
.work-grid { display: grid; gap: 1.1rem; }
.work-card {
  display: block; background: rgba(10,10,9,.62); border-radius: var(--r); padding: 2.6rem 2.2rem;
  transition: background .5s var(--ease-out);
}
a.work-card:hover { background: rgba(26,24,21,.78); }
.work-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.work-badge {
  font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding: .3rem 0; border: 0;
}
.badge-live { color: var(--gold); }
.badge-live::before { content: "● "; font-size: .5rem; vertical-align: .2em; }
.badge-soon { color: var(--dim); }
.work-card h3 { font-size: 1.32rem; margin-bottom: .5rem; letter-spacing: -0.028em; font-weight: 700; }
.work-place { font-size: .72rem; color: var(--dim); letter-spacing: .16em; text-transform: uppercase; }
.work-tag { color: var(--muted); font-size: .93rem; margin-top: 1rem; }
.work-go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.8rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* =============================================================
   13. About
   ============================================================= */
.about { background: rgba(0,0,0,.55); }
.about-inner { display: grid; gap: 3rem; }
.about-card { display: flex; align-items: center; gap: 1.5rem; }
.about-logo { width: 84px; height: auto; flex: none; }
.about-card h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.about-card .kicker { margin-bottom: .7rem; }
.about-body { display: grid; gap: 1.5rem; max-width: 46rem; }
.about-body p { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.08rem); }
.about-body p:first-child {
  color: var(--text); font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.05rem); line-height: 1.38; letter-spacing: -0.005em;
}

/* =============================================================
   14. FAQ
   ============================================================= */
.faq { background: transparent; }
.faq-list { max-width: 52rem; display: grid; gap: .7rem; }
.faq-item { background: rgba(10,10,9,.55); border-radius: var(--r); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 1.6rem;
  font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.022em;
  transition: color .35s var(--ease-out);
}
.faq-item summary:hover { color: var(--gold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-size: 1.3rem; font-weight: 300; color: var(--gold);
  transition: transform .4s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 1.6rem 1.7rem; color: var(--muted); font-size: .96rem; max-width: 46rem; }

/* =============================================================
   15. Contact + footer
   ============================================================= */
.contact { background: rgba(0,0,0,.42); text-align: center; }
.contact .kicker { margin-bottom: 1.8rem; }
.contact-title { font-size: clamp(2.2rem, 6vw, 4.4rem); margin-bottom: 3.6rem; font-variation-settings: "opsz" 96; letter-spacing: -0.042em; font-weight: 800; }
.contact-lines { display: grid; gap: .9rem; max-width: 38rem; margin-inline: auto; text-align: left; }
.cline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: rgba(10,10,9,.62); border-radius: var(--r); padding: 1.5rem 1.7rem;
  transition: background .4s var(--ease-out);
}
a.cline:hover { background: rgba(26,24,21,.78); }
.cline-k { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.cline-v { font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.36rem); font-weight: 700; letter-spacing: -0.03em; word-break: break-word; }
a.cline:hover .cline-v { color: var(--gold); }
.contact-foot { margin-top: 2.2rem; color: var(--muted); font-size: .93rem; }

.foot { padding-block: 3rem; background: transparent; position: relative; z-index: 1; }
.foot-inner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--dim);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.foot-links a { transition: color .35s var(--ease-out); }
.foot-links a:hover { color: var(--gold); }
.foot-credit { font-size: .72rem; opacity: .6; }
.foot-credit a { text-decoration: underline; }

/* =============================================================
   16. Chatbot
   ============================================================= */
.bot { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 200; }

.bot-fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 12px 34px -14px rgba(0,0,0,.9);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.bot-fab:hover { transform: translateY(-2px); border-color: var(--gold); }
.bot-fab-logo { width: 30px; height: auto; }
.bot-dot {
  position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg);
  animation: botPulse 2.6s var(--ease-soft) infinite;
}
@keyframes botPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }

.bot-panel {
  position: absolute; right: 0; bottom: 74px;
  width: min(370px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.95);
  display: flex; flex-direction: column;
  max-height: min(560px, calc(100dvh - 130px));
}
/* ⚠️ MUST come after the display:flex rule. Author styles beat the browser's
   [hidden]{display:none}, so without this the panel never actually closes. */
.bot-panel[hidden] { display: none; }

.bot-head-face {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: #171614 url("assets/img/bot-face.webp") center/cover no-repeat;
}
.bot-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.bot-head strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.022em; }
.bot-head span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.bot-head span::before { content: "● "; font-size: .5rem; vertical-align: .2em; }
.bot-close {
  font-size: 1.6rem; line-height: 1; color: var(--muted);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.bot-close:hover { color: var(--text); border-color: var(--line-2); }

/* min-height:0 is what lets a flex child actually shrink. Without it the log
   refuses to give ground and pushes the input row outside the clipped panel. */
.bot-log {
  padding: 1.3rem; overflow-y: auto;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: .7rem;
}
.bot-msg { max-width: 88%; padding: .8rem 1rem; font-size: .91rem; line-height: 1.6; border-radius: var(--r); }
.bot-msg-bot { background: var(--surface-2); border: 1px solid var(--line); align-self: flex-start; }
.bot-msg-user { background: var(--gold); color: var(--on-gold); align-self: flex-end; font-weight: 500; }
.bot-msg a { color: var(--gold); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.bot-typing { display: inline-flex; gap: .3rem; padding-block: .25rem; }
.bot-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); animation: botTyping 1.1s ease-in-out infinite; }
.bot-typing i:nth-child(2) { animation-delay: .15s; }
.bot-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes botTyping { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.bot-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .55rem; padding: 1.1rem 1.3rem 1.3rem; }
.bot-chip {
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .55rem 1rem; font-size: .82rem; color: var(--text);
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.bot-chip:hover { border-color: var(--gold); color: var(--gold); }
.bot-chip-cta { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 500; }
.bot-chip-cta:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--on-gold); }

/* =============================================================
   17. Responsive
   ============================================================= */
/* Uppercase + letterspacing makes the long CTA wider than a small phone.
   Let it stack and wrap rather than push the page sideways. */
@media (max-width: 539px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; white-space: normal; text-align: center; }
  .msg-form .btn { width: 100%; justify-content: center; white-space: normal; }
}

@media (min-width: 720px) {
  .svc-grid  { grid-template-columns: repeat(2, 1fr); }
  .num-grid  { grid-template-columns: repeat(3, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .care-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid  { grid-template-columns: repeat(3, 1fr); }
  .next-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-lines { max-width: 44rem; }
}
@media (min-width: 960px) {
  .svc-grid  { grid-template-columns: repeat(3, 1fr); }
  .svc-wide  { grid-column: span 3; }
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .care-grid { grid-template-columns: repeat(3, 1fr); }
  .about-inner { grid-template-columns: 1fr 1.4fr; gap: 4.5rem; align-items: start; }
}

/* =============================================================
   17a. Multi-page shell
   ============================================================= */
/* Compact hero for the inner pages — marble ground instead of the photograph,
   so they stay light and the identity still carries. */
.page-hero {
  padding-top: clamp(8rem, 16vw, 11rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.04em;
  max-width: 20ch; margin-inline: auto;
}
.page-hero .sec-lead { margin-top: 1.4rem; }

/* The word people scan for. Oversized on purpose — but it has to sit on the
   same writing line as the rest, so it stays a plain inline box on the normal
   baseline. Instrument Serif sits slightly low against Bricolage at this size,
   so a small nudge up puts the two back on the same rule. */
.hero-title-free em {
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: 1.4em;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  top: -0.045em;
}

/* Contextual links inside body copy — the internal linking that ties the
   pages together. */
.ilink {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .3s var(--ease-out);
}
.ilink:hover { color: var(--gold-lt); }

/* Next-step cards at the foot of every inner page. */
.next-grid { display: grid; gap: 1.1rem; }
.next-card {
  display: block; background: rgba(10,10,9,.62); border-radius: var(--r); padding: 2rem 1.8rem;
  transition: background .5s var(--ease-out);
  text-align: center;
}
.next-card:hover { background: rgba(26,24,21,.78); }
.next-card strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.14rem; letter-spacing: -0.025em; margin-bottom: .6rem;
}
.next-card p { color: var(--muted); font-size: .93rem; margin-inline: auto; }
.next-card span { display: inline-block; margin-top: 1rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* Footer sitemap — every page reachable from every page. */
.foot-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.6rem;
  padding-bottom: 1.8rem; margin-bottom: 1.8rem;
}
.foot-nav a {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); transition: color .3s var(--ease-out);
}
.foot-nav a:hover { color: var(--gold); }

/* =============================================================
   17b. Free-website page blocks
   ============================================================= */
.why { background: rgba(0,0,0,.42); }

/* The affiliate disclosure. The FTC requires this to be impossible to miss and
   sitting next to the offer — never shrunk into a footer. Hence the gold frame. */
.disclosure {
  max-width: 46rem; margin: 0 auto 3rem;
  border-radius: var(--r);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: rgba(201,169,97,.075);
}
.disclosure p { max-width: none; font-size: 1.02rem; color: var(--ink, var(--muted)); color: var(--muted); }
.disclosure p + p { margin-top: 1.1rem; }
.disclosure strong { color: var(--text); font-weight: 600; }
.disclosure-key {
  background: rgba(201,169,97,.06); border-radius: var(--r); padding: 1.1rem 1.3rem;
  color: var(--text) !important; font-size: 1.08rem !important;
}
.why-grid { display: grid; gap: 1.1rem; }
@media (min-width: 820px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card {
  background: rgba(10,10,9,.62); border-radius: var(--r);
  padding: 2.2rem 2rem;
}
.why-card strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: -0.022em; color: #fffdf8;
  margin-bottom: .8rem; line-height: 1.3;
}
.why-card p { color: var(--muted); font-size: .96rem; }

.scope {
  margin-top: 2.6rem; max-width: 46rem; margin-inline: auto;
  padding-top: 0;
}
.scope h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.scope p { color: var(--muted); font-size: .96rem; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   The teaser and the showcase get their own voice.
   Archivo at expanded width reads wide and institutional — the opposite of
   Bricolage's tight display face — so the paid tier is recognisable at a glance
   even before you've read a word of it.
   --------------------------------------------------------------------------- */
.scale-teaser h2,
.showcase-figure strong,
.showcase-body h3 {
  font-family: var(--display-alt);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  letter-spacing: -0.012em;
}
/* The serif accent stays serif — it is the thread that ties the pages together. */
.scale-teaser h2 em {
  font-family: var(--serif);
  font-variation-settings: normal;
  font-weight: 400;
}
.scale-teaser .kicker,
.showcase-figure span {
  font-family: var(--display-alt);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
}

/* One project, shown properly: the page count is the headline, not a footnote. */
.showcase { max-width: 46rem; margin-inline: auto; }
.showcase-card {
  display: grid; gap: 0; overflow: hidden; border-radius: var(--r);
  background: rgba(10,10,9,.62);
  transition: border-color .45s var(--ease-out), transform .45s var(--ease-out);
}
.showcase-card:hover { background: rgba(26,24,21,.8); transform: translateY(-3px); }
.showcase-figure {
  display: grid; place-content: center; text-align: center;
  padding: 2.6rem 1.5rem;
  background: rgba(201,169,97,.07);
}
/* font-family is set in the Big builds typography block above — leaving it out
   here stops this later rule from quietly overriding it back to Bricolage. */
.showcase-figure strong {
  display: block;
  font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.showcase-figure span {
  display: block; margin-top: .5rem;
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.showcase-body { padding: 2.2rem 2rem; text-align: center; }
.showcase-body h3 { font-size: 1.5rem; margin: .9rem 0 .8rem; letter-spacing: -0.03em; }
.showcase-body p { color: var(--muted); font-size: .97rem; margin-inline: auto; }
@media (min-width: 700px) {
  .showcase-card { grid-template-columns: 15rem 1fr; }

  .showcase-body { text-align: left; }
  .showcase-body p { margin-inline: 0; }
}

/* The paid tier gets its own darker band so it reads as a different offer
   rather than more of the free one. */
.scale-teaser {
  background: rgba(0,0,0,.42);
}

.reviews { background: transparent; }

/* The page count is the strongest thing on these cards, so it gets the gold
   and its own rule rather than sitting inside the paragraph. */
.work-count {
  display: block; margin-top: 1.1rem; padding-top: .4rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.work-count strong {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -0.03em; color: var(--gold);
  display: block; margin-bottom: .25rem;
  font-variant-numeric: tabular-nums;
}
.work-flag { background: rgba(201,169,97,.06); }
.review-slot {
  margin-top: 2.6rem; max-width: 42rem; margin-inline: auto;
  background: rgba(10,10,9,.5); border-radius: var(--r); padding: 1.8rem;
  display: grid; gap: 1.2rem; justify-items: center;
}
/* Grid items centre at max-content width, which overflows narrow screens
   unless they are clamped. */
.review-slot > * { max-width: 100%; }
.review-slot p { color: var(--muted); font-size: .98rem; }
.review-slot .btn { white-space: normal; text-align: center; }

/* A real Google review, once there are any. Keep the markup, fill the content. */
.review {
  background: rgba(10,10,9,.62); border-radius: var(--r); padding: 2rem 1.9rem;
}
.review-stars { color: var(--gold); letter-spacing: .18em; font-size: .9rem; margin-bottom: 1rem; }
.review blockquote {
  margin: 0 0 1.2rem; font-family: var(--serif); font-style: italic;
  font-size: 1.14rem; line-height: 1.5; color: var(--text);
}
.review-who { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.extras { background: rgba(0,0,0,.42); }
.scroll-x { overflow-x: auto; max-width: 46rem; margin-inline: auto; }
.price-table { width: 100%; border-collapse: collapse; min-width: 28rem; }
.price-table th {
  text-align: left; padding: .9rem 1rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim);
}
.price-table th:last-child, .price-table td:last-child { text-align: right; }
.price-table td {
  padding: 1.05rem 1rem;
  color: var(--muted); font-size: .95rem; vertical-align: top;
}

.price-table td.num {
  color: var(--gold); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-table td.num span { color: var(--dim); font-weight: 400; font-size: .82rem; }

/* =============================================================
   18. Centred layout
   Alignment is a cross-cutting concern, so it lives in one block
   rather than scattered through every component above.
   ============================================================= */
.hero-inner { text-align: center; }
.hero-title, .hero-lead { margin-inline: auto; }
.hero-cta, .hero-marks { justify-content: center; }

.sec-head { text-align: center; margin-inline: auto; }
.sec-lead { margin-inline: auto; }

.svc, .num-card, .care-item, .review { text-align: center; }
.scope, .disclosure { text-align: center; }
/* The key disclosure line sits in its own tinted panel, so it stays left-aligned
   inside — a centred block of bold text is harder to read than a left-aligned one. */
.disclosure-key { text-align: left; }
/* The little gold dash reads as a bullet when left-aligned; centred it becomes
   a rule above the label instead. */
.care-item strong::before {
  display: block; margin: 0 auto .7rem; width: 20px;
}

.work-card { text-align: center; }
.work-top { flex-direction: column; gap: .6rem; align-items: center; }

/* The form keeps its labels left-aligned — centred form fields are hard to scan. */
.msg-form { text-align: left; }

.care-note {
  text-align: center; margin-inline: auto; max-width: 46rem;
  padding-top: 1.3rem;
}

.about-inner { text-align: center; }
.about-card { flex-direction: column; gap: 1.1rem; }
.about-body { margin-inline: auto; }

.faq-list { margin-inline: auto; }
.faq-item summary { justify-content: center; position: relative; padding-inline: 2.5rem; }
.faq-item summary::after { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { text-align: center; margin-inline: auto; }

/* Key above value, both centred — reads better than a split row once the rest
   of the page is centred. */
.cline { flex-direction: column; align-items: center; gap: .45rem; text-align: center; }

.foot-inner { justify-content: center; text-align: center; }

@media (min-width: 960px) {
  /* Two columns fight a centred layout, so About becomes one centred stack. */
  .about-inner { grid-template-columns: 1fr; max-width: 52rem; margin-inline: auto; gap: 2.4rem; }
}

/* =============================================================
   19. Big builds page
   The only page selling a paid product, so it is allowed to be louder
   than the rest of the site — but with the same vocabulary: panels and
   space, never a stroke.
   ============================================================= */
.bb-hero { padding: clamp(7rem, 15vw, 11rem) 0 clamp(3.5rem, 8vw, 6rem); position: relative; text-align: center; }
/* A single warm bloom behind the headline. It is what stops the top of the page
   reading as flat black now that there are no rules to break up the space. */
.bb-hero::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 0; width: min(78rem, 130vw); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 40%, rgba(201,169,97,.16), transparent 70%);
  pointer-events: none;
}
.bb-hero h1 {
  font-size: clamp(2.9rem, 9vw, 6.6rem); letter-spacing: -0.045em;
  max-width: 20ch; margin: 0 auto .4rem;
}
.bb-hero .sec-lead { margin-top: 1.8rem; font-size: 1.06rem; max-width: 44rem; }

/* The proof line, straight under the headline. Real figures, no adjectives. */
.bb-stats {
  display: grid; gap: 1.1rem; margin-top: clamp(3rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}
.bb-stat { background: rgba(10,10,9,.62); border-radius: var(--r); padding: 2.1rem 1.4rem; }
.bb-stat strong {
  display: block; font-family: var(--display-alt); font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.bb-stat span {
  display: block; margin-top: .7rem;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

/* ---- The size dial -------------------------------------------------------
   The whole argument of this page is "there is no ceiling", and a number you
   can move yourself makes that land in a way a sentence does not. */
.bb-dial {
  background: rgba(10,10,9,.66); border-radius: var(--r);
  padding: clamp(1.8rem, 5vw, 3.2rem); max-width: 56rem; margin-inline: auto;
  text-align: center;
}
.bb-dial-read { display: flex; align-items: baseline; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.bb-dial-read strong {
  font-family: var(--display-alt); font-weight: 800;
  font-size: clamp(3.4rem, 13vw, 6.4rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.bb-dial-read span {
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.bb-dial-canvas { width: 100%; height: clamp(110px, 22vw, 170px); margin: 1.6rem 0 .6rem; display: block; }
.bb-dial-meta { color: var(--muted); font-size: .95rem; min-height: 3em; }
.bb-dial-meta em { font-style: normal; color: var(--text); }
.bb-dial-scale {
  display: block; margin-top: .5rem;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.bb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.8rem; }
/* Filled pills rather than outlined ones — an outline here would read as a line. */
.bb-chip {
  padding: .62rem 1.15rem; border-radius: 999px;
  background: rgba(255,255,255,.055); color: var(--muted);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.bb-chip:hover { background: rgba(255,255,255,.1); color: var(--text); }
.bb-chip[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }

/* The "we don't do that" block. Deliberately typographic rather than another
   panel — after the dial's box, a fourth card would read as more of the same,
   and this needs to land as a statement. */
.bb-nope { max-width: 52rem; margin: clamp(2.6rem, 6vw, 4rem) auto 0; text-align: center; }
.bb-nope-list { list-style: none; padding: 0; display: grid; gap: .55rem; }
.bb-nope-list li {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 4.4vw, 2.3rem); line-height: 1.16;
  letter-spacing: -0.032em; color: #fffdf8;
}
.bb-nope-list em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.005em; color: var(--gold);
}
.bb-nope-yes {
  margin-top: 1.7rem; margin-inline: auto; max-width: 44rem;
  color: var(--muted); font-size: 1.04rem;
}
.bb-nope-yes b { color: var(--text); font-weight: 600; }


/* Thumbnail on each case card: the proof arrives before the number is read. */
.bb-case-shot {
  display: block; margin: -0.4rem 0 1.3rem;
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 26px 50px -26px rgba(0,0,0,.9);
  transition: transform .5s var(--ease-out);
}
.bb-case-shot img { width: 100%; height: auto; display: block; }
.bb-case:hover .bb-case-shot { transform: translateY(-3px); }

/* ---- Case cards ---------------------------------------------------------- */
.bb-cases { display: grid; gap: 1.1rem; }
.bb-case {
  display: block; background: rgba(10,10,9,.62); border-radius: var(--r);
  padding: clamp(1.9rem, 4vw, 2.6rem); text-align: center;
  transition: background .5s var(--ease-out), transform .5s var(--ease-out);
}
a.bb-case:hover { background: rgba(26,24,21,.8); transform: translateY(-3px); }
.bb-case-fig {
  font-family: var(--display-alt); font-weight: 800;
  font-size: clamp(3.2rem, 10vw, 4.6rem); line-height: 1;
  letter-spacing: -0.035em; color: var(--gold);
  font-variant-numeric: tabular-nums; display: block;
}
.bb-case-fig span {
  display: block; margin-top: .5rem;
  font-family: var(--sans); font-weight: 400;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.bb-case h3 { font-size: 1.5rem; letter-spacing: -0.03em; margin: 1.5rem 0 .3rem; }
/* a network handed to its owner is finished work, not a dead link */
.hp-slide-off { cursor: default; }
.hp-slide-off .hp-slide-shot img { filter: saturate(.8) brightness(.94); }
.bb-case-off { cursor: default; }
.bb-case-off .bb-case-shot img { filter: saturate(.82) brightness(.94); }
.work-badge.badge-handed { color: var(--gold-lt); background: rgba(201,169,97,.16); }
@media (min-width: 720px) { .bb-cases-two { grid-template-columns: repeat(2, 1fr); } }

.bb-case-where {
  display: block; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 1rem;
}
.bb-case p { color: var(--muted); font-size: .96rem; max-width: 34rem; margin-inline: auto; }
.bb-case-facts { display: grid; gap: .55rem; margin-top: 1.5rem; }
.bb-case-facts div { font-size: .9rem; color: var(--muted); }
.bb-case-facts b { color: var(--text); font-weight: 600; }
.bb-case-go {
  display: inline-block; margin-top: 1.5rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.bb-case-soon {
  display: inline-block; margin-top: 1.5rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}

/* ---- Promises ------------------------------------------------------------ */
.bb-promises { display: grid; gap: 1.1rem; }
.bb-promise { background: rgba(10,10,9,.62); border-radius: var(--r); padding: 2.2rem 2rem; text-align: center; }
.bb-promise strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.2rem; letter-spacing: -0.028em; margin-bottom: .7rem; color: #fffdf8;
}
.bb-promise p { color: var(--muted); font-size: .95rem; max-width: 34rem; margin-inline: auto; }
/* The one thing we refuse to promise, said plainly. Sitting in gold makes the
   honesty read as confidence rather than as a disclaimer. */
.bb-honest {
  margin-top: 1.1rem; background: rgba(201,169,97,.075); border-radius: var(--r);
  padding: clamp(1.6rem, 4vw, 2.2rem); max-width: 46rem; margin-inline: auto; text-align: center;
}
.bb-honest strong { display: block; color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 1.15rem; margin-bottom: .7rem; letter-spacing: -0.025em; }
.bb-honest p { color: var(--text); font-size: 1rem; }

@media (min-width: 620px) {
  .bb-stats { grid-template-columns: repeat(3, 1fr); }
  .bb-promises { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .bb-cases { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   20. Reduced motion — only the intrusive
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; transform: scale(1.03); }
  .bot-dot { animation: none; }
  .hero-media img { animation: none; }
}

/* Headlines are static by request: the hero text is simply there on load.
   Section reveals, the ticker and the carousel keep their motion. */
.hero-title, .hero-title *, .bb-hero h1, .bb-hero h1 * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}
.hero-title-free em {
  color: var(--gold) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}


/* In the hero it sits under the marks, a touch brighter. */
.hero .tp-badge { margin-top: 1.6rem; background: rgba(10,10,9,.5); }


/* The ticker is a seam between two sections, not a section of its own: the
   hero's bottom padding and the next section's top padding were leaving it
   marooned in a sea ofempty space. Pull both in. */
.hero + .ticker { margin-top: calc(-1 * clamp(2rem, 5vw, 4rem)); }
.ticker + section { padding-top: clamp(3rem, 7vw, 5rem); }

/* Four proof marks stack one-per-line on a phone, which is a lot of height
   for four short strings. Two by two reads in one glance. */
@media (max-width: 700px) {
  .hero-marks {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .75rem 1.1rem;
  }
  .hero-marks li { font-size: .7rem; letter-spacing: .1em; line-height: 1.35; }
  .hero-marks li::before { width: 10px; margin-right: .5rem; }
}

/* =============================================================
   Award seal — laurels instead of a chip
   A dark panel read as a label stuck on the page. Laurels in
   champagne, no background at all, so the proof floats on the
   marble and reads as an award rather than a badge.
   ============================================================= */
.seal {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, 2vw, 1.1rem);
  margin: 0 auto 1.7rem; width: fit-content;
  color: var(--gold);
}
.seal .lau { height: clamp(46px, 9vw, 62px); width: auto; flex: none; }
.seal .lau-r { transform: scaleX(-1); }
.seal-mid { display: grid; justify-items: center; gap: .3rem; }
.seal .tp-stars { display: inline-flex; gap: 3px; }
.seal .tp-stars i {
  width: 14px; height: 14px; background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.seal-a {
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-lt); white-space: nowrap;
}
.seal-b { font-size: .7rem; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.seal-b b { color: var(--text); font-weight: 700; }
.seal-sm .lau { height: 42px; }

@media (max-width: 460px) {
  .seal { gap: .35rem; }
  .seal-a { font-size: .58rem; letter-spacing: .12em; }
  .seal-b { font-size: .62rem; }
  .seal .tp-stars i { width: 11px; height: 11px; }
}

/* The seal is the first thing under the bar, so it carries the top spacing:
   the hero used to leave a long empty stretch of photograph above it. */
.hero .seal { margin-top: .25rem; }
@media (max-width: 700px) {
  .hero { min-height: 82vh; min-height: 82svh; padding-top: 5rem; }
}

/* Trustpilot keeps its own green: the stars are the recognisable part, and a
   gold version of them stops reading as Trustpilot at all. */
.seal .tp-stars i { background: #00b67a; }
.tp-mark {
  display: inline-flex; align-items: center; gap: .22em;
  font-family: var(--sans);
  font-weight: 700; letter-spacing: -0.01em; text-transform: none;
  font-size: 1.16em; color: #fffdf8; vertical-align: -.06em;
}
.tp-i {
  width: .95em; height: .95em; flex: none; background: #00b67a;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.seal-a { display: inline-flex; align-items: center; gap: .45em; flex-wrap: wrap; justify-content: center; }


@media (max-width: 760px) {
  .wslide { flex-basis: 88%; }
}
/* not a link any more, so no pointer affordance */
.wcar .bframe { cursor: default; }

/* The chat is a set of questions now, so the buttons are the interface rather
   than a hint under a text field. They get room to breathe and to wrap. */
.bot-chips {
  max-height: 42%; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
}
.bot-chips::-webkit-scrollbar { width: 4px; }
.bot-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
.bot-note {
  flex: 0 0 auto; margin: 0; padding: .5rem 1.3rem .1rem;
  font-size: .74rem; letter-spacing: .02em; color: var(--gold);
  opacity: .85;
}

/* Start over. Sits beside the close cross and shares its weight, so the header
   reads as two quiet controls rather than one loud one. */
.bot-restart {
  margin-left: auto; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--dim); cursor: pointer;
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.bot-restart svg { width: 15px; height: 15px; fill: currentColor; }
.bot-restart:hover { color: var(--gold); background: rgba(255,255,255,.06); }
.bot-head .bot-close { margin-left: .1rem; }

/* Header. With the restart control added there is one line less of room, so
   the status text stops shouting in caps and stays on a single line. */
.bot-head > div { min-width: 0; flex: 1 1 auto; }
.bot-head > div span {
  display: block; text-transform: none; letter-spacing: .01em;
  font-size: .72rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bot-head > div strong { display: block; line-height: 1.2; }
/* Buttons keep more of the panel for the answer itself. */
.bot-chips { max-height: 38%; }




/* =============================================================
   For locksmiths only — the page that sells the big build.
   Same world as the rest of the site: gold on near-black, light
   from radial glows, depth from shadow. Not one visible line.
   ============================================================= */
.lk-hero {
  padding: clamp(7rem, 16vh, 11rem) 0 clamp(3rem, 7vh, 5rem);
  background:
    radial-gradient(58% 42% at 50% 0%, rgba(201,169,97,.13), transparent 70%),
    radial-gradient(40% 30% at 82% 18%, rgba(201,169,97,.05), transparent 70%),
    var(--bg);
  text-align: center;
}
.lk-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 7.2vw, 4.9rem); line-height: 1.06;
  letter-spacing: -0.01em; margin: 1.1rem 0 1.2rem;
}
.lk-title em { color: var(--gold); font-style: italic; }
.lk-lead { max-width: 34rem; margin: 0 auto 2rem; color: var(--muted); font-size: clamp(1.02rem, 2.4vw, 1.2rem); }
.lk-cta-row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

.lk-stats { padding: clamp(2.4rem, 6vh, 4rem) 0; background: var(--bg-2); }
.lk-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem); text-align: center;
}
@media (max-width: 760px) { .lk-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.lk-stat strong {
  display: block; font-family: var(--display-alt);
  font-variation-settings: "wdth" 118, "wght" 780;
  font-size: clamp(2.1rem, 5.6vw, 3.6rem); color: var(--gold);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.lk-stat span { display: block; margin-top: .5rem; color: var(--dim); font-size: .82rem; letter-spacing: .04em; }

.lk-grid-sec { padding: clamp(4rem, 10vh, 7rem) 0; background: var(--bg); }
.lk-sub { max-width: 40rem; color: var(--muted); margin: .9rem auto 0; }
.lk-grid-sec .sec-head, .lk-night .sec-head, .lk-gear .sec-head, .lk-proof .sec-head { text-align: center; }
.lk-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.6vw, 1.8rem); align-items: stretch;
  max-width: 62rem; margin: clamp(2rem, 5vh, 3.2rem) auto 0;
}
@media (max-width: 760px) { .lk-compare { grid-template-columns: 1fr; } }
.lk-side {
  border-radius: 14px; padding: 1.6rem 1.5rem 1.5rem; text-align: center;
  background: var(--surface);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.lk-side-us { background: linear-gradient(170deg, #181611, #121110 62%); }
.lk-side-tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lk-tag-gold { color: var(--gold); }
.lk-map { width: 100%; height: auto; flex: 1; border-radius: 10px; box-shadow: 0 24px 60px -34px rgba(0,0,0,.95); }
.lk-side-fig {
  font-family: var(--display-alt); font-variation-settings: "wdth" 118, "wght" 780;
  font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.lk-fig-gold { color: var(--gold); }
.lk-side-note { color: var(--muted); font-size: .84rem; }
.lk-oneline {
  text-align: center; margin: clamp(2.2rem, 5vh, 3.4rem) auto 0;
  font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--text);
}
.lk-oneline em { color: var(--gold); }

.lk-night {
  padding: clamp(4rem, 10vh, 7rem) 0;
  background:
    radial-gradient(50% 36% at 50% 8%, rgba(120,140,190,.08), transparent 70%),
    var(--bg-2);
}
.lk-clock {
  display: block; font-family: var(--display-alt);
  font-variation-settings: "wdth" 120, "wght" 800;
  font-size: clamp(3.4rem, 11vw, 6.5rem); line-height: 1; color: var(--gold);
  margin-bottom: .8rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(201,169,97,.35);
}
.lk-chat { max-width: 30rem; margin: clamp(2rem, 5vh, 3rem) auto 0; display: grid; gap: .8rem; }
.lk-msg { max-width: 86%; padding: .85rem 1.05rem .6rem; border-radius: 16px; }
.lk-msg p { margin: 0; font-size: .95rem; line-height: 1.45; }
.lk-msg time { display: block; margin-top: .3rem; font-size: .68rem; color: var(--dim); letter-spacing: .04em; }
.lk-msg-in  { justify-self: start; background: var(--surface-2); border-bottom-left-radius: 5px; }
.lk-msg-out { justify-self: end; background: linear-gradient(160deg, #2a2415, #1e1a10); border-bottom-right-radius: 5px; }
.lk-msg-out b { color: var(--gold-lt); }
/* the chat plays itself as the block reveals */
.lk-chat .lk-msg, .lk-chat .lk-booked { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.lk-chat.is-in .lk-msg:nth-child(1) { transition-delay: .15s; }
.lk-chat.is-in .lk-msg:nth-child(2) { transition-delay: .75s; }
.lk-chat.is-in .lk-msg:nth-child(3) { transition-delay: 1.4s; }
.lk-chat.is-in .lk-msg:nth-child(4) { transition-delay: 2.0s; }
.lk-chat.is-in .lk-booked         { transition-delay: 2.8s; }
.lk-chat.is-in .lk-msg, .lk-chat.is-in .lk-booked { opacity: 1; transform: none; }
.lk-booked {
  display: flex; gap: .9rem; align-items: center;
  margin-top: .6rem; padding: 1rem 1.2rem; border-radius: 12px;
  background: linear-gradient(160deg, rgba(201,169,97,.16), rgba(201,169,97,.05));
  box-shadow: 0 18px 44px -24px rgba(201,169,97,.35);
}
.lk-booked-dot { width: 10px; height: 10px; border-radius: 50%; background: #58c96b; box-shadow: 0 0 12px rgba(88,201,107,.8); flex: none; }
.lk-booked strong { display: block; font-size: .95rem; }
.lk-booked span { color: var(--muted); font-size: .8rem; }


.lk-pure { padding: clamp(4rem, 9vh, 6.5rem) 0; background: var(--bg); }
.lk-race { max-width: 44rem; margin: clamp(2rem, 5vh, 3rem) auto 0; display: grid; gap: 1.6rem; }
.lk-lane-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .55rem; }
.lk-lane-head strong { font-size: .98rem; }
.lk-lane-time { font-family: var(--display-alt); font-variation-settings: "wdth" 118, "wght" 760; font-size: 1.25rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.lk-time-gold { color: var(--gold); }
.lk-track { height: 14px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.lk-bar { display: block; height: 100%; width: 0; border-radius: 99px; }
.lk-bar-us { background: linear-gradient(90deg, var(--gold-dp), var(--gold-lt)); box-shadow: 0 0 18px rgba(201,169,97,.5); }
.lk-bar-them { background: rgba(255,255,255,.18); }
.lk-race.is-in .lk-bar-us   { animation: lkRace .5s .3s var(--ease-out) forwards; }
.lk-race.is-in .lk-bar-them { animation: lkRace 4.7s .3s linear forwards; }
@keyframes lkRace { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .lk-race.is-in .lk-bar-us, .lk-race.is-in .lk-bar-them { animation: none; width: 100%; } }
.lk-lane-note { display: block; margin-top: .5rem; color: var(--dim); font-size: .82rem; }

.lk-gear { padding: clamp(4rem, 9vh, 6rem) 0; background: var(--bg); }
.lk-chips { list-style: none; padding: 0; max-width: 52rem; margin: clamp(1.8rem, 4vh, 2.6rem) auto 0; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.lk-chips li {
  padding: .68rem 1.15rem; border-radius: 999px; font-size: .9rem;
  background: var(--surface-2); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px -18px rgba(0,0,0,.9);
}
.lk-proof { padding: clamp(4rem, 10vh, 7rem) 0; background: var(--bg-2); }
.lk-proof .bb-cases { margin-top: clamp(2rem, 5vh, 3rem); }
.lk-close {
  padding: clamp(4.5rem, 11vh, 8rem) 0;
  background:
    radial-gradient(55% 45% at 50% 100%, rgba(201,169,97,.14), transparent 72%),
    var(--bg);
  text-align: center;
}
.lk-close h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 6vw, 3.6rem); margin: .9rem 0 1rem; }
.lk-close h2 em { color: var(--gold); font-style: italic; }
.lk-close .lk-cta-row { margin-top: 2rem; }

/* Work -> the locksmith page. One wide, quiet, golden door. */
.lk-teaser-sec { padding: clamp(3rem, 7vh, 5rem) 0 0; background: var(--bg-2); }
.lk-teaser-sec .sec-head { text-align: center; }
.lk-teaser {
  display: block; max-width: 46rem; margin: 1.8rem auto 0;
  padding: 1.7rem 2rem; border-radius: 14px; text-decoration: none;
  background: linear-gradient(165deg, #1c1812, #131210 70%);
  box-shadow: 0 30px 70px -38px rgba(201,169,97,.4);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.lk-teaser:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -40px rgba(201,169,97,.55); }
.lk-teaser strong { display: block; color: var(--text); font-size: 1.08rem; line-height: 1.5; font-weight: 600; }
.lk-teaser span { display: inline-block; margin-top: .7rem; color: var(--gold); font-size: .9rem; letter-spacing: .04em; }

/* The line he wanted under the gold map: the promise, in the brand's voice. */
.lk-max {
  text-align: center; margin: clamp(2rem, 5vh, 3rem) auto 0; max-width: 40rem;
  font-family: var(--display-alt);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: clamp(1.6rem, 4.6vw, 2.9rem); line-height: 1.12;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 70px rgba(201,169,97,.34);
}
.lk-max span {
  display: block; margin-top: .5rem;
  font-family: var(--sans); font-variation-settings: normal; font-weight: 500;
  font-size: clamp(.86rem, 2.1vw, 1rem); letter-spacing: .16em;
  color: var(--gold-lt); opacity: .85;
}

/* Big builds: who it is for, then every trade. Cards separated by their own
   ground and shadow, never by a rule. */
.bbc-intro { padding: clamp(3rem, 7vh, 5rem) 0 0; background: var(--bg); }
.bbc-intro .sec-head { text-align: center; }
.bbc-intro .sec-lead { max-width: 44rem; margin-inline: auto; }
.bbc { padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(4rem, 9vh, 6rem); background: var(--bg); }
.bbc-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
@media (min-width: 860px) { .bbc-grid { grid-template-columns: 1fr 1fr; } }
.bbc-group {
  border-radius: 14px; padding: 1.6rem 1.6rem 1.3rem;
  background: linear-gradient(168deg, #16150f, #111110 70%);
  box-shadow: 0 30px 70px -44px rgba(0,0,0,.95);
}
.bbc-head h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.bbc-head p { color: var(--dim); font-size: .86rem; margin: 0 0 1.1rem; }
.bbc-links { display: grid; gap: .1rem; }
.bbc-links a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .62rem .8rem; border-radius: 8px; text-decoration: none;
  color: var(--text); font-size: .95rem;
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.bbc-links a:hover { background: rgba(201,169,97,.1); transform: translateX(3px); }
.bbc-links a:hover span { color: var(--gold-lt); }
.bbc-links i { flex: none; font-style: normal; color: var(--dim); font-size: .76rem; letter-spacing: .04em; }
.bbc-links a:hover i { color: var(--gold); }
.bbc-note { text-align: center; margin-top: 2.2rem; color: var(--muted); font-size: .92rem; }
.bbc-note a { color: var(--gold); }

/* The trades whose customers come to them get the arithmetic, not a map:
   a coverage map would be claiming something untrue about their business. */
.lk-mathgrid {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(.8rem, 2.4vw, 1.8rem);
  max-width: 60rem; margin: clamp(2rem, 5vh, 3rem) auto 0;
}
.lk-mathcell {
  flex: 1 1 13rem; min-width: 11rem; text-align: center;
  padding: 1.6rem 1.2rem; border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 26px 60px -40px rgba(0,0,0,.9);
}
.lk-mathcell-gold { background: linear-gradient(170deg, #1a1711, #121110 65%); }
.lk-mathcell strong {
  display: block; font-family: var(--display-alt);
  font-variation-settings: "wdth" 118, "wght" 780;
  font-size: clamp(2rem, 5.4vw, 3.2rem); line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.lk-mathcell-gold strong { color: var(--gold); }
.lk-mathcell span { display: block; margin-top: .6rem; color: var(--dim); font-size: .82rem; line-height: 1.4; }
.lk-mathx, .lk-mathe {
  flex: none; font-family: var(--display-alt);
  font-variation-settings: "wdth" 110, "wght" 600;
  font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--dim);
}
/* Sibling trades, at the foot of every page: real internal linking. */
.lk-sib { margin-top: 2.4rem; color: var(--dim); font-size: .86rem; line-height: 2; }
.lk-sib a { color: var(--muted); text-decoration: none; }
.lk-sib a:hover { color: var(--gold); }

/* Related trades. Real internal linking, given room to breathe rather than
   crammed into a footer line. */
.lk-rel { padding: clamp(3.5rem, 8vh, 5.5rem) 0; background: var(--bg); }
.lk-rel .sec-head { text-align: center; }
.lk-rel .lk-sub a { color: var(--gold); }
.lk-rel-grid {
  display: grid; gap: clamp(.7rem, 1.8vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 60rem; margin: clamp(1.8rem, 4vh, 2.6rem) auto 0;
}
.lk-rel-card {
  display: block; padding: 1.15rem 1.3rem; border-radius: 12px; text-decoration: none;
  background: linear-gradient(168deg, #17150f, #121110 72%);
  box-shadow: 0 22px 50px -38px rgba(0,0,0,.95);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.lk-rel-card:hover { transform: translateY(-3px); box-shadow: 0 30px 66px -38px rgba(201,169,97,.45); }
.lk-rel-card strong { display: block; color: var(--text); font-size: 1rem; }
.lk-rel-card span { display: block; margin-top: .25rem; color: var(--dim); font-size: .78rem; letter-spacing: .05em; }
.lk-rel-card:hover strong { color: var(--gold-lt); }

/* The two demo films, for trades whose customers come to them. A coverage map
   would be dishonest there; showing the standard of the build is not. */
.lk-demo-grid {
  display: grid; gap: clamp(1rem, 3vw, 1.8rem);
  max-width: 62rem; margin: clamp(2rem, 5vh, 3rem) auto 0;
}
@media (min-width: 820px) { .lk-demo-grid { grid-template-columns: 1fr 1fr; } }
.lk-demo { margin: 0; }
.lk-demo video {
  width: 100%; height: auto; display: block; border-radius: 12px;
  background: #141412;
  box-shadow: 0 40px 90px -46px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
.lk-demo figcaption {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem .2rem 0; text-align: center;
}
.lk-demo figcaption strong { font-size: .95rem; letter-spacing: .01em; color: var(--fg); }
.lk-demo figcaption span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); opacity: .8; }
/* the grid keeps the trade name alone — the page count next to it was noise */
.bbc-links a i { display: none; }

/* The second strip reaches into the next category, so the six groups are not
   six sealed islands. Quieter than the first: it is a suggestion, not the path. */
.lk-sib-2 { margin-top: .4rem; opacity: .62; font-size: .82rem; }

/* The clip shows the motion; this opens the real page so they can scroll it. */
.lk-demo-link {
  margin-top: .45rem; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  transition: color .25s var(--ease-out);
}
.lk-demo-link:hover { color: var(--gold-lt); }

/* The real client sits in the middle of the reel, between the demos, and the
   page count is the whole point of it being there -- so it is the one caption
   that is allowed to shout. No link: the intro keeps people in the intro. */
.hp-slide-kw .hp-slide-cap span {
  font-size: .95rem; letter-spacing: .01em;
  color: var(--gold-lt); text-shadow: 0 0 18px rgba(198,161,91,.35);
}
.hp-slide-kw .hp-slide-shot { box-shadow: 0 0 0 1px rgba(198,161,91,.28); }
.hp-slide-kw .hp-slide-shot img { filter: none; }