/* =========================================================================
   Aetheron — /cloud/  ·  Cloud services
   Standalone stylesheet. Nothing here is loaded by the landing page and
   nothing on the landing page is loaded here.

   Sections 1–6 and 12–16 are the landing page's shared system, duplicated
   verbatim on purpose: this page must keep working if the landing page's
   stylesheet is refactored, and a shared file across two folders is the one
   thing the brief rules out. If you change a token in one, change it in both.

   Colour discipline: --brand (#1081fa) appears in six roles on this page.
     1. primary CTA fill            .btn--primary
     2. the globe arcs and markers  #globe / .globe__card
     3. form input focus ring       .field :focus
     4. nav + footer underline      .nav__links / .footer__col
     5. slider thumb focus ring     .slider__range:focus-visible
     6. the active nav item         .nav__links a[aria-current]
   Nothing else. Not headings, not borders, not card backgrounds.
   ========================================================================= */

/* -------------------------------------------------------------- 1. tokens */

:root {
  --cream:        #e9e3d6;
  --cream-light:  #f1ece0;
  --tile:         #fbf8f2;
  --panel:        #181818;
  --ink:          #1a1917;
  --ink-muted:    rgba(26, 25, 23, 0.60);
  --ink-faint:    rgba(26, 25, 23, 0.40);
  --line:         rgba(26, 25, 23, 0.10);
  --line-mid:     rgba(26, 25, 23, 0.18);
  --brand:        #1081fa;
  --brand-deep:   #066ede;

  --on-dark:       #ffffff;
  --on-dark-soft:  rgba(255, 255, 255, 0.82);
  --on-dark-muted: rgba(255, 255, 255, 0.45);
  --on-dark-faint: rgba(255, 255, 255, 0.30);
  --on-dark-line:  rgba(255, 255, 255, 0.28);

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans:  'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1400px;
  --pad: 22px;
  --nav-h: 58px;

  --card-radius: 20px;
  --card-pad: clamp(28px, 4.4vw, 64px);
  --r-pill: 999px;
  --r-tile: 24px;

  --sp-section: clamp(84px, 11vw, 168px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-mask: cubic-bezier(0.6, 0.01, 0.05, 0.95);
}

@media (max-width: 760px) { :root { --pad: 12px; } }

/* -------------------------------------------------------------- 2. reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  /* `clip`, not `hidden`: overflow-x:hidden forces the other axis to `auto`,
     which turns the element into a scroll container and breaks fixed/sticky. */
  overflow-x: clip;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-hyphens: auto;
  hyphens: auto;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1 { font-weight: 200; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-weight: 300; font-size: clamp(30px, 4vw, 56px);  line-height: 1.1;  letter-spacing: -0.025em; }
h3 { font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--cream); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300;
        background: var(--ink); color: var(--cream); padding: 12px 20px; }
.skip:focus { left: 8px; top: 8px; }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px;
      padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- 3. layout */

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-section); }

.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
}

.lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; max-width: 52ch; color: var(--ink-muted); }

.head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(44px, 6vw, 84px);
}
@media (min-width: 900px) { .head { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ================================================================ 4. GLASS */

.glass {
  position: relative;
  background: linear-gradient(178deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.34) 42%,
      rgba(238, 233, 223, 0.40) 100%);
  backdrop-filter: blur(22px) saturate(185%) brightness(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30),
    inset 0 0 22px rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(74, 62, 44, 0.06),
    0 10px 30px rgba(74, 62, 44, 0.10),
    0 26px 60px rgba(74, 62, 44, 0.07);
}

.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.10) 26%,
      transparent 52%);
}

.glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(168deg,
      transparent 58%,
      rgba(214, 208, 196, 0.20) 82%,
      rgba(232, 222, 204, 0.30) 100%);
}

/* the same system inverted, for glass sitting on --panel rather than cream */
.glass--dark {
  background: linear-gradient(178deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.35);
}
.glass--dark::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      transparent 56%);
}
.glass--dark::after { background: none; }

/* ------------------------------------------------------------ 5. buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  /* isolate so the specular ::before blends against this button only, and so
     its z-index:-1 stays above the button's own fill */
  isolation: isolate;
  transition: background-color 500ms ease-out, border-color 500ms ease-out, color 500ms ease-out;
}

