/* Axura Systems — navy and gold, from the logo. */

@font-face { font-family: "Cabinet Grotesk"; src: url(../fonts/cabinet-grotesk-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(../fonts/cabinet-grotesk-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(../fonts/cabinet-grotesk-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(../fonts/satoshi-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(../fonts/satoshi-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(../fonts/satoshi-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(../fonts/satoshi-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy-950: #060C1C;
  --navy: #0A1530;
  --navy-800: #0F1D3F;
  --navy-700: #16284F;
  --line: #1F3160;
  --ivory: #F3EEE3;
  --ivory-2: #C4C6CF;
  --ivory-3: #949AAD;
  --gold: #D4A833;
  --gold-2: #E8C766;
  --gold-ink: #1A1205;
  --f-d: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-b: "Satoshi", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --gut: 22px;
  /* Type scale (1.2 ratio) and spacing scale */
  --fs-xs: .75rem;      /* labels, eyebrows */
  --fs-sm: .875rem;     /* captions, meta */
  --fs-base: 1.0625rem; /* body */
  --fs-md: 1.1875rem;   /* lead paragraphs */
  --fs-lg: 1.5rem;      /* small headings */
  --lh-body: 1.65;
  --lh-tight: 1.04;
  --measure: 62ch;
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;
  --section-y: clamp(96px, 13vw, 168px);
  --border-gold: rgba(212, 168, 51, .3);
  --border-gold-strong: var(--border-gold-strong);
  --hdr: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }
body { margin: 0; background: var(--navy); color: var(--ivory); font: 400 var(--fs-base)/var(--lh-body) var(--f-b); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3 { font-family: var(--f-d); font-weight: 500; line-height: 1.06; letter-spacing: -.015em; margin: 0; text-wrap: balance; font-optical-sizing: auto; text-rendering: optimizeLegibility; }
h3 { line-height: 1.15; letter-spacing: -.01em; }
em { font-style: italic; font-weight: 500; color: var(--gold-2); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--ivory); color: var(--navy); border-radius: 6px; font-weight: 500; }
.skip:focus { top: 12px; }

.eyebrow { display: flex; align-items: center; gap: 14px; font: 500 .75rem/1.4 var(--f-b); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 54px; padding: 0 1.9em; border-radius: 999px; border: 1px solid transparent; font: 500 var(--fs-base)/1 var(--f-b); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition-property: background-color, color, border-color, box-shadow, scale; transition-duration: .3s, .3s, .3s, .3s, .15s; transition-timing-function: var(--ease); }
.btn:active { scale: .96; }
.btn--gold { background: linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); color: var(--gold-ink); }
@media (hover: hover) and (pointer: fine) { .btn--gold:hover { box-shadow: 0 0 0 6px rgba(212, 168, 51, .18), 0 12px 40px rgba(212, 168, 51, .25); } }
.btn--line { border-color: var(--border-gold-strong); color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { border-color: var(--gold); background: rgba(212, 168, 51, .08); } }
.btn--sm { min-height: 44px; padding: 0 1.2em; font-size: .75rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; letter-spacing: .04em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid rgba(212, 168, 51, .5); transition: border-color .3s, color .3s; }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--gold-2); border-color: var(--gold); } }

/* Progress + header */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, #B98E22, var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hdr); display: flex; align-items: center; gap: 24px; padding: 0 var(--gut); transition: background-color .4s, border-color .4s; border-bottom: 1px solid transparent; }
.site-header.is-solid { background: rgba(10, 21, 48, .96); border-color: var(--line); }
.brand img { height: 44px; width: auto; }
.site-header .btn { margin-left: auto; }
.nav { display: none; }
@media (min-width: 900px) {
  :root { --gut: 48px; --hdr: 84px; }
  .brand img { height: 60px; }
  .nav { display: flex; gap: 36px; margin-left: auto; }
  .nav a { font-size: var(--fs-sm); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ivory-2); padding: 6px 0; transition: color .3s; }
  @media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--gold-2); } }
  .site-header .btn { margin-left: 16px; }
}

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr) + 28px) var(--gut) 88px; overflow: hidden; }
.hero-light { position: absolute; width: 640px; height: 640px; left: var(--mx, 70%); top: var(--my, 45%); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(212, 168, 51, .1), transparent); pointer-events: none; transition: left .6s var(--ease), top .6s var(--ease); }
.swoosh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 899.98px) { .swoosh { opacity: .45; } }
.swoosh path { stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.hero-grid { position: relative; z-index: 2; display: grid; gap: 40px; width: 100%; max-width: 1280px; margin: 0 auto; }
.hero-mark { position: relative; order: -1; width: min(52vw, 230px); aspect-ratio: 755 / 739; justify-self: center; }
.hero-mark svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 24px var(--border-gold)); }
.glow { position: absolute; inset: -40%; background: radial-gradient(closest-side, rgba(232, 199, 102, .28), rgba(212, 168, 51, .08) 55%, transparent); }
.motion .glow { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .75; } }
.hero h1 { font-size: clamp(2.45rem, 10.2vw, 5.3rem); line-height: 1; letter-spacing: -.028em; margin: var(--sp-3) 0; max-inline-size: 16ch; }
.lede { font-size: var(--fs-md); line-height: 1.65; font-weight: 400; color: var(--ivory-2); max-width: var(--measure); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 36px; }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--ivory-3); }
.scroll-cue span { width: 1px; height: 36px; background: linear-gradient(var(--gold), transparent); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 64px; }
  .hero-mark { order: 0; width: min(36vw, 480px); }
}

/* Sections */
.section { position: relative; padding: var(--section-y) var(--gut); }
.section + .section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1200px, calc(100% - 2 * var(--gut))); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(212, 168, 51, .45), transparent); }
.wrap { max-width: 1200px; margin: 0 auto; }
.head { max-width: 820px; margin-bottom: clamp(var(--sp-5), 7vw, var(--sp-7)); }
.head h2, .contact-copy h2 { font-size: clamp(2.2rem, 7.8vw, 4.25rem); line-height: 1.04; letter-spacing: -.022em; margin-top: var(--sp-3); max-inline-size: 18ch; }

/* Approach */
.tenets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tenets li { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; row-gap: 10px; padding: 34px 0; border-top: 1px solid var(--line); }
.tenets li:last-child { border-bottom: 1px solid var(--line); }
.num { grid-row: span 2; font: italic 500 1.75rem/1 var(--f-d); color: var(--gold); padding-top: 4px; }
.tenets h3 { font-size: clamp(1.6rem, 5.6vw, 2.4rem); }
.tenets p { color: var(--ivory-2); font-weight: 400; max-width: 36em; }
@media (min-width: 900px) {
  .tenets li { grid-template-columns: 120px minmax(0, 1.2fr) minmax(0, 1fr); align-items: baseline; column-gap: 40px; padding: 44px 0; }
  .num { grid-row: auto; font-size: 2.25rem; }
}

/* Companies */
.feature { display: grid; gap: 40px; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--border-gold); border-radius: 4px; background: linear-gradient(160deg, var(--navy-800), var(--navy) 70%); }
.tag { display: inline-block; padding: 6px 12px; border: 1px solid rgba(212, 168, 51, .5); border-radius: 99px; font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); }
.feature h3 { font-size: clamp(2.6rem, 9vw, 4.2rem); margin: 18px 0 16px; }
.feature-lede { font-size: var(--fs-md); font-weight: 400; color: var(--ivory-2); max-width: 32em; }
.feature-list { list-style: none; margin: 28px 0 36px; padding: 0; display: grid; gap: 14px; }
.feature-list li { padding-left: 26px; position: relative; color: var(--ivory-2); font-weight: 400; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--gold); }
.feature-list span { color: var(--ivory); font-weight: 500; }
.feature-art { min-height: 260px; }
.map { position: relative; height: 100%; min-height: 260px; border-radius: 2px; overflow: hidden; background:
  linear-gradient(transparent 49.5%, rgba(212, 168, 51, .12) 50%, transparent 50.5%) 0 0 / 100% 64px,
  linear-gradient(90deg, transparent 49.5%, rgba(212, 168, 51, .1) 50%, transparent 50.5%) 0 0 / 72px 100%,
  var(--navy-950); }
