/* ==========================================================================
   Kairovas. Single stylesheet for the whole site.

   Everything lives here because the Content-Security-Policy sets
   style-src 'self', which blocks <style> blocks and style="" attributes.
   Edit this file, not the HTML, for anything visual.

   Sections
     1.  Fonts
     2.  Tokens
     3.  Base, ambient background, grain
     4.  Layout primitives
     5.  Typography
     6.  Buttons
     7.  Pills and badges
     8.  Skip link and focus
     9.  Header and navigation
     10. Hero and the orb
     11. Glass cards
     12. Section furniture
     13. Steps, lists, rows
     14. The sample record
     15. FAQ accordion
     16. Contact page and forms
     17. CTA band
     18. Footer
     19. Sticky mobile call bar
     20. Reveal on scroll
     21. Utilities
     22. Reduced motion
   ========================================================================== */


/* 1. Fonts =================================================================
   Latin subset only, self hosted. No CDN request is made at runtime.

   The fallback faces carry metric overrides measured from the real font
   files (unitsPerEm 1000, hhea ascent 1025, descent -275, lineGap 0,
   x-height 516, lowercase n advance 568 Sans / 600 Mono). size-adjust is
   applied after the overrides, so each override is the Plex value divided
   by the size-adjust factor and the fallback line box matches exactly.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102%;
  ascent-override: 100.5%;
  descent-override: 27%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Menlo"), local("DejaVu Sans Mono"), local("Consolas"), local("Liberation Mono");
  size-adjust: 99.6%;
  ascent-override: 102.9%;
  descent-override: 27.6%;
  line-gap-override: 0%;
}


/* 2. Tokens ================================================================ */

:root {
  /* Surfaces */
  --ink: #050508;
  --ink-raised: #0A0C14;
  --ink-deep: #030305;
  --glass: rgba(13, 15, 24, 0.82);
  --glass-soft: rgba(16, 19, 30, 0.6);

  /* Gold family. The gradient runs gold to orange to amber. */
  --gold: #F4C76B;
  --gold-bright: #FBBF24;
  --gold-warm: #F97316;
  --gold-deep: #B98A32;
  --gold-glow: rgba(244, 199, 107, 0.45);
  --gold-line: rgba(244, 199, 107, 0.30);
  --gold-wash: rgba(244, 199, 107, 0.08);

  /* A cool second light so the gold has something to sit against. */
  --blue: #60A5FA;
  --blue-wash: rgba(96, 165, 250, 0.10);

  --text: #F9FAFB;
  --muted: #A2A9B4;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Rounded everywhere. */
  --r-xs: 0.6rem;
  --r-sm: 0.9rem;
  --r-md: 1.15rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 26px 60px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 28px rgba(244, 199, 107, 0.38);

  --sans: "Plex Sans", "Plex Sans Fallback", system-ui, sans-serif;
  --mono: "Plex Mono", "Plex Mono Fallback", ui-monospace, monospace;

  --t1: clamp(2.35rem, 1.65rem + 3.1vw, 3.6rem);
  --t2: clamp(1.75rem, 1.42rem + 1.6vw, 2.4rem);
  --t3: clamp(1.2rem, 1.08rem + 0.62vw, 1.45rem);
  --t4: 1.075rem;
  --t5: 1rem;
  --t6: 0.9375rem;
  --t7: 0.78rem;
  --t8: 0.7rem;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --wrap: 71.25rem;
  --measure: 68ch;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --band: clamp(2.75rem, 5vw, 4.25rem);
  --bar-height: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* 3. Base, ambient background, grain ======================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: var(--bar-height);
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t5);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Two coloured lights, one warm and high, one cool and low. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 12% -12%, rgba(244, 199, 107, 0.13) 0%, transparent 62%),
    radial-gradient(ellipse 65% 45% at 88% 8%, rgba(96, 165, 250, 0.07) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 50% 108%, rgba(244, 199, 107, 0.07) 0%, transparent 60%);
}

