/* =====================================================================
   Hopson Virtually Connected: design system
   Premium dark identity (mockup Set A) with layered, card-based
   compositions (mockup Set B): photographic heroes, contained photo
   cards, nested panels, glass elements, champagne-gold hairlines.
   ===================================================================== */

/* ============ Tokens ============ */
:root {
  --choc-950: #140d08;
  --choc-900: #1d140d;
  --choc-850: #241811;
  --choc-800: #2b1d14;
  --choc-700: #3a281b;
  --choc-600: #4b3424;
  --line-dark: rgba(232, 205, 160, 0.18);

  --gold: #d8b77f;
  --gold-light: #efdcb5;
  --gold-deep: #a8854f;
  --gold-ink: #7d5726;            /* gold for text on ivory (AA) */
  --gold-rgb: 216, 183, 127;
  --gold-metal: linear-gradient(115deg, #c9a86f 0%, #ebd3a6 30%, #f7ead0 45%, #d9bb88 62%, #efdbb4 82%, #c5a46e 100%);
  --gold-border: rgba(var(--gold-rgb), 0.42);

  --ivory: #f6efe3;
  --ivory-2: #efe5d3;
  --paper: #fcf8f1;
  --line-light: #e1d1b6;

  --on-dark: #f6eee1;
  --on-dark-2: #e2d5c2;
  --on-dark-muted: #c2b19b;
  --on-light: #24180f;
  --on-light-2: #4a3828;
  --on-light-muted: #6b5644;

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Allura", "Snell Roundhand", cursive;

  --radius: 10px;
  --radius-lg: 16px;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 112px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --shadow-card: 0 1px 2px rgba(40, 24, 12, 0.06), 0 18px 40px -22px rgba(40, 24, 12, 0.45);
  --shadow-dark: 0 1px 0 rgba(255, 240, 215, 0.05) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  --grain: image-set(url("assets/grain-1x.webp") 1x, url("assets/grain-2x.webp") 2x) 0 0 / 160px 160px;
}

/* ============ Base ============ */
/* One fixed palette whatever the device theme: no automatic dark-mode substitutions,
   and native controls (checkboxes, scrollbars, autofill) render in their light form. */
:root { color-scheme: only light; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 76px) + 16px); }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--on-light);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-ink); text-underline-offset: 4px; }
a:hover { color: var(--on-light); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 3px; }
.dark :focus-visible, .on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  text-wrap: balance;
  color: inherit;
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(2.1rem, 3.9vw, 3.2rem); }
h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.15; }
h4 { font-size: 1.25rem; }
.h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.15; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 600; color: var(--gold-ink); }
.dark h1 em, .dark h2 em, .dark h3 em, .on-dark h1 em, .on-dark h2 em, .on-dark h3 em { color: var(--gold); }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 880px; }
.container.mid { max-width: 1060px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--gold); color: var(--choc-900); font-weight: 600; border-radius: 6px; }
.skip-link:focus { top: 12px; }

/* Dark context: text colors flip */
.dark, .on-dark { color: var(--on-dark); }
.dark a:not(.btn), .on-dark a:not(.btn) { color: var(--gold); }
.dark a:not(.btn):hover, .on-dark a:not(.btn):hover { color: var(--gold-light); }

/* ============ Type helpers ============ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 1.1em;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.kicker::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: 0.7; }
.dark .kicker, .on-dark .kicker { color: var(--gold); }
.kicker.plain::after { display: none; }

.lead { font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.65; color: var(--on-light-2); max-width: 620px; }
.dark .lead, .on-dark .lead { color: var(--on-dark-2); }
.muted { color: var(--on-light-muted); }
.dark .muted, .on-dark .muted { color: var(--on-dark-muted); }
.fine { font-size: 0.86rem; line-height: 1.55; color: var(--on-light-muted); }
.dark .fine, .on-dark .fine { color: var(--on-dark-muted); }

.section-title { text-align: center; max-width: 820px; margin: 0 auto clamp(36px, 4.5vw, 56px); }
.section-title .kicker { justify-content: center; }
.section-title .kicker::before { content: ""; width: 56px; height: 1px; background: currentColor; opacity: 0.7; }
.section-title .lead { margin: 0 auto; }
.section-title h2 { margin-bottom: 0.3em; }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1.05;
  color: var(--gold);
}
.script-accent { position: absolute; top: clamp(24px, 4vw, 48px); right: clamp(20px, 4vw, 56px); z-index: 2; text-align: right; transform: rotate(-8deg); pointer-events: none; }
.script-accent span { display: block; }
.script-accent::after { content: ""; display: block; width: 90px; height: 1px; margin: 10px 0 0 auto; background: var(--gold); opacity: 0.7; transform: rotate(-4deg); }

.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.text-link .icon { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-gold {
  color: var(--choc-900);
  background-color: var(--gold);
  background-image: var(--gold-metal);
  box-shadow: 0 1px 0 rgba(255, 250, 238, 0.6) inset, 0 12px 26px -14px rgba(0, 0, 0, 0.7);
}
.btn-gold:hover { color: var(--choc-900); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 250, 238, 0.6) inset, 0 18px 32px -16px rgba(0, 0, 0, 0.75); }
.btn-dark { color: var(--gold-light); background: var(--choc-800); border-color: rgba(var(--gold-rgb), 0.3); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.7); }
.btn-dark:hover { color: var(--gold-light); background: var(--choc-700); transform: translateY(-2px); }
.btn-outline { color: var(--on-light); border-color: var(--gold-deep); background: rgba(255, 255, 255, 0.35); }
.btn-outline:hover { color: var(--paper); background: var(--choc-800); border-color: var(--choc-800); }
.dark .btn-outline, .on-dark .btn-outline { color: var(--on-dark); border-color: rgba(var(--gold-rgb), 0.65); background: rgba(20, 13, 8, 0.25); }
.dark .btn-outline:hover, .on-dark .btn-outline:hover { color: var(--choc-900); background: var(--gold-light); border-color: var(--gold-light); }
.btn-sm { min-height: 42px; padding: 10px 20px; font-size: 0.72rem; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Round arrow button used on cards */
.arrow-btn {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  color: var(--gold);
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.arrow-btn .icon { width: 20px; height: 20px; }

/* Gold-ringed icon */
.icon-ring {
  display: inline-grid;
  place-items: center;
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle at 30% 25%, rgba(var(--gold-rgb), 0.18), rgba(20, 13, 8, 0.75) 70%);
  border: 1px solid var(--gold-border);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8);
}
.icon-ring.light { color: var(--gold-ink); background: radial-gradient(circle at 30% 25%, #fff, var(--ivory-2)); border-color: var(--line-light); box-shadow: 0 8px 18px -12px rgba(60, 36, 18, 0.5); }
.icon-ring.sm { width: 44px; height: 44px; }
.icon-ring.sm .icon { width: 20px; height: 20px; }
.icon-ring.lg { width: 72px; height: 72px; }
.icon-ring.lg .icon { width: 32px; height: 32px; }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 13, 8, 0.97);
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.site-header .container { max-width: 1360px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--on-dark); }
.brand-mark { height: 44px; width: auto; }
.brand-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.1; color: var(--gold-light); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.site-nav ul a { position: relative; padding: 6px 0; color: var(--on-dark-2); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--gold-light); }
.site-nav ul a:hover::after, .site-nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; position: relative; width: 46px; height: 46px; border: 1px solid var(--line-dark); border-radius: 8px; background: transparent; cursor: pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { position: absolute; left: 12px; width: 20px; height: 1.5px; background: var(--gold-light); transition: transform 0.25s var(--ease), opacity 0.25s; }
.nav-toggle-bar { top: 22px; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; left: 0; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

/* ============ Sections and surfaces ============ */
.section { position: relative; padding: var(--section-y) 0; }
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }
.section.flush-top { padding-top: 0; }

/* Warm ivory paper */
.bg-ivory {
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(225, 205, 170, 0.35), transparent 70%),
    var(--ivory);
}
.bg-ivory-2 { background: var(--ivory-2); }

/* Deep chocolate with warm light and grain */
.dark {
  background:
    var(--grain),
    radial-gradient(ellipse 55% 70% at 88% 0%, rgba(var(--gold-rgb), 0.12), transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(120, 78, 44, 0.32), transparent 70%),
    var(--choc-900);
}

/* Contained surfaces */
.panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.panel-dark {
  position: relative;
  color: var(--on-dark);
  background:
    var(--grain),
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(var(--gold-rgb), 0.12), transparent 60%),
    linear-gradient(160deg, var(--choc-700), var(--choc-900) 70%);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
.panel-dark a:not(.btn) { color: var(--gold); }
.glass {
  position: relative;
  color: var(--on-dark);
  background: linear-gradient(145deg, rgba(255, 244, 226, 0.12), rgba(255, 244, 226, 0.03));
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 245, 228, 0.12) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.pad { padding: clamp(24px, 3.2vw, 44px); }
.pad-lg { padding: clamp(32px, 4.5vw, 64px); }

/* ============ Photo hero (Set A) ============ */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  background: var(--choc-900);
  border-bottom: 1px solid var(--line-dark);
}
.hero-media { position: absolute; inset: 0 0 0 30%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--choc-900) 0%, rgba(29, 20, 13, 0.92) 18%, rgba(29, 20, 13, 0.45) 48%, rgba(29, 20, 13, 0.08) 75%),
    linear-gradient(0deg, rgba(20, 13, 8, 0.55), transparent 35%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 72vh, 720px);
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(64px, 8vw, 104px);
}
.hero-copy { max-width: 640px; }
.hero-copy h1 { margin-bottom: 0.35em; }
.hero-copy h1 .line { display: block; }
.hero-copy .lead { margin-bottom: 0; }
.hero.compact .hero-inner { min-height: clamp(380px, 48vh, 480px); }
.hero.plain { background: var(--grain), radial-gradient(ellipse 60% 80% at 85% 20%, rgba(var(--gold-rgb), 0.14), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(120, 78, 44, 0.32), transparent 70%), var(--choc-900); }


