/* ==========================================================================
   HUSSEIN ELDRENY — SEO TEAM LEADER
   Design system + components
   01 Tokens · 02 Reset · 03 Layout · 04 Type · 05 Ambience · 06 Primitives
   07 Chrome · 08 Hero · 09 Modules · 10 Forms · 11 Overlays · 12 Motion
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,100..900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================ 01 · TOKENS ============================ */
:root{
  /* base surfaces — dark is this design's home key */
  --bg:        #0A0808;
  --bg-1:      #100C0C;
  --bg-2:      #171111;
  --bg-3:      #1F1717;

  /* ink */
  --txt:       #F4EEE9;
  --txt-2:     #B5A9A4;
  --txt-3:     #7C716D;

  /* brand */
  --ember:     #E11D3C;
  --ember-2:   #FF5F76;
  --ember-3:   #7A0F20;
  --wine:      #3A0D12;

  /* data-positive accent — reserved for measured gains */
  --signal:    #C8F751;
  --signal-2:  #8FB82E;

  /* strokes + glass */
  --line:      rgba(244,238,233,0.10);
  --line-2:    rgba(244,238,233,0.20);
  --line-3:    rgba(244,238,233,0.32);
  --glass:     rgba(244,238,233,0.045);
  --glass-2:   rgba(244,238,233,0.085);
  --blur:      blur(20px) saturate(150%);

  --shadow-sm: 0 2px 10px -4px rgba(0,0,0,.6);
  --shadow:    0 24px 70px -34px rgba(0,0,0,.85);
  --shadow-lg: 0 50px 120px -50px rgba(0,0,0,.95);
  --glow:      0 14px 44px -14px rgba(225,29,60,.55);

  /* type */
  --f-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --t-xs:   0.7rem;
  --t-sm:   0.8rem;
  --t-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
  --t-md:   clamp(1.05rem, 0.98rem + 0.34vw, 1.28rem);
  --t-lg:   clamp(1.28rem, 1.1rem + 0.7vw, 1.75rem);
  --t-xl:   clamp(1.85rem, 1.45rem + 1.7vw, 3rem);
  --t-2xl:  clamp(2.5rem, 1.8rem + 3vw, 4.6rem);
  --t-3xl:  clamp(3.2rem, 2rem + 5.4vw, 6.6rem);
  --t-mega: clamp(3.4rem, 0.2rem + 13.6vw, 13rem);

  /* space + shape */
  --gut:    clamp(1.15rem, 3.6vw, 2.6rem);
  --sec:    clamp(4.5rem, 3rem + 5.5vw, 9rem);
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   26px;
  --r-xl:   34px;

  --ease:        cubic-bezier(.16,.84,.32,1);
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --spring:      cubic-bezier(.34,1.56,.64,1);

  --nav-h: 72px;
  color-scheme: dark;
}

/* ---- light theme ---- */
[data-theme="light"]{
  --bg:      #F1EBE5;
  --bg-1:    #FBF8F5;
  --bg-2:    #FFFFFF;
  --bg-3:    #E7DFD7;
  --txt:     #140C0C;
  --txt-2:   #4E4340;
  --txt-3:   #837771;
  --ember:   #C4152F;
  --ember-2: #A81028;
  --ember-3: #7A0F20;
  --wine:    #7A0F20;
  --signal:  #4A7209;
  --signal-2:#6E9E1C;
  --line:    rgba(20,12,12,0.12);
  --line-2:  rgba(20,12,12,0.22);
  --line-3:  rgba(20,12,12,0.34);
  --glass:   rgba(255,255,255,0.5);
  --glass-2: rgba(255,255,255,0.82);
  --shadow-sm: 0 2px 10px -4px rgba(60,30,30,.18);
  --shadow:  0 24px 60px -34px rgba(60,30,30,.4);
  --shadow-lg: 0 50px 110px -50px rgba(60,30,30,.45);
  --glow:    0 14px 40px -14px rgba(196,21,47,.4);
  color-scheme: light;
}

/* ============================ 02 · RESET ============================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 26px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; }
p{ margin:0; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--ember); color:#fff; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }

*::-webkit-scrollbar{ width:10px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:var(--line-3); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:400;
  background:var(--ember); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 10px 10px;
  font-family:var(--f-mono); font-size:var(--t-sm); transition:top .3s var(--ease);
}
.skip-link:focus{ top:0; }

/* ============================ 03 · LAYOUT ============================ */
.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:1560px; margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ width:100%; max-width:840px; margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; padding-block:var(--sec); }
.sec-tight{ padding-block:clamp(3rem,2rem + 3vw,5rem); }
.sec-top-0{ padding-top:0; }
.sec-bot-0{ padding-bottom:0; }

/* ============================ 04 · TYPE ============================ */
.display,h1,h2,h3{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:112%;
  line-height:0.92;
  letter-spacing:-0.025em;
  text-transform:uppercase;
  text-wrap:balance;
}
h1{ font-size:var(--t-2xl); }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-lg); }
.h-mega{ font-size:var(--t-3xl); }

/* sentence-case sub-heading for cards and list rows */
.hx{
  font-family:var(--f-body); font-weight:800; text-transform:none;
  letter-spacing:-0.012em; line-height:1.24; font-size:var(--t-md);
}
.hx-sm{ font-size:1.02rem; }
.lead{ color:var(--txt-2); font-size:var(--t-md); line-height:1.6; max-width:58ch; text-wrap:pretty; }
.body-2{ color:var(--txt-2); font-size:0.93rem; line-height:1.62; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-0.02em; }
.accent{ color:var(--ember); }
[data-theme="light"] .accent{ color:var(--ember); }
.muted{ color:var(--txt-3); }
.up{ text-transform:uppercase; letter-spacing:0.12em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ember-2);
  margin-bottom:1.1rem;
}
[data-theme="light"] .eyebrow{ color:var(--ember); }
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 4px rgba(225,29,60,.16); flex:none;
}
.eyebrow.is-signal{ color:var(--signal); }
.eyebrow.is-signal::before{ background:var(--signal); box-shadow:0 0 0 4px rgba(200,247,81,.14); }

/* outline text — the ghost headline layer behind the portrait */
.ghost{
  color:transparent;
  -webkit-text-stroke:1px var(--line-2);
}

.head{ display:grid; gap:1.6rem; margin-bottom:clamp(2rem,1.4rem + 2vw,3.4rem); grid-template-columns:1fr; }
@media (min-width:900px){
  .head{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end; gap:3rem; }
  .head.is-stack{ grid-template-columns:1fr; }
}
.head-actions{ display:flex; gap:.7rem; flex-wrap:wrap; align-self:end; }
@media (min-width:900px){ .head-actions{ justify-self:end; } }
.sec-no{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--txt-3); letter-spacing:.18em; text-transform:uppercase; }