/* Film grain keeps the large flat areas from banding. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.03;
  background-size: 180px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

svg {
  display: block;
  flex: none;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

p {
  margin: 0;
}


/* 4. Layout primitives ===================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  position: relative;
  padding-block: var(--band);
}

.measure {
  max-width: var(--measure);
}

.flow > * + * {
  margin-top: var(--s5);
}

.flow > * + h3 {
  margin-top: var(--s7);
}

.flow > * + .note {
  margin-top: var(--s4);
}

/* Hairline that fades out at both ends. */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right, transparent, var(--gold-line), transparent);
}


/* 5. Typography ============================================================ */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t1);
  max-width: 20ch;
}

h2 {
  font-size: var(--t2);
  max-width: 26ch;
}

h3 {
  font-size: var(--t3);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--t4);
  letter-spacing: -0.005em;
}

/* The moving gold. Used on one phrase per heading, never a whole page. */
.gold {
  background-image: linear-gradient(
    100deg,
    #F4C76B 0%,
    #FBBF24 22%,
    #F97316 44%,
    #FBBF24 66%,
    #F4C76B 88%,
    #F4C76B 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: goldShift 9s linear infinite;
}

@keyframes goldShift {
  from { background-position: 0% 50%; }
  to   { background-position: -220% 50%; }
}

.lede {
  max-width: 54ch;
  color: var(--muted);
  font-size: var(--t4);
  line-height: 1.72;
}

.note {
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--t6);
}

.prose {
  max-width: var(--measure);
  color: var(--muted);
}

.prose > * + * {
  margin-top: var(--s4);
}

.prose strong {
  color: var(--text);
  font-weight: 500;
}

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

.mono {
  font-family: var(--mono);
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.18s var(--ease), opacity 0.18s var(--ease);
}

a:hover {
  color: var(--gold-bright);
}

.prose a,
.link-underline {
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.22em;
}

.prose a:hover,
.link-underline:hover {
  text-decoration-color: var(--gold);
}

/* Forward link with its arrow, nudges on hover. */
.link-next {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--gold);
  font-weight: 500;
}

.link-next svg {
  transition: transform 0.25s var(--ease);
}

.link-next:hover svg {
  transform: translateX(4px);
}


/* 6. Buttons ===============================================================
   Two real styles. Primary is solid gold with a gradient and a glow.
   Glass is the dark translucent one with a gold corner light.
   ------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.8rem 1.65rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--t6);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.btn > * {
  position: relative;
  z-index: 1;
}

/* Specular sweep that rises on hover. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.btn:hover::before {
  opacity: 0.4;
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

.btn-primary {
  background-image: linear-gradient(135deg, #FBBF24 0%, #F4C76B 42%, #E9A93F 100%);
  color: #120C02;
  font-weight: 600;
  box-shadow:
    0 0 24px rgba(244, 199, 107, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(120, 80, 10, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  color: #120C02;
  box-shadow:
    0 0 40px rgba(244, 199, 107, 0.6),
    0 16px 34px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-glass {
  color: var(--text);
  border-color: var(--line-strong);
  background-image:
    radial-gradient(circle at 100% 100%, rgba(244, 199, 107, 0.55), transparent 60%),
    linear-gradient(135deg, rgba(18, 24, 42, 0.95), rgba(12, 15, 26, 0.8));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 18px rgba(244, 199, 107, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-glass:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(244, 199, 107, 0.75);
  box-shadow:
    0 0 32px rgba(244, 199, 107, 0.5),
    0 16px 34px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-ghost {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(12, 15, 26, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 163, 184, 0.6);
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.28);
}

.btn-sm {
  padding: 0.55rem 1.15rem;
  font-size: var(--t7);
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}


/* 7. Pills and badges ====================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.9rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold);
  font-size: var(--t8);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Live dot, used on the eyebrow pill. */
.pill-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px var(--gold);
  animation: pulseDot 2.2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}

.pill-plain {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}


/* 8. Skip link and focus =================================================== */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip {
  position: absolute;
  z-index: 100;
  top: var(--s3);
  left: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #120C02;
  font-size: var(--t7);
  font-weight: 600;
  transform: translateY(-250%);
}

.skip:focus {
  transform: none;
  color: #120C02;
}