/* ============ Photo cards (divisions) ============ */
.photo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  padding: 28px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: var(--choc-900);
  color: var(--on-dark);
  text-decoration: none;
  box-shadow: 0 30px 50px -30px rgba(40, 24, 12, 0.8);
  isolation: isolate;
}
.photo-card > img, .photo-card > .card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.8s var(--ease); }
.photo-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 13, 8, 0.02) 15%, rgba(20, 13, 8, 0.7) 52%, rgba(20, 13, 8, 0.96) 100%); }
.photo-card:hover { color: var(--on-dark); }
.photo-card:hover > img { transform: scale(1.04); }
.photo-card:hover .arrow-btn { background: var(--gold); color: var(--choc-900); }
.photo-card h3 { margin: 16px 0 8px; font-size: clamp(1.7rem, 2.3vw, 2.05rem); }
.photo-card p { margin: 0; color: var(--on-dark-2); font-size: 0.97rem; }
.photo-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.photo-card .text-link { color: var(--gold); }
.photo-card .status-badge { margin-top: 12px; align-self: flex-start; }

/* Abstract art for cards without a photo (Nex UX) */
.card-art {
  background:
    radial-gradient(circle at 75% 25%, rgba(var(--gold-rgb), 0.35), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(150, 100, 55, 0.4), transparent 45%),
    repeating-linear-gradient(115deg, rgba(var(--gold-rgb), 0.08) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, var(--choc-700), var(--choc-950));
}

/* ============ Banner (Quick Guide, scope notes) ============ */
.banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: center;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
  overflow: hidden;
}
.banner h2, .banner h3 { margin: 0 0 4px; font-size: clamp(1.6rem, 2.4vw, 2.05rem); }
.banner p { margin: 0; color: var(--on-light-2); }
.banner .actions { margin: 0; }
.banner > * { position: relative; z-index: 1; }
.banner > .mountains { position: absolute; z-index: 0; right: 0; bottom: 0; width: 46%; height: 100%; pointer-events: none; }
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600; font-style: normal;
  letter-spacing: 0.14em; line-height: 1.6;
  text-transform: uppercase; white-space: nowrap;
  color: var(--gold);
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.panel .status-badge, .banner .status-badge { color: var(--gold-ink); }

/* ============ Mini cards (challenges) ============ */
.mini-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mini-cards.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mini-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-card { padding: 26px 20px 24px; text-align: center; background: var(--paper); border: 1px solid var(--line-light); border-radius: 12px; box-shadow: var(--shadow-card); transition: transform 0.35s var(--ease), border-color 0.35s; }
.mini-card:hover { transform: translateY(-3px); border-color: var(--gold-deep); }
.mini-card .icon-ring { margin-bottom: 14px; }
.mini-card h3 { font-size: 1.28rem; margin-bottom: 6px; }
.mini-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--on-light-2); }
.mini-card.left { text-align: left; }

/* Value strip with dividers */
.value-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.value { display: flex; gap: 16px; padding: 8px clamp(16px, 2vw, 28px); }
.value + .value { border-left: 1px solid var(--line-light); }
.value .icon { width: 34px; height: 34px; color: var(--gold-ink); stroke-width: 1.3; }
.value h3 { margin: 0 0 2px; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.value p { margin: 0; font-size: 0.92rem; color: var(--on-light-2); }

/* ============ Process: photo step cards ============ */
.step-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.step-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: rgba(20, 13, 8, 0.55); border: 1px solid rgba(var(--gold-rgb), 0.3); border-radius: 12px; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.9); }
.step-card .media { position: relative; aspect-ratio: 16 / 10; }
.step-card .media img { width: 100%; height: 100%; object-fit: cover; }
.step-card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20, 13, 8, 0.85)); }
.step-num { position: absolute; left: 18px; bottom: -22px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-metal); color: var(--choc-900); font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8); }
.step-card .body { padding: 34px 22px 24px; }
.step-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.step-card p { margin: 0; font-size: 0.93rem; color: var(--on-dark-2); }

/* Numbered steps without photos (consultation flow) */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 70px 22px 24px; border: 1px solid rgba(var(--gold-rgb), 0.3); border-radius: 12px; background: rgba(255, 244, 226, 0.04); }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 22px; left: 22px; font-family: var(--font-display); font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--gold); }
.steps h3 { font-size: 1.35rem; }
.steps p { margin: 0; font-size: 0.93rem; color: var(--on-dark-2); }

/* ============ Split feature cards (Technology) ============ */
.feature-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feature-card { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); overflow: hidden; color: inherit; text-decoration: none; }
.feature-card:hover { color: inherit; }
.feature-card .media { position: relative; min-height: 320px; }
.feature-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-card .body { display: flex; flex-direction: column; padding: clamp(24px, 2.8vw, 36px); }
.feature-card h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.feature-card p { color: var(--on-light-2); font-size: 0.97rem; }
.feature-card .card-foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 12px; }
.feature-card .arrow-btn { color: var(--gold-ink); border-color: var(--gold-deep); }
.feature-card:hover .arrow-btn { background: var(--choc-800); color: var(--gold-light); }

/* Workflow diagram (CSS illustration, no real data) */

.check-list { list-style: none; margin: 4px 0 16px; padding: 0; }
.check-list li { position: relative; padding: 5px 0 5px 30px; font-size: 0.95rem; color: var(--on-light-2); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-metal); }
.check-list li::after { content: ""; position: absolute; left: 5px; top: 13px; width: 8px; height: 4px; border-left: 1.6px solid var(--choc-900); border-bottom: 1.6px solid var(--choc-900); transform: rotate(-45deg); }
.on-dark .check-list li, .dark .check-list li, .panel-dark .check-list li { color: var(--on-dark-2); }

/* ============ Service tiles ============ */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 22px 20px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.32);
  background: var(--grain), radial-gradient(circle at 80% 0%, rgba(var(--gold-rgb), 0.16), transparent 50%), linear-gradient(170deg, var(--choc-700), var(--choc-900));
  color: var(--on-dark);
  text-decoration: none;
  transition: transform 0.35s var(--ease), border-color 0.35s;
}
.tile:hover { transform: translateY(-4px); border-color: var(--gold); color: var(--on-dark); }
.tile:hover .arrow-btn { background: var(--gold); color: var(--choc-900); }
.tile .icon-ring { margin-bottom: auto; }
.tile h3 { margin: 28px 0 6px; font-size: 1.45rem; }
.tile p { margin: 0 0 14px; font-size: 0.88rem; line-height: 1.5; color: var(--on-dark-2); }
.tile .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile .tile-price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--gold-light); }
.tile .arrow-btn { width: 38px; height: 38px; }

/* ============ Pricing: photo price cards (Set B) ============ */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; }
.price-card .media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.price-card .media img { width: 100%; height: 100%; object-fit: cover; }
.price-card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(20, 13, 8, 0.45)); }
.price-card .icon-ring { position: relative; z-index: 1; margin: -30px 0 0 26px; }
.price-card .body { display: flex; flex-direction: column; flex: 1; padding: 14px 28px 28px; }
.price-card h3 { margin: 6px 0 4px; font-size: clamp(1.6rem, 2.2vw, 1.9rem); }
.price-card .sub { margin: 0 0 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.price-card p { color: var(--on-light-2); font-size: 0.95rem; }
.price-card .price-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-light); }
.mini-prices { list-style: none; margin: 0 0 16px; padding: 0; }
.mini-prices li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-light); font-size: 0.9rem; color: var(--on-light-2); }
.mini-prices li:last-child { border-bottom: 0; }
.mini-prices a { color: inherit; text-decoration: none; }
.mini-prices a:hover { color: var(--gold-ink); }
.mini-prices span:last-child { white-space: nowrap; color: var(--on-light); font-weight: 600; }

.price-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-light-muted); }
.price-amount { display: block; font-family: var(--font-display); font-size: clamp(2.3rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1; color: var(--on-light); }
.price-amount small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--on-light-muted); }
.price-custom { display: block; font-family: var(--font-display); font-style: italic; font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--gold-ink); }
.dark .price-amount, .panel-dark .price-amount, .glass .price-amount { color: var(--on-dark); }
.dark .price-label, .panel-dark .price-label, .glass .price-label, .panel-dark .price-amount small, .glass .price-amount small { color: var(--on-dark-muted); }
.price-note { margin: 8px 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--on-light-muted); }

/* Dark support panel (Set A) */
.support-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.support-panel > * { position: relative; z-index: 1; }
.support-panel h3 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); }
.support-panel .rates { display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 18px 0; }
.support-panel .divider { border-left: 1px solid var(--line-dark); padding-left: clamp(20px, 3vw, 40px); }
.note-card { padding: 22px 24px; }
.note-card .kicker { margin-bottom: 8px; }
.note-card p { margin: 0; font-size: 0.92rem; color: var(--on-dark-2); }
.panel-dark > .mountains { position: absolute; z-index: 0; right: 0; bottom: 0; width: 60%; height: 55%; opacity: 0.5; pointer-events: none; }

/* Advisory tiers */
.tier-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tier-card { padding: 26px 26px 24px; }
.tier-card h3 { margin-bottom: 16px; }
.terms-note { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 0; padding: 16px 20px; border-radius: 10px; border: 1px solid var(--line-light); background: rgba(255, 255, 255, 0.55); color: var(--on-light-2); font-size: 0.95rem; }
.terms-note .icon { color: var(--gold-ink); margin-top: 1px; }
.dark .terms-note, .panel-dark .terms-note { border-color: var(--line-dark); background: rgba(255, 244, 226, 0.05); color: var(--on-dark-2); }
.dark .terms-note .icon, .panel-dark .terms-note .icon { color: var(--gold); }

