/* ============================================================
   Nordaragon — nordaragon.com
   Fonts: Inter (OFL), Instrument Serif (OFL), IBM Plex Mono (OFL)
   ============================================================ */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --ink:#07131f;
  --ink-2:#0b1d30;
  --navy:#0f2a47;
  --navy-2:#16395c;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);

  --paper:#f2eee6;
  --paper-2:#fbf8f2;
  --paper-ink:#12222f;

  --orange:#e8703a;
  --orange-soft:#f2946a;
  --teal:#2fa48f;
  --clay:#a3382e;

  --fg:#eaf0f6;
  --fg-dim:rgba(234,240,246,.62);
  --fg-faint:rgba(234,240,246,.38);

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --shell:min(1200px,92vw);
  --r:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;line-height:1.04;letter-spacing:-.02em}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--orange);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* film grain — kills the "flat gradient" look */
body::after{
  content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}

/* ---------- Shared bits ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;
  box-shadow:0 0 0 4px rgba(232,112,58,.16)}
.sec-title{font-family:var(--serif);font-size:clamp(2.3rem,5.4vw,4.1rem);letter-spacing:-.025em}
.sec-title em{font-style:italic;color:var(--orange-soft)}
.sec-lede{margin-top:1.3rem;max-width:56ch;color:var(--fg-dim);font-size:clamp(1rem,.5vw + .88rem,1.14rem)}
.sec-head{margin-bottom:clamp(3rem,6vw,5rem)}
.sec-head--tight{margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.sec-head--light .sec-lede{color:rgba(18,34,47,.66)}
.sec-head--light .eyebrow{color:rgba(18,34,47,.6)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem max(4vw,1.1rem);
  transition:padding .4s var(--ease),background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:.7rem max(4vw,1.1rem);
  background:rgba(7,19,31,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__mark{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:.06em;
}
.nav__glyph{width:22px;height:22px;flex:none;transition:transform .55s var(--ease)}
.nav__glyph .g-line{fill:none;stroke:var(--fg);stroke-width:3.6}
.nav__glyph .g-orange{fill:var(--orange)}
.nav__glyph .g-teal{fill:var(--teal)}
.nav__mark:hover .nav__glyph{transform:rotate(-90deg)}
.nav__links{display:flex;align-items:center;gap:.35rem}
.nav__links a{
  text-decoration:none;font-size:.85rem;color:var(--fg-dim);
  padding:.45rem .75rem;border-radius:99px;transition:color .25s,background .25s;
}
.nav__links a:hover{color:var(--fg);background:rgba(255,255,255,.07)}
.nav__cta{color:var(--fg)!important;border:1px solid var(--line-strong)}
.nav__cta:hover{border-color:var(--orange);background:rgba(232,112,58,.14)!important}
@media(max-width:720px){
  .nav__links a:not(.nav__cta){display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:8rem max(4vw,1.1rem) 6rem;overflow:hidden;isolation:isolate;
}
.hero__canvas{
  position:absolute;top:-8%;left:-6%;width:112%;height:116%;z-index:-2;
  transform:perspective(1200px) rotateX(24deg) scale(1.06);
  transform-origin:50% 88%;opacity:1;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(64% 64% at 19% 54%,rgba(7,19,31,.95) 0%,rgba(7,19,31,.58) 46%,transparent 78%),
    radial-gradient(120% 78% at 50% 108%,rgba(232,112,58,.22) 0%,transparent 62%),
    radial-gradient(90% 60% at 14% 6%,rgba(47,164,143,.14) 0%,transparent 60%),
    linear-gradient(to bottom,rgba(7,19,31,.78) 0%,rgba(7,19,31,.16) 44%,rgba(7,19,31,.55) 84%,var(--ink) 100%);
}
.hero__inner{position:relative;width:var(--shell);margin-inline:auto}
.hero__title{
  font-family:var(--serif);
  font-size:clamp(2.9rem,7.6vw,6.6rem);
  letter-spacing:-.03em;line-height:1.0;max-width:16ch;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > *{display:block}
.hero__title em{font-style:italic;color:var(--orange-soft)}
.hero__lede{margin-top:2rem;max-width:52ch;color:var(--fg-dim);font-size:clamp(1rem,.6vw + .9rem,1.2rem)}
.hero__chips{
  display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.6rem;
}
.hero__chips li{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(234,240,246,.72);
  padding:.5rem .95rem;border-radius:99px;
  border:1px solid var(--line-strong);
  background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.hero__chips li::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--orange);margin-right:.6rem;vertical-align:middle;
}
.hero__scroll{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint);
}
@media(max-width:760px){
  .hero{padding-bottom:8.5rem}
  .hero__scroll{bottom:2.5rem}
}
@media(max-height:720px) and (max-width:760px){.hero__scroll{display:none}}
.hero__rule{width:1px;height:52px;background:linear-gradient(var(--orange),transparent);
  animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{padding:clamp(7rem,16vw,14rem) max(4vw,1.1rem);background:var(--ink)}
.manifesto__wrap{width:var(--shell);margin-inline:auto}
.manifesto__text{
  font-family:var(--serif);font-size:clamp(1.6rem,3.9vw,3.1rem);line-height:1.28;letter-spacing:-.018em;
  max-width:24ch;max-width:min(24ch,100%);
}
.manifesto__text{max-width:min(30ch,100%)}
.manifesto .w{color:rgba(234,240,246,.15);transition:color .35s linear}
.manifesto .w.is-on{color:var(--fg)}
.manifesto .w.em.is-on{color:var(--orange-soft);font-style:italic}

/* ============================================================
   FOCUS — offset card mosaic
   ============================================================ */
