/* =========================================================================
   UNIDEX — site styles
   Base: black + white. Blue is the only accent.
   Type: bold grotesque headlines with a white to gray gradient,
         italic serif for emphasis words.
   ========================================================================= */

:root {
  --ink: #050506;
  --panel: #0d0d10;
  --elevated: #141418;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f4f4f5;
  --muted: rgba(244, 244, 245, 0.58);
  --faint: rgba(244, 244, 245, 0.36);

  --blue: #2f6bff;
  --blue-bright: #5286ff;
  --blue-soft: rgba(47, 107, 255, 0.14);
  --blue-glow: rgba(47, 107, 255, 0.45);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: ui-serif, "New York", "Newsreader", "Iowan Old Style",
    "Apple Garamond", Georgia, "Times New Roman", serif;

  --shell: min(1240px, 100% - 2.5rem);
  --radius: 20px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* clip, not hidden — hidden breaks position: sticky */
  background: var(--ink);
}

body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Fixed backdrop — soft fields of colour so the frosted glass cards have
   something to refract as you scroll past them. Kept dark and blue led.
   z-index -1: sits above the html background, below all page content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(47, 107, 255, 0.26), transparent 60%),
    radial-gradient(34% 30% at 88% 18%, rgba(88, 70, 214, 0.2), transparent 60%),
    radial-gradient(44% 38% at 76% 62%, rgba(30, 78, 220, 0.2), transparent 62%),
    radial-gradient(36% 34% at 18% 72%, rgba(70, 52, 180, 0.16), transparent 60%),
    radial-gradient(40% 36% at 55% 100%, rgba(47, 107, 255, 0.18), transparent 62%),
    var(--ink);
}

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

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

::selection {
  background: var(--blue);
  color: #fff;
}

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

/* ---------- layout ---------- */
.shell {
  width: var(--shell);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.section {
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
  position: relative;
  isolation: isolate;
}

.section--tight {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.section-divider {
  border-top: 1px solid var(--line);
}

/* faint per-section glow on top of the fixed backdrop, anchored in a
   different corner each time. .final-cta gets its own centered one below. */
.section:not(.final-cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    46% 55% at 15% 12%,
    rgba(47, 107, 255, 0.09),
    transparent 72%
  );
}
.section:not(.final-cta):nth-of-type(4n + 2)::before {
  background: radial-gradient(
    48% 55% at 88% 8%,
    rgba(47, 107, 255, 0.08),
    transparent 72%
  );
}
.section:not(.final-cta):nth-of-type(4n + 3)::before {
  background: radial-gradient(
    52% 60% at 82% 92%,
    rgba(47, 107, 255, 0.09),
    transparent 72%
  );
}
.section:not(.final-cta):nth-of-type(4n + 4)::before {
  background: radial-gradient(
    50% 55% at 10% 88%,
    rgba(47, 107, 255, 0.08),
    transparent 72%
  );
}

/* ---------- typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.9em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px var(--blue-glow);
}

.display {
  font-weight: 800;
  line-height: 1.06; /* room for descenders under the gradient text clip */
  letter-spacing: -0.035em;
  padding-bottom: 0.14em; /* keeps g / y / f from being clipped */
  background: linear-gradient(180deg, #ffffff 0%, #86868c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow: visible;
}

h1.display {
  font-size: clamp(2.6rem, 6.6vw, 4.9rem);
}

h2.display {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

.display em,
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding-right: 0.06em; /* the italic slant + a trailing period need slack */
  -webkit-text-fill-color: initial;
}

.display .accent {
  color: var(--blue-bright);
  -webkit-text-fill-color: var(--blue-bright);
}

.nowrap {
  white-space: nowrap;
}

.lede {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.65;
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head .lede {
  margin-top: 1.4rem;
}

.section-head h2 {
  margin-top: 1.5rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.5em;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 14px 40px -12px var(--blue-glow);
}

.btn--primary:hover {
  background: var(--blue-bright);
  transform: translateY(-2px) scale(1.055);
  box-shadow: 0 24px 60px -12px var(--blue-glow);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}

.btn--ghost:hover {
  border-color: var(--blue-bright);
  background: var(--blue-soft);
  transform: translateY(-2px);
}

.btn--lg {
  padding: 1.1em 1.9em;
  font-size: 1rem;
}

/* ---------- glass card ----------
   Frosted panel: translucent fill + backdrop blur so the fixed colour
   backdrop refracts through, a bright hairline edge, a soft drop shadow,
   and a faint inner top highlight. */
.glass {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.06) 100%
  );
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

/* diagonal sheen across the top edge */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.05) 32%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass--hover {
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.glass--hover:hover {
  transform: translateY(-6px);
  border-color: rgba(140, 175, 255, 0.35);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(120, 155, 255, 0.08) 100%
  );
  box-shadow: 0 34px 80px -24px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    padding 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(5, 5, 6, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  padding-block: 0.7rem;
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--text);
}

