/* =========================================================================
   Crowned Phoenix — high-tech landing page
   Brand: gold (#eda800) on near-black · Raleway · machine-vision motif
   ========================================================================= */
:root{
  --bg:#08090c; --bg-2:#0b0d11; --surface:#10131a; --surface-2:#161a23;
  --line:#1e232e; --line-hot:#3a3320;
  --gold:#eda800; --gold-br:#ffce5a; --gold-deep:#b8800a; --gold-soft:rgba(237,168,0,.12);
  --ink:#eef1f6; --ink-mut:#9aa3b2; --ink-faint:#69707e;
  --sans:"Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --glow:0 0 26px rgba(237,168,0,.28);
  --maxw:1200px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
   radial-gradient(110vw 70vh at 80% -10%, rgba(237,168,0,.10), transparent 60%),
   radial-gradient(80vw 60vh at 5% 108%, rgba(237,168,0,.05), transparent 55%),
   linear-gradient(180deg,var(--bg),var(--bg-2))}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.06}
::selection{background:var(--gold); color:#1a1200}

/* FX */
.fx-grain,.fx-vignette{position:fixed; inset:0; pointer-events:none}
.fx-grain{z-index:9990; opacity:.04; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,3%)}100%{transform:translate(0,0)}}
.fx-vignette{z-index:9989; box-shadow:inset 0 0 240px 50px rgba(0,0,0,.7)}
.cursor-glow{position:fixed; top:0; left:0; width:480px; height:480px; z-index:1; pointer-events:none;
  margin:-240px 0 0 -240px; border-radius:50%; opacity:0; transition:opacity .4s;
  background:radial-gradient(circle, rgba(237,168,0,.10), rgba(237,168,0,.03) 42%, transparent 62%);
  transform:translate3d(-1000px,-1000px,0)}
.scroll-progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:9995}
.scroll-progress span{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-br)); box-shadow:0 0 10px var(--gold)}

/* NAV */
.nav{position:fixed; inset:0 0 auto 0; z-index:9000; display:flex; align-items:center; gap:20px;
  padding:16px clamp(16px,4vw,46px); transition:background .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,9,12,.74); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line); padding-top:11px; padding-bottom:11px}
.brand-logo{height:38px; width:auto; filter:drop-shadow(0 0 12px rgba(237,168,0,.25))}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:6px}
.nav-links a{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-mut); padding:9px 14px; border-radius:8px; position:relative; transition:color .25s,background .25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-cta{border:1px solid var(--line-hot); color:var(--gold-br)!important}
.nav-cta:hover{background:var(--gold-soft); box-shadow:var(--glow)}
.nav-toggle{display:none; margin-left:auto; width:44px; height:40px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); border-radius:10px; cursor:pointer; padding:11px 10px; flex-direction:column; justify-content:space-between}
.nav-toggle span{display:block; height:2px; background:var(--gold); border-radius:2px; transition:transform .3s var(--ease),opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed; inset:64px 12px auto 12px; flex-direction:column; align-items:stretch; gap:4px;
    padding:14px; background:rgba(12,14,19,.96); backdrop-filter:blur(16px); border:1px solid var(--line);
    border-radius:16px; transform:translateY(-12px) scale(.98); opacity:0; pointer-events:none; transition:.3s var(--ease)}
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:14px; font-size:14px; text-align:center}
  .nav-cta{margin-top:6px}
}

