/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --bg:#0a0a0a;
  --bg-alt:#f4f1ea;        /* warm off-white for light sections */
  --ink:#0a0a0a;
  --ink-soft:#2a2a2a;
  --paper:#f4f1ea;
  --paper-dim:#e8e3d6;
  --line:#1c1c1c;
  --line-soft:rgba(255,255,255,0.08);
  --accent:#e01751;        /* signature red — the "dead pixel" */
  --accent-2:#00ff9d;      /* electric green accent */
  --muted:#8a8a8a;

  --f-display:"Fraunces", ui-serif, Georgia, serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max:1440px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--f-display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
#logo {width: 154px;}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background:var(--accent); color:var(--bg); }

/* Focus-visible accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* =========================================================
   UTILITY — CONTAINER + TYPOGRAPHY
   ========================================================= */
.container{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.75rem;
  font-weight:500;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:0.75em;
}
.eyebrow::before{
  content:"";
  width:2rem; height:1px;
  background:currentColor;
  display:inline-block;
}

.h-display{
  font-family:var(--f-display);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  line-height:0.92;
  letter-spacing:-0.03em;
}
.italic{ font-style:italic; font-weight:400; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.25rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.brand{
  display:flex; align-items:center; gap:0.625rem;
  font-family:var(--f-mono);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:-0.01em;
}
.brand-mark{
  width:28px; height:28px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:2px;
}
.brand-mark span{ background:var(--paper); border-radius:1px; }
.brand-mark span:nth-child(3), .brand-mark span:nth-child(5), .brand-mark span:nth-child(7){ background:var(--accent); }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(9){ opacity:0.4; }

.nav-links{ display:flex; gap:2rem; align-items:center; font-family:var(--f-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.12em; }
.nav-links a{ position:relative; padding:0.25rem 0; color:var(--paper); opacity:0.75; transition:opacity .2s; }
.nav-links a:hover{ opacity:1; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav-links a:hover::after{ transform:scaleX(1); }

.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{ display:flex; align-items:center; gap:0.35rem; }
.nav-caret-btn{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; padding:0; color:var(--paper); opacity:0.75;
}
.nav-caret{ transition:transform .2s ease; }
.nav-dropdown-menu a{
  padding:0.65rem 0.85rem; border-radius:6px;
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em;
  white-space:nowrap; opacity:0.85;
}
.nav-dropdown-menu a:hover{ opacity:1; background:rgba(255,255,255,0.06); }
.nav-dropdown-menu a::after{ display:none; }

/* Hover/focus dropdown is a desktop-only interaction pattern; scoping it above the
   mobile breakpoint stops :focus-within from re-applying these absolute/transform
   rules (which win on specificity) when the mobile accordion caret is focused. */
@media (min-width:821px){
  .nav-dropdown:hover .nav-caret-btn, .nav-dropdown:focus-within .nav-caret-btn{ opacity:1; }
  .nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret{ transform:rotate(180deg); }
  .nav-dropdown-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
    min-width:230px;
    background:transparent; border:1px solid transparent; border-radius:10px;
    padding:0.85rem 0.4rem 0.4rem;
    display:flex; flex-direction:column; gap:0.1rem;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease, border-color .2s ease;
    z-index:50;
  }
  /* The top padding above bridges the visual gap to the toggle so the cursor
     never leaves a hoverable box while moving from "Services" into the menu. */
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
    background:rgba(10,10,10,0.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-color:var(--line-soft);
  }
}
.nav-cta{
  font-family:var(--f-mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:0.7rem 1.1rem;
  border:1px solid var(--paper);
  border-radius:999px;
  background:var(--paper);
  color:var(--bg);
  font-weight:500;
  transition:all .25s ease;
}
.nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
.hamburger{ display:none; width:32px; height:32px; flex-direction:column; justify-content:center; gap:5px; padding:0; }
.hamburger span{ display:block; height:2px; background:var(--paper); transition:transform .3s, opacity .3s; }

@media (max-width:820px){
  .nav-links, .nav-cta{ display:none; }
  .hamburger{ display:flex; }
  /* When the menu is open, drop the backdrop-filter (and disable its transition):
     a filtered ancestor becomes the containing block for its position:fixed
     children, which would otherwise anchor the full-screen menu panel to the
     nav bar instead of the viewport. The transition must be off so the filter
     clears instantly — otherwise the panel stays trapped while it animates out. */
  .nav.mobile-open{ background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; transition:none; }
  .mobile-open .nav-links{
    display:flex; position:fixed; inset:64px 0 0 0; background:var(--bg);
    flex-direction:column; padding:3rem var(--gutter); gap:1.75rem; font-size:1.5rem;
    align-items:flex-start; border-top:1px solid var(--line-soft);
  }
  .mobile-open .nav-cta{ display:inline-block; position:fixed; bottom:2rem; left:var(--gutter); right:var(--gutter); text-align:center; }
  .mobile-open .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-open .hamburger span:nth-child(2){ opacity:0; }
  .mobile-open .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-open .nav-dropdown{ width:100%; }
  .mobile-open .nav-dropdown-toggle{ width:100%; justify-content:space-between; }
  .mobile-open .nav-caret-btn{ width:28px; height:28px; }
  .mobile-open .nav-caret-btn .nav-caret{ width:18px; height:18px; }
  .mobile-open .nav-dropdown-menu{
    display:flex; flex-direction:column;
    position:static; transform:none; margin-top:0; opacity:1; visibility:visible;
    background:none; border:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:0; max-height:0; overflow:hidden; pointer-events:none;
    transition:max-height .3s ease;
  }
  .mobile-open .nav-dropdown.open .nav-dropdown-menu{ max-height:320px; pointer-events:auto; padding-top:0.75rem; }
  .mobile-open .nav-dropdown.open .nav-caret{ transform:rotate(180deg); }
  .mobile-open .nav-dropdown-menu a{ padding:0.55rem 0 0.55rem 1rem; font-size:1.05rem; opacity:0.7; }
}

/* =========================================================
   HERO — THE STATEMENT
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:8rem var(--gutter) 4rem;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  isolation:isolate;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 40%, black 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, black 40%, transparent 85%);
  z-index:-1;
}
.hero-noise{
  position:absolute; inset:0; z-index:-1; opacity:0.25; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
/* The "dead pixels" — flickering pixels across the hero */
.pixels{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.pixel{
  position:absolute; width:8px; height:8px; background:var(--accent); opacity:0;
  animation:pxFlicker 6s infinite;
}
.pixel.green{ background:var(--accent-2); width:6px; height:6px; }
@keyframes pxFlicker{
  0%,100%{ opacity:0; }
  48%{ opacity:0; }
  50%{ opacity:1; }
  52%{ opacity:0; }
  70%{ opacity:0.6; }
  72%{ opacity:0; }
}

.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:auto;
}
.hero-meta{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.hero-meta strong{ color:var(--paper); font-weight:500; }
.hero-meta-right{ text-align:right; }

.hero-headline{
  font-size:clamp(3.2rem, 12.5vw, 13rem);
  margin:2rem 0 1.5rem;
  font-weight:300;
  max-width:16ch;
}
.hero-headline .glitch{
  position:relative;
  display:inline-block;
  color:var(--accent);
  font-weight:900;
  font-style:italic;
}
.hero-headline .glitch::before,
.hero-headline .glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
}
.hero-headline .glitch::before{
  color:var(--accent-2);
  animation:glitchA 4s infinite steps(1);
  clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
}
.hero-headline .glitch::after{
  color:#ffffff;
  animation:glitchB 4s infinite steps(1);
  clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);
}
@keyframes glitchA{
  0%,90%,100%{ transform:translate(0,0); opacity:0; }
  92%{ transform:translate(-3px,0); opacity:1; }
  93%{ transform:translate(2px,1px); }
  94%{ transform:translate(0,0); opacity:0; }
}
@keyframes glitchB{
  0%,88%,100%{ transform:translate(0,0); opacity:0; }
  90%{ transform:translate(3px,-1px); opacity:1; }
  91%{ transform:translate(-2px,0); }
  92%{ transform:translate(0,0); opacity:0; }
}

.hero-sub{
  max-width:48ch;
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  line-height:1.55;
  color:rgba(244,241,234,0.75);
  margin: 2.5rem 0 2.5rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* Primary button — brutalist block */
.btn{
  display:inline-flex; align-items:center; gap:0.75rem;
  font-family:var(--f-mono);
  font-size:0.82rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:500;
  padding:1.1rem 1.6rem;
  border-radius:999px;
  transition:transform .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--paper); }
.btn-primary:hover{ background:var(--paper); color:var(--bg); transform:translateY(-2px); }
.btn-primary svg{ transition:transform .3s ease; }
.btn-primary:hover svg{ transform:translate(4px,-4px); }

.btn-ghost{ border:1px solid rgba(244,241,234,0.3); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper); background:rgba(244,241,234,0.05); }

.hero-bottom{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.hero-bottom strong{ color:var(--paper); font-weight:500; display:block; font-size:1.15rem; letter-spacing:-0.01em; font-family:var(--f-display); text-transform:none; margin-bottom:0.2rem; }
.hero-stats{ display:flex; gap:3rem; flex-wrap:wrap; }
.scroll-hint{ display:flex; align-items:center; gap:0.5rem; animation:bounce 2.5s infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

@media (max-width:720px){
  .hero-top{ flex-direction:column; gap:1rem; }
  .hero-meta-right{ text-align:left; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; }
  .hero-stats{ gap:1.5rem; }
}

/* =========================================================
   MARQUEE — Trust strip
   ========================================================= */
.marquee{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
  background:var(--bg);
  padding:1.25rem 0;
}
.marquee-track{
  display:flex; gap:3rem;
  animation:scroll 40s linear infinite;
  width:max-content;
  font-family:var(--f-mono);
  font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted);
  align-items:center;
}
.marquee-track span{ display:flex; align-items:center; gap:3rem; }
.marquee-track .dot{ width:6px; height:6px; background:var(--accent); display:inline-block; flex-shrink:0; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* =========================================================
   PROBLEM SECTION (light, flipped for impact)
   ========================================================= */
.problem{
  background:var(--paper);
  color:var(--ink);
  padding:8rem var(--gutter);
  position:relative;
}
.problem-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:flex-end;
}
.problem h2{
  font-size:clamp(2.5rem, 6vw, 5.5rem);
  font-weight:300;
  line-height:0.95;
  letter-spacing:-0.035em;
  margin:1.5rem 0 0;
}
.problem h2 em{ font-family:var(--f-display); font-weight:900; font-style:italic; color:var(--accent); }
.problem-body p{
  font-size:1.15rem;
  line-height:1.65;
  max-width:54ch;
  color:var(--ink-soft);
  margin:0 0 1.5rem;
}
.problem-body p:last-of-type {margin-bottom: 0;}
.problem-body p.lede{
  font-size:1.5rem; line-height:1.4; color:var(--ink); margin-bottom:2rem;
  font-weight:400;
}
.problem-body p.lede em{ color:var(--accent); font-style:italic; font-weight:600; }

@media (max-width:900px){
  .problem-grid{ grid-template-columns:1fr; gap:2rem; }
  .problem{ padding:5rem var(--gutter); }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{
  background:var(--bg);
  color:var(--paper);
  padding:8rem var(--gutter) 4rem;
}
.services-head{
  max-width:var(--max); margin:0 auto 4rem;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem;
}
.services-head h2{
  font-size:clamp(2.5rem, 6vw, 5rem);
  font-weight:300; line-height:0.95; letter-spacing:-0.035em; margin:1rem 0 0; max-width:14ch;
}
.services-head h2 em{ font-style:italic; color:var(--accent); font-weight:900; }
.services-head p{ max-width:36ch; color:rgba(244,241,234,0.65); font-size:1.05rem; margin:0; }

.svc-list{ max-width:var(--max); margin:0 auto; border-top:1px solid var(--line-soft); }
.svc-row{
  display:grid;
  grid-template-columns:80px 1fr 2fr auto;
  gap:2rem;
  padding:2.25rem 0;
  border-bottom:1px solid var(--line-soft);
  align-items:center;
  position:relative;
  transition:padding-left .4s ease;
  cursor:pointer;
}
.svc-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--accent);
  transition:width .4s ease;
  z-index:0;
}
.svc-row:hover{ padding-left:1.5rem; }
.svc-row:hover::before{ width:4px; }
.svc-num{ font-family:var(--f-mono); font-size:0.8rem; color:var(--muted); letter-spacing:0.1em; position:relative; z-index:1; }
.svc-title{
  font-size:clamp(1.75rem, 3.5vw, 2.8rem);
  font-weight:300; letter-spacing:-0.02em; line-height:1;
  position:relative; z-index:1;
}
.svc-title em{ font-style:italic; font-weight:900; }
.svc-desc{ color:rgba(244,241,234,0.65); font-size:1rem; line-height:1.55; max-width:52ch; position:relative; z-index:1; }
.svc-arrow{
  width:48px; height:48px;
  border:1px solid rgba(244,241,234,0.2);
  border-radius:50%;
  display:grid; place-items:center;
  transition:all .3s ease;
  position:relative; z-index:1;
  flex-shrink:0;
}
.svc-row:hover .svc-arrow{ background:var(--accent); border-color:var(--accent); transform:rotate(-45deg); }
.svc-arrow svg{ width:18px; height:18px; transition:transform .3s ease; }

@media (max-width:900px){
  .svc-row{ grid-template-columns:60px 1fr auto; grid-template-rows:auto auto; gap:0.5rem 1.25rem; padding:1.75rem 0; }
  .svc-title{ grid-column:2 / 3; }
  .svc-desc{ grid-column:2 / 4; margin-top:0.5rem; font-size:0.95rem; }
  .svc-arrow{ grid-column:3 / 4; grid-row:1 / 2; }
  .services-head{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   PROCESS SECTION
   ========================================================= */
.process{
  background:var(--paper);
  color:var(--ink);
  padding:8rem var(--gutter);
}
.process-head{
  max-width:var(--max); margin:0 auto 5rem;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end;
}
.process-head h2{
  font-size:clamp(2.5rem, 6vw, 5.5rem);
  font-weight:300; line-height:0.95; letter-spacing:-0.035em; margin:1rem 0 0;
}
.process-head h2 em{ font-style:italic; color:var(--accent); font-weight:900; }
.process-head p{ color:var(--ink-soft); font-size:1.1rem; line-height:1.6; max-width:46ch; margin:0; }

.steps{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem;
  counter-reset:step;
}
.step{
  padding:2rem 0;
  border-top:2px solid var(--ink);
  counter-increment:step;
  list-style-type: square;
}
.step-num{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.1em;
  display:flex; align-items:center; gap:0.75rem; color:var(--ink-soft);
}
.step-num::before{ content:"0" counter(step); color:var(--accent); font-weight:700; }
.step h3{
  font-size:1.7rem; font-weight:500; letter-spacing:-0.02em; margin:1.5rem 0 0.75rem; font-style:italic;
}
.step p{ margin:0; color:var(--ink-soft); font-size:0.95rem; line-height:1.55; }

@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .process-head{ grid-template-columns:1fr; gap:1.5rem; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; gap:1rem; }
}

/* =========================================================
   PROOF / QUOTE SECTION
   ========================================================= */
.proof{
  background:var(--bg);
  color:var(--paper);
  padding:10rem var(--gutter);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.proof::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,59,48,0.12), transparent 60%);
  z-index:0;
}
.proof-wrap{ max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.proof blockquote{
  margin:0;
  font-size:clamp(1.75rem, 4.2vw, 3.5rem);
  font-weight:300;
  font-style:italic;
  line-height:1.15;
  letter-spacing:-0.02em;
}
.proof blockquote span{ color:var(--accent); font-weight:500; }
.proof cite{
  font-style:normal;
  font-family:var(--f-mono);
  font-size:0.85rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-top:3rem;
}
.proof cite strong{ color:var(--paper); font-weight:500; display:block; margin-bottom:0.3rem; font-size:0.95rem; }

.stats{
  max-width:var(--max); margin:0 auto; padding-top:5rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;
  border-top:1px solid var(--line-soft); margin-top:6rem;
}
.stat{ text-align:left; }
.stat-num{
  font-family:var(--f-display);
  font-size:clamp(3rem, 7vw, 6rem);
  font-weight:200; line-height:1; letter-spacing:-0.04em;
  font-style:italic;
}
.stat-num em{ color:var(--accent); font-style:normal; font-weight:900; }
.stat-label{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-top:0.75rem; max-width:24ch; }

@media (max-width:720px){
  .stats{ grid-template-columns:1fr; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  background:var(--paper);
  color:var(--ink);
  padding:8rem var(--gutter);
}
.faq-wrap{ max-width:1100px; margin:0 auto; }
.faq-head{ margin-bottom:4rem; }
.faq-head h2{
  font-size:clamp(2.5rem, 6vw, 5.5rem);
  font-weight:300; line-height:0.95; letter-spacing:-0.035em; margin:1rem 0 0;
}
.faq-head h2 em{ font-style:italic; color:var(--accent); font-weight:900; }
.faq-item{
  border-top:1px solid rgba(10,10,10,0.15);
  padding:1.75rem 0;
}
.faq-item:last-child{ border-bottom:1px solid rgba(10,10,10,0.15); }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  width:100%; text-align:left;
  font-family:var(--f-display); font-size:clamp(1.25rem, 2.2vw, 1.7rem); font-weight:400;
  color:var(--ink);
  padding:0;
}
.faq-q:hover{ color:var(--accent); }
.faq-toggle{
  flex-shrink:0;
  width:40px; height:40px; border:1px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; transition:all .3s ease;
}
.faq-toggle span{ position:relative; width:14px; height:14px; display:block; }
.faq-toggle span::before,
.faq-toggle span::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transition:transform .3s ease;
}
.faq-toggle span::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.faq-toggle span::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
.faq-item.open .faq-toggle{ background:var(--ink); color:var(--paper); transform:rotate(90deg); }
.faq-item.open .faq-toggle span::after{ transform:translate(-50%,-50%) scaleY(0); }