/* ============================ 05 · AMBIENCE ============================ */
.fx{ position:fixed; inset:0; pointer-events:none; }
.fx-mesh{
  z-index:-3;
  background:
    radial-gradient(58vw 52vh at 82% -8%,  rgba(225,29,60,.26), transparent 62%),
    radial-gradient(46vw 46vh at -8% 26%,  rgba(122,15,32,.34), transparent 66%),
    radial-gradient(70vw 55vh at 46% 112%, rgba(58,13,18,.55), transparent 62%),
    var(--bg);
  transition:background .5s var(--ease);
}
[data-theme="light"] .fx-mesh{
  background:
    radial-gradient(58vw 52vh at 82% -8%,  rgba(225,29,60,.10), transparent 62%),
    radial-gradient(46vw 46vh at -8% 26%,  rgba(196,21,47,.07), transparent 66%),
    radial-gradient(70vw 55vh at 46% 112%, rgba(120,80,70,.12), transparent 62%),
    var(--bg);
}
.fx-grid{
  z-index:-2; opacity:.55;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(ellipse 92% 62% at 50% 0%, #000 8%, transparent 74%);
  mask-image:radial-gradient(ellipse 92% 62% at 50% 0%, #000 8%, transparent 74%);
}
.fx-grain{
  z-index:-1; opacity:.055; mix-blend-mode:overlay;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .fx-grain{ opacity:.05; mix-blend-mode:multiply; }

.rule{ height:1px; background:var(--line); width:100%; }
.rule-fade{ height:1px; width:100%; background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent); }

/* ============================ 06 · PRIMITIVES ============================ */
.glass{
  background:linear-gradient(158deg, var(--glass-2), var(--glass));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow);
}
[data-theme="light"] .glass{ box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--shadow); }
.glass-sm{ border-radius:var(--r-md); }
.panel{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-mono); font-size:var(--t-sm); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  padding:.92rem 1.5rem; border-radius:999px;
  border:1px solid var(--line-2); background:var(--glass); color:var(--txt);
  cursor:pointer; isolation:isolate;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--spring), box-shadow .35s var(--ease);
}
.btn svg{ width:15px; height:15px; flex:none; transition:transform .4s var(--ease); }
.btn:hover{ border-color:var(--line-3); background:var(--glass-2); transform:translateY(-2px); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-solid{
  background:linear-gradient(135deg, var(--ember), var(--ember-3));
  border-color:transparent; color:#fff; box-shadow:var(--glow);
}
.btn-solid:hover{ background:linear-gradient(135deg, #F02A4B, var(--ember)); box-shadow:0 18px 50px -14px rgba(225,29,60,.72); }
.btn-ghost{ background:transparent; border-color:var(--line); }
.btn-sm{ padding:.62rem 1.05rem; font-size:var(--t-xs); }
.btn-lg{ padding:1.12rem 2rem; }
.btn-block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.btn-icon{ width:42px; height:42px; padding:0; border-radius:50%; }
.btn-icon svg{ width:17px; height:17px; }
.btn-icon:hover svg{ transform:none; }

.link{
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-mono); font-size:var(--t-sm); letter-spacing:.05em; text-transform:uppercase;
  color:var(--txt-2); padding-bottom:2px; transition:color .3s;
}
.link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.link:hover{ color:var(--txt); }
.link:hover::after{ transform:scaleX(1); transform-origin:left; }

.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  padding:.42rem .85rem; border-radius:999px; border:1px solid var(--line); color:var(--txt-2);
  background:var(--glass); white-space:nowrap;
}
.pill-live{ color:var(--txt); border-color:rgba(200,247,81,.32); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); flex:none; position:relative; }
.dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--signal);
  opacity:0; animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{ 0%{ transform:scale(.6); opacity:.8 } 70%,100%{ transform:scale(1.5); opacity:0 } }

.tag{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ember-2); }
[data-theme="light"] .tag{ color:var(--ember); }

.chip{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase;
  padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line);
  color:var(--txt-2); background:transparent; cursor:pointer; white-space:nowrap;
  transition:color .3s, border-color .3s, background .3s;
}
.chip:hover{ color:var(--txt); border-color:var(--line-2); }
.chip[aria-pressed="true"]{ background:var(--txt); color:var(--bg); border-color:var(--txt); }

/* delta badge — the core data idiom of the site */
.delta{
  display:inline-flex; align-items:center; gap:.28rem;
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:600;
  padding:.24rem .5rem; border-radius:6px; letter-spacing:.02em; white-space:nowrap;
  background:rgba(200,247,81,.12); color:var(--signal); border:1px solid rgba(200,247,81,.22);
}
.delta.is-down{ background:rgba(225,29,60,.12); color:var(--ember-2); border-color:rgba(225,29,60,.22); }
.delta.is-flat{ background:var(--glass); color:var(--txt-3); border-color:var(--line); }
[data-theme="light"] .delta{ background:rgba(74,114,9,.1); border-color:rgba(74,114,9,.28); }
[data-theme="light"] .delta.is-down{ background:rgba(196,21,47,.09); border-color:rgba(196,21,47,.25); color:var(--ember); }

.mark{
  width:36px; height:36px; border-radius:11px; flex:none;
  background:linear-gradient(140deg, var(--ember), var(--wine));
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:900; font-size:.85rem; color:#fff;
  letter-spacing:-.02em; box-shadow:var(--shadow-sm);
}

/* ============================ 07 · CHROME ============================ */
/* scroll progress */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:200; pointer-events:none;
  background:linear-gradient(90deg, var(--ember), var(--ember-2) 60%, var(--signal));
  transform:scaleX(0); transform-origin:left; transition:transform .1s linear;
}

/* floating nav */
.nav-shell{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; justify-content:center; padding:1rem var(--gut) 0;
  transition:transform .5s var(--ease);
}
.nav-shell.is-hidden{ transform:translateY(calc(-100% - 1rem)); }
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  width:100%; max-width:1240px; height:var(--nav-h);
  padding:.55rem .55rem .55rem 1.3rem; border-radius:999px;
  background:linear-gradient(158deg, var(--glass-2), var(--glass));
  border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow);
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-shell.is-stuck .nav{ border-color:var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-lg); }
.brand{ display:flex; align-items:center; gap:.65rem; flex:none; }
.brand-txt{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.2; white-space:nowrap;
}
.brand-txt small{ display:block; font-size:.62rem; color:var(--txt-3); letter-spacing:.14em; }
@media (max-width:520px){ .brand-txt{ display:none; } }

.nav-links{ display:none; align-items:center; gap:.15rem; }
@media (min-width:940px){ .nav-links{ display:flex; } }
.nav-links a{
  position:relative; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.6rem .95rem; border-radius:999px; color:var(--txt-2);
  transition:color .28s var(--ease), background .28s var(--ease);
}
.nav-links a:hover{ color:var(--txt); background:var(--glass-2); }
.nav-links a[aria-current="page"]{ color:var(--txt); }
.nav-links a[aria-current="page"]::after{
  content:''; position:absolute; left:50%; bottom:.28rem; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--ember);
}
.nav-end{ display:flex; align-items:center; gap:.5rem; flex:none; }
.nav-cta{ display:none; }
@media (min-width:760px){ .nav-cta{ display:inline-flex; } }

/* icon buttons in the nav */
.icon-btn{
  width:42px; height:42px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:var(--txt-2);
  border:1px solid var(--line); background:var(--glass);
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--spring);
}
.icon-btn:hover{ color:var(--txt); border-color:var(--line-2); background:var(--glass-2); transform:translateY(-2px); }
.icon-btn svg{ width:17px; height:17px; }
.icon-btn .i-sun{ display:none; }
[data-theme="light"] .icon-btn .i-sun{ display:block; }
[data-theme="light"] .icon-btn .i-moon{ display:none; }
.nav-search{ display:none; }
@media (min-width:940px){
  .nav-search{
    display:inline-flex; align-items:center; gap:.55rem;
    height:42px; padding:0 .7rem 0 .85rem; border-radius:999px;
    border:1px solid var(--line); background:var(--glass); color:var(--txt-3);
    font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
    transition:color .3s, border-color .3s;
  }
  .nav-search:hover{ color:var(--txt-2); border-color:var(--line-2); }
  .nav-search kbd{
    font-family:var(--f-mono); font-size:.62rem; padding:.16rem .38rem; border-radius:5px;
    border:1px solid var(--line); background:var(--glass-2); color:var(--txt-3);
  }
}
.burger{ display:grid; }
@media (min-width:940px){ .burger{ display:none; } }
.burger span{
  display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span + span{ margin-top:4.5px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* full-screen menu */
.menu{
  position:fixed; inset:0; z-index:140; display:flex; flex-direction:column;
  background:var(--bg); padding:calc(var(--nav-h) + 2.4rem) var(--gut) 2rem;
  opacity:0; visibility:hidden; transform:translateY(-2%);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
  overflow-y:auto;
}
.menu::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70vw 50vh at 80% 0%, rgba(225,29,60,.2), transparent 62%);
}
body.menu-open .menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.menu-nav{ display:flex; flex-direction:column; gap:.2rem; margin-bottom:auto; position:relative; }
.menu-nav a{
  display:flex; align-items:baseline; gap:1rem; padding:.5rem 0;
  font-family:var(--f-display); font-weight:800; font-stretch:112%;
  font-size:clamp(2.1rem,11vw,3.6rem); line-height:1.06; text-transform:uppercase;
  letter-spacing:-.03em; color:var(--txt-3);
  opacity:0; transform:translateY(18px);
  transition:color .3s var(--ease);
}
body.menu-open .menu-nav a{ animation:menuIn .55s var(--ease) forwards; }
body.menu-open .menu-nav a:nth-child(1){ animation-delay:.08s; }
body.menu-open .menu-nav a:nth-child(2){ animation-delay:.14s; }
body.menu-open .menu-nav a:nth-child(3){ animation-delay:.2s; }
body.menu-open .menu-nav a:nth-child(4){ animation-delay:.26s; }
body.menu-open .menu-nav a:nth-child(5){ animation-delay:.32s; }
@keyframes menuIn{ to{ opacity:1; transform:none; } }
.menu-nav a:hover,.menu-nav a[aria-current="page"]{ color:var(--txt); }
.menu-nav a span{ font-family:var(--f-mono); font-size:.7rem; color:var(--ember); letter-spacing:.1em; }
.menu-foot{
  position:relative; display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between;
  align-items:center; padding-top:1.6rem; margin-top:2.4rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--txt-3); letter-spacing:.06em;
}
.menu-foot a:hover{ color:var(--txt); }

