/* ==========================================================================
   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;}
/* Anton: display only, and deliberately only in two places (the hero headline
   and the KPI figures). A display face used everywhere stops being one, and
   this one costs 18KB, so it has to earn each appearance. */
/* font-display:swap, and the metric-matched fallback below is what makes it
   safe. The order this was worked out in matters, so it is written down:

   1. swap with a mismatched fallback -> CLS 0.055. The fallback set the
      headline at a different width, so the h1 gained a line when Anton
      arrived and shoved the hero panel down 37px.
   2. optional -> CLS 0, but optional decides at first paint and never
      revisits. On a cold load Anton misses the window and the headline
      renders in the fallback for the whole visit, so first-time visitors
      saw squished Arial instead of the display face. Wrong trade for a
      portfolio, where the first visit is the one that counts.
   3. swap + a fallback pinned to one family with a correctly measured
      size-adjust -> Anton always renders, and CLS is 0.0014. Both goals.

   Measured, not assumed: "SHOP FLOOR." sets at 463px in Anton and 474px in
   the fallback, a 2.4% difference, which is why the swap no longer reflows. */
@font-face{font-family:'Anton';src:url("../fonts/Anton.912c3c9f2621.woff2") format('woff2');
  font-weight:400;font-display:swap;}
/* Pinned to ONE family on purpose: size-adjust is a single number, and an
   earlier version listed Arial Narrow first while carrying Arial's ratio,
   which set the fallback far too narrow and caused the very shift it was
   meant to prevent. Ratio measured at 100px against the real headline:
   Anton 1885px, Arial 2710px. Ascent and descent from Anton's OS/2 table. */
@font-face{font-family:'Anton Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:69.6%;ascent-override:140.4%;descent-override:32.9%;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-08: adopted from the A2 study).
     Two changes matter. Body dropped from 17px to 15px with looser leading,
     which is denser and reads more like a technical document than a brochure.
     And the display sizes are for Anton, a condensed face, so the same pixel
     value covers far more characters per line than Archivo did. */
  --fs-caption:11px; --fs-small:13px; --fs-body:15px; --fs-body-lg:16px;
  --fs-h5:17px; --fs-h4:20px; --fs-h3:clamp(22px,2.6vw,28px);
  --fs-h2:clamp(28px,3.6vw,44px);
  /* Anton is condensed, so the old measured constraint on MANUFACTURERS no
     longer binds: the same word sets roughly 40% narrower. 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:'Anton','Anton 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;
  --ink:#1b1d1f; --text:#1b1d1f; --text-2:#565c63; --text-3:#6f757c;
  --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;}
h1,h2,h3,h4,h5{margin:0 0 var(--sp-16);font-weight:800;letter-spacing:-.02em;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 Anton is allowed on a page, alongside the KPI figures.
   Section heads stay Archivo 800: reserving the display face is what gives
   the headline its weight. */
h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:400;
  letter-spacing:.004em;line-height:.99;}
h2{font-size:var(--fs-h2);letter-spacing:-.032em;} h3{font-size:var(--fs-h3);letter-spacing:-.026em;}
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);}

.kicker,.eyebrow{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);
  letter-spacing:.18em;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:400;font-size:10px;letter-spacing:.13em;color:#8b9096;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 ────────────────────────────────────────────────────────────────── */
.hero{background:var(--grey-50);border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:80px var(--sp-32) 86px;}
.hero h1{margin:24px 0 0;}
/* 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. */
.hero h1 .hl,.hero h1 .accent{
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% .96em;background-position:0 .27em;
  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:var(--fs-body-lg);color:var(--text-2);max-width:48ch;margin:26px 0 0;line-height:1.5;}
.cta-row{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
.trust{display:flex;align-items:center;gap:16px;margin-top:40px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;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-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--text);}
.avail .adot{width:8px;height:8px;border-radius:50%;background:#28a745;flex:none;box-shadow:0 0 0 3px rgba(40,167,69,.18);}

/* control panel (hero visual) */
.panel{background:var(--black);color:var(--white);box-shadow:0 24px 60px rgba(20,20,20,.28);}
.panel-top{display:flex;align-items:center;justify-content:space-between;background:var(--charcoal);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:.16em;color:var(--yellow);}
.panel-top .live{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;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;font-family:var(--font-mono);font-size:13px;padding:11px 0;border-bottom:1px solid #2a2e33;color:#d6d9dd;}
.prow .ok{color:var(--yellow);letter-spacing:.1em;font-size:11px;}
.metric{display:flex;align-items:baseline;gap:16px;margin-top:22px;}
.metric .was{font-family:var(--font-mono);font-size:15px;color:#8b9096;text-decoration:line-through;text-decoration-color:var(--red-on-dark);}
.metric .now{font-weight:900;font-size:52px;color:var(--yellow);line-height:.9;letter-spacing:-.02em;}
.metric .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:#8b9096;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:15px;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:11px;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:10px;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-size:11px;letter-spacing:.14em;color:#9aa0a6;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:11px;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:11px;letter-spacing:.12em;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:15px;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:#9aa0a6;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:11px;letter-spacing:.05em;color:#8b9096;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-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#9aa0a6;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:#b9bec4;font-size:13px;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:11px;letter-spacing:.14em;text-transform:uppercase;}
.bzone-note{margin:auto 0 0;padding-top:var(--sp-24);font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9aa0a6;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:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#9aa0a6;white-space:nowrap;}
.bgap-f{display:grid;place-items:center;gap:8px;margin-top:var(--sp-24);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#b9bec4;}
.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:10px;letter-spacing:.1em;color:var(--yellow);}
.pipe b{font-weight:700;font-size:14px;}
.pipe span{display:block;color:#b9bec4;font-size:13px;margin-top:1px;}
.bfoot{grid-column:1/-1;border-top:1px solid #2a2e33;padding:14px var(--sp-24);
  color:#b9bec4;font-size:13px;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-size:11px;letter-spacing:.16em;
  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:13px;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-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px;}
.step h3{font-size:17px;font-weight:800;letter-spacing:-.022em;margin:0;text-transform:none;}
.step p{color:var(--text-2);font-size:14px;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:400;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;} }

/* ── 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-grid{grid-template-columns:1fr;gap:44px;padding:52px var(--sp-24) 60px;}
  .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;}
}