/* ============================================================
   KEEL Energy — site stylesheet
   Tokens from KEEL Brand Standards v3.1 (2026-06-26) §4–5.
   RULES: KEEL Gold is an accent (≤5% of any screen) and never body
   text; headings KEEL Navy; body KEEL Slate; links Hull Teal.
   Layout system inherited from the 80° West build (Sep 2026).
   ============================================================ */

:root{
  color-scheme: light;

  /* identity */
  --k-navy:#0E2540;
  --k-navy-deep:#0A1A2E;
  --k-teal:#1F5F7F;
  --k-gold:#C99A26;
  --k-gold-warm:#D6AE57;

  /* neutrals */
  --k-paper:#FFFFFF;
  --k-mist:#F5F2ED;
  --k-fog:#EDF0F3;
  --k-charcoal:#40576B;
  --k-slate:#40576B;
  --k-slate-tint:#8094A8;
  --k-line:#EDF0F3;
  --k-line-strong:#DDE1E7;

  /* on-dark secondary */
  --k-slate-on-dark:#B4BBC4;
  --k-line-on-dark:rgba(255,255,255,.16);

  /* functional */
  --k-ok:#2D8659; --k-warn:#D69412; --k-bad:#B33A3A;

  /* semantic */
  --k-bg:var(--k-paper);
  --k-bg-alt:var(--k-mist);
  --k-text:var(--k-slate);
  --k-text-2:var(--k-slate-tint);
  --k-heading:var(--k-navy);
  --k-accent:var(--k-gold);
  --k-on-dark:#FFFFFF;
  --k-on-gold:var(--k-navy);

  /* type */
  --k-font-heading:Inter,Arial,"Helvetica Neue",sans-serif;
  --k-font-body:Inter,Arial,"Helvetica Neue",sans-serif;
  --k-lh-display:1.02;
  --k-lh-heading:1.2;
  --k-lh-body:1.6;
  --k-track-eyebrow:.12em;
  --k-track-display:-.015em;

  --k-size-display:clamp(2.6rem,5vw,4.5rem);
  --k-size-h1:clamp(2.1rem,4vw,3.4rem);
  --k-size-h2:clamp(1.7rem,3vw,2.5rem);
  --k-size-h3:clamp(1.25rem,1.7vw,1.5rem);
  --k-size-body-lg:1.1875rem;
  --k-size-body:1rem;
  --k-size-small:.875rem;
  --k-size-eyebrow:.75rem;

  /* layout */
  --k-max:1240px;
  --k-measure:760px;
  --k-gutter:48px;
  --k-section:112px;
  --k-radius:4px;
  --k-radius-md:6px;
  --k-border:1px solid var(--k-line-strong);
  --k-shadow-header:0 1px 0 rgba(14,37,64,.10);

  /* motion */
  --k-fast:180ms; --k-base:240ms; --k-slow:420ms;
  --k-ease:cubic-bezier(.2,.7,.2,1);

  /* logo widths — primary lockup is 1398×460 (≈3.04:1); floor 180px on screen */
  --k-logo-header:212px;
  --k-logo-header-rev:212px;
  --k-logo-min:180px;
  --k-logo-min-rev:180px;
  --k-mark-header:44px;
  --k-mark-min:36px;

  --k-header-h:84px;
}

@media (max-width:1024px){ :root{ --k-gutter:32px; --k-section:92px; --k-header-h:76px } }
@media (max-width:768px){  :root{ --k-gutter:20px; --k-section:68px; --k-header-h:66px } }

/* ---------- 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 } }
body{
  margin:0;
  background:var(--k-bg);
  color:var(--k-text);
  font-family:var(--k-font-body);
  font-size:var(--k-size-body);
  line-height:var(--k-lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,h4,p,ul,ol,figure,dl{ margin:0 }
ul,ol{ padding:0; list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }

/* ---------- type ---------- */
h1,h2,h3,.k-display{
  font-family:var(--k-font-heading);
  font-weight:600;
  color:var(--k-heading);
  letter-spacing:var(--k-track-display);
  text-wrap:balance;
}
.k-display{ font-size:var(--k-size-display); line-height:var(--k-lh-display) }
h1{ font-size:var(--k-size-h1); line-height:1.05 }
h2{ font-size:var(--k-size-h2); line-height:var(--k-lh-heading) }
h3{ font-size:var(--k-size-h3); line-height:1.2; letter-spacing:-.01em }
.lede{ font-size:var(--k-size-body-lg); color:var(--k-text); max-width:var(--k-measure); text-wrap:pretty }
.eyebrow{
  font-family:var(--k-font-body); font-weight:600;
  font-size:var(--k-size-eyebrow); letter-spacing:var(--k-track-eyebrow);
  text-transform:uppercase; color:var(--k-slate);
  display:block;
}
.num{ font-variant-numeric:tabular-nums }
.small{ font-size:var(--k-size-small) }
p + p{ margin-top:1.1em }

