@font-face{font-family:'Space Grotesk';src:url('/brand/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/brand/fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/brand/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/brand/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/brand/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/brand/fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#07080a; --bg-2:#0c0e12; --bg-3:#12151b;
  --ink:#f2f3f5;
  --ink-2:rgba(242,243,245,.78);
  --ink-3:rgba(242,243,245,.56);
  --line:rgba(242,243,245,.10);
  --line-2:rgba(242,243,245,.20);
  --cyan:#7fd4ff;
  --cyan-dim:rgba(127,212,255,.28);

  --display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --cut-s:8px; --cut-m:12px; --cut-l:18px;
  --container:1200px;
}

/* ============================================================================
   Bunker Corporation — corporate site
   ----------------------------------------------------------------------------
   THE CROSS-SECTION. The group's own sentence is "we build the ground
   everything stands on", so the home page is a descent: surface, then levels.
   Each level is a different composition, drawn in the language of an
   engineering drawing — hairline grid, dimension lines, registration marks,
   one cold emissive used as measurement light, never as wash.

   Rules held here:
   1. No two consecutive sections share a layout.
   2. The mark appears once per page at size; elsewhere it is a 20px sigil.
   3. Nothing renders under 11px at any width (.72rem = 11.52px is the floor).
   4. Motion is a reveal and a divider; both switch off under reduced-motion.
   ========================================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;font-size:1rem}
::selection{background:rgba(127,212,255,.3);color:#fff}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover,a:focus-visible{color:var(--cyan)}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
img,svg{max-width:100%;height:auto;display:block}
strong{font-weight:600}
code,.mono{font-family:var(--mono);font-size:.86em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:absolute;left:-999px;top:0;background:var(--cyan);color:#000;padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.wrap-wide{max-width:1520px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}

/* --- drawing surface: hairline grid + paper grain ------------------------ */
.drawing{position:relative;isolation:isolate}
.drawing::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(242,243,245,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(242,243,245,.045) 1px,transparent 1px),
    linear-gradient(to right,rgba(242,243,245,.018) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(242,243,245,.018) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 30%,transparent 100%)}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- masthead ------------------------------------------------------------ */
.mast{position:sticky;top:0;z-index:20;background:rgba(7,8,10,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mast .wrap-wide{display:flex;align-items:center;gap:1.5rem;min-height:64px;flex-wrap:wrap;padding-block:.5rem}
.mast .home{display:flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none;font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem}
.mast .home img{height:20px;width:auto}
.mast nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:.25rem 1.4rem}
.mast nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;padding:.6rem 0;min-height:24px;display:inline-flex;align-items:center;position:relative}
.mast nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.35rem;height:1px;background:var(--cyan);transition:right .25s}
.mast nav a:hover::after,.mast nav a:focus-visible::after,.mast nav a[aria-current="page"]::after{right:0}
.mast nav a[aria-current="page"],.mast nav a:hover,.mast nav a:focus-visible{color:var(--ink)}
@media (max-width:700px){.mast nav{margin-left:0;width:100%;gap:.1rem 1.1rem}}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,5rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.9rem)}
h3{font-size:1.15rem;line-height:1.3}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem;display:flex;align-items:center;gap:.8rem}
.kicker::before{content:"";width:1.6rem;height:1px;background:var(--cyan)}
p{max-width:66ch}
.lead{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.45;color:var(--ink-2);max-width:44ch}
.muted{color:var(--ink-3)}
.level{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;gap:1rem;align-items:center}
.level b{color:var(--cyan);font-weight:400}

/* --- reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* =========================================================================
   LEVEL 00 — SURFACE (hero)
   ========================================================================= */
