/* Hallmark · macrostructure: Marquee Hero + pinned expertise stage · theme: studied-DNA (source: client Section_ref images)
 * paper: #0F0E0C warm off-black · accent: gold #C9A15C · display: Quicksand 700 · body: Plus Jakarta Sans · mono: IBM Plex Mono
 * nav: floating bar · footer: photo-panel · studied: yes · diversification suspended (client DNA)
 *
 * Z-index scale: 0 page aurora (body::before) · 1 page content · 50 theme fab · 60 mobile sheet · 70 skip-link
 */

/* ============ FONT (self-hosted so LiteSpeed can't strip the Google Fonts link) ============ */
@font-face {
  font-family: "Geom";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/geom.woff2") format("woff2"),
       url("https://fonts.gstatic.com/s/geom/v1/X7nq4bw6Cf6j8tOXHQ.woff2") format("woff2");
}

/* ============ TOKENS ============ */
:root,
:root[data-theme="dark"] {
  --bg: #0f0e0c;
  --bg-soft: #141311;
  --panel: #1a1917;
  --panel-2: #201e1b;
  --ink: #f4f0e6;
  --muted: #a79f8f;
  --line: rgba(244, 240, 230, 0.12);
  --line-soft: rgba(244, 240, 230, 0.07);

  --accent: #c9a15c;
  --accent-2: #ddbb7a;
  --accent-strong: #c9a15c;   /* small text / icons on bg */
  --accent-ink: #171207;      /* text on gold surfaces */

  --tile-1: #8a6f3b;
  --tile-2: #6e5e33;
  --tile-3: #565532;
  --tile-4: #403f2b;

  --glass: rgba(20, 18, 14, 0.55);
  --glass-line: rgba(244, 240, 230, 0.22);
  --img-scrim: linear-gradient(180deg, rgba(15, 14, 12, 0) 42%, rgba(15, 14, 12, 0.82) 100%);

  /* Claim card stays a lit cream room in both themes */
  --cc-bg: #f2ede2;
  --cc-ink: #1b1710;
  --cc-muted: #615a4d;
  --cc-line: rgba(27, 23, 16, 0.14);
  --cc-field: #faf7f0;
  --cc-error: #a34a31;

  --shadow-soft: 0 24px 70px -32px rgba(0, 0, 0, 0.85);

  /* Atmospheric aurora glows (page-wide, behind everything) */
  --aura-1: color-mix(in srgb, var(--accent) 16%, transparent);
  --aura-2: color-mix(in srgb, #6e5e33 24%, transparent);
}

:root[data-theme="light"] {
  --bg: #f1ede3;
  --bg-soft: #eae4d6;
  --panel: #faf7f0;
  --panel-2: #ffffff;
  --ink: #1b1710;
  --muted: #6e6759;
  --line: rgba(27, 23, 16, 0.16);
  --line-soft: rgba(27, 23, 16, 0.09);

  --accent: #b0883f;
  --accent-2: #96712e;
  --accent-strong: #8f6b2f;
  --accent-ink: #171207;

  --tile-1: #a3854a;
  --tile-2: #8c7440;
  --tile-3: #6f6a3e;
  --tile-4: #575233;

  --glass: rgba(250, 247, 240, 0.6);
  --glass-line: rgba(27, 23, 16, 0.2);
  --img-scrim: linear-gradient(180deg, rgba(15, 14, 12, 0) 40%, rgba(15, 14, 12, 0.78) 100%);

  --cc-bg: #ffffff;
  --cc-ink: #1b1710;
  --cc-muted: #615a4d;
  --cc-line: rgba(27, 23, 16, 0.14);
  --cc-field: #f7f4ec;
  --cc-error: #a34a31;

  --shadow-soft: 0 24px 60px -34px rgba(63, 51, 26, 0.45);

  --aura-1: color-mix(in srgb, var(--accent) 20%, transparent);
  --aura-2: color-mix(in srgb, #8c7440 22%, transparent);
}

:root {
  --font-display: "Geom", "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-hero: clamp(3.4rem, 11vw, 10rem);
  --text-h2: clamp(2.1rem, 4.4vw, 3.5rem);
  --text-cta: clamp(2.3rem, 5.2vw, 4.1rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;

  --container: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
  /* Single vertical-rhythm token: adjacent sections share it, no doubled bands */
  --section-pad: clamp(36px, 4vw, 56px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.55s;
}

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
  overflow-x: clip;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: color var(--dur-fast) var(--ease-out);
}

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

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.06; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol, figure, blockquote { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

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

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 70;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: 12px; }

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

/* ============ BACKGROUND: page-wide atmospheric aurora ============
   Two soft brand-gold glows that drift slowly behind everything. Pure CSS,
   renders identically everywhere, no canvas. Sections sit transparent on top,
   so the aurora shows through their negative space and behind the glass tiles. */
body::before {
  content: '';
  position: fixed; inset: -20vmax; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 20% 12%, var(--aura-1) 0%, transparent 60%),
    radial-gradient(34vmax 30vmax at 82% 84%, var(--aura-2) 0%, transparent 62%);
  filter: blur(20px);
  animation: aurora-drift 32s var(--ease-in-out) infinite alternate;
}
@keyframes aurora-drift {
  to { transform: translate3d(4%, -3%, 0) scale(1.12) rotate(3deg); }
}

main, .nav, .footer { position: relative; z-index: 1; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-lg { padding: 13px 12px 13px 26px; font-size: 1rem; }

.btn-orb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15, 12, 6, 0.16);
  font-size: 1.05rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-orb { transform: translate(2px, -2px); }

.btn-gold { background: var(--accent); color: var(--accent-ink); }
.btn-gold:hover { background: var(--accent-2); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line); padding: 12px 24px;
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-dark { background: #26211a; color: #f2ede2; }
.btn-dark:hover { background: #3a3327; }
.btn-dark .btn-orb { background: rgba(242, 237, 226, 0.16); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* ============ SHARED TYPE ATOMS ============ */
.section-title {
  font-size: var(--text-h2);
  letter-spacing: -0.025em;
  line-height: 1.03;
}

.paren-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.pill-eyebrow {
  display: inline-block;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 7px 16px; border-radius: var(--r-pill);
}

.accent-text { color: var(--accent); }
.dot-accent { color: var(--accent); }

section { padding-inline: var(--gutter); }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px var(--gutter) 0;
}

.nav-bar {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 20px;
  border-radius: 22px;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              backdrop-filter var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled .nav-bar {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border-color: var(--line-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
}

.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.nav-logo { width: 34px; height: 34px; object-fit: contain; }
.nav-word { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; }
.nav-word b { color: var(--accent); font-weight: 700; }
:root[data-theme="light"] .nav-logo,
:root[data-theme="light"] .footer-logo { filter: brightness(0.15); }

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--ink); transform: rotate(15deg); }
:root[data-theme="dark"] .theme-toggle .ph-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ph-sun { display: none; }

.nav-burger {
  display: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
}
.nav-burger span {
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 24px; }
.nav-burger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

.nav-sheet {
  position: fixed; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-sheet.is-open { opacity: 1; pointer-events: auto; z-index: 60; }
.nav-sheet nav { display: flex; flex-direction: column; gap: 26px; text-align: center; }
.nav-sheet a {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  text-decoration: none;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.nav-sheet.is-open a { opacity: 1; transform: none; }
.nav-sheet.is-open a:nth-child(1) { transition-delay: 0.05s; }
.nav-sheet.is-open a:nth-child(2) { transition-delay: 0.1s; }
.nav-sheet.is-open a:nth-child(3) { transition-delay: 0.15s; }
.nav-sheet.is-open a:nth-child(4) { transition-delay: 0.2s; }
.nav-sheet.is-open a:nth-child(5) { transition-delay: 0.25s; }
.nav-sheet .sheet-cta { color: var(--accent); }

/* Same-intent CTA hidden on very small screens; sheet carries it */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta { display: none; }
}

/* ============ HERO (full bleed; padding lives inside the stage) ============ */
.hero { padding: 0; }

.hero-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  /* 140px clears the shared header (promo banner + nav, ~146px) so hero
     content never sits under it; .hero-bg/.hero-shade stay full-bleed since
     they're position:absolute + inset:0, unaffected by this padding. */
  padding: 140px 40px 40px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, rgba(15, 14, 12, 0.72) 0%, rgba(15, 14, 12, 0.34) 40%, rgba(15, 14, 12, 0.12) 62%, rgba(15, 14, 12, 0.42) 100%),
    linear-gradient(180deg, rgba(15, 14, 12, 0.42) 0%, rgba(15, 14, 12, 0) 30%, rgba(15, 14, 12, 0) 62%, rgba(15, 14, 12, 0.6) 100%);
}

.hero-grid {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}

.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}

.hero-title {
  font-size: clamp(2.2rem, 4.3vw, 3.9rem);
  letter-spacing: -0.038em;
  line-height: 0.98;
  display: flex; flex-direction: column; align-items: flex-start;
  color: #f4f0e6;
  pointer-events: none;
}
.word-mask { overflow: hidden; display: inline-block; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.word { display: inline-block; }
.word-accent { color: var(--accent-2); position: relative; }
/* Signature: a gold rule draws in under "Render" after the words settle */
.word-accent::after {
  content: ''; position: absolute; left: 0.04em; right: 0.04em; bottom: 0.02em;
  height: 0.06em; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(1); transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}
.hero-title.draw-prep .word-accent::after { transform: scaleX(0); }

.hero-lede {
  margin-top: clamp(16px, 2.6vh, 28px);
  max-width: 42ch;
  color: rgba(244, 240, 230, 0.92);
  font-size: 1.04rem; font-weight: 500;
  text-shadow: 0 1px 22px rgba(15, 14, 12, 0.6);
}

.hero-chips {
  display: flex; gap: 12px;
  margin-top: clamp(24px, 5vh, 56px);
  max-width: 620px;
}
.hero-chips li {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-sm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 13px 16px;
  color: #f4f0e6;
}
.hero-chips b {
  font-family: var(--font-mono); font-weight: 500;
  color: var(--accent-2); font-size: 0.85rem;
}
.hero-chips span { font-weight: 600; font-size: 0.92rem; }

/* Hero form card — dark charcoal + gold, matching the client's reference mockup */
.claim-card.claim-card--hero {
  --hf-bg: #17130d;
  --hf-field: #221c14;
  --hf-line: rgba(201, 161, 92, 0.32);
  --hf-line-soft: rgba(244, 240, 230, 0.12);
  --hf-ink: #f4efe4;
  --hf-muted: #a89b84;
  display: block;
  grid-template-columns: none;
  max-width: 480px;
  margin-inline: auto;
  padding: clamp(16px, 2vw, 24px);
  background: var(--hf-bg);
  color: var(--hf-ink);
  border: 1px solid var(--hf-line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  color-scheme: dark;
}
.hf-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.hf-headline { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.hf-gift {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hf-line); border-radius: 10px;
  background: rgba(221, 187, 122, 0.1);
  color: var(--accent-2); font-size: 1rem;
}
.hero-form-title {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--hf-ink);
}
.hero-form-title .hf-accent { color: var(--accent-2); }
.hero-form-sub {
  color: var(--hf-muted); font-size: 0.76rem;
  margin: 4px 0 0;
}
.hf-rule { display: block; width: 32px; height: 2px; margin-top: 9px; border-radius: 2px; background: var(--accent); }
.hf-brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.hf-brand-logo { width: 18px; height: 18px; object-fit: contain; }
.hf-brand-word { font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; color: var(--hf-ink); white-space: nowrap; }
.hf-brand-word b { color: var(--accent-2); font-weight: 700; }
.hf-trust {
  display: flex; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--hf-line-soft);
}
.hf-trust li {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 0 6px; position: relative;
  font-size: 0.64rem; color: var(--hf-muted); line-height: 1.3;
}
.hf-trust li + li::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--hf-line-soft);
}
.hf-trust i { font-size: 1.05rem; color: var(--accent-2); }
.hf-trust b { display: block; font-size: 0.72rem; font-weight: 700; color: var(--hf-ink); }
.claim-card--hero .claim-form { padding: 0; gap: 14px; }
.claim-card--hero .form-field textarea { min-height: 84px; }
.claim-card--hero .btn-submit { width: 100%; justify-content: space-between; }
.claim-card--hero .form-fineprint { font-size: 0.8rem; }