/* 9. Header and navigation ================================================= */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(5, 5, 8, 0.92), rgba(5, 5, 8, 0.62));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.site-head.is-stuck {
  background: linear-gradient(to bottom, rgba(5, 5, 8, 0.97), rgba(8, 9, 16, 0.88));
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 4.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  flex-shrink: 0;
}

.brand-mark {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.28rem;
  border-radius: 50%;
  object-fit: contain;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 58%),
    linear-gradient(150deg, #15171F, #07080D);
  box-shadow:
    0 0 14px rgba(244, 199, 107, 0.28),
    inset 0 0 0 1px rgba(244, 199, 107, 0.45);
  transition: box-shadow 0.28s var(--ease);
}

.brand:hover .brand-mark {
  box-shadow:
    0 0 22px rgba(244, 199, 107, 0.6),
    inset 0 0 0 1px rgba(244, 199, 107, 0.6);
}

.brand-text {
  line-height: 1.15;
}

.brand-name {
  display: block;
  font-size: var(--t6);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand-sub {
  display: block;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(10, 12, 20, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.nav-toggle:hover {
  border-color: var(--gold-line);
  box-shadow: 0 0 18px rgba(244, 199, 107, 0.3);
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav a {
  color: var(--muted);
  font-size: var(--t7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--gold);
}

.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav .nav-cta a,
.site-nav .nav-cta a[aria-current="page"] {
  color: #120C02;
  text-transform: none;
  letter-spacing: 0.02em;
}

@media (max-width: 63.999rem) {
  .head-inner {
    position: relative;
    flex-wrap: wrap;
  }

  .site-nav {
    flex-basis: 100%;
    order: 3;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-bottom: var(--s4);
    padding: 0.65rem;
    border: 1px solid var(--gold-line);
    border-radius: var(--r-lg);
    background: rgba(10, 12, 22, 0.96);
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .site-nav a {
    display: block;
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-md);
    font-size: var(--t6);
  }

  .site-nav a:hover {
    background: var(--gold-wash);
  }

  .site-nav .nav-cta {
    margin-top: 0.3rem;
  }

  .site-nav .nav-cta a {
    text-align: center;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav.is-open {
    display: block;
  }
}

@media (min-width: 64rem) {
  .nav-toggle {
    display: none;
  }
}


/* 10. Hero and the orb =====================================================
   The orb is the one piece of pure decoration on the site: a glass squircle
   with a slowly rotating conic light behind it and the logo floating above.
   ------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3.25rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.hero h1 {
  margin-block: var(--s5) var(--s5);
}

.hero .lede {
  margin-bottom: var(--s6);
}

.hero-actions {
  margin-bottom: var(--s5);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  color: var(--muted);
  font-size: var(--t7);
}

.hero-meta a {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-meta-item svg {
  color: var(--gold-deep);
}

.orb-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
}

.orb {
  position: relative;
  width: min(26rem, 78vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 34%;
}

/* Rotating conic light behind the glass. */
.orb-halo {
  position: absolute;
  inset: -14%;
  border-radius: 42%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(244, 199, 107, 0.85) 55deg,
    rgba(249, 115, 22, 0.5) 105deg,
    transparent 165deg,
    transparent 235deg,
    rgba(96, 165, 250, 0.45) 295deg,
    transparent 355deg
  );
  filter: blur(34px);
  opacity: 0.85;
  animation: orbSpin 18s linear infinite;
  pointer-events: none;
}

@keyframes orbSpin {
  to { transform: rotate(360deg); }
}

/* The glass face itself. */
.orb-face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 14%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(244, 199, 107, 0.45), transparent 60%),
    radial-gradient(circle at 50% 55%, rgba(60, 48, 24, 0.55), transparent 70%),
    linear-gradient(150deg, rgba(14, 17, 28, 0.95), rgba(5, 7, 14, 0.94));
  box-shadow:
    0 0 70px rgba(244, 199, 107, 0.28),
    0 40px 90px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.orb-ring {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(244, 199, 107, 0.32);
  border-radius: 40%;
  box-shadow:
    0 0 22px rgba(244, 199, 107, 0.28),
    inset 0 0 30px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.orb-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(244, 199, 107, 0.22), transparent 62%);
  animation: orbPulse 4.2s ease-out infinite;
  pointer-events: none;
}

@keyframes orbPulse {
  0%   { opacity: 0.45; transform: scale(0.96); }
  70%  { opacity: 0; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.16); }
}

.orb-logo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 22px rgba(244, 199, 107, 0.28));
  animation: orbFloat 6.5s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (max-width: 61.999rem) {
  .orb-wrap {
    order: -1;
  }

  .orb {
    width: min(19rem, 70vw);
  }

  .hero-text {
    text-align: center;
  }

  .hero h1,
  .hero .lede {
    margin-inline: auto;
  }

  .hero-actions,
  .hero-meta {
    justify-content: center;
  }
}