/* ============================ 08 · HERO ============================ */
.hero{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding-top:calc(var(--nav-h) + 1.8rem); padding-bottom:0;
}
@media (min-width:900px){ .hero{ min-height:100svh; } }
.hero > .wrap-wide{ display:flex; flex-direction:column; flex:1; }

/* portrait and both name layers share one grid cell so they can overlap */
.hero-stage{
  position:relative; width:100%;
  display:grid; grid-template-columns:1fr; justify-items:center; align-items:end;
}
.hero-stage > *{ grid-column:1; grid-row:1; }

.hero-nm{
  width:100%; text-align:center; pointer-events:none; white-space:nowrap;
  font-family:var(--f-display); font-weight:900; font-stretch:122%;
  font-size:clamp(2.2rem, 14.6vw, 13rem);
  line-height:.82; letter-spacing:-.05em; text-transform:uppercase;
}
/* "HUSSEIN" — outlined, sits behind the head */
.hero-nm-back{
  align-self:start; z-index:1;
  color:transparent; -webkit-text-stroke:1.4px var(--line-2);
}
@media (max-width:700px){ .hero-nm-back{ -webkit-text-stroke-width:1px; } }
/* "ELDRENY" — solid, crosses in front of the portrait, flush to the hero edge */
.hero-nm-front{ align-self:end; z-index:3; color:var(--txt); }

.hero-portrait{ align-self:end; z-index:2; position:relative; }
.hero-portrait img{
  height:clamp(300px, 52svh, 640px); width:auto; margin-inline:auto;
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.4) 93%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.4) 93%, transparent 100%);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7));
}
[data-theme="light"] .hero-portrait img{ filter:contrast(1.04) drop-shadow(0 30px 50px rgba(60,30,30,.3)); }
/* ember rim light behind the subject */
.hero-portrait::before{
  content:''; position:absolute; z-index:-1; left:50%; top:10%; transform:translateX(-50%);
  width:min(520px,74vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(225,29,60,.34), transparent 68%);
  filter:blur(46px);
}

/* masthead rails — sit above the stage so nothing collides with the name */
.hero-rails{
  position:relative; z-index:4; display:flex; flex-direction:column; gap:1.6rem;
  margin-bottom:2.4rem;
}
@media (min-width:900px){
  .hero-rails{
    flex-direction:row; justify-content:space-between; align-items:flex-start;
    gap:3rem; margin-bottom:auto; padding-bottom:1.5rem;
  }
}
.hero-rail-l{ max-width:38ch; }
@media (min-width:900px){ .hero-rail-l{ max-width:min(34ch, 32vw); } }
.hero-rail-r{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
@media (min-width:900px){ .hero-rail-r{ align-items:flex-end; text-align:right; max-width:min(30ch, 26vw); } }
.hero-role{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:.9rem;
}
.hero-blurb{ color:var(--txt-2); font-size:.95rem; line-height:1.6; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }

/* mini stat trio in the hero */
.hero-mini{ display:flex; gap:1.6rem; flex-wrap:wrap; }
@media (min-width:900px){ .hero-mini{ justify-content:flex-end; } }
.hero-mini div{ display:flex; flex-direction:column; gap:.1rem; }
.hero-mini .v{ font-family:var(--f-mono); font-size:1.35rem; font-weight:700; letter-spacing:-.03em; }
.hero-mini .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); }

/* rotating seal — parked in the empty lower-left of the hero */
.seal{
  position:absolute; z-index:4; left:var(--gut); bottom:clamp(170px, 21vh, 260px);
  width:112px; height:112px; display:none; place-items:center;
}
@media (min-width:1100px) and (min-height:760px){ .seal{ display:grid; } }
.seal svg{ width:100%; height:100%; animation:spin 22s linear infinite; }
.seal text{ font-family:var(--f-mono); font-size:9.4px; letter-spacing:2.6px; fill:var(--txt-3); text-transform:uppercase; }
.seal-core{
  position:absolute; width:44px; height:44px; border-radius:50%;
  background:var(--ember); display:grid; place-items:center; box-shadow:var(--glow);
}
.seal-core svg{ width:17px; height:17px; animation:none; color:#fff; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); z-index:4;
  display:none; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3);
}
@media (min-width:900px) and (min-height:700px){ .scroll-cue{ display:flex; } }
.scroll-cue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--line-3), transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{
  content:''; position:absolute; inset:0; background:var(--ember);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* inner-page hero */
.page-hero{ padding-top:calc(var(--nav-h) + clamp(3.5rem,7vw,6rem)); padding-bottom:1rem; }
/* sized so the authored <br> line breaks hold instead of re-wrapping */
.page-hero h1{ font-size:clamp(2.5rem, 1.5rem + 4.6vw, 5.4rem); }
.page-hero .lead{ margin-top:1.5rem; }
.crumbs{
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.4rem;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3);
}
.crumbs a:hover{ color:var(--txt); }
.crumbs span{ opacity:.5; }

/* ============================ 09 · MODULES ============================ */
/* --- marquee --- */
.marquee{
  position:relative; overflow:hidden; padding-block:1.15rem;
  border-block:1px solid var(--line); background:var(--glass);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee-group{ display:flex; align-items:center; gap:2.6rem; padding-right:2.6rem; }
.marquee-group span{
  display:inline-flex; align-items:center; gap:.7rem; white-space:nowrap;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
  transition:color .3s;
}
.marquee-group span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--ember); opacity:.75; }
.marquee:hover .marquee-group span{ color:var(--txt-2); }

/* --- stat band --- */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{
  background:var(--bg-1); padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);
  display:flex; flex-direction:column; gap:.45rem; position:relative;
  transition:background .4s var(--ease);
}
.stat:hover{ background:var(--bg-2); }
.stat .v{ font-family:var(--f-mono); font-size:clamp(1.7rem,1.2rem + 1.9vw,2.8rem); font-weight:700; letter-spacing:-.035em; line-height:1; }
.stat .v small{ font-size:.42em; color:var(--txt-3); font-weight:500; letter-spacing:0; margin-left:.15em; }
.stat .k{ font-size:.82rem; color:var(--txt-2); line-height:1.45; }
.stat .n{ font-family:var(--f-mono); font-size:.6rem; color:var(--txt-3); letter-spacing:.14em; }

/* --- statement block --- */
.statement{ display:grid; gap:2.4rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){ .statement{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:4rem; } }
.statement-big{
  font-family:var(--f-display); font-weight:800; font-stretch:110%;
  font-size:var(--t-xl); line-height:1.02; text-transform:uppercase; letter-spacing:-.028em;
}
.statement-big em{ font-style:normal; color:var(--ember); }
.statement-body{ display:flex; flex-direction:column; gap:1.1rem; }
.statement-body p{ color:var(--txt-2); }

