/* Procidious Group — site styles
   Sibling of the Brand Rascals build: same bones (lacquer ground, grain, kanji
   accents, mono eyebrows, serif display), Procidious palette (wolf blue, ember,
   near-black). Single committed dark theme. */

:root{
  --ink:#07090C;            /* page ground */
  --slate:#0F1318;          /* cards */
  --slate-2:#151A21;        /* raised cards */
  --wolf:#1270C6;           /* brand blue */
  --ice:#55C5F1;            /* light blue — emphasis + glow */
  --ice-glow:rgba(85,197,241,.5);
  --steel:#7FA3C4;          /* labels, rules, secondary type */
  --steel-dim:rgba(127,163,196,.26);
  --ember:#EB6209;          /* CTA only */
  --ember-glow:rgba(235,98,9,.45);
  --bone:#EEF1F5;           /* primary text */
  --bone-dim:rgba(238,241,245,.68);
  --ash:#8A96A3;            /* muted captions */
  --display:"Playfair Display","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  --max:1180px;
  --gutter:clamp(20px,5vw,72px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--ice);color:var(--ink)}
a{color:inherit}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:2px}

/* ---------- atmosphere ---------- */
.aurora{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60vw 60vw at 84% 6%,rgba(18,112,198,.26),transparent 60%),
    radial-gradient(38vw 38vw at 6% 94%,rgba(235,98,9,.10),transparent 60%),
    radial-gradient(90vw 50vh at 50% 110%,rgba(85,197,241,.05),transparent 60%);
  opacity:0;animation:lightsUp 1.8s ease-out .2s forwards;
}
.aurora::after{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(34vw 34vw at 80% 10%,rgba(85,197,241,.14),transparent 62%);
  animation:drift 16s ease-in-out infinite alternate;
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.13;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.asanoha{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72' viewBox='0 0 41.57 72'%3E%3Cpath d='M0 12L0 36M0 12L20.78 0M0 12L20.78 24M0 36L20.78 24M0 36L20.78 48M0 60L0 36M0 60L20.78 48M0 60L20.78 72M20.78 0L41.57 12M20.78 24L41.57 12M20.78 24L41.57 36M20.78 48L41.57 36M20.78 48L41.57 60M20.78 72L41.57 60M0 12L6.93 16M0 12L6.93 8M6.93 8L20.78 0M6.93 16L20.78 24M0 36L6.93 32M0 36L6.93 40M6.93 32L20.78 24M6.93 40L20.78 48M0 60L6.93 56M0 60L6.93 64M6.93 56L20.78 48M6.93 64L20.78 72M20.78 24L13.86 28M20.78 24L13.86 20M13.86 20L0 12M13.86 28L0 36M20.78 48L13.86 44M20.78 48L13.86 52M13.86 44L0 36M13.86 52L0 60M20.78 0L13.86 4M13.86 4L0 12M20.78 72L13.86 68M13.86 68L0 60M20.78 24L27.71 20M20.78 24L27.71 28M27.71 20L41.57 12M27.71 28L41.57 36M20.78 48L27.71 44M20.78 48L27.71 52M27.71 44L41.57 36M27.71 52L41.57 60M20.78 0L27.71 4M27.71 4L41.57 12M20.78 72L27.71 68M27.71 68L41.57 60M41.57 12L34.64 16M41.57 12L34.64 8M34.64 8L20.78 0M34.64 16L20.78 24M41.57 36L34.64 32M41.57 36L34.64 40M34.64 32L20.78 24M34.64 40L20.78 48M41.57 60L34.64 56M41.57 60L34.64 64M34.64 56L20.78 48M34.64 64L20.78 72M41.57 12L41.57 36M41.57 36L41.57 60M0 12L13.86 12M13.86 12L20.78 24M13.86 12L20.78 0M0 36L13.86 36M13.86 36L20.78 24M13.86 36L20.78 48M0 60L13.86 60M13.86 60L20.78 48M13.86 60L20.78 72M41.57 12L27.71 12M27.71 12L20.78 24M27.71 12L20.78 0M41.57 36L27.71 36M27.71 36L20.78 24M27.71 36L20.78 48M41.57 60L27.71 60M27.71 60L20.78 48M27.71 60L20.78 72M20.78 24L20.78 0M20.78 24L20.78 48M20.78 48L20.78 72' fill='none' stroke='%2355C5F1' stroke-width='.8'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}
.rail{
  position:fixed;left:calc(var(--gutter) - 14px);top:0;bottom:0;width:1px;z-index:0;
  background:linear-gradient(to bottom,transparent,var(--steel-dim) 15%,var(--steel-dim) 85%,transparent);
}
@media (max-width:700px){.rail{display:none}}
@keyframes lightsUp{to{opacity:1}}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-4%,3%) scale(1.08)}}

