/* ============================================================
   VETRI BUILDS — Design System
   Vanilla CSS. No frameworks. No build step.
   ============================================================ */

/* ---------- 1. Tokens ----------
   Brand lifted straight from the CBC business card:
   navy #01445E · amber #FFC521 · white                      */
:root {
  /* Light surfaces — cool paper that sits with navy */
  --paper:        #F6F7F8;
  --paper-2:      #ECEFF2;
  --paper-3:      #E0E5EA;
  --line:         #D4DBE1;
  --line-soft:    #E5EAEE;

  /* Ink */
  --ink:          #09232F;
  --ink-2:        #2B4654;
  --ink-3:        #587180;
  --ink-4:        #8AA0AD;

  /* Deep surfaces (hero / film / footer) */
  --void:         #05202C;
  --void-2:       #082A39;
  --void-3:       #0D3A4D;
  --void-line:    #15455B;

  /* Brand */
  --navy:         #01445E;
  --amber:        #FFC521;
  --brand:        #01445E;          /* accent on LIGHT surfaces */
  --brand-2:      #FFC521;
  --brand-3:      #FFD966;
  --brand-wash:   rgba(1, 68, 94, .09);
  --on-brand:     #FFFFFF;          /* text on a --brand fill */

  /* Support */
  --steel:        #5A7A88;
  --ok:           #2E7D5B;

  /* Type */
  --display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:    "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4.5rem, 10vw, 9rem);
  --max: 1280px;
  --max-narrow: 860px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --radius: 2px;
  --radius-lg: 4px;

  color-scheme: light;
}

/* Dark theme */
[data-theme="dark"] {
  --paper:      #041A24;
  --paper-2:    #07222E;
  --paper-3:    #0C2E3D;
  --line:       #143C4F;
  --line-soft:  #0F3243;

  --ink:        #EAF1F5;
  --ink-2:      #C3D4DD;
  --ink-3:      #8FA7B4;
  --ink-4:      #5F7988;

  --brand:      #FFC521;          /* accent is amber once the page is dark */
  --brand-2:    #FFD966;
  --brand-wash: rgba(255, 197, 33, .13);
  --on-brand:   #05202C;

  color-scheme: dark;
}

/* Any dark surface inside a light page flips the accent to amber too */
.section--dark,
.phero,
.cta-band,
.film,
.ftr,
.calc__out,
.pkg--hero,
.lbox,
.loader {
  --brand:      #FFC521;
  --brand-2:    #FFD966;
  --brand-3:    #FFE49A;
  --brand-wash: rgba(255, 197, 33, .14);
  --on-brand:   #05202C;
  --line:       var(--void-line);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
  transition: background .5s var(--ease), color .5s var(--ease);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

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

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

/* Grain overlay — gives the whole site a printed, tactile feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 460;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -.022em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

.h-display { font-size: clamp(2.9rem, 8.2vw, 7rem); line-height: .96; letter-spacing: -.035em; }
.h1        { font-size: clamp(2.3rem, 5.4vw, 4.3rem); }
.h2        { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.h3        { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.15; }
.h4        { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.25; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-3);
}

.eyebrow {
  font-family: var(--mono);
  font-size: .685rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--brand);
  opacity: .55;
}
.eyebrow--plain::before { display: none; }

.muted { color: var(--ink-3); }
em.ital { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--brand); }

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: var(--max-narrow); }
.wrap--wide   { max-width: 1480px; }

.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--void); color: #B6C8D2; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #F2F7FA; }
.section--dark .muted, .section--dark .lead { color: #86A0AE; }

.sec-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head .eyebrow { margin-bottom: 1.15rem; }
.sec-head .lead { margin-top: 1.2rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.02em 1.85em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .885rem;
  font-weight: 500;
  letter-spacing: .035em;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .35s var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amber);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(1,30,44,.5); color: #05202C; }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }

/* Primary: navy on light surfaces, amber on dark ones — always readable */
.btn--brand { --btn-bg: var(--brand); --btn-fg: var(--on-brand); }
.btn--brand::before { background: var(--amber); }
.section--dark .btn--brand::before,
.phero .btn--brand::before,
.cta-band .btn--brand::before,
.film .btn--brand::before,
.pkg--hero .btn--brand::before,
.calc__out .btn--brand::before { background: #fff; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--brand); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--on-dark {
  --btn-bg: transparent; --btn-fg: #EAF1F5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.btn--on-dark:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--brand); }

.btn--sm { padding: .78em 1.3em; font-size: .8rem; }
.btn--block { width: 100%; }

.btn .arw { transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* Text link with underline sweep */
.tlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .9rem; font-weight: 500; color: var(--ink);
  position: relative; padding-bottom: 3px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.tlink:hover { color: var(--brand); }
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 6. Header ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.hdr__in {
  max-width: var(--max-wide, 1480px);
  margin-inline: auto;
  padding: 1.15rem var(--gut);
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: padding .4s var(--ease);
}
/* The header is always the brand navy — same as the card */
.hdr {
  --brand: var(--amber);
  --on-brand: #05202C;
  color: #EAF1F5;
}
.hdr.is-stuck {
  background: rgba(1, 68, 94, .93);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 10px 30px -22px rgba(0,0,0,.8);
}
.hdr.is-stuck .hdr__in { padding-block: .6rem; }
.hdr.is-hidden { transform: translateY(-105%); }

.logo { display: flex; align-items: center; gap: .72rem; margin-right: auto; }
.logo__mark {
  display: block;
  height: 40px; width: auto;
  transition: transform .5s var(--ease);
}
.logo__mark img { height: 100%; width: auto; }
.logo:hover .logo__mark { transform: translateY(-2px) scale(1.04); }
.logo__txt { line-height: 1.12; }
.logo__name {
  font-family: var(--sans); font-size: .83rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; display: block;
}
.logo__sub {
  font-family: var(--mono); font-size: .54rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--amber); display: block; margin-top: 3px;
}
.hdr.is-stuck .logo__mark { height: 34px; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: .875rem; font-weight: 450; color: rgba(234,241,245,.80);
  position: relative; padding-block: .3rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--amber);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--amber); }

