/* ==========================================================================
   Hammad Hassan — industrial design system (Caterpillar-inspired).
   Black + industrial yellow, white/grey content, red for alerts only.
   Display + body: Archivo (heavy grotesque). Technical labels: IBM Plex Mono.
   ========================================================================== */

/* ── Fonts (self-hosted, subset) ─────────────────────────────────────────── */
@font-face{font-family:'Archivo';src:url("../fonts/Archivo.cd56e2ec63d7.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Mono';src:url("../fonts/PlexMono-400.79936b18df9f.woff2") format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Plex Mono';src:url("../fonts/PlexMono-500.b1c8a895f5fd.woff2") format('woff2');font-weight:500;font-display:swap;}
/* Archivo Condensed: display only, in two places (the h1 and the KPI figures).
   2026-10: replaces Anton. Anton was a second family beside Archivo, and the
   two never matched; the h1 and the h2s read like two different sites. This
   is a static cut of Archivo's own variable font (wdth 66, wght 800, Latin
   subset, OFL, licence in fonts/Archivo-OFL.txt), so the headline and the
   section heads are now one family at two widths. Same 18KB budget as Anton:
   at wdth 66 it sets about 5% wider than Anton did, so the type scale held.

   font-display:swap plus a metric-matched fallback, for the reason worked out
   on Anton: optional left first-time visitors on the fallback for the whole
   visit, and swap with an unmatched fallback reflowed the hero (CLS 0.055). */
@font-face{font-family:'Archivo Condensed';src:url("../fonts/ArchivoCondensed-800.7ea4d1206fd4.woff2") format('woff2');
  font-weight:800;font-display:swap;}
/* Pinned to ONE family: size-adjust is a single number. Ratio measured from
   the hmtx advances of the real headline against Arial (73.0%); ascent and
   descent are the face's hhea values divided by that ratio. Recompute with
   the font if the cut changes. */
@font-face{font-family:'Archivo Condensed Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:73%;ascent-override:120.2%;descent-override:28.8%;line-gap-override:0%;}

:root{
  /* Spacing scale (kept — templates reference these inline) */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-80:80px; --sp-96:96px; --sp-128:128px;
  /* Type scale. 2026-10: body back up from 15px to 17px and no label below
     12px. At 15px grey body text and 10-11px mono labels the page read faded:
     every colour passed AA, but the only strong contrast left was in the
     headlines. Size did more for perceived contrast than any colour change. */
  --fs-caption:12px; --fs-small:14px; --fs-body:17px; --fs-body-lg:18px;
  --fs-h5:17px; --fs-h4:20px; --fs-h3:clamp(22px,2.6vw,28px);
  --fs-h2:clamp(28px,3.6vw,44px);
  /* The display face is condensed, so MANUFACTURERS fits at these sizes.
     Verified at 320px and up by scripts, not by eye. */
  --fs-h1:clamp(34px,5.2vw,80px);
  --fs-figure:clamp(28px,3.2vw,44px);
  --r-sm:2px; --r-md:3px; --r-lg:4px; /* industrial = near-square corners */
  --lh-heading:1.04; --reading-w:68ch; --max-w:1240px; --nav-h:70px;
  --t-fast:.14s; --t-std:.2s; --t-complex:.28s; --ease:cubic-bezier(.2,.6,.2,1);
  --font-mono:'Plex Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --font-display:'Archivo Condensed','Archivo Condensed Fallback',Archivo,system-ui,sans-serif;

  /* Industrial palette */
  --yellow:#ffcd11; --yellow-deep:#e6b400;
  --black:#151515; --charcoal:#232629; --charcoal-2:#2d3135;
  --white:#ffffff; --grey-50:#f4f5f6; --grey-100:#e9ebee; --line:#d9dde1;
  /* 2026-10: --text-2 darkened from #565c63 (6.8:1) to #41464c (9.6:1). It
     carries most running copy (card text, notes, FAQ answers), not just meta. */
  --ink:#1b1d1f; --text:#1b1d1f; --text-2:#41464c; --text-3:#5c626a;
  /* Secondary text on the dark panels, nav and footer (was #8b9096/#9aa0a6). */
  --on-dark-2:#b4b9bf;
  --red:#d81f2a; --red-on-dark:#ff5f5f;
  /* legacy aliases (fills/bars only) */
  --accent:#ffcd11; --bg:#ffffff; --surface:#f4f5f6; --surface-2:#e9ebee; --border:#d9dde1;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--white);color:var(--text);
  font-family:'Archivo',system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* Every figure on the site is tabular, so columns of numbers line up. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
/* Uppercase heavy headings ran at -.02 to -.032em with no word-spacing, which
   closed the gaps between words ("SAPAUTOMATION", "HOWIHELP"). Tracking is
   now near zero and word-spacing opens the space back up. */
h1,h2,h3,h4,h5{margin:0 0 var(--sp-16);font-weight:800;letter-spacing:-.008em;word-spacing:.1em;line-height:var(--lh-heading);text-wrap:balance;text-transform:uppercase;overflow-wrap:break-word;}
/* Grid/flex children must be allowed to shrink below their content's
   intrinsic width, or a long heading word forces the whole page wider than
   the phone screen (min-width:auto is the default and causes overflow). */
.hero-l,.hero-r,.panel,.stat,.card,.case>*{min-width:0;}
/* h1 is the one place the condensed cut is used on a page, alongside the KPI
   figures. Section heads stay Archivo 800 at normal width. */
h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:800;
  letter-spacing:0;word-spacing:.06em;line-height:.98;}
h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);} h5{font-size:var(--fs-h5);}
p{margin:0 0 var(--sp-16);}
::selection{background:var(--yellow);color:var(--black);}

.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-32);}
.section{padding:var(--sp-96) 0;}
.section--tight{padding:var(--sp-64) 0;}
.section--dark{background:var(--black);color:var(--white);}
.reading{max-width:var(--reading-w);margin:0 auto;padding:0 var(--sp-24);}
/* .reading's padding shorthand came after .section--tight and zeroed its
   vertical padding, so service-page copy started flush against the header. */
