/* ==========================================================================
   ASHISH KUMAR — PORTFOLIO
   Crimson Command brand system · Arial (display) + Verdana (body)
   ========================================================================== */

:root{
  /* brand */
  --black:#0A0A0B;
  --ink:#060607;
  --gun:#17161A;
  --gun-2:#1E1D22;
  --gun-3:#26252B;
  --parch:#E8DCC2;
  --parch-2:#F5EDDA;
  --bronze:#B8A07A;
  --bronze-l:#D2BB92;
  --crimson:#C8102E;
  --crimson-l:#E42346;
  --crimson-d:#800A1E;
  --steel:#9AA2AC;
  --steel-d:#6C747E;

  /* structure */
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.045);
  --display:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --body:Verdana,Geneva,Tahoma,sans-serif;

  --shell:1240px;
  --gut:clamp(20px,4vw,56px);
  --r:6px;
  --r-lg:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -32px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--black); color:var(--parch);
  font-family:var(--body); font-size:15px; line-height:1.72; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body::before{ /* fine grain, keeps large dark fields from banding */
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,footer,.nav,.rail{position:relative; z-index:2}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.06}
p{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}
b,strong{font-weight:700}
::selection{background:var(--crimson); color:#fff}

:focus-visible{outline:2px solid var(--bronze-l); outline-offset:3px; border-radius:3px}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}

/* ---------- shared bits ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 16px;
  font-family:var(--body); font-size:10.5px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--crimson-l);
}
.kicker::before{content:""; width:22px; height:2px; background:currentColor; flex:0 0 auto}
.kicker.bronze{color:var(--bronze-l)}

.stars{color:var(--bronze-l); letter-spacing:.16em; font-size:12px}

.btn{
  --bg:var(--crimson); --fg:#fff; --bd:var(--crimson);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:16px 26px; min-height:52px; border:1px solid var(--bd); border-radius:var(--r);
  background:var(--bg); color:var(--fg); cursor:pointer;
  font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
  white-space:nowrap;
}
.btn svg{width:15px; height:15px; flex:0 0 auto}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 40px -18px rgba(200,16,46,.85)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{--bg:var(--crimson); --fg:#fff}
.btn-primary:hover{--bg:var(--crimson-l); --bd:var(--crimson-l)}
.btn-ghost{--bg:transparent; --fg:var(--parch); --bd:rgba(232,220,194,.3)}
.btn-ghost:hover{--bg:rgba(232,220,194,.07); --bd:var(--bronze); box-shadow:none}
.btn-sm{padding:11px 18px; min-height:42px; font-size:11.5px}
.btn-sm svg{width:13px; height:13px}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
}
.nav.stuck{background:rgba(8,8,10,.86); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:78px}
.nav-progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--crimson-d),var(--crimson-l)); transition:width .1s linear}

.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand-mark{
  width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; position:relative;
  background:var(--gun); border:1px solid rgba(184,160,122,.4); border-radius:4px;
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--parch-2);
}
.brand-mark::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--crimson); border-radius:4px 4px 0 0}
.brand-txt{display:block; line-height:1.15}
.brand-txt b{display:block; font-family:var(--display); font-size:13.5px; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap}
.brand-txt em{display:block; font-style:normal; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-d); margin-top:3px; white-space:nowrap}

.nav-links{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav-links a{
  padding:9px 11px; border-radius:4px;
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.08em;
  color:var(--steel); transition:color .18s, background .18s;
}
.nav-links a:hover{color:var(--parch-2); background:rgba(255,255,255,.05)}
.nav-cta-mobile{display:none}
.nav-right{display:flex; align-items:center; gap:10px; flex:0 0 auto}

.burger{display:none; width:44px; height:44px; padding:0; background:transparent; border:1px solid var(--line); border-radius:4px; cursor:pointer}
.burger span{display:block; width:18px; height:2px; margin:4px auto; background:var(--parch); transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   SECTION RAIL (desktop only)
   ========================================================================== */
.rail{
  position:fixed; left:clamp(12px,2vw,32px); top:50%; transform:translateY(-50%); z-index:60;
  display:none; flex-direction:column; gap:2px;
  padding:14px 12px; border-left:1px solid var(--line-soft);
}
.rail-label{font-size:8.5px; letter-spacing:.22em; color:var(--steel-d); margin-bottom:10px}
.rail a{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  font-family:var(--display); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-d); transition:color .2s;
}
.rail a i{font-style:normal; font-size:8.5px; color:var(--steel-d); transition:color .2s}
.rail a span{opacity:.55; transition:opacity .2s, transform .2s; transform:translateX(-2px)}
.rail a:hover,.rail a.on{color:var(--parch-2)}
.rail a:hover span,.rail a.on span{opacity:1; transform:none}
.rail a.on i{color:var(--crimson-l)}
@media (min-width:1440px){
  .rail{display:flex}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; padding-top:132px; padding-bottom:clamp(40px,5vw,68px); overflow:hidden}
.hero-glow{
  position:absolute; inset:-180px -10% auto -10%; height:780px; pointer-events:none; z-index:0;
  background:
    radial-gradient(52% 58% at 22% 22%, rgba(200,16,46,.26), transparent 70%),
    radial-gradient(42% 52% at 84% 6%, rgba(184,160,122,.13), transparent 72%);
  filter:blur(12px);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);
  gap:clamp(28px,4vw,64px); align-items:center;
}
.status{
  display:inline-flex; align-items:center; gap:9px; padding:8px 14px; margin-bottom:22px;
  border:1px solid rgba(255,255,255,.1); border-radius:100px; background:rgba(23,22,26,.6);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--parch);
}
.status .dot{width:7px; height:7px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,.16); animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.16)}50%{box-shadow:0 0 0 6px rgba(74,222,128,.05)}}

.hero h1{
  font-size:clamp(33px,4.5vw,62px); line-height:1.03; letter-spacing:-.035em; text-transform:uppercase;
}
.hero h1 .hl{color:var(--crimson-l)}
.hero-lede{margin-top:22px; max-width:56ch; color:var(--steel); font-size:14px}
.hero-lede strong{color:var(--parch-2)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px}
.hero-meta li{display:inline-flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-d)}
.hero-meta svg{width:14px; height:14px; color:var(--bronze)}

/* credential plate */
.plate{
  position:relative; overflow:hidden; padding:26px 26px 22px;
  border:1px solid rgba(184,160,122,.22); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(128,10,30,.55), transparent 62%),
    linear-gradient(160deg,#141319,#0D0D10 60%);
  box-shadow:var(--shadow);
}
.plate::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--crimson),var(--crimson-d))}
.plate-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.plate-badge{
  padding:5px 10px; border:1px solid rgba(74,222,128,.4); border-radius:100px;
  background:rgba(74,222,128,.1); color:#8BE9AE;
  font-size:8.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.plate-icon{width:20px; height:20px; color:var(--bronze)}
.plate-kicker{margin-top:22px; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel-d)}
.plate-rating{display:flex; align-items:baseline; gap:12px; margin-top:6px}
.plate-rating b{font-family:var(--display); font-size:56px; line-height:.9; letter-spacing:-.04em; color:var(--parch-2)}
.plate-sub{margin-top:6px; font-size:11px; color:var(--steel); max-width:24ch}
.plate-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px}
.plate-stats div{padding:12px 10px; background:rgba(255,255,255,.04); border-radius:5px}
.plate-stats dt{font-family:var(--display); font-size:16px; letter-spacing:-.01em; color:var(--parch-2)}
.plate-stats dd{margin:3px 0 0; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-d); line-height:1.35}
.plate-link{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--display); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze-l)}
.plate-link svg{width:13px; height:13px; transition:transform .2s var(--ease)}
.plate-link:hover svg{transform:translateX(4px)}
.plate-ring{position:absolute; right:-70px; bottom:-90px; width:240px; height:240px; border:1px solid rgba(200,16,46,.28); border-radius:50%; pointer-events:none}
.plate-ring::after{content:""; position:absolute; inset:26px; border:1px solid rgba(184,160,122,.16); border-radius:50%}

/* KPI band */
.kpi-band{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(34px,4vw,56px);
  background:var(--line-soft); border-radius:var(--r); overflow:hidden;
}
.kpi-band li{background:#0C0C0F; padding:clamp(16px,2vw,24px) clamp(14px,2vw,22px)}
.kpi-band b{display:block; font-family:var(--display); font-size:clamp(24px,2.6vw,34px); letter-spacing:-.03em; line-height:1; color:var(--parch-2)}
.kpi-band b.kpi-word{font-size:clamp(18px,2vw,26px); letter-spacing:-.02em; padding-block:5px}
.kpi-band span{display:block; margin-top:7px; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--steel-d); line-height:1.5}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.sec{position:relative; padding-block:clamp(58px,7vw,104px); scroll-margin-top:92px}
.sec-alt{background:linear-gradient(180deg,#0A0A0B,#0D0D10 45%,#0A0A0B)}
.sec-num{
  position:absolute; top:clamp(24px,4vw,52px); right:clamp(16px,4vw,60px);
  font-family:var(--display); font-size:clamp(46px,7vw,96px); line-height:1; letter-spacing:-.04em;
  color:rgba(232,220,194,.045); pointer-events:none; user-select:none;
}
.sec-head{max-width:900px; margin-bottom:clamp(30px,4vw,48px)}
.sec-head h2{font-size:clamp(26px,3.2vw,44px); line-height:1.05}
.sec-lede{margin-top:16px; max-width:62ch; color:var(--steel); font-size:13.5px}

/* ==========================================================================
   01 ABOUT
   ========================================================================== */
.about-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(24px,4vw,56px); align-items:start}
.about-copy p{color:var(--steel); font-size:14px; max-width:66ch}
.about-copy p + p{margin-top:16px}
.about-copy .lead{color:var(--parch); font-size:16.5px; line-height:1.66; max-width:58ch}
.mini-stats{display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,42px); margin-top:30px; padding-top:24px; border-top:1px solid var(--line-soft)}
.mini-stats b{display:block; font-family:var(--display); font-size:26px; letter-spacing:-.02em; color:var(--parch-2)}
.mini-stats span{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-d)}

.fact-card{padding:24px; background:var(--gun); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.fact-card h3{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-l); margin-bottom:16px}
.facts li{display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--steel)}
.facts li:first-child{border-top:0; padding-top:0}
.facts svg{width:15px; height:15px; flex:0 0 auto; margin-top:3px; color:var(--bronze)}
.facts b{display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-d); margin-bottom:2px}
.fact-link{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--display); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--crimson-l)}
.fact-link svg{width:13px; height:13px; transition:transform .2s var(--ease)}
.fact-link:hover svg{transform:translateX(4px)}