/* ---------- layout ---------- */
.wrap{ max-width:var(--k-max); margin-inline:auto; padding-inline:var(--k-gutter) }
.section{ padding-block:var(--k-section) }
.section--tight{ padding-block:calc(var(--k-section) * .62) }
.measure{ max-width:var(--k-measure) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--k-navy); color:#fff; padding:14px 20px; border-radius:0 0 var(--k-radius) 0;
}
.skip:focus{ left:0 }

/* ============================================================
   THE MERIDIAN — the site's organizing device.
   80° West is a line of longitude; a 1px gold hairline carries
   structure down the page and stations mark the sequence.
   ============================================================ */
.meridian{
  position:relative;
  padding-left:44px;
}
.meridian::before{
  content:""; position:absolute; left:0; top:.35em; bottom:0;
  width:1px; background:var(--k-gold); opacity:.55;
}
.meridian__station{ position:relative }
.meridian__station::before{
  content:""; position:absolute; left:-44px; top:.62em;
  width:9px; height:9px; margin-left:-4px;
  background:var(--k-paper); border:1px solid var(--k-gold); border-radius:50%;
}
.k-dark .meridian__station::before{ background:var(--k-navy) }

/* short gold rule — a sanctioned gold use on light */
.rule-gold{ border:0; border-top:2px solid var(--k-gold); width:56px; margin:0 }
.rule-hair{ border:0; border-top:1px solid var(--k-line); margin:0 }
.k-dark .rule-hair{ border-top-color:var(--k-line-on-dark) }

/* ---------- dark grounds ---------- */
.k-dark{ background:var(--k-navy); color:var(--k-on-dark) }
.k-dark h1,.k-dark h2,.k-dark h3{ color:var(--k-on-dark) }
.k-dark .eyebrow{ color:var(--k-gold) }          /* 7.10:1 — passes */
.k-dark .lede,.k-dark .muted{ color:var(--k-slate-on-dark) }
.k-dark--deep{ background:var(--k-navy-deep) }
.k-dark--deep .eyebrow{ color:var(--k-gold) }    /* 6.59:1 — passes */
.bg-mist{ background:var(--k-mist) }
.muted{ color:var(--k-text-2) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px; border-radius:var(--k-radius);
  font-family:var(--k-font-body); font-weight:500; font-size:var(--k-size-body);
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background var(--k-base) var(--k-ease),
             color var(--k-base) var(--k-ease),
             border-color var(--k-base) var(--k-ease);
}
.btn--primary{ background:var(--k-navy); color:var(--k-on-dark) }
.btn--primary:hover{ background:var(--k-navy-deep) }
.btn--secondary{ background:transparent; color:var(--k-teal); border-color:var(--k-teal) }
.btn--secondary:hover{ background:var(--k-mist); border-color:var(--k-navy) }
.k-dark .btn--gold{ background:var(--k-gold); color:var(--k-on-gold) }
.k-dark .btn--gold:hover{ background:var(--k-gold-warm) }
.k-dark .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34) }
.k-dark .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff }
.btn__arrow{ transition:transform var(--k-base) var(--k-ease) }
.btn:hover .btn__arrow{ transform:translateX(3px) }