.map i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--ivory-3); opacity: .5; }
.map .you { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px rgba(212, 168, 51, .18), 0 0 50px 12px rgba(212, 168, 51, .4); }
.map .you span { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); white-space: nowrap; padding: 7px 12px; background: var(--ivory); color: var(--navy); border-radius: 3px; font: 500 .75rem/1 var(--f-b); letter-spacing: .06em; }
.calc { position: relative; margin-top: var(--sp-6); display: grid; gap: var(--sp-5); align-items: center; padding: clamp(24px, 4.5vw, 56px); border: 1px solid var(--border-gold); border-radius: 4px; background: linear-gradient(160deg, var(--navy-800), var(--navy) 75%); box-shadow: var(--shadow-2), var(--inner-hi); }
.calc-copy { display: grid; gap: 14px; }
.calc-title { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.022em; line-height: 1.04; }
.calc-sub { color: var(--ivory-2); }
.calc-fields { display: grid; gap: 26px; margin-top: 14px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.calc-row label { font-size: var(--fs-sm); color: var(--ivory-2); }
.calc-row output { font: 500 1.25rem/1 var(--f-b); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gold-2); }
.calc input[type=range] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--p), #24365F var(--p)); }
.calc input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: #24365F; }
.calc input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FBE6A2, #D4A833 60%, #A97F1C); border: 2px solid var(--navy); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(212, 168, 51, .55); transition: transform .2s var(--ease); }
.calc input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #D4A833; border: 2px solid var(--navy); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(212, 168, 51, .55); }
.calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
.calc input[type=range]:focus-visible { outline: none; }
.calc input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--gold-2); }
.calc-gauge { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.calc-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-orbit { fill: none; stroke: rgba(212, 168, 51, .45); stroke-width: 1.2; }
.g-orbit-2 { stroke: rgba(212, 168, 51, .25); stroke-width: 1; }
.g-moon { fill: var(--gold-2); filter: drop-shadow(0 0 6px rgba(232, 199, 102, .9)); }
.g-spin { transform-origin: 160px 160px; }
.motion .g-spin-1 { animation: spin 26s linear infinite; }
.motion .g-spin-2 { animation: spin 40s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-track { fill: none; stroke: #1E2F59; stroke-width: 14; }
.g-fill { fill: none; stroke: url(#gaugeGold); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .26; filter: drop-shadow(0 0 10px rgba(212, 168, 51, .45)); }
.g-ticks line { stroke: rgba(243, 238, 227, .22); stroke-width: 1; }
.g-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; padding: 0 22%; }
.g-k { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.g-val { font: 500 clamp(2.2rem, 7vw, 3.4rem)/1 var(--f-b); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ivory); }
.g-year { font-size: var(--fs-sm); color: var(--ivory-2); }
.g-year span { color: var(--gold-2); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; } }
/* Tighter hand-off from Companies into How we work */
.companies { padding-bottom: clamp(64px, 7vw, 96px); }

.next-copy { font: italic 500 clamp(1.5rem, 5vw, 2rem)/1.25 var(--f-d); color: var(--ivory-2); max-width: 28em; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
}

/* Process */
.track { position: relative; }
.track-line { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.track-line span { position: absolute; inset: 0; background: linear-gradient(var(--gold-2), var(--gold)); transform-origin: 50% 0; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.stages li { position: relative; padding-left: 44px; }
.dot { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--gold); background: var(--navy); transition: background-color .4s, box-shadow .4s; }
.stages li.on .dot, html:not(.motion) .dot { background: var(--gold); box-shadow: 0 0 0 6px rgba(212, 168, 51, .15); }
.stage-k { font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.stages h3 { font-size: clamp(1.7rem, 5.6vw, 2.2rem); margin: 10px 0 10px; }
.stages p:last-child { color: var(--ivory-2); font-weight: 400; }
@media (min-width: 900px) {
  .track-line { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .track-line span { transform-origin: 0 50%; }
  .stages { grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .stages li { padding: 44px 0 0; }
  .dot { top: 0; }
}

/* Words (placeholders) */

/* Contact */
.contact { background: radial-gradient(90% 70% at 20% 0%, rgba(18, 34, 74, .7), transparent 60%); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.contact-copy > p:not(.eyebrow) { margin-top: 22px; font-weight: 400; color: var(--ivory-2); font-size: var(--fs-md); max-width: 30em; }
.contact-direct { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 20px; }
.contact-direct li { display: grid; gap: 6px; }
.contact-direct a { font: 500 1.5rem/1.2 var(--f-d); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .contact-direct a:hover { color: var(--gold-2); } }
.form-wrap { padding: clamp(24px, 5vw, 44px); border: 1px solid var(--line); border-radius: 4px; background: rgba(6, 12, 28, .55); }
.form { display: grid; gap: 22px; }
.row { display: grid; gap: 22px; }
.field label { display: block; margin-bottom: 8px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-2); }
.opt { letter-spacing: .05em; text-transform: none; color: var(--ivory-3); }
.field input, .field textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #6170A0; background: transparent; color: var(--ivory); font: 400 1.125rem/1.4 var(--f-b); border-radius: 0; transition: border-color .3s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.field [aria-invalid="true"] { border-bottom-color: #E38B6B; }
@media (min-width: 700px) { .row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 96px; align-items: start; } }

/* Footer */
.site-footer { padding: 72px var(--gut) 48px; border-top: 1px solid var(--line); background: var(--navy-950); }
.foot { display: grid; gap: 40px; }
.foot-logo { height: 72px; width: auto; }
.foot-nav, .foot-legal { display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: var(--fs-sm); letter-spacing: .16em; text-transform: uppercase; }
.foot-nav a, .foot-legal a { display: inline-block; padding: 8px 0; text-decoration: none; color: var(--ivory-2); }
@media (hover: hover) and (pointer: fine) { .foot-nav a:hover, .foot-legal a:hover { color: var(--gold-2); } }
.foot-legal { color: var(--ivory-3); letter-spacing: .08em; text-transform: none; align-items: center; }
@media (min-width: 900px) { .foot { grid-template-columns: auto 1fr; align-items: center; } .foot-nav { justify-content: flex-end; } .foot-legal { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--line); } }

/* Reveal */
.motion .reveal { visibility: hidden; }
.reveal .line-mask { padding-bottom: .08em; margin-bottom: -.08em; }

/* Legal pages */
.doc { max-width: 720px; margin: 0 auto; padding: calc(var(--hdr) + 72px) var(--gut) 100px; }
.doc h1 { font-size: clamp(2.6rem, 9vw, 4rem); margin: 18px 0 28px; }
.doc h2 { font-size: 1.75rem; margin: 1.8em 0 .5em; }
.doc p { color: var(--ivory-2); font-weight: 400; }
.doc p + p { margin-top: 1em; }
.doc h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; }
.doc ul { margin: .8em 0 0; padding-left: 1.2em; display: grid; gap: .6em; color: var(--ivory-2); }
.doc li b { color: var(--ivory); font-weight: 600; }
.doc address { font-style: normal; color: var(--ivory-2); line-height: 1.8; }
.doc .doc-date { font-size: var(--fs-sm); color: var(--ivory-3); }
.doc .lede-doc { margin-top: 1.2em; font-size: 1.125rem; color: var(--ivory); }
.doc .note { padding: 14px 16px; border-left: 2px solid var(--gold); background: rgba(212, 168, 51, .08); color: var(--ivory); }
.doc-header { background: rgba(10, 21, 48, .96); border-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* =========================================================
   Premium layer: intro, gold dust, cursor, marquee, stacking,
   spotlight, radar, horizontal process, statement, grain.
   ========================================================= */
main, .site-footer { position: relative; z-index: 2; }
.site-header { z-index: 60; }
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 75% 35%, #13244D 0%, var(--navy) 50%, var(--navy-950) 100%); }
.stardust { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
html:not(.motion) .stardust { display: none; }

/* Film grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.motion body::after { animation: grain 1s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } }

/* Intro */
.intro { display: none; }
.motion:not(.intro-seen) .intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--navy-950); }
.intro-inner { display: grid; justify-items: center; gap: 22px; }
.intro-mark { width: min(44vw, 220px); height: auto; filter: drop-shadow(0 0 30px rgba(212, 168, 51, .5)); }
.intro-word { display: flex; gap: .32em; font: 500 clamp(2rem, 7vw, 3.2rem)/1 var(--f-d); letter-spacing: .1em; color: var(--ivory); }
.intro-word span { display: inline-block; }
.intro-sub { font-size: .75rem; letter-spacing: .6em; text-transform: uppercase; color: var(--gold); padding-left: .6em; }
.intro-lock { overflow: hidden; }

/* Hero title + shimmer */
.hero-title .char { display: inline-block; will-change: transform, opacity, filter; }
.hero em, .head em, .statement em { background: linear-gradient(110deg, #B98E22 20%, #FBE6A2 42%, #D4A833 58%, #B98E22 80%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion .hero em, .motion .head em, .motion .statement em { animation: shimmer 6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.hero-title em { display: inline-block; }

/* Gold buttons: glint on hover */
.btn--gold { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) { .btn--gold:hover::after { transform: translateX(120%); transition: transform .9s var(--ease); } }

/* Custom cursor (fine pointers only) */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .motion .cursor { display: block; position: fixed; inset: 0; z-index: 95; pointer-events: none; }
  .motion body, .motion a, .motion button { cursor: none; }
  .motion input, .motion textarea { cursor: text; }
  .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; border-radius: 50%; }
  .cursor-dot { width: 6px; height: 6px; margin: -3px; background: var(--gold-2); }
  .cursor-ring { width: 38px; height: 38px; margin: -19px; border: 1px solid rgba(232, 199, 102, .7); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s, border-color .35s; }
  .cursor-ring b { font: 500 var(--fs-xs)/1 var(--f-b); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); opacity: 0; transition: opacity .25s; }
  .cursor.is-link .cursor-ring { width: 64px; height: 64px; margin: -32px; background: rgba(212, 168, 51, .12); border-color: var(--gold); }
  .cursor.is-view .cursor-ring { width: 92px; height: 92px; margin: -46px; background: var(--gold); border-color: var(--gold); }
  .cursor.is-view .cursor-ring b { opacity: 1; }
  .cursor.is-view .cursor-dot { opacity: 0; }
  .cursor-dot, .cursor-ring { will-change: transform; }
  .cursor { transition: opacity .2s; }
  .cursor.is-hidden { opacity: 0; }
}

/* Marquee */
.marquee { position: relative; z-index: 2; overflow: hidden; padding: clamp(28px, 5vw, 60px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee-track { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); width: max-content; will-change: transform; }
.marquee span { font: 500 clamp(4rem, 13vw, 10rem)/1 var(--f-d); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(232, 199, 102, .55); white-space: nowrap; }
.marquee span.it { font-style: italic; font-weight: 500; color: var(--gold); -webkit-text-stroke: 0; }
.marquee i { width: clamp(14px, 2vw, 22px); height: clamp(14px, 2vw, 22px); background: var(--gold); transform: rotate(45deg); flex: none; box-shadow: 0 0 24px var(--border-gold-strong); }

/* Approach: cards stack as you scroll */
.tenets li { position: sticky; top: calc(var(--hdr) + 24px + var(--i, 0) * 18px); background: linear-gradient(160deg, var(--navy-800), var(--navy) 80%); border: 1px solid var(--border-gold); border-radius: 4px; padding: 34px 24px; margin-bottom: 24px; transform-origin: 50% 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .35); }
.tenets li:last-child { border-bottom: 1px solid var(--border-gold); margin-bottom: 0; }
.tenets li:nth-child(1) { --i: 0; } .tenets li:nth-child(2) { --i: 1; } .tenets li:nth-child(3) { --i: 2; }
@media (min-width: 900px) { .tenets li { padding: 52px 48px; min-height: 260px; align-content: center; } }

/* Feature: tilt + spotlight + radar */
.feature { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; }
.spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(232, 199, 102, .13), transparent 60%); }
@media (hover: hover) and (pointer: fine) { .feature:hover .spot { opacity: 1; } }
.feature > *:not(.spot) { position: relative; }
.radar { position: absolute; left: 56%; top: 50%; width: 520px; height: 520px; margin: -260px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(232, 199, 102, .32), transparent 22%); -webkit-mask-image: radial-gradient(closest-side, #000 98%, transparent); mask-image: radial-gradient(closest-side, #000 98%, transparent); opacity: .7; }
.motion .radar { animation: sweep 5s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.map i::after, .map .you::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(232, 199, 102, .6); opacity: 0; }
.motion .map .you::after { animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }

/* Process: big numerals; horizontal pin on desktop */
.big-num { position: absolute; right: 0; top: -12px; font: italic 500 clamp(5rem, 18vw, 9rem)/1 var(--f-d); color: transparent; -webkit-text-stroke: 1px rgba(212, 168, 51, .22); pointer-events: none; }
@media (min-width: 900px) {
  .motion .process { padding-top: clamp(72px, 8vw, 112px); padding-bottom: clamp(72px, 8vw, 112px); overflow: hidden; }
  .motion .process .head { margin-bottom: 64px; }
  .motion .process .track { width: max-content; }
  .motion .stages { grid-template-columns: repeat(4, min(36vw, 520px)); gap: 6vw; }
  .motion .big-num { top: 8px; font-size: 11rem; }
  .motion .stages h3 { font-size: 2.6rem; }
  .motion .stages p:last-child { font-size: var(--fs-md); max-width: 26em; }
}

/* Statement: words light up as you scroll */
.statement { position: relative; z-index: 2; padding: var(--section-y) var(--gut); }
.statement-text { max-width: 1100px; margin: 0 auto; font: 500 clamp(2rem, 6.6vw, 5rem)/1.1 var(--f-d); letter-spacing: -.022em; text-wrap: balance; }
.statement .word { display: inline-block; }
.motion .hero-title { visibility: hidden; perspective: 900px; }
.statement em .word { background: inherit; background-size: inherit; -webkit-background-clip: text; background-clip: text; }


/* =========================================================
   Details pass: depth, borders, states, icons
   ========================================================= */
:root {
  --shadow-1: 0 1px 1px rgba(2, 6, 18, .25), 0 2px 4px rgba(2, 6, 18, .2);
  --shadow-2: 0 1px 2px rgba(2, 6, 18, .3), 0 8px 16px rgba(2, 6, 18, .28), 0 24px 48px rgba(2, 6, 18, .32);
  --shadow-3: 0 2px 4px rgba(2, 6, 18, .3), 0 16px 32px rgba(2, 6, 18, .34), 0 48px 96px rgba(2, 6, 18, .4);
  --inner-hi: inset 0 1px 0 rgba(243, 238, 227, .06);
}
.feature, .form-wrap, .tenets li { box-shadow: var(--shadow-2), var(--inner-hi); transition-property: border-color, box-shadow; transition-duration: .4s; transition-timing-function: var(--ease); }
.form-wrap:focus-within { border-color: var(--border-gold-strong); box-shadow: var(--shadow-3), var(--inner-hi), 0 0 0 1px rgba(212, 168, 51, .12); }
@media (hover: hover) and (pointer: fine) { .feature:hover { border-color: var(--border-gold-strong); box-shadow: var(--shadow-3), var(--inner-hi), 0 0 0 1px rgba(212, 168, 51, .12); } }
.form-wrap { border-color: var(--border-gold); }
.btn--gold { box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 245, 210, .55), inset 0 -1px 0 rgba(120, 85, 10, .35); }
@media (hover: hover) and (pointer: fine) { .btn--gold:hover { box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 245, 210, .55), 0 0 0 6px rgba(212, 168, 51, .16); } }
.btn--line { box-shadow: var(--inner-hi); }
.btn:focus-visible { outline-offset: 3px; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--ease); }
.nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
.foot-nav a, .foot-legal a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.contact-direct a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; transition: color .3s; }
.ico { width: 20px; height: 20px; flex: none; color: var(--gold); }
.feature-list li { padding-left: 34px; }
.feature-list li::before { top: .28em; width: 20px; height: 20px; border-radius: 50%; background: rgba(212, 168, 51, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23E8C766' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 1px var(--border-gold); }
.feature-list li, .tenets p, .stages p, .lede, .contact-copy p { text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field textarea:hover { border-bottom-color: #8592BE; } }

/* =========================================================
   Components (patterns adapted from 21st.dev)
   ========================================================= */

/* Mobile menu: floating pill that opens a full-screen menu */
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: 12px; padding: 0 16px 0 14px; border: 1px solid var(--border-gold-strong); border-radius: 999px; background: rgba(10, 21, 48, .6); color: var(--ivory); font: 500 var(--fs-xs)/1 var(--f-b); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition-property: border-color, background-color; transition-duration: .3s; }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { border-color: var(--gold); background: rgba(212, 168, 51, .08); } }
.menu-lines { position: relative; width: 18px; height: 10px; }
.menu-lines i { position: absolute; left: 0; right: 0; top: 4px; height: 1.5px; border-radius: 2px; background: var(--gold-2); transition: transform .45s var(--ease); }
.menu-lines i:first-child { transform: translateY(-3px); } .menu-lines i:last-child { transform: translateY(3px); }
.menu-open .menu-lines i:first-child { transform: rotate(45deg); }
.menu-open .menu-lines i:last-child { transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr) + 24px) var(--gut) 48px; background: radial-gradient(100% 70% at 80% 10%, #14264F, var(--navy-950) 70%); clip-path: circle(0% at calc(100% - 52px) 34px); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.menu-open .menu { clip-path: circle(150% at calc(100% - 52px) 34px); }
.menu-nav { display: grid; gap: 6px; }
.menu-nav a { display: flex; align-items: baseline; gap: 16px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 500 clamp(2.4rem, 11vw, 3.4rem)/1.1 var(--f-d); text-decoration: none; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s var(--ease), color .3s; }
@media (hover: hover) and (pointer: fine) { .menu-nav a:hover { color: var(--gold-2); } }
.menu-open .menu-nav a { opacity: 1; transform: none; }
.menu-open .menu-nav a:nth-child(1) { transition-delay: .2s; } .menu-open .menu-nav a:nth-child(2) { transition-delay: .26s; }
.menu-open .menu-nav a:nth-child(3) { transition-delay: .32s; } .menu-open .menu-nav a:nth-child(4) { transition-delay: .38s; }
.menu-num { font: italic 500 1rem/1 var(--f-d); color: var(--gold); }
.menu-mark { position: absolute; right: -40px; bottom: -30px; width: 260px; height: auto; opacity: .12; pointer-events: none; }
.menu-open { overflow: hidden; }
@media (max-width: 479.98px) { .header-cta { display: none; } .menu-btn { margin-left: auto; } }
@media (min-width: 900px) { .menu-btn, .menu { display: none; } }

/* Desktop nav: letters roll up on hover */
.roll { display: inline-flex; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: bottom; }
.roll .l { display: inline-block; white-space: pre; text-shadow: 0 1.3em 0 var(--gold-2); transition: transform .5s var(--ease); transition-delay: calc(var(--i) * 16ms); }
.nav a:focus-visible .roll .l { transform: translateY(-1.3em); }
@media (hover: hover) and (pointer: fine) { .nav a:hover .roll .l { transform: translateY(-1.3em); } }

/* Quotes: gold quotation-mark watermark */

/* Footer: oversized outlined wordmark */
.foot-mark { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 8px 0 0; font: 500 clamp(6rem, 27vw, 22rem)/.8 var(--f-d); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(212, 168, 51, .35); user-select: none; overflow: hidden; padding-bottom: .06em; }
.foot-mark span { display: inline-block; }

/* Stack Spread (port of Hyperiux "stack-spread", Axura-themed) */
.spread { padding: 0; }
.spread-stage { position: relative; }
.spread-copy { position: relative; z-index: 20; padding: var(--section-y) var(--gut) var(--sp-5); }
.spread .statement-text { font-size: clamp(2.2rem, 7.4vw, 5.6rem); }
.spread-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 var(--gut) var(--section-y); }
.sc { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; border: 1px solid var(--border-gold); background: var(--navy-800); box-shadow: var(--shadow-2); }
.sc img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.06) brightness(.92); outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; border-radius: inherit; }
.sc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 21, 48, 0) 40%, rgba(10, 21, 48, .55)), linear-gradient(135deg, rgba(212, 168, 51, .14), rgba(10, 21, 48, .2)); mix-blend-mode: multiply; pointer-events: none; }
.spread-hint { display: none; }
@media (min-width: 900px) { .spread-cards { grid-template-columns: repeat(4, 1fr); } }

.motion .spread { height: 340vh; }
.motion .spread-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.motion .spread-copy { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--gut); text-align: center; }
.motion .spread .statement-text { max-width: min(46vw, 760px); font-size: clamp(1.9rem, 3.5vw, 3.6rem); line-height: 1.12; text-shadow: 0 2px 30px rgba(6, 12, 28, .8); }
.motion .spread-cards { position: absolute; inset: 0; z-index: 10; display: block; padding: 0; }
.motion .sc { position: absolute; left: 50%; top: 50%; aspect-ratio: auto; will-change: transform; }
.motion .spread-hint { position: absolute; z-index: 25; left: 0; right: 0; bottom: 4vh; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--ivory-2); }
.motion .spread-hint span { width: 1px; height: 32px; background: linear-gradient(var(--gold), transparent); animation: hint 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 899.98px) {
  .motion .spread { height: 260vh; }
  .motion .spread .statement-text { max-width: 86vw; font-size: clamp(1.45rem, 6vw, 2rem); }
}

