/* ============================================================
   CHEATCODE SOLUTIONS — DESIGN SYSTEM
   Black canvas. #045c04 commands attention. Built different.
   ============================================================ */

:root{
  --bg:#050505;
  --bg-2:#0a0a0a;
  --bg-3:#0f0f0f;
  --line:#1a1a1a;
  --line-2:#262626;
  --fg:#ffffff;
  --fg-2:#d8d8d8;
  --fg-3:#a8a8a8;
  --fg-4:#888888;
  --accent:#045c04;
  --accent-2:#0a7a0a;
  --accent-3:#0fa00f;
  --accent-glow:rgba(4,92,4,0.45);
  --danger:#c64040;
  --warn:#d6a23a;
  --ok:#3aa84a;
  --pending:#7a7a7a;

  --f-display:'Anton', 'Arial Black', sans-serif;
  --f-body:'Space Grotesk', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  --ease:cubic-bezier(.7,.0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1440px;
  --pad:max(24px, 4vw);

  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html{scroll-behavior:auto}
body.no-scroll{overflow:hidden}
body.locked{overflow:hidden;height:100vh}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

@media (pointer:fine){html{cursor:none}html *{cursor:none !important}}

/* ============= CUSTOM CURSOR ============= */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;mix-blend-mode:normal;will-change:transform;transform:translate3d(0,0,0) translate(-50%,-50%);backface-visibility:hidden}
.cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.cursor-ring{width:36px;height:36px;border-radius:50%;border:1px solid var(--accent);transition:background .25s var(--ease-out),border-color .25s,border-width .25s,opacity .25s;display:flex;align-items:center;justify-content:center;transform-origin:center center}
.cursor-ring.hover-link{background:rgba(4,92,4,.08);border-color:var(--accent)}
.cursor-ring.hover-button{background:rgba(4,92,4,.10);border-width:1.5px}
.cursor-ring.hover-button .cursor-label{opacity:1}
.cursor-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--accent);opacity:0;font-weight:700;text-transform:uppercase}
.cursor-ring.hidden{opacity:0}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none}html{cursor:auto}html *{cursor:auto !important}}

/* ============= LOADER ============= */
.loader{position:fixed;inset:0;background:var(--bg);z-index:99998;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .8s var(--ease),visibility .8s}
.loader.gone{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:24px;width:min(360px,80vw)}
.loader-logo{width:80px;height:80px;animation:logoPulse 2s ease-in-out infinite}
@keyframes logoPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px var(--accent-glow))}50%{transform:scale(1.04);filter:drop-shadow(0 0 24px var(--accent-glow))}}
.loader-text{font-family:var(--f-mono);font-size:11px;letter-spacing:.4em;color:var(--fg-3);text-transform:uppercase;overflow:hidden;height:14px}
.loader-text span{display:inline-block;animation:textShift 4s ease-in-out infinite}
@keyframes textShift{0%,30%{transform:translateY(0)}33%,63%{transform:translateY(-100%)}66%,96%{transform:translateY(-200%)}100%{transform:translateY(0)}}
.loader-bar{width:100%;height:1px;background:var(--line-2);overflow:hidden}
.loader-bar-fill{height:100%;width:0%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);transition:width .3s linear}
.loader-percent{font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;color:var(--accent)}

/* ============= NAVIGATION ============= */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);z-index:1000;mix-blend-mode:normal;transition:background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(5,5,5,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.18em}
.nav-logo .brand-text{display:flex;flex-direction:column;align-items:center;line-height:1}
.nav-logo .brand-line{display:flex;gap:.12em;line-height:1}
.nav-logo .brand-sub{font-size:9px;letter-spacing:.32em;color:var(--accent);margin-top:1px;line-height:1;font-weight:600;text-align:center}
.brand-mark{width:42px;height:30px;display:inline-block;filter:drop-shadow(0 0 6px var(--accent-glow));transform:translateY(-3px)}
.brand-mark svg{width:100%;height:100%}
.brand-mark.with-image{filter:none}
.brand-mark.with-image img{width:100%;height:100%;object-fit:contain;display:block}
.brand-text{display:flex;gap:.45em}
.brand-text .b1{color:#fff}
.brand-text .b2{color:var(--accent)}
.nav-links{display:flex;gap:32px;font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;font-weight:500}
.nav-links a{position:relative;padding:6px 0;color:var(--fg-2);transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .35s var(--ease-out)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:14px}
.btn-portal{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;font-weight:600;padding:12px 22px;border:1px solid var(--accent);color:#fff;background:transparent;position:relative;overflow:hidden;transition:color .35s}
.btn-portal::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .4s var(--ease-out);z-index:-1}
.btn-portal:hover::before{transform:translateY(0)}
.btn-portal{z-index:1}
.nav-burger{display:none;width:32px;height:24px;flex-direction:column;justify-content:space-between;padding:4px 0}
.nav-burger span{display:block;height:1px;background:#fff;transition:transform .3s,opacity .3s}
.nav-burger.open span:first-child{transform:translateY(8.5px) rotate(45deg)}
.nav-burger.open span:last-child{transform:translateY(-8.5px) rotate(-45deg)}

@media (max-width:880px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;background:rgba(5,5,5,.96);backdrop-filter:blur(20px);padding:32px var(--pad);gap:18px;border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .4s var(--ease-out);z-index:999}
  .nav-links.open{transform:translateY(0)}
  .nav-burger{display:flex}
  .btn-portal{padding:10px 16px;font-size:10px}
}

/* ============= GLOBAL BACKGROUND (full viewport, fixed) ============= */
.bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
.bg-grid{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;opacity:.10;will-change:transform;transition:opacity .6s var(--ease)}
.bg-vignette{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(5,5,5,.55) 100%)}
body.section-services .bg-grid{opacity:.06;background-size:60px 60px}
body.section-pricing .bg-grid{opacity:.14;background-size:120px 120px}
body.section-contact .bg-grid{opacity:.08;background-size:50px 50px}

/* Stack content above background */
.nav, main, footer, .route-view, .toast-host, .modal-host{position:relative;z-index:5}
.nav{z-index:1000}

/* ============= HERO ============= */
.hero{position:relative;height:100vh;min-height:680px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-bottom:25vh}
.hero-overlay{position:relative;z-index:3;text-align:center;padding:0 var(--pad);max-width:1200px}
.hero-meta{display:flex;justify-content:center;gap:28px;margin-bottom:20px;font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;color:var(--fg-3)}
.hero-meta-line{display:inline-flex;align-items:center;gap:8px}
.hero-meta-line::before{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent-glow)}
.hero-tagline{font-family:var(--f-mono);font-size:clamp(13px,1.6vw,20px);letter-spacing:.32em;font-weight:600;text-transform:uppercase;margin-bottom:28px;display:flex;justify-content:center;gap:.7em;flex-wrap:wrap}
.hero-tagline .t-white{color:#fff}
.hero-tagline .t-green{color:var(--accent);text-shadow:0 0 16px var(--accent-glow)}
.hero-title{font-family:var(--f-display);font-weight:400;line-height:.86;letter-spacing:-.02em;font-size:clamp(56px,11vw,180px);text-transform:uppercase;margin-bottom:28px}
.hero-title .line{white-space:nowrap;display:block}
.hero-title .line + .line{margin-top:.05em}
.hero-title .word + .word{margin-left:.06em}
.hero-title .line{display:block;overflow:hidden}
.hero-title .word{display:inline-block;transform:translateY(110%);transition:transform 1.2s var(--ease-out)}
.hero-title.in .word{transform:translateY(0)}
.hero-title .word:nth-child(2){transition-delay:.12s}
.hero-title .word.accent{color:var(--accent);text-shadow:0 0 40px var(--accent-glow)}
.hero-title .word-dot{color:var(--accent);display:inline-block}

/* ============= TITLE MATRIX FILL =============
   Wrapper carries the layout; hidden text reserves space;
   canvas paints outline + clipped matrix-rain interior. */
.matrix-fill-mounted{position:relative;display:inline-block;line-height:inherit;text-shadow:none !important}
.matrix-fill-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;display:block}
.matrix-fill-text{visibility:hidden;display:inline-block;line-height:inherit}
.hero-sub{font-family:var(--f-mono);font-size:14px;letter-spacing:.28em;color:var(--fg-2);margin-bottom:48px;text-transform:uppercase}
.hero-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.hero-scroll-indicator{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--f-mono);font-size:10px;letter-spacing:.4em;color:var(--fg-3)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--accent),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ============= BUTTONS ============= */
.btn-primary{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-weight:600;font-size:12px;letter-spacing:.22em;padding:18px 32px;background:var(--accent);color:#fff;text-transform:uppercase;position:relative;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--accent-2);transform:translateX(-101%);transition:transform .4s var(--ease-out)}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary>*{position:relative;z-index:1}
.btn-primary:hover{box-shadow:0 0 32px var(--accent-glow)}
.btn-secondary{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-weight:600;font-size:12px;letter-spacing:.22em;padding:18px 32px;background:transparent;color:#fff;text-transform:uppercase;border:1px solid var(--line-2);transition:border-color .3s,color .3s}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;padding:10px 16px;color:var(--fg-2);text-transform:uppercase;transition:color .25s}
.btn-ghost:hover{color:var(--accent)}
.btn-danger{background:transparent;border:1px solid var(--danger);color:var(--danger);padding:10px 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s}
.btn-danger:hover{background:var(--danger);color:#fff}

/* ============= SECTION COMMON ============= */
section{position:relative;padding:140px var(--pad);max-width:var(--maxw);margin:0 auto}
.section-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;color:var(--fg-3);margin-bottom:64px;text-transform:uppercase}
.section-label .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent-glow)}
.accent{color:var(--accent)}