/* text link with gold underline on hover — gold as a rule, not as text */
.tlink{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:500; color:var(--k-navy);
  padding-bottom:3px; border-bottom:1px solid var(--k-line);
  transition:border-color var(--k-base) var(--k-ease);
}
.tlink:hover{ border-bottom-color:var(--k-gold) }
.k-dark .tlink{ color:#fff; border-bottom-color:rgba(255,255,255,.3) }
.k-dark .tlink:hover{ border-bottom-color:var(--k-gold) }

/* ---------- focus ---------- */
:focus-visible{ outline:2px solid var(--k-gold); outline-offset:3px; border-radius:2px }
.k-dark :focus-visible{ outline-color:var(--k-gold-warm) }

/* ============================================================
   Header
   ============================================================ */
.header{
  position:sticky; top:0; z-index:60;
  background:var(--k-paper);
  border-bottom:var(--k-border);
  box-shadow:var(--k-shadow-header);
}
.header__in{
  display:flex; align-items:center; gap:32px;
  min-height:var(--k-header-h);
}
.header__logo{ display:block; flex:0 0 auto; line-height:0 }
.header__lockup{ width:var(--k-logo-header); min-width:var(--k-logo-min); height:auto }
.header__mark{ display:none; width:var(--k-mark-header); min-width:var(--k-mark-min); height:auto }
/* Between 900px and 380px the full lockup still clears its 220px artwork floor
   alongside the menu button, so it stays. Below 380px there is no longer room,
   and the standard's own remedy applies: the compact 80°W mark takes over
   (floor 96px). The lockup is never rendered under 220px. */
@media (max-width:900px){ .header__lockup{ width:var(--k-logo-min) } }
@media (max-width:379px){
  .header__lockup{ display:none }
  .header__mark{ display:block }
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:34px }
.nav__link{
  position:relative; text-decoration:none; font-size:.9375rem; font-weight:500;
  color:var(--k-navy); padding:6px 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--k-gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--k-base) var(--k-ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1) }
.nav__cta{ margin-left:6px }

.nav-toggle{
  display:none; margin-left:auto; align-items:center; justify-content:center;
  width:48px; height:48px; background:none; border:1px solid var(--k-line);
  border-radius:var(--k-radius); cursor:pointer;
}
.nav-toggle__bar{ display:block; width:20px; height:1.5px; background:var(--k-navy); position:relative }
.nav-toggle__bar::before,.nav-toggle__bar::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--k-navy);
  transition:transform var(--k-base) var(--k-ease), opacity var(--k-fast) linear;
}
.nav-toggle__bar::before{ top:-6px } .nav-toggle__bar::after{ top:6px }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{ background:transparent }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{ transform:translateY(6px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:900px){
  .nav-toggle{ display:inline-flex }
  .nav{
    position:fixed; inset:var(--k-header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--k-paper); border-bottom:var(--k-border);
    padding:8px var(--k-gutter) 28px; margin:0;
    max-height:calc(100dvh - var(--k-header-h)); overflow-y:auto;
  }
  .nav[hidden]{ display:none }
  .nav__link{ padding:18px 0; border-bottom:var(--k-border); font-size:1.0625rem }
  .nav__link::after{ display:none }
  .nav__link[aria-current="page"]{ color:var(--k-navy); font-weight:600 }
  .nav__cta{ margin:22px 0 0 }
  .btn.nav__cta{ width:100% }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding-block:clamp(72px,9vw,132px) calc(var(--k-section) * .78) }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:clamp(40px,6vw,88px); align-items:center }
@media (max-width:960px){ .hero__grid{ grid-template-columns:1fr; gap:48px } }
.hero .eyebrow{ margin-bottom:24px }
.hero__h1{ margin-bottom:28px }
.hero__body{ font-size:var(--k-size-body-lg); color:var(--k-text); max-width:52ch }
.hero__tech{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--k-line);
  font-family:var(--k-font-heading); font-weight:500; color:var(--k-navy);
  font-size:1.0625rem; letter-spacing:-.005em;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px }
.hero__art{ position:relative }
@media (max-width:960px){ .hero__art{ max-width:520px } }

.page-hero{ padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,72px); border-bottom:var(--k-border) }
.page-hero .eyebrow{ margin-bottom:20px }
.page-hero h1{ margin-bottom:26px }

/* ============================================================
   Sequence strip (Originate → Structure → Finance → Execute)
   ============================================================ */
