/* ==========================================================================
   AIRNSOLE TECH — Raycast-grade Dark Glassmorphism
   --------------------------------------------------------------------------
   Contents
   01. Tokens
   02. Reset and base
   03. Ambient light field
   04. Layout primitives
   05. Typography
   06. Glass surface
   07. Buttons
   08. Masthead and navigation
   09. Hero
   10. Section bands
   11. Flagship showcase (STARTXCEL)
   12. Leadership
   13. Contact
   14. Footer
   15. Reveal choreography
   16. Responsive
   17. Motion and print preferences
   18. Hero word reveal + heading shimmer
   19. 3D card tilt + glare
   20. Ambient idle float + scroll parallax
   ========================================================================== */


/* 01. Tokens ============================================================== */

:root {
  /* Surfaces — True Black canvas. Cards sit only barely above it (never a
     flat grey block) so depth reads from glow and blur, not from a lighter
     fill. */
  --surface-canvas:   #000000;
  --surface-raised:   #0a0a0c;
  --surface-deep:     #000000;

  /* Glass — dark, heavily blurred, a hairline of white at the edge. */
  --glass-fill:        rgba(15, 15, 15, 0.40);
  --glass-fill-strong: rgba(20, 20, 22, 0.62);
  --glass-fill-hover:  rgba(255, 255, 255, 0.05);
  --glass-edge:        rgba(255, 255, 255, 0.08);
  --glass-edge-strong: rgba(255, 255, 255, 0.16);
  --glass-sheen:       rgba(255, 255, 255, 0.06);
  --glass-blur:        24px;
  /* The diffused hover glow every card and button shares. */
  --glass-glow:        0 0 30px rgba(255, 255, 255, 0.04);

  /* Type */
  --ink-primary:       #f5f5f7;
  --ink-secondary:     #a1a1aa;
  --ink-tertiary:      #8a8a93;
  --ink-inverse:       #000000;

  /* Accent — the one bright surface in an otherwise monochrome interface:
     off-white, always paired with near-black text. Used for primary CTAs
     and the active nav state — nothing else competes with it. */
  --accent:            #eeeeee;
  --accent-hover:      #ffffff;
  --accent-soft:       rgba(255, 255, 255, 0.06);
  --accent-line:       rgba(255, 255, 255, 0.4);

  /* Elevation — true-black shadow plus the soft white glow on hover. */
  --lift-resting:  0 12px 28px -16px rgba(0, 0, 0, 0.70);
  --lift-hover:    0 20px 48px -12px rgba(0, 0, 0, 0.85), var(--glass-glow);
  --lift-floating: 0 32px 64px -20px rgba(0, 0, 0, 0.90), var(--glass-glow);

  /* Radii — deliberately varied by element weight. */
  --radius-xs:  0.625rem;
  --radius-sm:  0.875rem;
  --radius-md:  1.25rem;
  --radius-lg:  1.75rem;
  --radius-xl:  2.25rem;
  --radius-pill: 999px;

  /* Rhythm */
  --space-3xs: 0.375rem;
  --space-2xs: 0.625rem;
  --space-xs:  0.875rem;
  --space-sm:  1.25rem;
  --space-md:  1.75rem;
  --space-lg:  2.5rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --band-space: clamp(4.5rem, 9vw, 7.5rem);

  /* Structure */
  --shell-width: 1200px;
  --shell-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --masthead-height: 4.5rem;
  /* How far the floating nav sits off the top and side edges. */
  --masthead-float-gap: 1rem;

  /* Motion — a snappy, slightly overshooting ease so hovers feel like they
     have weight, not just a linear fade. Used everywhere: cards, buttons,
     nav, reveals. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-snap: 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-sans: "Inter", system-ui, -apple-system, "SF Pro Text", "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}


/* 02. Reset and base ====================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-float-gap) + var(--masthead-height) + 1.5rem);
  /* `clip` contains stray horizontal overflow without turning the root into a
     scroll container, which `overflow: hidden` would do — that breaks the
     sticky masthead and the fixed ambient layer. */
  overflow-x: clip;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-secondary);
  background-color: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11" 1, "ss01" 1;
}