/* ---- the flat fallback. This is what ships wherever backdrop-filter is
   unavailable, so it has to be a complete button on its own, never a
   transparent shape that disappears into whatever is behind it. ---- */

/* BLUE 1 of 6 — the primary call to action */
.btn--primary { background: var(--brand); color: #fff; border-color: transparent; }
.btn--primary:hover { background: var(--brand-deep); }

.btn--outline { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.btn--outline:hover { border-color: rgba(255, 255, 255, 0.6); }

.btn--quiet, .btn--ink { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--quiet:hover, .btn--ink:hover { border-color: var(--ink); }

/* ---- liquid glass. Two variants, because one clear style cannot serve both
   surfaces: a clear primary next to a clear secondary has no hierarchy left.
   Default rules target the dark surfaces (hero, contact panel); .on-light
   raises the tint for cream so the button does not wash out. ---- */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

  .btn--primary,
  .btn--outline,
  .btn--quiet,
  .btn--ink {
    transition: transform 0.4s var(--ease),
                box-shadow 0.4s var(--ease),
                background 0.4s var(--ease),
                border-color 0.4s var(--ease);
  }

  .btn--primary::before,
  .btn--outline::before,
  .btn--quiet::before,
  .btn--ink::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    mix-blend-mode: screen;
    /* the label is a bare text node and cannot be raised above a positioned
       pseudo-element, so the highlight goes under it instead — otherwise
       screen-blending washes out dark text on the cream variants */
    z-index: -1;
  }

  /* ---------- primary: blue-tinted glass ---------- */
  .btn--primary {
    color: #fff;
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.72)  0%,
        rgba(16, 129, 250, 0.56) 45%,
        rgba(6, 110, 222, 0.62) 100%);
    backdrop-filter: blur(16px) saturate(190%);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 18px rgba(255, 255, 255, 0.14),
      0 2px 6px rgba(6, 52, 110, 0.18),
      0 12px 30px rgba(6, 52, 110, 0.24);
  }

  .btn--primary::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.08) 34%,
        transparent 58%);
  }

  .btn--primary:hover {
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.80)  0%,
        rgba(16, 129, 250, 0.64) 45%,
        rgba(6, 110, 222, 0.70) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 18px rgba(255, 255, 255, 0.14),
      0 2px 8px rgba(6, 52, 110, 0.20),
      0 16px 42px rgba(6, 52, 110, 0.28);
  }

  /* on cream the tint has to carry itself — at 0.72 it reads as pale blue */
  .btn--primary.on-light {
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.90)  0%,
        rgba(16, 129, 250, 0.82) 45%,
        rgba(6, 110, 222, 0.86) 100%);
    border: 1px solid rgba(255, 255, 255, 0.48);
  }

  .btn--primary.on-light:hover {
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.98)  0%,
        rgba(16, 129, 250, 0.90) 45%,
        rgba(6, 110, 222, 0.94) 100%);
  }

  /* ---------- secondary: clear glass ---------- */
  .btn--outline {
    color: #fff;
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      0 8px 24px rgba(0, 0, 0, 0.10);
  }

  .btn--outline::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.21) 0%,
        rgba(255, 255, 255, 0.04) 34%,
        transparent 58%);
  }

  .btn--outline:hover {
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255, 255, 255, 0.09) 100%);
    border-color: rgba(255, 255, 255, 0.45);
  }

  /* the same clear glass on cream: whites swapped for ink at low opacity,
     because a white-on-white edge has nothing to define it */
  .btn--quiet, .btn--ink, .btn--outline.on-light {
    color: var(--ink);
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.28) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(26, 25, 23, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.70),
      0 8px 24px rgba(74, 62, 44, 0.10);
  }

  .btn--quiet::before, .btn--ink::before, .btn--outline.on-light::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.21) 0%,
        rgba(255, 255, 255, 0.04) 34%,
        transparent 58%);
  }

  .btn--quiet:hover, .btn--ink:hover, .btn--outline.on-light:hover {
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.61) 0%,
        rgba(255, 255, 255, 0.34) 100%);
    border-color: rgba(26, 25, 23, 0.28);
  }

  /* ---------- states ---------- */
  /* the only transform allowed on a button anywhere on the site: a glass
     surface that does not answer a press reads as dead */
  .btn--primary:active,
  .btn--outline:active,
  .btn--quiet:active,
  .btn--ink:active {
    transform: scale(0.985);
    transition-duration: 0.15s;
  }
  .btn--primary:active {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 0 18px rgba(255, 255, 255, 0.14),
      0 1px 3px rgba(6, 52, 110, 0.16),
      0 4px 12px rgba(6, 52, 110, 0.18);
  }
  .btn--outline:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 3px 10px rgba(0, 0, 0, 0.08); }
  .btn--quiet:active, .btn--ink:active, .btn--outline.on-light:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 3px 10px rgba(74, 62, 44, 0.08);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn--primary:active, .btn--outline:active,
    .btn--quiet:active, .btn--ink:active { transform: none; }
  }
}