.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .5s ease, margin .5s ease;
  color:var(--ink-soft); font-size:1.05rem; line-height:1.6;
}
.faq-item.open .faq-a{ max-height:400px; margin-top:1rem; }
.faq-a p{ margin:0; max-width:80ch; }

/* =========================================================
   CONTACT / LEAD FORM
   ========================================================= */
.contact{
  background:var(--bg);
  color:var(--paper);
  padding:8rem var(--gutter);
  position:relative;
  overflow:hidden;
}
.contact-wrap{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:flex-start; }

.contact-copy h2{
  font-size:clamp(3rem, 8vw, 7rem);
  font-weight:300; line-height:0.9; letter-spacing:-0.04em; margin:1rem 0 2rem;
}
.contact-copy h2 em{ color:var(--accent); font-style:italic; font-weight:900; }
.contact-copy p{ color:rgba(244,241,234,0.7); font-size:1.1rem; line-height:1.6; max-width:42ch; margin:0 0 2.5rem; }

.contact-info{ display:grid; gap:1.25rem; font-family:var(--f-mono); font-size:0.85rem; letter-spacing:0.05em; }
.contact-info a{ color:var(--paper); display:inline-flex; gap:0.75rem; align-items:center; }
.contact-info a:hover{ color:var(--accent); }
.contact-info .label{ color:var(--muted); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.15em; display:block; margin-bottom:0.3rem; }