/* Locks scrolling while the mobile menu panel is open. */
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
svg { fill: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ink-inverse);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 200;
  translate: -50% -180%;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--glass-edge-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-primary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: translate var(--transition);
}

.skip-link:focus-visible { translate: -50% 0; }


/* 03. Ambient light field ================================================= */

/* The true-black canvas plus its depth glows live on this fixed layer,
   rather than on `body` with `background-attachment: fixed` (a compositing
   hazard, and not honoured at all on iOS Safari). */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--surface-canvas);
}

.ambient__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
}

/* Soft white crown behind the hero — the "3D spatial depth" glow. */
.ambient__glow--crown {
  top: -22rem;
  left: 50%;
  translate: -50% 0;
  width: min(90rem, 160vw);
  height: 44rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 100%);
}

.ambient__glow--left {
  top: 48%;
  left: -18rem;
  width: 42rem;
  height: 42rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 100%);
}

.ambient__glow--right {
  bottom: -14rem;
  right: -16rem;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 100%);
}

/* Fine grain keeps large gradients from banding on wide displays — even
   more necessary on true black than it was on a light field. */
.ambient__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* 04. Layout primitives =================================================== */

main { position: relative; z-index: 1; }

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


/* 05. Typography ========================================================== */

h1, h2, h3 {
  color: var(--ink-primary);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

strong { color: var(--ink-primary); font-weight: 600; }

/* Small brand chip. Carries a product name, not a decorative label. */
.tag {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: var(--glass-fill);
  color: var(--ink-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
}


/* 06. Glass surface ======================================================= */

.glass {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-edge);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--lift-resting), inset 0 1px 0 var(--glass-sheen);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}

/* Pointer-tracked sheen. JS supplies --pointer-x / --pointer-y on hover. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    22rem circle at var(--pointer-x, 50%) var(--pointer-y, 0%),
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0) 62%
  );
  transition: opacity var(--transition);
}

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

@media (hover: hover) and (pointer: fine) {
  /* Physics-based hover: a touch of scale, a lift, and the diffused glow
     the brief calls for on every card. */
  .glass[data-tilt]:hover {
    transform: scale(1.02) translateY(-4px);
    border-color: var(--glass-edge-strong);
    background-color: var(--glass-fill-hover);
    box-shadow: var(--lift-hover), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .glass[data-tilt]:hover::before { opacity: 1; }
}

/* Keyboard parity: a card focused from within gets the same elevation. */
.glass[data-tilt]:focus-within {
  border-color: var(--glass-edge-strong);
  box-shadow: var(--lift-hover), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


/* 07. Buttons ============================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  border: 1px solid var(--glass-edge-strong);
  border-radius: var(--radius-pill);
  background: var(--glass-fill-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--ink-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    color var(--transition);
}

/* The one solid, bright surface on the page: off-white, bold, black text —
   the Raycast "Download" button. */
.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
  font-weight: 700;
}

.button--quiet {
  background: transparent;
  border-color: var(--glass-edge);
  color: var(--ink-secondary);
}

.button--block { width: 100%; }

.button:hover {
  transform: scale(1.02) translateY(-4px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.9), var(--glass-glow);
}

.button--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 255, 255, 0.18), var(--glass-glow);
}

.button--quiet:hover {
  background: var(--glass-fill-hover);
  color: var(--ink-primary);
}

/* Magnetic click feedback: a fast, slightly springy snap-down rather than
   the slower hover ease — the button should feel like it has weight. */
.button:active {
  transform: scale(0.96);
  transition: transform var(--transition-snap);
}


/* 08. Masthead and navigation ============================================= */

