/* ==========================================================================
   NEO APPLET INFORMATION TECHNOLOGIES — Design System v3
   "Building services sheet": warm architectural neutrals, obsidian
   technical sections, satin-brass hierarchy, and a very restrained cyan
   signal. Fraunces (display) / Inter (body + UI) / Space Mono (technical
   metadata). One shared file — page files only add page-specific layout.

   1  Tokens            5  Buttons & links      9  Section rhythm
   2  Base              6  Header & menu       10  CTA band
   3  Layout            7  Hero system         11  Footer
   4  Type & labels     8  Trust rail          12  Motion
   ========================================================================== */

/* -------------------------------------------------------------- 1 TOKENS */
:root{
  /* Materials */
  --bone:#F4F1EA; --bone-2:#ECE7DB; --paper:#FAF8F3;
  --obsidian:#0B0C0E; --graphite:#14161A; --graphite-2:#1C1F24;
  --brass:#A9834B; --brass-strong:#C6A363; --brass-ink:#6B5430;
  --cyan:#17ABE0;                       /* signal only — status dots, one process node */

  /* Semantic (light surface — the default) */
  --bg:var(--bone); --bg-alt:var(--bone-2); --surface:var(--paper);
  --ink:#16171A; --ink-soft:#4A4B4F; --ink-faint:#6B6963;
  --line:rgba(22,20,14,.14); --line-strong:rgba(22,20,14,.28);
  --accent-text:var(--brass-ink);       /* brass that is legible as text on the current surface */

  /* Type */
  --font-display:'Fraunces','Iowan Old Style','Georgia',serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --t-hero:clamp(2.5rem, 1rem + 3.7vw + .5svh, 4.6rem);
  --t-h2:clamp(1.95rem, 1.05rem + 2.5vw, 3.4rem);
  --t-h3:clamp(1.3rem, 1.05rem + .9vw, 1.85rem);
  --t-lede:clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-mono:.72rem;

  /* Spacing tokens — small 16–24 · content 32–48 · major 64–96 · section 72–128 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gap-sm:clamp(16px, 1.8vw, 24px);
  --gap-md:clamp(32px, 3.4vw, 48px);
  --gap-lg:clamp(48px, 6vw, 96px);
  --sec-y:clamp(72px, 8.6vw, 128px);
  --sec-y-sm:clamp(56px, 6vw, 88px);
  --gutter:clamp(20px, 4.4vw, 48px);
  --container:1320px;
  --header-h:80px;

  /* Surfaces */
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:160ms; --dur:320ms; --dur-slow:720ms;
}
@media (max-width:640px){ :root{ --header-h:68px; } }

/* Any surface that is dark in the art direction: flips the semantic tokens
   so every component (buttons, rules, lists) works without overrides. */
.on-dark{
  --bg:var(--obsidian); --bg-alt:var(--graphite); --surface:var(--graphite);
  --ink:#F3F0E8; --ink-soft:rgba(243,240,232,.78); --ink-faint:rgba(243,240,232,.56);
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.26);
  --accent-text:var(--brass-strong);
  background:var(--bg); color:var(--ink);
}