.focus{padding:clamp(4rem,9vw,7rem) max(4vw,1.1rem) clamp(6rem,12vw,10rem);
  background:linear-gradient(to bottom,var(--ink),var(--ink-2))}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2vw,1.5rem)}
.card{
  position:relative;grid-column:span 2;padding:2rem 1.7rem 2.2rem;border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  overflow:hidden;transform-style:preserve-3d;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.card:nth-child(1){grid-column:span 3}
.card:nth-child(2){grid-column:span 3;margin-top:clamp(0px,3vw,3rem)}
.card:nth-child(3),.card:nth-child(4),.card:nth-child(5){grid-column:span 2}
.card:nth-child(4){margin-top:clamp(0px,2.4vw,2.4rem)}
.card:nth-child(5){margin-top:clamp(0px,4.8vw,4.8rem)}
.card:hover{border-color:var(--line-strong);box-shadow:0 26px 60px -30px rgba(0,0,0,.85)}
.card__idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--orange);
  display:block;margin-bottom:1.5rem}
.card h3{font-family:var(--serif);font-size:clamp(1.35rem,1.9vw,1.75rem);margin-bottom:.8rem}
.card p{color:var(--fg-dim);font-size:.94rem}
.card__glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(232,112,58,.18),transparent 70%);
}
.card:hover .card__glow{opacity:1}
@media(max-width:900px){
  .cards{grid-template-columns:1fr}
  .card,.card:nth-child(n){grid-column:span 1;margin-top:0}
}

/* ============================================================
   METHOD — light section
   ============================================================ */
.method{
  position:relative;background:var(--paper);color:var(--paper-ink);
  padding:clamp(6rem,12vw,10rem) max(4vw,1.1rem);
  border-radius:clamp(20px,4vw,44px) clamp(20px,4vw,44px) 0 0;
  margin-top:-1px;
}
.method::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(60% 40% at 82% 0%,rgba(232,112,58,.12),transparent 70%);
}
.method .sec-title{color:var(--paper-ink)}
.method .dot{background:var(--clay);box-shadow:0 0 0 4px rgba(163,56,46,.14)}

.formula{
  position:relative;margin:0 0 clamp(3rem,6vw,4.5rem);padding:clamp(1.6rem,3.5vw,2.8rem);
  background:var(--paper-2);border:1px solid rgba(18,34,47,.1);border-radius:var(--r);
  box-shadow:0 30px 60px -44px rgba(18,34,47,.55);
}
.formula__cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(18,34,47,.55);margin-bottom:2rem}
.formula__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(.9rem,2.6vw,2.2rem)}
.frag{display:flex;flex-direction:column;gap:.45rem}
.frag__lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(18,34,47,.5)}
.frag__val{font-family:var(--serif);font-size:clamp(1.9rem,5vw,3.2rem);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.frag--out .frag__val{color:var(--clay)}
.frag--out{padding-left:clamp(.9rem,2.4vw,1.8rem);border-left:2px solid var(--clay)}
.op{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.4rem);color:rgba(18,34,47,.4);
  padding-bottom:.15rem}