/* A floating glass module, not a full-bleed bar — inset from the top and
   both sides, heavy blur, its own rounded edge all the way round. */
.masthead {
  position: fixed;
  top: var(--masthead-float-gap);
  left: 50%;
  translate: -50% 0;
  z-index: 100;
  width: min(1120px, calc(100% - var(--masthead-float-gap) * 2));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--lift-resting);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.masthead.is-scrolled {
  background: var(--glass-fill-strong);
  border-color: var(--glass-edge-strong);
  box-shadow: var(--lift-hover);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--masthead-height);
}

/* Wordmark: one family, contrast carried by weight. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-primary);
}

.wordmark__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--ink-primary);
  transition: opacity var(--transition);
}

.wordmark__mark svg { width: 100%; height: 100%; }

.wordmark__type {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
}

.wordmark__type b {
  font-weight: 700;
  letter-spacing: 0.2em;
}

.wordmark__type i {
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--ink-secondary);
}

.wordmark:hover .wordmark__mark { opacity: 0.75; }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.navlist {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.navlink {
  position: relative;
  display: block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 400;
  transition: color var(--transition), background-color var(--transition);
}

.navlink::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.3rem;
  height: 1px;
  background: var(--accent-line);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--transition);
}

.navlink:hover { color: var(--ink-primary); }
.navlink:hover::after { scale: 1 1; }

/* Active nav state reuses the same off-white-pill-plus-black-text language
   as the primary button — one consistent "this is the important one"
   signal across the whole interface. */
.navlink.is-current {
  color: var(--ink-inverse);
  background: var(--accent);
  font-weight: 500;
}

.navlink.is-current::after { display: none; }

.masthead__cta { padding: 0.65rem 1.4rem; font-size: 0.875rem; }

.menu-toggle {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-xs);
  background: var(--glass-fill);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.menu-toggle:hover {
  border-color: var(--glass-edge-strong);
  background: var(--glass-fill-hover);
}

.menu-toggle__bars {
  display: grid;
  gap: 5px;
  width: 1.125rem;
}

.menu-toggle__bars i {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink-primary);
  transition: translate var(--transition), rotate var(--transition), opacity var(--transition);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child {
  translate: 0 3.25px;
  rotate: 45deg;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child {
  translate: 0 -3.25px;
  rotate: -45deg;
}


/* 09. Hero ================================================================ */

.hero {
  display: flex;
  align-items: center;
  min-height: min(100svh, 54rem);
  padding-block: calc(var(--masthead-float-gap) + var(--masthead-height) + var(--space-2xl)) var(--space-2xl);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__headline {
  max-width: 18ch;
  font-size: clamp(2.75rem, 7.2vw, 5.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.042em;
}

.hero__subhead {
  max-width: 46ch;
  margin-top: var(--space-md);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-secondary);
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

/* Qualitative facts, aligned to a hairline rule rather than boxed in cards. */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  width: min(100%, 46rem);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-edge);
}

.fact { text-align: center; }

.fact dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-secondary);
}

.fact dd {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-primary);
}


/* 10. Section bands ======================================================= */

.band { padding-block: var(--band-space); position: relative; }
.band--last { padding-bottom: calc(var(--band-space) + var(--space-lg)); }

.band__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.band__title {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  letter-spacing: -0.035em;
}

.band__lead {
  max-width: 62ch;
  margin-top: var(--space-sm);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
}


/* 11. Flagship showcase (STARTXCEL) ======================================= */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding: clamp(2rem, 4.5vw, 4rem);
  border-radius: var(--radius-xl);
  background: var(--glass-fill-strong);
  box-shadow: var(--lift-floating), inset 0 1px 0 var(--glass-sheen);
}

.showcase__title {
  margin-top: var(--space-sm);
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  letter-spacing: -0.028em;
  line-height: 1.18;
}

.showcase__copy {
  max-width: 52ch;
  margin-top: var(--space-sm);
  font-size: 1.0625rem;
}

