/* ============================================================
   HERALD — shared styles (Nitro-direction, v3)
   New in v3:
   • Söhne (test web fonts) wired as the typeface.
   • intro logo near full-width, letters filled with a fast-cycling
     defence image "video" (clip-path mask).
   • removed floating hover card on services.
   • subtle scroll-reveal + horizontal draw-in lines.
   • footer logo doubled.
   NOTE: --orange placeholder; Söhne files are TEST/eval licence.
   ============================================================ */

/* ---- Söhne (test web fonts — evaluation licence) ---- */
@font-face{font-family:"Soehne";src:url("fonts/soehne-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Soehne";src:url("fonts/soehne-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Soehne";src:url("fonts/soehne-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Soehne";src:url("fonts/soehne-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Soehne";src:url("fonts/soehne-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

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

:root{
  --bg:#0a0a0b;
  --orange:#FF5A1F;          /* placeholder brand orange — confirm exact hex */
  --surface:#121214;
  --text:#f2f2f0;
  --muted:#9a9a9c;
  --dim:#646468;
  --line:rgba(255,255,255,.13);
  --grid:rgba(255,255,255,.052);
  --accent:var(--orange);
  --maxw:1320px;
  --gutter:clamp(1.15rem,4vw,3.5rem);
  --sp:clamp(4.5rem,10vh,9rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:"Soehne",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",system-ui,Roboto,Arial,sans-serif;
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.6;letter-spacing:.004em;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#0a0a0b}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.logo-mark{display:block}

/* background grid lines */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-grid .cols{max-width:var(--maxw);height:100%;margin:0 auto;padding-inline:var(--gutter);display:grid;grid-template-columns:repeat(4,1fr)}
.bg-grid .cols i{border-left:1px solid var(--grid)}
.bg-grid .cols i:last-child{border-right:1px solid var(--grid)}

/* type helpers */
.label{display:inline-flex;align-items:center;gap:.45rem;color:var(--accent);font-size:.8rem;font-weight:500;letter-spacing:.02em;margin-bottom:1.5rem}
.display{font-size:clamp(2.5rem,1rem + 7vw,6.4rem);font-weight:700;letter-spacing:-.035em;line-height:.98;text-transform:lowercase}
.h2{font-size:clamp(1.9rem,1.1rem + 3.2vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1.02;text-transform:lowercase}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* pill + buttons (rectangular) */
.pill{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:0;padding:.5rem .9rem;font-size:.8rem;color:var(--muted);background:rgba(255,255,255,.02);text-transform:lowercase}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3);opacity:0}100%{opacity:0}}

.btn{display:inline-flex;align-items:center;gap:.55rem;border-radius:0;padding:.95rem 1.5rem;font-weight:600;font-size:.95rem;text-transform:lowercase;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;cursor:pointer;border:1px solid transparent}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--text);color:#0a0a0b}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.04)}
.btn-orange{background:var(--accent);color:#0a0a0b}
.btn-orange:hover{transform:translateY(-2px)}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .4s var(--ease),border-color .4s,opacity .45s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(10,10,11,.72);backdrop-filter:blur(16px) saturate(120%);border-bottom-color:var(--grid)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand .logo-mark{width:112px;color:var(--text)}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-size:.92rem;color:var(--muted);text-transform:lowercase;transition:color .25s}
.nav-links a:hover{color:var(--text)}
.nav-cta{color:var(--text) !important;border:1px solid var(--line);padding:.55rem .9rem;transition:border-color .25s,background .25s}
.nav-cta:hover{border-color:var(--text);background:rgba(255,255,255,.04)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--text)}

.mobile{position:fixed;inset:0;z-index:70;background:var(--bg);transform:translateY(-101%);transition:transform .5s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:var(--gutter)}
.mobile.open{transform:none}
.mobile a{font-size:clamp(2rem,9vw,3rem);text-transform:lowercase;font-weight:700;letter-spacing:-.02em;padding:.5rem 0;border-bottom:1px solid var(--grid)}
.m-close{position:absolute;top:22px;right:var(--gutter);background:none;border:0;color:var(--text);font-size:1.7rem;cursor:pointer}

/* splash intro (orange → black) */
.intro-orange{position:fixed;inset:0;z-index:1;background:var(--orange);will-change:opacity}
.hero-logo{position:fixed;top:46%;left:50%;transform:translate(-50%,-50%);z-index:40;width:min(94vw,1700px);pointer-events:none;will-change:transform,opacity}
.logo-fill{display:block;width:100%;height:auto}
.lo-img{opacity:0;transition:opacity .3s linear}
.lo-img.on{opacity:1}
.scrollcue{position:fixed;left:0;right:0;bottom:30px;z-index:41;display:flex;justify-content:center;gap:.6rem;align-items:center;color:rgba(10,10,11,.62);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
.scrollcue .ln{width:1px;height:30px;background:rgba(10,10,11,.4);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.splash{height:100vh}

/* hero copy */
.hero-copy{position:relative;z-index:2;padding-top:clamp(2rem,8vh,5rem);padding-bottom:var(--sp)}
.hero-copy .display{margin:1.3rem 0 1.7rem;max-width:18ch}
.hero-statement{font-size:clamp(1.2rem,1rem + 1.3vw,1.9rem);font-weight:400;line-height:1.34;max-width:30ch;color:var(--muted);margin-bottom:2.3rem;text-transform:lowercase}
.hero-statement b{color:var(--text);font-weight:600}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* generic section + draw-in rule */
section{position:relative;z-index:2;padding-block:var(--sp)}
.sec-rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.sec-rule.is-visible{transform:scaleX(1)}
.sec-head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head .h2{max-width:16ch}
.sec-head .sub{color:var(--muted);margin-top:1rem;text-transform:lowercase;font-size:1.05rem;max-width:50ch}

/* services list (links) */
.svc-list{margin-top:0}
.svc-row{display:grid;grid-template-columns:3.2rem 1fr auto;gap:clamp(1rem,3vw,2.4rem);align-items:center;padding:clamp(1.3rem,2.6vw,2rem) .4rem;border-bottom:1px solid var(--line);cursor:pointer;transition:padding-left .35s var(--ease),background .35s}
.svc-row:hover{padding-left:1.2rem;background:rgba(255,255,255,.025)}
.svc-idx{color:var(--dim);font-size:.9rem;transition:color .3s}
.svc-row:hover .svc-idx{color:var(--accent)}
.svc-title{font-size:clamp(1.45rem,1rem + 2.3vw,2.9rem);font-weight:700;letter-spacing:-.025em;line-height:1;text-transform:lowercase}
.svc-right{display:flex;align-items:center;gap:1.3rem;justify-self:end}
.svc-tier{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:0;padding:.32rem .65rem;white-space:nowrap}
.svc-arrow{color:var(--text);font-size:1.25rem;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s var(--ease)}
.svc-row:hover .svc-arrow{opacity:1;transform:none}
.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2rem;color:var(--muted);text-transform:lowercase}

/* about */
.about .big{font-size:clamp(1.7rem,1rem + 2.9vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;text-transform:lowercase;max-width:20ch;margin-bottom:1.7rem}
.about p.lead{color:var(--muted);max-width:56ch;text-transform:lowercase;font-size:1.1rem}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:clamp(2.5rem,5vw,3.6rem);border:1px solid var(--line)}
.principle{background:var(--bg);padding:1.9rem 1.7rem}
.principle .pn{color:var(--accent);font-size:.8rem;margin-bottom:.9rem;letter-spacing:.06em}
.principle h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;text-transform:lowercase;line-height:1.15}

/* contact */
.cta-card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:clamp(2.4rem,6vw,5.5rem);text-align:center;position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 0%,rgba(255,90,31,.10),transparent 70%)}
.cta-card > *{position:relative}
.cta-card .h2{margin-inline:auto;margin-bottom:1.2rem;max-width:18ch}
.cta-card .sub{color:var(--muted);max-width:46ch;margin:0 auto 2.2rem;text-transform:lowercase;font-size:1.06rem}
.cta-actions{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;align-items:center}
.cta-mail{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:color .3s,border-color .3s}
.cta-mail:hover{color:var(--text);border-color:var(--text)}

/* footer (logo doubled) */
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding-block:clamp(3rem,6vh,4.5rem) 2.2rem;margin-top:var(--sp)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;align-items:start}
.f-brand .logo-mark{width:260px;max-width:60vw;color:var(--text);margin-bottom:1.1rem}
.f-desc{color:var(--muted);font-size:.9rem;text-transform:lowercase}
.f-col h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:1rem;font-weight:500}
.f-col a{display:block;color:var(--muted);text-transform:lowercase;padding:.3rem 0;transition:color .25s}
.f-col a:hover{color:var(--text)}
.f-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vh,4rem);padding-top:1.6rem;border-top:1px solid var(--grid);color:var(--dim);font-size:.84rem;text-transform:lowercase}

