/* ==================================================================
   KEMET INTERNATIONAL GROUP — SHARED SITE CHROME
   ------------------------------------------------------------------
   The subset of index.html's inline <style> block that every page
   needs: fonts, the two-theme token set, base type, the additive
   reveal system, the fixed chrome (grain, vignette, reticle cursor,
   scroll hairline), the sticky nav + theme toggle, the button kit,
   the numbered section eyebrow (.sec-no / .rule-head), the masked
   line wipe (.msk), the boot loader, and the consent + newsletter
   overlays.

   Every rule below is copied VERBATIM from index.html so the two
   pages sharing it (about.html, contact.html) render pixel-for-pixel
   the same chrome as the home page. index.html still carries its own
   inline copy of these rules; if a token or a nav rule changes there,
   change it here too (or, better, point index.html at this file and
   delete its duplicate — that consolidation is deliberately NOT done
   here so the home page is untouched by the sub-page work).

   MOTION CONTRACT (same as index.html): every element is visible and
   correctly positioned with no JS. Hidden/pre-animation states exist
   ONLY inside html.anim, a class kig-site.js adds after confirming
   IntersectionObserver support and that prefers-reduced-motion is not
   set. Nothing animated changes layout — transform, opacity,
   clip-path and stroke only. Reveals REPLAY: the observer toggles .in
   on and off, so every entrance re-runs each time it scrolls back in.
   ================================================================== */

/* Fonts are self-hosted (OFL / Apache licensed) so the page makes no
   third-party request at all — the client asked for no external links. */
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url(fonts/oswald-var.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format("woff2");}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/robotomono-var.woff2) format("woff2");}

/* ==================================================================
   KEMET INTERNATIONAL GROUP
   Layout is a direct translation of the client capability statement:
   header band -> hero (copy | photo + stat strip) -> core capabilities
   -> why/serve/naics tri-band -> process -> contact.

   MOTION CONTRACT: every element is visible and correctly positioned
   with no JS. Hidden/pre-animation states exist ONLY inside html.anim,
   a class JS adds after confirming IntersectionObserver support and
   that prefers-reduced-motion is not set. Nothing animated changes
   layout — transform, opacity, clip-path and stroke only.
   ================================================================== */
:root{
  /* ---- palette sourced from the supplied globe, not chosen by eye ----
     The four values below marked (glb) are read straight out of the material
     definitions in models/kemet-globe.glb, so the CSS and the model are the
     same colours rather than two near-misses. Previously --gold was #C8A657,
     about 20 units cooler than the model's gold, which is what made the page
     chrome read olive next to the rendered sphere.
     Near-black ground to match the reference hero: the earlier #08090C was
     lifted enough that the globe's limb never went fully dark at the edges. */
  --ink:#050608;
  --ink-2:#0B0D10;
  --ink-3:#161B1F;
  --line-d:#22292D;      /* (glb) "Carbon black" — the sphere body itself */
  /* --gold-ink below is still the ONLY gold permitted for body-weight text on
     light surfaces; the values above it are for graphics, rules, numerals and
     gold-on-dark, where contrast is not a problem. */
  --gold:#C9A227;        /* client-approved gold - 8.2:1 on ink */
  --gold-lit:#E8C765;    /* approved-family highlight */
  --gold-warm:#E3A24A;   /* city-light amber from the reference hero, 9.2:1 */
  --gold-deep:#8A6E14;   /* the approved gold held dark */
  /* The golds above are 1.5–2.2:1 on paper, which fails WCAG AA for both
     normal and large text. --gold-ink is the same hue held down to 5.7:1.
     Relevant here: DoD/DoS/USAID buyers commonly require Section 508 / WCAG AA. */
  --gold-ink:#806316;    /* ~5.4:1 on paper - gold TYPE on light */
  /* warm cream rather than pure white — the reference bands are ivory, and
     white next to this much gold reads cold */
  --paper:#FBF8F1;
  --paper-2:#F2EBDC;
  --paper-line:#E0D6C0;
  --dark-txt:#16181C;
  --mid-txt:#4E5157;
  /* warm off-white; pure #FFF against gold reads clinical */
  --sand:#F2EDE3;
  --sand-dim:#A9A396;

  /* ---- tokens added for the light theme ----
     These replace literals that were previously hard-coded in the rules below
     and so could not flip. Their DARK values are byte-identical to the
     literals they replaced, so the dark theme renders exactly as before. */
  --gold-fg:#050608;                   /* type/glyphs sitting ON a gold fill */
  /* Gold used as TYPE, split from gold used as fills/rules/graphics. On the
     dark palette the two are identical; the split only pays off in light
     mode, where a fill stays brand-yellow while type must darken to stay AA. */
  --gold-txt:var(--gold);
  /* Edge for YELLOW DISPLAY TYPE on the light bands. None in dark mode -
     #C9A227 is 8.2:1 on ink and needs no help. In light mode the fill is
     ~2.3:1 on cream, and a *glow* cannot fix that: on a pale ground a halo
     has nothing to separate from. A tight DARK ring does, so this is a 1px
     edge in the deep gold plus a soft drop shadow.
     Stated plainly: the fill still measures under WCAG AA. It is used only
     on large display headings, never on body copy, and every reading-size
     gold on light stays on --gold-txt. */
  --yellow-edge:none;
  /* Yellow for DISPLAY HEADINGS. Dark mode uses the brand gold directly.
     Light mode cannot: measured on the actual grounds, #C9A227 is 2.28:1 on
     --paper and only 1.77:1 on the light --ink bands, so it fails the 3:1
     large-text floor everywhere and simply is not readable. #96760D is the
     BRIGHTEST yellow that clears 3:1 on the darkest light ground (3.14 on
     #E4DCC9, 4.05 on --paper) - still plainly yellow, not the brown the
     earlier light theme used. */
  --gold-display:var(--gold);
  --gold-txt-lit:var(--gold-lit);
  --band-head:#fff;                    /* section h2 on a tinted band        */
  --nav-bg:rgba(5,6,8,.96);            /* the scrolled nav bar               */
  --nav-shadow:rgba(0,0,0,.9);
  --vig-shade:rgba(5,6,8,.22);         /* decorative vignette                */
  --grid-line:rgba(201,162,39,.05);    /* plotting-grid texture on the bands */
  --txt-ghost:rgba(237,232,220,.42);   /* ticker outline stroke              */
  --line-sand:rgba(237,232,220,.32);   /* hairline on the ghost button       */
  color-scheme:dark;
}

