/* Sarius.com prototype: shared design system.
   Layout idea: a calm sand-and-white editorial canvas; two type voices (heavy Inter statements, Instrument Serif asides);
   accents appear one word or one mark at a time. Single light theme, matching the brand. */
:root{
  --blue:#274FFF; --blue-deep:#1B3AD6; --black:#333333; --ink:#303540; --grey:#6C7C93; --lblue:rgba(26,111,230,.8);
  --sand:#F0ECE4; --sand-2:#FBF9F7; --white:#fff; --line:#E3DED4; --line-2:#D6CFC2;
  --ember:#F2652B; --ember-deep:#B4441A; --ember-tint:#FDE9DF;
  --red:#E5383B; --red-deep:#A8202A; --red-tint:#FCE3E3;
  --green:#2E9E6F; --green-deep:#1D6B4A; --green-tint:#DEF2E8;
  --blue-tint:#DEE3FB;
  --f-stmt:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-voice:'Instrument Serif',Georgia,'Times New Roman',serif;
  --gut:clamp(16px,5vw,64px);
  --eo:cubic-bezier(0.16,1,0.3,1);
  --max:1240px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-stmt);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit;text-wrap:balance}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skiplink{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px;text-decoration:none;font-weight:600}
.skiplink:focus{top:12px}

/* ---------- type ---------- */
.stmt{font-family:var(--f-stmt);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;color:var(--ink)}
.voice{font-family:var(--f-voice);font-style:italic;font-weight:400;letter-spacing:0}
/* Stage 2 critique, change 2: the default H2 is heavy Inter in sentence case. Instrument Serif italic
   is kept for asides, sub-lines and the one line per section meant to land (.land). */