.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.arrow { width: 11px; height: 11px; flex: 0 0 auto; transition: transform 0.4s ease-out; }

/* ---------------------------------------------------------------- 6. nav */

.nav-shell {
  position: fixed;
  top: calc(var(--pad) + 12px);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 var(--pad);
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  width: 100%;
  max-width: 1180px;
  height: var(--nav-h);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px 0 18px;
  transition: max-width 620ms var(--ease),
              height    460ms var(--ease),
              padding   460ms var(--ease),
              border-radius 460ms var(--ease);
}

.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { height: 26px; width: auto; transition: height 420ms var(--ease); }

.nav__links {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 auto;
  white-space: nowrap;
}
.nav__links a {
  position: relative;
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-block: 2px;
}
/* BLUE 4 of 6 — underline wipe, nav and footer only */
.nav__links a::after,
.footer__col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-soft);
}
.nav__links a:hover::after,
.footer__col a:hover::after { transform: scaleX(1); }

/* BLUE 6 of 6 — you are here. The underline is already the nav's hover
   language, so the active page simply wears it permanently rather than
   inventing a second marker. */
.nav__links a[aria-current='page']::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }

.nav__keep { font-weight: 500; font-size: 14px; color: var(--ink); white-space: nowrap; padding: 0 4px; }

.lang {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(26, 25, 23, 0.055);
  box-shadow: inset 0 1px 2px rgba(26, 25, 23, 0.07),
              inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}
.lang__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 40px; height: calc(100% - 6px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ffffff, #F4EFE6);
  box-shadow: 0 1px 2px rgba(74, 62, 44, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lang.is-en .lang__thumb { transform: translateX(40px); }
.lang__opt {
  position: relative; z-index: 1;
  width: 40px; height: 28px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink-faint);
  transition: color 300ms var(--ease-soft);
}
.lang__opt.is-on { color: var(--ink); }

.nav__cta { height: 38px; padding: 0 18px; font-size: 14px; }

.burger {
  position: relative;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  padding: 0; border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(26, 25, 23, 0.05);
  cursor: pointer;
  color: var(--ink);
  /* out at the top of the page — it blurs in, it does not fade in */
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity 350ms var(--ease), filter 350ms var(--ease), transform 350ms var(--ease);
}
.burger span {
  display: block;
  width: 17px; height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 380ms var(--ease), opacity 200ms;
}

.nav.is-min { max-width: 520px; height: 48px; padding: 0 8px 0 14px; }
.nav.is-min .nav__logo img { height: 23px; }

.nav__links, .nav__lang, .nav__cta {
  transition: opacity 350ms var(--ease), filter 350ms var(--ease), transform 350ms var(--ease);
}
.nav.is-min .nav__links,
.nav.is-min .nav__lang,
.nav.is-min .nav__cta {
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.94);
  pointer-events: none;
  position: absolute;
  left: 50%;
}
.nav.is-min .nav__lang, .nav.is-min .nav__cta { left: auto; right: 64px; }

.nav.is-min .burger { opacity: 1; filter: blur(0); transform: scale(1); pointer-events: auto; }

@media (max-width: 999px) {
  .nav { max-width: 520px; height: 48px; padding: 0 8px 0 14px; }
  .nav .nav__links, .nav .nav__lang, .nav .nav__cta {
    opacity: 0; filter: blur(6px); transform: scale(0.94);
    pointer-events: none; position: absolute; left: 50%;
  }
  .nav .nav__lang, .nav .nav__cta { left: auto; right: 64px; }
  /* `.nav .burger` on purpose: the base .burger rule sets these at equal
     specificity and would win on source order, leaving it unclickable. */
  .nav .burger { opacity: 1; filter: blur(0); transform: scale(1); pointer-events: auto; }
  .nav .nav__logo img { height: 23px; }
}
@media (min-width: 1000px) { .nav:not(.is-min) .nav__keep { display: none; } }