.hdr__actions { display: flex; align-items: center; gap: .6rem; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  color: #EAF1F5;
  transition: all .35s var(--ease);
}
.icon-btn:hover { background: var(--amber); color: #05202C; box-shadow: inset 0 0 0 1px var(--amber); transform: translateY(-2px); }
.icon-btn svg { width: 17px; height: 17px; }
.theme-btn .moon { display: none; }
[data-theme="dark"] .theme-btn .sun { display: none; }
[data-theme="dark"] .theme-btn .moon { display: block; }

.burger { display: none; width: 40px; height: 40px; position: relative; }
.burger span {
  position: absolute; left: 10px; width: 20px; height: 1.6px;
  background: #EAF1F5; transition: all .4s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; width: 13px; }
.burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { top: 19px; width: 20px; transform: rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 999;
  --brand: var(--amber); --on-brand: #05202C;
  background: var(--navy);
  padding: 6.5rem var(--gut) 2rem;
  display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  overflow-y: auto;
}
.drawer.is-open { clip-path: inset(0 0 0 0); }
.drawer__nav a {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  color: #fff;
  padding-block: .32em;
  border-bottom: 1px solid rgba(255,255,255,.14);
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:hover { color: var(--amber); }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.drawer__foot .big-tel {
  font-family: var(--display); font-size: 1.6rem; color: var(--amber);
}

/* ---------- 7. HERO — scroll-driven build film ---------- */
.film { position: relative; background: var(--void); }
.film__track { height: 460vh; position: relative; }
.film__stage {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* sky gradient shifts dawn -> day -> dusk -> night */
.film__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(255,197,33,.26), transparent 62%),
    linear-gradient(180deg, #02131B 0%, #05202C 48%, #073042 100%);
  transition: opacity .6s linear;
}
.film__sky::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 90% at 50% 100%, transparent 40%, rgba(0,0,0,.72));
}

/* subtle blueprint grid */
.film__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 85%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 85%);
}

.film__scene {
  position: relative;
  width: min(94vw, 1460px);
  height: 100%;
  display: grid;
  place-items: center;
}
/* .film__cam is the camera: it holds the dolly move so the SVG itself
   stays free for the build-sequence transforms. */
.film__cam {
  position: absolute;
  right: 0;
  top: 52%;
  width: min(68vw, 1040px);
  transform: translateY(-50%) scale(var(--dolly, 1));
  transform-origin: 62% 70%;
  will-change: transform;
}
/* cinematic scrim across the whole frame: keeps the copy and the stage rail
   legible whatever the scene is doing behind them */
.film__stage::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(5,32,44,.95) 0%, rgba(5,32,44,.82) 21%,
      rgba(5,32,44,.36) 42%, rgba(5,32,44,0) 60%),
    linear-gradient(270deg, rgba(5,32,44,.45) 0%, rgba(5,32,44,0) 16%);
}
.film__svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.6));
}

/* drifting site dust */
.dust circle { fill: #FFC521; animation: dustFloat 9s ease-in-out infinite; }
.dust circle:nth-child(2n)  { animation-duration: 12s; animation-delay: -3s; }
.dust circle:nth-child(3n)  { animation-duration: 15s; animation-delay: -7s; }
.dust circle:nth-child(5n)  { animation-duration: 10.5s; animation-delay: -5s; }
@keyframes dustFloat {
  0%, 100% { transform: translate(0, 0); opacity: .18; }
  25%      { opacity: .55; }
  50%      { transform: translate(14px, -38px); opacity: .32; }
  75%      { opacity: .5; }
}

/* Copy block pinned bottom-left */
.film__copy {
  position: absolute;
  left: 0; bottom: clamp(5.5rem, 12vh, 9rem);
  width: min(640px, 94%);
  justify-self: start;
  align-self: end;
  z-index: 3;
  pointer-events: none;
}
.film__lines {
  position: relative;
  min-height: calc(clamp(1.95rem, 4.4vw, 3.3rem) * 2.25);
}
.film__line {
  position: absolute; inset: 0;
  font-family: var(--display);
  font-size: clamp(1.95rem, 4.4vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #F4F9FB;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
  filter: blur(6px);
}
.film__line.is-on { opacity: 1; transform: none; filter: blur(0); }
.film__line i { font-style: italic; color: var(--brand-3); }

.film__sub {
  margin-top: 1.4rem;
  position: relative;
  min-height: 5.4rem;
}
.film__subline {
  position: absolute; inset: 0;
  font-size: clamp(.94rem, 1.35vw, 1.07rem);
  line-height: 1.62;
  color: rgba(224,218,208,.70);
  max-width: 460px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s;
}
.film__subline.is-on { opacity: 1; transform: none; }

.film__cta {
  margin-top: 2.1rem;
  display: flex; gap: .75rem; flex-wrap: wrap;
  pointer-events: auto;
}

/* Stage rail (right) */
.film__rail {
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  z-index: 3;
  display: flex; flex-direction: column; gap: 1.3rem;
  padding-right: var(--gut);
}
.rail__item {
  display: flex; align-items: center; gap: .8rem;
  justify-content: flex-end;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
  transition: color .5s var(--ease);
}
.rail__item.is-on { color: var(--brand-3); }
.rail__bar {
  width: 34px; height: 2px; background: rgba(255,255,255,.16);
  position: relative; overflow: hidden; flex: none;
}
.rail__bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brand-2);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s linear;
}
.rail__item.is-on .rail__bar::after,
.rail__item.is-done .rail__bar::after { transform: scaleX(1); }
.rail__item.is-done { color: rgba(255,255,255,.42); }
.rail__item.is-done .rail__bar::after { background: rgba(255,255,255,.3); }