/* HERO */
.hero{position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero-grid{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(237,168,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(237,168,0,.045) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(80% 70% at 60% 40%,#000,transparent 80%)}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,12,.5),transparent 22%,transparent 68%,var(--bg))}
.hero-inner{position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; width:100%;
  padding:0 clamp(20px,5vw,46px); will-change:transform}
.hero-eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; color:var(--gold-br); text-transform:uppercase; padding:8px 14px;
  border:1px solid var(--line-hot); border-radius:100px; background:var(--gold-soft); margin-bottom:26px}
.tick{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); flex:none}
.hero-title{font-size:clamp(2.6rem,7.6vw,6.2rem); letter-spacing:-.03em; margin-bottom:22px; font-weight:800;
  text-shadow:0 0 60px rgba(237,168,0,.18)}
.hero-title .line{display:block; overflow:hidden}
.hero-title .accent{background:linear-gradient(120deg,var(--gold-br),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.caret{display:inline-block; width:.55ch; height:.95em; vertical-align:-.1em; margin-left:.05em;
  background:var(--gold); -webkit-text-fill-color:var(--gold); animation:blink 1s steps(1) infinite; box-shadow:0 0 12px var(--gold)}
@keyframes blink{50%{opacity:0}}
.hero-sub{max-width:60ch; color:var(--ink-mut); font-size:clamp(1.02rem,1.7vw,1.25rem); margin:0 0 32px; font-weight:400}
.hero-sub strong{color:var(--gold-br); font-weight:600}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.hero-meta{display:flex; align-items:center; gap:16px; margin-top:30px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); flex-wrap:wrap}
.hero-meta b{color:var(--gold-br)}
.hero-meta i{width:1px; height:14px; background:var(--line-hot)}

/* buttons */
.btn{position:relative; display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:12px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  border:1px solid transparent; transition:transform .25s var(--ease),box-shadow .3s,background .3s,color .3s; will-change:transform}
.btn svg{transition:transform .3s var(--ease)}
.btn-primary{background:linear-gradient(135deg,var(--gold-br),var(--gold-deep)); color:#1a1200; font-weight:700; box-shadow:var(--glow)}
.btn-primary:hover{box-shadow:0 0 40px rgba(237,168,0,.5); transform:translateY(-2px)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{border-color:var(--line-hot); color:var(--ink); background:rgba(237,168,0,.03)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-br); background:var(--gold-soft); transform:translateY(-2px)}

.hero-readout{position:absolute; right:clamp(16px,4vw,52px); bottom:clamp(74px,12vh,120px); z-index:3;
  display:grid; grid-template-columns:auto auto; gap:6px 14px; font-family:var(--mono); font-size:11.5px; text-align:right}
.ro-k{color:var(--ink-faint); letter-spacing:.12em}
.ro-v{color:var(--gold-br)}
.ro-v.ok{color:#6fe39a}
@media(max-width:680px){.hero-readout{display:none}}
.scroll-hint{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:grid; gap:8px;
  justify-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--ink-faint)}
.scroll-hint i{width:1px; height:32px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden}
.scroll-hint i::after{content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold-br); animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{top:-50%}100%{top:120%}}

/* MARQUEE */
.marquee{border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding:13px 0}
.marquee-track{display:inline-flex; gap:24px; white-space:nowrap; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.12em; color:var(--ink-faint); animation:scrollx 34s linear infinite; will-change:transform}
.marquee-track span{color:var(--ink-mut)} .marquee-track b{color:var(--gold)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* SECTIONS */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(72px,11vh,140px) clamp(20px,5vw,46px)}
.section-head{max-width:760px; margin-bottom:52px}
.kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; color:var(--gold); text-transform:uppercase; margin-bottom:18px}
.section-head h2{font-size:clamp(1.9rem,4.6vw,3.2rem); margin-bottom:16px}
.section-head p{color:var(--ink-mut); font-size:clamp(1rem,1.6vw,1.16rem); max-width:60ch}

/* PIPELINE */
.pipeline{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:p}
@media(max-width:880px){.pipeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pipeline{grid-template-columns:1fr}}
.pl{position:relative; padding:26px 22px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); overflow:hidden; transition:border-color .35s,transform .35s,box-shadow .35s}
.pl::after{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.pl:hover{border-color:var(--line-hot); transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(237,168,0,.4)}
.pl:hover::after{transform:scaleX(1)}
.pl-n{font-family:var(--mono); color:var(--gold-deep); font-size:.85rem; letter-spacing:.1em}
.pl-ic{width:46px; height:46px; margin:14px 0 16px; border-radius:12px; display:grid; place-items:center;
  background:var(--gold-soft); border:1px solid var(--line-hot); color:var(--gold-br)}
.pl-ic svg{width:24px; height:24px}
.pl h3{font-size:1.4rem; margin-bottom:8px}
.pl p{color:var(--ink-mut); font-size:.94rem; margin:0}

/* STATS */
.stats{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,46px) clamp(10px,5vh,40px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:28px 22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); position:relative; overflow:hidden}
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(var(--gold),transparent)}
.stat-num{font-family:var(--mono); font-weight:700; font-size:clamp(2rem,4.6vw,3rem); color:var(--gold-br); line-height:1;
  display:flex; align-items:baseline; gap:3px; text-shadow:0 0 24px rgba(237,168,0,.25)}
.stat-num em{font-size:.5em; font-style:normal}
.stat-num.glow-text{font-size:clamp(1.2rem,3vw,1.8rem); letter-spacing:.03em}
.stat-lbl{margin-top:10px; font-size:.92rem; color:var(--ink-mut)}