/* ------------------------------------------------ 6b. fullscreen menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 6vw, 88px);
  background: var(--panel);
  color: var(--cream);
  overflow: hidden;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1),
              visibility 0s linear 0.6s;
}
.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}

.menu__close {
  position: absolute;
  top: clamp(20px, 3vw, 34px);
  right: clamp(20px, 3vw, 34px);
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: auto;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.menu__close span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.menu__close span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

.menu__links {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.menu__mask {
  display: block;
  overflow: hidden;
  /* the size lives here, not on the <a>, so the 0.12em headroom below is
     relative to the display size rather than the inherited 17px body */
  font-size: clamp(28px, 4.4vw, 56px);
  /* the mask clips, so descenders on g j y need headroom that costs no layout */
  padding-top: 0.12em;
  margin-top: -0.12em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.menu__mask > a {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: inherit;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--cream);
  transform: translateY(110%);
  transition: transform 0.6s var(--ease);
}
.menu.is-open .menu__mask > a {
  transform: none;
  transition-delay: calc(200ms + var(--i) * 60ms);
}
.menu__mask > a > span { display: inline-block; transition: transform 0.4s ease-out; }
.menu__links a:hover > span { transform: translateX(12px); }
/* you are here, in the takeover as well as the bar */
.menu__mask > a[aria-current='page'] > span { opacity: 0.45; }

@media (max-height: 700px) {
  .menu__mask { font-size: clamp(24px, 6vw, 34px); }
  .menu { padding: clamp(20px, 5vw, 40px); }
}

.menu__foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}
.menu__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--cream);
  opacity: 0.6;
}
.menu__contact a { transition: opacity 0.3s var(--ease-soft); }
.menu__contact a:hover { opacity: 0.75; }

.menu .lang { background: rgba(255, 255, 255, 0.09); box-shadow: none; }
.menu .lang__thumb { background: rgba(255, 255, 255, 0.92); box-shadow: none; }
.menu .lang__opt { color: rgba(255, 255, 255, 0.55); }
.menu .lang__opt.is-on { color: var(--panel); }

/* ========================================================= 7. HERO / GLOBE
   Full-viewport panel. Text left, globe right at 55% and bleeding off the
   right edge. The globe is one <canvas> driven by COBE plus a second 2D
   <canvas> on top carrying the arcs and the hit targets — COBE draws markers
   but has no arc primitive, so the overlay does the arcs with COBE's own
   projection, read straight out of its shader. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 80px) 0 clamp(60px, 8vw, 110px);
  background: var(--panel);
  color: var(--on-dark-soft);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__copy { max-width: 640px; }
.hero__label { color: rgba(233, 227, 214, 0.45); }

.hero h1 {
  color: var(--cream);
  margin-top: 22px;
  font-weight: 200;
}

.hero__sub {
  margin-top: clamp(20px, 2.2vw, 30px);
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: rgba(233, 227, 214, 0.70);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }

/* ---- the globe stage ---- */
.globe {
  position: absolute;
  top: 50%;
  right: -6%;              /* the bleed the brief asks for */
  z-index: 1;
  width: 55%;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  /* the canvases are square and centred inside it */
  pointer-events: none;
}
.globe__canvas, .globe__fx, .globe__hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.globe__canvas { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.globe.is-live .globe__canvas { opacity: 1; }
.globe__fx { pointer-events: none; }

/* the fallback: shown until COBE reports it is drawing, and left up for good
   under reduced motion or without WebGL */
.globe__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 0.8s var(--ease-soft);
}
.globe.is-live .globe__still { opacity: 0; }

/* the markers are real buttons stacked over the canvas: that is what makes
   the globe keyboard-reachable and screen-reader-legible at all */
.globe__hit { pointer-events: auto; }
.globe__pin {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: opacity 250ms linear;
}
.globe__pin[hidden] { display: none; }
.globe__pin:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }

/* Below 900px the globe stops being a background and becomes a band above the
   copy at 45svh. It has to be told to stack explicitly: the hero is a flex row
   and .globe is a SIBLING of .hero__inner rather than a child, so left alone it
   is simply shrunk to nothing by the copy beside it. */