/* ==================================================================
   LIGHT THEME
   Set on <html> by the boot script in <head>. Only colour tokens are
   overridden — no rule below this point is duplicated, and no layout
   value changes, so the motion contract and the grid are untouched.

   Two things drive the values:

   1. The page's rhythm is alternating --ink bands and cream --paper
      bands. If --ink became cream too the alternation would collapse
      into one flat slab, so --ink stays a distinctly darker warm
      stone (#E4DCC9, L*≈87) against paper's #FBF8F1 (L*≈97).
   2. Gold splits by ROLE, not by theme. The previous version redefined
      --gold itself into a dark brown (#6B5320) in light mode to dodge the
      contrast problem in one move. It worked for accessibility and cost the
      brand its colour: buttons, rules, map lines and the network graphic all
      turned olive, which is not the yellow the client approved.
      Now:
        --gold / --gold-lit  stay the approved yellow in BOTH themes. They
             are for FILLS, rules, borders, icons and graphics, where WCAG
             asks 3:1 (1.4.11) or nothing at all for decoration.
        --gold-txt / --gold-txt-lit  are gold used as TYPE. Only these
             darken in light mode: #6B5320 is 6.87:1 on --paper and 5.33:1
             on --ink, clearing the 4.5:1 Section 508 / WCAG AA requires on
             a federal-contractor site.
        --gold-fg  is what sits ON a gold fill: near-black in both themes.
             A yellow button with black type is ~9:1 AND reads as the brand
             colour, where the old cream-on-brown did neither.
   ================================================================== */
:root[data-theme="light"]{
  --ink:#E4DCC9;
  --ink-2:#DCD3BD;
  --ink-3:#D2C8B0;
  --line-d:#BFB196;
  /* FILLS / rules / graphics keep the approved yellow in light mode - this
     is what stops buttons, map lines and the network graphic going olive. */
  --gold:#C9A227;
  --gold-lit:#E8C765;
  --gold-warm:#E3A24A;
  --gold-deep:#A98C4E;
  /* TYPE only: dark enough for AA on both light surfaces */
  --gold-ink:#6B5320;
  --gold-txt:#6B5320;
  --yellow-edge:0 0 1px rgba(74,58,16,.9),0 1px 0 rgba(74,58,16,.5),0 2px 14px rgba(74,58,16,.22);
  --gold-display:#96760D;
  --gold-txt-lit:#4A3A10;
  /* paper stays as it is — the cream bands are already the light half of the
     page and need no change */
  --paper:#FBF8F1;
  --paper-2:#F2EBDC;
  --paper-line:#E0D6C0;
  --dark-txt:#16181C;
  --mid-txt:#4E5157;
  /* --sand / --sand-dim name the type that sits on the --ink bands, so on a
     light --ink they have to become dark type rather than off-white */
  --sand:#16181C;
  --sand-dim:#464A4F;

  --gold-fg:#050608;   /* black on the yellow fill - ~9:1 and still the brand colour */
  --band-head:#16181C;
  --nav-bg:rgba(251,248,241,.96);
  --nav-shadow:rgba(60,50,28,.35);
  --vig-shade:rgba(201,162,39,.13);
  --grid-line:rgba(201,162,39,.17);
  --txt-ghost:rgba(22,24,28,.42);
  --line-sand:rgba(22,24,28,.30);
  color-scheme:light;
}

/* (Removed) A "dark island" rule used to hold .hero, .caps-embed,
   .proc-governance, the transparent .nav and the .rail on the ink palette in
   light mode, from when light theme was scoped to the main page only. The
   embeds now carry their own html[data-theme=\"light\"] overrides and the
   propagation script mirrors the attribute into each iframe, so the islands
   would fight the widgets (a light globe inside dark chrome). The .band-codes
   re-light block below survives as a harmless defensive rule. */

