/* ==========================================================================
   ACLY BBD — BASE
   Tokens, reset, typography, motion primitives, header/footer, watermark.
   Shared by the homepage and every project page.

   Palette from the official ACLY brand sheet:
     NEON #D9FE00 · GRAPHITE #2A2A2A · GRAY #A2A2A2 · OFF WHITE #F2F3EE
   ========================================================================== */

:root {
  /* ---- brand ---- */
  --neon: #d9fe00;
  --graphite: #2a2a2a;
  --gray: #a2a2a2;
  --off-white: #f2f3ee;

  /* ---- surfaces ---- */
  --bg: #080909;
  --surface: #101211;
  --surface-2: #161917;

  /* ---- ink ---- */
  --ink: #f4f4f0;
  --ink-70: rgba(244, 244, 240, 0.7);
  --ink-52: rgba(244, 244, 240, 0.52);
  --ink-38: rgba(244, 244, 240, 0.38);
  --ink-22: rgba(244, 244, 240, 0.22);

  /* ---- lines ---- */
  --line: rgba(242, 243, 238, 0.09);
  --line-strong: rgba(242, 243, 238, 0.16);
  --neon-line: rgba(217, 254, 0, 0.34);
  --neon-wash: rgba(217, 254, 0, 0.06);

  /* ---- type ---- */
  --display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- rhythm ---- */
  --shell: 1560px;
  --pad: clamp(20px, 5vw, 76px);
  --section-y: clamp(84px, 12vh, 172px);
  --hdr-h: clamp(64px, 6vw, 82px);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.9s;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, 1.02vw, 16.5px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.006em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* film grain — keeps large black fields from reading as flat.
   No blend mode on purpose: a fixed full-viewport blended layer forces the
   whole page to re-composite on every frame. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* `height: auto` is load-bearing: the HTML height attribute is a presentational
   hint, so an <img> sized by CSS width alone keeps the attribute's height and
   the mark comes out squashed. Anything that needs a fixed box overrides it. */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--neon); color: #050505; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 14px 20px;
  background: var(--neon);
  color: #050505;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

/* ==========================================================================
   TYPE SYSTEM
   Display scale sits ~20% below the first build: still editorial, more
   controlled. Hero is additionally capped by viewport height.
   ========================================================================== */

.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.d-hero { font-size: clamp(2rem, min(6.4vw, 10.6vh), 6.5rem); line-height: 0.9; }
.d-1    { font-size: clamp(1.65rem, 4.25vw, 4.1rem); }
/* looser than the rest: these headings wrap, and Portuguese accents need
   room between the lines */
.d-2    { font-size: clamp(1.3rem, 2.8vw, 2.55rem); line-height: 0.99; }
.d-3    { font-size: clamp(1.02rem, 1.55vw, 1.48rem); line-height: 1.06; }

.neon { color: var(--neon); }
.em-neon { font-style: normal; color: var(--neon); }

.eyebrow {
  font-size: clamp(9.5px, 0.7vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-38);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--neon);
  flex: none;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow .idx { color: var(--neon); }

.lede {
  font-size: clamp(1rem, 1.28vw, 1.28rem);
  line-height: 1.52;
  letter-spacing: -0.015em;
  color: var(--ink-70);
  font-weight: 300;
  max-width: 36ch;
}

.body-sm {
  font-size: clamp(13.5px, 0.9vw, 14.5px);
  line-height: 1.68;
  color: var(--ink-52);
  max-width: 48ch;
}

.mono {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-38);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  scroll-margin-top: var(--hdr-h);
}
.section--line { border-top: 1px solid var(--line); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 92px);
}
.section-head .eyebrow { margin-bottom: clamp(18px, 2.4vw, 30px); }
.section-head__aside { padding-bottom: 0.5em; }

@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .section-head__aside { padding-bottom: 0; }
}

/* ==========================================================================
   MOTION PRIMITIVES
   Every hidden start state is gated on .js-anim, which JS only grants once it
   can guarantee the matching reveal. Without it the page is simply visible
   and static — never blank.
   ========================================================================== */

.js-anim .reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js-anim .reveal.in { opacity: 1; transform: none; }

