/* ==========================================================================
   Rise Agency — liquid chrome / liquid glass design system
   Single stylesheet, no build step, no external requests.
   Sections:  1 tokens · 2 reset · 3 chrome+glass primitives · 4 background
              5 layout · 6 header/nav · 7 components · 8 pages · 9 footer
              10 motion+a11y+print
   ========================================================================== */

/* 1 ── tokens ───────────────────────────────────────────────────────────── */
:root {
  /* base */
  --ink:        #04050a;
  --ink-1:      #080a12;
  --ink-2:      #0d1019;
  --ink-3:      #151926;

  /* chrome ramp — the metal.
     cr-0 is the darkest stop and therefore sets the worst-case contrast of every
     heading. It was #4a5163, which looked richer but left parts of a heading
     marginal against the near-black field. Don't push it back down without
     checking a heading at 375px width. */
  --cr-0:  #6f7889;
  --cr-1:  #929bad;
  --cr-2:  #b9c1cf;
  --cr-3:  #e9eef6;
  --cr-4:  #ffffff;

  /* iridescence — the oil-slick in the metal */
  --ir-cyan:    #7fe6ff;
  --ir-violet:  #b79cff;
  --ir-rose:    #ff9ec4;
  --ir-gold:    #ffd9a0;

  /* text */
  --fg:         #e8ecf4;
  --fg-mute:    #9aa3b5;
  --fg-dim:     #6b7488;

  /* glass */
  --glass-bg:     linear-gradient(147deg, rgba(255,255,255,.11), rgba(255,255,255,.028) 46%, rgba(255,255,255,.065));
  --glass-edge:   rgba(255,255,255,.16);
  --glass-blur:   blur(22px) saturate(175%) brightness(1.06);
  --glass-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(255,255,255,.07),
      inset 1px 0 0 rgba(255,255,255,.09),
      inset -1px 0 0 rgba(255,255,255,.09),
      0 24px 56px -22px rgba(0,0,0,.86),
      0 2px 10px -4px rgba(0,0,0,.5);

  /* type */
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* metrics */
  --wrap:    1180px;
  --wrap-nar: 760px;
  --r-sm:  10px;
  --r:     18px;
  --r-lg:  26px;
  --r-pill: 999px;

  --pad-block: clamp(4.5rem, 9vw, 8.5rem);
  --gut:       clamp(1.15rem, 4vw, 2.25rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 2 ── reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  color: var(--fg);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.08; font-weight: 700; letter-spacing: -.028em; }
h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.6rem); letter-spacing: -.042em; }
h2 { font-size: clamp(1.95rem, 1.3rem + 2.5vw, 3.05rem); letter-spacing: -.034em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); letter-spacing: -.022em; }
h4 { font-size: 1.02rem; letter-spacing: -.012em; }
strong { color: #fff; font-weight: 650; }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); margin: 3rem 0; }
::selection { background: rgba(183,156,255,.32); color: #fff; }

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

/* 3 ── chrome + glass primitives ───────────────────────────────────────── */

/* -- liquid chrome text fill. Applied to every heading and title. -- */
.chrome {
  background-image: linear-gradient(
    100deg,
    var(--cr-0)  0%,
    var(--cr-2)  9%,
    var(--cr-4) 17%,
    var(--ir-cyan) 22%,
    var(--cr-3) 27%,
    var(--cr-1) 36%,
    var(--cr-4) 45%,
    var(--ir-violet) 50%,
    var(--cr-3) 55%,
    var(--cr-0) 64%,
    var(--cr-2) 72%,
    var(--cr-4) 80%,
    var(--ir-gold) 84%,
    var(--cr-2) 89%,
    var(--cr-1) 100%
  );
  background-size: 250% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 26px rgba(0,0,0,.5));
  animation: chrome-flow 14s linear infinite;
  padding-bottom: .04em;   /* stops clipped descenders under background-clip */
}
@keyframes chrome-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 250% 50%; }
}
/* slower, wider sweep for the big hero line */
.chrome--hero { background-size: 190% 100%; animation-duration: 18s; }