/* governance.js MOVES the NAICS band into .kemet-governance at runtime (it
   becomes a child of the pinned track — check the live DOM, not the markup
   above), so it lands inside the .proc-governance dark island and inherited
   the ink palette: display gold on cream, 1.9:1. It is a cream band in both
   themes and owns its own --paper background, so the light values are
   re-asserted on it here. Listed after the island block deliberately —
   the two selectors have equal specificity and source order decides. */
:root[data-theme="light"] .band-codes{
  --ink:#E4DCC9;
  --ink-2:#DCD3BD;
  --ink-3:#D2C8B0;
  --line-d:#BFB196;
  /* FILLS / rules / graphics keep the approved yellow in light mode - this
     is what stops buttons, map lines and the network graphic going olive. */
  --gold:#C9A227;
  --gold-lit:#E8C765;
  --gold-warm:#E3A24A;
  --gold-deep:#A98C4E;
  /* TYPE only: dark enough for AA on both light surfaces */
  --gold-ink:#6B5320;
  --gold-txt:#6B5320;
  --yellow-edge:0 0 1px rgba(74,58,16,.9),0 1px 0 rgba(74,58,16,.5),0 2px 14px rgba(74,58,16,.22);
  --gold-display:#96760D;
  --gold-txt-lit:#4A3A10;
  --sand:#16181C;
  --sand-dim:#464A4F;
  --gold-fg:#050608;   /* black on the yellow fill - ~9:1 and still the brand colour */
  --band-head:#16181C;
  --line-sand:rgba(22,24,28,.30);
  --grid-line:rgba(201,162,39,.17);
  color-scheme:light;
}

/* ---- everything below is theme-independent: type, easing, geometry ---- */
:root{
  --f-display:"Oswald","Arial Narrow",sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Roboto Mono",ui-monospace,"Courier New",monospace;

  /* ---- fluid type scale: clamp(floor @375px, fluid term, ceiling @1920px) ----
     The fluid term is px + vw, not a bare vw, so the slope is gentle and 1440
     — the most common desktop width — lands near the intended size instead of
     on the floor. The previous bare ~.86vw slopes resolved to 11px reading
     copy at 1440 and 10.5px on mobile, which typeset the page like a printed
     capability statement rather than a screen.
     --fs-lg / --fs-xl / --fs-2xl exist to fill the gap that previously ran
     straight from 15px body type to 82px display with nothing in between.
     The telemetry rail and .net-hud keep their own micro sizes on purpose:
     that readout is instrumentation, and the rail is a fixed-height box. */
  --fs-mono:clamp(11px,10.27px + .19vw,14px);    /* mono labels, footer bar */
  --fs-label:clamp(13px,12.27px + .19vw,16px);   /* uppercase labels, buttons */
  --fs-sm:clamp(15px,14.39px + .16vw,17.5px);    /* dense reference lists */
  --fs-md:clamp(16px,15.27px + .19vw,19px);      /* body copy */
  --fs-lg:clamp(18px,15.57px + .65vw,28px);      /* ledes, card titles */
  --fs-xl:clamp(22px,17.63px + 1.17vw,40px);     /* sub-display */
  --fs-2xl:clamp(28px,21.2px + 1.81vw,56px);     /* hero headline */
  --fs-3xl:clamp(34px,20.89px + 3.5vw,88px);     /* section display */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.16,1,.3,1);

  --pad:clamp(18px,3.4vw,60px);
  --maxw:1500px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--ink);scroll-behavior:smooth;}
[id]{scroll-margin-top:76px;}
body{
  margin:0;background:var(--paper);color:var(--dark-txt);
  font-family:var(--f-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;text-transform:uppercase;line-height:1.02;margin:0;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
/* UA defaults give figure/blockquote `margin:1em 40px`, which was insetting
   the hero photo 40px inside the stat strip below it. */
figure,figcaption,blockquote,dl,dd{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%;}

/* ================= REVEAL SYSTEM (additive only) ================= */
html.anim .rv{opacity:0;transform:translateY(22px);}
html.anim .rv.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease);}
/* .raw opts an element out of the generic fade so it can run its own reveal */
html.anim .rv.raw{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.anim .rv{opacity:1 !important;transform:none !important;}
  /* the sweep is a clip, so the generic opacity/transform reset misses it */
  html.anim .sweep{clip-path:none !important;}
  html.anim .sweep::before{display:none !important;}
  /* the scrub never runs under reduced motion, but pin the end state anyway */
  .step,.proc-line i{--s:1;--rail:1;}
  html.anim .intro-body p{filter:none !important;}
  html.anim .capcard h3::after,html.anim .sec-no::after{transform:none !important;}
}

/* keyboard users land on a fixed nav first — give them a way past it */
.skip{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--gold);color:var(--gold-fg);padding:10px 16px;
  font-family:var(--f-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{top:8px;}

/* ================= FIXED CHROME ================= */
/* film grain + vignette — documentary texture, purely decorative */
.grain{position:fixed;inset:0;width:100%;height:100%;opacity:.035;mix-blend-mode:overlay;pointer-events:none;z-index:88;display:none;}
.vig{
  position:fixed;inset:0;pointer-events:none;z-index:87;display:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,var(--vig-shade) 100%);
}
html.anim .grain,html.anim .vig{display:block;}