/* Price table (at a glance) */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 13px 0; border-bottom: 1px solid var(--line-light); text-align: left; vertical-align: baseline; font-size: 0.97rem; }
.price-table th { font-weight: 500; color: var(--on-light); }
.price-table th a { color: inherit; text-decoration: none; }
.price-table th a:hover { color: var(--gold-ink); }
.price-table td { text-align: right; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; white-space: nowrap; color: var(--gold-ink); padding-left: 16px; }
.dark .price-table th, .dark .price-table td, .panel-dark .price-table th, .panel-dark .price-table td, .glass .price-table th, .glass .price-table td { border-color: var(--line-dark); }
.dark .price-table th, .panel-dark .price-table th, .glass .price-table th { color: var(--on-dark); }
.dark .price-table td, .panel-dark .price-table td, .glass .price-table td { color: var(--gold-light); }
.price-table-title { margin-bottom: 6px; font-size: clamp(1.5rem, 2.2vw, 1.85rem); }

/* ============ Detailed service cards ============ */
.svc-list { display: grid; gap: 16px; }
.svc { background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--header-h, 76px) + 24px); }
.svc-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.75fr); gap: clamp(24px, 4vw, 56px); padding: clamp(26px, 3.2vw, 40px); }
.svc-num { display: block; margin-bottom: 10px; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold-ink); }
.svc h3 { font-size: clamp(1.65rem, 2.4vw, 2.05rem); }
.svc-flag { margin-bottom: 8px; }
.svc-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.35; color: var(--on-light); }
.svc-intro p { color: var(--on-light-2); }
.svc-intro p:last-child { margin-bottom: 0; }
.price-block { display: flex; flex-direction: column; gap: 6px; padding-left: clamp(0px, 3vw, 36px); border-left: 1px solid var(--line-light); }
.svc-body { padding: 0 clamp(26px, 3.2vw, 40px) clamp(22px, 2.8vw, 34px); }
.svc-featured { border-color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-deep) inset, var(--shadow-card); }
.svc-details { border-top: 1px solid var(--line-light); }
.svc-details summary { list-style: none; position: relative; padding: 16px 40px 16px 0; cursor: pointer; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-light); }
.svc-details summary::-webkit-details-marker { display: none; }
.svc-details summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: var(--gold-ink); transition: transform 0.3s var(--ease); }
.svc-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.svc-details > p { color: var(--on-light-2); }
.inc-list { columns: 2; column-gap: 40px; list-style: none; margin: 0 0 18px; padding: 0; }
.inc-list li { break-inside: avoid; position: relative; padding: 5px 0 5px 22px; color: var(--on-light-2); font-size: 0.95rem; }
.inc-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 1px; background: var(--gold-ink); }
.scope-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.scope-tags li { padding: 4px 12px; border: 1px solid var(--line-light); border-radius: 999px; font-size: 0.85rem; color: var(--on-light-2); background: var(--ivory); }
.svc-subhead { margin: 22px 0 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-light-muted); }
.svc-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.svc-tier { padding: 18px 20px; border: 1px solid var(--line-light); border-radius: 10px; background: var(--ivory); }
.svc-tier h4 { margin-bottom: 4px; }
.svc-tier .tier-price { margin-bottom: 8px; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; font-weight: 600; color: var(--gold-ink); }
.svc-tier p:last-child { margin: 0; font-size: 0.94rem; color: var(--on-light-2); }
.svc-footnote, .svc-scope { margin: 14px 0 0; font-size: 0.94rem; color: var(--on-light-muted); }
.svc-scope strong { color: var(--on-light); }
.svc-eligibility { margin: 0 clamp(26px, 3.2vw, 40px) 18px; padding: 14px 18px; border-left: 2px solid var(--gold-ink); border-radius: 0 8px 8px 0; background: var(--ivory); }
.svc-eligibility .label { margin: 0 0 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.svc-eligibility p:last-child { margin: 0; color: var(--on-light-2); font-size: 0.95rem; }

/* ============ Editorial splits, framed photos ============ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.split.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split.wide-right { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); }
.split.top { align-items: start; }
.prose p { color: var(--on-light-2); }
.dark .prose p, .panel-dark .prose p { color: var(--on-dark-2); }

/* Photo inside a gold frame that sits slightly offset (controlled asymmetry) */
.framed { position: relative; margin: 0 22px 22px 0; }
.framed::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--gold-deep); border-radius: var(--radius-lg); z-index: 0; }
.framed.flip { margin: 0 0 22px 22px; }
.framed.flip::before { inset: 22px 22px -22px -22px; }
.framed img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(40, 24, 12, 0.7); object-fit: cover; }
.framed.portrait img { aspect-ratio: 4 / 5; }
.framed.landscape img { aspect-ratio: 4 / 3; }
.framed .overlap { position: absolute; z-index: 2; right: -28px; bottom: 36px; max-width: 300px; padding: 22px 24px; }
.framed.flip .overlap { right: auto; left: -28px; }
.overlap .script { font-size: 1.9rem; }
.overlap p { margin: 6px 0 0; font-size: 0.92rem; color: var(--on-dark-2); }

/* ============ Glass scene (Nex UX) ============ */
.glass-scene { position: relative; min-height: 460px; }
.glass-device { position: absolute; inset: 10% 4% 14% 16%; display: grid; place-items: center; align-content: center; padding: 32px; text-align: center; overflow: hidden; }
.glass-device::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, rgba(var(--gold-rgb), 0.07) 0 1px, transparent 1px 26px); pointer-events: none; }
.glass-device .wordmark { position: relative; font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 4.2rem); font-style: italic; font-weight: 600; color: var(--gold-light); line-height: 1; }
.glass-device .status-badge { position: relative; margin-top: 18px; }
.glass-chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 16px; max-width: 240px; }
.glass-chip strong { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.glass-chip small { display: block; font-size: 0.78rem; color: var(--on-dark-muted); }
.glass-chip.a { top: 0; left: 0; }
.glass-chip.b { top: 42%; left: -4%; }
.glass-chip.c { bottom: 0; left: 10%; }
.glass-chip.d { top: 18%; right: -3%; }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.status-item { padding: 22px; }
.status-item .price-label { margin-bottom: 8px; }
.status-item strong { display: block; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; color: var(--gold-light); }

/* ============ Closing CTA panel ============ */
.cta-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 24px 48px; align-items: center; }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { margin-bottom: 0.25em; }
.cta-panel .lead { margin: 0; }
.cta-panel .actions { margin: 0; }
.cta-panel .script { margin-top: 16px; }
.cta-panel.with-photo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); padding: 0; }
.cta-panel.with-photo .media { position: relative; align-self: stretch; min-height: 300px; }
.cta-panel.with-photo .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-panel.with-photo .body { padding: clamp(28px, 4vw, 52px); }
.cta-panel.with-photo .actions { margin-top: 26px; }

/* ============ Consultation application ============ */
.apply-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.apply-card { padding: clamp(24px, 3.4vw, 48px); }
.apply-side { padding: clamp(26px, 3vw, 40px); position: sticky; top: calc(var(--header-h, 76px) + 24px); }
.apply-side h2 { font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 0.3em; }
.side-steps { list-style: none; margin: 24px 0; padding: 0; }
.side-steps li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.side-steps li::after { content: ""; position: absolute; left: 27px; top: 58px; bottom: 4px; width: 1px; background: var(--line-dark); }
.side-steps li:last-child { padding-bottom: 0; }
.side-steps li:last-child::after { display: none; }
.side-steps strong { display: block; margin-top: 4px; font-size: 0.98rem; }
.side-steps p { margin: 2px 0 0; font-size: 0.9rem; color: var(--on-dark-2); }
.fee-card { padding: 20px 22px; border: 1px solid rgba(var(--gold-rgb), 0.35); border-radius: 12px; background: rgba(20, 13, 8, 0.35); }
.fee-card .label { margin: 0 0 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.fee-card .fee-lead { margin-bottom: 8px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.3; color: var(--on-dark); }
.fee-card p:last-child { margin: 0; font-size: 0.9rem; color: var(--on-dark-2); }
.panel .fee-card, .bg-ivory .fee-card { border-color: var(--line-light); background: var(--paper); }
.panel .fee-card .label, .bg-ivory .fee-card .label { color: var(--gold-ink); }
.panel .fee-card .fee-lead, .bg-ivory .fee-card .fee-lead { color: var(--on-light); }
.panel .fee-card p:last-child, .bg-ivory .fee-card p:last-child { color: var(--on-light-2); }

.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 clamp(28px, 4vw, 40px); padding: 0; counter-reset: s; }
.stepper li { counter-increment: s; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 0.86rem; color: var(--on-light-muted); }
.stepper li::before { content: counter(s); position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-deep); background: var(--paper); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--on-light); }
.stepper li::after { content: ""; position: absolute; top: 20px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 1px; background: var(--line-light); }
.stepper li:last-child::after { display: none; }
.stepper li[aria-current="step"] { color: var(--on-light); font-weight: 600; }
.stepper li[aria-current="step"]::before { background: var(--gold-metal); border-color: var(--gold-deep); color: var(--choc-900); box-shadow: 0 6px 16px -6px rgba(125, 87, 38, 0.6); }
.stepper li.done::before { content: "\2713"; background: var(--choc-800); border-color: var(--choc-800); color: var(--gold-light); }
.stepper li.done::after { background: var(--gold-deep); }