.seq{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; border-top:1px solid var(--k-line) }
@media (max-width:820px){ .seq{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .seq{ grid-template-columns:1fr } }
.seq__item{ padding:28px 28px 30px 0; border-right:1px solid var(--k-line); position:relative }
.seq__item:last-child{ border-right:0 }
@media (max-width:820px){
  .seq__item:nth-child(2n){ border-right:0 }
  .seq__item:nth-child(-n+2){ border-bottom:1px solid var(--k-line) }
  .seq__item{ padding-right:24px }
}
@media (max-width:520px){ .seq__item{ border-right:0; border-bottom:1px solid var(--k-line) } }
.seq__item::before{
  content:""; position:absolute; top:-1px; left:0; width:34px; height:2px; background:var(--k-gold);
}
.seq__n{ font-family:var(--k-font-heading); font-weight:600; font-size:.8125rem;
  letter-spacing:.1em; color:var(--k-slate); display:block; margin-bottom:12px }
.seq__t{ font-family:var(--k-font-heading); font-weight:600; font-size:1.125rem;
  color:var(--k-navy); margin-bottom:8px }
.seq__d{ font-size:.9375rem; color:var(--k-text-2); line-height:1.55 }

/* ============================================================
   Capability rows — editorial, numbered, hairline-separated
   ============================================================ */
.rows{ border-top:1px solid var(--k-line) }
.k-dark .rows{ border-top-color:var(--k-line-on-dark) }
.row{
  display:grid; grid-template-columns:78px minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,3vw,48px); align-items:start;
  padding:38px 0; border-bottom:1px solid var(--k-line);
  transition:background var(--k-base) var(--k-ease);
}
.k-dark .row{ border-bottom-color:var(--k-line-on-dark) }
.row:hover{ background:var(--k-mist) }
.k-dark .row:hover{ background:rgba(255,255,255,.04) }
@media (max-width:840px){
  .row{ grid-template-columns:56px minmax(0,1fr); row-gap:14px }
  .row__body{ grid-column:2 }
}
.row__n{
  font-family:var(--k-font-heading); font-weight:600; font-size:.8125rem;
  letter-spacing:.09em; color:var(--k-slate); padding-top:.42em;
}
.k-dark .row__n{ color:var(--k-gold) }
.row__t{ font-size:clamp(1.25rem,1.7vw,1.55rem) }
.row__body{ color:var(--k-text-2); font-size:1.0625rem }
.k-dark .row__body{ color:var(--k-slate-on-dark) }
.row__meta{ margin-top:18px; display:grid; gap:10px }
.row__meta div{ font-size:.9375rem; line-height:1.5 }
.row__meta dd{ margin:0 }
.row__meta dt{
  font-size:var(--k-size-eyebrow); letter-spacing:var(--k-track-eyebrow);
  text-transform:uppercase; font-weight:600; color:var(--k-slate); margin-bottom:3px;
}
.k-dark .row__meta dt{ color:var(--k-gold) }

/* ============================================================
   Technology tiles — original technical line-drawings
   ============================================================ */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--k-line); border:1px solid var(--k-line) }