/* reticle cursor (desktop pointers only)
   z-index 400 puts it ABOVE the consent bar (310) and the newsletter modal
   (320). It used to sit at 95, which painted it *behind* both - and since
   html.cursor-on sets `cursor:none` on everything, that left no visible
   pointer at all while a dialog was open: you could not see what you were
   aiming at to close it. Anything added above 400 must raise this too. */
#cur,#curDot{
  position:fixed;z-index:400;pointer-events:none;left:0;top:0;opacity:0;transition:opacity .3s;
  will-change:transform;   /* keep both on their own layer; they move every frame */
}
#cur{width:40px;height:40px;margin:-20px 0 0 -20px;}
#cur .ring{stroke:var(--gold);fill:none;stroke-width:1;opacity:.75;}
#cur .tick{stroke:var(--gold-lit);stroke-width:1.4;stroke-linecap:round;}
#curDot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--gold-lit);}
/* The custom cursor REPLACES the real one (cursor:none below), so it has to
   stay visible on every ground the page has. --gold is ~2.4:1 and --gold-lit
   ~1.6:1 against the cream/beige light surfaces, which left the pointer
   effectively invisible in light mode - and there is no OS cursor behind it
   to fall back on. The dark text gold is 6.87:1 on paper. */
:root[data-theme="light"] #cur .ring{stroke:var(--gold-txt);opacity:.95;}
:root[data-theme="light"] #cur .tick{stroke:var(--gold-txt);}
:root[data-theme="light"] #curDot{background:var(--gold-txt);}
html.cursor-on,html.cursor-on *{cursor:none !important;}
html.cursor-on #cur,html.cursor-on #curDot{opacity:1;}
html.cursor-on #cur.hot .ring{opacity:1;}
@media (hover:none),(pointer:coarse){#cur,#curDot{display:none !important;}}

/* ================= SHARED ================= */
/* Section headings: left-aligned and oversized, with a mono index label.
   The previous centred-heading-flanked-by-gold-rules is the single most
   recognisable stock-theme device there is; it has been removed. */
.rule-head{display:block;}
.sec-no{
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:clamp(10px,1.2vw,18px);
}
.sec-no::after{content:"";flex:0 0 clamp(38px,5vw,92px);height:1px;background:var(--gold);opacity:.55;transform-origin:left;}
html.anim .sec-no::after{transform:scaleX(0);}
html.anim .rule-head.in .sec-no::after{transform:scaleX(1);transition:transform .9s var(--ease-io) .2s;}
.rule-head h2{
  font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.018em;line-height:.94;
  text-align:left;color:var(--dark-txt);max-width:18ch;
}

/* masked line wipe, used by the headline and the photo caption */
.msk{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.msk > span{display:block;}
html.anim .msk > span{transform:translateY(108%);}
html.anim .in .msk > span{transform:none;transition:transform .95s var(--ease-io);}
html.anim .in .msk:nth-child(2) > span{transition-delay:.11s;}
html.anim .in .msk:nth-child(3) > span{transition-delay:.22s;}

/* ================= TOP NAV ================= */
/* Permanently visible and sticky, like Constellis and the approved mockup.
   sticky (not fixed) so it occupies layout space and the header band below
   it is never covered. `.show` now only deepens the bar once scrolled. */
/* Transparent over the hero so the nav reads as part of it rather than as a
   separate bar stacked on top; it only becomes a solid bar once the reader has
   scrolled past the dark hero onto the cream bands. Sticky, not fixed, so it
   still occupies layout space below the hero. */
.nav{
  position:sticky;top:0;z-index:60;margin-bottom:-1px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
}
.nav.show{
  background:var(--nav-bg);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-d);box-shadow:0 10px 30px -18px var(--nav-shadow);
}
/* links sit close to the brand so they stay over black rather than drifting
   onto the globe, which starts around 30% of the viewport width */
.nav-in{display:flex;align-items:center;gap:clamp(18px,3vw,54px);padding-block:9px;}
.nav-in .nav-links{margin-right:auto;}
/* the mark used to carry a fixed cream fill, which vanished the moment the
   scrolled bar became a light surface; it inherits now */
.nav .nbrand{display:flex;align-items:center;gap:11px;color:var(--sand);}
.nav .nbrand svg{width:30px;height:30px;flex:none;transition:transform .22s var(--ease-io);}
.nav .nbrand:hover svg{transform:rotate(180deg);}
.nav .nbrand .nm{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:.9;display:block;color:var(--sand);}
.nav .nbrand .sub{font-family:var(--f-display);font-weight:500;font-size:8px;letter-spacing:.2em;display:block;margin-top:2px;color:var(--sand-dim);}
.nav-links{display:flex;gap:clamp(12px,1.6vw,26px);}
.nav-links a{
  font-family:var(--f-display);font-size:12.5px;font-weight:400;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sand-dim);padding-block:5px;position:relative;transition:color .14s;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .16s var(--ease);}