/* CARDS */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:920px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); transition:border-color .35s,box-shadow .35s,transform .1s; transform-style:preserve-3d}
.card:hover{border-color:var(--line-hot); box-shadow:0 28px 60px -34px rgba(237,168,0,.5)}
.card-media{position:relative; aspect-ratio:16/10; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover; filter:saturate(.92) brightness(.82) contrast(1.02); transition:transform .6s var(--ease),filter .4s}
.card:hover .card-media img{transform:scale(1.06); filter:saturate(1.05) brightness(.92)}
.card-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(8,9,12,.85))}
.card-badge{position:absolute; left:12px; top:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--gold-br); background:rgba(8,9,12,.7); border:1px solid var(--line-hot); padding:5px 9px; border-radius:7px; backdrop-filter:blur(4px)}
.card-body{padding:20px 22px 24px}
.card-body h3{font-size:1.25rem; margin-bottom:9px}
.card-body p{color:var(--ink-mut); font-size:.93rem; margin:0; line-height:1.55}

/* BLOG */
.blog-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none}
.blog-all{display:inline-flex; align-items:center; gap:9px; flex:none; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold-br); border:1px solid var(--line-hot);
  padding:12px 18px; border-radius:11px; background:rgba(237,168,0,.03); transition:background .3s,box-shadow .3s,transform .25s var(--ease); will-change:transform}
.blog-all:hover{background:var(--gold-soft); box-shadow:var(--glow)}
.blog-all svg{transition:transform .3s var(--ease)} .blog-all:hover svg{transform:translateX(4px)}
@media(max-width:620px){.blog-head{flex-direction:column; align-items:flex-start} .blog-all{align-self:flex-start}}
.post{text-decoration:none; color:inherit; display:flex; flex-direction:column}
.post .card-media{aspect-ratio:16/9}
.post-tag{position:absolute; left:12px; top:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:#1a1200; background:var(--gold); padding:5px 9px; border-radius:7px; font-weight:600}
.post .card-body{display:flex; flex-direction:column; flex:1; gap:0}
.post-date{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:10px}
.post h3{font-size:1.12rem; line-height:1.25; margin-bottom:10px; transition:color .3s}
.post:hover h3{color:var(--gold-br)}
.post p{color:var(--ink-mut); font-size:.9rem; line-height:1.55; margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.post-more{margin-top:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); transition:color .3s}
.post-more i{font-style:normal; display:inline-block; transition:transform .3s var(--ease)}
.post:hover .post-more{color:var(--gold-br)} .post:hover .post-more i{transform:translate(3px,-3px)}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:42px; align-items:center}
@media(max-width:860px){.about-grid{grid-template-columns:1fr; gap:32px}}
.about-copy h2{font-size:clamp(1.8rem,4vw,2.8rem); margin:6px 0 18px}
.about-copy p{color:var(--ink-mut); margin:0 0 16px; max-width:54ch}
.about-copy .btn{margin-top:10px}
.badge-card{display:flex; align-items:center; gap:16px; padding:18px; border:1px solid var(--line-hot); border-radius:16px;
  background:radial-gradient(120% 140% at 0 0,var(--gold-soft),transparent 60%),var(--surface); margin-bottom:16px}
.badge-card img{width:64px; height:auto; flex:none}
.badge-card b{display:block; color:var(--ink)} .badge-card span{font-size:.86rem; color:var(--ink-mut)}
.facts{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.facts li{display:flex; justify-content:space-between; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); font-size:.92rem}
.facts li:last-child{border-bottom:0}
.facts span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase}
.facts b{color:var(--ink); text-align:right}

/* CTA */
.cta{padding:clamp(60px,11vh,130px) clamp(20px,5vw,46px)}
.cta-inner{position:relative; max-width:920px; margin:0 auto; text-align:center; padding:clamp(40px,7vw,72px) clamp(24px,5vw,56px);
  border:1px solid var(--line-hot); border-radius:24px; overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%,var(--gold-soft),transparent 55%),var(--surface)}
.cta-inner .kicker{justify-content:center}
.cta-inner h2{font-size:clamp(2rem,5vw,3.4rem); margin:6px 0 14px}
.cta-inner>p{color:var(--ink-mut); max-width:52ch; margin:0 auto 30px}
.cta-inner .hero-actions{justify-content:center}
.cta-corners i{position:absolute; width:22px; height:22px; border:2px solid var(--line-hot)}
.cta-corners i:nth-child(1){top:14px;left:14px;border-right:0;border-bottom:0}
.cta-corners i:nth-child(2){top:14px;right:14px;border-left:0;border-bottom:0}
.cta-corners i:nth-child(3){bottom:14px;left:14px;border-right:0;border-top:0}
.cta-corners i:nth-child(4){bottom:14px;right:14px;border-left:0;border-top:0}
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; text-align:left;
  border-top:1px solid var(--line); padding-top:28px}