.tiles--3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1000px){ .tiles{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .tiles{ grid-template-columns:1fr } }
.tile{
  background:var(--k-paper); padding:32px 30px 30px; display:flex; flex-direction:column; gap:18px;
  transition:background var(--k-base) var(--k-ease);
}
.tile:hover{ background:var(--k-mist) }
.tile__rule{ display:block; width:32px; height:2px; background:var(--k-gold) }
.tile > div{ flex:1 }
.tile h3{ font-size:1.1875rem; margin-bottom:10px }
.tile p{ font-size:.9375rem; color:var(--k-text-2); line-height:1.6 }
.tile__link{ font-size:.875rem; align-self:start }

/* ============================================================
   Structures grid (on navy)
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--k-line-on-dark);
  border-block:1px solid var(--k-line-on-dark) }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr } }
.cell{ background:var(--k-navy); padding:32px 32px 34px }
.k-dark--deep .cell{ background:var(--k-navy-deep) }
.cell h3{ font-size:1.125rem; margin-bottom:10px }
.cell p{ font-size:.9375rem; color:var(--k-slate-on-dark); line-height:1.6 }
.cell__n{ font-size:.75rem; letter-spacing:.1em; color:var(--k-teal); font-weight:600;
  display:block; margin-bottom:14px; font-family:var(--k-font-heading) }

.disclaimer{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--k-line-on-dark);
  font-size:.875rem; color:var(--k-slate-on-dark); max-width:72ch;
}
.disclaimer--light{ border-top-color:var(--k-line); color:var(--k-slate) }

/* ============================================================
   Process stations
   ============================================================ */
.stations{ display:grid; gap:0; margin-top:8px }
.station{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:clamp(18px,3vw,40px);
  padding:30px 0; border-bottom:1px solid var(--k-line); position:relative;
}
.station:last-child{ border-bottom:0 }
.k-dark .station{ border-bottom-color:var(--k-line-on-dark) }
.station__n{
  font-family:var(--k-font-heading); font-weight:600; font-size:1.5rem;
  color:var(--k-navy); line-height:1; padding-top:.18em; position:relative;
}
.k-dark .station__n{ color:var(--k-gold) }
.station__n::after{
  content:""; position:absolute; left:0; bottom:-8px; width:22px; height:2px; background:var(--k-gold);
}
.station h3{ margin-bottom:8px; font-size:1.25rem }
.station p{ color:var(--k-text-2); font-size:1rem; max-width:66ch }
.k-dark .station p{ color:var(--k-slate-on-dark) }

/* ============================================================
   Audience pathways
   ============================================================ */
.paths{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
@media (max-width:900px){ .paths{ grid-template-columns:1fr } }
.path{
  border:1px solid var(--k-line); border-radius:var(--k-radius-md);
  padding:34px 30px 30px; display:flex; flex-direction:column; gap:14px;
  background:var(--k-paper);
  transition:border-color var(--k-base) var(--k-ease), transform var(--k-base) var(--k-ease);
}
.path:hover{ border-color:var(--k-navy); transform:translateY(-2px) }
@media (prefers-reduced-motion:reduce){ .path:hover{ transform:none } }
.path h3{ font-size:1.1875rem }
.path p{ color:var(--k-text-2); font-size:.9375rem; flex:1; line-height:1.6 }
.path__mark{ width:28px; height:2px; background:var(--k-gold) }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ padding-block:clamp(72px,8vw,110px); text-align:center }
.cta-band h2{ max-width:22ch; margin-inline:auto; margin-bottom:32px }
.cta-band .btn{ margin-inline:auto }

/* ============================================================
   Split section (text + image slot)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start }
.split--center{ align-items:center }
/* media column stretches to the height of a long text column */
.split--fill{ align-items:stretch }
.split--fill .imgslot{ aspect-ratio:auto; height:100%; min-height:340px }
@media (max-width:900px){ .split{ grid-template-columns:1fr } }
.split--rev .split__media{ order:-1 }
@media (max-width:900px){ .split--rev .split__media{ order:0 } }

/* Image slot: renders as a considered technical panel until licensed or
   real project photography is supplied. Swap <div> for <img> — same box. */
.imgslot{
  position:relative; aspect-ratio:4/3; background:var(--k-navy);
  border-radius:var(--k-radius); overflow:hidden;
}
.imgslot--wide{ aspect-ratio:21/9 }
.imgslot--tall{ aspect-ratio:4/5 }
.imgslot > svg{ position:absolute; inset:0; width:100%; height:100% }
/* the technology schematic, drawn large over the navy grid */
.imgslot__art{
  position:absolute; inset:12% 10%; display:grid; place-items:center;
  color:rgba(255,255,255,.34);
}
.imgslot__art svg{ width:100%; height:auto }
/* .tile__art sets color:navy for the light tiles — override it here, or the
   schematic draws navy-on-navy and disappears. */
.imgslot__art .tile__art{ color:rgba(255,255,255,.38) }
.imgslot__art text{ fill:rgba(255,255,255,.45) }
.imgslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }


/* ============================================================
   Drawing plate — a wide technical strip on its own sheet.
   The diagrams are ~6.5:1, so below ~820px they scroll inside
   the plate rather than shrinking to an unreadable height.
   ============================================================ */
.plate{
  margin:0; border:1px solid var(--k-line); border-radius:var(--k-radius-md);
  background:var(--k-mist); overflow:hidden; position:relative;
}
.plate__scroll{ overflow-x:auto; overscroll-behavior-x:contain; padding:clamp(20px,3vw,40px) }
.plate__scroll img{ display:block; width:100%; min-width:680px; height:auto }
.plate__cap{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;
  padding:13px clamp(20px,3vw,40px); border-top:1px solid var(--k-line);
  background:var(--k-paper);
  font-size:var(--k-size-eyebrow); letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--k-slate);
}
.plate__parts{ display:flex; flex-wrap:wrap; gap:6px 10px }
.plate__parts span{ white-space:nowrap }
/* separator trails its own item, so a wrapped line never opens with a stray dot,
   and the last component never carries a dangling one */
.plate__parts span:not(:last-child)::after{
  content:"·"; color:var(--k-gold); margin-left:10px; font-weight:400;
}
.plate__hint{ display:none; margin-left:auto; font-weight:500; letter-spacing:.06em;
  color:var(--k-slate); text-transform:none; white-space:nowrap }
.plate--dark{ background:var(--k-navy); border-color:var(--k-line-on-dark) }
.plate--dark .plate__cap{ background:var(--k-navy-deep); border-top-color:var(--k-line-on-dark);
  color:var(--k-slate-on-dark) }
