/* ═══════════════════════════════════════════════════════════════════
   Sliger Bookkeeping — rebrand v2.

   The previous build reproduced the old Lovable site almost exactly:
   dark navy ground, gold CTA, full-bleed night-skyline hero, chrome
   script wordmark. All of it retired here.

   New system: light paper ground, deep petrol as the single accent, an
   editorial serif for display, and the night footage demoted from "the
   page's identity" to one contained panel. Wordmark flattened to solid
   ink — same letterforms, no chrome bevel. Single committed light
   theme, painted explicitly so it holds on any host ground.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ground:#101413;
  --surface:#161B1A;
  --card:#1B2220;
  --raised:#212927;
  --rule:#2B3532;
  --rule-2:#3A4643;

  --ink:#EDF2F0;
  --ink-2:#A9B6B2;
  --ink-3:#7B8985;

  --petrol:#43BFAE;
  --petrol-2:#5FD2C2;
  --petrol-soft:#15302C;
  --petrol-line:#2F6A62;
  --on-petrol:#08211E;

  --night:#0A0D0C;
  --night-2:#141918;
  --night-rule:#252E2C;
  --on-night:#EDF2F0;
  --on-night-2:#96A4A0;

  --paper:var(--ground);
  --paper-2:var(--surface);

  --maxw:1400px;
  --gut:40px;

  --f-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.w{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
@media(max-width:1120px){:root{--gut:32px}}
@media(max-width:760px){:root{--gut:20px}body{font-size:16px}}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--petrol);color:var(--on-petrol);padding:10px 16px;font-weight:600}
.skip:focus{left:8px;top:8px}
a{color:var(--petrol);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,62px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-family:var(--f-body);font-weight:600;font-size:clamp(16px,1.9vw,19px);letter-spacing:-.005em;line-height:1.3}
p{margin:0 0 16px;max-width:66ch}
p:last-child{margin-bottom:0}
strong{font-weight:600}
em{font-style:italic}
.eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--petrol);margin:0 0 16px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);line-height:1.55;max-width:58ch;margin-bottom:0}
.sec-lede{color:var(--ink-2);max-width:62ch;margin-bottom:28px}

.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--petrol);color:var(--on-petrol);
  border:1px solid var(--petrol);font-family:var(--f-body);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:var(--r);transition:background .16s ease}
.btn:hover{background:var(--petrol-2);border-color:var(--petrol-2);text-decoration:none;color:var(--on-petrol)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{background:var(--paper-2);border-color:var(--petrol);color:var(--ink)}
.btn.sm{padding:11px 18px;font-size:14px;width:100%}
.inline-go{font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:7px}
.inline-go::after{content:"\2192";transition:transform .16s ease}
.inline-go:hover::after{transform:translateX(3px)}

header.site{position:sticky;top:0;z-index:80;background:rgba(16,20,19,.88);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule)}
.bar{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.brand img{height:30px;width:auto;display:block}
.brand-sub{font-family:var(--f-mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
nav.desk{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.desk > a,.navtrig{font-family:var(--f-body);font-weight:500;font-size:15px;color:var(--ink-2);
  padding:9px 14px;border:0;background:none;cursor:pointer;border-radius:var(--r);
  display:inline-flex;align-items:center;gap:7px;line-height:1.2}
nav.desk > a:hover,.navtrig:hover{color:var(--ink);text-decoration:none;background:var(--paper-2)}
nav.desk > a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--petrol)}
.caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease}
.navtrig[aria-expanded="true"]{color:var(--ink);background:var(--paper-2)}
.navtrig[aria-expanded="true"] .caret{transform:rotate(-135deg) translate(-2px,-2px)}

.navitem{position:relative}
.megamenu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(940px,92vw);background:var(--card);border:1px solid var(--rule-2);border-radius:var(--r);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:90;
}
.megamenu.narrow{width:min(340px,92vw)}
.navitem:hover .megamenu,.navitem:focus-within .megamenu,
.navtrig[aria-expanded="true"] + .megamenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.mm-in{padding:26px 28px 0}
.mm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px 26px;padding-bottom:22px}
.megamenu.narrow .mm-cols{grid-template-columns:1fr}
.mm-col h3{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--petrol);font-weight:500;margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.mm-col a{display:block;font-size:13.5px;color:var(--ink-2);padding:5px 0;line-height:1.35}
.mm-col a:hover{color:var(--petrol);text-decoration:none}
.mm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;margin:0 -28px;background:var(--paper-2);border-top:1px solid var(--rule);
  border-radius:0 0 var(--r) var(--r)}
.mm-foot a{font-weight:600;font-size:14px}
.mm-foot span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

.cta-sm{flex:0 0 auto;background:var(--petrol);color:var(--on-petrol);font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:var(--r);margin-left:12px}
.cta-sm:hover{background:var(--petrol-2);text-decoration:none;color:var(--on-petrol)}
.burger{display:none;background:none;border:1px solid var(--rule-2);border-radius:var(--r);width:42px;height:38px;
  flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink)}
nav.mnav{display:none;flex-direction:column;padding:8px var(--gut) 22px;border-top:1px solid var(--rule);
  max-height:76vh;overflow-y:auto}
nav.mnav > a{font-weight:500;font-size:16px;color:var(--ink-2);padding:12px 0;border-bottom:1px solid var(--rule)}
nav.mnav a.mcall{color:var(--petrol);font-weight:600;border-bottom:0;padding-top:16px}
.macc{border:0;background:none;border-bottom:1px solid var(--rule);border-radius:0}
.macc summary{padding:12px 0;font-weight:500;font-size:16px;color:var(--ink-2)}
.macc summary::after{color:var(--petrol)}
.macc[open] summary{border-bottom:0}
.macc-in{padding:0 0 14px;display:flex;flex-direction:column;gap:16px}
.macc-in .mm-col a{font-size:14.5px;padding:6px 0}
.macc-all{font-weight:600;font-size:14px;color:var(--petrol)}
@media(max-width:1120px){
  nav.desk,.cta-sm{display:none}
  .burger{display:flex}
  nav.mnav[hidden]{display:none}
  nav.mnav:not([hidden]){display:flex}
}

/* ── load intro: EDGE TO EDGE, no margins ───────────────────────────── */
.intro{
  position:fixed;inset:0;z-index:9999;background:var(--night);
  opacity:1;transition:opacity .7s ease;overflow:hidden;
}
.intro.done{opacity:0;pointer-events:none}
.intro-inner{position:absolute;inset:0;
  background:url("/assets/img/hero-signal-480.jpg") center/contain no-repeat,var(--night)}