@media(max-width:720px){.contact-grid{grid-template-columns:repeat(2,1fr); gap:22px}}
.contact-grid>div{font-size:.92rem; color:var(--ink-mut)}
.cg-k{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--gold-deep); margin-bottom:7px}
.contact-grid a:hover{color:var(--gold-br)}

/* FOOTER */
.foot{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:28px clamp(20px,5vw,46px) 46px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; color:var(--ink-faint)}
.foot-l{display:flex; align-items:center; gap:11px} .foot-mark{height:26px; width:auto; opacity:.9}
.foot-r a:hover{color:var(--gold-br)}

/* CONTACT (details + interactive map) */
.contact-layout{display:grid; grid-template-columns:1fr 1.05fr; gap:24px; align-items:stretch}
@media(max-width:860px){.contact-layout{grid-template-columns:1fr}}
.contact-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.cc-head{display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 160% at 0 0,var(--gold-soft),transparent 60%)}
.cc-logo{height:38px; width:auto; opacity:.95}
.cc-id b{display:block; color:var(--ink); font-size:1.05rem}
.cc-id span{font-size:.85rem; color:var(--ink-mut)}
.cc-grid{display:flex; flex-direction:column; flex:1}
.cc-item{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; row-gap:3px;
  align-content:center; flex:1; padding:14px 22px; color:var(--ink); transition:background .25s,color .25s}
a.cc-item:hover{background:var(--surface-2)}
.cc-ic{grid-row:1 / span 2; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--gold-soft); border:1px solid var(--line-hot); color:var(--gold-br)}
.cc-ic svg{width:18px; height:18px}
.cc-k{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep)}
.cc-v{font-size:.92rem; color:var(--ink); line-height:1.4; overflow-wrap:anywhere}
.cc-num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.06em; font-size:.86rem; white-space:nowrap}
a.cc-item:hover .cc-v{color:var(--gold-br)}

.map-card{display:flex; flex-direction:column; border:1px solid var(--line-hot); border-radius:18px;
  overflow:hidden; background:var(--surface); min-height:340px}
.map-head,.map-foot{display:flex; align-items:center; gap:10px; padding:12px 16px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.08em; color:var(--ink-mut)}
.map-head{border-bottom:1px solid var(--line); color:var(--gold-br)}
.map-foot{border-top:1px solid var(--line); justify-content:space-between}
.map-open{margin-left:auto; color:var(--gold-br)}
.map-open:hover,.map-foot a:hover{color:#fff}
.dot-live{width:8px; height:8px; border-radius:50%; background:#6fe39a; box-shadow:0 0 10px #6fe39a; animation:livepulse 2s infinite}
@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.map-canvas{flex:1; min-height:300px; background:var(--bg-2)}

/* Leaflet dark theming + custom marker */
.leaflet-container{background:#0b0d11!important; font-family:var(--mono)}
.leaflet-control-zoom a{background:var(--surface)!important; color:var(--gold-br)!important; border-color:var(--line)!important}
.leaflet-control-zoom a:hover{background:var(--surface-2)!important}
.leaflet-bar{border-color:var(--line)!important; box-shadow:none!important}
.leaflet-control-attribution{background:rgba(8,9,12,.6)!important; color:var(--ink-faint)!important}
.leaflet-control-attribution a{color:var(--gold-deep)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface)!important; color:var(--ink)!important}
.leaflet-popup-content-wrapper{border:1px solid var(--line-hot)}
.cp-marker span{display:block; width:18px; height:18px; border-radius:50%; background:var(--gold); position:relative;
  box-shadow:0 0 0 4px rgba(237,168,0,.22),0 0 16px var(--gold)}
.cp-marker span::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--gold); animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.4);opacity:0}}