/* Scroll hint */
.film__hint {
  position: absolute; left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.34);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  transition: opacity .5s;
}
.film__hint .ln {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.4), transparent);
  position: relative; overflow: hidden;
}
.film__hint .ln::after {
  content: ""; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--brand-2);
  animation: drip 2.1s var(--ease-in-out) infinite;
}
@keyframes drip { 0% { top: -100%; } 60%, 100% { top: 110%; } }

/* Hero stat strip under the film */
.film__stats {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 4;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(3,18,25,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(100%);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.film__stats.is-on { opacity: 1; transform: none; }
.film__stats .wrap--wide {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.fstat {
  padding: 1.15rem .4rem;
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 1.3rem;
}
.fstat:first-child { border-left: 0; padding-left: .4rem; }
.fstat b {
  display: block; font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 500;
  color: #F4F9FB; letter-spacing: -.02em; line-height: 1;
}
.fstat > span {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  margin-top: .45rem; display: block;
}

/* SVG build-sequence element states */
.bs { opacity: 0; transition: opacity .55s var(--ease), transform .7s var(--ease); }
.bs.on { opacity: 1; }
.bs-draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1.1s var(--ease), opacity .5s;
}
.bs-draw.on { stroke-dashoffset: 0; opacity: 1; }
.bs-rise { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.bs-rise.on { transform: scaleY(1); }
.win-lit { opacity: 0; transition: opacity .6s var(--ease); }
.win-lit.on { opacity: 1; }

/* ---------- 8. Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: 1.15rem;
  display: flex;
}
.marquee__row {
  display: flex; gap: 3.5rem; flex: none;
  animation: slide 38s linear infinite;
  padding-right: 3.5rem;
}
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee__item {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.marquee__item svg { width: 13px; height: 13px; color: var(--brand); flex: none; }

/* ---------- 9. Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 2px; background: var(--brand);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--ink-4); box-shadow: 0 22px 44px -28px rgba(0,0,0,.3); }
.card:hover::before { transform: scaleY(1); transform-origin: top; }

.card__num {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .2em; color: var(--ink-4);
  margin-bottom: 1.4rem; display: block;
}
.card__ico {
  width: 46px; height: 46px; margin-bottom: 1.4rem;
  display: grid; place-items: center;
  color: var(--brand);
  background: var(--brand-wash);
  border-radius: 3px;
  transition: background .45s var(--ease), color .45s var(--ease), transform .5s var(--ease);
}
.card:hover .card__ico { background: var(--brand); color: #fff; transform: rotate(-6deg); }
.card__ico svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: .7rem; }
.card p { font-size: .935rem; color: var(--ink-3); }
.card__meta {
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}
.card__meta b { color: var(--brand); font-family: var(--sans); font-size: .82rem; letter-spacing: 0; text-transform: none; }

.section--dark .card {
  background: var(--void-2); border-color: var(--void-line);
}
.section--dark .card:hover { border-color: #25556B; }
.section--dark .card p { color: #89A2B0; }
.section--dark .card__meta { border-color: var(--void-line); color: #5C7886; }

/* ---------- 10. Services (editorial list) ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid;
  grid-template-columns: 5rem 1fr minmax(0, 26rem) 3rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.6rem, 3vw, 2.3rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-inline .45s var(--ease);
}
.svc::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--paper-2);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.svc:hover { padding-inline: clamp(.5rem, 2vw, 1.5rem); }
.svc:hover::after { transform: scaleY(1); transform-origin: top; }
.svc__n { font-family: var(--mono); font-size: .68rem; color: var(--ink-4); letter-spacing: .16em; }
.svc__t { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.svc__t h3 { transition: color .35s var(--ease); }
.svc:hover .svc__t h3 { color: var(--brand); }
.svc__tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
  padding: .3em .7em; background: var(--brand-wash); border-radius: 2px;
}
.svc__d { font-size: .915rem; color: var(--ink-3); }
.svc__go {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
  transition: all .45s var(--ease);
  justify-self: end;
}
.svc:hover .svc__go { background: var(--brand); color: #fff; box-shadow: none; transform: rotate(-45deg); }
.svc__go svg { width: 15px; height: 15px; }

/* ---------- 11. Calculator ---------- */
.calc {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 40px 80px -56px rgba(0,0,0,.38);
}
.calc__form { padding: clamp(1.6rem, 3.2vw, 2.8rem); }
.calc__out {
  padding: clamp(1.6rem, 3.2vw, 2.8rem);
  background: var(--void);
  color: #B6C8D2;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.calc__out::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(255,197,33,.20), transparent 60%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.4));
  pointer-events: none;
}
.calc__out > * { position: relative; }

.field { margin-bottom: 1.5rem; }
.field > label, .field__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: .63rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .7rem;
}
.field__val { font-family: var(--sans); font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--brand); font-weight: 600; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: var(--line);
  border-radius: 2px; outline-offset: 8px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--paper);
  box-shadow: 0 2px 10px rgba(1,68,94,.45);
  cursor: grab; transition: transform .2s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--paper);
  cursor: grab;
}

