/* ═══════════════════════════════════════════════════════════
DividendAI — site stylesheet
v2 · 8 September 2026
TYPE, per the "Our fonts" spec on slides 18 and 44 of
DividendAI_PowerPoint template_V4.pptx:
Eyebrow / metadata Roboto Mono Light 300, ALL CAPS, +2pt tracking
Titles Roboto Light 300, sentence case
Subtitles Roboto Regular 400
Body title Roboto Regular 400
Body copy Roboto Light 300
Emphasis Merriweather ExtraBold 800 Italic, inline
The deck's own rationale: "Roboto's clean, structured weight
carries the facts, status, and navigation that keep clients
oriented. Merriweather's bold italic steps in to land the
insight, the provocation, the thing worth remembering."
The wordmark is NOT set in Roboto. It is Graphie SemiBold,
Insight's corporate face, and it ships as outlined paths.
Always use the SVG in /img, never live text.
Naming: DividendAI as one word. Never "Dividend AI".
Domain: dividend.ai
COLOR: --pen is a dark-background color only, 1.86:1 on paper.
Use --pen-dark on light backgrounds.
═══════════════════════════════════════════════════════════ */
:root{
--paper:#FFF9F4;
--ink:#00274B;
--oxidized:#001B34;
--pen:#86BEFF; /* dark backgrounds only */
--pen-dark:#17558F; /* light backgrounds, 7.9:1 on paper */
--ember:#C43A12;
--pencil:#56646F; /* body on light, 5.5:1 */
--pencil-light:#5F6D7A; /* small labels on light, 4.9:1 */
--rule:rgba(0,39,75,0.12);
--rule-strong:rgba(0,39,75,0.22);
--wash:#F4EFE9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:'Roboto',-apple-system,BlinkMacSystemFont,sans-serif;
font-weight:300;background:var(--paper);color:var(--ink);
-webkit-font-smoothing:antialiased;line-height:1.65;
}
/* Emphasis face. 800 ExtraBold Italic per the spec, not 900. */
em.mark{font-family:'Merriweather',Georgia,serif;font-style:italic;font-weight:800}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vh:focus{position:static;width:auto;height:auto;clip:auto;
background:var(--pen);color:var(--ink);padding:12px 20px;display:inline-block}
:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
.band :focus-visible{outline-color:var(--pen-dark)}
/* ── logo ──
The wordmark is Graphie SemiBold and ships outlined. Do not set it
as live text. img/brand-logo.svg is the bare mark for the nav;
img/brand-logo-insight.svg carries the "powered by" tagline.
Both are white artwork, so they need a dark background. */
/* The full lockup is used everywhere, per the logo setup PDF, which documents
no standalone mark. The POWERED BY INSIGHT PARTNERS line is roughly 14% of
the artwork height, so the logo has to run large enough for it to hold up.
Below about 40px the tagline stops being legible. */
.logo-img{height:26px;width:auto;display:block}
.snav .logo-img{height:46px}
.foot .logo-img{height:52px}
.homelink{display:flex;align-items:center;text-decoration:none}
.eyebrow{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
text-transform:uppercase;color:var(--pen)}
.eyebrow.on-light{color:var(--pen-dark)}
/* ── nav ── */
.snav{position:sticky;top:0;z-index:80;background:rgba(0,27,52,.97);
border-bottom:1px solid rgba(134,190,255,.16)}
.snav-in{max-width:1140px;margin:0 auto;padding:0 40px;height:92px;display:flex;
align-items:center;justify-content:space-between;gap:20px}
.snav .wm{font-size:19px;color:var(--paper)}
.snav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.snav-links a{font-size:13.5px;font-weight:400;color:rgba(255,249,244,.72);
padding:9px 13px;white-space:nowrap;text-decoration:none;transition:color .18s;
border-bottom:2px solid transparent}
.snav-links a:hover{color:var(--paper)}
.snav-links a[aria-current="page"]{color:var(--pen);border-bottom-color:var(--pen)}
.snav-links .cta{border:1px solid rgba(134,190,255,.55);color:var(--pen);
margin-left:8px;padding:9px 19px;border-bottom-width:1px}
.snav-links .cta:hover{background:var(--pen);color:var(--ink)}
.snav-links .cta[aria-current="page"]{background:var(--pen);color:var(--ink);
border-bottom-color:rgba(134,190,255,.55)}
/* ── layout ── */
.wrap{max-width:1140px;margin:0 auto;padding:0 40px}
.band{padding:96px 0}
.band+.band{border-top:1px solid var(--rule)}
.band.dark{background:var(--ink);color:var(--paper);border-top:none}
.band.wash{background:var(--wash)}
/* ── hero ── */
.hero{background:var(--ink);color:var(--paper);padding:128px 40px 108px;
position:relative;overflow:hidden}
.hero.short{padding-bottom:84px}
.hero .gb{position:absolute;inset:0;opacity:.55;
background-image:linear-gradient(rgba(134,190,255,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(134,190,255,.07) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 78% 68% at 76% 16%,#000 0%,transparent 70%);
-webkit-mask-image:radial-gradient(ellipse 78% 68% at 76% 16%,#000 0%,transparent 70%)}
.hero-in{max-width:1140px;margin:0 auto;position:relative;z-index:2}
.hero h1{font-weight:300;font-size:clamp(34px,5.4vw,62px);line-height:1.12;
letter-spacing:-1px;max-width:21ch;margin-top:30px}
.hero h1 em.mark{color:var(--pen)}
.hero .said{margin-top:34px;font-size:clamp(18px,2vw,22px);
color:rgba(255,249,244,.78);max-width:44ch;line-height:1.55}
.hero .sub{margin-top:34px;font-size:clamp(15px,1.55vw,17px);
color:rgba(255,249,244,.62);max-width:54ch;line-height:1.72}
.hero .btns{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}
/* ── buttons ── */
.btn{display:inline-block;font-family:'Roboto',sans-serif;font-size:14px;font-weight:400;
padding:14px 28px;border:1px solid;cursor:pointer;background:none;
text-decoration:none;transition:all .18s}
.btn.p{background:var(--pen);border-color:var(--pen);color:var(--ink)}
.btn.p:hover{background:var(--paper);border-color:var(--paper)}
.btn.s{border-color:rgba(134,190,255,.55);color:var(--pen)}
.btn.s:hover{border-color:var(--pen);background:rgba(134,190,255,.1)}
.btn.d{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.d:hover{background:var(--oxidized);border-color:var(--oxidized)}
/* ── type ── */
h2.sec{font-weight:300;font-size:clamp(28px,3.7vw,42px);line-height:1.18;
letter-spacing:-.7px;max-width:26ch}
h2.sec em.mark{color:var(--ink)}
.dark h2.sec em.mark{color:var(--pen)}
p.lede{margin-top:22px;font-size:clamp(17px,1.7vw,20px);line-height:1.65;
color:var(--pencil);max-width:62ch}
.dark p.lede{color:rgba(255,249,244,.75)}
p.txt{font-size:16.5px;line-height:1.85;color:var(--pencil);max-width:68ch;margin-top:20px}
.dark p.txt{color:rgba(255,249,244,.7)}
p.txt strong{color:var(--ink);font-weight:500}
.dark p.txt strong{color:var(--paper)}
/* ── refusals ── */
.refuse{margin-top:44px;display:grid;gap:1px;background:rgba(134,190,255,.22);
border:1px solid rgba(134,190,255,.22)}
.refuse .r{background:var(--ink);padding:28px 30px}
.refuse .r h3{font-size:19px;font-weight:400;color:var(--paper);margin-bottom:9px}
.refuse .r p{font-size:15px;color:rgba(255,249,244,.7);line-height:1.7;max-width:60ch}
/* ── stack ── */
.stack{margin-top:48px;border:1px solid var(--rule-strong)}
.stack .top{background:var(--ink);color:var(--paper);padding:26px 32px;text-align:center}
.stack .top .eyebrow{color:var(--pen);display:block;margin-bottom:9px}
.stack .top h3{font-size:clamp(20px,2.4vw,27px);font-weight:300}
.stack .cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-strong)}
.stack .c{background:var(--paper);padding:32px 30px 34px}
.stack .c .num{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
color:var(--pencil-light);display:block;margin-bottom:14px}
.stack .c h4{font-size:20px;font-weight:400;margin-bottom:8px}
.stack .c .grows{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:1.3px;
text-transform:uppercase;color:var(--pen-dark);margin-bottom:18px}
.stack .c ul{list-style:none}
.stack .c li{font-size:15px;color:var(--pencil);line-height:1.6;padding:11px 0;
border-top:1px solid var(--rule)}
.stack .c li:first-child{border-top:none}
.stack .c li b{color:var(--ink);font-weight:500;display:block;font-size:15.5px;margin-bottom:2px}
.stack .foot{background:var(--wash);padding:20px 32px;border-top:1px solid var(--rule);
font-size:15.5px;color:var(--pencil);text-align:center}
.stack .foot b{color:var(--ink);font-weight:500}
/* ── principle cards ── */
.pgrid{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.pgrid.on-wash{background:var(--rule-strong)}
.pcard{background-color:var(--paper);padding:32px 30px 34px}
.pcard.on-wash{background:var(--wash)}
.pcard .n{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
color:var(--pen-dark);display:block;margin-bottom:15px}
.pcard h3{font-size:19px;font-weight:400;line-height:1.32;margin-bottom:11px}
.pcard p{font-size:15px;color:var(--pencil);line-height:1.75}
/* ── delivery model, the 30 days ── */
.pre{margin-top:40px;padding:22px 26px;background:var(--wash);border-left:2px solid var(--pen-dark)}
.pre b{color:var(--ink);font-weight:500}
.pre span{color:var(--pencil)}
.days{margin-top:8px;border-top:1px solid var(--rule-strong)}
.day{display:grid;grid-template-columns:150px 1fr 300px;gap:32px;padding:28px 0;
border-bottom:1px solid var(--rule);align-items:start}
.day .when{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--pen-dark);line-height:1.6}
.day .when b{display:block;font-size:17px;font-family:'Roboto',sans-serif;font-weight:400;
letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:5px}
.day .what{font-size:15.5px;color:var(--pencil);line-height:1.75}
.day .got{font-size:14.5px;color:var(--pencil);line-height:1.7;
padding-left:26px;border-left:1px solid var(--rule)}
.day .got em{display:block;font-style:normal;font-family:'Roboto Mono',monospace;font-size:10px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--pencil-light);margin-bottom:7px}
.brings{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:36px}
.brings div{border-top:1px solid var(--rule-strong);padding-top:20px}
.brings h4{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--pen-dark);margin-bottom:11px}
.brings p{font-size:15.5px;color:var(--pencil);line-height:1.75}
.measure{margin-top:44px;padding-top:26px;border-top:1px solid var(--rule-strong)}
.measure h4{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--pen-dark);margin-bottom:14px}
.measure ul{display:flex;flex-wrap:wrap;gap:9px;list-style:none}
.measure li{border:1px solid var(--rule-strong);padding:9px 15px;font-size:14px;color:var(--ink)}
@media (max-width:900px){
.day{grid-template-columns:1fr;gap:14px;padding:24px 0}
.day .got{padding-left:0;border-left:none;padding-top:14px;border-top:1px solid var(--rule)}
.brings{grid-template-columns:1fr;gap:26px}
}
/* ── legal pages ── */
.legal{max-width:74ch}
.legal h3{margin-top:46px;font-size:20px;font-weight:500;color:var(--ink)}
.legal h3:first-of-type{margin-top:34px}
.legal p{margin-top:13px;font-size:15.5px;color:var(--pencil);line-height:1.8}
.legal ul{margin-top:13px;list-style:none}
.legal li{position:relative;padding-left:24px;margin-top:9px;font-size:15.5px;
color:var(--pencil);line-height:1.8}
.legal li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;
background:var(--pen-dark)}
.legal .stamp{margin-top:8px;font-family:'Roboto Mono',monospace;font-size:10.5px;
letter-spacing:1.5px;text-transform:uppercase;color:var(--pencil-light)}
/* ── design elements ── */
/* Section icons. Drawn at the same hairline weight as the rules, and they
take their colour from the section so one file works on light and dark. */
.secicon{display:block;width:46px;height:46px;margin-bottom:24px;color:var(--pen-dark)}
.band.dark .secicon,.hero .secicon{color:var(--pen)}
.secicon svg{width:100%;height:100%;display:block;overflow:visible}
/* Corner brackets. Four ticks drawn as background gradients, no extra markup.
Set background-color on the panel, never the `background` shorthand: it
resets background-image and the ticks disappear. */
.brk{
--bl:1px; --bs:18px; --bc:rgba(23,85,143,.55);
background-image:
linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0),
linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0),
linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0),
linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0);
background-repeat:no-repeat;
background-size:
var(--bs) var(--bl),var(--bl) var(--bs), var(--bs) var(--bl),var(--bl) var(--bs),
var(--bs) var(--bl),var(--bl) var(--bs), var(--bs) var(--bl),var(--bl) var(--bs);
background-position:
0 0,0 0, 100% 0,100% 0, 0 100%,0 100%, 100% 100%,100% 100%;
}
.brk.on-dark{--bc:rgba(134,190,255,.45)}
/* Engineering grid, dark bands only. Masked so it fades rather than tiling flat. */
.gridbg{position:relative}
.gridbg::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(134,190,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(134,190,255,.055) 1px,transparent 1px);
background-size:52px 52px;
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);
mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%)}
.gridbg > *{position:relative;z-index:1}
/* Blueprint drawings */
.blueprint{margin-top:40px;border:1px solid var(--rule-strong);background-color:#FFFFFF;
padding:30px 28px}
.blueprint svg{width:100%;height:auto;display:block}
/* ── proof stats ── */
.subhead{margin-top:64px;padding-top:34px;border-top:1px solid var(--rule-strong);
font-size:clamp(19px,2.1vw,23px);font-weight:300;color:var(--ink);letter-spacing:-.3px}
.cases{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
background:var(--rule-strong)}
.case{background-color:var(--paper);padding:28px 26px 30px}
.case .sect{display:block;font-family:'Roboto Mono',monospace;font-size:9.5px;letter-spacing:1.5px;
text-transform:uppercase;color:var(--pencil-light);margin-bottom:12px}
.case h4{font-size:17.5px;font-weight:500;color:var(--ink);line-height:1.3}
.case .figs{margin-top:12px;font-size:15.5px;font-weight:500;color:var(--pen-dark);line-height:1.5}
.case .what{margin-top:12px;font-size:14.5px;color:var(--pencil);line-height:1.7}
@media (max-width:900px){.cases{grid-template-columns:1fr}}
.stats{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:38px 36px}
.stat{border-top:1px solid var(--rule-strong);padding-top:22px}
.stat .fig{display:block;font-size:clamp(34px,4.2vw,50px);font-weight:300;line-height:1;
letter-spacing:-1.2px;color:var(--ink)}
.stat .cap{display:block;margin-top:15px;font-family:'Roboto Mono',monospace;font-size:10.5px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--pencil-light);line-height:1.65}
.stats + .srcnote{margin-top:40px;font-size:13.5px;color:var(--pencil-light);line-height:1.7;
max-width:70ch}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr);gap:32px 28px}}
@media (max-width:560px){.stats{grid-template-columns:1fr;gap:26px}}
/* ── grounds ── */
.grounds{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.grounds li{border:1px solid var(--rule-strong);padding:10px 19px;font-size:15px;color:var(--ink)}
.nots{margin-top:34px;padding-left:22px;border-left:2px solid var(--ember);max-width:52ch}
.nots p{font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:var(--ink)}
/* On a dark band --ink is the background color, so the text has to flip. */
.dark .nots{border-left-color:var(--pen)}
.dark .nots p{color:var(--paper)}
/* ── team ── */
.tgroup{margin-top:60px}
.tgroup h2.grp{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
text-transform:uppercase;color:var(--pencil-light);font-weight:400;
padding-bottom:14px;border-bottom:1px solid var(--rule-strong)}
.tgroup .grpnote{margin-top:22px;font-size:16.5px;color:var(--pencil);
line-height:1.8;max-width:64ch}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 52px}
.member{padding:30px 0;border-bottom:1px solid var(--rule);display:grid;
grid-template-columns:96px 1fr;gap:26px;align-items:start}
.tgrid .member{grid-template-columns:78px 1fr;gap:22px}
.member h3{font-size:20px;font-weight:500;line-height:1.25}
.member .rl{margin-top:5px;font-family:'Roboto Mono',monospace;font-size:11px;
letter-spacing:1.3px;text-transform:uppercase;color:var(--pen-dark)}
.member .bi{margin-top:13px;font-size:15.5px;color:var(--pencil);line-height:1.8;max-width:60ch}
/* Photo slot. Swap the initials div for 
Same dimensions, object-fit keeps the crop centered. */
.ph{width:132px;height:132px;border-radius:50%;background:var(--wash);
border:1px solid var(--rule-strong);display:flex;align-items:center;justify-content:center;
font-family:'Roboto Mono',monospace;font-size:22px;letter-spacing:1px;
color:var(--pencil);overflow:hidden;flex-shrink:0;object-fit:cover}
.tgrid .ph{width:78px;height:78px;font-size:15px}
/* ── profile cards, Nominal pattern ──
Large square photo, name, title, past-experience chips, connect links.
Swap .shot for — object-fit is set. */
.profiles{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:60px 44px}
.prof .shot{width:100%;aspect-ratio:1/1;background:var(--wash);border:1px solid var(--rule);
display:flex;align-items:center;justify-content:center;font-family:'Roboto Mono',monospace;
font-size:clamp(28px,4vw,44px);letter-spacing:3px;color:var(--pencil-light);
object-fit:cover;margin-bottom:24px}
.prof h3{font-size:clamp(21px,2.4vw,26px);font-weight:400;letter-spacing:-.3px;line-height:1.2}
.prof .rl{margin-top:7px;font-family:'Roboto Mono',monospace;font-size:10.5px;
letter-spacing:1.5px;text-transform:uppercase;color:var(--pencil-light);line-height:1.6}
.prof .bi{margin-top:18px;font-size:15.5px;color:var(--pencil);line-height:1.8}
.lbl{font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--pencil-light);display:block;margin:24px 0 11px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid var(--rule-strong);padding:7px 12px;
font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1.3px;
text-transform:uppercase;color:var(--ink);white-space:nowrap}
.connect{display:flex;gap:8px;flex-wrap:wrap}
.connect a{border:1px solid var(--rule-strong);padding:8px 15px;
font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1.3px;
text-transform:uppercase;color:var(--ink);text-decoration:none;transition:all .18s}
.connect a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* ── roster, the compact bordered grid ── */
.roster{margin-top:40px;border:1px solid var(--rule-strong);display:grid;
grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-strong)}
.rc{background:var(--paper);display:grid;grid-template-columns:92px 1fr}
.rc .shot{width:92px;height:100%;min-height:118px;background:var(--wash);
display:flex;align-items:center;justify-content:center;font-family:'Roboto Mono',monospace;
font-size:15px;letter-spacing:1.5px;color:var(--pencil-light);object-fit:cover}
.rc .info{padding:17px 19px 19px}
.rc h3{font-size:16.5px;font-weight:500;line-height:1.25}
.rc .rl{margin-top:5px;font-family:'Roboto Mono',monospace;font-size:9.5px;
letter-spacing:1.2px;text-transform:uppercase;color:var(--pencil-light);line-height:1.5}
.rc .chips{margin-top:11px;gap:5px}
.rc .chips span{padding:4px 8px;font-size:9px;letter-spacing:1.1px}
.rc .connect{margin-top:11px}
.rc .connect a{padding:5px 10px;font-size:9px;letter-spacing:1.1px}
/* ── compact people grid ──
Photo, name, title, LinkedIn. No bio. Used for everyone except the two
founders and the two advisors, who carry full profiles above. */
.people{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}
.teamnote{margin-top:52px;padding-top:28px;border-top:1px solid var(--rule);
font-size:15.5px;color:var(--pencil);line-height:1.75;max-width:66ch}
img.ph{filter:grayscale(100%);object-fit:cover}
.pc .ph{margin-bottom:22px}
@media (max-width:900px){.people{grid-template-columns:repeat(2,1fr);gap:40px 32px}}
@media (max-width:560px){.people{grid-template-columns:1fr;gap:34px}
.ph{width:112px;height:112px;font-size:19px}}
.pc h3{font-size:18.5px;font-weight:500;line-height:1.3}
.pc .rl{margin-top:5px;font-family:'Roboto Mono',monospace;font-size:10.5px;
letter-spacing:1.3px;text-transform:uppercase;color:var(--pen-dark);line-height:1.6}
.pc .bi{margin-top:20px;font-size:14.5px;color:var(--pencil);line-height:1.75}
.pc .lbl{margin:18px 0 9px}
.pc .chips{gap:6px;margin-top:22px}
.pc .chips span{padding:5px 9px;font-size:9px;letter-spacing:1.1px}
.pc .li{margin-top:16px}
.pc .li a{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:1.4px;
text-transform:uppercase;color:var(--pencil-light);text-decoration:none;
border-bottom:1px solid var(--rule-strong);padding-bottom:2px}
.pc .li a:hover{color:var(--pen-dark);border-bottom-color:var(--pen-dark)}
/* Align photo, name, title, bio and tags across each row. Every card spans the
same five parent tracks and places its children explicitly, so a two-line
title or a missing bio leaves that track empty instead of shifting everything
below it out of line. row-gap:0 keeps the parent's 48px gap from applying
inside a card; the gap between rows of cards is still the parent's. */
@supports (grid-template-rows: subgrid){
.pc{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;align-content:start}
.pc .ph{grid-row:1}
.pc h3{grid-row:2;align-self:start}
.pc .rl{grid-row:3;align-self:start}
.pc .bi{grid-row:4;align-self:start}
.pc .chips{grid-row:5;align-self:start}
.pc .li{grid-row:5;align-self:end;margin-top:0}
}
/* LinkedIn on a full profile */
.member .li{margin-top:14px}
.member .li a{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:1.4px;
text-transform:uppercase;color:var(--pencil-light);text-decoration:none;
border-bottom:1px solid var(--rule-strong);padding-bottom:2px}
.member .li a:hover{color:var(--pen-dark);border-bottom-color:var(--pen-dark)}
/* ── careers roles ── */
.roles{margin-top:44px;border-top:1px solid var(--rule-strong)}
.role{padding:28px 0;border-bottom:1px solid var(--rule)}
.role h3{font-size:21px;font-weight:400}
.role p{font-size:15.5px;color:var(--pencil);line-height:1.75;max-width:62ch;margin-top:8px}
/* ── contact form ── */
.cbox{margin-top:44px;border:1px solid var(--rule-strong);padding:44px 44px 48px;max-width:640px}
.cbox label{display:block;font-family:'Roboto Mono',monospace;font-size:10.5px;
letter-spacing:1.6px;text-transform:uppercase;color:var(--pencil-light);
margin-bottom:7px;margin-top:24px}
.cbox label:first-of-type{margin-top:0}
.cbox input,.cbox textarea{width:100%;border:1px solid var(--rule-strong);
background:var(--paper);padding:13px 15px;font-family:'Roboto',sans-serif;
font-size:15.5px;color:var(--ink);font-weight:300}
.cbox textarea{min-height:118px;resize:vertical}
.cbox .priv{margin-top:20px;font-size:13.5px;color:var(--pencil-light);line-height:1.7}
.cbox .btn{margin-top:24px}
/* ── footer ── */
.foot{background:var(--oxidized);color:var(--paper);padding:72px 40px 44px}
.foot-in{max-width:1140px;margin:0 auto}
.foot-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;
padding-bottom:40px;border-bottom:1px solid rgba(134,190,255,.2)}
.foot-top .l{max-width:38ch}
.foot-top .l p{margin-top:20px;font-size:15px;color:rgba(255,249,244,.7);line-height:1.75}
.foot-nav{display:flex;gap:56px;flex-wrap:wrap}
.foot-nav h2{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
text-transform:uppercase;font-weight:400;color:rgba(134,190,255,.8);margin-bottom:15px}
.foot-nav a{display:block;font-size:14.5px;color:rgba(255,249,244,.75);
text-decoration:none;padding:5px 0}
.foot-nav a:hover{color:var(--pen);text-decoration:underline}
.foot-bot{padding-top:26px;display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
.foot-bot a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,249,244,.25)}
.foot-bot a:hover{border-bottom-color:var(--pen)}
font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:1.6px;
text-transform:uppercase;color:rgba(255,249,244,.58)}
/* ═══════════════════════════════════════════════════════════
EDITORIAL COMPONENTS
Type-led alternatives to the bordered grids. Used on index.
The point of these is to stop each section reading as a slide:
no boxes, no repeated eyebrow, fewer background changes.
═══════════════════════════════════════════════════════════ */
/* run-on band: continues the one above with no border or bg change */
.band.runon{padding-top:0;border-top:none}
.band.tight{padding:64px 0}
/* big statement lines, Dirt Labs style. No supporting copy. */
.stmt{max-width:74ch}
.stmt p{font-weight:300;font-size:clamp(21px,2.9vw,33px);line-height:1.35;
letter-spacing:-.4px;padding:26px 0;border-top:1px solid rgba(134,190,255,.18)}
.stmt p:first-child{border-top:none;padding-top:0}
.stmt p em.mark{color:var(--pen)}
.stmt .q{color:rgba(255,249,244,.5)}
/* scrolling marquee. Duplicate the ul contents for a seamless loop. */
.marquee{overflow:hidden;position:relative;padding:34px 0;
border-top:1px solid rgba(134,190,255,.18);border-bottom:1px solid rgba(134,190,255,.18)}
.marquee ul{display:flex;list-style:none;width:max-content;
animation:slide 42s linear infinite}
.marquee li{font-family:'Roboto Mono',monospace;font-size:clamp(15px,1.8vw,21px);
letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,249,244,.62);
padding:0 34px;white-space:nowrap;display:flex;align-items:center;gap:34px}
.marquee li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--pen);
opacity:.7;flex-shrink:0}
/* In the hero the strip runs full bleed and sits flush on the bottom edge,
so the negative margins cancel the hero's own padding. */
.hero .marquee{position:relative;z-index:2;margin:84px -40px -108px}
@media (max-width:900px){.hero .marquee{margin:56px -24px -74px}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.marquee ul{animation:none;flex-wrap:wrap;width:auto;gap:14px 0}
}
/* type-led two column, no borders */
.plain{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.plain .side h3{font-size:clamp(20px,2.2vw,25px);font-weight:400;letter-spacing:-.3px}
.plain .side .grows{margin-top:8px;font-family:'Roboto Mono',monospace;font-size:11px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--pen-dark)}
.dark .plain .side .grows{color:var(--pen)}
.plain .side ul{list-style:none;margin-top:26px}
.plain .side li{font-size:16px;line-height:1.6;padding:14px 0;color:var(--pencil);
border-top:1px solid var(--rule)}
.plain .side li b{display:block;color:var(--ink);font-weight:500;font-size:16.5px;
margin-bottom:3px}
.dark .plain .side li{color:rgba(255,249,244,.66);border-top-color:rgba(134,190,255,.16)}
.dark .plain .side li b{color:var(--paper)}
/* numbered principles, no cards */
.prin{margin-top:8px}
.prin .p{display:grid;grid-template-columns:88px 1fr;gap:34px;padding:34px 0;
border-top:1px solid rgba(134,190,255,.18);align-items:baseline}
.prin .n{font-weight:300;font-size:clamp(32px,4vw,52px);line-height:1;
color:rgba(134,190,255,.42);letter-spacing:-1.5px}
.prin h3{font-weight:400;font-size:clamp(19px,2.2vw,26px);line-height:1.3;
letter-spacing:-.3px;max-width:34ch}
.prin p{margin-top:12px;font-size:16px;line-height:1.8;color:rgba(255,249,244,.66);
max-width:62ch}
/* refusals, type only */
.refuse-plain{margin-top:44px}
.refuse-plain .r{padding:24px 0;border-top:1px solid rgba(134,190,255,.18)}
.refuse-plain .r h3{font-weight:400;font-size:clamp(18px,2vw,23px);letter-spacing:-.2px;
display:inline}
.refuse-plain .r p{display:inline;font-size:clamp(18px,2vw,23px);font-weight:300;
color:rgba(255,249,244,.58);letter-spacing:-.2px}
/* quiet line, on its own */
.quiet{padding:80px 0;text-align:center;border-top:1px solid rgba(134,190,255,.18)}
.quiet p{font-size:clamp(17px,1.9vw,22px);color:rgba(255,249,244,.72);font-weight:300}
.quiet .sub{margin-top:16px;font-size:14.5px;color:rgba(255,249,244,.45)}
/* closing mission restatement */
.closer{padding:104px 0 112px;border-top:1px solid rgba(134,190,255,.18)}
.closer h2{font-weight:300;font-size:clamp(29px,4.4vw,52px);line-height:1.14;
letter-spacing:-1px;max-width:24ch}
.closer h2 em.mark{color:var(--pen)}
.closer.no-rule{border-top:none;padding-top:72px}
.closer h2{max-width:30ch}
.closer .sub{margin-top:22px;font-size:14.5px;color:rgba(255,249,244,.45)}
.closer .btns{margin-top:42px}
/* ── delivery values, Peregrine "Speed / Ease / Outcomes" ── */
.values{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:rgba(134,190,255,.18)}
.values .v{background:var(--ink);padding:32px 30px 34px}
.values .v .lbl{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
text-transform:uppercase;color:var(--pen);display:block;margin-bottom:16px}
.values .v p{font-size:17px;line-height:1.65;color:rgba(255,249,244,.82);font-weight:300}
/* ── phases with a duration and a deliverable ── */
.phases{margin-top:44px}
.phase{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:38px 0;
border-top:1px solid var(--rule-strong);align-items:start}
.phase .when .no{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
text-transform:uppercase;color:var(--pencil-light);display:block}
.phase .when .dur{margin-top:9px;font-weight:300;font-size:clamp(24px,2.8vw,34px);
line-height:1.1;letter-spacing:-.8px;color:var(--ink)}
.phase .when .tag{margin-top:9px;font-family:'Roboto Mono',monospace;font-size:10.5px;
letter-spacing:1.5px;text-transform:uppercase;color:var(--pen-dark)}
.phase h3{font-weight:400;font-size:clamp(20px,2.3vw,26px);letter-spacing:-.3px}
.phase p{margin-top:12px;font-size:16.5px;line-height:1.8;color:var(--pencil);max-width:62ch}
.phase .get{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
font-size:15.5px;color:var(--ink)}
.phase .get b{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:1.5px;
text-transform:uppercase;color:var(--pencil-light);display:block;margin-bottom:5px;
font-weight:400}
.phases .note{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule-strong);
font-size:16.5px;color:var(--pencil);max-width:60ch}
.phases .note b{color:var(--ink);font-weight:500}
/* ── numbered stack, FDE at the top ── */
.layers{margin-top:44px}
.layer{display:grid;grid-template-columns:64px 1fr;gap:28px;padding:26px 0;
border-top:1px solid rgba(134,190,255,.18);align-items:baseline}
.layer .ln{font-family:'Roboto Mono',monospace;font-size:13px;letter-spacing:1.6px;
color:var(--pen);padding-top:4px}
.layer h3{font-weight:400;font-size:clamp(19px,2.1vw,24px);letter-spacing:-.25px}
.layer p{margin-top:10px;font-size:16px;line-height:1.8;color:rgba(255,249,244,.66);
max-width:62ch}
.layer.lead{background:rgba(134,190,255,.07);margin:0 -22px;padding:26px 22px;
border-top-color:rgba(134,190,255,.4)}
/* ── "one solution" equation ──
Reads as an equation rather than a sentence. The two halves stack with the
plus between them, and the two defining terms carry Roboto Medium 500
against the Light 300 base. */
.eq{font-weight:300;max-width:34ch}
.eq .lead{display:block;font-size:clamp(28px,3.7vw,42px);line-height:1.18;
letter-spacing:-.7px;margin-bottom:36px}
.eq .half{display:block;font-size:clamp(20px,2.5vw,29px);line-height:1.32;
letter-spacing:-.4px;color:var(--ink)}
.eq b{font-weight:500}
.eq .plus{display:block;font-size:clamp(26px,3.4vw,40px);line-height:1;
color:var(--pen-dark);margin:20px 0}
.dark .eq .half{color:var(--paper)}
.dark .eq .plus{color:var(--pen)}
/* ── security cards ──
Icons are not included. If an icon set is available, drop a 24px mark
above each h4 and the spacing already allows for it. */
.secgrid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.seccard{background-color:#FFFFFF;border:1px solid var(--rule);padding:28px 26px 30px}
.seccard h4{font-size:17px;font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:11px}
.seccard p{font-size:15px;color:var(--pencil);line-height:1.7}
/* half-heading, used under the equation */
h3.half-h{font-weight:300;font-size:clamp(23px,2.9vw,32px);line-height:1.2;
letter-spacing:-.5px;max-width:30ch}
h3.half-h b{font-weight:500}
/* ── failure modes ── */
.stall{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:40px 52px}
.stall .f h3{font-weight:400;font-size:clamp(18px,2vw,22px);letter-spacing:-.25px;
padding-bottom:12px;border-bottom:1px solid rgba(134,190,255,.22)}
.stall .f p{margin-top:14px;font-size:16px;line-height:1.8;color:rgba(255,249,244,.66);
max-width:44ch}
/* ── diagnostics ── */
.diag{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
background:var(--rule)}
.diag .d{background:var(--paper);padding:30px 28px 32px}
.diag .d .dn{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:2.2px;
color:var(--pen-dark);display:block;margin-bottom:14px}
.diag .d h3{font-weight:400;font-size:20px;letter-spacing:-.2px}
.diag .d .q{margin-top:9px;font-size:16.5px;color:var(--pencil);line-height:1.7}
/* offset: pulls a block off the left edge so the page isn't one column */
.offset{margin-left:auto;max-width:76%}
@media (max-width:900px){.offset{max-width:100%;margin-left:0}}
/* ── responsive ── */
@media (max-width:900px){
.plain{grid-template-columns:1fr;gap:44px}
.prin .p{grid-template-columns:1fr;gap:6px}
.prin .n{font-size:26px}
.quiet{padding:56px 0}
.closer{padding:72px 0 80px}
.values{grid-template-columns:1fr}
.phase{grid-template-columns:1fr;gap:16px}
.layer{grid-template-columns:1fr;gap:4px}
.layer.lead{margin:0;padding:26px 0}
.diag{grid-template-columns:1fr}
.stall{grid-template-columns:1fr;gap:32px}
.secgrid{grid-template-columns:1fr}
.people{grid-template-columns:repeat(2,1fr);gap:40px 28px}
.roster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.people{grid-template-columns:1fr}
.profiles{grid-template-columns:1fr;gap:48px}
.roster{grid-template-columns:1fr}
.rc{grid-template-columns:78px 1fr}
.rc .shot{width:78px}
}
@media (min-width:901px) and (max-width:1140px){
.secgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.stack .cols{grid-template-columns:1fr}
.pgrid{grid-template-columns:1fr}
.tgrid{grid-template-columns:1fr;gap:0}
.snav-in{height:auto;min-height:64px;padding:14px 24px;flex-wrap:wrap}
.snav .logo-img{height:38px}
.snav-links{width:100%;justify-content:flex-start;gap:0}
.snav-links .cta{margin-left:0}
.hero{padding:88px 24px 74px}
.wrap{padding:0 24px}
.band{padding:68px 0}
.foot{padding:56px 24px 36px}
}
@media (max-width:560px){
.member,.tgrid .member{grid-template-columns:1fr;gap:16px}
.cbox{padding:30px 24px 34px}
}
/* ── role rows (careers index) ── */
a.role{display:block;text-decoration:none;color:inherit;transition:background .18s ease,padding .18s ease}
a.role:hover{background:rgba(0,39,75,.035);padding-left:16px;padding-right:16px}
.role-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.role-go{font-size:19px;color:var(--pen-dark);transition:transform .18s ease;flex:none}
a.role:hover .role-go{transform:translateX(5px)}
.role-chips{margin-top:15px}
/* ── job posting ── */
.jmeta{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.jmeta span{border:1px solid rgba(134,190,255,.4);padding:7px 12px;
font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1.3px;
text-transform:uppercase;color:var(--pen);white-space:nowrap}
.jlist{margin-top:26px;max-width:74ch;list-style:none}
.jlist li{position:relative;padding-left:26px;margin-top:15px;
font-size:15.5px;color:var(--pencil);line-height:1.75}
.jlist li::before{content:"";position:absolute;left:0;top:11px;
width:9px;height:1px;background:var(--pen-dark)}
.jlist li strong{color:var(--ink);font-weight:500}
.japply{margin-top:44px;border:1px solid var(--rule-strong);padding:38px 40px 42px;max-width:640px}
.japply h3{font-size:21px;font-weight:400;color:var(--ink)}
.japply p{font-size:15.5px;color:var(--pencil);line-height:1.75;margin-top:10px}
.backlink{display:inline-block;margin-top:34px;font-family:'Roboto Mono',monospace;
font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--pen-dark)}
@media (max-width:560px){
.japply{padding:28px 22px 32px}
.role-h{flex-wrap:wrap;gap:8px}
}
@media print{
.snav{position:static}
.hero,.band.dark,.foot,.stack .top{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}