.nav-links a:hover,.nav-links a.on{color:var(--gold-txt-lit);}
.nav-links a:hover::after,.nav-links a.on::after{width:100%;}
.nav-cta{
  font-family:var(--f-display);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  background:var(--gold);color:var(--gold-fg);padding:9px 16px;position:relative;overflow:hidden;
  white-space:nowrap;
}
.nav-cta span{position:relative;z-index:2;}
.nav-cta::before{
  content:"";position:absolute;inset:0;background:var(--gold-lit);
  transform:translateX(-101%);transition:transform .2s var(--ease);
}
.nav-cta:hover::before{transform:none;}
/* Below 1080px the links move into a panel that slides in from the right,
   opened by the Menu button (client request) — see "phone / tablet menu"
   below. The bar itself stays one row, so --nav-h keeps its measured
   value. index.html carries the same block — keep in step. */
.nav-menu{display:none;}
@media (max-width:1080px){
  .nav-in{position:relative;gap:clamp(12px,3vw,54px);}
  .nav-in .theme-tog{margin-left:auto;}
  /* the gold CTA takes the far-right slot (client request); the toggle and
     Menu sit together to its left */
  .nav-in .nav-cta{order:5;}
  .nav-menu{
    display:inline-flex;align-items:center;gap:8px;flex:none;
    font-family:var(--f-display);font-size:12px;font-weight:500;
    letter-spacing:.13em;text-transform:uppercase;line-height:1;
    background:transparent;border:1px solid var(--line-sand);
    color:var(--sand);padding:8px 12px;cursor:pointer;
    transition:color .14s var(--ease),border-color .14s var(--ease);
  }
  .nav-menu:hover,.nav-menu[aria-expanded="true"]{color:var(--gold-txt-lit);border-color:var(--gold-txt);}
  .nav-menu svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
  .nav-menu b{font-weight:500;}
  .nav-menu .ico-x{display:none;}
  /* the links live in the slide-in panel below this width */
  .nav-in .nav-links{display:none;}
}
/* ---- desktop: links centred in the bar ----
   Centred between the brand and the toggle / CTA group (the hanging tab box
   around them was dropped, client request). They need about 560px clear,
   so this takes over from 1160px; from 1081px to 1159px the links sit
   inline beside the brand as before. */
@media (min-width:1160px){
  .nav-in{position:relative;min-height:56px;}
  .nav-in .theme-tog{margin-left:auto;}
  .nav-in .nav-links{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max-content;margin:0;gap:26px;align-items:center;
  }
  .nav-links a{white-space:nowrap;font-size:11.5px;letter-spacing:.11em;padding-block:4px;}
}
/* ---- sliding underline (desktop) ----
   One gold marker glides between the links instead of each link drawing
   its own underline. It only takes over once the script has added it
   (.has-ink), so without JS the per-link underline still works. */
.nav-ink{display:none;}
@media (min-width:1081px){
  .nav-links.has-ink a::after{display:none;}
  .nav-ink{
    display:block;position:absolute;left:0;top:0;height:1.5px;width:0;
    background:var(--gold);border-radius:1px;box-shadow:0 0 8px rgba(232,199,101,.55);
    opacity:0;pointer-events:none;
    /* quick and decisive (client request): starts fast, settles softly */
    transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1),opacity .18s ease;
  }
  .nav-links.is-pinned a.on:not(.pinned){color:var(--sand-dim);}
  .nav-links a.pinned{color:var(--gold-txt-lit);}
}
@media (min-width:1081px) and (max-width:1159px){ .nav-links.has-ink{position:relative;} }

/* ---- phone / tablet menu: a panel sliding in from the right ----
   Built by the script from the .nav-links anchors (one list to maintain).
   Straight gold edge, numbered links that deal in one by one, the briefing
   CTA at the foot. Hidden with visibility when closed so nothing inside is
   focusable; the page behind is dimmed and held still while it is open.
   z-index sits above the consent bar and newsletter overlay (300–320) — a
   menu the visitor just opened wins — and below the custom cursor (400). */