/* -- liquid glass plate. The heading treatment + every card surface. -- */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
  overflow: hidden;
}
/* specular highlight — the wet top-edge that reads as glass */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -14%, rgba(255,255,255,.30), transparent 58%),
    radial-gradient(90% 60% at 86% 108%, rgba(127,230,255,.13), transparent 62%);
  z-index: -1;
}
/* refraction band that drifts across the plate */
.glass::after {
  content: "";
  position: absolute;
  top: -60%; left: -35%;
  width: 42%; height: 220%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.13) 42%, rgba(183,156,255,.10) 54%, transparent);
  transform: rotate(14deg);
  animation: glass-sheen 11s var(--ease) infinite;
  z-index: -1;
}
@keyframes glass-sheen {
  0%, 62%  { left: -45%; opacity: 0; }
  70%      { opacity: 1; }
  100%     { left: 118%; opacity: 0; }
}

/* Fallback where backdrop-filter is unsupported (older Firefox): the plate
   still has to be legible, so give it a real fill instead of a blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: linear-gradient(147deg, rgba(26,31,45,.94), rgba(13,16,25,.93)); }
}

/* -- the heading treatment: glass plate wrapping chrome text -- */
.title-glass {
  display: inline-block;
  padding: clamp(.55rem, 1.6vw, .95rem) clamp(1rem, 2.6vw, 1.75rem);
  border-radius: var(--r-lg);
  background: linear-gradient(147deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 52%, rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 18px 44px -24px rgba(0,0,0,.9);
  max-width: 100%;
}
.title-glass > * { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 1.35rem;
  padding: .42rem .95rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ir-cyan);
  box-shadow: 0 0 10px var(--ir-cyan);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .32; } }

.lede {
  font-size: clamp(1.075rem, 1rem + .5vw, 1.32rem);
  line-height: 1.6;
  color: var(--fg-mute);
  max-width: 62ch;
}

/* 4 ── liquid chrome background field ──────────────────────────────────── */
.field {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: var(--ink);
  contain: strict;
}
/* molten metal bands, warped by the SVG turbulence filter in the markup */
.field__metal {
  position: absolute;
  inset: -25%;
  background:
    repeating-linear-gradient(
      74deg,
      #05070d 0px,
      #1c2334 42px,
      #48536b 78px,
      #99a5bb 104px,
      #e6ecf7 118px,
      #8e9aaf 132px,
      #3d465c 162px,
      #0a0d16 208px,
      #05070d 250px
    );
  filter: url(#rts-liquid) blur(22px);
  opacity: .62;
  animation: metal-drift 42s linear infinite;
  will-change: transform;
}
@keyframes metal-drift {
  0%   { transform: translate3d(0,0,0) rotate(0deg)   scale(1.06); }
  50%  { transform: translate3d(-5%,3%,0) rotate(2.2deg) scale(1.16); }
  100% { transform: translate3d(0,0,0) rotate(0deg)   scale(1.06); }
}
/* iridescent slick sitting on the metal */
.field__slick {
  position: absolute;
  inset: -30%;
  background:
    conic-gradient(from 210deg at 32% 38%,
      rgba(127,230,255,.34), rgba(183,156,255,.30) 22%,
      rgba(255,158,196,.22) 42%, rgba(255,217,160,.20) 60%,
      rgba(127,230,255,.30) 82%, rgba(127,230,255,.34));
  filter: blur(95px);
  mix-blend-mode: color-dodge;
  opacity: .55;
  animation: slick-turn 58s linear infinite;
  will-change: transform;
}
@keyframes slick-turn {
  0%   { transform: rotate(0deg)   scale(1.1); }
  100% { transform: rotate(360deg) scale(1.1); }
}
/* vignette so text always wins against the field */
.field__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(135% 100% at 50% -6%, transparent 8%, rgba(4,5,10,.40) 46%, rgba(4,5,10,.86) 100%),
    linear-gradient(180deg, rgba(4,5,10,.18), rgba(4,5,10,.62));
}
/* fine grain — kills gradient banding, adds the photographic feel */
.field__grain {
  position: absolute;
  inset: 0;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.field__svg { position: absolute; width: 0; height: 0; }

/* 5 ── layout ──────────────────────────────────────────────────────────── */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gut) * 2), var(--wrap-nar)); margin-inline: auto; }
.section { padding-block: var(--pad-block); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section__head { max-width: 68ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section__head .lede { margin-top: 1.35rem; }
.center { text-align: center; }
.center .section__head { margin-inline: auto; }
.center .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.65rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-3); color: #fff;
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0; z-index: 200;
}
.skip:focus { left: 0; }

/* 6 ── header / nav ────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 100;
  padding: .7rem 0;
  background: rgba(4,5,10,.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.masthead[data-scrolled="true"] {
  background: rgba(4,5,10,.86);
  border-bottom-color: rgba(255,255,255,.12);
}
.masthead__inner { display: flex; align-items: center; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; padding: .3rem 0; }
/* The RA monogram is a transparent PNG (white artwork, alpha from luminance),
   so it sits on the dark field with no black plate showing behind it. The glow
   lifts it off the background the way the original artwork's halo does. */