[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:translateY(0)}

/* ============= ABOUT ============= */
.about-inner{display:grid;grid-template-columns:1fr 1px 1fr;gap:80px;align-items:center;min-height:35vh}
.about-motto{position:relative}
.about-motto .quote-mark{position:absolute;top:-60px;left:-20px;font-family:var(--f-display);font-size:200px;line-height:.8;color:var(--accent);opacity:.18}
.about-motto h2{font-family:var(--f-display);font-size:clamp(44px,6vw,96px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em}
.about-divider{width:1px;height:60%;background:linear-gradient(to bottom,transparent,var(--accent),transparent);justify-self:center}
.about-mission{padding-left:0}
.mission-label{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;color:var(--accent);margin-bottom:24px;text-transform:uppercase}
.about-mission p{font-size:clamp(20px,2.2vw,28px);line-height:1.4;color:var(--fg-2);font-weight:300}
@media (max-width:880px){.about-inner{grid-template-columns:1fr;gap:48px}.about-divider{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--accent),transparent)}}

/* About — Beliefs */
.about-beliefs{margin:120px auto 0;max-width:1200px;padding:0 32px}
.beliefs-label{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;color:var(--accent);margin-bottom:40px;text-transform:uppercase}
.beliefs-label .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block;animation:pulse 2s infinite}
.beliefs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.belief{padding:36px 28px;background:rgba(15,15,15,.45);border:1px solid rgba(4,92,4,.18);border-radius:6px;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.belief::before{content:'';position:absolute;top:0;left:0;width:0;height:2px;background:var(--accent);transition:width .4s cubic-bezier(.16,1,.3,1)}
.belief:hover::before{width:100%}
.belief:hover{border-color:var(--accent);transform:translateY(-4px);background:rgba(20,20,20,.7)}
.belief-num{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--accent);margin-bottom:18px}
.belief h3{font-family:var(--f-display);font-size:28px;line-height:1;margin:0 0 14px;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.belief p{font-size:15px;line-height:1.6;color:var(--fg-2);font-weight:300;margin:0}

/* About — Process */
.about-process{margin:80px auto 0;max-width:1200px;padding:0 32px 60px}
.process-label{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;color:var(--accent);margin-bottom:40px;text-transform:uppercase}
.process-label .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block;animation:pulse 2s infinite}
.process-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:stretch}
.process-step{padding:32px 26px;border:1px solid rgba(255,255,255,.08);border-radius:6px;transition:all .35s cubic-bezier(.16,1,.3,1);background:rgba(15,15,15,.35);position:relative}
.process-step:hover{border-color:var(--accent);background:rgba(20,20,20,.55);transform:translateY(-3px)}
.process-num{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--accent);margin-bottom:14px}
.process-step h3{font-family:var(--f-display);font-size:32px;line-height:1;margin:0 0 14px;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.process-step p{font-size:14px;line-height:1.6;color:var(--fg-2);font-weight:300;margin:0}
.process-arrow{font-family:var(--f-display);font-size:28px;color:var(--accent);opacity:.65;align-self:center;line-height:1;font-weight:600}

@media (max-width:880px){
  .about-beliefs,.about-process{margin-top:60px;padding:0 24px}
  .beliefs-grid{grid-template-columns:1fr;gap:14px}
  .process-flow{grid-template-columns:1fr;gap:14px}
  .process-arrow{transform:rotate(90deg);justify-self:center;font-size:24px}
  .belief h3,.process-step h3{font-size:24px}
}

/* ============= SERVICES ============= */
.services-inner{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:80px 1fr auto;gap:40px;align-items:center;padding:48px 0;border-bottom:1px solid var(--line);position:relative;cursor:pointer;transition:padding .35s var(--ease-out)}
.service-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.service-row:hover::after{transform:scaleX(1)}
.service-row:hover{padding-left:24px}
.service-num{font-family:var(--f-mono);font-size:13px;letter-spacing:.2em;color:var(--fg-4)}
.service-title{font-family:var(--f-display);font-size:clamp(36px,5vw,72px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.service-row:hover .service-title{color:var(--accent)}
.service-desc{font-size:14px;color:var(--fg-3);margin-top:8px;max-width:560px}
.service-arrow{font-family:var(--f-mono);font-size:24px;color:var(--accent);transform:translateX(0);transition:transform .4s var(--ease-out)}
.service-row:hover .service-arrow{transform:translateX(12px)}
@media (max-width:680px){.service-row{grid-template-columns:1fr;gap:8px;padding:32px 0}.service-arrow{display:none}}

/* ============= WORK ============= */
.work-header{margin-bottom:64px}
.work-header h2{font-family:var(--f-display);font-size:clamp(48px,8vw,140px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:16px}
.work-sub{font-family:var(--f-mono);font-size:13px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.work-card{position:relative;aspect-ratio:16/10;border:1px dashed var(--line-2);background:linear-gradient(135deg,rgba(4,92,4,.06),rgba(0,0,0,.4));overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .4s,transform .4s var(--ease-out)}
.work-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.3}
.work-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--accent-glow) 0%,transparent 60%);opacity:0;transition:opacity .5s}
.work-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.work-card:hover::after{opacity:.4}
.work-card-content{position:relative;z-index:2;text-align:center;font-family:var(--f-mono)}
.work-card-num{font-size:11px;letter-spacing:.32em;color:var(--accent);margin-bottom:12px}
.work-card-title{font-size:18px;letter-spacing:.18em;color:var(--fg-2);text-transform:uppercase}
.work-card-status{font-size:10px;letter-spacing:.3em;color:var(--fg-4);margin-top:12px}
.work-pulse{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.work-pulse span{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulseDot 1.4s ease-in-out infinite}
.work-pulse span:nth-child(2){animation-delay:.2s}
.work-pulse span:nth-child(3){animation-delay:.4s}
@keyframes pulseDot{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.3);box-shadow:0 0 14px var(--accent-glow)}}
@media (max-width:760px){.work-grid{grid-template-columns:1fr}}

/* ============= PRICING ============= */
.pricing-header{text-align:center;margin-bottom:80px}
.pricing-header h2{font-family:var(--f-display);font-size:clamp(48px,8vw,120px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:16px}
.pricing-header p{font-family:var(--f-mono);font-size:13px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);padding:48px 36px;transition:border-color .4s,transform .4s var(--ease-out)}
.tier:hover{border-color:var(--accent);transform:translateY(-6px)}
.tier.featured{border-color:var(--accent);background:linear-gradient(180deg,rgba(4,92,4,.08),var(--bg-2) 60%);transform:scale(1.02)}
.tier.featured::before{content:"MOST POPULAR";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;padding:6px 16px;font-weight:600}
.tier-num{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:16px}
.tier-name{font-family:var(--f-display);font-size:48px;line-height:1;text-transform:uppercase;margin-bottom:8px}
.tier-best{font-family:var(--f-mono);font-size:12px;color:var(--fg-3);margin-bottom:24px;line-height:1.5}
.tier-price-block{display:flex;flex-direction:column;gap:6px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.tier-price{font-family:var(--f-display);font-size:56px;line-height:1;color:#fff;letter-spacing:-.02em}
.tier-price-per{font-family:var(--f-mono);font-size:14px;color:var(--accent);font-weight:600;letter-spacing:0;margin-left:4px}
.tier-setup{font-family:var(--f-mono);font-size:12px;color:var(--fg-3);letter-spacing:.05em}
.tier-features{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:36px;flex:1}
.tier-features li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--fg-2);line-height:1.5}
.tier-features li::before{content:"";flex:0 0 6px;width:6px;height:6px;margin-top:8px;background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}
.tier-features li.heavy{color:#fff;font-weight:500}
.tier-cta{margin-top:auto}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr;gap:20px}.tier.featured{transform:none}}

/* ============= CONTACT ============= */
.contact-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.contact-text h2{font-family:var(--f-display);font-size:clamp(48px,7vw,104px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:24px}
.contact-text p{font-size:18px;color:var(--fg-2);max-width:440px;margin-bottom:48px;line-height:1.5}
.contact-meta{display:flex;flex-direction:column;gap:20px;border-top:1px solid var(--line);padding-top:32px}
.contact-meta>div{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:baseline}
.meta-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--fg-4)}
.meta-v{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;color:var(--fg-2)}

.contact-tabs{display:flex;border:1px solid var(--line);margin-bottom:24px}
.tab-btn{flex:1;padding:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase;transition:color .3s,background .3s;position:relative}
.tab-btn.active{color:#fff;background:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .5s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.contact-form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;color:var(--fg-4);text-transform:uppercase}
.field input,.field textarea,.field select{padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);color:#fff;font-size:14px;transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field textarea{resize:vertical;font-family:var(--f-body)}
.form-status{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;min-height:18px;color:var(--fg-3)}
.form-status.ok{color:var(--accent)}
.form-status.err{color:var(--danger)}

.calendly-frame{border:1px solid var(--line);background:#050505;min-height:680px;position:relative;overflow:hidden}
.calendly-frame iframe{width:100%;min-height:680px;border:0;background:#050505}
.calendly-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-4);margin-top:14px;text-align:center;text-transform:uppercase}

@media (max-width:980px){.contact-inner{grid-template-columns:1fr;gap:48px}}

/* ============= FOOTER ============= */
.footer{background:var(--bg);border-top:1px solid var(--line);padding:80px var(--pad) 32px;max-width:var(--maxw);margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.4fr 2fr;gap:60px;padding-bottom:60px;border-bottom:1px solid var(--line)}
.footer-logo{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-weight:700;font-size:14px;letter-spacing:.18em;margin-bottom:14px}
.footer-logo svg{width:48px;height:34px;filter:drop-shadow(0 0 8px var(--accent-glow))}
.footer-logo.with-image svg{display:none}
.footer-logo.with-image img{width:48px;height:48px;object-fit:contain}
.footer-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;color:var(--fg-4);text-transform:uppercase}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer-col h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:18px;text-transform:uppercase;font-weight:600}
.footer-col a{display:block;font-size:14px;color:var(--fg-2);padding:6px 0;transition:color .3s;font-family:var(--f-mono);letter-spacing:.06em}
.footer-col a:hover{color:#fff}
.footer-col a.portal-link{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-4);text-transform:uppercase}
.status-dot{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.status-dot .ping{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:ping 2s ease-in-out infinite}
@keyframes ping{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px transparent}}
@media (max-width:880px){.footer-top{grid-template-columns:1fr}.footer-cols{grid-template-columns:repeat(2,1fr)}.footer-bottom{flex-direction:column;gap:16px}}