.capabilities {
  display: grid;
  gap: var(--space-sm);
  margin-block: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-edge);
}

.capabilities li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  max-width: 56ch;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.capabilities__icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-fill);
  color: var(--ink-primary);
}

.capabilities__icon svg { width: 0.875rem; height: 0.875rem; }

/* --- Abstract platform strata -------------------------------------------
   One bright plate resting on two receding layers: the platform carrying
   everything stacked above it. Sparse on purpose — density reads cheap.
   ----------------------------------------------------------------------- */

.stack {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 24rem;
}

/* Light source behind the composition — part of the same depth-glow
   language as the ambient crown above the hero. */
.stack::before {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 100%);
  filter: blur(20px);
}

.stack__rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.stack__rings i {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}

.stack__rings i:nth-child(1) { width: 15rem; height: 15rem; }
.stack__rings i:nth-child(2) { width: 21rem; height: 21rem; border-color: rgba(255, 255, 255, 0.06); }
.stack__rings i:nth-child(3) { width: 27rem; height: 27rem; border-color: rgba(255, 255, 255, 0.04); }

.stack__core {
  position: relative;
  display: block;
  width: min(100%, 19rem);
  margin-top: 2.75rem;
}

/* Receding layers, visible only as edges above the plate. */
.strata {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  height: 4.5rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.strata--back {
  top: -3.5rem;
  margin-inline: 17%;
  opacity: 0.45;
}

.strata--mid {
  top: -1.75rem;
  margin-inline: 8.5%;
  opacity: 0.7;
}

.plate {
  position: relative;
  display: grid;
  gap: 1.125rem;
  padding: 1.375rem;
  border: 1px solid var(--glass-edge-strong);
  border-radius: var(--radius-lg);
  background: rgba(24, 24, 27, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.plate__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The one solid accent square inside the illustration — echoes the primary
   CTA's off-white tone, a single deliberate point of brightness. */
.plate__seal {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.6rem;
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.12);
}

.plate__title {
  width: 52%;
  height: 0.4375rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
}

.plate__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.plate__grid i {
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
}

/* Two cells lit, so the grid reads as active rather than as filler. */
.plate__grid i:nth-child(2),
.plate__grid i:nth-child(4) {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
}

.plate__foot {
  display: grid;
  gap: 0.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--glass-edge);
}

.plate__foot span {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
}

.plate__foot span:last-child { width: 55%; }

/* The one piece of ambient (non-hover-triggered) motion on the page: the
   stack breathing, with the receding layers lagging slightly for depth. */
@media (prefers-reduced-motion: no-preference) {
  .stack__core   { animation: drift 14s ease-in-out infinite; }
  .strata--mid   { animation: drift 14s ease-in-out -1.6s infinite; }
  .strata--back  { animation: drift 14s ease-in-out -3.2s infinite; }
}

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}


/* 12. Leadership ========================================================= */

.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

.person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  border-radius: var(--radius-lg);
}

/* Circular photo placeholder: concentric glass rings around set initials. */
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 62%),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.portrait__initials {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-primary);
  /* Optical centring for the tracked-out pair. */
  text-indent: 0.1em;
}

.person__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.person__role {
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

.person__note {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--glass-edge);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

.person .social { margin-top: auto; padding-top: var(--space-md); }


/* --- Social icons ------------------------------------------------------- */

.social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-fill);
  color: var(--ink-secondary);
  transition:
    transform var(--transition),
    color var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}

.social a svg { width: 1rem; height: 1rem; }

.social a:hover {
  transform: translateY(-3px) scale(1.06);
  color: var(--ink-primary);
  border-color: var(--glass-edge-strong);
  background: var(--glass-fill-hover);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.7), var(--glass-glow);
}

.social--compact a {
  width: 2.125rem;
  height: 2.125rem;
}

.social--compact a svg { width: 0.875rem; height: 0.875rem; }


