/* ==================================================================
   PUGL Technology Group, Inc.
   Design system — single stylesheet, no build step, no framework.

   Contents
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Buttons & badges
   06  Header & navigation
   07  Hero
   08  Sections & cards
   09  Line map diagram
   10  Cause-and-effect chain
   11  Comparison (traditional vs upgraded)
   12  KPI dashboard
   13  Tables
   14  Leadership
   15  Forms
   16  CTA band
   17  Footer
   18  Utilities, placeholders, motion
   ================================================================== */


/* 01  TOKENS ======================================================= */

:root{
  /* Core palette — sampled from the official PUGL logo artwork.
     Hierarchy: navy is the corporate foundation, blue carries technology and
     interaction, green is reserved for efficiency and environmental outcomes
     and stays a minority color. Brightest blue and green are accents only. */
  --ink:          #1A2129;   /* the logo's own backdrop — dark bands, header, footer */
  --navy:         #1F284B;   /* Deep Navy — headings, premium surfaces */
  --navy-surface: #26325A;   /* raised surface on dark grounds */
  --navy-line:    #33406B;   /* rules on navy */
  --ink-surface:  #222C36;   /* raised surface on the ink ground */
  --ink-line:     #2E3A45;   /* rules on ink */

  --blue-dark:    #174571;   /* Dark Blue — strong links, hover, headings */
  --blue:         #2172A5;   /* Primary Blue — buttons and links on light (AA) */
  --blue-bright:  #3398D8;   /* Bright Blue — accent, and links on dark grounds */
  --blue-soft:    #E9F1F7;

  --green-deep:   #17672E;   /* Deep Green — green text on light grounds (AA) */
  --green:        #39963B;   /* Primary Green — graphics, rules, fills */
  --green-accent: #65B83D;   /* Accent Green — accents, and text on dark grounds */
  --green-soft:   #E9F3E7;

  --amber:        #C77F0C;   /* retained for pre-launch notes only */
  --amber-ink:    #8A5606;
  --amber-soft:   #FBF2E1;

  --graphite:     #4A5560;   /* body text on light (AA) */
  --mist:         #D7DDE2;   /* hairlines */
  --mist-soft:    #E8EBEE;
  --field-line:   #7E8B95;   /* form control borders — 3:1 non-text contrast */
  --concrete:     #F5F7F8;   /* tinted sections */
  --paper:        #FFFFFF;

  --on-dark:      #FFFFFF;
  --on-dark-mut:  #A8B7C4;   /* muted text on ink and navy (AA) */
  --on-dark-dim:  #93A6B4;   /* AA on both ink and navy at small sizes */

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale */
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --step-2:  clamp(1.35rem, 1vw + 1.1rem, 1.6rem);
  --step-3:  clamp(1.6rem, 1.8vw + 1.2rem, 2.1rem);
  --step-4:  clamp(2rem, 3vw + 1.3rem, 2.9rem);
  --step-5:  clamp(2.4rem, 4.6vw + 1.2rem, 4rem);

  /* Space */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7rem;

  --steel: var(--ink-surface);
  --steel-2: var(--navy-surface);
  --blue-lift: var(--blue-bright);
  --blue-deep: var(--blue-dark);
  --green-ink: var(--green-deep);

  --shell:  1220px;
  --measure: 66ch;
  --radius: 2px;
}


/* 02  RESET & BASE ================================================ */

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

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

body{
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

::selection { background: var(--blue); color: #fff; }
.mono, code { color: inherit; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }

:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip-link{
  position: fixed; top: 0; left: 0; z-index: 999;
  transform: translateY(-110%);
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus{ transform: none; color: #fff; }


/* 03  TYPOGRAPHY ================================================== */

h1, h2, h3, h4{
  font-family: var(--f-display);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.22; }
h4 { font-size: var(--step-1); line-height: 1.3; letter-spacing: -.01em; }

p { margin: 0 0 1rem; max-width: min(var(--measure), 100%); }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; max-width: min(var(--measure), 100%); }
li { margin-bottom: .4rem; }
li::marker { color: var(--graphite); }
strong { font-weight: 600; color: var(--navy); }

.eyebrow{
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--sp-3);
}
.eyebrow--light { color: var(--blue-bright); }

.lede{
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--graphite);
  max-width: min(60ch, 100%);
}
.muted { color: var(--graphite); }
.mono  { font-family: var(--f-mono); font-size: .9em; }

.basis{
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--graphite);
  margin: var(--sp-2) 0 0;
  max-width: 44ch;
}


/* 04  LAYOUT PRIMITIVES =========================================== */

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px){ .shell{ padding-inline: 2.5rem; } }
@media (min-width: 1240px){ .shell{ padding-inline: 3rem; } }