@media (max-width: 899px) {
  .hero {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: clamp(48px, 8vw, 76px);
  }
  .hero__copy { max-width: none; }
  .globe {
    position: relative;
    top: auto; right: auto;
    flex: 0 0 auto;           /* without this the row's shrink still applies */
    height: 45svh;
    width: 100%;
    aspect-ratio: auto;       /* the height is the constraint now, not the ratio */
    margin: 0 0 clamp(28px, 5vw, 44px);
    transform: none;
  }
  /* the canvases stay square and centred inside the band */
  .globe__canvas, .globe__fx, .globe__hit, .globe__still {
    left: 50%;
    width: 45svh;
    max-width: 100%;
    transform: translateX(-50%);
  }
}

/* ---- the marker card ---- */
.globe__card {
  position: absolute;
  z-index: 5;
  width: 232px;
  padding: 16px 18px 17px;
  border-radius: 14px;
  color: var(--cream);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 240ms var(--ease-soft), transform 240ms var(--ease);
}
.globe__card[hidden] { display: none; }
.globe__card.is-open { opacity: 1; transform: none; }

.globe__card-city {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.globe__card-lat {
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--brand);
}
.globe__card-lat span {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em;
  color: rgba(233, 227, 214, 0.45);
}
.globe__card-note {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(233, 227, 214, 0.6);
}
.globe__card-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  display: grid; place-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(233, 227, 214, 0.7);
  font-size: 14px; line-height: 1;
  cursor: pointer;
}

/* the whole interaction is decoration; without JS the globe is a picture */
.no-js .globe__hit, .no-js .globe__card { display: none; }

/* ---- the marker list ----
   Shown by DEFAULT and hidden only once the canvas is confirmed painting. That
   way no-JS, no-WebGL, a blocked CDN and reduced motion all land on a readable
   list of the same cities without needing to detect any of them. */
.globe__list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 28px;
  width: 100%;
  max-width: var(--measure);
  margin: clamp(34px, 4vw, 52px) auto 0;
  padding-inline: var(--gutter);
}
.globe__list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(233, 227, 214, 0.14);
  font-size: 14px;
}
.gd-city { font-weight: 500; color: var(--cream); }
.gd-lat { font-family: var(--mono); font-size: 12px; color: var(--brand); }
.gd-note { flex: 1 1 100%; font-size: 13px; color: rgba(233, 227, 214, 0.5); }

.hero.is-live .globe__list {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------- 7b. masked line reveal */

.line {
  display: block;
  overflow: hidden;
  padding-top: 0.14em;
  margin-top: -0.14em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.line > span { display: block; transform: translateY(105%); }

.js .hero.is-ready .line > span {
  transform: none;
  transition: transform 700ms var(--ease-mask);
}
.js .hero.is-ready .line:nth-child(1) > span { transition-delay: 200ms; }
.js .hero.is-ready .line:nth-child(2) > span { transition-delay: 320ms; }
.js .hero.is-ready .line:nth-child(3) > span { transition-delay: 440ms; }

.js .hero .fade { opacity: 0; transform: translateY(12px); }
.js .hero.is-ready .fade {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
.no-js .line > span { transform: none; }

/* --------------------------------------------------------- 8. statement */
/* Sticky scroll-linked word reveal. Used ONCE on the page: it costs two
   viewport heights, and a second one would read as a tic. */

.stmt { position: relative; height: 200svh; }

.stmt__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stmt__label { margin-bottom: clamp(24px, 3vw, 40px); }

.stmt__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 62px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20ch;      /* forces short lines, which is the point */
  text-wrap: normal;
}

.stmt__text span {
  display: inline-block;
  opacity: 0.18;
  transform: translateY(4px);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .stmt { height: auto; }
  .stmt__inner { position: static; height: auto; padding-block: var(--sp-section); }
  .stmt__text span { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------- 9. infrastructure */
/* Two columns, hairline above. No card, no tint, no icon: the point of the
   section is that it is stated plainly. */

.infra { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 72px); }
@media (min-width: 900px) { .infra { grid-template-columns: 6fr 6fr; align-items: start; } }

.infra h2 { max-width: 18ch; }
.infra__body p { font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.7; max-width: 54ch; }
.infra__body p + p { margin-top: 18px; }

/* the four things that are actually ours, as a plain list of hairlines */
.infra__own { margin-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line-mid); }
.infra__own li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink);
}