.wordmark img {
  width: 22px;
  height: 22px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

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

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

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* =========================================================================
   HERO  (centered composition)
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 8rem 5rem;
  overflow: clip;
  /* solid black under the scene so the fixed page backdrop never bleeds
     between the lines, whether the poster or the live scene is showing */
  background: #000;
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* static first frame — a vector of the Spline scene's vertical lines.
   `100% 100%` stretches it to fill, so every line stays at the exact same
   fraction of the width on desktop, tablet and phone, and the swap to the
   live 3D scene is barely perceptible. */
.hero__poster {
  position: absolute;
  inset: 0;
  background: #000 url("../img/hero-bg.svg") 0 0 / 100% 100% no-repeat;
}

/* Live Spline scene sits on top of the static poster and fades in quickly
   once it has rendered. The poster stays underneath, so there is no swap. */
.hero__spline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none; /* decorative in the hero — never grabs scroll */
  transition: opacity 0.6s var(--ease);
}

.hero__spline.is-ready {
  opacity: 1;
}

spline-viewer::part(logo) {
  display: none;
}

/* the Spline scene ships with its own colours now, so no blue recolour and
   no grid overlay — keep the hero matching the scene exactly */
.hero__tint,
.hero__grid {
  display: none;
}

.hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 40%,
    rgba(0, 0, 0, 0.5) 72%,
    var(--ink) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 54rem;
  margin-inline: auto;
}

.hero h1 {
  margin-inline: auto;
  max-width: 20ch;
}

.hero .lede {
  margin: 1.6rem auto 0;
  max-width: 44ch;
}

.hero__cta {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* =========================================================================
   APPROACH — four phases in a 2x2 grid, no card. The italic blue number is
   sized to stand as tall as the heading + body it sits beside.
   ========================================================================= */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.25rem);
}

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

.phase__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  /* fallback size; main.js refines it to ~half the text block height */
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 0.7;
  letter-spacing: -0.05em;
  color: var(--blue-bright);
  overflow: visible;
  white-space: nowrap;
}

.phase__text {
  max-width: 34rem;
}

.phase h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.phase p {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.3vw, 1rem);
  line-height: 1.65;
}

/* =========================================================================
   WHAT WE AUTOMATE — three categories
   ========================================================================= */
.cat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.cat {
  padding: 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 15rem;
}

.cat__icon {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-bright);
}

.cat__icon svg {
  width: 22px;
  height: 22px;
}

.cat h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cat p {
  color: var(--muted);
  font-size: 0.94rem;
  margin-top: auto;
}

/* =========================================================================
   CASE STUDIES — stacked-card scroll + Apple Watch rail
   ========================================================================= */
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.75rem;
  align-items: start;
}

.case-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.case {
  position: sticky;
  top: calc(96px + var(--i, 0) * 26px);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.8rem;
  padding: 1.6rem;
  /* smoked glass — frosted, but opaque enough to stack cleanly */
  background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03) 55%,
      rgba(120, 150, 255, 0.05)
    ),
    rgba(9, 9, 12, 0.86);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  box-shadow: 0 -18px 50px -28px rgba(0, 0, 0, 0.95),
    0 30px 70px -30px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.case:last-child {
  margin-bottom: 0;
}

.case__media {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--elevated);
}

.case__video {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 622;
  object-fit: cover;
  background: #050506;
}

