/* GEN Systems — shared stylesheet.
   Colorways are CSS variable themes on <html data-colorway="1..5">.
   Default (no attribute) = Colorway 1 "Continuity" (VERIFIED palette:
   Burgundy #641D35, Navy #101C31, White #FFFFFF, silver mark accents).
   Colorways 2-5 are labeled proposals from COLORWAYS.md.
   =====================================================================
   PER-PAGE PALETTES (Anton, Oct 21): each page bakes ONE colorway via
   its <html data-colorway>; there is no switcher. Map: Home/Support/
   About/Capabilities/Who We Serve/Security/Motion/Videos = 1 Continuity;
   Ask GEN = 2; Framework/Approach/Knowledge & AI/System Preview = 4;
   Consult/Pilot/Privacy/Terms = 5. Header + footer chrome is constant
   (frosted-glass header) — palettes vary page bodies only.
   ===================================================================== */
:root, [data-colorway="1"]{
  --burgundy:#641D35; --burgundy-deep:#4A1428; --navy:#101C31; --navy-lift:#2A3550;
  --ink:#101C31; --text:#2B3242; --muted:#5A6376;
  --bg:#FFFFFF; --alt:#EEF0F3; --surface:#FFFFFF; --border:#C7CCD4;
  --header-bg:#101C31; --header-text:#FFFFFF;
  --hero-bg:#101C31; --hero-text:#FFFFFF; --hero-sub:#D8DCE4;
  --band-bg:#641D35; --band-text:#FFFFFF;
  --footer-bg:#101C31; --footer-text:#D8DCE4;
  --accent:#641D35; --accent-text:#FFFFFF; --link:#641D35;
  --card-dark:#2A3550; --silver:#9AA3AF; --silver-light:#C7CCD4;
  --tile-bd:#8B98AC; --sec-dark:#101C31;
}
/* Colorway 2 — Light Continuity (PROPOSAL) */
[data-colorway="2"]{
  --ink:#101C31; --text:#2B3242; --muted:#5A6376;
  --bg:#FFFFFF; --alt:#F5F1EC; --surface:#FFFFFF; --border:#C7CCD4;
  --header-bg:#FFFFFF; --header-text:#101C31;
  --tile-bd:#9AA3AF; --sec-dark:#2A3550;
  --hero-bg:#F5F1EC; --hero-text:#101C31; --hero-sub:#414B5E;
  --band-bg:#101C31; --band-text:#FFFFFF;
  --footer-bg:#101C31; --footer-text:#D8DCE4;
  --accent:#641D35; --accent-text:#FFFFFF; --link:#641D35;
}
/* Colorway 3 — Burgundy-Dominant (PROPOSAL) */
[data-colorway="3"]{
  --ink:#101C31; --text:#2B3242; --muted:#5A6376;
  --bg:#FFFFFF; --alt:#F5F1EC; --surface:#FFFFFF; --border:#C7CCD4;
  --header-bg:#101C31; --header-text:#FFFFFF;
  --tile-bd:#8B98AC; --sec-dark:#101C31;
  --hero-bg:#641D35; --hero-text:#FFFFFF; --hero-sub:#F0DCE3;
  --band-bg:#101C31; --band-text:#FFFFFF;
  --footer-bg:#101C31; --footer-text:#D8DCE4;
  --accent:#641D35; --accent-text:#FFFFFF; --link:#641D35;
}
/* Colorway 4 — Navy-Dominant / Institutional (PROPOSAL) */
[data-colorway="4"]{
  --tile-bd:#8B98AC; --sec-dark:#0B1322;
  --ink:#101C31; --text:#2B3242; --muted:#5A6376;
  --bg:#FFFFFF; --alt:#F5F1EC; --surface:#FFFFFF; --border:#C7CCD4;
  --header-bg:#101C31; --header-text:#FFFFFF;
  --hero-bg:#101C31; --hero-text:#FFFFFF; --hero-sub:#D8DCE4;
  --band-bg:#101C31; --band-text:#FFFFFF;
  --footer-bg:#0B1322; --footer-text:#D8DCE4;
  --accent:#641D35; --accent-text:#FFFFFF; --link:#641D35;
}
/* Colorway 5 — Silver / Neutral (PROPOSAL) */
[data-colorway="5"]{
  --tile-bd:#7C8798; --sec-dark:#2A3550;
  --ink:#101C31; --text:#2B3242; --muted:#525B6D;
  --bg:#F5F1EC; --alt:#E9E4DC; --surface:#FFFFFF; --border:#9AA3AF;
  --header-bg:#F5F1EC; --header-text:#101C31;
  --hero-bg:#E9E4DC; --hero-text:#101C31; --hero-sub:#414B5E;
  --band-bg:#101C31; --band-text:#FFFFFF;
  --footer-bg:#101C31; --footer-text:#D8DCE4;
  --accent:#641D35; --accent-text:#FFFFFF; --link:#641D35;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);background:var(--bg);line-height:1.6;font-size:16.5px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--ink);line-height:1.18;font-weight:600}
h1{font-size:2.5rem} h2{font-size:1.85rem;margin-bottom:.6rem} h3{font-size:1.18rem;margin-bottom:.35rem}
p{margin-bottom:1rem} a{color:var(--link)}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.lede{font-size:1.13rem}
section{padding:56px 0}
.alt{background:var(--alt)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
/* Header */
header.site{position:sticky;top:0;z-index:100;background:var(--header-bg);color:var(--header-text);border-bottom:3px solid var(--burgundy)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--header-text)}
.brand img{height:38px;width:auto}
.brand .wm{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.3rem;letter-spacing:.03em;line-height:1;color:var(--header-text)}
.brand .wm small{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:.58rem;letter-spacing:.52em;margin-top:3px}
nav.main{display:flex;gap:22px;align-items:center}
nav.main a{color:var(--header-text);text-decoration:none;font-size:.94rem;font-weight:500}
nav.main a:hover{text-decoration:underline}
nav.main .has-drop{position:relative}
.drop{display:none;position:absolute;top:100%;left:0;background:#fff;color:#2B3242;border:1px solid #C7CCD4;border-radius:10px;padding:10px;min-width:230px;box-shadow:0 10px 30px rgba(16,28,49,.18)}
.drop a{display:block;color:#101C31;padding:6px 8px;border-radius:6px}
.drop a:hover{background:#EEF0F3;text-decoration:none}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.btn{display:inline-block;background:var(--accent);color:var(--accent-text);font-weight:600;font-size:.95rem;padding:11px 22px;border-radius:999px;text-decoration:none;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.light{background:#fff;color:#101C31;border-color:#fff}
.menu-btn{display:none;background:none;border:1px solid rgba(140,150,165,.5);color:var(--header-text);border-radius:8px;padding:8px 12px;font-size:.9rem}
.cta-mobile{display:none}
/* Frosted-glass header — the standard chrome on every page (Anton, Oct 21).
   Translucent white glass over whatever hero scrolls beneath it; dark
   lockup for contrast; near-opaque white fallback when backdrop-filter
   is unavailable. Logo, nav and CTA content are unchanged. */
header.site{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);color:#101C31;border-bottom:1px solid rgba(16,28,49,.14);box-shadow:0 8px 28px rgba(16,28,49,.10)}
header.site .brand,header.site .brand .wm,header.site nav.main a{color:#101C31}
header.site .menu-btn{color:#101C31;border-color:rgba(16,28,49,.35)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){header.site{background:rgba(255,255,255,.97)}}
/* Agent Hub (/support/) */
.hub-hero{display:flex;gap:36px;align-items:center;flex-wrap:wrap}
.hub-hero>div{flex:1 1 340px}
.hub-art{flex:0 1 360px;background:#0B1322;border:2px solid #C7CCD4;border-radius:18px;padding:10px;margin:0}
.hub-art img{width:100%;height:auto;display:block;border-radius:12px}
.hub-art figcaption{color:#D8DCE4;font-size:.85rem;padding:9px 4px 3px;text-align:center}
.hub-lead{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hub-lead-body{flex:1 1 300px}
.hub-thumb{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--tile-bd);flex:0 0 auto}
.hub-lead .hub-thumb{width:84px;height:84px}
.hub-name{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:700;color:var(--ink);margin:0}
.hub-scope{margin:.3rem 0}
.hub-where{font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;margin:.1rem 0}
.hub-meta{font-size:.85rem;color:var(--muted);margin:.2rem 0 .5rem}
.hub-tile h3{margin-top:.6rem}
.st{font-weight:700;font-size:.8rem;letter-spacing:.03em}
.st-live{color:#1E7A46}
.st-staged{color:#5A6376}
.sev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.sev{border:2px solid var(--tile-bd);border-radius:12px;padding:13px 15px;background:var(--surface);display:grid;gap:3px}
.sev b{color:var(--ink);font-size:.95rem}
.sev span{font-size:.9rem;color:var(--text)}
.hub-note{font-size:.92rem;color:var(--muted);margin-top:14px}
/* Hero + bands */
.hero{background:var(--hero-bg);color:var(--hero-text);padding:64px 0 56px}
.hero h1{color:var(--hero-text);max-width:820px}
.hero .tagline{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.25rem;color:var(--hero-text);margin:14px 0 6px}
.hero p{color:var(--hero-sub);max-width:760px}
.hero .row{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.hero .art{flex:0 0 300px}
.hero .art img{width:100%;height:auto;border-radius:16px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.band{background:var(--band-bg);color:var(--band-text);padding:52px 0}
.band h2{color:var(--band-text)}
.band p{color:var(--band-text);max-width:720px}
/* Layout blocks */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:24px}
.card{background:var(--surface);border:2px solid var(--tile-bd);border-radius:16px;padding:22px}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.steps{counter-reset:step}
.step{display:flex;gap:16px;margin-top:20px}
.step .n{counter-increment:step;flex:0 0 42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.step .n::before{content:counter(step)}
.diagram{display:grid;gap:12px;margin-top:24px}
.dia-node{border:2px solid var(--tile-bd);border-left:5px solid var(--accent);border-radius:12px;padding:16px 18px;background:var(--surface)}
.dia-arrow{text-align:center;color:var(--muted);font-size:1.1rem;line-height:1}
table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.95rem}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid var(--tile-bd);border-radius:12px;margin-top:18px}
.table-wrap table{margin-top:0;min-width:640px}
th,td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--alt);color:var(--ink)}
.note{border:1px solid var(--tile-bd);border-left:4px solid var(--accent);background:var(--alt);padding:14px 18px;border-radius:0 12px 12px 0;margin:20px 0;font-size:.97rem}
ul.tight li{margin:6px 0 6px 20px}
.faq details{border:2px solid var(--tile-bd);border-radius:12px;padding:14px 18px;margin-top:12px;background:var(--surface)}
.faq summary{font-weight:600;color:var(--ink);cursor:pointer}
.demo-banner{background:var(--burgundy);color:#fff;padding:12px 0;font-size:.93rem;font-weight:600;text-align:center}
.tabs,.views{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.tabs button,.views button{border:1px solid var(--accent);background:var(--surface);color:var(--accent);font-weight:600;padding:10px 20px;border-radius:999px;cursor:pointer;font-size:.95rem}
.tabs button[aria-selected="true"],.views button[aria-selected="true"]{background:var(--accent);color:#fff}
form.consult{display:grid;gap:14px;max-width:620px;margin-top:20px}
form.consult label{font-weight:600;color:var(--ink);display:grid;gap:6px;font-size:.97rem}
form.consult input,form.consult select,form.consult textarea{font:inherit;padding:11px 13px;border:1px solid var(--tile-bd);border-radius:10px;background:var(--surface);color:var(--text);width:100%}
form.consult .consent{font-weight:400;display:flex;gap:10px;align-items:flex-start}
form.consult .consent input{width:auto;margin-top:5px}
footer.site{background:var(--footer-bg);color:var(--footer-text);padding:44px 0 34px;font-size:.93rem}
footer.site a{color:var(--footer-text)}
footer.site .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer.site nav{display:grid;gap:7px}
footer.site .tag{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.05rem;color:#fff}
.small{font-size:.86rem;color:var(--muted)}
footer.site .small{color:var(--footer-text);opacity:.85}
.fig{margin:24px 0}
.fig img{width:100%;height:auto;display:block;border-radius:16px}
.card img.slot{width:100%;height:auto;display:block;border-radius:10px;margin-bottom:14px}
.band-img{display:block;width:100%;height:auto}
/* ============================================================
   Background-built imagery (Oct 20, 2026, Anton direction):
   imagery is the environment content sits in — full-screen and
   full-bleed background sections, sticky depth layers — never a
   picture in a box. Scrim is a fixed deep-navy treatment in EVERY
   colorway (the artwork family is navy-based), and text over
   imagery is always white/light with AA-checked scrims.
   ============================================================ */
/* Home hero: full-viewport arch backdrop, copy framed left over
   the image's open negative space; arch reads as silhouette. */
.hero-full{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:88px 0 76px;background-color:#0B1322;background-image:url('/assets/img/hero-arch-full.jpg');background-size:cover;background-position:center 38%;color:#FFFFFF;--hero-text:#FFFFFF;--hero-sub:#DCE3EE;overflow:hidden}
.hero-full::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,17,32,.44),rgba(10,17,32,.44)),linear-gradient(97deg,rgba(9,15,27,.94) 0%,rgba(9,15,27,.86) 42%,rgba(9,15,27,.58) 70%,rgba(9,15,27,.42) 100%),linear-gradient(to top,rgba(9,15,27,.62) 0%,rgba(9,15,27,0) 42%),linear-gradient(to bottom,rgba(9,15,27,.45) 0%,rgba(9,15,27,0) 26%);z-index:0}
.hero-full>.wrap{position:relative;z-index:1;width:100%}
.hero-full h1{color:#FFFFFF;max-width:640px;text-shadow:0 1px 10px rgba(5,9,18,.45)}
.hero-full .tagline{color:#FFFFFF}
.hero-full p{color:var(--hero-sub);max-width:600px}
/* Subpage heroes with a backdrop image (same scrim discipline) */
.hero--img{position:relative;background-size:cover;background-position:center;color:#FFFFFF;--hero-text:#FFFFFF;--hero-sub:#DCE3EE;overflow:hidden}
.hero--img::before{content:"";position:absolute;inset:0;background:linear-gradient(97deg,rgba(9,15,27,.89) 0%,rgba(9,15,27,.76) 48%,rgba(9,15,27,.52) 100%);z-index:0}
.hero--img>.wrap{position:relative;z-index:1}
.hero--img h1{color:#FFFFFF;text-shadow:0 1px 8px rgba(5,9,18,.4)}
/* Marble hero (Support): the face render's own deep-navy field is the page
   navy — the sphere is shown whole, floating right of the copy, never cropped.
   (Placement rule, Anton Oct 21 2026: face-in-marble = GEN present and speaking
   — the support hero; pure marble = GEN as system — Q&A + chrome. See BUILD-NOTES.) */
.hero--marble{background-color:#0B1626;background-size:auto 112%;background-position:right -54px center;background-repeat:no-repeat}
/* Full-bleed background sections: copy sits in the image */
.bgs{position:relative;background-color:#0E1830;background-size:cover;background-position:center;color:#E9EDF4;overflow:hidden}
.bgs::before{content:"";position:absolute;inset:0;background:linear-gradient(94deg,rgba(9,15,27,.88) 0%,rgba(9,15,27,.74) 52%,rgba(9,15,27,.58) 100%);z-index:0}
.bgs>.wrap{position:relative;z-index:1}
.bgs h2,.bgs h3{color:#FFFFFF}
.bgs p,.bgs li{color:#DCE3EE}
.bgs .eyebrow{color:#E7B7C8}
.bgs a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.bgs .btn{text-decoration:none}
.bgs .card{background:rgba(10,18,33,.68);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-color:rgba(201,139,163,.55);color:#E9EDF4}
.bgs .card p{color:#DCE3EE}
.bgs .card h3 a{color:#FFFFFF}
.bgs .dia-node{background:rgba(10,18,33,.68);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-color:rgba(201,139,163,.55);border-left-color:#C98BA3;color:#E9EDF4}
.bgs .dia-arrow{color:#C7CCD4}
.bgs .note{background:rgba(10,18,33,.72);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border:1px solid rgba(201,139,163,.5);border-left:4px solid #C98BA3;color:#E9EDF4}
/* Sticky depth sections: background layer holds (position:sticky)
   while glass content scrolls over it. Works on mobile, where
   background-attachment:fixed is unreliable — no fixed fallback
   needed because the sticky layer IS the mechanism. */
.depth{position:relative;padding:0;background:#0B1322}
.depth__bg{position:sticky;top:0;height:100vh;height:100svh;background-size:cover;background-position:center}
.depth__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(94deg,rgba(9,15,27,.82) 0%,rgba(9,15,27,.62) 55%,rgba(9,15,27,.48) 100%)}
.depth__content{position:relative;margin-top:-100vh;margin-top:-100svh;min-height:158vh;min-height:158svh;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:72px 0 84px}
.depth__content .wrap{width:100%}
.glass{background:rgba(9,16,29,.76);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(199,204,212,.50);border-radius:18px;padding:30px 32px;color:#E9EDF4;box-shadow:0 24px 60px rgba(3,6,12,.45)}
.glass h2,.glass h3{color:#FFFFFF}
.glass p,.glass li{color:#DCE3EE}
.glass .eyebrow{color:#E7B7C8}
.glass a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.glass .btn{text-decoration:none}
.glass .note{background:rgba(255,255,255,.07);border-left-color:#C98BA3;color:#E9EDF4}
/* ============================================================
   Phase 2 (Oct 21, 2026, Anton direction): heroes rotate color
   across the site; sections alternate dark/light down every
   page; every tile carries a defined border; the top of the
   site leads burgundy + blue and the switcher dots — labeled
   "Site colors" — sit at the top and re-skin header + page.
   ============================================================ */
/* Plain-hero color rotation (brand palette constants) */
.hero--burg{--hero-bg:#641D35;--hero-text:#FFFFFF;--hero-sub:#F0DCE3}
.hero--burgdeep{--hero-bg:#4A1428;--hero-text:#FFFFFF;--hero-sub:#EFD9E0}
.hero--burg .eyebrow,.hero--burgdeep .eyebrow{color:#E7B7C8}
.hero--light{--hero-bg:#EEF0F3;--hero-text:#101C31;--hero-sub:#414B5E}
/* White primary CTA where the hero ground is burgundy */
.hero--burg .btn,.hero--burgdeep .btn,.hero-full .btn,.hero--img.scrim-burg .btn,.hero--img.scrim-mix .btn{background:#FFFFFF;color:#641D35;border-color:#FFFFFF}
.hero--burg .btn.ghost,.hero--burgdeep .btn.ghost,.hero-full .btn.ghost,.hero--img.scrim-burg .btn.ghost,.hero--img.scrim-mix .btn.ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.75)}
/* Image-hero / background-section scrim tints */
.hero--img.scrim-burg::before{background:linear-gradient(97deg,rgba(46,11,26,.90) 0%,rgba(46,11,26,.78) 48%,rgba(46,11,26,.56) 100%)}
.hero--img.scrim-mix::before{background:linear-gradient(97deg,rgba(46,11,26,.89) 0%,rgba(16,28,49,.78) 55%,rgba(16,28,49,.55) 100%)}
.bgs--burg::before{background:linear-gradient(94deg,rgba(46,11,26,.89) 0%,rgba(46,11,26,.76) 52%,rgba(46,11,26,.60) 100%)}
/* Home hero: burgundy-led scrim (blue held in the right field),
   steel-blue eyebrow + ghost accents */
.hero-full::before{background:linear-gradient(rgba(10,17,32,.40),rgba(10,17,32,.40)),linear-gradient(97deg,rgba(9,15,27,.94) 0%,rgba(9,15,27,.86) 40%,rgba(10,17,33,.60) 68%,rgba(16,28,49,.45) 100%),linear-gradient(to top,rgba(7,11,20,.66) 0%,rgba(7,11,20,0) 42%),linear-gradient(to bottom,rgba(9,15,27,.50) 0%,rgba(9,15,27,0) 26%)}
.hero-full .eyebrow{color:#B9CBE8}
.hero-full .btn.ghost{border-color:#B9CBE8;color:#EFF4FC}
/* Zebra beats: plain dark (navy, theme-softened via --sec-dark)
   and burgundy sections, with dark-beat tile treatments */
.dark-sec{background:var(--sec-dark);color:#E9EDF4}
.burg-sec{background:#641D35;color:#F7E8ED}
.dark-sec h2,.dark-sec h3,.burg-sec h2,.burg-sec h3{color:#FFFFFF}
.dark-sec p,.dark-sec li{color:#DCE3EE}
.burg-sec p,.burg-sec li{color:#F3DDE5}
.dark-sec .eyebrow,.burg-sec .eyebrow{color:#E7B7C8}
.dark-sec a,.burg-sec a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.dark-sec .btn,.burg-sec .btn{background:#FFFFFF;color:#641D35;border-color:#FFFFFF;text-decoration:none}
.dark-sec .btn.ghost,.burg-sec .btn.ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.75)}
.dark-sec .card,.burg-sec .card{background:rgba(255,255,255,.06);border:2px solid rgba(199,204,212,.50);color:#E9EDF4}
.burg-sec .card{background:rgba(16,28,49,.28)}
.dark-sec .card h3 a,.burg-sec .card h3 a{color:#FFFFFF}
.dark-sec .card p{color:#DCE3EE}
.burg-sec .card p{color:#F3DDE5}
.dark-sec .dia-node,.burg-sec .dia-node{background:rgba(255,255,255,.06);border:2px solid rgba(199,204,212,.50);border-left:5px solid #C98BA3;color:#E9EDF4}
.dark-sec .note,.burg-sec .note{background:rgba(255,255,255,.07);border:1px solid rgba(199,204,212,.45);border-left:4px solid #C98BA3;color:#E9EDF4}
.dark-sec .step .n,.burg-sec .step .n{background:#FFFFFF;color:#641D35}
.dark-sec .faq details,.burg-sec .faq details{background:rgba(255,255,255,.06);border-color:rgba(199,204,212,.50)}
.dark-sec .faq summary,.burg-sec .faq summary{color:#FFFFFF}
.dark-sec .small,.burg-sec .small{color:#C7CCD4}
/* Visually hidden: carries a background image's alt equivalent */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Capability cards: image as a background panel, bled to the
   card's top edges — part of the card, not a framed picture */
.card .slot-bg{height:172px;margin:-22px -22px 16px;border-radius:16px 16px 0 0;background-size:cover;background-position:center}
@media(max-width:820px){
  .hero-full{background-position:64% 42%;padding:64px 0 60px}
  .hero-full::before{background:linear-gradient(rgba(10,17,32,.30),rgba(10,17,32,.30)),linear-gradient(to bottom,rgba(9,15,27,.90) 0%,rgba(9,15,27,.80) 55%,rgba(7,11,20,.72) 100%)}
  .hero--img::before{background:linear-gradient(to bottom,rgba(9,15,27,.88),rgba(9,15,27,.78))}
  .hero--marble{background-size:auto 76%;background-position:center 12%}
  .bgs::before{background:linear-gradient(to bottom,rgba(9,15,27,.88),rgba(9,15,27,.76))}
  .depth__bg::after{background:linear-gradient(to bottom,rgba(9,15,27,.84),rgba(9,15,27,.70))}
  .depth__content{min-height:150vh;min-height:150svh;padding:52px 0 64px}
  .glass{padding:24px 22px}
  .card .slot-bg{height:150px}
}
@media(max-width:820px){
  header.site nav.main{background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid rgba(16,28,49,.14)}
  header.site .drop a{color:#101C31}
  .hub-art{flex:1 1 100%;max-width:340px}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--header-bg);flex-direction:column;align-items:flex-start;padding:14px 22px 20px;gap:13px}
  nav.main.open{display:flex}
  .drop{position:static;display:block;background:transparent;border:none;box-shadow:none;padding:4px 0 0 14px}
  .drop a{color:var(--header-text)}
  .menu-btn{display:block}
  .cta-mobile{display:inline-block;padding:8px 14px;font-size:.85rem;margin-left:auto}
  h1{font-size:1.95rem} h2{font-size:1.5rem}
  section{padding:40px 0}
  .hero .art{flex:1 1 100%;max-width:340px}
  th,td{padding:7px 9px}
}

/* ============================================================
   Blog (/blog/) — light reading treatment (pages bake colorway 5,
   the ivory/silver-light reading palette, burgundy accents).
   Index = systematic labeled tiles; posts = one reading column.
   ============================================================ */
.post-tile{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--text)}
.post-tile .t-label{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.post-tile h3{font-size:1.3rem;line-height:1.25;margin:0}
.post-tile h3 a{color:var(--ink);text-decoration:none}
.post-tile h3 a:hover{text-decoration:underline}
.post-tile .t-promise{color:var(--muted);flex:1}
.post-tile .t-meta{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.post-col{max-width:760px;margin:0 auto}
.byline{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:.9rem;color:var(--muted);margin:14px 0 26px}
.byline .who{font-weight:700;color:var(--ink);letter-spacing:.02em}
.post-body h2{margin-top:2.4rem}
.post-body ul{margin:0 0 1rem 22px}
.post-body li{margin:7px 0}
.post-body ol{margin:0 0 1rem 22px}
.post-body ol li{margin:7px 0}
.pullquote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;font-size:1.5rem;line-height:1.35;color:var(--ink);border-left:4px solid var(--accent);padding:4px 0 4px 24px;margin:36px 0}
.post-foot{border-top:2px solid var(--tile-bd);margin-top:44px;padding-top:22px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;align-items:center}
@media(max-width:640px){.pullquote{font-size:1.28rem;padding-left:18px}}