/* ==========================================================================
   Venezuela Field Support - Design System
   Institutional / energy-advisory aesthetic.
   Tokens: deep navy, near-black, warm white, industrial gray, restrained brass.
   ========================================================================== */

:root{
  /* Surface */
  --ink:#070C15;
  --navy:#0D1626;
  --navy-2:#132038;
  --steel:#1C2B44;
  --paper:#FBF9F6;
  --paper-2:#F2EFE9;
  --paper-3:#E7E2D9;

  /* Type */
  --tx-900:#0B121D;
  --tx-700:#2A3547;
  --tx-500:#5A6577;
  --tx-400:#7E889A;
  --tx-inv:#F5F2EC;
  --tx-inv-2:#B7BFCC;
  --tx-inv-3:#8492A6;

  /* Accent */
  --brass:#C7A469;
  --brass-2:#96742F;
  --brass-3:#6E5730;
  --alert:#9E3B33;

  /* Lines */
  --line:#DED8CD;
  --line-2:#EAE5DB;
  --line-inv:rgba(255,255,255,.11);
  --line-inv-2:rgba(255,255,255,.06);

  /* Layout */
  --wrap:1240px;
  --wrap-narrow:820px;
  --gut:clamp(20px,5vw,48px);
  --sp-section:clamp(64px,9vw,124px);
  --radius:3px;

  /* Type stack */
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  --shadow-1:0 1px 2px rgba(11,18,29,.05),0 8px 24px -12px rgba(11,18,29,.16);
  --shadow-2:0 2px 4px rgba(11,18,29,.06),0 24px 56px -20px rgba(11,18,29,.24);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--tx-700);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{margin:0;color:var(--tx-900);font-weight:600;letter-spacing:-.021em;line-height:1.14}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin-bottom:.42em}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
strong{font-weight:600;color:var(--tx-900)}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.ink :focus-visible,.hdr :focus-visible{outline-color:var(--brass)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sp-section)}
.section-sm{padding-block:clamp(44px,6vw,76px)}
.dark{background:var(--navy);color:var(--tx-inv-2)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--tx-inv)}
.dark strong{color:var(--tx-inv)}
.ink{background:var(--ink);color:var(--tx-inv-2)}
.ink h1,.ink h2,.ink h3,.ink h4{color:var(--tx-inv)}
.ink strong{color:var(--tx-inv)}
.tint{background:var(--paper-2)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- Type utilities ---------- */
.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-2);margin:0 0 1.1rem;display:block;
}
.dark .eyebrow,.ink .eyebrow,.hero .eyebrow,.phead .eyebrow{color:var(--brass)}
.h-xl{font-size:clamp(2.15rem,5.4vw,3.85rem);letter-spacing:-.028em;line-height:1.06}
.h-lg{font-size:clamp(1.8rem,3.7vw,2.85rem);letter-spacing:-.025em;line-height:1.1}
.h-md{font-size:clamp(1.42rem,2.5vw,1.95rem);letter-spacing:-.02em;line-height:1.2}
.h-sm{font-size:clamp(1.12rem,1.7vw,1.3rem);letter-spacing:-.012em;line-height:1.3}
.lede{font-size:clamp(1.06rem,1.6vw,1.24rem);line-height:1.6;color:var(--tx-500)}
.dark .lede,.ink .lede{color:var(--tx-inv-2)}
.small{font-size:.9rem;line-height:1.6}
.tiny{font-size:.8rem;line-height:1.55;color:var(--tx-500)}
.dark .tiny,.ink .tiny{color:var(--tx-inv-3)}
.measure{max-width:66ch}
.measure-tight{max-width:56ch}
.num{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1.1rem}

/* Spacing utilities. These exist because the Content-Security-Policy sets
   style-src 'self' with no 'unsafe-inline', which blocks inline style
   attributes outright — silently. Keep layout in classes, not attributes. */