/* ============= ROUTE VIEW (PORTAL + LEGAL + DETAIL PAGES) ============= */
.route-view{position:fixed;inset:0;background:var(--bg);z-index:900;overflow-y:auto;animation:routeIn .5s var(--ease-out)}
.route-view.with-nav{padding-top:var(--nav-h);background:transparent}
@keyframes routeIn{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:scale(1)}}

/* ============= DETAIL PAGES (services, pricing, work, contact, about) ============= */
.detail-page{min-height:calc(100vh - var(--nav-h));position:relative}
.detail-hero{padding:120px var(--pad) 80px;max-width:var(--maxw);margin:0 auto;text-align:center}
.detail-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.4em;color:var(--accent);text-transform:uppercase;margin-bottom:24px}
.detail-hero h1{font-family:var(--f-display);font-size:clamp(64px,12vw,180px);line-height:.9;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:24px}
.detail-hero h1 .accent{color:var(--accent);text-shadow:0 0 40px var(--accent-glow)}
.detail-lede{font-family:var(--f-mono);font-size:14px;letter-spacing:.18em;color:var(--fg-2);max-width:680px;margin:0 auto;line-height:1.7;text-transform:uppercase}
.detail-divider{width:60px;height:1px;background:var(--accent);margin:48px auto;box-shadow:0 0 12px var(--accent-glow)}

.detail-section{padding:80px var(--pad);max-width:var(--maxw);margin:0 auto}
.detail-section h2{font-family:var(--f-display);font-size:clamp(40px,6vw,80px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:24px}
.detail-section .lead{font-size:18px;color:var(--fg-2);max-width:680px;line-height:1.6;margin-bottom:48px}

.detail-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.detail-card{padding:36px;background:var(--bg-2);border:1px solid var(--line);transition:border-color .4s,transform .4s var(--ease-out);position:relative;overflow:hidden}
.detail-card::before{content:"";position:absolute;top:0;left:0;width:0;height:1px;background:var(--accent);transition:width .5s var(--ease-out)}
.detail-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.detail-card:hover::before{width:100%}
.detail-card .num{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:16px}
.detail-card h3{font-family:var(--f-display);font-size:clamp(22px,2vw,30px);line-height:1.05;text-transform:uppercase;margin-bottom:16px;word-break:break-word;overflow-wrap:break-word;hyphens:auto}
.detail-card p{font-size:15px;color:var(--fg-2);line-height:1.6;margin-bottom:16px}
.detail-card ul{list-style:none;padding:0}
.detail-card li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:14px;color:var(--fg-2);line-height:1.5}
.detail-card li::before{content:"";flex:0 0 4px;width:4px;height:4px;background:var(--accent);margin-top:8px;box-shadow:0 0 6px var(--accent-glow)}

.detail-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:60px}
.detail-row.reverse{grid-template-columns:1fr 1fr}
@media (max-width:880px){.detail-row{grid-template-columns:1fr;gap:32px}}

.detail-stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px;border:1px solid var(--line);background:var(--bg-2)}
.detail-stat-v{font-family:var(--f-display);font-size:64px;line-height:1;color:var(--accent);text-shadow:0 0 20px var(--accent-glow);margin-bottom:8px}
.detail-stat-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--fg-3);text-transform:uppercase}

.detail-cta{padding:80px var(--pad);text-align:center;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(4,92,4,.06))}
.detail-cta h2{font-family:var(--f-display);font-size:clamp(40px,7vw,96px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:24px}
.detail-cta p{font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;color:var(--fg-3);margin-bottom:32px;text-transform:uppercase}

.faq{max-width:880px}
.faq-item{padding:24px 28px;border:1px solid var(--line);border-bottom:none;cursor:pointer;background:rgba(10,10,10,.55);transition:background .3s,border-color .3s}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item:hover{background:rgba(4,92,4,.06);border-color:var(--accent)}
.faq-item.open{border-color:var(--accent);background:rgba(4,92,4,.08)}
.faq-item h4{font-family:var(--f-display);font-size:22px;line-height:1.2;text-transform:uppercase;letter-spacing:-.005em;position:relative;padding-right:42px}
.faq-item h4::after{content:"+";color:var(--accent);font-family:var(--f-mono);font-size:24px;font-weight:600;transition:transform .35s var(--ease-out);position:absolute;right:0;top:50%;transform:translateY(-50%)}
.faq-item.open h4::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{color:var(--fg-2);line-height:1.65;font-size:15px;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease-out),opacity .3s,margin-top .4s,padding-top .4s}
.faq-item.open p{max-height:400px;opacity:1;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
@media (max-width:880px){.process-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.process-steps{grid-template-columns:1fr}}
.process-step{padding:24px;background:var(--bg-2);border:1px solid var(--line);position:relative}
.process-step::before{content:"";position:absolute;top:24px;right:-7px;width:14px;height:14px;background:var(--bg);border:1px solid var(--accent);border-radius:50%;z-index:2}
.process-step:last-child::before{display:none}
.process-step .step-n{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:12px}
.process-step h4{font-family:var(--f-display);font-size:20px;line-height:1;text-transform:uppercase;margin-bottom:8px}
.process-step p{font-size:13px;color:var(--fg-3);line-height:1.5}

/* ============= PORTAL LOGIN ============= */
.portal-login{min-height:100vh;display:flex;align-items:stretch}
.portal-login-side{flex:1;background:var(--bg-2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:60px}
.portal-login-side::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 80%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 80%);opacity:.4}
.portal-login-art{position:relative;z-index:1;text-align:center;max-width:420px}
.portal-login-art .ring{width:240px;height:240px;border:1px solid var(--accent);border-radius:50%;margin:0 auto 32px;display:flex;align-items:center;justify-content:center;position:relative;animation:rotateRing 20s linear infinite}
.portal-login-art .ring::before{content:"";position:absolute;inset:-30px;border:1px dashed var(--line-2);border-radius:50%;animation:rotateRing 40s linear infinite reverse}
.portal-login-art .ring svg{width:100px;height:60px}
@keyframes rotateRing{to{transform:rotate(360deg)}}
.portal-login-art h2{font-family:var(--f-display);font-size:48px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:16px}
.portal-login-art p{font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;color:var(--fg-3);text-transform:uppercase}
.portal-login-form{flex:1;display:flex;align-items:center;justify-content:center;padding:60px}
.portal-login-form-inner{width:100%;max-width:420px}
.portal-form-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:14px;text-transform:uppercase}
.portal-login-form h1{font-family:var(--f-display);font-size:64px;line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:14px}
.portal-login-form .lead{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;color:var(--fg-3);margin-bottom:40px;text-transform:uppercase}
.portal-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);margin-bottom:32px;text-transform:uppercase;transition:color .3s;cursor:pointer}
.portal-back:hover{color:var(--accent)}
@media (max-width:880px){.portal-login{flex-direction:column}.portal-login-side{display:none}}