.apply fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.apply legend { padding: 0; }
.apply .step-head { margin-bottom: 26px; }
.apply .step-title { display: block; margin: 0 0 4px; font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 600; line-height: 1.1; color: var(--on-light); }
.apply .step-head p { margin: 0; color: var(--on-light-2); }
.apply .step-count { display: block; margin-bottom: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.field { display: grid; gap: 7px; align-content: start; grid-column: 1 / -1; }
.field.half { grid-column: auto; }
.field[hidden] { display: none; }
.field > label, .field > .label, .field legend.label { font-size: 0.92rem; font-weight: 600; color: var(--on-light); margin-bottom: 2px; }
.field .req { color: #8a3a22; margin-left: 2px; }
.field .help { font-size: 0.82rem; color: var(--on-light-muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #b9a07a;
  border-radius: 8px;
  background: #fffdf9;
  color: var(--on-light);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #8c7862; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.45); }
.field [aria-invalid="true"] { border-color: #a3352a; }
.field-error { margin: 0; font-size: 0.85rem; font-weight: 500; color: #a3352a; }
.field-error:empty { display: none; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #cdb895; border-radius: 10px; background: #fffdf9; cursor: pointer; font-size: 0.95rem; line-height: 1.35; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.choice:hover { border-color: var(--gold-deep); }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-ink); flex-shrink: 0; }
.choice:has(input:checked) { border-color: var(--gold-ink); background: #fbf2e1; box-shadow: 0 0 0 1px var(--gold-ink) inset; }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line-light); border-radius: 10px; background: var(--ivory); font-size: 0.86rem; line-height: 1.55; color: var(--on-light-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold-ink); flex-shrink: 0; }
.field-note { padding: 14px 16px; border-left: 2px solid var(--gold-ink); border-radius: 0 8px 8px 0; background: var(--ivory); color: var(--on-light-2); font-size: 0.92rem; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-light); }
.form-nav .spacer { flex: 1; }
.form-nav .progress-text { font-size: 0.85rem; color: var(--on-light-muted); }
.form-status { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; font-size: 0.92rem; }
.form-status:empty { display: none; }
.form-status.is-error { background: #f8e3df; color: #7c261d; border: 1px solid #e6b9b1; }
.privacy-line { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--on-light-muted); }
.privacy-line .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--gold-ink); }
.review-list { margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--line-light); border-radius: 10px; background: var(--ivory); }
.review-list dt { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.review-list dt:first-child { margin-top: 0; }
.review-list dd { margin: 2px 0 0; font-size: 0.95rem; color: var(--on-light); white-space: pre-line; overflow-wrap: anywhere; }
.review-edit { padding: 0; border: 0; background: none; color: var(--gold-ink); font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: underline; cursor: pointer; }
.dry-run-note { margin: 18px auto 0; max-width: 560px; padding: 10px 14px; border: 1px dashed var(--gold-deep); border-radius: 8px; font-size: 0.82rem; color: var(--on-light-2); }

/* Stepped mode is switched on by script; without it every step shows in order */
.apply.is-stepped .form-step { display: none; }
.apply.is-stepped .form-step.is-active { display: block; }
.apply:not(.is-stepped) .form-step + .form-step { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-light); }
.apply:not(.is-stepped) .js-only { display: none; }
.apply.is-stepped .no-js-only { display: none; }

.received { text-align: center; padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px); }
.received .icon-ring { margin: 0 auto 22px; }
.received h2 { margin-bottom: 0.2em; }
.received .lead { margin: 0 auto 20px; }
.received p { max-width: 560px; margin-left: auto; margin-right: auto; color: var(--on-light-2); }
.received .script { margin-top: 10px; color: var(--gold-ink); }

/* ============ FAQ ============ */
.faq details { border-bottom: 1px solid var(--line-light); }
.faq details:first-child { border-top: 1px solid var(--line-light); }
.faq summary { list-style: none; position: relative; padding: 22px 48px 22px 0; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; color: var(--on-light); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.9rem; font-weight: 400; color: var(--gold-ink); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-right: 48px; color: var(--on-light-2); }
.faq details p:last-child { margin-bottom: 24px; }

/* ============ Entries (Journal, Announcements, Work) ============ */
.entry-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.entry-card { display: flex; flex-direction: column; height: 100%; padding: 28px 26px; color: inherit; text-decoration: none; transition: border-color 0.3s, transform 0.3s var(--ease); }
.entry-card:hover { border-color: var(--gold-deep); transform: translateY(-3px); color: inherit; }
.entry-meta { margin: 0 0 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.entry-card h3 { font-size: 1.55rem; }
.entry-card p { color: var(--on-light-2); font-size: 0.96rem; }
.entry-card .text-link { margin-top: auto; color: var(--gold-ink); }
.entry-card .entry-image { margin: -28px -26px 22px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio: 16 / 10; object-fit: cover; width: calc(100% + 52px); max-width: none; }
.hero .entry-meta { color: var(--gold); }
.back-link { margin-bottom: 26px; }
.back-link .icon { transform: rotate(180deg); }
.back-link:hover .icon { transform: rotate(180deg) translateX(4px); }

.article { font-size: 1.08rem; }
.article h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin: 1.6em 0 0.5em; }
.article h3 { margin: 1.4em 0 0.4em; }
.article p, .article li { color: var(--on-light-2); }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.article li { margin-bottom: 0.4em; }
.article li::marker { color: var(--gold-ink); }
.article blockquote { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 2px solid var(--gold-ink); font-family: var(--font-display); font-style: italic; font-size: 1.45rem; line-height: 1.4; color: var(--on-light); }
.article img { margin: 1.6em 0; border-radius: 10px; }
.project-facts { margin: 0; }
.project-facts dt { margin-top: 24px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.project-facts dt:first-child { margin-top: 0; }
.project-facts dd { margin: 6px 0 0; color: var(--on-light-2); }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.project-tags li { padding: 3px 12px; border: 1px solid rgba(var(--gold-rgb), 0.5); border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.figure { margin: 0 0 22px; }
.figure img { width: 100%; border-radius: 10px; border: 1px solid var(--line-light); }
.figure figcaption { margin-top: 8px; font-size: 0.82rem; color: var(--on-light-muted); }
.empty-state { max-width: 780px; padding: clamp(28px, 4vw, 44px); border-style: dashed; border-color: var(--gold-deep); }
.empty-state p:last-child { margin-bottom: 0; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.review { margin: 0; padding: 32px; }
.review blockquote { margin: 0 0 18px; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; line-height: 1.4; color: var(--on-light); }
.review blockquote p { margin: 0; }
.review figcaption { display: flex; flex-direction: column; font-size: 0.92rem; }
.review-name { font-weight: 600; }
.review-meta { color: var(--on-light-muted); }

/* Contact */
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 8px 0 0; }
.contact-email a { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.copy-email { min-width: 7rem; padding: 5px 14px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: var(--gold-ink); font: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.copy-email:hover { background: rgba(var(--gold-rgb), 0.15); }
.copy-email.is-copied { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--paper); }
.site-footer .copy-email { color: var(--gold); }
.site-footer .copy-email.is-copied { background: var(--gold); border-color: var(--gold); color: var(--choc-900); }

/* ============ Footer ============ */
.site-footer { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 88px) 0 28px; color: var(--on-dark-2); background: var(--grain), radial-gradient(ellipse 50% 60% at 50% 0%, rgba(var(--gold-rgb), 0.08), transparent 70%), var(--choc-950); border-top: 1px solid var(--line-dark); }
.site-footer > .mountains { position: absolute; right: 0; bottom: 0; width: 42%; height: 140px; opacity: 0.3; pointer-events: none; }
.footer-top { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-logo { width: 230px; }
.footer-brand .script { margin-top: 18px; font-size: 1.7rem; }
.footer-brand .muted { margin: 12px 0 0; font-size: 0.9rem; color: var(--on-dark-muted); }
.footer-col h2 { margin: 0 0 16px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--on-dark-2); font-size: 0.94rem; text-decoration: none; }
.footer-col a:hover { color: var(--gold-light); text-decoration: underline; }
.footer-contact { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line-dark); }
.footer-contact p { margin: 0; }
.footer-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.footer-email a { color: var(--gold); font-weight: 500; }
.footer-area { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--on-dark-muted); }
.footer-area .icon { width: 18px; height: 18px; color: var(--gold); }
.footer-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 22px; font-size: 0.84rem; color: var(--on-dark-muted); }
.footer-base p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer-legal a { color: var(--on-dark-muted); }
.footer-legal a:hover { color: var(--gold-light); }
.footer-choices { padding: 0; border: 0; background: none; color: var(--on-dark-muted); font: inherit; cursor: pointer; }
.footer-choices:hover { color: var(--gold-light); }
.inline-settings { padding: 0; border: 0; background: none; color: var(--gold-ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.faq details h3 { margin: 18px 0 6px; font-size: 1.1rem; }
.faq details ul { margin: 0 0 12px; padding-left: 20px; }
/* Analytics choice: compact and non-blocking. Accept is the gold metal finish; Decline matches its size and clarity */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: 820px; margin: 0 auto; padding: 16px 20px; border: 1px solid var(--gold-border); border-radius: 12px; background: var(--choc-900); color: var(--ivory); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); }
.consent-copy { flex: 1 1 340px; min-width: 0; }
.consent h2 { margin: 0 0 4px; color: var(--gold-light); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.consent p { margin: 0; font-size: 0.86rem; line-height: 1.45; }
.consent a { color: var(--gold-light); text-decoration: underline; }
.consent-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.consent-btn { min-height: 44px; padding: 8px 18px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.consent-accept { background: var(--gold-metal); color: var(--choc-900); box-shadow: 0 1px 0 rgba(255, 250, 238, 0.6) inset, 0 8px 18px -10px rgba(var(--gold-rgb), 0.7); }
.consent-accept:hover { filter: brightness(1.07); }
.consent-decline { border-color: var(--gold); background: transparent; color: var(--ivory); }
.consent-decline:hover { background: rgba(var(--gold-rgb), 0.16); }
.consent-btn:focus-visible, .consent a:focus-visible, .footer-choices:focus-visible, .inline-settings:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (max-width: 560px) { .consent { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; } .consent-actions { flex: 1 1 100%; } .consent-btn { flex: 1 1 0; padding: 8px 10px; } }

/* ============ Legal pages ============ */
.legal { color: var(--on-light-2); }
.legal > p, .legal li { line-height: 1.75; }
.legal h2 { scroll-margin-top: calc(var(--header-h, 76px) + 24px); margin: 2em 0 0.5em; font-size: clamp(1.7rem, 2.6vw, 2.1rem); color: var(--on-light); }
.legal h3 { margin: 1.4em 0 0.4em; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--on-light); }
.legal ul { margin: 0 0 1em; padding-left: 1.25em; }
.legal ul li { margin-bottom: 0.35em; }
.legal ul li::marker { color: var(--gold-ink); }
.legal strong { color: var(--on-light); }
.legal-date { margin: 0; color: var(--on-dark-muted); }
.legal-toc { margin: 32px 0 8px; padding: 24px 28px; border: 1px solid var(--line-light); border-radius: 12px; background: var(--ivory); }
.legal-toc-title { margin: 0 0 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-light-muted); }
.legal-toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; margin-bottom: 4px; font-size: 0.95rem; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-toc li::marker { color: var(--gold-ink); }

/* ============ Numerals ============ */
/* Lining figures everywhere; equal-width digits wherever prices appear */
.price-amount, .price-custom, .price-table td, .tier-price, .fee-lead, .tile-price, .mini-prices {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ============ Reveal on scroll (restrained) ============ */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal-group > .reveal:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .reveal-group > .reveal:nth-child(3) { transition-delay: 0.16s; }
.js-reveal .reveal-group > .reveal:nth-child(4) { transition-delay: 0.24s; }
.js-reveal .reveal-group > .reveal:nth-child(5) { transition-delay: 0.32s; }
.js-reveal .reveal-group > .reveal:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .btn:hover, .tile:hover, .mini-card:hover, .entry-card:hover { transform: none; }
  .photo-card:hover > img { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 1199px) {
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 20px; padding: 12px var(--gutter) 28px; background: var(--choc-950); border-bottom: 1px solid var(--line-dark); max-height: calc(100vh - var(--header-h, 76px)); overflow-y: auto; }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 1rem; }
  .site-nav ul a::after { display: none; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-cards, .mini-cards.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .support-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .support-panel .note-card { grid-column: 1 / -1; }
  .feature-card { grid-template-columns: minmax(0, 1fr); }
  .feature-card .media { min-height: 240px; }
}

@media (max-width: 1023px) {
  .hero-media { inset: 0; }
  .hero-media::after { background: linear-gradient(90deg, rgba(29, 20, 13, 0.95), rgba(29, 20, 13, 0.72)), linear-gradient(0deg, rgba(20, 13, 8, 0.6), transparent); }
  .split, .split.wide-left, .split.wide-right, .apply-grid, .cta-panel, .cta-panel.with-photo { grid-template-columns: minmax(0, 1fr); }
  .photo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-cards, .tier-cards, .entry-list { grid-template-columns: minmax(0, 1fr); }
  .photo-card { min-height: 380px; }
  .feature-pair { grid-template-columns: minmax(0, 1fr); }
  .feature-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
  .step-cards, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .value:nth-child(3) { border-left: 0; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apply-side { position: static; }
  .framed .overlap { right: 12px; }
  .framed.flip .overlap { left: 12px; }
  .glass-scene { min-height: 420px; max-width: 600px; }
  .banner { grid-template-columns: auto minmax(0, 1fr); }
  .banner .actions { grid-column: 1 / -1; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .script-accent { display: none; }
}

@media (max-width: 760px) {
  .svc-head { grid-template-columns: minmax(0, 1fr); }
  .price-block { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--line-light); }
  .inc-list { columns: 1; }
  .svc-tiers, .reviews, .photo-cards, .support-panel { grid-template-columns: minmax(0, 1fr); }
  .support-panel .divider { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); padding-top: 20px; }
  .tiles, .mini-cards, .mini-cards.five, .mini-cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { grid-template-columns: minmax(0, 1fr); }
  .field-grid, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .stepper li { font-size: 0.72rem; }
  .legal-toc ol { columns: 1; }
  .glass-scene { min-height: 0; display: grid; gap: 12px; }
  .glass-device, .glass-chip { position: relative; inset: auto; max-width: none; }
  .glass-device { min-height: 220px; }
  .framed { margin: 0 12px 16px 0; }
  .framed::before { inset: 14px -12px -14px 14px; }
  .framed.flip { margin: 0 0 16px 12px; }
  .framed.flip::before { inset: 14px 14px -14px -12px; }
  .framed .overlap { position: relative; right: auto; left: auto; bottom: auto; max-width: none; margin: -40px 16px 0; }
}

@media (max-width: 560px) {
  .brand-name { font-size: 1.05rem; white-space: normal; }
  .brand-mark { height: 36px; }
  .step-cards, .steps, .tiles, .mini-cards, .mini-cards.five, .mini-cards.three, .value-strip, .status-grid { grid-template-columns: minmax(0, 1fr); }
  .value + .value { border-left: 0; border-top: 1px solid var(--line-light); padding-top: 16px; }
  .actions .btn { flex: 1 1 100%; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq details p { padding-right: 0; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .stepper li span { display: none; }
}
.received h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
.received .actions { justify-content: center; }

/* ============ Utilities ============ */
.spaced { margin-top: clamp(32px, 4vw, 56px); }
.section-tight-top { padding-top: 0; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.center .actions, .center .kicker { justify-content: center; }

/* ============ Consultation process list ============ */
.process { list-style: none; counter-reset: p; margin: 0 0 24px; padding: 0; }
.process li { counter-increment: p; position: relative; padding: 0 0 20px 50px; color: var(--on-light-2); }
.process li::before { content: counter(p); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--gold-deep); border-radius: 50%; background: var(--paper); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--gold-ink); }
.process li::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 1px; background: var(--line-light); }
.process li:last-child { padding-bottom: 0; }
.process li:last-child::after { display: none; }
.panel-dark .project-facts dt, .project-facts.panel-dark dt { color: var(--gold); }
.project-facts.panel-dark dd { color: var(--on-dark-2); }

/* ============ Dark surfaces: heroes and dark panels use the light-on-dark palette ============ */
.hero .lead, .panel-dark .lead { color: var(--on-dark-2); }
.hero .kicker, .panel-dark .kicker { color: var(--gold); }
.hero .muted, .hero .fine, .panel-dark .muted, .panel-dark .fine { color: var(--on-dark-muted); }
.hero h1 em, .hero h2 em, .panel-dark h2 em, .panel-dark h3 em { color: var(--gold); }
.hero a:not(.btn) { color: var(--gold); }
.hero .btn-outline, .panel-dark .btn-outline { color: var(--on-dark); border-color: rgba(var(--gold-rgb), 0.65); background: rgba(20, 13, 8, 0.3); }
.hero .btn-outline:hover, .panel-dark .btn-outline:hover { color: var(--choc-900); background: var(--gold-light); border-color: var(--gold-light); }
.hero .status-badge, .panel-dark .status-badge { color: var(--gold); }
.hero :focus-visible, .panel-dark :focus-visible { outline-color: var(--gold); }


/* ============ Refinements after visual review ============ */
.framed .overlap { background: linear-gradient(145deg, rgba(43, 29, 20, 0.92), rgba(29, 20, 13, 0.86)); color: var(--on-dark); }
.mini-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tile { min-height: 250px; padding: 26px 26px 24px; }
.tile h3 { margin-top: 22px; font-size: 1.6rem; }
.tile p { font-size: 0.95rem; }
.tile .tile-price { white-space: nowrap; font-size: 1.3rem; }
.script-accent { text-shadow: 0 2px 12px rgba(20, 13, 8, 0.85); }
@media (max-width: 760px) { .tiles, .mini-cards.two { grid-template-columns: minmax(0, 1fr); } }
/* Content inside dark panels always sits above the decorative mountains */
.panel-dark > *:not(.mountains) { position: relative; z-index: 1; }
/* The fee card keeps its dark styling inside dark panels, wherever the panel sits */
.bg-ivory .panel-dark .fee-card, .panel-dark .fee-card { border-color: rgba(var(--gold-rgb), 0.35); background: rgba(20, 13, 8, 0.45); }
.bg-ivory .panel-dark .fee-card .label { color: var(--gold); }
.bg-ivory .panel-dark .fee-card .fee-lead { color: var(--on-dark); }
.bg-ivory .panel-dark .fee-card p:last-child { color: var(--on-dark-2); }
/* Whole-card links never underline their contents */
a.mini-card, a.panel, a.photo-card, a.tile, a.feature-card, a.entry-card { text-decoration: none; color: inherit; }
a.mini-card:hover, a.panel:hover { color: inherit; border-color: var(--gold-deep); }
.gap-top { margin-top: 20px; }
.glass-device { inset: 10% 2% 14% 24%; }
.glass-chip.b { left: -6%; top: 46%; }
/* Photo cards: a deeper fade so titles stay readable on bright images */
.photo-card::before { background: linear-gradient(180deg, rgba(20, 13, 8, 0.05) 0%, rgba(20, 13, 8, 0.35) 28%, rgba(20, 13, 8, 0.86) 50%, rgba(20, 13, 8, 0.97) 70%); }
.photo-card h3, .photo-card p { text-shadow: 0 1px 12px rgba(20, 13, 8, 0.6); }
a.photo-card, a.photo-card:hover, a.tile, a.tile:hover { color: var(--on-dark); }
.photo-card::before { background: linear-gradient(180deg, rgba(20, 13, 8, 0.02) 0%, rgba(20, 13, 8, 0.25) 30%, rgba(20, 13, 8, 0.78) 56%, rgba(20, 13, 8, 0.95) 78%); }

/* ============ Nex UX hero: the vision illustration, front and center ============ */
.nexux-hero { gap: clamp(28px, 4vw, 44px); justify-items: center; }
.nexux-copy { max-width: 820px; text-align: center; }
.nexux-copy .kicker { justify-content: center; }
.nexux-copy .kicker::before { content: ""; width: 56px; height: 1px; background: currentColor; opacity: 0.7; }
.nexux-copy .lead { margin: 0 auto 18px; }
.nexux-visual { width: 100%; margin: 0; }
.nexux-visual img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--gold-border); box-shadow: 0 0 0 1px rgba(20, 13, 8, 0.6), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 80px -30px rgba(var(--gold-rgb), 0.35); }
.nexux-visual figcaption { margin-top: 14px; text-align: center; font-size: 0.86rem; color: var(--on-dark-muted); }
.nexux-actions { margin-top: 0; justify-content: center; }