.mt-08{margin-top:.8rem}
.mt-1{margin-top:1rem}
.mt-11{margin-top:1.1rem}
.mt-12{margin-top:1.2rem}
.mt-14{margin-top:1.4rem}
.mt-16{margin-top:1.6rem}
.mt-18{margin-top:1.8rem}
.mt-2{margin-top:2rem}
.mt-22{margin-top:2.2rem}
.mt-24{margin-top:2.4rem}
.mt-26{margin-top:2.6rem}
.mb-12{margin-bottom:1.2rem}
.mb-14{margin-bottom:1.4rem}
.mb-16{margin-bottom:1.6rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}
.mt-tight{margin-top:-8px}
.lede-center{margin:1.4rem auto 0}
.head-gap{margin:2.4rem 0 1.2rem}
.mw-820{max-width:820px}
.pad-x-0{padding-left:0;padding-right:0}
.kv-bare{border:0;background:transparent;gap:0}
.fact-on-dark{background:rgba(255,255,255,.05);border-color:var(--line-inv);border-left-color:var(--brass)}
.t-inv2{color:var(--tx-inv-2)}
.t-brass{color:var(--brass)}
.t-white{color:#fff}

/* ---------- Section heads ---------- */
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule,.ink .rule{background:var(--line-inv)}
.section-head{margin-bottom:clamp(32px,4.5vw,60px)}
.section-head .lede{margin-top:1.1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:.85em 1.6em;
  font-size:.79rem;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  font-family:inherit;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brass);color:#241B08;border-color:var(--brass)}
.btn-primary:hover{background:#D6B67F;border-color:#D6B67F}
.btn-dark{background:var(--ink);color:var(--tx-inv);border-color:var(--ink)}
.btn-dark:hover{background:var(--steel);border-color:var(--steel)}
.btn-ghost{background:transparent;color:var(--tx-900);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--tx-900)}
.dark .btn-ghost,.ink .btn-ghost,.hero .btn-ghost,.phead .btn-ghost{color:var(--tx-inv);border-color:rgba(255,255,255,.28)}
.dark .btn-ghost:hover,.ink .btn-ghost:hover,.hero .btn-ghost:hover,.phead .btn-ghost:hover{border-color:var(--tx-inv);background:rgba(255,255,255,.05)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  font-size:.79rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-2);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .18s,gap .18s;
}
.link-arrow:hover{border-color:var(--brass-2);gap:.75em}
.dark .link-arrow,.ink .link-arrow{color:var(--brass)}
.dark .link-arrow:hover,.ink .link-arrow:hover{border-color:var(--brass)}
.link-arrow svg{width:13px;height:13px;flex:none}