form{
  display:grid; gap:1.5rem;
  padding:2.5rem;
  background:rgba(244,241,234,0.03);
  border:1px solid var(--line-soft);
  border-radius:2px;
}
.field{ display:grid; gap:0.5rem; }
.field label{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea, .field select{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(244,241,234,0.25);
  color:var(--paper);
  font-family:var(--f-display);
  font-size:1.05rem;
  padding:0.6rem 0;
  transition:border-color .2s ease;
  border-radius:0;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:90px; font-family:var(--f-display); }
.field select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 5l3 3 3-3' stroke='%23f4f1ea' stroke-width='1.5'/></svg>"); background-repeat:no-repeat; background-position:right 0.25rem center; padding-right:2rem; }
.field select option{ background:var(--bg); color:var(--paper); }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.submit-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:0.5rem; }
.submit-row small{ font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }

.form-success{
  display:none;
  text-align:center;
  padding:3rem 1rem;
  font-family:var(--f-display);
}
.form-success.visible{ display:block; }
.form-success h3{ font-size:1.75rem; font-weight:400; font-style:italic; margin:1rem 0; color:var(--accent); }
.form-success p{ color:rgba(244,241,234,0.7); max-width:40ch; margin:0 auto; }
.form-success .check{
  width:64px; height:64px; border:2px solid var(--accent); border-radius:50%;
  display:grid; place-items:center; margin:0 auto;
}