.surface{min-height:calc(100svh - 64px);display:grid;grid-template-rows:1fr auto;border-bottom:1px solid var(--line)}
.surface .stage{display:grid;place-items:center;text-align:center;padding:clamp(48px,8vw,120px) 0 clamp(32px,5vw,64px)}
.surface .draft{position:relative;width:min(560px,86vw);margin:0 auto 2.4rem}
.surface .draft svg{width:100%;height:auto}
@media (max-width:900px){.surface .draft text{display:none}}
.surface h1{display:flex;flex-direction:column;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(2rem,7.2vw,6rem);line-height:.95}
.surface h1 span:last-child{color:var(--ink-2)}
.surface .lead{margin:1.75rem auto 0;max-width:48ch}
.surface .strip{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.surface .strip > div{padding:1.1rem clamp(16px,2.5vw,32px);border-right:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.surface .strip > div:last-child{border-right:0}
.surface .strip b{display:block;color:var(--ink);font-weight:400;margin-bottom:.15rem;letter-spacing:.06em}
@media (max-width:760px){.surface .strip{grid-template-columns:1fr 1fr}.surface .strip > div:nth-child(2){border-right:0}.surface .strip > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* =========================================================================
   LEVEL 01 — THE CUT (two divisions, full-bleed split)
   ========================================================================= */
.cut{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);position:relative}
.cut::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-2);z-index:2}
.half{position:relative;overflow:hidden;padding:clamp(48px,7vw,112px) clamp(20px,5vw,72px);min-height:min(70svh,640px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;text-decoration:none;color:inherit}
.half .wm{position:absolute;right:-6%;top:8%;height:72%;width:auto;opacity:.06;z-index:-1;transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.half:hover .wm,.half:focus-visible .wm{opacity:.12;transform:translateY(-2%)}
.half .level{margin-bottom:auto}
.half h2{font-size:clamp(1.9rem,3.8vw,3.2rem);margin-top:2.5rem}
.half .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:.6rem 0 1.2rem}
.half p{color:var(--ink-2);max-width:40ch}
.half .go{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;min-height:44px}
.half .go::after{content:"\2192";transition:transform .25s}
.half:hover .go::after,.half:focus-visible .go::after{transform:translateX(6px)}
.half:hover,.half:focus-visible{color:inherit;background:var(--bg-2)}
.half:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
@media (max-width:760px){.cut{grid-template-columns:1fr}.cut::before{display:none}.half{min-height:0;border-bottom:1px solid var(--line)}.half:last-child{border-bottom:0}}

/* =========================================================================
   LEVEL 02 — SCHEMATIC (structure as a drawing)
   ========================================================================= */
.schem{padding-block:clamp(56px,8vw,120px);border-bottom:1px solid var(--line)}
.schem .intro{display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem;align-items:end;margin-bottom:clamp(32px,5vw,64px)}
.schem .intro p{color:var(--ink-2)}
.schem figure{border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,14,18,.6),rgba(7,8,10,0));padding:clamp(12px,2vw,28px)}
.schem svg{width:100%;height:auto;font-family:var(--mono)}
.schem svg text{fill:var(--ink);font-size:13px;letter-spacing:.04em}
.schem svg .lbl{fill:var(--ink-3);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.schem svg .nm{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.02em}
.schem svg .ln{stroke:rgba(242,243,245,.28);stroke-width:1;fill:none}
.schem svg .bx{fill:rgba(12,14,18,.9);stroke:rgba(242,243,245,.22)}
.schem svg .bx.root{stroke:var(--cyan)}
.schem svg .dim{stroke:var(--cyan);stroke-width:1;fill:none;opacity:.7}
.schem svg .soon{fill:var(--ink-3);font-size:11.5px;letter-spacing:.12em}
.schem svg a{cursor:pointer}
.schem svg a:hover .nm,.schem svg a:focus .nm{fill:var(--cyan)}
.schem figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-3);margin-top:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem}
.schem .mobile-tree{display:none}
@media (max-width:1000px){.schem figure{display:none}.schem .mobile-tree{display:block}}
@media (max-width:760px){.schem .intro{grid-template-columns:minmax(0,1fr)}}