/* ---------- Top utility bar ---------- */
.topbar{background:#04080F;border-bottom:1px solid var(--line-inv-2);position:relative;z-index:101}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:10px 24px;
  min-height:40px;padding-block:7px;flex-wrap:wrap;
}
.topbar-note{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx-inv-3);
}
.topbar-mail{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--brass);
  padding:4px 0;
}
.topbar-mail:hover{color:#fff}
.topbar-mail:hover .topbar-addr{text-decoration:underline;text-underline-offset:3px}
.topbar-mail svg{width:15px;height:15px;flex:none;opacity:.85}
@media (max-width:640px){
  .topbar-note{display:none}
  .topbar-in{justify-content:center;min-height:38px}
  .topbar-mail{font-size:.8rem}
}

/* Email line under the hero buttons */
.hero-mail{margin-top:1.5rem;font-size:.92rem;color:#9FAABB}
.hero-mail a{color:var(--brass);font-weight:600;text-decoration:none}
.hero-mail a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(7,12,21,.94);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line-inv-2);
}
.hdr-in{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;padding:6px 0}
.brand-mark{width:30px;height:30px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-size:.855rem;font-weight:650;letter-spacing:.145em;text-transform:uppercase;color:#fff;white-space:nowrap}
.brand-sub{font-size:.56rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-top:5px;white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{
  display:block;padding:9px 12px;text-decoration:none;color:var(--tx-inv-2);
  font-size:.815rem;font-weight:500;border-radius:var(--radius);
  transition:color .16s,background-color .16s;white-space:nowrap;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav a[aria-current]{color:#fff}
.nav a[aria-current]::after{content:"";display:block;height:1px;background:var(--brass);margin-top:5px}
.hdr .btn{margin-left:12px;min-height:42px;padding:.7em 1.2em;font-size:.695rem}
.burger{
  margin-left:auto;display:none;align-items:center;gap:9px;background:none;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);color:#fff;font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:11px 14px;cursor:pointer;min-height:44px;
}
.burger svg{width:15px;height:15px}
.mnav{display:none;border-top:1px solid var(--line-inv-2);background:var(--ink);max-height:calc(100vh - 74px);overflow-y:auto}
.mnav[data-open]{display:block}
.mnav ul{list-style:none;margin:0;padding:8px 0 20px}
.mnav li{margin:0}
.mnav a{
  display:block;padding:14px var(--gut);color:var(--tx-inv-2);text-decoration:none;font-size:1rem;
  border-bottom:1px solid var(--line-inv-2);
}
.mnav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.mnav .btn{margin:18px var(--gut) 0;display:flex}
@media (max-width:1120px){
  .nav{display:none}
  .hdr .btn{display:none}
  .burger{display:inline-flex}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--tx-inv-2);overflow:hidden;isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:-1}
.hero-art img,.hero-art svg{width:100%;height:100%;object-fit:cover}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,12,21,.96) 0%,rgba(7,12,21,.9) 42%,rgba(7,12,21,.64) 74%,rgba(7,12,21,.52) 100%);
}
.hero-in{position:relative;padding-block:clamp(72px,11vw,146px);max-width:900px}
.hero h1{color:#fff;margin-bottom:1.5rem}
.hero .lede{color:#C3CBD8;max-width:62ch}
/* The global strong colour is near-black; on dark grounds it must be inverted or
   the emphasised phrase disappears. */
.hero strong,.phead strong,.cta-band strong,.band strong{color:#fff}
.hero-sub{margin-top:1.1rem;max-width:62ch;font-size:1.02rem;line-height:1.62;color:#9AA6B8}
.hero .btn-row{margin-top:2.4rem}
.trust-strip{border-top:1px solid var(--line-inv-2);background:rgba(255,255,255,.025);position:relative;z-index:1}
.trust-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.trust-strip li{
  margin:0;padding:19px 0;flex:1 1 200px;
  font-size:.71rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-inv-2);
  display:flex;align-items:center;gap:10px;
}
.trust-strip li::before{content:"";width:5px;height:5px;background:var(--brass);flex:none;transform:rotate(45deg)}

/* ---------- Interior page header ---------- */
.phead{background:var(--ink);color:var(--tx-inv-2);position:relative;overflow:hidden;isolation:isolate}
.phead-art{position:absolute;inset:0;z-index:-1;opacity:.55}
.phead-art img,.phead-art svg{width:100%;height:100%;object-fit:cover}
/* Photographic page header: full-strength image behind a scrim, matching the
   homepage hero treatment. */
.phead-art--photo{opacity:1}
/* Lighter than the hero scrim on purpose: the header band is shorter, so an
   equally heavy gradient hides the photograph entirely. Copy sits on the left,
   so the left stays dark enough for white text and the right opens up. */
.phead-art--photo::after{
  content:"";position:absolute;inset:0;
  /* Hold a heavy scrim across the text column (the copy runs to roughly 55%),
     then clear quickly so the right third reads as a photograph.
     Two things were learned tuning this: a plain 90deg gradient behaves
     predictably here where an angled one did not, and easing evenly across the
     full width drops the lede below AA contrast. Hence the plateau. */
  background:linear-gradient(90deg,
    rgba(7,12,21,.94) 0%,
    rgba(7,12,21,.90) 40%,
    rgba(7,12,21,.78) 58%,
    rgba(7,12,21,.30) 76%,
    rgba(7,12,21,0)   92%);
}
/* Give a photographic header room to actually read as an image. */
.phead--photo .phead-in{padding-block:clamp(72px,10vw,132px)}
/* On narrow screens the copy spans the full width, so the scrim has to be
   vertical and heavier — a side-weighted gradient leaves text over open sky. */
@media (max-width:820px){
  /* Mobile: copy spans the full width, so the scrim must be vertical. Lighter
     at the top where there is no text, heavier where the headline sits. */
  .phead-art--photo::after{
    background:linear-gradient(180deg,rgba(7,12,21,.62) 0%,rgba(7,12,21,.84) 38%,rgba(7,12,21,.92) 100%);
  }
  .hero-art::after{
    background:linear-gradient(180deg,rgba(7,12,21,.88) 0%,rgba(7,12,21,.92) 50%,rgba(7,12,21,.96) 100%);
  }
  .band>img{opacity:.3}
  .band::after{
    background:linear-gradient(180deg,rgba(7,12,21,.92) 0%,rgba(7,12,21,.95) 100%);
  }
}
.phead-in{padding-block:clamp(46px,7vw,86px)}
.phead h1{color:#fff;margin-bottom:1.15rem;max-width:22ch}
.phead .lede{max-width:64ch;color:#C3CBD8}
.phead .btn-row{margin-top:2rem}

/* ---------- Breadcrumbs ---------- */
.crumbs{padding-block:13px;border-bottom:1px solid var(--line-inv-2);background:rgba(255,255,255,.02);position:relative;z-index:1}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:.76rem;color:var(--tx-inv-2)}
.crumbs li{margin:0;display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.28)}
.crumbs a{color:var(--tx-inv-2);text-decoration:none}
.crumbs a:hover{color:var(--brass);text-decoration:underline}
.crumbs [aria-current]{color:var(--tx-inv-3)}

/* ---------- Grids ---------- */
.grid{display:grid;gap:clamp(20px,2.6vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.split-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:980px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split,.split-even{grid-template-columns:1fr}
}
@media (max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--brass-2);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.card h3{margin-bottom:.6rem;font-size:1.08rem}
.card p{color:var(--tx-500);font-size:.95rem}
.card .link-arrow{margin-top:auto;padding-top:1.35rem}
.card-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--brass-2);margin-bottom:1rem;display:block}
.dark .card,.ink .card{background:rgba(255,255,255,.035);border-color:var(--line-inv)}
.dark .card p,.ink .card p{color:var(--tx-inv-2)}
.dark .card .card-num,.ink .card .card-num{color:var(--brass)}
.dark a.card:hover,.ink a.card:hover{border-color:var(--brass);background:rgba(255,255,255,.06)}

/* Flagship cards */
.flag{
  position:relative;background:#fff;border:1px solid var(--line);border-top:3px solid var(--brass-2);
  padding:clamp(26px,3.2vw,40px);display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.flag:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.flag h3{font-size:clamp(1.2rem,1.9vw,1.46rem);letter-spacing:-.02em}
.flag .flag-q{color:var(--brass-2);font-size:1.02rem;font-weight:500;font-style:italic;margin:.6rem 0 1.1rem}
.flag p{color:var(--tx-500);font-size:.95rem}
.flag ul{list-style:none;padding:0;margin:1.2rem 0 0;font-size:.88rem;color:var(--tx-500)}
.flag ul li{padding-left:18px;position:relative;margin-bottom:.35em}
.flag ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--brass-2)}
.flag .link-arrow{margin-top:auto;padding-top:1.6rem}

/* ---------- Check lists ---------- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.72rem}
.checks li{position:relative;padding-left:26px;margin:0;font-size:.96rem}
.checks li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border:1px solid var(--brass-2);transform:rotate(45deg)}
.dark .checks li::before,.ink .checks li::before{border-color:var(--brass)}
.checks-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem 2rem}
@media (max-width:700px){.checks-2{grid-template-columns:1fr}}

/* Tag grid */
.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tags span{
  background:var(--paper);padding:18px 20px;font-size:.855rem;color:var(--tx-700);
  display:flex;align-items:center;min-height:62px;transition:background .18s,color .18s;
}
.tags span:hover{background:#fff;color:var(--tx-900)}
.dark .tags,.ink .tags{background:var(--line-inv);border-color:var(--line-inv)}
.dark .tags span,.ink .tags span{background:var(--navy);color:var(--tx-inv-2)}
.dark .tags span:hover,.ink .tags span:hover{background:var(--navy-2);color:#fff}

/* ---------- Lifecycle ---------- */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-inv)}
.cycle-step{padding:clamp(24px,2.8vw,34px);border-right:1px solid var(--line-inv);position:relative}
.cycle-step:last-child{border-right:0}
.cycle-step .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--brass);display:block;margin-bottom:1rem}
.cycle-step h3{font-size:1.28rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:.85rem}
.cycle-step ul{list-style:none;padding:0;margin:0;font-size:.88rem;color:var(--tx-inv-2)}
.cycle-step li{margin-bottom:.42em;padding-left:15px;position:relative}
.cycle-step li::before{content:"";position:absolute;left:0;top:.63em;width:7px;height:1px;background:var(--brass)}
.cycle-step::after{
  content:"";position:absolute;right:-7px;top:50%;width:13px;height:13px;
  border-top:1px solid var(--brass);border-right:1px solid var(--brass);
  transform:translateY(-50%) rotate(45deg);background:var(--navy);z-index:2;
}
.cycle-step:last-child::after{display:none}
@media (max-width:900px){
  .cycle{grid-template-columns:1fr}
  .cycle-step{border-right:0;border-bottom:1px solid var(--line-inv)}
  .cycle-step:last-child{border-bottom:0}
  .cycle-step::after{right:auto;left:50%;top:auto;bottom:-7px;transform:translateX(-50%) rotate(135deg)}
}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps>div{background:var(--paper);padding:clamp(24px,2.8vw,34px)}
.steps .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--brass-2);display:block;margin-bottom:.9rem}
.steps h3{font-size:1rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.6rem}
.steps p{font-size:.92rem;color:var(--tx-500);margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-inv);border-block:1px solid var(--line-inv)}
.stats>div{background:var(--navy);padding:clamp(22px,2.6vw,30px) clamp(18px,2vw,26px)}
.stats .v{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.stats .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-inv-2);margin-top:.6rem}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Buyer questions ---------- */
.qlist{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-inv);border:1px solid var(--line-inv)}
.qlist div{background:var(--ink);padding:clamp(20px,2.4vw,28px);display:flex;gap:16px;align-items:flex-start}
.qlist .qi{font-family:var(--mono);font-size:.68rem;color:var(--brass);flex:none;padding-top:.36em;letter-spacing:.1em}
.qlist p{margin:0;font-size:1.02rem;color:var(--tx-inv);line-height:1.42;letter-spacing:-.011em}
@media (max-width:820px){.qlist{grid-template-columns:1fr}}