/* 11. Glass cards ==========================================================
   The spotlight follows the pointer through --mx / --my, which site.js sets
   on hover. Without JavaScript the highlight simply sits in the centre.
   ------------------------------------------------------------------------- */

.card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    26rem circle at var(--mx) var(--my),
    rgba(244, 199, 107, 0.16),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 107, 0.4);
  box-shadow: var(--shadow-lift), var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card:hover::before {
  opacity: 1;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: var(--s4);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  background: linear-gradient(140deg, rgba(244, 199, 107, 0.2), rgba(244, 199, 107, 0.04));
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.card-label {
  margin-bottom: 0.45rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--t8);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.card h3 {
  margin-bottom: var(--s2);
}

.card p {
  color: var(--muted);
  font-size: var(--t6);
  line-height: 1.7;
}

.card-featured {
  border-color: rgba(244, 199, 107, 0.45);
  background:
    radial-gradient(circle at 0% 0%, rgba(244, 199, 107, 0.12), transparent 58%),
    var(--glass);
  box-shadow:
    0 0 40px rgba(244, 199, 107, 0.22),
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 12. Section furniture ==================================================== */

.section-head {
  margin-bottom: var(--s7);
}

.section-head .pill {
  margin-bottom: var(--s4);
}

.section-head h2 {
  margin-bottom: var(--s3);
}

.section-head .lede {
  font-size: var(--t5);
}

.breadcrumb {
  padding-top: var(--s6);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.breadcrumb a {
  color: var(--muted);
}

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

.breadcrumb [aria-current="page"] {
  color: var(--text);
}

.breadcrumb-sep {
  color: var(--gold-deep);
}


/* 13. Steps, lists, rows =================================================== */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .steps-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step {
  counter-increment: step;
}

.step-num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--s4);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--t7);
  font-weight: 500;
  box-shadow: 0 0 18px rgba(244, 199, 107, 0.18);
}

.step-num::before {
  content: counter(step, decimal-leading-zero);
}

/* Checked list */
.ticks {
  display: grid;
  gap: var(--s3);
}

@media (min-width: 40rem) {
  .ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3) var(--s5);
  }
}

.ticks li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  color: var(--muted);
  font-size: var(--t6);
}

.ticks svg {
  margin-top: 0.28rem;
  color: var(--gold);
}

/* Two column definition rows inside a glass panel. */
.rows {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

.rows > div {
  display: grid;
  gap: var(--s2);
  padding: var(--s5);
  border-top: 1px solid var(--line);
  transition: background 0.28s var(--ease);
}

.rows > div:first-child {
  border-top: 0;
}

.rows > div:hover {
  background: rgba(244, 199, 107, 0.045);
}

@media (min-width: 48rem) {
  .rows > div {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s6);
  }
}

.rows dt {
  color: var(--text);
  font-weight: 500;
}

.rows dd {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--t6);
  line-height: 1.7;
}

/* Dashed prose list */
.dashes li {
  position: relative;
  max-width: var(--measure);
  padding-left: var(--s5);
  color: var(--muted);
  font-size: var(--t6);
}

.dashes li + li {
  margin-top: var(--s3);
}

.dashes li::before {
  content: "";
  position: absolute;
  top: 0.78rem;
  left: 0;
  width: 0.7rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.closing-line {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--t6);
  line-height: 1.75;
}


