/* ==========================================================================
   DASATECH — DASA Technical Services, LLC
   Design system
   Palette : ink / deep slate / mist / seal gold / assessor teal / finding rust
   Type    : Archivo (display) · IBM Plex Sans (body) · IBM Plex Mono (data)
   ========================================================================== */

:root{
  /* Brand: sampled from Dasatech-logo-color-clear.png */
  --brand:#0066B3;        /* logo blue   */
  --brand-lt:#3E92DA;     /* lift for dark grounds */
  --steel:#A7A9AC;        /* logo grey   */

  --ink:#04121D;
  --ink-2:#0A2236;
  --ink-3:#123A55;
  --mist:#EDF1F5;
  --mist-2:#DFE7EE;
  --paper:#FFFFFF;
  --muted:#6B7C8A;
  --muted-dark:#9FB1C0;
  --gold:#0066B3;         /* accent role now carried by brand blue */
  --teal:#3E92DA;
  --rust:#B4523C;
  --amber:#D89B34;

  --line:#D6DFE7;
  --line-dark:rgba(237,241,245,.16);

  --shell:1200px;
  --gutter:clamp(20px,5vw,56px);

  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  --step-h1:clamp(2.4rem,5.4vw,4.1rem);
  --step-h2:clamp(1.75rem,3.2vw,2.6rem);
  --step-h3:clamp(1.15rem,1.7vw,1.45rem);

  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{font-size:var(--step-h1);letter-spacing:-.035em}
h2{font-size:var(--step-h2);letter-spacing:-.028em}
h3{font-size:var(--step-h3);letter-spacing:-.018em}
h4{font-size:1.02rem;letter-spacing:-.01em}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- layout - */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band{padding:clamp(64px,8vw,116px) 0}
.band--tight{padding:clamp(48px,5vw,72px) 0}
.band--mist{background:var(--mist)}
.band--ink{background:var(--ink);color:var(--mist)}
.band--ink h1,.band--ink h2,.band--ink h3{color:var(--paper)}
.band--rule{border-top:1px solid var(--line)}

.grid{display:grid;gap:clamp(20px,2.4vw,32px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.split--wide-left{grid-template-columns:1.25fr .9fr}

.measure{max-width:64ch}
.measure-tight{max-width:52ch}

/* ------------------------------------------------------------ typography - */

.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 1.1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;
  background:var(--gold);
  flex:none;
}
.band--ink .eyebrow{color:var(--gold)}
.band--ink .eyebrow::before{background:var(--gold)}

.lede{
  font-size:clamp(1.06rem,1.45vw,1.24rem);
  line-height:1.6;
  color:var(--ink-3);
}
.band--ink .lede{color:var(--muted-dark)}

.tag{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.section-head{margin-bottom:clamp(32px,4vw,52px);max-width:62ch}

/* --------------------------------------------------------------- buttons - */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.95rem 1.5rem;
  border:1px solid transparent;
  background:var(--brand);
  color:var(--paper);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
  cursor:pointer;
}
.btn:hover{background:#0575CC;transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.band--ink .btn--ghost{border-color:var(--line-dark);color:var(--mist)}
.band--ink .btn--ghost:hover{background:var(--mist);color:var(--ink);border-color:var(--mist)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

.link-more{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--f-mono);
  font-size:.75rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--gold);
  padding-bottom:.25rem;
  transition:gap .2s var(--ease),color .2s var(--ease);
}
.link-more:hover{gap:.95rem;color:var(--teal)}
.band--ink .link-more{color:var(--paper)}

/* ---------------------------------------------------------------- header - */

.utility{
  background:var(--ink);
  color:var(--muted-dark);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  border-bottom:1px solid var(--line-dark);
}
.utility .shell{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:40px;
}
.utility a{color:var(--mist);text-decoration:none}
.utility a:hover{color:var(--gold)}
.utility__set{display:flex;gap:22px;align-items:center}
.utility__note{display:flex;align-items:center;gap:.55rem}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}

.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead .shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:76px;
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.brand__mark{
  width:38px;height:38px;
  border:1px solid var(--gold);
  display:grid;place-items:center;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--gold);
  flex:none;
}
.brand__name{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;font-size:1.28rem;line-height:1}
.brand__sub{
  display:block;
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-dark);
  margin-top:5px;
}