/* --- service rows --- */
.svc{ border-top:1px solid var(--line); }
.svc-row{ border-bottom:1px solid var(--line); }
.svc-head{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:1.2rem; padding:1.5rem .2rem; text-align:left; color:inherit;
  transition:padding .4s var(--ease);
}
@media (min-width:760px){ .svc-head{ grid-template-columns:auto minmax(0,1fr) minmax(0,.8fr) auto; gap:2rem; } }
.svc-head:hover{ padding-inline:.7rem; }
.svc-no{ font-family:var(--f-mono); font-size:.72rem; color:var(--txt-3); letter-spacing:.1em; }
.svc-title{
  font-family:var(--f-display); font-weight:800; font-stretch:108%;
  font-size:clamp(1.25rem,1rem + 1.1vw,2rem); text-transform:uppercase; letter-spacing:-.025em; line-height:1.05;
  transition:color .35s var(--ease);
}
.svc-head:hover .svc-title{ color:var(--ember); }
.svc-sum{ display:none; color:var(--txt-3); font-size:.86rem; }
@media (min-width:760px){ .svc-sum{ display:block; } }
.svc-plus{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--txt-2); flex:none; transition:transform .45s var(--ease), border-color .35s, color .35s, background .35s;
}
.svc-head:hover .svc-plus{ border-color:var(--line-2); color:var(--txt); }
.svc-head[aria-expanded="true"] .svc-plus{ transform:rotate(45deg); background:var(--ember); border-color:transparent; color:#fff; }
.svc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.svc-head[aria-expanded="true"] + .svc-body{ grid-template-rows:1fr; }
.svc-body > div{ overflow:hidden; }
.svc-inner{
  display:grid; gap:1.6rem; grid-template-columns:1fr;
  padding:.2rem .2rem 2rem;
}
@media (min-width:760px){ .svc-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.6rem; padding-left:3.4rem; } }
.svc-inner p{ color:var(--txt-2); font-size:.94rem; }
.svc-list{ display:flex; flex-direction:column; gap:.6rem; }
.svc-list li{ display:flex; gap:.7rem; font-size:.88rem; color:var(--txt-2); align-items:flex-start; }
.svc-list li::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--ember);
  margin-top:.55rem; flex:none;
}

/* --- process --- */
.proc{ display:grid; gap:1rem; grid-template-columns:1fr; counter-reset:step; }
@media (min-width:680px){ .proc{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .proc{ grid-template-columns:repeat(4,1fr); } }
.proc-step{
  position:relative; padding:1.7rem 1.5rem 1.6rem; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-1);
  display:flex; flex-direction:column; gap:.65rem;
  transition:transform .45s var(--ease), border-color .4s, background .4s;
}
.proc-step:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--bg-2); }
.proc-step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--f-mono); font-size:.72rem; color:var(--ember); letter-spacing:.12em;
}
.proc-step p{ color:var(--txt-2); font-size:.88rem; }
.proc-step .dur{
  margin-top:auto; padding-top:.9rem; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); border-top:1px solid var(--line);
}
@media (min-width:1040px){
  .proc-step:not(:last-child)::after{
    content:''; position:absolute; right:-.62rem; top:2.4rem; width:.6rem; height:1px; background:var(--line-2);
  }
}

/* --- case cards --- */
.case-grid{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:720px){ .case-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .case-grid{ grid-template-columns:repeat(3,1fr); } }
.case-grid.is-two{ grid-template-columns:1fr; }
@media (min-width:820px){ .case-grid.is-two{ grid-template-columns:repeat(2,1fr); } }

.case{
  position:relative; display:flex; flex-direction:column; gap:1.15rem; text-align:left;
  padding:1.5rem 1.4rem 1.3rem; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-1); color:inherit; width:100%;
  cursor:pointer;
  transition:transform .45s var(--ease), border-color .4s, background .4s, box-shadow .4s;
}
.case:hover{ transform:translateY(-6px); border-color:var(--line-2); background:var(--bg-2); box-shadow:var(--shadow); }
.case::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(225,29,60,.09), transparent 62%);
  opacity:0; transition:opacity .4s var(--ease);
}
.case:hover::after{ opacity:1; }
.case-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.case-vert{ font-weight:700; font-size:1rem; line-height:1.3; }
.case-win{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); white-space:nowrap; }
.case-spark{ height:44px; width:100%; }
.case-spark svg{ width:100%; height:100%; overflow:visible; }
.case-metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem .8rem; }
.metric{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.metric .k{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); }
.metric .v{ font-family:var(--f-mono); font-size:.95rem; font-weight:600; display:flex; align-items:baseline; gap:.3rem; flex-wrap:wrap; }
.metric .from{ color:var(--txt-3); font-weight:400; font-size:.86em; }
.metric .arrow{ color:var(--txt-3); font-size:.8em; }
.metric .to{ color:var(--txt); }
.metric.is-win .to{ color:var(--signal); }
.case-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:.9rem; border-top:1px solid var(--line);
}
.case-note{ font-size:.82rem; color:var(--txt-2); line-height:1.5; margin-top:auto; }
.case-open{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3); display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  transition:color .3s;
}
.case:hover .case-open{ color:var(--ember); }
.case-open svg{ width:12px; height:12px; transition:transform .4s var(--ease); }
.case:hover .case-open svg{ transform:translate(2px,-2px); }

/* filter bar */
.filters{
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; justify-content:space-between;
  margin-bottom:1.8rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line);
}
.filter-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-meta{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--txt-3); letter-spacing:.08em; text-transform:uppercase; }
.sort-wrap{ display:flex; align-items:center; gap:.6rem; }
.sort-wrap label{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--txt-3); letter-spacing:.08em; text-transform:uppercase; }
select.sort{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.05em;
  padding:.5rem 2rem .5rem .8rem; border-radius:999px; border:1px solid var(--line);
  background:var(--glass); color:var(--txt-2); cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C716D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center;
}
.empty{
  padding:3.4rem 1.5rem; text-align:center; border:1px dashed var(--line-2); border-radius:var(--r-md);
  color:var(--txt-3); font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em;
}

/* --- opportunity calculator (the site's signature interactive) --- */
.calc{ display:grid; gap:0; grid-template-columns:1fr; overflow:hidden; }
@media (min-width:940px){ .calc{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.calc-in{ padding:clamp(1.6rem,1.2rem + 1.6vw,2.6rem); border-bottom:1px solid var(--line); }
@media (min-width:940px){ .calc-in{ border-bottom:0; border-right:1px solid var(--line); } }
.calc-out{ padding:clamp(1.6rem,1.2rem + 1.6vw,2.6rem); background:var(--glass); display:flex; flex-direction:column; gap:1.3rem; }

.ctrl{ margin-bottom:1.5rem; }
.ctrl:last-child{ margin-bottom:0; }
.ctrl-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.7rem; }
.ctrl-top label{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2); }
.ctrl-val{ font-family:var(--f-mono); font-size:1rem; font-weight:700; color:var(--txt); }
.ctrl-val small{ color:var(--txt-3); font-weight:400; font-size:.72em; }
.ctrl-hint{ font-size:.76rem; color:var(--txt-3); margin-top:.5rem; line-height:1.45; }

input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; cursor:pointer; display:block;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:linear-gradient(90deg, var(--ember) 0%, var(--ember) var(--fill,50%), var(--line) var(--fill,50%), var(--line) 100%);
}
input[type="range"]::-moz-range-track{ height:4px; border-radius:99px; background:var(--line); }
input[type="range"]::-moz-range-progress{ height:4px; border-radius:99px; background:var(--ember); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-7px;
  border-radius:50%; background:var(--txt); border:3px solid var(--bg);
  box-shadow:0 2px 10px rgba(0,0,0,.5); transition:transform .25s var(--spring);
}
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--txt); border:3px solid var(--bg);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.15); }
input[type="range"]:active::-webkit-slider-thumb{ transform:scale(.95); }