.page{position:relative;z-index:2;transition:opacity .28s ease}
body.leaving .page{opacity:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

.spotlight{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),rgba(85,197,241,.055),transparent 70%);
}
body.has-pointer .spotlight{opacity:1}

/* ---------- preloader / progress / cursor ---------- */
.loader{
  position:fixed;inset:0;z-index:60;background:var(--ink);display:grid;place-items:center;align-content:center;gap:18px;
  transition:opacity .7s ease .1s,visibility .7s ease .1s;
}
.loader img{width:120px;height:auto;filter:drop-shadow(0 0 30px rgba(85,197,241,.35));animation:loaderPulse 1.6s ease-in-out infinite}
.loader-word{font-family:var(--mono);font-size:13px;letter-spacing:.6em;text-indent:.6em;color:var(--bone);opacity:.9}
.loader-line{width:120px;height:1px;background:var(--steel-dim);position:relative;overflow:hidden}
.loader-line::after{content:"";position:absolute;inset:0;background:var(--ice);transform:translateX(-101%);animation:loaderFill 1s cubic-bezier(.4,0,.2,1) forwards}
body.loaded .loader{opacity:0;visibility:hidden}
@keyframes loaderPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes loaderFill{to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:linear-gradient(to right,var(--wolf),var(--ice));box-shadow:0 0 12px var(--ice-glow)}

.cursor-ring,.cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:70;opacity:0;transition:opacity .3s}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(85,197,241,.75);border-radius:50%;
  transition:opacity .3s,width .25s,height .25s,margin .25s,border-color .25s,background .25s}
.cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--ice);box-shadow:0 0 8px var(--ice-glow)}
body.cursor-on .cursor-ring,body.cursor-on .cursor-dot{opacity:1}
body.cursor-on.cursor-hover .cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--ice);background:rgba(85,197,241,.08)}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.cursor-ring,.cursor-dot{display:none}}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;transition:background .4s,box-shadow .4s;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gutter);
  background:linear-gradient(to bottom,rgba(7,9,12,.94),rgba(7,9,12,.65) 70%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:40px;height:40px;flex:none}
.brand .mark img,.brand .mark svg{width:100%;height:100%;object-fit:contain}
.brand .wordmark{font-family:var(--mono);font-size:14px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;line-height:1;color:var(--bone)}
.brand .wordmark small{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.22em;color:var(--steel);margin-top:6px;text-transform:uppercase}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--bone-dim);transition:color .25s;padding-bottom:4px;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ice)}
.nav-links a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--ice)}
.nav-links a.ext{color:var(--steel)}
.nav-links a.ext::after{content:"↗";margin-left:6px;font-size:10px}
.br-seal{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-right:8px;transition:transform .3s}
.br-seal.big{width:30px;height:30px;vertical-align:-5px;margin-right:12px}
a:hover>.br-seal{transform:rotate(-8deg) scale(1.1)}
.foot ul a.with-seal{display:inline-flex;align-items:center}
.nav.scrolled{background:rgba(7,9,12,.92);box-shadow:0 1px 0 var(--steel-dim),0 20px 40px -30px rgba(0,0,0,.8)}
@media (max-width:960px){.nav-links{display:none}}
.menu-btn{display:none;background:transparent;border:1px solid var(--steel-dim);color:var(--bone);width:44px;height:44px;cursor:pointer;place-items:center}
.menu-btn svg{width:20px;height:20px}
@media (max-width:960px){
  .menu-btn{display:grid}
  .nav .btn{display:none}
}
.drawer{
  position:fixed;inset:0;z-index:30;background:rgba(7,9,12,.97);display:none;
  padding:calc(var(--gutter) + 20px) var(--gutter);
}
.drawer.open{display:grid;align-content:start;gap:8px}
.drawer a{font-family:var(--display);font-size:clamp(30px,8vw,44px);text-decoration:none;color:var(--bone);padding:12px 0;border-bottom:1px solid var(--steel-dim)}
.drawer a[aria-current="page"]{color:var(--ice);font-style:italic}
.drawer .close{position:absolute;top:18px;right:var(--gutter);background:transparent;border:1px solid var(--steel-dim);color:var(--bone);width:44px;height:44px;cursor:pointer;font-family:var(--mono);font-size:18px}
.drawer .btn{margin-top:22px;justify-self:start}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--steel);color:var(--bone);text-decoration:none;
  background:transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:color .3s,border-color .3s,box-shadow .3s;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--ice);transform:translateY(101%);transition:transform .35s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:var(--ink);border-color:var(--ice);box-shadow:0 0 28px rgba(85,197,241,.25)}