.seg { display: grid; grid-auto-flow: column; gap: 4px; background: var(--paper-3); padding: 4px; border-radius: 3px; }
.seg button {
  padding: .68em .4em;
  font-size: .82rem; font-weight: 500;
  border-radius: 2px; color: var(--ink-3);
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 6px rgba(0,0,0,.09); }
.seg--brand button.is-on { background: var(--brand); color: #fff; }

.chk { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0; cursor: pointer; font-size: .9rem; }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk__box {
  width: 17px; height: 17px; flex: none; margin-top: 3px;
  border: 1px solid var(--line); border-radius: 2px;
  display: grid; place-items: center;
  transition: all .25s var(--ease);
}
.chk__box svg { width: 10px; height: 10px; color: #fff; opacity: 0; transform: scale(.5); transition: all .25s var(--ease); }
.chk input:checked + .chk__box { background: var(--brand); border-color: var(--brand); }
.chk input:checked + .chk__box svg { opacity: 1; transform: scale(1); }
.chk input:focus-visible + .chk__box { outline: 2px solid var(--brand); outline-offset: 2px; }
.chk__t { color: var(--ink-2); }
.chk__p { color: var(--ink-4); font-family: var(--mono); font-size: .7rem; margin-left: auto; padding-left: .6rem; }

.calc__total { margin-top: auto; }
.calc__amt {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  line-height: 1; letter-spacing: -.035em;
  color: #F4F9FB;
  display: flex; align-items: baseline; gap: .1em;
  white-space: nowrap;
}
.calc__amt .cur { font-size: .45em; color: var(--brand-2); }
.calc__psf {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-top: .8rem;
}
.calc__rows { margin: 1.4rem 0; }
.calc__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .62rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.09);
  font-size: .87rem;
}
.calc__row span { color: rgba(255,255,255,.52); }
.calc__row b { color: #DCE8EF; font-weight: 500; font-variant-numeric: tabular-nums; }
.calc__row--big { border-bottom: 0; padding-top: 1rem; font-size: 1rem; }
.calc__row--big span { color: #fff; }
.calc__row--big b { color: var(--brand-2); font-size: 1.15rem; }
.calc__note {
  font-size: .73rem; line-height: 1.5;
  color: rgba(255,255,255,.35);
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.calc__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand-2);
  margin-bottom: 1.6rem;
}
.calc__badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .35; transform: scale(.7);} }