/* --------------------------------------------------------------- 2 BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p,dl,dd,figure,address{ margin:0; }
address{ font-style:normal; }
button{ font-family:inherit; background:none; border:0; padding:0; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.06; margin:0; letter-spacing:-.01em; }
h1,h2{ text-transform:uppercase; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }
.on-dark :focus-visible, .hero :focus-visible{ outline-color:var(--brass-strong); }
::selection{ background:var(--brass); color:#0B0C0E; }
[hidden]{ display:none !important; }

.skip-link{ position:absolute; top:0; left:0; z-index:2000; padding:12px 20px; background:var(--brass-strong); color:#0B0C0E; font-weight:600; transform:translateY(-120%); }
.skip-link:focus{ transform:none; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ------------------------------------------------------------ 3 LAYOUT */
.container{ width:min(100% - 2*var(--gutter), var(--container)); margin-inline:auto; }
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--tight{ padding-block:var(--sec-y-sm); }
.sec--alt{ background:var(--bg-alt); }
.sec--dark{ /* pair with .on-dark */ }
.sec-head{ max-width:46rem; margin-bottom:var(--gap-md); }
.sec-head > * + *{ margin-top:var(--s-4); }
.sec-head--split{ max-width:none; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--gap-md); align-items:end; }
.sec-head--split > * + *{ margin-top:0; }
@media (max-width:860px){ .sec-head--split{ grid-template-columns:1fr; align-items:start; } .sec-head--split > * + *{ margin-top:var(--s-4); } }
.split{ display:grid; gap:var(--gap-lg); align-items:center; }
.split > *{ min-width:0; }

/* Media frame — architectural edge, no radius, hairline inset */
.media{ position:relative; overflow:hidden; background:var(--graphite); }
.media > img, .media > video{ width:100%; height:100%; object-fit:cover; }
.media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); pointer-events:none; }
.ticks{ position:relative; }
.ticks::before, .ticks::after{ content:""; position:absolute; z-index:2; width:16px; height:16px; border:0 solid var(--brass-strong); pointer-events:none; opacity:.85; }
.ticks::before{ top:12px; left:12px; border-width:1px 0 0 1px; }
.ticks::after{ bottom:12px; right:12px; border-width:0 1px 1px 0; }
.cap{ font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:var(--s-3); }

/* ------------------------------------------------------ 4 TYPE & LABELS */
.lede{ font-size:var(--t-lede); line-height:1.6; color:var(--ink-soft); max-width:58ch; }
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-style:italic; font-weight:420; font-size:1.02rem;
  color:var(--accent-text);
}
.kicker::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.7; }
.hl{ font-style:italic; font-weight:420; color:var(--accent-text); }
.mono{ font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.08em; text-transform:uppercase; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.sig{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cyan); margin-right:8px; vertical-align:middle; }