.btn:hover::before{transform:translateY(0)}
.btn:active{scale:.96}
.btn.solid{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn.solid::before{background:var(--bone)}
.btn.solid:hover{color:var(--ink);border-color:var(--bone);box-shadow:0 0 36px var(--ember-glow)}
.nav .btn{padding:11px 18px}
@media (max-width:520px){.nav .wordmark small{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:calc(100vh - 80px);display:grid;align-content:center;
  padding-top:clamp(40px,8vh,96px);padding-bottom:clamp(60px,10vh,120px);
}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:34px}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--steel)}
.hero h1{
  font-family:var(--display);
  font-size:clamp(46px,8.6vw,124px);line-height:.98;letter-spacing:-.02em;font-weight:400;
  max-width:13ch;
}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w>span{display:inline-block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 em,.em{font-style:italic;font-weight:400;color:var(--ice)}
.hero h1 em{background-image:linear-gradient(var(--ice),var(--ice));background-size:0% 2px;background-repeat:no-repeat;background-position:0 96%;animation:uline .9s cubic-bezier(.2,.7,.2,1) 1.35s forwards}
@keyframes uline{to{background-size:100% 2px}}
.hero h1 .w:nth-child(2)>span{animation-delay:.12s}
.hero h1 .w:nth-child(3)>span{animation-delay:.24s}
.hero h1 .w:nth-child(4)>span{animation-delay:.36s}
@keyframes rise{to{transform:translateY(0)}}
.hero .lede{
  margin-top:36px;max-width:56ch;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--bone-dim);
  opacity:0;animation:fadeUp .9s ease .7s forwards;
}
.hero .lede strong{color:var(--bone);font-weight:500}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;opacity:0;animation:fadeUp .9s ease .9s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.tatebana{
  position:absolute;right:var(--gutter);top:8%;writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--steel);
  opacity:0;animation:fadeUp 1.4s ease 1.1s forwards;user-select:none;
}
@media (max-width:900px){.tatebana{display:none}}

.open-sign{
  position:absolute;right:var(--gutter);bottom:clamp(30px,8vh,90px);display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ice);
  text-shadow:0 0 8px var(--ice-glow),0 0 22px rgba(85,197,241,.35);
  animation:flicker 7s linear infinite;
}
.open-sign .tube{width:56px;height:1px;background:var(--ice);box-shadow:0 0 10px var(--ice)}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}21%{opacity:.7}}

/* hero wolf watermark */
.hero .wolfbox{
  position:absolute;right:calc(var(--gutter) + 20px);top:50%;transform:translateY(-52%);width:min(34vw,470px);aspect-ratio:1;
  opacity:0;pointer-events:none;z-index:-1;filter:drop-shadow(0 0 60px rgba(85,197,241,.18));
  -webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 45%,#000 55%,transparent 100%);
  animation:fadeIn 1.6s ease .5s forwards;
}
.hero .wolfbox img{width:100%;height:auto;animation:breathe 8s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
.hero .wolfbox .eye{
  position:absolute;width:11%;height:6.5%;border-radius:50%;background:var(--ice);
  filter:blur(9px);mix-blend-mode:screen;opacity:.0;animation:eyeGlow 5.5s ease-in-out 1.6s infinite;
}
.hero .wolfbox .e1{left:25.5%;top:73.5%}
.hero .wolfbox .e2{right:25.5%;top:73.5%}
@keyframes eyeGlow{0%,100%{opacity:.05}12%{opacity:.75}30%{opacity:.25}55%{opacity:.6}}
@keyframes fadeIn{to{opacity:.62}}
@media (max-width:900px){.hero .wolfbox{right:50%;top:30%;transform:translate(50%,-50%);width:78vw;animation:fadeInDim 1.6s ease .5s forwards}}
@keyframes fadeInDim{to{opacity:.14}}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;padding-top:clamp(50px,9vh,110px);padding-bottom:clamp(40px,7vh,80px)}
.page-hero h1{font-family:var(--display);font-size:clamp(42px,7vw,96px);line-height:1;letter-spacing:-.02em;max-width:14ch}
.page-hero .lede{margin-top:28px;max-width:58ch;font-size:clamp(17px,1.4vw,20px);color:var(--bone-dim);line-height:1.55}
.page-hero .tatebana{top:0}