.reading.section--tight{padding:var(--sp-64) var(--sp-24);}

.kicker,.eyebrow{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:10px;}
.eyebrow .dot{width:9px;height:9px;background:var(--yellow);flex:none;}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--black);padding:10px 16px;font-family:var(--font-mono);z-index:100;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}
.section--dark :focus-visible{outline-color:var(--yellow);}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:14px 24px;border:2px solid transparent;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);}
.btn.lg{padding:17px 30px;font-size:14px;}
.btn-y,.btn--primary{background:var(--yellow);color:var(--black);}
.btn-y:hover,.btn--primary:hover{background:var(--yellow-deep);color:var(--black);}
.btn-ghost,.btn--secondary,.btn--ghost{background:transparent;color:var(--black);border-color:var(--black);}
.btn-ghost:hover,.btn--secondary:hover,.btn--ghost:hover{background:var(--black);color:var(--white);}
.btn-dark{background:var(--black);color:var(--yellow);}
.btn-dark:hover{background:#000;color:var(--yellow);}
.section--dark .btn-ghost{color:#fff;border-color:#fff;}
.section--dark .btn-ghost:hover{background:#fff;color:var(--black);}

.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;background:transparent;
  border:1px solid var(--line);color:inherit;cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast);}
.icon-btn:hover{border-color:var(--yellow);color:var(--yellow-deep);}
.site-footer .icon-btn{border-color:#3a3f45;color:#c3c7cc;}
.site-footer .icon-btn:hover{border-color:var(--yellow);color:var(--yellow);}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.site-nav{background:var(--black);border-bottom:3px solid var(--yellow);position:sticky;top:0;z-index:30;}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);}
.brand{display:flex;flex-direction:column;justify-content:center;gap:3px;}
.brand-name{color:var(--white);font-weight:800;font-size:16px;letter-spacing:.02em;line-height:1;text-transform:uppercase;}
.brand-sub{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--on-dark-2);text-transform:uppercase;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links>a:not(.btn){font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#c3c7cc;}
.nav-links>a:not(.btn):hover,.nav-links>a[aria-current="page"]{color:var(--yellow);}
.nav-cta{color:var(--black);}
.nav-toggle{display:none;color:#fff;border-color:#3a3f45;}
.nav-drawer{position:fixed;top:76px;left:0;right:0;z-index:25;display:none;flex-direction:column;background:var(--charcoal);border-bottom:3px solid var(--yellow);max-height:80vh;overflow-y:auto;box-shadow:0 24px 48px rgba(0,0,0,.45);}
.nav-drawer.is-open{display:flex;}
body.drawer-open{overflow:hidden;}
.nav-drawer a{padding:16px var(--sp-32);color:#e6e8ea;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #34383d;}
.nav-drawer a:hover{color:var(--yellow);}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* 2026-10: the hero briefly went black with a faint drawing-sheet grid; the
   owner found it too dark and the grid busy. It is now plain white with ink
   text. The black nav above and the dark stats band below still frame it,
   and the dark control panel carries the theme inside it. */
.hero{background:var(--white);color:var(--text);border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding:88px var(--sp-32) 96px;}
.hero h1{margin:22px 0 0;color:var(--black);font-size:clamp(36px,4.9vw,74px);}
.hero .eyebrow{color:var(--text-2);}
/* Marker highlight, not a full inline background box.
   An inline background fills the whole content box. Anton's content box is
   1.505em tall while the h1 line-height is .99em, so it overflowed by half an
   em and clipped the line above. A gradient sized to the cap band cannot.

   The offsets are DERIVED FROM FONT METRICS, not guessed, and they differ per
   face because the baseline sits in a different place in each content box:

     Anton   ascent 1.176em  cap .859em  ->  cap top .317em, baseline 1.176em
     Archivo ascent  .878em  cap .686em  ->  cap top .192em, baseline  .878em

   The band runs from just above cap top to just below the baseline. Getting
   this wrong is visible: the first attempt used .1em/.78em, which ended .3em
   ABOVE Anton's baseline and left the bottom third of every letter hanging
   outside the yellow. Recompute from the OS/2 table if a face changes.
   2026-10: the h1 is now Archivo Condensed, which shares Archivo's vertical
   metrics, so the band is the Archivo one (cap top .192em, baseline .878em). */
.hero h1 .hl,.hero h1 .accent{
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% .8em;background-position:0 .14em;
  color:var(--black);padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
/* Same device for body copy, where the face is Archivo. */
.accent{
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% .78em;background-position:0 .15em;
  color:var(--black);padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hero .sub{font-size:19px;color:var(--text);max-width:46ch;margin:26px 0 0;line-height:1.55;}
.cta-row{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
.trust{display:flex;align-items:center;gap:10px 18px;margin-top:40px;font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--text-2);text-transform:uppercase;flex-wrap:wrap;}
.trust .sep{width:5px;height:5px;background:var(--yellow);flex:none;}
.avail{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:15px;color:#e6e8ea;}
.avail .adot{width:9px;height:9px;border-radius:50%;background:#4ade80;flex:none;box-shadow:0 0 0 3px rgba(74,222,128,.2);}

/* Photo slot. Only rendered when Hero section > photo is set; until then the
   panel stands alone, exactly as before, so there is never a visible gap. */
.hero-r.has-photo{position:relative;padding-bottom:40px;}
.hero-photo{max-width:380px;margin:0 0 0 auto;border:1px solid #34383d;background:var(--charcoal);}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.has-photo .panel{position:absolute;left:0;bottom:0;width:min(330px,88%);}
.has-photo .panel-body{padding:16px 18px 18px;}
.has-photo .alert{display:none;}

/* control panel (hero visual): a dark instrument on the white hero. */
.panel{background:var(--charcoal);color:var(--white);border:1px solid #34383d;box-shadow:0 24px 48px rgba(21,21,21,.18);}
.panel-top{display:flex;align-items:center;justify-content:space-between;background:var(--charcoal-2);padding:14px 18px;border-bottom:2px solid var(--yellow);}
.panel-top .t{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;color:var(--yellow);}
.panel-top .live{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:#c3c7cc;display:flex;align-items:center;gap:7px;}
.panel-top .live::before{content:"";width:8px;height:8px;background:var(--yellow);border-radius:50%;}
.panel-body{padding:22px 20px 24px;}
.prow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:14px;padding:11px 0;border-bottom:1px solid #3a3f45;color:#e6e8ea;}
.prow .ok{color:var(--yellow);letter-spacing:.08em;font-size:12px;font-weight:500;}
.metric{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-top:22px;}
.metric .was{font-family:var(--font-mono);font-size:15px;color:var(--on-dark-2);text-decoration:line-through;text-decoration-color:var(--red-on-dark);white-space:nowrap;}
.metric .now{font-weight:900;font-size:52px;color:var(--yellow);line-height:.9;letter-spacing:-.02em;white-space:nowrap;}
.metric .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--on-dark-2);text-transform:uppercase;}
.alert{margin-top:20px;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--red-on-dark);border-left:3px solid var(--red-on-dark);padding:9px 0 9px 12px;background:rgba(216,31,42,.08);}

/* ── Section head ────────────────────────────────────────────────────────── */
.section-head{margin-bottom:var(--sp-48);max-width:60ch;}
.section-head h2{margin-top:var(--sp-16);}
.section-head .note{color:var(--text-2);font-size:var(--fs-body-lg);margin-top:var(--sp-16);text-transform:none;font-weight:400;}
.section--dark .section-head .note{color:#c3c7cc;}

/* ── Services grid ───────────────────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.svc .card{padding:var(--sp-32) 30px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;background:var(--white);transition:background var(--t-std);}
.svc .card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform var(--t-complex);}
.svc .card:hover{background:var(--grey-50);}
.svc .card:hover::before{transform:scaleX(1);}
.svc .card h3{font-size:20px;margin:14px 0 10px;line-height:1.06;}
.svc .card p{color:var(--text-2);font-size:16px;line-height:1.55;margin:0;text-transform:none;}
.svc .card.dark{background:var(--black);color:#fff;}
.svc .card.dark h3{color:#fff;} .svc .card.dark p{color:#c3c7cc;}
.card-idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--text-2);}
.card.dark .card-idx{color:var(--yellow);}

/* ── Case study rows / project index ─────────────────────────────────────── */
.cases{background:var(--grey-50);}
.case{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding:var(--sp-32) 0;border-bottom:1px solid var(--line);color:inherit;}
.case:first-of-type{border-top:1px solid var(--line);}
.case .tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);width:190px;flex:none;}
.case .tag b{display:block;color:var(--text);font-weight:700;margin-bottom:4px;}
.case h3{font-size:clamp(22px,2.4vw,30px);margin:0;}
.case .ch{color:var(--text-2);font-size:15px;text-transform:none;margin:8px 0 0;font-weight:400;letter-spacing:0;line-height:1.5;}
.case .impact{text-align:right;white-space:nowrap;}
.case .impact .n{font-weight:900;font-size:26px;letter-spacing:-.02em;}
.case .impact .il{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin-top:4px;}
.case:hover h3{color:var(--yellow-deep);}

/* ── Stats band ──────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:var(--sp-48) var(--sp-24);border-right:1px solid #2a2e33;}
.stat:last-child{border-right:0;}
.stat .n{font-weight:900;font-size:44px;color:var(--yellow);letter-spacing:-.02em;line-height:1;}
.stat .l{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--on-dark-2);text-transform:uppercase;margin-top:14px;}

/* ── Cards / project cards (grid) ────────────────────────────────────────── */
.grid{display:grid;gap:0;}
.grid--3{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.grid--2{grid-template-columns:repeat(2,1fr);gap:var(--sp-24);}
.card{background:var(--white);}
.project-card{display:block;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);transition:background var(--t-std);position:relative;color:inherit;}
.project-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform var(--t-complex);z-index:1;}
.project-card:hover{background:var(--grey-50);}
.project-card:hover::before{transform:scaleX(1);}
.project-card .thumb{aspect-ratio:3/2;overflow:hidden;background:var(--grey-100);border-bottom:1px solid var(--line);}
.project-card .thumb img{width:100%;height:100%;object-fit:cover;}
.project-card .body{padding:var(--sp-24) var(--sp-24) var(--sp-32);}
.project-card h3{font-size:var(--fs-h5);margin:0 0 var(--sp-8);}
.project-card .desc{color:var(--text-2);font-size:var(--fs-small);text-transform:none;margin:0 0 var(--sp-16);}

/* ── Chips (tech tags) ───────────────────────────────────────────────────── */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);color:var(--text-2);background:var(--white);}
.chip--accent{background:var(--yellow);border-color:var(--yellow);color:var(--black);font-weight:500;}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta-band{background:var(--yellow);}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:58px var(--sp-32);flex-wrap:wrap;}
.cta-in h2{color:var(--black);margin:0;}

/* ── About ───────────────────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;}
.about-grid p{color:var(--text-2);font-size:var(--fs-body-lg);line-height:1.6;text-transform:none;}
.creds{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--text);text-transform:uppercase;margin-top:var(--sp-24);border-left:4px solid var(--yellow);padding-left:16px;line-height:1.9;}

/* ── Timeline / experience (kept minimal) ───────────────────────────────── */
.timeline{border-left:2px solid var(--line);padding-left:var(--sp-24);}
.timeline .item{padding-bottom:var(--sp-32);position:relative;}
.timeline .item::before{content:"";position:absolute;left:calc(-1 * var(--sp-24) - 6px);top:6px;width:10px;height:10px;background:var(--yellow);}
.timeline .when{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-4);}
.timeline h3{font-size:var(--fs-h5);margin-bottom:var(--sp-4);}

/* ── Skills / competencies list ─────────────────────────────────────────── */
.skill-group{margin-bottom:var(--sp-40);}
.skill-group h3{font-size:var(--fs-caption);letter-spacing:.14em;color:var(--text-2);margin-bottom:var(--sp-16);}
.skill-item{padding:var(--sp-12) 0;border-bottom:1px solid var(--line);}
.skill-item .level{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-2);}