/* Spec list — technical key / value rows (mono key, plain value) */
.spec{ border-top:1px solid var(--line); }
.spec > div{ display:grid; grid-template-columns:minmax(96px,.36fr) 1fr; gap:var(--s-4); padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.spec dt{ font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.spec dd{ font-size:.97rem; font-weight:500; color:var(--ink); }
@media (max-width:520px){ .spec > div{ grid-template-columns:1fr; gap:2px; } }

/* --------------------------------------------------- 5 BUTTONS & LINKS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 26px; border:1px solid transparent; border-radius:var(--r);
  font:600 12.5px/1 var(--font-body); letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -12px rgba(8,10,8,.75), 0 0 0 1px rgba(255,255,255,.04); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn .arr{ width:14px; height:14px; flex-shrink:0; transition:transform var(--dur) var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--primary{ background:var(--ink); color:var(--bg); border-color:color-mix(in srgb, var(--brass) 45%, transparent); }
.btn--primary:hover{ background:var(--brass-ink); border-color:var(--brass-ink); color:#fff; }
.on-dark .btn--primary:hover{ background:var(--brass-strong); border-color:var(--brass-strong); color:#0B0C0E; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--brass); color:var(--accent-text); }
.on-dark .btn--ghost:hover{ border-color:var(--brass-strong); }
.btn--wa{ background:#1E9E4E; color:#fff; }
.btn--wa:hover{ background:#25B35B; }
.btn--sm{ min-height:40px; padding:0 18px; font-size:11.5px; }
.btn--block{ width:100%; }

.link{
  display:inline-flex; align-items:center; gap:10px; padding-bottom:5px;
  font:600 12.5px/1 var(--font-body); letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-text); border-bottom:1px solid color-mix(in srgb, var(--brass) 50%, transparent);
  transition:border-color var(--dur-fast) var(--ease);
}
.link:hover{ border-bottom-color:var(--brass); }
.link svg{ width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.link:hover svg{ transform:translateX(4px); }

/* -------------------------------------------------- 6 HEADER & MENU */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:500; height:var(--header-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
  color:#fff;
}
.header-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-5); }
.brand{ display:flex; align-items:center; gap:12px; justify-self:start; min-width:0; }
.brand img{ height:40px; width:auto; }
.brand-word{ display:flex; flex-direction:column; line-height:1.12; }
.brand-word b{ font-family:var(--font-display); font-weight:560; font-size:1.12rem; letter-spacing:0; }
.brand-word i{ font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.main-nav{ display:flex; gap:var(--s-6); }
.main-nav a{ position:relative; padding:8px 0; font-size:14.5px; font-weight:500; opacity:.82; transition:opacity var(--dur-fast) var(--ease); }
.main-nav a:hover, .main-nav a[aria-current="page"]{ opacity:1; }
.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brass-strong); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.main-nav a[aria-current="page"]::after, .main-nav a:hover::after{ transform:scaleX(1); }
.header-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--s-4); }
.header-actions .btn--primary{ background:#F3F0E8; color:#0B0C0E; border-color:color-mix(in srgb, var(--brass-strong) 55%, transparent); }
.header-actions .btn--primary:hover{ background:var(--brass-strong); border-color:var(--brass-strong); color:#0B0C0E; }
.menu-btn{ display:none; align-items:center; gap:10px; min-height:44px; padding:0 4px; font:600 12px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; }
.menu-btn svg{ width:22px; height:22px; }
/* Scrolled: solid bone bar, ink text */
.site-header.is-scrolled{
  background:color-mix(in srgb, var(--bone) 92%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line); color:var(--ink);
}
.site-header.is-scrolled .main-nav a::after{ background:var(--brass); }
.site-header.is-scrolled .header-actions .btn--primary{ background:var(--ink); color:var(--bone); border-color:color-mix(in srgb, var(--brass) 45%, transparent); }
.site-header.is-scrolled .header-actions .btn--primary:hover{ background:var(--brass-ink); border-color:var(--brass-ink); color:#fff; }
@media (max-width:1040px){
  .main-nav{ display:none; }
  .header-inner{ grid-template-columns:1fr auto; }
  .menu-btn{ display:inline-flex; }
}
@media (max-width:520px){
  .header-actions .btn--primary{ display:none; }
  .brand-word i{ display:none; }
  .brand img{ height:34px; }
}

.menu{
  position:fixed; inset:0; z-index:900; display:flex; flex-direction:column;
  padding:0 var(--gutter) var(--s-6);
  transform:translateY(-100%); visibility:hidden;
  transition:transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  overflow-y:auto;
}
.menu.is-open{ transform:none; visibility:visible; transition:transform var(--dur-slow) var(--ease); }
.menu-head{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); flex-shrink:0; }
.menu-nav{ margin-top:var(--s-5); }
.menu-nav a{ display:flex; align-items:baseline; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:clamp(2rem, 9vw, 2.6rem); font-weight:500; line-height:1.1; }
.menu-nav a span{ font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.1em; color:var(--accent-text); }
.menu-nav a[aria-current="page"]{ color:var(--brass-strong); }
.menu-foot{ margin-top:auto; padding-top:var(--s-6); display:grid; gap:var(--s-5); }
.menu-contact{ display:grid; gap:6px; font-size:.95rem; color:var(--ink-soft); }
.menu-contact a{ color:var(--ink); font-weight:500; }
.menu-actions{ display:grid; gap:var(--s-3); }
html.menu-open{ overflow:hidden; }

/* ------------------------------------------------------ 7 HERO SYSTEM
   One component for all five pages. Variants only swap the media:
   .hero--filmstrip (Home) · .hero--video (About, Contact) · .hero--image (Services, Projects).
   Height, type scale, kicker, headline structure, CTA, scrim, spec strip
   and entrance timing are shared. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(640px, 100svh, 960px);
  display:flex; flex-direction:column; color:var(--ink);
}
.hero__media{ position:absolute; inset:0; z-index:-2; background:#0A0A0B; direction:ltr; }
.hero__media > img, .hero__media > video{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos, 50% 50%); }
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 80% at 18% 48%, rgba(6,6,7,.46), rgba(6,6,7,0) 70%),
    linear-gradient(180deg, rgba(6,6,7,.62) 0%, rgba(6,6,7,.16) 26%, rgba(6,6,7,.42) 60%, rgba(6,6,7,.94) 100%),
    linear-gradient(90deg, rgba(6,6,7,.6) 0%, rgba(6,6,7,.08) 46%, rgba(6,6,7,.32) 100%);
}
.hero__body{ flex:1; display:flex; align-items:center; padding-top:calc(var(--header-h) + var(--s-6)); padding-bottom:var(--gap-md); }
.hero__grid{ width:100%; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-md); align-items:center; }
.hero__copy{ position:relative; max-width:56rem; padding-left:20px; }
.hero__copy::before{ content:""; position:absolute; left:0; top:6px; width:13px; height:13px; border:1px solid var(--brass-strong); border-width:1px 0 0 1px; opacity:.65; }
.hero .kicker{ color:#E7D6AE; margin-bottom:var(--s-4); }
.hero__title{ font-size:var(--t-hero); line-height:.99; letter-spacing:-.015em; font-weight:500; color:#FBF9F4; }
.hero__title .ln{ display:block; }
.hero__title .hl{ color:var(--brass-strong); }
.hero__lede{ margin-top:var(--s-5); max-width:60ch; font-size:clamp(1rem, .95rem + .3vw, 1.15rem); color:rgba(246,243,236,.84); line-height:1.6; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
@media (max-width:560px){ .hero__copy{ padding-left:0; } .hero__copy::before{ display:none; } .hero__actions .btn{ flex:1 1 100%; } }

/* Spec strip — the technical title-block along the foot of every hero */
.hero__spec{ position:relative; z-index:2; }
.spec-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); border-top:1px solid rgba(255,255,255,.22); }
.spec-strip > div{ padding:18px var(--s-5) 20px; border-left:1px solid rgba(255,255,255,.14); min-width:0; }
.spec-strip > div:first-child{ padding-left:0; border-left:0; }
.spec-strip dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.spec-strip dd{ margin-top:4px; font-family:var(--font-display); font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight:500; color:#FBF9F4; line-height:1.2; }
.spec-strip dd b{ font-weight:560; color:var(--brass-strong); }
@media (max-width:640px){
  .spec-strip{ grid-template-columns:1fr 1fr; }
  .spec-strip > div{ padding:14px var(--s-4) 16px; }
  .spec-strip > div:nth-child(odd){ padding-left:0; border-left:0; }
  .spec-strip > div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); }
  .spec-strip > div:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* Filmstrip (Home) — pure CSS transform loop; second set is aria-hidden */