html.drawer-open,html.drawer-open body{overflow:hidden;}
.nav-scrim{
  position:fixed;inset:0;z-index:360;background:rgba(3,4,6,.6);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
html.drawer-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .5s var(--ease);}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:370;width:min(86vw,420px);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:9px var(--pad) 26px 26px;
  background:linear-gradient(var(--nav-bg),var(--nav-bg)),var(--nav-bg);color:var(--sand);
  border-left:1px solid rgba(201,162,39,.42);box-shadow:-40px 0 70px -30px rgba(0,0,0,.8);
  transform:translateX(calc(100% + 80px));visibility:hidden;
  transition:transform .8s cubic-bezier(.76,0,.24,1),visibility 0s linear .8s;
}
html.drawer-open .nav-drawer{transform:none;visibility:visible;transition:transform .8s cubic-bezier(.76,0,.24,1);}
.nd-head{display:flex;align-items:center;justify-content:space-between;min-height:40px;}
.nd-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-txt);}
.nd-close{
  width:40px;height:40px;display:grid;place-items:center;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--gold-txt);color:var(--gold-txt-lit);transition:transform .16s ease;
}
.nd-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.nd-list{margin-top:26px;display:flex;flex-direction:column;border-top:1px solid var(--line-d);}
.nd-list a{
  display:flex;align-items:baseline;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line-d);
  font-family:var(--f-display);font-weight:600;font-size:clamp(21px,6.4vw,26px);letter-spacing:.02em;
  line-height:1.1;text-transform:uppercase;color:var(--sand);
  opacity:0;transform:translateX(30px);
  transition:opacity .35s ease,transform .45s var(--ease-io),color .3s ease,background-color .16s ease;
}
.nd-list a .n{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--gold-txt);min-width:22px;}
.nd-list a:hover,.nd-list a.on{color:var(--gold-display);}
html.drawer-open .nd-list a{opacity:1;transform:none;transition-delay:calc(.3s + var(--i,0) * 55ms);}
.nd-foot{
  margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .45s var(--ease-io);
}
html.drawer-open .nd-foot{opacity:1;transform:none;transition-delay:.72s;}
.nd-cta{
  display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  background:var(--gold);color:var(--gold-fg);font-family:var(--f-display);font-weight:600;
  font-size:13px;letter-spacing:.15em;text-transform:uppercase;transition:transform .16s ease;
}
.nd-mail{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--sand-dim);}
/* touch press feedback, in place of the browser's blue tap flash */
.nav a,.nav button,.nav-drawer a,.nav-drawer button{-webkit-tap-highlight-color:transparent;}
html.drawer-open .nd-list a.is-pressed{background-color:rgba(201,162,39,.14);transform:translateX(6px);transition-delay:0s;}
.nav-menu.is-pressed,.theme-tog.is-pressed,.nav-cta.is-pressed,.nd-close.is-pressed,.nd-cta.is-pressed{transform:scale(.94);}
@media (min-width:1081px){ .nav-drawer,.nav-scrim{display:none;} }
@media (prefers-reduced-motion:reduce){
  .nav-drawer,.nav-scrim,.nd-list a,.nd-foot,.nav-ink{transition:none !important;}
}
/* One row at every width: below 760px Menu shrinks to a 40px icon square
   and the CTA tightens, so the bar can never wrap to a second line — a
   taller bar used to leave a strip of the page ground showing above the
   hero, which underlaps the bar by --nav-h. */
@media (max-width:760px){
  .nav-menu{padding:0;gap:0;min-width:40px;min-height:40px;justify-content:center;}
  .nav-menu b{display:none;}
  .nav-cta{padding:9px 12px;font-size:11px;}
}
/* Phones keep the CTA (client request). The full "Request a Briefing" fits
   from 390px wide (iPhone 12 and newer, most Androids) with room to spare;
   on the smallest phones (360–389px) it would crowd the logo to within
   10–16px, so the label shortens to "Briefing" there. The menu panel
   carries the full wording at every size. Below 430px the brand drops its
   small sub-line. */
.nav-cta .short{display:none;}
@media (max-width:520px){ .nav-in{gap:10px;} }
@media (max-width:389px){
  .nav-cta .full{display:none;}
  .nav-cta .short{display:inline;}
}
@media (max-width:430px){
  .nav .nbrand .sub{display:none;}
  .nav-cta{padding:8px 10px;}
}

/* ---- theme toggle ----
   A real <button>, in the nav beside the CTA: a 40px ghost square holding
   only the sun / moon mark (client request — no LIGHT/DARK wording). The
   <b> label stays in the markup for the script that maintains it, hidden;
   the button's accessible name lives on aria-label. Nothing here is
   animated except colour, keeping the page's additive motion contract
   intact whether or not html.anim is present. */
.theme-tog{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:40px;min-height:40px;padding:0;
  background:transparent;border:1px solid var(--line-sand);
  color:var(--sand);cursor:pointer;line-height:1;
  transition:color .14s var(--ease),border-color .14s var(--ease),background .14s var(--ease);
}
.theme-tog:hover{color:var(--gold-txt-lit);border-color:var(--gold-txt);}
.theme-tog svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.theme-tog b{display:none;}
/* which mark shows is a state, not a transition — the sun means "this click
   takes you to light" and only exists while the page is dark */
.theme-tog .ico-sun{display:block;}
.theme-tog .ico-moon{display:none;}
:root[data-theme="light"] .theme-tog .ico-sun{display:none;}
:root[data-theme="light"] .theme-tog .ico-moon{display:block;}

/* ================= PAGE GROUND ================= */
.sheet{background:var(--paper);}

/* ================= INDEX LABEL / CREDENTIAL BADGE =================
   .h-index is the "01 / Section" mono label above a page headline;
   .h-badge is the SDVOSB credential line. Both carry a leading gold
   rule that draws out on reveal. Positioning of .h-badge inside the
   page hero lives in kig-pages.css. */
/* small gold index label with a leading rule, as in the reference */
.h-index,.h-badge{
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-mono);font-size:clamp(8.5px,.68vw,11px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-txt);
}
.h-index i,.h-badge i{width:clamp(24px,2.6vw,44px);height:1px;background:var(--gold);flex:none;transform-origin:left;}
html.anim .h-index i,html.anim .h-badge i{transform:scaleX(0);}
html.anim .h-index.in i{transform:scaleX(1);transition:transform .9s var(--ease-io) .3s;}
.h-index{margin-bottom:clamp(18px,2.4vw,34px);}