/* ---- Forminator form skinned to match the dark gold hero card ---- */
.claim-card--hero .forminator-ui.forminator-custom-form { margin: 0; }
.claim-card--hero .forminator-row { margin-bottom: 11px !important; }
.claim-card--hero .forminator-row:last-of-type { margin-bottom: 0 !important; }
.claim-card--hero .forminator-label,
.claim-card--hero .forminator-label label {
  display: flex !important; align-items: center !important; gap: 6px !important;
  color: var(--hf-muted) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important; font-size: 0.64rem !important;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px !important;
}
.claim-card--hero .forminator-label::before {
  content: ''; flex: 0 0 auto; width: 12px; height: 12px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.claim-card--hero .forminator-field-name .forminator-label::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.2' r='3.4'/><path d='M5 20c0-3.7 3.2-6.3 7-6.3s7 2.6 7 6.3'/></svg>");
}
.claim-card--hero .forminator-field-email .forminator-label::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='5.5' width='17.2' height='13' rx='2'/><path d='M4 7.2l8 5.8 8-5.8'/></svg>");
}
.claim-card--hero .forminator-field-phone .forminator-label::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.6 4.5h3l1.4 4-2 1.7a11 11 0 0 0 5 5l1.7-2 4 1.4v3a1.6 1.6 0 0 1-1.7 1.6A15.4 15.4 0 0 1 5 5.7 1.6 1.6 0 0 1 6.6 4.5z'/></svg>");
}
.claim-card--hero .forminator-field-select .forminator-label::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='8' width='17.2' height='11' rx='2'/><path d='M8.5 8V6.2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2V8'/><path d='M3.4 13.2h17.2'/></svg>");
}
.claim-card--hero .forminator-field-textarea .forminator-label::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.6h8.4L18 7.2V19a1.4 1.4 0 0 1-1.4 1.4H6A1.4 1.4 0 0 1 4.6 19V5A1.4 1.4 0 0 1 6 3.6z'/><path d='M8 12h8M8 15.4h8M8 8.6h4'/></svg>");
}
.claim-card--hero .forminator-field-upload .forminator-label::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M15.5 6.5l-6.8 6.8a2.9 2.9 0 0 0 4.1 4.1l6.8-6.8a4.9 4.9 0 1 0-6.9-6.9l-6.8 6.8a6.9 6.9 0 0 0 9.7 9.7'/></svg>");
}
.claim-card--hero .forminator-field-text .forminator-label::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.6 14.4l4.8-4.8'/><path d='M11 7.6l1-1a3.5 3.5 0 0 1 5 5l-1 1'/><path d='M13 16.4l-1 1a3.5 3.5 0 0 1-5-5l1-1'/></svg>");
}
.claim-card--hero .forminator-required { color: var(--accent-2) !important; }
.claim-card--hero .forminator-error-message {
  color: var(--cc-error) !important;
  font-size: 12px !important;
}
/* Forminator also renders a top-of-form <ul> repeating every per-field
   message verbatim. Redundant with the inline errors next to each field,
   so hide it — .forminator-response-message.forminator-success (the
   post-submit confirmation) is untouched by this more specific selector. */