/* ============= PORTAL SHELL (rep + admin) ============= */
.portal{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:var(--bg)}
.portal-sidebar{background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:24px 20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.portal-sidebar-brand{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.18em;padding:8px 8px 24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.portal-sidebar-brand svg{width:32px;height:24px}
.portal-sidebar-brand .role{font-size:9px;color:var(--accent);letter-spacing:.3em;display:block;margin-top:2px}
.portal-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.portal-nav button{display:flex;align-items:center;gap:12px;padding:12px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--fg-2);text-align:left;transition:background .3s,color .3s;text-transform:uppercase;border-left:2px solid transparent}
.portal-nav button:hover{color:#fff;background:rgba(255,255,255,.03)}
.portal-nav button.active{color:var(--accent);background:rgba(4,92,4,.1);border-left-color:var(--accent)}
.portal-nav .nav-ic{width:14px;height:14px;flex:0 0 14px;color:inherit}
.portal-nav-bottom{padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.portal-user{display:flex;align-items:flex-start;gap:10px;padding:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em}
.portal-user .avatar{width:32px;height:32px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:0;border-radius:50%;flex:0 0 32px;overflow:hidden;margin-top:2px}
.portal-user .id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.avatar.has-image{background-color:transparent !important;background-size:cover;background-position:center center;background-repeat:no-repeat;color:transparent}
.data-table .avatar{border-radius:50%;width:36px;height:36px;flex:0 0 36px}

/* Avatar crop modal */
.crop-stage{position:relative;width:280px;height:280px;margin:8px auto 14px;background:var(--bg-3);border:2px solid var(--accent);border-radius:50%;overflow:hidden;cursor:grab;touch-action:none;box-shadow:0 0 32px var(--accent-glow)}
.crop-stage.grabbing{cursor:grabbing}
.crop-stage img{position:absolute;top:0;left:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none;max-width:none}
.crop-zoom{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--fg-3);margin:8px 0 14px;text-transform:uppercase}
.crop-zoom input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:2px;background:var(--line-2);border-radius:1px}
.crop-zoom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 8px var(--accent-glow)}
.crop-hint{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--fg-3);text-align:center;margin-bottom:8px;text-transform:uppercase}
.portal-user .id .who{display:block;color:#fff;text-transform:uppercase;letter-spacing:.18em;font-size:10px;line-height:1.3;overflow-wrap:anywhere;word-break:break-word}
.portal-user .id .em{display:block;color:var(--fg-3);font-size:10px;line-height:1.35;overflow-wrap:anywhere;word-break:break-all}
.portal-main{padding:32px 40px 80px;overflow-x:hidden}
.portal-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.portal-topbar h1{font-family:var(--f-display);font-size:42px;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.portal-topbar .subtitle{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase;margin-top:6px}
.portal-actions{display:flex;gap:10px}

@media (max-width:880px){
  .portal{grid-template-columns:1fr}
  .portal-sidebar{position:fixed;top:0;left:-280px;z-index:50;width:260px;transition:left .35s var(--ease-out);box-shadow:0 0 40px rgba(0,0,0,.6)}
  .portal-sidebar.open{left:0}
  .portal-main{padding:20px 18px 80px}
  .portal-topbar h1{font-size:28px}
  .portal-mobile-toggle{display:inline-flex !important}
}
.portal-mobile-toggle{display:none;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--fg-2);margin-right:10px}

/* ============= CARDS / TILES ============= */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:32px}
.metric{padding:24px;background:var(--bg-2);border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .3s}
.metric:hover{border-color:var(--accent)}
.metric::after{content:"";position:absolute;top:0;right:0;width:60px;height:60px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);opacity:.6;pointer-events:none}
.metric-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;color:var(--fg-3);text-transform:uppercase;margin-bottom:12px}
.metric-v{font-family:var(--f-display);font-size:48px;line-height:1;color:#fff}
.metric-trend{font-family:var(--f-mono);font-size:11px;color:var(--accent);margin-top:8px;letter-spacing:.1em}

.panel{background:var(--bg-2);border:1px solid var(--line);padding:28px;margin-bottom:20px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.panel-head h3{font-family:var(--f-display);font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.panel-head .panel-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase}

.empty{padding:48px 20px;text-align:center;border:1px dashed var(--line-2);font-family:var(--f-mono);font-size:12px;color:var(--fg-3);letter-spacing:.18em;text-transform:uppercase}

.list{display:flex;flex-direction:column}
.list-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;font-size:14px}
.list-row:last-child{border-bottom:0}
.list-row .who{display:flex;flex-direction:column;gap:4px}
.list-row .who strong{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:#fff}
.list-row .who span{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);letter-spacing:.06em}
.list-row .actions{display:flex;gap:6px}
.chip{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;padding:4px 10px;border:1px solid var(--line-2);color:var(--fg-3);text-transform:uppercase}
.chip.pending{border-color:var(--pending);color:var(--pending)}
.chip.active{border-color:var(--accent);color:var(--accent)}
.chip.inactive{border-color:var(--fg-4);color:var(--fg-4)}
.chip.new{border-color:var(--accent);color:var(--accent)}
.chip.contacted{border-color:var(--warn);color:var(--warn)}
.chip.in-progress{border-color:var(--warn);color:var(--warn)}
.chip.closed{border-color:var(--fg-4);color:var(--fg-4)}
.chip.completed{border-color:var(--accent);color:var(--accent)}
.chip.review{border-color:var(--warn);color:var(--warn)}
.chip.resolved{border-color:var(--accent);color:var(--accent)}
.chip.open{border-color:var(--warn);color:var(--warn)}
.chip.solid{background:var(--accent);color:#fff;border-color:var(--accent)}

.icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--fg-2);transition:border-color .3s,color .3s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:14px;height:14px}

/* ============= ONBOARDING FORM ============= */
.onboarding{min-height:100vh;padding:60px var(--pad);max-width:880px;margin:0 auto}
.onboarding-head{text-align:center;margin-bottom:48px}
.onboarding-head h1{font-family:var(--f-display);font-size:64px;line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:14px}
.onboarding-head p{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase}
.onboarding-progress{display:flex;justify-content:center;gap:8px;margin-top:20px}
.onboarding-progress span{width:24px;height:3px;background:var(--line-2);transition:background .3s}
.onboarding-progress span.done{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.onboarding-form{display:flex;flex-direction:column;gap:28px}
.field-group{padding:28px;background:var(--bg-2);border:1px solid var(--line)}
.field-group h3{font-family:var(--f-display);font-size:22px;line-height:1;text-transform:uppercase;margin-bottom:6px}
.field-group .group-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);margin-bottom:24px;text-transform:uppercase}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:680px){.row-2,.row-3{grid-template-columns:1fr}}

.upload-field{padding:24px;border:2px dashed var(--line-2);background:var(--bg-3);text-align:center;transition:border-color .3s,background .3s;position:relative}
.upload-field.has-file{border-color:var(--accent);background:rgba(4,92,4,.06)}
.upload-field.dragover{border-color:var(--accent);background:rgba(4,92,4,.1)}
.upload-field input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-icon{width:36px;height:36px;margin:0 auto 12px;color:var(--accent)}
.upload-text{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--fg-2);margin-bottom:4px;text-transform:uppercase}
.upload-hint{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--fg-4)}
.upload-file-name{font-family:var(--f-mono);font-size:13px;color:var(--accent);margin-top:8px;letter-spacing:.06em;word-break:break-all}

.disclaimer{padding:14px 16px;border-left:2px solid var(--accent);background:rgba(4,92,4,.06);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-2);line-height:1.6;margin-top:12px}

.checkbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:10px 0}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox .box{width:18px;height:18px;border:1px solid var(--line-2);background:var(--bg-3);flex:0 0 18px;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s;margin-top:2px}
.checkbox .box::after{content:"";width:8px;height:8px;background:var(--accent);transform:scale(0);transition:transform .25s var(--ease-out)}
.checkbox input:checked + .box{border-color:var(--accent)}
.checkbox input:checked + .box::after{transform:scale(1);box-shadow:0 0 8px var(--accent-glow)}
.checkbox-text{font-size:13px;color:var(--fg-2);line-height:1.5}
.checkbox-text a{color:var(--accent);text-decoration:underline}