.nav{display:flex;align-items:center;gap:6px}
.nav__link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.6rem .85rem;
  text-decoration:none;
  color:var(--ink-3);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.005em;
  border-bottom:2px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
  background:none;border-top:0;border-left:0;border-right:0;
  font-family:var(--f-body);
  cursor:pointer;
}
.nav__link:hover{color:var(--brand)}
.nav__link[aria-current="page"]{color:var(--brand);border-bottom-color:var(--brand)}
.nav__caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.nav__item{position:relative}
.nav__item.is-open .nav__caret{transform:rotate(-135deg) translate(-3px,-3px)}

.dropdown{
  position:absolute;
  top:calc(100% + 14px);
  left:-12px;
  width:360px;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  box-shadow:0 26px 60px -28px rgba(6,23,30,.55);
  padding:8px;
  display:none;
}
.nav__item.is-open .dropdown{display:block}
.dropdown a{
  display:block;
  padding:.7rem .85rem;
  text-decoration:none;
  border-left:2px solid transparent;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.dropdown a:hover{background:var(--mist);border-left-color:var(--teal)}
.dropdown__code{
  font-family:var(--f-mono);
  font-size:.64rem;
  letter-spacing:.14em;
  color:var(--teal);
  display:block;
  margin-bottom:2px;
}
.dropdown__name{font-weight:600;font-size:.94rem;color:var(--ink);letter-spacing:-.01em}
.dropdown__desc{font-size:.8rem;color:var(--muted);line-height:1.45}

.nav__cta{margin-left:10px}
.nav__cta .btn{padding:.72rem 1.1rem;font-size:.72rem}

.burger{
  display:none;
  width:44px;height:44px;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  padding:0;
  position:relative;
}
.burger span{
  position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{display:none;background:var(--ink-2);border-bottom:1px solid var(--line-dark)}
.mobile-nav.is-open{display:block}
.mobile-nav a{
  display:block;
  padding:.9rem 0;
  color:var(--mist);
  text-decoration:none;
  border-bottom:1px solid var(--line-dark);
  font-size:1rem;
}
.mobile-nav a.sub{padding-left:18px;font-size:.9rem;color:var(--muted-dark)}
.mobile-nav .btn{margin:20px 0 26px;width:100%;justify-content:center}

/* ------------------------------------------------------------------ hero - */

.hero{
  background:var(--ink);
  color:var(--mist);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-dark);
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(760px 420px at 12% 6%,rgba(46,140,138,.16),transparent 62%),
    radial-gradient(620px 380px at 88% 92%,rgba(216,161,60,.11),transparent 60%);
  pointer-events:none;
}
.hero .shell{position:relative;z-index:2}
.hero__grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(36px,5vw,76px);
  align-items:center;
  padding:clamp(60px,7.5vw,104px) 0;
}
.hero h1{color:var(--paper)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__lede{font-size:clamp(1.06rem,1.5vw,1.26rem);color:var(--muted-dark);max-width:50ch;margin-top:1.4rem}

.hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:2.6rem;
  border-top:1px solid var(--line-dark);
}
.hero__fact{
  padding:1.1rem 1.6rem 0 0;
  margin-right:1.6rem;
  border-right:1px solid var(--line-dark);
}
.hero__fact:last-child{border-right:0}
.hero__fact b{
  display:block;
  font-family:var(--f-display);
  font-size:1.72rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--paper);
  line-height:1;
}
.hero__fact span{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-top:.5rem;
}

/* --------------------------------------------- signature: control ledger - */