.intro-vid{
  position:absolute;inset:0;width:100%;height:100%;
  /* CONTAIN, not cover. The wordmark sits in the right third of the frame, so
     cover crops it off on any window narrower than 16:9 — which is most
     laptop windows and every phone. The overlay behind it is full-bleed dark,
     so the letterbox reads as ground rather than as white sides. */
  object-fit:contain;display:block;background:var(--night);
  opacity:0;transition:opacity .5s ease;
}
.intro-vid.on{opacity:1}
.intro-logo{
  position:absolute;left:50%;bottom:clamp(56px,10vh,120px);transform:translateX(-50%);
  width:clamp(180px,24vw,320px);height:auto;display:block;z-index:2;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.7));
}
.intro-skip{
  position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);z-index:3;
  background:rgba(10,13,12,.55);border:1px solid rgba(237,242,240,.28);border-radius:99px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-night-2);padding:9px 18px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.intro-skip:hover{color:#fff;border-color:rgba(237,242,240,.55)}

/* ── hero: full-bleed skyline, content anchored bottom ──────────────── */
.hero{position:relative;isolation:isolate;border-bottom:1px solid var(--rule);
  min-height:min(84vh,820px);display:flex;flex-direction:column;justify-content:flex-end}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:66% 12%;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,var(--ground) 2%,rgba(16,20,19,.92) 26%,rgba(16,20,19,.42) 58%,rgba(16,20,19,.55) 100%),
    linear-gradient(to right,rgba(16,20,19,.7) 0%,transparent 55%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(52px,8vh,110px) var(--gut) clamp(26px,3.5vh,42px);
  display:flex;flex-direction:column;justify-content:flex-end;flex:1;gap:clamp(26px,5vh,68px)}
.hero-top{display:flex;flex-direction:column}
.hero-btm{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
  gap:clamp(28px,4vw,64px);align-items:end}