/* ========================= NEWS PAGE ========================= */
.news-hero{position:relative; overflow:hidden; padding:clamp(110px,16vh,180px) clamp(20px,5vw,46px) clamp(30px,5vh,56px)}
.news-hero .hero-grid{mask-image:radial-gradient(80% 80% at 50% 20%,#000,transparent 80%)}
.news-hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto}
.news-title{font-size:clamp(2.4rem,6vw,4.4rem); letter-spacing:-.03em; margin:0 0 16px;
  background:linear-gradient(120deg,var(--ink),var(--gold-br)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.news-lead{color:var(--ink-mut); font-size:clamp(1.05rem,1.8vw,1.25rem); max-width:56ch; margin:0 0 34px}
.news-controls{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mut);
  background:var(--surface); border:1px solid var(--line); padding:9px 15px; border-radius:100px; cursor:pointer;
  transition:color .25s,background .25s,border-color .25s,box-shadow .25s}
.chip:hover{color:var(--ink); border-color:var(--line-hot)}
.chip.active{color:#1a1200; background:linear-gradient(135deg,var(--gold-br),var(--gold-deep)); border-color:transparent; box-shadow:var(--glow)}
.search{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:11px; padding:10px 14px; color:var(--ink-faint); transition:border-color .25s}
.search:focus-within{border-color:var(--line-hot)}
.search input{background:none; border:0; outline:0; color:var(--ink); font-family:var(--sans); font-size:.95rem; width:200px}
.search input::placeholder{color:var(--ink-faint)}
@media(max-width:560px){.search,.search input{width:100%}}

.news-feed{padding-top:clamp(20px,4vh,40px)}

/* featured lead article */
.featured{display:grid; grid-template-columns:1.05fr 1fr; border:1px solid var(--line-hot); border-radius:20px;
  overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--bg-2)); color:inherit; margin-bottom:50px;
  transition:border-color .35s,box-shadow .35s}
.featured:hover{box-shadow:0 34px 80px -42px rgba(237,168,0,.55)}
@media(max-width:820px){.featured{grid-template-columns:1fr}}
.ft-media{position:relative; min-height:300px; overflow:hidden}
@media(max-width:820px){.ft-media{min-height:220px; aspect-ratio:16/9}}
.ft-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.86) saturate(.95); transition:transform .7s var(--ease),filter .4s}
.featured:hover .ft-media img{transform:scale(1.05); filter:brightness(1) saturate(1.05)}
.ft-badge{position:absolute; left:14px; top:14px; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:#1a1200; background:var(--gold); padding:6px 12px; border-radius:8px; font-weight:700; box-shadow:0 6px 20px rgba(237,168,0,.4)}
.ft-body{padding:clamp(26px,3.6vw,48px); display:flex; flex-direction:column; justify-content:center}
.ft-meta{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.ft-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#1a1200;
  background:var(--gold); padding:4px 10px; border-radius:7px; font-weight:600}
.ft-date{font-family:var(--mono); font-size:12px; color:var(--ink-faint)}
.ft-title{font-size:clamp(1.55rem,3.1vw,2.4rem); line-height:1.14; margin:0 0 16px; transition:color .3s}
.featured:hover .ft-title{color:var(--gold-br)}
.ft-intro{color:var(--ink-mut); font-size:1rem; line-height:1.6; margin:0 0 24px; max-width:56ch}
.ft-more{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-br)}
.ft-more i{font-style:normal; display:inline-block; transition:transform .3s var(--ease)}
.featured:hover .ft-more i{transform:translate(3px,-3px)}
.featured[hidden]{display:none}
.feed-label{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:8px 0 22px}
.feed-label i{color:var(--ink-faint); font-style:normal; letter-spacing:.04em}
#lbl-updates{margin-top:54px}
.feed-state{text-align:center; color:var(--ink-faint); font-family:var(--mono); font-size:.9rem; padding:40px 0}

/* image-less "updates" list — distinct from cards */
.updates{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.update{border-bottom:1px solid var(--line)}
.update a{position:relative; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  column-gap:18px; align-items:center; padding:24px 8px 24px 18px; color:var(--ink); transition:padding .35s var(--ease)}
.update a::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--gold);
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease)}
.update a:hover{padding-left:26px} .update a:hover::before{transform:scaleY(1)}
.up-meta{grid-column:1; display:flex; align-items:center; gap:12px; margin-bottom:7px}
.up-date{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint)}
.up-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-br);
  border:1px solid var(--line-hot); padding:3px 9px; border-radius:100px}
