/* ==========================================================================
   EC SAFETY BIZ S.R.L. — "The Registry" design system
   Archival ink + seal gold + drafting blueprint.
   --------------------------------------------------------------------------
   MOTION POLICY (deliberate):
   This stylesheet NEVER queries `prefers-reduced-motion`. Windows users who
   have "Show animations in Windows" switched off make the browser report
   `reduce`, which would silently kill the whole experience. Per client
   requirement motion is always-on. Smooth scrolling is implemented in JS with
   requestAnimationFrame for the same reason (native smooth scroll can be
   force-disabled by that OS setting).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------- tokens */
:root{
  --ink-900:#05080E;
  --ink-850:#070B13;
  --ink-800:#0A0F1A;
  --ink-700:#0E1523;
  --ink-600:#131C2D;
  --ink-500:#1B2740;

  --paper:#F6F3EC;
  --paper-2:#E7E2D6;
  --muted:#98A2B4;
  --muted-2:#7B869B;

  --gold:#E9B44C;
  --gold-hi:#FFD98A;
  --gold-lo:#A97B23;
  --azure:#6AA5FF;
  --azure-hi:#A9CBFF;
  --azure-lo:#2E5FB0;

  --line:rgba(246,243,236,.10);
  --line-2:rgba(246,243,236,.18);
  --line-3:rgba(246,243,236,.28);
  --gold-line:rgba(233,180,76,.32);

  --f-display:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --f-body:'Archivo',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  --fs-display:clamp(2.6rem,6.1vw,5.25rem);
  --fs-h1:clamp(2.2rem,4.6vw,3.7rem);
  --fs-h2:clamp(1.85rem,3.5vw,2.95rem);
  --fs-h3:clamp(1.2rem,1.9vw,1.55rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;

  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(4.5rem,10vw,9rem);
  --max:1240px;
  --max-narrow:820px;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --sh-2:0 12px 34px -12px rgba(0,0,0,.65);
  --sh-3:0 34px 80px -28px rgba(0,0,0,.8);
  --sh-gold:0 18px 46px -18px rgba(233,180,76,.45);

  --e-out:cubic-bezier(.22,.94,.32,1);
  --e-in-out:cubic-bezier(.66,0,.24,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  --z-bg:0; --z-body:10; --z-sticky:30; --z-cookie:45; --z-nav:50; --z-drawer:60; --z-above:70; --z-cursor:90;
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:112px}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--paper);
  background:var(--ink-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink-900)}

/* --------------------------------------------------- atmospheric layers  */
.bg-layer{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none}

.bg-grid{
  background-image:
    linear-gradient(to right,rgba(246,243,236,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(246,243,236,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 120% 85% at 50% 0%,#000 15%,transparent 78%);
  mask-image:radial-gradient(ellipse 120% 85% at 50% 0%,#000 15%,transparent 78%);
  animation:gridDrift 34s linear infinite;
}
@keyframes gridDrift{to{background-position:64px 64px}}

.bg-glow::before,.bg-glow::after{
  content:'';position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;
}
.bg-glow::before{
  width:52vw;height:52vw;left:-14vw;top:-16vw;
  background:radial-gradient(circle,rgba(233,180,76,.30),transparent 66%);
  animation:bloomA 26s var(--e-in-out) infinite alternate;
}
.bg-glow::after{
  width:46vw;height:46vw;right:-12vw;top:12vw;
  background:radial-gradient(circle,rgba(46,95,176,.38),transparent 66%);
  animation:bloomB 32s var(--e-in-out) infinite alternate;
}
@keyframes bloomA{to{transform:translate3d(9vw,7vw,0) scale(1.22)}}
@keyframes bloomB{to{transform:translate3d(-8vw,10vw,0) scale(1.15)}}

.bg-grain{
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .9s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

.progress-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-nav);pointer-events:none}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));box-shadow:0 0 14px rgba(233,180,76,.65)}

/* ------------------------------------------------------------- structure */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:var(--z-body)}
.wrap-narrow{max-width:var(--max-narrow)}
main{position:relative;z-index:var(--z-body)}
section{position:relative}
.sec{padding-block:var(--sec)}
.sec-tight{padding-block:clamp(3rem,6vw,5rem)}

.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-out)}
.rule.in{transform:scaleX(1)}

/* ----------------------------------------------------------- typography  */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.05;letter-spacing:-.035em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
h4{font-size:1.05rem;letter-spacing:-.01em}
.display{font-size:var(--fs-display);font-weight:600;line-height:.97;letter-spacing:-.045em}
.lead{font-size:clamp(1.075rem,1.55vw,1.3rem);line-height:1.6;color:#C9D0DC;max-width:62ch}
.body-muted{color:var(--muted);max-width:68ch}
.txt-gold{color:var(--gold)}
.txt-azure{color:var(--azure)}
.mono{font-family:var(--f-mono)}

.display em,h1 em,h2 em{
  font-style:italic;font-weight:500;
  background:linear-gradient(100deg,var(--gold-hi),var(--gold) 48%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.kicker::before{
  content:'';width:26px;height:1px;background:currentColor;
  transform-origin:left;animation:kickDraw 2.6s var(--e-in-out) infinite;
}
@keyframes kickDraw{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}

.sec-head{display:flex;flex-direction:column;gap:1.15rem;max-width:74ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head-row{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;max-width:none}
.sec-head-row > div{max-width:64ch;display:flex;flex-direction:column;gap:1.15rem}

/* ---------------------------------------------------------------- links  */
.link-u{position:relative;display:inline-flex;align-items:center;gap:.45rem;color:var(--gold);font-weight:600;cursor:pointer}
.link-u::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}
.link-u svg{transition:transform .4s var(--e-spring)}
.link-u:hover svg{transform:translateX(5px)}

/* --------------------------------------------------------------- buttons */
.btn{
  --bg:var(--gold);--fg:var(--ink-900);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.65rem;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .45s var(--e-spring),box-shadow .45s var(--e-out),background-color .3s,border-color .3s;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.5) 50%,transparent 72%);
  transform:translateX(-130%);transition:transform .7s var(--e-out);
}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--sh-gold)}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn svg{width:17px;height:17px;flex:none;transition:transform .4s var(--e-spring)}
.btn:hover svg{transform:translateX(4px)}