.filmstrip{ display:flex; height:100%; width:max-content; animation:filmstrip 84s linear infinite; will-change:transform; }
.filmstrip img{
  height:100%; width:auto; max-width:none; flex:0 0 auto; object-fit:cover;
  filter:grayscale(.5) sepia(.15) saturate(1.16) contrast(1.13) brightness(.86);
}
@keyframes filmstrip{ to{ transform:translate3d(-50%,0,0); } }

/* Entrance — media, then kicker → headline → lede → CTA → spec strip */
@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes heroSettle{ from{ transform:scale(1.06); } to{ transform:none; } }
.hero__media{ animation:heroFade 1.1s var(--ease) both; }
.hero--image .hero__media > img{ animation:heroSettle 2.6s var(--ease) both; }
.hero__copy > *{ animation:heroRise .9s var(--ease) both; }
.hero__copy > *:nth-child(1){ animation-delay:.15s; }
.hero__copy > *:nth-child(2){ animation-delay:.32s; }
.hero__copy > *:nth-child(3){ animation-delay:.52s; }
.hero__copy > *:nth-child(4){ animation-delay:.70s; }
.hero__aside{ animation:heroRise .9s var(--ease) .75s both; }
.hero__spec{ animation:heroRise 1s var(--ease) .9s both; }