@media (max-width:900px){
  .contact-wrap{ grid-template-columns:1fr; gap:3rem; }
  .field-row{ grid-template-columns:1fr; }
  form{ padding:1.75rem; }
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:var(--bg);
  color:var(--paper);
  padding:5rem var(--gutter) 2rem;
  border-top:1px solid var(--line-soft);
}
.footer-top{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:4rem;
  border-bottom:1px solid var(--line-soft);
}
.footer-brand h3{
  font-size:clamp(2rem, 5vw, 4rem);
  font-weight:300; font-style:italic; line-height:0.95; letter-spacing:-0.03em;
  margin:0 0 1.5rem;
}
.footer-brand h3 em{ font-style:normal; color:var(--accent); font-weight:900; }
.footer-brand p{ color:var(--muted); font-size:0.9rem; max-width:36ch; margin:0; line-height:1.5; }

footer h4{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 1.25rem; }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.6rem; font-size:0.95rem; }
footer ul a{ color:rgba(244,241,234,0.75); transition:color .2s; }
footer ul a:hover{ color:var(--accent); }

.footer-bottom{
  max-width:var(--max); margin:2rem auto 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.footer-socials{ display:flex; gap:1rem; }
.footer-socials a{
  width:36px; height:36px; border:1px solid rgba(244,241,234,0.2); border-radius:50%;
  display:grid; place-items:center; transition:all .25s ease;
}
.footer-socials a:hover{ background:var(--accent); border-color:var(--accent); }
.footer-socials svg{ width:14px; height:14px; }

@media (max-width:820px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:2rem; }
  .footer-brand{ grid-column:1 / -1; }
}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta{
  display:none;
  position:fixed; bottom:1rem; left:1rem; right:1rem; z-index:90;
  padding:1rem 1.25rem;
  background:var(--accent); color:var(--paper);
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:500;
  border-radius:999px; text-align:center;
  box-shadow:0 10px 30px rgba(255,59,48,0.3);
}
@media (max-width:720px){
  .sticky-cta{
    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(150%);
    pointer-events:none;
    transition:opacity .3s ease, transform .35s ease, visibility .3s ease;
  }
  .sticky-cta.sticky-cta--visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
}