/* ==========================================================================
   02 SERVICES
   ========================================================================== */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.svc{
  position:relative; display:flex; flex-direction:column; padding:26px 24px 20px;
  background:var(--gun); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .22s var(--ease), border-color .22s, background .22s;
}
.svc:hover{transform:translateY(-4px); border-color:rgba(200,16,46,.5); background:#1B1A20}
.svc-icon{width:42px; height:42px; display:grid; place-items:center; margin-bottom:18px; border-radius:6px; background:rgba(200,16,46,.12); border:1px solid rgba(200,16,46,.3); color:var(--crimson-l)}
.svc-icon svg{width:20px; height:20px}
.svc-kicker{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-d); margin-bottom:8px}
.svc h3{font-size:17.5px; line-height:1.2; letter-spacing:-.01em; color:var(--parch-2)}
.svc > p:not(.svc-kicker){color:var(--steel); font-size:12.5px; margin-top:10px}
.svc ul{margin-top:14px; display:flex; flex-direction:column; gap:7px}
.svc li{position:relative; padding-left:16px; font-size:11.5px; color:var(--steel); line-height:1.5}
.svc li::before{content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background:var(--crimson); border-radius:1px}
.svc footer{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft)}
.svc .price{font-family:var(--display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-l)}
.svc footer a{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--parch)}
.svc footer a svg{width:12px; height:12px; transition:transform .2s var(--ease)}
.svc footer a:hover svg{transform:translateX(3px)}
.svc footer a:hover{color:var(--crimson-l)}
.new-tag{
  position:absolute; top:14px; right:14px; padding:4px 8px; border-radius:3px;
  background:var(--crimson); color:#fff; font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.svc.flag-new{border-color:rgba(200,16,46,.32)}

/* ==========================================================================
   03 STACK
   ========================================================================== */
.stack-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.stack-group{padding:22px; background:rgba(23,22,26,.6); border:1px solid var(--line-soft); border-radius:var(--r)}
.stack-group h3{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-l); margin-bottom:14px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chips li{padding:7px 11px; border-radius:4px; background:rgba(255,255,255,.05); font-size:11px; color:var(--parch); transition:background .18s, color .18s}
.chips li:hover{background:rgba(200,16,46,.18); color:var(--parch-2)}

/* ==========================================================================
   04 PROCESS
   ========================================================================== */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:step}
.steps li{position:relative; padding:24px 22px; background:var(--gun); border:1px solid var(--line-soft); border-radius:var(--r-lg)}
.steps li::after{content:""; position:absolute; inset:auto auto 0 0; width:100%; height:2px; background:linear-gradient(90deg,var(--crimson),transparent); opacity:.6}
.step-n{display:block; font-family:var(--display); font-size:11px; letter-spacing:.18em; color:var(--crimson-l); margin-bottom:12px}
.steps h3{font-size:16px; color:var(--parch-2); margin-bottom:10px}
.steps p{font-size:12px; color:var(--steel)}
.step-out{margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--steel-d)}
.step-out b{color:var(--bronze-l); font-weight:700}

/* ==========================================================================
   05 RESULTS
   ========================================================================== */
.cases{display:flex; flex-direction:column; gap:14px}
.case{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr); gap:clamp(20px,3vw,44px);
  padding:clamp(22px,2.6vw,30px); background:var(--gun); border:1px solid var(--line);
  border-radius:var(--r-lg); transition:border-color .22s, background .22s, transform .22s var(--ease);
}
.case:hover{border-color:rgba(184,160,122,.34); background:#1B1A20; transform:translateY(-2px)}
.case-kicker{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-d); margin-bottom:9px}
.case h3{font-size:clamp(17px,1.7vw,21px); line-height:1.22; color:var(--parch-2)}
.case-body > p:not(.case-kicker){margin-top:10px; font-size:12.5px; color:var(--steel); max-width:60ch}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tags li{padding:4px 9px; border:1px solid var(--line); border-radius:3px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-d)}
.case-metrics{display:grid; grid-template-rows:1fr 1fr; gap:10px; align-content:center}
.metric{padding:14px 16px; background:rgba(200,16,46,.07); border:1px solid rgba(200,16,46,.22); border-radius:5px}
.metric b{display:block; font-family:var(--display); font-size:clamp(19px,2vw,25px); letter-spacing:-.02em; line-height:1; color:var(--parch-2)}
.metric span{display:block; margin-top:5px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-d); line-height:1.4}

.mid-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  margin-top:22px; padding:clamp(24px,3vw,34px); border-radius:var(--r-lg);
  background:radial-gradient(120% 160% at 100% 0%, rgba(128,10,30,.55), transparent 62%), #0D0D11;
  border:1px solid rgba(200,16,46,.34);
}
.mid-cta h3{font-size:clamp(18px,2.1vw,24px); color:var(--parch-2)}
.mid-cta p:last-child{margin-top:8px; font-size:12.5px; color:var(--steel); max-width:48ch}
.mid-cta-actions{display:flex; flex-wrap:wrap; gap:10px}

/* ==========================================================================
   06 WORK — gallery tiles with generated brand art
   ========================================================================== */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; counter-reset:tile}
.tile{margin:0; cursor:zoom-in; counter-increment:tile; border-radius:var(--r); overflow:hidden; background:var(--gun); border:1px solid var(--line); transition:transform .25s var(--ease), border-color .25s}
.tile:hover{transform:translateY(-4px); border-color:rgba(200,16,46,.45)}
.tile .shot{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 0; background:#0E0E11}
.tile .shot + .art{display:none}
.art{
  position:relative; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden;
  isolation:isolate;
}
.art::after{ /* grain + vignette */
  content:""; position:absolute; inset:0; z-index:2;
  background:radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(0,0,0,.55));
}
.art .mono{
  position:relative; z-index:1; font-family:var(--display); font-weight:700;
  font-size:clamp(34px,4.4vw,60px); letter-spacing:-.06em; color:rgba(245,237,218,.92);
  text-shadow:0 18px 40px rgba(0,0,0,.6);
}
.art .art-tag{
  position:absolute; left:13px; top:13px; z-index:3;
  font-family:var(--display); font-size:10px; letter-spacing:.16em; color:rgba(245,237,218,.7);
}
.art .art-tag::before{content:counter(tile, decimal-leading-zero)}
.tile figcaption{padding:13px 14px 15px; border-top:1px solid var(--line-soft); background:#111116}
.tile figcaption b{display:block; font-family:var(--display); font-size:12.5px; letter-spacing:.01em; color:var(--parch-2); transition:color .2s}
.tile:hover figcaption b{color:var(--crimson-l)}
.tile figcaption span{display:block; margin-top:3px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-d)}