/* ---------------------------------------------------------- 8 TRUST RAIL */
.rail{ padding-block:var(--s-5); border-bottom:1px solid var(--line); }
.rail__in{ display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap; }
.rail__label{ font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); white-space:nowrap; }
.rail__marks{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-6); flex:1; justify-content:space-between; }
.rail__marks span{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.16em; color:var(--ink-soft); white-space:nowrap; }
@media (max-width:760px){ .rail__marks{ justify-content:flex-start; gap:var(--s-2) var(--s-5); } }

/* ----------------------------------------------------- 9 REGISTER ROWS
   Dense technical rows (thumbnail · reference · description · team).
   Used for project proof on Home and the full register on Projects. */
.reg{ border-top:1px solid var(--line); }
.reg__row{
  display:grid; grid-template-columns:88px 128px minmax(0,1.3fr) minmax(0,1.3fr) 24px; gap:var(--s-5);
  align-items:center; width:100%; padding:14px var(--s-3); text-align:left;
  border-bottom:1px solid var(--line); transition:background var(--dur-fast) var(--ease);
}
.reg__row:hover{ background:color-mix(in srgb, var(--brass) 8%, transparent); }
.reg__thumb{ display:block; width:88px; aspect-ratio:4/3; overflow:hidden; background:var(--graphite); }
.reg__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.reg__row:hover .reg__thumb img{ transform:scale(1.06); }
.reg__code{ font-family:var(--font-mono); font-size:.9rem; letter-spacing:.02em; color:var(--ink); }
.reg__main{ display:flex; flex-direction:column; min-width:0; font-size:.88rem; color:var(--ink-faint); }
.reg__main b{ font-family:var(--font-display); font-weight:500; font-size:1.05rem; color:var(--ink); }
.reg__team{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:.88rem; color:var(--ink-soft); }
.reg__team .mono{ font-size:.62rem; color:var(--ink-faint); }
.reg__go{ width:18px; height:18px; color:var(--accent-text); transition:transform var(--dur) var(--ease); }
.reg__row:hover .reg__go{ transform:translateX(4px); }
@media (max-width:820px){
  .reg__row{ grid-template-columns:72px minmax(0,1fr) 20px; gap:var(--s-4); }
  .reg__thumb{ width:72px; }
  .reg__code{ grid-column:2; grid-row:1; }
  .reg__main{ grid-column:2; grid-row:2; }
  .reg__team{ display:none; }
  .reg__thumb{ grid-row:1 / span 2; }
  .reg__go{ grid-column:3; grid-row:1 / span 2; }
}