.calc-result{ display:flex; flex-direction:column; gap:.35rem; }
.calc-result .big{
  font-family:var(--f-mono); font-size:clamp(2.4rem,1.6rem + 3.4vw,4rem); font-weight:700;
  letter-spacing:-.045em; line-height:1; color:var(--signal);
}
.calc-result .lbl{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); }
.calc-rows{ display:flex; flex-direction:column; gap:.1rem; }
.calc-row{
  display:grid; grid-template-columns:5.4rem 1fr auto; gap:.9rem; align-items:center;
  padding:.62rem 0; border-top:1px solid var(--line);
}
.calc-row .pos{ font-family:var(--f-mono); font-size:.7rem; color:var(--txt-3); letter-spacing:.06em; white-space:nowrap; }
.calc-row .bar{ height:7px; border-radius:99px; background:var(--line); overflow:hidden; }
.calc-row .bar i{
  display:block; height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg, var(--ember-3), var(--ember));
  transition:width .8s var(--ease);
}
.calc-row.is-now .bar i{ background:var(--line-3); }
.calc-row.is-target .bar i{ background:linear-gradient(90deg, var(--signal-2), var(--signal)); }
.calc-row .val{ font-family:var(--f-mono); font-size:.82rem; font-weight:600; min-width:5.2rem; text-align:right; }
.calc-note{ font-size:.76rem; color:var(--txt-3); line-height:1.5; padding-top:.4rem; border-top:1px solid var(--line); }
.calc-note b{ color:var(--txt-2); font-weight:600; }

/* --- timeline --- */
.tl{ position:relative; padding-left:1.9rem; }
.tl::before{ content:''; position:absolute; left:5px; top:.6rem; bottom:.6rem; width:1px; background:var(--line); }
.tl-item{ position:relative; padding-bottom:2.2rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:''; position:absolute; left:calc(-1.9rem + 1px); top:.55rem;
  width:9px; height:9px; border-radius:50%; background:var(--bg); border:2px solid var(--line-3);
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.tl-item.is-now::before{ border-color:var(--ember); background:var(--ember); box-shadow:0 0 0 4px rgba(225,29,60,.16); }
.tl-when{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); margin-bottom:.35rem; display:block; }
.tl-role{ font-family:var(--f-body); font-weight:800; font-size:1.05rem; letter-spacing:-.01em; }
.tl-org{ color:var(--ember); font-size:.86rem; font-family:var(--f-mono); margin-top:.15rem; }
.tl-item p{ color:var(--txt-2); font-size:.88rem; margin-top:.6rem; }

/* --- bio block (about page) --- */
.bio{ display:grid; gap:2.4rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .bio{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:3.4rem; } }
/* the cutout on a lit panel — same visual language as the hero */
.bio-portrait{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
  aspect-ratio:3/4; display:flex; align-items:flex-end; justify-content:center;
  background:
    radial-gradient(72% 52% at 50% 20%, rgba(225,29,60,.3), transparent 72%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
[data-theme="light"] .bio-portrait{
  background:
    radial-gradient(72% 52% at 50% 20%, rgba(225,29,60,.16), transparent 72%),
    linear-gradient(180deg, var(--bg-3), var(--bg-1));
}
.bio-portrait img{
  width:84%; height:auto; align-self:flex-end;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 86%, transparent 100%);
}
[data-theme="light"] .bio-portrait img{ filter:contrast(1.04) drop-shadow(0 20px 34px rgba(60,30,30,.28)); }
/* grid lines echoing the page background */
.bio-portrait::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 78%);
}
.bio-badge{ position:absolute; left:1rem; bottom:1rem; z-index:2; }
.bio-body{ display:flex; flex-direction:column; gap:1.15rem; }
.bio-body p{ color:var(--txt-2); }
.bio-body p.first{ color:var(--txt); font-size:var(--t-md); line-height:1.55; }

/* skill groups */
.skill-groups{ display:grid; gap:1.8rem; grid-template-columns:1fr; margin-top:.6rem; }
@media (min-width:620px){ .skill-groups{ grid-template-columns:repeat(2,1fr); gap:1.8rem 2.4rem; } }
.skill-group h4{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:.8rem; padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.skill-pills{ display:flex; flex-wrap:wrap; gap:.45rem; }
.skill-pill{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em;
  padding:.4rem .75rem; border-radius:999px; border:1px solid var(--line);
  color:var(--txt-2); background:var(--glass); transition:color .3s, border-color .3s;
}
.skill-pill:hover{ color:var(--txt); border-color:var(--line-2); }

/* --- tool grid --- */
.tools{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; grid-template-columns:repeat(2,1fr); }
@media (min-width:620px){ .tools{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .tools{ grid-template-columns:repeat(4,1fr); } }
.tool{
  background:var(--bg-1); padding:1.2rem 1.1rem; display:flex; flex-direction:column; gap:.3rem;
  transition:background .35s var(--ease);
}
.tool:hover{ background:var(--bg-2); }
.tool .nm{ font-size:.88rem; font-weight:700; }
.tool .ds{ font-size:.72rem; color:var(--txt-3); line-height:1.4; }

/* --- pillars / feature cards --- */
.cards{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:680px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .cards.is-3{ grid-template-columns:repeat(3,1fr); } }
.card{
  padding:1.7rem 1.6rem; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg-1);
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .45s var(--ease), border-color .4s, background .4s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--bg-2); }
.card p{ color:var(--txt-2); font-size:.9rem; }
.card-ic{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:.3rem;
  background:rgba(225,29,60,.1); border:1px solid rgba(225,29,60,.2); color:var(--ember-2);
}
[data-theme="light"] .card-ic{ color:var(--ember); }
.card-ic svg{ width:19px; height:19px; }

/* --- pricing --- */
.tiers{ display:grid; gap:1.2rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
.tier{
  position:relative; padding:1.9rem 1.7rem; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--bg-1);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:transform .45s var(--ease), border-color .4s, background .4s;
}
.tier:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.tier.is-featured{ border-color:rgba(225,29,60,.4); background:var(--bg-2); box-shadow:var(--shadow); }
.tier.is-featured::before{
  content:'Most requested'; position:absolute; top:-.75rem; left:1.7rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px; background:var(--ember); color:#fff;
}
.tier-nm{ font-family:var(--f-display); font-weight:800; font-stretch:110%; font-size:1.35rem; text-transform:uppercase; letter-spacing:-.02em; }
.tier-for{ font-size:.84rem; color:var(--txt-3); margin-top:.25rem; }
.tier-price{ display:flex; align-items:baseline; gap:.4rem; padding-block:.5rem; border-block:1px solid var(--line); }
.tier-price .amt{ font-family:var(--f-mono); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; }
.tier-price .per{ font-family:var(--f-mono); font-size:.7rem; color:var(--txt-3); letter-spacing:.06em; }
.tier ul{ display:flex; flex-direction:column; gap:.6rem; }
.tier li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.87rem; color:var(--txt-2); }
.tier li svg{ width:14px; height:14px; flex:none; margin-top:.28rem; color:var(--ember); }
.tier .btn{ margin-top:auto; }

/* comparison table */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); }
table.cmp{ width:100%; border-collapse:collapse; min-width:640px; }
table.cmp th, table.cmp td{ padding:.95rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); font-size:.86rem; }
table.cmp thead th{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3); background:var(--bg-1); position:sticky; top:0;
}
table.cmp tbody th{ font-weight:600; color:var(--txt); }
table.cmp td{ color:var(--txt-2); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp tbody tr:hover td, table.cmp tbody tr:hover th{ background:var(--glass); }
table.cmp .yes{ color:var(--signal); }
table.cmp .no{ color:var(--txt-3); }

/* --- testimonials --- */
.quotes{ position:relative; }
.quote-track{ display:flex; transition:transform .65s var(--ease); }
.quote{ flex:0 0 100%; padding-inline:.2rem; }
.quote-card{ padding:clamp(1.7rem,1.2rem + 2vw,3rem); display:flex; flex-direction:column; gap:1.5rem; }
.quote-mark{ font-family:var(--f-display); font-size:3.4rem; line-height:.6; color:var(--ember); opacity:.5; }
.quote-txt{ font-size:var(--t-md); line-height:1.55; color:var(--txt); text-wrap:pretty; }
.quote-by{ display:flex; align-items:center; gap:.9rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.quote-av{
  width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--bg-3); border:1px solid var(--line); font-family:var(--f-mono); font-size:.78rem; color:var(--txt-2);
}
.quote-by .nm{ font-weight:700; font-size:.9rem; }
.quote-by .rl{ font-size:.76rem; color:var(--txt-3); }
.quote-nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem; }
.quote-dots{ display:flex; gap:.45rem; }
.quote-dots button{
  width:26px; height:3px; border-radius:99px; background:var(--line-2); transition:background .35s, width .35s var(--ease);
}
.quote-dots button[aria-selected="true"]{ background:var(--ember); width:44px; }
.quote-arrows{ display:flex; gap:.5rem; }