/* Reveal-on-scroll */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .pixel{ display:none; }
}

/* =========================================================
   ============== SUBPAGE STYLES ==============
   Distinct layout from the homepage. Dark hero / light stats /
   dark pros / light why / dark vs / light faq / dark contact.
   ========================================================= */

/* ---- Service tabs strip ------------------------------- */
.sp-tabs-wrap{
  border-bottom:1px solid var(--line-soft);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  position:relative; z-index:2;
}
.sp-tabs-wrap::-webkit-scrollbar{ display:none; }
.sp-tabs{
  display:flex; gap:0;
  max-width:var(--max);
  margin:0 auto;
  min-width:max-content;
}
.sp-tab{
  font-family:var(--f-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding:1.25rem 0;
  margin-right:2.5rem;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .2s ease, border-color .2s ease;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.6rem;
}
.sp-tab:last-child{ margin-right:0; }
.sp-tab:hover{ color:var(--paper); }
.sp-tab.active{ color:var(--paper); border-bottom-color:var(--accent); }
.sp-tab .tab-num{ color:var(--accent); font-weight:700; }

/* ---- Dark HERO (different from homepage) -------------- */
.sp-hero{
  position:relative;
  background:var(--bg);
  color:var(--paper);
  padding:5.5rem var(--gutter) 4rem;
  min-height:92vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}
/* Scanline texture (vs homepage's dot grid) */
.sp-hero::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent 3px,
    rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px);
  pointer-events:none; z-index:-1;
}
/* Huge faded service number watermark */
.sp-hero::after{
  content:attr(data-num);
  position:absolute;
  right:-0.04em; top:50%;
  transform:translateY(-46%);
  font-family:var(--f-display);
  font-size:clamp(18rem,46vw,42rem);
  font-weight:900; font-style:italic;
  line-height:0.8; letter-spacing:-0.08em;
  color:rgba(244,241,234,0.03);
  pointer-events:none; user-select:none; z-index:-1;
}
/* Registration crosshair marks (printer's marks) */
.reg-mark{
  position:absolute; width:14px; height:14px;
  pointer-events:none; z-index:1;
}
.reg-mark::before, .reg-mark::after{
  content:""; position:absolute;
  background:rgba(244,241,234,0.25);
}
.reg-mark::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.reg-mark::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.reg-mark.tl{ top:5rem; left:var(--gutter); }
.reg-mark.tr{ top:5rem; right:var(--gutter); }
.reg-mark.bl{ bottom:3.5rem; left:var(--gutter); }
.reg-mark.br{ bottom:3.5rem; right:var(--gutter); }