.btn-ghost{--bg:transparent;--fg:var(--paper);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost::before{background:linear-gradient(115deg,transparent 28%,rgba(233,180,76,.22) 50%,transparent 72%)}
.btn-ghost:hover{border-color:var(--gold-line);box-shadow:0 16px 40px -18px rgba(0,0,0,.9)}
.btn-sm{min-height:44px;padding:.65rem 1.2rem;font-size:var(--fs-xs)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* -------------------------------------------------------------- surfaces */
.panel{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(155deg,rgba(246,243,236,.055),rgba(246,243,236,.015) 55%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.panel-solid{background:linear-gradient(160deg,var(--ink-700),var(--ink-850));-webkit-backdrop-filter:none;backdrop-filter:none}

/* corner registration ticks — recurring archival motif */
.ticks::before,.ticks::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:var(--gold-line);border-style:solid;transition:border-color .4s
}
.ticks::before{top:10px;left:10px;border-width:1px 0 0 1px}
.ticks::after{bottom:10px;right:10px;border-width:0 1px 1px 0}
.ticks:hover::before,.ticks:hover::after{border-color:var(--gold)}

/* ============================================================== NAVIGATION */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  padding-block:.85rem;
  transition:background-color .5s var(--e-out),border-color .5s,box-shadow .5s,padding .5s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(5,8,14,.78);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  box-shadow:0 18px 44px -30px #000;
  padding-block:.55rem;
}
.nav.hidden{transform:translateY(-102%)}
.nav{transform:translateY(0);transition-property:transform,background-color,border-color,box-shadow,padding;transition-duration:.55s,.5s,.5s,.5s,.5s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

/* --- logo ---------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;gap:.7rem;flex:none}
.logo-mark{width:42px;height:42px;flex:none;overflow:visible}
.logo-mark .lm-arc{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:lmDraw 1.5s var(--e-out) .15s forwards;
}
@keyframes lmDraw{to{stroke-dashoffset:0}}
.logo-mark .lm-bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:lmBar .55s var(--e-out) forwards}
.logo-mark .lm-bar:nth-of-type(1){animation-delay:.55s}
.logo-mark .lm-bar:nth-of-type(2){animation-delay:.68s}
.logo-mark .lm-bar:nth-of-type(3){animation-delay:.81s}
@keyframes lmBar{to{transform:scaleX(1)}}
.logo:hover .lm-bar{animation:lmNudge .6s var(--e-spring)}
.logo:hover .lm-bar:nth-of-type(2){animation-delay:.05s}
.logo:hover .lm-bar:nth-of-type(3){animation-delay:.1s}
@keyframes lmNudge{0%{transform:translateX(0) scaleX(1)}45%{transform:translateX(3px) scaleX(1)}100%{transform:translateX(0) scaleX(1)}}
.logo:hover .lm-dot{animation:lmPop .6s var(--e-spring)}
@keyframes lmPop{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.lm-dot{transform-box:fill-box;transform-origin:center}

.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.logo-sub{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.3em;color:var(--muted-2);text-transform:uppercase;margin-top:.3rem}

/* --- desktop menu -------------------------------------------------------- */
.nav-menu{display:flex;align-items:center;gap:.25rem}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .85rem;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:500;color:#C4CBD8;
  transition:color .3s var(--e-out);
}
.nav-link::after{
  content:'';position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--e-out);
}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--paper)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-link[aria-current="page"]{color:var(--gold)}
.nav-caret{width:11px;height:11px;transition:transform .35s var(--e-out)}
.has-mega:hover .nav-caret,.has-mega.open .nav-caret{transform:rotate(180deg)}

/* --- mega dropdown ------------------------------------------------------- */
.has-mega{position:relative}
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;
  width:min(680px,88vw);padding:.85rem;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(10,15,26,.94);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:var(--sh-3);
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem;
  opacity:0;visibility:hidden;
  transform:translate(-50%,-12px) scale(.97);
  /* Closing is delayed so a slightly clumsy diagonal move does not kill the
     panel. `visibility` (not pointer-events) gates interaction, so during the
     delay the panel is still hoverable and re-entering it cancels the close. */
  transition:opacity .3s var(--e-out) .32s,
             transform .38s var(--e-out) .32s,
             visibility 0s linear .62s;
}
/* Invisible bridge across the gap between trigger and panel: without it the
   pointer leaves .has-mega mid-travel and the menu snaps shut. It stops 2px
   into the trigger row, so the other nav links stay clickable. */
.mega::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}