.plate--dark .plate__hint{ color:var(--k-slate-on-dark) }

/* Below the drawing's own legible width the plate scrolls. Signal it:
   a fade at the trailing edge plus a worded hint in the legend. */
@media (max-width:820px){
  .plate__scroll{ padding:18px }
  /* mask the scroll box itself — bounded exactly to the drawing, no JS,
     and it simply does nothing on browsers without mask support */
  .plate__scroll{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent 100%);
  }
  .plate__hint{ display:block }
}
@media (max-width:520px){
  .plate__hint{ margin-left:0; width:100% }
}

/* technology block: text, then the drawing full width */
.tech-block + .tech-block{ margin-top:clamp(56px,7vw,88px) }
.tech-block__head{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(20px,4vw,56px); align-items:start; margin-bottom:clamp(24px,3vw,36px) }
@media (max-width:860px){ .tech-block__head{ grid-template-columns:1fr; gap:18px } }

/* ============================================================
   Form
   ============================================================ */
.form{ display:grid; gap:22px; max-width:720px }
.field{ display:grid; gap:8px }
.field--half{ }
.form__pair{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
@media (max-width:640px){ .form__pair{ grid-template-columns:1fr } }
.label{ font-size:.875rem; font-weight:500; color:var(--k-navy) }
.label .req{ color:var(--k-slate); font-weight:400 }
.input,.select,.textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--k-paper); color:var(--k-charcoal);
  border:1px solid var(--k-line); border-radius:var(--k-radius);
  transition:border-color var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease);
}
.textarea{ min-height:150px; resize:vertical; line-height:1.55 }
.select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F6978' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px }
.input:hover,.select:hover,.textarea:hover{ border-color:#C2C8D2 }
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--k-navy); box-shadow:0 0 0 3px rgba(6,22,51,.08); outline:none }
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{ outline:2px solid var(--k-gold); outline-offset:2px }
.hint{ font-size:.8125rem; color:var(--k-slate) }
.consent{ display:flex; gap:12px; align-items:flex-start }
.consent input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--k-navy) }
.consent label{ font-size:.875rem; color:var(--k-text-2); line-height:1.55 }
.form__status{ font-size:.9375rem; padding:14px 16px; border-radius:var(--k-radius);
  border:1px solid var(--k-line); background:var(--k-mist) }
.form__status[data-state="error"]{ border-color:#B3261E; color:#8C1D18; background:#FDF3F2 }
.form__status[data-state="ok"]{ border-color:var(--k-navy); background:var(--k-mist) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--k-navy-deep); color:var(--k-on-dark); padding-block:72px 40px }
.footer__top{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px); padding-bottom:52px; border-bottom:1px solid var(--k-line-on-dark) }
@media (max-width:860px){ .footer__top{ grid-template-columns:1fr 1fr; row-gap:44px } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr } }
.footer__logo img{ width:var(--k-logo-header-rev); min-width:var(--k-logo-min-rev); height:auto }
@media (max-width:400px){ .footer__logo img{ width:242px; min-width:242px } }
.footer__tag{ margin-top:22px; color:var(--k-slate-on-dark); font-size:.9375rem; max-width:38ch }
.footer__h{ font-family:var(--k-font-heading); font-weight:600; font-size:var(--k-size-eyebrow);
  letter-spacing:var(--k-track-eyebrow); text-transform:uppercase; color:var(--k-gold); margin-bottom:18px }
.footer__list{ display:grid; gap:12px }
.footer__list a{ text-decoration:none; font-size:.9375rem; color:#E6E9EE;
  border-bottom:1px solid transparent; padding-bottom:2px; justify-self:start;
  transition:border-color var(--k-base) var(--k-ease) }
.footer__list a:hover{ border-bottom-color:var(--k-gold) }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between;
  padding-top:28px; font-size:.8125rem; color:var(--k-slate-on-dark) }
.footer__bottom p{ max-width:none }

/* ============================================================
   Empty states (Projects / Insights)
   ============================================================ */
.empty{
  border:1px dashed var(--k-line); border-radius:var(--k-radius-md);
  padding:clamp(40px,6vw,72px); text-align:center; background:var(--k-mist);
}
.empty h2{ font-size:1.5rem; margin-bottom:14px }
.empty p{ color:var(--k-text-2); max-width:56ch; margin-inline:auto }