/* ---------- Report mockup ---------- */
.report{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2);padding:clamp(24px,3vw,40px);position:relative}
.report::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ink)}
.report-tag{
  position:absolute;top:-13px;right:clamp(16px,3vw,32px);background:var(--brass);color:#241B08;
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;
}
.report-hd{border-bottom:1px solid var(--line);padding-bottom:1.2rem;margin-bottom:1.4rem}
.report-hd .t{font-size:1.16rem;font-weight:600;color:var(--tx-900);letter-spacing:-.018em}
.report-hd .m{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;color:var(--tx-400);margin-top:.55rem}
.toc{list-style:none;padding:0;margin:0;columns:2;column-gap:2.4rem}
.toc li{
  break-inside:avoid;margin:0;padding:.5rem 0;border-bottom:1px dotted var(--line);
  font-size:.87rem;color:var(--tx-700);display:flex;justify-content:space-between;gap:1rem;
}
.toc li span{font-family:var(--mono);font-size:.68rem;color:var(--tx-400);flex:none}
@media (max-width:640px){.toc{columns:1}}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);background:#fff;margin-bottom:1.6rem}
table.t{font-size:.92rem;min-width:520px}
table.t th,table.t td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.t thead th{
  background:var(--paper-2);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-700);font-weight:650;border-bottom:1px solid var(--line);
}
table.t tbody tr:last-child td{border-bottom:0}
table.t td:first-child{color:var(--tx-900);font-weight:500}
table.t caption{text-align:left;font-size:.8rem;color:var(--tx-400);padding:12px 18px;border-bottom:1px solid var(--line-2)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:20px 40px 20px 0;position:relative;list-style:none;
  font-size:1.04rem;font-weight:550;color:var(--tx-900);letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:27px;width:10px;height:10px;
  border-right:1.5px solid var(--brass-2);border-bottom:1.5px solid var(--brass-2);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq .a{padding:0 40px 22px 0;color:var(--tx-500);font-size:.97rem}
.faq .a p:last-child{margin-bottom:0}

/* ---------- Callouts ---------- */
.note{border-left:2px solid var(--brass-2);background:var(--paper-2);padding:20px 24px;font-size:.93rem;color:var(--tx-500)}
.note strong{color:var(--tx-900)}
.dark .note,.ink .note{background:rgba(255,255,255,.05);color:var(--tx-inv-2);border-left-color:var(--brass)}
.disclaimer{border:1px solid var(--line);background:var(--paper-2);padding:20px 24px;font-size:.87rem;color:var(--tx-500)}
.fact{border:1px solid var(--line);background:#fff;padding:22px 26px;margin-bottom:1.4rem}
.fact .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;color:var(--brass-2);display:block;margin-bottom:.75rem}
.fact p:last-child{margin-bottom:0}
.fact.assess{background:var(--paper-2);border-left:2px solid var(--ink)}
.fact.assess .lbl{color:var(--tx-700)}

/* ---------- Scenarios ---------- */
.scenario{border:1px solid var(--line);background:#fff;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column}
.scenario .tag{
  display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--tx-400);border:1px solid var(--line);padding:5px 10px;margin-bottom:1.2rem;
}
.scenario h3{font-size:1.08rem;margin-bottom:.4rem}
.scenario dl{margin:0}
.scenario dt{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-2);font-weight:650;margin-top:1.15rem}
.scenario dd{margin:.5rem 0 0;font-size:.94rem;color:var(--tx-500)}
.scenario dd ul{margin:0;padding-left:1.1em}