.signature-area{display:flex;flex-direction:column;gap:12px}
.signature-tabs{display:flex;border:1px solid var(--line)}
.signature-tabs button{flex:1;padding:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase;transition:background .3s,color .3s}
.signature-tabs button.active{background:var(--accent);color:#fff}
.signature-canvas{width:100%;height:140px;background:var(--bg-3);border:1px solid var(--line);touch-action:none;cursor:crosshair}
.signature-typed{padding:14px;background:var(--bg-3);border:1px solid var(--line);font-family:'Caveat',cursive;font-size:36px;color:#fff;width:100%}
.signature-clear{align-self:flex-end;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);transition:color .3s,border-color .3s}
.signature-clear:hover{color:var(--accent);border-color:var(--accent)}

.onboarding-submit{padding:24px;text-align:center;border-top:1px solid var(--line);margin-top:8px}
.onboarding-success{text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;gap:24px}
.onboarding-success .success-ring{width:120px;height:120px;border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:successRing .8s var(--ease-out);box-shadow:0 0 40px var(--accent-glow)}
.onboarding-success .success-ring svg{width:48px;height:48px;color:var(--accent)}
@keyframes successRing{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.onboarding-success h2{font-family:var(--f-display);font-size:48px;line-height:1;text-transform:uppercase}
.onboarding-success p{font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;color:var(--fg-3);max-width:480px;text-transform:uppercase}

/* ============= ADMIN-SPECIFIC TABLES ============= */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;color:var(--fg-4);text-transform:uppercase;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:600;vertical-align:middle}
.data-table td{padding:14px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;vertical-align:middle}
.data-table tr:hover td{background:rgba(4,92,4,.04)}
.data-table-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.data-table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--bg-2)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filters input,.filters select{padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);color:#fff;font-family:var(--f-mono);font-size:12px;min-width:160px}
.filters input:focus,.filters select:focus{border-color:var(--accent)}
/* Unified filter dropdown styling — used across Overview, Deals, Prospects, Referrals */
.cc-filter-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase;white-space:nowrap}
.cc-filter-select{background:var(--bg-3);color:var(--fg);border:1px solid var(--line);padding:8px 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-width:200px;cursor:pointer;transition:border-color .15s}
.cc-filter-select:focus{border-color:var(--accent);outline:none}
.cc-filter-select:hover{border-color:var(--accent)}
.cc-search-input{background:var(--bg-3);color:var(--fg);border:1px solid var(--line);padding:8px 12px 8px 32px;font-family:var(--f-sans);font-size:13px;min-width:260px;transition:border-color .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23777' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
.cc-search-input::placeholder{color:var(--fg-4);font-family:var(--f-sans);font-size:13px}
.cc-search-input:focus{border-color:var(--accent);outline:none}
.cc-search-input:hover{border-color:var(--accent)}
@media(max-width:720px){.cc-search-input{min-width:0;flex:1;width:100%}}
@media (max-width:680px){
  .cc-filter-select{min-width:0;flex:1;width:100%}
}

.tree{padding:24px;background:var(--bg-3);border:1px solid var(--line);font-family:var(--f-mono);font-size:12px;line-height:1.8;letter-spacing:.04em}
.tree .root{color:var(--accent);font-weight:600}
.tree .child{padding-left:24px;color:var(--fg-2);position:relative}
.tree .child::before{content:"└─ ";color:var(--fg-4)}
.tree .grand{padding-left:48px;color:var(--fg-3)}
.tree .grand::before{content:"  └─ ";color:var(--fg-4)}

.leaderboard{display:flex;flex-direction:column;gap:8px}
.leaderboard-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:12px 14px;background:var(--bg-3);border:1px solid var(--line);align-items:center}
.leaderboard-row .rank{font-family:var(--f-display);font-size:24px;color:var(--accent);text-align:center}
.leaderboard-row .nm{font-family:var(--f-mono);font-size:13px;color:#fff;letter-spacing:.06em}
.leaderboard-row .ct{font-family:var(--f-mono);font-size:12px;color:var(--fg-3);letter-spacing:.06em}

.activity-log{display:flex;flex-direction:column;gap:10px;max-height:480px;overflow-y:auto}
.activity-row{display:grid;grid-template-columns:80px 1fr;gap:14px;padding:12px 14px;background:var(--bg-3);border-left:2px solid var(--accent);font-family:var(--f-mono);font-size:12px;letter-spacing:.04em}
.activity-row .ts{color:var(--fg-4);font-size:10px}
.activity-row .msg{color:var(--fg-2);line-height:1.5}
.activity-row .msg strong{color:#fff}

/* ============= MODAL ============= */
.modal-host{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);animation:fadeIn .25s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg-2);border:1px solid var(--accent);max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:36px;animation:modalIn .35s var(--ease-out)}
.modal.modal-wide{max-width:960px}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal h2{font-family:var(--f-display);font-size:32px;line-height:1;text-transform:uppercase;margin-bottom:12px;letter-spacing:-.01em}
.modal p{color:var(--fg-2);margin-bottom:20px;font-size:14px;line-height:1.55}
.modal-row{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.modal-form{display:flex;flex-direction:column;gap:16px;margin-bottom:8px}

.detail-grid{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;font-family:var(--f-mono);font-size:13px}
.detail-grid dt{color:var(--fg-4);letter-spacing:.18em;font-size:10px;text-transform:uppercase;align-self:center;white-space:nowrap}
.detail-grid dd{color:#fff;letter-spacing:.04em;word-break:keep-all;overflow-wrap:normal}
.detail-grid dd .chip{display:inline-block;white-space:nowrap}

/* ============= TOAST ============= */
.toast-host{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{padding:14px 20px;background:var(--bg-2);border:1px solid var(--accent);font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:#fff;min-width:240px;animation:toastIn .35s var(--ease-out);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 24px var(--accent-glow);pointer-events:auto;display:flex;align-items:center;gap:12px}
.toast.err{border-color:var(--danger);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.toast.warn{border-color:var(--warn)}
.toast .ico{width:8px;height:8px;background:var(--accent);border-radius:50%;flex:0 0 8px}
.toast.err .ico{background:var(--danger)}
.toast.warn .ico{background:var(--warn)}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.toast.out{animation:toastOut .35s var(--ease-out) forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}

/* ============= LEGAL ============= */
.legal{max-width:880px;margin:0 auto;padding:120px var(--pad) 80px}
.legal-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--fg-3);margin-bottom:32px;text-transform:uppercase;cursor:pointer;transition:color .3s}
.legal-back:hover{color:var(--accent)}
.legal-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:14px;text-transform:uppercase}
.legal h1{font-family:var(--f-display);font-size:clamp(48px,7vw,96px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:24px}
.legal .effective{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--fg-4);margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--line);text-transform:uppercase}
.legal h2{font-family:var(--f-display);font-size:28px;line-height:1.1;text-transform:uppercase;margin:48px 0 14px;letter-spacing:-.005em}
.legal h3{font-family:var(--f-mono);font-size:13px;letter-spacing:.22em;color:var(--accent);margin:32px 0 10px;text-transform:uppercase;font-weight:600}
.legal p,.legal li{color:var(--fg-2);line-height:1.7;font-size:15px;margin-bottom:14px}
.legal ul,.legal ol{padding-left:22px;margin-bottom:14px}
.legal strong{color:#fff}
.legal-footer{margin-top:60px;padding-top:32px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--fg-4);text-transform:uppercase}

/* ============= REP DASHBOARD CARDS ============= */
.project-card{padding:20px;background:var(--bg-3);border:1px solid var(--line);margin-bottom:12px}
.project-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.project-card h4{font-family:var(--f-display);font-size:20px;line-height:1;text-transform:uppercase;margin-bottom:4px}
.project-card .client{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--fg-3);text-transform:uppercase}
.project-card .notes{font-family:var(--f-mono);font-size:12px;color:var(--fg-2);line-height:1.6;padding:12px;background:var(--bg-2);border-left:2px solid var(--accent);margin-top:12px;letter-spacing:.04em}

.announcement{padding:20px;background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--accent);margin-bottom:12px}
.announcement-head{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--fg-3);margin-bottom:10px;text-transform:uppercase}
.announcement h4{font-family:var(--f-display);font-size:22px;line-height:1.05;text-transform:uppercase;margin-bottom:8px}
.announcement p{font-size:14px;color:var(--fg-2);line-height:1.55}

.resource{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px;background:var(--bg-3);border:1px solid var(--line);margin-bottom:8px;transition:border-color .3s}
.resource:hover{border-color:var(--accent)}
.resource .ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);border:1px solid var(--line);color:var(--accent)}
.resource .meta{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:#fff}
.resource .meta .sub{display:block;font-size:11px;color:var(--fg-4);letter-spacing:.16em;text-transform:uppercase;margin-top:2px}

.ticket{padding:18px;background:var(--bg-3);border:1px solid var(--line);margin-bottom:10px}
.ticket-head{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--fg-3);margin-bottom:8px;text-transform:uppercase}
.ticket .body{font-size:14px;color:var(--fg-2);line-height:1.55;margin-bottom:10px}
.ticket .reply{padding:12px;background:var(--bg-2);border-left:2px solid var(--accent);font-size:13px;color:var(--fg-2);margin-top:10px}
.ticket .reply .replier{font-family:var(--f-mono);font-size:10px;color:var(--accent);letter-spacing:.22em;margin-bottom:6px;text-transform:uppercase}

/* ============= MISC ============= */
.spacer-l{height:80px}
.spacer-m{height:40px}
.center{text-align:center}
.muted{color:var(--fg-3)}
.scramble{font-family:var(--f-mono)}
.wscram{display:inline-block;transition:color .15s}
.wscram:hover{color:var(--accent)}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ============= MOBILE POLISH ============= */
@media (max-width:760px){
  :root{--pad:18px}
  section{padding:80px var(--pad)}
  .nav{height:64px}
  .nav-logo{font-size:11px;gap:8px}
  .brand-mark{width:36px;height:26px}
  .nav-links{padding:24px var(--pad)}
  .nav-links a{font-size:14px;padding:10px 0;letter-spacing:.22em}
  .btn-portal{padding:8px 12px;font-size:9px;letter-spacing:.2em}
  .hero{min-height:580px;height:auto;padding:120px 0 100px}
  .nav{height:64px}
  .hero-title{margin-bottom:20px;font-size:clamp(48px,12vw,72px)}
  .hero-tagline{font-size:10px;letter-spacing:.18em;gap:.4em;margin-bottom:18px}
  .hero-meta{flex-direction:column;gap:8px;font-size:9px;margin-bottom:14px}
  .hero-sub{font-size:11px;letter-spacing:.22em;margin-bottom:24px;max-width:280px;margin-left:auto;margin-right:auto}
  .hero-scroll-indicator{display:none}
  .hero-actions{gap:10px}
  .btn-primary,.btn-secondary{padding:14px 20px;font-size:11px;letter-spacing:.18em}
  .section-label{margin-bottom:32px;font-size:10px}
  .about-motto h2{font-size:42px}
  .about-motto .quote-mark{font-size:120px;top:-30px;left:-10px}
  .about-mission p{font-size:17px}
  .work-header h2{font-size:54px}
  .pricing-header h2{font-size:56px}
  .tier{padding:32px 24px}
  .tier-name{font-size:38px}
  .contact-text h2{font-size:54px}
  .contact-text p{font-size:16px}
  .contact-meta>div{grid-template-columns:90px 1fr;gap:14px}
  .calendly-frame,.calendly-frame iframe{min-height:520px}
  .footer{padding:48px var(--pad) 24px}
  .footer-cols{gap:24px;grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;font-size:9px}
  .detail-hero{padding:80px var(--pad) 48px}
  .detail-hero h1{font-size:56px}
  .detail-lede{font-size:11px;letter-spacing:.14em}
  .detail-section{padding:48px var(--pad)}
  .detail-section h2{font-size:40px}
  .detail-card{padding:24px}
  .detail-card h3{font-size:24px}
  .detail-cta h2{font-size:42px}
  .detail-stat-v{font-size:42px}
  .legal{padding:90px var(--pad) 48px}
  .legal h1{font-size:48px}
  .legal p,.legal li{font-size:14px}
  .onboarding{padding:48px var(--pad)}
  .onboarding-head h1{font-size:42px}
  .field-group{padding:20px}
  .portal-login-form{padding:48px var(--pad)}
  .portal-login-form h1{font-size:42px}
  .portal-main{padding:18px 14px 80px}
  .portal-topbar h1{font-size:24px}
  .metric{padding:18px}
  .metric-v{font-size:36px}
  .panel{padding:18px}
  .panel-head h3{font-size:18px}
  .data-table th,.data-table td{padding:10px 8px;font-size:11px}
  .modal{padding:24px}
  .modal h2{font-size:24px}
  .toast-host{bottom:12px;right:12px;left:12px}
  .toast{min-width:0;width:100%;font-size:11px}
  .signature-canvas{height:120px}
  .work-card{aspect-ratio:4/3}
  .filters input,.filters select{min-width:0;width:100%}
  .filters{flex-direction:column}
}
@media (max-width:420px){
  .hero-title{font-size:54px}
  .nav-logo .brand-text{display:none}
  .btn-portal{padding:6px 10px;font-size:9px}
}