/* 13. Contact ============================================================= */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.details {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
}

.details__list { display: grid; gap: var(--space-md); }

.details__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.details__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  background: var(--glass-fill);
  color: var(--ink-primary);
}

.details__icon svg { width: 1.125rem; height: 1.125rem; }

.details__text { display: grid; gap: 0.15rem; }

.details__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-secondary);
}

.details__value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-primary);
  word-break: break-word;
  transition: color var(--transition);
}

a.details__value:hover { color: var(--ink-secondary); }

.details__value--plain { font-weight: 400; color: var(--ink-secondary); }

.details__foot {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-edge);
}

.details__note {
  margin-bottom: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

/* --- Enquiry form ------------------------------------------------------- */

.enquiry {
  display: grid;
  gap: var(--space-sm);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
}

.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-primary);
}

.field__optional {
  margin-left: 0.35rem;
  font-weight: 400;
  color: var(--ink-tertiary);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(161, 161, 170, 0.65); }

.field input:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, 0.22); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.field__error {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-primary);
  opacity: 0;
  height: 0;
  transition: opacity var(--transition);
}

.field.is-invalid .field__error { opacity: 1; height: auto; }

.enquiry .button { margin-top: var(--space-2xs); }

.enquiry__status {
  min-height: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  opacity: 0;
  transition: opacity var(--transition);
}

.enquiry__status.is-shown { opacity: 1; }


/* 14. Footer ============================================================== */