.claim-card--hero .forminator-response-message.forminator-error {
  display: none !important;
}
.claim-card--hero .forminator-input,
.claim-card--hero .forminator-textarea,
.claim-card--hero select.forminator-select,
.claim-card--hero .forminator-ui input[type="text"],
.claim-card--hero .forminator-ui input[type="email"],
.claim-card--hero .forminator-ui input[type="tel"],
.claim-card--hero .forminator-ui input[type="url"],
.claim-card--hero .forminator-ui textarea,
.claim-card--hero .forminator-ui select {
  background: var(--hf-field) !important;
  color: var(--hf-ink) !important;
  border: 1px solid var(--hf-line-soft) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-family: var(--font-body) !important; font-size: 0.85rem !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.claim-card--hero .forminator-ui textarea { min-height: 66px !important; }
.claim-card--hero .forminator-ui input::placeholder,
.claim-card--hero .forminator-ui textarea::placeholder { color: var(--hf-muted) !important; opacity: 1; }
.claim-card--hero .forminator-input:focus,
.claim-card--hero .forminator-textarea:focus,
.claim-card--hero .forminator-ui input:focus,
.claim-card--hero .forminator-ui textarea:focus,
.claim-card--hero .forminator-ui select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}
/* Enhanced select2 dropdown, if the form uses it */
.claim-card--hero .forminator-ui .select2-container--default .select2-selection {
  background: var(--hf-field) !important;
  border: 1px solid var(--hf-line-soft) !important;
  border-radius: 10px !important;
  min-height: 38px !important;
}
.claim-card--hero .forminator-ui .select2-selection__rendered { color: var(--hf-ink) !important; line-height: 36px !important; padding-left: 12px !important; font-size: 0.85rem !important; }
.claim-card--hero .forminator-ui .select2-selection__arrow { top: 5px !important; }
/* Upload control + descriptions */
.claim-card--hero .forminator-ui .forminator-description,
.claim-card--hero .forminator-ui .forminator-field--upload span { color: var(--hf-muted) !important; font-size: 0.7rem !important; }
/* Submit button matches the gold gradient CTA */
.claim-card--hero .forminator-ui button.forminator-button,
.claim-card--hero .forminator-ui button.forminator-button-submit {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: 11px 22px !important;
  font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 0.8rem !important;
  text-transform: uppercase; letter-spacing: 0.04em;
  width: 100%;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.claim-card--hero .forminator-ui button.forminator-button::before {
  content: '';
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background-color: rgba(23, 18, 10, 0.16);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171207' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13'/><path d='M13 6l6 6-6 6'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}
.claim-card--hero .forminator-ui button.forminator-button:hover { filter: brightness(1.06); }
.claim-card--hero .forminator-ui button.forminator-button:active { transform: scale(0.98); }
/* Plugin success / error notices */
.claim-card--hero .forminator-response-message { border-radius: 12px !important; }

/* ---- Harden the "none"-style form into the dark card ---- */
/* Kill any inherited light wrapper/row/field backgrounds so the dark card shows */
.claim-card--hero .forminator-ui,
.claim-card--hero .forminator-ui .forminator-row,
.claim-card--hero .forminator-ui .forminator-col,
.claim-card--hero .forminator-ui .forminator-field,
.claim-card--hero .forminator-ui .forminator-field-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--hf-ink) !important;
  max-width: 100%;
  box-sizing: border-box;
}
/* Two-column rows on the short fields, single column on mobile */
.claim-card--hero .forminator-ui .forminator-row {
  display: flex !important; flex-wrap: wrap; gap: 12px !important;
  margin: 0 0 11px 0 !important;
}
.claim-card--hero .forminator-ui .forminator-col {
  flex: 1 1 160px; min-width: 0; padding: 0 !important;
}
/* Re-apply the field frame (the transparency rule above stripped input borders) */
.claim-card--hero .forminator-ui input[type="text"],
.claim-card--hero .forminator-ui input[type="email"],
.claim-card--hero .forminator-ui input[type="tel"],
.claim-card--hero .forminator-ui input[type="url"],
.claim-card--hero .forminator-ui input[type="number"],
.claim-card--hero .forminator-ui textarea,
.claim-card--hero .forminator-ui select {
  background: var(--hf-field) !important;
  border: 1px solid var(--hf-line-soft) !important;
  width: 100% !important;
}
/* Descriptions / helper + required + labels legible on dark */
.claim-card--hero .forminator-ui .forminator-label,
.claim-card--hero .forminator-ui label { color: var(--hf-muted) !important; }
.claim-card--hero .forminator-ui .forminator-description,
.claim-card--hero .forminator-ui .forminator-timestamp { color: var(--hf-muted) !important; }
/* Upload dropzone as a dashed well with a gold upload badge + drag-drop copy.
   Real Forminator markup is .forminator-field-upload (single hyphen) >
   .forminator-multi-upload > input.forminator-input-file. The circle icon and
   "Drag & drop" copy are generated content since Forminator owns this markup;
   dragging a file onto the box isn't wired up, only click-to-browse works. */
