/* ============================================================
   ASHVORN CO. - Design tokens
   ============================================================ */
:root {
  --bg: #0F0F0F;
  --card: #1A1A1A;
  --gold: #C9A84C;
  --text: #F5F5F5;
  --muted: #888888;
  --hairline: #1A1A1A;
  --input-border: #2A2A2A;

  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 4px;

  /* 8px base grid */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s15: 120px;

  --maxw: 1200px;
  --gutter: 24px;
}

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

html {
  scroll-behavior: smooth;
  /* offset so anchored sections clear the sticky nav */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 720px at 50% -6%, rgba(201, 168, 76, 0.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

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

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--s15);
  padding-bottom: var(--s15);
}

/* foundation lines: each section's separator draws in as it arrives */
.section + .section {
  position: relative;
}

.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.35), rgba(201, 168, 76, 0.04));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.seen::before {
  transform: scaleX(1);
}

/* keyboard focus in brand gold: visible, never loud */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Signature element: gold rule above heading */
.eyebrow-rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 0 0 12px 0;
}

.section-heading {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  max-width: 16ch;
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(15, 15, 15, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  height: 30px;
  width: auto;
  display: block;
  overflow: visible;
  transition: filter 200ms ease, transform 200ms ease;
}

.brand:hover .brand-mark {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
}

/* shares .btn/.btn-outline; only nav-scale deltas live here */
.btn.nav-cta {
  height: 44px;
  padding: 0 22px;
  font-size: 0.82rem;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  position: relative;
  padding: 0;
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle span:nth-child(1) { transform: translate(-50%, -6px); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, 6px); }

.nav-toggle.open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-menu {
  display: none;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* veils the thread where the headline runs, clears it on the empty side */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 15, 15, 0.92) 0%, rgba(15, 15, 15, 0.62) 40%, rgba(15, 15, 15, 0.06) 66%, rgba(15, 15, 15, 0) 100%),
    linear-gradient(180deg, rgba(15, 15, 15, 0.45) 0%, transparent 26%, transparent 72%, rgba(15, 15, 15, 0.86) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--s10);
  padding-bottom: var(--s10);
  max-width: 880px;
}

/* depth lives on its own wrapper so it never fights the reveal transition */
.hero-depth {
  position: relative;
  z-index: 1;
  width: 100%;
  transform: translateY(var(--hy, 0px));
  opacity: var(--ho, 1);
}

.hero-kicker {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 20px 0;
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.hero-sub {
  font-family: var(--sans);
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.7;
  margin-top: var(--s3);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}

.btn-outline:hover {
  background: var(--gold);
  color: var(--bg);
}

.btn-fill {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--bg);
}

.btn-fill:hover {
  opacity: 0.88;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-fill:disabled:hover {
  opacity: 0.6;
}

.btn:not(:disabled):active {
  transform: translateY(1px);
}

/* ============================================================
   Services
   ============================================================ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s8);
}

.service-card {
  background: var(--card);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--s5);
  transition: transform 200ms ease, background 200ms ease;
}

.service-card:hover {
  transform: translateY(-4px);
  background: #1E1E1E;
}

.service-card h3 {
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 12px;
  line-height: 1.3;
}

.service-card p {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
}

/* the price floor sits under the cards, where people decide whether this
   is for them. Quiet on purpose: it qualifies, it does not sell. */
.price-note {
  margin-top: var(--s5);
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ============================================================
   How it works
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  margin-top: var(--s8);
}

.step-num {
  color: var(--gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s1);
}

.step h3 {
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
}

.step p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.7;
}

/* ============================================================
   Contact
   ============================================================ */
.contact-sub {
  font-family: var(--sans);
  color: var(--muted);
  max-width: 480px;
  line-height: 1.7;
  margin-top: var(--s3);
}

/* form and reassurance column share the row: no dead space */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: var(--s10);
  align-items: start;
  margin-top: var(--s6);
}

.contact-aside {
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding-top: var(--s1);
}