.has-mega:hover .mega,.has-mega:focus-within .mega{
  opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);
  transition:opacity .3s var(--e-out),transform .42s var(--e-out),visibility 0s;
}
.mega-item{
  display:flex;gap:.75rem;align-items:flex-start;padding:.7rem .8rem;border-radius:var(--r-md);
  border:1px solid transparent;transition:background-color .3s,border-color .3s,transform .35s var(--e-out);
}
.mega-item:hover{background:rgba(246,243,236,.05);border-color:var(--line);transform:translateX(3px)}
.mega-ico{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(233,180,76,.1);border:1px solid var(--gold-line);color:var(--gold);transition:background-color .3s}
.mega-item:hover .mega-ico{background:rgba(233,180,76,.2)}
.mega-ico svg{width:17px;height:17px}
.mega-item > span:last-child{display:flex;flex-direction:column;min-width:0}
.mega-t{display:block;font-weight:600;font-size:.92rem;line-height:1.3}
.mega-d{display:block;font-size:.78rem;color:var(--muted);line-height:1.45;margin-top:.2rem}
.mega-foot{grid-column:1/-1;margin-top:.3rem;padding:.75rem .8rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.mega-foot span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

.nav-cta{display:flex;align-items:center;gap:.7rem;flex:none}

/* --- burger -------------------------------------------------------------- */
.burger{
  display:none;width:46px;height:46px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);flex:none;
  /* flex, not grid: auto grid rows stretch and would break the X transform */
  flex-direction:column;align-items:center;justify-content:center;
  transition:border-color .3s,background-color .3s;
}
.burger:hover{border-color:var(--gold-line);background:rgba(233,180,76,.07)}
.burger span{display:block;width:19px;height:1.6px;background:var(--paper);border-radius:2px;transition:transform .45s var(--e-spring),opacity .25s}
.burger span+span{margin-top:5px}
.burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* --- mobile drawer ------------------------------------------------------- */
.drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:rgba(5,8,14,.97);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  padding:6.5rem var(--gut) 2.5rem;
  overflow-y:auto;
  clip-path:circle(0% at calc(100% - 46px) 44px);
  transition:clip-path .72s var(--e-in-out);
  pointer-events:none;
}
.drawer.open{clip-path:circle(150% at calc(100% - 46px) 44px);pointer-events:auto}
.drawer-nav{display:flex;flex-direction:column;gap:.15rem;border-top:1px solid var(--line)}
.drawer-link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem .25rem;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-size:1.55rem;font-weight:600;letter-spacing:-.03em;
  opacity:0;transform:translateY(22px);
  transition:color .3s,opacity .5s var(--e-out),transform .5s var(--e-out);
}
.drawer.open .drawer-link{opacity:1;transform:none}
.drawer.open .drawer-link:nth-child(1){transition-delay:.18s}
.drawer.open .drawer-link:nth-child(2){transition-delay:.24s}
.drawer.open .drawer-link:nth-child(3){transition-delay:.30s}
.drawer.open .drawer-link:nth-child(4){transition-delay:.36s}
.drawer.open .drawer-link:nth-child(5){transition-delay:.42s}
.drawer.open .drawer-link:nth-child(6){transition-delay:.48s}
.drawer.open .drawer-link:nth-child(7){transition-delay:.54s}
.drawer.open .drawer-link:nth-child(8){transition-delay:.60s}
.drawer.open .drawer-link:nth-child(9){transition-delay:.66s}
.drawer.open .drawer-link:nth-child(10){transition-delay:.72s}
.drawer-link:hover{color:var(--gold)}
.drawer-link i{font-family:var(--f-mono);font-style:normal;font-size:.7rem;color:var(--muted-2);letter-spacing:.14em}
.drawer-foot{margin-top:2.5rem;display:flex;flex-direction:column;gap:1rem;opacity:0;transform:translateY(18px);transition:opacity .5s var(--e-out) .78s,transform .5s var(--e-out) .78s}
.drawer.open .drawer-foot{opacity:1;transform:none}
body.locked{overflow:hidden}
body.locked .nav{z-index:var(--z-above)}
body.locked .nav.scrolled{background:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* =================================================================== HERO */
.hero{position:relative;padding-top:clamp(7.5rem,12vw,9.5rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.hero-copy .display{max-width:16ch}

/* staggered page-load entrance */
[data-enter]{opacity:0;transform:translateY(26px);filter:blur(6px)}
html.ready [data-enter]{
  animation:enterUp .95s var(--e-out) forwards;
  animation-delay:calc(var(--d,0) * 1ms);
}
@keyframes enterUp{to{opacity:1;transform:none;filter:blur(0)}}

/* word-by-word headline reveal */
.hl-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hl-word > span{display:inline-block;transform:translateY(110%);animation:hlUp .95s var(--e-out) forwards;animation-delay:calc(180ms + var(--i,0) * 78ms)}
@keyframes hlUp{to{transform:translateY(0)}}

.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .82rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(246,243,236,.035);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#B9C2D1;
  transition:border-color .35s,color .35s,transform .35s var(--e-out);
}
.chip:hover{border-color:var(--gold-line);color:var(--paper);transform:translateY(-2px)}
.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(233,180,76,.6);animation:dotPulse 2.4s var(--e-out) infinite}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(233,180,76,.55)}70%{box-shadow:0 0 0 9px rgba(233,180,76,0)}100%{box-shadow:0 0 0 0 rgba(233,180,76,0)}}

/* hero art frame */
.hero-art{position:relative}
.art-frame{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  background:radial-gradient(120% 100% at 70% 0%,rgba(46,95,176,.16),transparent 62%),linear-gradient(160deg,rgba(246,243,236,.05),transparent 58%);
  padding:clamp(.9rem,2vw,1.4rem);overflow:hidden;
  box-shadow:var(--sh-3);
}
.art-frame::after{ /* slow sheen pass */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.055) 50%,transparent 62%);
  transform:translateX(-100%);animation:sheen 7.5s var(--e-in-out) 1.4s infinite;
}
@keyframes sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.art-frame .illus{width:100%;height:auto}

/* floating micro-cards around the art */
.float-card{
  position:absolute;display:flex;align-items:center;gap:.6rem;
  padding:.6rem .85rem;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(10,15,26,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:var(--sh-2);white-space:nowrap;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#CDD5E1;
}
.float-card svg{width:14px;height:14px;color:var(--gold);flex:none}
.float-a{top:6%;right:-4%;animation:floatY 6.5s var(--e-in-out) infinite}
.float-b{bottom:12%;left:-6%;animation:floatY 8s var(--e-in-out) .9s infinite}
.float-c{bottom:-3%;right:8%;animation:floatY 7.2s var(--e-in-out) .4s infinite}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-13px) rotate(.5deg)}}

/* scroll cue */
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;margin-top:.5rem;color:var(--muted-2);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:color .3s}
.scroll-cue:hover{color:var(--gold)}
.scroll-cue .track{width:1px;height:44px;background:linear-gradient(var(--line-3),transparent);position:relative;overflow:hidden}
.scroll-cue .track::after{content:'';position:absolute;top:-44px;left:0;width:1px;height:44px;background:linear-gradient(transparent,var(--gold));animation:cueRun 2.1s var(--e-in-out) infinite}
@keyframes cueRun{0%{transform:translateY(0)}100%{transform:translateY(88px)}}

/* =============================================================== MARQUEE */
.marquee{
  position:relative;overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:1.05rem;
  background:linear-gradient(90deg,rgba(233,180,76,.05),transparent 30%,transparent 70%,rgba(46,95,176,.06));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-track span{
  display:inline-flex;align-items:center;gap:1.1rem;padding-inline:1.1rem;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#A9B3C3;
}
.marquee-track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.8}
.marquee-alt .marquee-track{animation-direction:reverse;animation-duration:42s}

/* ============================================================ SCROLL REVEAL */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .85s var(--e-out),transform .85s var(--e-out),filter .85s var(--e-out);filter:blur(5px)}
[data-reveal].in{opacity:1;transform:none;filter:blur(0)}
[data-reveal="left"]{transform:translateX(-38px)}
[data-reveal="right"]{transform:translateX(38px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="clip"]{opacity:1;filter:none;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--e-out)}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}