.page-hero.has-backdrop{overflow:visible}
.page-hero .backdrop{
  position:absolute;right:calc(-1 * var(--gutter));top:-30px;width:min(58vw,760px);height:calc(100% + 60px);object-fit:cover;
  opacity:.35;z-index:-1;filter:saturate(.85);
  -webkit-mask-image:linear-gradient(to left,#000 30%,transparent 95%),linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 30%,transparent 95%),linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
  mask-composite:intersect;
}
@media (max-width:800px){.page-hero .backdrop{opacity:.2;width:100vw}}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--steel-dim);border-bottom:1px solid var(--steel-dim);
  overflow:hidden;white-space:nowrap;padding:16px 0;position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.ticker .track{display:inline-flex;animation:marquee 48s linear infinite}
.ticker:hover .track,.giant-marquee:hover .gtrack{animation-play-state:paused}
.ticker span{font-family:var(--display);font-style:italic;font-size:19px;color:var(--bone-dim);padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.ticker span::after{content:"";width:5px;height:5px;background:var(--steel);transform:rotate(45deg)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding-top:clamp(80px,12vh,150px);padding-bottom:clamp(80px,12vh,150px)}
.section.tight{padding-top:clamp(50px,8vh,90px);padding-bottom:clamp(50px,8vh,90px)}
.section-head{display:grid;grid-template-columns:auto 1fr;gap:22px 40px;align-items:end;margin-bottom:clamp(40px,6vh,70px)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:14px}
.section-head h2{grid-column:1/-1;font-family:var(--display);font-size:clamp(36px,5.2vw,70px);line-height:1.04;letter-spacing:-.02em;font-weight:400;max-width:17ch}
.section-head h2 em{font-style:italic;color:var(--ice);font-weight:400;
  background-image:linear-gradient(var(--ice),var(--ice));background-size:0% 1px;background-repeat:no-repeat;background-position:0 97%;
  transition:background-size 1s cubic-bezier(.2,.7,.2,1) .45s}
.section-head.in h2 em{background-size:100% 1px}
.section-head .lead{grid-column:1/-1;max-width:60ch;color:var(--bone-dim);font-size:18px}
@media (min-width:900px){
  .section-head{grid-template-columns:1fr 1fr}
  .section-head h2{grid-column:1}
  .section-head .lead{grid-column:2;padding-bottom:6px}
}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.pillars .pillar:nth-child(2),.quotes .quote:nth-child(2){transition-delay:.12s}
.pillars .pillar:nth-child(3),.quotes .quote:nth-child(3){transition-delay:.24s}
.pillars .pillar:nth-child(4){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero h1 .w>span,.hero .lede,.hero .actions,.tatebana,.aurora{animation:none;transform:none;opacity:1}
  .hero .watermark{animation:none;opacity:.5;transform:translateY(-52%);translate:0 0}
  .spotlight{display:none}
  .hero .wolfbox img,.hero h1 em,.family.in .stamp-target svg{animation:none}
  .section-head h2 em{background-size:100% 1px;transition:none}
  .pillars .pillar,.quotes .quote{transition-delay:0s}
  .banner img{top:0;height:100%}
  .aurora::after,.ticker .track,.open-sign{animation:none}
}

/* ---------- stats ---------- */
.stats{display:grid;gap:1px;background:var(--steel-dim);border:1px solid var(--steel-dim)}
@media (min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--ink);padding:clamp(24px,3.5vw,44px) clamp(20px,3vw,36px);position:relative;transition:background .4s}
.stat:hover{background:var(--slate)}
.stat:hover .num{text-shadow:0 0 30px var(--ice-glow)}
.stat .num{transition:text-shadow .4s}
.stat .num{font-family:var(--display);font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.03em;color:var(--bone);font-variant-numeric:tabular-nums}
.stat .num sup{font-size:.45em;vertical-align:top;color:var(--ice);font-style:italic;top:.2em;position:relative}
.stat .lbl{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}