.aside-label {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* dormant by design: styles the SAMPLE PLAN SLOT in the contact aside,
   which stays commented out until a real written plan exists to show */
.sample-review {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.sample-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid rgba(201, 168, 76, 0.3);
  overflow: hidden;
  background: #141414;
}

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

.form {
  max-width: 560px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 14px 16px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color 200ms ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 15px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field textarea {
  min-height: 100px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #3A3A3A;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

/* invalid state: gold plus a heavier border, never color alone */
.field input.invalid,
.field select.invalid,
.field textarea.invalid {
  border-color: var(--gold);
  border-width: 2px;
  padding: 13px 15px;
}

/* shares .btn/.btn-fill; only form-scale deltas live here */
.submit {
  width: 100%;
  height: 52px;
  letter-spacing: 0.08em;
  margin-top: var(--s1);
}

.form-success {
  font-family: var(--serif);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 560px;
}

.form-error {
  background: var(--card);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
}

.form-error a {
  color: var(--gold);
  text-decoration: underline;
}

.contact-mail {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: var(--s3);
  transition: color 200ms ease;
}

.contact-mail:hover {
  color: var(--gold);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
}

.footer-inner span,
.footer-inner a {
  font-size: 0.8rem;
  color: var(--muted);
}

.footer-inner a {
  transition: color 200ms ease;
}

.footer-inner a:hover {
  color: var(--gold);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand .footer-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: 0.03em;
}

.footer-brand .footer-tagline {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.footer-brand .footer-loc {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ============================================================
   Scroll animation
   ============================================================ */
.will-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.will-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Premium - progress, aurora, brand watermark, stagger
   ============================================================ */

/* thin gold scroll-progress line at the very top edge */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: linear-gradient(90deg, var(--gold), #E3CB7E);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* global dynamic background: subtle drifting grid + breathing gold glows */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.site-bg-grid {
  position: absolute;
  inset: -40px;
  background-image: radial-gradient(rgba(201, 168, 76, 0.07) 1px, transparent 1.6px);
  background-size: 34px 34px;
  animation: grid-drift 38s linear infinite;
}

@keyframes grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 34px, 0); }
}

.site-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.site-bg-glow.one {
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.04) 45%, transparent 68%);
  animation: glow-a 30s ease-in-out infinite;
}

.site-bg-glow.two {
  width: 52vw;
  height: 52vw;
  max-width: 720px;
  max-height: 720px;
  bottom: -16%;
  right: -10%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.11), rgba(201, 168, 76, 0.03) 46%, transparent 70%);
  animation: glow-b 40s ease-in-out infinite;
}

/* the glows breathe as well as drift, so the light never sits still */
@keyframes glow-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(5%, 6%) scale(1.08); }
}

@keyframes glow-b {
  0%, 100% { transform: translate(0, 0) scale(1.06); }
  50%      { transform: translate(-6%, -5%) scale(1); }
}

/* Vignette: pulls the corners down so the centre of the page carries the
   eye. The single most reliable way to make a dark page read as considered
   rather than merely dark. */
.site-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.30) 82%, rgba(0, 0, 0, 0.52) 100%);
}

/* Fine grain. Two jobs: it gives the flat black some tooth, and it breaks
   up the banding that wide gold gradients produce on dark screens. Kept
   low enough that it reads as texture, never as noise. */
.site-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* headings assemble word by word, like courses of stone */
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 500ms ease-out, transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--wi, 0) * 90ms);
}

.will-animate.visible .w {
  opacity: 1;
  transform: none;
}

/* nav arch traces itself in bright gold as the page is scrolled */
.brand-progress {
  fill: none;
  stroke: #E3CB7E;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* off-screen container for the reusable arch symbol */
.arch-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================================
   The thread: one extruded keystone arch, fixed to the viewport,
   carried down the page by a single camera path. Spec and pose
   tables live in HERO_3D_CONCEPT.md. Driven by hero3d.js.
   ============================================================ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* stays hidden until hero3d.js confirms it has something to show */
  display: none;
}

.thread-live .stage {
  display: block;
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* light bloom the arch sits inside; tracks position, never rotates */
.stage-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--aw, 0px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) translate(var(--ax, 0), var(--ay, 0)) scale(1.85);
  background: radial-gradient(circle, rgba(201, 168, 76, 0.20), rgba(201, 168, 76, 0.05) 42%, transparent 68%);
  filter: blur(38px);
  opacity: var(--aopacity, 0);
}

/* contact shadow: grounds the arch so it reads as a solid, not a decal */
.stage-shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--aw, 0px) * 0.86);
  height: calc(var(--aw, 0px) * 0.16);
  transform: translate(-50%, -50%) translate(var(--ax, 0), calc(var(--ay, 0px) + var(--aw, 0px) * 0.40));
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), transparent 70%);
  filter: blur(14px);
  opacity: calc(var(--aopacity, 0) * 0.9);
}

/* the static mark and the hero aurora are the fallback. They stand down
   only once the thread is actually running. */
.thread-live .hero-arch,
.thread-live .hero-aurora {
  display: none;
}

/* ambient dust: gold motes on a slow parallax, always under the text */
.motes {
  position: fixed;
  inset: -10% 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, var(--motesY, 0px), 0);
  will-change: transform;
}

.mote {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: var(--ms);
  height: var(--ms);
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: mote-float var(--md) ease-in-out var(--mdl) infinite;
}