/* ---------- utilities ---------- */
.stack-sm > * + *{ margin-top:14px }
.stack > * + *{ margin-top:24px }
.stack-lg > * + *{ margin-top:44px }
.mt-xl{ margin-top:clamp(44px,5vw,72px) }
.mt-lg{ margin-top:clamp(32px,4vw,52px) }
.mt-md{ margin-top:28px }
.center{ text-align:center }
.vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important }
}

/* print */
@media print{
  .header,.footer,.cta-band,.nav-toggle{ display:none }
  body{ color:#000 }
}

/* ============================================================
   KEEL additions (not in the inherited 80° West layer)
   ============================================================ */

/* prose links: Hull Teal, underline on hover (Brand Standards §7.3) */
.prose a, .faq__a a, .footer__nap a, .lede a, .cell p a, .tile p a{ color:var(--k-teal); text-decoration:none; border-bottom:1px solid transparent }
.prose a:hover, .faq__a a:hover, .footer__nap a:hover, .lede a:hover{ border-bottom-color:var(--k-teal) }
.prose{ max-width:var(--k-measure) }
.prose p + p, .prose p + ul, .prose ul + p{ margin-top:1.1em }
.prose ul{ list-style:disc; padding-left:1.3em }
.prose li + li{ margin-top:.45em }
.prose h2{ margin-top:2.2em; margin-bottom:.6em }
.prose h3{ margin-top:1.6em; margin-bottom:.45em }
.prose h2:first-child{ margin-top:0 }
.wrap--measure{ max-width:calc(var(--k-measure) + var(--k-gutter) * 2) }
.eyebrow + h1, .eyebrow + h2{ margin-top:14px }
h2 + .lede, h1 + .lede{ margin-top:18px }

/* two-door hero */
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px }
@media (max-width:760px){ .doors{ grid-template-columns:1fr } }
.door{ display:block; padding:28px 28px 26px; background:var(--k-paper); border:var(--k-border); border-radius:var(--k-radius-md); text-decoration:none; color:inherit; transition:border-color var(--k-fast) var(--k-ease), transform var(--k-fast) var(--k-ease) }
.door:hover{ border-color:var(--k-teal); transform:translateY(-2px) }
.door .eyebrow{ color:var(--k-teal); margin-bottom:10px }
.door h2{ font-size:var(--k-size-h3); margin-bottom:10px }
.door p{ color:var(--k-text); font-size:var(--k-size-body) }
.door__go{ display:inline-block; margin-top:16px; font-weight:600; color:var(--k-navy) }

/* proof strip — plain facts, no adjectives */
.proof{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--k-line-strong); border:1px solid var(--k-line-strong) }
@media (max-width:900px){ .proof{ grid-template-columns:repeat(2,1fr) } }
.proof__item{ background:var(--k-mist); padding:22px 24px }
.proof__n{ font-family:var(--k-font-heading); font-weight:700; font-size:1.75rem; color:var(--k-navy); letter-spacing:-.01em; font-variant-numeric:tabular-nums }
.proof__l{ font-size:var(--k-size-small); color:var(--k-slate); margin-top:4px }