.case__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.case h3 {
  margin-top: 0.8rem;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.case__ba {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.case__ba span {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.case__built {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.case__built b {
  color: var(--text);
  font-weight: 600;
}

.case__outcome {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}

/* Apple Watch time-saving rail — no card, the watch just floats.
   Sits lower so it rides near the middle of the viewport while the case
   cards stack past it. */
.timesave {
  /* sticky, and roughly centred in the viewport so the watch rides in the
     middle of the case cards as they scroll past */
  position: sticky;
  top: max(88px, calc((100vh - 440px) / 2));
  padding-top: 0.25rem;
  text-align: center;
}

/* portrait stage — sizes the visible watch. The 3D canvas itself is much
   larger (see .spline-el) so the watch never clips against an edge when it
   swings to follow the pointer. */
.timesave__stage {
  position: relative;
  width: 100%;
  max-width: 210px;
  height: 360px;
  margin: 0 auto 1.4rem;
  overflow: visible;
  /* soft pool of light centred on the watch body */
  background: radial-gradient(
    42% 36% at 50% 46%,
    rgba(47, 107, 255, 0.18),
    transparent 72%
  );
}

.timesave__stage .spline-el {
  position: absolute;
  /* canvas extends past the visible stage on every side; the watch is centred
     in the scene so it still reads as sitting in the stage, but it has room
     to swing toward the pointer without hitting a hard edge */
  inset: -38% -52%;
  width: auto;
  height: auto;
  opacity: 0;
  pointer-events: none; /* the oversized canvas must not block the cards behind */
  transition: opacity 1s var(--ease);
}

.timesave__stage .spline-el.is-ready {
  opacity: 1;
}

/* small loading spinner only, fades out when the scene is ready */
.timesave__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(47, 107, 255, 0.22);
  border-top-color: var(--blue-bright);
  animation: spin 3s linear infinite;
}

.timesave h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.timesave h3 em {
  font-family: var(--font-serif);
  font-weight: 500;
}

.case-more {
  margin-top: 2.2rem;
}

/* =========================================================================
   RELIABILITY — tilted stat cards
   ========================================================================= */
.reliability::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.08), transparent 55%);
}

.tilt-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}

.tilt {
  padding: 1.5rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.035) 55%,
    rgba(120, 150, 255, 0.05)
  );
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.tilt:nth-child(4n + 1) {
  transform: rotate(-2.5deg);
}
.tilt:nth-child(4n + 2) {
  transform: rotate(1.5deg);
}
.tilt:nth-child(4n + 3) {
  transform: rotate(-1deg);
}
.tilt:nth-child(4n + 4) {
  transform: rotate(2deg);
}

.tilt:hover {
  transform: rotate(0deg) translateY(-4px);
  border-color: var(--blue-bright);
}

.tilt svg {
  width: 22px;
  height: 22px;
  color: var(--blue-bright);
}

.tilt p {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* =========================================================================
   TEAM  (hover reveals the bio, name block lifts)
   ========================================================================= */
.team-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.member {
  position: relative;
  /* aspect ratio, not a fixed height: the card grows taller as it grows
     wider, so `cover` always crops the sides (never the top of the head)
     whatever the screen size */
  aspect-ratio: 3 / 4.15;
  min-height: 22rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #202027, #0c0c10 70%);
}

.member__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* photos are pre-normalised to one portrait canvas (aspect ~0.79),
     narrower than the card, so cover fills the height and trims the sides */
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.04) brightness(0.92);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

.member:hover .member__photo {
  transform: scale(1.045);
  filter: grayscale(0.25) contrast(1) brightness(1);
}

.member::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 6, 8, 0.05) 0%,
    rgba(5, 6, 8, 0.08) 42%,
    rgba(5, 6, 8, 0.62) 70%,
    rgba(5, 6, 8, 0.96) 100%
  );
}

.member__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.5rem;
  transition: transform 0.4s var(--ease);
}

.member:hover .member__body {
  transform: translateY(-0.4rem);
}

.member__role {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.member__rule {
  width: 2.4rem;
  height: 2px;
  margin: 0.7rem 0;
  background: var(--text);
  transition: width 0.4s var(--ease);
}

.member:hover .member__rule {
  width: 3.4rem;
}

.member__name {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
}

.member__bio {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(244, 244, 245, 0.82);
  transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease),
    margin-top 0.45s var(--ease);
}

.member:hover .member__bio,
.member:focus-within .member__bio {
  max-height: 12rem;
  opacity: 1;
  margin-top: 0.8rem;
}

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.final-cta {
  text-align: center;
  /* opaque base so the fixed page backdrop does not show through and
     compete with this section's own centred glow */
  background: var(--ink);
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    58% 85% at 50% 0%,
    rgba(47, 107, 255, 0.32),
    transparent 66%
  );
}