/* ================= BUTTON KIT ================= */
/* ---- hero buttons ---- */
.hero-cta{display:flex;flex-wrap:wrap;gap:clamp(9px,1vw,14px);margin-top:clamp(18px,2.3vw,32px);}
.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  padding:clamp(11px,1.05vw,15px) clamp(16px,1.5vw,24px);
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-label);letter-spacing:.13em;
  transition:transform .16s var(--ease-io),color .14s,border-color .14s;
}
.btn span,.btn svg{position:relative;z-index:2;}
.btn svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease-io);}
.btn:hover svg{transform:translateX(4px);}
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:translateX(-101%);transition:transform .2s var(--ease-io);}
.btn:hover::before{transform:none;}
/* specular pass, same language as the nav CTA */
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-160%) skewX(-18deg);transition:transform .75s var(--ease-io);
}
.btn:hover::after{transform:translateX(380%) skewX(-18deg);}
.btn-gold{background:var(--gold);color:var(--gold-fg);}
/* ---- gold CTA edge ----
   Every gold button is the same #C9A227 fill; what changed between them was
   the ground. Against near-black the fill separates on its own; against the
   cream bands (nav, procurement, and every band in light mode) it does not,
   which read as a duller yellow rather than as a weaker edge.
   So the fix is an edge, not a different hue - the palette stays honest and
   the buttons keep matching each other exactly. The shadow is a deep-gold
   hairline plus a soft drop: it defines the button on cream and is
   effectively invisible on the ink bands. */
.btn-gold,
.nav-cta,
#kemet-procurement .kp-cta,
.kc-nl-form button,
.nlm button[type=submit]{
  box-shadow:0 1px 0 rgba(74,58,16,.55),0 2px 10px rgba(74,58,16,.18);
}
.btn-gold::before{background:var(--gold-lit);}
.btn-ghost{border:1px solid var(--line-sand);color:var(--sand);}
.btn-ghost::before{background:var(--sand);}
.btn-ghost:hover{color:var(--ink);border-color:var(--sand);}

/* ================= TWO-COLUMN EDITORIAL BAND ================= */
.eb-grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,3.6vw,64px);align-items:start;
}
@media (max-width:900px){.eb-grid{grid-template-columns:1fr;}}

/* ================= BOOT LOADER =================
   Carried over from the previous site, rebuilt without GSAP. The element is
   created in JS, never in the markup: a full-screen overlay that shipped in
   the HTML would cover the page permanently if the script ever failed. */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s cubic-bezier(.76,0,.24,1);
}
#loader.done{clip-path:inset(0 0 100% 0);}
#loader svg{width:clamp(78px,8.5vw,116px);height:auto;}
/* the two rings scribe themselves, then the mark settles in behind them */
#loader circle{fill:none;stroke:var(--gold);stroke-width:1.9;}
#loader .r1{stroke-dasharray:597;stroke-dashoffset:597;animation:ringdraw .62s var(--ease-io) forwards;}
#loader .r2{stroke-dasharray:566;stroke-dashoffset:566;animation:ringdraw .62s var(--ease-io) .09s forwards;}
#loader .mk{
  fill:var(--sand);opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:markIn .6s var(--ease-io) .3s forwards;
}
@keyframes ringdraw{to{stroke-dashoffset:0;}}
@keyframes markIn{from{opacity:0;transform:scale(.86);}to{opacity:1;transform:none;}}

/* scroll progress hairline */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;background:var(--gold);transform:scaleX(0);transform-origin:left;pointer-events:none;display:none;}
html.anim .prog{display:block;}

/* CTA: specular sweep on hover, magnetic pull via JS */
.nav-cta{transition:transform .15s var(--ease-io);}
.nav-cta::after,.foot-cta::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-160%) skewX(-18deg);transition:transform .7s var(--ease-io);
}
.nav-cta:hover::after,.foot-cta:hover::after{transform:translateX(380%) skewX(-18deg);}

/* ============ SIGNATURE: THE SWEEP ============
   A gold hairline travels across a panel and the content resolves in its
   wake. This is not a new invention: it is the same device as the rule that
   draws out of .sec-no and the scan line that drifts down the footer map,
   promoted into the page's one recurring reveal so that the band carrying
   the densest content also carries the clearest gesture. Everything else
   keeps the generic .rv fade; a signature that fires on every element is
   not a signature. Transform, opacity and clip-path only — no layout. */
.sweep{position:relative;}
html.anim .sweep{clip-path:inset(0 100% 0 0);}
html.anim .sweep.in{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease-io);}
/* the hairline rides the right edge of a full-width overlay, so translating
   the overlay from -100% to 0 walks the line across the panel in step with
   the clip edge above */
html.anim .sweep::before{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 0 calc(100% - 2px),var(--gold-lit) calc(100% - 2px));
}
html.anim .sweep.in::before{animation:sweepBar 1.05s var(--ease-io) forwards;}
@keyframes sweepBar{
  0%{transform:translateX(-100%);opacity:0;}
  9%{opacity:1;}
  88%{opacity:1;}
  100%{transform:translateX(0);opacity:0;}
}

/* ================= PRINT =================
   A capability statement gets printed and emailed as a PDF, so make the
   page fall back to the sheet it came from: no chrome, no motion, ink-safe. */