.brand__mark {
  width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.16));
}
.brand__name {
  font-size: 1.015rem; font-weight: 600; letter-spacing: .012em; white-space: nowrap;
  text-transform: uppercase;
}
.brand__name span { color: var(--fg-dim); font-weight: 400; }

/* wordmark lockup — the banner's typography, rebuilt as live text so it stays
   sharp at any size, reflows on mobile and is readable by search engines */
.lockup { text-align: center; }
.lockup__mark {
  width: clamp(88px, 15vw, 132px); height: auto;
  margin: 0 auto clamp(1rem, 2.4vw, 1.5rem);
  filter: drop-shadow(0 0 26px rgba(255,255,255,.20));
}
.lockup__name {
  font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.4rem);
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.lockup__rule {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.7rem, 2vw, 1.4rem);
  margin-top: clamp(.7rem, 1.6vw, 1rem);
}
.lockup__rule::before, .lockup__rule::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 130px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
}
.lockup__tag {
  font-size: clamp(.66rem, .58rem + .28vw, .8rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap;
}

/* the supplied banner artwork, framed as a glass plate */
.banner-plate { padding: clamp(.5rem, 1.2vw, .8rem); border-radius: var(--r-lg); }
.banner-plate img {
  width: 100%; height: auto; display: block;
  border-radius: calc(var(--r-lg) - 8px);
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  padding: .55rem .82rem;
  font-size: .905rem;
  color: var(--fg-mute);
  border-radius: var(--r-pill);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
/* the CTA in the nav is a button first — .nav a must not win on colour */
.nav a.btn { color: #fff; }
.nav a.btn--primary, .nav a.btn--primary:hover { color: #06070d; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm);
  color: var(--fg); cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  /* MUST be absolute, not fixed. .masthead carries a backdrop-filter, and a
     backdrop-filter makes an element the containing block for its
     position:fixed descendants. A fixed panel here resolves against the ~60px
     masthead instead of the viewport and collapses to about 49px tall — the
     menu opens as a sliver. Absolute + top:100% hangs it off the header
     correctly and keeps the frosted masthead. */
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0; bottom: auto;
    max-height: calc(100dvh - 100%);
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1rem var(--gut) 2rem;
    background: rgba(6,8,14,.96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255,255,255,.09);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    overflow-y: auto;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: .85rem 1rem; font-size: 1.05rem; }
  .nav .btn { margin-top: .6rem; justify-content: center; }
}

/* 7 ── components ──────────────────────────────────────────────────────── */

/* buttons — chrome-rimmed glass */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.55rem;
  font-size: .945rem; font-weight: 600; letter-spacing: -.008em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.045));
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 12px 28px -14px rgba(0,0,0,.9);
  color: #fff; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 18px 38px -16px rgba(0,0,0,.95),
    0 0 34px -10px rgba(127,230,255,.42);
}
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(160deg, #f2f5fb, #b9c2d3 46%, #e9eef6);
  border-color: rgba(255,255,255,.6);
  color: #06070d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 14px 32px -14px rgba(0,0,0,.9);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 20px 42px -16px rgba(0,0,0,.95), 0 0 40px -12px rgba(183,156,255,.5); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.16); box-shadow: none; color: var(--fg); }
.btn--ghost:hover { background: rgba(255,255,255,.06); box-shadow: none; }
.btn--sm { padding: .6rem 1.15rem; font-size: .875rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.center .btn-row,
.hero--center .btn-row,
.callout .btn-row { justify-content: center; }

/* card */
.card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), border-color .28s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.26); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--fg-mute); font-size: .965rem; }
.card__num {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  color: var(--fg-dim); margin-bottom: 1rem;
}
.card__icon {
  width: 44px; height: 44px; margin-bottom: 1.15rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
  color: var(--cr-3);
}
.card__icon svg { width: 21px; height: 21px; }

/* stat bar — one plate, four cells, hairline dividers.
   Deliberately a FIXED 4-column grid rather than auto-fit: auto-fit reflows to
   3+1 the moment the container gets tight, which reads as broken. The only
   breakpoint drops straight to 2x2. */
.statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-lg);
}
.statbar__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  text-align: center;
  padding: clamp(1.35rem, 2.6vw, 2.1rem) clamp(.7rem, 1.6vw, 1.4rem);
  border-left: 1px solid rgba(255,255,255,.09);
}
.statbar__cell:first-child { border-left: 0; }

.stat__n {
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.5rem);
  font-weight: 750; letter-spacing: -.035em; line-height: 1.05;
  white-space: nowrap;          /* "1,000+" and "24/7" never break mid-figure */
}
.stat__l {
  font-size: clamp(.76rem, .72rem + .14vw, .85rem);
  color: var(--fg-mute); line-height: 1.4;
  text-wrap: balance;           /* keeps two-line labels evenly split */
  max-width: 22ch;
}

/* 2x2 on phones. Row 2 gets a top rule, and cell 3 loses its left rule so the
   grid reads as a clean cross rather than stray lines. */
@media (max-width: 700px) {
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .statbar__cell:nth-child(3) { border-left: 0; }
  .statbar__cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.09); }
}

/* legacy single-stat card, still used if a stat ever sits on its own */
.stat { padding: clamp(1.3rem, 2.4vw, 1.85rem); border-radius: var(--r); text-align: center; }
.stat .stat__n { margin-bottom: .35rem; display: block; }

/* platform chips */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.chips li {
  margin: 0;
  padding: .5rem 1rem;
  font-size: .865rem; color: var(--fg-mute);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

/* checklist */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .8rem; color: var(--fg-mute); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--ir-cyan);
  border-bottom: 2px solid var(--ir-cyan);
  transform: rotate(-45deg);
  opacity: .9;
}
.ticks strong { color: #fff; }

/* numbered process rail */
.rail { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; counter-reset: step; }
.rail > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: clamp(1.35rem, 2.5vw, 1.9rem) clamp(1.35rem, 2.5vw, 2rem) clamp(1.35rem, 2.5vw, 1.9rem) clamp(4rem, 7vw, 5.4rem);
  border-radius: var(--r);
}
.rail > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: clamp(1.3rem, 2.5vw, 1.9rem); top: clamp(1.3rem, 2.5vw, 1.85rem);
  font-family: var(--mono); font-size: .95rem; font-weight: 600;
  background-image: linear-gradient(140deg, var(--cr-4), var(--cr-1) 45%, var(--cr-3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.rail h3 { margin-bottom: .45rem; }
.rail p { color: var(--fg-mute); font-size: .965rem; }

/* faq */
.faq { border-radius: var(--r); overflow: hidden; }
.faq details { border-bottom: 1px solid rgba(255,255,255,.08); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem clamp(1.2rem, 2.4vw, 1.8rem);
  font-weight: 600; font-size: 1.02rem; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255,255,255,.045); }
.faq summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--fg-mute);
  border-bottom: 2px solid var(--fg-mute);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details > div { padding: 0 clamp(1.2rem, 2.4vw, 1.8rem) 1.5rem; color: var(--fg-mute); }

/* callout */
.callout {
  padding: clamp(1.6rem, 3.4vw, 3rem);
  border-radius: var(--r-lg);
  text-align: center;
}
.callout .lede { margin-inline: auto; }

/* prose (insights articles + legal pages) */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; }
.prose > p, .prose li { color: var(--fg-mute); }
.prose a { color: var(--ir-cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: #fff; }
.prose blockquote {
  margin: 2rem 0; padding: 1.1rem 1.5rem;
  border-left: 2px solid rgba(127,230,255,.5);
  background: rgba(255,255,255,.035);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--fg);
}
.prose code { font-family: var(--mono); font-size: .88em; background: rgba(255,255,255,.07); padding: .16em .42em; border-radius: 5px; }

/* contact list — email / phone on the contact page */
.contact-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .85rem; }
.contact-list li {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
}
.contact-list__label {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-dim);
  flex: 0 0 auto; min-width: 10.5rem;
}
.contact-list a {
  color: var(--ir-cyan);
  font-size: 1.04rem;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  word-break: break-word;
}
.contact-list a:hover { color: #fff; }

/* meta line */
.meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-dim); }

/* article teaser */
.teaser { padding: clamp(1.4rem, 2.6vw, 1.9rem); border-radius: var(--r); display: block; transition: transform .28s var(--ease), border-color .28s var(--ease); }
.teaser:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.26); }
.teaser h3 { margin: .9rem 0 .5rem; font-size: 1.16rem; }
.teaser p { color: var(--fg-mute); font-size: .945rem; margin: 0; }
.teaser__more { display: inline-block; margin-top: 1.1rem; font-size: .885rem; color: var(--ir-cyan); }