.up-title{grid-column:1; grid-row:2; font-size:1.35rem; line-height:1.2; transition:color .3s}
.update a:hover .up-title{color:var(--gold-br)}
.up-intro{grid-column:1; grid-row:3; margin:8px 0 0; color:var(--ink-mut); font-size:.94rem; max-width:80ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.up-arrow{grid-column:2; grid-row:1 / span 3; font-size:1.4rem; color:var(--gold-deep); transition:transform .3s var(--ease),color .3s}
.update a:hover .up-arrow{color:var(--gold-br); transform:translate(4px,-4px)}
@media(max-width:560px){.up-intro{-webkit-line-clamp:3}}

/* dynamic feed reveal + filter hide */
.feed-item{opacity:0; transform:translateY(22px); filter:blur(5px);
  transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms), filter .6s var(--ease) var(--d,0ms)}
.feed-item.in{opacity:1; transform:none; filter:none}
.feed-item.hide{display:none}

/* ========================= ARTICLE / NEWS-ITEM ========================= */
.article{max-width:var(--maxw); margin:0 auto; padding:clamp(108px,15vh,168px) clamp(20px,5vw,46px) 0}
.article-head{max-width:820px; margin:0 auto; text-align:center}
.article-head .breadcrumb{justify-content:center}
.article-meta{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:22px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12.5px; color:var(--ink-faint)}
.am-tag{color:#1a1200; background:var(--gold); padding:4px 11px; border-radius:7px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.am-sep{opacity:.5}
.article-head h1{font-size:clamp(2rem,4.8vw,3.4rem); line-height:1.12; letter-spacing:-.03em; margin:0 0 22px}
.article-lede{color:var(--ink-mut); font-size:clamp(1.12rem,2vw,1.4rem); line-height:1.6; max-width:62ch; margin:0 auto; font-weight:400}
.article-share{display:flex; justify-content:center; gap:10px; margin-top:30px}
.share-btn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 13px; border:1px solid var(--line-hot);
  border-radius:11px; background:rgba(237,168,0,.03); color:var(--ink-mut); cursor:pointer; font-family:var(--mono);
  font-size:12px; transition:color .25s,background .25s,box-shadow .25s,transform .2s}
.share-btn svg{width:17px; height:17px}
.share-btn:hover{color:var(--gold-br); background:var(--gold-soft); box-shadow:var(--glow); transform:translateY(-2px)}

/* optional hero image — remove the <figure> and the layout still holds */
.article-hero{margin:clamp(40px,7vh,72px) auto 0; max-width:1000px}
.article-hero img{width:100%; height:auto; border:1px solid var(--line-hot); border-radius:18px;
  box-shadow:0 40px 90px -52px rgba(237,168,0,.5), 0 20px 50px -30px rgba(0,0,0,.8)}
.article-hero figcaption{text-align:center; font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:14px}

/* prose body */
.prose{max-width:720px; margin:clamp(40px,7vh,68px) auto 0; color:var(--ink-mut);
  font-size:1.08rem; line-height:1.8}
.prose > * + *{margin-top:1.35em}
.prose p{margin:0}
/* Restore the rhythm for paragraphs (the reset above is more specific than the
   sibling rule), so consecutive <p>, and a <p> after an <h2>/list, keep spacing. */
.prose > * + p{margin-top:1.35em}
.prose strong{color:var(--ink); font-weight:700}
.prose a{color:var(--gold-br); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-hot); transition:text-decoration-color .25s}
.prose a:hover{text-decoration-color:var(--gold)}
.prose h2{color:var(--ink); font-size:clamp(1.4rem,2.6vw,1.85rem); line-height:1.2; letter-spacing:-.02em; margin-top:2em; padding-top:.2em}
.prose h2 code,.prose h3 code{font-size:.85em}
.prose h3{color:var(--ink); font-size:1.3rem; margin-top:1.7em}
.prose ul,.prose ol{margin-left:0; padding-left:1.3em}
.prose li{margin-top:.55em} .prose li::marker{color:var(--gold)}
.prose blockquote{margin:1.6em 0; padding:6px 0 6px 22px; border-left:2px solid var(--gold); color:var(--ink); font-style:italic; font-size:1.12em}
.prose code{font-family:var(--mono); font-size:.86em; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.12em .42em; color:var(--gold-br)}
.prose .code-block{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:18px 20px; overflow:auto;
  font-size:.88rem; line-height:1.6; color:var(--ink)}
.prose .code-block code{background:none; border:0; padding:0; color:inherit; font-size:1em; white-space:pre}
.prose img{width:100%; height:auto; border:1px solid var(--line-hot); border-radius:12px; margin:.4em 0}
/* Tables. Wrap in <div class="table-wrap"> for the rounded border + horizontal
   scroll on narrow screens; a bare <table> still renders with header + rules. */