@media print{
  .nav,.skip,.grain,.vig,#cur,#curDot,.mq,.prog,#loader{display:none !important;}
  html.anim .rv,html.anim .rv *,html.anim .net-hud [data-type]{opacity:1 !important;transform:none !important;}
  html.anim .sweep{clip-path:none !important;}
  html.anim .sweep::before{display:none !important;}

  html.anim .p-serve li svg *,html.anim .step .icd svg *{stroke-dashoffset:0 !important;}
  html.anim .capcard h3::after,html.anim .sec-no::after{transform:none !important;}
  html.anim .intro-body p{filter:none !important;}
  .step,.proc-line i{--s:1 !important;--rail:1 !important;}
  .step,.step .num,.step .icd{opacity:1 !important;}
  .intro-quote{margin-top:0 !important;}
  html.anim .hero-sub{filter:none !important;}
  html.anim .msk > span{transform:none !important;}
  html.anim .shot img{clip-path:none !important;animation:none !important;}
  html.anim .disc .ring circle{stroke-dashoffset:0 !important;}
  html.anim .proc-line i{transform:scaleX(1) !important;}
  html{background:#fff;}
  body{font-size:11pt;}
  .hero,.capgrid,.eb-grid,.steps,.foot-grid{page-break-inside:avoid;}
  .caps,.proc{page-break-before:auto;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;font-weight:400;}
}

/* ================= CONSENT + NEWSLETTER OVERLAYS =================
   Both start hidden and self-contained: kig-site.js decides whether to
   show them, and nothing runs before a real user gesture. The cookie
   banner is a consent surface, the newsletter is marketing: the
   newsletter never appears until a consent choice has been recorded,
   so they can never stack and consent is never buried. */
.ov-backdrop{
  position:fixed;inset:0;z-index:300;background:rgba(5,6,8,.72);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .4s var(--ease);
}
.ov-backdrop.on{opacity:1;}
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:310;
  background:var(--ink);border-top:2px solid var(--gold);color:var(--sand);
  padding:clamp(14px,1.6vw,22px) clamp(16px,3vw,48px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.8vw,32px);
  transform:translateY(102%);transition:transform .55s var(--ease-io);
}
.ck.on{transform:none;}
.ck p{flex:1 1 min(420px,100%);font-size:var(--fs-sm);line-height:1.5;color:var(--sand);margin:0;}
.ck p b{color:var(--gold);font-weight:600;}
.ck-acts{display:flex;flex-wrap:wrap;gap:10px;flex:none;}
.ck button{
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-label);letter-spacing:.13em;
  padding:clamp(9px,.95vw,13px) clamp(15px,1.5vw,24px);
  border:1px solid var(--gold);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.ck-yes{background:var(--gold);color:var(--gold-fg);}
.ck-yes:hover{background:var(--gold-lit);}
.ck-no{background:transparent;color:var(--gold);}
.ck-no:hover{background:var(--gold);color:var(--gold-fg);}
.nlm{
  position:fixed;z-index:320;left:50%;top:50%;
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;
  transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;
  background:var(--ink);border:1px solid var(--gold);
  padding:clamp(24px,3.4vw,48px);
  transition:opacity .45s var(--ease),transform .5s var(--ease-io);
}
.nlm.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
.nlm-eyebrow{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin:0 0 clamp(8px,1vw,14px);
}
.nlm h2{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-xl);line-height:1.02;color:var(--sand);margin:0 0 clamp(10px,1.2vw,16px);
}
.nlm-note{font-size:var(--fs-sm);line-height:1.55;color:var(--sand-dim);margin:0 0 clamp(16px,2vw,26px);}
.nlm form{display:flex;flex-wrap:wrap;gap:clamp(9px,1vw,14px);align-items:flex-end;}
.nlm label{
  display:block;font-family:var(--f-mono);font-size:var(--fs-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim);margin-bottom:6px;
}
.nlm .fld{flex:1 1 240px;}
.nlm input{
  width:100%;font-family:var(--f-body);font-size:var(--fs-md);color:var(--sand);
  background:transparent;border:0;border-bottom:1px solid var(--line-d);
  padding:clamp(8px,.9vw,13px) 2px;transition:border-color .3s var(--ease);
}
.nlm input::placeholder{color:var(--sand-dim);opacity:.7;}
.nlm input:focus{outline:none;border-bottom-color:var(--gold);}
/* caret follows the theme-aware text gold rather than inheriting: bright on
   ink, dark on the light surfaces */
.nlm input,.ck input{caret-color:var(--gold-txt);}
.nlm button[type=submit]{
  flex:none;font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-label);letter-spacing:.13em;
  padding:clamp(10px,1vw,15px) clamp(16px,1.5vw,26px);
  background:var(--gold);color:var(--gold-fg);border:0;cursor:pointer;
  transition:background .3s var(--ease);
}
.nlm button[type=submit]:hover{background:var(--gold-lit);}
.nlm-status{
  flex:1 0 100%;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sand-dim);min-height:1.25em;margin:0;
}
.nlm-x{
  position:absolute;top:10px;right:12px;width:38px;height:38px;
  background:transparent;border:0;color:var(--sand-dim);cursor:pointer;
  font-size:22px;line-height:1;transition:color .25s;
}
.nlm-x:hover{color:var(--gold);}
@media (prefers-reduced-motion:reduce){
  .ov-backdrop,.ck,.nlm{transition:none !important;}
}
@media print{ .ov-backdrop,.ck,.nlm{display:none !important;} }