/* ========================================================== SERVICE CARDS */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.35rem)}

.svc-card{
  position:relative;display:flex;flex-direction:column;gap:1.1rem;
  padding:clamp(1.5rem,2.4vw,2rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(246,243,236,.052),rgba(246,243,236,.012) 52%,transparent);
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform .55s var(--e-out),border-color .45s,box-shadow .55s var(--e-out);
}
.svc-card::before{ /* gold wash that rises on hover */
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 70% at 50% 108%,rgba(233,180,76,.20),transparent 68%);
  opacity:0;transition:opacity .55s var(--e-out);
}
.svc-card::after{ /* moving top hairline */
  content:'';position:absolute;top:0;left:0;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-100%);transition:transform .8s var(--e-out);
}
.svc-card:hover{transform:translateY(-7px);border-color:var(--gold-line);box-shadow:0 30px 60px -32px rgba(0,0,0,.95)}
.svc-card:hover::before{opacity:1}
.svc-card:hover::after{transform:translateX(100%)}

.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.svc-ico{
  width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;
  border:1px solid var(--gold-line);color:var(--gold);
  background:linear-gradient(150deg,rgba(233,180,76,.16),rgba(233,180,76,.03));
  transition:transform .6s var(--e-spring),background-color .4s;
}
.svc-card:hover .svc-ico{transform:rotate(-7deg) scale(1.08)}
.svc-ico svg{width:24px;height:24px}
.svc-ico svg [data-anim="stroke"]{stroke-dasharray:56;stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--e-out)}
.svc-card:hover .svc-ico svg [data-anim="stroke"]{stroke-dashoffset:112}
.svc-num{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--muted-2);padding-top:.35rem;transition:color .4s}
.svc-card:hover .svc-num{color:var(--gold)}

.svc-card h3{transition:color .35s}
.svc-card:hover h3{color:var(--gold-hi)}
.svc-card p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.svc-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.35rem}
.svc-tag{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:.24rem .6rem;transition:border-color .35s,color .35s}
.svc-card:hover .svc-tag{border-color:var(--line-2);color:#B4BDCB}
.svc-go{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:600;color:var(--gold);margin-top:.2rem}
.svc-go svg{width:15px;height:15px;transition:transform .45s var(--e-spring)}
.svc-card:hover .svc-go svg{transform:translateX(6px)}
.svc-card .stretch{position:absolute;inset:0;z-index:1}
.svc-card:focus-within{border-color:var(--gold-line)}

/* ================================================================= BENTO */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.5vw,1.25rem)}
.bento-cell{
  position:relative;padding:clamp(1.4rem,2.2vw,1.9rem);border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(246,243,236,.05),transparent 60%);
  display:flex;flex-direction:column;gap:.75rem;overflow:hidden;
  transition:border-color .45s,transform .5s var(--e-out),background-color .45s;
}
.bento-cell:hover{border-color:var(--line-2);transform:translateY(-4px)}
.bento-cell h4{font-family:var(--f-display);font-size:1.12rem;letter-spacing:-.02em}
.bento-cell p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.cell-2{grid-column:span 2}
.cell-4{grid-column:span 4}
.cell-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--gold-line);color:var(--gold);background:rgba(233,180,76,.09)}
.cell-ico svg{width:19px;height:19px}

/* orbiting decoration used inside bento cells */
.orbit{position:absolute;right:-46px;bottom:-46px;width:180px;height:180px;pointer-events:none;opacity:.6}
.orbit i{position:absolute;inset:0;border:1px dashed var(--line-2);border-radius:50%;animation:spin 26s linear infinite}
.orbit i:nth-child(2){inset:26px;animation-duration:19s;animation-direction:reverse;border-style:solid;border-color:var(--gold-line)}
.orbit i:nth-child(3){inset:54px;animation-duration:14s}
.orbit i::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.orbit i:nth-child(2)::after{background:var(--azure);box-shadow:0 0 10px var(--azure)}
@keyframes spin{to{transform:rotate(360deg)}}

/* =================================================================== STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{padding:clamp(1.5rem,2.6vw,2.2rem);background:var(--ink-850);display:flex;flex-direction:column;gap:.4rem;position:relative;transition:background-color .45s}
.stat:hover{background:var(--ink-700)}
.stat::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .7s var(--e-out)}
.stat:hover::after{width:100%}
.stat-n{font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.045em;line-height:1;background:linear-gradient(160deg,var(--paper),#8E9AAC);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-l{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted-2)}
.stat-d{font-size:.86rem;color:var(--muted);line-height:1.5}

/* ================================================================= PROCESS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);position:relative}
.steps::before{ /* connecting rail */
  content:'';position:absolute;top:27px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,var(--gold-line),var(--line-2),var(--gold-line));
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e-out) .2s;
}
.steps.in::before{transform:scaleX(1)}
.step{display:flex;flex-direction:column;gap:.85rem;position:relative;z-index:1}
.step-badge{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--f-mono);font-size:.82rem;font-weight:600;color:var(--gold);
  border:1px solid var(--gold-line);background:var(--ink-850);
  position:relative;transition:transform .5s var(--e-spring),background-color .4s,color .4s;
}
.step-badge::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--gold-line);opacity:0;transform:scale(.85);transition:opacity .5s,transform .5s var(--e-out)}
.step:hover .step-badge{transform:scale(1.08);background:var(--gold);color:var(--ink-900)}
.step:hover .step-badge::before{opacity:1;transform:scale(1)}
.step h4{font-family:var(--f-display);font-size:1.1rem}
.step p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}

/* vertical variant for service pages */
.steps-v{display:flex;flex-direction:column;gap:0}
.steps-v .step-row{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-bottom:2.1rem;position:relative}
.steps-v .step-row:last-child{padding-bottom:0}
.steps-v .step-row::before{content:'';position:absolute;left:26px;top:56px;bottom:6px;width:1px;background:linear-gradient(var(--gold-line),transparent)}
.steps-v .step-row:last-child::before{display:none}
.steps-v .step-body h4{font-family:var(--f-display);font-size:1.15rem;margin-bottom:.4rem}
.steps-v .step-body p{font-size:var(--fs-sm);color:var(--muted);line-height:1.65}