.lines { display: block; }
/* The reveal mask clips at the padding box, so the line needs headroom or
   uppercase diacritics (Ê, Ó, Ã, É) lose their accents. The negative margin
   cancels the padding again, keeping the optical rhythm unchanged. */
.lines .ln {
  display: block;
  overflow: hidden;
  padding-top: 0.17em;
  margin-top: -0.17em;
  padding-bottom: 0.07em;
}
.js-anim .lines .ln > span {
  display: block;
  transform: translate3d(0, 130%, 0);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: transform;
}
.js-anim .lines.in .ln > span { transform: none; }

.rule-draw { height: 1px; background: var(--line-strong); transform-origin: left; }
.js-anim .rule-draw {
  transform: scaleX(0);
  transition: transform 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.js-anim .rule-draw.in { transform: scaleX(1); }

.js-anim .draw {
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
  transition: stroke-dashoffset 2.2s var(--ease-io);
  transition-delay: var(--d, 0s);
}
.js-anim .draw.in { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .lines .ln > span, .rule-draw, .draw {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   LOGO WATERMARK
   An architectural element, not a logo showcase: an oversized ACLY mark set
   low in the stack, drifting slowly against the scroll.
   ========================================================================== */

.wm {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.wm__mark {
  position: absolute;
  left: var(--wm-x, 50%);
  top: var(--wm-y, 50%);
  width: var(--wm-size, 46%);
  aspect-ratio: 1 / 1;
  opacity: var(--wm-op, 0.035);
  filter: blur(var(--wm-blur, 0px));
  transform:
    translate(-50%, calc(-50% + var(--wm-shift, 0px)))
    scale(var(--wm-scale, 1))
    rotate(var(--wm-rot, 0deg));
  will-change: transform;
  color: var(--off-white);
}
.wm__mark.is-neon { color: var(--neon); }
.wm__mark svg { width: 100%; height: 100%; }

/* the watermark fades in once, slowly — it should register subconsciously */
.js-anim .wm__mark { opacity: 0; transition: opacity 2.4s var(--ease); }
.js-anim .wm__mark.in { opacity: var(--wm-op, 0.035); }

/* everything that must sit above a watermark */
.above { position: relative; z-index: 1; }

/* ==========================================================================
   ACLY SEAL — the mark as a printed element, on the line between sections.
   Visible brand presence without a logo showcase.
   ========================================================================== */

/* the ACLY seal sitting on the line between two sections */
.seal-band { padding-block: clamp(30px, 4vw, 52px); }

.seal {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
}
.seal::before, .seal::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.seal__mark {
  flex: none;
  width: clamp(58px, 6vw, 84px);
  height: clamp(58px, 6vw, 84px);
  border-radius: 50%;
  opacity: 0.92;
  transform: rotate(var(--seal-rot, 0deg));
  transition: opacity 0.5s var(--ease);
}
.seal__t {
  flex: none;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-22);
  white-space: nowrap;
}
@media (max-width: 620px) { .seal__t { display: none; } }

/* ==========================================================================
   CLIENT MARK
   The supplied files are dark artwork on solid white. Rather than fight that
   at runtime — inverting a white ground and blending the black away depends on
   every ancestor staying dark, opaque and non-isolating, which is far too easy
   to break — the marks ship pre-made: off-white ink on a transparent ground,
   cropped to the artwork. Nothing here depends on what is behind it.

   Regenerate from the originals with acly-bbd-arquivo/knockout.ps1.
   ========================================================================== */

.logoplate { display: block; }
.logoplate img {
  height: var(--lp-h, 80px);
  width: auto;
  max-width: 100%;
  opacity: 0.8;
  transition: opacity 0.5s var(--ease);
}
a:hover .logoplate img,
a:focus-visible .logoplate img { opacity: 1; }

/* ==========================================================================
   CURSOR — desktop, fine pointer only
   ========================================================================== */

.cursor { position: fixed; top: 0; left: 0; z-index: 950; pointer-events: none; display: none; }
.cursor__ring {
  position: absolute;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 1px solid var(--neon-line);
  border-radius: 50%;
  transition: width 0.34s var(--ease), height 0.34s var(--ease),
              margin 0.34s var(--ease), border-color 0.34s var(--ease),
              background-color 0.34s var(--ease);
}
.cursor__dot {
  position: absolute;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--neon);
  border-radius: 50%;
}
.cursor.is-hot .cursor__ring {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-color: var(--neon);
  background: rgba(217, 254, 0, 0.06);
}
@media (pointer: fine) and (min-width: 1025px) { .cursor { display: block; } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none !important; } }

/* ==========================================================================
   BUTTONS + LINKS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn__t {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  transition: transform 0.35s var(--ease);
}
.btn__arrow { transition: transform 0.45s var(--ease); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(5px); }

.btn--primary { background: var(--neon); color: #050505; }
.btn--primary::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--off-white);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.6s var(--ease);
}
.btn--primary:hover::before, .btn--primary:focus-visible::before { transform: none; }

.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--neon);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.6s var(--ease);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: #050505; border-color: var(--neon); }
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { transform: none; }

.btn--lg { padding: 20px 36px; font-size: 12px; }

/* discreet outbound link — never visually dominant */
.olink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-38);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.olink:hover, .olink:focus-visible { color: var(--neon); border-bottom-color: var(--neon-line); }