/* ── Article / project detail head ──────────────────────────────────────── */
.article-head{padding:calc(var(--nav-h) - 40px) 0 var(--sp-48);border-bottom:1px solid var(--line);background:var(--grey-50);}
.article-head .meta{display:flex;flex-wrap:wrap;gap:var(--sp-16);color:var(--text-2);font-family:var(--font-mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.08em;margin-top:var(--sp-16);}
.article-head .meta .icon{vertical-align:-2px;}
.article-head .lead{color:var(--text-2);font-size:var(--fs-body-lg);text-transform:none;max-width:60ch;margin-top:var(--sp-20);}

/* Breadcrumbs: the visible twin of the BreadcrumbList JSON-LD, so the path
   a crawler is told about is the one a visitor can actually click. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:var(--sp-24);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);}
.crumbs a{color:var(--text-2);}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--yellow-deep);text-underline-offset:3px;}
.crumbs [aria-current="page"]{color:var(--text);}

/* Scope list: the sub-services of a landing page. Real deliverables shown as
   content, which is why they don't each need a page of their own. */
.scope-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.scope-list li{padding:16px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:16px;color:var(--text);display:flex;align-items:center;gap:12px;min-width:0;}
.scope-list li::before{content:"";width:7px;height:7px;background:var(--yellow);flex:none;}

/* ── Prose (markdown) ────────────────────────────────────────────────────── */
.prose{font-size:var(--fs-body);line-height:1.7;}
.prose>*{text-transform:none;}
.prose h2{font-size:var(--fs-h4);margin:var(--sp-48) 0 var(--sp-16);}
.prose h3{font-size:var(--fs-h5);margin:var(--sp-32) 0 var(--sp-12);}
.prose p{margin:0 0 var(--sp-20);color:var(--text);}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow-deep);text-underline-offset:3px;}
.prose ul,.prose ol{margin:0 0 var(--sp-20) var(--sp-20);}
.prose li{margin-bottom:var(--sp-8);}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--grey-100);padding:2px 6px;}
.prose pre{overflow-x:auto;padding:var(--sp-20);background:var(--black);color:#e6e8ea;margin:0 0 var(--sp-20);}
.prose blockquote{border-left:4px solid var(--yellow);padding-left:var(--sp-20);margin:0 0 var(--sp-20);color:var(--text-2);}

/* ── Forms (contact) ─────────────────────────────────────────────────────── */
.field{margin-bottom:var(--sp-20);}
.field label{display:block;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:var(--sp-8);}
.field input,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);background:var(--white);color:var(--text);font-family:'Archivo',sans-serif;font-size:var(--fs-body);}
.field input:focus,.field textarea:focus{outline:2px solid var(--yellow);outline-offset:0;border-color:var(--black);}
.field .hp{position:absolute;left:-9999px;}
.form-note{padding:var(--sp-16);border-left:4px solid #28a745;background:#eef8f0;font-size:var(--fs-small);color:var(--text);}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-banner{display:flex;align-items:center;gap:10px;padding:var(--sp-16);margin-bottom:var(--sp-24);font-size:var(--fs-small);}
.form-banner.success{border-left:4px solid #28a745;background:#eef8f0;color:var(--text);}
/* Red is reserved for alerts and blocked actions (DESIGN.md), which is
   exactly what a throttled submission is. */
.form-banner.warn{border-left:4px solid var(--red);background:#fdeef0;color:var(--text);}
.field .error{color:var(--red);font-family:var(--font-mono);font-size:var(--fs-caption);display:block;margin-top:6px;}
.field.has-error input,.field.has-error textarea{border-color:var(--red);}
/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer;padding:var(--sp-20) 0;font-weight:700;font-size:var(--fs-body-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16);list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{transition:transform var(--t-std);color:var(--text-2);flex:none;}
.faq-item[open] summary .icon{transform:rotate(180deg);}
.faq-item .answer,.faq-item>p{padding:0 0 var(--sp-24);color:var(--text-2);max-width:var(--reading-w);}

/* ── Post rows (blog) ────────────────────────────────────────────────────── */
.post-row{display:block;padding:var(--sp-24) 0;border-bottom:1px solid var(--line);color:inherit;}
.post-row:hover h3{color:var(--yellow-deep);}
.post-row h3{font-size:var(--fs-h5);margin:0 0 var(--sp-8);}
.post-row .excerpt{color:var(--text-2);text-transform:none;margin:0 0 var(--sp-12);}
.post-row .meta{color:var(--text-2);font-family:var(--font-mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.08em;display:flex;gap:var(--sp-16);}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-16);}
.gallery img{border:1px solid var(--line);}
.gallery figcaption{margin-top:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-2);text-transform:uppercase;}

/* ── Empty & error states ────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:var(--sp-80) var(--sp-24);border:1px dashed var(--line);color:var(--text-2);}
.empty-state h3{color:var(--text);}
.error-page{text-align:center;padding:var(--sp-128) var(--sp-24);}
.error-page .code{font-family:var(--font-mono);letter-spacing:.14em;color:var(--yellow-deep);text-transform:uppercase;margin-bottom:var(--sp-16);}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{background:var(--black);color:var(--on-dark-2);padding:var(--sp-48) 0 var(--sp-40);}
.foot-in{display:flex;justify-content:space-between;gap:var(--sp-24);flex-wrap:wrap;align-items:flex-start;}
.site-footer .brand-name{color:#fff;}
.foot-links{display:flex;gap:26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap;}
.foot-links a:hover{color:var(--yellow);}
.socials{display:flex;gap:10px;}
.fineprint{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--on-dark-2);margin-top:var(--sp-32);border-top:1px solid #2a2e33;padding-top:var(--sp-20);text-transform:uppercase;}

/* ── Scroll progress (articles) ──────────────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--yellow);z-index:40;}

/* Content is always visible (no fragile scroll-reveal). The industrial look
   is immediate; interactions live in hover states, not entrance fades. */
.reveal{opacity:1;transform:none;}

/* ══ MES content blocks (2026-08) ═══════════════════════════════════════════
   Adopted from the A2 study, recoloured to the site's black and yellow.
   One accent rule throughout: yellow is a FILL, never small text on a light
   ground (it measures about 1.9:1 and is unreadable). Where an accent has to
   be text on light, it uses --accent-ink, a dark ochre that clears AA.       */
:root{ --accent-ink:#6f5300; }

/* ── The boundary diagram: proves the SAP claim instead of asserting it ──── */
.boundary{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);
  border:1px solid #2a2e33;background:var(--charcoal);color:var(--white);}
.bzone{padding:var(--sp-24);display:flex;flex-direction:column;min-width:0;}
.bzone-k{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-2);margin:0 0 var(--sp-16);}
.sealed{border:1px solid #3a3f45;background:var(--charcoal-2);padding:var(--sp-16);position:relative;}
.sealed b{display:block;font-weight:800;font-size:18px;letter-spacing:-.02em;}
.sealed span{display:block;color:#c9cdd2;font-size:14px;margin-top:6px;line-height:1.5;}
.sealed .stamp{position:absolute;top:var(--sp-16);right:var(--sp-16);color:#4ade80;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.bzone-note{margin:auto 0 0;padding-top:var(--sp-24);font-family:var(--font-mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);line-height:1.7;}
/* The air gap. A dashed rule, not a connector: only a file crosses it. */
.bgap{display:grid;place-items:center;padding:var(--sp-24) var(--sp-16);
  border-inline:1px dashed #3a3f45;}
.bgap-t{writing-mode:vertical-rl;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap;}
.bgap-f{display:grid;place-items:center;gap:8px;margin-top:var(--sp-24);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#c9cdd2;}
.bgap-f i{font-style:normal;background:var(--yellow);color:var(--black);
  width:30px;height:30px;display:grid;place-items:center;font-size:14px;line-height:1;}
.pipe{list-style:none;counter-reset:step;display:grid;gap:1px;background:#2a2e33;
  border:1px solid #2a2e33;margin:0;padding:0;}
.pipe li{counter-increment:step;background:var(--charcoal-2);padding:12px 14px;
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;}
.pipe li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;color:var(--yellow);}
.pipe b{font-weight:700;font-size:15px;}
.pipe span{display:block;color:#c9cdd2;font-size:14px;margin-top:1px;}
.bfoot{grid-column:1/-1;border-top:1px solid #2a2e33;padding:14px var(--sp-24);
  color:#c9cdd2;font-size:14px;display:flex;gap:var(--sp-16);flex-wrap:wrap;align-items:center;}
.bfoot b{color:var(--white);font-weight:700;}

/* ── Measured to scale ──────────────────────────────────────────────────── */
.scale{max-width:820px;}
.bar-row{display:grid;gap:8px;margin-bottom:var(--sp-24);}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-16);}
.bar-top .who{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);}
.bar-top .val{font-weight:900;font-size:22px;letter-spacing:-.03em;}
.track{height:26px;border:1px solid var(--line);background:var(--grey-50);}
.fill{height:100%;}
.fill.was{background:repeating-linear-gradient(-45deg,var(--line) 0 5px,transparent 5px 10px);
  border-right:2px solid var(--text-2);}
.fill.now{background:var(--yellow);}
.scale-note{color:var(--text-2);font-size:15px;max-width:58ch;margin:var(--sp-16) 0 0;
  padding-left:var(--sp-16);border-left:2px solid var(--yellow);line-height:1.6;}

/* ── Engagement steps ───────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-16);}
.step{border-top:3px solid var(--line);padding-top:var(--sp-16);transition:border-color var(--t-std);}
.step:hover{border-top-color:var(--yellow);}
.step .n{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px;}
.step h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0;text-transform:none;}
.step p{color:var(--text-2);font-size:16px;margin:8px 0 0;line-height:1.55;}

/* ── Straight answers ───────────────────────────────────────────────────── */
.qa{border-top:1px solid var(--line);max-width:960px;}
.qa details{border-bottom:1px solid var(--line);}
.qa summary{cursor:pointer;list-style:none;padding:var(--sp-24) 0;display:flex;
  justify-content:space-between;gap:var(--sp-16);align-items:baseline;
  font-weight:800;font-size:18px;letter-spacing:-.022em;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+";font-family:var(--font-mono);font-size:18px;
  color:var(--accent-ink);flex:none;line-height:1;}
.qa details[open] summary::after{content:"\2212";}
.qa summary:hover{color:var(--accent-ink);}
.qa .ans{padding-bottom:var(--sp-24);color:var(--text-2);max-width:70ch;line-height:1.65;}
.qa .ans p+p{margin-top:var(--sp-12);}

/* ── KPI figures use the display face ───────────────────────────────────── */
.stat .n{font-family:var(--font-display);font-weight:800;font-size:var(--fs-figure);}

@media (max-width:900px){
  .boundary{grid-template-columns:1fr;}
  .bgap{border-inline:0;border-block:1px dashed #3a3f45;padding:var(--sp-16);}
  .bgap-t{writing-mode:horizontal-tb;}
  .bgap-f{margin-top:var(--sp-12);}
  .steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;}
  /* The separators wrapped onto their own lines on phones and read as stray
     yellow squares. Each fact gets its own marker instead. */
  .trust{display:grid;gap:10px;}
  .trust .sep{display:none;}
  .trust span{display:flex;align-items:center;gap:10px;}
  .trust span::before{content:"";width:5px;height:5px;background:var(--yellow);flex:none;}
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .scope-list{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .nav-links{display:none;} .nav-toggle{display:inline-grid;}
  /* .hero .hero-grid, not .hero-grid: the .container rule below has the same
     specificity and comes later, so it was zeroing the hero's top and bottom
     padding on phones (the eyebrow sat against the nav). */
  .hero .hero-grid{grid-template-columns:1fr;gap:44px;padding:52px var(--sp-24) 64px;}
  .hero-photo{margin:0 auto;max-width:320px;}
  .has-photo .panel{left:50%;transform:translateX(-50%);}
  .svc,.grid--3{grid-template-columns:1fr;}
  .grid--2{grid-template-columns:1fr;}
  .scope-list{grid-template-columns:1fr;}
  .case{grid-template-columns:1fr;gap:10px;padding:var(--sp-24) 0;}
  .case .tag{width:auto;} .case .impact{text-align:left;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat{border-bottom:1px solid #2a2e33;}
  .about-grid{grid-template-columns:1fr;gap:var(--sp-24);}
  .container{padding:0 var(--sp-24);}
  .cta-in{padding:44px var(--sp-24);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
  .reveal{opacity:1;transform:none;}
}