/* six brand-safe art treatments */
.p1{background:
  radial-gradient(80% 70% at 18% 12%, rgba(200,16,46,.85), transparent 62%),
  conic-gradient(from 210deg at 70% 80%, #1A1114, #2A0C14, #141317 70%);}
.p2{background:
  linear-gradient(128deg, rgba(200,16,46,.9) 0%, rgba(128,10,30,.85) 42%, #121116 42.2%, #1B1A20 100%);}
.p3{background:
  radial-gradient(circle at 50% 118%, rgba(184,160,122,.55), transparent 55%),
  linear-gradient(180deg, #121216 0%, #22131A 55%, #3A0E19 100%);}
.p4{background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
  radial-gradient(90% 80% at 85% 10%, rgba(200,16,46,.7), transparent 60%), #131217;}
.p5{background:
  radial-gradient(70% 70% at 20% 85%, rgba(184,160,122,.55), transparent 62%),
  linear-gradient(35deg, #0F0E12 40%, #25101A 41%, #450F1D 100%);}
.p6{background:
  conic-gradient(from 140deg at 50% 50%, rgba(200,16,46,.75), rgba(23,22,26,.9) 40%, rgba(184,160,122,.35) 62%, rgba(200,16,46,.75));}

/* ==========================================================================
   07 REVIEWS
   ========================================================================== */
.quote-wrap{position:relative}
.quote-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px; padding-right:var(--gut); scrollbar-width:none;
  margin-right:calc(-1 * var(--gut));
  -webkit-overflow-scrolling:touch;
}
.quote-track::-webkit-scrollbar{display:none}
.quote{
  flex:0 0 clamp(280px, 38%, 460px); scroll-snap-align:start;
  display:flex; flex-direction:column; gap:14px; padding:26px 24px;
  background:var(--gun); border:1px solid var(--line); border-radius:var(--r-lg);
}
.quote p{font-size:13px; color:var(--parch); line-height:1.72}
.quote footer{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft)}
.avatar{
  width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  background:rgba(200,16,46,.16); border:1px solid rgba(200,16,46,.36);
  font-family:var(--display); font-size:11px; letter-spacing:.04em; color:var(--crimson-l);
}
.quote footer b{display:block; font-family:var(--display); font-size:12.5px; color:var(--parch-2)}
.quote footer em{display:block; font-style:normal; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-d); margin-top:3px}
.quote-nav{display:flex; align-items:center; gap:12px; margin-top:18px}
.round{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:50%; color:var(--parch);
  transition:border-color .2s, background .2s, color .2s;
}
.round svg{width:16px; height:16px}
.round:hover{border-color:var(--crimson); background:rgba(200,16,46,.14); color:#fff}
.quote-dots{display:flex; gap:6px}
.quote-dots i{width:20px; height:2px; background:rgba(255,255,255,.16); border-radius:2px; transition:background .2s}
.quote-dots i.on{background:var(--crimson-l)}
.review-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:22px}
.review-foot p{font-size:12px; color:var(--steel)}
.review-foot b{color:var(--parch-2)}

/* ==========================================================================
   08 CREDENTIALS
   ========================================================================== */
.upwork-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(20px,2.4vw,28px); border-radius:var(--r-lg);
  background:radial-gradient(120% 180% at 0% 0%, rgba(128,10,30,.55), transparent 60%), #0D0D11;
  border:1px solid rgba(200,16,46,.3);
}
.ub-left{display:flex; align-items:center; gap:16px}
.ub-icon{width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:#8BE9AE}
.ub-icon svg{width:20px; height:20px}
.upwork-band h3{font-size:16px; color:var(--parch-2)}
.upwork-band p{margin-top:4px; font-size:11.5px; color:var(--steel)}
.cred-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.cred{padding:22px; background:var(--gun); border:1px solid var(--line-soft); border-radius:var(--r); transition:border-color .2s, transform .2s var(--ease)}
.cred:hover{border-color:rgba(184,160,122,.3); transform:translateY(-3px)}
.cred-mono{display:grid; place-items:center; width:34px; height:34px; margin-bottom:14px; border:1px solid rgba(184,160,122,.4); border-radius:4px; font-family:var(--display); font-size:13px; color:var(--bronze-l)}
.cred h3{font-size:14px; color:var(--parch-2)}
.cred p{margin-top:8px; font-size:11.5px; color:var(--steel)}
.cred-meta{margin-top:10px !important; font-size:9px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-d) !important}

/* ==========================================================================
   09 PRICING
   ========================================================================== */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; padding:28px 24px; background:var(--gun); border:1px solid var(--line); border-radius:var(--r-lg)}
.plan-hot{border-color:var(--crimson); background:radial-gradient(120% 90% at 50% 0%, rgba(128,10,30,.4), transparent 60%), #161318}
.plan-flag{position:absolute; top:-11px; left:24px; padding:4px 10px; border-radius:3px; background:var(--crimson); color:#fff; font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.plan-kicker{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-d); margin-bottom:10px}
.plan h3{font-size:16.5px; color:var(--parch-2); min-height:2.4em}
.plan-price{display:flex; align-items:baseline; gap:6px; margin:12px 0 18px}
.plan-price b{font-family:var(--display); font-size:42px; letter-spacing:-.04em; line-height:1; color:var(--parch-2)}
.plan-price span{font-size:11px; color:var(--steel-d)}
.plan ul{display:flex; flex-direction:column; gap:9px; margin-bottom:22px}
.plan li{position:relative; padding-left:22px; font-size:12px; color:var(--steel)}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--crimson-l); font-size:11px}
.plan .btn{margin-top:auto; width:100%}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{max-width:900px}
.faq-list details{border-top:1px solid var(--line-soft)}
.faq-list details:last-child{border-bottom:1px solid var(--line-soft)}
.faq-list summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 2px;
  cursor:pointer; list-style:none; font-family:var(--display); font-size:15.5px; letter-spacing:-.01em; color:var(--parch-2);
  transition:color .2s;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--crimson-l)}
.faq-list .plus{width:18px; height:18px; flex:0 0 auto; color:var(--bronze); transition:transform .25s var(--ease)}
.faq-list details[open] .plus{transform:rotate(45deg); color:var(--crimson-l)}
.faq-list p{padding:0 40px 22px 2px; font-size:13px; color:var(--steel); max-width:78ch}
.faq-list p b{color:var(--parch)}

/* ==========================================================================
   10 CONTACT
   ========================================================================== */
.contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,36px); align-items:start}
.form{padding:clamp(22px,2.6vw,30px); background:var(--gun); border:1px solid var(--line); border-radius:var(--r-lg)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:block; margin-bottom:12px}
.field > span{display:block; margin-bottom:7px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-d)}
.field > span i{font-style:normal; text-transform:none; letter-spacing:0; color:var(--steel-d); opacity:.7}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; background:#0D0D10; color:var(--parch);
  border:1px solid rgba(255,255,255,.12); border-radius:5px;
  font-family:var(--body); font-size:13px; line-height:1.5; transition:border-color .18s, background .18s;
}
.field textarea{resize:vertical; min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:#5B6269}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--crimson); background:#111116}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA2AC' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:6px}
.form-note{font-size:10.5px; color:var(--steel-d); max-width:34ch}
.form-note b{color:var(--bronze-l); font-weight:400}
.form-status{margin-top:12px; font-size:12.5px; line-height:1.5; min-height:0}
.form-status:empty{display:none}
.form-status.ok{color:#8BE9AE}
.form-status.err{color:var(--crimson-l)}
.form-status.pending{color:#7A5A2A}
.form-fallback{margin-top:8px}
.form-fallback a{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#9C0C24;
  border-bottom:1.5px solid rgba(156,12,36,.5); padding-bottom:3px;
}
.form-fallback a:hover{color:#C8102E; border-color:#C8102E}
.form-fallback svg{width:12px; height:12px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}

/* button while a request is in flight */
.btn.is-busy{opacity:.72; cursor:progress}
.btn.is-busy .ar{opacity:0}

/* success panel — replaces the form once a submission lands */
.form-done{
  padding:clamp(26px,4vw,40px) clamp(22px,3vw,34px); border-radius:var(--r-lg);
  background:linear-gradient(165deg,#F3E9D2,#E8DCC2 70%);
  border:1px solid rgba(10,10,11,.14); text-align:left;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.55);
}
.form-done .fd-mark{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(160deg,#F0335A,#C8102E 55%,#76071A); color:#F5EDDA;
  box-shadow:0 10px 24px -12px rgba(120,7,26,.85);
}
.form-done .fd-mark svg{width:22px; height:22px; color:#F5EDDA}
.form-done b{
  display:block; margin-top:18px; font-family:var(--display);
  font-size:clamp(20px,2.4vw,27px); letter-spacing:-.02em; color:#141018;
}
.form-done p{margin-top:8px; font-size:14px; line-height:1.6; color:#5A4A3C}
.form-again{
  margin-top:20px; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--display); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#9C0C24; border-bottom:1px solid rgba(156,12,36,.45); padding-bottom:3px;
}
.form-again:hover{color:#C8102E; border-color:#C8102E}

.contact-side{display:flex; flex-direction:column; gap:10px}
.ccard{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--gun); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s, background .2s, transform .2s var(--ease);
}
a.ccard:hover{border-color:rgba(200,16,46,.5); background:#1B1A20; transform:translateX(3px)}
.ccard-icon{width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:5px; background:rgba(200,16,46,.12); border:1px solid rgba(200,16,46,.28); color:var(--crimson-l)}
.ccard-icon svg{width:17px; height:17px}
.ccard-body{min-width:0}
.ccard-body b{display:block; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-d)}
.ccard-body strong{display:block; margin-top:3px; font-family:var(--display); font-size:13.5px; font-weight:700; color:var(--parch-2); overflow-wrap:anywhere}
.ccard-body em{display:block; margin-top:3px; font-style:normal; font-size:10px; color:var(--steel-d)}
.ccard-ar{width:15px; height:15px; margin-left:auto; flex:0 0 auto; color:var(--steel-d); transition:transform .2s var(--ease), color .2s}
a.ccard:hover .ccard-ar{transform:translateX(3px); color:var(--crimson-l)}
.why{margin-top:6px; padding:20px; border-radius:var(--r); background:rgba(200,16,46,.06); border:1px solid rgba(200,16,46,.22)}
.why h3{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-l); margin-bottom:12px}
.why li{position:relative; padding-left:20px; font-size:11.5px; color:var(--steel); margin-bottom:7px}
.why li:last-child{margin-bottom:0}
.why li::before{content:"✓"; position:absolute; left:0; color:var(--crimson-l); font-size:10px}

/* ==========================================================================
   FINAL CTA + FOOTER
   ========================================================================== */
.final{
  position:relative; padding-block:clamp(56px,7vw,96px); text-align:center; overflow:hidden;
  background:radial-gradient(70% 120% at 50% 0%, rgba(128,10,30,.5), transparent 65%), #08080A;
  border-top:1px solid var(--line-soft);
}
.final-in{max-width:820px}
.final h2{font-size:clamp(26px,3.6vw,46px); line-height:1.04}
.final p{margin:16px auto 0; max-width:56ch; font-size:13px; color:var(--steel)}
.final-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px}

#footer{border-top:1px solid var(--line-soft); background:#070709; padding-block:52px 30px}
.foot-grid{display:grid; grid-template-columns:1.5fr .8fr .8fr 1fr; gap:clamp(20px,3vw,44px)}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{font-size:11.5px; color:var(--steel-d); max-width:34ch}
.foot-col{display:flex; flex-direction:column; gap:9px}
.foot-col h4{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-l); margin-bottom:4px}
.foot-col a{font-size:11.5px; color:var(--steel); transition:color .18s, transform .18s}
.foot-col a:hover{color:var(--parch-2)}
.foot-note{font-size:10px; color:var(--steel-d); margin-top:4px}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:38px; padding-top:20px; border-top:1px solid var(--line-soft)}
.foot-bottom p{font-size:10.5px; color:var(--steel-d)}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:clamp(16px,4vw,48px); background:rgba(4,4,5,.988)}
.lb.open{backdrop-filter:blur(6px)}
.lb.open{display:grid}
.lb-stage{width:min(560px,92vw); text-align:center}
.lb-art{position:relative; aspect-ratio:4/5; max-height:70vh; margin-inline:auto; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); display:grid; place-items:center; box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.lb-art .mono{font-size:clamp(56px,9vw,110px)}
.lb-art.has-shot{padding:0; background:#08080A}
.lb-art.has-shot img{width:100%; height:100%; object-fit:contain; display:block}
.lb-cap{margin-top:16px}
.lb-cap b{display:block; font-family:var(--display); font-size:15px; color:var(--parch-2)}
.lb-cap span{display:block; margin-top:4px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-d)}
.lb-count{margin-top:14px; font-size:10px; letter-spacing:.22em; color:var(--steel)}
.lb-x{position:absolute; top:18px; right:20px; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:rgba(23,22,26,.9); color:var(--parch); font-size:22px; line-height:1; cursor:pointer}
.lb-x:hover{border-color:var(--crimson); color:#fff}
.lb-btn{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:64px; border:1px solid var(--line); border-radius:6px; background:rgba(23,22,26,.9); color:var(--parch); font-size:22px; cursor:pointer}
.lb-btn:hover{border-color:var(--crimson); color:#fff}
.lb-prev{left:clamp(8px,2vw,24px)}
.lb-next{right:clamp(8px,2vw,24px)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
html.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.js .reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .status .dot{animation:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nav-links a{padding:9px 8px; font-size:10.5px}
  .hero h1{letter-spacing:-.03em}
  .svc-grid,.stack-grid,.cred-grid,.plans{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:1000px){
  .nav-links{
    position:fixed; inset:78px 0 auto 0; display:flex; flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:10px var(--gut) 24px; max-height:calc(100dvh - 78px); overflow-y:auto;
    background:rgba(8,8,10,.98); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform:translateY(-120%); visibility:hidden; transition:transform .34s var(--ease), visibility .34s;
  }
  .nav-links.open{transform:translateY(0); visibility:visible}
  .nav-links a{padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:14px; letter-spacing:.06em}
  .nav-links a:hover{background:transparent; color:var(--crimson-l)}
  .nav-cta-mobile{
    display:inline-flex !important; align-items:center; justify-content:center; gap:9px; margin-top:18px;
    padding:15px 20px !important; border:0 !important; border-radius:5px;
    background:var(--crimson) !important; color:#fff !important;
    font-size:12px !important; letter-spacing:.1em; text-transform:uppercase;
  }
  .nav-cta-mobile svg{width:14px; height:14px}
  .nav-cta{display:none}
  .burger{display:block}
  .nav-in{height:78px}
  .hero{padding-top:112px}
  .hero-grid{grid-template-columns:1fr; gap:34px}
  .plate{max-width:520px}
  .about-grid{grid-template-columns:1fr}
  .fact-card{max-width:560px}
  .case{grid-template-columns:1fr; gap:18px}
  .case-metrics{grid-template-rows:none; grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .quote{flex-basis:clamp(260px,62%,420px)}
}

@media (max-width:760px){
  .hero h1{font-size:clamp(30px,8.6vw,44px)}
  .kpi-band{grid-template-columns:1fr 1fr}
  .svc-grid,.stack-grid,.cred-grid,.plans,.steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:26px}
  .sec-num{font-size:54px; opacity:.7}
  .quote{flex-basis:84%}
  .btn{white-space:normal; text-align:center; font-size:12px; letter-spacing:.07em; padding:15px 20px; line-height:1.3}
  .btn-sm{font-size:11px}
  .mid-cta-actions .btn,.final-actions .btn{width:100%}
  .hero-actions .btn{flex:1 1 100%}
  .plan h3{min-height:0}
}

@media (max-width:480px){
  .brand-txt em{display:none}
  .plate{padding:22px 20px 18px}
  .plate-rating b{font-size:46px}
  .plate-stats{gap:8px}
  .kpi-band b{font-size:22px}
  .gallery{grid-template-columns:1fr 1fr; gap:9px}
  .tile figcaption{padding:11px 11px 13px}
  .foot-grid{grid-template-columns:1fr}
  .ccard{padding:14px}
  .quote{flex-basis:90%}
  .lb-stage{width:100%}
}

@media print{
  html.js .reveal{opacity:1 !important; transform:none !important}
  .nav,.rail,.lb,.final-actions,.hero-actions,.btn{display:none !important}
  body{background:#fff; color:#111}
  .sec-num,.hero-glow,body::before{display:none}
}

/* ==========================================================================
   v3 · INFOGRAPHIC LAYER
   Red-forward surfaces, one visual device per section, escalating density.
   ========================================================================== */

/* ---------- shared v3 primitives ---------- */
.surface-red{
  background:
    radial-gradient(120% 120% at 8% 0%, #C8102E 0%, #A00C25 34%, #66081A 68%, #3E0510 100%);
  color:var(--parch-2);
}
.panel-ruled{ /* faint measurement grid, not a hairline border */
  background-image:
    linear-gradient(rgba(245,237,218,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,237,218,.055) 1px, transparent 1px);
  background-size:44px 44px;
}
.num-badge{
  display:inline-grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
  border-radius:8px; background:var(--crimson); color:#fff;
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.02em;
}

/* ---------- 01 ABOUT · CAPABILITY ORBIT ---------- */
.profile-board{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.4vw,52px); align-items:center;
  margin:0 0 clamp(30px,4vw,52px); padding:clamp(26px,3.4vw,46px);
  border-radius:14px; overflow:hidden; position:relative;
  background:
    radial-gradient(120% 130% at 4% -10%, #C8102E 0%, #9C0C24 32%, #620818 64%, #3A0410 100%);
  border:1px solid rgba(245,237,218,.16);
  box-shadow:0 30px 70px -40px rgba(200,16,46,.9);
}
.profile-board::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(245,237,218,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,237,218,.055) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(90% 90% at 70% 50%, #000 0%, transparent 78%);
  mask-image:radial-gradient(90% 90% at 70% 50%, #000 0%, transparent 78%);
}
.orbit-wrap{position:relative; z-index:1}
.orbit{position:relative; aspect-ratio:1; width:100%; max-width:430px; margin-inline:auto; --rk:.94}
.orbit-ring{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1.5px solid rgba(245,237,218,.16)}
.orbit-ring.r1{width:100%; height:100%}
.orbit-ring.r2{width:66%; height:66%; border-style:dashed; border-color:rgba(245,237,218,.14)}
.orbit-ring.r3{width:34%; height:34%; border-color:rgba(245,237,218,.2)}
.orbit-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(96px,29%,136px); height:clamp(96px,29%,136px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:50%; background:#0A0A0B; border:2px solid rgba(245,237,218,.9);
  box-shadow:0 0 0 8px rgba(10,10,11,.35), 0 22px 40px -18px rgba(0,0,0,.9);
  text-align:center;
}
.orbit-core svg{width:34px; height:34px; border-radius:8px}
.orbit-core b{font-family:var(--display); font-size:clamp(7.5px,.72vw,9px); letter-spacing:.1em; text-transform:uppercase; line-height:1.25; color:var(--parch-2)}
.orbit-node{
  position:absolute;
  left:calc(50% + var(--x) * var(--rk,1));
  top:calc(50% + var(--y) * var(--rk,1));
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; width:clamp(72px,9vw,96px); z-index:2;
}
.orbit-node svg{
  width:clamp(38px,4.4vw,50px); height:clamp(38px,4.4vw,50px); padding:11px;
  border-radius:50%; background:rgba(10,10,11,.9); color:var(--crimson-l);
  border:1.5px solid rgba(245,237,218,.32);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9);
  transition:transform .25s var(--ease), border-color .25s, color .25s;
}
.orbit-node em{
  font-style:normal; font-family:var(--body); font-size:clamp(7.5px,.82vw,9px); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(245,237,218,.86); text-align:center; line-height:1.35;
}
.orbit-spin{position:absolute; inset:0; animation:orbitSpin 44s linear infinite; will-change:transform}
.orbit-spin .orbit-node{animation:orbitSpinReverse 44s linear infinite; will-change:transform}
@keyframes orbitSpin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes orbitSpinReverse{from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(-360deg)}}
.orbit-ring.r2{animation:orbitSpinRing 70s linear infinite reverse}
.orbit-ring.r1{animation:orbitSpinRing 110s linear infinite}
@keyframes orbitSpinRing{from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)}}
/* hovering a skill: the whole ring freezes and that node lights up */
.orbit:has(.orbit-node:hover) .orbit-spin,
.orbit:has(.orbit-node:hover) .orbit-spin .orbit-node,
.orbit:has(.orbit-node:hover) .orbit-ring{animation-play-state:paused}
.orbit:has(.orbit-node:hover) .orbit-node{opacity:.42; transition:opacity .3s ease}
.orbit:has(.orbit-node:hover) .orbit-node:hover{opacity:1}
@supports not (selector(:has(*))){
  .orbit:hover .orbit-spin,.orbit:hover .orbit-spin .orbit-node,.orbit:hover .orbit-ring{animation-play-state:paused}
}
.orbit-node{transition:opacity .3s ease}
.orbit-node:hover svg{
  transform:scale(1.16); border-color:var(--parch-2); color:#fff;
  animation:none;
  box-shadow:0 0 0 8px rgba(228,35,70,.22), 0 0 34px 6px rgba(228,35,70,.85), 0 10px 24px -12px #000;
  background:#16070C;
}
.orbit-node:hover em{color:#fff; letter-spacing:.12em}
.orbit-node:hover::after{
  content:""; position:absolute; left:50%; top:calc(clamp(38px,4.4vw,50px) / 2); width:clamp(38px,4.4vw,50px); height:clamp(38px,4.4vw,50px);
  transform:translate(-50%,-50%); border-radius:50%; border:1.5px solid rgba(228,35,70,.75);
  animation:orbitPulse 1.8s ease-out infinite; pointer-events:none;
}
@keyframes orbitPulse{0%{transform:translate(-50%,-50%) scale(1); opacity:.9} 100%{transform:translate(-50%,-50%) scale(1.9); opacity:0}}
.orbit-core{animation:coreBreathe 6s ease-in-out infinite}
@keyframes coreBreathe{0%,100%{box-shadow:0 0 0 8px rgba(10,10,11,.35), 0 22px 40px -18px rgba(0,0,0,.9), 0 0 0 rgba(228,35,70,0)}
  50%{box-shadow:0 0 0 8px rgba(10,10,11,.35), 0 22px 40px -18px rgba(0,0,0,.9), 0 0 44px 4px rgba(228,35,70,.5)}}
.board-caption{position:relative; z-index:1}
.board-caption .kicker{color:rgba(245,237,218,.92)}
.board-caption .kicker::before{background:var(--parch-2)}
.board-caption h3{font-size:clamp(21px,2.4vw,31px); line-height:1.1; color:#fff; max-width:22ch}
.board-lede{margin-top:14px; font-size:12.5px; line-height:1.72; color:rgba(245,237,218,.82); max-width:52ch}
.board-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; list-style:none; padding:0}
.btile{
  padding:15px 16px 16px; border-radius:9px; background:rgba(10,10,11,.62);
  border:1px solid rgba(245,237,218,.18); backdrop-filter:blur(3px);
  transition:border-color .25s var(--ease), background .25s, transform .25s var(--ease);
}
.btile:hover{border-color:rgba(245,237,218,.5); background:rgba(10,10,11,.8); transform:translateY(-2px)}
.btile svg{width:19px; height:19px; color:var(--parch-2); display:block; margin-bottom:10px}
.btile b{display:block; font-family:var(--display); font-size:clamp(14px,1.5vw,16.5px); letter-spacing:-.01em; line-height:1.1; color:#fff}
.btile span{display:block; margin-top:7px; font-size:10px; line-height:1.45; color:rgba(245,237,218,.72)}

@media (max-width:1000px){
  .profile-board{grid-template-columns:1fr; padding:clamp(24px,4vw,34px)}
  .orbit{max-width:360px; --rk:.92}
  .board-caption h3{max-width:30ch}
}
@media (max-width:560px){
  .orbit{max-width:330px; --rk:.8}
  .orbit-node{width:62px; gap:5px}
  .orbit-node svg{width:40px; height:40px; padding:9px}
  .orbit-node em{font-size:7.5px; line-height:1.3}
  .board-tiles{grid-template-columns:repeat(2,1fr); gap:8px}
  .btile{padding:12px 12px}
}

/* ---------- 02 SERVICES · crimson field + capability spectrum ---------- */
#services{
  background:
    radial-gradient(90% 70% at 82% -10%, #E42346 0%, rgba(228,35,70,0) 58%),
    radial-gradient(120% 100% at 0% 10%, #C8102E 0%, #A50C26 38%, #6E0919 72%, #470510 100%);
  color:var(--parch-2); isolation:isolate;
}
#services::before{ /* measurement grid */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(245,237,218,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,237,218,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
#services .shell{position:relative; z-index:1}
#services .sec-num{color:rgba(245,237,218,.16)}
#services .kicker{color:var(--parch-2)}
#services .kicker::before{background:var(--parch-2)}
#services .sec-head h2{color:#fff}
#services .sec-lede{color:rgba(255,255,255,.82)}

.spectrum{
  display:grid; grid-template-columns:repeat(12,1fr); gap:6px;
  margin:0 0 clamp(20px,2.6vw,30px);
}
.spectrum a{
  display:flex; flex-direction:column; gap:8px; height:100%;
  padding:12px 10px 11px; border-radius:6px;
  background:rgba(10,10,11,.42); border:1px solid rgba(245,237,218,.22);
  transition:background .2s, border-color .2s, transform .2s var(--ease), color .2s;
}
.spectrum i{
  font-style:normal; font-family:var(--display); font-size:10px; letter-spacing:.08em;
  color:rgba(245,237,218,.62);
}
.spectrum span{
  font-size:9px; line-height:1.3; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.spectrum a::after{ /* fill bar: reads as a data strip, not decoration */
  content:""; display:block; margin-top:auto; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--parch-2),rgba(245,237,218,.25));
  opacity:.5; transition:opacity .2s;
}
.spectrum a:hover{background:var(--parch-2); border-color:var(--parch-2); transform:translateY(-3px)}
.spectrum a:hover i,.spectrum a:hover span{color:#4A0512}
.spectrum a:hover::after{background:#4A0512; opacity:1}

#services .svc{
  counter-increment:svc-card; background:rgba(10,10,11,.74); border-color:rgba(245,237,218,.2);
  backdrop-filter:blur(3px);
}
#services .svc:hover{background:rgba(10,10,11,.9); border-color:var(--parch-2)}
#services .svc::before{
  content:counter(svc-card,decimal-leading-zero);
  position:absolute; top:16px; right:18px;
  font-family:var(--display); font-size:34px; line-height:1; letter-spacing:-.04em;
  color:rgba(245,237,218,.14); transition:color .2s;
}
#services .svc:hover::before{color:rgba(228,35,70,.85)}
#services .svc h3{color:#fff; padding-right:44px}
#services .svc-kicker{color:rgba(224,210,186,.72)}
#services .svc > p:not(.svc-kicker){color:rgba(245,237,218,.78)}
#services .svc li{color:rgba(245,237,218,.7)}
#services .svc-icon{background:rgba(245,237,218,.1); border-color:rgba(245,237,218,.35); color:var(--parch-2)}
#services .svc:hover .svc-icon{background:var(--crimson-l); border-color:var(--crimson-l); color:#fff}
#services .svc footer{border-top-color:rgba(245,237,218,.16)}
#services .svc .price{color:var(--bronze-l)}
#services .svc footer a{color:var(--parch-2)}
.svc-grid{counter-reset:svc-card}
.svc{scroll-margin-top:110px}

@media (max-width:1000px){
  .spectrum{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:560px){
  .spectrum{grid-template-columns:repeat(3,1fr); gap:5px}
  .spectrum span{font-size:8px}
  .spectrum a{padding:10px 8px}
}

/* ---------- 03 STACK · parchment inverse + capability radar ---------- */
.sec.light{background:#E8DCC2; color:#151013}
.sec.light .sec-num{color:rgba(10,10,11,.07)}
.sec.light .kicker{color:#9C0C24}
.sec.light .kicker::before{background:#9C0C24}
.sec.light .sec-head h2{color:#0A0A0B}
.sec.light .sec-lede{color:#4A3F33}

.stack-layout{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(22px,3vw,44px); align-items:start;
}
.radar{
  position:sticky; top:104px; margin:0; padding:clamp(18px,2vw,26px);
  background:rgba(255,255,255,.34); border:1px solid rgba(10,10,11,.16); border-radius:12px;
  box-shadow:0 26px 50px -44px rgba(10,10,11,.9);
}
.radar-cap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-bottom:8px;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#0A0A0B;
}
.radar-cap span{font-family:var(--body); font-weight:400; letter-spacing:0; text-transform:none; font-size:10.5px; color:#6B5B49}
.radar-svg{width:100%; height:auto; display:block}
.radar figcaption{margin-top:10px; font-size:10px; line-height:1.6; color:#6B5B49; max-width:44ch}

.sec.light .stack-groups{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sec.light .stack-group{
  padding:18px 18px 16px; background:rgba(255,255,255,.42);
  border:1px solid rgba(10,10,11,.14); border-radius:10px;
  transition:background .2s, border-color .2s, transform .2s var(--ease);
}
.sec.light .stack-group:hover{background:#fff; border-color:rgba(200,16,46,.4); transform:translateY(-3px)}
.sec.light .stack-group h3{
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:9.5px; letter-spacing:.18em; color:#9C0C24;
}
.sec.light .stack-group h3::before{content:""; width:7px; height:7px; border-radius:2px; background:#C8102E; flex:0 0 auto}
.sec.light .chips{gap:6px}
.sec.light .chips li{
  padding:6px 9px; border-radius:4px; background:#0A0A0B; color:#E8DCC2;
  font-size:10px; letter-spacing:.02em; transition:background .18s, color .18s, transform .18s;
}
.sec.light .chips li:hover{background:#C8102E; color:#fff; transform:translateY(-1px)}

@media (max-width:1000px){
  .stack-layout{grid-template-columns:1fr}
  .radar{position:static; max-width:440px; margin-inline:auto}
  .sec.light .stack-groups{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .sec.light .stack-groups{grid-template-columns:1fr}
}

/* ---------- 04 PROCESS · rail timeline with phase meters ---------- */
#process{background:linear-gradient(180deg,#0A0A0B 0%,#12060A 55%,#0A0A0B 100%)}
#process .sec-num{color:rgba(228,35,70,.10)}
.steps{
  position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px); padding-top:96px;
}
.steps::before{
  content:""; position:absolute; top:30px; left:6%; right:6%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--crimson-d),var(--crimson) 22%,var(--crimson-l) 62%,rgba(228,35,70,.12));
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .1s;
}
.steps.in::before,.steps.reveal.in::before{transform:scaleX(1)}
.steps li{
  position:relative; padding:26px 22px 30px; background:linear-gradient(180deg,#1A1217,#111014);
  border:1px solid rgba(245,237,218,.1); border-radius:12px;
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.steps li:hover{transform:translateY(-5px); border-color:rgba(228,35,70,.55)}
.steps li::before{ /* phase meter */
  content:""; position:absolute; left:0; bottom:0; height:5px; width:var(--w,25%);
  background:linear-gradient(90deg,var(--crimson),var(--crimson-l));
  border-radius:0 0 0 12px; box-shadow:0 0 18px rgba(228,35,70,.45);
}
.steps li:nth-child(1){--w:25%}
.steps li:nth-child(2){--w:50%}
.steps li:nth-child(3){--w:75%}
.steps li:nth-child(4){--w:100%}
.steps li::after{content:""; display:none}
.step-n{
  position:absolute; top:-96px; left:0; width:64px; height:64px; margin:0;
  display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%, var(--crimson-l), var(--crimson) 55%, var(--crimson-d));
  border:3px solid #0A0A0B; box-shadow:0 0 0 1px rgba(245,237,218,.22), 0 18px 34px -18px rgba(200,16,46,.9);
  font-size:17px; letter-spacing:.02em; color:#fff; z-index:2;
}
.steps li:hover .step-n{box-shadow:0 0 0 1px var(--parch), 0 20px 38px -16px rgba(228,35,70,1)}
.steps h3{font-size:clamp(15px,1.5vw,17.5px); color:#fff; margin-bottom:10px}
.steps p{font-size:11.5px; line-height:1.68; color:rgba(245,237,218,.62)}
.step-out{margin-top:14px; padding-top:12px; border-top:1px solid rgba(245,237,218,.12); color:rgba(245,237,218,.55) !important}
.step-out b{color:var(--bronze-l)}

@media (max-width:1000px){
  .steps{grid-template-columns:1fr 1fr; padding-top:96px; row-gap:104px}
  .steps::before{top:30px; left:0; right:0}
  .steps li:nth-child(n+3) .step-n{top:-96px}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr; padding-top:0; row-gap:16px}
  .steps::before{top:0; bottom:0; left:26px; right:auto; width:3px; height:auto; background:linear-gradient(180deg,var(--crimson-d),var(--crimson),rgba(228,35,70,.1)); transform:scaleY(0); transform-origin:top}
  .steps.in::before,.steps.reveal.in::before{transform:scaleY(1)}
  .steps li{padding:22px 18px 24px 68px}
  .step-n{top:18px; left:0; width:52px; height:52px; font-size:14px}
}

/* ---------- 05 RESULTS · scope signatures + case index ---------- */
#results{background:radial-gradient(90% 60% at 100% 0%, rgba(128,10,30,.28), transparent 60%), #0A0A0B}
.cases{counter-reset:case; gap:12px}
.case{position:relative; overflow:hidden}
.case::before{
  content:counter(case,decimal-leading-zero); counter-increment:case;
  position:absolute; top:14px; right:18px; z-index:0;
  font-family:var(--display); font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-.04em;
  color:rgba(245,237,218,.07); transition:color .25s;
}
.case:hover::before{color:rgba(228,35,70,.3)}
.case::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--crimson-l),var(--crimson-d));
  transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease);
}
.case:hover::after{transform:scaleY(1)}
.case-body{position:relative; z-index:1}
.case-metrics{position:relative; z-index:1; padding-top:26px}

.scope{display:flex; gap:6px; margin-top:16px}
.scope li{
  flex:1 1 0; min-width:0; padding:7px 6px 8px; text-align:center;
  border:1px solid rgba(245,237,218,.12); border-radius:4px; background:rgba(245,237,218,.03);
}
.scope b{
  display:block; font-family:var(--display); font-size:8.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(245,237,218,.28);
}
.scope li.on{border-color:rgba(200,16,46,.55); background:linear-gradient(180deg,rgba(200,16,46,.28),rgba(200,16,46,.12))}
.scope li.on b{color:#fff}
.scope li.on::after{
  content:""; display:block; width:16px; height:2px; margin:6px auto 0; border-radius:2px;
  background:var(--crimson-l); box-shadow:0 0 10px rgba(228,35,70,.9);
}
.scope li:not(.on)::after{content:""; display:block; width:10px; height:2px; margin:6px auto 0; border-radius:2px; background:rgba(245,237,218,.14)}

@media (max-width:760px){
  .scope li{padding:6px 4px 7px}
  .scope b{font-size:7.5px; letter-spacing:.08em}
  .case-metrics{padding-top:0}
}

/* ---------- 06 WORK · marquee + framed gallery ---------- */
#work{background:#070708; position:relative; overflow:hidden}
#work::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(1100px,120vw); height:420px; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(200,16,46,.3), transparent 70%);
  filter:blur(20px);
}
#work .shell{position:relative; z-index:1}
#work .sec-num{color:rgba(228,35,70,.12)}

.marquee{
  position:relative; margin:0 0 clamp(24px,3vw,38px);
  padding:16px 0; overflow:hidden;
  border-top:1px solid rgba(200,16,46,.35); border-bottom:1px solid rgba(200,16,46,.35);
  background:linear-gradient(90deg,rgba(200,16,46,.10),rgba(200,16,46,.02) 40%,rgba(200,16,46,.10));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{display:flex; align-items:center; gap:26px; width:max-content; animation:slide 46s linear infinite}
.marquee span{
  font-family:var(--display); font-size:clamp(15px,1.7vw,21px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(245,237,218,.82); white-space:nowrap;
}
.marquee i{width:8px; height:8px; border-radius:2px; background:var(--crimson); flex:0 0 auto; transform:rotate(45deg)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

#work .gallery{
  padding:clamp(12px,1.4vw,18px); border-radius:14px;
  background:linear-gradient(180deg,rgba(200,16,46,.14),rgba(10,10,11,.5) 24%);
  border:1px solid rgba(200,16,46,.3);
  box-shadow:0 40px 80px -60px rgba(228,35,70,.9);
}
#work .tile{border-color:rgba(245,237,218,.12)}
#work .tile figcaption{background:#0C0B0E}

/* ---------- 07 REVIEWS · crimson band + rating dashboard ---------- */
#reviews{
  background:
    radial-gradient(80% 70% at 12% 0%, #D01230 0%, rgba(208,18,48,0) 62%),
    radial-gradient(100% 100% at 100% 20%, rgba(228,35,70,.5), transparent 60%),
    linear-gradient(160deg,#7A0A1C 0%,#5A0714 55%,#3B0410 100%);
  color:var(--parch-2);
}
#reviews .sec-num{color:rgba(245,237,218,.14)}
#reviews .kicker{color:var(--parch-2)}
#reviews .kicker::before{background:var(--parch-2)}
#reviews .sec-head h2{color:#fff}
#reviews .sec-lede{color:rgba(255,255,255,.8)}

.rating-panel{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,.8fr);
  gap:clamp(18px,2.6vw,38px); align-items:center;
  margin:0 0 clamp(22px,3vw,34px); padding:clamp(20px,2.6vw,32px);
  border-radius:12px; background:rgba(10,10,11,.62); border:1px solid rgba(245,237,218,.22);
  backdrop-filter:blur(4px);
}
.rp-score b{
  display:block; font-family:var(--display); font-size:clamp(48px,6vw,76px); line-height:.86;
  letter-spacing:-.05em; color:#fff;
}
.rp-score .stars{display:block; margin-top:10px; font-size:16px; color:var(--bronze-l); letter-spacing:.2em}
.rp-score em{display:block; margin-top:8px; font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,237,218,.6)}
.rp-dist{display:flex; flex-direction:column; gap:7px}
.rp-row{display:grid; grid-template-columns:24px 1fr 42px; align-items:center; gap:10px}
.rp-row span{font-family:var(--display); font-size:10px; color:rgba(245,237,218,.66)}
.rp-bar{height:9px; border-radius:5px; background:rgba(245,237,218,.12); overflow:hidden}
.rp-bar i{
  display:block; height:100%; width:var(--p); border-radius:5px;
  background:linear-gradient(90deg,var(--bronze-l),var(--parch-2));
  box-shadow:0 0 14px rgba(245,237,218,.35);
}
.rp-row:first-child .rp-bar i{background:linear-gradient(90deg,var(--crimson-l),var(--parch-2))}
.rp-row b{font-family:var(--display); font-size:10px; text-align:right; color:rgba(245,237,218,.8)}
.rp-facts{display:grid; gap:8px}
.rp-facts li{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 11px; border-radius:6px; background:rgba(245,237,218,.08); border:1px solid rgba(245,237,218,.14);
}
.rp-facts b{font-family:var(--display); font-size:14px; color:#fff}
.rp-facts span{font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,237,218,.66)}

#reviews .quote{background:rgba(10,10,11,.8); border-color:rgba(245,237,218,.2)}
#reviews .quote p{color:rgba(245,237,218,.94)}
#reviews .quote footer{border-top-color:rgba(245,237,218,.16)}
#reviews .avatar{background:rgba(245,237,218,.12); border-color:rgba(245,237,218,.35); color:var(--parch-2)}
#reviews .quote footer b{color:#fff}
#reviews .quote footer em{color:rgba(245,237,218,.56)}
#reviews .round{border-color:rgba(245,237,218,.4); color:var(--parch-2)}
#reviews .round:hover{background:var(--parch-2); color:var(--crimson-d); border-color:var(--parch-2)}
#reviews .quote-dots i{background:rgba(245,237,218,.28)}
#reviews .quote-dots i.on{background:var(--parch-2)}
#reviews .review-foot p{color:rgba(255,255,255,.8)}
#reviews .review-foot b{color:#fff}
#reviews .review-foot .btn-ghost{--fg:#fff; --bd:rgba(245,237,218,.5)}
#reviews .review-foot .btn-ghost:hover{--bg:rgba(245,237,218,.14); --bd:var(--parch-2)}

@media (max-width:1000px){
  .rating-panel{grid-template-columns:1fr 1fr; row-gap:22px}
  .rp-facts{grid-column:1 / -1; grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .rating-panel{grid-template-columns:1fr}
  .rp-facts{grid-template-columns:1fr}
}

/* ---------- 08 CREDENTIALS · seals ---------- */
.cred-seal{display:block; width:66px; height:66px; margin-bottom:16px; filter:drop-shadow(0 10px 18px rgba(200,16,46,.35)); transition:transform .3s var(--ease)}
.cred:hover .cred-seal{transform:rotate(-8deg) scale(1.06)}
.seal-svg{width:100%; height:100%}

/* ---------- 09 PRICING · comparison matrix ---------- */
#pricing{background:radial-gradient(80% 60% at 0% 0%, rgba(128,10,30,.25), transparent 55%), #0A0A0B}
.matrix-wrap{
  overflow-x:auto; border-radius:14px; border:1px solid rgba(245,237,218,.14);
  background:#0E0D11; box-shadow:var(--shadow); -webkit-overflow-scrolling:touch;
}
.matrix{border-collapse:separate; border-spacing:0; width:100%; min-width:760px; text-align:left}
.matrix th,.matrix td{padding:15px 16px; border-bottom:1px solid rgba(245,237,218,.08); font-size:12px; vertical-align:middle}
.matrix thead th{vertical-align:top; padding:20px 16px 18px; background:#141218; border-bottom:1px solid rgba(245,237,218,.16)}
.matrix thead th + th{border-left:1px solid rgba(245,237,218,.08)}
.matrix thead th.mx-hot{background:linear-gradient(180deg,rgba(200,16,46,.35),rgba(200,16,46,.12) 70%,#141218); position:relative}
.matrix thead th.mx-hot::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg,var(--crimson),var(--crimson-l))}
.mx-corner{font-family:var(--body); font-size:9.5px !important; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-d); font-weight:700}
.mx-kicker{display:block; font-family:var(--body); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-d); margin-bottom:8px}
.mx-flag{
  display:inline-block; margin-bottom:8px; padding:3px 7px; border-radius:3px; background:var(--crimson); color:#fff;
  font-family:var(--body); font-size:7.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.mx-price{display:block; font-family:var(--display); font-size:clamp(24px,2.6vw,32px); line-height:1; letter-spacing:-.03em; color:#fff}
.mx-price + em{display:block; margin-top:4px; font-style:normal; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-d)}
.matrix thead th.mx-hot .mx-price{color:#fff}
.matrix tbody th{
  font-family:var(--body); font-weight:400; font-size:12px; color:var(--parch); text-align:left;
  background:#0B0A0D; position:sticky; left:0;
}
.matrix tbody tr:nth-child(even) td{background:rgba(245,237,218,.025)}
.matrix tbody td{color:var(--steel); white-space:nowrap}
.matrix tbody td[data-c="2"]{background:rgba(200,16,46,.09); color:var(--parch-2); font-weight:700}
.matrix tbody tr:nth-child(even) td[data-c="2"]{background:rgba(200,16,46,.14)}
.matrix .tk{display:inline-block; width:13px; height:13px; margin-right:7px; vertical-align:-2px; color:var(--crimson-l)}
.matrix .dash{color:rgba(245,237,218,.3)}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix tfoot th,.matrix tfoot td{padding:16px; background:#0B0A0D; border-top:1px solid rgba(245,237,218,.14)}
.matrix tfoot th{font-family:var(--body); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-d); text-align:left}
.matrix tfoot td[data-c="2"],.matrix tfoot td.mx-hot{background:rgba(200,16,46,.16)}
.matrix tfoot .btn{width:100%}
.matrix tfoot .btn-sm{font-size:10px; padding:10px 12px; min-height:40px}

@media (max-width:760px){
  .matrix th,.matrix td{padding:13px 12px; font-size:11px}
  .matrix thead th{padding:16px 12px}
  .mx-price{font-size:22px}
}

/* utility */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 10 CONTACT · crimson panel with parchment form ---------- */
#contact{
  position:relative; isolation:isolate;
  background:
    radial-gradient(70% 60% at 85% 8%, #E42346 0%, rgba(228,35,70,0) 60%),
    linear-gradient(155deg,#C8102E 0%,#9C0C24 42%,#5E0716 100%);
}
#contact .sec-num{color:rgba(245,237,218,.16)}
#contact .kicker{color:var(--parch-2)}
#contact .kicker::before{background:var(--parch-2)}
#contact .sec-head h2{color:#fff}
#contact .sec-lede{color:rgba(255,255,255,.84)}
.contact-mark{
  position:absolute; left:-120px; bottom:-150px; width:min(520px,54vw); height:auto;
  opacity:.09; z-index:0; pointer-events:none; transform:rotate(-8deg);
}
#contact .shell{position:relative; z-index:1}
#contact .contact-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start}
#contact .form{order:2}
#contact .contact-side{order:1}

#contact .form{
  background:#F3EAD8; border:1px solid rgba(10,10,11,.22); border-radius:14px;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9); color:#0A0A0B;
}
#contact .field > span{color:#6A5847}
#contact .field > span i{color:#8A7763}
#contact .field input,#contact .field select,#contact .field textarea{
  background:#fff; color:#0A0A0B; border:1px solid rgba(10,10,11,.2);
}
#contact .field input::placeholder,#contact .field textarea::placeholder{color:#9A8A78}
#contact .field input:focus,#contact .field select:focus,#contact .field textarea:focus{
  border-color:var(--crimson); background:#fff; box-shadow:0 0 0 3px rgba(200,16,46,.14);
}
#contact .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236A5847' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
#contact .form-note{color:#6A5847}
#contact .form-note b{color:#9C0C24}
#contact .form-status.ok{color:#1F7A45}
#contact .form-status.err{color:#B00D28}
#contact .form-status.pending{color:#7A5A2A}

#contact .ccard{background:rgba(10,10,11,.55); border-color:rgba(245,237,218,.24); backdrop-filter:blur(3px)}
a.ccard:hover{background:rgba(10,10,11,.8); border-color:var(--parch-2); transform:translateX(3px)}
#contact .ccard-icon{background:rgba(245,237,218,.14); border-color:rgba(245,237,218,.4); color:var(--parch-2)}
#contact .ccard-body b{color:rgba(245,237,218,.7)}
#contact .ccard-body strong{color:#fff}
#contact .ccard-body em{color:rgba(245,237,218,.6)}
#contact .ccard-ar{color:rgba(245,237,218,.7)}
#contact .why{background:rgba(10,10,11,.42); border-color:rgba(245,237,218,.26)}
#contact .why h3{color:var(--parch-2)}
#contact .why li{color:rgba(245,237,218,.82)}
#contact .why li::before{color:var(--parch-2)}

@media (max-width:1000px){
  #contact .contact-grid{grid-template-columns:1fr}
  #contact .form{order:1}
  #contact .contact-side{order:2}
  .contact-mark{opacity:.07; width:70vw; right:-14vw}
}

/* ---------- FAQ · numbered rows ---------- */
.faq-list{counter-reset:faq; max-width:960px}
.faq-list details{counter-increment:faq}
.faq-list summary{position:relative; padding-left:56px}
.faq-list summary::before{
  content:counter(faq,decimal-leading-zero); position:absolute; left:0; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:36px; height:36px; border-radius:8px;
  background:rgba(200,16,46,.12); border:1px solid rgba(200,16,46,.34);
  font-family:var(--display); font-size:11px; letter-spacing:.04em; color:var(--crimson-l);
  transition:background .2s, color .2s, border-color .2s;
}
.faq-list details[open] summary::before{background:var(--crimson); border-color:var(--crimson); color:#fff}
.faq-list p{padding-left:56px}

/* ---------- FINAL CTA · growth curve ---------- */
.final{position:relative; overflow:hidden; isolation:isolate}
.final-curve{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(240px,42vh,420px);
  z-index:0; pointer-events:none; opacity:.9;
}
.final-in{position:relative; z-index:1}
.final-logo{width:60px; height:60px; margin:0 auto 22px; border-radius:14px; box-shadow:0 18px 40px -18px rgba(228,35,70,.9)}

@media (max-width:760px){
  .faq-list summary{padding-left:46px; font-size:14.5px}
  .faq-list summary::before{width:30px; height:30px; font-size:10px}
  .faq-list p{padding-left:46px}
}

/* ---------- red blocks in the dark run ---------- */
.results-band{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0 0 clamp(16px,2.4vw,24px);
  border-radius:12px; overflow:hidden; background:rgba(245,237,218,.16);
  box-shadow:0 30px 60px -50px rgba(200,16,46,.9);
}
.results-band div{
  padding:clamp(16px,2vw,22px) clamp(14px,2vw,20px);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(228,35,70,.55), rgba(10,10,11,0) 62%),
    linear-gradient(160deg,#A00C25,#640818);
}
.results-band i{display:block; font-family:var(--display); font-style:normal; font-size:10.5px; letter-spacing:.2em; color:rgba(255,255,255,.72); margin-bottom:10px}
.results-band b{display:block; font-family:var(--display); font-size:clamp(17px,1.9vw,22px); line-height:1.15; letter-spacing:-.01em; color:#fff}
.results-band span{display:block; margin-top:8px; font-size:10.5px; line-height:1.5; color:rgba(245,237,218,.8)}

#results .mid-cta{
  background:
    radial-gradient(120% 160% at 100% 0%, #E42346 0%, rgba(228,35,70,0) 60%),
    linear-gradient(120deg,#C8102E,#8E0A1F 70%);
  border-color:rgba(245,237,218,.3);
}
#results .mid-cta h3{color:#fff}
#results .mid-cta p:last-child{color:rgba(255,255,255,.85)}
#results .mid-cta .btn-primary{--bg:#0A0A0B; --bd:#0A0A0B; --fg:#fff}
#results .mid-cta .btn-primary:hover{--bg:#17161A; --bd:var(--parch-2)}
#results .mid-cta .btn-ghost{--fg:#fff; --bd:rgba(255,255,255,.55)}
#results .mid-cta .btn-ghost:hover{--bg:rgba(255,255,255,.14); --bd:#fff}

.upwork-band{
  background:
    radial-gradient(110% 180% at 0% 0%, #E42346 0%, rgba(228,35,70,0) 55%),
    linear-gradient(120deg,#A00C25,#5E0716);
  border-color:rgba(245,237,218,.28);
}
.upwork-band h3{color:#fff}
.upwork-band p{color:rgba(245,237,218,.82)}
.upwork-band .ub-icon{background:rgba(10,10,11,.35); border-color:rgba(245,237,218,.45); color:var(--parch-2)}
.upwork-band .btn-primary{--bg:#F5EDDA; --bd:#F5EDDA; --fg:#0A0A0B}
.upwork-band .btn-primary:hover{--bg:#fff; --bd:#fff; --fg:#0A0A0B}

@media (max-width:760px){
  .results-band{grid-template-columns:1fr 1fr}
}

/* polish */
#services .svc footer{border-top:1px solid rgba(245,237,218,.14); padding-top:16px}
.final-curve{opacity:.62}
@media (min-width:1001px){
  .radar{position:sticky; top:104px}
}
/* real screenshots, when supplied: <img class="shot" ...> replaces the generated art */
.tile .shot{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 0; background:#0E0E11}
.tile .shot + .art{display:none}

/* small-screen affordances */
.matrix-hint{display:none}
@media (max-width:860px){
  .matrix-hint{
    display:block; margin-top:10px; font-family:var(--body); font-size:9.5px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--steel-d);
  }
  .matrix-hint::after{content:" →"}
  .case::before{display:none}
}

/* ---------- HERO CREDENTIAL PANEL (v3.1 — photo removed) ---------- */
.plate.cred{
  padding:24px 24px 18px; overflow:hidden;
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(200,16,46,.55), transparent 62%),
    linear-gradient(165deg,#17131A,#0B0B0E 62%);
  border:1px solid rgba(200,16,46,.42);
  box-shadow:14px 14px 0 -1px rgba(200,16,46,.14), var(--shadow);
}
.plate.cred::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--crimson-d),var(--crimson-l))}
.cred-head{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.cred-mark{width:38px; height:38px; flex:0 0 auto; border-radius:9px}
.cred-title{min-width:0}
.cred-title b{display:block; font-family:var(--display); font-size:12.5px; letter-spacing:.02em; color:var(--parch-2)}
.cred-title em{display:block; margin-top:3px; font-style:normal; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-d)}
.cred-head .plate-badge{margin-left:auto; flex:0 0 auto}

.cred-score{display:flex; align-items:baseline; gap:12px; padding-bottom:18px; border-bottom:1px solid rgba(245,237,218,.1)}
.cred-score b{font-family:var(--display); font-size:56px; line-height:.86; letter-spacing:-.04em; color:#fff}
.cred-score .stars{font-size:13px; letter-spacing:.18em}
.cred-score em{font-style:normal; font-size:10px; letter-spacing:.06em; color:var(--steel); align-self:flex-end; padding-bottom:4px}

.cred-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 18px}
.cred-stats div{padding:12px 10px; border-radius:7px; background:rgba(245,237,218,.055); border:1px solid rgba(245,237,218,.08)}
.cred-stats dt{font-family:var(--display); font-size:16px; letter-spacing:-.01em; line-height:1; color:var(--parch-2)}
.cred-stats dd{margin:5px 0 0; font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--steel-d)}

.cred-mix p{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-d); margin-bottom:10px}
.cred-mix ul{display:flex; flex-direction:column; gap:8px}
.cred-mix li{display:grid; grid-template-columns:58px 1fr 20px; align-items:center; gap:10px}
.cred-mix span{font-family:var(--display); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--parch)}
.cred-mix i{display:block; height:7px; border-radius:4px; background:rgba(245,237,218,.1); overflow:hidden}
.cred-mix i b{display:block; height:100%; width:var(--p); border-radius:4px; background:linear-gradient(90deg,var(--crimson-d),var(--crimson-l)); box-shadow:0 0 12px rgba(228,35,70,.55)}
.cred-mix em{font-style:normal; font-family:var(--display); font-size:10px; color:var(--bronze-l); text-align:right}
.plate.cred .plate-link{margin-top:16px; padding-top:14px; border-top:1px solid rgba(245,237,218,.1); width:100%; display:flex; align-items:center; gap:8px}
.plate.cred .plate-link svg{margin-left:auto}

@media (max-width:1000px){
  .plate.cred{max-width:460px; margin-inline:auto}
}

@media (max-width:560px){
  .cred-head{gap:10px}
  .cred-head .plate-badge{display:none}
  .cred-title b{font-size:11.5px}
  .cred-title em{font-size:8px; letter-spacing:.1em}
  .cred-score b{font-size:48px}
  .cred-score{flex-wrap:wrap; gap:8px 10px}
  .cred-score em{align-self:baseline; padding-bottom:0}
  .plate.cred{box-shadow:9px 9px 0 -1px rgba(200,16,46,.16), var(--shadow)}
}

/* ==========================================================================
   v3.2 · RESULTS — image-led cards, alternating dark / light
   ========================================================================== */
#results .cases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px); counter-reset:none}
.case{
  display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden;
  border-radius:14px; background:#111014; border:1px solid var(--line);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.case::before,.case::after{display:none}
.case:hover{transform:translateY(-4px); border-color:rgba(228,35,70,.5); box-shadow:0 30px 60px -40px rgba(228,35,70,.7)}
.case-fig{margin:0; background:#0B0B0E; line-height:0; overflow:hidden}
.case-fig img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  transition:transform .5s var(--ease);
}
.case:hover .case-fig img{transform:scale(1.015)}
.case-body{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:clamp(18px,2vw,24px); border-top:1px solid rgba(228,35,70,.3);
  flex:1 1 auto;
}
.case-n{
  position:absolute; top:-19px; right:18px; display:grid; place-items:center;
  width:38px; height:38px; border-radius:10px; background:var(--crimson); color:#fff;
  font-family:var(--display); font-size:12px; letter-spacing:.04em;
  box-shadow:0 10px 22px -10px rgba(228,35,70,.95);
}
.case h3{font-size:clamp(16px,1.6vw,19px); line-height:1.22; letter-spacing:-.01em}
.case-kicker{font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; margin:0}
.case .tags{margin-top:auto; padding-top:8px}

/* dark card */
.case.tone-dark{background:linear-gradient(180deg,#15121A,#0B0B0E)}
.case.tone-dark h3{color:#F5EDDA}
.case.tone-dark .case-kicker{color:var(--crimson-l)}
.case.tone-dark .tags li{border-color:rgba(245,237,218,.18); color:rgba(245,237,218,.62)}

/* light card */
.case.tone-light{background:#EFE7D6; border-color:rgba(10,10,11,.12)}
.case.tone-light .case-fig{background:#E4DACA}
.case.tone-light h3{color:#0A0A0B}
.case.tone-light .case-kicker{color:#9C0C24}
.case.tone-light .tags li{border-color:rgba(10,10,11,.22); color:#5C5347}
.case.tone-light .case-body{border-top-color:rgba(156,12,36,.35)}
.case.tone-light .case-n{background:#0A0A0B; color:#F5EDDA}

@media (max-width:820px){
  #results .cases{grid-template-columns:1fr}
  .case-fig img{aspect-ratio:4/4.6}
}

/* ==========================================================================
   LOGO — glow, pulse, icon glow
   ========================================================================== */
@keyframes akGlow{
  0%,100%{filter:drop-shadow(0 0 10px rgba(228,35,70,.45)) drop-shadow(0 0 2px rgba(245,237,218,.35))}
  50%{filter:drop-shadow(0 0 22px rgba(228,35,70,.85)) drop-shadow(0 0 6px rgba(245,237,218,.55))}
}
@keyframes akPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}
.logo-pulse{display:inline-flex; flex:0 0 auto; animation:akPulse 3.4s ease-in-out infinite}
.logo-pulse svg{animation:akGlow 3.4s ease-in-out infinite}
.brand-mark{animation:akGlow 4.2s ease-in-out infinite}
.svc-icon svg,.orbit-node svg,.ccard-icon svg,.cred-seal,.steps li:hover .step-n{
  animation:iconGlow 4s ease-in-out infinite;
}
@keyframes iconGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(228,35,70,0))}
  50%{filter:drop-shadow(0 0 10px rgba(228,35,70,.55))}
}
.orbit-node:nth-child(odd) svg{animation-delay:.8s}
.orbit-node:nth-child(3n) svg{animation-delay:1.6s}
.svc:hover .svc-icon svg{filter:drop-shadow(0 0 16px rgba(228,35,70,.9))}
.cred:hover .cred-seal{animation:none}
@media (prefers-reduced-motion:reduce){
  .logo-pulse,.logo-pulse svg,.brand-mark,.svc-icon svg,.orbit-node svg,.ccard-icon svg,.cred-seal,
  .orbit-spin,.orbit-spin .orbit-node,.orbit-ring,.orbit-core,.orbit-node:hover::after{animation:none}
}

/* ==========================================================================
   SOCIAL CONTENT WALL
   ========================================================================== */
#social{
  background:
    radial-gradient(80% 60% at 92% 0%, rgba(200,16,46,.3), transparent 60%),
    linear-gradient(180deg,#0A0A0B,#120A10 60%,#0A0A0B);
  overflow:hidden;
}
#social .sec-num{color:rgba(228,35,70,.12)}
.social-rail{
  display:flex; gap:clamp(12px,1.6vw,20px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px var(--gut) 10px 0; margin-right:calc(-1 * var(--gut));
  scrollbar-width:none;
}
.social-rail::-webkit-scrollbar{display:none}
.post{
  flex:0 0 clamp(240px,26%,320px); scroll-snap-align:start; margin:0;
  border-radius:14px; overflow:hidden; background:#111014; border:1px solid var(--line);
  transition:transform .25s var(--ease), border-color .25s;
}
.post:hover{transform:translateY(-5px); border-color:rgba(228,35,70,.55)}
.post-art{
  position:relative; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px; overflow:hidden; isolation:isolate; min-height:330px;
}
.post-art::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.55));
}
.pa-1{background:linear-gradient(160deg,#C8102E,#5E0716 70%)}
.pa-2{background:linear-gradient(160deg,#141319,#2A0C16 70%)}
.pa-3{background:linear-gradient(160deg,#7C0A1D,#24060E 70%)}
.pa-4{background:linear-gradient(160deg,#A00C25,#0A0A0B 75%)}
.pa-5{background:linear-gradient(160deg,#17161A,#3A0A15 70%)}
.pa-6{background:linear-gradient(160deg,#0E0D11,#8E0A1F 130%)}
.post-format{
  position:absolute; top:16px; left:16px; padding:5px 9px; border-radius:4px;
  background:rgba(10,10,11,.55); border:1px solid rgba(245,237,218,.28);
  font-family:var(--display); font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--parch-2);
}
.post-big{
  position:absolute; top:38%; left:20px; right:20px;
  font-family:var(--display); font-size:clamp(40px,4.6vw,58px); line-height:.9; letter-spacing:-.05em;
  color:#fff; opacity:.92;
}
.post-num{
  position:absolute; top:30%; right:20px; font-family:var(--display); font-size:44px; line-height:1;
  letter-spacing:-.04em; color:rgba(245,237,218,.22);
}
.post-num span{font-size:15px; letter-spacing:0; color:rgba(245,237,218,.4)}
.post-line{
  position:relative; font-family:var(--display); font-size:clamp(13px,1.3vw,15.5px); line-height:1.32;
  color:#F5EDDA; letter-spacing:-.01em;
}
.post-foot{
  margin-top:12px; display:flex; align-items:center; gap:8px;
  font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,237,218,.6);
}
.post .play{
  width:0; height:0; border-left:9px solid rgba(245,237,218,.85);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.post-swipe{
  position:absolute; bottom:20px; right:20px; width:34px; height:3px; border-radius:2px; background:rgba(245,237,218,.5);
}
.post-swipe::after{content:""; position:absolute; right:-2px; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--parch-2)}
.post-poll{display:grid; grid-template-columns:1.15fr 1fr; gap:7px; margin-top:14px}
.post-poll i{
  position:relative; overflow:hidden; height:30px; border-radius:6px; background:rgba(245,237,218,.14);
  font-style:normal; display:flex; align-items:center; justify-content:space-between;
  padding:0 9px; min-width:0;
}
.post-poll i::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--p,50%);
  background:rgba(245,237,218,.2); animation:postFill 1.2s var(--ease) both;
}
.post-poll i.win::before{background:var(--parch-2)}
.post-poll i b{
  position:relative; z-index:1; font-family:var(--display); font-size:12px; font-weight:700;
  color:var(--parch-2); letter-spacing:0;
}
.post-poll i.win b{color:#0A0A0B}
.post-poll i em{
  position:relative; z-index:1; font-style:normal; font-family:var(--display); font-size:10.5px;
  color:rgba(245,237,218,.85);
}
.post-poll i.win em{color:#0A0A0B}
.post-rail{display:flex; gap:7px; margin-top:14px}
.post-rail svg{
  width:26px; height:26px; padding:6px; border-radius:50%; color:var(--parch-2);
  border:1px solid rgba(245,237,218,.34); background:rgba(10,10,11,.35);
  animation:iconGlow 4s ease-in-out infinite;
}
.post-rail svg:nth-child(2){animation-delay:.9s}
.post-rail svg:nth-child(3){animation-delay:1.8s}
/* --- icon + motion layer inside the post cards --- */
.post-ico{
  position:absolute; top:14px; right:14px; width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; background:rgba(10,10,11,.5); border:1px solid rgba(245,237,218,.34);
}
.post-ico svg{width:15px; height:15px; color:var(--parch-2)}
.post-foot svg{width:11px; height:11px; color:rgba(245,237,218,.75); flex:0 0 auto}
.post-foot .swipe-ar{color:var(--parch-2)}

/* reel: pulsing play badge + live waveform */
.post-ring{
  position:absolute; top:52px; right:16px; width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; background:rgba(10,10,11,.55); border:1px solid rgba(245,237,218,.5);
}
.post-ring::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1.5px solid rgba(245,237,218,.7); animation:postPing 2.6s ease-out infinite;
}
.post-play{
  width:0; height:0; margin-left:3px;
  border-left:11px solid #F5EDDA; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
@keyframes postPing{0%{transform:scale(1); opacity:.85} 70%,100%{transform:scale(1.7); opacity:0}}
.post-wave{
  display:flex; align-items:flex-end; gap:3px; height:26px; margin:0 0 12px; max-width:150px;
  opacity:.75;
}
.post-wave i{
  flex:1; height:var(--h); border-radius:2px; background:linear-gradient(180deg,#F5EDDA,rgba(245,237,218,.35));
  transform-origin:bottom; animation:postWave 1.5s ease-in-out infinite;
}
.post-wave i:nth-child(2n){animation-delay:.18s}
.post-wave i:nth-child(3n){animation-delay:.34s}
.post-wave i:nth-child(4n){animation-delay:.5s}
@keyframes postWave{0%,100%{transform:scaleY(.42)} 50%{transform:scaleY(1)}}

/* carousel: slide dots + arrow */
.post-dots{position:absolute; left:20px; right:20px; top:38%; display:flex; gap:4px}
.post-dots i{flex:1; height:2.5px; border-radius:2px; background:rgba(245,237,218,.24)}
.post-dots i.on{background:var(--parch-2)}
.post-dots i.on::after{content:""; display:block; height:100%; border-radius:2px; background:#fff; animation:postLoad 4s linear infinite}
@keyframes postLoad{from{width:0} to{width:100%}}

/* story: segmented rail + animated poll bars */
.post-bars{position:absolute; top:16px; left:16px; right:16px; height:2.5px; display:flex; gap:4px}
.post-bars i{flex:1; border-radius:2px; background:rgba(245,237,218,.28); overflow:hidden; position:relative}
.post-bars i:first-child::after{content:""; position:absolute; inset:0; background:var(--parch-2); animation:postLoad 5s linear infinite}
@keyframes postFill{from{width:0}}

/* stat card: animated sparkline */
.post-spark{width:100%; height:64px; margin:0 0 10px; overflow:visible}
.post-spark polyline{fill:none; stroke:#F5EDDA; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:520; stroke-dashoffset:520; animation:postDraw 2.4s var(--ease) forwards}
.post-spark circle{fill:var(--parch-2); animation:postPing 2.8s ease-out infinite; transform-origin:center}
@keyframes postDraw{to{stroke-dashoffset:0}}

/* linkedin: avatar + reactions */
.post-avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(160deg,#F0335A,#C8102E 55%,#76071A); color:var(--parch-2);
  font-family:var(--display); font-size:14px; letter-spacing:-.02em;
  box-shadow:0 0 0 1px rgba(245,237,218,.35);
}
.post-quote{font-size:clamp(14px,1.45vw,17px)}
.post-react{display:flex; gap:16px; margin-top:14px}
.post-react span{display:flex; align-items:center; gap:6px; font-size:9.5px; letter-spacing:.1em; color:rgba(245,237,218,.66)}
.post-react svg{width:13px; height:13px; color:rgba(245,237,218,.66)}

/* reel cover: orbiting dots */
.post-orbit{position:absolute; top:62px; right:22px; width:70px; height:70px}
.post-orbit i{position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:var(--parch-2)}
.post-orbit i:nth-child(1){animation:orbitDot1 5s linear infinite}
.post-orbit i:nth-child(2){animation:orbitDot2 5s linear infinite; animation-delay:-1.66s}
.post-orbit i:nth-child(3){animation:orbitDot3 5s linear infinite; animation-delay:-3.33s}
@keyframes orbitDot1{from{transform:rotate(0) translateX(34px)} to{transform:rotate(360deg) translateX(34px)}}
@keyframes orbitDot2{from{transform:rotate(120deg) translateX(24px)} to{transform:rotate(480deg) translateX(24px)}}
@keyframes orbitDot3{from{transform:rotate(240deg) translateX(14px)} to{transform:rotate(600deg) translateX(14px)}}

.post figcaption{padding:14px 16px 15px; border-top:1px solid var(--line-soft); background:#0D0C10}
.post figcaption b{display:block; font-family:var(--display); font-size:12px; color:var(--parch-2)}
.post figcaption span{display:block; margin-top:3px; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-d)}
.social-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:20px}
.social-foot p{font-size:11.5px; color:var(--steel)}
.social-foot b{color:var(--parch-2)}
@media (max-width:760px){
  .post{flex:0 0 74%}
}
@media (prefers-reduced-motion:reduce){
  .post-ring::before,.post-wave i,.post-dots i.on::after,.post-bars i:first-child::after,
  .post-poll i::before,.post-spark polyline,.post-spark circle,
  .post-orbit i{animation:none}
  .post-spark polyline{stroke-dashoffset:0}
}

/* hero capability band (replaces the discipline bars) */
.cred-ticker{
  margin:16px 0 12px; padding:9px 0; overflow:hidden;
  border-top:1px solid rgba(245,237,218,.12); border-bottom:1px solid rgba(245,237,218,.12);
  background:linear-gradient(90deg,rgba(200,16,46,.22),rgba(200,16,46,0) 60%,rgba(200,16,46,.22));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  padding-inline:6px;
}
.cred-ticker-track{display:flex; align-items:center; gap:14px; width:max-content; animation:slide 22s linear infinite}
.cred-ticker span{
  font-family:var(--display); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,237,218,.86); white-space:nowrap;
}
.cred-ticker i{width:5px; height:5px; border-radius:1px; background:var(--crimson-l); transform:rotate(45deg); flex:0 0 auto}
.cred-statement{
  margin:0 0 4px; font-family:var(--display); font-size:13.5px; line-height:1.35; letter-spacing:-.01em;
  color:var(--parch-2);
}
.cred-statement b{color:var(--crimson-l)}
@media (prefers-reduced-motion:reduce){ .cred-ticker-track{animation:none} }
/* social rail sits inside a clipped overflow container, so its posters are never
   off-screen horizontally — show them without waiting on the observer */
.social-rail .post.reveal{opacity:1; transform:none}