.claim-card--hero .forminator-multi-upload {
  position: relative;
  background: var(--hf-field) !important;
  border: 1.4px dashed var(--hf-line) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px 12px !important;
}
.claim-card--hero .forminator-multi-upload::before {
  content: '';
  order: 1; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.4px solid var(--hf-line);
  background-color: rgba(221, 187, 122, 0.1);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddbb7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V6.5'/><path d='M8 10l4-4 4 4'/><path d='M5 17.5v.8A2.7 2.7 0 0 0 7.7 21h8.6a2.7 2.7 0 0 0 2.7-2.7v-.8'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.claim-card--hero .forminator-multi-upload::after {
  content: 'Drag & drop your files here\A or Browse Files';
  order: 2; flex: 1 1 140px;
  white-space: pre-line;
  font-size: 0.72rem; line-height: 1.45;
  color: var(--hf-muted);
}
.claim-card--hero .forminator-input-file {
  order: 3; flex: 1 1 100%;
  color: var(--hf-muted) !important;
  font-size: 0.76rem !important;
}
/* The native file input's own button needs its pseudo-element styled directly. */
.claim-card--hero .forminator-input-file::file-selector-button,
.claim-card--hero .forminator-input-file::-webkit-file-upload-button {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 13px !important;
  margin-right: 4px !important;
  font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 0.72rem !important;
  cursor: pointer !important;
  transition: background-color var(--dur-fast) var(--ease-out) !important;
}
.claim-card--hero .forminator-input-file:hover::file-selector-button,
.claim-card--hero .forminator-input-file:hover::-webkit-file-upload-button {
  background: var(--accent-2) !important;
}
.claim-card--hero .forminator-upload--remove {
  color: var(--cc-error) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}
/* Drop the builder-facing HTML helper block and the Save-as-Draft button */
.claim-card--hero .forminator-ui .forminator-html { display: none !important; }
.claim-card--hero .forminator-ui .forminator-button-draft,
.claim-card--hero .forminator-ui button[class*="draft"],
.claim-card--hero .forminator-ui a[class*="save-draft"] { display: none !important; }
/* Submit sits alone, full width */
.claim-card--hero .forminator-ui .forminator-row.forminator-buttons,
.claim-card--hero .forminator-ui .forminator-pagination-footer { display: block !important; }

/* Hidden on desktop, where the form sits right beside the pitch already. */
.hero-jump-cta { display: none; }