/* ============ Mobile carousels (data-carousel) ============ */
/* Phones: one card with a glimpse of the next, native swiping with scroll snapping.
   Wider screens keep each group's normal grid; the controls only appear on phones. */
body { overflow-x: clip; }
.carousel-nav { display: none; }
@media (max-width: 760px) {
  .carousel .carousel-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    /* Never a vertical scroller (overflow-x alone makes overflow-y auto), so vertical swipes always scroll the page */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .carousel .carousel-track::-webkit-scrollbar { display: none; }
  /* snap-stop: a fast flick stops at the next card instead of sailing past several */
  .carousel .carousel-track > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .carousel.bleed .carousel-track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .carousel .carousel-track:focus-visible { outline-offset: 6px; }
  .carousel.is-active .carousel-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
}
.carousel-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--gold-deep); border-radius: 50%;
  background: transparent; color: var(--gold-ink);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, opacity 0.25s;
}
.carousel-btn .icon { width: 20px; height: 20px; }
.carousel-btn:hover:not(:disabled) { background: var(--choc-800); color: var(--gold-light); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-dots { display: flex; align-items: center; gap: 2px; }
.carousel-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.carousel-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(var(--gold-rgb), 0.45); transition: width 0.3s var(--ease), background 0.3s; }
.carousel-dot[aria-current]::before { width: 22px; background: var(--gold-metal); }
.panel-dark .carousel-btn, .dark .carousel-btn { border-color: rgba(var(--gold-rgb), 0.55); color: var(--gold); }
.panel-dark .carousel-btn:hover:not(:disabled), .dark .carousel-btn:hover:not(:disabled) { background: var(--gold); color: var(--choc-900); }
.bg-ivory .carousel-dot::before, .bg-ivory-2 .carousel-dot::before { background: rgba(168, 133, 79, 0.4); }
.bg-ivory .panel-dark .carousel-dot::before { background: rgba(var(--gold-rgb), 0.4); }
.carousel-dot[aria-current]::before, .bg-ivory .carousel-dot[aria-current]::before, .bg-ivory .panel-dark .carousel-dot[aria-current]::before { background: var(--gold-metal); }