/* ---------- pillars ---------- */
.pillars{display:grid;gap:18px}
@media (min-width:760px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{
  position:relative;display:flex;flex-direction:column;min-height:340px;padding:28px 26px;overflow:hidden;
  border:1px solid var(--steel-dim);background:linear-gradient(to bottom,rgba(15,19,24,.55),rgba(15,19,24,.95));
  text-decoration:none;overflow:hidden;transition:border-color .35s,transform .35s;
}
.pillar::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(60% 40% at 50% 0%,rgba(85,197,241,.2),transparent 70%)}
.pillar:hover{border-color:var(--steel);transform:translateY(-4px)}
.pillar:hover::before{opacity:1}
.pillar .art{display:block;height:150px;margin:-4px 0 20px;position:relative;border-bottom:1px solid var(--steel-dim);padding-bottom:14px}
.pillar .art svg{width:100%;height:100%}
.pillar .art .base{stroke:var(--steel);opacity:.55;stroke-width:1.3}
.pillar .art .accent{stroke:var(--ice);stroke-width:1.8;filter:drop-shadow(0 0 6px rgba(85,197,241,.35))}
.pillar .art .leaf path{fill:var(--steel);stroke:none;opacity:.7}
.pillar .art .blip circle{fill:var(--ice);stroke:none;opacity:.5}
.pillar .art .tip{fill:var(--ice);stroke:none}
.pillar .art .draw{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.pillar .art .accent.draw{transition-duration:1.8s;transition-delay:.35s}
.pillar.in .art .draw{stroke-dashoffset:0}
.pillar .art .tip,.pillar .art .blip circle,.pillar .art .leaf path{opacity:0;transition:opacity .6s ease 1.5s}
.pillar.in .art .tip{opacity:1}
.pillar.in .art .blip circle{opacity:.55}
.pillar.in .art .leaf path{opacity:.7}
.pillar:hover .art .tip{animation:tipPulse 1.6s ease-in-out infinite}
.pillar:hover .art .accent{filter:drop-shadow(0 0 10px rgba(85,197,241,.6))}
@keyframes tipPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.pillar .art .draw{stroke-dasharray:none;stroke-dashoffset:0;transition:none}.pillar .art .tip,.pillar .art .blip circle,.pillar .art .leaf path{opacity:1;transition:none}}
.pillar h3{font-family:var(--display);font-size:25px;line-height:1.15;letter-spacing:-.01em;margin:0 0 10px}
.pillar p{color:var(--bone-dim);font-size:15px;line-height:1.55}
.pillar ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--steel)}
.pillar ul li::before{content:"— ";color:var(--ash)}
.pillar .more{margin-top:auto;padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);display:flex;align-items:center;gap:10px}
.pillar .more::after{content:"→";transition:transform .3s}
.pillar:hover .more::after{transform:translateX(6px)}

/* ---------- prose blocks ---------- */
.two-col{display:grid;gap:48px}
@media (min-width:900px){.two-col{grid-template-columns:1.15fr .85fr;gap:80px}}
.prose p{font-size:19px;line-height:1.65;color:var(--bone-dim);max-width:58ch}
.prose p+p{margin-top:22px}
.prose p strong{color:var(--bone);font-weight:500}
.prose .drop::first-letter{font-family:var(--display);font-size:3.4em;float:left;line-height:.82;padding:6px 10px 0 0;color:var(--ice)}
.list{display:grid;gap:0;border-top:1px solid var(--steel-dim)}
.list .item{padding:26px 0;border-bottom:1px solid var(--steel-dim);display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.list .item::before{content:"";width:22px;height:1px;background:var(--steel);margin-top:14px}
.list h3{font-family:var(--display);font-size:24px;margin-bottom:8px;letter-spacing:-.01em}
.list p{color:var(--bone-dim);font-size:15.5px;line-height:1.55}

/* ---------- process (ordered — sequence carries meaning) ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;border-top:1px solid var(--steel-dim)}
.steps li{counter-increment:step;display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--steel-dim)}
@media (min-width:800px){.steps li{grid-template-columns:110px 1.1fr 1fr;gap:40px}}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--display);font-size:clamp(36px,4vw,54px);color:var(--steel);line-height:1;font-style:italic}
.steps h3{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);letter-spacing:-.01em}
.steps p{color:var(--bone-dim);font-size:16px;line-height:1.6;grid-column:2}
@media (min-width:800px){.steps p{grid-column:3}}

/* ---------- services (capabilities card) ---------- */
.menu-card{
  background:linear-gradient(160deg,var(--slate-2),var(--slate) 55%,#0B0E12);
  border:1px solid var(--steel-dim);position:relative;
  padding:clamp(34px,5vw,70px) clamp(24px,5vw,76px);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(238,241,245,.03);
}
.menu-card::before,.menu-card::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--steel);opacity:.7}
.menu-card::before{top:10px;left:10px;border-right:0;border-bottom:0}
.menu-card::after{bottom:10px;right:10px;border-left:0;border-top:0}
.menu-card+.menu-card{margin-top:28px}
.menu-title{display:flex;align-items:center;gap:18px;margin-bottom:clamp(26px,4vh,44px)}
.menu-title .line{flex:1;height:1px;background:var(--steel-dim)}
.menu-title h3{font-family:var(--display);font-style:italic;font-size:clamp(26px,3vw,36px);color:var(--bone)}
.menu-title h3 span{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);margin-top:8px}
.menu-groups{display:grid;gap:10px 56px}
@media (min-width:860px){.menu-groups{grid-template-columns:1fr 1fr}}
.menu-item{padding:16px 0;display:grid;gap:6px;border-top:1px dashed rgba(127,163,196,.2)}
.menu-item .row{display:flex;align-items:baseline;gap:10px}
.menu-item .name{font-family:var(--display);font-size:20px;color:var(--bone);white-space:nowrap}
.menu-item .leader{flex:1;border-bottom:1px dotted rgba(127,163,196,.5);transform:translateY(-5px)}
.menu-item .term{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.menu-item p{font-size:14.5px;line-height:1.5;color:var(--bone-dim)}
.menu-foot{margin-top:clamp(30px,4vh,48px);padding-top:26px;border-top:1px solid var(--steel-dim);display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center}
.menu-foot p{font-family:var(--display);font-style:italic;color:var(--bone-dim);font-size:17px}
.menu-intro{font-size:17px;color:var(--bone-dim);max-width:60ch;margin-bottom:22px}

/* engagement formats */
.formats{display:grid;gap:1px;background:var(--steel-dim);border:1px solid var(--steel-dim)}
@media (min-width:760px){.formats{grid-template-columns:repeat(4,1fr)}}
.format{background:var(--ink);padding:28px 24px}
.format .term{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice)}
.format h3{font-family:var(--display);font-size:24px;margin:12px 0 10px}
.format p{color:var(--bone-dim);font-size:15px;line-height:1.55}