/* Hand-drawn underlines */
.ul-layer { position: absolute; inset: 0; pointer-events: none; }
.ul { position: absolute; overflow: visible; }
.ul path { fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(212, 168, 51, .45)); }

/* Load states: first paint matches the first animation frame (no flash-then-hide) */
.motion:not(.intro-seen) .intro-mark { clip-path: inset(-40% 100% -40% -40%); }
.motion:not(.intro-seen) .intro-word span, .motion:not(.intro-seen) .intro-sub { opacity: 0; }
.motion .hero .eyebrow, .motion .hero .lede, .motion .hero .actions, .motion .scroll-cue { opacity: 0; }
.motion .swoosh path { stroke-dashoffset: 1; }
.motion:not(.intro-seen) .hero-mark svg { opacity: 0; }

/* =========================================================
   Container Scroll (port of Aceternity "container-scroll-animation"), Axura-themed
   ========================================================= */
.cscroll { position: relative; z-index: 2; padding: clamp(72px, 8vw, 112px) var(--gut) var(--section-y); }
.cscroll-inner { max-width: 1100px; margin: 0 auto; perspective: 1000px; }
.cscroll-head { text-align: center; margin-bottom: var(--sp-5); }
.cscroll-head .eyebrow { justify-content: center; }
.cscroll-head .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.cscroll-head h2 { margin-top: var(--sp-3); font-size: clamp(2.4rem, 8.4vw, 5.5rem); line-height: 1.02; letter-spacing: -.028em; }
.cscroll-card {
  max-width: 1000px; margin: 0 auto; padding: 8px; border-radius: 30px;
  background: linear-gradient(160deg, #1A2C57, var(--navy-950));
  border: 1px solid var(--border-gold-strong);
  box-shadow: 0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003, inset 0 1px 0 rgba(243, 238, 227, .08);
  transform-origin: 50% 0; will-change: transform;
}
.cscroll-screen { overflow: hidden; border-radius: 22px; background: radial-gradient(120% 90% at 85% 0%, #14264F, var(--navy) 60%); border: 1px solid var(--line); }
.rp { padding: clamp(18px, 4vw, 44px); display: grid; gap: clamp(16px, 2.6vw, 28px); }
.rp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: clamp(14px, 2vw, 22px); border-bottom: 1px solid var(--line); }
.rp-brand { display: flex; align-items: center; gap: 12px; }
.rp-brand img { width: 30px; height: auto; flex: none; }
.rp-k { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.rp-t { margin-top: 4px; font: 500 clamp(1.05rem, 2.4vw, 1.5rem)/1.2 var(--f-d); }
.rp-tag { flex: none; padding: 6px 10px; border: 1px solid var(--border-gold-strong); border-radius: 99px; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); white-space: nowrap; }
.rp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rp-stats div { padding: clamp(12px, 2vw, 22px); background: var(--navy); }
.rp-stats dt { font-size: var(--fs-sm); line-height: 1.3; color: var(--ivory-2); }
.rp-stats dd { margin: 6px 0 0; font: 500 clamp(1.9rem, 4.6vw, 3rem)/1 var(--f-b); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ivory); }
.rp-body { display: grid; gap: clamp(16px, 2.6vw, 28px); }
.rp-chart { margin: 0; }
.rp-bars { display: flex; align-items: flex-end; gap: 10px; height: clamp(70px, 10vw, 120px); margin-top: 28px; }
.rp-bars span { position: relative; flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--gold-2), #B98E22); transform-origin: 50% 100%; box-shadow: 0 0 24px rgba(212, 168, 51, .2); }
.rp-bars b { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font: 500 var(--fs-xs)/1 var(--f-b); color: var(--ivory-2); }
.rp-done ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.rp-done li { position: relative; padding-left: 28px; font-size: var(--fs-sm); color: var(--ivory-2); }
.rp-done li::before { content: ""; position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%; background: rgba(212, 168, 51, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23E8C766' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: inset 0 0 0 1px var(--border-gold); }
.rp-note { font-size: var(--fs-xs); color: var(--ivory-3); }
@media (max-width: 599.98px) { .rp-done { display: none; } .rp-tag { padding: 5px 8px; letter-spacing: .1em; } .rp-top .rp-k { letter-spacing: .12em; white-space: nowrap; } }
@media (min-width: 900px) {
  .cscroll-card { padding: 14px; }
  .rp-stats { grid-template-columns: repeat(4, 1fr); }
  .rp-body { grid-template-columns: 1.2fr 1fr; align-items: end; }
}

/* =========================================================
   Typography pass (text wrap, tracking, mobile sizes)
   ========================================================= */
p, li, figcaption, dd, dt { text-wrap: pretty; }
.lede { letter-spacing: -.003em; }
.eyebrow, .stage-k, .rp-k, .tag, .rp-tag, .nav a, .foot-nav, .field label { letter-spacing: .2em; }
.btn { letter-spacing: .1em; font-weight: 500; }
.tenets h3 { font-size: clamp(1.55rem, 5.2vw, 2.3rem); }
.stages h3 { font-size: clamp(1.6rem, 5.2vw, 2.1rem); }
.feature h3 { letter-spacing: -.025em; }
.motion .spread .statement-text { font-size: clamp(1.8rem, 3.2vw, 3.3rem); line-height: 1.14; }
@media (max-width: 899.98px) {
  body { font-size: 1.0625rem; }
  .lede, .feature-lede, .contact-copy > p:not(.eyebrow), .split-copy > p:last-child { font-size: 1.0625rem; line-height: 1.65; }
  .eyebrow { letter-spacing: .24em; }
  .motion .spread .statement-text { font-size: clamp(1.4rem, 5.6vw, 1.9rem); }
}
.btn { white-space: nowrap; }
@media (max-width: 479.98px) { .btn { letter-spacing: .06em; padding: 0 1.4em; } }
@media (max-width: 599.98px) {
  .rp-top { flex-wrap: wrap; row-gap: 10px; }
  .rp-tag { order: -1; }
  .rp, .rp-stats div { min-width: 0; }
}
/* Calculator on phones: result sits above the sliders so it's visible while dragging */
@media (max-width: 899.98px) {
  .calc { gap: 18px; }
  .calc-copy { display: contents; }
  .calc-copy > .eyebrow, .calc-title, .calc-sub { order: 1; }
  .calc-gauge { order: 2; width: min(76vw, 300px); margin: 8px 0; }
  .calc-fields { order: 3; margin-top: 0; }
}

/* =========================================================
   Liquid glass + glow
   ========================================================= */
.glass {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 20px rgba(255, 255, 255, .05), 0 10px 28px rgba(2, 6, 18, .35);
}
.glass::before, .glass-gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px circle at var(--gx, 30%) var(--gy, -10%), rgba(255, 255, 255, .38), transparent 60%);
  opacity: .55; transition: opacity .35s;
}
@media (hover: hover) and (pointer: fine) { .glass:hover::before, .glass-gold:hover::before { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .glass:hover { border-color: rgba(232, 199, 102, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(232, 199, 102, .15), 0 0 28px rgba(212, 168, 51, .28), 0 12px 32px rgba(2, 6, 18, .4); } }
.glass-gold { isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 248, 220, .7), inset 0 -2px 6px rgba(120, 85, 10, .35), 0 0 24px rgba(212, 168, 51, .35), 0 10px 28px rgba(2, 6, 18, .35) !important; }
@media (hover: hover) and (pointer: fine) { .glass-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 248, 220, .8), inset 0 -2px 6px rgba(120, 85, 10, .35), 0 0 0 6px rgba(212, 168, 51, .16), 0 0 44px rgba(232, 199, 102, .55), 0 14px 34px rgba(2, 6, 18, .4) !important; } }
.motion .hero .glass-gold { animation: goldpulse 3.2s ease-in-out infinite; }
@keyframes goldpulse { 50% { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 248, 220, .7), 0 0 40px rgba(232, 199, 102, .55), 0 10px 28px rgba(2, 6, 18, .35); } }

/* Glow accents */

.eyebrow::before { box-shadow: 0 0 8px rgba(212, 168, 51, .8); }
@media (hover: hover) and (pointer: fine) { .feature:hover, .calc:hover { box-shadow: var(--shadow-3), var(--inner-hi), 0 0 60px rgba(212, 168, 51, .12); } }
.calc-gauge::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 168, 51, .16), transparent); filter: blur(10px); }
.g-val { text-shadow: 0 0 28px rgba(243, 238, 227, .25); }
.foot-mark { filter: drop-shadow(0 0 14px rgba(212, 168, 51, .18)); }

/* Floating logo badge */
.float-mark { position: fixed; z-index: 58; right: 24px; bottom: 24px; width: 64px; height: 64px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.float-mark.is-on { opacity: 1; pointer-events: auto; transform: none; }
.fm-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.fm-track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 2; }
.fm-prog { fill: none; stroke: var(--gold-2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(232, 199, 102, .9)); }
.fm-mark { position: relative; width: 30px; height: auto; filter: drop-shadow(0 0 8px rgba(212, 168, 51, .6)); will-change: transform; }
.fm-fly { position: fixed; z-index: 57; left: 0; top: 0; pointer-events: none; transform-origin: 50% 50%; opacity: 0; filter: drop-shadow(0 0 22px rgba(212, 168, 51, .45)); will-change: transform, opacity; }
@media (max-width: 899.98px) { .float-mark { right: 12px; bottom: 12px; width: 46px; height: 46px; } .fm-mark { width: 21px; } }
@media (prefers-reduced-motion: reduce) { .float-mark { transition: none; } }

/* =========================================================
   Type: Cabinet Grotesk (headings) + Satoshi (body)
   ========================================================= */
h1, h2, h3 { font-weight: 800; letter-spacing: -.03em; font-optical-sizing: auto; }
h3 { font-weight: 700; letter-spacing: -.02em; }
.hero h1 { line-height: .98; letter-spacing: -.04em; }
.head h2, .contact-copy h2, .cscroll-head h2, .calc-title, .statement-text { letter-spacing: -.035em; }
.statement-text { font-weight: 800; }
/* No italic in Cabinet Grotesk: the gold words stay upright, bold, and carry the shimmer */
h1 em, h2 em, h3 em, .statement-text em, .calc-title em { font-style: normal; font-weight: inherit; }
.num, .menu-num { font-style: normal; font-weight: 800; }
.big-num { font-style: normal; font-weight: 800; letter-spacing: -.04em; }
.marquee span { font-weight: 800; letter-spacing: -.035em; }
.marquee span.it { font-style: normal; }
.foot-mark { font-weight: 800; letter-spacing: -.04em; }
.intro-word { font-weight: 700; letter-spacing: .14em; }
.menu-nav a { font-weight: 700; letter-spacing: -.02em; }
.rp-t, .contact-direct a { font-weight: 700; letter-spacing: -.01em; }
.tenets h3, .stages h3 { letter-spacing: -.025em; }
body { font-weight: 400; letter-spacing: .002em; }
.lede, .feature-lede { letter-spacing: 0; }

/* =========================================================
   Page transitions: the logo flies across, sparkles trailing
   ========================================================= */