.sp-hero-inner{
  max-width:var(--max);
  margin:0 auto; width:100%;
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:3rem 0 2rem;
  position:relative; z-index:1;
}
.sp-hero-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:5rem;
  align-items:center;
}
.sp-hero-tag{
  display:inline-flex; align-items:center; gap:0.75rem;
  font-family:var(--f-mono);
  font-size:0.72rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:1.5rem;
}
.sp-hero-tag::before{
  content:""; width:2rem; height:1px;
  background:var(--accent);
}
.sp-hero h1{
  font-family:var(--f-display);
  font-size:clamp(2.6rem,6.5vw,6rem);
  font-weight:300; line-height:0.94;
  letter-spacing:-0.035em;
  margin:0 0 1.75rem; max-width:14ch;
  color:var(--paper);
}
.sp-hero h1 em{ font-style:italic; font-weight:900; color:var(--accent); }
.sp-hero h1 strong{ font-weight:900; font-style:normal; }
.sp-hero-sub{
  font-family:var(--f-display);
  font-size:clamp(1.05rem,1.35vw,1.2rem);
  line-height:1.6;
  color:rgba(244,241,234,0.75);
  max-width:50ch;
  margin:0 0 2.5rem;
}
.sp-hero-actions{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
}
.sp-hero-meta{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--line-soft);
  display:flex; gap:3rem; flex-wrap:wrap;
  font-family:var(--f-mono);
  font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted);
}
.sp-hero-meta strong{
  color:var(--paper);
  font-family:var(--f-display);
  font-style:italic; font-weight:900;
  font-size:1.3rem; display:block;
  letter-spacing:-0.02em; margin-bottom:0.2rem;
  text-transform:none;
}

/* Hero spec card (right side) — 3D mouse-tilt */
.sp-spec{
  border:1px solid rgba(244,241,234,0.18);
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),
      rgba(224,23,81,0.16), transparent 55%) no-repeat,
    rgba(244,241,234,0.025);
  padding:2rem;
  position:relative;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background-position .25s ease;
  will-change:transform;
}
.sp-spec:hover{
  transition:transform .12s ease-out, box-shadow .35s ease;
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(224,23,81,0.22);
}
.sp-spec::before, .sp-spec::after{
  content:""; position:absolute;
  width:14px; height:14px;
  transform:translateZ(42px);
}
.sp-spec::before{
  top:-1px; left:-1px;
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
}
.sp-spec::after{
  bottom:-1px; right:-1px;
  border-bottom:2px solid var(--accent);
  border-right:2px solid var(--accent);
}
.sp-spec-head{ transform:translateZ(28px); transform-style:preserve-3d; }
.sp-spec-rows{ transform:translateZ(18px); transform-style:preserve-3d; }
.sp-spec-row .value{ transform:translateZ(6px); }
@media (hover:none), (prefers-reduced-motion:reduce){
  .sp-spec{ transform:none; }
  .sp-spec::before, .sp-spec::after,
  .sp-spec-head, .sp-spec-rows, .sp-spec-row .value{ transform:none; }
}
.sp-spec-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--f-mono);
  font-size:0.7rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:1rem; margin-bottom:1.25rem;
  border-bottom:1px solid var(--line-soft);
}
.sp-spec-head strong{ color:var(--paper); font-weight:500; }
.sp-spec-rows{ display:grid; gap:0.85rem; }
.sp-spec-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.sp-spec-row .label{
  color:var(--muted);
  text-transform:uppercase; letter-spacing:0.15em;
  font-size:0.68rem; font-family:var(--f-mono);
  flex-shrink:0;
}
.sp-spec-row .value{
  color:var(--paper);
  font-family:var(--f-display);
  font-style:italic; font-weight:500;
  font-size:0.98rem; text-align:right;
  letter-spacing:-0.01em;
}
.sp-spec-row .value em{ color:var(--accent); font-style:italic; }