@media (max-width: 1060px) {
  .hero-stage { min-height: 0; padding: 120px 18px 28px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-left { padding-top: clamp(24px, 7vw, 64px); }
  .hero-title { font-size: clamp(2.4rem, 9.5vw, 4rem); }
  .hero-chips { flex-direction: column; max-width: none; margin-top: 26px; }
  .claim-card--hero { max-height: none; overflow: visible; }
  /* Shortens the ~1.7-screen scroll to the form: a direct jump link right
     under the 3-step pitch, so the primary action doesn't require scrolling
     past client logos and the pinned services section first. */
  .hero-jump-cta { display: inline-flex; margin-top: 20px; }
}

/* ============ CLIENT LOGO WALL ============ */
.logos {
  padding-block: var(--section-pad);
}
.logos-note {
  text-align: center;
  margin-bottom: var(--space-7);
}
.logo-wall {
  max-width: 1180px;
  /* margin-inline:auto would normally center this, but something in the
     cascade on this page neutralizes margin-left/right specifically on this
     element (confirmed live: padding/transform/border all apply fine via
     the same mechanism, margin alone never resolves). Centering via
     position+left+transform sidesteps it entirely and is unaffected. */
  position: relative; left: 50%; transform: translateX(-50%);
  /* Flexbox (not grid) so a last row with fewer items than columns still
     centers under justify-content, instead of grid's default left-packing. */
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
}
.logo-item {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 2.2vw, 26px) clamp(14px, 2vw, 24px);
  min-height: 104px;
  flex: 0 1 calc((100% - 14px * 4) / 5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-sm);
  /* Light chip so every client logo reads regardless of its own background */
  background: #f6f4ee;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.logo-item img {
  max-height: 48px; width: auto; max-width: 100%;
  object-fit: contain;
  /* Muted at rest, true brand color + lift on hover */
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.logo-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
}
.logo-item:hover img { filter: none; opacity: 1; }
:root[data-theme="light"] .logo-item { background: #fff; border-color: var(--line-soft); }

@media (max-width: 900px) { .logo-item { flex-basis: calc((100% - 14px * 2) / 3); } }
@media (max-width: 520px) { .logo-item { flex-basis: calc((100% - 14px) / 2); min-height: 88px; } }

/* ============ SERVICES ============ */
.services {
  padding-top: var(--section-pad);
}

.services-pin {
  max-width: var(--container); margin-inline: auto;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(12px, 3vh, 40px);
}

.services-head {
  margin-bottom: var(--space-6);
}
.services-head .section-title { text-align: center; }

.svc-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px 64px;
  gap: 18px;
  height: min(62vh, 690px);
}

.svc-main {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-soft);
}

.svc-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.svc-slide.is-active { opacity: 1; visibility: visible; }
.svc-slide img { width: 100%; height: 100%; object-fit: cover; }
.svc-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.svc-video.is-playing { opacity: 1; }
.svc-scrim { position: absolute; inset: 0; background: var(--img-scrim); }

.svc-counter {
  position: absolute; top: 24px; left: 28px;
  font-family: var(--font-mono); font-size: 1.05rem; color: #f4f0e6;
}
.svc-counter span { opacity: 0.55; }

.svc-copy {
  position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 36px);
  max-width: 52ch; color: #f4f0e6;
}
.svc-copy h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  margin-bottom: 10px; letter-spacing: -0.01em;
}
.svc-copy p { color: rgba(244, 240, 230, 0.85); font-size: 1rem; max-width: 44ch; }

.svc-explore { position: absolute; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 30px); z-index: 4; }

.svc-side { display: flex; flex-direction: column; gap: 18px; }
.svc-preview {
  position: relative; flex: 1;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-soft);
}
.svc-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.svc-preview img.is-active { opacity: 1; }