.hero-copy{max-width:100%}
.hero h1{margin-bottom:20px;max-width:17ch;color:var(--ink)}
.hero .lede{margin-bottom:0;max-width:54ch;color:var(--ink-2)}
.hero-act{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.hero-act .btn{width:100%}
@media(max-height:860px){
  .hero{min-height:auto}
  /* short viewport: crop entirely from the bottom so the signal stays whole */
  .hero-bg img{object-position:66% 0%}
  .hero-in{padding-top:clamp(36px,5vh,64px);gap:clamp(20px,3vh,34px)}
  .hero h1{font-size:clamp(30px,3.4vw,44px);margin-bottom:14px;max-width:19ch}
  .hero .lede{font-size:16px;line-height:1.5}
  .proof li{padding:12px 16px}
  .proof strong{font-size:16px}
}
@media(max-height:700px){
  .hero-in{padding-top:32px}
  .hero h1{font-size:clamp(27px,2.9vw,37px)}
  .hero .lede{display:none}
}
@media(max-width:900px){
  .hero{min-height:auto}
  .hero-btm{grid-template-columns:1fr;gap:26px;align-items:start}
  .hero-act{flex-direction:row;flex-wrap:wrap}
  .hero-act .btn{width:auto}
  .hero::after{background:linear-gradient(to top,var(--ground) 3%,rgba(16,20,19,.9) 34%,rgba(16,20,19,.6) 100%)}
}

/* the stat rail pinned across the base of the hero */
.hero-rail{position:relative;z-index:2;background:rgba(10,13,12,.72);
  border-top:1px solid var(--rule);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.proof{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--rule)}
.proof li{display:flex;flex-direction:column;gap:2px;padding:18px 20px;background:rgba(10,13,12,.55)}
.proof li:first-child{padding-left:0;background:transparent}
@media(max-width:1100px){.proof{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof li{padding:14px 12px}.proof li:first-child{padding-left:12px}}
.proof strong{font-family:var(--f-display);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.proof strong em{color:var(--petrol)}
.proof span{font-size:12px;color:var(--ink-3);line-height:1.4}

section{padding:clamp(52px,6.5vw,88px) 0}
.phead{padding:clamp(44px,5.5vw,72px) 0 clamp(28px,3.5vw,42px);background:var(--card);border-bottom:1px solid var(--rule)}
.phead h1{margin-bottom:18px;max-width:20ch}
.phead .btn{margin-top:26px}
.phead.narrow h1{max-width:24ch}
.crumbs{padding:12px 0;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.crumbs .w{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--petrol)}
.crumbs span[aria-hidden]{color:var(--rule-2)}

.pain{background:var(--card);border-bottom:1px solid var(--rule)}
.pain h2{max-width:19ch;margin-bottom:32px}
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(40px,5vw,72px)}
.pain-grid p{color:var(--ink-2)}
.pull{font-family:var(--f-display);font-size:clamp(20px,2.5vw,26px);font-weight:600;line-height:1.28;
  color:var(--ink);letter-spacing:-.015em;border-left:2px solid var(--petrol);padding-left:22px;margin:0 0 20px!important}

.scards,.indcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.acards,.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.scard,.indcard,.acard,.pcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .16s ease,box-shadow .16s ease}
.scard:hover,.indcard:hover,.acard:hover,.pcard:hover{border-color:var(--petrol-line);text-decoration:none;
  box-shadow:0 8px 24px -18px rgba(18,33,31,.5)}
.scard h3,.indcard h3{color:var(--ink)}
.acard h2,.pcard h2{font-size:clamp(20px,2.3vw,25px);color:var(--ink)}
.scard p,.indcard p,.acard p,.pcard p{color:var(--ink-2);font-size:14.5px;margin:0;flex:1}
.scard-go{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--petrol)}
.pdate{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

.srow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:34px;padding:30px 0;border-bottom:1px solid var(--rule)}
.srow:last-child{border-bottom:0}
.srow-h h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:8px}
.srow-h h2 a{color:var(--ink)}
.srow-h h2 a:hover{color:var(--petrol);text-decoration:none}
.srow-one{color:var(--ink-3);font-size:14.5px;margin:0}
.srow-b p{color:var(--ink-2);font-size:16px;margin-bottom:12px}
@media(max-width:820px){.srow{grid-template-columns:1fr;gap:12px}}

.wedge{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.wedge-in,.about-in,.sbody-in,.contact-in,.post-in{display:grid;
  grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,76px);align-items:start}