.tree{list-style:none;font-size:.95rem}
.tree ul{list-style:none;margin:.35rem 0 .5rem .9rem;padding-left:1rem;border-left:1px solid var(--line-2)}
.tree li{padding:.3rem 0}
.tree .tname{font-family:var(--display);font-weight:600;letter-spacing:.02em}
.tree .trole{color:var(--ink-3)}

/* =========================================================================
   LEVEL 03 — SPEC SHEET (the standard, in display type)
   ========================================================================= */
.spec-sheet{border-bottom:1px solid var(--line)}
.spec-sheet .head{padding:clamp(48px,7vw,96px) 0 clamp(24px,4vw,48px);display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.spec-sheet ol{list-style:none;counter-reset:spec;border-top:1px solid var(--line)}
.spec-sheet li{counter-increment:spec;display:grid;grid-template-columns:6rem 1fr 1fr;gap:1.5rem clamp(16px,3vw,48px);padding:clamp(24px,3.5vw,44px) 0;border-bottom:1px solid var(--line);align-items:start}
.spec-sheet li::before{content:"0" counter(spec);font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3.4rem);line-height:1;color:var(--cyan);opacity:.9}
.spec-sheet li h3{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.05;letter-spacing:-.015em}
.spec-sheet li p{color:var(--ink-2)}
.spec-sheet li .check{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin-top:.8rem;line-height:1.6}
.spec-sheet li .check b{color:var(--cyan);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;display:block;margin-bottom:.25rem}
.spec-sheet li:last-child{border-bottom:0}
@media (max-width:860px){.spec-sheet li{grid-template-columns:4rem 1fr}.spec-sheet li > p{grid-column:2}}
@media (max-width:520px){.spec-sheet li{grid-template-columns:1fr}.spec-sheet li > p{grid-column:1}}

/* =========================================================================
   LEVEL 04 — THE VOICE (pull quote from the letter)
   ========================================================================= */
.voice{padding-block:clamp(72px,11vw,160px);border-bottom:1px solid var(--line);text-align:center}
.voice blockquote{max-width:30ch;margin:0 auto;font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.6vw,3rem);line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.voice blockquote::before{content:"\201C";color:var(--cyan)}
.voice blockquote::after{content:"\201D";color:var(--cyan)}
.voice cite{display:block;margin-top:2rem;font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.voice .go{display:inline-flex;align-items:center;min-height:44px;margin-top:1.2rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em}

/* =========================================================================
   LEVEL 05 — RECORD (updates as a horizontal timeline)
   ========================================================================= */
.record{padding-block:clamp(48px,7vw,96px);border-bottom:1px solid var(--line)}
.record .head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.record .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:0;overflow-x:auto;scroll-snap-type:x mandatory;border-top:1px solid var(--line-2);padding-bottom:.5rem;scrollbar-width:thin}
.record .tick{scroll-snap-align:start;padding:1.5rem clamp(16px,2vw,28px) 0 0;position:relative;border-right:1px solid var(--line);margin-right:clamp(16px,2vw,28px)}
.record .tick::before{content:"";position:absolute;top:-1px;left:0;width:10px;height:10px;border:1px solid var(--cyan);background:var(--bg);transform:translateY(-50%)}
.record time{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--cyan)}
.record h3{margin:.6rem 0 .5rem;font-size:1.05rem}
.record p{color:var(--ink-2);font-size:.93rem}
.record .where{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:.6rem}

/* =========================================================================
   COLOPHON (footer)
   ========================================================================= */