/* ============ Compact cards on phones (Consulting challenges, service areas, advisory) ============ */
@media (max-width: 760px) {
  .mini-cards.compact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mini-cards.compact .mini-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 18px; text-align: left; }
  .mini-cards.compact .mini-card .icon-ring { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .mini-cards.compact .mini-card .icon-ring .icon { width: 20px; height: 20px; }
  .mini-cards.compact .mini-card h3 { margin: 2px 0 4px; font-size: 1.2rem; }
  .tier-cards { gap: 10px; }
  .tier-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 16px 20px; }
  .tier-card h3 { margin: 0; font-size: 1.3rem; }
  .tier-card .price-label { grid-row: 2; }
  .tier-card .price-amount { grid-column: 2; grid-row: 1 / span 2; font-size: 1.9rem; text-align: right; }
}

/* ============ Service accordions (phones) ============ */
.svc-toggle { display: none; }
@media (max-width: 760px) {
  .svc[data-collapsible] .svc-head { padding-bottom: 18px; }
  .svc[data-collapsible] .price-block { gap: 4px; padding-top: 14px; }
  .svc[data-collapsible] .price-amount { font-size: 2.1rem; }
  .svc-toggle {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    width: calc(100% - 2 * clamp(26px, 3.2vw, 40px));
    min-height: 48px;
    margin: 0 clamp(26px, 3.2vw, 40px) 6px;
    padding: 12px 40px 12px 0;
    border: 0; border-top: 1px solid var(--line-light);
    background: none;
    font: 600 0.76rem/1.4 var(--font-body);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-ink);
    text-align: left;
    cursor: pointer;
  }
  .svc-toggle::after { content: "\2212"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; line-height: 1; }
  .svc.is-collapsed .svc-toggle { margin-bottom: 8px; }
  .svc.is-collapsed .svc-toggle::after { content: "+"; }
  .svc.is-collapsed .svc-extra, .svc.is-collapsed .svc-more { display: none; }
}

/* ============ Quick pricing guides: whole rows open the matching service ============ */
.mini-prices li { display: block; padding: 0; }
.mini-prices a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 40px; padding: 9px 0; }
.mini-prices a span:first-child { text-decoration: underline; text-decoration-color: rgba(168, 133, 79, 0.45); text-underline-offset: 4px; }
.mini-prices a:hover span:first-child { text-decoration-color: currentColor; }
.price-table td a { color: inherit; text-decoration: none; }
.price-table tbody tr { cursor: pointer; transition: background 0.2s; }
.price-table tbody tr:hover th a, .price-table tbody tr:hover td { color: var(--gold-ink); }
.price-table th a { text-decoration: underline; text-decoration-color: rgba(168, 133, 79, 0.45); text-underline-offset: 4px; }
.price-table th a:hover { text-decoration-color: currentColor; }
/* html already pads anchor jumps below the sticky header; cards only add a little breathing room */
.svc { scroll-margin-top: 8px; }

/* ============ Portfolio: project cards, directory, Just Completed ============ */
.project-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.project-grid > li[hidden], .project-card[hidden] { display: none; }
.project-card {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
  transition: transform 0.35s var(--ease), border-color 0.35s;
}
a.project-card:hover { color: inherit; transform: translateY(-3px); border-color: var(--gold-deep); }
.project-card .media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--choc-900); }
.project-card .media img, .project-card .media .card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card .body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.project-card h3 { margin: 0; font-size: 1.45rem; }
.project-card .desc { font-size: 0.93rem; line-height: 1.55; color: var(--on-light-2); }
.project-card .meta { font-size: 0.82rem; color: var(--on-light-muted); }
.project-card .text-link { margin-top: auto; color: var(--gold-ink); }
.project-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.project-card .status-badge { color: var(--gold-ink); }
.project-card.status-completed .status-badge { color: var(--choc-900); background: var(--gold-metal); border-color: transparent; }
.project-card.status-upcoming .status-badge { border-style: dashed; color: var(--on-light-muted); }
.project-card.status-upcoming .status-badge::before { background: transparent; border: 1px solid currentColor; }
.progress { display: block; height: 4px; border-radius: 999px; background: var(--ivory-2); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--gold-metal); }

.project-card.view-all { justify-content: center; background: linear-gradient(160deg, var(--choc-800), var(--choc-950)); border-color: rgba(var(--gold-rgb), 0.4); color: var(--on-dark); }
a.project-card.view-all:hover { color: var(--on-dark); border-color: var(--gold); }
.project-card.view-all .body { justify-content: center; }
.project-card.view-all .desc { color: var(--on-dark-2); }
.project-card.view-all .text-link { margin-top: 6px; color: var(--gold); }

/* "Just Completed": a fine gold line traces the border once, a checkmark draws in,
   and one soft light sweep crosses the label. Nothing loops. */
.project-card .trace, .project-card .just-completed { display: none; }
.project-card.is-just-completed { border-color: var(--gold-deep); }
.project-card.is-just-completed .trace { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.project-card .trace rect { width: calc(100% - 1px); height: calc(100% - 1px); fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.project-card.is-just-completed .just-completed { position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; padding: 2px 8px 2px 4px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.just-completed .check { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.just-completed::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 20%, rgba(255, 246, 225, 0.9) 50%, transparent 80%); }
.project-card.will-celebrate .trace rect { stroke-dashoffset: 1; }
.project-card.will-celebrate .check { stroke-dashoffset: 1; }
.project-card.celebrate .trace rect { animation: hvc-trace 2.4s var(--ease) 0.2s forwards; }
.project-card.celebrate .check { animation: hvc-trace 0.7s ease-out 1.1s forwards; }
.project-card.celebrate .just-completed::after { animation: hvc-sweep 1.2s ease-in-out 1.6s 1 both; }
@keyframes hvc-trace { to { stroke-dashoffset: 0; } }
@keyframes hvc-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .project-card .trace rect, .just-completed .check { stroke-dashoffset: 0 !important; animation: none !important; }
  .just-completed::after { display: none; }
  a.project-card:hover { transform: none; }
}

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.filter-bar[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 42px; padding: 8px 18px; border: 1px solid var(--line-light); border-radius: 999px; background: var(--paper); font: 600 0.74rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-light-2); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.filter:hover { border-color: var(--gold-deep); color: var(--on-light); }
.filter[aria-pressed="true"] { background: var(--choc-800); border-color: var(--choc-800); color: var(--gold-light); }
.filter-count { margin: 0; font-size: 0.9rem; color: var(--on-light-muted); }
.filter-empty { margin-top: 20px; }

@media (max-width: 1023px) {
  .project-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .project-grid { grid-template-columns: minmax(0, 1fr); } }

/* Project page: milestones and progress updates */
.milestones { list-style: none; margin: 0 0 8px; padding: 0; }
.milestones li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 34px; }
.milestones li::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: 0; width: 1px; background: var(--line-light); }
.milestones li:last-child::after { display: none; }
.milestones .marker { position: absolute; left: 0; top: 5px; width: 17px; height: 17px; border: 1px solid var(--gold-deep); border-radius: 50%; background: var(--paper); }
.milestones li.is-done .marker { background: var(--gold-metal); border-color: transparent; }
.milestones .fine { margin: 0; }
.project-updates { list-style: none; margin: 0 0 8px; padding: 0; }
.project-updates li { padding: 12px 0; border-top: 1px solid var(--line-light); }
.project-updates time { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.project-updates p { margin: 4px 0 0; color: var(--on-light-2); }
.project-facts .progress { background: rgba(255, 244, 226, 0.12); }
.hero .project-status .status-badge { color: var(--gold); }

/* Every detailed service card carries the gold outline once reserved for the featured card */
.svc { border-color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-deep) inset, var(--shadow-card); }
/* Advisory tiers on phones: name above the price, so long prices never run into the name */
@media (max-width: 760px) {
  .tier-card { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .tier-card h3 { margin-bottom: 4px; }
  .tier-card .price-label { grid-row: auto; }
  .tier-card .price-amount { grid-column: auto; grid-row: auto; text-align: left; font-size: 2rem; }
}
/* Founder photo under the signature on the application confirmation */
.received-photo { max-width: 560px; margin: 22px auto 0; }
.received-photo img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--gold-border); box-shadow: var(--shadow-card); }
.received .dry-run-note { margin-top: 22px; }
.svc-alias { display: block; position: relative; top: -8px; }