.wedge-in{grid-template-columns:minmax(0,1fr) 250px}
.wedge-copy h2{margin-bottom:22px;max-width:19ch}
.wedge-copy p,.about-copy p,.sbody-main p,.contact-main p{color:var(--ink-2)}
.wedge-fig{margin:0}
.wedge-fig img,.about-side figure img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--rule);display:block;filter:grayscale(.15)}
.wedge-fig figcaption,.about-side figcaption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--ink-3);margin-top:10px;line-height:1.5}
@media(max-width:900px){
  .wedge-in,.about-in,.sbody-in,.contact-in,.post-in{grid-template-columns:1fr}
  .wedge-fig{max-width:210px}
}

.reviews-home{background:var(--card);border-top:1px solid var(--rule)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.rcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px}
.rstars{color:var(--petrol);font-size:14px;letter-spacing:.14em}
.rcard blockquote{margin:0}
.rcard blockquote p{font-size:17px;line-height:1.5;color:var(--ink);margin:0}
.rsvc{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);margin:0}
.rmeta{display:flex;flex-direction:column;gap:1px;margin-top:auto;padding-top:4px}
.rauthor{font-weight:600;font-size:15px;color:var(--ink)}
.rplat{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rreply{border-top:1px solid var(--rule);padding-top:12px}
.rrep-lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--petrol);display:block;margin-bottom:5px}
.rreply p{font-size:14px;color:var(--ink-2);font-style:italic;margin:0}
.more{margin-top:26px}
.rsum{display:flex;gap:34px;flex-wrap:wrap;margin:26px 0 4px;padding-top:22px;border-top:1px solid var(--rule)}
.rsum div{display:flex;flex-direction:column}
.rsum strong{font-family:var(--f-display);font-size:30px;font-weight:500;color:var(--petrol)}
.rsum span{font-size:12.5px;color:var(--ink-3)}
.rask{background:var(--paper-2);border-top:1px solid var(--rule)}
.rask h2{margin:0 0 14px}
.rask h2:nth-of-type(2){margin-top:44px}

.creds-home{background:var(--paper-2);border-top:1px solid var(--rule)}
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.cred{background:var(--card);border:1px solid var(--rule);border-top:2px solid var(--petrol);border-radius:var(--r);padding:20px}
.cred h3{color:var(--ink);margin-bottom:4px}
.cred-iss{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--petrol);display:block;margin-bottom:9px}
.cred p{font-size:14px;color:var(--ink-2);margin-bottom:9px}
.cred a{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}

.chips{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.chips li{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);border:1px solid var(--rule-2);
  border-radius:99px;padding:6px 14px;background:var(--card)}
.areas-list h2{margin:40px 0 18px}
.areas-list h2:first-child{margin-top:0}
.natgrid{list-style:none;margin:0 0 8px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.natgrid li{background:var(--card);padding:20px;display:flex;flex-direction:column;gap:4px}
.natgrid strong{font-family:var(--f-display);font-size:19px;font-weight:500;color:var(--petrol)}
.natgrid span{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.ind-home{background:var(--paper);border-top:1px solid var(--rule)}

.sbody-main h2{margin:38px 0 16px}
.sbody-main h2:first-child{margin-top:0}
.ticks{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:26px;color:var(--ink-2);font-size:16px;max-width:64ch}
.ticks li::before{content:"";position:absolute;left:4px;top:.42em;width:6px;height:11px;
  border:1.6px solid var(--petrol);border-top:0;border-left:0;transform:rotate(42deg)}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.steps li{color:var(--ink-2);font-size:16px;max-width:64ch;padding-left:6px}
.steps li::marker{color:var(--petrol);font-family:var(--f-mono);font-size:14px}
.faqs{display:flex;flex-direction:column;gap:8px}
details{background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
summary{cursor:pointer;padding:15px 18px;font-weight:600;font-size:16px;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-mono);color:var(--petrol);font-size:18px;flex:0 0 auto}
details[open] summary::after{content:"\2013"}
details[open] summary{border-bottom:1px solid var(--rule)}
.ans{padding:15px 18px}
.ans p{color:var(--ink-2);font-size:15.5px;margin:0}
.sbody-side,.about-side,.contact-side{display:flex;flex-direction:column;gap:14px}
.sbody-side{position:sticky;top:86px}
@media(max-width:900px){.sbody-side{position:static}}
.side-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.side-card h3{color:var(--ink);margin-bottom:10px}
.side-card p{font-size:14px;color:var(--ink-2);margin-bottom:14px}
.side-tel{display:block;text-align:center;margin-top:10px;font-family:var(--f-mono);font-size:14px;color:var(--ink-2)}
.side-links{display:flex;flex-direction:column;gap:1px}
.side-links a{font-size:14.5px;color:var(--ink-2);padding:9px 0;border-bottom:1px solid var(--rule)}
.side-links a:last-child{border-bottom:0}
.side-links a:hover{color:var(--petrol);text-decoration:none}
.side-links.wide{flex-direction:row;flex-wrap:wrap;gap:9px}
.side-links.wide a{border:1px solid var(--rule-2);border-radius:99px;padding:8px 16px}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px}
.facts li:last-child{border-bottom:0}
.facts span{color:var(--ink-3);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase}
.facts strong{color:var(--ink);text-align:right}

.about-copy h2{margin:40px 0 18px}
.about-copy h2:first-child{margin-top:0}
.about-side figure{margin:0}
.about-side figure img{max-width:220px}
.bigq{margin:30px 0;padding:24px 26px;background:var(--petrol-soft);border-left:2px solid var(--petrol);border-radius:0 var(--r) var(--r) 0}
.bigq p{font-family:var(--f-display);font-size:clamp(19px,2.4vw,24px);font-weight:600;line-height:1.32;color:var(--ink);margin:0 0 12px}
.bigq cite{font-family:var(--f-mono);font-style:normal;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

.contact-main h2{margin:38px 0 18px}
.contact-main h2:first-child{margin-top:0}
.cmethods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:8px}
.cm{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:4px;transition:border-color .16s ease}
.cm:hover{border-color:var(--petrol);text-decoration:none}
.cm-lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--petrol)}
.cm strong{font-family:var(--f-display);font-size:18px;font-weight:500;color:var(--ink);word-break:break-word}
.cm-note{font-size:12.5px;color:var(--ink-3)}