.ledger{
  background:rgba(233,238,240,.035);
  border:1px solid var(--line-dark);
  border-top:2px solid var(--gold);
  padding:0;
}
.ledger__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:.85rem 1.15rem;
  border-bottom:1px solid var(--line-dark);
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-dark);
}
.ledger__live{display:flex;align-items:center;gap:.5rem;color:var(--teal)}
.ledger__live .dot{animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.ledger__rows{max-height:392px;overflow:hidden}
.ledger__row{
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:14px;
  align-items:center;
  padding:.62rem 1.15rem;
  border-bottom:1px solid rgba(233,238,240,.07);
  font-size:.86rem;
}
.ledger__row:last-child{border-bottom:0}
.ledger__id{font-family:var(--f-mono);font-size:.78rem;color:var(--gold);letter-spacing:.06em}
.ledger__name{color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.28rem .55rem;
  border:1px solid currentColor;
  white-space:nowrap;
  transition:color .35s var(--ease);
}
.chip--sat{color:var(--brand-lt)}
.chip--poam{color:var(--amber)}
.chip--other{color:var(--rust)}
.ledger__foot{
  padding:.8rem 1.15rem;
  border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.1em;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:12px;
}

/* ------------------------------------------------------------- page head - */

.pagehead{background:var(--ink);color:var(--mist);border-bottom:1px solid var(--line-dark);position:relative;overflow:hidden}
.pagehead::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 360px at 82% 10%,rgba(46,140,138,.15),transparent 62%);
  pointer-events:none;
}
.pagehead .shell{position:relative;z-index:2;padding-block:clamp(46px,6vw,84px)}
.pagehead h1{color:var(--paper);max-width:20ch}
.pagehead .lede{max-width:60ch;margin-top:1.2rem}

.crumbs{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.crumbs a{color:var(--muted-dark);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--gold)}

/* ----------------------------------------------------------------- cards - */

.card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(22px,2.4vw,30px);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  text-decoration:none;
  color:inherit;
  position:relative;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
a.card:hover{
  border-color:var(--ink);
  transform:translateY(-3px);
  box-shadow:0 22px 44px -30px rgba(6,23,30,.6);
}
.card__code{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding-bottom:.85rem;
  margin-bottom:.4rem;
}
.card h3{margin:0}
.card p{font-size:.94rem;color:var(--muted);line-height:1.6}
.card__foot{
  margin-top:auto;
  padding-top:.9rem;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:.5rem;
}
a.card:hover .card__foot{color:var(--teal)}
.card--mist{background:var(--mist);border-color:transparent}

/* ------------------------------------------------------------- framework - */

.frameworks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border:1px solid var(--line-dark);
  border-bottom:0;
}
.framework{
  padding:1.5rem 1.4rem;
  border-bottom:1px solid var(--line-dark);
  border-right:1px solid var(--line-dark);
}
.framework:last-child{border-right:0}
.framework b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--paper);letter-spacing:-.01em}
.framework span{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--muted);margin-top:.45rem;line-height:1.6}

/* ----------------------------------------------------------------- steps - */

.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--line)}
.step{
  counter-increment:step;
  display:grid;
  grid-template-columns:88px 1fr 1.15fr;
  gap:clamp(18px,3vw,44px);
  padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--f-mono);
  font-size:.9rem;
  letter-spacing:.06em;
  color:var(--gold);
  padding-top:.32rem;
}
.step h3{margin:0 0 .25rem}
.step__meta{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.step p{color:var(--muted);font-size:.96rem;margin:0}

/* ----------------------------------------------------------------- lists - */

.checks{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.checks li{
  position:relative;
  padding-left:1.8rem;
  font-size:.98rem;
  line-height:1.6;
}
.checks li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:9px;height:9px;
  border:1.5px solid var(--teal);
  transform:rotate(45deg);
}
.band--ink .checks li{color:var(--muted-dark)}
.band--ink .checks li strong{color:var(--paper)}

.deliverables{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);
}
.deliverables li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:baseline;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
  font-size:.97rem;
}
.deliverables .doc{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--teal);
  border:1px solid var(--line);
  padding:.2rem .5rem;
  white-space:nowrap;
}