@keyframes mote-float {
  0%   { opacity: 0;         transform: translate3d(0, 12px, 0) scale(0.7); }
  18%  { opacity: var(--mo); }
  82%  { opacity: var(--mo); }
  100% { opacity: 0;         transform: translate3d(var(--mdx), -46px, 0) scale(1.1); }
}

/* content always sits above the thread */
.hero, .section, .footer {
  position: relative;
  z-index: 2;
}

/* slow-drifting gold aurora behind the hero */
.hero-aurora {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
}

.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  width: 54vw;
  height: 54vw;
  max-width: 760px;
  max-height: 760px;
  border-radius: 50%;
  filter: blur(72px);
}

.hero-aurora::before {
  left: -6%;
  top: -14%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.16), transparent 68%);
  animation: drift-a 26s ease-in-out infinite;
}

.hero-aurora::after {
  right: -10%;
  bottom: -20%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.10), transparent 70%);
  animation: drift-b 34s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6%, 7%); }
}

@keyframes drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-7%, -6%); }
}

/* faint brand arch watermark, parallaxed on scroll via --p */
.hero-arch {
  position: absolute;
  z-index: 0;
  right: -5%;
  top: 50%;
  width: min(620px, 58vw);
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  overflow: visible;
  transform: translateY(calc(-50% + var(--p, 0px)));
}

/* signature gold rule draws itself in when its heading reveals */
.will-animate .eyebrow-rule {
  width: 0;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}

.will-animate.visible .eyebrow-rule {
  width: 48px;
}

/* cards land like placed blocks: longer rise, gentle settle */
.reveal-children > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 550ms ease-out, transform 700ms cubic-bezier(0.22, 1.18, 0.36, 1);
}

.reveal-children.visible > * {
  opacity: 1;
  transform: none;
}

.reveal-children.visible > *:nth-child(1) { transition-delay: 80ms; }
.reveal-children.visible > *:nth-child(2) { transition-delay: 220ms; }
.reveal-children.visible > *:nth-child(3) { transition-delay: 360ms; }

/* ============================================================
   Responsive - mobile (designed, not shrunk)
   ============================================================ */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 72px;
  }

  /* declutter the header: on mobile the CTA lives in the menu and the hero */
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .mobile-menu {
    display: block;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(15, 15, 15, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 99;
  }

  .mobile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--gutter);
    font-size: 1rem;
    color: var(--text);
    border-bottom: 1px solid var(--hairline);
    letter-spacing: 0.02em;
  }

  .mobile-menu a.mobile-cta {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
  }

  .section {
    padding-top: var(--s8);
    padding-bottom: var(--s8);
  }

  .hero {
    min-height: auto;
    padding-top: 160px;
    padding-bottom: var(--s10);
  }

  /* the thread needs its own band above the headline, so the two never
     overlap on a phone. Keyed to thread-ready, not thread-live, so the
     height is reserved before first paint and nothing reflows when
     three.js finally lands. Fallback keeps the old 160px. */
  .thread-ready .hero {
    padding-top: 296px;
  }

  /* the watermark used to be hidden here because the film was the phone's
     backdrop. With the film retired it is the fallback, so it stays. The
     global .thread-live rule still stands it down once the thread runs. */

  /* light at the top where the arch stands, heavy under the copy */
  .hero-veil {
    background: linear-gradient(180deg,
      rgba(15, 15, 15, 0.18) 0%,
      rgba(15, 15, 15, 0.28) 26%,
      rgba(15, 15, 15, 0.80) 42%,
      rgba(15, 15, 15, 0.80) 80%,
      rgba(15, 15, 15, 0.95) 100%);
  }

  .hero-aurora::before,
  .hero-aurora::after {
    filter: blur(56px);
  }

  .site-bg-glow {
    filter: blur(64px);
  }

  .brand-mark {
    height: 26px;
  }

  .hero-inner {
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-kicker {
    font-size: 0.72rem;
    margin-bottom: 16px;
  }

  .hero h1 {
    font-size: 2.4rem;
    line-height: 1.12;
  }

  .hero-sub {
    font-size: 1.05rem;
    margin-top: 20px;
  }

  .hero-actions {
    margin-top: var(--s4);
    gap: 12px;
  }

  .btn {
    width: 100%;
    height: 52px;
    font-size: 0.85rem;
  }

  .section-heading {
    font-size: 1.9rem;
    max-width: 100%;
  }

  .grid-3 {
    grid-template-columns: 1fr;
    gap: var(--s3);
    margin-top: var(--s6);
  }

  .service-card {
    padding: var(--s4);
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--s5);
    margin-top: var(--s6);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
    margin-top: var(--s5);
  }

  .contact-aside {
    max-width: 100%;
    gap: var(--s4);
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-meta {
    align-items: flex-start;
  }
}

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

  .will-animate,
  .reveal-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .eyebrow-rule,
  .will-animate .eyebrow-rule {
    width: 48px;
    transition: none;
  }

  .hero-aurora {
    display: none;
  }

  /* reduced motion never loads three.js at all, so the thread cannot be
     running here. These are belt and braces. */
  .stage,
  .motes {
    display: none !important;
  }

  /* words and foundation lines appear instantly when motion is reduced */
  .w {
    opacity: 1;
    transform: none;
    transition: none;
  }

  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   Service pages
   Shared by /custom-websites and its siblings. The homepage keeps
   the 3D hero to itself: service pages load no three.js at all,
   which is what makes them quick.
   ============================================================ */