/* 14. The sample record ====================================================
   A glass panel that fills its fields once, the first time it scrolls into
   view. The values are in the HTML, so with scripting off or reduced motion
   on it simply renders already filled.
   ------------------------------------------------------------------------- */

.record {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 0% 0%, rgba(244, 199, 107, 0.07), transparent 55%),
    var(--glass);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  overflow: hidden;
}

.record-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.record-head p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t8);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.record-body {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 54rem) {
  .record-body {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
}

.record-narrative {
  padding: var(--s5);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 54rem) {
  .record-narrative {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}

.record-narrative h3 {
  margin-bottom: var(--s3);
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--t8);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.record-narrative p {
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--t6);
  line-height: 1.8;
}

.record-narrative p + p {
  margin-top: var(--s3);
}

.record-fields {
  padding: var(--s3) 0;
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--s4);
  padding: 0.42rem var(--s5);
  border-left: 2px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

@media (min-width: 26rem) {
  .field {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.field dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t8);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.field dd {
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t7);
  line-height: 1.6;
}

.field-flag dd {
  color: #6EE7A8;
}

.record.is-arming .field dd {
  opacity: 0;
}

.record.is-arming .field.is-filled dd {
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}

.record.is-arming .field.is-active {
  border-left-color: var(--gold);
  background: rgba(244, 199, 107, 0.07);
}


/* 15. FAQ accordion ========================================================
   Answers are visible in the markup and collapsed by site.js, so with
   scripting off every answer is readable. Opening one closes the others.
   ------------------------------------------------------------------------- */

.faq {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:first-child {
  border-top: 0;
}

.faq-q {
  display: flex;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.15rem var(--s5);
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--t5);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: color 0.22s var(--ease), background 0.22s var(--ease);
}

.faq-q:hover {
  color: var(--gold);
  background: rgba(244, 199, 107, 0.045);
}

.faq-icon {
  position: relative;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: var(--gold-wash);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gold);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.faq-icon::before {
  width: 0.68rem;
  height: 1.5px;
}

.faq-icon::after {
  width: 1.5px;
  height: 0.68rem;
  transition: opacity 0.25s var(--ease);
}

.faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(90deg);
  background: rgba(244, 199, 107, 0.2);
}

.faq-q[aria-expanded="true"] .faq-icon::after {
  opacity: 0;
}

.faq-a {
  padding: 0 var(--s5) 1.25rem;
  color: var(--muted);
  font-size: var(--t6);
  line-height: 1.75;
}

.faq-a > * + * {
  margin-top: var(--s3);
}

/* Collapsed is the default whenever scripting is available, so the answers
   start closed on the very first paint. If JavaScript had to add a class to
   collapse them, that first transition would run before the element had ever
   been laid out and the row would stay stuck at its content height. */
.js .faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}

.js .faq-a-wrap.is-open {
  grid-template-rows: 1fr;
}

.js .faq-a-inner {
  overflow: hidden;
  min-height: 0;
}


/* 16. Contact page and forms =============================================== */

.contact-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s7);
  }
}

.contact-grid .pill + h2 {
  margin-top: var(--s4);
}

.pill + .route-card,
.contact-grid h2 + .route-card {
  margin-top: var(--s5);
}

.route-card {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.route-card + .route-card {
  margin-top: var(--s4);
}

.route-card h3 {
  margin-bottom: 0.3rem;
  font-size: var(--t4);
}

.route-card p {
  color: var(--muted);
  font-size: var(--t6);
  line-height: 1.7;
}

.route-value {
  display: inline-block;
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--t6);
  font-weight: 500;
}

/* The form panel */
.form-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(244, 199, 107, 0.1), transparent 55%),
    linear-gradient(155deg, rgba(14, 17, 27, 0.96), rgba(9, 11, 19, 0.92));
  box-shadow:
    0 0 44px rgba(244, 199, 107, 0.16),
    0 28px 60px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.form-panel h2 {
  margin-bottom: var(--s2);
}

.form-panel > .note {
  margin-bottom: var(--s5);
}