.section{ padding-block: var(--sp-8); }
@media (min-width: 768px){ .section{ padding-block: var(--sp-9); } }
.section--tight{ padding-block: var(--sp-7); }
.section--dark{ background: var(--ink); color: var(--on-dark-mut); }
.section--navy{ background: var(--navy); color: var(--on-dark-mut); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4{ color: #fff; }
.section--navy p{ color: var(--on-dark-mut); }
.section--navy a:not(.btn){ color: var(--blue-bright); }
.section--navy strong{ color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4{ color: #fff; }
.section--dark p{ color: var(--on-dark-mut); }
.section--dark a:not(.btn){ color: var(--blue-bright); }
.section--dark strong{ color: #fff; }
.section--tone{ background: var(--concrete); }

.section-head{ max-width: min(68ch, 100%); margin-bottom: var(--sp-6); }
.section-head p{ margin-bottom: 0; }
.section-head h2 + p{ margin-top: var(--sp-4); }

.grid{ display: grid; gap: var(--sp-5); }
.grid > *, .split > *, .compare > *, .cta-band__inner > *, .site-footer__top > * { min-width: 0; }
@media (min-width: 640px){ .grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px){
  .grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 640px) and (max-width: 899px){
  .grid--3, .grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.split{ display: grid; gap: var(--sp-6); }
@media (min-width: 960px){
  .split{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-8); align-items: start; }
  .split--wide-left{ grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
  /* A column whose only content was a pre-launch image placeholder is empty
     once SITE_DEV_MODE is false. Drop it and let the remaining column take
     the row, so no half-width gap is left behind. Browsers without :has()
     simply keep the two-column track, which is harmless. */
  .split:has(> div:empty){ grid-template-columns: minmax(0,1fr); }
}
.split > div:empty{ display: none; }

/* Stacks a card under a sibling block, but takes no top margin when the
   sibling above it was a pre-launch placeholder that is no longer rendered. */
.u-stacked{ margin-top: var(--sp-5); }
.u-stacked:first-child{ margin-top: 0; }

.rule{ border: 0; border-top: 1px solid var(--mist); margin: var(--sp-7) 0; }


/* 05  BUTTONS & BADGES ============================================ */

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  padding: .875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  text-align: center;
}
.btn--sm{ padding: .625rem 1rem; font-size: .875rem; }
.btn--primary{ background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--primary:hover{ background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn--outline{ background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--outline:hover{ background: var(--blue-soft); color: var(--blue-dark); }
.btn--ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--ghost:hover{ background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn--text{
  background: none; border: 0; padding: .875rem .25rem; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px;
}
.section--dark .btn--text, .section--navy .btn--text,
.hero .btn--text, .cta-band .btn--text{ color: var(--blue-bright); }
.btn-row{ display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); }

.link-arrow{
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.link-arrow::after{ content: "→"; transition: transform .15s ease; }
.link-arrow:hover{ text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover::after{ transform: translateX(3px); }

.badge{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .5rem;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge.is-market   { color: var(--green-deep); background: var(--green-soft); }
.badge.is-trial    { color: var(--blue-dark);  background: var(--blue-soft); }
.badge.is-dev      { color: var(--amber-ink); background: var(--amber-soft); }
.badge.is-research { color: var(--graphite); background: var(--concrete); }
.section--dark .badge.is-market, .section--navy .badge.is-market, .hero .badge.is-market{ background: rgba(101,184,61,.14); color: var(--green-accent); }
.section--dark .badge.is-trial, .section--navy .badge.is-trial, .hero .badge.is-trial{ background: rgba(51,152,216,.16); color: var(--blue-bright); }
.section--dark .badge.is-dev{ color: #E8B053; background: rgba(232,176,83,.14); }
.section--dark .badge.is-research{ color: var(--on-dark-dim); background: rgba(131,149,163,.14); }


/* 06  HEADER & NAVIGATION ========================================= */

/* White header against the navy hero: the logo's blues and greens read at
   full strength, and the transition into the hero is a deliberate edge.
   Uses assets/images/pugl-logo.png, which has a TRANSPARENT background. The
   original supplied artwork (solid dark backdrop) is kept alongside it as
   pugl-logo-original.png and must not be used here — it would render as a
   dark rectangle on the white bar. */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  box-shadow: 0 1px 3px rgba(31,40,75,.06);
}
/* Do not add backdrop-filter, filter or transform to this element.
   Any of them makes it a containing block for position:fixed
   descendants, which collapses the mobile navigation panel. */
.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  min-height: 84px;
}

.brand{ display: flex; align-items: center; text-decoration: none; flex: 0 0 auto;
  color: var(--navy);           /* also the color of the alt text if the logo fails to load */
  padding: var(--sp-2) 0; }
.brand__logo{
  display: block; width: auto; height: 40px;
  /* Source artwork is 1196x442, so it stays sharp on retina at any of the
     heights below. Width is always auto — never set both, or the official
     proportions drift. */
}
@media (min-width: 420px){ .brand__logo{ height: 46px; } }
@media (min-width: 1080px){ .brand__logo{ height: 44px; } }
.brand:focus-visible{ outline-offset: 4px; }

.brand__descriptor{
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--mist);
  white-space: nowrap;
  display: none;
}
@media (min-width: 1400px){ .brand__descriptor{ display: block; font-size: .625rem; } }

.nav-toggle{
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--mist); border-radius: var(--radius);
  padding: .5rem .75rem; cursor: pointer; color: var(--navy);
  font-family: var(--f-body); font-size: .8125rem; font-weight: 600;
}
.nav-toggle:hover{ border-color: var(--blue); color: var(--blue); }
.nav-toggle__bars{ display: inline-block; width: 16px; }
.nav-toggle__bars span{
  display: block; height: 1.5px; background: currentColor; margin: 3px 0;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){ transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){ transform: translateY(-4.5px) rotate(-45deg); }

.primary-nav__list{ list-style: none; margin: 0; padding: 0; max-width: none; }
.primary-nav__link{
  display: block; text-decoration: none; color: var(--navy);
  font-size: .9375rem; font-weight: 500;
}
.primary-nav__link.is-active{ color: var(--blue); font-weight: 600; }
.submenu{ list-style: none; margin: 0; padding: 0; max-width: none; }
.submenu__link{ display: block; text-decoration: none; color: var(--graphite); font-size: .875rem; }
.submenu__link:hover, .submenu__link.is-active{ color: var(--blue-dark); }
.submenu-toggle{
  background: none; border: 0; cursor: pointer; color: var(--graphite);
  padding: .4rem; line-height: 0;
}
.submenu-toggle:hover{ color: var(--blue); }
.submenu-toggle svg{ width: 10px; height: 6px; transition: transform .18s ease; }
.submenu-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

/* --- mobile / tablet nav (default) --- */
@media (max-width: 1079px){
  .primary-nav{
    position: fixed; top: 84px; left: 0; right: 0; bottom: 0;
    width: 100%;
    background: var(--paper);
    z-index: 99;
    border-top: 1px solid var(--mist);
    padding: var(--sp-5) 1.25rem var(--sp-8);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .primary-nav.is-open{ opacity: 1; visibility: visible; transform: none; }
  .primary-nav__item{
    border-bottom: 1px solid var(--mist-soft);
    position: relative;
  }
  .primary-nav__link{ padding: .95rem 2.5rem .95rem 0; font-size: 1.0625rem; }
  .submenu-toggle{ position: absolute; top: .5rem; right: 0; padding: .75rem; }
  .submenu{ display: none; padding: 0 0 var(--sp-4) var(--sp-4); }
  .submenu__link{ color: var(--graphite); }
  .submenu__link:hover, .submenu__link.is-active{ color: var(--blue); }
  .submenu.is-open{ display: block; }
  .submenu__link{ padding: .55rem 0; }
  .primary-nav__item--cta{ border: 0; margin-top: var(--sp-5); }
  .primary-nav__item--cta .btn{ width: 100%; padding: 1rem; font-size: 1rem; }
}

/* --- desktop nav --- */
@media (min-width: 1080px){
  .nav-toggle{ display: none; }
  .primary-nav{ opacity: 1; visibility: visible; }
  .primary-nav__list{ display: flex; align-items: center; gap: 1.25rem; }
  .primary-nav__item{ position: relative; display: flex; align-items: center; }
  .primary-nav__link{ padding: 1.4rem 0; white-space: nowrap; }
  .primary-nav__link{ position: relative; }
  .primary-nav__link:hover{ color: var(--blue); }
  /* Blue rule on hover, green on the current page — so green carries meaning
     here rather than decorating. */
  .primary-nav__link::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: 1.15rem; height: 2px;
    background: var(--blue); transform: scaleX(0); transform-origin: left center;
    transition: transform .16s ease;
  }
  .primary-nav__link:hover::after,
  .primary-nav__link:focus-visible::after{ transform: scaleX(1); }
  .primary-nav__link.is-active::after{ background: var(--green); transform: scaleX(1); }
  .submenu-toggle{ margin-left: .15rem; }
  .submenu{
    position: absolute; top: 100%; left: -1rem; min-width: 200px;
    background: var(--paper); border: 1px solid var(--mist);
    box-shadow: 0 12px 28px rgba(11,17,22,.09);
    padding: .5rem 0;
    display: none;
  }
  .primary-nav__item.has-children:hover .submenu,
  .primary-nav__item.has-children:focus-within .submenu,
  .submenu.is-open{ display: block; }
  .submenu__link{ padding: .5rem 1rem; }
  .submenu__link:hover{ background: var(--concrete); }
  .primary-nav__item--cta{ margin-left: .5rem; }
  .primary-nav__item--cta .btn{ white-space: nowrap; }
}


/* 07  HERO ======================================================== */

.hero{
  background: var(--navy);
  color: var(--on-dark-mut);
  padding-block: var(--sp-8) var(--sp-7);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px){ .hero{ padding-block: var(--sp-9) var(--sp-8); } }
.hero::after{
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(51,152,216,.09) 1px, transparent 1px);
  background-size: 84px 100%;
  pointer-events: none;
}
.hero > *{ position: relative; z-index: 1; }
.hero h1{ color: #fff; max-width: 17ch; }
.hero h2, .hero h3, .hero h4{ color: #fff; }
.hero p{ color: var(--on-dark-mut); }
.hero a:not(.btn){ color: var(--blue-bright); }
.hero strong{ color: #fff; }
.hero__descriptor{
  font-family: var(--f-mono);
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-bright); margin: 0 0 var(--sp-5);
}
.hero__lede{ color: var(--on-dark-mut); font-size: var(--step-1); max-width: min(56ch, 100%); margin-top: var(--sp-5); }
.hero__figure{ margin-top: var(--sp-7); }
.hero--page{ padding-block: var(--sp-7) var(--sp-7); }
.hero--page h1{ max-width: 22ch; font-size: var(--step-4); }


/* 08  SECTIONS & CARDS ============================================ */

.card{
  background: var(--paper);
  border: 1px solid var(--mist);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.card h3, .card h4{ margin: 0; }
.card p{ margin: 0; font-size: .9375rem; color: var(--graphite); }
.card__meta{
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--graphite);
}
.card--link{ text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.card--link{ position: relative; }
.card--link:hover{ border-color: var(--blue); color: inherit; }
.section--dark .card{ background: var(--ink-surface); border-color: var(--ink-line); }
.section--dark .card p{ color: var(--on-dark-mut); }
.section--navy .card, .hero .card{ background: var(--navy-surface); border-color: var(--navy-line); }
.section--navy .card p, .hero .card p{ color: var(--on-dark-mut); }
.section--navy .card h3, .hero .card h3{ color: #fff; }

.tech-card{ gap: var(--sp-3); }
.tech-card__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.tech-card__grade{ font-family: var(--f-mono); font-size: .75rem; color: var(--graphite); }
.tech-card__stage{
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); margin: 0;
}
.section--dark .tech-card__stage, .section--navy .tech-card__stage, .hero .tech-card__stage{ color: var(--blue-bright); }
.tech-card__kpi{
  border-top: 1px solid var(--mist); padding-top: var(--sp-3); margin-top: auto;
  font-size: .8125rem; color: var(--graphite);
}
.section--dark .tech-card__kpi{ border-top-color: var(--ink-line); }
.section--navy .tech-card__kpi, .hero .tech-card__kpi{ border-top-color: var(--navy-line); }

.upgrade-list{ list-style: none; padding: 0; margin: 0; max-width: none;
  display: grid; gap: 0; border-top: 1px solid var(--mist); }
@media (min-width: 700px){ .upgrade-list{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: var(--sp-6); } }
.upgrade-list li{ margin: 0; border-bottom: 1px solid var(--mist); }
.upgrade-list a{
  display: grid; grid-template-columns: 1fr auto; gap: .25rem var(--sp-4);
  align-items: baseline; padding: var(--sp-4) 0;
  text-decoration: none; color: var(--navy);
}
.upgrade-list a:hover{ color: var(--blue); }
.upgrade-list .u-title{ font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
.upgrade-list .u-kpi{
  font-family: var(--f-mono); font-size: .6875rem; color: var(--graphite);
  grid-column: 1 / -1;
}

.callout{
  border-left: 3px solid var(--blue);
  background: var(--concrete);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  max-width: min(var(--measure), 100%);
}
.callout p:last-child{ margin-bottom: 0; }
.callout--good{ border-left-color: var(--green); background: var(--green-soft); }
.callout--note{ border-left-color: var(--amber); background: var(--amber-soft); }
.section--dark .callout{ background: var(--ink-surface); border-left-color: var(--blue-bright); }

.stat-row{ display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); margin-top: var(--sp-6); }
@media (min-width: 640px){ .stat-row{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 900px){ .stat-row{ grid-template-columns: repeat(4,minmax(0,1fr)); } }
.section--dark .stat-row{ background: var(--ink-line); border-color: var(--ink-line); }
.stat{ background: var(--paper); padding: var(--sp-5); }
.section--dark .stat{ background: var(--ink); }
.stat__value{
  font-family: var(--f-display); font-weight: 700; font-size: var(--step-3);
  line-height: 1; letter-spacing: -.03em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.section--dark .stat__value{ color: #fff; }
.stat__unit{
  font-family: var(--f-mono); font-size: .75rem; color: var(--blue-dark);
  display: block; margin-top: .5rem;
}
.section--dark .stat__unit{ color: var(--blue-bright); }
.stat__basis{ font-family: var(--f-mono); font-size: .625rem; line-height: 1.5; color: var(--graphite); margin: .5rem 0 0; }


/* 09  LINE MAP DIAGRAM ============================================ */

.line-map{ margin-block: var(--sp-5); }

.line-map__legend{
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--graphite);
  margin: 0 0 var(--sp-4); max-width: none;
}
.line-map__key{ display: inline-flex; align-items: center; gap: .45rem; }
.line-map__key span{ width: 10px; height: 10px; display: inline-block; border: 1px solid currentColor; }
.line-map__key--pugl span{ background: var(--blue); border-color: var(--blue); }
.section--dark .line-map__key--pugl span,
.hero .line-map__key--pugl span{ background: var(--blue-lift); border-color: var(--blue-bright); }
.section--dark .line-map__legend,
.hero .line-map__legend{ color: #93A3AE; }

.line-map__track{
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px){ .line-map__track{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px){ .line-map__track{ grid-template-columns: repeat(7, 1fr); gap: 0; } }
.line-map__stage{ margin: 0; position: relative; }

.line-map__button{
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: .4rem;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-top: 3px solid var(--mist);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-family: var(--f-body);
  color: var(--graphite);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
@media (min-width: 960px){
  .line-map__stage + .line-map__stage .line-map__button{ border-left: 0; }
}
.line-map__button:hover{ background: var(--concrete); color: var(--navy); }
.line-map__index{
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; color: var(--graphite);
}
.line-map__label{
  font-family: var(--f-display); font-weight: 600; font-size: .9375rem;
  line-height: 1.2; color: var(--navy); letter-spacing: -.01em;
}
.line-map__stage.is-pugl .line-map__button{ border-top-color: var(--blue); }
.line-map__button.is-active{ background: var(--concrete); color: var(--navy); }
.line-map__stage.is-pugl .line-map__button.is-active{ background: var(--blue-soft); }

.section--dark .line-map__button,
.hero .line-map__button{ background: var(--ink-surface); border-color: var(--ink-line); border-top-color: var(--ink-line); color: var(--on-dark-mut); }
.section--dark .line-map__label,
.hero .line-map__label{ color: #fff; }
.section--dark .line-map__index,
.hero .line-map__index{ color: var(--on-dark-dim); }
.section--dark .line-map__stage.is-pugl .line-map__button,
.hero .line-map__stage.is-pugl .line-map__button{ border-top-color: var(--blue-bright); }
.section--dark .line-map__button:hover,
.section--dark .line-map__button.is-active,
.hero .line-map__button:hover,
.hero .line-map__button.is-active{ background: var(--navy-surface); color: var(--on-dark-mut); }
/* The light-theme "active PUGL stage" fill is more specific than the dark
   overrides above, so it has to be answered at matching specificity or the
   selected stage renders pale blue on the dark band with white type. */
.section--dark .line-map__stage.is-pugl .line-map__button.is-active,
.hero .line-map__stage.is-pugl .line-map__button.is-active{ background: var(--navy-surface); }

.line-map__panel{
  border: 1px solid var(--mist); border-top: 0;
  background: var(--concrete);
  padding: var(--sp-5);
}
@media (max-width: 959px){ .line-map__panel{ border-top: 1px solid var(--mist); margin-top: var(--sp-3); } }
.section--dark .line-map__panel{ background: var(--ink-surface); border-color: var(--ink-line); }
.line-note__title{ font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.015em; color: var(--navy); margin: 0 0 .4rem; max-width: none; }
.section--dark .line-note__title, .hero .line-note__title{ color: #fff; }
.line-note__body{ margin: 0; font-size: .9375rem; color: var(--graphite); }
.section--dark .line-note__body{ color: var(--on-dark-mut); }
.line-note + .line-note{ margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--mist); }
.js .line-note + .line-note{ margin-top: 0; padding-top: 0; border-top: 0; }
.js .line-note:not(.is-active){ display: none; }


/* 10  CAUSE-AND-EFFECT CHAIN ====================================== */

.chain{ list-style: none; margin: var(--sp-5) 0 0; padding: 0; max-width: 46ch; }
.chain li{
  position: relative;
  margin: 0;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
  border-left: 1px solid var(--mist);
}
.chain li::before{
  content: ""; position: absolute; left: -5px; top: 1.55rem;
  width: 9px; height: 9px; background: var(--paper);
  border: 1px solid var(--graphite);
}
.chain li:last-child .chain__text{ color: var(--green-ink); }
.chain li:first-child::before{ background: var(--blue); border-color: var(--blue); }
.chain li:last-child{ border-left-color: transparent; }
.chain li:last-child::before{ background: var(--green); border-color: var(--green-deep); }
.chain__step{
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite); display: block; margin-bottom: .2rem;
}
.chain__text{ font-family: var(--f-display); font-weight: 500; font-size: 1.0625rem; color: var(--navy); }
.chain li:last-child .chain__text{ color: var(--green-deep); font-weight: 600; }
.section--dark .chain li{ border-left-color: var(--ink-line); }
.section--dark .chain li::before{ background: var(--ink); border-color: var(--on-dark-dim); }
.section--dark .chain__text{ color: #fff; }
.section--dark .chain__step{ color: var(--on-dark-dim); }
.section--dark .chain li:last-child .chain__text{ color: var(--green-accent); }
.section--dark .chain li:last-child::before{ background: #54C295; border-color: var(--green-accent); }


/* 11  COMPARISON ================================================== */

.compare{ display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 860px){ .compare{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-6); } }
.compare__col{ border: 1px solid var(--mist); background: var(--paper); }
.compare__col--pugl{ border-color: var(--blue); }
.compare__head{ padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--mist); background: var(--concrete); }
.compare__col--pugl .compare__head{ background: var(--blue-soft); border-bottom-color: var(--blue); }
.compare__head h3{ font-size: 1.0625rem; margin: 0; }
.compare__head p{ margin: .25rem 0 0; font-family: var(--f-mono); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.compare__steps{ list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); max-width: none; }
.compare__steps li{
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: .55rem 0; margin: 0; font-size: .9375rem;
  border-bottom: 1px solid var(--mist-soft);
}
.compare__steps li:last-child{ border-bottom: 0; }
.compare__steps .n{ font-family: var(--f-mono); font-size: .6875rem; color: var(--graphite); min-width: 1.6rem; }
.compare__steps li.is-removed{ color: var(--graphite); }
.compare__steps li.is-removed .t{ text-decoration: line-through; text-decoration-thickness: 1px; opacity: .65; }
.compare__steps li.is-removed .tag{
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--graphite); border: 1px solid var(--mist); padding: .1rem .35rem; margin-left: auto;
}
.compare__foot{
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--mist);
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--graphite);
}
.compare__col--pugl .compare__foot{ color: var(--blue); border-top-color: var(--blue); }


/* 12  KPI DASHBOARD =============================================== */

.kpi-grid{ display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
@media (min-width: 560px){ .kpi-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 900px){ .kpi-grid{ grid-template-columns: repeat(4,minmax(0,1fr)); } }
.kpi{ background: var(--paper); padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: .35rem; }
.kpi__name{ font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite); }
.kpi__direction{
  font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; color: var(--navy);
  display: flex; align-items: baseline; gap: .4rem;
}
.kpi__direction .arrow{ color: var(--green-deep); font-size: .875rem; }
.kpi__note{ font-size: .8125rem; color: var(--graphite); margin: 0; }


/* 13  TABLES ====================================================== */

/* Tables reflow into stacked rows on narrow screens rather than scrolling
   inside their own container. The page is the only thing that scrolls. */
.table-wrap{ border: 1px solid var(--mist); margin: var(--sp-5) 0; background: var(--paper); }
table{ border-collapse: collapse; width: 100%; font-size: .875rem; }
caption{ text-align: left; padding: var(--sp-4) var(--sp-4) 0; font-size: .8125rem; color: var(--graphite); }
th, td{ text-align: left; padding: .75rem var(--sp-4); border-bottom: 1px solid var(--mist-soft);
  vertical-align: top; }
thead th{
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--graphite); background: var(--concrete); border-bottom: 1px solid var(--mist);
  white-space: nowrap;
}
tbody tr:last-child td{ border-bottom: 0; }
td.num, th.num{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-note{ font-family: var(--f-mono); font-size: .625rem; line-height: 1.6; color: var(--graphite); margin-top: -.5rem; }

@media (max-width: 760px){
  .table-wrap{ border: 0; background: transparent; }
  table, tbody, tr, td{ display: block; width: 100%; }
  thead{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  caption{ padding: 0 0 var(--sp-3); }
  tr{ border: 1px solid var(--mist); background: var(--paper); margin-bottom: var(--sp-3); }
  td{ border-bottom: 1px solid var(--mist-soft); padding: .7rem .9rem; }
  tr td:last-child{ border-bottom: 0; }
  td[data-label]{ display: grid; grid-template-columns: 8.5rem 1fr; gap: .25rem .9rem; align-items: baseline; }
  td[data-label]::before{
    content: attr(data-label);
    font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--graphite);
  }
  .section--dark tr, .section--navy tr{ background: var(--ink-surface); border-color: var(--ink-line); }
  .section--dark td, .section--navy td{ border-bottom-color: var(--ink-line); }
  .section--dark td[data-label]::before, .section--navy td[data-label]::before{ color: var(--on-dark-dim); }
}
@media (max-width: 460px){
  td[data-label]{ grid-template-columns: 1fr; }
}


/* 13b COST STACK =================================================== */
/* Horizontal bars. No fixed height, no container scrolling, reflows at
   every width — the page is the only thing that ever scrolls. */

.cost-stack{ list-style: none; margin: var(--sp-5) 0 0; padding: 0; max-width: none;
  border-top: 1px solid var(--mist); }
.cost-stack li{
  display: grid; gap: .3rem .9rem; margin: 0;
  grid-template-columns: 1fr 3.1rem;
  grid-template-areas: "label value" "bar bar";
  align-items: center;
  padding: .8rem 0; border-bottom: 1px solid var(--mist-soft);
}
@media (min-width: 720px){
  .cost-stack li{
    grid-template-columns: minmax(0,15rem) minmax(0,1fr) 3.1rem;
    grid-template-areas: "label bar value";
    gap: 1rem;
  }
}
.cost-stack__label{ grid-area: label; font-size: .9375rem; color: var(--navy); line-height: 1.35; }
.cost-stack__value{
  grid-area: value; justify-self: end;
  font-family: var(--f-mono); font-size: .8125rem; font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.cost-stack__bar{ grid-area: bar; display: block; height: 10px; background: var(--mist-soft); }
.cost-stack__bar span{ display: block; height: 100%; background: var(--blue-dark); }
.cost-stack li.is-lead .cost-stack__bar span{ background: var(--blue-bright); }
.cost-stack li.is-lead .cost-stack__label{ font-weight: 600; }
.cost-stack__foot{
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: baseline;
  margin-top: var(--sp-4);
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--graphite);
}
.cost-stack__key{ display: inline-flex; align-items: center; gap: .4rem; }
.cost-stack__key i{ width: 10px; height: 10px; display: inline-block; font-style: normal; }
.cost-stack__key i.lead{ background: var(--blue-bright); }
.cost-stack__key i.rest{ background: var(--blue-dark); }


/* 13c PRODUCT ACCENTS ============================================== */
/* One family, three quiet signals: a 3px top rule and the eyebrow color.
   Nothing else changes, so the cards never read as three separate brands. */

.tech-card{ border-top: 3px solid var(--mist); }
.tech-card--blue { border-top-color: var(--blue-bright); }
.tech-card--green{ border-top-color: var(--green); }
.tech-card--navy { border-top-color: var(--navy); }
.tech-card--blue  .tech-card__stage{ color: var(--blue-dark); }
.tech-card--green .tech-card__stage{ color: var(--green-deep); }
.tech-card--navy  .tech-card__stage{ color: var(--navy); }
.section--dark .tech-card--blue  .tech-card__stage,
.section--navy .tech-card--blue  .tech-card__stage{ color: var(--blue-bright); }
.section--dark .tech-card--green .tech-card__stage,
.section--navy .tech-card--green .tech-card__stage{ color: var(--green-accent); }
.section--dark .tech-card--navy  .tech-card__stage,
.section--navy .tech-card--navy  .tech-card__stage{ color: var(--on-dark-mut); }
.section--dark .tech-card--navy{ border-top-color: var(--on-dark-dim); }

.product-rule{ height: 3px; width: 56px; margin-bottom: var(--sp-4); display: block; }
.product-rule--blue { background: var(--blue-bright); }
.product-rule--green{ background: var(--green); }
.product-rule--navy { background: var(--navy); }
.hero .product-rule--navy{ background: var(--blue-bright); }


/* 14  LEADERSHIP ================================================== */

.leadership__intro{ font-size: var(--step-1); line-height: 1.55; color: var(--graphite); max-width: min(62ch, 100%); }
.leadership__grid{
  list-style: none; margin: var(--sp-6) 0 0; padding: 0; max-width: none;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.leader-card{ margin: 0; border: 1px solid var(--mist); background: var(--paper); display: flex; flex-direction: column; }
.leader-card__body{ padding: var(--sp-4); }
.leader-card__discipline{
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 .5rem;
}
.leader-card__name{ font-size: 1.125rem; margin: 0 0 .2rem; }
.leader-card__title{ margin: 0; font-size: .875rem; color: var(--graphite); }
.leader-card__bio{ margin: var(--sp-3) 0 0; font-size: .875rem; color: var(--graphite); }
.leadership__contact{ margin-top: var(--sp-5); font-size: .9375rem; color: var(--graphite); }


/* 15  FORMS ======================================================= */

.form-panel{ border: 1px solid var(--mist); background: var(--paper); padding: var(--sp-5); }
@media (min-width: 768px){ .form-panel{ padding: var(--sp-6); } }

.form-grid{ display: grid; gap: var(--sp-4); }
@media (min-width: 640px){
  .form-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .form-field--full{ grid-column: 1 / -1; }
}

.form-field{ display: flex; flex-direction: column; gap: .4rem; }
.form-field label{ font-size: .875rem; font-weight: 600; }
.form-field .req{ color: var(--blue); }
.form-field .hint{ font-size: .75rem; color: var(--graphite); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea{
  width: 100%;
  font-family: var(--f-body); font-size: .9375rem; line-height: 1.4;
  padding: .7rem .75rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--navy);
}
textarea{ min-height: 130px; resize: vertical; }
select{ appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2347525C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2rem; }
input:focus, select:focus, textarea:focus{ border-color: var(--blue); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color: var(--amber-ink); border-width: 2px; }

.field-error{ font-size: .8125rem; color: #8E2C21; font-weight: 500; }
.hp-field{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.form-status{ padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); border-left: 3px solid; }
.form-status h2{ font-size: 1.125rem; margin: 0 0 .35rem; }
.form-status p{ margin: 0; font-size: .9375rem; }
.form-status--ok{ border-color: var(--green); background: var(--green-soft); }
.form-status--error{ border-color: var(--amber); background: var(--amber-soft); }

.fieldset{ border: 0; padding: 0; margin: 0 0 var(--sp-6); }
.fieldset legend{
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue); padding: 0; margin-bottom: var(--sp-4);
  border-top: 1px solid var(--mist); padding-top: var(--sp-4); width: 100%;
}
.form-consent{ font-size: .8125rem; color: var(--graphite); margin-top: var(--sp-4); }


/* 16  CTA BAND ==================================================== */

.cta-band{ background: var(--navy); color: var(--on-dark-mut); padding-block: var(--sp-8); }
.cta-band--light{ background: var(--concrete); color: var(--ink); border-top: 1px solid var(--mist); }
.cta-band__inner{ display: grid; gap: var(--sp-6); }
@media (min-width: 960px){ .cta-band__inner{ grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; gap: var(--sp-8); } }
.cta-band__heading{ color: #fff; font-size: var(--step-3); }
.cta-band .card{ background: var(--navy-surface); border-color: var(--navy-line); }
.cta-band--light .cta-band__heading{ color: var(--navy); }
.cta-band__intro{ color: var(--on-dark-mut); margin: var(--sp-4) 0 0; }
.cta-band .btn--primary{ background: var(--blue-bright); border-color: var(--blue-bright); color: var(--navy); }
.cta-band .btn--primary:hover{ background: #57ACE2; border-color: #57ACE2; color: var(--navy); }
.cta-band--light .cta-band__intro{ color: var(--graphite); }
.cta-band__actions{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.cta-band__actions .btn{ width: 100%; }
@media (min-width: 480px){ .cta-band__actions .btn{ width: auto; } }
.cta-band--light .btn--ghost{ color: var(--blue); border-color: var(--blue); }
.cta-band--light .btn--ghost:hover{ background: var(--blue-soft); }
.cta-band--light .btn--text{ color: var(--blue); }


/* 17  FOOTER ====================================================== */

.site-footer{ background: var(--ink); color: var(--on-dark-mut); padding-block: var(--sp-8) var(--sp-6); font-size: .875rem; }
.site-footer h2, .site-footer h3{ color: #fff; }
.site-footer a{ color: var(--on-dark-mut); text-decoration: none; }
.site-footer a:hover{ color: #fff; text-decoration: underline; }
.site-footer__top{ display: grid; gap: var(--sp-7); }
@media (min-width: 900px){ .site-footer__top{ grid-template-columns: minmax(0,1.15fr) minmax(0,2fr); gap: var(--sp-8); } }
.site-footer__logo{ display: block; width: auto; height: 46px; margin-bottom: var(--sp-3); }
.site-footer__descriptor{
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-bright); margin: 0 0 var(--sp-4);
}
.site-footer__blurb{ max-width: 42ch; line-height: 1.6; }
.site-footer__nav{ display: grid; gap: var(--sp-6); }
@media (min-width: 620px){ .site-footer__nav{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.site-footer__heading{
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-dim); margin: 0 0 var(--sp-3); font-weight: 400;
}
.site-footer__col ul{ list-style: none; margin: 0; padding: 0; }
.site-footer__col li{ margin-bottom: .5rem; }
.site-footer__col address{ font-style: normal; }
.site-footer__col address p{ margin-bottom: var(--sp-3); }
.site-footer__partner{ margin-top: var(--sp-4); line-height: 1.6; }
.site-footer__partner span{
  display: block; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: .25rem;
}
.site-footer__routing{ margin-top: var(--sp-3); font-size: .8125rem; color: var(--on-dark-dim); }
.site-footer__base{
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--ink-line);
  display: grid; gap: var(--sp-3);
}
@media (min-width: 900px){ .site-footer__base{ grid-template-columns: auto minmax(0,1fr); gap: var(--sp-7); align-items: start; } }
.site-footer__base p{ margin: 0; font-size: .8125rem; }
.site-footer__legal{ color: var(--on-dark-dim); max-width: min(78ch, 100%); }


/* 18  UTILITIES, PLACEHOLDERS, MOTION ============================= */

.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.img-placeholder{
  border: 1px dashed var(--mist);
  background: repeating-linear-gradient(135deg, var(--concrete) 0 10px, #EDF0F1 10px 20px);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: .5rem; justify-content: center;
  min-height: 150px;
}
.img-placeholder.is-portrait{ min-height: 200px; aspect-ratio: 4/5; }
.img-placeholder__tag{
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-ink);
}
.img-placeholder__spec{ margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--navy); max-width: 46ch; }
.img-placeholder__ratio{ font-family: var(--f-mono); font-size: .625rem; color: var(--graphite); }
.section--dark .img-placeholder{
  border-color: var(--ink-line);
  background: repeating-linear-gradient(135deg, var(--steel) 0 10px, #1A2831 10px 20px);
}
.section--dark .img-placeholder__spec{ color: var(--on-dark-mut); }
.section--dark .img-placeholder__ratio{ color: var(--on-dark-dim); }

.validation-note{
  font-family: var(--f-mono); font-size: .6875rem; line-height: 1.6;
  border: 1px dashed var(--amber); background: var(--amber-soft); color: #6B4406;
  padding: .6rem .8rem; margin: var(--sp-3) 0; max-width: 60ch;
}
.validation-note span{
  display: inline-block; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-ink); margin-right: .5rem; font-weight: 500;
}
/* The note keeps its own light-on-amber palette inside dark sections.
   Without these, `.section--dark p` (0,2,0) wins over `.validation-note`
   (0,1,0) and the text renders pale grey on amber, well under AA. */
.section--dark .validation-note,
.section--navy .validation-note,
.hero .validation-note{ color: #6B4406; }

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

@media print{
  .site-header, .cta-band, .nav-toggle, .img-placeholder, .validation-note{ display: none !important; }
  body{ color: #000; }
  a::after{ content: " (" attr(href) ")"; font-size: .8em; }
}