/* ---------- Article ---------- */
.article{font-size:1.06rem;line-height:1.72}
.article h2{font-size:clamp(1.35rem,2.3vw,1.72rem);margin:2.6rem 0 1rem;letter-spacing:-.022em}
.article h3{font-size:clamp(1.08rem,1.7vw,1.22rem);margin:2rem 0 .8rem}
.article ul,.article ol{margin-bottom:1.5rem}
.article li{margin-bottom:.55em}
.article a{color:var(--brass-2);text-decoration:underline;text-underline-offset:3px}
.article a:hover{color:var(--tx-900)}
.article .tbl-wrap{margin-block:1.8rem}
.article>p:first-of-type{font-size:1.13rem;color:var(--tx-700)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.79rem;color:var(--tx-inv-2);padding-top:1.4rem;margin-top:1.6rem;border-top:1px solid var(--line-inv)}
.meta-row .mi{display:flex;gap:7px}
.meta-row .mk{color:rgba(255,255,255,.42)}
.pill{display:inline-block;font-size:.66rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);border:1px solid rgba(199,164,105,.45);padding:5px 11px;border-radius:2px}
.pill-l{color:var(--brass-2);border-color:rgba(150,116,47,.4)}
.takeaway{background:var(--ink);color:var(--tx-inv-2);padding:clamp(24px,3vw,34px);margin-bottom:2.4rem;border-left:3px solid var(--brass)}
.takeaway .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;color:var(--brass);display:block;margin-bottom:.9rem}
.takeaway p{color:#E4E8EE;font-size:1.04rem;margin:0}
.sources{font-size:.9rem;color:var(--tx-500)}
.sources li{margin-bottom:.5em}

/* Insight cards */
.icard{
  background:#fff;border:1px solid var(--line);padding:clamp(22px,2.4vw,28px);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.icard:hover{border-color:var(--brass-2);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.icard h3{font-size:1.08rem;line-height:1.32;margin:.95rem 0 .7rem}
.icard p{font-size:.92rem;color:var(--tx-500);margin-bottom:1.2rem}
.icard .dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--tx-400);margin-top:auto}

