/* ==========================================================================
   BASE - fonts, tokens, reset, typography, buttons, ambient light, nav
   ========================================================================== */

/* ----------------------------- Fonts ----------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------- Tokens ----------------------------- */
:root {
  --bg:        #000000;
  --bg-soft:   #07070a;

  --ink:       #ffffff;
  --ink-2:     rgba(255, 255, 255, 0.66);
  --ink-3:     rgba(255, 255, 255, 0.42);
  --ink-4:     rgba(255, 255, 255, 0.24);

  --line:      rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);

  /* Warm accent - used sparingly, on rims and headline highlights.
     --accent-1 is the "solid" one: dots, focus rings, badges. */
  --accent-1:  #ff9a4d;   /* orange */
  --accent-2:  #ffc48d;   /* amber  */
  --accent-3:  #ffe6cd;   /* cream  */
  --accent-grad: linear-gradient(112deg, var(--accent-3), var(--accent-2) 42%, var(--accent-1));

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --pad:      clamp(20px, 5vw, 40px);
  --wrap:     1240px;
  --section:  clamp(80px, 12vw, 160px);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Tuned in glass.css; declared here so components can reference them */
  --glass-blur: 26px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: clamp(15px, 0.55vw + 13.4px, 17px);
  line-height: 1.6;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, not `hidden`. Both stop sideways overflow, but `hidden` turns the
     body into a scroll container, and that quietly kills `position: sticky`
     everywhere below it - which is what the video helix is built on. */
  overflow-x: clip;
}

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

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

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

::selection { background: rgba(255, 154, 77, 0.3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ----------------------------- Layout ----------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }

/* ----------------------------- Type ----------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 0 4px rgba(255, 154, 77, 0.14), 0 0 14px 2px rgba(255, 154, 77, 0.5);
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section__title {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom: 18px;
}

.section__lede {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.12rem);
  text-wrap: pretty;
}

.grad {
  display: block;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

/* ----------------------------- Buttons ----------------------------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.28s var(--ease), background-color 0.28s var(--ease),
              box-shadow 0.28s var(--ease), color 0.28s var(--ease), opacity 0.2s linear;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
              0 10px 26px -14px rgba(255, 255, 255, 0.3);
}
.btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
              0 16px 34px -16px rgba(255, 255, 255, 0.42);
}

.btn--ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

.btn--sm    { padding: 10px 18px; font-size: 0.88rem; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ----------------------------- Ambient light -----------------------------
   Backdrop-filter needs something luminous behind it. On a pure-black page
   these soft blooms are what the glass actually refracts.
   -------------------------------------------------------------------------- */
.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

/* --------------------------------------------------------------------------
   DIGITAL DUST

   A grid, two tiling dot fields drifting at different speeds, and a scatter of
   small squares rising through them. Squares rather than dots on purpose - it
   should read as data, not as snow.

   The two fields are one element each and are what actually fills the space;
   the motes are only the sparkle on top. Forty of those would be forty
   compositor layers, and it would still look emptier than one tiling
   background does.

   It is all CSS keyframes on plain elements, so once it is on screen the
   compositor runs it and JavaScript never touches it again. Used twice: fixed
   behind the whole page, and again inside the video section.
   -------------------------------------------------------------------------- */
.dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Faded out at the edges so it never reads as a boundary. */
.dust__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(255, 154, 77, 0.10) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(255, 154, 77, 0.08) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(78% 66% at 50% 50%, #000 0%, transparent 88%);
          mask-image: radial-gradient(78% 66% at 50% 50%, #000 0%, transparent 88%);
}

/* --tile has to match background-size or the loop visibly jumps. */
.dust__field {
  --tile: 46px;
  position: absolute;
  inset: -12%;
  background-image: radial-gradient(rgba(255, 196, 141, 0.5) 1px, transparent 1.6px);
  background-size: var(--tile) var(--tile);
  -webkit-mask-image: radial-gradient(76% 64% at 50% 50%, #000 0%, transparent 86%);
          mask-image: radial-gradient(76% 64% at 50% 50%, #000 0%, transparent 86%);
  animation: field 26s linear infinite;
}

.dust__field--far {
  --tile: 84px;
  background-image: radial-gradient(rgba(255, 214, 175, 0.42) 1.4px, transparent 2px);
  animation-duration: 46s;
}

@keyframes field {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--tile)), 0); }
}