.svc-rail {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.svc-rail-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.svc-rail-btn:hover { border-color: var(--accent); }

/* Dots keep a small visual but a comfortable hit area */
.svc-dots { display: flex; flex-direction: column; }
.svc-dots button {
  width: 28px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.svc-dots button::before {
  content: '';
  width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.svc-dots button.is-active { height: 40px; }
.svc-dots button.is-active::before { height: 100%; background: var(--accent); }

@media (max-width: 1100px) {
  .svc-stage { grid-template-columns: minmax(0, 1fr) 56px; }
  .svc-side { display: none; }
}

@media (max-width: 900px) {
  .services-pin { min-height: 0; display: block; }
  .services-head .section-title { text-align: left; }
  .svc-stage { display: block; height: auto; }
  .svc-main { background: none; border: 0; }
  .svc-slide {
    position: static; opacity: 1; visibility: visible;
    border-radius: var(--r-sm); overflow: hidden;
    margin-bottom: 16px; position: relative;
  }
  .svc-slide img { height: 340px; }
  .svc-copy { left: 18px; bottom: 72px; right: 18px; }
  .svc-copy h3 { font-size: 1.45rem; }
  .svc-copy p { font-size: 0.92rem; }
  .svc-counter { top: 14px; left: 18px; font-size: 0.9rem; }
  .svc-explore { right: 14px; bottom: 14px; }
  .svc-rail { display: none; }
}

/* ============ WORK / CAROUSEL ============ */
.work {
  padding-top: var(--section-pad);
  overflow: clip;
}

.work-pin {
  max-width: var(--container); margin-inline: auto;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(12px, 3vh, 40px);
}

.work-head {
  /* No max-width/margin-inline here: .work-head is a flex item of the
     column-flex .work-pin, and cross-axis auto margins override stretch,
     shrinking it to fit-content instead of matching .carousel's width.
     Letting it stretch (the default) keeps it exactly as wide as the
     carousel below, title flush left and button flush right. */
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: var(--space-6);
}
.work-head .section-title { text-align: left; }

.carousel { overflow: hidden; padding-block: 10px; }
.carousel-track {
  display: flex; gap: 22px;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.car-card {
  position: relative;
  display: block;
  flex: 0 0 min(560px, 44vw);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  transform: scale(0.9);
  opacity: 0.6;
  transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out),
              box-shadow 0.7s var(--ease-out);
  user-select: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.car-card.is-active {
  transform: scale(1.06) translateY(-12px);
  opacity: 1;
  box-shadow: 0 42px 90px -36px rgba(0, 0, 0, 0.9);
  z-index: 2;
  border-color: var(--glass-line);
}
.car-card img { width: 100%; aspect-ratio: 16 / 9.6; object-fit: cover; }
.car-arrow {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center;
  color: #f4f0e6; font-size: 1.15rem;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.car-card:hover .car-arrow { background: var(--accent); color: var(--accent-ink); transform: translate(2px, -2px); }
.car-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 48px 24px 20px;
  background: var(--img-scrim);
  color: #f4f0e6;
  display: flex; flex-direction: column; gap: 3px;
}
.car-caption strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 600; line-height: 1.15;
}
.car-caption span { font-size: 0.88rem; color: rgba(244, 240, 230, 0.75); }
.car-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.carousel-dots {
  display: flex; justify-content: center;
  margin-top: var(--space-5);
}
.carousel-dots button {
  width: 26px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel-dots button::before {
  content: '';
  width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.carousel-dots button.is-active { width: 42px; }
.carousel-dots button.is-active::before { width: 100%; background: var(--accent); }

@media (max-width: 899px) {
  .work-pin { min-height: 0; display: block; }
  .work-head { flex-direction: column; align-items: flex-start; }
  .carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel-track { padding-inline: var(--gutter); transform: none !important; }
  .car-card { flex: 0 0 82vw; scroll-snap-align: center; transform: none; opacity: 1; }
  .car-card.is-clone { display: none; }
  .carousel-dots { display: none; }
}

/* ============ ABOUT ============ */
.about {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-pad);
  overflow: clip;
}
/* Two soft local glows give the glass stat tiles something to refract */
.about::before,
.about::after {
  content: '';
  position: absolute; z-index: 0;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.about::before {
  left: -12%; top: 6%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  animation: orb-a 22s var(--ease-in-out) infinite alternate;
}
.about::after {
  right: -14%; bottom: -6%;
  background: color-mix(in srgb, #6e5e33 34%, transparent);
  animation: orb-b 27s var(--ease-in-out) infinite alternate;
}
@keyframes orb-a { to { transform: translate(8vw, 5vh) scale(1.15); } }
@keyframes orb-b { to { transform: translate(-7vw, -5vh) scale(0.9); } }
.about > * { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; }
.about .pill-eyebrow { display: table; margin-bottom: 18px; }

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
/* Title left / description+CTA right on row 1, both images side by side
   on row 2 below. */
.about-head { grid-column: 1 / 7; grid-row: 1; align-self: start; }
.about-body { grid-column: 7 / 13; grid-row: 1; align-self: start; max-width: 68ch; text-align: right!important;}
.about-body p { color: var(--muted); text-align:right!important;}
.about-body .btn { margin-top: 28px; }

.about-img { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-soft); }
.about-img img { width: 100%; height: 112%; object-fit: cover; }
.about-img-1 { grid-column: 1 / 7; grid-row: 2; height: clamp(220px, 30vw, 340px); margin-top: clamp(24px, 4vw, 48px); }
.about-img-2 { grid-column: 7 / 13; grid-row: 2; height: clamp(220px, 30vw, 340px); margin-top: clamp(24px, 4vw, 48px); }

.stat-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  /* .about > * already centers this via max-width+margin-inline:auto.
     The old position:relative;left:50%;transform:translateX(-50%) hack
     here was fighting that (double-centering, pushed it off-axis) once
     the margin-inline:auto started actually resolving - removed. */
}
/* Specificity + !important: the site's shared header has a stray unscoped
   `ul:not(.wp-block){margin:0 !important}` rule (Elementor #9203). Its
   specificity is (0,1,1) via the tag+:not(.class) — a bare `.stat-tiles`
   (0,1,0) loses even with matching !important, so this repeats the existing
   [data-stat-tiles] hook to reach (0,2,0) and clear it. */
.stat-tiles[data-stat-tiles] {
  margin-top: clamp(36px, 5vw, 64px) !important;
}
.stat-tile {
  position: relative;
  border-radius: var(--r-md);
  padding: clamp(22px, 3vw, 34px);
  color: var(--ink);
  min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px;
  /* True glassmorphism: frosted translucent panel over the aurora + orbs */
  background: color-mix(in srgb, var(--panel) 32%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Each tile carries a faint tint of its accent, kept translucent for the glass read */
.tile-1 { background: color-mix(in srgb, var(--tile-1) 26%, transparent); }
.tile-2 { background: color-mix(in srgb, var(--tile-2) 26%, transparent); }
.tile-3 { background: color-mix(in srgb, var(--tile-3) 28%, transparent); }
.tile-4 { background: color-mix(in srgb, var(--tile-4) 30%, transparent); }
:root[data-theme="light"] .stat-tile { color: #1b1710; }
:root[data-theme="light"] .stat-tile .stat-label { color: #3a3326; }

/* Cursor-following border glare: --gx/--gy set by JS per tile, so the glow
   slides across tile borders as the pointer travels between cards. */
.stat-tile::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 120%),
    var(--accent-2), transparent 72%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}
/* Glass sheen on the hovered card */
.stat-tile::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 46%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.stat-tiles:hover .stat-tile::before { opacity: 1; }
.stat-tile:hover { transform: translateY(-5px); box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.7); }
.stat-tile:hover::after { opacity: 1; }
.stat-tile b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 4.6vw, 3.8rem); line-height: 1;
}
.stat-tile b em {
  font-style: normal; font-weight: 600;
  font-size: 0.38em; letter-spacing: 0.01em;
}
.stat-label { font-weight: 600; font-size: 1rem; }

@media (max-width: 900px) {
  .about-head { grid-column: 1 / 13; grid-row: auto; align-self: auto; }
  .about-body { grid-column: 1 / 13; grid-row: auto; align-self: auto; max-width: 62ch; }
  .about-img-1, .about-img-2 { grid-column: 1 / 13; grid-row: auto; margin-top: 0; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ TESTIMONIALS ============ */
.testimonials {
  padding-top: var(--section-pad);
}
.testimonials > * { max-width: var(--container); margin-inline: auto; }

.testi-pin {
  max-width: var(--container); margin-inline: auto;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(12px, 3vh, 40px);
}

.testi-head {
  margin-bottom: var(--space-6);
}
.testi-title { text-align: center; }

.testi-stage {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
}

.testi-list { display: flex; flex-direction: column; gap: 14px; }
.testi-card {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  height: 118px;
  text-align: left;
  flex: 1;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.testi-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.35) brightness(0.6);
  transition: filter var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.testi-card:hover img { transform: scale(1.04); }
.testi-card.is-active { border-color: var(--accent); }
.testi-card.is-active img { filter: saturate(0.9) brightness(0.72); }
.testi-card-name {
  position: absolute; left: 16px; bottom: 12px;
  color: #f4f0e6; font-weight: 600; font-size: 0.98rem;
  text-shadow: 0 1px 14px rgba(15, 14, 12, 0.7);
}
.testi-card .ph-plus {
  position: absolute; right: 14px; bottom: 12px;
  color: #f4f0e6; font-size: 1.05rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.testi-card.is-active .ph-plus { transform: rotate(45deg); color: var(--accent-2); }

.testi-panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  min-height: 400px;
}
.testi-quote {
  position: absolute; inset: 0;
  padding: clamp(24px, 4vw, 44px);
  display: flex; flex-direction: column;
  justify-content: flex-start;
  opacity: 0; visibility: hidden;
}
.testi-quote.is-active { opacity: 1; visibility: visible; }
.testi-tag { margin-bottom: 0; }
.testi-text {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.42; font-weight: 500;
  color: var(--muted);
  margin-block: 18px 0;
  max-width: 42ch;
}
.testi-text .hi { color: var(--ink); }
.testi-quote footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.testi-quote footer strong { display: block; font-size: 1.02rem; }
.testi-quote footer span { color: var(--muted); font-size: 0.88rem; }
.testi-stars { color: var(--accent); font-size: 0.95rem; letter-spacing: 2px; }

@media (max-width: 900px) {
  .testi-pin { min-height: 0; display: block; }
  .testi-stage { grid-template-columns: 1fr; }
  .testi-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .testi-list::-webkit-scrollbar { display: none; }
  .testi-card { flex: 0 0 44vw; height: 96px; }
  .testi-panel { min-height: 460px; }
}

/* ============ CTA ============ */
.cta { padding-block: var(--section-pad) 0; }

.cta-panel {
  position: relative;
  isolation: isolate;
  max-width: var(--container); margin-inline: auto;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 72px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-panel::before {
  content: '';
  position: absolute; z-index: 0;
  inset: -40%;
  background: radial-gradient(38% 30% at 78% 18%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
  animation: cta-glow 14s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes cta-glow { to { transform: translate(-9%, 9%) scale(1.18); } }
.cta-panel > * { position: relative; z-index: 1; }

.cta-copy { max-width: 162ch; }
.cta-title { font-size: var(--text-cta); letter-spacing: -0.015em; margin-bottom: 18px; }
.cta-copy > p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }

.cta-fan {
  position: relative;
  height: clamp(170px, 24vw, 240px);
  width: 100%;
  margin-top: clamp(18px, 3vw, 36px);
}
.fan-card {
  position: absolute; bottom: -12%;
  width: clamp(150px, 22vw, 300px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
  transition: transform 0.9s var(--ease-out) calc(var(--rv-i, 0) * 70ms),
              opacity 0.7s var(--ease-out) calc(var(--rv-i, 0) * 70ms);
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
.fan-card:nth-child(1) { left: 1%;  transform: rotate(-9deg)  translateY(16%); }
.fan-card:nth-child(2) { left: 17%; transform: rotate(-5deg)  translateY(6%); }
.fan-card:nth-child(3) { left: 34%; transform: rotate(-1deg)  translateY(0%); z-index: 2; }
.fan-card:nth-child(4) { left: 51%; transform: rotate(2.5deg) translateY(2%); }
.fan-card:nth-child(5) { left: 67%; transform: rotate(6deg)   translateY(9%); }
.fan-card:nth-child(6) { left: 82%; transform: rotate(10deg)  translateY(18%); }
.fan-card:hover { transform: rotate(0deg) translateY(-30%) scale(1.06); z-index: 3; }

@media (max-width: 720px) {
  .cta-fan { height: 190px; }
  .fan-card { width: 34vw; }
  .fan-card:nth-child(2) { left: 12%; }
  .fan-card:nth-child(5) { left: 58%; }
  .fan-card:nth-child(6) { left: 72%; }
}

/* ============ CLAIM CARD (lives in the hero) ============ */
.claim-card {
  background: var(--cc-bg);
  color: var(--cc-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  /* The card is always a light surface; keep UA form-control rendering light too. */
  color-scheme: light;
}

.claim-form { display: grid; gap: 18px; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: grid; gap: 7px; }
.form-field label { font-weight: 600; font-size: 0.92rem; }
.form-field label em { font-style: normal; font-weight: 400; color: var(--cc-muted); }

.form-field input,
.form-field textarea,
.form-field select {
  font: inherit; color: var(--cc-ink);
  background: var(--cc-field);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--cc-muted); }
.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover { border-color: color-mix(in srgb, var(--cc-ink) 42%, transparent); }
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 40px; }
.select-wrap i {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none; color: var(--cc-muted);
}

.field-error {
  display: none;
  color: var(--cc-error); font-size: 0.83rem; font-weight: 500;
}
.form-field.is-invalid input,
.form-field.is-invalid textarea { border-color: var(--cc-error); }
.form-field.is-invalid .field-error { display: block; }

.form-error-banner {
  background: color-mix(in srgb, var(--cc-error) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc-error) 38%, transparent);
  color: var(--cc-error);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.92rem; font-weight: 500;
}
.form-error-banner a { color: inherit; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-submit { justify-self: start; }
.form-fineprint { color: var(--cc-muted); font-size: 0.85rem; }

.claim-success {
  display: grid; gap: 16px; align-content: center; justify-items: start;
}
.success-orb {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.claim-success h3 { font-size: 1.7rem; }
.claim-success p { color: var(--cc-muted); max-width: 46ch; }
.claim-success .btn-ghost { color: var(--cc-ink); border-color: var(--cc-line); }
.claim-success .btn-ghost:hover { border-color: var(--cc-ink); }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ============ FOOTER (full bleed, padding inside) ============ */
.footer { padding: var(--section-pad) 0 0; }

.footer-panel {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  color: #f4f0e6;
  min-height: 50vh;
  display: flex; flex-direction: column;
  padding-inline: 40px;
}
.footer-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.footer-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 14, 12, 0.68) 0%, rgba(15, 14, 12, 0.88) 100%);
}

.footer-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 40px;
  padding: clamp(36px, 5vw, 64px) clamp(4px, 1vw, 16px) clamp(20px, 3vw, 36px);
}
.footer-brand p { color: rgba(244, 240, 230, 0.72); max-width: 30ch; margin-top: 16px; }
.footer-logo { width: 44px; height: 44px; object-fit: contain; }
:root[data-theme="light"] .footer-logo { filter: none; }

.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(244, 240, 230, 0.28);
  display: inline-flex; align-items: center; justify-content: center;
  color: #f4f0e6; font-size: 1.15rem;
  background: rgba(15, 14, 12, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover {
  border-color: var(--accent-2); background: var(--accent);
  color: var(--accent-ink); transform: translateY(-2px);
}

.footer-stats { display: flex; gap: 12px; }
/* Specificity + !important: same fix as .stat-tiles above, scoped via the
   parent instead of a data-hook since footer-stats has no attribute to reuse. */
.footer-brand .footer-stats { margin-top: clamp(28px, 3vw, 40px) !important; }
.footer-stats li {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(244, 240, 230, 0.2);
  background: rgba(15, 14, 12, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.footer-stats b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1;
}
.footer-stats span { font-size: 0.78rem; color: rgba(244, 240, 230, 0.66); }

.footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.footer-cols h4 {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  margin-bottom: 16px; color: #f4f0e6;
}
.footer-cols a {
  display: block;
  width: fit-content;
  position: relative;
  color: rgba(244, 240, 230, 0.66);
  text-decoration: none;
  font-size: 0.92rem;
  padding-block: 5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-cols a::after {
  content: ''; position: absolute; left: 0; bottom: 3px;
  width: 100%; height: 1px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer-cols a:hover { color: var(--accent-2); }
.footer-cols a:hover::after { transform: scaleX(1); }

/* Watermark wordmark: faint, cropped at the base bar (per reference) */
.footer-wordmark {
  position: relative;
  margin-top: auto;
  margin-bottom: -0.14em;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 10.5rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: rgba(244, 240, 230, 0.06);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  padding-top: 28px;
}

.footer-base {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(4px, 1vw, 16px) 22px;
  border-top: 1px solid rgba(244, 240, 230, 0.16);
  font-size: 0.85rem; color: rgba(244, 240, 230, 0.66);
}
.footer-base-right { display: flex; align-items: center; gap: 12px; }
.footer-base-right a {
  color: rgba(244, 240, 230, 0.8); font-size: 1.2rem;
  display: inline-flex; padding: 6px;
}
.footer-base-right a:hover { color: var(--accent-2); }

.to-top {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(244, 240, 230, 0.3);
  color: #f4f0e6;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.to-top:hover { border-color: var(--accent-2); transform: translateY(-2px); }

@media (max-width: 900px) {
  .footer-panel { padding-inline: 18px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-base { flex-wrap: wrap; }
}

/* ============ FLOATING THEME TOGGLE ============ */
.theme-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 55;
  width: 54px; height: 54px; border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-fab:hover { border-color: var(--accent); transform: rotate(15deg); }
.theme-fab:active { transform: scale(0.94); }
:root[data-theme="dark"] .theme-fab .ph-moon { display: none; }
:root[data-theme="light"] .theme-fab .ph-sun { display: none; }
@media (max-width: 720px) { .theme-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; } }

/* ============ SCROLL REVEALS (class-driven, JS adds classes only when animating) ============
   Three entrance variants so sections don't all rise identically:
   .rv       rise + fade  (text blocks)
   .rv-scale settle in    (media: images, carousel, panels)
   .rv-mask  wipe upward   (section headers) */
/* Content is visible by default; the hidden "from" state only applies while
   the .fr-js flag is on <html> (set pre-paint, auto-cleared if the main JS
   never boots). So a title is NEVER stuck hidden if a reveal fails to fire. */
.rv, .rv-scale, .rv-mask {
  transition: opacity 0.8s var(--ease-out), transform 0.85s var(--ease-out),
              clip-path 0.9s var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * 70ms);
}
.fr-js .rv:not(.rv-in)       { opacity: 0; transform: translateY(38px); }
.fr-js .rv-scale:not(.rv-in) { opacity: 0; transform: scale(0.94); }
.fr-js .rv-mask:not(.rv-in)  { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); }

/* CTA fan entrance: base state IS the final fan (visible without JS).
   JS adds .fan-prep to sink the cards, then removes it in view. */
.cta-fan.fan-prep .fan-card {
  opacity: 0;
  transform: translateY(150px) rotate(0deg);
}
.cta-fan .fan-card:hover { transition-delay: 0s !important; }


/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before, .about::before, .about::after, .cta-panel::before { animation: none !important; }
  .svc-video { display: none; }
  /* Never leave content in a hidden reveal-state when motion is off */
  .rv, .rv-scale, .rv-mask { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}