footer{padding-block:clamp(48px,6vw,80px) 2.5rem;position:relative;overflow:hidden}
footer .wrap-wide{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem clamp(16px,2.5vw,40px)}
footer .fbrand{grid-column:1/5}
footer .fbrand img{height:56px;width:auto;margin-bottom:1.25rem;opacity:.9}
footer .fbrand .wm{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:1rem}
footer .fbrand p{color:var(--ink-3);font-size:.9rem;margin-top:.8rem;max-width:36ch}
footer .fcol{grid-column:span 2}
footer .fcol h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:.7rem}
footer .fcol a{display:block;font-size:.92rem;text-decoration:none;color:var(--ink-2);padding:.35rem 0;min-height:24px}
footer .fcol a:hover,footer .fcol a:focus-visible{color:var(--cyan)}
footer .flegal{grid-column:1/13;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-3);border-top:1px solid var(--line);padding-top:1.25rem;margin-top:1rem;max-width:none;line-height:1.7}
@media (pointer:coarse){footer .fcol a{padding:.6rem 0;min-height:44px;display:flex;align-items:center}}
@media (max-width:900px){footer .fbrand{grid-column:1/13}footer .fcol{grid-column:span 4}}
@media (max-width:560px){footer .fcol{grid-column:span 6}}

/* =========================================================================
   INNER PAGES — each its own logic
   ========================================================================= */
.page-head{padding-block:clamp(56px,9vw,120px) clamp(32px,5vw,64px);border-bottom:1px solid var(--line)}
.page-head .lead{margin-top:1.25rem}
.page-head .level{margin-bottom:1.5rem}
.section{padding-block:clamp(48px,7vw,96px);border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}

/* /group — dossier: sticky index left, sections right */
.dossier{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:2rem clamp(24px,4vw,64px)}
.dossier .index{position:sticky;top:88px;align-self:start;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}
.dossier .index a{display:block;color:var(--ink-3);text-decoration:none;padding:.45rem 0;border-bottom:1px solid var(--line);min-height:24px}
.dossier .index a:hover,.dossier .index a:focus-visible{color:var(--ink)}
.dossier .index a span{color:var(--cyan);margin-right:.8rem}
.dossier .entry{padding-bottom:clamp(40px,6vw,80px);margin-bottom:clamp(40px,6vw,80px);border-bottom:1px solid var(--line)}
.dossier .entry:last-child{border-bottom:0;margin-bottom:0}
.dossier .entry h2{margin-bottom:1.25rem}
.dossier .entry p+p{margin-top:1rem}
.dossier .entry p+.tablewrap,.dossier .entry p+dl{margin-top:1.5rem}
@media (max-width:860px){.dossier{grid-template-columns:minmax(0,1fr)}.dossier .index{position:static;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;border-bottom:1px solid var(--line);padding-bottom:1rem}.dossier .index a{border-bottom:0}}

table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;vertical-align:top;padding:.85rem .75rem .85rem 0;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
tr:last-child td{border-bottom:0}
td .name{font-family:var(--display);font-weight:600;letter-spacing:.02em}
td a{white-space:nowrap}
.status{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.status.live{color:var(--cyan)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){table{font-size:.9rem}th,td{padding:.7rem .6rem .7rem 0}}

dl.spec{display:grid;grid-template-columns:fit-content(15rem) minmax(0,1fr);gap:.6rem 1.5rem}
dl.spec dt,dl.spec dd{overflow-wrap:anywhere}
dl.spec dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:.25rem}
dl.spec dd{color:var(--ink-2)}
@media (max-width:520px){dl.spec{grid-template-columns:1fr;gap:.2rem 0}dl.spec dd{margin-bottom:.8rem}}
pre{font-family:var(--mono);font-size:.8rem;line-height:1.55;background:var(--bg-2);border:1px solid var(--line);padding:1rem 1.2rem;overflow-x:auto;color:var(--ink-2);margin-top:1rem}