/* ============ Audio play button (top right of a service card) ============ */
.svc { position: relative; }
.svc-audio { position: absolute; top: clamp(16px, 2.4vw, 26px); right: clamp(16px, 2.4vw, 26px); z-index: 2; --progress: 0; }
.audio-btn {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--choc-800);
  color: var(--gold-light);
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(40, 24, 12, 0.8);
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease);
}
/* Gold ring that fills clockwise as the clip plays */
.audio-btn::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--progress) * 360deg), rgba(var(--gold-rgb), 0.35) 0);
  -webkit-mask: radial-gradient(circle, transparent 25px, #000 25.5px);
          mask: radial-gradient(circle, transparent 25px, #000 25.5px);
}
.audio-btn:hover { background: var(--choc-700); color: #fff; transform: scale(1.04); }
.audio-btn svg { width: 22px; height: 22px; fill: currentColor; }
.audio-btn .audio-pause, .is-playing .audio-btn .audio-play { display: none; }
.is-playing .audio-btn .audio-pause { display: block; }
.svc:has(.svc-audio) .svc-head { padding-right: calc(clamp(26px, 3.2vw, 40px) + 56px); }
@media (prefers-reduced-motion: reduce) { .audio-btn:hover { transform: none; } }
.transcript { padding: 0 0 18px; }
.transcript p { margin: 0 0 0.7em; font-size: 0.95rem; color: var(--on-light-2); }
.transcript p:last-child { margin-bottom: 0; }

/* "Build what you need next" artwork (Technology). Sized by the panel's height and centred:
   tall panels (desktop) fill edge to edge; on wide panels (tablet, phone) it is enlarged just
   enough to keep the whole interface stack in view, and the artwork's background and pathways,
   which run past its frame, fill the sides. */
.feature-card .media-art { overflow: hidden; background: #1a110b; container-type: size; contain: paint; }
.feature-card .media-art .tech-ecosystem {
  position: absolute; top: 50%; left: 50%;
  height: 100%; width: auto; aspect-ratio: 1 / 1;
  overflow: visible;
  transform: translate(-50%, -50%);
}
@container (min-aspect-ratio: 1 / 1) { .feature-card .media-art .tech-ecosystem { height: 148%; } }
.feature-card .media-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px 10px rgba(0, 0, 0, 0.55); }
/* Static artwork, no hover zoom (matches the photo card; any motion here repaints the whole filtered SVG) */

/* ============ Home hero: staggered headline on chocolate, fading into the looping office video ============ */
/* Flat chocolate above and below, so the video rises out of it and settles back into it with no visible edge */
.hero-cinema { overflow: hidden; border-bottom: 0; background: var(--choc-900); }
/* The headline gets a wider stage than the page container, so the three statements can
   anchor near the left edge, the true centre and the right edge */
.cinema-head, .cinema-foot { max-width: none; padding-inline: clamp(16px, 6vw, 120px); }
/* A size container: the statements scale with the width actually available, so each stays on one line */
.cinema-head { position: relative; z-index: 2; container-type: inline-size; padding-top: clamp(36px, 4.5vw, 64px); padding-bottom: clamp(10px, 1.4vw, 22px); }
/* Three statements staggered across the width: left, centre, right */
.editorial {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: 0.05em;
  margin: 0;
  /* Scales with the screen's width and height, and never beyond what fits: the longest statement is
     10.6 em wide and has 11 of the 12 columns (8cqi x 10.6 = 85% of the width) */
  font-size: clamp(2.6rem, min(5vw, 8.6vh), 5rem);
  font-size: min(clamp(2.6rem, min(5vw, 8.6vh), 5rem), 8cqi);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ivory);
}
.editorial .line { display: block; white-space: nowrap; }
.editorial .ink { position: relative; display: inline-block; }
.editorial .l1 { grid-column: 1 / 12; justify-self: start; }
.editorial .l2 { position: relative; grid-column: 1 / 13; justify-self: center; }
.editorial .l3 { grid-column: 2 / 13; justify-self: end; text-align: right; }
.editorial em { color: var(--gold); }
/* Matching gold lines either side of "Smarter Technology". Both sit outside the words, so the phrase
   itself stays exactly centred */
.editorial .l2::before, .editorial .l2::after { content: ""; position: absolute; top: 55%; width: clamp(40px, 6vw, 110px); height: 1px; }
.editorial .l2::before { right: calc(100% + 0.35em); background: linear-gradient(90deg, transparent, var(--gold)); transform-origin: right; }
.editorial .l2::after { left: calc(100% + 0.35em); background: linear-gradient(270deg, transparent, var(--gold)); transform-origin: left; }
.hv-converge { position: absolute; z-index: 3; pointer-events: none; }

/* The video begins just below the third statement, is clearest through the middle and fades back into the
   chocolate above the supporting copy. The shading is fixed: the same from the first frame and on every loop */
.cinema-media { position: relative; z-index: 1; overflow: hidden; height: clamp(420px, 50vw, 780px); }
.hero-video-poster, .hero-video-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* The video takes over from the poster (its first frame, so nothing changes) once it is actually playing */
.hero-video-clip { opacity: 0; transition: opacity 0.4s ease; }
.hero-video-clip.is-playing { opacity: 1; }
.cinema-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Eased fades, so neither edge of the video shows: in over the top 45%, clearest through the middle, out over the bottom 42% */
    linear-gradient(180deg, var(--choc-900) 0%, rgba(29, 20, 13, 0.97) 5%, rgba(29, 20, 13, 0.9) 10%, rgba(29, 20, 13, 0.78) 15%, rgba(29, 20, 13, 0.63) 20%, rgba(29, 20, 13, 0.48) 25%, rgba(29, 20, 13, 0.34) 30%, rgba(29, 20, 13, 0.22) 35%, rgba(29, 20, 13, 0.14) 40%, rgba(29, 20, 13, 0.1) 45%, rgba(29, 20, 13, 0.1) 58%, rgba(29, 20, 13, 0.14) 63%, rgba(29, 20, 13, 0.24) 68%, rgba(29, 20, 13, 0.4) 74%, rgba(29, 20, 13, 0.58) 80%, rgba(29, 20, 13, 0.75) 86%, rgba(29, 20, 13, 0.9) 92%, rgba(29, 20, 13, 0.97) 96%, var(--choc-900) 100%),
    linear-gradient(90deg, rgba(29, 20, 13, 0.5), transparent 20%, transparent 80%, rgba(29, 20, 13, 0.5));
}
.cinema-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 14px clamp(32px, 5vw, 80px);
  padding-top: clamp(4px, 0.8vw, 12px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.cinema-foot .kicker { grid-column: 1 / -1; margin: 0; }
.cinema-foot .kicker::after { display: none; }
.cinema-foot .lead { margin: 0; max-width: 620px; }
.cinema-foot .actions { margin: 0; justify-content: flex-end; }

/* Laptops and desktops: the hero fills exactly the first screen below the menu, headline, video,
   supporting copy and buttons all in view; the video takes the space left. */
@media (min-width: 1024px) and (min-height: 560px) {
  .hero-cinema {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-h, 76px));
    height: calc(100svh - var(--header-h, 76px));
    min-height: 520px;
    max-height: 1100px;
  }
  .cinema-head { flex: none; padding-top: clamp(28px, 5vh, 64px); }
  .cinema-media { flex: 1 1 0; min-height: 220px; height: auto; }
  .cinema-foot { flex: none; padding-bottom: clamp(22px, 4vh, 48px); }
}
/* Short laptop screens (browser toolbars take the height): tighter spacing, so the buttons still fit on the
   first screen and the video keeps as much of the height as it can */
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 760px) {
  .cinema-head { padding-top: clamp(16px, 3vh, 24px); padding-bottom: 4px; }
  .cinema-media { min-height: 140px; }
  .cinema-foot { gap: 8px clamp(32px, 5vw, 80px); padding-top: 0; padding-bottom: 16px; }
}
@media (max-width: 1023px) {
  .editorial .l1 { grid-column: 1 / 13; }
  .cinema-foot { grid-template-columns: minmax(0, 1fr); }
  .cinema-foot .actions { justify-content: flex-start; }
}
/* Phones and folded or unfolded foldables: the statements centred and stacked, each on exactly one line.
   The size follows the headline's own width (the longest statement is 10.6 em, so 8.8cqi fills 93% of it,
   leaving a margin), up to the original phone size, so it adapts continuously as a foldable opens or closes */
@media (max-width: 760px) {
  .cinema-head { padding-top: 30px; padding-bottom: 8px; }
  .editorial {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.3em;
    font-size: min(3.4rem, 7.7vw);
    font-size: min(3.4rem, 8.8cqi);
    line-height: 1.04;
  }
  .editorial .l1, .editorial .l2, .editorial .l3 { grid-column: 1; justify-self: center; text-align: center; }
  .editorial .l2::before, .editorial .l2::after { top: 56%; width: 1.3em; }
  .cinema-media { height: clamp(240px, 80vw, 480px); }
  .cinema-foot { padding-bottom: 40px; }
  .cinema-foot .kicker { font-size: 0.66rem; letter-spacing: 0.14em; line-height: 1.7; text-wrap: balance; }
  .cinema-foot .lead { font-size: 0.95rem; line-height: 1.65; }
}

/* The introduction (added by script.js when motion is welcome; without it everything simply shows). It
   plays once from page load and never with the video's loop, and none of it waits for the video:
   1.0-1.7 s  the first statement fades up;
   1.7-2.4 s  a fine gold light traces the second, which fills in as its two lines draw outward;
   2.4-3.5 s  fine gold particles gather into the third (script.js), which resolves from delicate
              holographic letterforms into the solid statement. */