.casestudy-home{background:var(--paper-2);border-top:1px solid var(--rule)}
.case-note{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);margin-bottom:20px;max-width:60ch;line-height:1.55}
ol.case{list-style:none;margin:0;padding:0;counter-reset:cs;display:flex;flex-direction:column;
  border-left:1px solid var(--rule-2);max-width:74ch}
ol.case li{position:relative;padding:0 0 24px 28px;counter-increment:cs}
ol.case li:last-child{padding-bottom:0}
ol.case li::before{content:counter(cs);position:absolute;left:-11px;top:1px;width:21px;height:21px;border-radius:50%;
  background:var(--petrol);color:var(--on-petrol);font-family:var(--f-mono);font-size:10px;display:flex;align-items:center;justify-content:center}
ol.case li strong{display:block;font-weight:600;font-size:16px;color:var(--ink);margin-bottom:5px}
ol.case li p{font-size:15.5px;color:var(--ink-2);margin:0;max-width:62ch}

.caps{background:var(--paper-2);border-top:1px solid var(--rule)}
.capgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px 40px}
.capcol h3{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);
  font-weight:500;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--rule-2)}
.capcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.capcol li{font-size:14px;color:var(--ink-2);line-height:1.45}
.capcol li a{color:var(--ink-2)}
.capcol li a:hover{color:var(--petrol)}

.post-body h2{margin:36px 0 16px}
.post-body p{color:var(--ink-2);font-size:17px;max-width:64ch}
.authorbox{display:flex;gap:18px;align-items:flex-start;margin-top:34px;padding-top:24px;border-top:1px solid var(--rule)}
.authorbox img{width:86px;height:90px;flex:0 0 auto;border-radius:var(--r);border:1px solid var(--rule);object-fit:cover}
.ab-name{font-weight:600;font-size:16px;color:var(--ink);margin:0 0 6px}
.ab-bio{font-size:14px;color:var(--ink-2);margin:0 0 8px;max-width:58ch}
.ab-meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);margin:0 0 10px}
@media(max-width:520px){.authorbox{flex-direction:column;gap:14px}}
.legal-body h2{margin:32px 0 12px;font-size:clamp(19px,2.1vw,23px)}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:16px}