/* The four commitments, laid out exactly as if the numbers were in place.
   Every value is a placeholder until the provider contract is signed —
   see the boxed comment in index.html. Do not fill these with guesses. */
.figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(44px, 6vw, 80px);
  border-top: 1px solid var(--line-mid);
}
@media (min-width: 760px) { .figs { grid-template-columns: repeat(4, 1fr); } }

.figs li { padding: clamp(22px, 2.6vw, 32px) 0; padding-right: clamp(16px, 2.4vw, 40px); }
@media (min-width: 760px) { .figs li + li { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.4vw, 36px); } }
@media (max-width: 759px) { .figs li:nth-child(n+3) { border-top: 1px solid var(--line); } }

.figs__val {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.figs__lab {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
}
/* the value slot is a placeholder, so it renders at the display size, not the
   0.92em the inline .tbd uses inside running copy */
.figs__val .tbd { font-size: 0.62em; }

/* -------------------------------------------------------- 10. pillars */
/* Same treatment as the landing page's service cards: glass, no icons, no
   numbering, link pinned to the bottom. Six of them at four across would be
   195px wide, which is unusable, so the row is three — every card still takes
   the height of the tallest, across both rows. */

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (min-width: 680px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px;
  border-radius: var(--r-tile);
  color: inherit;
}

.pillar__name {
  position: relative;
  /* two lines reserved, so the body copy starts at the same height in every
     card whether the title wraps or not */
  display: flex;
  align-items: flex-start;
  min-height: 2.2em;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  transition: transform 0.4s ease-out;
}

.pillar__desc { position: relative; margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

.pillar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.pillar:hover .pillar__name { transform: translateX(6px); }
.pillar:hover .pillar__link .arrow { transform: translateX(6px); }

/* every unfilled figure is marked, so none of them can reach production
   unnoticed: a dotted underline you cannot miss in a screenshot */
.tbd {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink);
  border-bottom: 1px dotted var(--ink-faint);
  white-space: nowrap;
}
.globe__card .tbd, .contact .tbd { color: var(--cream); border-bottom-color: rgba(233, 227, 214, 0.4); }

/* ------------------------------------------------ 11. the configurator */
/* One <input type="range" step="1"> is the entire control. The canvas under it
   is painted FROM the input's value and never drives it, so snapping, touch
   drag, arrow keys and the accessibility tree all come from the platform. */

.cfg { position: relative; }

.cfg__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: clamp(22px, 2.6vw, 32px);
  min-height: 34px;      /* held, so the M marker appearing shifts nothing */
}
.cfg__mark {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-muted);
}
.cfg__mark[hidden] { display: none; }

/* ---- the billing pill: the language toggle's mechanism, wider ---- */
.pill {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px;
  margin-left: auto;
  border-radius: var(--r-pill);
  background: rgba(26, 25, 23, 0.055);
  box-shadow: inset 0 1px 2px rgba(26, 25, 23, 0.07),
              inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}
.pill__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 92px; height: calc(100% - 6px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ffffff, #F4EFE6);
  box-shadow: 0 1px 2px rgba(74, 62, 44, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pill.is-y .pill__thumb { transform: translateX(92px); }
.pill__opt {
  position: relative; z-index: 1;
  width: 92px; height: 30px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  color: var(--ink-faint);
  transition: color 300ms var(--ease-soft);
}
.pill__opt.is-on { color: var(--ink); }

/* ---- the track ----
   --f is the 0..1 stop fraction. It MUST be registered: an unregistered custom
   property has no type, so a `left` built on calc(... var(--f) ...) cannot be
   interpolated — and a `transition: left` on it does not merely skip the
   animation, it freezes the value at the fallback and the thumb never moves.
   Registered as <number> it interpolates, so the transition lives on --f
   itself and `left` simply follows. Where @property is unsupported this
   degrades to an instant, correct jump rather than a stuck thumb. */
@property --f {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}

/* the wrapper carries --f and does NOT clip, so the band label can sit above
   the track; .slider itself clips to keep the shimmer inside its radius */
.slider-wrap {
  position: relative;
  padding-top: 30px;
  transition: --f 420ms var(--ease);
}

.slider {
  position: relative;
  height: 36px;
  border-radius: 10px;
  background: var(--cream-light);
  box-shadow: inset 0 1px 2px rgba(26, 25, 23, 0.06);
  /* the shimmer is painted in this colour; JS reads it back with
     getComputedStyle, so changing the token repaints rather than drifting */
  color: var(--ink);
  overflow: hidden;
}
.slider__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.slider__thumb {
  position: absolute;
  top: -2px;
  /* --f is the 0..1 stop fraction, set by JS. The percentage in calc() is
     resolved against the track, so the thumb cannot drift out of it. */
  left: calc(12px + var(--f, 0.5) * (100% - 24px));
  width: 24px; height: 40px;
  margin-left: -12px;
  border-radius: 10px;
  background: var(--ink);
  box-shadow: 0 2px 8px rgba(26, 25, 23, 0.28);
  pointer-events: none;
}
.slider__thumb::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 12px;
  margin: -6px 0 0 -1px;
  border-radius: 2px;
  background: rgba(233, 227, 214, 0.5);
}

/* the range is the real control: full size, transparent, on top */
.slider__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent;
  border: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.slider__range::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; cursor: ew-resize; }