.tlink { position: relative; display: inline-block; padding-bottom: 3px; }
.tlink::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--neon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.hdr.is-stuck {
  background: rgba(8, 9, 9, 0.74);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 30px);
  height: var(--hdr-h);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__badge {
  width: clamp(34px, 2.9vw, 42px);
  height: clamp(34px, 2.9vw, 42px);
  border-radius: 50%;
  flex: none;
  transition: transform 0.7s var(--ease);
}
.brand:hover .brand__badge { transform: rotate(28deg); }
.brand__wm { display: flex; flex-direction: column; line-height: 1; }
.brand__wm b {
  font-family: var(--display);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.brand__wm i {
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-38);
  margin-top: 4px;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.nav a {
  position: relative;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-52);
  padding-block: 6px;
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--neon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav a:hover, .nav a:focus-visible, .nav a.is-active { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a.is-active::after { transform: scaleX(1); }

.hdr__end { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); flex: none; }
.hdr__end .btn { padding: 12px 20px; font-size: 10px; }

/* ---- language selector: always visible, never a dropdown ---- */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang__b {
  position: relative;
  padding: 5px 6px;
  color: var(--ink-38);
  transition: color 0.32s var(--ease);
  text-transform: uppercase;
}
.lang__b::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 1px;
  width: 0; height: 1px;
  background: var(--neon);
  transform: translateX(-50%);
  transition: width 0.4s var(--ease);
}
.lang__b:hover { color: var(--ink-70); }
.lang__b[aria-current="true"] { color: var(--neon); }
.lang__b[aria-current="true"]::after { width: calc(100% - 12px); }
.lang__sep { color: var(--ink-22); font-size: 9px; }

/* the switch itself gets a brief, quiet acknowledgement */
@keyframes langPulse {
  0%   { opacity: 1; }
  35%  { opacity: 0.35; }
  100% { opacity: 1; }
}
[data-i18n].is-swapping { animation: langPulse 0.5s var(--ease); }

.burger { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; }
.burger span {
  position: absolute;
  left: 11px;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.5s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav, .hdr__end .btn, .hdr__end .lang { display: none; }
  .burger { display: block; }
}

/* ---- mobile overlay menu ---- */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 790;
  background: var(--bg);
  padding: calc(var(--hdr-h) + 34px) var(--pad) 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease);
  overflow-y: auto;
}
body.menu-open .mmenu { clip-path: inset(0 0 0 0); }
.mmenu__nav { display: flex; flex-direction: column; gap: 2px; }
.mmenu__nav a {
  font-family: var(--display);
  font-size: clamp(1.6rem, 7vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--ink);
  padding-block: 5px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s;
}
body.menu-open .mmenu__nav a { opacity: 1; transform: none; }
.mmenu__nav a:nth-child(1) { transition-delay: 0.14s; }
.mmenu__nav a:nth-child(2) { transition-delay: 0.20s; }
.mmenu__nav a:nth-child(3) { transition-delay: 0.26s; }
.mmenu__nav a:nth-child(4) { transition-delay: 0.32s; }
.mmenu__nav a:nth-child(5) { transition-delay: 0.38s; }
.mmenu__nav a:active { color: var(--neon); }