/* ============================================================
   LEGION-GRADE POLISH (added 2026-05-28)
   Topbar ticker, stats band, marquees, reviews band,
   richer footer with social icons, section eyebrows.
   Keeps hero, brand, green accent, matrix effect untouched.
   ============================================================ */

/* TOPBAR TICKER — thin scrolling info bar above nav */
.topbar{position:fixed;top:0;left:0;right:0;z-index:1001;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;padding:7px 0;overflow:hidden;font-weight:700;border-bottom:1px solid rgba(0,0,0,.25)}
.topbar-track{display:flex;gap:42px;white-space:nowrap;animation:cc-ticker 48s linear infinite;will-change:transform}
.topbar-track span{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.topbar-track .dot{width:5px;height:5px;background:#000;border-radius:50%;display:inline-block;flex-shrink:0}
@keyframes cc-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Nudge nav and content down to clear the ticker */
.nav{top:30px}
body{padding-top:0}
@media (max-width:640px){.topbar{font-size:9.5px;letter-spacing:.18em;padding:6px 0}.topbar-track{gap:28px;animation-duration:38s}.nav{top:26px}}

/* MARQUEE — scrolling-text band used between sections */
.marquee{position:relative;background:var(--accent);overflow:hidden;padding:14px 0;font-family:var(--f-display);font-size:24px;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-top:1px solid #000;border-bottom:1px solid #000;z-index:2}
.marquee-track{display:flex;gap:42px;white-space:nowrap;animation:cc-ticker 44s linear infinite;will-change:transform}
.marquee-track span{display:inline-flex;align-items:center;gap:42px;flex-shrink:0}
.marquee .star{color:#fff;font-size:18px;opacity:.85}
@media (max-width:640px){.marquee{font-size:18px;padding:11px 0}}

/* STATS BAND — proof points */
.stats-band{position:relative;z-index:2;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.stats-band .stats-grid{display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--maxw);margin:0 auto;gap:0}
.stats-band .stat{padding:36px 24px;text-align:center;border-right:1px solid var(--line);position:relative;transition:background .35s var(--ease-out)}
.stats-band .stat:last-child{border-right:none}
.stats-band .stat:hover{background:var(--bg-3)}
.stats-band .stat-num{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1;color:#fff;margin-bottom:8px;letter-spacing:.005em}
.stats-band .stat-num .stat-small{font-size:20px;color:var(--accent-3);margin-left:4px;letter-spacing:.04em}
.stats-band .stat-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--fg-4);text-transform:uppercase;font-weight:700;line-height:1.4}
@media (max-width:920px){.stats-band .stats-grid{grid-template-columns:repeat(2,1fr)}.stats-band .stat{border-bottom:1px solid var(--line)}.stats-band .stat:nth-child(2n){border-right:none}.stats-band .stat:last-child{grid-column:1/-1;border-bottom:none}}

/* REVIEWS BAND — testimonials/social proof */
.reviews-band{position:relative;z-index:2;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:80px var(--pad)}
.reviews-band .reviews-grid{display:grid;grid-template-columns:320px 1fr;gap:48px;max-width:var(--maxw);margin:0 auto;align-items:start}
.reviews-band .reviews-score{padding:24px;background:var(--bg-3);border:1px solid var(--line);border-radius:4px;text-align:center;position:sticky;top:120px}
.reviews-band .reviews-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;color:var(--accent-3);font-weight:700;margin-bottom:14px}
.reviews-band .reviews-num{font-family:var(--f-display);font-size:88px;line-height:1;color:#fff;margin-bottom:10px;text-shadow:0 0 30px var(--accent-glow)}
.reviews-band .reviews-stars{color:var(--accent-3);font-size:18px;letter-spacing:.18em;margin-bottom:10px;text-shadow:0 0 8px var(--accent-glow)}
.reviews-band .reviews-meta{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--fg-4);text-transform:uppercase;font-weight:700}
.reviews-band .reviews-quotes{display:grid;grid-template-columns:1fr;gap:16px}
.reviews-band .review-card{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--accent);padding:22px 24px;border-radius:0 4px 4px 0;transition:border-color .25s,transform .25s var(--ease-out)}
.reviews-band .review-card:hover{border-left-color:var(--accent-3);transform:translateX(4px)}
.reviews-band .review-stars{color:var(--accent-3);letter-spacing:.18em;margin-bottom:10px;font-size:13px}
.reviews-band .review-text{font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--fg-2);margin-bottom:12px;font-style:italic}
.reviews-band .review-author{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--fg-4);text-transform:uppercase;font-weight:700}
@media (max-width:820px){.reviews-band{padding:56px 24px}.reviews-band .reviews-grid{grid-template-columns:1fr;gap:28px}.reviews-band .reviews-score{position:static;padding:20px}.reviews-band .reviews-num{font-size:64px}}

/* FOOTER SOCIAL ICONS */
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-socials a{width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--fg-3);transition:all .2s var(--ease-out);background:var(--bg-3)}
.footer-socials a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow)}
.footer-socials svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* SECTION-LABEL elevated — bring it to Legion eyebrow pitch */
.section-label{position:relative;padding-left:42px}
.section-label::before{content:"";position:absolute;left:0;top:50%;width:28px;height:1px;background:var(--accent);transform:translateY(-50%);box-shadow:0 0 8px var(--accent-glow)}
.section-label .dot{display:none}
.section-label > span{font-weight:700;color:var(--accent-3)}

/* ABOUT eyebrow + headline polish */
.about-motto h2{text-shadow:0 0 40px rgba(0,0,0,.5)}

/* SERVICES — add subtle accent slide-in on rows (only if .services-row exists later) */
.services-inner > *{transition:background .25s,border-color .25s}

/* WORK CARDS — subtle accent rule-line that animates in on hover */
.work-card{position:relative}
.work-card::before{transition:opacity .35s var(--ease-out)}
.work-card .work-card-num,.work-card .work-card-title{transition:color .25s,letter-spacing .25s}
.work-card:hover .work-card-num{color:#fff}
.work-card:hover .work-card-title{letter-spacing:.24em;color:#fff}

/* PRICING — elevate header w/ eyebrow before tier title */
.pricing-header h2{text-shadow:0 0 30px rgba(0,0,0,.4)}

/* CONTACT — eyebrow + accent header polish */
.contact-text h2{text-shadow:0 0 30px rgba(0,0,0,.4)}

/* FOOTER — bump up the bottom-bar status dot styling */
.status-dot .ping{width:8px;height:8px;background:var(--accent-3);border-radius:50%;display:inline-block;margin-right:8px;box-shadow:0 0 0 0 rgba(15,160,15,.6);animation:cc-pulse 2.2s infinite}
@keyframes cc-pulse{0%{box-shadow:0 0 0 0 rgba(15,160,15,.6)}70%{box-shadow:0 0 0 10px rgba(15,160,15,0)}100%{box-shadow:0 0 0 0 rgba(15,160,15,0)}}

/* HERO clear topbar — make sure hero math accounts for topbar */
.hero{padding-top:30px}
@media (max-width:640px){.hero{padding-top:26px}}

/* WORK header punch */
.work-header h2{text-shadow:0 0 40px rgba(0,0,0,.5)}

/* Reveal-on-scroll baseline for new sections */
.reviews-band .review-card[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reviews-band .review-card[data-reveal].in{opacity:1;transform:translateY(0)}

/* ============================================================
   LEGION-GRADE POLISH — INNER PAGES (added 2026-05-28)
   Carries the home-page polish (eyebrow rule-lines, marquee
   dividers, stronger CTA bands, accent shadows) into the
   services-page / about-page / work-page / pricing-page /
   contact-page detail templates.
   ============================================================ */

/* DETAIL-EYEBROW — add the Legion accent rule-line + glow that the home eyebrows have */
.detail-eyebrow{position:relative;padding-left:42px;display:inline-flex;align-items:center;font-weight:700;color:var(--accent-3) !important;text-shadow:0 0 8px var(--accent-glow)}
.detail-eyebrow::before{content:"";position:absolute;left:0;top:50%;width:28px;height:1px;background:var(--accent);transform:translateY(-50%);box-shadow:0 0 8px var(--accent-glow)}

/* DETAIL-HERO — bigger cinematic feel, accent shadow on the headline */
.detail-hero{padding:130px var(--pad) 90px;position:relative}
.detail-hero::before{content:"";position:absolute;left:50%;top:50%;width:1100px;height:520px;max-width:90vw;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center, rgba(4,92,4,0.10), transparent 65%);pointer-events:none;z-index:0}
.detail-hero > *{position:relative;z-index:1}
.detail-hero h1{text-shadow:0 4px 30px rgba(0,0,0,.5)}
.detail-hero h1 .accent{filter:drop-shadow(0 0 22px var(--accent-glow))}

/* DETAIL-SECTION headings — Legion stencil punch */
.detail-section h2{text-shadow:0 0 30px rgba(0,0,0,.4)}
.detail-section h2 .accent{filter:drop-shadow(0 0 18px var(--accent-glow))}

/* DETAIL-CARDS — stronger hover lift like Legion's .disc grid */
.detail-card{background:var(--bg-3);transition:border-color .25s,transform .35s var(--ease-out),background .35s}
.detail-card:hover{background:var(--bg-2);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 0 1px var(--accent) inset}
.detail-card .num{display:inline-flex;align-items:center;padding-left:28px;position:relative}
.detail-card .num::before{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:var(--accent);transform:translateY(-50%)}

/* PROCESS-STEPS — keep the Legion-style numbered eyebrow treatment */
.process-step .step-n{padding-left:24px;position:relative}
.process-step .step-n::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--accent);transform:translateY(-50%)}