.form-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  color: #D1D5DB;
  font-size: var(--t8);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.form-field .optional {
  color: var(--gold-deep);
  letter-spacing: 0.06em;
  text-transform: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(5, 5, 8, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t6);
  line-height: 1.45;
  outline: none;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

input::placeholder,
textarea::placeholder {
  color: rgba(156, 163, 175, 0.65);
}

select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}

textarea {
  min-height: 8.5rem;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(244, 199, 107, 0.4);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(244, 199, 107, 0.75);
  box-shadow: 0 0 0 4px rgba(244, 199, 107, 0.12);
}

.input-error {
  border-color: rgba(248, 113, 113, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1) !important;
}

.field-error {
  min-height: 1rem;
  color: #FCA5A5;
  font-size: var(--t8);
}

.form-alert {
  margin-bottom: var(--s4);
  padding: 0.85rem 1rem;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: var(--r-sm);
  background: rgba(127, 29, 29, 0.22);
  color: #FECACA;
  font-size: var(--t6);
  line-height: 1.6;
}

.form-alert[hidden] {
  display: none;
}

.form-consent {
  margin-top: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--t8);
  line-height: 1.7;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s5);
}

.form-promise {
  color: var(--muted);
  font-size: var(--t7);
}

/* Off screen honeypot. Hidden from pointers and assistive technology. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* 17. CTA band ============================================================= */

.cta-block {
  position: relative;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 60% 55% at 0% 0%, rgba(244, 199, 107, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(96, 165, 250, 0.12), transparent 60%),
    rgba(10, 12, 22, 0.9);
  box-shadow:
    0 0 52px rgba(244, 199, 107, 0.2),
    0 28px 60px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  text-align: center;
}

.cta-block h2 {
  max-width: 22ch;
  margin: var(--s4) auto var(--s3);
}

.cta-block .lede {
  margin: 0 auto var(--s6);
}

.cta-block .btn-row {
  justify-content: center;
}

.cta-note {
  margin-top: var(--s5);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t7);
}

.cta-note a {
  font-weight: 500;
}


/* 18. Footer =============================================================== */

.site-foot {
  margin-top: var(--band);
  padding-block: var(--band) var(--s7);
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(3, 3, 5, 0.4), rgba(3, 3, 5, 0.95));
}

.foot-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .foot-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--s7);
  }
}

.foot-logo {
  width: 11rem;
  height: auto;
  margin-bottom: var(--s4);
}

.foot-tagline {
  max-width: 32ch;
  color: var(--muted);
  font-size: var(--t7);
  line-height: 1.7;
}

.foot-contact {
  margin-top: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: var(--t7);
}

.foot-col h2 {
  margin-bottom: var(--s4);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t8);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.foot-col li + li {
  margin-top: 0.6rem;
}

.foot-col a {
  color: var(--text);
  font-size: var(--t7);
}

.foot-col a:hover {
  color: var(--gold);
}

.foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: baseline;
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t8);
}

.foot-disclaimer {
  flex-basis: 100%;
  max-width: 78ch;
  line-height: 1.75;
}


/* 19. Sticky mobile call bar =============================================== */

.call-bar {
  display: none;
}

@media (max-width: 47.999rem) {
  :root {
    --bar-height: 4.75rem;
  }

  .call-bar {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
    padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: rgba(8, 9, 16, 0.9);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }

  .call-bar .btn {
    padding-inline: var(--s3);
    font-size: var(--t7);
  }
}


/* 20. Reveal on scroll ===================================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Without JavaScript nothing is ever hidden. */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}


/* 21. Utilities ============================================================ */

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}

.u-center {
  text-align: center;
}

.u-center h2,
.u-center .lede {
  margin-inline: auto;
}


/* 22. Reduced motion =======================================================
   Everything decorative stops. The record renders filled, the reveal blocks
   are simply visible, and the orb sits still.
   ------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .record.is-arming .field dd {
    opacity: 1;
  }

  .record.is-arming .field.is-active {
    border-left-color: transparent;
    background: none;
  }

  .btn:hover,
  .card:hover {
    transform: none;
  }
}