.mmenu__foot { display: flex; flex-direction: column; gap: 22px; }
.mmenu__lang { display: flex; flex-direction: column; gap: 12px; }
.mmenu__lang .lang { font-size: 15px; letter-spacing: 0.14em; gap: 6px; }
.mmenu__lang .lang__b { padding: 6px 4px; }
.mmenu__foot .btn { align-self: flex-start; }
.mmenu__meta { padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 1101px) { .mmenu { display: none; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ftr { position: relative; border-top: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
  gap: clamp(32px, 5vw, 76px);
  padding-block: clamp(48px, 6.5vw, 88px);
}
.ftr__brand { display: flex; flex-direction: column; gap: 18px; }
.ftr__badge { width: clamp(58px, 5.4vw, 78px); aspect-ratio: 1 / 1; height: auto; border-radius: 50%; }
.ftr__tag {
  font-family: var(--display);
  font-size: clamp(1rem, 1.55vw, 1.34rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 22ch;
}
.ftr h5 {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-38);
  margin-bottom: 18px;
}
.ftr__list { display: flex; flex-direction: column; gap: 11px; }
.ftr__list a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-52);
  transition: color 0.35s var(--ease);
  width: fit-content;
}
.ftr__list a:hover { color: var(--neon); }
.ftr__mail {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-70);
  width: fit-content;
}
.ftr__mail:hover { color: var(--neon); }

.ftr__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) {
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   SHARED PIECES
   ========================================================================== */

/* marquee strip — a solid neon band, so it reads as a rule across the page
   rather than another dark row. Ink and bullets go black, same as any other
   on-neon surface (.btn--primary, .chip--neon). */
.strip { background: var(--neon); overflow: hidden; padding-block: 16px; }
.strip__track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
.strip__set { display: flex; flex: none; }
.strip__set span {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 38px);
  padding-inline: clamp(10px, 1.4vw, 19px);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #050505;
  white-space: nowrap;
}
.strip__set span::after {
  content: "";
  width: 4px; height: 4px;
  background: #050505;
  border-radius: 50%;
  opacity: 0.62;
}

/* tag row */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-52);
  padding: 8px 14px;
  border: 1px solid var(--line);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.tag:hover { color: var(--neon); border-color: var(--neon-line); background: var(--neon-wash); }

/* stat row */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat { background: var(--bg); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 8px; }
.stat__v {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}
.stat__l { font-size: 11.5px; line-height: 1.45; color: var(--ink-52); }
.section--surface .stat { background: var(--surface); }

/* ==========================================================================
   INTRO — the mark builds itself, then the page arrives
   Plays once per browser session (sessionStorage), never under
   prefers-reduced-motion, and is skippable with a click or a key. The page
   underneath is fully rendered the whole time; this only covers it.
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: grid;
  place-items: center;
  clip-path: inset(0 0 0 0);
  cursor: pointer;
}
html.is-loading, html.is-loading body { overflow: hidden; }

/* the same scanline texture the hero uses, so the cut feels continuous */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(242,243,238,0.03) 0 1px, transparent 1px 5px);
  opacity: 0.6;
  mask-image: radial-gradient(58% 58% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000, transparent 78%);
}
.intro__glow {
  position: absolute;
  width: min(78vw, 720px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(217, 254, 0, 0.09) 0%, transparent 62%);
  opacity: 0;
  animation: introGlow 1.6s var(--ease) 0.5s forwards;
}
@keyframes introGlow { to { opacity: 1; } }

.intro__mark { position: relative; width: min(52vw, 264px); aspect-ratio: 1 / 1; }
.intro__mark svg { width: 100%; height: 100%; overflow: visible; }