@media (max-width:900px){
  .sp-hero{ padding:5rem var(--gutter) 3.5rem; min-height:auto; }
  .sp-hero-grid{ grid-template-columns:1fr; gap:3rem; }
  .sp-hero::after{ font-size:clamp(13rem,55vw,22rem); }
  .reg-mark{ display:none; }
}

/* ---- Stats bar (light) -------------------------------- */
.sp-stats{
  background:var(--paper);
  color:var(--ink);
  padding:0 var(--gutter);
  border-top:4px solid var(--accent);
}
.sp-stats-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.sp-stat-box{
  padding:3rem 2rem;
  border-right:1px solid rgba(10,10,10,0.1);
  position:relative;
  opacity:0; transform:translateY(14px);
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.sp-stats.in .sp-stat-box{ opacity:1; transform:translateY(0); }
.sp-stats.in .sp-stat-box:nth-child(1){ transition-delay:.05s; }
.sp-stats.in .sp-stat-box:nth-child(2){ transition-delay:.15s; }
.sp-stats.in .sp-stat-box:nth-child(3){ transition-delay:.25s; }
.sp-stats.in .sp-stat-box:nth-child(4){ transition-delay:.35s; }
.sp-stat-box:first-child{ padding-left:0; }
.sp-stat-box:last-child{ padding-right:0; border-right:none; }
.sp-stat-box .num{
  font-family:var(--f-display);
  font-size:clamp(2.5rem,5vw,4.5rem);
  font-weight:900; font-style:italic;
  line-height:1; letter-spacing:-0.04em;
  color:var(--ink);
  margin-bottom:0.75rem;
}
.sp-stat-box .num em{ color:var(--accent); }
.sp-stat-box .lbl{
  font-family:var(--f-mono);
  font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
  max-width:24ch; line-height:1.45;
}
@media (max-width:820px){
  .sp-stats-grid{ grid-template-columns:repeat(2,1fr); }
  .sp-stat-box{ padding:2rem 1.25rem !important; }
  .sp-stat-box:nth-child(2n){ border-right:none; }
  .sp-stat-box:nth-child(-n+2){ border-bottom:1px solid rgba(10,10,10,0.1); }
}
@media (max-width:480px){
  .sp-stats-grid{ grid-template-columns:1fr; }
  .sp-stat-box{ border-right:none !important; border-bottom:1px solid rgba(10,10,10,0.1); }
  .sp-stat-box:last-child{ border-bottom:none; }
}

/* ---- Pros grid (dark, icon cards) --------------------- */
.sp-pros{
  background:var(--bg);
  color:var(--paper);
  padding:7rem var(--gutter);
}
.sp-pros-head{
  max-width:var(--max);
  margin:0 auto 4rem;
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:2rem;
}
.sp-pros-head h2{
  font-family:var(--f-display);
  font-size:clamp(2.3rem,5vw,4.5rem);
  font-weight:300; line-height:0.95;
  letter-spacing:-0.035em;
  margin:1rem 0 0; max-width:14ch;
}
.sp-pros-head h2 em{ font-style:italic; font-weight:900; color:var(--accent); }
.sp-pros-head > p{
  color:rgba(244,241,234,0.65);
  font-size:1.05rem; line-height:1.6;
  max-width:40ch; margin:0;
}
.sp-pros-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);
}
.sp-pro{
  padding:2.5rem 2rem;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:1rem;
  position:relative;
  transition:background .35s ease;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.sp-pros.in .sp-pro{ opacity:1; transform:translateY(0); }
.sp-pros.in .sp-pro:nth-child(1){ transition-delay:.05s; }
.sp-pros.in .sp-pro:nth-child(2){ transition-delay:.12s; }
.sp-pros.in .sp-pro:nth-child(3){ transition-delay:.19s; }
.sp-pros.in .sp-pro:nth-child(4){ transition-delay:.26s; }
.sp-pros.in .sp-pro:nth-child(5){ transition-delay:.33s; }
.sp-pros.in .sp-pro:nth-child(6){ transition-delay:.40s; }
.sp-pro:hover{ background:rgba(224,23,81,0.055); }
.sp-pro-icon{
  width:44px; height:44px;
  border:1px solid var(--accent);
  display:grid; place-items:center;
  color:var(--accent);
  margin-bottom:0.25rem;
}
.sp-pro-icon svg{ width:22px; height:22px; }
.sp-pro h3{
  font-family:var(--f-display);
  font-size:1.45rem; font-weight:400;
  line-height:1.15; letter-spacing:-0.02em;
  margin:0; color:var(--paper);
}
.sp-pro h3 em{ font-style:italic; font-weight:900; }
.sp-pro p{
  font-size:0.95rem; line-height:1.6;
  color:rgba(244,241,234,0.65);
  margin:0; flex-grow:1;
}
@media (max-width:900px){
  .sp-pros-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:580px){
  .sp-pros-grid{ grid-template-columns:1fr; }
}

/* ---- Why it matters (light) --------------------------- */
.sp-why{
  background:var(--paper);
  color:var(--ink);
  padding:7rem var(--gutter);
}
.sp-why-inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:5rem;
  align-items:flex-start;
}
.sp-why-head h2{
  font-family:var(--f-display);
  font-size:clamp(2.3rem,4.5vw,4.2rem);
  font-weight:300; line-height:0.95;
  letter-spacing:-0.035em;
  margin:1rem 0 1.5rem;
}
.sp-why-head h2 em{ font-style:italic; font-weight:900; color:var(--accent); }
.sp-pull-quote{
  font-family:var(--f-display);
  font-size:1.15rem; font-style:italic;
  line-height:1.5; color:var(--ink-soft);
  border-left:3px solid var(--accent);
  padding-left:1.25rem;
  margin:2rem 0 0; max-width:38ch;
}
.sp-pull-quote cite{
  display:block;
  font-family:var(--f-mono);
  font-style:normal;
  font-size:0.7rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--muted);
  margin-top:1rem;
}
.sp-why-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:0;
}
.sp-why-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.5rem;
  align-items:flex-start;
  padding:1.75rem 0;
  border-bottom:1px solid rgba(10,10,10,0.12);
}
.sp-why-item:first-child{ padding-top:0; }
.sp-why-item:last-child{ border-bottom:none; padding-bottom:0; }
.sp-why-check{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--accent); color:var(--paper);
  display:grid; place-items:center;
  flex-shrink:0;
}
.sp-why-check svg{ width:16px; height:16px; }
.sp-why-item h3{
  font-family:var(--f-display);
  font-size:1.4rem; font-weight:500;
  letter-spacing:-0.02em;
  margin:0.15rem 0 0.5rem;
  color:var(--ink);
}
.sp-why-item h3 em{ font-style:italic; color:var(--accent); }
.sp-why-item p{
  font-size:1rem; line-height:1.6;
  color:var(--ink-soft);
  margin:0; max-width:58ch;
}
@media (max-width:900px){
  .sp-why-inner{ grid-template-columns:1fr; gap:2.5rem; }
}