.prose .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.prose table{width:100%; border-collapse:collapse; font-size:.96rem; line-height:1.55}
.prose .table-wrap > table{margin:0}
.prose th,.prose td{padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.prose thead th{background:var(--bg-2); color:var(--ink); font-weight:700; font-size:.78rem;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}
.prose td{color:var(--ink-mut)}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody tr:hover td{background:var(--surface)}

/* article footer */
.article-foot{max-width:720px; margin:48px auto 0; padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.article-tags{display:flex; gap:8px; flex-wrap:wrap}
.article-tags span{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); border:1px solid var(--line); padding:6px 11px; border-radius:100px}
#readnext{padding-top:clamp(50px,8vh,90px)}

/* ========================= SERVICE PAGE ========================= */
.svc-hero{position:relative; padding:clamp(110px,16vh,180px) clamp(20px,5vw,46px) clamp(50px,8vh,90px); overflow:hidden}
.svc-hero .hero-grid{mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent 80%)}
.svc-hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
@media(max-width:900px){.svc-hero-inner{grid-template-columns:1fr; gap:36px}}
.breadcrumb{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.06em; color:var(--ink-faint); margin-bottom:22px; flex-wrap:wrap}
.breadcrumb a:hover{color:var(--gold-br)} .breadcrumb b{color:var(--gold-br); font-weight:500} .breadcrumb span{opacity:.5}
.svc-title{font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-.03em; margin:0 0 18px;
  background:linear-gradient(120deg,var(--ink),var(--gold-br)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.svc-lead{color:var(--ink-mut); font-size:clamp(1.05rem,1.8vw,1.3rem); max-width:54ch; margin:0 0 30px}
.frame{border:1px solid var(--line-hot); border-radius:16px; overflow:hidden; background:var(--surface);
  box-shadow:0 40px 90px -50px rgba(237,168,0,.5), 0 20px 50px -30px rgba(0,0,0,.8)}
.frame-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-2)}
.frame-bar i{width:9px; height:9px; border-radius:50%; background:var(--line-hot)}
.frame-bar i:first-child{background:var(--gold)}
.frame-bar span{margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.frame img{display:block; width:100%; height:auto}

/* feature grid */
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:980px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}
.feat{padding:26px 22px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); transition:border-color .35s,transform .35s,box-shadow .35s}
.feat:hover{border-color:var(--line-hot); transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(237,168,0,.4)}
.feat-ic{width:46px; height:46px; margin-bottom:16px; border-radius:12px; display:grid; place-items:center;
  background:var(--gold-soft); border:1px solid var(--line-hot); color:var(--gold-br)}
.feat-ic svg{width:24px; height:24px}
.feat h3{font-size:1.12rem; margin-bottom:9px}
.feat p{color:var(--ink-mut); font-size:.92rem; margin:0}

/* alternating detail rows */
.detail{display:grid; gap:clamp(40px,7vh,84px)}
.drow{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.drow.reverse .drow-copy{order:2} .drow.reverse .drow-media{order:1}
@media(max-width:860px){.drow,.drow.reverse{grid-template-columns:1fr; gap:26px}
  .drow.reverse .drow-copy,.drow.reverse .drow-media{order:0}}
.drow-copy h2{font-size:clamp(1.7rem,3.6vw,2.5rem); margin:6px 0 16px}
.drow-copy p{color:var(--ink-mut); margin:0; max-width:52ch}
.drow-media img{width:100%; height:auto; border:1px solid var(--line-hot); border-radius:16px;
  box-shadow:0 30px 70px -44px rgba(237,168,0,.5)}
.ticks{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.ticks li{position:relative; padding-left:30px; color:var(--ink-mut); font-size:.96rem}
.ticks li::before{content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%;
  background:var(--gold-soft); border:1px solid var(--line-hot)}
.ticks li::after{content:""; position:absolute; left:6px; top:7px; width:6px; height:9px;
  border:2px solid var(--gold-br); border-top:0; border-left:0; transform:rotate(45deg)}

/* video player */
.video-frame{border:1px solid var(--line-hot); border-radius:16px; overflow:hidden; background:var(--surface);
  box-shadow:0 40px 90px -50px rgba(237,168,0,.45), 0 20px 50px -30px rgba(0,0,0,.8)}
.video-stage{position:relative; aspect-ratio:16/9; background:#000}
.video-el{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; display:block}
.video-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; justify-items:center;
  gap:16px; padding:0; background:none; border:0; cursor:pointer; transition:opacity .35s,transform .35s}
.video-play.hidden{opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.85)}
.vp-ring{position:relative; width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold-br),var(--gold-deep)); box-shadow:0 0 44px rgba(237,168,0,.5)}
.vp-ring::before{content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--gold); animation:ping 2.4s var(--ease) infinite}
.vp-ring svg{width:30px; height:30px; margin-left:4px; color:#1a1200}
.vp-label{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-br); text-shadow:0 2px 12px rgba(0,0,0,.8)}
.video-soon{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--gold-br);
  background:rgba(8,9,12,.82); border:1px solid var(--line-hot); padding:8px 15px; border-radius:100px; backdrop-filter:blur(4px)}