/* ================================================================ FEATURES */
.feat-list{display:flex;flex-direction:column;gap:.1rem}
.feat{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:flex-start;padding:1.05rem 0;border-bottom:1px solid var(--line);transition:padding-left .45s var(--e-out)}
.feat:hover{padding-left:.6rem}
.feat-mark{width:22px;height:22px;flex:none;margin-top:.18rem;border-radius:6px;display:grid;place-items:center;background:rgba(233,180,76,.12);border:1px solid var(--gold-line);color:var(--gold);transition:background-color .4s,transform .5s var(--e-spring)}
.feat:hover .feat-mark{background:var(--gold);color:var(--ink-900);transform:rotate(-8deg)}
.feat-mark svg{width:12px;height:12px}
.feat strong{display:block;font-weight:600;font-size:.98rem;margin-bottom:.15rem}
.feat span{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}

/* pill checklist */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.check{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem .95rem;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(246,243,236,.022);font-size:var(--fs-sm);color:#BEC6D3;transition:border-color .4s,transform .4s var(--e-out),background-color .4s}
.check:hover{border-color:var(--gold-line);transform:translateY(-3px);background:rgba(233,180,76,.05)}
.check svg{width:15px;height:15px;flex:none;color:var(--gold);margin-top:.22rem}

/* ================================================================ ACCORDION */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem .2rem;text-align:left;
  font-family:var(--f-display);font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:600;letter-spacing:-.02em;
  transition:color .35s,padding-left .45s var(--e-out);
}
.acc-btn:hover{color:var(--gold);padding-left:.55rem}
.acc-sign{position:relative;width:22px;height:22px;flex:none}
.acc-sign::before,.acc-sign::after{content:'';position:absolute;top:50%;left:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);transition:transform .45s var(--e-spring),opacity .3s}
.acc-sign::before{width:13px;height:1.6px}
.acc-sign::after{width:1.6px;height:13px}
.acc-item.open .acc-sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc-item.open .acc-btn{color:var(--gold)}
.acc-panel{overflow:hidden;height:0;transition:height .5s var(--e-out)}
.acc-inner{padding:0 3rem 1.5rem .2rem;color:var(--muted);font-size:var(--fs-sm);line-height:1.72;max-width:78ch}

/* =================================================================== CTA */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--gold-line);
  padding:clamp(2.4rem,5vw,4.2rem);
  background:radial-gradient(110% 130% at 12% 0%,rgba(233,180,76,.20),transparent 58%),linear-gradient(150deg,var(--ink-700),var(--ink-900));
  display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:center;
}
.cta::before{ /* rotating conic halo */
  content:'';position:absolute;width:130%;aspect-ratio:1;left:-15%;top:-90%;
  background:conic-gradient(from 0deg,transparent 0%,rgba(233,180,76,.12) 12%,transparent 26%,transparent 62%,rgba(106,165,255,.10) 74%,transparent 88%);
  animation:spin 22s linear infinite;pointer-events:none;
}
.cta > *{position:relative}
.cta h2{max-width:16ch}
.cta-side{display:flex;flex-direction:column;gap:.9rem}
.cta-line{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-sm);color:#C4CBD8}
.cta-line svg{width:16px;height:16px;color:var(--gold);flex:none}

/* ================================================================= FOOTER */
.footer{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(233,180,76,.035));margin-top:clamp(3rem,7vw,6rem)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(1.8rem,3.5vw,3rem);padding-block:clamp(3rem,6vw,4.5rem)}
.footer-brand{display:flex;flex-direction:column;gap:1.1rem;max-width:34ch}
.footer-brand p{font-size:var(--fs-sm);color:var(--muted);line-height:1.65}
.footer h5{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.05rem}
.footer-col ul{display:flex;flex-direction:column;gap:.6rem}
.footer-col a,.footer-col li{font-size:var(--fs-sm);color:var(--muted);transition:color .3s}
.footer-col a{position:relative;display:inline-flex;align-items:center;gap:.5rem}
.footer-col a::before{content:'';width:0;height:1px;background:var(--gold);transition:width .38s var(--e-out)}
.footer-col a:hover{color:var(--paper)}
.footer-col a:hover::before{width:12px}
.footer-legal-grid{display:flex;flex-direction:column;gap:.55rem;font-family:var(--f-mono);font-size:.72rem;color:var(--muted-2);line-height:1.7}
.footer-legal-grid b{color:#AEB7C5;font-weight:500}
.footer-bot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:1.5rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted-2)}
.footer-bot nav{display:flex;gap:1.35rem;flex-wrap:wrap}
.footer-bot a:hover{color:var(--gold)}
.to-top{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);transition:color .3s;cursor:pointer}
.to-top:hover{color:var(--gold)}
.to-top svg{width:14px;height:14px;transition:transform .45s var(--e-spring)}
.to-top:hover svg{transform:translateY(-4px)}

/* giant watermark wordmark at footer */
.footer-mark{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.06em;line-height:.8;
  font-size:clamp(3.2rem,15vw,13rem);text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(246,243,236,.09);
  padding-bottom:.1em;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap;
}

/* ============================================================ PAGE HEADER */
.page-hero{position:relative;padding-top:clamp(8rem,13vw,10.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);overflow:hidden}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.page-hero-copy{display:flex;flex-direction:column;gap:1.35rem;align-items:flex-start}
.page-hero-copy h1{max-width:15ch}
.crumbs{display:flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);flex-wrap:wrap}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.5}
.crumbs b{color:var(--gold);font-weight:500}