.h2{font-family:var(--f-stmt);font-weight:800;font-size:clamp(30px,3.9vw,50px);line-height:1.04;letter-spacing:-.035em;color:var(--ink)}
.land{font-family:var(--f-voice);font-style:italic;font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:0;color:var(--ink);max-width:28em}
.h3{font-weight:800;font-size:clamp(19px,1.6vw,22px);line-height:1.25;letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:38em}
.muted{color:var(--grey)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);line-height:1.2}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember);flex:none}
.meta{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.prose{max-width:42em}
.prose p+p{margin-top:1em}
em.hl{font-style:normal;color:var(--ember-deep)}

/* ---------- links and buttons ---------- */
.tlink{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:650;text-decoration:none;padding-bottom:3px;color:var(--ink)}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ember);transform:scaleX(.24);transform-origin:left;transition:transform .22s var(--eo)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.tlink .ar{transition:transform .22s var(--eo)}
.tlink:hover .ar{transform:translateX(3px)}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:8px;font:600 15px/1 var(--f-stmt);text-decoration:none;overflow:hidden;isolation:isolate;cursor:pointer;border:0;white-space:nowrap}
.btn-p{background:var(--blue);color:#fff}
.btn-p::before{content:"";position:absolute;inset:0;background:var(--blue-deep);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--eo);z-index:-1}
.btn-p:hover::before,.btn-p:focus-visible::before{transform:scaleX(1)}
.btn-p .ar{transition:transform .2s var(--eo)}
.btn-p:hover .ar{transform:translateX(4px)}
.btn-o{color:var(--ink);border:1.5px solid var(--ink);background:transparent}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-light{color:#fff;border:1.5px solid #fff;background:transparent}
.btn-light:hover{background:#fff;color:var(--ink)}
/* Flat buttons with press feedback (Weeb, 2026-10-15): a tight contact shadow and a 1px press on
   :active. No gradients, inner highlights or glow. The article download button inherits it. */
.btn-p,.btn-o,.btn-light{transition:translate .08s,box-shadow .15s}
.btn-p,.btn-o{box-shadow:0 1px 2px #0000001f}
.btn-light{box-shadow:0 1px 2px #0006}
.btn-p:active,.btn-o:active,.btn-light:active{translate:0 1px;box-shadow:none}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:block;line-height:0;flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav>a,.nav .ddt{font:500 15px/1 var(--f-stmt);color:var(--ink);text-decoration:none;background:none;border:0;padding:10px 12px;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:6px}
.nav>a::after,.nav .ddt::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .18s var(--eo)}
.nav>a:hover::after,.nav .ddt:hover::after,.nav>a[aria-current="page"]::after,.nav>.dd.cur>.ddt::after,.dd.open>.ddt::after{transform:scaleX(1)}
/* header dropdown (Services, Resources): one component, two columns with a rule between */
.dd{position:relative}
.dd::before{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.ddp{position:absolute;left:-12px;top:calc(100% + 10px);width:min(720px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(48,53,64,.28);padding:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s var(--eo),visibility 0s .16s}
.dd.open .ddp{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .2s var(--eo)}
.ddl{display:flex;flex-direction:column;gap:2px;padding-right:12px}
.ddr{border-left:1px solid var(--line);padding-left:12px;min-width:0}
.ddp a{display:block;padding:12px 14px;border-radius:8px;text-decoration:none}
.ddp a:hover,.ddp a:focus-visible{background:var(--sand-2)}
.ddp b{display:block;font-weight:700;font-size:15px;line-height:1.3}
.ddp span{display:block;font-size:13.5px;line-height:1.4;color:var(--grey);margin-top:3px}
.ddk{margin:10px 14px 4px;font:700 11.5px/1.2 var(--f-stmt);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.pills{list-style:none;margin:6px 0 0;padding:0 14px 8px;display:flex;flex-wrap:wrap;gap:6px}
.ddp .pills a{display:inline-block;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.3;background:#fff}
.ddp .pills a:hover,.ddp .pills a:focus-visible{border-color:var(--ink);background:#fff}
.recent{list-style:none;margin:0;padding:0}
.recent b{font-size:14px}
.recent span{font-size:12.5px}
.hdr .btn{margin-left:8px}
.lang{font:500 15px/1 var(--f-stmt);color:var(--blue);text-decoration:none;padding:10px 4px 10px 12px}
.lang:hover{text-decoration:underline}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);border-radius:8px;font:600 14px/1 var(--f-stmt);padding:10px 14px;color:var(--ink);cursor:pointer}
.mnav{display:none}
@media (max-width:980px){
  .nav,.hdr .btn.desk{display:none}
  .burger{display:inline-flex;margin-left:4px}
  .lang{margin-left:auto}
  .mnav{display:block;position:fixed;inset:68px 0 0 0;background:#fff;z-index:39;overflow:auto;padding:24px var(--gut) 48px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .2s var(--eo),visibility 0s .2s}
  .mnav.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .2s var(--eo)}
  .mnav a{display:block;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:20px}
  .mnav .mgrp{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:14px 0;font:700 20px/1.2 var(--f-stmt);color:var(--ink);cursor:pointer;text-align:left}
  .mnav .mgrp::after{content:"+";font-weight:500;font-size:22px;color:var(--grey)}
  .mnav .mgrp[aria-expanded="true"]::after{content:"\2212"}
  .mnav .sub{padding:6px 0 10px;border-bottom:1px solid var(--line)}
  .mnav .sub a{font-weight:500;font-size:17px;padding:10px 0 10px 18px;border-bottom:0;color:var(--ink)}
  .mnav .btn{margin-top:24px;width:100%;justify-content:center;border-bottom:0;font-size:16px;color:#fff}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,8vw,112px)}
.sec-tight{padding-block:clamp(48px,6vw,80px)}
.bg-sand{background:var(--sand)}
.bg-light{background:var(--sand-2)}
.bg-red-tint{background:var(--red-tint)}   /* Scale Ops "Who it's for" (Weeb, 2026-10-14); ink text on it is 10.1:1 */
.bg-ink{background:var(--ink);color:#fff}
.bg-ink .stmt,.bg-ink .h2{color:#fff}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.stack>*+*{margin-top:20px}

/* page opener for inner pages (sized to its content, not the screen) */
.opener{background:var(--sand-2);padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.opener .crumbs{font-size:14px;color:var(--grey);margin-bottom:22px}
.opener .crumbs a{color:var(--grey);text-decoration:none}
.opener .crumbs a:hover{color:var(--ink);text-decoration:underline}
.opener h1{font-size:clamp(44px,7.4vw,108px)}
.opener .aside{font-family:var(--f-voice);font-style:italic;font-size:clamp(24px,3vw,38px);line-height:1.15;margin-top:.45em;max-width:24em}
.opener .lead{margin-top:24px}
.opener .ctas{margin-top:32px}

/* closing band, shared */
.close{background:var(--ink);color:#fff;padding-block:clamp(72px,9vw,120px)}
.close h2{font-size:clamp(44px,7.4vw,104px);color:#fff}
.close h2 .q{color:var(--ember)}
/* pinned by id so no page-level heading colour (critique change 2, .h2/.stmt) can darken it */
.close #close-h{color:#fff}
.close #close-h .q,.close #close-h em{color:var(--ember)}
.close p{color:#C9CED8;max-width:34em;margin:22px 0 32px;font-size:18px}

/* ---------- footer ---------- */
.foot{background:var(--sand);padding-block:64px 28px;font-size:15px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px}
.flogo img{height:26px;width:auto}
.sign{font-family:var(--f-voice);font-style:italic;font-size:16px;line-height:24px;margin:16px 0 18px;max-width:22em}
.fcol h2{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px}
/* Services and Resources headers are links (Weeb, 2026-10-12): same look, a hover that reads as a link */
.fcol h2 a{display:inline;padding:0;color:inherit;text-decoration:none;text-underline-offset:3px}
.fcol h2 a:hover,.fcol h2 a:focus-visible{color:var(--blue);text-decoration:underline}
.fcol a{display:block;text-decoration:none;color:#4A5262;padding-block:2px;line-height:1.45}   /* links about 40% closer (Weeb, 2026-10-14): 25.75px per row, was 32.75px */
.fcol h2 a{line-height:inherit}
.fcol a:hover{color:var(--blue)}
.social{display:flex;gap:16px}
.social a{display:inline-flex;color:var(--ink);text-decoration:none}
.social a:hover,.social a:focus-visible{color:var(--blue)}
.social svg{width:20px;height:20px}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line-2);color:var(--grey);font-size:14px}
.fbot a{text-decoration:none}
.fbot a:hover{text-decoration:underline}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}

/* ---------- review notes (prototype only) ---------- */
.note{border:1.5px dashed var(--ember-deep);background:rgba(253,233,223,.55);border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.5;color:var(--ink);max-width:60em}
.note b.tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ember-deep);border-radius:4px;padding:3px 7px;margin-right:8px;vertical-align:1px}
.note-frame{position:relative;outline:1.5px dashed var(--ember-deep);outline-offset:10px;border-radius:4px}
.note-frame>.note{margin-bottom:22px}
html.notes-off .note{display:none}
html.notes-off .note-frame{outline:0}
.protobar{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;gap:6px;align-items:center;background:var(--ink);color:#fff;border-radius:999px;padding:6px 6px 6px 14px;font:600 12.5px/1 var(--f-stmt);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.protobar a,.protobar button{color:#fff;background:#4A5162;border:0;border-radius:999px;padding:8px 11px;font:inherit;text-decoration:none;cursor:pointer}
.protobar button[aria-pressed="true"]{background:var(--ember);color:#1E1208}

/* ---------- shared bits ---------- */
.reveal-armed{opacity:0}
@media (prefers-reduced-motion:reduce){.reveal-armed{opacity:1}}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:4px 8px;line-height:1.2}
.tag-g{background:var(--green-tint);color:var(--green-deep)}
.tag-r{background:var(--red-tint);color:var(--red-deep)}
.tag-e{background:var(--ember-tint);color:var(--ember-deep)}
/* Resource categories (Weeb, 2026-10-12): label colour (--cat) and section tint (--cat-tint).
   Blue tint #DEE3FB = Sarius Blue's hue at the other tints' lightness (92.7%). */
.cat-blogpost{--cat:var(--blue);--cat-tint:var(--blue-tint)}
.cat-news{--cat:var(--ember-deep);--cat-tint:var(--ember-tint)}
.cat-guide{--cat:var(--green-deep);--cat-tint:var(--green-tint)}
.cat-playbook{--cat:var(--red-deep);--cat-tint:var(--red-tint)}
.cat-whitepaper{--cat:var(--ink);--cat-tint:var(--sand-2)}
/* hover: the label colour darkened slightly (mixed from the palette colour, no new token) */
.cat-blogpost,.cat-news,.cat-guide,.cat-playbook,.cat-whitepaper{--cat-dk:color-mix(in srgb,var(--cat) 82%,#000)}
.tag-cat{background:var(--cat-tint);color:var(--cat)}
.ddp .recent span.cat-lbl{color:var(--cat)}
.tag-n{background:var(--sand);color:var(--ink)}
.chk{list-style:none}
.chk li{position:relative;padding-left:26px;line-height:28px}
.chk li+li{margin-top:10px}
/* the dash is a text glyph (en dash U+2013), not a drawn line: at a non-integer devicePixelRatio
   (browser zoom) a 2px line rounds differently per row and alternate dashes go faint; glyphs are
   antialiased the same at any zoom (Weeb, 2026-10-12). 22px Inter puts it about 12px wide, centred
   on the 28px first line like the old bar. */
.chk li::before{content:"\2013";position:absolute;left:1px;top:-1px;font:600 22px/28px var(--f-stmt);color:var(--ember)}

/* client names, the one moving element on the site */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex;gap:56px;width:max-content;animation:marq 48s linear infinite}
.marq:hover .mtrack{animation-play-state:paused}
.mtrack span{font-weight:800;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em;color:#8A93A3;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* comparison table (ways to work) */
.ttable{width:100%;border-collapse:collapse;font-size:16px}
.ttable th,.ttable td{text-align:left;vertical-align:top;padding:18px 20px 18px 0;border-bottom:1px solid var(--line)}
.ttable thead th{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);border-bottom:2px solid var(--ink)}
.ttable tbody th{font-weight:800;font-size:18px;width:24%}
.tscroll{overflow-x:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .mtrack{animation:none;flex-wrap:wrap;width:auto;gap:12px 36px}
  .marq{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gut)}
  .mtrack span[aria-hidden]{display:none}
}
@media (max-width:700px){
  .ttable thead{display:none}
  .ttable,.ttable tbody,.ttable tr,.ttable th,.ttable td{display:block;width:auto}
  .ttable tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .ttable th,.ttable td{border:0;padding:4px 0}
  .ttable tbody th{width:auto;font-size:20px;margin-bottom:6px}
  .ttable td:last-child{color:var(--grey);font-size:15px}
  .protobar{left:auto;right:10px;font-size:12px;padding:5px 5px 5px 10px}
}