/* Nine Of Spades — shared tokens, reset and page layout.
   Every component (loader, nav, footer) reads its colors and type from these tokens. */
:root{
  --bg:#000000;          /* site background, pure black like the loader */
  --panel:#0e0d0d;       /* dropdown panels */
  --ink:#f4f4f2;         /* white text, same as the loader HUD */
  --dim:rgba(244,244,242,.52);
  --dim-solid:#7f7f7e;   /* --dim flattened over black, for solid fills */
  --faint:rgba(244,244,242,.14);
  --hair:rgba(244,244,242,.07);
  --red:#db2518;         /* brand red, Signal 86 */
  --red-hot:#ff3a26;
  --red-fill:#d42317;    /* brand red nudged a touch deeper wherever white text sits on it (4.7:1, passes WCAG AA) */
  --glow:#1c0402;        /* dark red the footer and loader fade to */
  --paper:#ecebe7;       /* card faces */
  --paper-ink:#0b0a0a;
  --f-display:"Gloock",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-hud:"DotGothic16","JetBrains Mono",ui-monospace,monospace;
  --nav-h:64px;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:calc(var(--nav-h) + 12px);scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-mono);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.menu-open,html.is-intro{overflow:hidden}

.skip{position:fixed;left:12px;top:12px;z-index:200;padding:10px 14px;border-radius:7px;background:var(--ink);color:#000;
  font-size:13px;transform:translateY(-200%);transition:transform .2s ease}
.skip:focus-visible{transform:none;outline:2px solid var(--red);outline-offset:2px}

/* ---------- page (home) ----------
   Section slots follow the homepage plan: hero, services, work, how we work, point of view, FAQ, book a call.
   Copy marked as a slot is still to be written. */
.page{padding-top:var(--nav-h)}
.sec{padding:clamp(64px,10vw,140px) var(--gutter);border-top:1px solid var(--hair)}
.sec:first-child{border-top:0}
.sec-in{max-width:1180px;margin:0 auto;display:grid;gap:22px}
.eb{margin:0;font-family:var(--f-hud);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.sec h1,.sec h2{margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:-.012em;text-wrap:balance}
.sec h1{font-size:clamp(44px,8vw,112px);line-height:.96}
.sec h2{font-size:clamp(34px,5vw,68px);line-height:1}
.lede{margin:0;max-width:58ch;font-size:clamp(14px,1.4vw,16px);color:var(--dim)}
.slot{display:grid;place-items:center;min-height:180px;padding:24px;border:1px dashed var(--faint);border-radius:16px;
  font-family:var(--f-hud);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:center}

.svc{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--faint)}
.svc li{display:grid;gap:6px;padding:20px 20px 22px 0;border-bottom:1px solid var(--hair)}
.svc b{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.15}
.svc span{font-size:13px;color:var(--dim);max-width:44ch}

/* the four suits as an index, the same rows as the four-suits home */
.suits4{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--faint)}
.suits4 li{display:grid;grid-template-columns:28px 46px minmax(0,1.1fr) minmax(0,1fr);align-items:baseline;gap:6px 18px;padding:18px 0;border-bottom:1px solid var(--faint)}
.suits4 .sp{width:16px;height:16px;align-self:center;color:var(--ink)}
.suits4 .r .sp{color:var(--red)}
.suits4 .n{font-family:var(--f-display);font-size:18px;color:var(--dim)}
.suits4 b{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.05}
.suits4 .tl{font-size:13px;color:var(--dim)}
@media (max-width:760px){.suits4 li{grid-template-columns:22px 34px minmax(0,1fr)}.suits4 .tl{grid-column:3}}


.sec a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.foot-wrap{padding:12px}