/* =========================================================================
   ALL TRUE SYSTEMS - scroll-driven camera move
   One photograph, one pinned stage. The hero frame and the services frame are
   two framings of the same picture: the camera rises from the launch to the
   sun while the copy is pulled up, blurred and only then faded out.
   Every desktop dimension is calc(N * var(--u-*)); the artboard is 1644x1033.
   ========================================================================= */

:root {
  --u-ui:   clamp(0.93px, calc(100vw / 1644), 1.15px);
  --u-hero: clamp(0.74px, calc(100vw / 1644), 1.3px);
  --u-shot: clamp(0.62px, min(calc(100vw / 1644), calc(100svh / 1033)), 1.45px);

  --gutter-start: clamp(24px, 2.129vw, 56px);
  --gutter-end:   clamp(26px, 2.311vw, 60px);
  --scene-travel: 300svh;

  --color-void:            #080A19;
  --color-white:           #FFFFFF;
  --color-ink:             #0A0707;
  --color-button-solid:    #E9E9E9;
  --color-nav-surface:     rgba(10, 7, 7, 0.35);
  --color-actions-surface: rgba(0, 0, 0, 0.35);
  --color-badge-surface:   rgba(0, 0, 0, 0.3);
  --color-text-muted:      rgba(255, 255, 255, 0.8);

  /* The wash is the mark's own arc gold rather than the stock coral, so the
     brand colour is the light coming off the bottom of the frame. */
  --glow: radial-gradient(
    109.987% 112.486% at 50% 0%,
    rgba(246, 158, 64, 0)   66.43%,
    rgba(246, 158, 64, 0.5) 84.06%,
    rgba(255, 138, 40, 1)   100%
  );

  --font-display: 'STIX Two Text', 'Times New Roman', serif;
  --font-ui:      'Switzer', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'General Sans', 'Switzer', Inter, Arial, sans-serif;
  --font-ui-mono: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

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

html { scroll-behavior: smooth; background: var(--color-void); }

body {
  margin: 0;
  background: var(--color-void);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }

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

/* will-change is scoped to the moving frames only: held on at rest it softens
   both the text rasterisation and the photograph. */
:root.is-moving .scene__camera,
:root.is-moving .scene__photo,
:root.is-moving .hero__content,
:root.is-moving .platform__content { will-change: transform, opacity, filter; }

/* ---------- header ------------------------------------------------------ */
.site-header {
  position: fixed;
  z-index: 10;
  top: calc(29 * var(--u-ui));
  left: 0;
  right: 0;
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter-start) var(--gutter-end);
}

.brand { display: inline-flex; align-items: center; gap: calc(11.57 * var(--u-ui)); margin-top: calc(4 * var(--u-ui)); }
.brand__mark { height: calc(38 * var(--u-ui)); width: auto; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(30 * var(--u-ui));
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  height: calc(52 * var(--u-ui));
  min-width: calc(343 * var(--u-ui));
  padding-inline: calc(24 * var(--u-ui));
  gap: calc(30 * var(--u-ui));
  border-radius: calc(11 * var(--u-ui));
  background: var(--color-nav-surface);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u-ui));
  font-family: var(--font-ui);
  font-weight: 450;
  font-size: calc(14 * var(--u-ui));
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  transition: color 0.18s ease;
  white-space: nowrap;
}
.nav__link:hover { color: var(--color-white); }
.nav__chevron { width: calc(7 * var(--u-ui)); height: auto; }

.header-actions {
  display: inline-flex;
  align-items: center;
  height: calc(52 * var(--u-ui));
  padding: calc(3 * var(--u-ui));
  gap: calc(5 * var(--u-ui));
  border-radius: calc(13 * var(--u-ui));
  background: var(--color-actions-surface);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(46 * var(--u-ui));
  padding-inline: calc(24 * var(--u-ui));
  border-radius: calc(11 * var(--u-ui));
  font-family: var(--font-ui);
  font-weight: 450;
  font-size: calc(14 * var(--u-ui));
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.button--ghost { min-width: calc(84 * var(--u-ui)); background: transparent; color: var(--color-white); }
.button--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.button--solid { min-width: calc(131 * var(--u-ui)); background: var(--color-button-solid); color: var(--color-ink); }
.button--solid:hover { background: var(--color-white); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-toggle__bar { display: block; width: 20px; height: 1.5px; background: var(--color-white); margin-inline: auto; }

.mobile-menu { display: none; }

/* ---------- the stage --------------------------------------------------- */
.scene { position: relative; height: calc(100svh + var(--scene-travel)); }

.scene__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

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

.scene__camera {
  position: absolute;
  inset: 0;
  transform: scale(var(--cam-z, 1));
  transform-origin: 50% 50%;
}
/* Both plates are 16:9, so the travel has to come from scaling them past the
   fold: at 150svh tall there is half a screen of vertical room to move through.
   max() keeps that true at any aspect ratio, which is what preserves the crop. */
.scene__photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(150%, 266svh);
  height: auto;
  max-width: none;
}
.scene__photo--hero { transform: translate(-50%, var(--cam-y, -40%)); }
/* the second plate continues the same descent and settles, and it is the
   opacity crossing mid-push that makes the two read as one move */
.scene__photo--deck {
  transform: translate(-50%, var(--deck-y, -58%)) scale(var(--deck-z, 1.06));
  opacity: var(--deck-o, 0);
}
.scene__glow { position: absolute; inset: 0; background: var(--glow); opacity: var(--glow-o, 1); }

/* Legibility, not decoration: the deck plate is a wall of lit cloud, so type
   sitting on it needs the ground back. Strongest across the top, where the nav
   and the heading are, and weakest across the middle, where the cards carry
   themselves. Tied to --deck-o so the hero frame never sees it. */
.scene__scrim {
  position: absolute;
  inset: 0;
  opacity: var(--deck-o, 0);
  background: linear-gradient(
    to bottom,
    rgba(8, 10, 25, 0.78) 0%,
    rgba(8, 10, 25, 0.52) 30%,
    rgba(8, 10, 25, 0.18) 58%,
    rgba(8, 10, 25, 0.5) 100%
  );
}

/* ---------- hero frame -------------------------------------------------- */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--u-hero));
  width: calc(763 * var(--u-hero));
  max-width: 100%;
  padding-bottom: calc(96 * var(--u-hero));
  visibility: var(--hero-vis, visible);
  /* the LIFT sits on the wrapper so the three blocks hold their spacing */
  transform: translateY(calc(var(--hero-out, 0) * -163 * var(--u-hero)));
}