/* --- accordion (FAQ) --- */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:1.3rem .2rem; text-align:left; color:inherit; font-weight:700; font-size:1rem;
  transition:color .3s, padding .4s var(--ease);
}
.acc-head:hover{ color:var(--ember); padding-inline:.6rem; }
.acc-head[aria-expanded="true"]{ color:var(--txt); }
.acc-ic{ width:28px; height:28px; flex:none; display:grid; place-items:center; position:relative; }
.acc-ic::before,.acc-ic::after{
  content:''; position:absolute; background:currentColor; border-radius:2px;
  transition:transform .45s var(--ease), opacity .3s;
}
.acc-ic::before{ width:12px; height:1.5px; }
.acc-ic::after{ width:1.5px; height:12px; }
.acc-head[aria-expanded="true"] .acc-ic::after{ transform:rotate(90deg); opacity:0; }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.acc-head[aria-expanded="true"] + .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; }
.acc-body p{ color:var(--txt-2); font-size:.92rem; padding:0 .2rem 1.4rem; max-width:70ch; }

/* --- CTA band --- */
.cta{
  position:relative; overflow:hidden; padding:clamp(2.6rem,2rem + 3vw,4.4rem) clamp(1.6rem,1.2rem + 2.4vw,3.4rem);
  display:grid; gap:2rem; grid-template-columns:1fr; align-items:center;
}
@media (min-width:820px){ .cta{ grid-template-columns:minmax(0,1fr) auto; gap:3rem; } }
.cta::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 88% 20%, rgba(225,29,60,.22), transparent 62%);
}
.cta > *{ position:relative; }
.cta h2{ font-size:var(--t-xl); max-width:16ch; }
.cta .lead{ margin-top:1rem; max-width:46ch; }
.cta-actions{ display:flex; flex-direction:column; gap:.7rem; }

/* --- footer --- */
footer{ position:relative; border-top:1px solid var(--line); margin-top:2rem; padding-block:clamp(2.8rem,2rem + 2.4vw,4.4rem) 2rem; }
.foot-grid{ display:grid; gap:2.4rem; grid-template-columns:1fr; }
@media (min-width:760px){ .foot-grid{ grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:3rem; } }
.foot-brand{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.foot-brand p{ color:var(--txt-2); font-size:.9rem; max-width:34ch; }
.foot-col h4{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:1rem;
}
.foot-col ul{ display:flex; flex-direction:column; gap:.62rem; }
.foot-col a, .foot-col span{ font-size:.88rem; color:var(--txt-2); transition:color .3s; display:inline-block; }
.foot-col a:hover{ color:var(--txt); }
.foot-bar{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:clamp(2.4rem,2rem + 2vw,3.4rem); padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--txt-3); letter-spacing:.06em;
}
.foot-bar a:hover{ color:var(--txt); }

/* ============================ 10 · FORMS ============================ */
.form-grid{ display:grid; gap:2rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:940px){ .form-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:2.6rem; } }
.form-card{ padding:clamp(1.6rem,1.2rem + 1.6vw,2.6rem); }
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
.field label{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2);
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.field label .opt{ color:var(--txt-3); letter-spacing:.04em; text-transform:none; font-size:.92em; }
.field input, .field textarea, .field select{
  width:100%; background:var(--glass); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.88rem 1rem; font-family:var(--f-body); font-size:.95rem; resize:vertical;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field select{
  appearance:none; cursor:pointer; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C716D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--txt-3); }
.field input:hover, .field textarea:hover, .field select:hover{ border-color:var(--line-2); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--ember); background:var(--glass-2);
  box-shadow:0 0 0 3px rgba(225,29,60,.14);
}
.field.has-error input, .field.has-error textarea, .field.has-error select{
  border-color:var(--ember); box-shadow:0 0 0 3px rgba(225,29,60,.12);
}
.err{
  font-family:var(--f-mono); font-size:.68rem; color:var(--ember-2); letter-spacing:.04em;
  display:none; align-items:center; gap:.35rem;
}
[data-theme="light"] .err{ color:var(--ember); }
.field.has-error .err{ display:flex; }
.row-2{ display:grid; grid-template-columns:1fr; gap:0 1.1rem; }
@media (min-width:560px){ .row-2{ grid-template-columns:1fr 1fr; } }
.form-foot{ display:flex; flex-direction:column; gap:1rem; margin-top:.4rem; }
.form-fine{ font-size:.76rem; color:var(--txt-3); line-height:1.5; }
.counter{ font-family:var(--f-mono); font-size:.66rem; color:var(--txt-3); text-align:right; }
.counter.is-over{ color:var(--ember-2); }

/* contact detail rows */
.contact-card{ padding:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); }
.crow{ display:flex; align-items:center; gap:.95rem; padding:1rem 0; border-top:1px solid var(--line); }
.crow:first-of-type{ border-top:0; padding-top:0; }
.crow .ic{
  width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:rgba(225,29,60,.1); border:1px solid rgba(225,29,60,.2); color:var(--ember-2);
}
[data-theme="light"] .crow .ic{ color:var(--ember); }
.crow .ic svg{ width:17px; height:17px; }
.crow .txt{ min-width:0; flex:1; }
.crow .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); display:block; }
.crow .v{ font-weight:600; font-size:.92rem; word-break:break-word; transition:color .3s; }
a.crow-v:hover .v{ color:var(--ember); }
.copy-btn{
  width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--txt-3); background:var(--glass);
  transition:color .3s, border-color .3s, background .3s;
}
.copy-btn:hover{ color:var(--txt); border-color:var(--line-2); }
.copy-btn svg{ width:14px; height:14px; }

/* form success state */
.form-done{ display:none; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; padding:2.4rem 1rem; }
.form-card.is-done .form-body{ display:none; }
.form-card.is-done .form-done{ display:flex; }
.done-ic{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(200,247,81,.12); border:1px solid rgba(200,247,81,.28); color:var(--signal);
}
.done-ic svg{ width:24px; height:24px; }