.slider__range::-moz-range-thumb { width: 40px; height: 40px; border: 0; border-radius: 0; cursor: ew-resize; }

/* BLUE 5 of 6 — the focus ring on the thumb. The range itself is invisible,
   so the ring has to be drawn on the thing the eye is actually following. */
.slider__range:focus-visible { outline: none; }
.slider__range:focus-visible ~ .slider__thumb,
.slider.is-focus .slider__thumb {
  box-shadow: 0 2px 8px rgba(26, 25, 23, 0.28), 0 0 0 3px rgba(16, 129, 250, 0.85);
}

/* a continuous range has two ends, not three named stops */
.slider__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-faint);
}

/* the band label rides the thumb, reading the same --f the thumb does, so the
   two can never disagree about where the current config sits */
.slider__band {
  position: absolute;
  top: 0;
  left: calc(12px + var(--f, 0) * (100% - 24px));
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.6;
  white-space: nowrap;
}
.slider__band::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  width: 1px; height: 8px;
  margin-left: -0.5px;
  background: var(--ink);
  opacity: 0.35;
}

/* ---- rolling digits ----
   One cell per digit, each 1em tall with overflow hidden, holding a 0-9 column
   that slides. Cells are keyed from the RIGHT, so 999 -> 1000 prepends a cell
   instead of remounting the ones column. tabular-nums plus a fixed cell width
   is what stops the readout shifting layout as the value changes. */
.roll {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.roll__d {
  display: inline-block;
  width: 0.58em;              /* the tabular advance of the display face */
  height: 1em;
  overflow: hidden;
  line-height: 1;
  text-align: center;
}
.roll__col {
  display: block;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.roll__col span { display: block; height: 1em; line-height: 1; }
.roll__sep { display: inline-block; width: 0.26em; }

@media (prefers-reduced-motion: reduce) {
  .roll__col { transition: none; }     /* the value still changes, it just lands */
  .slider { transition: none; }
}

/* ---- readout ---- */
.cfg__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(38px, 4.6vw, 64px);
  padding-top: clamp(30px, 3.6vw, 44px);
  border-top: 1px solid var(--line-mid);
}
@media (min-width: 860px) { .cfg__grid { grid-template-columns: 5fr 7fr; } }

.cfg__tier {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.cfg__amount {
  display: flex; align-items: baseline;
  flex-wrap: nowrap;
  gap: 9px;
  margin-top: 14px;
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--ink);
}
.cfg__unit { font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--ink-faint); white-space: nowrap; }
.cfg__equiv { margin-top: 10px; font-size: 14px; color: var(--ink-faint); }
.cfg__equiv[hidden] { display: none; }
.cfg__for { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); max-width: 30ch; min-height: 3.1em; }
.cfg__cta { margin-top: clamp(20px, 2.4vw, 28px); }

.specs { margin: 0; }
.specs__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.specs__row:first-child { border-top: 0; padding-top: 0; }
.specs dt { font-size: 15px; color: var(--ink-muted); }
.specs dd {
  margin: 0;
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.specs dd > span:last-child { font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--ink-faint); }

.feat { margin-top: clamp(24px, 3vw, 34px); }
.feat li {
  padding: 9px 0;
  font-size: 15px; line-height: 1.45;
  color: var(--ink);
  opacity: 0.25;
  transition: opacity 420ms var(--ease-soft);
}
.feat li.is-on { opacity: 1; }