html.pt-cover { background: #060C1C; }
html.pt-cover body { visibility: hidden; }
.pt { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.pt-curtain { position: absolute; inset: 0; background: radial-gradient(120% 80% at 75% 35%, #13244D 0%, #0A1530 50%, #060C1C 100%); }
.pt-edge { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(transparent, #E8C766 30%, #E8C766 70%, transparent); box-shadow: 0 0 26px 6px rgba(232, 199, 102, .45); }
.pt-logo { position: absolute; left: 0; top: 0; width: 84px; height: auto; margin: -41px 0 0 -42px; filter: drop-shadow(0 0 16px rgba(232, 199, 102, .7)); will-change: transform; }
.pt-spark { position: fixed; z-index: 210; pointer-events: none; background: radial-gradient(circle, #FFF6D0, #E8C766 55%, #D4A833); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* =========================================================
   Inner pages (Approach, Companies, How we work)
   ========================================================= */
.rv { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv:not(.in) { opacity: 0; transform: translateY(26px); }
.nav a[aria-current="page"] { color: var(--gold-2); }
.page-hero { position: relative; z-index: 1; padding: calc(var(--hdr) + clamp(56px, 10vw, 120px)) var(--gut) clamp(40px, 6vw, 80px); }
.page-hero h1 { font-size: clamp(2.6rem, 9.4vw, 5.6rem); line-height: 1; letter-spacing: -.035em; max-inline-size: 15ch; margin: 22px 0; }
.page-hero em { color: var(--gold-2); font-style: italic; }
.page-hero .lede { max-width: 38em; }
.cta-band { position: relative; z-index: 1; text-align: center; padding: var(--section-y) var(--gut); border-top: 1px solid var(--line); }
.cta-band h2 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.06; letter-spacing: -.03em; max-inline-size: 18ch; margin: 18px auto 28px; }
.cta-band .eyebrow { justify-content: center; }
.cta-band .actions { justify-content: center; }
.rp-card { overflow: hidden; border: 1px solid var(--border-gold); border-radius: 22px; background: radial-gradient(120% 90% at 85% 0%, #14264F, var(--navy) 60%); box-shadow: var(--shadow-2); }

/* What Axura Local includes */
.svc { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; gap: 16px; }
.svc li { padding: 28px 26px; border: 1px solid var(--border-gold); border-radius: 4px; background: linear-gradient(160deg, var(--navy-800), var(--navy) 75%); transition: transform .35s var(--ease), border-color .35s; }
@media (hover: hover) and (pointer: fine) { .svc li:hover { transform: translateY(-4px); border-color: var(--gold); } }
.svc .num { display: block; margin-bottom: 14px; font-size: 1.25rem; }
.svc h3 { font-size: 1.5rem; margin-bottom: 8px; }
.svc p { color: var(--ivory-2); font-weight: 400; }
@media (min-width: 900px) { .svc { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* Pricing */
.pricing { position: relative; overflow: hidden; }
.price-sky { position: absolute; inset: 0; pointer-events: none; }
.pricing .wrap { position: relative; z-index: 1; }
.pricing .head { margin-inline: auto; text-align: center; }
.pricing .head .eyebrow { justify-content: center; }
.pricing .head h2 { margin-inline: auto; }
.toggle { position: relative; display: flex; width: fit-content; margin: 0 auto; padding: 4px; border: 1px solid var(--border-gold); border-radius: 99px; background: rgba(6, 12, 28, .6); }
.toggle-pill { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 99px; background: linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); transition: transform .45s var(--ease), width .45s var(--ease); }
.toggle button { position: relative; z-index: 1; min-height: 44px; padding: 0 22px; border: 0; background: none; border-radius: 99px; font: 500 var(--fs-sm)/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-2); cursor: pointer; transition: color .3s; }
.toggle button[aria-pressed="true"] { color: var(--gold-ink); }
.plans { list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; display: grid; gap: 22px; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; padding: 34px 28px 30px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10, 21, 48, .78); backdrop-filter: blur(6px); text-align: center; }
.plan.is-popular { border: 2px solid var(--gold); background: linear-gradient(160deg, rgba(22, 40, 79, .9), rgba(10, 21, 48, .9)); }
.plan .badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 7px 16px; border-radius: 99px; background: linear-gradient(135deg, #E8C766, #D4A833); color: var(--gold-ink); font: 700 .75rem/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.plan h3 { font-size: 1.5rem; }
.plan .plan-desc { margin-top: 8px; font-size: var(--fs-sm); color: var(--ivory-2); }
.plan .price { margin-top: 26px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.price-num { font: 800 clamp(2.4rem, 7vw, 3.2rem)/1 var(--f-d); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-per { font-size: var(--fs-sm); color: var(--ivory-3); }
.plan .bill { margin-top: 8px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-3); }
.plan ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; color: var(--ivory-2); font-weight: 400; font-size: .9375rem; }
.plan li { display: flex; gap: 12px; }
.plan li::before { content: "\2713"; flex: none; color: var(--gold); font-weight: 700; }
.plan .btn { margin-top: 30px; width: 100%; }
.price-note { margin-top: 32px; text-align: center; font-size: var(--fs-sm); color: var(--ivory-3); }
.plan.is-yearly .price-num { color: var(--gold-2); animation: saveGlow 1.6s var(--ease); }
.price-save { margin: 12px auto 0; width: fit-content; padding: 7px 14px; border: 1px solid var(--border-gold); border-radius: 99px; background: rgba(212, 168, 51, .12); color: var(--gold-2); font: 700 var(--fs-xs)/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) .25s backwards; }
@keyframes saveGlow { 35% { text-shadow: 0 0 22px rgba(232, 199, 102, .55); } }
.plan-callout { margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: rgba(212, 168, 51, .1); color: var(--ivory); font-size: var(--fs-sm); }
.addons { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; border-top: 1px solid var(--line); }
.addons li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.addon-name { color: var(--ivory); }
.addon-name small { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--ivory-3); }
.addon-price { flex: none; font: 700 1.125rem/1 var(--f-d); color: var(--gold-2); font-variant-numeric: tabular-nums; }
.addon-note { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: var(--fs-sm); color: var(--ivory-2); }
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 20px 4px; cursor: pointer; list-style: none; font-weight: 500; color: var(--ivory); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 500 1.5rem/1 var(--f-d); color: var(--gold); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--ivory-2); }
@media (prefers-reduced-motion: reduce) { .plan.is-yearly .price-num, .price-save { animation: none; } }
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .plan.is-popular { transform: translateY(-18px); }
}

/* Axura Health: coming soon, under construction */
.soon { position: relative; overflow: hidden; margin-top: clamp(32px, 5vw, 56px); padding: clamp(44px, 6vw, 84px) clamp(22px, 5vw, 64px) clamp(32px, 5vw, 64px); border: 1px solid var(--border-gold); border-radius: 4px; background: linear-gradient(160deg, var(--navy-800), var(--navy) 70%); text-align: center; }
.soon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(-45deg, #D4A833 0 14px, #0A1530 14px 28px); background-size: 39.6px 100%; }
.soon::before { animation: stripes 1.4s linear infinite; }
@keyframes stripes { to { background-position: 39.6px 0; } }
.soon-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid rgba(212, 168, 51, .5); border-radius: 99px; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); }
.soon-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: soonPulse 1.6s ease-in-out infinite; }
@keyframes soonPulse { 50% { transform: scale(1.8); opacity: .35; } }
.soon h3 { font-size: clamp(2.4rem, 8vw, 4.4rem); letter-spacing: -.03em; margin: 22px 0 10px; }
.soon p.soon-lede { max-width: 32em; margin: 0 auto; color: var(--ivory-2); font-size: var(--fs-md); }
.soon-ecg { width: min(520px, 100%); margin: 30px auto 6px; display: block; overflow: visible; }
.soon-ecg path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.soon-ecg .ecg-track { stroke: rgba(212, 168, 51, .22); }
.soon-ecg .ecg-live { stroke: #E8C766; stroke-dasharray: .22 .78; stroke-dashoffset: 0; animation: ecg 2.6s linear infinite; filter: drop-shadow(0 0 5px rgba(232, 199, 102, .8)); }
@keyframes ecg { to { stroke-dashoffset: -1; } }
.soon-bar { width: min(420px, 100%); margin: 22px auto 0; }
.soon-bar-k { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-3); }
.soon-bar-track { height: 8px; border: 1px solid var(--border-gold); border-radius: 99px; overflow: hidden; background: rgba(6, 12, 28, .6); }
.soon-bar-fill { height: 100%; width: 62%; border-radius: 99px; background: repeating-linear-gradient(-45deg, #E8C766 0 10px, #B98E22 10px 20px); background-size: 28.3px 100%; animation: stripes2 1s linear infinite; }
@keyframes stripes2 { to { background-position: 28.3px 0; } }
.soon .actions { justify-content: center; margin-top: 34px; }
.soon-note { margin-top: 26px; font-size: var(--fs-sm); color: var(--ivory-3); }

.page-hero + .section { padding-top: 0; }

/* =========================================================
   Buttons v2: liquid glass (secondary) + gold metal (primary)
   Ported from the LiquidButton / MetalButton components to plain CSS.
   ========================================================= */
.glass {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 0 8px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3.5px rgba(255, 255, 255, .09), inset -3px -3px .5px -3.5px rgba(255, 255, 255, .85),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .6), inset -1px -1px 1px -.5px rgba(255, 255, 255, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .12), inset 0 0 2px 2px rgba(255, 255, 255, .06), 0 0 12px rgba(0, 0, 0, .15);
  transition: scale .3s var(--ease), box-shadow .3s, border-color .3s;
}
.glass::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); backdrop-filter: url(#container-glass); }
@media (hover: hover) and (pointer: fine) { .btn.glass:hover { scale: 1.05; border-color: rgba(232, 199, 102, .5); box-shadow: 0 0 8px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3.5px rgba(255, 255, 255, .09), inset -3px -3px .5px -3.5px rgba(255, 255, 255, .85),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .6), inset -1px -1px 1px -.5px rgba(255, 255, 255, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .12), 0 0 26px rgba(212, 168, 51, .25); } }
.btn.glass:active { scale: .97; }

.btn--gold, .btn--gold.glass-gold {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--gold-ink); text-shadow: 0 1px 0 rgba(255, 241, 179, .55);
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #FFEBA1 0%, #E2C062 45%, #B8963C 100%) padding-box,
              linear-gradient(180deg, #917100, #EAD98F) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 253, 221, .95), inset 0 -2px 0 rgba(133, 104, 7, .5), 0 3px 8px rgba(0, 0, 0, .28), 0 0 22px rgba(212, 168, 51, .22) !important;
  transition: transform .25s cubic-bezier(.1, .4, .2, 1), box-shadow .25s, filter .25s;
}
.btn--gold::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) { .btn--gold:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 253, 221, .95), inset 0 -2px 0 rgba(133, 104, 7, .5), 0 4px 12px rgba(0, 0, 0, .3), 0 0 36px rgba(232, 199, 102, .45) !important; } }
@media (hover: hover) and (pointer: fine) { .btn--gold:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); } }
.btn--gold:active { scale: 1; transform: translateY(2.5px) scale(.99); box-shadow: inset 0 1px 0 rgba(255, 253, 221, .8), 0 1px 2px rgba(0, 0, 0, .3) !important; }

/* "Visit Axura Local": radar sweep, bobbing pin, sonar ripples */
.btn-visit { position: relative; overflow: hidden; isolation: isolate; gap: 14px; padding: 0 1.6em 0 1.2em; color: var(--ivory); border: 1px solid rgba(212, 168, 51, .55);
  background: radial-gradient(120% 160% at 0% 50%, rgba(212, 168, 51, .16), rgba(10, 21, 48, .7) 60%); transition: scale .3s var(--ease), border-color .3s, box-shadow .3s; }
@media (hover: hover) and (pointer: fine) { .btn-visit:hover { scale: 1.04; border-color: var(--gold-2); box-shadow: 0 0 34px rgba(212, 168, 51, .3); } }
.bv-radar { position: absolute; z-index: -1; left: 30px; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(232, 199, 102, .38), transparent 18%); animation: sweep 3.6s linear infinite; opacity: .55; transition: opacity .3s; }
@media (hover: hover) and (pointer: fine) { .btn-visit:hover .bv-radar { opacity: 1; } }
.bv-pin { position: relative; width: 22px; height: 22px; flex: none; }
.bv-pin svg { position: relative; z-index: 1; width: 22px; height: 22px; fill: var(--gold-2); stroke: var(--navy); stroke-width: 1.2; animation: pinBob 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(232, 199, 102, .8)); }
.bv-pin svg circle { fill: var(--navy); stroke: none; }
.bv-pin i { position: absolute; left: 50%; bottom: -3px; width: 26px; height: 9px; margin-left: -13px; border-radius: 50%; border: 1px solid rgba(232, 199, 102, .8); opacity: 0; animation: ripple 1.8s ease-out infinite; }
.bv-pin i + i { animation-delay: .9s; }
@keyframes pinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ripple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.bv-arrow { transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn-visit:hover .bv-arrow { transform: translateX(6px); } }
@media (hover: hover) and (pointer: fine) { .btn-visit:hover .bv-pin svg { animation-duration: .7s; } }

/* =========================================================
   Inner pages v2: split heroes with an animated centerpiece
   ========================================================= */