/* DETAIL-CTA — convert into a Legion-style cinematic band */
.detail-cta{position:relative;padding:110px var(--pad);overflow:hidden;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(4,92,4,.04) 0%,transparent 50%,rgba(4,92,4,.10) 100%)}
.detail-cta::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:420px;max-width:95vw;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center, rgba(4,92,4,0.18), transparent 70%);pointer-events:none;z-index:0}
.detail-cta::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;opacity:.06;pointer-events:none;z-index:0}
.detail-cta > *{position:relative;z-index:1}
.detail-cta h2{text-shadow:0 0 40px rgba(0,0,0,.6)}
.detail-cta h2 .accent{filter:drop-shadow(0 0 22px var(--accent-glow))}

/* MARQUEE — wider availability for divider use on inner pages
   Inner pages can embed <div class="marquee"><div class="marquee-track">…</div></div>
   The base .marquee + .marquee-track rules from the home polish already cover styling. */

/* DETAIL-STAT — beef up the stats block on /about with stronger Legion type */
.detail-stat{padding:24px;background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--accent);transition:transform .25s,border-color .25s}
.detail-stat:hover{transform:translateX(4px);border-left-color:var(--accent-3)}
.detail-stat .detail-stat-v{font-family:var(--f-display);font-size:56px;line-height:1;color:#fff;text-shadow:0 0 18px var(--accent-glow);margin-bottom:6px;letter-spacing:.005em}
.detail-stat .detail-stat-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;color:var(--fg-4);text-transform:uppercase;font-weight:700}

/* FAQ — match the eyebrow/divider treatment */
.faq-item{padding:18px 0 18px 28px;border-bottom:1px solid var(--line);position:relative;cursor:pointer;transition:padding-left .35s var(--ease-out)}
.faq-item::before{content:"+";position:absolute;left:0;top:18px;font-family:var(--f-mono);color:var(--accent);font-weight:700;font-size:18px;line-height:1;transition:transform .25s}
.faq-item.open::before{transform:rotate(45deg)}
.faq-item:hover{padding-left:36px;border-color:var(--accent)}
.faq-item h4{font-family:var(--f-display);font-size:22px;line-height:1.1;text-transform:uppercase;letter-spacing:-.005em;color:#fff;margin:0}
.faq-item p{display:none;font-size:14px;color:var(--fg-2);line-height:1.6;margin-top:12px;max-width:680px}
.faq-item.open p{display:block;animation:cc-fade .35s var(--ease-out)}
@keyframes cc-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* CONTACT-META on inner pages — punch it up */
.contact-meta{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:28px;margin-top:32px}
.contact-meta > div{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline;padding:8px 0}
.contact-meta .meta-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;color:var(--fg-4);text-transform:uppercase;font-weight:700}
.contact-meta .meta-v{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--accent-3);text-transform:uppercase}

/* CALENDLY-FRAME → upgrade visual when booking widget renders */
.calendly-frame{position:relative;background:var(--bg-3);border:1px solid var(--line);border-radius:4px;overflow:hidden;min-height:560px}
.calendly-frame iframe{width:100%;min-height:560px;border:0;background:#050505}
.calendly-note{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--fg-4);text-transform:uppercase;font-weight:700;margin-top:12px;text-align:center}

/* WORK GRID inside detail-row — tighter Legion-style cards */
.detail-row{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
@media (max-width:880px){.detail-row{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   NAV — DEALER PORTAL button cut-off fix (2026-05-28)
   Brady reported the button hugging or clipping at the right
   edge on sub-pages. Defensive fix: give the nav more right
   padding, ensure flex-shrink:0 on the button so it never
   compresses, and bump min-width so text fits even at narrow
   widths. Mobile uses a smaller button so the existing
   media query still applies.
   ============================================================ */
.nav{padding-right:max(28px, 4vw)}
.nav-actions{flex-shrink:0;min-width:fit-content;margin-left:auto}
.btn-portal{flex-shrink:0;white-space:nowrap;min-width:max-content}
/* On tablet/desktop where nav-links are visible, ensure the actions block
   has enough room and doesn't collide with the links */
@media (min-width: 881px){
  .nav-actions{margin-left:24px}
}
/* On mobile (nav-links collapsed into burger menu), the portal button still
   needs to stay readable and not be clipped */
@media (max-width: 880px){
  .nav{padding-right:max(18px, 3vw)}
  .btn-portal{padding:10px 14px;font-size:10px;letter-spacing:.18em}
}
@media (max-width: 480px){
  .btn-portal{padding:8px 12px;font-size:9.5px;letter-spacing:.16em}
}

/* ============================================================
   HERO — true vertical centering fix (2026-05-28)
   Brady noticed the hero content sits visually too high. The
   old design had padding-bottom:25vh which pulled content up
   to leave room for a SCROLL indicator. With the new topbar
   (30px) + nav (72px) above, content was offset further up.
   This balances the hero so its center lines up with the
   visible center of the area below the nav.
   ============================================================ */
.hero{
  padding-top: calc(var(--nav-h) + 30px);  /* topbar (30px) + nav (72px) */
  padding-bottom: 18vh;                     /* pushes content visually up — Brady nudge 2026-05-28 */
}
@media (max-width:640px){
  .hero{
    padding-top: calc(var(--nav-h) + 26px);
    padding-bottom: 14vh;
  }
}

/* ============================================================
   CC BOOKER — public Google Calendar booking widget (2026-05-28)
   Replaces the broken iframe with a full custom widget that
   reads from /api/public-availability and posts to /api/public-book-call.
   ============================================================ */
.cc-booker{width:100%}
.cc-booker-shell{background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:20px;min-height:520px}
.cc-booker-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cc-booker-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;color:var(--accent-3);font-weight:700;text-transform:uppercase;text-shadow:0 0 8px var(--accent-glow)}
.cc-booker-tz{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.24em;color:var(--fg-4);text-transform:uppercase;font-weight:700}
.cc-booker-stage{display:flex;flex-direction:column;gap:24px;flex:1}
.cc-booker-loading,.cc-booker-err{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--fg-3);text-align:center;padding:48px 24px;line-height:1.7}
.cc-booker-err a{color:var(--accent-3);text-decoration:underline;text-underline-offset:3px}
.cc-booker-step{display:flex;flex-direction:column;gap:14px}
.cc-booker-step-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;color:var(--accent-3);font-weight:700;text-transform:uppercase}
.cc-booker-back{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);background:none;border:none;cursor:pointer;align-self:flex-start;padding:0;margin-bottom:6px;font-weight:700;transition:color .2s}
.cc-booker-back:hover{color:var(--accent-3)}
.cc-booker-when{font-family:var(--f-mono);font-size:13px;color:#fff;letter-spacing:.06em;background:rgba(4,92,4,.15);border:1px solid var(--accent);padding:12px 16px;border-radius:3px;margin-bottom:8px}

/* DATE picker */
.cc-date-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.cc-date-row::-webkit-scrollbar{height:4px}
.cc-date-row::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:2px}
.cc-date-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;cursor:pointer;transition:all .2s;min-width:64px;font-family:var(--f-mono);font-weight:700}
.cc-date-chip:hover{border-color:var(--accent-3);color:#fff;background:var(--bg)}
.cc-date-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow)}
.cc-date-chip .cc-date-dow{font-size:9px;letter-spacing:.22em;color:var(--fg-4)}
.cc-date-chip.active .cc-date-dow{color:rgba(255,255,255,.85)}
.cc-date-chip .cc-date-day{font-family:var(--f-display);font-size:24px;line-height:1;color:#fff;font-weight:400}
.cc-date-chip .cc-date-mo{font-size:9px;letter-spacing:.22em;color:var(--fg-4)}
.cc-date-chip.active .cc-date-mo{color:rgba(255,255,255,.85)}

/* TIME grid */
.cc-time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.cc-time-chip{padding:12px 8px;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--fg-2);cursor:pointer;transition:all .2s;letter-spacing:.04em}
.cc-time-chip:hover{border-color:var(--accent);color:var(--accent-3);background:var(--bg);transform:translateY(-1px);box-shadow:0 4px 12px rgba(4,92,4,.18)}

/* BOOK FORM */
.cc-book-form{display:flex;flex-direction:column;gap:14px}
.cc-book-form .field{display:flex;flex-direction:column;gap:6px}
.cc-book-form label{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--fg-4);font-weight:700;text-transform:uppercase}
.cc-book-form input,.cc-book-form textarea{font-family:var(--f-body);background:var(--bg);border:1px solid var(--line);color:#fff;padding:12px 14px;font-size:14px;border-radius:3px;transition:border-color .2s}
.cc-book-form input:focus,.cc-book-form textarea:focus{border-color:var(--accent);outline:none}
.cc-book-form textarea{resize:vertical;min-height:72px;font-family:var(--f-body)}
.cc-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.cc-row-2{grid-template-columns:1fr}}