.footer {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2xl) var(--space-lg);
  border-top: 1px solid var(--glass-edge);
  background: rgba(8, 8, 9, 0.6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.footer__top {
  display: grid;
  /* The link columns need the wider share: one of them carries a full email
     address, which must not break mid-word. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--space-xl);
}

.wordmark--static { pointer-events: none; }

.footer__tagline {
  max-width: 34ch;
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.footer__heading {
  margin-bottom: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-secondary);
}

.footer__col ul { display: grid; gap: 0.6rem; }

.footer__col a {
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
  transition: color var(--transition);
}

.footer__col a:hover { color: var(--ink-primary); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-edge);
}

.footer__copy {
  font-size: 0.875rem;
  color: var(--ink-tertiary);
}


/* 15. Reveal choreography ================================================= */

/* Uses `translate` rather than `transform` so hover lift never fights it.
   0.8s, 20px, with a slight per-element stagger — the same recipe applies
   whether an element reveals on load (already in view when the page opens)
   or on scroll (via the Intersection Observer in script.js): both paths
   just toggle `.is-visible` and this transition does the rest. */
.reveal {
  --reveal-delay: 0s;
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity 0.8s var(--ease-out) var(--reveal-delay),
    translate 0.8s var(--ease-out) var(--reveal-delay);
}

.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Stagger carried on a custom property, not `transition-delay`, so it applies
   to the entrance only and never lags the hover response below. */
.reveal[data-reveal-delay="1"] { --reveal-delay: 0.1s; }
.reveal[data-reveal-delay="2"] { --reveal-delay: 0.2s; }
.reveal[data-reveal-delay="3"] { --reveal-delay: 0.3s; }

/* A card that both reveals and lifts needs one shorthand covering both: the
   `transition` in `.reveal` would otherwise replace the one in `.glass`
   wholesale, leaving hover with no transition at all. */
.glass.reveal {
  transition:
    opacity 0.8s var(--ease-out) var(--reveal-delay),
    translate 0.8s var(--ease-out) var(--reveal-delay),
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}

/* No-JS fallback: content is visible and static. */
.no-js .reveal { opacity: 1; translate: none; }


/* 16. Responsive ========================================================== */

@media (max-width: 1080px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }

  /* No auto margins here: an auto margin on a grid item switches it out of
     stretch alignment and shrinks it to fit-content. `.stack` centres its own
     contents already. */
  .stack {
    order: -1;
    width: 100%;
    min-height: 21rem;
  }

  .stack__rings i:nth-child(3) { display: none; }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root {
    --masthead-height: 4.25rem;
    --masthead-float-gap: 0.625rem;
  }

  .menu-toggle { display: grid; }

  /* The mobile panel floats too — its own detached, rounded glass module a
     short gap below the pill, not a bar glued to its underside. */
  .masthead__nav {
    position: fixed;
    top: calc(var(--masthead-float-gap) + var(--masthead-height) + 0.75rem);
    left: var(--masthead-float-gap);
    right: var(--masthead-float-gap);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    max-height: calc(100svh - var(--masthead-height) - var(--masthead-float-gap) * 3);
    overflow-y: auto;
    padding: var(--space-sm) var(--shell-gutter) var(--space-lg);
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-lg);
    background: rgba(10, 10, 12, 0.92);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    box-shadow: var(--lift-floating);
    visibility: hidden;
    opacity: 0;
    translate: 0 -0.75rem;
    transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
  }

  .masthead__nav.is-open {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
  }

  .navlist {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
  }

  .navlink {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }

  .navlink::after { display: none; }

  .masthead__cta { width: 100%; padding: 0.9rem 1.4rem; font-size: 0.9375rem; }

  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--masthead-float-gap) + var(--masthead-height) + var(--space-xl)) var(--space-xl);
  }

  .hero__headline { max-width: 100%; }

  .hero__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    text-align: left;
  }

  .fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    text-align: left;
  }

  .fact dd { margin-top: 0; }

  .team { grid-template-columns: minmax(0, 1fr); }

  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .button { width: 100%; }

  .showcase { padding: 1.5rem 1.25rem; border-radius: var(--radius-lg); }

  .stack { min-height: 19rem; }
  .stack::before { width: 18rem; height: 18rem; }
  .stack__rings i:nth-child(2) { display: none; }
  .stack__core { width: min(100%, 17rem); }
  .plate { padding: 1.125rem; gap: 1rem; }
  .plate__grid i { height: 2.125rem; }

  .capabilities li { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .capabilities__icon { display: none; }

  .footer__nav { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}


/* 17. Motion and print preferences ======================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

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

  .glass[data-tilt]:hover,
  .button:hover,
  .social a:hover { transform: none; }
}

@media print {
  .ambient, .masthead, .menu-toggle, .skip-link { display: none !important; }

  body {
    background: #fff;
    color: #0f172a;
  }

  h1, h2, h3, strong, .details__value { color: #0f172a; }

  .glass, .showcase, .person, .details, .enquiry {
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
  }

  .reveal { opacity: 1 !important; translate: none !important; }
}


/* 18. Hero word reveal + heading shimmer ================================== */

/* Built by JS (splitHeroWords in script.js) wrapping each word of
   .hero__headline in .word-mask > .word-inner. The mask clips its inner
   span, which sits translated fully below the baseline; sliding it up to 0
   reads as the word growing out of an invisible line rather than a plain
   fade. If JS never runs (disabled, or fails), the heading stays as plain
   unwrapped text — nothing here to hide it. */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word-inner {
  display: inline-block;
  translate: 0 105%;
  transition: translate 0.9s var(--ease-out) var(--word-delay, 0s);
}

.word-mask.is-visible .word-inner {
  translate: 0 0;
}

.hero__headline {
  position: relative;
  color: var(--ink-primary);
  /* Contains the shimmer overlay's blend mode to this box only — without
     this, mix-blend-mode looks past the heading at whatever else is behind
     it in the stacking context (the ambient glows, other sections) instead
     of just the text it's meant to catch light on. */
  isolation: isolate;
}

/* A slow, low-contrast sheen sweeping across the heading — not a colour,
   just a soft brightening band, so it reads as light catching glass rather
   than a decorative rainbow wipe.

   This used to be background-clip: text on the headline. Cut it: an
   ancestor with its own background-clip: text + animation while every word
   inside is independently transformed (for the reveal above) reliably
   double-painted/ghosted the text in testing, and background-clip: text
   combined with a running animation has a wider history of compositor
   flakiness beyond just that one case. A plain absolutely-positioned
   overlay blended over the solid text has no such dependency — it doesn't
   touch text-clipping at all, so it can't ghost it, and it keeps working
   even somewhere background-clip: text quietly fails to paint. */
.hero__headline::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The bar itself only exists for motion — under reduced motion the pseudo-
   element above still exists (harmlessly, with nothing painted on it)
   rather than being redefined a second time; this is the one place it
   gets a background at all. */
@media (prefers-reduced-motion: no-preference) {
  .hero__headline::after {
    background: linear-gradient(
      100deg,
      transparent 42%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 58%
    );
    background-size: 240% 100%;
    background-position: 160% 0;
    mix-blend-mode: screen;
    animation: heading-shimmer 9s ease-in-out infinite;
    animation-delay: 1.4s;
  }
}

@keyframes heading-shimmer {
  0%   { background-position: 150% 0; }
  45%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}


/* 19. 3D card tilt + glare ================================================= */

/* Applies to [data-tilt-3d] cards only — the STARTXCEL feature grid and the
   leadership cards (both reuse .person). Everything else that uses plain
   [data-tilt] (the showcase panel, contact/enquiry cards) keeps the simpler
   CSS-only hover lift from section 06; tilting a form while someone is
   typing into it would be a bad interaction, so those stay as they are.

   The rotation itself is JS-owned (script.js writes a full inline
   `transform` on pointermove so tracking is 1:1 with the cursor, no
   transition lag) — this block only supplies the perspective container,
   the glare layer, and the snap-back transition JS re-enables on
   pointerleave. */
.glass[data-tilt-3d] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* A second, more directional layer than the ambient .glass::before sheen —
   an elongated highlight that slides across the card with the cursor,
   closer to a reflection glinting off glass than a soft ambient glow. */
.glass[data-tilt-3d]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    140% 70% at var(--pointer-x, 50%) var(--pointer-y, 0%),
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0) 55%
  );
  mix-blend-mode: overlay;
  transition: opacity var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .glass[data-tilt-3d]:hover::after { opacity: 1; }
}