/* ===================================================== SPEC / DETAIL TABLE */
.spec{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec-row{display:grid;grid-template-columns:minmax(160px,.42fr) 1fr;gap:1rem;padding:1.05rem clamp(1rem,2vw,1.5rem);border-bottom:1px solid var(--line);transition:background-color .4s}
.spec-row:last-child{border-bottom:0}
.spec-row:hover{background:rgba(233,180,76,.045)}
.spec-k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);padding-top:.15rem}
.spec-v{font-size:var(--fs-sm);color:#CBD2DE;line-height:1.6}

/* ================================================================ SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.split-3-2{grid-template-columns:1.35fr 1fr}
.split-2-3{grid-template-columns:1fr 1.35fr}
.stack{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.stack-tight{gap:.85rem}

/* ============================================================ RELATED NAV */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.rel-card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .4s,transform .45s var(--e-out),background-color .4s}
.rel-card:hover{border-color:var(--gold-line);transform:translateY(-4px);background:rgba(233,180,76,.045)}
.rel-card i{font-family:var(--f-mono);font-style:normal;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.rel-card strong{font-family:var(--f-display);font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.rel-card span{font-size:.85rem;color:var(--muted)}
.rel-card svg{width:15px;height:15px;color:var(--gold);margin-top:.3rem;transition:transform .45s var(--e-spring)}
.rel-card:hover svg{transform:translateX(6px)}

/* ================================================================== FORM */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem;position:relative}
.field-full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);transition:color .3s}
.field:focus-within label{color:var(--gold)}
.field input,.field textarea,.field select{
  width:100%;min-height:52px;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(246,243,236,.028);color:var(--paper);font-size:var(--fs-sm);
  transition:border-color .35s,background-color .35s,box-shadow .35s;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2398A2B4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.field input::placeholder,.field textarea::placeholder{color:#59647A}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-line);background:rgba(233,180,76,.05);box-shadow:0 0 0 3px rgba(233,180,76,.09)}
.field-err{font-size:.75rem;color:#FF9B8A;height:0;opacity:0;overflow:hidden;transition:height .3s,opacity .3s}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:rgba(255,120,100,.55)}
.field.invalid .field-err{height:1.1rem;opacity:1}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.83rem;color:var(--muted);line-height:1.55;cursor:pointer}
.consent input{width:19px;height:19px;min-height:0;flex:none;margin-top:.15rem;accent-color:var(--gold);cursor:pointer}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.form-note{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.form-note svg{width:14px;height:14px;color:var(--gold)}
.form-status{grid-column:1/-1;padding:.9rem 1.1rem;border-radius:var(--r-md);border:1px solid var(--gold-line);background:rgba(233,180,76,.08);font-size:var(--fs-sm);color:var(--gold-hi);display:none;align-items:center;gap:.7rem}
.form-status.show{display:flex;animation:enterUp .6s var(--e-out) forwards}
.form-status svg{width:17px;height:17px;flex:none}

/* ========================================================== CONTACT CARDS */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.cc{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .45s,transform .5s var(--e-out)}
.cc:hover{border-color:var(--gold-line);transform:translateY(-5px)}
.cc-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;border:1px solid var(--gold-line);background:rgba(233,180,76,.1);color:var(--gold);margin-bottom:.35rem}
.cc-ico svg{width:20px;height:20px}
.cc h4{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);font-weight:500}
.cc a,.cc p{font-size:1.02rem;color:var(--paper);line-height:1.5;font-weight:500}
.cc a{transition:color .3s}
.cc a:hover{color:var(--gold)}
.cc small{font-size:.78rem;color:var(--muted-2);font-family:var(--f-mono);letter-spacing:.06em}
.ph-tag{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azure);border:1px dashed rgba(106,165,255,.4);border-radius:var(--r-pill);padding:.15rem .5rem;margin-left:.4rem;vertical-align:middle}

/* ============================================================ LEGAL PAGES */
.legal-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.toc{position:sticky;top:120px;border-left:1px solid var(--line);padding-left:1.15rem;display:flex;flex-direction:column;gap:.15rem}
.toc h6{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.toc a{position:relative;font-size:.85rem;color:var(--muted-2);padding:.4rem 0;line-height:1.4;transition:color .3s,transform .35s var(--e-out);display:block}
.toc a::before{content:'';position:absolute;left:-1.15rem;top:50%;width:2px;height:0;background:var(--gold);transform:translateY(-50%);transition:height .35s var(--e-out)}
.toc a:hover{color:#B9C2D1;transform:translateX(3px)}
.toc a.active{color:var(--gold)}
.toc a.active::before{height:70%}

.prose{max-width:76ch;display:flex;flex-direction:column;gap:1.15rem}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin-top:2.2rem;scroll-margin-top:120px;display:flex;align-items:baseline;gap:.75rem}
.prose h2:first-child{margin-top:0}
.prose h2 i{font-family:var(--f-mono);font-style:normal;font-size:.7rem;letter-spacing:.14em;color:var(--gold);opacity:.85;flex:none}
.prose h3{font-size:1.06rem;margin-top:1.1rem;color:var(--paper-2)}
.prose p,.prose li{color:var(--muted);font-size:.97rem;line-height:1.78}
.prose strong{color:var(--paper-2);font-weight:600}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul{display:flex;flex-direction:column;gap:.55rem;padding-left:.2rem}
.prose ul li{position:relative;padding-left:1.35rem}
.prose ul li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--gold)}
.prose ol{counter-reset:c;display:flex;flex-direction:column;gap:.55rem}
.prose ol li{position:relative;padding-left:2rem;counter-increment:c}
.prose ol li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:.05em;font-family:var(--f-mono);font-size:.72rem;color:var(--gold)}
.legal-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.cookie-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:.85rem}
.cookie-table th,.cookie-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cookie-table th{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(233,180,76,.05)}
.cookie-table td{color:var(--muted)}
.cookie-table tr:last-child td{border-bottom:0}
.cookie-table tbody tr{transition:background-color .35s}
.cookie-table tbody tr:hover{background:rgba(246,243,236,.03)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ========================================================= COOKIE BANNER */
.cookiebar{
  position:fixed;left:var(--gut);right:var(--gut);bottom:var(--gut);z-index:var(--z-cookie);
  max-width:660px;margin-inline:auto;padding:1.15rem 1.35rem;
  border:1px solid var(--gold-line);border-radius:var(--r-lg);
  background:rgba(10,15,26,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:var(--sh-3);
  display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;
  transform:translateY(150%);opacity:0;transition:transform .8s var(--e-spring),opacity .5s;
}
.cookiebar.show{transform:none;opacity:1}
.cookiebar p{font-size:.85rem;color:var(--muted);line-height:1.55;flex:1 1 300px}
.cookiebar a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cookiebar .btn-row{flex:none}

/* ================================================== DECORATIVE MICRO-BITS */
/* thin animated vertical seam used between sections */
.seam{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--line-2) 20%,var(--line-2) 80%,transparent);overflow:hidden}
.seam::after{content:'';position:absolute;top:-30%;left:0;width:1px;height:30%;background:linear-gradient(transparent,var(--gold),transparent);animation:seamRun 5.5s var(--e-in-out) infinite}
@keyframes seamRun{0%{top:-32%}100%{top:102%}}
.seam-l{left:calc(var(--gut) / 2)}
.seam-r{right:calc(var(--gut) / 2)}