/* ============================ 11 · OVERLAYS ============================ */
/* modal */
.modal{
  position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:var(--gut);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.modal.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.modal-scrim{ position:absolute; inset:0; background:rgba(6,4,4,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
[data-theme="light"] .modal-scrim{ background:rgba(40,26,26,.5); }
.modal-panel{
  position:relative; width:min(760px,100%); max-height:86svh; overflow-y:auto;
  border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--bg-1);
  box-shadow:var(--shadow-lg); transform:translateY(20px) scale(.98);
  transition:transform .45s var(--ease);
}
.modal.is-open .modal-panel{ transform:none; }
.modal-close{
  position:absolute; top:1rem; right:1rem; z-index:3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--bg-2); color:var(--txt-2);
  transition:color .3s, border-color .3s, transform .3s var(--spring);
}
.modal-close:hover{ color:var(--txt); border-color:var(--line-2); transform:rotate(90deg); }
.modal-close svg{ width:16px; height:16px; }
.modal-head{ padding:clamp(1.6rem,1.2rem + 1.6vw,2.4rem) clamp(1.4rem,1.2rem + 1.4vw,2.4rem) 1.4rem; border-bottom:1px solid var(--line); }
.modal-body{ padding:clamp(1.4rem,1.2rem + 1.4vw,2.4rem); display:flex; flex-direction:column; gap:1.8rem; }
.modal-title{ font-family:var(--f-display); font-weight:800; font-stretch:110%; font-size:var(--t-lg); text-transform:uppercase; letter-spacing:-.025em; }

/* before/after bar chart inside the modal */
.ba{ display:flex; flex-direction:column; gap:1.15rem; }
.ba-row{ display:flex; flex-direction:column; gap:.5rem; }
.ba-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.ba-k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); }
.ba-hint{ font-family:var(--f-mono); font-size:.62rem; color:var(--txt-3); opacity:.75; font-style:italic; }
.ba-bars{ display:flex; flex-direction:column; gap:.4rem; }
.ba-bar{ display:grid; grid-template-columns:3.3rem 1fr auto; gap:.75rem; align-items:center; }
.ba-bar .lg{ font-family:var(--f-mono); font-size:.62rem; color:var(--txt-3); letter-spacing:.06em; text-transform:uppercase; }
.ba-bar .tr{ height:9px; border-radius:99px; background:var(--line); overflow:hidden; }
.ba-bar .tr i{ display:block; height:100%; width:0; border-radius:99px; background:var(--line-3); transition:width .9s var(--ease); }
.ba-bar.is-after .tr i{ background:linear-gradient(90deg, var(--ember-3), var(--ember)); }
.ba-bar .vl{ font-family:var(--f-mono); font-size:.78rem; font-weight:600; min-width:4.4rem; text-align:right; }

.kv{ display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:560px){ .kv{ grid-template-columns:repeat(2,1fr); } }
.kv > div{ display:flex; flex-direction:column; gap:.2rem; padding:.85rem 1rem; border-radius:var(--r-sm); background:var(--glass); border:1px solid var(--line); }
.kv .k{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); }
.kv .v{ font-size:.88rem; font-weight:600; }

.did-list{ display:flex; flex-direction:column; gap:.7rem; }
.did-list li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; color:var(--txt-2); }
.did-list li svg{ width:15px; height:15px; flex:none; margin-top:.25rem; color:var(--ember); }

/* command palette */
.cmdk{
  position:fixed; inset:0; z-index:190; display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(3rem,12vh,9rem) var(--gut) var(--gut);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.cmdk.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.cmdk-scrim{ position:absolute; inset:0; background:rgba(6,4,4,.75); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
[data-theme="light"] .cmdk-scrim{ background:rgba(40,26,26,.45); }
.cmdk-panel{
  position:relative; width:min(620px,100%); border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-1); box-shadow:var(--shadow-lg);
  transform:translateY(-12px) scale(.985); transition:transform .35s var(--ease);
}
.cmdk.is-open .cmdk-panel{ transform:none; }
.cmdk-top{ display:flex; align-items:center; gap:.85rem; padding:1rem 1.15rem; border-bottom:1px solid var(--line); }
.cmdk-top svg{ width:17px; height:17px; color:var(--txt-3); flex:none; }
.cmdk-top input{
  flex:1; background:none; border:0; outline:none; font-size:.98rem; padding:0;
}
.cmdk-top input::placeholder{ color:var(--txt-3); }
.cmdk-top kbd{
  font-family:var(--f-mono); font-size:.6rem; padding:.2rem .42rem; border-radius:5px;
  border:1px solid var(--line); color:var(--txt-3); flex:none;
}
.cmdk-list{ max-height:min(52vh,420px); overflow-y:auto; padding:.5rem; }
.cmdk-group{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); padding:.7rem .8rem .35rem;
}
.cmdk-item{
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  padding:.7rem .8rem; border-radius:var(--r-xs); color:var(--txt-2);
  transition:background .2s, color .2s;
}
.cmdk-item .ic{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); flex:none; }
.cmdk-item .ic svg{ width:13px; height:13px; }
.cmdk-item .tt{ flex:1; min-width:0; }
.cmdk-item .tt b{ display:block; font-weight:600; font-size:.88rem; color:var(--txt); }
.cmdk-item .tt s{ display:block; text-decoration:none; font-size:.74rem; color:var(--txt-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item[aria-selected="true"]{ background:var(--glass-2); color:var(--txt); }
.cmdk-item[aria-selected="true"] .ic{ background:var(--ember); border-color:transparent; color:#fff; }
.cmdk-empty{ padding:2rem 1rem; text-align:center; color:var(--txt-3); font-family:var(--f-mono); font-size:.78rem; }
.cmdk-foot{
  display:flex; gap:1.2rem; padding:.7rem 1.15rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.6rem; color:var(--txt-3); letter-spacing:.06em;
}
.cmdk-foot span{ display:inline-flex; align-items:center; gap:.35rem; }
.cmdk-foot kbd{ padding:.14rem .34rem; border-radius:4px; border:1px solid var(--line); }

/* toast */
.toasts{ position:fixed; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:210; display:flex; flex-direction:column; gap:.6rem; align-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:.65rem; padding:.75rem 1.15rem; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line-2); box-shadow:var(--shadow);
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.04em; white-space:nowrap;
  animation:toastIn .4s var(--spring);
}
.toast svg{ width:14px; height:14px; color:var(--signal); flex:none; }
.toast.is-out{ animation:toastOut .3s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px) scale(.98); } }

/* back to top */
.to-top{
  position:fixed; right:var(--gut); bottom:1.6rem; z-index:120;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:var(--bg-2); color:var(--txt-2);
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, color .3s, border-color .3s;
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ color:var(--txt); border-color:var(--line-3); }
.to-top svg{ width:17px; height:17px; }

/* custom cursor */
.cursor, .cursor-dot{ position:fixed; top:0; left:0; z-index:250; pointer-events:none; border-radius:50%; opacity:0; }
.cursor{
  width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid var(--line-3);
  transition:opacity .3s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease);
}
.cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--ember); }
body.has-cursor .cursor, body.has-cursor .cursor-dot{ opacity:1; }
body.cursor-hot .cursor{ width:58px; height:58px; margin:-29px 0 0 -29px; background:rgba(225,29,60,.1); border-color:var(--ember); }
body.cursor-hot .cursor-dot{ opacity:0; }

/* preloader */
.boot{
  position:fixed; inset:0; z-index:300; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transition:opacity .6s var(--ease), visibility .6s;
}
.boot.is-gone{ opacity:0; visibility:hidden; }
.boot-mark{ font-family:var(--f-display); font-weight:900; font-stretch:120%; font-size:clamp(2rem,7vw,3.4rem); letter-spacing:-.04em; text-transform:uppercase; }
.boot-bar{ width:min(220px,50vw); height:2px; background:var(--line); border-radius:99px; overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:var(--ember); transition:width .25s var(--ease); }
.boot-pc{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--txt-3); }

/* ============================ 12 · MOTION ============================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.4s; }

/* per-line headline mask reveal */
.lines .ln-wrap{ display:block; overflow:hidden; }
.lines .ln-inner{ display:block; transform:translateY(105%); transition:transform .95s var(--ease-out); }
.lines.is-in .ln-inner{ transform:none; }
.lines.is-in .ln-wrap:nth-child(2) .ln-inner{ transition-delay:.09s; }
.lines.is-in .ln-wrap:nth-child(3) .ln-inner{ transition-delay:.18s; }
.lines.is-in .ln-wrap:nth-child(4) .ln-inner{ transition-delay:.27s; }

/* hero entrance */
.hero-portrait, .hero-nm, .hero-rails > *, .seal{ opacity:0; }
body.is-ready .hero-nm{ animation:riseIn 1s var(--ease-out) forwards; }
body.is-ready .hero-nm-back{ animation-delay:.1s; }
body.is-ready .hero-nm-front{ animation-delay:.36s; }
body.is-ready .hero-portrait{ animation:portraitIn 1.3s var(--ease-out) .25s forwards; }
body.is-ready .hero-rails > *{ animation:riseIn .9s var(--ease-out) forwards; }
body.is-ready .hero-rail-l{ animation-delay:.5s; }
body.is-ready .hero-rail-c{ animation-delay:.58s; }
body.is-ready .hero-rail-r{ animation-delay:.66s; }
body.is-ready .seal{ animation:fadeIn .9s var(--ease-out) .8s forwards; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
@keyframes portraitIn{ from{ opacity:0; transform:translateY(46px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ to{ opacity:1; } }

/* utilities */
.flex{ display:flex; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.wrapf{ flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; }
.gap-xs{ gap:.5rem } .gap-sm{ gap:.9rem } .gap-md{ gap:1.4rem } .gap-lg{ gap:2.2rem }
.mt-sm{ margin-top:.9rem } .mt-md{ margin-top:1.6rem } .mt-lg{ margin-top:2.6rem }
.tc{ text-align:center } .mxa{ margin-inline:auto }
.hide{ display:none !important; }

/* ============================ 13 · MOBILE POLISH ============================ */
/* The desktop composition is intentionally editorial. On phones the same
   content is tightened into a faster, thumb-friendly reading flow. */
@media (max-width:759px){
  :root{
    --nav-h:64px;
    --gut:clamp(1rem,4.6vw,1.25rem);
    --sec:clamp(4rem,3.1rem + 4vw,5.2rem);
    --r-lg:22px;
  }

  body{ overflow-wrap:break-word; }
  section{ scroll-margin-top:calc(var(--nav-h) + 1.25rem); }

  .nav-shell{
    padding:max(.75rem,env(safe-area-inset-top)) var(--gut) 0;
  }
  .nav{
    height:var(--nav-h); gap:.65rem;
    padding:.45rem .45rem .45rem 1rem;
  }
  .nav-end{ gap:.38rem; }
  .mark{ width:36px; height:36px; border-radius:10px; }
  .icon-btn{ width:42px; height:42px; }

  .menu{
    padding:calc(var(--nav-h) + max(2.2rem,env(safe-area-inset-top))) var(--gut)
            max(1.4rem,env(safe-area-inset-bottom));
  }
  .menu-nav a{ min-height:48px; padding:.42rem 0; }
  .menu-foot{ gap:.85rem 1.25rem; }

  .hero{ padding-top:calc(var(--nav-h) + 2.25rem); }
  .hero-rails{ gap:.85rem; margin-bottom:1.25rem; }
  .hero-rail-l{ max-width:none; }
  .hero-role{ margin-bottom:.7rem; font-size:.62rem; }
  .hero-blurb{ font-size:.91rem; line-height:1.55; }
  .hero-actions{ flex-wrap:nowrap; gap:.5rem; margin-top:1rem; }
  .hero-actions .btn{
    flex:1 1 0; min-width:0; padding:.84rem .65rem;
    font-size:.64rem; letter-spacing:.045em;
  }
  .hero-rail-r{ gap:.5rem; }
  .hero-rail-r > .hero-blurb{ display:none; }
  .hero-mini{ gap:1.8rem; }
  .hero-mini .v{ font-size:1.25rem; }
  .hero-stage{ min-height:310px; }
  .hero-portrait img{ height:clamp(300px,40svh,350px); }
  .hero-portrait::before{ width:88vw; filter:blur(36px); }
  .hero-nm{ font-size:clamp(2.75rem,15vw,4rem); }

  .page-hero{
    padding-top:calc(var(--nav-h) + 4.2rem);
    padding-bottom:.5rem;
  }
  .page-hero h1{
    font-size:clamp(2.35rem,11.2vw,3.2rem);
    line-height:.94;
  }
  .page-hero .lead{ margin-top:1.2rem; font-size:1rem; }
  .crumbs{ margin-bottom:1.15rem; }

  .head{ gap:1.15rem; margin-bottom:2rem; }
  .head .lead{ font-size:1rem; }
  .head-actions{ width:100%; }
  .head-actions .btn{ width:100%; }

  .stats{ border-radius:var(--r-md); }
  .stat{ padding:1.25rem 1rem; min-height:128px; }
  .statement{ gap:1.8rem; }

  .filters{ display:block; margin-bottom:1.4rem; padding-bottom:1.2rem; }
  .filter-chips{
    flex-wrap:nowrap; width:calc(100% + (var(--gut) * 2));
    margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) .65rem;
    overflow-x:auto; overscroll-behavior-inline:contain;
    scroll-snap-type:inline proximity; scrollbar-width:none;
  }
  .filter-chips::-webkit-scrollbar{ display:none; }
  .filter-chips .chip{ flex:none; min-height:42px; scroll-snap-align:start; }
  .sort-wrap{ justify-content:space-between; margin-top:.7rem; }
  select.sort{ min-height:44px; max-width:calc(100% - 3.4rem); }

  .case{ padding:1.3rem 1.15rem 1.15rem; }
  .case:hover{ transform:none; }
  .case-top{ gap:.65rem; }
  .case-win{ white-space:normal; text-align:right; }
  .case-foot{ gap:.65rem; }

  .calc-in,.calc-out{ padding:1.35rem 1.15rem; }
  .calc-row{ grid-template-columns:4.6rem 1fr auto; gap:.55rem; }
  .calc-row .val{ min-width:4.2rem; font-size:.74rem; }

  .card,.tier{ padding:1.4rem 1.25rem; }
  .tools{ grid-template-columns:1fr 1fr; }
  .tool{ padding:1rem .85rem; }

  .cta{ padding:2.1rem 1.25rem; border-radius:var(--r-md); }
  .cta h2{ font-size:clamp(1.85rem,9vw,2.5rem); }
  .cta-actions,.cta-actions .btn{ width:100%; }

  .field input,.field textarea,.field select{ font-size:16px; }
  .form-card,.contact-card{ padding:1.25rem; }
  .form-fine{ font-size:.72rem; }

  .modal{ align-items:end; padding:0; }
  .modal-panel{
    width:100%; max-height:91dvh; border-radius:22px 22px 0 0;
    border-bottom:0; padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(36px);
  }
  .modal-head{ padding:1.5rem 4rem 1.15rem 1.2rem; }
  .modal-body{ padding:1.2rem; gap:1.5rem; }
  .ba-bar{ grid-template-columns:3rem 1fr auto; gap:.5rem; }
  .ba-bar .vl{ min-width:3.8rem; font-size:.72rem; }

  .cmdk{ align-items:start; padding:max(1rem,env(safe-area-inset-top)) var(--gut); }
  .cmdk-panel{ margin-top:calc(var(--nav-h) + .5rem); }
  .cmdk-top input{ font-size:16px; }

  .foot-grid{ gap:2rem; }
  .foot-col ul{ gap:.2rem; }
  .foot-col a,.foot-col span{ padding-block:.4rem; }
  .foot-bar{ align-items:flex-start; flex-direction:column; }
  .foot-bar kbd{ display:none; }
  .to-top{ right:var(--gut); bottom:max(1rem,env(safe-area-inset-bottom)); }
}

@media (max-width:374px){
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }
  .hero-stage{ min-height:290px; }
  .hero-portrait img{ height:300px; }
  .page-hero h1{ font-size:2.15rem; }
  .case-metrics{ gap:.8rem .45rem; }
  .case-foot{ align-items:flex-start; flex-direction:column; }
}

@media (hover:none){
  .btn:hover,.icon-btn:hover,.card:hover,.tier:hover,.case:hover{
    transform:none;
  }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .lines .ln-inner{ transform:none !important; }
  .hero-portrait, .hero-nm, .hero-rails > *, .seal{ opacity:1 !important; }
  .marquee-track{ animation:none !important; }
  .cursor, .cursor-dot{ display:none !important; }
}

/* ============================ PRINT ============================ */
@media print{
  .fx, .nav-shell, .menu, .cmdk, .to-top, .cursor, .cursor-dot, .boot, .progress, .marquee, .scroll-cue, .seal{ display:none !important; }
  body{ background:#fff; color:#000; }
  a{ color:#000; }
  section{ padding-block:1.5rem; break-inside:avoid; }
}