/* 20. Ambient idle float + scroll parallax ================================= */

/* Everything sits still by default; motion is opt-in via prefers-reduced-
   motion: no-preference, and the blanket override in section 17 already
   neutralises all of this for anyone who prefers less movement. */
@media (prefers-reduced-motion: no-preference) {
  /* The floating nav breathes very slightly — alive even at a standstill.
     Keeps its own horizontal centring translate throughout. */
  .masthead {
    animation: float-nav 5s ease-in-out infinite;
  }

  @keyframes float-nav {
    0%, 100% { translate: -50% 0; }
    50%      { translate: -50% -4px; }
  }

  /* Each glow floats on its own slow, offset cycle — three different
     durations so they never move in visible lockstep — composed with
     --parallax-y, which script.js updates on scroll (see below), so idle
     drift and scroll parallax are the same `translate`, not two effects
     fighting over one property. */
  .ambient__glow--crown {
    animation: float-crown 6s ease-in-out infinite;
  }

  .ambient__glow--left {
    animation: float-glow 7.5s ease-in-out infinite;
  }

  .ambient__glow--right {
    animation: float-glow 8.5s ease-in-out infinite -2s;
  }

  @keyframes float-crown {
    0%, 100% { translate: -50% var(--parallax-y, 0px); }
    50%      { translate: -50% calc(var(--parallax-y, 0px) - 5px); }
  }

  @keyframes float-glow {
    0%, 100% { translate: 0 var(--parallax-y, 0px); }
    50%      { translate: 0 calc(var(--parallax-y, 0px) - 5px); }
  }
}