/* ---------- Forms ---------- */
.form{display:grid;gap:30px}
.fset{border:0;padding:0;margin:0;display:grid;gap:20px}
.fset legend{
  font-size:.72rem;font-weight:650;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-2);
  padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line);width:100%;
}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:660px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.83rem;font-weight:600;color:var(--tx-900)}
.field .hint{font-size:.79rem;color:var(--tx-400);margin:0}
.req{color:var(--alert);font-weight:600}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--tx-900);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;min-height:48px;
  transition:border-color .16s,box-shadow .16s;
}
textarea{min-height:132px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237E889A' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
input:focus,select:focus,textarea:focus{border-color:var(--brass-2);box-shadow:0 0 0 3px rgba(199,164,105,.2);outline:none}
.optgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:820px){.optgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.optgrid{grid-template-columns:1fr}}
.opt{
  display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);background:#fff;
  padding:13px 15px;border-radius:var(--radius);cursor:pointer;font-size:.9rem;min-height:48px;
  transition:border-color .16s,background .16s;
}
.opt:hover{border-color:var(--brass-2)}
.opt input{margin:0;accent-color:var(--brass-2);width:17px;height:17px;flex:none;margin-top:3px}
.opt:has(input:checked){border-color:var(--brass-2);background:#FFFDF7}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--tx-500)}
.consent input{margin-top:4px;accent-color:var(--brass-2);width:17px;height:17px;flex:none}
.form-note{font-size:.85rem;color:var(--tx-400)}
.err{color:var(--alert);font-size:.82rem;display:none;font-weight:500}
.field[data-invalid] .err,.fset[data-invalid] .err{display:block}
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{border-color:var(--alert)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{padding:16px 20px;border-left:2px solid var(--brass-2);background:var(--paper-2);font-size:.93rem;display:none}
.form-status[data-show]{display:block}

/* ---------- CTA ---------- */
.cta-band{background:var(--ink);color:var(--tx-inv-2)}
.cta-band h2{color:#fff}
.cta-band .btn-row{margin-top:2.2rem;justify-content:center}
.cta-inline{
  border:1px solid var(--line);background:var(--paper-2);padding:clamp(26px,3.2vw,38px);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
}
.cta-inline h2{font-size:clamp(1.18rem,2vw,1.48rem);margin:0 0 .5rem}
.cta-inline p{margin:0;color:var(--tx-500);font-size:.95rem;max-width:52ch}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:var(--tx-inv-2);padding-block:clamp(48px,6vw,76px) 34px;font-size:.9rem}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,48px)}
@media (max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr h2{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:1.1rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.62em}
.ftr a{color:var(--tx-inv-2);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-brand .brand{margin-bottom:1.1rem;padding-top:0}
.ftr-brand p{font-size:.9rem;color:var(--tx-inv-2);max-width:38ch}
.ftr-legal{margin-top:clamp(34px,4.5vw,54px);padding-top:26px;border-top:1px solid var(--line-inv-2);font-size:.79rem;color:#8A94A3;line-height:1.68}
.ftr-legal p{max-width:104ch}
.ftr-bottom{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;margin-top:22px;font-size:.78rem}

/* ---------- Misc ---------- */
.divider-label{
  display:flex;align-items:center;gap:18px;
  font-size:.7rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-500);
  margin-bottom:1.6rem;
}
.divider-label::after{content:"";flex:1;height:1px;background:var(--line)}
.dark .divider-label,.ink .divider-label{color:var(--tx-inv-2)}
.dark .divider-label::after,.ink .divider-label::after{background:var(--line-inv)}
.anchor-nav{position:sticky;top:74px;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.anchor-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.anchor-nav li{margin:0}
.anchor-nav a{display:block;padding:14px 15px;white-space:nowrap;font-size:.8rem;color:var(--tx-500);text-decoration:none;border-bottom:2px solid transparent}
.anchor-nav a:hover{color:var(--tx-900);border-color:var(--brass-2)}
/* Founder portrait. Sized for a studio headshot on a light ground, so the
   caption sits below the image rather than in a scrim over the subject. */
.portrait{margin:0;border:1px solid var(--line);background:var(--paper-2);overflow:hidden}
.portrait img,.portrait svg{
  display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 22%;
}
.portrait figcaption{
  padding:14px 20px;background:#fff;border-top:1px solid var(--line);
  font-size:.78rem;letter-spacing:.01em;color:var(--tx-500);
}
.portrait figcaption strong{color:var(--tx-900);font-weight:600}
/* Secondary service photograph — deliberately smaller than the business portrait. */
.portrait-sm{max-width:340px}
.portrait-sm img{aspect-ratio:3/2;object-position:50% 30%}
/* ---------- Photography ---------- */
.media{margin:0;position:relative;overflow:hidden;background:var(--navy-2);border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media-tall{aspect-ratio:4/5}
.media-wide{aspect-ratio:16/9}
.media-square{aspect-ratio:1/1}
.dark .media,.ink .media{border-color:var(--line-inv)}
.media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  background:linear-gradient(transparent,rgba(7,12,21,.88));
  font-size:.75rem;letter-spacing:.02em;color:var(--tx-inv-2);
}

/* Full-width image band with a dark scrim, used between sections */
.band{position:relative;isolation:isolate;background:var(--ink);overflow:hidden}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.42}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,12,21,.94) 0%,rgba(7,12,21,.82) 46%,rgba(7,12,21,.62) 100%);
}
.band .wrap{position:relative}

.kv{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.kv>div{background:#fff;padding:16px 20px;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;font-size:.93rem}
.kv dt,.kv .k{font-weight:600;color:var(--tx-900);margin:0}
.kv dd,.kv .v{margin:0;color:var(--tx-500)}
@media (max-width:600px){.kv>div{grid-template-columns:1fr;gap:6px}}

/* Crop position for page-header photography (set via `photopos` front matter). */
.objpos-top img{object-position:50% 0%}
.objpos-upper img{object-position:50% 25%}
.objpos-center img{object-position:50% 50%}
.objpos-lower img{object-position:50% 72%}
.objpos-bottom img{object-position:50% 100%}