/* 1 — the neon band draws itself clockwise from twelve o'clock */
.intro__band {
  stroke-dasharray: 553;
  stroke-dashoffset: 553;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  animation: introDraw 1.05s var(--ease) 0.1s forwards;
}
/* 2 — two hairlines close in on it from opposite directions */
.intro__ring {
  stroke-dasharray: var(--l);
  stroke-dashoffset: var(--l);
  transform-origin: 100px 100px;
  animation: introDraw 1.15s var(--ease) var(--d) forwards;
}
.intro__ring--o { --l: 622; --d: 0.34s; transform: rotate(-90deg); }
.intro__ring--i { --l: 478; --d: 0.48s; transform: rotate(90deg); }
@keyframes introDraw { to { stroke-dashoffset: 0; } }

/* 3 — the circular legend settles onto the band */
.intro__arc {
  opacity: 0;
  transform-origin: 100px 100px;
  animation: introArc 1.15s var(--ease) 0.86s forwards;
}
@keyframes introArc {
  from { opacity: 0; transform: rotate(-15deg); }
  to   { opacity: 1; transform: none; }
}

/* 4 — the wordmark rises out of a mask */
.intro__word {
  transform: translateY(56px);
  animation: introWord 1.05s var(--ease) 1.04s forwards;
}
@keyframes introWord { to { transform: none; } }

.intro__tag {
  position: absolute;
  top: clamp(28px, 7vh, 68px);
  left: 50%;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-38);
  opacity: 0;
  transform: translateX(-50%);
  animation: introTag 1.3s var(--ease) 1.2s forwards;
}
@keyframes introTag {
  from { opacity: 0; letter-spacing: 0.7em; }
  to   { opacity: 1; letter-spacing: 0.34em; }
}

.intro__bar {
  position: absolute;
  left: 50%;
  bottom: clamp(56px, 10vh, 104px);
  transform: translateX(-50%);
  width: min(46vw, 200px);
  height: 1px;
  background: rgba(242, 243, 238, 0.12);
  overflow: hidden;
}
.intro__bar i {
  display: block;
  height: 100%;
  background: var(--neon);
  transform: scaleX(0);
  transform-origin: left;
  animation: introBar 1.95s cubic-bezier(0.42, 0, 0.2, 1) 0.05s forwards;
}
@keyframes introBar { to { transform: none; } }

.intro__pct {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 6.4vh, 70px);
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink-22);
  font-variant-numeric: tabular-nums;
}

/* 5 — the mark lifts away and the page is wiped in from the bottom up */
.intro.is-out { animation: introOut 0.92s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes introOut { to { clip-path: inset(0 0 100% 0); } }
.intro.is-out .intro__mark { animation: introMarkOut 0.8s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes introMarkOut { to { transform: scale(1.14); opacity: 0; } }
.intro.is-out .intro__tag,
.intro.is-out .intro__bar,
.intro.is-out .intro__pct,
.intro.is-out .intro__glow { opacity: 0; transition: opacity 0.32s linear; }

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

/* ==========================================================================
   MOBILE DENSITY
   The desktop rhythm is built on viewport height, which on a phone turns into
   long empty runs between sections. Below 760px the vertical scale is driven
   by fixed values instead, and the measures stop reserving width they cannot
   use. Nothing here changes the desktop layout.
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --section-y: 58px;
    --pad: 20px;
    --dur: 0.75s;
  }

  .section-head { margin-bottom: 26px; gap: 16px; }
  .section-head .eyebrow { margin-bottom: 14px; }

  /* a 36ch / 48ch measure on a 320px column just leaves a ragged right edge */
  .lede, .body-sm, .step__c, .pillar__c, .quote, .ftr__tag { max-width: none; }

  .lede { font-size: 1rem; line-height: 1.5; }

  .seal { gap: 14px; }
  .seal__mark { width: 46px; height: 46px; }
  .seal-band { padding-block: 24px; }

  .strip { padding-block: 12px; }

  .ftr__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-block: 44px 34px; }
  .ftr h5 { margin-bottom: 13px; }
  .ftr__list { gap: 9px; }
  .ftr__brand { gap: 14px; }
  .ftr__bot { padding-block: 18px; gap: 6px 18px; }

  .btn { padding: 14px 22px; }
  .btn--lg { padding: 17px 28px; font-size: 11px; }
}