.hero-cinema.is-intro .l1 { animation: hv-rise 0.7s cubic-bezier(0.22, 0.7, 0.2, 1) 1s both; }
.hero-cinema.is-intro .l2 em { animation: hv-fill 0.42s ease-out 2.08s both; }
.hero-cinema.is-intro .l2 .ink::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 0.9px var(--gold-light);
  text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.55);
  animation: hv-trace 0.5s cubic-bezier(0.45, 0, 0.25, 1) 1.7s both, hv-fade-out 0.36s ease 2.14s forwards;
}
.hero-cinema.is-intro .l2 .ink::after {
  content: "";
  position: absolute;
  top: -0.06em;
  bottom: -0.06em;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-light) 30%, #fff8e6 50%, var(--gold-light) 70%, transparent);
  box-shadow: 0 0 12px 2px rgba(var(--gold-rgb), 0.7);
  opacity: 0;
  animation: hv-scan 0.5s cubic-bezier(0.45, 0, 0.25, 1) 1.7s both;
}
.hero-cinema.is-intro .l2::before, .hero-cinema.is-intro .l2::after { animation: hv-draw 0.55s cubic-bezier(0.22, 0.7, 0.2, 1) 2.05s both; }
.hero-cinema.is-intro .l3 .ink { animation: hv-materialize 0.75s ease-out 2.75s both; }
@keyframes hv-rise { from { opacity: 0; transform: translateY(0.16em); } to { opacity: 1; transform: none; } }
@keyframes hv-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hv-scan { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* The glow starts at nothing, so the words stay unseen until the light has traced them */
@keyframes hv-fill { from { color: transparent; text-shadow: 0 0 18px rgba(var(--gold-rgb), 0); } 40% { text-shadow: 0 0 18px rgba(var(--gold-rgb), 0.4); } to { color: var(--gold); text-shadow: 0 0 18px rgba(var(--gold-rgb), 0); } }
@keyframes hv-fade-out { to { opacity: 0; } }
@keyframes hv-draw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes hv-materialize {
  0% { opacity: 0; color: var(--gold-light); text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5); filter: blur(1.2px); }
  45% { opacity: 0.6; color: var(--gold-light); text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4); filter: blur(0.4px); }
  100% { opacity: 1; color: var(--ivory); text-shadow: 0 0 0 rgba(var(--gold-rgb), 0); filter: none; }
}
/* Never animate for reduced motion, whatever the script did */
@media (prefers-reduced-motion: reduce) {
  .hero-cinema.is-intro .l1, .hero-cinema.is-intro .l2 em, .hero-cinema.is-intro .l3 .ink,
  .hero-cinema.is-intro .l2::before, .hero-cinema.is-intro .l2::after { animation: none; }
  .hero-cinema.is-intro .l2 .ink::before, .hero-cinema.is-intro .l2 .ink::after, .hv-converge { display: none; }
}

/* ============ HVC Quick Guide (assessment) ============ */
.qg-app { max-width: 880px; margin: 0 auto; }
.qg-app:focus, .qg-app [data-focus]:focus { outline: none; }
.qg-intro h2 { margin-bottom: 0.5em; }
.qg-facts { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 14px; }
.qg-facts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; color: var(--on-light-2); }
.qg-facts .icon { width: 22px; height: 22px; color: var(--gold-ink); margin-top: 2px; }
.qg-card { scroll-margin-top: calc(var(--header-h, 76px) + 16px); }
.qg-progress { margin-bottom: 26px; }
.qg-progress-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--on-light-muted); }
.qg-module { color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.16em; }
.qg-bar { height: 4px; border-radius: 999px; background: var(--ivory-2); overflow: hidden; }
.qg-bar > span { display: block; height: 100%; background: var(--gold-metal); border-radius: inherit; }
.qg-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.qg-question { padding: 0; margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 600; line-height: 1.18; color: var(--on-light); }
.qg-hint { margin: 0 0 18px; font-size: 0.92rem; color: var(--on-light-muted); }
.qg-choices { display: grid; gap: 10px; }
.qg-choices .choice { min-height: 52px; }
.qg-note { min-height: 1.4em; margin: 14px 0 0; font-size: 0.92rem; color: var(--gold-ink); }
.qg-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 22px; }
.qg-nav-end { display: flex; flex-wrap: wrap; gap: 12px; }
.qg-path-note { margin: 18px 0 0; font-size: 0.82rem; color: var(--on-light-muted); }

.qg-results { display: grid; gap: 22px; }
.qg-results-head h2 { margin-bottom: 0.3em; }
.qg-results-head .lead { margin: 0; }
.qg-summary h3, .qg-steps h3, .qg-nexux h3 { font-size: 1.5rem; margin-bottom: 4px; }
.qg-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 16px 0 0; }
.qg-summary dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.qg-summary dd { margin: 4px 0 0; color: var(--on-light-2); font-size: 0.95rem; }
.qg-callout { margin: 0; padding: 16px 20px; border-left: 2px solid var(--gold-ink); border-radius: 0 10px 10px 0; background: var(--paper); color: var(--on-light-2); }
.qg-division { margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-light-muted); }
.qg-primary h3 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.qg-primary p { color: var(--on-dark-2); }
.qg-primary .kicker { color: var(--gold); }
.qg-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qg-support h3 { font-size: 1.45rem; }
.qg-support p { color: var(--on-light-2); font-size: 0.95rem; }
.qg-subhead { margin: 8px 0 0; font-size: 1.6rem; }
.qg-confidence { font-size: 0.88rem; font-style: italic; }
.qg-why-title { margin: 16px 0 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.qg-primary .qg-why-title { color: var(--gold); }
.qg-why { margin: 0 0 16px; padding-left: 1.1em; font-size: 0.92rem; }
.qg-why li { margin-bottom: 4px; }
.qg-primary .qg-why { color: var(--on-dark-2); }
.qg-steps ol { margin: 12px 0 0; padding-left: 1.3em; color: var(--on-light-2); }
.qg-steps li { margin-bottom: 6px; }
.qg-nexux p { color: var(--on-light-2); }
.qg-disclaimer { margin: 0; }
.qg-result-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.qg-review-list { list-style: none; margin: 20px 0; padding: 0; }
.qg-review-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line-light); }
.qg-review-q { margin: 0 0 4px; font-size: 0.9rem; color: var(--on-light-muted); }
.qg-review-a { margin: 0; color: var(--on-light); }

.qg-modal { max-width: min(560px, calc(100vw - 32px)); padding: clamp(28px, 4vw, 44px); border: 1px solid var(--gold-deep); border-radius: var(--radius-lg); background: var(--paper); color: var(--on-light); text-align: center; box-shadow: 0 40px 80px -30px rgba(20, 13, 8, 0.7); }
.qg-modal::backdrop { background: rgba(20, 13, 8, 0.62); }
.qg-modal .icon-ring { margin: 0 auto 18px; }
.qg-modal h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.qg-modal p { color: var(--on-light-2); }
.qg-modal .actions { justify-content: center; }

@media (max-width: 760px) {
  .qg-summary dl, .qg-support-grid { grid-template-columns: minmax(0, 1fr); }
  .qg-nav .btn, .qg-result-actions .btn { flex: 1 1 100%; }
  .qg-nav-end { flex: 1 1 100%; }
  .qg-review-list li { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .site-header, .site-footer, .qg-result-actions, .hero { display: none !important; }
}
.banner .qg-banner-note { margin-top: 8px; font-size: 0.85rem; color: var(--on-light-muted); }
.banner .qg-banner-meta { margin-top: 8px; color: var(--on-light); font-size: 0.95rem; }

/* Quick Guide banner: the full mountain landscape across the card, fading out to the left */
#quick-guide { isolation: isolate; }
#quick-guide > .landscape { position: absolute; z-index: 0; inset: auto 0 0 0; width: 100%; height: 100%; pointer-events: none; }
/* Phones: the mountains get their own strip beneath the button, clear of the text */
@media (max-width: 760px) { #quick-guide { padding-bottom: 96px; } #quick-guide > .landscape { height: 120px; } }

/* Quick Guide: the generated PDF shown on the results page, and the full-screen reader */
.qg-publication { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-lg); background: var(--choc-900); color: var(--on-dark); }
.qg-pub-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.qg-pub-head p { max-width: 62ch; }
.qg-pub-head h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 6px; }
.qg-pub-head p { margin: 0; color: var(--on-dark-2); font-size: 0.95rem; }
.qg-pub-head .kicker { color: var(--gold); }
.qg-pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qg-pub-actions .btn-outline { color: var(--on-dark); border-color: rgba(var(--gold-rgb), 0.6); }
.qg-pub-actions .text-link { color: var(--gold); }
.qg-viewer { max-height: min(78vh, 980px); overflow-y: auto; padding: 14px; border-radius: 10px; background: #120c07; border: 1px solid var(--line-dark); }
.qg-viewer:focus-visible, .qg-reader-pages:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.qg-page { margin: 0 auto 14px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9); }
.qg-page:last-child { margin-bottom: 0; }
.qg-page canvas { display: block; width: 100%; height: auto; }
.qg-viewer-status { margin: 24px; text-align: center; color: var(--on-dark-2); }
.qg-reader { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #120c07; color: var(--on-dark); }
.qg-reader[open] { display: flex; flex-direction: column; }
.qg-reader::backdrop { background: rgba(10, 6, 3, 0.9); }
.qg-reader-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px clamp(12px, 3vw, 28px); border-bottom: 1px solid var(--line-dark); background: var(--choc-900); }
.qg-reader-title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-light); }
.qg-reader-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qg-reader-actions .btn-outline { color: var(--on-dark); border-color: rgba(var(--gold-rgb), 0.6); }
.qg-reader-pages { flex: 1; overflow-y: auto; padding: clamp(10px, 3vw, 28px); width: min(100%, 900px); margin: 0 auto; }
@media (max-width: 760px) {
  .qg-pub-head { grid-template-columns: minmax(0, 1fr); }
  .qg-pub-actions .btn { flex: 1 1 100%; }
  .qg-viewer { padding: 8px; max-height: 70vh; }
  .qg-reader-actions { width: 100%; }
  .qg-reader-actions .btn { flex: 1 1 auto; }
}
.qg-pub-actions .btn-outline, .qg-reader-actions .btn-outline { background: transparent; }