.final-cta .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.final-cta .lede {
  max-width: 44ch;
  text-align: center;
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
/* Calendly booking — no form. Calendly collects every detail on its own
   next step, so the calendar is the whole page.
   Note: Calendly only honours the dark background_color param on paid
   plans; on free it renders white, so the corners are just rounded and it
   floats centred on the page. */
.book-panel {
  max-width: 720px;
  margin-inline: auto;
}

.calendly-inline-widget {
  min-width: 280px;
  height: 760px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
  position: relative;
  overflow: clip;
  background: #000; /* solid black — no backdrop colour showing through */
}

.footer-wordmark {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(4rem, 18vw, 13rem);
  line-height: 0.9;
  padding-bottom: 0.06em;
  background: linear-gradient(180deg, #ffffff 0%, #1b1b1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

.footer-grid {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.footer-legal {
  max-width: 42ch;
  font-size: 0.82rem;
  color: var(--faint);
  line-height: 1.7;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--muted);
  height: fit-content;
}

.footer-nav a:hover {
  color: var(--text);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* =========================================================================
   FLOATING CONSULTATION BADGE
   ========================================================================= */
.floating-badge {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(5, 5, 6, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  transition: transform 0.3s var(--ease);
}

.floating-badge:hover {
  transform: scale(1.06);
}

.floating-badge__text {
  position: absolute;
  inset: 0;
  animation: spin 16s linear infinite;
}

.floating-badge__text text {
  fill: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.floating-badge__arrow {
  width: 26px;
  height: 26px;
  color: var(--blue-bright);
}

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

/* =========================================================================
   RESULTS PAGE
   ========================================================================= */
.page-head {
  padding-block: 10rem 3rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.filter {
  padding: 0.6em 1.1em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.2s var(--ease);
}

.filter:hover {
  color: var(--text);
}

.filter.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.results-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.result-card {
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.result-card__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.result-card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.result-card p {
  font-size: 0.9rem;
  color: var(--muted);
}

.result-card.is-hidden {
  display: none;
}

.pending {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2em 0.6em;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  vertical-align: middle;
}

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
/* uses the independent `translate` property so decorative `transform`
   rules (tilted cards, hover lifts) are never overridden */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
}

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

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .case-layout {
    grid-template-columns: 1fr;
  }
  .case {
    position: static;
  }
  .timesave {
    position: static;
    order: -1;
  }
  /* on touch layouts the watch must not eat vertical scroll */
  .timesave__stage .spline-el {
    pointer-events: none;
  }
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  .cat-grid,
  .team-grid,
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tilt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .phase-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 4vw, 2.4rem);
  }
  .case {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: calc(100% - 2rem);
  }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem;
    background: var(--panel);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
  }
  .nav.is-open {
    transform: none;
  }
  .nav a {
    font-size: 1.1rem;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .header-actions .btn--primary {
    display: none;
  }

  /* keep two per row on phones so sections read as a grid, not one giant
     card at a time */
  .cat-grid,
  .team-grid,
  .tilt-grid,
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .phase-grid {
    grid-template-columns: 1fr;
  }
  .phase {
    grid-template-columns: clamp(2.25rem, 12vw, 3.5rem) 1fr;
    gap: 0.9rem;
  }
  .phase__num {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  /* tighten the cards so two fit without feeling cramped */
  .cat {
    padding: 1.15rem;
    min-height: 0;
    gap: 0.7rem;
  }
  .cat__icon {
    width: 38px;
    height: 38px;
  }
  .cat h3 {
    font-size: 1rem;
  }
  .cat p {
    font-size: 0.82rem;
  }
  .tilt {
    padding: 1rem;
  }
  .tilt p {
    font-size: 0.8rem;
    margin-top: 0.6rem;
  }
  /* calmer tilt so two rotated cards per row do not collide */
  .tilt:nth-child(4n + 1) {
    transform: rotate(-1.2deg);
  }
  .tilt:nth-child(4n + 2) {
    transform: rotate(0.8deg);
  }
  .tilt:nth-child(4n + 3) {
    transform: rotate(-0.6deg);
  }
  .tilt:nth-child(4n + 4) {
    transform: rotate(1deg);
  }
  .result-card {
    padding: 1.15rem;
  }
  .result-card h3 {
    font-size: 0.98rem;
  }
  .result-card p {
    font-size: 0.82rem;
  }
  .member {
    min-height: 0;
  }
  .member__body {
    padding: 0.9rem;
  }
  .member__role {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }
  .member__name {
    font-size: 1rem;
  }
  .member__bio {
    font-size: 0.76rem;
  }
  .member__rule {
    margin: 0.5rem 0;
  }

  .case {
    grid-template-columns: 1fr;
    padding: 1.1rem;
  }
  .case__ba {
    flex-direction: column;
  }

  .footer-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* very small screens: relax the two column grids just a little */
@media (max-width: 380px) {
  .cat-grid,
  .team-grid,
  .tilt-grid,
  .results-grid {
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    translate: none;
  }
}