.band{background:var(--night);color:var(--on-night);border-top:1px solid var(--night-rule)}
.band h2{max-width:20ch;margin-bottom:14px;color:var(--on-night)}
.band p{color:var(--on-night-2);max-width:58ch}
.band-acts{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}
.band .btn{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.band .btn:hover{background:#fff;border-color:#fff;color:var(--night)}
.band .btn.ghost{background:transparent;color:var(--on-night);border-color:var(--night-rule)}
.band .btn.ghost:hover{background:var(--night-2);color:var(--on-night)}
.band-note{font-family:var(--f-mono);font-size:12px;color:var(--on-night-2);margin:0}

footer.site{background:var(--night);color:var(--on-night-2);padding-top:52px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:34px;padding-bottom:40px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fbrand img{height:34px;width:auto;display:block;margin-bottom:16px}
.ftag{font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--on-night);max-width:30ch;margin-bottom:18px}
.ftag span{display:block;font-style:normal;font-family:var(--f-body);color:var(--on-night-2);font-size:14px;margin-top:4px}
.fnap{font-size:14px;color:var(--on-night-2);line-height:1.85;margin-bottom:16px}
.fnap a{color:var(--on-night-2)}
.fnap a:hover{color:#fff}
.fsocial{display:flex;flex-wrap:wrap;gap:7px}
.fsocial a{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2);
  border:1px solid var(--night-rule);border-radius:99px;padding:6px 12px}
.fsocial a:hover{color:#fff;border-color:var(--on-night-2);text-decoration:none}
.fcol h3{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-night);font-weight:500;margin-bottom:14px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fcol a{font-size:14px;color:var(--on-night-2)}
.fcol a:hover{color:#fff}
.fbottom{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  padding:20px var(--gut);border-top:1px solid var(--night-rule);
  font-family:var(--f-mono);font-size:11px;color:var(--on-night-2)}
.fbottom a{color:var(--on-night-2)}
.fbottom a:hover{color:#fff}

.hero-cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
  margin:22px 0 0;max-width:46ch;line-height:1.55}
.hero-cap em{color:var(--ink-2);font-style:italic}

/* ── service categories on the hub ───────────────────────── */
.catblock{padding:0 0 46px}
.catblock:last-child{padding-bottom:0}
.cathead{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;
  padding-bottom:10px;border-bottom:1px solid var(--rule-2)}
.cathead h2{font-size:clamp(21px,2.6vw,28px)}
.catcount{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-left:auto}
.srows section{padding-top:0}

/* ── brand line ─────────────────────────────────────────────
   Lovable set its lead line in a chunky serif. This is the
   opposite register: tight uppercase grotesque in petrol. */
.brandline{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(12px,1.4vw,15px);color:var(--petrol);
  margin:0 0 12px;letter-spacing:.2em;
}

/* ══ MOBILE ══════════════════════════════════════════════════════════
   The micro-label system (mono, .16em tracked, 10–11px) reads fine on a
   desktop but is genuinely hard work on a phone. Everything below raises
   type to a legible floor and grows tap targets to ~44px. */
@media(max-width:760px){
  .eyebrow{font-size:12px;letter-spacing:.14em}
  .brandline{font-size:14px;letter-spacing:.16em}
  .scard-go,.cred-iss,.rplat,.rrep-lbl,.pdate,.capcol h3,.fcol h3,
  .mm-col h3,.facts span,.strip-note,.catcount{font-size:11.5px;letter-spacing:.1em}
  .rsvc,.case-note,.ab-meta,.cm-note,.band-note,.crumbs .w,.fbottom{font-size:12.5px}
  .fsocial a{font-size:11.5px;padding:9px 14px}
  .chips li{font-size:13px;padding:8px 15px}
  .proof strong{font-size:17px}
  .proof span{font-size:12.5px}
  .post-body p,.sbody-main p,.about-copy p,.contact-main p,.pain-grid p{font-size:16.5px}
  .ticks li,.steps li{font-size:16px}
  .scard p,.indcard p,.acard p,.pcard p,.cred p,.side-card p{font-size:15px}

  /* tap targets */
  .side-links a,.fcol a,.mm-col a{padding:12px 0;min-height:44px;display:flex;align-items:center}
  nav.mnav > a,.macc summary{min-height:48px;display:flex;align-items:center}
  .btn{padding:15px 24px;min-height:48px}
  .btn.sm{min-height:46px}
  .burger{width:46px;height:44px}
  .intro-skip{padding:12px 20px;font-size:11.5px}
  .cm{padding:18px}
}
@media(max-width:420px){
  .proof{grid-template-columns:1fr 1fr}
  h1{font-size:clamp(28px,8vw,34px)}
  .hero-act{flex-direction:column}
  .hero-act .btn{width:100%}
}