/* ---------- 12. Packages ---------- */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.pkg {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: clamp(1.6rem, 2.6vw, 2.3rem);
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.pkg:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -38px rgba(0,0,0,.38); }
.pkg--hero {
  background: var(--void); color: #B6C8D2; border-color: var(--void);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.5);
}
.pkg--hero h3, .pkg--hero .pkg__price b { color: #F4F9FB; }
.pkg--hero .pkg__sub, .pkg--hero li { color: #86A0AE; }
.pkg--hero li svg { color: var(--brand-2); }
.pkg--hero .pkg__price { border-color: rgba(255,255,255,.12); }
.pkg--hero .pkg__more { border-color: rgba(255,255,255,.12); color: #B6C8D2; }

.pkg__flag {
  position: absolute; top: 0; right: clamp(1.6rem, 2.6vw, 2.3rem);
  transform: translateY(-50%);
  background: var(--amber); color: #05202C;
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .45em .9em; border-radius: 2px;
}
.pkg__tier { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
.pkg h3 { margin: .8rem 0 .4rem; }
.pkg__sub { font-size: .89rem; color: var(--ink-3); min-height: 2.8em; }
.pkg__price {
  margin: 1.5rem 0; padding-block: 1.3rem;
  border-block: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .2rem;
}
.pkg__price b {
  font-family: var(--display); font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 500; letter-spacing: -.03em; color: var(--ink); line-height: 1;
}
.pkg__price .cur { font-size: 1.3rem; color: var(--brand); font-family: var(--display); }
.pkg__price .unit { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; color: var(--ink-4); margin-left: .5rem; }

.pkg ul { display: grid; gap: .72rem; margin-bottom: 1.8rem; }
.pkg li { display: flex; gap: .68rem; font-size: .89rem; color: var(--ink-2); line-height: 1.5; }
.pkg li svg { width: 14px; height: 14px; flex: none; margin-top: 5px; color: var(--brand); }
.pkg__more {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  text-align: center;
}

/* Spec accordion */
.spec { border-top: 1px solid var(--line); }
.spec__item { border-bottom: 1px solid var(--line); }
.spec__btn {
  width: 100%; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.35rem 0; text-align: left;
  transition: color .3s var(--ease);
}
.spec__btn:hover { color: var(--brand); }
.spec__btn .n { font-family: var(--mono); font-size: .66rem; color: var(--ink-4); letter-spacing: .16em; flex: none; width: 2.2rem; }
.spec__btn .t { font-family: var(--display); font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: inherit; flex: 1; letter-spacing: -.015em; }
.spec__btn .pm {
  width: 28px; height: 28px; flex: none; position: relative;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line);
  transition: all .4s var(--ease);
}
.spec__btn .pm::before, .spec__btn .pm::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; transition: transform .4s var(--ease);
}
.spec__btn .pm::before { width: 10px; height: 1.3px; transform: translate(-50%,-50%); }
.spec__btn .pm::after  { width: 1.3px; height: 10px; transform: translate(-50%,-50%); }
.spec__item.is-open .pm::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.spec__item.is-open .pm { background: var(--brand); color: #fff; box-shadow: none; }
.spec__item.is-open .spec__btn { color: var(--brand); }
.spec__panel { overflow: hidden; height: 0; transition: height .5s var(--ease); }
.spec__inner { padding: 0 0 1.8rem 3.4rem; }
.spec__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.spec__col h5 {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .8rem; font-weight: 500;
}
.spec__col ul { display: grid; gap: .5rem; }
.spec__col li { font-size: .855rem; color: var(--ink-3); padding-left: .9rem; position: relative; line-height: 1.5; }
.spec__col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 1px; background: var(--ink-4); }

/* Comparison table */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.cmp thead th {
  position: sticky; top: 0;
  background: var(--paper-2);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.cmp thead th:first-child { color: var(--ink); }
.cmp tbody th { font-weight: 500; color: var(--ink); width: 24%; }
.cmp td { color: var(--ink-3); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: var(--brand-wash); }
.cmp .hi { color: var(--brand); font-weight: 500; }
.cmp__grp td {
  background: var(--paper-3); font-family: var(--mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}

/* ---------- 13. Process ---------- */
.proc { position: relative; }
.proc__rail {
  position: absolute; left: 23px; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.proc__rail span {
  position: absolute; inset: 0 auto 0 0; width: 1px;
  background: var(--brand); height: 0;
  transition: height .18s linear;
}
.proc__step {
  display: grid; grid-template-columns: 48px 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  position: relative;
}
.proc__dot {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink-4);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  z-index: 1;
  transition: all .5s var(--ease);
}
.proc__step.is-on .proc__dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-wash); }
.proc__body { padding-top: .5rem; }
.proc__body h4 { margin-bottom: .4rem; transition: color .4s; }
.proc__step.is-on h4 { color: var(--brand); }
.proc__body p { font-size: .9rem; color: var(--ink-3); max-width: 55ch; }
.proc__when {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-top: .6rem; display: block;
}
.section--dark .proc__rail { background: var(--void-line); }
.section--dark .proc__dot { background: var(--void-2); box-shadow: inset 0 0 0 1px var(--void-line); color: #5C7886; }
.section--dark .proc__body p { color: #89A2B0; }

/* ---------- 14. Projects ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.filters button {
  padding: .62em 1.15em;
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: all .35s var(--ease);
}
.filters button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4); }
.filters button.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  align-items: start;              /* never stretch a card past its aspect */
}
.proj {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
  cursor: pointer;
  grid-column: span 4;
  aspect-ratio: 4/3;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.proj--w6 { grid-column: span 6; aspect-ratio: 16/11; }
.proj.is-hidden { display: none; }
.proj__media { position: absolute; inset: 0; overflow: hidden; }
.proj__media img, .proj__media svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.proj:hover .proj__media img, .proj:hover .proj__media svg { transform: scale(1.06); }
.proj__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(2,17,24,.90));
  opacity: .82; transition: opacity .5s var(--ease);
}
.proj:hover .proj__media::after { opacity: .95; }
.proj__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  z-index: 2;
}
.proj__cat {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand-3);
  margin-bottom: .5rem; display: block;
}
.proj__body h3 { color: #F4F9FB; font-size: clamp(1.1rem, 1.9vw, 1.5rem); }
.proj__facts {
  display: flex; gap: 1.2rem; margin-top: .75rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s;
}
.proj:hover .proj__facts { max-height: 60px; opacity: 1; }
.proj__facts div { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.proj__facts b { display: block; font-family: var(--sans); font-size: .85rem; letter-spacing: 0; text-transform: none; color: #fff; font-weight: 500; margin-top: .2rem; }
.proj__zoom {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  color: #fff; opacity: 0; transform: scale(.6);
  transition: all .45s var(--ease);
}
.proj:hover .proj__zoom { opacity: 1; transform: scale(1); }
.proj__zoom svg { width: 15px; height: 15px; }

/* Lightbox */
.lbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(3,18,25,.96);
  backdrop-filter: blur(14px);
  display: grid; place-items: center;
  padding: var(--gut);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.lbox.is-open { opacity: 1; pointer-events: auto; }
.lbox__fig { max-width: 1100px; width: 100%; }
.lbox__media {
  width: 100%; max-height: 70vh;
  border-radius: var(--radius-lg);
  overflow: hidden; display: flex;
  background: #111;
}
.lbox__media img, .lbox__media svg {
  width: 100%; max-height: 70vh;
  object-fit: contain;
}
.lbox__cap { margin-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.lbox__cap h3 { color: #F4F9FB; }
.lbox__cap p { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: .4rem; }
.lbox__x, .lbox__nav {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  transition: all .35s var(--ease);
}
.lbox__x { top: 1.5rem; right: 1.5rem; }
.lbox__nav { top: 50%; transform: translateY(-50%); }
.lbox__nav--prev { left: 1.5rem; }
.lbox__nav--next { right: 1.5rem; }
.lbox__x:hover, .lbox__nav:hover { background: var(--brand); box-shadow: none; }
.lbox svg { width: 17px; height: 17px; }

/* ---------- 15. Testimonials ---------- */
.tslider { position: relative; overflow: hidden; }
.ttrack { display: flex; transition: transform .75s var(--ease); }
.tslide { flex: 0 0 100%; padding-inline: 2px; }
.tquote {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  line-height: 1.32; letter-spacing: -.022em;
  color: var(--ink); max-width: 24ch;
}
.section--dark .tquote { color: #EAF1F5; }
.tquote::before { content: "“"; color: var(--brand); margin-right: .05em; }
.tmeta { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.tav {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand);
  font-family: var(--display); font-size: 1.1rem;
}
.tmeta b { display: block; font-size: .95rem; color: var(--ink); font-weight: 500; }
.section--dark .tmeta b { color: #EAF1F5; }
.tmeta span { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.tstars { display: flex; gap: 2px; margin-bottom: 1.4rem; }
.tstars svg { width: 15px; height: 15px; color: var(--brand); }
.tnav { display: flex; gap: .6rem; margin-top: 2.5rem; align-items: center; }
.tnav button {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: all .35s var(--ease);
}
.tnav button:hover { background: var(--brand); color: #fff; box-shadow: none; }
.section--dark .tnav button { box-shadow: inset 0 0 0 1px var(--void-line); color: #89A2B0; }
.tnav svg { width: 15px; height: 15px; }
.tcount { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-4); margin-left: .6rem; }

/* ---------- 16. Stats ---------- */
.stat b {
  display: block; font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 480;
  letter-spacing: -.04em; line-height: .92; color: var(--ink);
}
.section--dark .stat b { color: #F4F9FB; }
.stat .suf { color: var(--brand); }
.stat > span {
  display: block; margin-top: .75rem;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4);
}
.stat { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.section--dark .stat { border-color: var(--void-line); }

/* ---------- 17. Areas ---------- */
.areas { display: flex; flex-wrap: wrap; gap: .5rem; }
.area {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .66em 1.1em;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 2px; font-size: .86rem; color: var(--ink-2);
  transition: all .35s var(--ease);
}
.area::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .5; transition: opacity .3s, transform .3s; }
.area:hover { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); transform: translateY(-2px); }
.area:hover::before { opacity: 1; transform: scale(1.4); }

/* ---------- 18. FAQ ---------- */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.5rem 0; text-align: left;
  font-family: var(--display); font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  color: var(--ink); line-height: 1.3; letter-spacing: -.015em;
  transition: color .3s var(--ease);
}
.faq__q:hover { color: var(--brand); }
.faq__q .pm {
  margin-left: auto; flex: none; width: 26px; height: 26px; position: relative;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line);
  transition: all .4s var(--ease);
}
.faq__q .pm::before, .faq__q .pm::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.faq__q .pm::before { width: 9px; height: 1.3px; transform: translate(-50%,-50%); }
.faq__q .pm::after  { width: 1.3px; height: 9px; transform: translate(-50%,-50%); }
.faq__item.is-open .pm { background: var(--brand); color: #fff; box-shadow: none; }
.faq__item.is-open .pm::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__q { color: var(--brand); }
.faq__a { overflow: hidden; height: 0; transition: height .5s var(--ease); }
.faq__a p { padding-bottom: 1.6rem; color: var(--ink-3); font-size: .935rem; max-width: 68ch; }

/* ---------- 19. Forms ---------- */
.frm { display: grid; gap: 1.15rem; }
.frm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.inp { position: relative; }
.inp input, .inp select, .inp textarea {
  width: 100%;
  padding: 1.15rem 1rem .5rem;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: .95rem; color: var(--ink);
  transition: border-color .35s var(--ease);
  appearance: none;
}
.inp textarea { resize: vertical; min-height: 92px; }
.inp select { cursor: pointer; padding-right: 2rem; }
.inp::after {
  content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: 1px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.inp:focus-within::after { transform: scaleX(1); }
.inp label {
  position: absolute; left: 1rem; top: 1rem;
  font-size: .92rem; color: var(--ink-4);
  pointer-events: none;
  transition: all .3s var(--ease);
}
.inp input:focus + label, .inp input:not(:placeholder-shown) + label,
.inp textarea:focus + label, .inp textarea:not(:placeholder-shown) + label,
.inp select:focus + label, .inp select[data-filled="1"] + label {
  top: .25rem; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); font-family: var(--mono);
}
.inp select + label { top: .25rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); font-family: var(--mono); }
.inp .caret { position: absolute; right: .8rem; bottom: .9rem; width: 11px; height: 11px; color: var(--ink-4); pointer-events: none; }
.inp .err { font-size: .72rem; color: #C0392B; margin-top: .35rem; display: none; }
.inp.is-err input, .inp.is-err select, .inp.is-err textarea { border-color: #C0392B; }
.inp.is-err .err { display: block; }

.frm__ok {
  display: none; padding: 1.1rem 1.3rem;
  background: rgba(63,125,82,.1);
  border-left: 2px solid var(--ok);
  font-size: .89rem; color: var(--ink-2);
}
.frm__ok.is-on { display: block; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} }

/* ---------- 20. CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--void); color: #B6C8D2; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 90% at 15% 110%, rgba(255,197,33,.22), transparent 60%),
    radial-gradient(60% 80% at 95% -10%, rgba(1,68,94,.65), transparent 60%);
}
.cta-band__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 70px 70px;
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: #F4F9FB; }

/* ---------- 21. Footer ---------- */
.ftr { background: var(--void-2); color: #89A2B0; padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.ftr__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3.5rem; }
.ftr__brand .logo__mark { background: var(--brand); color: #fff; }
.ftr__brand .logo__name { color: #EAF1F5; }
.ftr__brand p { font-size: .9rem; margin-top: 1.3rem; max-width: 34ch; color: #7E97A5; }
.ftr h5 {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand-2); margin-bottom: 1.3rem; font-weight: 500;
}
.ftr ul { display: grid; gap: .72rem; }
.ftr ul a { font-size: .89rem; color: #89A2B0; transition: color .3s, padding-left .3s; display: inline-block; }
.ftr ul a:hover { color: var(--brand-2); padding-left: 5px; }
.ftr__contact p { font-size: .89rem; line-height: 1.65; margin-bottom: 1rem; color: #7E97A5; }
.ftr__contact a.big { font-family: var(--display); font-size: 1.3rem; color: #EAF1F5; display: block; margin-bottom: .4rem; }
.ftr__contact a.big:hover { color: var(--brand-2); }
.ftr__social { display: flex; gap: .55rem; margin-top: 1.4rem; }
.ftr__social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: #89A2B0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: all .35s var(--ease);
}
.ftr__social a:hover { background: var(--brand); color: #fff; box-shadow: none; transform: translateY(-3px); }
.ftr__social svg { width: 15px; height: 15px; }
.ftr__bot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 1.6rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: #5C7886;
}
.ftr__bot a:hover { color: var(--brand-2); }

/* Giant watermark wordmark */
.ftr__mark {
  font-family: var(--display);
  font-size: clamp(3.5rem, 15.5vw, 15rem);
  line-height: .78; letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.07);
  text-align: center;
  padding-top: 1.5rem;
  user-select: none; pointer-events: none;
  white-space: nowrap;
}

/* ---------- 22. Floating actions ---------- */
.fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 900; display: grid; gap: .6rem; }
.fab a, .fab button {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  transition: all .4s var(--ease);
}
.fab a.wa { background: #25D366; color: #fff; }
.fab a:hover, .fab button:hover { transform: translateY(-4px) scale(1.06); }
.fab svg { width: 22px; height: 22px; }
.fab .top { opacity: 0; pointer-events: none; transform: scale(.6); }
.fab .top.is-on { opacity: 1; pointer-events: auto; transform: scale(1); }

/* Mobile sticky call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
  display: none; grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(0,0,0,.1);
}
.callbar a {
  padding: 1rem; text-align: center;
  font-size: .85rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.callbar a:first-child { border-right: 1px solid var(--line); }
.callbar a.primary { background: var(--brand); color: #fff; }
.callbar svg { width: 15px; height: 15px; }

/* Scroll progress bar */
.sprog {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 1001;
  background: var(--brand); width: 0%;
  transition: width .1s linear;
}

/* ---------- 23. Page hero (inner pages) ---------- */
.phero {
  background: var(--void); color: #B6C8D2;
  padding: clamp(8rem, 16vw, 12rem) 0 clamp(3.5rem, 7vw, 6rem);
  position: relative; overflow: hidden;
}
.phero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 90% at 85% 120%, rgba(255,197,33,.20), transparent 62%),
    linear-gradient(180deg, #03171F, #06252F);
}
.phero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(180deg, #000, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
}
.phero .wrap { position: relative; }
.phero h1 { color: #F4F9FB; }
.phero .lead { color: rgba(224,218,208,.66); max-width: 58ch; margin-top: 1.4rem; }
.crumb {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  margin-bottom: 1.5rem; display: flex; gap: .6rem; align-items: center;
}
.crumb a:hover { color: var(--brand-2); }
.crumb span { opacity: .4; }

/* ---------- 24. Misc ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--left-narrow { grid-template-columns: .85fr 1.15fr; }

.figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); }
.figure img, .figure svg { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.figure--wide img, .figure--wide svg { aspect-ratio: 16/10; }
.figure__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(3,18,25,.78); backdrop-filter: blur(10px);
  color: #EAF1F5; padding: .6em 1em; border-radius: 2px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
}

.badge-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  padding: .55em .9em; box-shadow: inset 0 0 0 1px var(--line); border-radius: 2px;
}
.badge svg { width: 12px; height: 12px; color: var(--brand); }
.section--dark .badge { color: #89A2B0; box-shadow: inset 0 0 0 1px var(--void-line); }

.team-card { text-align: left; }
.team-card .figure img, .team-card .figure svg { aspect-ratio: 3/4; }
.team-card h4 { margin-top: 1.1rem; }
.team-card span { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }

/* ---------- 25. Reveal animations ---------- */
[data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-rv].is-in { opacity: 1; transform: none; }
[data-rv="l"] { transform: translateX(-34px); }
[data-rv="r"] { transform: translateX(34px); }
[data-rv="s"] { transform: scale(.955); }
[data-rv].is-in { transform: none; }

.rv-chars span {
  display: inline-block;
  opacity: 0; transform: translateY(70%) rotate(4deg);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.rv-chars.is-in span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-rv], .rv-chars span { opacity: 1 !important; transform: none !important; }
}

/* ---------- 26. Responsive ---------- */
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; gap: 2.2rem 2rem; }
  .pkgs { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .pkg--hero { order: -1; }
  .spec__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .nav, .hdr__actions .btn { display: none; }
  .burger { display: block; }
  .calc { grid-template-columns: 1fr; }
  .split, .split--left-narrow { grid-template-columns: 1fr; }
  /* ---- Mobile hero: the scene leads from the top half, copy sits under it ---- */
  .film__cam {
    position: absolute;
    top: 34%; left: 50%; right: auto;
    width: 142%;
    transform: translate(-50%, -50%) scale(var(--dolly, 1));
    transform-origin: 50% 58%;
  }
  .film__stage::after {
    background: linear-gradient(180deg,
      rgba(5,32,44,.62) 0%, rgba(5,32,44,.10) 18%, rgba(5,32,44,0) 30%,
      rgba(5,32,44,.62) 48%, rgba(5,32,44,.93) 62%, rgba(5,32,44,.99) 78%);
  }
  .film__copy { width: 100%; right: 0; left: 0; bottom: clamp(6rem, 13vh, 8rem); }
  .film__subline { max-width: 100%; }
  .film__cta { display: grid; grid-template-columns: 1fr; gap: .55rem; }
  .film__cta .btn { width: 100%; }

  /* the stage rail becomes a 4-segment progress strip under the header */
  .film__rail {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
    position: absolute; top: 5rem; left: var(--gut); right: var(--gut);
    bottom: auto; transform: none; padding: 0; z-index: 4;
  }
  .rail__item { gap: 0; }
  .rail__item span { display: none; }
  .rail__bar { width: 100%; height: 3px; }

  /* header lockup: the mark carries it, drop the second text line */
  .logo__sub { display: none; }
  .logo__name { font-size: .78rem; letter-spacing: .06em; }
  /* explicit areas — auto-placement puts the arrow in the wrong row */
  .svc {
    grid-template-columns: 2.2rem 1fr auto;
    grid-template-areas: "n t go" ". d d";
    align-items: start;
    gap: .45rem .9rem;
  }
  .svc__n  { grid-area: n; padding-top: .45rem; }
  .svc__t  { grid-area: t; }
  .svc__d  { grid-area: d; margin-top: .25rem; }
  .svc__go { grid-area: go; width: 34px; height: 34px; margin-top: .1rem; }
  .proj, .proj--w6 { grid-column: span 6; aspect-ratio: 4/3; }
  .film__stats .wrap--wide { grid-template-columns: repeat(2, 1fr); }
  .fstat:nth-child(3) { border-left: 0; padding-left: .4rem; }
  .fstat { border-top: 1px solid rgba(255,255,255,.08); }
  .fstat:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 680px) {
  body { font-size: 15.5px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .stat { padding-left: 1rem; }
  .frm__row { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr; }
  .spec__cols { grid-template-columns: 1fr; }
  .spec__inner { padding-left: 0; }
  .proj, .proj--w6 { grid-column: span 12; aspect-ratio: 4/3; }
  .callbar { display: grid; }
  .fab { bottom: 3.9rem; }
  body { padding-bottom: 0; }
  .ftr { padding-bottom: 3.6rem; }
  .film__copy { bottom: 7.4rem; }
  .film__hint { display: none; }
  /* stats repeat in the intro section — drop the strip so it can't clash with the CTAs */
  .film__stats { display: none; }
  .fab .top { display: none; }
  .fab a, .fab button { width: 46px; height: 46px; }
  .fab svg { width: 20px; height: 20px; }

  .film__cam { top: 35%; width: 138%; }
  .film__lines { min-height: calc(1.95rem * 2.3); }
  .film__sub { min-height: 4.8rem; margin-top: 1rem; }
  .film__cta { margin-top: 1.5rem; }
  .logo__txt { display: none; }
  .logo__mark { height: 44px; }
  .hdr.is-stuck .logo__mark { height: 38px; }

  /* 2×2 instead of a four-row stack */
  .seg { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .seg--brand { grid-template-columns: repeat(3, 1fr); }
  .seg button { font-size: .78rem; padding: .72em .3em; }

  .sec-head { margin-bottom: 2.2rem; }
  .card { padding: 1.4rem 1.25rem; }
  .calc__form, .calc__out { padding: 1.5rem 1.25rem; }
  .chk__p { font-size: .66rem; }
  .tslide { padding-inline: 0; }
  .film__track { height: 400vh; }
  .lbox__nav--prev { left: .5rem; }
  .lbox__nav--next { right: .5rem; }
  .seg { grid-auto-flow: row; }
}

/* ============================================================
   27. INTRO LOADER — the logo gets built, then scanned
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 5000;
  background: var(--navy);
  display: grid; place-items: center;
  overflow: hidden;
  transition: transform .85s var(--ease), opacity .6s var(--ease);
}
.loader.is-done { transform: translateY(-101%); opacity: .9; pointer-events: none; }
.loader[hidden] { display: none; }
body.is-loading { overflow: hidden; }

.loader__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(62% 60% at 50% 50%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(62% 60% at 50% 50%, #000 20%, transparent 85%);
  opacity: 0;
}
.loader__glow {
  position: absolute; left: 50%; bottom: -10%;
  width: 90vw; height: 70vh; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,197,33,.20), transparent 70%);
  opacity: 0;
}
.loader__stage { position: relative; display: grid; justify-items: center; }

.loader__logo { position: relative; width: min(430px, 66vw); }
.loader__logo svg { width: 100%; height: auto; display: block; }

/* every layer starts hidden */
.loader .lg-rule    { transform: scaleX(0); transform-origin: left center; transform-box: fill-box; }
.loader .lg-struct  { opacity: 0; }
.loader .lg-l1,
.loader .lg-l2,
.loader .lg-l3      { opacity: 0; transform: translateY(-16px); transform-box: fill-box; }
.loader .lg-word    { opacity: 0; clip-path: inset(0 100% 0 0); }

/* The baseline is the LAST stroke — a slow, even sweep that signs the mark off.
   Symmetric ease (no snap at either end) is what makes it read as smooth.      */
.loader.is-go .lg-rule   { animation: lgRule .9s  cubic-bezier(.62,.02,.2,1) 1.42s forwards; }
.loader.is-go .lg-l1     { animation: lgDrop .5s  var(--ease) .30s forwards; }
.loader.is-go .lg-l2     { animation: lgDrop .5s  var(--ease) .42s forwards; }
.loader.is-go .lg-l3     { animation: lgDrop .5s  var(--ease) .54s forwards; }
.loader.is-go .lg-struct { animation: lgFade .55s var(--ease) .78s forwards; }
.loader.is-go .lg-word   { animation: lgWipe .55s var(--ease) 1.08s forwards; }
.loader.is-go .loader__grid { animation: lgFade .8s var(--ease) 0s forwards; }
.loader.is-go .loader__glow { animation: lgFade 1.2s var(--ease) .6s forwards; }

@keyframes lgRule { to { transform: scaleX(1); } }

/* a hot point of light riding the leading edge of that sweep */
.loader__spark {
  position: absolute;
  top: 68.6%; left: 4.7%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255,197,33,.95), 0 0 28px 8px rgba(255,197,33,.45);
  opacity: 0;
  pointer-events: none;
}
.loader.is-go .loader__spark { animation: lgSpark .9s cubic-bezier(.62,.02,.2,1) 1.42s forwards; }
@keyframes lgSpark {
  0%   { left: 4.7%;  opacity: 0; transform: scale(.3); }
  14%  { opacity: 1; transform: scale(1); }
  82%  { opacity: 1; transform: scale(1); }
  100% { left: 99.4%; opacity: 0; transform: scale(.3); }
}
@keyframes lgDrop { to { opacity: 1; transform: translateY(0); } }
@keyframes lgFade { to { opacity: 1; } }
@keyframes lgWipe { to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* progress + caption */
.loader__bar {
  width: min(250px, 52vw); height: 2px;
  background: rgba(255,255,255,.16);
  margin-top: clamp(2rem, 5vh, 3rem);
  position: relative; overflow: hidden;
}
.loader__bar span {
  position: absolute; inset: 0; background: var(--amber);
  transform: scaleX(0); transform-origin: left;
}
.loader.is-go .loader__bar span { animation: lgBar 2.6s cubic-bezier(.4,.1,.2,1) forwards; }
@keyframes lgBar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

.loader__cap {
  margin-top: 1.1rem;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  min-height: 1.2em;
}
.loader__cap b { color: var(--amber); font-weight: 500; }

.loader__skip {
  position: absolute; right: var(--gut); bottom: 1.6rem;
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.34);
  padding: .6em .9em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  border-radius: 2px;
  transition: all .3s var(--ease);
}
.loader__skip:hover { color: #05202C; background: var(--amber); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .loader { display: none !important; }
}