/* comparison table */
.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table th,.table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--k-line-strong); vertical-align:top }
.table th{ background:var(--k-navy); color:#fff; font-weight:600; font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase }
.table tr:nth-child(even) td{ background:var(--k-mist) }
.table td:first-child{ font-weight:600; color:var(--k-navy) }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* callout — teal left border, 15% tint (Brand Standards §4.1) */
.callout{ border-left:3px solid var(--k-teal); background:#E5ECF1; padding:18px 22px; border-radius:0 var(--k-radius) var(--k-radius) 0 }
.callout--gold{ border-left-color:var(--k-gold); background:#F9F2E0 }
.callout p + p{ margin-top:.7em }
.callout strong{ color:var(--k-navy) }

/* FAQ */
.faq h2{ margin-bottom:22px }
.faq__item{ border-top:1px solid var(--k-line-strong) }
.faq__item:last-child{ border-bottom:1px solid var(--k-line-strong) }
.faq__item summary{ list-style:none; cursor:pointer; padding:18px 44px 18px 0; position:relative }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{ content:"+"; position:absolute; right:4px; top:16px; font-size:1.4rem; color:var(--k-teal); font-weight:300 }
.faq__item[open] summary::after{ content:"–" }
.faq__q{ font-size:1.0625rem; font-weight:600; color:var(--k-navy); margin:0; letter-spacing:0 }
.faq__a{ padding:0 0 22px; max-width:var(--k-measure); color:var(--k-text) }
.faq__a p + p{ margin-top:.8em }

/* CTA band extras */
.cta-band__sub{ color:var(--k-slate-on-dark); max-width:56ch; margin-top:16px; font-size:var(--k-size-body-lg) }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px }
.k-dark .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45) }
.k-dark .btn--ghost:hover{ border-color:#fff }

/* footer NAP */
.footer__nap{ margin-top:18px; font-size:var(--k-size-small); color:var(--k-slate-on-dark); line-height:1.7 }
.footer__nap a{ color:#fff; text-decoration:none }
.footer__bottom a{ color:#fff }

/* section header pattern */
.sec-head{ max-width:var(--k-measure); margin-bottom:40px }

/* step list variant with numbers in teal */
.seq__n{ color:var(--k-teal) }

/* utility */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr } }
.card{ background:var(--k-paper); border:var(--k-border); border-radius:var(--k-radius-md); padding:26px }
.card h3{ margin-bottom:10px }
.card p + p{ margin-top:.7em }
.card__link{ display:inline-block; margin-top:14px; font-weight:600; color:var(--k-teal); text-decoration:none }
.card__link:hover{ text-decoration:underline }
.bg-mist{ background:var(--k-mist) }
.mt-lg{ margin-top:48px }

/* full-bleed photo hero (the original keel.energy hero image as background) */
.hero--photo{
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--k-navy); background-image:var(--photo); background-size:cover; background-position:center 40%; background-repeat:no-repeat;
  padding-block:clamp(88px,11vw,168px) clamp(80px,10vw,150px);
}
.hero--photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(14,37,64,.92) 0%, rgba(14,37,64,.82) 45%, rgba(14,37,64,.35) 100%);
}
@media (max-width:760px){ .hero--photo::before{ background:linear-gradient(180deg, rgba(14,37,64,.90) 0%, rgba(14,37,64,.86) 100%) } }
.hero--photo .hero__inner{ max-width:640px }
.hero--photo .eyebrow{ color:var(--k-gold-warm) }
.hero--photo h1{ color:#fff }
.hero--photo .hero__body{ color:#E2E4E8; text-wrap:pretty }
.hero--photo .hero__cta{ margin-top:36px }

/* page-hero with photo (only when the image file exists) */
.page-hero--photo{ position:relative; isolation:isolate; border-bottom:0; background-color:var(--k-navy); background-image:var(--photo); background-size:cover; background-position:center; padding-block:clamp(72px,9vw,128px) clamp(56px,7vw,96px) }
.page-hero--photo::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,37,64,.93) 0%, rgba(14,37,64,.84) 50%, rgba(14,37,64,.40) 100%) }
@media (max-width:760px){ .page-hero--photo::before{ background:rgba(14,37,64,.88) } }
.page-hero--photo .eyebrow{ color:var(--k-gold-warm) }
.page-hero--photo h1{ color:#fff }
.page-hero--photo .lede{ color:#E2E4E8 }
.page-hero--photo .btn--secondary{ color:#fff; border-color:rgba(255,255,255,.45) }
.page-hero--photo .btn--secondary:hover{ background:transparent; border-color:#fff }
.page-hero--photo .btn--primary{ background:var(--k-gold); color:var(--k-navy) }
.page-hero--photo .btn--primary:hover{ background:var(--k-gold-warm) }

@media (max-width:760px){ .hero--photo, .page-hero--photo{ background-image:var(--photo-m, var(--photo)) } }

/* who-does-what table */
.table--who td.who{ text-align:center; width:14% }
.table--who .dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--k-teal) }
.table--who th:not(:first-child){ text-align:center }
/* two-column comparison (the quote that stalls) */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media (max-width:760px){ .compare{ grid-template-columns:1fr } }
.compare__col{ border:var(--k-border); border-radius:var(--k-radius-md); padding:22px 24px; background:var(--k-paper) }
.compare__col--on{ border-color:var(--k-teal); box-shadow:inset 3px 0 0 var(--k-teal) }
.compare__h{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--k-slate-tint); margin-bottom:14px }
.compare__col--on .compare__h{ color:var(--k-teal) }
.compare dl{ margin:0 }
.compare dt{ font-size:.8rem; color:var(--k-slate-tint); margin-top:12px }
.compare dd{ margin:2px 0 0; color:var(--k-navy); font-weight:600 }