.cfg__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin-top: clamp(26px, 3vw, 38px);
  font-size: 14px; color: var(--ink-faint);
}
.cfg__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* every unfilled figure stays visibly bracketed inside the rolling readout too */
.roll .tbd { font-size: 0.42em; letter-spacing: 0; }

/* -------------------------------------------------------------- 12. faq */

.faq { border-top: 1px solid var(--line-mid); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ink);
  transition: color 400ms var(--ease-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-muted); }
.faq summary::after {
  content: ''; flex: 0 0 auto;
  width: 13px; height: 13px; margin-top: 9px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat;
  transition: transform 400ms var(--ease-soft);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq__a { padding-bottom: clamp(20px, 2.4vw, 28px); max-width: 66ch; font-size: 16px; }
.faq__a p + p { margin-top: 12px; }

/* ---------------------------------------------------------- 13. contact */

.contact { padding: 20px; }
@media (max-width: 767px) { .contact { padding: 0; } }

.contact__card {
  background: var(--panel);
  border-radius: var(--card-radius);
  padding: clamp(32px, 5vw, 88px);
  color: var(--on-dark-soft);
}
@media (max-width: 767px) { .contact__card { border-radius: 0; } }

.contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 80px); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 5fr 6fr; } }

.contact h2 { color: var(--on-dark); }
.contact__lede { margin-top: 18px; max-width: 44ch; font-size: 16px; line-height: 1.65; color: var(--on-dark-soft); }

.contact__direct { margin-top: clamp(28px, 3.5vw, 44px); }
.contact__direct dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--on-dark-muted); }
.contact__direct dd {
  margin: 5px 0 20px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em;
  color: var(--on-dark);
}
.contact__direct a { transition: opacity 400ms var(--ease-soft); }
.contact__direct a:hover { opacity: 0.72; }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--on-dark-muted); }
.field .opt { text-transform: none; letter-spacing: 0.03em; opacity: 0.7; }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  color: var(--on-dark);
  font-size: 16px;
  transition: border-color 500ms ease-out, background-color 500ms ease-out;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.34); }
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.45); }

/* BLUE 3 of 6 — the form focus ring. #1081fa on #181818 is ~4.6:1,
   comfortably past the 3:1 WCAG asks of a non-text focus indicator. */
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.09);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.form__note { font-size: 13px; line-height: 1.5; color: var(--on-dark-muted); max-width: 32ch; }

/* ----------------------------------------------------------- 14. footer */

.site-footer { background: var(--cream-light); padding: clamp(56px, 7vw, 96px) var(--pad) var(--pad); }

.footer-tile {
  max-width: var(--measure);
  margin-inline: auto;
  border-radius: var(--r-tile);
  padding: clamp(30px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 52px);
}
@media (min-width: 860px) { .footer-tile { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.footer__brand { position: relative; }
.footer__brand img { height: 28px; width: auto; }
.footer__brand p { margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--ink-muted); max-width: 30ch; }

.footer__col { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.footer__col h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-faint);
}
.footer__col a, .footer__col span {
  position: relative;
  font-size: 16px;
  color: var(--ink-muted);
  padding: 6px 0;
  overflow-wrap: anywhere;
  transition: color 400ms var(--ease-soft);
}
.footer__col a { width: fit-content; }
.footer__col a:hover { color: var(--ink); }

.footer__bar {
  position: relative;
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 12px 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-faint);
}

.clock { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-muted); }
.clock__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); animation: tick 2s ease-in-out infinite; }
@keyframes tick { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }

/* ----------------------------------------------------------- 15. motion */

.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft);
  transition-delay: var(--d, 0ms);
}

@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;
  }
  .js .reveal { opacity: 1; transform: none; }
  .line > span { transform: none !important; }
  .js .hero .fade { opacity: 1; transform: none; }
  .clock__dot { animation: none; opacity: 0.6; }
  .nav__links, .nav__lang, .nav__cta, .burger, .nav { filter: none !important; }
  .menu { transition: none !important; }
  .menu__mask > a { transform: none !important; }
  /* the globe never spins: the still is the whole picture */
  .globe__canvas, .globe__fx { display: none !important; }
  .globe__still { opacity: 1 !important; }
}