.video-soon.show{display:block}

/* background-video band (optional variant) */
.bgvideo{position:relative; overflow:hidden; display:grid; place-items:center; text-align:center;
  min-height:clamp(360px,60vh,560px); padding:clamp(64px,11vh,128px) clamp(20px,5vw,46px)}
.bgvideo-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:var(--bg-2)}
.bgvideo-scrim{position:absolute; inset:0; z-index:1; background:
  radial-gradient(120% 100% at 50% 0%, rgba(237,168,0,.10), transparent 55%),
  linear-gradient(180deg, rgba(8,9,12,.72), rgba(8,9,12,.84))}
.bgvideo .hero-grid{z-index:1; opacity:.4; mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent 82%)}
.bgvideo-inner{position:relative; z-index:2; max-width:680px}
.bgvideo-inner .hero-eyebrow{margin-bottom:18px}
.bgvideo-inner h2{font-size:clamp(1.9rem,4.6vw,3.2rem); margin:0 0 14px; text-shadow:0 4px 30px rgba(0,0,0,.6)}
.bgvideo-inner p{color:var(--ink-mut); margin:0 0 26px; font-size:clamp(1rem,1.6vw,1.15rem)}

/* gallery + lightbox */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gallery{grid-template-columns:1fr}}
.shot{position:relative; padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  cursor:zoom-in; background:var(--surface); aspect-ratio:16/10}
.shot img{width:100%; height:100%; object-fit:cover; filter:brightness(.85) saturate(.95); transition:transform .5s var(--ease),filter .4s}
.shot:hover img{transform:scale(1.07); filter:brightness(1) saturate(1.05)}
.shot::after{content:"⤢"; position:absolute; right:10px; bottom:8px; font-size:14px; color:var(--gold-br);
  background:rgba(8,9,12,.7); border:1px solid var(--line-hot); border-radius:7px; width:26px; height:26px;
  display:grid; place-items:center; opacity:0; transition:opacity .3s}
.shot:hover::after{opacity:1}
.shot-tag{position:absolute; left:10px; top:10px; font-family:var(--mono); font-size:10px; color:#1a1200;
  background:var(--gold); padding:3px 7px; border-radius:6px; font-weight:600}
.lightbox{position:fixed; inset:0; z-index:10000; display:none; place-items:center; padding:5vh 4vw;
  background:rgba(5,6,9,.92); backdrop-filter:blur(8px)}
.lightbox.open{display:grid}
.lb-img{max-width:90vw; max-height:88vh; border:1px solid var(--line-hot); border-radius:12px;
  box-shadow:0 40px 100px -30px rgba(237,168,0,.4)}
.lb-close,.lb-nav{position:absolute; background:rgba(20,19,11,.7); border:1px solid var(--line-hot); color:var(--gold-br);
  width:48px; height:48px; border-radius:12px; cursor:pointer; font-size:22px; line-height:1; transition:background .25s,transform .25s}
.lb-close:hover,.lb-nav:hover{background:var(--gold-soft); transform:scale(1.06)}
.lb-close{top:24px; right:24px}
.lb-nav{top:50%; transform:translateY(-50%)} .lb-prev{left:18px} .lb-next{right:18px}
.lb-nav:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:560px){.lb-nav{top:auto; bottom:20px; transform:none} .lb-prev{left:30%} .lb-next{right:30%} .lb-nav:hover{transform:scale(1.06)}}

/* REVEAL */
.reveal{opacity:0; transform:translateY(26px); filter:blur(6px); transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.reveal.in{opacity:1; transform:none; filter:none}
[data-type]{visibility:hidden}
.typing [data-type],.typed [data-type]{visibility:visible}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none; filter:none} [data-type]{visibility:visible} .fx-grain{display:none}
}