/* ---------- image banner ---------- */
.banner{
  position:relative;height:clamp(280px,44vh,460px);overflow:hidden;
  border-top:1px solid var(--steel-dim);border-bottom:1px solid var(--steel-dim);
}
.banner img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;filter:saturate(.9) brightness(.85);will-change:transform}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink),transparent 30%,transparent 70%,var(--ink)),radial-gradient(90% 90% at 50% 50%,transparent 50%,rgba(7,9,12,.55))}
.banner-quote{position:absolute;inset:0;z-index:2;display:grid;align-content:end;padding-bottom:34px;gap:8px}
.banner-quote p{font-family:var(--display);font-style:italic;font-size:clamp(22px,3vw,34px);color:var(--bone);text-shadow:0 2px 24px rgba(0,0,0,.8);max-width:24ch}
.banner-quote span{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:22px}
@media (min-width:800px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{padding:30px 28px;border:1px solid var(--steel-dim);background:rgba(15,19,24,.6);display:flex;flex-direction:column;gap:22px;position:relative;transition:border-color .35s,transform .35s,box-shadow .35s}
.quote:hover{border-color:var(--steel);transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.quote::after{content:"";position:absolute;bottom:8px;left:8px;width:12px;height:12px;border:1px solid var(--steel);border-top:0;border-right:0;opacity:.6}
.quote::before{content:"\201C";position:absolute;top:6px;right:18px;font-family:var(--display);font-size:64px;color:var(--steel);opacity:.45;line-height:1}
.quote blockquote{margin:0;font-family:var(--display);font-size:21px;line-height:1.4;color:var(--bone);font-style:italic}
.quote figcaption{margin-top:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.quote figcaption span{display:block;color:var(--ash);margin-top:4px;letter-spacing:.08em;text-transform:none;font-size:12px}

/* ---------- posts (No Fluff Zone) ---------- */
.posts{display:grid;gap:0;border-top:1px solid var(--steel-dim)}
.post{
  display:grid;gap:10px 40px;padding:30px 0;border-bottom:1px solid var(--steel-dim);text-decoration:none;
  grid-template-columns:1fr;align-items:baseline;transition:background .3s;
}
@media (min-width:800px){.post{grid-template-columns:150px 1fr auto}}
.post .date{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.post h3{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;transition:color .3s}
.post p{color:var(--bone-dim);font-size:15.5px;margin-top:8px;max-width:62ch}
.post .by{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.post .arrow{font-family:var(--mono);color:var(--ice);font-size:18px;transition:transform .3s;justify-self:end}
.post:hover h3{color:var(--ice)}
.post:hover .arrow{transform:translateX(6px)}
.post.featured{padding:40px 0}
.post.featured h3{font-size:clamp(28px,3.6vw,46px)}

/* ---------- family ---------- */
.family{
  display:grid;gap:40px;align-items:center;
  padding:clamp(40px,6vw,80px);border:1px solid var(--steel-dim);
  background:radial-gradient(80% 120% at 100% 0%,rgba(142,42,42,.14),transparent 60%),var(--slate);
}
@media (min-width:900px){.family{grid-template-columns:1fr 1fr;gap:70px}}
.lineage{display:grid;gap:14px}
.lineage .node{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px 22px;border:1px solid var(--steel-dim);background:rgba(7,9,12,.5)}
.lineage .node.parent{border-color:var(--steel)}
.lineage .node .mark{width:52px;height:52px;display:grid;place-items:center}
.lineage .node .mark svg,.lineage .node .mark img{width:52px;height:52px;object-fit:contain}
.stamp-target svg{transform:rotate(-3deg)}
.family.in .stamp-target svg{animation:stamp .65s cubic-bezier(.2,.9,.3,1.35) .55s backwards}
.family.in .stamp-target::after{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(142,42,42,.5),transparent 70%);opacity:0;animation:stampGlow .9s ease .55s}
.stamp-target{position:relative}
@keyframes stamp{0%{transform:scale(2.6) rotate(-20deg);opacity:0}55%{transform:scale(.94) rotate(-1deg);opacity:1}78%{transform:scale(1.06) rotate(-4deg)}100%{transform:scale(1) rotate(-3deg)}}
@keyframes stampGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.lineage .node strong{display:block;font-family:var(--display);font-size:21px;font-weight:400}
.lineage .node span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}
.lineage .join{justify-self:start;margin-left:44px;width:1px;height:26px;background:var(--steel);position:relative}
.lineage .join::after{content:"";position:absolute;left:-3px;bottom:-1px;width:7px;height:7px;background:var(--steel);transform:rotate(45deg)}
.family-copy h3{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}
.family-copy h3 em{font-style:italic;color:var(--ice)}
.family-copy p{color:var(--bone-dim);font-size:17px;max-width:50ch}
.family-copy p+p{margin-top:16px}
.family-copy .btn{margin-top:28px}

/* ---------- founder ---------- */
.founder{display:grid;gap:40px;align-items:start}
@media (min-width:900px){.founder{grid-template-columns:.8fr 1.2fr;gap:80px}}
.founder .card{border:1px solid var(--steel-dim);background:var(--slate);padding:28px;position:relative}
.founder .card .seal{position:absolute;top:-1px;right:-1px;width:64px;height:64px;border:1px solid var(--steel);display:grid;place-items:center;background:var(--ink);padding:8px}
.founder .card .seal img{width:100%;height:auto}
.founder .card .name{font-family:var(--display);font-size:34px;line-height:1.05;margin-top:40px}
.founder .card .role{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:10px}
.founder .card dl{margin:26px 0 0;display:grid;gap:12px;font-size:15px}
.founder .card dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.founder .card dd{margin:2px 0 0;color:var(--bone-dim)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;border:1px solid var(--steel-dim);padding:clamp(40px,7vw,90px) clamp(24px,6vw,80px);
  display:grid;gap:30px;align-items:center;overflow:hidden;
  background:linear-gradient(120deg,var(--slate-2),var(--slate) 60%,#0B0E12);
}
@media (min-width:900px){.cta-band{grid-template-columns:1.2fr auto}}
.cta-band::before{content:"";position:absolute;top:10px;left:10px;width:14px;height:14px;border:1px solid var(--steel);border-right:0;border-bottom:0;opacity:.7}
.cta-band h2{font-family:var(--display);font-size:clamp(34px,5vw,68px);line-height:1.02;letter-spacing:-.02em;max-width:16ch}
.cta-band h2 em{font-style:italic;color:var(--ice)}
.cta-band p{margin-top:16px;color:var(--bone-dim);max-width:50ch;font-size:17px}
.cta-band .wm{position:absolute;right:-10px;bottom:-30px;width:clamp(200px,26vw,340px);height:auto;opacity:.12;pointer-events:none;-webkit-mask-image:linear-gradient(to top,transparent,#000 60%);mask-image:linear-gradient(to top,transparent,#000 60%)}

/* ---------- giant outlined marquee ---------- */
.giant-marquee{overflow:hidden;padding:clamp(30px,6vh,70px) 0 0;user-select:none}
.giant-marquee .gtrack{display:inline-flex;white-space:nowrap;animation:gmarq 60s linear infinite}
.giant-marquee span{
  font-family:var(--display);font-style:italic;font-size:clamp(64px,11vw,150px);line-height:1.1;
  color:transparent;-webkit-text-stroke:1px rgba(127,163,196,.5);letter-spacing:.01em;padding-right:.3em;
}
.giant-marquee em{-webkit-text-stroke:0;color:var(--ice);font-style:normal}
@keyframes gmarq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.giant-marquee .gtrack{animation:none}}

/* ---------- contact ---------- */
.reserve-grid{display:grid;gap:50px}
@media (min-width:900px){.reserve-grid{grid-template-columns:.9fr 1.1fr;gap:90px}}
.reserve-copy .big{font-family:var(--display);font-size:clamp(44px,6.5vw,92px);line-height:.98;letter-spacing:-.025em}
.reserve-copy .big em{font-style:italic;color:var(--ice)}
.reserve-copy p{margin-top:26px;color:var(--bone-dim);max-width:44ch;font-size:18px}
.reserve-copy .direct{margin-top:36px;display:grid;gap:16px;font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.reserve-copy .direct a{text-decoration:none;color:var(--bone);border-bottom:1px solid var(--steel-dim);padding-bottom:3px;width:max-content;transition:border-color .3s,color .3s}
.reserve-copy .direct a:hover{color:var(--ice);border-color:var(--ice)}
.reserve-copy .direct span{color:var(--ash);display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:4px}
.next{margin-top:40px;border-top:1px solid var(--steel-dim)}
.next li{list-style:none;padding:14px 0;border-bottom:1px solid var(--steel-dim);display:grid;grid-template-columns:34px 1fr;gap:12px;color:var(--bone-dim);font-size:15px}
.next{padding:0}
.next li b{font-family:var(--mono);font-weight:500;color:var(--steel);font-size:12px;letter-spacing:.1em}
form{display:grid;gap:22px}
.two{display:grid;gap:22px}
@media (min-width:600px){.two{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--steel-dim);color:var(--bone);
  font-family:var(--body);font-size:17px;padding:12px 0;border-radius:0;transition:border-color .3s;
  -webkit-appearance:none;appearance:none;
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237FA3C4' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;padding-right:24px}
.field select option{background:var(--slate);color:var(--bone)}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--ice)}
.field input::placeholder,.field textarea::placeholder{color:rgba(138,150,163,.7)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:8px}
.form-foot small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ash);max-width:38ch;line-height:1.5}
.toast{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ice);min-height:1.2em}

/* ---------- article (blog post) ---------- */
.post-hero h1{font-size:clamp(32px,4.6vw,58px);max-width:24ch;line-height:1.08}
.post-hero .byline{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.article{max-width:70ch}
.article p{font-size:17.5px;line-height:1.7;color:var(--bone-dim);max-width:none;margin:0 0 20px}
.article p strong,.article li strong{color:var(--bone);font-weight:500}
.article h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.01em;margin:48px 0 18px;color:var(--bone)}
.article h3{font-family:var(--display);font-size:clamp(21px,2.2vw,26px);line-height:1.2;margin:36px 0 14px;color:var(--ice)}
.article ul,.article ol{margin:0 0 20px;padding-left:22px;color:var(--bone-dim)}
.article li{margin-bottom:10px;line-height:1.6;font-size:16.5px}
.article li::marker{color:var(--steel)}
.article blockquote{margin:28px 0;padding:18px 24px;border-left:2px solid var(--ice);background:rgba(15,19,24,.6);font-family:var(--display);font-style:italic;font-size:19px;color:var(--bone)}
.article blockquote p{margin:0;font-size:inherit;color:inherit}
.article > p:first-child::first-letter{font-family:var(--display);font-size:3.2em;float:left;line-height:.82;padding:6px 10px 0 0;color:var(--ice)}
.article a{color:var(--ice)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--steel-dim);padding:48px 0 40px;position:relative}
.foot{display:grid;gap:30px;align-items:start}
@media (min-width:800px){.foot{grid-template-columns:1.2fr 1fr 1fr auto}}
.foot .tag{margin-top:16px;font-family:var(--display);font-style:italic;color:var(--bone-dim);font-size:16px;max-width:30ch}
.foot h5{margin:0 0 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{text-decoration:none;color:var(--bone-dim);font-size:15px;transition:color .25s}
.foot ul a:hover{color:var(--ice)}
.foot .stamp{justify-self:end}
.foot .stamp img{width:96px;height:auto;opacity:.9}
.foot .brand.lockup img{width:220px;height:auto}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(127,163,196,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ash)}