/* ---- Them vs Us (dark) -------------------------------- */
.sp-vs{
  background:var(--bg);
  color:var(--paper);
  padding:7rem var(--gutter);
}
.sp-vs-head{
  max-width:var(--max);
  margin:0 auto 4rem;
  text-align:center;
}
.sp-vs-head h2{
  font-family:var(--f-display);
  font-size:clamp(2.3rem,5vw,4.5rem);
  font-weight:300; line-height:0.95;
  letter-spacing:-0.035em;
  margin:1rem auto 0;
  max-width:22ch;
}
.sp-vs-head h2 em{ font-style:italic; font-weight:900; color:var(--accent); }
.sp-vs-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line-soft);
}
.sp-vs-col{
  padding:2.5rem 2.5rem 3rem;
}
.sp-vs-col.bad{ border-right:1px solid var(--line-soft); }
.sp-vs-col.good{ background:rgba(224,23,81,0.045); }
.sp-vs-col h3{
  font-family:var(--f-mono);
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 2rem;
  display:flex; align-items:center; gap:0.75rem;
}
.sp-vs-col.good h3{ color:var(--accent); }
.sp-vs-col h3 span{
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid currentColor;
  display:grid; place-items:center;
  font-size:0.85rem; font-weight:700;
  font-family:var(--f-display); font-style:italic;
}
.sp-vs-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1.15rem;
}
.sp-vs-list li{
  font-family:var(--f-display);
  font-size:1.02rem; line-height:1.5;
  color:rgba(244,241,234,0.75);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0.85rem;
  align-items:flex-start;
}
.sp-vs-list li::before{
  content:""; width:12px; height:12px;
  border-radius:50%;
  border:1px solid currentColor;
  margin-top:0.4rem;
}
.sp-vs-col.good .sp-vs-list li{ color:var(--paper); }
.sp-vs-col.good .sp-vs-list li::before{
  border-color:var(--accent);
  background:var(--accent);
}
@media (max-width:820px){
  .sp-vs-grid{ grid-template-columns:1fr; }
  .sp-vs-col.bad{ border-right:none; border-bottom:1px solid var(--line-soft); }
}

/* ---- Related services strip (dark, pre-footer) -------- */
.sp-related{
  background:var(--paper);
  color:var(--bg);
  padding:4rem var(--gutter);
  border-top:1px solid var(--line-soft);
}
.sp-related-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:2rem; flex-wrap:wrap;
}
.sp-related-label{
  font-family:var(--f-mono);
  font-size:0.72rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--bg);
}
.sp-related-links{
  display:flex; gap:1.5rem; flex-wrap:wrap;
  font-family:var(--f-display);
  font-size:1.1rem;
}
.sp-related-links a{
  color:var(--bg);
  font-style:italic;
  border-bottom:1px solid var(--accent);
  padding-bottom:0.2rem;
  transition:color .2s ease, border-color .2s ease;
}
.sp-related-links a:hover{
  color:var(--accent);
  border-bottom-color:var(--bg);
}