/* forms */
.form { display: grid; gap: 1.1rem; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.form label { display: block; font-size: .84rem; font-weight: 600; color: var(--fg); margin-bottom: .48rem; letter-spacing: -.005em; }
.form .req { color: var(--ir-rose); }
.form input, .form select, .form textarea {
  width: 100%;
  padding: .82rem 1rem;
  font: inherit; font-size: .95rem;
  color: var(--fg);
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form textarea { min-height: 132px; resize: vertical; }
.form select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 51%, calc(100% - 14px) 51%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form select option { background: #12151f; color: var(--fg); }
.form input::placeholder, .form textarea::placeholder { color: var(--fg-dim); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: rgba(127,230,255,.55);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 3px rgba(127,230,255,.14);
}
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .82rem; color: var(--fg-dim); }
.form__status { padding: .95rem 1.15rem; border-radius: var(--r-sm); font-size: .92rem; display: none; }
.form__status[data-state="ok"]   { display: block; background: rgba(127,230,255,.10); border: 1px solid rgba(127,230,255,.34); color: #d6f5ff; }
.form__status[data-state="err"]  { display: block; background: rgba(255,158,196,.10); border: 1px solid rgba(255,158,196,.34); color: #ffdfeb; }
.form__status[data-state="busy"] { display: block; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--fg-mute); }

/* 8 ── page-specific ───────────────────────────────────────────────────── */
.hero { padding-block: clamp(4.5rem, 11vw, 9.5rem) clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.hero__inner { max-width: 60rem; }
.hero .lede { margin-top: 1.75rem; font-size: clamp(1.1rem, 1rem + .62vw, 1.42rem); }
.hero--center { text-align: center; }
.hero--center .hero__inner { margin-inline: auto; }
.hero--center .lede { margin-inline: auto; }
.hero--page { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); }

.page-head { max-width: 64ch; }
.page-head .lede { margin-top: 1.5rem; }

.split { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 899px) { .split--reverse > :first-child { order: 0; } }

.crumbs { font-size: .84rem; color: var(--fg-dim); margin-bottom: 1.5rem; }
.crumbs a { color: var(--fg-mute); }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 .5rem; opacity: .5; }

/* 9 ── footer ──────────────────────────────────────────────────────────── */
.foot {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.022));
}
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.foot__grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 820px) { .foot__grid > div:first-child { grid-column: auto; flex: 1.6; } .foot__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.foot h4 { font-size: .74rem; font-family: var(--mono); letter-spacing: .17em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 1.1rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .62rem; }
.foot a { color: var(--fg-mute); font-size: .93rem; }
.foot a:hover { color: #fff; }
.foot__tag {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--fg-dim); margin: 1rem 0 0;
}
.foot__blurb { color: var(--fg-mute); font-size: .93rem; max-width: 34ch; margin-top: .7rem; }
/* registered office in the footer contact column — statutory disclosure, so it
   sits as plain text rather than a link */
.foot__addr { color: var(--fg-mute); font-size: .87rem; line-height: 1.5; margin-top: .9rem; }
.foot__base {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .84rem; color: var(--fg-dim);
}

/* 10 ── motion, a11y, print ────────────────────────────────────────────── */
/* Reveal-on-scroll is an ENHANCEMENT, never a precondition for reading the page.
   The starting opacity:0 is scoped to .js, which the inline snippet in each
   <head> sets before first paint. With JS blocked, broken, or still loading,
   the class is absent and every element renders normally. Do not un-scope this:
   an unscoped [data-reveal]{opacity:0} renders the whole site blank whenever
   site.js fails, including for crawlers that don't execute scripts. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
/* Above-the-fold elements land in their final state with no transition at all,
   so the hero doesn't fade in and delay LCP. Set by site.js at load. */
.js [data-reveal].is-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .chrome { background-position: 42% 50%; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .field__metal, .field__slick { animation: none; }
}

/* The field is expensive on low-power devices; drop the heaviest layer. */
@media (max-width: 640px) {
  .field__metal { filter: blur(34px); opacity: .24; }
  .field__slick { filter: blur(70px); }
}

@media print {
  .field, .masthead, .nav-toggle, .btn-row, .foot__base { display: none !important; }
  body { background: #fff; color: #000; }
  .chrome { -webkit-text-fill-color: #000; color: #000; background: none; filter: none; }
  .glass, .title-glass { background: none; border: 1px solid #ccc; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}