.js .radar { animation: sweep 5s linear infinite; }
.js .map .you::after { animation: ping 2.4s ease-out infinite; }
.js .g-spin-1 { animation: spin 26s linear infinite; }
.js .g-spin-2 { animation: spin 40s linear infinite reverse; }
.page-hero { overflow: hidden; }
.page-hero .hero-in { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; max-width: 1280px; margin: 0 auto; }
.page-hero .actions { margin-top: 32px; }
.page-hero h1 .w { display: inline-block; }
.js .page-hero h1 .w { opacity: 0; transform: translateY(40%) rotate(4deg); filter: blur(10px); animation: wordIn 1.1s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * 70ms); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: blur(0); } }
.js .page-hero .eyebrow, .js .page-hero .lede, .js .page-hero .actions { opacity: 0; animation: fadeUp 1s var(--ease) forwards; }
.js .page-hero .eyebrow { animation-delay: .15s; } .js .page-hero .lede { animation-delay: .6s; } .js .page-hero .actions { animation-delay: .75s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-art { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.js .hero-art { opacity: 0; animation: artIn 1.4s var(--ease) .4s forwards; }
@keyframes artIn { from { opacity: 0; transform: scale(.86) rotate(-6deg); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .page-hero .hero-in { grid-template-columns: 1.15fr .85fr; gap: 64px; } }

/* Floating light orbs behind each hero */
.orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.orbs i:nth-child(1) { width: 420px; height: 420px; left: -120px; top: 10%; background: rgba(212, 168, 51, .2); }
.orbs i:nth-child(2) { width: 520px; height: 520px; right: -160px; top: -10%; background: rgba(40, 80, 170, .35); animation-duration: 24s; }
.orbs i:nth-child(3) { width: 300px; height: 300px; left: 45%; bottom: -120px; background: rgba(232, 199, 102, .14); animation-duration: 20s; }
@keyframes drift { to { transform: translate(60px, -40px) scale(1.15); } }

/* Pointer spotlight on cards */
.spot-card { position: relative; }
.spot-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(232, 199, 102, .12), transparent 60%); }
@media (hover: hover) and (pointer: fine) { .spot-card:hover::after { opacity: 1; } }

/* Approach: three rings */
.rings svg { width: 100%; height: 100%; overflow: visible; }
.rings .r-all { transform-origin: 200px 200px; animation: spin 60s linear infinite; }
.rings circle.ring { fill: rgba(212, 168, 51, .04); stroke: url(#ringGold); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2s var(--ease) forwards; }
.rings circle.ring:nth-of-type(2) { animation-delay: .3s; } .rings circle.ring:nth-of-type(3) { animation-delay: .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.rings .orbiter { animation: spin 7s linear infinite; }
.rings .orbiter.o2 { animation-duration: 9s; animation-direction: reverse; } .rings .orbiter.o3 { animation-duration: 11s; }
.rings .moon { fill: #FBE6A2; filter: drop-shadow(0 0 6px rgba(232, 199, 102, .95)); }
.rings .numeral { font: 800 26px var(--f-d); fill: var(--gold); }
.rings .core { transform-origin: 200px 203px; animation: breathe 5s ease-in-out infinite; }
.rings-glow { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 199, 102, .25), transparent); filter: blur(20px); }

/* Approach: six tools merge into one system */
.converge { position: relative; height: clamp(360px, 52vw, 520px); border: 1px solid var(--border-gold); border-radius: 22px; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 50%, rgba(22, 40, 79, .9), rgba(6, 12, 28, .9)); }
.converge::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(rgba(212, 168, 51, .06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(212, 168, 51, .06) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.chip { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 10px 16px; border: 1px solid rgba(196, 198, 207, .3); border-radius: 12px;
  background: rgba(15, 29, 63, .9); color: var(--ivory-2); font-size: var(--fs-sm); white-space: nowrap; transition: left 1.1s var(--ease), top 1.1s var(--ease), opacity .8s, transform 1.1s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.chip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 2px; background: var(--c); vertical-align: middle; }
.js .converge:not(.merged) .chip { animation: jitter 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes jitter { 50% { transform: translate(-50%, calc(-50% - 8px)) rotate(-2deg); } }
.converge .core { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border-gold); background: radial-gradient(circle, rgba(212, 168, 51, .18), rgba(10, 21, 48, .9) 70%); transform: scale(.55); opacity: .35; transition: transform 1s var(--ease) .7s, opacity 1s .7s, box-shadow 1s .7s; }
.converge .core img { width: 64px; height: auto; }
.converge.merged .core { transform: scale(1); opacity: 1; box-shadow: 0 0 0 14px rgba(212, 168, 51, .07), 0 0 0 30px rgba(212, 168, 51, .04), 0 0 80px rgba(232, 199, 102, .35); }
.converge.merged .core-label { opacity: 1; transform: none; }
.converge .core::before, .converge .core::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(232, 199, 102, .5); opacity: 0; }
.converge.merged .core::before { animation: ping 2.6s ease-out 1.6s infinite; } .converge.merged .core::after { animation: ping 2.6s ease-out 2.9s infinite; }

/* Report: bars grow and checks tick when revealed */
.js .rp-card .rp-bars span { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1s var(--ease); }
.js .rp-card.in .rp-bars span { transform: none; }
.js .rp-card.in .rp-bars span:nth-child(2) { transition-delay: .12s; } .js .rp-card.in .rp-bars span:nth-child(3) { transition-delay: .24s; } .js .rp-card.in .rp-bars span:nth-child(4) { transition-delay: .36s; }
.js .rp-card .rp-done li { opacity: 0; transform: translateX(-12px); transition: opacity .6s, transform .6s var(--ease); }
.js .rp-card.in .rp-done li { opacity: 1; transform: none; }
.js .rp-card.in .rp-done li:nth-child(1) { transition-delay: .6s; } .js .rp-card.in .rp-done li:nth-child(2) { transition-delay: .8s; } .js .rp-card.in .rp-done li:nth-child(3) { transition-delay: 1s; }

/* Companies: orbit system */
.orbit { display: grid; place-items: center; }
.orbit .o-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(212, 168, 51, .4); }
.orbit .o-ring.r1 { inset: 20%; } .orbit .o-ring.r2 { inset: 4%; border-style: dashed; border-color: rgba(196, 198, 207, .25); }
.orbit .o-core { position: relative; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(212, 168, 51, .2), rgba(10, 21, 48, .2) 70%); box-shadow: 0 0 60px rgba(232, 199, 102, .25); }
.orbit .o-core img { width: 62%; height: auto; animation: breathe 5s ease-in-out infinite; }
.orbit .arm { position: absolute; border-radius: 50%; animation: spin var(--t) linear infinite; animation-direction: var(--dir, normal); }
.orbit .arm.a1 { inset: 20%; --t: 16s; } .orbit .arm.a2 { inset: 4%; --t: 28s; --dir: reverse; }
.orbit .planet { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); }
.orbit .planet span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; animation: spin var(--t) linear infinite; animation-direction: var(--cdir, reverse); }
.orbit .arm.a2 .planet span { --cdir: normal; }
.orbit .p-local { background: linear-gradient(135deg, #E8C766, #B98E22); color: var(--gold-ink); box-shadow: 0 0 30px rgba(232, 199, 102, .55); font-weight: 700; }
.orbit .p-health { background: rgba(15, 29, 63, .95); color: var(--ivory-2); border: 1px dashed rgba(196, 198, 207, .45); }
.orbit .p-health em { font-style: normal; color: var(--gold-2); }
.orbit .twinkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FBE6A2; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.co-list { display: grid; gap: clamp(28px, 4vw, 44px); }
.feature .actions { margin-top: 30px; }

/* How we work: loop of four nodes */
.flow svg { width: 100%; height: 100%; overflow: visible; }
.flow .f-track { fill: none; stroke: rgba(212, 168, 51, .3); stroke-width: 1.4; stroke-dasharray: 3 7; }
.flow .f-runner { transform-origin: 200px 200px; animation: spin 8s linear infinite; }
.flow .f-dot { fill: #FBE6A2; filter: drop-shadow(0 0 8px rgba(232, 199, 102, 1)); }
.flow .f-trail { fill: none; stroke: url(#trailGold); stroke-width: 3; stroke-linecap: round; }
.flow .node circle { fill: #0F1D3F; stroke: rgba(212, 168, 51, .5); stroke-width: 1.4; animation: nodeOn 8s linear infinite; animation-delay: var(--d); }
.flow .node text { font: 700 15px var(--f-b); letter-spacing: .14em; fill: var(--ivory-2); text-anchor: middle; }
.flow .node .n-num { font: 800 22px var(--f-d); fill: var(--gold); letter-spacing: 0; }
@keyframes nodeOn { 0%, 14% { fill: #3A2F0E; stroke: #E8C766; filter: drop-shadow(0 0 14px rgba(232, 199, 102, .8)); } 22%, 100% { fill: #0F1D3F; stroke: rgba(212, 168, 51, .5); filter: none; } }

/* How we work: scroll-drawn timeline */
.tl { position: relative; --p: 0; display: grid; gap: clamp(56px, 8vw, 110px); padding: 20px 0; }
.tl-line { position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-line span { position: absolute; inset: 0; background: linear-gradient(#FBE6A2, #D4A833); transform-origin: 50% 0; transform: scaleY(var(--p)); box-shadow: 0 0 14px rgba(232, 199, 102, .6); }
.tl-step { position: relative; display: grid; gap: 24px; padding-left: 64px; }
.tl-dot { position: absolute; left: 12px; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--navy-950); transition: border-color .4s, background .4s, box-shadow .4s; }
.tl-step.on .tl-dot { border-color: var(--gold-2); background: var(--gold); box-shadow: 0 0 0 8px rgba(212, 168, 51, .15), 0 0 24px rgba(232, 199, 102, .7); }
.tl-step h3 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 10px 0 12px; letter-spacing: -.025em; }
.tl-step p:last-child { color: var(--ivory-2); font-weight: 400; max-width: 30em; }
.tl-step .stage-k { transition: color .4s; }
.ill { position: relative; height: 200px; border: 1px solid var(--border-gold); border-radius: 18px; overflow: hidden; background: radial-gradient(80% 80% at 50% 40%, #16284F, #0A1530); opacity: .55; transition: opacity .6s, border-color .6s, box-shadow .6s; }
.tl-step.on .ill { opacity: 1; border-color: rgba(232, 199, 102, .55); box-shadow: 0 0 50px rgba(212, 168, 51, .12); }
@media (min-width: 900px) {
  .tl-line { left: 50%; margin-left: -1px; }
  .tl-step { grid-template-columns: 1fr 1fr; gap: 110px; padding-left: 0; align-items: center; }
  .tl-dot { left: 50%; margin-left: -11px; top: 50%; margin-top: -11px; }
  .tl-step:nth-child(odd of .tl-step) .ill { order: 2; }
  .tl-step .ill { height: 240px; }
}
/* Listen: sound waves */
.ill-wave { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ill-wave i { width: 7px; height: 30%; border-radius: 6px; background: linear-gradient(#FBE6A2, #B98E22); animation: wave 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.15s); }
@keyframes wave { 50% { height: 70%; } }
.ill-wave b { position: absolute; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(232, 199, 102, .35); animation: ping 3s ease-out infinite; }
/* Design: blueprint drawing */
.ill-blue { background: linear-gradient(rgba(120, 160, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(120, 160, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px, #0C1A3A; }
.ill-blue svg { position: absolute; inset: 12%; width: 76%; height: 76%; }
.ill-blue path, .ill-blue rect { fill: none; stroke: #E8C766; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: blueprint 5s ease-in-out infinite; }
.ill-blue rect:nth-child(2) { animation-delay: .3s; } .ill-blue rect:nth-child(3) { animation-delay: .6s; } .ill-blue path { animation-delay: .9s; }
@keyframes blueprint { 0% { stroke-dashoffset: 1; } 40%, 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* Build: stacking blocks */
.ill-blocks { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 34px; }
.ill-blocks .stack { display: grid; gap: 6px; justify-items: center; }
.ill-blocks i { display: block; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #E8C766, #B98E22); box-shadow: inset 0 1px 0 rgba(255, 253, 221, .7); animation: drop 4s var(--ease) infinite; animation-delay: var(--d); opacity: 0; }
@keyframes drop { 0% { transform: translateY(-160px); opacity: 0; } 15% { transform: none; opacity: 1; } 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.ill-blocks::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 28px; height: 2px; background: rgba(212, 168, 51, .5); }
/* Run: always-on loop + rising line */
.ill-run svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ill-run .loop { transform-origin: 100px 100px; animation: spin 6s linear infinite; }
.ill-run .loop path { fill: none; stroke: #E8C766; stroke-width: 3; stroke-linecap: round; }
.ill-run .rise { fill: none; stroke: #3DDC97; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: blueprint 4s ease-in-out infinite; }
.ill-run .beat { fill: #FBE6A2; animation: breathe 2s ease-in-out infinite; transform-origin: 100px 100px; }

.duo { display: grid; gap: 20px; }
.duo > div { padding: clamp(26px, 4vw, 44px); border: 1px solid var(--border-gold); border-radius: 18px; background: linear-gradient(160deg, var(--navy-800), var(--navy) 75%); }
.duo h3 { font-size: 1.6rem; margin: 14px 0 18px; }
.duo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--ivory-2); font-weight: 400; }
.duo li { display: flex; gap: 12px; } .duo li::before { content: "\2713"; color: var(--gold); font-weight: 700; }
.duo .us { border-color: var(--gold); background: linear-gradient(160deg, rgba(58, 47, 14, .55), var(--navy) 70%); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1.3fr; } }

/* Axura Local: climbing search result */
.rank-card { position: absolute; inset: 6% 2%; padding: 22px; border: 1px solid var(--border-gold); border-radius: 22px; background: linear-gradient(160deg, rgba(22, 40, 79, .95), rgba(6, 12, 28, .95)); box-shadow: var(--shadow-2), 0 0 70px rgba(212, 168, 51, .12); }
.rank-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--ivory-2); font-size: var(--fs-sm); }
.rank-search::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--ivory-3); border-radius: 50%; }
.rank-search b { font-weight: 500; color: var(--ivory); }
.rank-list { position: relative; margin-top: 18px; height: 280px; }
.rank-row { position: absolute; left: 0; right: 0; height: 62px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; top: calc(var(--pos) * 70px); animation: var(--anim) 7s var(--ease) infinite; }
.rank-row .rk { font: 800 1.1rem var(--f-d); color: var(--ivory-3); }
.rank-row .nm { display: grid; gap: 6px; }
.rank-row .nm i { display: block; height: 8px; width: var(--w, 70%); border-radius: 4px; background: rgba(196, 198, 207, .25); }
.rank-row .nm i + i { width: 40%; height: 6px; background: rgba(196, 198, 207, .14); }
.rank-row .st { color: rgba(196, 198, 207, .4); letter-spacing: 2px; font-size: .8rem; }
.rank-row.you { background: linear-gradient(90deg, rgba(212, 168, 51, .25), rgba(212, 168, 51, .06)); border-color: rgba(232, 199, 102, .6); box-shadow: 0 0 30px rgba(212, 168, 51, .2); z-index: 2; }
.rank-row.you .nm b { font: 700 1rem var(--f-b); color: var(--ivory); }
.rank-row.you .nm span { font-size: .75rem; color: var(--gold-2); letter-spacing: .14em; text-transform: uppercase; }
.rank-row.you .st { color: var(--gold-2); }
.rank-row.you .rk::before { content: counter(r); }
@keyframes climbYou { 0%, 18% { top: 210px; } 40%, 52% { top: 140px; } 62%, 74% { top: 70px; } 84%, 100% { top: 0; } }
@keyframes push1 { 0%, 74% { top: 0; } 84%, 100% { top: 70px; } }
@keyframes push2 { 0%, 52% { top: 70px; } 62%, 74% { top: 140px; } 84%, 100% { top: 140px; } }
@keyframes push3 { 0%, 18% { top: 140px; } 40%, 100% { top: 210px; } }
.rank-badge { position: absolute; right: -14px; top: -14px; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #FFEBA1, #B8963C); color: var(--gold-ink); font: 800 1.4rem var(--f-d); box-shadow: 0 0 40px rgba(232, 199, 102, .6); animation: badge 7s var(--ease) infinite; }
@keyframes badge { 0%, 82% { transform: scale(0) rotate(-40deg); } 88%, 96% { transform: scale(1) rotate(0); } 100% { transform: scale(0); } }

/* Axura Local: before/after rank heat map */
.hm { border: 1px solid var(--border-gold); border-radius: 22px; overflow: hidden; background: var(--navy-950); box-shadow: var(--shadow-2), 0 0 80px rgba(212, 168, 51, .08); }
.hm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.hm .toggle { margin: 0; }
.hm-replay { min-height: 44px; padding: 0 16px; border: 1px solid var(--border-gold); border-radius: 99px; background: none; color: var(--gold-2); font: 500 var(--fs-xs)/1 var(--f-b); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .hm-replay:hover { background: rgba(212, 168, 51, .1); } }
#rankmap { height: clamp(380px, 52vw, 540px); background: #0A1530; }
#rankmap .leaflet-tile-pane { filter: invert(1) hue-rotate(190deg) brightness(.72) saturate(.35) contrast(.95); opacity: .65; }
#rankmap .leaflet-control-attribution { background: rgba(6, 12, 28, .8); color: var(--ivory-3); font-size: 10px; }
#rankmap .leaflet-control-attribution a { color: var(--gold-2); }
#rankmap .leaflet-control-zoom a { background: #0F1D3F; color: var(--ivory); border-color: var(--line); }
.hm-icon { background: none; border: 0; }
.hm-pin { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: #0A1530; font: 800 .8rem/1 var(--f-b); box-shadow: 0 0 0 3px rgba(6, 12, 28, .7), 0 0 22px var(--c); transition: background .5s, box-shadow .5s; }
.hm-pin::before { content: ""; position: absolute; inset: -34px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); mix-blend-mode: screen; transition: background .5s; }
.hm-pin.pop { animation: pop .6s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }
.hm-you { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(10, 21, 48, .9); border: 2px solid var(--gold-2); box-shadow: 0 0 30px rgba(232, 199, 102, .7); }
.hm-you img { width: 30px; }
.hm-you::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold-2); animation: ping 2s ease-out infinite; }
.hm-foot { display: grid; gap: 18px; padding: 20px; border-top: 1px solid var(--line); }
.hm-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: var(--fs-sm); color: var(--ivory-2); }
.hm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hm-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.hm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hm-stats div { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(15, 29, 63, .6); }
.hm-stats dt { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-3); }
.hm-stats dd { margin: 8px 0 0; font: 800 clamp(1.8rem, 5vw, 2.6rem)/1 var(--f-d); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hm-note { font-size: var(--fs-sm); color: var(--ivory-3); }
@media (min-width: 900px) { .hm-foot { grid-template-columns: 1fr auto; align-items: center; } .hm-stats { min-width: 380px; } }

/* Axura Local: four services, each with a live mini scene */
.svc2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.svc2 li { padding: 26px; border: 1px solid var(--border-gold); border-radius: 22px; background: linear-gradient(160deg, var(--navy-800), var(--navy) 75%); overflow: hidden; transition: transform .4s var(--ease), border-color .4s; }
@media (hover: hover) and (pointer: fine) { .svc2 li:hover { transform: translateY(-6px); border-color: var(--gold); } }
.svc2 h3 { font-size: 1.6rem; margin: 22px 0 8px; }
.svc2 p { color: var(--ivory-2); font-weight: 400; }
.scene { position: relative; height: 170px; border-radius: 16px; background: radial-gradient(80% 90% at 50% 30%, #1A2E5C, #0A1530); overflow: hidden; display: grid; place-items: center; }
@media (min-width: 900px) { .svc2 { grid-template-columns: repeat(2, 1fr); } }
/* reviews */
.sc-stars { display: flex; gap: 8px; }
.sc-stars i { width: 34px; height: 34px; background: rgba(196, 198, 207, .2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: starFill 5s infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes starFill { 0%, 8% { background: rgba(196, 198, 207, .2); transform: scale(1); } 14% { background: #FFD45A; transform: scale(1.3); } 20%, 85% { background: #F5C542; transform: scale(1); } 100% { background: rgba(196, 198, 207, .2); } }
.sc-bubble { position: absolute; bottom: 22px; padding: 8px 14px; border-radius: 14px 14px 14px 4px; background: var(--ivory); color: var(--navy); font-size: .8rem; font-weight: 500; animation: bubble 5s var(--ease) infinite; }
@keyframes bubble { 0%, 40% { opacity: 0; transform: translateY(12px) scale(.9); } 50%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* google profile */
.sc-profile { width: 70%; display: grid; gap: 8px; }
.sc-profile .pf-head { display: flex; align-items: center; gap: 10px; }
.sc-profile .pf-head b { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #E8C766, #B98E22); }
.sc-profile .pf-head i { flex: 1; height: 9px; border-radius: 5px; background: rgba(196, 198, 207, .35); }
.sc-profile .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-profile .pf-grid i { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, rgba(232, 199, 102, .5), rgba(40, 80, 170, .6)); opacity: 0; animation: post 6s var(--ease) infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes post { 0% { opacity: 0; transform: translateY(16px) scale(.8); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* website call */
.sc-phone { position: relative; width: 92px; height: 150px; margin-top: 30px; border-radius: 16px; border: 2px solid rgba(196, 198, 207, .45); background: #0F1D3F; padding: 12px 10px; display: grid; gap: 6px; align-content: start; }
.sc-phone i { height: 6px; border-radius: 3px; background: rgba(196, 198, 207, .25); } .sc-phone i:first-child { height: 30px; background: rgba(232, 199, 102, .35); }
.sc-phone b { margin-top: 6px; display: grid; place-items: center; height: 24px; border-radius: 99px; background: linear-gradient(135deg, #3DDC97, #1FA971); color: #062016; font-size: .6rem; letter-spacing: .1em; animation: callPulse 1.6s ease-in-out infinite; }
@keyframes callPulse { 50% { box-shadow: 0 0 0 8px rgba(61, 220, 151, .2), 0 0 20px rgba(61, 220, 151, .6); } }
.sc-ring { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(61, 220, 151, .6); animation: ping 1.8s ease-out infinite; }
.sc-ring + .sc-ring { animation-delay: .9s; }
/* missed call text back */
.sc-chat { width: 78%; display: grid; gap: 10px; }
.sc-chat .missed { justify-self: start; display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 10px; background: rgba(229, 72, 77, .15); color: #FF8A8E; font-size: .75rem; animation: chat 6s infinite; }
.sc-chat .typing { justify-self: end; display: flex; gap: 4px; padding: 10px 14px; border-radius: 14px; background: rgba(232, 199, 102, .2); animation: typing 6s infinite; }
.sc-chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); animation: dots 1s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
.sc-chat .msg { justify-self: end; max-width: 90%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, #E8C766, #C9A040); color: var(--gold-ink); font-size: .78rem; font-weight: 500; animation: msg 6s infinite; }
@keyframes chat { 0% { opacity: 0; transform: translateX(-10px); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes typing { 0%, 15% { opacity: 0; } 20%, 38% { opacity: 1; } 42%, 100% { opacity: 0; height: 0; padding: 0; } }
@keyframes msg { 0%, 40% { opacity: 0; transform: translateY(10px) scale(.9); } 48%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dots { 50% { transform: translateY(-4px); } }

/* Contact page */
.contact-page { position: relative; z-index: 1; padding: calc(var(--hdr) + clamp(48px, 8vw, 96px)) var(--gut) var(--section-y); overflow: hidden; }
.contact-page .contact-grid { position: relative; z-index: 1; }
.contact-page h1 { font-size: clamp(2.6rem, 8vw, 4.8rem); line-height: 1; letter-spacing: -.035em; margin: 22px 0; }
.contact-page h1 em { color: var(--gold-2); font-style: italic; }
.c-cards { display: grid; gap: 14px; margin-top: 34px; }
.c-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--border-gold); border-radius: 18px; background: rgba(15, 29, 63, .7); text-decoration: none; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
@media (hover: hover) and (pointer: fine) { .c-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 0 34px rgba(212, 168, 51, .18); } }
.c-ico { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(212, 168, 51, .14); color: var(--gold-2); }
.c-ico svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .c-card:hover .c-ico.phone svg { animation: ring .5s ease-in-out 2; } }
@keyframes ring { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.c-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232, 199, 102, .6); animation: ping 2.6s ease-out infinite; }
.c-card .eyebrow { font-size: .7rem; }
.c-card strong { display: block; margin-top: 4px; font: 500 1.2rem var(--f-b); overflow-wrap: anywhere; }
.steps-mini { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.steps-mini li { position: relative; padding-left: 52px; color: var(--ivory-2); font-weight: 400; }
.steps-mini li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-gold); color: var(--gold-2); font: 800 .95rem var(--f-d); }
.steps-mini strong { display: block; color: var(--ivory); font-weight: 500; }
.signal { position: absolute; right: -20%; top: 990px; width: 900px; height: 900px; margin-top: -450px; pointer-events: none; }
@media (min-width: 900px) { .signal { top: 700px; } }
.signal i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(212, 168, 51, .25); animation: signal 6s linear infinite; opacity: 0; }
.signal i:nth-child(2) { animation-delay: 2s; } .signal i:nth-child(3) { animation-delay: 4s; }
@keyframes signal { 0% { transform: scale(.2); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.rank-nums { position: absolute; left: 0; top: 0; display: grid; grid-auto-rows: 70px; width: 30px; }
.rank-nums b { height: 62px; display: grid; place-items: center; font: 800 1.1rem var(--f-d); color: var(--ivory-3); }
.rank-nums b:first-child { color: var(--gold-2); }
.rank-row { left: 40px; grid-template-columns: 1fr auto; }
@media (max-width: 599.98px) { .chip { padding: 7px 11px; font-size: .72rem; } .converge .core { width: 110px; height: 110px; margin: -55px; } }
.contact-page .contact-grid { align-items: start; }
@media (max-width: 599.98px) {
  .hm-pin { width: 28px; height: 28px; margin: 4px; font-size: .7rem; }
  .hm-pin::before { inset: -22px; }
  #rankmap .leaflet-control-zoom { display: none; }
}
@media (max-width: 599.98px) {
  .rank-art { aspect-ratio: auto; }
  .rank-art .rank-card { position: relative; inset: auto; margin: 14px 0; }
  .rank-badge { right: -6px; top: -10px; width: 60px; height: 60px; font-size: 1.15rem; }
}

/* Contact page: the embedded form gets a living frame (the GHL form inside can't be animated, so the frame is) */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.form-fx { position: relative; isolation: isolate; }
.js .form-fx { opacity: 0; animation: formIn 1.2s var(--ease) .5s forwards; }
@keyframes formIn { from { opacity: 0; transform: translateY(36px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.form-fx::before { content: ""; position: absolute; inset: -2px; z-index: 2; border-radius: 10px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgba(212, 168, 51, .25) 72%, #FBE6A2 86%, #D4A833 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: trace 5s linear infinite; filter: drop-shadow(0 0 6px rgba(232, 199, 102, .8)); }
@keyframes trace { to { --ang: 360deg; } }
.form-fx::after { content: ""; position: absolute; inset: 4% -4%; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(212, 168, 51, .26), rgba(40, 80, 170, .18) 60%, transparent); filter: blur(46px); animation: breathe 6s ease-in-out infinite; }
.fx-corner { position: absolute; z-index: 3; width: 34px; height: 34px; border: 0 solid #E8C766; pointer-events: none; transform: scale(0); animation: corner .9s var(--ease) 1.2s forwards; }
.fx-corner.tl { left: -12px; top: -12px; border-width: 2px 0 0 2px; border-top-left-radius: 10px; transform-origin: 0 0; }
.fx-corner.tr { right: -12px; top: -12px; border-width: 2px 2px 0 0; border-top-right-radius: 10px; transform-origin: 100% 0; animation-delay: 1.35s; }
.fx-corner.bl { left: -12px; bottom: -12px; border-width: 0 0 2px 2px; border-bottom-left-radius: 10px; transform-origin: 0 100%; animation-delay: 1.5s; }
.fx-corner.br { right: -12px; bottom: -12px; border-width: 0 2px 2px 0; border-bottom-right-radius: 10px; transform-origin: 100% 100%; animation-delay: 1.65s; }
@keyframes corner { to { transform: scale(1); } }
.fx-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fx-sparks i { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; margin: -3.5px; background: linear-gradient(135deg, #FFF6D0, #D4A833); transform: rotate(45deg); opacity: 0; animation: floatUp 4.6s ease-in-out infinite; animation-delay: var(--d); box-shadow: 0 0 10px rgba(232, 199, 102, .9); }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(20px) rotate(45deg) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) rotate(225deg) scale(1); } }
@media (max-width: 599.98px) { .fx-sparks { display: none; } .fx-corner { width: 24px; height: 24px; } .fx-corner.tl, .fx-corner.bl { left: -6px; } .fx-corner.tr, .fx-corner.br { right: -6px; } }

/* Contact form reveal: placeholder while GHL loads, then a top-to-bottom scan reveal */
.form-fx { min-height: 760px; }
.fx-skel { position: absolute; inset: 0; z-index: 1; display: grid; align-content: start; gap: 14px; padding: 46px 52px; border: 1px solid rgba(212, 168, 51, .3); border-radius: 8px; background: rgba(6, 12, 28, .55); transition: opacity .6s; }
.fx-skel i { display: block; border-radius: 4px; background: linear-gradient(90deg, rgba(196, 198, 207, .08) 25%, rgba(232, 199, 102, .22) 50%, rgba(196, 198, 207, .08) 75%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
.fx-skel .s-l { width: 26%; height: 10px; margin-top: 18px; }
.fx-skel .s-f { height: 2px; margin-top: 30px; }
.fx-skel .s-b { height: 54px; margin-top: 52px; border-radius: 99px; }
.fx-skel p { margin-top: 18px; text-align: center; font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); animation: breathe 1.6s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.form-fx iframe { position: relative; z-index: 1; }
.js .form-fx:not(.ready) iframe { opacity: 0; }
.form-fx.ready .fx-skel { pointer-events: none; animation: scanOut 1.3s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes scanOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
.form-fx.ready iframe { animation: scanIn 1.3s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes scanIn { from { clip-path: inset(0 0 100% 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.fx-scan { position: absolute; left: -8px; right: -8px; top: 0; z-index: 4; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #FBE6A2 20%, #E8C766 50%, #FBE6A2 80%, transparent); box-shadow: 0 0 18px 4px rgba(232, 199, 102, .6), 0 -30px 40px -10px rgba(232, 199, 102, .25); }
.form-fx.ready .fx-scan { animation: scanLine 1.3s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes scanLine { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.form-fx.ready::before { animation: trace 5s linear infinite, traceFlash 1.3s ease-out; }
@keyframes traceFlash { 0% { filter: drop-shadow(0 0 16px rgba(232, 199, 102, 1)); } }
@media (max-width: 599.98px) { .fx-skel { padding: 30px 24px; } }

/* =========================================================
   Pricing page (pricing.html)
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.menu-open .menu-nav a:nth-child(5) { transition-delay: .44s; }

/* Centered hero */
.page-hero--center .hero-in { text-align: center; justify-items: center; }
.page-hero--center .eyebrow { justify-content: center; }
.page-hero--center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.page-hero--center h1, .page-hero--center .lede { margin-inline: auto; }
@media (min-width: 900px) { .page-hero--center .hero-in { grid-template-columns: 1fr; } }

/* Plan cards: fan out in 3D like an open hand, featured card lifted in the middle */
.plan-k { margin-bottom: 10px; font: italic 500 1rem/1 var(--f-d); color: var(--gold); }
.plan .badge { z-index: 2; display: inline-flex; align-items: center; gap: 6px; }
.plan .badge svg { width: 13px; height: 13px; fill: currentColor; }
.motion .plan .badge svg, .js .plan .badge svg { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(72deg) scale(1.25); } }
.plan.is-popular { border-color: rgba(212, 168, 51, .45); }
.plan.is-popular::before { content: ""; position: absolute; inset: -2px; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 55%, rgba(212, 168, 51, .3) 70%, #FBE6A2 86%, #D4A833 93%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: trace 5s linear infinite; }
.price-num { display: inline-block; }
.price-num.flip, .bill.flip { animation: priceFlip .55s var(--ease); }
@keyframes priceFlip { from { opacity: .2; filter: blur(8px); transform: translateY(-.3em); } }
@media (min-width: 900px) {
  .plans--3d { perspective: 1600px; align-items: stretch; }
  .plans--3d .plan { transform: var(--pose, none); transition: transform .6s var(--ease), border-color .4s, box-shadow .4s; }
  .plans--3d .plan:nth-child(1) { --pose: translateX(28px) scale(.94) rotateY(9deg); transform-origin: 100% 50%; }
  .plans--3d .plan:nth-child(2) { --pose: translateY(-22px); z-index: 2; box-shadow: var(--shadow-3); --dl: .15s; }
  .plans--3d .plan:nth-child(3) { --pose: translateX(-28px) scale(.94) rotateY(-9deg); transform-origin: 0 50%; --dl: .3s; }
  .plans--3d .plan.in { animation: fanIn 1.5s cubic-bezier(.16, 1.2, .3, 1) var(--dl, 0s) backwards; }
  @media (hover: hover) and (pointer: fine) { .plans--3d .plan:hover { --pose: translateY(-10px); border-color: var(--border-gold-strong); } }
  @media (hover: hover) and (pointer: fine) { .plans--3d .plan.is-popular:hover { --pose: translateY(-30px); } }
}
@keyframes fanIn { from { opacity: 0; transform: translateY(110px) rotateX(16deg) scale(.88); } }

/* Bundle: Website + Google Maps = more than Complete */
.eq { display: grid; gap: 14px; align-items: center; }
.eq-tile { display: grid; gap: 6px; padding: 26px 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10, 21, 48, .78); text-align: center; box-shadow: var(--shadow-2), var(--inner-hi); }
.eq-k { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.eq-tile b, .eq-win-price b { font: 800 clamp(2.1rem, 5vw, 2.9rem)/1 var(--f-d); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.eq-s { font-size: var(--fs-sm); color: var(--ivory-3); }
.eq-op { justify-self: center; font: 500 2.6rem/1 var(--f-d); color: var(--gold-2); }
.eq .rv { transition-delay: calc(var(--d) * 140ms); }
.js .eq-op.rv:not(.in) { transform: scale(0) rotate(-120deg); }
.eq-sum b { color: var(--ivory-2); }
.strike { position: relative; display: inline-block; justify-self: center; }
.strike::after { content: ""; position: absolute; left: -6%; right: -6%; top: 52%; height: 3px; border-radius: 3px; background: #E38B6B; transform: scaleX(0) rotate(-7deg); transform-origin: 0 50%; transition: transform .7s var(--ease) 1.8s; }
.eq-sum.in .strike::after, html:not(.js) .strike::after { transform: scaleX(1) rotate(-7deg); }
.eq-win { position: relative; display: grid; gap: 24px; align-items: center; margin-top: 22px; padding: clamp(26px, 4vw, 40px); border: 2px solid var(--gold); border-radius: 18px; background: linear-gradient(160deg, rgba(22, 40, 79, .92), rgba(10, 21, 48, .92)); box-shadow: var(--shadow-3); }
.eq-win.rv { transition-delay: .5s; }
.js .eq-win.rv:not(.in) { transform: translateY(40px) scale(.94); }
.eq-win-price { display: grid; gap: 8px; justify-items: start; }
.eq-win-price b { font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--gold-2); }
.eq-save { padding: 7px 14px; border-radius: 99px; background: linear-gradient(135deg, #E8C766, #D4A833); color: var(--gold-ink); font: 700 var(--fs-xs)/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase; }
.eq-win.in .eq-save { animation: pop .7s cubic-bezier(.3, 1.8, .5, 1) 1.3s backwards; }
@keyframes pop { from { transform: scale(0) rotate(-10deg); } }
.eq-extras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--ivory-2); }
.eq-extras li { position: relative; padding-left: 26px; }
.eq-extras li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.eq-extras b { color: var(--ivory); }
@media (min-width: 900px) {
  .eq { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; }
  .eq-win { grid-template-columns: auto 1fr auto; gap: 56px; }
  .eq-extras { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* Comparison table: sticky plan names, featured column lit up, checks pop in row by row */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .875rem; }
.cmp thead th { position: sticky; top: var(--hdr); z-index: 3; padding: 16px 4px; background: #0B1632; border-bottom: 1px solid var(--line); font: 500 .9rem/1.15 var(--f-d); text-align: center; }
.cmp thead th:first-child { width: 38%; }
.cmp thead th.hl { color: var(--gold-2); border-top: 2px solid var(--gold); border-radius: 14px 14px 0 0; }
.cmp .hl { background-color: rgba(212, 168, 51, .07); border-left: 1px solid var(--border-gold); border-right: 1px solid var(--border-gold); }
.cmp thead th.hl { background: linear-gradient(rgba(212, 168, 51, .1), rgba(212, 168, 51, .1)), #0B1632; }
.cmp tbody th, .cmp tbody td { padding: 14px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.cmp tbody th { padding-left: 0; padding-right: 12px; text-align: left; font-weight: 400; color: var(--ivory); }
.cmp tbody th small { display: block; margin-top: 2px; font-size: .8em; color: var(--ivory-3); }
.cmp td { text-align: center; color: var(--ivory-2); font-variant-numeric: tabular-nums; }
.cmp td small { display: block; font-size: .78em; color: var(--ivory-3); }
.cmp td.hl { color: var(--ivory); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .cmp tbody tr:not(.grp):hover > * { background-color: rgba(243, 238, 227, .035); } }
@media (hover: hover) and (pointer: fine) { .cmp tbody tr:not(.grp):hover > .hl { background-color: rgba(212, 168, 51, .12); } }
.cmp .grp th { padding: 34px 0 10px; border-top: 0; font: 500 var(--fs-xs)/1 var(--f-b); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.cmp .grp:first-child th { padding-top: 22px; }
.cmp .y::before { content: ""; display: inline-block; width: 26px; height: 26px; vertical-align: middle; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-gold);
  background: rgba(212, 168, 51, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23E8C766' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .55s cubic-bezier(.3, 1.7, .5, 1); }
.cmp .hl.y::before { box-shadow: 0 4px 14px rgba(2, 6, 18, .4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%231A1205' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat, linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); }
.cmp td:nth-child(3)::before { transition-delay: .1s; }
.cmp td:nth-child(4)::before { transition-delay: .2s; }
.js .cmp tr:not(.in) .y::before { transform: scale(0) rotate(-45deg); }
.cmp .n::before { content: ""; display: inline-block; width: 12px; height: 2px; vertical-align: middle; border-radius: 2px; background: var(--ivory-3); opacity: .5; }
.cmp tfoot td { padding: 22px 6px 26px; text-align: center; }
.cmp tfoot td.hl { border-bottom: 1px solid var(--border-gold); border-radius: 0 0 14px 14px; }
.cmp tfoot .btn { width: 100%; padding: 0 .8em; }
.nobr { white-space: nowrap; }
@media (max-width: 599.98px) { .cmp tfoot { display: none; } }
@media (min-width: 900px) {
  .cmp { font-size: 1rem; }
  .cmp thead th { padding: 22px 12px; font-size: 1.35rem; }
  .cmp thead th:first-child { width: 40%; }
  .cmp tbody th, .cmp tbody td { padding: 18px 12px; }
}

/* Approach: the six tools are pulled into the core, then come back out as one wired-up system */
.converge { --k: 1; }
.converge .chip { display: inline-grid; grid-auto-flow: column; align-items: center; }
.converge .chip b { grid-area: 1 / 2; font-weight: 400; }
.converge .chip::before { grid-area: 1 / 1; }
.converge .chip .now { opacity: 0; color: var(--ivory); font-weight: 500; }
.converge.merged .chip { --nx: calc(50% + var(--dx) * var(--k) * 1%); --ny: calc(50% + var(--dy) * var(--k) * 1%);
  left: var(--nx); top: var(--ny); border-color: rgba(232, 199, 102, .55); background: rgba(22, 40, 79, .95); box-shadow: 0 8px 24px rgba(2, 6, 18, .45); z-index: 2;
  animation: absorb 1.8s var(--ease) calc(var(--i) * 90ms) both; }
.converge.merged .chip .was { opacity: 0; animation: wasOut 1.8s calc(var(--i) * 90ms) both; }
.converge.merged .chip .now { opacity: 1; animation: nowIn 1.8s calc(var(--i) * 90ms) both; }
@keyframes absorb {
  0% { left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(1); opacity: 1; }
  40%, 56% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  100% { left: var(--nx); top: var(--ny); transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes wasOut { 0%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes nowIn { 0%, 52% { opacity: 0; } 56%, 100% { opacity: 1; } }
.converge .core { z-index: 1; }
.converge .core-label { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); opacity: 0; transform: translateY(10px); transition: opacity .8s 1.6s, transform .8s 1.6s; }
.spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: scale(var(--k)); pointer-events: none; }
.spokes line { fill: none; stroke-linecap: round; }
.sp-line line { stroke: rgba(232, 199, 102, .4); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) 1.5s; }
.sp-pulse line { stroke: #FBE6A2; stroke-width: 2.5; stroke-dasharray: .08 .92; stroke-dashoffset: .08; opacity: 0; filter: drop-shadow(0 0 4px rgba(232, 199, 102, .9)); }
.converge.merged .sp-line line { stroke-dashoffset: 0; }
.converge.merged .sp-pulse line { opacity: 1; transition: opacity .5s 2.4s; animation: flow 2.4s linear 2.4s infinite; }
.converge.merged .sp-pulse line:nth-child(2n) { animation-delay: 3s; } .converge.merged .sp-pulse line:nth-child(3n) { animation-delay: 3.6s; }
@keyframes flow { to { stroke-dashoffset: -.92; } }
.spokes-m { display: none; }
@media (max-width: 599.98px) {
  .spokes:not(.spokes-m) { display: none; } .spokes-m { display: block; }
  .converge.merged .chip { --nx: calc(50% + var(--mx) * 1%); --ny: calc(50% + var(--my) * 1%); }
  .converge .core { width: 92px; height: 92px; margin: -46px; } .converge .core img { width: 42px; }
  .converge .chip { padding: 6px 9px; font-size: .68rem; }
  .converge .chip::before { width: 6px; height: 6px; margin-right: 6px; }
  .converge .core-label { bottom: 14px; font-size: .62rem; letter-spacing: .2em; }
}

/* Axura Local: "Who it's for" list. A gold bar slides to the hovered row and a photo follows the pointer
   (port of Hyperiux "interactive-list-preview"). Touch screens get a small photo in each row instead. */
.ilp { position: relative; }
.ilp-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ilp-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: 16px; row-gap: 4px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); transition: opacity .35s, padding .45s var(--ease); }
.ilp-name { font: 500 clamp(1.45rem, 3.2vw, 2.35rem)/1.1 var(--f-d); letter-spacing: -.02em; transition: color .3s; }
.ilp-q { font: italic 500 var(--fs-sm)/1.4 var(--f-b); color: var(--gold-2); transition: color .3s; }
.ilp-svc { font-size: var(--fs-sm); color: var(--ivory-2); transition: color .3s; }
.ilp-svc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ilp-row--more .ilp-name { color: var(--gold-2); }
.ilp-thumb { grid-column: 2; grid-row: 1 / span 3; width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-gold); }
.ilp-bar, .ilp-preview { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ilp-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1.2fr); column-gap: 28px; padding: 30px 20px; cursor: default; }
  .ilp-svc { text-align: right; }
  .ilp-thumb { display: none; }
  .ilp-bar { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 0; border-radius: 8px; opacity: 0; pointer-events: none;
    background: linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); transition: transform .4s var(--ease), height .4s var(--ease), opacity .3s; }
  .ilp.is-active .ilp-bar { opacity: 1; }
  .ilp.is-active .ilp-row:not(.on) { opacity: .4; }
  .ilp-row.on { padding-left: 40px; padding-right: 40px; }
  .ilp-row.on .ilp-name, .ilp-row.on .ilp-q, .ilp-row.on .ilp-svc { color: var(--gold-ink); }
  .ilp-preview { display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 300px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; pointer-events: none;
    box-shadow: var(--shadow-3); clip-path: inset(50% 50% 50% 50% round 12px); transition: clip-path .6s var(--ease); will-change: transform; }
  .ilp.is-active .ilp-preview { clip-path: inset(0 0 0 0 round 12px); }
  .ilp-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .35s, transform .6s var(--ease); }
  .ilp-preview img.on { opacity: 1; transform: none; }
}

/* Pricing: plan finder quiz */
.quiz { padding-top: clamp(40px, 6vw, 80px); }
.qz { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(24px, 5vw, 56px); border: 1px solid var(--border-gold); border-radius: 22px;
  background: linear-gradient(160deg, rgba(22, 40, 79, .88), rgba(10, 21, 48, .92)); box-shadow: var(--shadow-2), var(--inner-hi); }
.qz-intro { display: grid; justify-items: center; gap: 22px; text-align: center; }
.qz-intro .eyebrow, .qz-result .eyebrow { justify-content: center; }
.qz-intro .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.qz-intro h2 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.06; letter-spacing: -.025em; max-inline-size: 18ch; }
.qz-intro em { color: var(--gold-2); }
.qz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qz-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ivory-2); font: 500 var(--fs-xs)/1 var(--f-b); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .25s; }
@media (hover: hover) and (pointer: fine) { .qz-back:hover { color: var(--gold-2); } }
.qz-count { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-3); }
.qz-bar { height: 4px; margin-top: 10px; border-radius: 4px; background: var(--line); overflow: hidden; }
.qz-bar span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, #B98E22, var(--gold-2)); transition: width .5s var(--ease); }
.qz-h { margin: clamp(28px, 4vw, 40px) 0 24px; font-size: clamp(1.55rem, 4.2vw, 2.3rem); line-height: 1.12; letter-spacing: -.02em; }
.qz-h:focus, .qz-fit:focus { outline: none; }
.qz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.qz-opt { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 12, 28, .5);
  color: var(--ivory); font: 500 1.0625rem/1.3 var(--f-b); text-align: left; cursor: pointer; transition: border-color .25s, background-color .25s, color .25s, transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .qz-opt:hover { border-color: var(--gold); transform: translateY(-2px); } }
.qz-opt:active { transform: scale(.98); }
@media (min-width: 600px) { .qz-q[data-key="biz"] .qz-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qz-note { margin-top: 18px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--border-gold); background: rgba(212, 168, 51, .1); color: var(--ivory); animation: qzIn .4s var(--ease) both; }
.qz-key { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-gold); color: var(--gold-2); font-size: var(--fs-xs); font-weight: 700; transition: inherit; }
.qz-opt[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); color: var(--gold-ink); }
.qz-opt[aria-pressed="true"] .qz-key { border-color: rgba(26, 18, 5, .35); color: var(--gold-ink); }
.qz-in { animation: qzIn .5s var(--ease) both; }
.qz-in-back { animation: qzInBack .5s var(--ease) both; }
@keyframes qzIn { from { opacity: 0; transform: translateX(36px); } }
@keyframes qzInBack { from { opacity: 0; transform: translateX(-36px); } }
.qz-fit { text-align: center; font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin-bottom: 44px; }
.qz-plan { list-style: none; max-width: 420px; margin: 0 auto; padding: 0; }
.qz-plan .plan { text-align: center; }
.qz-why { max-width: 34em; margin: 26px auto 0; text-align: center; color: var(--ivory-2); font-size: var(--fs-md); }
.qz-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; margin-top: 14px; }
button.link { border: 0; border-bottom: 1px solid rgba(212, 168, 51, .5); background: none; color: var(--ivory); font: inherit; font-weight: 500; letter-spacing: .04em; cursor: pointer; }
.qz-form { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.qz-form h3 { max-width: 24em; margin: 0 auto 24px; text-align: center; font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.25; }
.qz-frame { min-height: 606px; }
.qz-frame iframe { display: block; min-height: 606px; }
@media (max-width: 599.98px) {
  .qz-opts { grid-template-columns: 1fr; }
  .qz-opt { min-height: 58px; }
}

/* Quiz result: urgency meter (score comes from the visitor's answers, see js/pages.js) */
.qz-urg { --u: 0; --uc: #E8C766; margin: 0 auto 48px; max-width: 620px; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--line); border-radius: 18px; background: rgba(6, 12, 28, .45); }
.qz-urg:focus { outline: none; }
.qz-urg[data-level="low"] { --uc: #3DDC97; } .qz-urg[data-level="moderate"] { --uc: #E8C766; }
.qz-urg[data-level="high"] { --uc: #F0954A; } .qz-urg[data-level="critical"] { --uc: #E5484D; }
.qz-urg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 12px; }
.qz-urg-level { font: 500 clamp(1.8rem, 5vw, 2.4rem)/1 var(--f-d); letter-spacing: -.02em; color: var(--uc); transition: color .6s; }
.qz-urg-score { font: 500 1.25rem/1 var(--f-b); font-variant-numeric: tabular-nums; color: var(--ivory); }
.qz-urg-score small { margin-left: 2px; font-size: .8rem; color: var(--ivory-3); }
.qz-urg-meter { position: relative; height: 12px; margin-top: 16px; border-radius: 99px; background: rgba(243, 238, 227, .08); }
.qz-urg-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #3DDC97, #E8C766 40%, #F0954A 68%, #E5484D);
  clip-path: inset(0 calc((1 - var(--u)) * 100%) 0 0 round 99px); transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1) .2s; }
.qz-urg-dot { position: absolute; top: 50%; left: calc(var(--u) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--ivory); border: 4px solid var(--uc); box-shadow: 0 0 0 4px rgba(6, 12, 28, .6), 0 0 18px var(--uc); transition: left 1.4s cubic-bezier(.16, 1, .3, 1) .2s, border-color .6s; }
.qz-urg[data-level="high"] .qz-urg-dot, .qz-urg[data-level="critical"] .qz-urg-dot { animation: urgPulse 1.8s ease-out 1.8s infinite; }
@keyframes urgPulse { 0% { box-shadow: 0 0 0 4px rgba(6, 12, 28, .6), 0 0 0 0 var(--uc); } 100% { box-shadow: 0 0 0 4px rgba(6, 12, 28, .6), 0 0 0 14px transparent; } }
.qz-urg-scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-3); }
.qz-urg-lead { margin-top: 20px; font: 500 var(--fs-md)/1.45 var(--f-b); color: var(--ivory); }
.qz-urg-why { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.qz-urg-why li { position: relative; padding-left: 26px; color: var(--ivory-2); }
.qz-urg-why li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--uc); transform: rotate(45deg); opacity: .9; }
.qz-urg-why b { color: var(--ivory); font-weight: 500; }
.qz-urg-math { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ivory-2); }
.qz-urg-math b { color: var(--gold-2); font-weight: 500; }
.qz-urg-why li { animation: qzIn .5s var(--ease) both; }
.qz-urg-why li:nth-child(1) { animation-delay: .9s; } .qz-urg-why li:nth-child(2) { animation-delay: 1.05s; } .qz-urg-why li:nth-child(3) { animation-delay: 1.2s; }
.qz-urg .eyebrow { justify-content: flex-start; }
.qz-lede { max-width: 34em; color: var(--ivory-2); font-size: var(--fs-md); }
.qz-q .qz-h { margin-bottom: 10px; }
.qz-sub { margin-bottom: 24px; color: var(--ivory-3); font-size: var(--fs-base); }
/* Quiz result: estimated missed revenue */
.qz-loss { margin-top: 20px; padding: 18px 20px; border: 1px solid rgba(243, 238, 227, .08); border-radius: 14px; background: rgba(6, 12, 28, .55); }
.qz-loss-k { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-3); }
.qz-loss-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 8px; font: 800 clamp(1.9rem, 6vw, 2.7rem)/1.05 var(--f-d); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--uc); transition: color .6s; }
.qz-loss-dash { color: var(--ivory-3); font-weight: 500; }
.qz-loss-num small { font: 500 var(--fs-sm)/1 var(--f-b); letter-spacing: 0; color: var(--ivory-3); }
.qz-loss-yr { margin-top: 8px; color: var(--ivory-2); }
.qz-loss-how { margin-top: 12px; }
.qz-loss-how summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; color: var(--gold-2); font-size: var(--fs-sm); list-style: none; }
.qz-loss-how summary::-webkit-details-marker { display: none; }
.qz-loss-how summary::before { content: "+"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-gold); font-size: 12px; line-height: 1; transition: transform .3s var(--ease); }
.qz-loss-how[open] summary::before { transform: rotate(45deg); }
.qz-loss-how p { margin-top: 8px; font-size: var(--fs-sm); color: var(--ivory-3); line-height: 1.6; }
/* Quiz result: payback (clients needed to cover the plan) */
.qz-roi { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding: 18px 20px; border: 1px solid var(--border-gold); border-radius: 14px; background: linear-gradient(135deg, rgba(212, 168, 51, .12), rgba(6, 12, 28, .5) 70%); }
.qz-roi-num { display: grid; place-items: center; flex: none; width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--border-gold); background: rgba(6, 12, 28, .6); text-align: center; line-height: 1; }
.qz-roi-n { display: block; font: 800 2.3rem/1 var(--f-d); color: var(--gold-2); font-variant-numeric: tabular-nums; }
.qz-roi-num span { display: block; margin-top: -14px; font-size: var(--fs-xs); color: var(--ivory-3); }
.qz-roi-k { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.qz-roi-t { margin-top: 6px; color: var(--ivory); }
.qz-roi-t b, .qz-roi-s b { color: var(--gold-2); font-weight: 500; }
.qz-roi-s { margin-top: 6px; font-size: var(--fs-sm); color: var(--ivory-2); }
@media (max-width: 479.98px) { .qz-roi { flex-direction: column; align-items: flex-start; } }

/* Free website report page (free-report.html) */
.fr-trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ivory-2); font-size: var(--fs-sm); }
.fr-trust li { display: inline-flex; align-items: center; gap: 8px; }
.fr-trust li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(212, 168, 51, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23E8C766' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: inset 0 0 0 1px var(--border-gold); }
.fr-sample { perspective: 1200px; }
.fr-sample-card { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--border-gold); border-radius: 22px; background: radial-gradient(120% 90% at 85% 0%, #14264F, var(--navy) 60%); box-shadow: var(--shadow-3), var(--inner-hi); transform: rotateY(-8deg) rotateX(4deg); }
.js .fr-sample-card { animation: frCardIn 1.1s var(--ease) .5s both; }
@keyframes frCardIn { from { opacity: 0; transform: translateY(40px) rotateY(-16deg) rotateX(8deg); } }
.fr-sample-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fr-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.fr-rows li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ivory-2); font-size: var(--fs-sm); }
.js .fr-rows li { animation: qzIn .6s var(--ease) both; animation-delay: calc(1.1s + var(--i) * .15s); }
.st { flex: none; padding: 5px 10px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.st--warn { color: #F0954A; background: rgba(240, 149, 74, .12); box-shadow: inset 0 0 0 1px rgba(240, 149, 74, .35); }
.st--mid { color: var(--gold-2); background: rgba(212, 168, 51, .12); box-shadow: inset 0 0 0 1px var(--border-gold); }
.st--bad { color: #F2A98E; background: rgba(229, 72, 77, .12); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .35); }
.fr-sample-note { margin-top: 14px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-3); }
.fr-grid { display: grid; gap: 48px; align-items: start; }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fr-list li { display: flex; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 21, 48, .6); transition: border-color .3s, transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .fr-list li:hover { border-color: var(--border-gold); transform: translateY(-2px); } }
.fr-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border-gold); background: rgba(212, 168, 51, .1); color: var(--gold-2); }
.fr-ico svg { width: 22px; height: 22px; }
.fr-list h3 { font-size: 1.2rem; }
.fr-list p { margin-top: 6px; color: var(--ivory-2); font-size: .9375rem; }
.fr-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.fr-steps li { display: flex; align-items: center; gap: 14px; color: var(--ivory); }
.fr-steps b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-gold); color: var(--gold-2); font-size: var(--fs-sm); }
.fr-form-h { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; }
.fr-form-sub { margin: 8px 0 24px; color: var(--ivory-2); }
.fr-frame { min-height: 560px; }
.fr-frame iframe { display: block; min-height: 560px; }
.fr-frame--placeholder { display: grid; place-content: center; gap: 6px; text-align: center; border: 1px dashed var(--border-gold); border-radius: 12px; color: var(--ivory-2); }
.fr-frame-hint { font-size: var(--fs-sm); color: var(--ivory-3); }
@media (min-width: 900px) {
  .fr-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; }
  .fr-form-wrap { position: sticky; top: calc(var(--hdr) + 24px); }
}
@media (max-width: 899.98px) { .fr-sample-card { transform: none; } }
.qz-report { margin-top: 18px; text-align: center; color: var(--ivory-2); }
.fr-grid .head { margin-bottom: 32px; }
.fr-sample-top .rp-tag { order: 0; }

/* =========================================================
   Conversion: FREE tag, header phone, sticky phone bar, report slide-in, form trust line
   ========================================================= */
html { -webkit-tap-highlight-color: transparent; }
.free-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 3px 7px; border-radius: 99px; vertical-align: middle;
  background: linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); color: var(--gold-ink); font: 700 .6875rem/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; }
.menu-nav .free-tag { font-size: .6875rem; margin-left: 10px; }

/* Header phone: shown only where there's room */
.header-phone { display: none; }
@media (min-width: 1200px) {
  .header-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 28px; color: var(--ivory-2); text-decoration: none; font: 500 var(--fs-sm)/1 var(--f-b); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .25s; }
  .header-phone svg { width: 16px; height: 16px; color: var(--gold); }
}
@media (hover: hover) and (pointer: fine) { .header-phone:hover { color: var(--gold-2); } }
@media (min-width: 900px) and (max-width: 1199.98px) { .nav { gap: 22px; } .nav a { letter-spacing: .14em; } }

/* Sticky bar on phones */
.m-bar { display: none; }
@media (max-width: 899.98px) {
  .has-m-bar body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .m-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(6, 12, 28, .92); border-top: 1px solid var(--border-gold);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(110%); transition: transform .45s var(--ease); }
  .m-bar.is-in { transform: none; }
  .m-bar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 99px;
    font: 500 .875rem/1 var(--f-b); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; touch-action: manipulation;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .12s var(--ease); }
  .m-bar a:active { transform: scale(.97); }
  .m-bar-call { border: 1px solid var(--border-gold-strong); color: var(--ivory); }
  .m-bar-call svg { width: 18px; height: 18px; color: var(--gold-2); }
  .m-bar-main { background: linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); color: var(--gold-ink); }
}

/* Desktop report slide-in */
.r-card { position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 320px; padding: 22px 22px 20px; border: 1px solid var(--border-gold); border-radius: 18px;
  background: linear-gradient(160deg, rgba(22, 40, 79, .97), rgba(10, 21, 48, .97)); box-shadow: var(--shadow-3), var(--inner-hi);
  opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.r-card.is-in { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s; }
.r-card.no-motion { transition: none; }
.r-card-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ivory-3); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: color .2s, background-color .2s; }
@media (hover: hover) and (pointer: fine) { .r-card-x:hover { color: var(--ivory); background: rgba(243, 238, 227, .06); } }
.r-card-k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.r-card-k .free-tag { margin-left: 0; }
.r-card-t { margin-top: 10px; font: 500 1.3rem/1.15 var(--f-d); letter-spacing: -.01em; color: var(--ivory); padding-right: 20px; }
.r-card-s { margin-top: 8px; font-size: var(--fs-sm); color: var(--ivory-2); }
.r-card .btn { margin-top: 16px; width: 100%; }
@media (max-width: 899.98px) { .r-card { display: none; } }

/* Trust line under forms */
.form-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; text-align: center; font-size: var(--fs-sm); color: var(--ivory-3); }
.form-trust svg { flex: none; width: 15px; height: 15px; color: var(--gold); }
/* Thank-you page */
.ty-page { min-height: 90svh; display: grid; align-items: center; }
.ty-card { max-width: 640px; margin: 0 auto; padding: clamp(32px, 6vw, 56px) clamp(22px, 5vw, 48px); border: 1px solid var(--border-gold); border-radius: 22px; background: linear-gradient(160deg, rgba(22, 40, 79, .9), rgba(10, 21, 48, .9)); box-shadow: var(--shadow-3), var(--inner-hi); }
.ty-check { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: linear-gradient(135deg, #E8C766, #D4A833 55%, #B98E22); color: var(--gold-ink); font-size: 2rem; font-weight: 700; box-shadow: 0 0 0 8px rgba(212, 168, 51, .12), 0 0 36px rgba(232, 199, 102, .3); }
.js .ty-check { animation: tyPop .7s cubic-bezier(.16, 1, .3, 1) .2s both; }
@keyframes tyPop { from { opacity: 0; transform: scale(.6) rotate(-20deg); } }
.ty-page h1 { max-inline-size: 16ch; }
.ty-steps { list-style: none; margin: 28px auto 0; padding: 0; display: grid; gap: 12px; max-width: 420px; text-align: left; }
.ty-steps li { display: flex; align-items: center; gap: 14px; color: var(--ivory-2); }
.ty-steps b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-gold); color: var(--gold-2); font-size: var(--fs-sm); }
.ty-page .actions { justify-content: center; }
/* Header with phone + 5 links: keep every link on one line */
.nav a { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1499.98px) { .nav { gap: 24px; } .nav a { letter-spacing: .14em; } .header-phone { margin-left: 22px; } }
@media (min-width: 900px) and (max-width: 1099.98px) { .nav { gap: 16px; } .nav a { letter-spacing: .1em; } .site-header .btn.header-cta { padding: 0 1em; } }
/* Keep the home page's round back-to-top button clear of the phone bar and the report card */
@media (max-width: 899.98px) { .has-m-bar .float-mark { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
body:has(.float-mark) .r-card { bottom: 104px; }

/* Phase 5 polish */
/* Bigger invisible tap area on inline call links (e.g. "Or call (407) 269-8488") */
.price-note a[href^="tel:"] { position: relative; }
.price-note a[href^="tel:"]::after { content: ""; position: absolute; inset: -13px -6px; }
/* Counting numbers keep a fixed width so they don't jiggle */
[data-count] { font-variant-numeric: tabular-nums; }
/* Nothing can push the page sideways (home marquee/glow at 920-1100px) */
html { overflow-x: clip; }
/* Home contact form: fade in once GoHighLevel has finished its load/reload */
.form-wrap--ghl iframe { transition: opacity .6s var(--ease); }
.form-wrap--ghl.is-loading iframe { opacity: 0; }
/* Report card steps aside while a form is on screen */
.r-card.is-in.is-away { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }