/* =============================================
   LATUS · Shared Stylesheet
   ============================================= */

/* ---------- TOKENS ---------- */
:root{
  --blue-900:#061A2C;
  --blue-800:#0A2540;
  --blue-700:#123358;
  --blue-600:#1E4775;
  --blue-400:#6D8AAE;
  --blue-200:#C3D0E0;

  --orange:#D95D2B;
  --orange-dark:#B9481B;
  --orange-soft:#F0BFA3;

  --paper:#F5F2EC;
  --paper-2:#ECE7DC;
  --rule:#D7D0BF;

  --ink:#0A2540;
  --ink-2:#2B4562;
  --muted:#6B7A8C;

  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --panel:#ffffff;
  --rule-color: var(--rule);

  --ff-display: "Fraunces", "Times New Roman", serif;
  --ff-sans: "IBM Plex Sans", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;

  --shell-max: 1380px;
  --gutter: clamp(20px, 4vw, 56px);
}
html[data-theme="dark"]{
  --bg:#061A2C;
  --bg-2:#0A2540;
  --fg:#F1ECE0;
  --fg-2:#C9D3DF;
  --muted:#8FA1B6;
  --panel:#0E2A48;
  --rule-color:#1A3B5F;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff-sans);
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.55;
  transition:background .3s ease, color .3s ease;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.shell{max-width:var(--shell-max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- TYPOGRAPHY ---------- */
.display{
  font-family:var(--ff-display);
  font-variation-settings:"opsz" 144, "SOFT" 30, "wght" 500;
  line-height:.95;
  letter-spacing:-0.02em;
}
.display-italic{
  font-family:var(--ff-display);
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 80, "wght" 500;
}
.eyebrow{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.tag{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- BRAND (shared: nav, footer) ---------- */
.brand{
  font-family:var(--ff-display);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 80, "wght" 600;
  font-size:28px;letter-spacing:-.01em;line-height:1;
  display:inline-flex;align-items:baseline;gap:2px;
}
.brand .dot,.pn-logo-dot{color:var(--orange)}

/* ══════════════════════════════════════════════════════
   PILL NAV (floating, animated)
══════════════════════════════════════════════════════ */
@keyframes pill-enter{
  from{transform:translate(50%,-120%);opacity:0}
  to  {transform:translate(50%,0);opacity:1}
}

.pill-nav{
  position:fixed;top:20px;right:50%;
  transform:translate(50%,0);
  opacity:1;
  z-index:100;
  display:flex;align-items:center;
  height:48px;
  padding:0 6px 0 20px;
  gap:0;
  border-radius:999px;
  background:color-mix(in oklab,var(--panel) 90%,transparent);
  border:1px solid var(--rule-color);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 2px 20px rgba(6,26,44,.10),0 0 0 1px rgba(6,26,44,.04);
  /* Width: transition max-width */
  max-width:600px;
  overflow:hidden;
  white-space:nowrap;
  animation:pill-enter .9s cubic-bezier(.16,1,.3,1) backwards;
  transition:
    max-width .55s cubic-bezier(.65,.01,.05,.99),
    box-shadow  .3s ease,
    padding     .55s cubic-bezier(.65,.01,.05,.99),
    right       .55s cubic-bezier(.65,.01,.05,.99),
    transform   .55s cubic-bezier(.65,.01,.05,.99);
}

html[data-theme="dark"] .pill-nav{
  background:color-mix(in oklab,#0E2A48 90%,transparent);
  border-color:#1A3B5F;
  box-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* Collapsed pill */
.pill-nav[data-state="collapsed"]{
  max-width:48px;
  padding:0;
  cursor:pointer;
  box-shadow:0 4px 28px rgba(6,26,44,.14),0 0 0 1px rgba(6,26,44,.06);
  right:max(20px, calc(var(--gutter) * 1));
  transform:translate(0,0);
}

.pill-nav[data-state="collapsed"]:hover{
  box-shadow:0 8px 40px rgba(6,26,44,.22);
}

/* Collapsed hamburger icon (absolutely centred) */
.pn-menu-icon{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  pointer-events:none;
  opacity:0;scale:.7;
  transition:opacity .3s,scale .3s;
}
.pn-menu-icon span{
  display:block;width:16px;height:1.5px;
  background:var(--fg);border-radius:2px;
}
.pill-nav[data-state="collapsed"] .pn-menu-icon{
  opacity:1;scale:1;
  transition:opacity .3s .2s,scale .3s .2s;
}

/* Logo */
.pn-logo{
  display:flex;align-items:center;
  text-decoration:none;flex-shrink:0;
  opacity:1;transform:translateX(0);
  transition:opacity .35s .22s,transform .35s .22s;
}
.pn-logo-img{
  height:22px;width:auto;display:block;
}
.pill-nav[data-state="collapsed"] .pn-logo{
  opacity:0;transform:translateX(-12px);
  transition:opacity .2s,transform .2s;
  pointer-events:none;
}

/* Vertical divider */
.pn-divider{
  width:1px;height:20px;
  background:var(--rule-color);
  flex-shrink:0;margin:0 16px;
  opacity:1;transition:opacity .3s .2s;
}
.pill-nav[data-state="collapsed"] .pn-divider{
  opacity:0;transition:opacity .15s;
}

/* Links */
.pn-links{
  display:flex;align-items:center;gap:2px;
  list-style:none;padding:0;margin:0;flex-shrink:0;
}
.pn-links a{
  font-family:var(--ff-sans);font-size:13.5px;
  color:var(--fg-2);text-decoration:none;
  padding:6px 10px;border-radius:8px;
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.pn-links a:hover{color:var(--fg);background:var(--bg-2)}
/* Staggered reveal */
.pn-links li:nth-child(1) a{opacity:1;transform:none;transition:color .15s,background .15s,opacity .35s .30s,transform .35s .30s}
.pn-links li:nth-child(2) a{opacity:1;transform:none;transition:color .15s,background .15s,opacity .35s .34s,transform .35s .34s}
.pn-links li:nth-child(3) a{opacity:1;transform:none;transition:color .15s,background .15s,opacity .35s .38s,transform .35s .38s}
.pn-links li:nth-child(4) a{opacity:1;transform:none;transition:color .15s,background .15s,opacity .35s .42s,transform .35s .42s}
.pill-nav[data-state="collapsed"] .pn-links a{
  opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .18s,transform .18s;
}

/* CTA pill-button */
.pn-cta{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--orange);
  border-radius:999px;padding:8px 18px;
  text-decoration:none;flex-shrink:0;margin-left:8px;
  white-space:nowrap;
  opacity:1;transform:translateX(0);
  transition:background .2s,opacity .35s .36s,transform .35s .36s;
}
.pn-cta:hover{background:var(--orange-dark)}
.pill-nav[data-state="collapsed"] .pn-cta{
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .15s,transform .15s;
}


/* ── Mobile bar (≤720px): replaces pill with simple header ── */
.pn-mobile-bar{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:60px;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--rule-color);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.pn-mobile-logo{
  font-family:var(--ff-display);font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 80,"wght" 600;
  font-size:24px;letter-spacing:-.01em;
  color:var(--fg);text-decoration:none;
}
.pn-mobile-burger{
  background:none;border:1px solid var(--rule-color);
  width:40px;height:40px;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;color:var(--fg);padding:0;
}
.pn-mobile-burger span{
  display:block;width:16px;height:1.5px;
  background:currentColor;border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.pn-mobile-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.pn-mobile-burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.pn-mobile-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:720px){
  .pill-nav{display:none}
  .pn-mobile-bar{display:flex}
}

/* Mobile drawer (for pages without FSM) */
.pn-drawer{
  position:fixed;inset:0;z-index:200;pointer-events:none;
}
.pn-drawer-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  opacity:0;transition:opacity .4s;cursor:pointer;
}
.pn-drawer-panel{
  position:absolute;top:0;left:0;bottom:0;width:min(320px,88vw);
  background: var(--bg);
  transform:translateX(-105%);
  transition:transform .45s cubic-bezier(.65,.01,.05,.99);
  padding:32px 28px;display:flex;flex-direction:column;gap:8px;
}
.pn-drawer--open{pointer-events:auto}
.pn-drawer--open .pn-drawer-overlay{opacity:1}
.pn-drawer--open .pn-drawer-panel{transform:translateX(0)}
.pn-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:32px;
}
.pn-drawer-close{
  background:none;border:1px solid var(--rule-color);
  color:var(--fg);width:36px;height:36px;
  border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.pn-drawer-links{list-style:none;padding:0;margin:0}
.pn-drawer-links li{border-bottom:1px solid var(--rule-color)}
.pn-drawer-links a{
  display:block;padding:18px 0;
  font-family:var(--ff-display);font-size:26px;
  font-variation-settings:"opsz" 144,"wght" 500;
  color:var(--fg);text-decoration:none;transition:color .15s;
}
.pn-drawer-links a:hover{color:var(--orange)}
.pn-drawer-links a.pn-drawer-cta{
  color:var(--orange);font-family:var(--ff-mono);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:24px;
  border-top:none;
}



/* Nav right cluster */
.nav-right{display:flex;align-items:center;gap:12px}

/* ── Kinetic section menu button ── */
.nav-menu-btn{
  display:flex;align-items:center;gap:10px;
  background:none;border:1px solid var(--rule-color);
  padding:9px 14px;color:var(--fg);cursor:pointer;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .2s,color .2s;
  position:relative;overflow:hidden;
}
.nav-menu-btn:hover{border-color:var(--orange);color:var(--orange)}
.nav-menu-label{line-height:1;transition:opacity .25s}
.nav-menu-icon{
  display:flex;flex-direction:column;gap:4px;width:16px;
}
.nav-menu-icon span{
  display:block;width:100%;height:1px;background:currentColor;
  transform-origin:center;
  transition:transform .4s cubic-bezier(.65,.01,.05,.99),opacity .3s;
}
/* open state: top×bottom→X, middle fades */
.nav-menu-btn.is-open .nav-menu-icon span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-menu-btn.is-open .nav-menu-icon span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-menu-btn.is-open .nav-menu-icon span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-menu-btn.is-open .nav-menu-label{opacity:0}

/* ─────────────────────────────────────────────────────────────────────────── */
/* FULLSCREEN SECTION MENU (homepage-only)                                     */
/* ─────────────────────────────────────────────────────────────────────────── */
.fsm{
  position:fixed;inset:0;z-index:999;
  pointer-events:none;
  /* hidden state → no display toggling, use opacity+translate on children */
}

/* Overlay: dim the page content */
.fsm-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .5s ease;
  cursor:pointer;
}

/* Stacked backdrop panels (slide in from right, staggered) */
.fsm-layer{
  position:absolute;top:0;right:0;bottom:0;
  width:min(640px,90vw);
  transform:translateX(105%);
  transition:transform .6s cubic-bezier(.65,.01,.05,.99);
}
.fsm-layer-1{ background:var(--bg-2);          transition-delay:.06s }
.fsm-layer-2{ background:var(--panel);         transition-delay:.03s }
.fsm-layer-3{ background:var(--bg);            transition-delay:0s   }

/* Main inner panel (sits on layer-3) */
.fsm-inner{
  position:absolute;top:0;right:0;bottom:0;
  width:min(640px,90vw);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,8vw,100px) clamp(32px,6vw,80px);
  transform:translateX(105%);
  transition:transform .55s cubic-bezier(.65,.01,.05,.99);
  transition-delay:0s;
  overflow-y:auto;
}

/* Open state */
.fsm--open{pointer-events:auto}
.fsm--open .fsm-overlay  { opacity:1 }
.fsm--open .fsm-layer    { transform:translateX(0) }
.fsm--open .fsm-inner    { transform:translateX(0);transition-delay:.08s }

/* Closing state: layers slide back */
.fsm--closing .fsm-layer  { transform:translateX(105%) }
.fsm--closing .fsm-inner  { transform:translateX(105%);transition-delay:0s }
.fsm--closing .fsm-overlay{ opacity:0 }

/* ── Meta eyebrow ── */
.fsm-meta{
  margin-bottom:clamp(24px,4vh,48px);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease .45s,transform .5s ease .45s;
}
.fsm--open .fsm-meta{opacity:1;transform:translateY(0)}
.fsm--closing .fsm-meta{opacity:0;transition-delay:0s}

.fsm-meta-eyebrow{
  font-family:var(--ff-mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}

/* ── Section list ── */
.fsm-list{list-style:none;padding:0;margin:0;flex:1}
.fsm-item{overflow:hidden;border-bottom:1px solid var(--rule-color)}
.fsm-item:first-child{border-top:1px solid var(--rule-color)}

.fsm-link{
  display:flex;align-items:baseline;gap:20px;
  padding:20px 0;text-decoration:none;
  transform:translateY(140%) rotate(2deg);
  transition:transform .65s cubic-bezier(.65,.01,.05,.99);
  /* stagger via --i custom property */
  transition-delay:calc(.28s + var(--i, 0) * 0.055s);
  position:relative;
}
.fsm--open   .fsm-link { transform:translateY(0) rotate(0) }
.fsm--closing .fsm-link { transform:translateY(140%) rotate(2deg);transition-delay:0s }

/* Hover background */
.fsm-link::after{
  content:'';position:absolute;inset:0;
  background:var(--bg-2);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.65,.01,.05,.99);
  z-index:0;
}
.fsm-link:hover::after{transform:scaleX(1)}
.fsm-idx,.fsm-name,.fsm-desc{position:relative;z-index:1}

.fsm-idx{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);flex:none;min-width:28px;
  transition:color .25s;
}
.fsm-name{
  font-family:var(--ff-display);
  font-size:clamp(22px,3.5vw,38px);
  font-variation-settings:"opsz" 144,"wght" 500;
  letter-spacing:-.02em;color:var(--fg);
  transition:color .25s;line-height:1.05;
}
.fsm-desc{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);margin-left:auto;text-align:right;
  max-width:180px;line-height:1.4;
  opacity:0;transition:opacity .25s;
  flex-shrink:0;
}
.fsm-link:hover .fsm-idx { color:var(--orange) }
.fsm-link:hover .fsm-name { color:var(--orange) }
.fsm-link:hover .fsm-desc { opacity:1 }

/* ── Footer row ── */
.fsm-foot{
  display:flex;gap:32px;margin-top:clamp(24px,4vh,48px);
  border-top:1px solid var(--rule-color);padding-top:24px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease .55s,transform .5s ease .55s;
}
.fsm--open .fsm-foot{opacity:1;transform:translateY(0)}
.fsm--closing .fsm-foot{opacity:0;transition-delay:0s}
.fsm-foot-link{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color .2s;
}
.fsm-foot-link:hover{color:var(--orange)}

/* Mobile: full width, starts from left */
@media (max-width:820px){
  .fsm-layer,.fsm-inner{ width:100%;right:auto }
  .fsm-desc{display:none}
  .nav-menu-btn{display:flex}
  .nav-burger{display:none}
}

/* ---------- HERO (Homepage) ---------- */
.hero{padding:clamp(40px,4vw,64px) 0 clamp(32px,4vw,56px);position:relative;overflow:hidden}
#hero-threads{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:1;
}
.hero-grid{display:grid;gap:48px}


.hero[data-layout="centered"] .hero-grid{
  grid-template-columns:1fr;text-align:center;justify-items:center;
}
.hero[data-layout="centered"] .hero-head{max-width:980px}
.hero[data-layout="asymmetric"] .hero-grid{grid-template-columns:1.4fr 1fr;align-items:start;gap:64px}
.hero[data-layout="asymmetric"] .hero-aside{position:relative;padding-top:8px}
.hero[data-layout="image"] .hero-grid{grid-template-columns:1fr 1fr;align-items:center;gap:64px}
.hero[data-layout="image"] .hero-visual{aspect-ratio:4/5}

@media (max-width:960px){
  .hero[data-layout] .hero-grid{grid-template-columns:1fr !important;text-align:left}
}

.hero-head h1{
  font-family:var(--ff-display);
  font-size:clamp(42px, 7vw, 100px);
  line-height:.92;
  font-variation-settings:"opsz" 144, "SOFT" 40, "wght" 500;
  letter-spacing:-0.03em;
  margin:0 0 24px;
  font-weight:500;
}
.hero-head h1 em{
  font-style:italic;
  color:var(--orange);
  font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;
  padding-right:.04em;
}
.hero-head p{
  font-size:clamp(17px,1.5vw,21px);
  color:var(--fg-2);
  max-width:52ch;
  margin:0 0 36px;
  line-height:1.45;
}
.hero[data-layout="centered"] .hero-head p{margin-left:auto;margin-right:auto}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero[data-layout="centered"] .hero-ctas{justify-content:center}

/* Hero stats strip */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-color);
  margin-top:clamp(48px,7vw,88px);
  padding-top:24px;gap:24px;
}
.hero-stats .stat{padding-right:16px;border-right:1px solid var(--rule-color)}
.hero-stats .stat:last-child{border-right:0}
.stat-num{
  font-family:var(--ff-display);font-size:clamp(40px,5vw,64px);
  font-variation-settings:"opsz" 144, "wght" 400;
  line-height:1;letter-spacing:-.02em;
}
.stat-num sup{font-size:.4em;vertical-align:top;color:var(--orange);font-family:var(--ff-mono);letter-spacing:0;top:.3em;position:relative}
.stat-lbl{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}
@media (max-width:820px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

/* Hero aside */
.hero-aside{font-family:var(--ff-mono);font-size:13px;color:var(--fg-2);line-height:1.65}
.aside-block{border-top:1px solid var(--rule-color);padding:18px 0}
.aside-block .k{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;margin-bottom:6px}

/* Visual placeholder */
.visual-ph{
  position:relative;width:100%;height:100%;
  background:
    repeating-linear-gradient(-8deg, transparent 0 22px, color-mix(in oklab, var(--fg) 6%, transparent) 22px 23px),
    var(--bg-2);
  border:1px solid var(--rule-color);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{
  padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,80px);
  border-bottom:1px solid var(--rule-color);
  position:relative;overflow:hidden;
}
.page-hero .breadcrumb{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:32px;display:flex;align-items:center;gap:10px;
}
.page-hero .breadcrumb a{transition:color .15s}
.page-hero .breadcrumb a:hover{color:var(--orange)}
.page-hero .breadcrumb span{color:var(--orange)}
.page-hero h1{
  font-family:var(--ff-display);
  font-size:clamp(40px,7vw,96px);
  line-height:.92;letter-spacing:-.03em;
  font-variation-settings:"opsz" 144, "SOFT" 40, "wght" 500;
  margin:0 0 24px;max-width:18ch;
}
.page-hero h1 em{
  font-style:italic;color:var(--orange);
  font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;
}
.page-hero .lead{
  font-size:clamp(17px,1.5vw,20px);color:var(--fg-2);
  max-width:54ch;margin:0;line-height:1.5;
}
.page-hero-meta{
  display:flex;gap:32px;flex-wrap:wrap;margin-top:36px;
  border-top:1px solid var(--rule-color);padding-top:24px;
}
.page-hero-meta .m{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.page-hero-meta .v{font-size:14px;color:var(--fg-2);margin-top:4px}

/* ---------- MARQUEE / TICKER ---------- */
.ticker{
  border-top:1px solid var(--rule-color);
  border-bottom:1px solid var(--rule-color);
  overflow:hidden;background:var(--bg);
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);
}
.ticker-track{
  display:flex;gap:48px;padding:14px 0;
  animation:ticker 60s linear infinite;
  white-space:nowrap;
}
.ticker-track span{display:inline-flex;align-items:center;gap:48px}
.ticker-track span::after{content:"◆";color:var(--orange);margin-left:48px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTION ---------- */
section{padding:clamp(72px,9vw,140px) 0;position:relative}
.sec-head{
  display:grid;grid-template-columns:220px 1fr;gap:48px;margin-bottom:clamp(48px,6vw,80px);
  align-items:start;
}
.sec-head .num{font-family:var(--ff-mono);font-size:12px;letter-spacing:.18em;color:var(--muted)}
.sec-head h2{
  font-family:var(--ff-display);
  font-size:clamp(36px,5.5vw,72px);
  font-variation-settings:"opsz" 144, "SOFT" 40, "wght" 500;
  letter-spacing:-.02em;line-height:1;margin:0;
  max-width:22ch;
}
.sec-head h2 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;}
.sec-head .lead{font-size:17px;color:var(--fg-2);max-width:54ch;margin-top:18px;line-height:1.5}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;gap:16px}}

/* ---------- BTN ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 22px;
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--fg);background:var(--fg);color:var(--bg);
  transition:transform .15s ease, background .15s, color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.primary:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn .arrow{font-family:var(--ff-sans);font-size:14px;letter-spacing:0;text-transform:none}

/* ---------- DIAGNOSIS SCROLL-DRIVEN (Chaos → Order) ---------- */
.diag-section{
  padding:0;
  position:relative;
  background:var(--bg-2);
}
.diag-section .shell{padding-bottom:clamp(48px,6vw,80px)}

.diag-toggle-stage{
  padding:clamp(40px,4vw,64px) var(--gutter);
  display:flex;flex-direction:column;align-items:center;
  max-width:1100px;margin:0 auto;
}

/* State label */
.diag-state-label {
  position: relative; height: 32px; margin-bottom: 24px;
  font-family: var(--ff-mono); font-size: clamp(16px, 2vw, 21px); letter-spacing: .18em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}
.diag-state-label span {
  position: absolute;
  transition: opacity .6s ease, transform .6s cubic-bezier(0.34, 1.3, 0.64, 1);
  white-space: nowrap; display: flex; align-items: center; gap: 12px;
}
.label-chaos { opacity: 1; transform: translateY(0) scale(1); color: var(--muted); }
.label-chaos::before { content: "◆"; font-size: 10px; color: var(--muted); opacity: .5; }
.label-order { opacity: 0; transform: translateY(12px) scale(0.95); color: var(--orange); }
.label-order::before { content: "◆"; font-size: 10px; color: var(--orange); }

.is-order .label-chaos { opacity: 0; transform: translateY(-12px) scale(0.95); }
.is-order .label-order { opacity: 1; transform: translateY(0) scale(1); }

/* Title morph */
.diag-title-wrap {
  position: relative;
  height: clamp(56px, 8vw, 96px);
  margin-bottom: clamp(36px, 4vw, 56px);
  width: 100%; max-width: 1060px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.diag-title { position: relative; width: 100%; height: 100%; }
.diag-title span {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(26px, 2.8vw, 38px);
  font-variation-settings: "opsz" 144, "wght" 500;
  line-height: 1.1; letter-spacing: -.015em;
  position: absolute; top: 50%; left: 50%; width: 100%;
  transform: translate(-50%, -50%);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.t-chaos { opacity: 1; transform: translate(-50%, -50%); color: var(--fg); }
.t-order { opacity: 0; transform: translate(-50%, -30%); color: var(--fg); }
.t-order em { font-style: italic; color: var(--orange); font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500; }

.is-order .t-chaos { opacity: 0; transform: translate(-50%, -70%); }
.is-order .t-order { opacity: 1; transform: translate(-50%, -50%); }

/* Cards Grid */
.diag-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%; max-width: 1060px;
  margin-bottom: clamp(32px, 5vw, 64px);
  perspective: 1400px;
}

/* Individual Card */
.dc {
  background: var(--bg);
  border: 1px solid var(--rule-color);
  padding: 32px 24px;
  border-radius: 12px;
  display: flex; flex-direction: column;
  transition: background 0.6s ease, border-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
  min-height: 220px;
  position: relative;
  transform: translateY(0);
}
.dc:hover {
  border-color: var(--fg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transform: translateY(-4px);
}

.is-order .dc {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}
.is-order .dc:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.25);
}

.dc-idx {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--orange);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
  transition: color 0.5s ease;
}
.dc-idx::after {
  content: ""; flex: 1; height: 1px; background: var(--rule-color);
  transition: background 0.5s ease;
}

.is-order .dc-idx { color: var(--orange); }
.is-order .dc-idx::after { background: var(--bg-2); opacity: 0.2; }

/* Card Text Container */
.dc-content {
  position: relative;
  flex: 1;
}
.dc-content span {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-variation-settings: "opsz" 144, "wght" 500;
  line-height: 1.25; letter-spacing: -.01em;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.6s ease;
  position: absolute; top: 0; left: 0; width: 100%;
}

.dc-chaos { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); color: var(--fg); }
.dc-order { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(4px); color: var(--bg); }

/* Stagger card transitions for a satisfying cascade */
.dc:nth-child(1) { transition-delay: 0.00s; }
.dc:nth-child(2) { transition-delay: 0.04s; }
.dc:nth-child(3) { transition-delay: 0.08s; }
.dc:nth-child(4) { transition-delay: 0.12s; }
.dc:nth-child(5) { transition-delay: 0.16s; }
.dc:nth-child(6) { transition-delay: 0.20s; }

.dc-content span { transition-delay: inherit; }

.is-order .dc-chaos { opacity: 0; transform: translateY(-20px) scale(0.95); filter: blur(4px); }
.is-order .dc-order { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }

/* Toggle button */
.diag-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fg); color: var(--bg);
  border: none; border-radius: 100px;
  padding: 16px 36px; min-width: 260px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  position: relative; overflow: hidden;
  height: 52px;
}
.diag-toggle-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.2);
}
.diag-toggle-btn:active { transform: translateY(0); }

.btn-chaos-text, .btn-order-text {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute; width: 100%; height: 100%; left: 0; top: 0;
}

.btn-chaos-text { opacity: 1; transform: translateY(0); }
.btn-order-text { opacity: 0; transform: translateY(8px); }

.is-order .diag-toggle-btn { background: var(--orange); color: #fff; }
.is-order .btn-chaos-text { opacity: 0; transform: translateY(-8px); }
.is-order .btn-order-text { opacity: 1; transform: translateY(0); }

/* Responsive adjustments */
@media (max-width: 960px) {
  .diag-cards { grid-template-columns: repeat(2, 1fr); }
  .dc { min-height: 200px; }
}
@media (max-width: 600px) {
  .diag-cards { grid-template-columns: 1fr; gap: 16px; }
  .dc { min-height: 180px; padding: 24px 20px; }
  .dc-content span { font-size: 18px; }
}
@media (prefers-reduced-motion:reduce){
  .dc{transform:none!important;transition:none!important;box-shadow:none!important}
}

/* ---------- SERVICES CARDS ---------- */
.svc{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  perspective:1400px;
}
.svc-card{
  position:relative;padding:32px 28px 28px;
  background:var(--bg);border:1px solid var(--rule-color);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s;
  will-change:transform;
}
.svc-card:hover{border-color:var(--fg);box-shadow:0 30px 60px -30px color-mix(in oklab, var(--fg) 30%, transparent)}
.svc-card .layer{transform:translateZ(40px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.svc-card .idx{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--orange);margin-bottom:40px;display:flex;align-items:center;gap:10px}
.svc-card .idx::after{content:"";flex:1;height:1px;background:var(--rule-color)}
.svc-card h3{
  font-family:var(--ff-display);font-size:clamp(26px,2.6vw,36px);margin:0 0 14px;
  font-variation-settings:"opsz" 144, "wght" 500;letter-spacing:-.015em;line-height:1.05;
}
.svc-card h3 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;}
.svc-card p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.5}
.svc-card .arrow-ico{
  position:absolute;right:24px;top:28px;
  font-family:var(--ff-display);font-style:italic;font-size:32px;color:var(--fg);opacity:.25;
  transition:opacity .3s, transform .3s, color .3s;transform:translateZ(60px);
}
.svc-card:hover .arrow-ico{opacity:1;color:var(--orange);transform:translateZ(60px) translateX(4px) translateY(-4px)}
@media (max-width:760px){.svc{grid-template-columns:1fr}}

/* ---------- PROCESS ---------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule-color);border-bottom:1px solid var(--rule-color)}
.proc-step{padding:36px 28px 36px 0;border-right:1px solid var(--rule-color);position:relative}
.proc-step:last-child{border-right:0}
.proc-step:not(:first-child){padding-left:28px}
.proc-step .n{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--orange);
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.proc-step .n::before{content:"";width:24px;height:1px;background:var(--orange)}
.proc-step h4{
  font-family:var(--ff-display);font-size:clamp(22px,2.4vw,30px);margin:0 0 12px;
  font-variation-settings:"opsz" 144, "wght" 500;line-height:1.05;letter-spacing:-.01em;
}
.proc-step h4 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;}
.proc-step p{margin:0;font-size:14.5px;color:var(--fg-2);line-height:1.55}
.proc-step .time{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);margin-top:20px;text-transform:uppercase}
@media (max-width:960px){.proc{grid-template-columns:repeat(2,1fr)}.proc-step:nth-child(2){border-right:0}.proc-step:nth-child(-n+2){border-bottom:1px solid var(--rule-color)}}
@media (max-width:560px){.proc{grid-template-columns:1fr}.proc-step{border-right:0!important;border-bottom:1px solid var(--rule-color)!important;padding-left:0!important;padding-right:0!important}.proc-step:last-child{border-bottom:0!important}}

/* ---------- METRICS BAND ---------- */
.metrics{
  background:var(--blue-800);color:#F1ECE0;
  padding:clamp(64px,8vw,120px) 0;
}
html[data-theme="dark"] .metrics{background:#000;}
.metrics .shell{position:relative}
.metrics h2{
  font-family:var(--ff-display);font-size:clamp(32px,5vw,64px);
  font-variation-settings:"opsz" 144, "wght" 500;letter-spacing:-.02em;line-height:1;margin:0 0 56px;max-width:20ch;
}
.metrics h2 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;}
.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #1A3B5F}
.metrics-cell{padding:36px 28px 36px 0;border-right:1px solid #1A3B5F;border-bottom:1px solid #1A3B5F}
.metrics-cell:nth-child(3n){border-right:0}
.metrics-cell:nth-child(3n){padding-right:0}
.metrics-cell:not(:nth-child(3n+1)){padding-left:28px}
.metrics-cell .big{font-family:var(--ff-display);font-size:clamp(52px,7vw,96px);line-height:.95;font-variation-settings:"opsz" 144, "wght" 400;letter-spacing:-.03em}
.metrics-cell .big em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 400}
.metrics-cell .lbl{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FA1B6;margin-top:14px}
@media (max-width:820px){.metrics-grid{grid-template-columns:1fr}.metrics-cell{border-right:0;padding:28px 0!important}}

/* ---------- BLOG GRID ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.post{
  display:flex;flex-direction:column;gap:16px;
  padding-top:20px;border-top:1px solid var(--rule-color);
}
.post .ph{
  aspect-ratio:5/4;
  background:
    repeating-linear-gradient(-8deg, transparent 0 20px, color-mix(in oklab, var(--fg) 6%, transparent) 20px 21px),
    var(--bg-2);
  border:1px solid var(--rule-color);
  overflow:hidden;
}
.post .ph img{width:100%;height:100%;object-fit:cover;display:block}
.post h4{font-family:var(--ff-display);font-size:22px;margin:0;font-variation-settings:"opsz" 144, "wght" 500;line-height:1.1;letter-spacing:-.01em}
.post .meta{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between}
.post p{margin:0;color:var(--fg-2);font-size:14.5px;line-height:1.5}
.post .link{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;transition:gap .15s}
.post:hover .link{gap:14px}
.post .cat-tag{
  display:inline-block;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--rule-color);color:var(--muted);
}
.post .cat-tag.orange{border-color:var(--orange-soft);color:var(--orange)}
@media (max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.blog-grid{grid-template-columns:1fr}}

/* ---------- BLOG POST DETAIL ---------- */
.post-body{
  max-width:72ch;margin:0 auto;
  padding:clamp(48px,6vw,80px) 0;
}
.post-body h2{
  font-family:var(--ff-display);font-size:clamp(28px,3.5vw,44px);
  font-variation-settings:"opsz" 144, "wght" 500;line-height:1.05;
  letter-spacing:-.02em;margin:56px 0 20px;
}
.post-body h2 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;}
.post-body h3{
  font-family:var(--ff-display);font-size:clamp(22px,2.5vw,32px);
  font-variation-settings:"opsz" 144, "wght" 500;
  margin:40px 0 16px;letter-spacing:-.01em;
}
.post-body p{font-size:17px;color:var(--fg-2);line-height:1.7;margin:0 0 24px}
.post-body ul,.post-body ol{padding-left:0;margin:0 0 24px;list-style:none}
.post-body li{font-size:16px;color:var(--fg-2);padding:8px 0;border-bottom:1px dashed var(--rule-color);display:flex;gap:12px}
.post-body li::before{content:"—";color:var(--orange);flex:none}
.post-body blockquote{
  border-left:3px solid var(--orange);margin:40px 0;
  padding:20px 28px;background:var(--bg-2);
  font-family:var(--ff-display);font-size:clamp(20px,2.2vw,28px);
  font-variation-settings:"opsz" 144, "wght" 500;
  font-style:italic;line-height:1.2;letter-spacing:-.01em;color:var(--fg);
}
.post-body .callout{
  border:1px solid var(--rule-color);padding:24px 28px;margin:32px 0;
  background:var(--bg-2);
}
.post-body .callout .k{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px;
}
.post-img{width:100%;aspect-ratio:16/9;border:1px solid var(--rule-color);background:var(--bg-2);overflow:hidden;margin:40px 0}
.post-img img{width:100%;height:100%;object-fit:cover}
.post-share{
  margin-top:64px;padding-top:32px;border-top:1px solid var(--rule-color);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.post-share .eyebrow{margin-bottom:0}
.post-share-links{display:flex;gap:12px}
.post-share-links a{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--rule-color);color:var(--fg-2);
  transition:border-color .15s,color .15s;
}
.post-share-links a:hover{border-color:var(--orange);color:var(--orange)}

/* Post nav (prev/next) */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  padding:clamp(32px,4vw,56px) 0;
  border-top:1px solid var(--rule-color);
}
.post-nav .pn{
  padding:24px;border:1px solid var(--rule-color);
  transition:border-color .2s,background .2s;
}
.post-nav .pn:hover{border-color:var(--fg);background:var(--bg-2)}
.post-nav .pn .direction{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.post-nav .pn .title{font-family:var(--ff-display);font-size:18px;font-variation-settings:"opsz" 144,"wght" 500;line-height:1.1}
.post-nav .pn.next{text-align:right}
@media (max-width:560px){.post-nav{grid-template-columns:1fr}}

/* ---------- ABOUT PAGE ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-grid .visual{aspect-ratio:4/5;background:var(--bg-2);border:1px solid var(--rule-color);overflow:hidden}
.about-grid .visual img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;gap:40px}}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-color)}
.value-card{padding:36px 28px 36px 0;border-right:1px solid var(--rule-color);border-bottom:1px solid var(--rule-color)}
.value-card:nth-child(3n){border-right:0;padding-right:0}
.value-card:nth-child(3n+2){padding-left:28px}
.value-card:nth-child(3n+3){padding-left:28px}
.value-card .n{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--orange);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.value-card .n::before{content:"";width:24px;height:1px;background:var(--orange)}
.value-card h4{font-family:var(--ff-display);font-size:clamp(22px,2.4vw,30px);margin:0 0 12px;font-variation-settings:"opsz" 144,"wght" 500;line-height:1.05;letter-spacing:-.01em}
.value-card h4 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144,"SOFT" 100,"wght" 500}
.value-card p{margin:0;font-size:14.5px;color:var(--fg-2);line-height:1.55}
@media (max-width:820px){.values-grid{grid-template-columns:1fr 1fr}.value-card:nth-child(2n){border-right:0}.value-card:nth-child(2n+1){padding-right:20px}.value-card:nth-child(2n){padding-left:20px}}
@media (max-width:560px){.values-grid{grid-template-columns:1fr}.value-card{border-right:0!important;padding:28px 0!important}}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{border:1px solid var(--rule-color);padding:0}
.team-card .photo{aspect-ratio:3/4;background:var(--bg-2);overflow:hidden;background-size:cover;background-position:center;}
.team-card .photo img{width:100%;height:100%;object-fit:cover}
.team-card .info{padding:20px}
.team-card .name{font-family:var(--ff-display);font-size:20px;font-variation-settings:"opsz" 144,"wght" 500;margin:0 0 4px}
.team-card .role{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--orange);text-transform:uppercase}
.team-card .bio{font-size:13.5px;color:var(--fg-2);line-height:1.5;margin-top:12px}
@media (max-width:960px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}

/* ---------- SERVICE DETAIL PAGE ---------- */
.svc-detail-content{
  display:grid;grid-template-columns:1fr 320px;gap:80px;
  padding:clamp(64px,8vw,112px) 0;align-items:start;
}
.svc-detail-body h2{
  font-family:var(--ff-display);font-size:clamp(28px,3.5vw,44px);
  font-variation-settings:"opsz" 144,"wght" 500;line-height:1.05;margin:48px 0 16px;
  letter-spacing:-.02em;
}
.svc-detail-body h2 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144,"SOFT" 100,"wght" 500}
.svc-detail-body p{font-size:17px;color:var(--fg-2);line-height:1.7;margin:0 0 24px}
.svc-detail-body ul{list-style:none;padding:0;margin:0 0 32px}
.svc-detail-body li{font-size:16px;color:var(--fg-2);padding:10px 0;border-bottom:1px dashed var(--rule-color);display:flex;gap:12px}
.svc-detail-body li::before{content:"◆";color:var(--orange);flex:none;font-size:10px;margin-top:4px}

.svc-sidebar{position:sticky;top:80px}
.svc-sidebar .box{border:1px solid var(--rule-color);padding:28px;margin-bottom:16px}
.svc-sidebar .box h5{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500}
.svc-sidebar .box ul{list-style:none;padding:0;margin:0;font-size:14px;color:var(--fg-2);line-height:1.9}
.svc-sidebar .box ul a{transition:color .15s}
.svc-sidebar .box ul a:hover,.svc-sidebar .box ul a.active{color:var(--orange)}
.svc-sidebar .box p{font-size:14px;color:var(--fg-2);line-height:1.6;margin:0 0 16px}
.svc-sidebar .cta-box{background:var(--blue-800);color:#F1ECE0;padding:28px}
.svc-sidebar .cta-box h4{font-family:var(--ff-display);font-size:24px;font-variation-settings:"opsz" 144,"wght" 500;margin:0 0 12px;line-height:1.1}
.svc-sidebar .cta-box p{font-size:14px;color:#C3D0E0;margin:0 0 20px}
.svc-sidebar .cta-box .btn{width:100%;justify-content:center}
@media (max-width:960px){.svc-detail-content{grid-template-columns:1fr}.svc-sidebar{position:static}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule-color)}
.faq details{border-bottom:1px solid var(--rule-color);padding:24px 0}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:start;gap:24px;
  font-family:var(--ff-display);font-size:clamp(20px,2.4vw,28px);
  font-variation-settings:"opsz" 144, "wght" 500;letter-spacing:-.01em;line-height:1.15;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--orange);font-family:var(--ff-mono);font-size:20px;width:24px;flex:none;transition:transform .2s}
.faq details[open] summary::before{content:"−"}
.faq .ans{padding:16px 0 0 48px;color:var(--fg-2);max-width:72ch;font-size:15.5px;line-height:1.55}

/* ---------- CONTACT ---------- */
.contact{background:var(--blue-800);color:#F1ECE0}
html[data-theme="dark"] .contact{background:#000}
.contact .shell{padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(72px,10vw,140px)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.contact h2{font-family:var(--ff-display);font-size:clamp(40px,6.5vw,88px);margin:0 0 24px;font-variation-settings:"opsz" 144, "wght" 500;line-height:.95;letter-spacing:-.03em}
.contact h2 em{font-style:italic;color:var(--orange);font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 500;}
.contact p.lead{color:#C3D0E0;font-size:17px;max-width:44ch;margin:0 0 36px;line-height:1.5}
.contact .info{font-family:var(--ff-mono);font-size:13px;color:#C3D0E0;line-height:1.9;border-top:1px solid #1A3B5F;padding-top:24px;margin-top:24px}
.contact .info .k{color:#8FA1B6;letter-spacing:.14em;font-size:10.5px;text-transform:uppercase;display:block;margin-top:12px}

.form{background:transparent;display:grid;gap:0}
.form .field{border-bottom:1px solid #1A3B5F;padding:18px 0;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.form label{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FA1B6}
.form input, .form textarea, .form select{
  background:transparent;border:0;color:#F1ECE0;font:inherit;font-size:16px;font-family:var(--ff-sans);outline:none;width:100%;
}
.form input::placeholder, .form textarea::placeholder{color:#5E778F}
.form textarea{resize:vertical;min-height:80px;padding:10px 0}
.form select{appearance:none}
.form .submit{margin-top:24px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}.form .field{grid-template-columns:1fr;gap:4px}}

/* ---------- FOOTER ---------- */
footer{background:var(--bg);color:var(--fg);border-top:1px solid var(--rule-color)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:64px 0 24px}
.foot-grid .brand{margin-bottom:20px}
.foot-logo-img{width:140px;height:auto;display:block;opacity:.85}
.foot-grid p{color:var(--fg-2);max-width:34ch;font-size:14px;line-height:1.5}
.foot-grid h5{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500}
.foot-grid ul{list-style:none;padding:0;margin:0;font-size:14px;line-height:2;color:var(--fg-2)}
.foot-grid ul a:hover{color:var(--orange)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0 28px;border-top:1px solid var(--rule-color);font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > :first-child{grid-column:1/-1}}

/* ---------- 3D SCENE ---------- */
.hero{perspective:1600px;perspective-origin:50% 30%}
.hero-grid{position:relative;z-index:2}
.scene3d{
  position:absolute;inset:-40px 0 -80px 0;z-index:0;pointer-events:none;
  transform-style:preserve-3d;will-change:transform;
}
.scene3d .glyph{
  position:absolute;font-family:var(--ff-display);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 300;
  color:var(--orange);opacity:.14;line-height:.8;letter-spacing:-.04em;
  user-select:none;will-change:transform;
  text-shadow:
    2px 2px 0 color-mix(in oklab, var(--orange) 50%, transparent),
    4px 4px 0 color-mix(in oklab, var(--orange) 30%, transparent),
    6px 6px 0 color-mix(in oklab, var(--orange) 18%, transparent),
    8px 8px 0 color-mix(in oklab, var(--orange) 10%, transparent);
}
html[data-theme="dark"] .scene3d .glyph{opacity:.22}
.scene3d .g1{font-size:clamp(280px, 42vw, 640px);top:-8%;right:-6%;transform:translateZ(-200px) rotate(-8deg)}
.scene3d .g2{font-size:clamp(140px, 18vw, 260px);bottom:6%;left:-3%;opacity:.08;transform:translateZ(-100px) rotate(6deg)}
html[data-theme="dark"] .scene3d .g2{opacity:.14}

.scene3d .cube{
  position:absolute;right:12%;top:18%;
  width:clamp(120px,14vw,200px);height:clamp(120px,14vw,200px);
  transform-style:preserve-3d;
  animation:floatCube 18s ease-in-out infinite;
}
.scene3d .cube .f{
  position:absolute;inset:0;border:1px solid var(--orange);
  background:color-mix(in oklab, var(--orange) 8%, transparent);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
  display:flex;align-items:flex-end;padding:12px;
}
.scene3d .cube .f1{transform:translateZ(90px)}
.scene3d .cube .f2{transform:rotateY(90deg) translateZ(90px)}
.scene3d .cube .f3{transform:rotateY(180deg) translateZ(90px)}
.scene3d .cube .f4{transform:rotateY(-90deg) translateZ(90px)}
.scene3d .cube .f5{transform:rotateX(90deg) translateZ(90px)}
.scene3d .cube .f6{transform:rotateX(-90deg) translateZ(90px)}
@keyframes floatCube{
  0%,100%{transform:rotateX(-18deg) rotateY(20deg) translateY(0)}
  50%{transform:rotateX(-22deg) rotateY(200deg) translateY(-20px)}
}

/* 3D Rings */
.metrics{perspective:1400px;overflow:hidden}
.metrics .rings{
  position:absolute;right:-120px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;pointer-events:none;
  transform-style:preserve-3d;animation:spinRings 40s linear infinite;opacity:.5;
}
.metrics .rings .ring{position:absolute;inset:0;border:1px solid color-mix(in oklab, #D95D2B 60%, transparent);border-radius:50%}
.metrics .rings .r1{transform:rotateX(70deg)}
.metrics .rings .r2{transform:rotateX(70deg) rotateY(60deg);border-color:color-mix(in oklab, #D95D2B 40%, transparent)}
.metrics .rings .r3{transform:rotateX(70deg) rotateY(120deg);border-color:color-mix(in oklab, #D95D2B 25%, transparent)}
.metrics .rings .r4{inset:15%;border-color:color-mix(in oklab, #6D8AAE 40%, transparent);transform:rotateX(70deg) rotateY(30deg)}
@keyframes spinRings{from{transform:translateY(-50%) rotateZ(0)}to{transform:translateY(-50%) rotateZ(360deg)}}
@media (max-width:820px){.metrics .rings{display:none}}

/* 3D Tilt */
.svc, .proc{perspective:1600px}
.proc-step{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.proc-step > *{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.proc-step:hover > *:not(.time){transform:translateZ(20px)}

/* 3D Diag Arrow */
.diag{perspective:1000px}
.diag-arrow span{display:inline-block;animation:arrowPulse 3s ease-in-out infinite;transform-style:preserve-3d;}
@keyframes arrowPulse{
  0%,100%{transform:rotateY(-4deg) translateZ(0)}
  50%{transform:rotateY(-4deg) translateZ(20px) scale(1.08)}
}

/* Brand badge */
.brand-badge{
  position:absolute;right:var(--gutter);top:50%;
  transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.3em;
  color:var(--muted);pointer-events:none;display:flex;align-items:center;gap:14px;
}
.brand-badge::before{content:"";width:32px;height:1px;background:var(--orange)}
@media (max-width:1100px){.brand-badge{display:none}}

/* ---------- ANIMATIONS ---------- */
@media (prefers-reduced-motion:no-preference){
  .fade-up{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
  .fade-up.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .scene3d .cube, .metrics .rings, .diag-arrow span{animation:none!important}
}

/* ---------- UTILITY ---------- */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-56{margin-top:56px}
.text-orange{color:var(--orange)}
.text-muted{color:var(--muted)}
.divider{border:0;border-top:1px solid var(--rule-color);margin:0}

/* =============================================
   LATUS · Animation Styles
   ============================================= */

/* ---------- PAGE LOADER ---------- */
#page-loader{
  position:fixed;inset:0;z-index:10000;
  background:var(--blue-900);
  display:flex;align-items:center;justify-content:center;
  pointer-events:all;
}
#page-loader .loader-inner{text-align:center}
#page-loader .loader-brand{
  font-family:var(--ff-display);font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 80,"wght" 600;
  font-size:clamp(56px,10vw,96px);
  color:#F1ECE0;
  display:inline-flex;align-items:baseline;gap:2px;
  opacity:0;
  animation:loaderReveal .75s cubic-bezier(.16,1,.3,1) .1s both;
}
#page-loader .loader-brand em{color:var(--orange);font-style:italic}
#page-loader .loader-brand .dot{color:var(--orange)}
#page-loader .loader-bar{
  width:0;height:1px;background:var(--orange);
  margin:28px auto 0;
  animation:loaderBar .65s ease .4s both;
}
@keyframes loaderReveal{
  from{opacity:0;transform:translateY(28px) skewY(2deg)}
  to{opacity:1;transform:none}
}
@keyframes loaderBar{
  from{width:0}
  to{width:100px}
}
#page-loader.loader-exit{
  animation:loaderExit .9s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes loaderExit{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-105%);opacity:1}
}

/* ---------- SCROLL PROGRESS ---------- */
#scroll-progress{
  position:fixed;top:0;left:0;z-index:9999;
  height:2px;width:0%;
  background:linear-gradient(90deg,var(--orange),color-mix(in oklab,var(--orange) 80%,#fff));
  pointer-events:none;
  transition:width .08s linear;
  box-shadow:0 0 8px var(--orange);
}

/* ---------- CUSTOM CURSOR ---------- */
#cursor-dot{
  position:fixed;top:0;left:0;z-index:9998;
  width:7px;height:7px;
  background:var(--orange);border-radius:50%;
  pointer-events:none;will-change:transform;
  transition:opacity .25s, transform .1s;
}
#cursor-ring{
  position:fixed;top:0;left:0;z-index:9997;
  width:36px;height:36px;
  border:1.5px solid color-mix(in oklab, var(--orange) 60%, transparent);
  border-radius:50%;
  pointer-events:none;will-change:transform;
  transition:width .3s cubic-bezier(.2,.8,.2,1),
             height .3s cubic-bezier(.2,.8,.2,1),
             border-color .3s, opacity .3s;
}
#cursor-ring.is-hovering{
  width:56px;height:56px;
  border-color:var(--orange);
  background:color-mix(in oklab, var(--orange) 8%, transparent);
}
#cursor-ring.is-clicking{
  width:22px;height:22px;
  border-color:var(--orange);
  background:color-mix(in oklab, var(--orange) 20%, transparent);
}
#cursor-dot.hide, #cursor-ring.hide{opacity:0}

/* ---------- WORD SPLIT ANIMATION ---------- */
.split-word{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  line-height:inherit;
  padding-bottom:.06em; /* avoid clipping descenders */
}
.word-inner{
  display:inline-block;
  transform:translateY(110%);
  opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}

/* ---------- STAGGER GRIDS ---------- */
.stagger-grid > *{
  opacity:0;
  transform:translateY(32px);
}
.stagger-grid.in > *{
  opacity:1;
  transform:none;
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.stagger-grid.in > *:nth-child(1){transition-delay:.00s}
.stagger-grid.in > *:nth-child(2){transition-delay:.07s}
.stagger-grid.in > *:nth-child(3){transition-delay:.14s}
.stagger-grid.in > *:nth-child(4){transition-delay:.21s}
.stagger-grid.in > *:nth-child(5){transition-delay:.28s}
.stagger-grid.in > *:nth-child(6){transition-delay:.35s}
.stagger-grid.in > *:nth-child(7){transition-delay:.42s}
.stagger-grid.in > *:nth-child(8){transition-delay:.49s}

/* ---------- SECTION TITLE REVEAL ---------- */
.sec-head{overflow:hidden}

/* ---------- NAV HOVER UNDERLINE ---------- */
.nav-links > a, .nav-links .has-dropdown > a{
  position:relative;padding-bottom:3px;
}
.nav-links > a::after, .nav-links .has-dropdown > a::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links > a:hover::after,
.nav-links > a.active::after,
.nav-links .has-dropdown > a:hover::after{
  transform:scaleX(1);transform-origin:left;
}

/* ---------- BUTTON RIPPLE HINT ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:'';
  position:absolute;inset:0;
  background:color-mix(in oklab,#fff 14%,transparent);
  opacity:0;transition:opacity .3s;
  pointer-events:none;
}
.btn:active::after{opacity:1}

/* ---------- GRAIN FILM TEXTURE ---------- */
body::before{
  content:'';
  position:fixed;inset:0;z-index:9990;
  pointer-events:none;
  opacity:.024;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  background-repeat:repeat;
}
html[data-theme="dark"] body::before{opacity:.04}

/* ---------- COUNTER NUMBER HIGHLIGHT ---------- */
.stat-num, .metrics-cell .big{
  transition:color .3s;
}
.counting{color:var(--orange)}
.metrics-cell .big.counting em{
  opacity:.5;
}

/* ---------- SMOOTH LINK TRANSITIONS ---------- */
.post, .svc-card, .team-card{
  transition:transform .4s cubic-bezier(.2,.8,.2,1),
             box-shadow .4s ease,
             border-color .3s;
}

/* ---------- FOOTER BRAND HOVER ---------- */
.brand{transition:letter-spacing .3s ease}
.brand:hover{letter-spacing:.02em}

/* ---------- DIAGNOSTIC SECTION SUBTLE GLOW ---------- */
.diag .col.order{
  position:relative;
}
.diag .col.order::before{
  content:'';
  position:absolute;inset:-1px;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--orange) 12%, transparent),
    transparent 60%);
  pointer-events:none;opacity:0;
  transition:opacity .6s ease;
}
.diag .col.order:hover::before{opacity:1}

/* ---------- SERVICE CARD NUMBER GLOW ---------- */
.svc-card .idx{
  transition:color .3s, letter-spacing .3s;
}
.svc-card:hover .idx{
  letter-spacing:.2em;
}

/* ---------- PROC STEP HOVER ACCENT ---------- */
.proc-step{transition:background .3s}
.proc-step:hover{background:color-mix(in oklab, var(--orange) 4%, transparent)}

/* ---------- HERO STAT PULSE ---------- */
@keyframes statPulse{
  0%,100%{opacity:1}
  50%{opacity:.75}
}
.hero-stats .stat:hover .stat-num{
  animation:statPulse .8s ease infinite;
  color:var(--orange);
}

/* Ensure reduced motion disables all new animations */
@media (prefers-reduced-motion:reduce){
  #page-loader,#page-loader.loader-exit,
  .word-inner, .stagger-grid > *,
  .loader-brand, .loader-bar{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  #cursor-dot,#cursor-ring{display:none}
  body::before{display:none}
}

/* ══════════════════════════════════════════════════════
   ABOUT SECTION (Resultados Replacement)
══════════════════════════════════════════════════════ */
.about-section {
  position: relative;
  padding: 120px 20px;
  background: var(--bg);
  overflow: hidden;
}
.tgt-glow {
  display: none !important;
}
.about-content {
  text-align: center;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-title {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "wght" 500;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 24px;
  max-width: 22ch;
}
.about-desc {
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--fg-2);
  line-height: 1.45;
  max-width: 52ch;
  margin: 0 auto 36px;
}
.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(217,93,43, 0.25);
}
.about-btn:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* ── Image Grid ── */
.about-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media(max-width: 820px) {
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 480px) {
  .about-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
  .about-fig {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    clip-path: none !important; /* disable complex masks on mobile */
  }
  .about-fig img {
    transform: scale(1) !important;
  }
}

/* Clip Paths for specific slots */
.about-fig {
  width: 100%;
  aspect-ratio: 1 / 1.25; /* slightly tall for the irregular squiggles */
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--bg-2);
}
.about-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.clip-1 { -webkit-clip-path: url(#clip-squiggle); clip-path: url(#clip-squiggle); }
.clip-1 img { transform: scale(1.35) rotate(6deg); }

.clip-2 { -webkit-clip-path: url(#differentone16); clip-path: url(#differentone16); }
.clip-2 img { transform: scale(1.35) rotate(-6deg); }

.clip-3 { -webkit-clip-path: url(#differentone8); clip-path: url(#differentone8); }
.clip-3 img { transform: scale(1.35) rotate(-6deg); }

.clip-4 { -webkit-clip-path: url(#clip-rect); clip-path: url(#clip-rect); }
.clip-4 img { transform: scale(1.35) rotate(6deg); }

.is-visible .about-fig img {
  transform: scale(1) rotate(0deg);
}

/* ── Animation Classes (init states) ── */
.js-reveal-up, .js-reveal-blur, .js-reveal-img {
  opacity: 0;
}
.js-reveal-up, .js-reveal-img { transform: translateY(40px); }
.js-reveal-blur { transform: translateY(40px); filter: blur(10px); }

.js-split-words .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.js-split-words .word-inner {
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* ── Active States (applied by JS) ── */
.is-visible.js-reveal-up,
.is-visible .js-reveal-up {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
.is-visible.js-reveal-blur,
.is-visible .js-reveal-blur {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease, filter 0.7s ease;
}

.is-visible.js-reveal-img,
.is-visible .js-reveal-img {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}

.is-visible .word-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ---------- FLOATING WHATSAPP ---------- */
.wa-float {
  position: fixed;
  bottom: clamp(24px, 4vw, 40px);
  right: clamp(24px, 4vw, 40px);
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wa-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
}
.wa-float svg {
  width: 32px;
  height: 32px;
}

/* ---------- RADIO PILLS FOR FORMS ---------- */
.radio-pill { cursor: pointer; display: inline-block; margin-bottom: 4px; }
.radio-pill input { display: none; }
.radio-pill span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--rule-color);
  border-radius: 100px;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--muted);
  transition: all 0.3s ease;
  user-select: none;
}
.radio-pill input:checked + span {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.radio-pill:hover span {
  border-color: var(--fg);
  color: var(--fg);
}
.radio-pill input:checked:hover + span {
  color: var(--bg);
}

/* ---------- SERVICES CARD LIST ---------- */
.svc-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
  border-top: 1px solid var(--rule-color);
  padding-top: 20px;
}
.svc-list li {
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-2);
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.svc-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-family: var(--ff-mono);
}