.formula__note{margin-top:2rem;font-size:.86rem;color:rgba(18,34,47,.6);max-width:62ch}
[data-step]{opacity:0}
.no-anim [data-step]{opacity:1}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1.5rem,3vw,2.6rem)}
.principles h3{display:flex;align-items:center;gap:.65rem;font-family:var(--sans);font-weight:600;
  font-size:1.02rem;letter-spacing:-.005em;line-height:1.35;margin-bottom:.7rem}
.tick{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--clay);position:relative}
.tick::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--clay)}
.principles p{font-size:.92rem;color:rgba(18,34,47,.68)}

/* ============================================================
   DATA — layered planes + source list
   ============================================================ */
.data{position:relative;background:var(--ink-2);padding:clamp(6rem,12vw,10rem) max(4vw,1.1rem);
  overflow:hidden}
.layers{
  position:absolute;top:8%;right:-8%;width:min(560px,52vw);aspect-ratio:1;pointer-events:none;
  perspective:900px;opacity:.5;
}
.layers__plane{
  position:absolute;inset:0;border:1px solid rgba(47,164,143,.35);border-radius:10px;
  background:linear-gradient(140deg,rgba(47,164,143,.10),transparent 60%);
  transform:rotateX(58deg) rotateZ(42deg) translateZ(calc(var(--i) * 42px));
  animation:float 9s ease-in-out infinite;animation-delay:calc(var(--i) * -1.6s);
}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}