/* -------------------------------------------------------- 10 CTA BAND */
.cta{ position:relative; isolation:isolate; overflow:hidden; padding-block:var(--sec-y); }
.cta__bg{ position:absolute; inset:0; z-index:-2; background:var(--obsidian); }
.cta__bg > img, .cta__bg > video{ width:100%; height:100%; object-fit:cover; opacity:.5; filter:grayscale(.3) brightness(.7); }
.cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(6,6,7,.86) 0%, rgba(6,6,7,.5) 55%, rgba(6,6,7,.72) 100%); }
.cta__in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--gap-lg); align-items:end; }
.cta h2{ font-size:clamp(2.1rem, 1.1rem + 3.1vw, 3.9rem); line-height:1.02; }
.cta__copy p{ color:var(--ink-soft); max-width:44ch; font-size:1.05rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
@media (max-width:860px){ .cta__in{ grid-template-columns:1fr; gap:var(--gap-md); align-items:start; } }
@media (max-width:520px){ .cta__actions .btn{ flex:1 1 100%; } }

/* ------------------------------------------------------- 11 FOOTER */
.footer{ padding:var(--gap-lg) 0 var(--s-5); border-top:1px solid var(--line); }
.footer__grid{ display:grid; grid-template-columns:1.4fr .8fr 1.1fr 1.2fr; gap:var(--gap-md); padding-bottom:var(--gap-md); }
.footer__brand img{ display:block; height:76px; width:auto; margin-bottom:var(--s-7); }
.footer__brand p{ color:var(--ink-faint); font-size:.92rem; max-width:32ch; }
.footer h5{ margin:0 0 var(--s-4); font:500 var(--t-mono)/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.footer li{ font-size:.95rem; color:var(--ink-soft); }
.footer li + li{ margin-top:10px; }
.footer a{ transition:color var(--dur-fast) var(--ease); }
.footer a:hover{ color:var(--brass-strong); }
.footer__more{ margin-top:var(--s-4) !important; }
.footer__more a{ color:var(--accent-text); font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.footer__base{ display:flex; justify-content:space-between; gap:var(--s-2) var(--s-5); flex-wrap:wrap; padding-top:var(--s-5); border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-faint); }
.footer__base .mono{ font-size:.7rem; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } .footer__base{ flex-direction:column; } }

.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:400; width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#1E9E4E; color:#fff;
  box-shadow:0 8px 22px -12px rgba(8,10,8,.55); opacity:.9; transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wa-float:hover{ opacity:1; background:#25B35B; }
.wa-float svg{ width:24px; height:24px; }
@media (max-width:560px){ .wa-float{ right:16px; bottom:16px; width:46px; height:46px; } }

.to-top{
  position:fixed; left:50%; bottom:24px; z-index:400; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--bone); border:1px solid color-mix(in srgb, var(--bone) 18%, transparent);
  box-shadow:0 8px 22px -12px rgba(8,10,8,.5);
  opacity:0; pointer-events:none; transform:translate(-50%, 8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.to-top.is-visible{ opacity:.85; pointer-events:auto; transform:translate(-50%, 0); }
.to-top:hover{ opacity:1; background:var(--brass-ink); }
.to-top svg{ width:17px; height:17px; }
@media (max-width:560px){ .to-top{ width:38px; height:38px; bottom:18px; } .to-top svg{ width:16px; height:16px; } }
@media (prefers-reduced-motion: reduce){ .to-top{ transition:opacity var(--dur-fast) linear; } }

/* --------------------------------------------------------- 12 MOTION
   One reveal language: opacity + a small rise, once, slow. Lines draw from
   the left; media settles from a slight scale. Everything is stagger-able
   with --rv-d (set by site.js for siblings entering together). Content is
   only hidden when JS is present (html.js), so no-JS visitors see it all. */
.js [data-rv]{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease) var(--rv-d,0ms), transform .9s var(--ease) var(--rv-d,0ms); }
.js [data-rv].is-in{ opacity:1; transform:none; }
.js [data-rv="fade"]{ transform:none; }
.js [data-rv="img"]{ transform:none; }
.js [data-rv="img"] > img, .js [data-rv="img"] > video{ transform:scale(1.05); transition:transform 1.6s var(--ease) var(--rv-d,0ms); }
.js [data-rv="img"].is-in > img, .js [data-rv="img"].is-in > video{ transform:none; }
.js [data-rv="line"]{ opacity:1; transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease) var(--rv-d,0ms); }
.js [data-rv="line"].is-in{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .filmstrip{ animation:none !important; }
  .js [data-rv], .js [data-rv="img"] > img, .js [data-rv="img"] > video, .js [data-rv="line"]{ opacity:1 !important; transform:none !important; }
}