/* /letter — reading page */
.reading{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr) minmax(0,3fr);gap:2rem clamp(24px,4vw,64px)}
.reading .marg{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.8;position:sticky;top:88px;align-self:start}
.reading .marg b{display:block;color:var(--ink);font-weight:400;letter-spacing:.06em}
.reading .marg span{display:block;margin-bottom:1.2rem}
.prose{max-width:64ch;font-size:1.06rem}
.prose p+p{margin-top:1.2rem}
.prose h2{margin:2.8rem 0 1rem;font-size:1.5rem}
.prose ul,.prose ol{margin:1rem 0 1rem 1.25rem}
.prose li+li{margin-top:.4rem}
.prose .sig{margin-top:3rem;font-family:var(--display);font-weight:600;font-size:1.2rem}
.prose .sig small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-top:.4rem}
.prose .drop::first-letter{font-family:var(--display);font-weight:700;font-size:3.6em;line-height:.8;float:left;margin:.08em .12em 0 0;color:var(--cyan)}
@media (max-width:860px){.reading{grid-template-columns:minmax(0,1fr)}.reading .marg{position:static;display:flex;flex-wrap:wrap;gap:0 2rem}}

/* /brand — specimen page */
.specimen{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.specimen figure{border:1px solid var(--line);padding:2.5rem;display:flex;align-items:center;justify-content:center;min-height:240px;position:relative}
.specimen figure.light{background:#f2f3f5}
.specimen figure img{max-height:130px;width:auto}
.specimen figcaption{position:absolute;left:.8rem;bottom:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.specimen figure.light figcaption{color:rgba(7,8,10,.55)}
@media (max-width:640px){.specimen{grid-template-columns:1fr}}
.wordmark-spec{border:1px solid var(--line);padding:clamp(24px,5vw,64px);text-align:center}
.wordmark-spec .wm{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(1.6rem,5vw,4rem);line-height:1}
.wordmark-spec .wm span{display:block;color:var(--ink-2)}
.wordmark-spec .cap{max-width:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:1.5rem}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.sw{border:1px solid var(--line)}
.sw .chip{height:88px}
.sw .cap{padding:.6rem .7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.sw .cap b{display:block;color:var(--ink);font-weight:500;letter-spacing:.02em}
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.marks figure{border:1px solid var(--line);padding:2rem 1rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.marks figure img{height:56px;width:auto}
.marks figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:center}
@media (max-width:760px){.marks{grid-template-columns:1fr 1fr}}
ul.files{list-style:none;font-family:var(--mono);font-size:.82rem}
ul.files li{padding:.6rem 0;border-bottom:1px solid var(--line);display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}
ul.files li:last-child{border-bottom:0}
ul.files a{min-height:24px;display:inline-flex;align-items:center}
.dont{list-style:none}
.dont li{padding:.5rem 0 .5rem 1.4rem;position:relative;color:var(--ink-2)}
.dont li::before{content:"\2014";position:absolute;left:0;color:var(--cyan)}
.brand-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2rem clamp(24px,4vw,64px)}
.brand-sec .body p+p,.brand-sec .body p+dl{margin-top:1rem}
@media (max-width:860px){.brand-sec{grid-template-columns:minmax(0,1fr)}}

/* /updates — vertical timeline */
.log{list-style:none;position:relative;padding-left:2rem;border-left:1px solid var(--line-2);margin-left:.4rem}
.log li{position:relative;padding:0 0 clamp(28px,4vw,48px)}
.log li::before{content:"";position:absolute;left:calc(-2rem - 6px);top:.45rem;width:11px;height:11px;border:1px solid var(--cyan);background:var(--bg)}
.log time{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--cyan)}
.log h3{font-size:1.25rem;margin:.5rem 0 .5rem}
.log p{color:var(--ink-2)}
.log .where{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:.5rem}

/* generic two-column for standard/security/contact */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem clamp(24px,4vw,64px);padding-block:clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.two:last-child{border-bottom:0}
.two .n{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--cyan);margin-bottom:1rem}
.two .body p+p,.two .body p+dl,.two .body p+ul,.two .body p+pre{margin-top:1rem}
.two .body p,.two .body dd{color:var(--ink-2)}
@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}}