/* small drifting dot field */
.dots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dots i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.5;animation:driftUp linear infinite}
@keyframes driftUp{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:.6}100%{transform:translateY(-260px) scale(.3);opacity:0}}

/* rotating seal stamp */
.seal{position:relative;width:112px;height:112px;flex:none}
.seal-ring{position:absolute;inset:0;animation:spin 24s linear infinite}
.seal-ring text{font-family:var(--f-mono);font-size:8.6px;letter-spacing:.32em;fill:var(--gold);text-transform:uppercase}
.seal-core{position:absolute;inset:26px;border:1px solid var(--gold-line);border-radius:50%;display:grid;place-items:center;color:var(--gold);background:rgba(233,180,76,.06)}
.seal-core svg{width:26px;height:26px}
.seal-core::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--gold-line);opacity:.45;animation:sealPulse 3.4s var(--e-out) infinite}
@keyframes sealPulse{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}

/* animated "typing" caret used in mono strings */
.caret{display:inline-block;width:7px;height:1em;background:var(--gold);vertical-align:-.13em;margin-left:.18em;animation:blink 1.05s steps(2) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* thin ticker of registry data */
.reg-strip{display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center}
.reg-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);transition:border-color .35s,color .35s}
.reg-pill:hover{border-color:var(--gold-line);color:#B7C0CE}
.reg-pill b{color:var(--gold);font-weight:500}

/* magnetic/tilt helpers driven from JS */
.magnetic{will-change:transform}
.tilt{transform-style:preserve-3d;will-change:transform}

/* custom cursor halo (desktop pointer devices only) */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold-line);z-index:var(--z-cursor);pointer-events:none;transform:translate(-50%,-50%);transition:width .3s var(--e-out),height .3s var(--e-out),background-color .3s,border-color .3s,opacity .3s;opacity:0;mix-blend-mode:difference}
.cursor-dot{position:fixed;top:0;left:0;width:5px;height:5px;border-radius:50%;background:var(--gold);z-index:var(--z-cursor);pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cursor.on,.cursor-dot.on{opacity:1}
.cursor.grow{width:56px;height:56px;background:rgba(233,180,76,.1);border-color:var(--gold)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ============================================ SVG ILLUSTRATION UTILITIES */
.illus{overflow:visible}
.illus [class*="sv-"]{transform-box:fill-box;transform-origin:center}
.sv-spin{animation:spin 18s linear infinite}
.sv-spin-slow{animation:spin 34s linear infinite}
.sv-spin-rev{animation:spin 26s linear infinite reverse}
.sv-float{animation:svFloat 5.4s var(--e-in-out) infinite}
.sv-float-2{animation:svFloat 6.8s var(--e-in-out) .7s infinite}
.sv-float-3{animation:svFloat 8.1s var(--e-in-out) 1.4s infinite}
@keyframes svFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.sv-pulse{animation:svPulse 2.9s var(--e-in-out) infinite}
.sv-pulse-2{animation:svPulse 3.6s var(--e-in-out) .5s infinite}
@keyframes svPulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.sv-dash{stroke-dasharray:6 7;animation:svDash 1.6s linear infinite}
.sv-dash-slow{stroke-dasharray:4 9;animation:svDash 3.2s linear infinite}
@keyframes svDash{to{stroke-dashoffset:-26}}
.sv-draw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);animation:svDraw 2.6s var(--e-out) forwards}
@keyframes svDraw{to{stroke-dashoffset:0}}
.sv-scan{animation:svScan 3.4s var(--e-in-out) infinite}
@keyframes svScan{0%,100%{transform:translateY(-42px);opacity:0}12%,88%{opacity:1}50%{transform:translateY(42px)}}
.sv-ring{transform-origin:center;animation:svRing 3.2s var(--e-out) infinite}
.sv-ring-2{animation:svRing 3.2s var(--e-out) .9s infinite}
.sv-ring-3{animation:svRing 3.2s var(--e-out) 1.8s infinite}
@keyframes svRing{0%{transform:scale(.32);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.sv-blink{animation:svBlink 2.4s steps(1) infinite}
.sv-blink-2{animation:svBlink 3.1s steps(1) .6s infinite}
.sv-blink-3{animation:svBlink 2.7s steps(1) 1.2s infinite}
@keyframes svBlink{0%,45%{opacity:1}50%,95%{opacity:.18}100%{opacity:1}}
.sv-travel{animation:svTravel 4.6s var(--e-in-out) infinite}
.sv-travel-2{animation:svTravel 4.6s var(--e-in-out) 1.5s infinite}
.sv-travel-3{animation:svTravel 4.6s var(--e-in-out) 3s infinite}
@keyframes svTravel{
  0%{transform:translate(-58px,0) scale(.72);opacity:0}
  14%{opacity:1}
  50%{transform:translate(0,0) scale(1)}
  86%{opacity:1}
  100%{transform:translate(58px,0) scale(.72);opacity:0}
}
.sv-rise{animation:svRise 4.2s var(--e-out) infinite}
.sv-rise-2{animation:svRise 4.2s var(--e-out) 1.4s infinite}
.sv-rise-3{animation:svRise 4.2s var(--e-out) 2.8s infinite}
@keyframes svRise{0%{transform:translateY(26px) scale(.8);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-34px) scale(1);opacity:0}}
.sv-type{animation:svType 4.2s var(--e-out) infinite}
@keyframes svType{0%{transform:scaleX(0)}42%,100%{transform:scaleX(1)}}
.sv-type{transform-origin:left center}
.sv-wave{animation:svWave 1.4s var(--e-in-out) infinite alternate}
.sv-wave-2{animation:svWave 1.4s var(--e-in-out) .18s infinite alternate}
.sv-wave-3{animation:svWave 1.4s var(--e-in-out) .36s infinite alternate}
.sv-wave-4{animation:svWave 1.4s var(--e-in-out) .54s infinite alternate}
@keyframes svWave{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.sv-slide{animation:svSlide 5s var(--e-in-out) infinite}
.sv-slide-2{animation:svSlide 5s var(--e-in-out) 1.6s infinite}
@keyframes svSlide{0%,72%,100%{transform:translateX(0)}22%,50%{transform:translateX(15px)}}
.sv-tick{animation:svTick 6s steps(60,end) infinite}
@keyframes svTick{to{transform:rotate(360deg)}}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem}
  .steps::before{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:1fr 1fr}
  .contact-cards{grid-template-columns:1fr 1fr}
  .legal-layout{grid-template-columns:200px 1fr}
}
@media (max-width:900px){
  .nav-menu,.nav-cta .btn{display:none}
  .burger{display:flex}
  .hero-grid,.page-hero-grid,.split,.split-3-2,.split-2-3,.cta{grid-template-columns:1fr}
  .hero-copy .display{max-width:100%}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell-4{grid-column:span 2}
  .legal-layout{grid-template-columns:1fr}
  .toc{position:static;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.1rem;flex-direction:row;flex-wrap:wrap;gap:.35rem .9rem}
  .toc h6{width:100%;margin-bottom:.35rem}
  .toc a::before{display:none}
  .cta{text-align:left}
  .float-a{right:0}
  .float-b{left:0}
}
@media (max-width:660px){
  :root{--fs-body:1rem}
  .svc-grid,.stats,.steps,.rel-grid,.contact-cards,.bento,.checks{grid-template-columns:1fr}
  .cell-2,.cell-4{grid-column:span 1}
  .form{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:2.2rem}
  .spec-row{grid-template-columns:1fr;gap:.3rem}
  .float-card{font-size:.62rem;padding:.5rem .7rem}
  .float-c{display:none}
  .acc-inner{padding-right:.5rem}
  .seam{display:none}
  .footer-bot{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (max-width:420px){
  .float-card{display:none}
  .logo-sub{display:none}
}

/* print — keep the legal pages usable on paper */
@media print{
  .nav,.footer,.cookiebar,.bg-layer,.progress-rail,.cursor,.cursor-dot,.drawer{display:none!important}
  body{background:#fff;color:#111}
  .prose p,.prose li{color:#333}
  a{color:#111}
}

/* --- no-JS safety net: never leave content invisible ------------------- */
html.no-js [data-reveal],html.no-js [data-enter]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
html.no-js .acc-panel{height:auto!important}
html.no-js .cursor,html.no-js .cursor-dot{display:none}

/* ============================ SVG UTILITIES (part 2) — machine motions */
/* Specificity guard: `.illus [class*="sv-"]` sets transform-origin:center, so
   any utility that needs a different origin must out-specify it. */
.illus [class*="sv-"].sv-type{transform-origin:left center}

.sv-scan-x{animation:svScanX 3.6s var(--e-in-out) infinite}
@keyframes svScanX{
  0%,100%{transform:translateX(-88px);opacity:0}
  10%,90%{opacity:1}
  50%{transform:translateX(88px)}
}

.sv-stack{animation:svStack 3s var(--e-out) infinite}
.sv-stack-2{animation:svStack 3s var(--e-out) 1s infinite}
.sv-stack-3{animation:svStack 3s var(--e-out) 2s infinite}
@keyframes svStack{
  0%{transform:translateY(-52px);opacity:0}
  18%{opacity:1}
  55%{transform:translateY(0)}
  86%{opacity:1;transform:translateY(0)}
  100%{transform:translateY(9px);opacity:0}
}

.sv-sweep{animation:svSweep 7.4s var(--e-in-out) infinite}
@keyframes svSweep{
  0%{transform:translate(-48px,-58px)}
  30%{transform:translate(44px,-14px)}
  62%{transform:translate(-16px,46px)}
  100%{transform:translate(-48px,-58px)}
}

.sv-drawer{animation:svDrawer 6.4s var(--e-in-out) infinite}
@keyframes svDrawer{0%,100%{transform:translateX(0)}38%,66%{transform:translateX(28px)}}

.sv-bob{animation:svBob 2.8s var(--e-in-out) infinite alternate}
@keyframes svBob{from{transform:translateY(0)}to{transform:translateY(-7px)}}

/* ============================================ PROSE BLOCKS + INLINE CODE */
.prose{gap:2.5rem}
.prose-block{display:flex;flex-direction:column;gap:1.05rem}
.prose-block > h2{margin-top:0}
.prose-block > h3{margin-top:.3rem}

code{
  font-family:var(--f-mono);font-size:.86em;
  background:rgba(233,180,76,.09);border:1px solid var(--gold-line);
  border-radius:5px;padding:.12em .42em;color:var(--gold-hi);
  word-break:break-word;
}

/* legal pages get a shorter, wider illustration */
.page-hero .art-frame .illus[viewBox="0 0 560 300"]{width:100%}

/* ==========================================================================
   Fixes from the responsive + contrast audit
   ========================================================================== */

/* Grid and flex children default to min-width:auto, so one wide descendant
   (the cookies table) stretches the whole column past the viewport. */
.legal-layout > *,
.prose,.prose-block,.table-scroll,
.split > *,.split-3-2 > *,.split-2-3 > *,
.svc-grid > *,.stats > *,.bento > *,.rel-grid > *,.contact-cards > *,
.hero-grid > *,.page-hero-grid > *,.cta > *,.form > *{min-width:0}

.table-scroll{max-width:100%}
.cookie-table{min-width:540px}     /* scroll the table instead of crushing it */

/* Sideways reveal offsets are wider than the gutter on small screens, which
   pushes the document past the viewport before the element scrolls in. */
@media (max-width:900px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(30px)}
}

/* Slightly larger hit areas on the small footer / utility links. */
.footer-bot nav a{display:inline-block;padding-block:.35rem}
.to-top{padding:.4rem .1rem}
.crumbs a{display:inline-block;padding-block:.2rem}
.consent input{width:20px;height:20px}
.toc a{min-height:24px}

/* keep the cookie name on one line — the table scrolls instead of fragmenting */
.cookie-table td:first-child,.cookie-table th:first-child{white-space:nowrap}
.cookie-table code{white-space:nowrap}