/* ----------------------------------------------------------------- stats - */

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stat{padding:1.9rem 1.6rem 1.6rem 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(2rem,3.6vw,2.9rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
}
.stat span{
  display:block;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.7rem;
  line-height:1.55;
}

/* ------------------------------------------------------------------ tabs - */

.tabs{border-top:1px solid var(--line)}
.tabs__list{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line)}
.tabs__btn{
  appearance:none;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  padding:1rem 1.4rem 1rem 0;
  margin-right:1.6rem;
  font-family:var(--f-mono);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.tabs__btn:hover{color:var(--ink)}
.tabs__btn[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.tabs__panel{display:none;padding-top:clamp(28px,3.4vw,44px)}
.tabs__panel.is-active{display:block;animation:fade .32s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- quotes - */

.pull{
  border-left:2px solid var(--gold);
  padding:.3rem 0 .3rem 1.6rem;
  font-family:var(--f-display);
  font-size:clamp(1.2rem,2vw,1.6rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.35;
}

/* ------------------------------------------------------------------ form - */

.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field label{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:var(--f-body);
  font-size:1rem;
  padding:.85rem .95rem;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:0;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(46,140,138,.16);
}
.field textarea{min-height:140px;resize:vertical}
.form__note{font-size:.84rem;color:var(--muted)}
.form-status{
  display:none;
  border-left:2px solid var(--teal);
  background:var(--mist);
  padding:1rem 1.2rem;
  font-size:.94rem;
}
.form-status.is-visible{display:block}

/* -------------------------------------------------------------- contacts - */

.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.contact-list li{padding:1.1rem 0;border-bottom:1px solid var(--line-dark)}
.contact-list .tag{display:block;margin-bottom:.35rem;color:var(--muted)}
.contact-list a{color:var(--paper);text-decoration:none;font-size:1.06rem}
.contact-list a:hover{color:var(--gold)}

/* -------------------------------------------------------------- cta band - */

.cta{
  background:var(--ink-2);
  color:var(--mist);
  border-top:2px solid var(--gold);
}
.cta .shell{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
  padding-block:clamp(48px,5.5vw,76px);
}
.cta h2{color:var(--paper);margin:0}
.cta p{color:var(--muted-dark);margin-top:.9rem}

/* ---------------------------------------------------------------- footer - */

.footer{background:var(--ink);color:var(--muted-dark);font-size:.92rem}
.footer__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(26px,3vw,44px);
  padding-block:clamp(48px,5vw,72px);
}
.footer h4,.footer .fh{
  font-family:var(--f-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer a{color:var(--muted-dark);text-decoration:none}
.footer a:hover{color:var(--paper)}
.footer__bar{
  border-top:1px solid var(--line-dark);
  padding-block:1.3rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.09em;
  color:var(--muted);
}
.footer__brand .brand__name{color:var(--paper)}
.footer__blurb{margin-top:1.1rem;max-width:38ch;line-height:1.65}



/* --------------------------------------------------------------- reveals - */

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--gold);color:var(--ink);
  padding:.7rem 1.1rem;z-index:100;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------ responsive - */

@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .cta .shell{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .nav,.nav__cta{display:none}
  .burger{display:block}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .split,.split--wide-left{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding-right:1rem}
  .stat:nth-child(2){border-right:0}
  .step{grid-template-columns:60px 1fr;gap:16px}
  .step__body{grid-column:2}
  .step__detail{grid-column:2}
}

@media (max-width:620px){
  body{font-size:16px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line);padding:1.4rem 0}
  .stat:last-child{border-bottom:0}
  .utility__set--hide{display:none}
  .footer__top{grid-template-columns:1fr}
  .hero__fact{border-right:0;padding-right:0;margin-right:0;flex:1 1 45%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ------------------------------------------------------- figures & photos - */

.figure{
  margin:0;
  border:1px solid var(--line);
  background:var(--paper);
  padding:clamp(16px,2.2vw,26px);
}
.figure--ink{background:var(--ink-2);border-color:var(--line-dark)}
.fig{width:100%;height:auto;display:block;overflow:visible}
.figure__cap{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  margin-top:1.1rem;
  padding-top:.85rem;
  border-top:1px solid var(--line);
  line-height:1.6;
}
.figure__note{
  font-size:.8rem;
  color:var(--muted);
  margin:.55rem 0 0;
  line-height:1.55;
}
.band--ink .figure{background:rgba(233,238,240,.04);border-color:var(--line-dark)}
.band--ink .figure__cap{color:var(--mist);border-top-color:var(--line-dark)}

.figure-stack{display:grid;gap:clamp(20px,2.4vw,30px)}

.photo{
  background:
    linear-gradient(135deg,rgba(46,140,138,.12),transparent 60%),
    var(--ink-2);
  border:1px solid var(--line-dark);
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}
.photo::before{
  content:"";
  position:absolute;inset:10px;
  border:1px dashed rgba(233,238,240,.18);
  pointer-events:none;
}
.photo__inner{text-align:center;max-width:34ch;position:relative;z-index:2}
.photo__tag{
  display:block;
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.9rem;
}
.photo__label{
  display:block;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.08rem;
  letter-spacing:-.02em;
  color:var(--paper);
  line-height:1.3;
}
.photo__detail{
  display:block;
  font-size:.84rem;
  color:var(--muted-dark);
  margin-top:.6rem;
  line-height:1.55;
}

/* hero artwork layer */
.hero__art{
  position:absolute;
  right:-6%;
  top:50%;
  transform:translateY(-50%);
  width:min(58%,760px);
  opacity:.5;
  pointer-events:none;
  z-index:1;
}
.hero__art .hero-art{width:100%;height:auto}
@media (max-width:1080px){.hero__art{right:-18%;width:90%;opacity:.28}}

/* brand lockup */
.logo{display:block;height:44px;width:auto}
.footer__brand .logo{height:46px;margin-bottom:.9rem}
.masthead .brand{gap:0}
@media (max-width:620px){.logo{height:34px}}

/* wider two-column mega-menu for the expanded service list */
.dropdown{width:620px;display:none}
.nav__item.is-open .dropdown{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dropdown a:last-child{grid-column:1 / -1;border-top:1px solid var(--line);margin-top:4px}

/* ------------------------------------------------------------ data tables - */

.dtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.dtable{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px;background:var(--paper)}
.dtable th{
  text-align:left;
  font-family:var(--f-mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding:.9rem 1rem;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  background:var(--mist);
}
.dtable td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.dtable tr:last-child td{border-bottom:0}
.dtable tbody tr:hover{background:var(--mist)}
.dtable .num{font-family:var(--f-mono);font-size:.88rem;white-space:nowrap}
.dtable .total td{font-weight:600;background:var(--mist);border-top:2px solid var(--brand)}
.dtable .save{color:var(--brand);font-family:var(--f-mono);white-space:nowrap}

/* headline metric row */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.metric{padding:1.7rem 1.5rem 1.5rem 0;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--brand);
}
.band--ink .metric b{color:var(--brand-lt)}
.metric span{
  display:block;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.7rem;
  line-height:1.55;
}
.band--ink .metric{border-color:var(--line-dark)}
.band--ink .metric span{color:var(--muted-dark)}
@media (max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.metrics{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line);padding:1.3rem 0}}

/* product badge in nav + hero */
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--brand);color:var(--brand);
  padding:.3rem .6rem;margin-left:.5rem;
}
.band--ink .badge{border-color:var(--brand-lt);color:var(--brand-lt)}

.note{
  border-left:2px solid var(--steel);
  padding:.2rem 0 .2rem 1.2rem;
  font-size:.86rem;
  color:var(--muted);
  line-height:1.6;
  margin-top:1.4rem;
}

/* ==========================================================================
   CONTRAST CORRECTIONS
   Every text/background pair below was measured against WCAG AA.
   Failing pairs are corrected here; this block is last so it wins the cascade.
   ========================================================================== */

:root{
  /* darkened so body text clears 4.5:1 on both paper and mist */
  --muted:#566875;
  /* text-safe accent for dark grounds: brand blue at 3.2:1 was illegible */
  --on-dark-accent:#7FC0F0;
  --on-dark-muted:#9FB1C0;
  --on-dark-rust:#E08A72;
}

/* ---- accents on dark grounds ------------------------------------------- */
.band--ink .eyebrow,
.hero .eyebrow,
.pagehead .eyebrow,
.cta .eyebrow{color:var(--on-dark-accent)}

.band--ink .eyebrow::before,
.hero .eyebrow::before,
.pagehead .eyebrow::before{background:var(--on-dark-accent)}

.ledger__id{color:var(--on-dark-accent)}
.ledger__live{color:var(--on-dark-accent)}
.band--ink .metric b{color:var(--on-dark-accent)}
.band--ink .card__code{color:var(--on-dark-accent)}

/* ---- secondary text on dark grounds ------------------------------------ */
.hero__fact span,
.framework span,
.ledger__foot,
.footer__bar,
.crumbs,
.band--ink .note,
.band--ink .figure__note,
.band--ink .tag,
.contact-list .tag,
.card[style*="--ink"] .tag{color:var(--on-dark-muted)}

.crumbs a{color:var(--on-dark-muted)}
.crumbs a:hover,.crumbs span{color:var(--on-dark-accent)}
.utility{color:var(--on-dark-muted)}
.utility a:hover{color:var(--on-dark-accent)}
.footer a:hover{color:var(--paper)}
.footer h4,.footer .fh{color:var(--on-dark-accent)}
.nav__cta .btn,.mobile-nav .btn{color:var(--paper)}

/* ---- status chips: rust failed on dark, amber and blue pass ------------ */
.chip--other{color:var(--on-dark-rust)}
.chip--sat{color:var(--on-dark-accent)}

/* ---- small labels on LIGHT grounds: brand blue clears, light blue did not */
.card__code{color:var(--brand)}
.card--mist .card__code{color:var(--brand)}
.dropdown__code{color:var(--brand)}
.dtable .save{color:var(--brand)}
.eyebrow{color:var(--brand)}


/* ---- figures always sit on a light surface so chart labels stay legible - */
.band--ink .figure,
.figure--ink{background:var(--paper);border-color:var(--line)}
.band--ink .figure__cap,
.figure--ink .figure__cap{color:var(--ink);border-top-color:var(--line)}
.band--ink .figure__note,
.figure--ink .figure__note{color:var(--muted)}

/* ---- dark cards used on the contact page ------------------------------- */
.contact-list a{color:var(--paper)}
.contact-list a:hover{color:var(--on-dark-accent)}

/* ==========================================================================
   CONTRAST CORRECTIONS, PASS 2
   Fixes two faults: (a) ghost buttons rendered near-black on the dark hero,
   page heads and CTA, readable only on hover; (b) the pass-1 dark-band rules
   were inherited by WHITE cards nested inside dark bands.
   ========================================================================== */

/* ---- (a) ghost buttons on every dark ground, not just .band--ink -------- */
.hero .btn--ghost,
.pagehead .btn--ghost,
.cta .btn--ghost,
.band--ink .btn--ghost,
.footer .btn--ghost{
  background:transparent;
  border-color:rgba(237,241,245,.45);
  color:var(--paper);              /* 18.9:1 on ink — visible at rest */
}
.hero .btn--ghost:hover,
.pagehead .btn--ghost:hover,
.cta .btn--ghost:hover,
.band--ink .btn--ghost:hover,
.footer .btn--ghost:hover{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--ink);
}

/* solid buttons keep white text on brand blue in every context */
.btn{color:var(--paper)}
.btn:hover{color:var(--paper)}

/* ---- links and eyebrows on the remaining dark grounds ------------------- */
.hero .link-more,
.pagehead .link-more,
.cta .link-more{color:var(--paper);border-bottom-color:var(--on-dark-accent)}
.hero .link-more:hover,
.pagehead .link-more:hover,
.cta .link-more:hover{color:var(--on-dark-accent)}

/* ---- (b) WHITE cards nested in dark bands keep light-ground colours ----- */
.band--ink .card:not(.card--dark) .card__code{color:var(--brand)}
.band--ink .card:not(.card--dark) h3{color:var(--ink)}
.band--ink .card:not(.card--dark) p{color:var(--muted)}
.band--ink .card:not(.card--dark) .checks li{color:var(--ink)}
.band--ink .card:not(.card--dark) .checks li strong{color:var(--ink)}
.band--ink .card:not(.card--dark) .tag{color:var(--muted)}
.band--ink .card--mist .card__code{color:var(--brand)}
.band--ink .card--mist h3{color:var(--ink)}
.band--ink .card--mist p{color:var(--muted)}

/* tables nested in dark bands are white surfaces too */
.band--ink .dtable-wrap{border-color:var(--line)}
.band--ink .dtable td{color:var(--ink)}
.band--ink .dtable th{color:var(--muted)}
.band--ink .dtable .tag{color:var(--muted)}

/* ---- an explicitly dark card, used on the contact page ------------------ */
.card--dark{
  background:var(--ink);
  border-color:transparent;
  color:var(--mist);
}
.card--dark h3{color:var(--paper)}
.card--dark p{color:var(--on-dark-muted)}
.card--dark .card__code{color:var(--on-dark-accent);border-bottom-color:var(--line-dark)}
.card--dark .tag{color:var(--on-dark-muted)}
.card--dark .checks li{color:var(--mist)}
.card--dark .contact-list li{border-bottom-color:var(--line-dark)}

/* ==========================================================================
   CONTRAST CORRECTIONS, PASS 3
   The page head, hero and CTA are dark grounds that do NOT carry .band--ink,
   so the base light-ground rules were still reaching them. The standfirst
   under every page title measured 1.59:1. Scoped explicitly here.
   ========================================================================== */

.pagehead .lede,
.hero .lede,
.cta .lede,
.cta p{color:var(--on-dark-muted)}          /* 8.58:1 */

.pagehead p,
.hero p,
.cta p{color:var(--on-dark-muted)}

.pagehead h1,.pagehead h2,.pagehead h3,
.hero h1,.hero h2,.hero h3,
.cta h1,.cta h2,.cta h3{color:var(--paper)}

.pagehead .tag,
.hero .tag,
.cta .tag,
.pagehead .note,
.hero .note,
.cta .note{color:var(--on-dark-muted)}

.pagehead .crumbs,
.pagehead .eyebrow,
.hero .eyebrow,
.cta .eyebrow{color:var(--on-dark-accent)}

.pagehead .checks li,
.hero .checks li,
.cta .checks li{color:var(--mist)}
.pagehead .checks li strong,
.hero .checks li strong,
.cta .checks li strong{color:var(--paper)}

.pagehead strong,
.hero strong,
.cta strong{color:var(--paper)}

/* but anything on a light card inside those dark heads keeps light-ground colour */
.pagehead .card:not(.card--dark) p,
.hero .card:not(.card--dark) p,
.cta .card:not(.card--dark) p{color:var(--muted)}
.pagehead .card:not(.card--dark) h3,
.hero .card:not(.card--dark) h3,
.cta .card:not(.card--dark) h3{color:var(--ink)}

/* ---- dropdown items: title and description were adjacent inline spans, so
        they ran together on one line. Stack them with breathing room. ------- */
.dropdown__name{
  display:block;
  margin-bottom:.28rem;
  line-height:1.3;
}
.dropdown__desc{
  display:block;
  line-height:1.5;
}
.dropdown a{padding:.8rem .85rem}
.dropdown a:last-child .dropdown__name{margin-bottom:0}

/* mobile menu: sub-items get the same separation from their parent */
.mobile-nav a.sub{padding-top:.7rem;padding-bottom:.7rem}

/* honeypot: off-screen rather than display:none, which some bots detect */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status.is-error{border-left-color:var(--rust)}