/* opacity and filter go on each block, never the wrapper: through an ancestor
   filter, engines disagree about whether a descendant with its own compositing
   feature is drawn through the filter or beside it. */
.hero__badge, .hero__title, .hero__subtitle {
  opacity: var(--hero-o, 1);
  filter: var(--hero-filter, none);
}

.hero__badge {
  padding: calc(9.86 * var(--u-ui)) calc(14.0305 * var(--u-ui));
  border-radius: calc(5 * var(--u-ui));
  background: var(--color-badge-surface);
  backdrop-filter: var(--badge-backdrop, blur(calc(14.6 * var(--u-ui))));
  -webkit-backdrop-filter: var(--badge-backdrop, blur(calc(14.6 * var(--u-ui))));
}
.hero__badge-row { display: flex; align-items: center; min-height: calc(24 * var(--u-ui)); gap: calc(8.1845 * var(--u-ui)); }
.hero__badge-label {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: calc(14.0305 * var(--u-ui));
  line-height: calc(23.3842 * var(--u-ui));
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hero__title {
  width: 100%;
  margin: 0;
  /* browsers add trailing letter-space after the last glyph of a centred line
     and the artboard does not; this cancels it */
  transform: translateX(-0.03em);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(90 * var(--u-hero));
  line-height: 0.9444;
  letter-spacing: -0.06em;
  text-align: center;
}
.hero__title .line { display: block; clip-path: inset(-0.35em -0.6em -0.05em -0.6em); }
.hero__title .line__in { display: block; }

.hero__subtitle {
  width: calc(423 * var(--u-hero));
  max-width: 100%;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 450;
  font-size: calc(20 * var(--u-hero));
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------- services frame ---------------------------------------------- */
.platform__content {
  position: absolute;
  left: 50%;
  top: 20.813%;
  width: calc(901 * var(--u-shot));
  max-width: 100%;
  transform: translateX(-50%);
  opacity: var(--plat-o, 1);
  visibility: var(--plat-vis, hidden);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* the pill and heading travel 638, the cards travel 555, on different curves.
   that difference IS the depth of the arrival; do not unify them. */
.pill, .platform__title {
  transform: translateX(calc(-8.25 * var(--u-shot)))
             translateY(calc((1 - var(--plat-text-p, 1)) * 638 * var(--u-shot)));
}
.shot { transform: translateY(calc((1 - var(--plat-shot-p, 1)) * 555 * var(--u-shot))); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(138 * var(--u-shot));
  gap: calc(10 * var(--u-shot));
  padding: calc(12 * var(--u-shot)) calc(16 * var(--u-shot));
  border-radius: calc(6 * var(--u-shot));
  background: rgba(10, 7, 7, 0.35);
  font-family: var(--font-ui);
  font-weight: 450;
  font-size: calc(12 * var(--u-shot));
  white-space: nowrap;
}
.pill__dot { width: calc(4 * var(--u-shot)); height: calc(4 * var(--u-shot)); border-radius: 50%; background: var(--color-white); }

.platform__title {
  width: calc(640 * var(--u-shot));
  max-width: 100%;
  margin: calc(39 * var(--u-shot)) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(48 * var(--u-shot));
  line-height: 0.9583;
  letter-spacing: -0.06em;
  text-align: center;
}

/* three blur cards, one per system */
.shot {
  width: calc(901 * var(--u-shot));
  max-width: 100%;
  margin-top: calc(50 * var(--u-shot));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--u-shot));
}
.shot__card {
  position: relative;
  min-height: calc(268 * var(--u-shot));
  padding: calc(26 * var(--u-shot));
  border-radius: calc(23 * var(--u-shot));
  background: rgba(8, 6, 6, 0.58);
  backdrop-filter: blur(calc(49.25 * var(--u-shot)));
  -webkit-backdrop-filter: blur(calc(49.25 * var(--u-shot)));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
}
.shot__card-index {
  font-family: var(--font-ui-mono);
  font-weight: 400;
  font-size: calc(12 * var(--u-shot));
  letter-spacing: -0.004em;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
.shot__card-title {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(34 * var(--u-shot));
  line-height: 0.96;
  letter-spacing: -0.06em;
}
.shot__card-body {
  margin: calc(14 * var(--u-shot)) 0 0;
  min-height: calc(3 * 1.35 * 14 * var(--u-shot));
  font-family: var(--font-ui);
  font-weight: 450;
  font-size: calc(14 * var(--u-shot));
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

/* ---------- intro ------------------------------------------------------- */
.js:not(.is-open) .site-header,
.js:not(.is-open) .hero__badge,
.js:not(.is-open) .hero__subtitle { opacity: 0; }
.js:not(.is-open) .hero__title .line__in { transform: translateY(100%); opacity: 0; }

@keyframes line-reveal {
  0%   { transform: translateY(100%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in { to { opacity: 1; } }

.is-ready .site-header { animation: fade-in 0.35s linear forwards; }
.is-ready .hero__title .line__in { animation: line-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.is-ready .hero__title .line:nth-child(1) .line__in { animation-delay: 0.08s; }
.is-ready .hero__title .line:nth-child(2) .line__in { animation-delay: 0.21s; }
.is-ready .hero__title .line:nth-child(3) .line__in { animation-delay: 0.34s; }
/* the badge and the subtitle do not move: their boxes are fixed from frame one */
.is-ready .hero__badge,
.is-ready .hero__subtitle { animation: fade-in 0.35s linear 0.95s forwards; }

/* a filled animation outranks the element's own opacity, so the exit could not
   fade a block the intro left behind, and the clip would cut the blur off at
   the baseline. is-open releases both. */
.is-open .hero__title .line { clip-path: none; }
.is-open .site-header,
.is-open .hero__badge,
.is-open .hero__subtitle,
.is-open .hero__title .line__in { animation: none; opacity: 1; transform: none; }

.is-instant .site-header,
.is-instant .hero__badge,
.is-instant .hero__subtitle,
.is-instant .hero__title .line__in { opacity: 1; transform: none; animation: none; }
.is-instant .hero__title .line { clip-path: none; }

/* ---------- 900px ------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --u-ui: 1px;
    --tablet-gutter: clamp(24px, 4vw, 36px);
    --gutter-start: var(--tablet-gutter);
    --gutter-end: var(--tablet-gutter);
    --u-shot: calc(min(calc(100vw - 2 * var(--tablet-gutter)), calc((100svh - 330px) * 1.325)) / 901);
  }

  .site-header { top: 20px; }
  .nav, .header-actions { display: none; }
  .menu-toggle { display: flex; }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(360px, calc(100% - 2 * var(--tablet-gutter)));
    margin: 10px var(--tablet-gutter) 0 auto;
    padding: 14px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 10, 25, 0.78);
    backdrop-filter: blur(14.6px);
    -webkit-backdrop-filter: blur(14.6px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    transform-origin: top right;
    animation: tablet-menu-in 0.2s ease-out both;
  }
  .mobile-menu[hidden] { display: none; }
  @keyframes tablet-menu-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .mobile-menu__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 16px;
  }
  .mobile-menu__button { margin-top: 4px; }

  .scene__viewport {
    padding-inline: var(--tablet-gutter);
    padding-bottom: clamp(32px, 6.5svh, 64px);
  }

  .hero__content { width: 100%; gap: clamp(20px, 3svh, 26px); padding-bottom: 0; }
  .hero__title { font-size: clamp(38px, 10.2vw, 68px); }
  .hero__subtitle { width: 100%; max-width: 423px; font-size: clamp(15px, 4.2vw, 20px); }

  .platform__content { top: clamp(88px, 11svh, 132px); width: calc(100% - 2 * var(--tablet-gutter)); }
  .pill, .platform__title {
    transform: translateX(0) translateY(calc((1 - var(--plat-text-p, 1)) * 638 * var(--u-shot)));
  }
  .pill { min-width: 138px; padding: 11px 16px; border-radius: 6px; font-size: 12px; }
  .platform__title {
    width: min(500px, 100%);
    margin-top: clamp(22px, 3svh, 30px);
    font-size: clamp(31px, 5.2vw, 42px);
  }
  .shot {
    margin-top: clamp(28px, 4svh, 42px);
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .shot__card { min-height: 0; padding: 18px; border-radius: 16px; }
  .shot__card-title { margin-top: 10px; font-size: 26px; }
  .shot__card-body { font-size: 14px; min-height: 0; }
  .shot__card-index { font-size: 11px; }
}

/* ---------- reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  :root { --scene-travel: 120svh; }
  /* the camera stays, because the reader drives it; the push-in goes */
  .scene__camera { transform: none; }
}