/* SUCCESS */
.cc-booker-success{text-align:center;padding:32px 16px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cc-success-mark{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 0 30px var(--accent-glow);animation:cc-pop .35s var(--ease-out)}
@keyframes cc-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.cc-success-h{font-family:var(--f-display);font-size:32px;text-transform:uppercase;letter-spacing:-.005em;color:#fff;line-height:1;margin-top:8px}
.cc-success-when{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--accent-3);background:rgba(4,92,4,.15);border:1px solid var(--accent);padding:12px 18px;border-radius:3px;text-shadow:0 0 6px var(--accent-glow)}
.cc-booker-success p{font-size:14px;color:var(--fg-2);line-height:1.6;max-width:420px;margin:0}
.cc-success-foot{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--fg-4);text-transform:uppercase;margin-top:16px !important}

/* ============================================================
   POLISH FIX PASS 2 (2026-05-28)
   - DEALER PORTAL button: enforce proper line-height + display
     so the bottom border has breathing room from the nav edge
   - Reduce the green glow on inner-page accent text — current
     drop-shadows were too heavy/smudgy, dial back substantially
   ============================================================ */

/* DEALER PORTAL button — fix bottom-clip with stronger box + line-height control */
.btn-portal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;            /* removes extra line-height padding above/below text */
  padding:11px 22px 11px;   /* even vertical padding so the box looks balanced */
  min-height:38px;
  border-radius:2px;        /* slight radius reads more deliberate than 0 */
}
@media (max-width:880px){
  .btn-portal{min-height:34px;padding:9px 14px}
}
@media (max-width:480px){
  .btn-portal{min-height:30px;padding:8px 12px}
}

/* TONE DOWN THE GREEN GLOW on inner pages
   The drop-shadows at 22px were creating a smudged halo. Drop to ~6px
   for a subtle accent that reads as "glow" without bleeding into the text. */
.detail-hero h1 .accent{filter:drop-shadow(0 0 6px rgba(15,160,15,.35))}
.detail-section h2 .accent{filter:none;text-shadow:0 0 8px rgba(15,160,15,.28)}
.detail-cta h2 .accent{filter:drop-shadow(0 0 6px rgba(15,160,15,.35))}

/* Eyebrow text-shadow also reduced */
.detail-eyebrow{text-shadow:0 0 4px rgba(15,160,15,.35)}
.detail-eyebrow::before{box-shadow:0 0 4px rgba(15,160,15,.5)}

/* Detail-hero radial-gradient backdrop was also too strong — soften */
.detail-hero::before{opacity:.55}

/* Detail-stat number — dial back the strong text-shadow */
.detail-stat .detail-stat-v{text-shadow:0 0 8px rgba(15,160,15,.25)}

/* Reviews-band score number — also was glowy; soften */
.reviews-band .reviews-num{text-shadow:0 0 12px rgba(15,160,15,.28)}
.reviews-band .reviews-stars{text-shadow:0 0 4px rgba(15,160,15,.4)}

/* ============================================================
   POLISH FIX PASS 3 (2026-05-28) — ACTUALLY kill the green halo
   Pass 2 only overrode `filter:`, but the real glow came from
   `text-shadow: 0 0 40px var(--accent-glow)` on line 337 (and
   `0 0 20px` on detail-stat-v line 362). Specificity is tied so
   source order wins — these rules go LAST in the file so they
   take effect. We override text-shadow directly here.
   ============================================================ */
.detail-hero h1 .accent{
  text-shadow: 0 0 6px rgba(15,160,15,.30) !important;
  filter: none !important;
}
.detail-section h2 .accent{
  text-shadow: 0 0 5px rgba(15,160,15,.22) !important;
  filter: none !important;
}
.detail-cta h2 .accent{
  text-shadow: 0 0 6px rgba(15,160,15,.30) !important;
  filter: none !important;
}
/* The detail-stat number ALSO had a 20px text-shadow on the original
   .detail-stat-v rule (line 362) that pass 2 missed */
.detail-stat-v,
.detail-stat .detail-stat-v{
  text-shadow: 0 0 6px rgba(15,160,15,.22) !important;
}
/* And the home reviews-band number was glowing too — bring down */
.reviews-band .reviews-num{
  text-shadow: 0 0 10px rgba(15,160,15,.22) !important;
}

/* ============================================================
   PRICING / DETAIL HERO TITLE — keep on one line (2026-05-28)
   At desktop width the h1 font is up to 180px. Titles like
   "CHOOSE YOUR TIER." sit right at the viewport edge, so the
   trailing period would wrap to its own line. wrapWordsAndBind
   turns the period into its own .wscram span, which during
   scramble toggles inline-block — that shift moved the wrap
   point and caused the whole title (and adjacent layout) to
   jitter. Forcing single-line nowrap kills the wrap point and
   the surrounding jitter completely.
   ============================================================ */
.detail-hero h1,
.pricing-header h2,
.work-header h2,
.contact-text h2{
  white-space: nowrap;
  /* If the title still tries to overflow at very narrow widths, let it
     compress via clamp rather than wrap onto a new line. */
  overflow: visible;
}

/* .wscram spans need an extra guarantee — never break inside a word and
   stay aligned to the text baseline even when inline-block kicks in. */
.wscram{
  white-space: nowrap;
  vertical-align: baseline;
}

/* Mobile fallback: at viewports under 640px the title will be too long
   to fit on one line. Allow wrap but center-align so it still looks
   intentional, and keep .wscram nowrap so the scramble doesn't break
   inside a word. */
@media (max-width: 640px){
  .detail-hero h1,
  .pricing-header h2,
  .work-header h2,
  .contact-text h2{
    white-space: normal;
  }
}

/* ============================================================
   DEALER PORTAL BUTTON — DEFINITIVE FIX (2026-05-28 pass 4)
   Brady has flagged this 3+ times. Previous passes set
   line-height:1 + min-height:38 + padding:11px which left no
   room for text descenders inside the bordered box. The button
   was technically sized correctly but the bottom of the text
   was visually touching the bottom border, reading as "cut off."
   
   This pass forces a much taller button with comfortable
   vertical padding so the text floats clearly in the middle,
   and uses !important on every box property so no media query
   or pass-1/2/3 rule can clip it.
   ============================================================ */
.btn-portal{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.5 !important;       /* room for text + descender, no clipping */
  padding: 13px 22px !important;     /* even top/bottom */
  min-height: 46px !important;       /* obviously taller — full breathing room */
  height: auto !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  overflow: visible !important;      /* defeats any parent overflow:hidden chain */
  vertical-align: middle !important;
}

/* Defensively center the actions block in the nav band */
.nav{align-items: center !important}
.nav-actions{
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 880px){
  .btn-portal{
    min-height: 40px !important;
    padding: 10px 16px !important;
    font-size: 10px !important;
  }
}
@media (max-width: 480px){
  .btn-portal{
    min-height: 36px !important;
    padding: 9px 13px !important;
    font-size: 9.5px !important;
  }
}

/* ============================================================
   GLITCH-PROOF ALL SCRAMBLE TITLES — universal pass (2026-05-28)
   The nowrap fix earlier only covered .detail-hero h1 and a few
   page titles. Brady noticed the same glitch on inner section
   headlines (OUR PILLARS, WHAT WE STAND FOR, etc.) which are
   .detail-section h2 — not covered before. Applying nowrap to
   every selector that's in applyScrambleToAllTitles so no title
   anywhere can wrap mid-scramble. Mobile gets wrap allowed back.
   ============================================================ */
/* Full-width section titles — nowrap so scramble doesn't glitch the layout */
.about-motto h2,
.work-header h2,
.pricing-header h2,
.contact-text h2,
.detail-hero h1,
.detail-section h2,
.detail-cta h2{
  white-space: nowrap;
}
/* Card titles (.detail-card h3, .tier-name, .faq-item h4, .process-step h4,
   .service-title) intentionally allowed to wrap at every viewport — these
   sit in fixed-width containers and need to flow onto multiple lines for
   long copy like "SOCIAL MEDIA MANAGEMENT" or "DISCORD SERVER MANAGEMENT". */
@media (max-width: 640px){
  /* On mobile, EVERY title can wrap so it doesn't overflow */
  .about-motto h2,
  .work-header h2,
  .pricing-header h2,
  .contact-text h2,
  .detail-hero h1,
  .detail-section h2,
  .detail-cta h2{
    white-space: normal;
  }
}

/* ============================================================
   DEALER PORTAL — fix pass 4 regression (2026-05-28 pass 5)
   Pass 4 set overflow:visible to defeat possible parent clipping,
   but that exposed the .btn-portal::before hover-slider (a green
   block positioned at translateY(101%) BELOW the button, meant
   to be clipped and slide UP on hover). Result: a stray green
   rectangle dangling below the button. Restore overflow:hidden.
   ============================================================ */
.btn-portal{
  overflow: hidden !important;  /* must hide the ::before slider */
}

/* ============================================================
   DEALER PORTAL — pass 6 — actually small enough to fit
   Pass 4 made the button 46px tall. Nav is 72px. With both the
   topbar (30px above nav) and the marquee directly below, the
   button bottom was being COVERED by the marquee's solid green
   band. Result: looked clipped at the bottom because it WAS
   visually covered. Shrinking back so the whole button fits
   inside the nav band with obvious breathing room on every side.
   ============================================================ */
.btn-portal{
  min-height: 34px !important;
  padding: 8px 18px !important;
  line-height: 1.3 !important;
  font-size: 11px !important;
}
@media (max-width: 880px){
  .btn-portal{
    min-height: 30px !important;
    padding: 7px 14px !important;
    font-size: 10px !important;
  }
}