.sources{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sources li{background:var(--ink-2);padding:1.8rem 1.6rem;transition:background .4s}
.sources li:hover{background:#12253b}
.src__tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:1rem}
.sources h3{font-size:1.05rem;font-family:var(--sans);font-weight:600;margin-bottom:.6rem}
.sources p{font-size:.9rem;color:var(--fg-dim);margin-bottom:1.1rem}
.sources a{font-family:var(--mono);font-size:.78rem;color:var(--orange);text-decoration:none;
  border-bottom:1px solid rgba(232,112,58,.35);padding-bottom:2px;transition:border-color .3s}
.sources a span{margin-left:.35rem}
.sources a:hover{border-bottom-color:var(--orange)}
@media(max-width:1000px){.sources{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sources{grid-template-columns:1fr}}
.data__foot{position:relative;margin-top:2.4rem;max-width:70ch;font-size:.9rem;color:var(--fg-faint)}

/* ============================================================
   SNAPSHOT
   ============================================================ */
.snap{position:relative;background:var(--ink);padding:clamp(5rem,11vw,9rem) max(4vw,1.1rem);
  border-top:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.6rem,4vw,3.4rem);margin-bottom:2.6rem}
.stat{padding-top:1.4rem;border-top:1px solid var(--line-strong)}
.stat__val{display:flex;align-items:baseline;font-family:var(--serif);
  font-size:clamp(2.6rem,6.2vw,4.4rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:#fff}
.stat__u{color:var(--orange);font-size:.62em;margin-left:.08em}
.stat__u--pre{margin:0 .12em 0 0}
.stat__lbl{display:block;margin-top:1rem;font-size:.88rem;color:var(--fg-dim);max-width:32ch}
.snap__src{font-size:.86rem;color:var(--fg-faint);max-width:74ch;line-height:1.75}
.snap__src strong{color:var(--fg-dim);font-weight:500}
.snap__src a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(232,112,58,.35)}
.snap__src a span{margin-left:.3rem}

/* ============================================================
   ONEMILLION NL
   ============================================================ */
.om{background:linear-gradient(to bottom,var(--ink),#0d2036 60%,var(--ink));
  padding:clamp(6rem,12vw,10rem) max(4vw,1.1rem);overflow:hidden}
.om__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.om__caveat{margin-top:1.4rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;
  color:var(--teal)}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:2.2rem;
  padding:.85rem 1.5rem;border-radius:99px;text-decoration:none;font-size:.9rem;font-weight:500;
  background:var(--orange);color:#1a0d05;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
  box-shadow:0 14px 34px -16px rgba(232,112,58,.7);
}
.btn:hover{transform:translateY(-2px);background:var(--orange-soft);
  box-shadow:0 20px 44px -16px rgba(232,112,58,.85)}
.om__art{display:grid;place-items:center;min-height:260px}

/* ---- progress loader (the quiet one) ---- */
.loader{position:relative;width:min(320px,66vw);aspect-ratio:1;display:grid;place-items:center}
.loader__halo{
  position:absolute;inset:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,112,58,.16),transparent 72%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}

.loader__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transform:rotate(-90deg)}
.loader__track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:2}
.loader__arc{
  fill:none;stroke:url(#arcGrad);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:527.79;stroke-dashoffset:527.79;   /* 2πr, r = 84 */
  filter:drop-shadow(0 0 6px rgba(232,112,58,.55));
}
.loader__tip{fill:var(--orange);opacity:0;
  filter:drop-shadow(0 0 7px rgba(232,112,58,.9))}
.no-anim .loader__tip{opacity:1}

.loader__core{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.loader__target{
  font-family:var(--serif);font-size:clamp(2rem,5.2vw,3rem);line-height:1;
  letter-spacing:-.02em;color:rgba(234,240,246,.62);
}
.loader__state{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(234,240,246,.3);display:inline-flex;align-items:center;
}
.loader__state i{
  width:3px;height:3px;border-radius:50%;background:currentColor;
  margin-left:4px;animation:blip 1.5s ease-in-out infinite;
}
.loader__state i:nth-child(1){margin-left:8px}
.loader__state i:nth-child(2){animation-delay:.22s}
.loader__state i:nth-child(3){animation-delay:.44s}
@keyframes blip{0%,70%,100%{opacity:.18}35%{opacity:1}}
@media(max-width:860px){.om__grid{grid-template-columns:1fr}.om__art{order:-1}}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:var(--paper);color:var(--paper-ink);
  padding:clamp(6rem,12vw,10rem) max(4vw,1.1rem);
  border-radius:clamp(20px,4vw,44px) clamp(20px,4vw,44px) 0 0;
}
.contact{position:relative;overflow:hidden}
.contact::after{
  content:"";position:absolute;top:12%;right:-6%;width:min(420px,38vw);aspect-ratio:1;
  pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(18,34,47,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(18,34,47,.16) 1px,transparent 1px);
  background-size:56px 56px,56px 56px;
  transform:perspective(700px) rotateX(56deg) rotateZ(40deg);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);
  mask-image:radial-gradient(closest-side,#000,transparent);
}
@media(max-width:860px){.contact::after{display:none}}
.contact .dot{background:var(--clay);box-shadow:0 0 0 4px rgba(163,56,46,.14)}
.contact .eyebrow{color:rgba(18,34,47,.6)}
.contact__title{font-family:var(--serif);font-size:clamp(2.4rem,6.4vw,5rem);letter-spacing:-.03em}
.contact__title em{font-style:italic;color:var(--clay)}
.contact__lede{margin-top:1.6rem;max-width:58ch;color:rgba(18,34,47,.7);
  font-size:clamp(1rem,.5vw + .9rem,1.14rem)}
.mail{
  display:inline-block;margin-top:2.6rem;font-family:var(--serif);
  font-size:clamp(1.5rem,4.2vw,2.6rem);text-decoration:none;letter-spacing:-.02em;
  background-image:linear-gradient(var(--clay),var(--clay));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease),color .3s;
}
.mail:hover{color:var(--clay);background-size:0% 1px}
.contact__meta{margin-top:1.6rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;
  color:rgba(18,34,47,.5)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);padding:clamp(3.5rem,7vw,5.5rem) max(4vw,1.1rem) 3rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
.foot__mark{font-family:var(--mono);font-weight:500;letter-spacing:.08em;font-size:.95rem}
.foot__note{margin-top:.5rem;font-size:.85rem;color:var(--fg-dim);max-width:26ch}
.foot__legal{font-size:.8rem;line-height:1.75;color:var(--fg-faint);max-width:78ch}
.foot__year{grid-column:1/-1;padding-top:1.8rem;margin-top:.6rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--fg-faint)}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr}}

/* ============================================================
   Motion entrance defaults (JS removes .is-hidden / animates)
   ============================================================ */
[data-anim]{opacity:0;transform:translateY(18px)}
.no-anim [data-anim]{opacity:1;transform:none}
.no-anim .manifesto .w{color:var(--fg)}
.no-anim .hero__title .line{opacity:1}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-anim],[data-step]{opacity:1!important;transform:none!important}
  .manifesto .w{color:var(--fg)!important}
  .hero__canvas{display:none}
}