/* scroll reveal — soft fade-up with gentle stagger (delay set per-group in JS) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ===== service detail page ===== */
.detail-top{padding-top:120px}
.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.9rem;text-transform:lowercase;transition:color .25s;margin-bottom:clamp(2rem,5vw,3.5rem)}
.back-link:hover{color:var(--text)}
.back-link .arw{transition:transform .25s var(--ease)}
.back-link:hover .arw{transform:translateX(-4px)}
.detail-hero{display:grid;grid-template-columns:1fr;gap:1.4rem;padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.detail-hero .d-tier{color:var(--accent);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.detail-hero .d-idx{color:var(--dim);font-size:.9rem}
.detail-hero h1{font-size:clamp(2.4rem,1rem + 6vw,5.4rem);font-weight:700;letter-spacing:-.035em;line-height:.98;text-transform:lowercase}
.detail-hero .d-summary{font-size:clamp(1.2rem,1rem + 1.2vw,1.7rem);color:var(--muted);text-transform:lowercase;max-width:34ch;line-height:1.3}
.detail-body{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,6vw,5rem);padding-block:clamp(2.5rem,6vw,4.5rem)}
.detail-body .overview{font-size:clamp(1.05rem,1rem + .5vw,1.25rem);color:var(--muted);text-transform:lowercase;line-height:1.6}
.detail-body .overview .outcome{display:block;color:var(--text);margin-top:1.6rem;font-weight:600;font-size:1.15rem}
.included h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:1.2rem;font-weight:500}
.included ul{list-style:none}
.included li{display:flex;gap:.8rem;align-items:baseline;padding:.85rem 0;border-top:1px solid var(--grid);text-transform:lowercase;color:var(--text)}
.included li:last-child{border-bottom:1px solid var(--grid)}
.included li .x{color:var(--accent);font-size:.8rem}
.detail-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:2rem;margin-top:1rem}
.detail-nav a{display:flex;flex-direction:column;gap:.3rem;color:var(--muted);text-transform:lowercase;transition:color .25s}
.detail-nav a:hover{color:var(--text)}
.detail-nav .dn-k{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.detail-nav .dn-t{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.detail-nav .next{text-align:right;align-items:flex-end}

/* responsive */
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .principles{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1 / -1}
  .detail-body{grid-template-columns:1fr;gap:2.4rem}
  .hero-logo{width:94vw}
}
@media (max-width:560px){
  .svc-row{grid-template-columns:2.2rem 1fr;gap:1rem}
  .svc-right{grid-column:2;justify-self:start;margin-top:.4rem}
  .f-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .sec-rule{transform:scaleX(1);transition:none}
  .dot::after,.scrollcue .ln,.lo-img{animation:none}
}