.mote {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  background: var(--accent-2);
  box-shadow: 0 0 6px rgba(255, 154, 77, 0.5);
  opacity: 0;
  animation: mote var(--d, 11s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* --far scales the travel, so the smaller ones read as further back. */
@keyframes mote {
  0%   { transform: translate3d(0, calc(90px * var(--far, 1)), 0); opacity: 0; }
  12%  { opacity: var(--o, 0.4); }
  88%  { opacity: var(--o, 0.4); }
  100% { transform: translate3d(0, calc(-260px * var(--far, 1)), 0); opacity: 0; }
}

/* Behind the whole page: quieter than the video section's copy, because here
   it is lighting rather than a feature and it is on screen the entire visit. */
.dust--ambient { position: fixed; }
.dust--ambient .dust__grid { opacity: 0.45; }
.dust--ambient .dust__field { opacity: 0.3; }
.dust--ambient .dust__field--far { opacity: 0.22; }
.dust--ambient .mote { box-shadow: 0 0 5px rgba(255, 154, 77, 0.4); }

@media (max-width: 760px) {
  .dust--ambient .dust__field--far { display: none; }
  .dust--ambient .mote:nth-of-type(n+12) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dust { display: none; }
  .dust__field,
  .mote { animation: none; }
}

/* One warm field, spread wide and kept faint. Large + low-alpha reads as the
   room being lit from somewhere off-frame; small + strong reads as a coloured
   blob sitting on top of the page. */
.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  will-change: transform;
}

/* The main wash - deliberately wider than the viewport so no edge is visible. */
.bloom--a {
  width: 150vmax; height: 105vmax;
  bottom: -58vmax; left: 50%;
  margin-left: -75vmax;
  background: radial-gradient(ellipse at center, rgba(255, 132, 56, 0.2), transparent 62%);
  animation: drift-a 60s var(--ease-soft) infinite alternate;
}

/* Slight off-centre lift so the wash isn't perfectly symmetrical. */
.bloom--b {
  width: 105vmax; height: 80vmax;
  bottom: -34vmax; right: -30vmax;
  background: radial-gradient(ellipse at center, rgba(255, 156, 74, 0.13), transparent 64%);
  animation: drift-b 76s var(--ease-soft) infinite alternate;
}

/* A whisper of warmth up top, so the header area isn't dead flat black. */
.bloom--c {
  width: 120vmax; height: 60vmax;
  top: -34vmax; left: -12vmax;
  background: radial-gradient(ellipse at center, rgba(255, 146, 82, 0.075), transparent 66%);
  animation: drift-c 92s var(--ease-soft) infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(5vw, -4vh, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-6vw, 3vh, 0) scale(1.06); } }
@keyframes drift-c { to { transform: translate3d(7vw, 4vh, 0) scale(1.1); } }

/* Film grain - kills the banding you otherwise get across big dark gradients */
.grain {
  position: absolute;
  inset: -100%;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .nav-wrap, .footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .bloom { animation: none; }
}

/* ----------------------------- Nav ----------------------------- */
.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px var(--pad);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav {
  position: relative;   /* containing block for the mobile dropdown */
  pointer-events: auto;
  width: 100%;
  max-width: var(--wrap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 9px 9px 20px;
  transition: box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
}

/* Once the page has scrolled the bar tightens up and the glass gets denser. */
.nav.is-stuck {
  --glass-blur: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 18px 46px -22px rgba(0, 0, 0, 1);
}

.nav__brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: -0.02em; }
.nav__mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 16px -4px rgba(255, 154, 77, 0.5);
}
.nav__name { font-size: 0.95rem; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__links > li > a:not(.btn) {
  display: block;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--ink-2);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__links > li > a:not(.btn):hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 12px;
  width: 18px; height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 23px; }
.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { padding: 8px 8px 8px 18px; }
  .nav__toggle { display: block; }

  /* Selector is `.nav > .nav__links`, not `.nav__links`, on purpose: glass.css
     later declares `.glass > * { position: relative }` at equal specificity,
     which would otherwise win and leave this dropdown in the layout flow. */
  .nav > .nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: var(--r-lg);
    background: rgba(16, 16, 20, 0.82);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -20px rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
  }
  .nav > .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links > li > a:not(.btn) { padding: 14px 16px; font-size: 1rem; }
  .nav__links .btn { margin-top: 6px; }
}

@media (max-width: 420px) {
  .nav__name { display: none; }
}