.page-head {
  padding-top: 160px;
  padding-bottom: var(--s10);
}

.page-head h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  max-width: 20ch;
}

.page-lede {
  font-family: var(--sans);
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.7;
  margin-top: var(--s3);
}

.prose {
  max-width: 62ch;
  margin-top: var(--s6);
}

.prose h3 {
  font-size: 1.15rem;
  color: var(--gold);
  margin-top: var(--s5);
  margin-bottom: 10px;
  line-height: 1.3;
}

.prose h3:first-child { margin-top: 0; }

.prose p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: var(--s2);
}

.prose p.muted { color: var(--muted); }

.no-list {
  list-style: none;
  padding: 0;
  margin: var(--s4) 0 0 0;
  max-width: 62ch;
}

.no-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--s2);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

/* a gold rule for a bullet: the mark's line, not a dot */
.no-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

.no-list strong { color: var(--gold); font-weight: 600; }

.faq { max-width: 62ch; margin-top: var(--s6); }
.faq dt { font-family: var(--serif); font-size: 1.08rem; color: var(--text); margin-top: var(--s4); }
.faq dt:first-of-type { margin-top: 0; }
.faq dd { margin: 8px 0 0 0; font-size: 0.98rem; color: var(--muted); line-height: 1.75; }

.page-cta { margin-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.page-cta .note { font-size: 0.85rem; color: var(--muted); }

/* the crumb sits under the nav and points home */
.crumb {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb a { transition: color 200ms ease; }
.crumb a:hover { color: var(--gold); }

/* service cards on the homepage become links once their pages exist */
a.service-card { display: block; color: inherit; }
a.service-card h3 { display: flex; align-items: center; gap: 8px; }
a.service-card h3::after {
  content: "\203A";
  font-size: 1.3em;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
a.service-card:hover h3::after { opacity: 1; transform: translateX(0); }

@media (max-width: 760px) {
  .page-head { padding-top: 120px; padding-bottom: var(--s8); }
  .page-head h1 { font-size: 1.95rem; max-width: 100%; }
  .page-lede { font-size: 1.05rem; }
}

/* ============================================================
   Concept builds
   Anonymised spec work. Flat photography only: these are real
   screenshots of real builds and they never get 3D treatment,
   tilting, or a gold rim. See HERO_3D_CONCEPT.md section 2.
   ============================================================ */
.work-note {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.7;
  margin-top: var(--s3);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s8);
}

.work-item { display: flex; flex-direction: column; gap: 12px; }

.work-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  border: 1px solid var(--input-border);
  overflow: hidden;
  background: var(--card);
}

.work-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.work-caption { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.work-caption strong { color: var(--text); font-weight: 600; display: block; }

@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }
}

/* ============================================================
   Discoverability
   Four pages shipped with no visible desktop navigation. The
   header stays minimal by design, so the affordance goes on the
   cards themselves and a page list goes in the footer.
   ============================================================ */

/* the chevron now sits visible at rest, not only on hover, so a
   card reads as something you can click */
a.service-card h3::after { opacity: 0.45; transform: translateX(0); }
a.service-card:hover h3::after { opacity: 1; transform: translateX(3px); }

a.service-card .card-more {
  display: inline-block;
  margin-top: var(--s2);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
a.service-card:hover .card-more { border-bottom-color: var(--gold); }

/* footer gains a page list: the standard home for site-wide links,
   and it leaves the header alone */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav .footer-nav-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 2px;
}

.footer-nav a {
  font-size: 0.82rem;
  color: var(--muted);
  transition: color 200ms ease;
}

.footer-nav a:hover { color: var(--text); }

.footer-inner { align-items: flex-start; }

@media (max-width: 760px) {
  .footer-nav { margin-top: var(--s2); }
}