/*
Theme Name: Argon Power Group
Theme URI: https://www.argonpowergroup.com
Author: BlueStar Communications Group
Author URI: https://bluestarcg.com
Description: Custom theme for Argon Power Group. Gas turbine relocation, reconditioning and deployment. Built by BSCG from the approved v15 design. Page content is edited in Elementor; the Argon widgets and the header and footer live in the theme.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: argon
*/


@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/Archivo-var.woff2) format('woff2')}

:root{
  --ink:#161719;
  --ink-deep:#1A1D21;       /* Kim's Graphite */
  --ink-soft:#43464a;
  --ink-mute:#5d6165;
  --paper:#F6F4EF;          /* Kim's Cloud White */
  --panel:#eae7df;
  --slate:#3b4348;
  --slate-deep:#333a3f;
  --mist:#e4e7e8;
  --amber:#007BFF;          /* Kim's Electric Blue: the promise, and the action that starts it */
  --amber-edge:#0052AD;
  --line:rgba(22,23,25,.20);
  --line-soft:rgba(22,23,25,.10);
  --line-dark:rgba(245,243,237,.20);
  --line-dark-soft:rgba(245,243,237,.12);
  --sans:'Archivo',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4.5vw,72px);
  --max:1520px;
  /* v15: the nav gets more real estate (Kim, 09/23): 88px bar, 48px logo, 16px links. */
  --navh:88px;
  --land:clamp(112px,15vh,150px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:var(--navh);overflow-x:clip}
html.smooth{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:400;font-size:17.5px;line-height:1.6;
  font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--paper);overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
section[id]{scroll-margin-top:calc(var(--land) - var(--navh) - clamp(96px,9.5vw,140px))}
.sec--major[id]{scroll-margin-top:calc(var(--land) - var(--navh) - clamp(112px,11.5vw,168px))}
.sec--tight[id]{scroll-margin-top:calc(var(--land) - var(--navh) - clamp(72px,7.5vw,108px))}
.closer[id]{scroll-margin-top:0}

/* ---------- type: one family, three widths. v15 scale is one step up across the board (Kim: "everything's bigger"). ---------- */
.display{font-weight:800;font-stretch:112%;text-transform:uppercase;line-height:.95;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(42px,5.4vw,84px)}
h2{font-weight:700;font-stretch:106%;text-transform:uppercase;font-size:clamp(28px,2.9vw,44px);line-height:1.04;letter-spacing:-.006em;text-wrap:balance}
h3{font-weight:600;font-size:clamp(19px,1.6vw,23px);line-height:1.28;letter-spacing:-.004em}
.deck{font-size:clamp(19px,1.62vw,22.5px);line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.dark .deck{color:rgba(245,243,237,.86)}
.fig{font-stretch:76%;font-weight:600;letter-spacing:-.008em;line-height:1;font-feature-settings:"tnum" 1}
.src{font-stretch:88%;font-size:14px;color:var(--ink-mute);line-height:1.55}
.dark .src{color:rgba(245,243,237,.68)}

/* ---------- atoms ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:56px;
  font-weight:600;font-stretch:100%;font-size:15px;letter-spacing:.04em;
  text-decoration:none;padding:0 32px;border:1.5px solid transparent;
  background:var(--ink);color:var(--paper);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--primary{background:var(--amber);color:var(--paper);border-color:var(--amber);font-size:16.5px;font-weight:700;letter-spacing:.02em}
.btn--primary:hover{background:var(--amber-edge);color:var(--paper);border-color:var(--amber-edge)}
.btn-paper{background:var(--paper);color:var(--ink);font-size:16.5px;font-weight:700;letter-spacing:.02em}
.btn-paper:hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:16.5px;letter-spacing:-.003em;text-decoration:none}
.tlink .ar{transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.tlink:hover .ar{transform:translateX(5px)}
.tlink span:first-child{box-shadow:inset 0 -1px 0 currentColor}
.acts{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:1px}
.dark a:focus-visible,.dark button:focus-visible,.nav a:focus-visible,.nav button:focus-visible,.nav input:focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:14px 20px;font-weight:600;font-size:14px;text-decoration:none}
.skip:focus{left:0}
.ico{flex:0 0 auto;display:block}

/* ---------- section scaffold. No rules above headings. ---------- */
.sec{padding:clamp(96px,9.5vw,140px) 0}
.sec--major{padding:clamp(112px,11.5vw,168px) 0}
.sec--tight{padding:clamp(72px,7.5vw,108px) 0}
.dark{background:var(--slate);color:var(--paper)}
.head h2{max-width:none}
.head .deck{margin-top:clamp(20px,2vw,28px);max-width:72ch}
.panel{background:var(--panel);padding:clamp(28px,3.4vw,56px)}
/* two-column head: heading left, deck right. Used where a section reads as a statement. */
.head--split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start}
.head--split .deck{margin-top:0;max-width:none}
@media(max-width:900px){.head--split{grid-template-columns:1fr;gap:20px}}

/* ---------- motion ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .tile img,.tlink .ar{transition:none !important}
}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--navh);
  display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 var(--pad);
  color:var(--paper);border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease;
}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(15,16,17,.66),rgba(15,16,17,0));transition:opacity .25s ease}
.nav.solid{background:rgba(21,24,26,.96);border-bottom-color:var(--line-dark-soft)}
.nav.solid::before{opacity:0}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-logo img{height:48px;width:auto}
.nav-right{display:flex;align-items:center;gap:clamp(18px,2.2vw,36px)}
.nav-menu{display:flex;gap:clamp(22px,2.4vw,36px);align-items:center;list-style:none}
/* v15: hover was "really light" (Kim). Full white plus a 2px accent underline that slides in. */
.nav-menu a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:16px;letter-spacing:-.002em;text-decoration:none;color:rgba(245,243,237,.88);transition:color .18s ease}
.nav-menu a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.nav-menu a:hover{color:#fff}
/* aria-current="true" is the homepage scrollspy's in-view state (JS, hash links); aria-current="page" is the
   subpage nav's fixed current-page state (sections15.py / tools/pages15.py). Same look for both: full white
   text, underline at rest, no hover needed (Bryan, 09/25). */
.nav-menu a:hover::after,.nav-menu a[aria-current="true"]::after,.nav-menu a[aria-current="page"]::after{transform:scaleX(1)}
.nav-menu a[aria-current="true"],.nav-menu a[aria-current="page"]{color:#fff}
.nav-cta{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border:1.5px solid var(--amber);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.nav-cta:hover{background:var(--amber);color:#fff;border-color:var(--amber)}
/* site search, built in from the start (agreed 08/17, asked again 09/23). The field opens in place. */
.nav-search{display:flex;align-items:center;position:relative}
.nav-search input{width:0;opacity:0;min-height:44px;padding:0;border:0;border-bottom:1.5px solid rgba(245,243,237,.5);background:transparent;color:var(--paper);font-family:var(--sans);font-size:16px;transition:width .28s cubic-bezier(.22,.61,.36,1),opacity .2s ease,padding .28s ease}
.nav-search input::placeholder{color:rgba(245,243,237,.55)}
.nav-search.open input{width:200px;opacity:1;padding:0 8px}
.nav-search button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:rgba(245,243,237,.88);cursor:pointer;transition:color .18s ease}
.nav-search button:hover{color:#fff}
.nav-toggle{display:none;width:48px;height:48px;background:transparent;border:1.5px solid rgba(245,243,237,.5);color:inherit;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:1.5px;background:currentColor;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .22s ease,top .22s ease}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1180px){
  .nav-menu{display:none}
  .nav-toggle{display:flex}
  .nav.open{background:var(--slate-deep)}
  .nav-drawer{position:fixed;inset:var(--navh) 0 0 0;z-index:55;background:var(--slate-deep);color:var(--paper);padding:12px var(--pad) 40px;overflow-y:auto;display:none;flex-direction:column}
  .nav-drawer.open{display:flex}
  .nav-drawer ul{list-style:none;border-top:1px solid var(--line-dark-soft)}
  .nav-drawer a{display:flex;align-items:center;min-height:62px;text-decoration:none;font-weight:600;font-size:21px;letter-spacing:-.01em;border-bottom:1px solid var(--line-dark-soft)}
  /* drawer current-page state (subpages only, sections15.py): Electric Blue left bar plus full white text,
     the mobile equivalent of the desktop underline (Bryan, 09/25). */
  .nav-drawer a[aria-current="page"]{color:#fff;box-shadow:inset 3px 0 0 var(--amber)}
  .nav-drawer .btn{margin-top:26px;width:100%}
  .nav-drawer .drawer-search{display:flex;gap:10px;margin:22px 0 0}
  .nav-drawer .drawer-search input{flex:1;min-height:52px;padding:0 14px;border:1.5px solid rgba(245,243,237,.4);background:transparent;color:var(--paper);font-family:var(--sans);font-size:17px}
  .nav-drawer .drawer-search button{width:52px;border:1.5px solid rgba(245,243,237,.4);background:transparent;color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer}
}
@media(max-width:640px){.nav-cta,.nav-search{display:none}.nav-logo img{height:40px}}

/* ---------- hero: the scroll-rise, as a scrubbed clip (v13 mechanics, unchanged) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--paper);background:var(--ink-deep);overflow:clip}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:calc(var(--navh) + 40px);padding-bottom:clamp(72px,10vh,116px)}
.hero h1{max-width:14ch;margin-bottom:26px}
.hero h1 .hl{display:block;color:var(--amber)}
.hero h1 .lt{display:block;font-weight:300;font-stretch:106%;letter-spacing:-.008em}
.hero-sub{max-width:52ch;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:rgba(245,243,237,.94)}
.hero-next{margin-top:38px}
@media(max-width:600px){.hero h1{max-width:none}}
.hero-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--amber)}
@media(max-width:760px){.hero-cue{display:none}}
.hero--rise{--p:1;--runway:70svh;display:block;min-height:0;overflow:visible;align-items:initial}
.js .hero--rise{--p:0}
.rise-stage{position:relative;height:100svh}
.js .rise-stage{height:calc(100svh + var(--runway))}
.rise-pin{position:sticky;top:0;height:100svh;overflow:clip;display:flex;align-items:center}
.rise-scene{position:absolute;inset:0;z-index:0;overflow:clip;background:#171d24}
.rise-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.rise-still--start{display:none}
.js .rise-still--end{display:none}
.js .rise-still--start{display:block;transition:opacity .25s ease}
.js .frames-ready .rise-still--start{opacity:0}
.rise-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.js .rise-canvas{display:block}
.rise-grain{position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.rise-vig{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(15,16,17,.55) 0%,rgba(15,16,17,.18) 22%,rgba(15,16,17,0) 46%),
             linear-gradient(105deg,rgba(15,16,17,.70) 0%,rgba(15,16,17,.26) 38%,rgba(15,16,17,0) 62%),
             linear-gradient(to top,rgba(15,16,17,.70) 0%,rgba(15,16,17,0) 26%)}
.rise-vig2{position:absolute;inset:0;pointer-events:none;opacity:calc(var(--p) * .9);
  background:linear-gradient(100deg,rgba(15,16,17,.62) 0%,rgba(15,16,17,.40) 30%,rgba(15,16,17,0) 54%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 72%);mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 72%)}
.hero--rise .hero-inner{position:relative;z-index:2;padding-top:var(--navh);padding-bottom:calc(68px - 1.9vw);pointer-events:none}
.hero--rise .hero-inner a{pointer-events:auto}
.hero--rise .hero-sub{text-shadow:0 1px 3px rgba(15,16,17,.6)}
.hero--rise h1{margin-bottom:38px;text-shadow:0 1px 2px rgba(15,16,17,.30),0 10px 34px rgba(15,16,17,.55),0 26px 90px rgba(15,16,17,.50)}
.hero--rise .hero-cue{animation:none;opacity:clamp(0,calc(1 - var(--p) * 6),1)}
.hero--rise .hero-cue svg{animation:cue2 2.8s ease-in-out infinite}
@keyframes cue2{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(9px);opacity:1}}
@media(max-width:760px){.hero--rise{--runway:60svh}}
/* Build 9, the phone band. A full-height hero on a portrait phone shows about a quarter of the frame's width, a
   slice out of the middle of the unit with neither end in it. Here the picture becomes a band at the foot of
   the screen holding columns 21% to 89% of the frame (the whole unit, exhaust stack to intake housing), the sky
   is carried up behind the headline, and the copy sits on that sky. --band is the one switch: site.js reads it
   to pick frames-band/. --band-l and --band-v are the window; tools/make-band-frames.py cuts the same one.
   10.88/9 is 16/9 x .68, and 65.625% is .21 / (1 - .68): the stills are full frames, cut by object-position.
   Selectors carry .hero--rise so they outrank .elementor .rise-still in css/elementor.css. Off switch:
   ARGON_HERO_PHONE_BAND in functions.php, which removes the body class. */
.hero--rise{--band:0;--band-l:.21;--band-v:.68}
@media(max-width:600px) and (max-aspect-ratio:7/10){
  .hero-band .hero--rise{--band:1}
  .hero-band .hero--rise .rise-pin{align-items:flex-start}
  .hero-band .hero--rise .rise-scene::before{content:"";position:absolute;inset:-60px;background:url(assets/hero-start.jpg) 50% 0/cover no-repeat;filter:blur(38px) brightness(.62) saturate(.9)}
  .hero-band .hero--rise .rise-still,.hero-band .hero--rise .rise-canvas{inset:auto 0 0 0;width:100%;height:auto;aspect-ratio:10.88/9;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
  .hero-band .hero--rise .rise-still{object-position:65.625% 50%}
  .hero-band .hero--rise .rise-vig{background:linear-gradient(to bottom,rgba(15,16,17,.55) 0%,rgba(15,16,17,.18) 22%,rgba(15,16,17,0) 46%),linear-gradient(to top,rgba(15,16,17,.55) 0%,rgba(15,16,17,0) 14%)}
  .hero-band .hero--rise .rise-vig2{display:none}
  .hero-band .hero--rise .hero-inner{padding-top:calc(var(--navh) + 12px);padding-bottom:0}
  .hero-band .hero--rise h1{margin-bottom:18px}
  .hero-band .hero--rise .hero-next{margin-top:22px}
}
/* a short phone (an iPhone SE in Safari is about 375 x 550): the copy cannot clear the band, so the headline drops
   a size and "Years faster." runs on one line; the last of the copy then sits over the top of the picture. */
@media(max-width:600px) and (max-aspect-ratio:7/10) and (max-height:600px){
  .hero-band .hero--rise h1{font-size:36px;margin-bottom:14px}
  .hero-band .hero--rise .hero-sub{font-size:17px}
  .hero-band .hero--rise .hero-next{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
  .hero--rise,.js .hero--rise{--p:1 !important}
  .js .rise-stage{height:100svh}
  .js .rise-canvas,.js .rise-still--start{display:none}
  .js .rise-still--end{display:block}
  .hero--rise .hero-cue svg{animation:none}
}

/* ---------- about (Capabilities): the blue band, butted to the hero, with the rotor over the headline ---------- */
.about{background:linear-gradient(180deg,#007BFF 0%,#0071EA 55%,#005FC6 100%);color:#fff;padding-top:clamp(64px,7vw,104px);overflow-x:clip}
.about h2{color:#fff}
.about .body p{font-size:clamp(18px,1.45vw,20px);line-height:1.58;max-width:66ch;color:rgba(255,255,255,.94)}
.about .body p + p{margin-top:22px}
.about .acts{margin-top:clamp(28px,3vw,40px)}
.about .head--split{align-items:center;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px)}
.about .body h2{margin-bottom:clamp(22px,2.4vw,34px)}
.about ::selection{background:#fff;color:var(--amber)}
.about a:focus-visible{outline-color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:#fff;font-size:16.5px;font-weight:700;letter-spacing:.02em}
.btn--ghost:hover{background:#fff;color:var(--amber);border-color:#fff}
.rotor{position:relative;width:min(124%,700px);aspect-ratio:4/3;margin:0 0 0 clamp(-56px,-4vw,-16px);overflow:visible}
.rotor-canvas{position:absolute;top:0;right:0;width:100%;height:100%;display:none}
.rotor-live .rotor-canvas{display:block}
.rotor-mark{position:absolute;inset:12%;width:76%;height:76%;opacity:.9}
.rotor-live .rotor-mark{display:none}
@media(max-width:900px){.about .head--split{grid-template-columns:1fr;gap:8px}.rotor{width:min(100%,420px);margin:0 auto 12px -8px}}

/* ---------- available capacity: the teaser. Aggregate only; unit detail lives on its own page. ---------- */

/* ---------- how Argon delivers: seven stages, a gauge slider and a card stack (09/24 rebuild of the rail) ----------
   Nobody in the reference set visualizes a schedule (08/31 teardown), and the deck sells 12 to 30 months.
   The rail is that schedule. JS sets --rp from the rail's position in the viewport; the fill draws left to
   right and each stage lights as the fill reaches it. Without JS the rail is complete and every stage lit. */
.deliver{position:relative;overflow:clip}
.deliver-media{position:absolute;inset:0;z-index:0}
.deliver-media img{width:100%;height:100%;object-fit:cover;opacity:.5;object-position:50% 50%;transform-origin:62% 50%;will-change:transform}
.js .deliver-media img{animation:plate-drift 34s ease-in-out infinite alternate}
.deliver-media::after{content:"";position:absolute;inset:0;background:linear-gradient(78deg,rgba(48,56,62,.92) 0%,rgba(48,56,62,.78) 46%,rgba(48,56,62,.56) 100%)}
.deliver .wrap{position:relative;z-index:1}
.stages{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(48px,5.5vw,80px);border-top:1px solid var(--line-dark-soft)}
.stage{padding:26px clamp(18px,2vw,32px) 30px 0;border-bottom:1px solid var(--line-dark-soft);border-right:1px solid var(--line-dark-soft);padding-left:clamp(18px,2vw,32px)}
.stage:nth-child(4n+1){padding-left:0}
.stage:nth-child(4n),.stage:last-child{border-right:0}
.stage .n{display:block;font-stretch:76%;font-weight:600;font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--amber);margin-bottom:16px}
.stage h3{font-size:clamp(18px,1.5vw,21px);margin-bottom:10px}
.stage p{font-size:16px;line-height:1.55;color:rgba(245,243,237,.86)}
@media(max-width:1000px){
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{padding-left:clamp(18px,2vw,32px)}
  .stage:nth-child(4n+1){padding-left:clamp(18px,2vw,32px)}
  .stage:nth-child(odd){padding-left:0;border-right:1px solid var(--line-dark-soft)}
  .stage:nth-child(even){border-right:0}
}
@media(max-width:600px){
  .stages{grid-template-columns:1fr}
  .stage,.stage:nth-child(odd){padding-left:0;border-right:0}
}
/* the process slider (Bryan, 09/24). JS adds .on: a gauge on the left (Brushed Aluminum channel, seven cells that light
   as the knob climbs, knob snaps cell to cell) and the stages as a card stack on the right, the current card in front
   and up to three earlier cards tucked behind with their top edges showing. Autoplays while on screen; any input takes
   over and autoplay resumes after 10 s idle; Pause stops it. No JS or reduced motion: the list above. */
.proc{margin-top:clamp(36px,4vw,60px)}
.proc .stages{margin-top:0}
.proc-ctl[hidden]{display:none}
.proc.on{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,4.5vw,76px);align-items:center}
.proc-ctl{display:block}
.proc-end{grid-column:1;justify-self:center;white-space:nowrap;font-stretch:88%;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,243,237,.6)}
.proc-end--top{grid-row:1;margin-bottom:14px;color:var(--paper)}
.proc-end--bot{grid-row:3;margin-top:14px}
.proc-gauge{display:grid;grid-template-columns:auto auto;grid-template-rows:auto clamp(300px,calc(100svh - 500px),420px) auto auto;column-gap:18px;align-items:stretch}
.proc-chan{grid-column:1;grid-row:2;justify-self:center;width:44px;position:relative;display:flex;flex-direction:column-reverse;gap:6px;padding:9px;border-radius:22px;background:linear-gradient(90deg,#8d949b,#C7CCD1 45%,#7d848b);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px rgba(0,0,0,.35);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.proc-chan::before{content:"";position:absolute;inset:6px;border-radius:17px;background:#1d2226;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.proc-chan:focus-visible{outline:2.5px solid var(--paper);outline-offset:5px}
.proc-cell{position:relative;z-index:1;flex:1;border-radius:6px;background:#2c3338;transition:background-color .35s ease,box-shadow .35s ease}
.proc-cell.on{background:var(--amber);box-shadow:0 0 14px rgba(0,123,255,.6),inset 0 1px 0 rgba(255,255,255,.28)}
.proc-knob{position:absolute;z-index:2;left:50%;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f1f3f4,#C7CCD1 58%,#80878e);box-shadow:0 5px 12px rgba(0,0,0,.5),inset 0 -2px 3px rgba(0,0,0,.22);transition:top .45s cubic-bezier(.3,1.4,.5,1),left .45s cubic-bezier(.3,1.4,.5,1),transform .15s ease;pointer-events:none}
.proc-knob::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px rgba(0,123,255,.7)}
.proc-chan.drag .proc-knob{transform:scale(1.08)}
.proc-names{grid-column:2;grid-row:2;list-style:none;display:flex;flex-direction:column-reverse;gap:6px;padding:9px 0}
.proc-names li{flex:1;display:flex;align-items:center;min-height:0}
.proc-names button{background:none;border:0;padding:6px 0;font:inherit;font-weight:600;font-size:16px;line-height:1.2;text-align:left;color:rgba(245,243,237,.5);cursor:pointer;transition:color .25s ease}
.proc-names li.on button{color:rgba(245,243,237,.82)}
.proc-names li.cur button{color:#fff;font-weight:700}
.proc-names button:hover{color:#fff}
.proc-names button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.proc-pause{grid-column:1;grid-row:4;justify-self:center;margin-top:26px;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;background:none;border:1px solid rgba(245,243,237,.35);color:rgba(245,243,237,.86);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer;transition:border-color .2s,color .2s}
.proc-pause:hover{border-color:var(--paper);color:#fff}
.proc-pause svg{width:9px;height:9px}
.proc-pause .i-play{display:none}.proc-pause[aria-pressed="true"] .i-play{display:block}.proc-pause[aria-pressed="true"] .i-pause{display:none}
.proc.on .stages{position:relative;display:block;border:0;padding:0;touch-action:pan-y}
.proc.on .stage{position:absolute;left:0;right:0;top:66px;display:flex;flex-direction:column;min-height:clamp(280px,calc(100svh - 470px),400px);padding:clamp(28px,3vw,48px);border:0;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.28);transform-origin:50% 0;transition:transform .62s cubic-bezier(.22,.61,.36,1),opacity .45s ease,filter .62s ease;will-change:transform}
.proc.on .stage .n{font-size:clamp(64px,6vw,100px);line-height:.9;margin:0}
.proc.on .stage h3{margin-top:auto;padding-top:28px;font-size:clamp(24px,2.3vw,34px);line-height:1.15;letter-spacing:-.01em;margin-bottom:12px;max-width:24ch}
.proc.on .stage p{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-soft);max-width:48ch}
.proc.on .stage.is-cur{z-index:10;transform:none;opacity:1}
.proc.on .stage.is-p1{z-index:9;transform:translateY(-22px) scale(.95);filter:brightness(.84)}
.proc.on .stage.is-p2{z-index:8;transform:translateY(-42px) scale(.9);filter:brightness(.72)}
.proc.on .stage.is-p3{z-index:7;transform:translateY(-60px) scale(.85);filter:brightness(.62)}
.proc.on .stage.is-past{z-index:6;transform:translateY(-60px) scale(.85);filter:brightness(.62);opacity:0}
.proc.on .stage.is-next{z-index:11;transform:translateY(110px);opacity:0;pointer-events:none}
.head--proc{position:relative}
.proc-deliver{display:inline-flex;color:var(--paper);position:absolute;right:0;bottom:0}
.proc-deliver:hover .ar{transform:translateX(5px)}
.proc{position:relative}
@media(max-width:820px){
  .proc-deliver{display:inline-flex;position:static;margin-top:clamp(20px,2vw,28px);margin-left:0}

  .proc.on{grid-template-columns:1fr;gap:24px}
  .proc-names{display:none}
  /* Pause sits in the label row, between the two end labels, so the gauge and a whole card fit on a phone
     screen together (Bryan, 10/27, build 21). It was a row of its own under the labels. */
  .proc-gauge{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
  .proc-chan{grid-column:1/-1;grid-row:1;justify-self:stretch;width:auto}
  .proc-end{grid-row:2;margin:12px 0 0}
  .proc-end--bot{grid-column:1;justify-self:start}
  .proc-end--top{grid-column:3;justify-self:end}
  .proc-pause{grid-column:2;grid-row:2;justify-self:center;margin-top:12px}
  .proc-chan{flex-direction:row;height:46px;padding:8px}
  .proc-chan::before{border-radius:16px}
  .proc-knob{top:50%;width:40px;height:40px;margin:-20px 0 0 -20px}
  .proc.on .stage{top:50px;min-height:0}
  .proc.on .stage.is-p1{transform:translateY(-16px) scale(.95)}
  .proc.on .stage.is-p2{transform:translateY(-31px) scale(.9)}
  .proc.on .stage.is-p3,.proc.on .stage.is-past{transform:translateY(-44px) scale(.85)}
  /* the next card rises from 40px, not 110px, so mid-move it never reaches the section below (build 21) */
  .proc.on .stage.is-next{transform:translateY(40px)}
}
/* narrowest phones: the Pause label hides (it stays the button's accessible name) so the label row fits */
@media(max-width:374px){
  .proc-gauge{column-gap:8px}
  .proc-pause{padding:0 10px}
  .proc-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* the slider cards, developed (Bryan, 09/28): a cousin of the How We Deliver stage cards, not a copy. Each card carries
   that page's line drawing for its stage (tools/hwd_drawings.py, injected by tools/homecards.py) inverted to Navy ink
   on the Cloud White card over a faint Navy blueprint grid, the subpage's outlined numeral (solid Electric Blue on the
   current stage, as the subpage fills it on hover) and a link to the stage's phase there. The drawing draws in each
   time its card becomes the current stage. No JS or reduced motion: the list above, every drawing finished and static.
   Every rule is scoped to #deliver, because tools/sections15.py copies this stylesheet into the subpages. */
#deliver .stage-fig{position:relative;aspect-ratio:16/10;margin-bottom:22px;border:1px solid var(--line-dark-soft);background-image:linear-gradient(rgba(199,204,209,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(199,204,209,.07) 1px,transparent 1px);background-size:20px 20px;background-position:-1px -1px}
#deliver .drw{position:absolute;inset:8% 6%;width:88%;height:84%;display:block;overflow:visible;fill:none;stroke:var(--paper);stroke-width:var(--sw,2);stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6}
#deliver .drw .h{stroke:rgba(199,204,209,.8);stroke-width:calc(var(--sw,2) * .55)}
#deliver .drw .cl{stroke-dasharray:14 3 2 3}
#deliver .drw .hid{stroke-dasharray:5 3}
#deliver .stage-more{margin-top:14px;color:var(--paper);font-size:15.5px}
#deliver .proc:not(.on) .stage-more{display:none}   /* the list view keeps the one section link above it */
@media(min-width:821px) and (max-width:1180px){#deliver .head--proc .deck{padding-right:200px}}   /* the section link sat on the deck's last words at 1024 */
#deliver .proc.on .stage{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);grid-template-areas:"body fig";padding:0;overflow:hidden}
#deliver .proc.on .stage-body{grid-area:body;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,40px) clamp(22px,2.4vw,34px) clamp(28px,3vw,44px)}
#deliver .proc.on .stage-fig{grid-area:fig;aspect-ratio:auto;min-height:100%;margin:0;border:0;border-left:1px solid rgba(16,42,86,.16);background-image:linear-gradient(rgba(16,42,86,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(16,42,86,.075) 1px,transparent 1px),linear-gradient(rgba(16,42,86,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,42,86,.04) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-1px -1px}
#deliver .proc.on .stage-fig::before{content:"";position:absolute;inset:14px;border:1px solid rgba(16,42,86,.2);pointer-events:none}
#deliver .proc.on .drw{inset:34px 30px;width:calc(100% - 60px);height:calc(100% - 68px);stroke:#102A56}
#deliver .proc.on .drw .h{stroke:rgba(16,42,86,.6)}
#deliver .proc.on .stage .n{font-weight:800;font-stretch:112%;font-size:clamp(68px,6vw,100px);line-height:.74;letter-spacing:-.03em;margin:0;color:transparent;-webkit-text-stroke:1.5px #102A56;paint-order:stroke;transition:color .45s ease,-webkit-text-stroke-color .45s ease}
#deliver .proc.on .stage.is-cur .n{color:var(--amber);-webkit-text-stroke-color:var(--amber);transition-delay:.3s}
#deliver .proc.on .stage h3{margin:auto 0 12px;padding-top:28px;font-size:clamp(23px,2.05vw,31px);max-width:20ch;text-wrap:balance}
#deliver .proc.on .stage p{font-size:clamp(16.5px,1.28vw,19px);line-height:1.52;max-width:40ch}
#deliver .proc.on .stage-more{margin-top:clamp(14px,1.4vw,22px);color:#102A56}
#deliver .proc.on .stage-more:hover span:first-child{box-shadow:inset 0 -1.5px 0 var(--amber)}
#deliver .proc.on .stage-more:focus-visible{outline:2px solid #102A56;outline-offset:3px}
/* draw-in: the drawing's contours stroke on (pathLength 1, staggered by --i); center, hidden and hatch lines fade in after */
#deliver .proc.on .stage .drw path:not(.cl):not(.hid):not(.ht){stroke-dasharray:1 1;stroke-dashoffset:1}
#deliver .proc.on .stage .drw .cl,#deliver .proc.on .stage .drw .hid,#deliver .proc.on .stage .drw .ht{opacity:0}
#deliver .proc.on .stage.is-drawn .drw path:not(.cl):not(.hid):not(.ht){stroke-dashoffset:0;transition:stroke-dashoffset 1.35s cubic-bezier(.45,.05,.25,1) calc(var(--i) * 19ms + 260ms)}
#deliver .proc.on .stage.is-drawn .drw .cl,#deliver .proc.on .stage.is-drawn .drw .hid,#deliver .proc.on .stage.is-drawn .drw .ht{opacity:1;transition:opacity .8s ease 1.2s}
@media(max-width:1100px){
  #deliver .proc.on .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #deliver .proc.on .drw{inset:28px 22px;width:calc(100% - 44px);height:calc(100% - 56px)}
}
@media(max-width:820px){
  #deliver .proc.on .stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"fig" "body";grid-template-rows:auto 1fr}
  #deliver .proc.on .stage-fig{aspect-ratio:16/10;min-height:0;border-left:0;border-bottom:1px solid rgba(16,42,86,.16)}
  #deliver .proc.on .stage-fig::before{inset:10px}
  #deliver .proc.on .drw{inset:20px 16px;width:calc(100% - 32px);height:calc(100% - 40px)}
  #deliver .proc.on .stage-body{padding:22px 22px 18px}
  #deliver .proc.on .stage .n{font-size:64px}
  #deliver .proc.on .stage h3{margin-top:0;padding-top:22px;font-size:23px}
  #deliver .proc.on .stage p{font-size:16.5px}
  #deliver .proc.on .stage-more{margin-top:auto;padding-top:14px}
}
/* phones: a shorter card, so the gauge and a whole card fit under the header together (Bryan, 10/27, build 21).
   The tallest card sets every card's height, so the title size matters most. */
@media(max-width:600px){
  #deliver .proc.on .stage-fig{aspect-ratio:2/1}
  #deliver .proc.on .drw{inset:16px 14px;width:calc(100% - 28px);height:calc(100% - 32px)}
  #deliver .proc.on .stage-body{padding:18px 22px 16px}
  #deliver .proc.on .stage .n{font-size:50px}
  #deliver .proc.on .stage h3{padding-top:14px;font-size:21px;margin-bottom:10px;max-width:none}
  #deliver .proc.on .stage p{font-size:16px}
}

/* ---------- the queue: Argon's window against the OEM order book (Kim, slide 5) ----------
   Restored 09/24 below the audiences, above the inquiry form. The figures panel stays cut. Bars grow once when
   the chart reaches 78% of the viewport; without JS and under reduced motion they are drawn. */
.urgency{border-top:1px solid var(--line-soft)}
.timeline{margin-top:clamp(48px,5.5vw,76px)}
.tl-axis{position:relative;height:26px;border-bottom:1.5px solid var(--ink);margin-left:var(--tlpad,210px)}
.tl-axis b{position:absolute;bottom:7px;transform:translateX(-50%);font-stretch:76%;font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--ink-soft)}
.tl-axis b::after{content:"";position:absolute;left:50%;bottom:-8px;width:1px;height:7px;background:var(--ink);opacity:.5}
.tl-now{position:absolute;top:-30px;bottom:0;width:1.5px;background:var(--ink);z-index:3}
.tl-now i{position:absolute;top:0;left:9px;font-style:normal;white-space:nowrap;font-weight:600;font-size:14px}
.tl-lane{position:relative;display:grid;grid-template-columns:var(--tlpad,210px) minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line-soft);min-height:88px}
.tl-lane .lbl{padding-right:22px}
.tl-lane .lbl b{display:block;font-weight:600;font-size:17px;letter-spacing:-.004em}
.tl-lane .lbl span{display:block;font-stretch:88%;font-size:14.5px;color:var(--ink-mute);margin-top:3px}
.tl-track{position:relative;height:88px}
.tl-bar{position:absolute;top:27px;height:34px;left:var(--x);width:var(--w);display:flex;align-items:center;padding:0 14px;white-space:nowrap;font-stretch:76%;font-weight:600;font-size:14px;letter-spacing:.06em}
.tl-argon{background:var(--amber);color:#fff;font-weight:700;font-size:16px;font-stretch:82%}
.tl-oem{background:var(--ink);color:var(--paper)}
.tl-oem::before{content:"";position:absolute;left:-52px;top:0;bottom:0;width:52px;background:linear-gradient(to right,rgba(22,23,25,0),var(--ink))}
.tl-foot{margin-top:16px;margin-left:var(--tlpad,210px)}
.js .tl-bar{width:0;padding-left:0;padding-right:0;color:transparent;transition:width 1.1s cubic-bezier(.25,.7,.2,1) .45s,padding .5s cubic-bezier(.25,.7,.2,1) .45s,color .35s ease 1.05s}
.js .timeline.drawn .tl-bar{width:var(--w);padding-left:14px;padding-right:14px}
.js .timeline.drawn .tl-argon{color:#fff}
.js .timeline.drawn .tl-oem{color:var(--paper)}
@media(prefers-reduced-motion:reduce){
  .js .tl-bar{width:var(--w);padding-left:14px;padding-right:14px;transition:none}
  .js .tl-argon{color:#fff}.js .tl-oem{color:var(--paper)}
}
@media(max-width:820px){
  .timeline{--tlpad:0px}
  .tl-lane{grid-template-columns:1fr;min-height:0;padding:20px 0;align-items:start}
  .tl-lane .lbl{padding-right:0;margin-bottom:12px}
  .tl-track{height:34px}
  .tl-bar{top:0;font-size:13px}
  .tl-argon{font-size:14px}
  .js .timeline.drawn .tl-bar,.js .tl-bar,.tl-bar{padding-left:10px;padding-right:10px}
  .js .tl-bar{padding-left:0;padding-right:0}
  .tl-axis b:nth-of-type(even){display:none}
  /* the bars are too short at phone width to hold their labels, so each label sits just left of its bar */
  .tl-bar .tl-txt{position:absolute;right:calc(100% + 10px);color:var(--ink)}
  .tl-oem::before{display:none}
  .js .tl-bar .tl-txt{opacity:0;transition:opacity .35s ease 1.05s}
  .js .timeline.drawn .tl-txt{opacity:1}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){.js .tl-bar .tl-txt{opacity:1;transition:none}}

/* ---------- why Argon: four figures that count up, then the five differentiators ---------- */
.why-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(44px,5vw,72px)}
/* the differentiators moved to capabilities.html (Bryan, 09/25); this is just the link under the cards. */
.why-cta{margin-top:clamp(44px,5vw,68px);text-align:center}
/* figure cards (Bryan, 09/24): blue, white type, centered, built in one after another. The fill runs #0070E8 to
   #005FC6 so the small label type clears WCAG AA on white (4.7:1 at the lightest point). */
.why-fig{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(30px,3vw,44px) clamp(18px,1.8vw,28px) clamp(28px,2.8vw,40px);background:linear-gradient(180deg,#0070E8,#005FC6);color:#fff;box-shadow:0 16px 34px rgba(0,58,130,.20)}
/* build-in after Mission Critical Group's figure boxes (AOS fade-down, staggered): each card drops into place from
   above as the row enters the view, and its number counts up as it lands */
.js .why-fig.rv{transform:translateY(-72px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.js .why-fig.rv.in{transform:none}
.why-fig .fig{font-size:clamp(46px,4.6vw,72px);display:block;color:#fff}
.why-fig .fig em{font-style:normal;font-size:.42em;font-weight:500;letter-spacing:.03em;margin-left:.18em;color:rgba(255,255,255,.82)}
.why-fig p{margin:14px auto 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.9);max-width:22ch}
.why-fig p b{font-weight:600;color:#fff}
.diffs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,72px);margin-top:clamp(52px,6vw,88px);counter-reset:d}
.diff{display:grid;grid-template-columns:40px minmax(0,1fr);gap:clamp(16px,1.8vw,26px);padding:26px 0;border-top:1px solid rgba(22,23,25,.16);align-items:start}
.diff .ico{color:var(--amber);position:relative;top:1px}
.diff h3{font-size:clamp(20px,1.7vw,24px)}
.diff p{margin-top:8px;font-size:16.5px;color:var(--ink-soft);max-width:44ch}
@media(max-width:1000px){.why-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:820px){.diffs{grid-template-columns:1fr}}
@media(max-width:480px){.why-figs{grid-template-columns:1fr}}

/* ---------- who Argon serves: four tiles, no figures, no links (Kim, slide 9) ---------- */
.tiles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);margin-top:clamp(44px,5vw,72px)}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--ink);outline:0}
.tile figure{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--panel)}
.tile figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .35s ease;filter:saturate(1.04) contrast(1.02) brightness(1.04)}
.tile:hover figure img,.tile:focus-visible figure img{transform:scale(1.045);filter:saturate(1.12) contrast(1.03) brightness(1.1)}
/* titles over the photo and a blue band that rises on hover with the audience line, after Mission Critical Group's
   industry cards (Kim, slide 9). No arrow and no link: her note removes the links. */
.tile figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(198,150,104,.08),rgba(198,150,104,.08)),linear-gradient(to top,rgba(12,16,20,.82) 0%,rgba(12,16,20,.42) 34%,rgba(12,16,20,.10) 66%,rgba(12,16,20,.04) 100%);transition:opacity .35s ease}
.tile:hover figure::after,.tile:focus-visible figure::after{opacity:.5}
.tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(18px,1.6vw,24px);color:#fff;background:rgba(0,102,214,0);transition:background-color .35s ease}
.tile-cap h3{margin:0;color:#fff;font-size:clamp(19px,1.45vw,22px);line-height:1.25}
.tile-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1)}
.tile-more>div{overflow:hidden;min-height:0}
.tile-more p{margin-top:10px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.94);opacity:0;transition:opacity .3s ease .08s}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{background:#0066D6}
.tile:hover .tile-more,.tile:focus-visible .tile-more{grid-template-rows:1fr}
.tile:hover .tile-more p,.tile:focus-visible .tile-more p{opacity:1}
.tile:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px}
/* hover/focus fix (Bryan, 09/25): the shared .rv scroll-reveal (line ~124) puts a translateY(22px) on every
   .tile while it settles into view. A transform moves the actual hit-test box, not just the paint, so a tile
   scrolled to with the mouse (no click yet) can sit up to 22px off from where the pointer lands until the
   .85s reveal transition finishes, which reads as "hover doesn't work" right after landing on the section.
   Keep the fade (opacity) for the tiles but drop the offset so the hoverable box never moves.  */
.js .tile.rv{transform:none}
@media(prefers-reduced-motion:reduce){.tile-cap,.tile-more,.tile-more p,.tile figure::after{transition:none}}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}.tile{aspect-ratio:3/2}}
@media(max-width:620px){.tiles{grid-template-columns:1fr;gap:20px}.tile{aspect-ratio:4/3}}
/* touch screens have no hover: the band sits open under the photo, which is MCG's hover state at rest */
@media(hover:none){
  .tile{aspect-ratio:auto;background:#0066D6}
  .tile figure{position:relative;inset:auto;aspect-ratio:16/9}
  .tile-cap{position:relative;background:#0066D6}
  .tile-more{display:block}.tile-more>div{overflow:visible}.tile-more p{opacity:1}
}

/* ---------- project inquiry: cool light ground, contained form, six fields ---------- */
.contact{background:var(--mist);color:var(--ink)}
.contact .deck{color:var(--ink-soft)}
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,3.4vw,56px);align-items:start}
.contact-col{grid-column:1/span 5}
.contact-col .deck{max-width:none;margin-top:clamp(20px,2vw,28px);margin-bottom:clamp(24px,2.4vw,34px)}
.aside p{color:var(--ink-soft);margin-bottom:24px;max-width:40ch}
.aside dl{margin-top:24px}
.aside .dl-row{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid rgba(22,23,25,.14)}
.aside .dl-row .ico{color:var(--ink-mute);position:relative;top:3px}
.aside dt{font-weight:600;font-size:14px;color:var(--ink-mute)}
.aside dd{margin:2px 0 0;font-size:17px}
.aside dd a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--line)}
.aside dd a:hover{box-shadow:inset 0 -2px 0 currentColor}
.form-thanks{display:flex;align-items:center;min-height:clamp(120px,12vw,168px);outline:none}
.form-thanks .deck{margin:0;max-width:28ch;font-size:clamp(24px,2.2vw,32px);line-height:1.3;font-weight:600;color:var(--ink)}
.formcard{grid-column:7/span 6;margin-top:-5px;background:var(--paper);padding:clamp(24px,2.6vw,40px);border:1px solid rgba(22,23,25,.14)}
.fs{border:0;padding:0;margin:0 0 22px}
.fs legend{font-weight:600;font-size:16.5px;padding:0 0 2px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:12px}
.f{display:flex;flex-direction:column}
.f--full{grid-column:1/-1}
.f label{font-weight:600;font-size:15px;margin-bottom:6px}
.f .hint{font-stretch:88%;font-size:13px;color:var(--ink-mute);margin:6px 0 0;order:3}
.f input,.f select,.f textarea{font-family:var(--sans);font-size:16.5px;font-weight:400;color:var(--ink);background:#fdfcf9;border:1px solid rgba(22,23,25,.28);padding:11px 13px;min-height:48px;width:100%;transition:border-color .18s ease,box-shadow .18s ease}
.f select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),linear-gradient(135deg,var(--ink-mute) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.f input:hover,.f select:hover{border-color:rgba(22,23,25,.45)}
.f input:focus,.f select:focus{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.f input::placeholder{color:rgba(22,23,25,.34)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:#8c2f2f;box-shadow:inset 0 0 0 1px #8c2f2f}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:4px}
.consent input{width:24px;height:24px;min-height:0;flex:0 0 auto;accent-color:var(--ink);padding:0}
.consent label{font-weight:400;font-size:15px;margin:0;line-height:1.5}
.consent a{box-shadow:inset 0 -1px 0 currentColor;text-decoration:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{margin-top:22px;padding-top:22px;border-top:1px solid rgba(22,23,25,.14);display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.form-actions .src{max-width:30ch}
@media(max-width:1000px){.contact-grid{grid-template-columns:1fr;gap:36px}.contact-col,.formcard{grid-column:1/-1}.formcard{margin-top:0}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}

/* ---------- closing band: one photograph, one statement, one figure, the ask ---------- */
.closer{position:relative;overflow:clip;background:var(--ink-deep);color:var(--paper);min-height:clamp(420px,42vw,600px);display:flex;align-items:flex-end;padding:clamp(80px,9vw,128px) 0 clamp(56px,6.5vw,96px)}
.closer-media{position:absolute;inset:0;z-index:0}
/* one animated transform layer only (Bryan/Claude, 09/25): the image itself carries no transform, no
   will-change and no CSS keyframe. The wrapper (.closer-media, below) is the single element the closer
   motion script animates; see that script for why two nested animated layers over this large image were
   raster-checkerboarding transiently in Chrome. */
.closer-media img,.closer-media video{width:100%;height:100%;object-fit:cover;object-position:0% 55%;display:block}
.closer-media::after{content:"";position:absolute;inset:0;background:linear-gradient(97deg,rgba(15,16,17,.68) 0%,rgba(15,16,17,.54) 30%,rgba(15,16,17,.16) 62%,rgba(15,16,17,0) 82%),linear-gradient(to top,rgba(15,16,17,.48) 0%,rgba(15,16,17,.10) 46%,rgba(15,16,17,0) 70%)}
.closer .wrap{position:relative;z-index:1;width:100%}
/* montage loop pause control (WCAG 2.2.2), restored from the 09/24 video build */
.closer-pause{position:absolute;z-index:2;right:var(--pad);bottom:clamp(20px,2.4vw,32px);display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;background:rgba(15,16,17,.35);border:1px solid rgba(245,243,237,.4);color:rgba(245,243,237,.9);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer;transition:border-color .2s,color .2s}
.closer-pause[hidden]{display:none}
.closer-pause:hover{border-color:var(--paper);color:#fff}
.closer-pause svg{width:9px;height:9px}
.closer-pause .i-play{display:none}.closer-pause[aria-pressed="true"] .i-play{display:block}.closer-pause[aria-pressed="true"] .i-pause{display:none}
.closer-inner{max-width:min(40ch,46%)}
.closer .deck{color:rgba(245,243,237,.90);margin-top:clamp(18px,1.8vw,26px);max-width:40ch}
.closer-fig{display:flex;align-items:center;gap:clamp(14px,1.4vw,20px);margin-top:clamp(28px,3vw,42px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line-dark)}
.closer-fig .fig{font-size:clamp(44px,4.8vw,70px);flex:0 0 auto}
.closer-fig em{font-style:normal;font-stretch:88%;font-weight:500;font-size:15px;line-height:1.4;letter-spacing:.02em;color:rgba(245,243,237,.86);max-width:22ch}
.closer-act{margin-top:clamp(28px,2.8vw,38px)}
.closer .tlink{color:var(--paper)}
.js .deliver-media,.js .closer-media{top:-7%;bottom:-7%;will-change:transform}
.js .closer-media{top:-14%;bottom:-14%;transform-origin:50% 50%}
@keyframes plate-drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.2%,.6%,0)}}
@media(prefers-reduced-motion:reduce){.js .deliver-media img{animation:none;transform:none}.js .closer-media{transform:none}}
@media(max-width:1100px){.closer-inner{max-width:min(40ch,52%)}.closer-media::after{background:linear-gradient(97deg,rgba(15,16,17,.76) 0%,rgba(15,16,17,.62) 32%,rgba(15,16,17,.18) 64%,rgba(15,16,17,0) 84%),linear-gradient(to top,rgba(15,16,17,.50) 0%,rgba(15,16,17,.12) 46%,rgba(15,16,17,0) 70%)}}
@media(max-width:820px){.closer-inner{max-width:none}.closer-media img,.closer-media video{object-position:52% 46%}.closer-media::after{background:linear-gradient(to top,rgba(15,16,17,.90) 0%,rgba(15,16,17,.74) 46%,rgba(15,16,17,.56) 78%,rgba(15,16,17,.48) 100%)}}
@media(max-width:560px){.closer{min-height:0;padding:clamp(56px,12vw,72px) 0 clamp(44px,9vw,60px)}.closer-media img{object-position:60% 44%}.closer-media::after{background:linear-gradient(to top,rgba(15,16,17,.93) 0%,rgba(15,16,17,.76) 52%,rgba(15,16,17,.58) 100%)}.closer-fig{flex-direction:column;align-items:flex-start;gap:6px}.closer-fig em{max-width:none}}
/* phones: the video Pause moves to the band's top-right corner, clear of the headline, so it no longer meets the
   button at the bottom (Bryan, 10/27, build 21) */
@media(max-width:560px){.closer{padding-top:72px}.closer-pause{top:16px;bottom:auto}}

/* ---------- footer: simplified (Kim, slide 12). Brand line, one link column, legal. ---------- */
.footer{background:var(--slate-deep);color:var(--paper);padding:clamp(72px,7.6vw,104px) 0 44px}
.footer-top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:0;row-gap:44px;align-items:stretch}
.footer-brand{grid-column:1/span 5;display:flex;flex-direction:column;padding-right:clamp(24px,3vw,52px)}
.footer-brand img{height:40px;width:auto;align-self:flex-start;margin-bottom:26px}
.footer-brand .line{font-weight:600;font-size:clamp(19px,1.5vw,22px);line-height:1.12;white-space:nowrap;letter-spacing:-.006em;max-width:22ch;margin-bottom:26px}
.footer-brand address{font-style:normal;font-size:16px;color:rgba(245,243,237,.8);line-height:1.8}
.footer-brand address a{display:inline-flex;align-items:center;min-height:34px;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(245,243,237,.4)}
.footer-social{margin-top:auto;padding-top:40px}
.footer-social p{font-stretch:88%;font-size:13px;letter-spacing:.02em;color:rgba(245,243,237,.62);margin-bottom:12px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(245,243,237,.30);color:rgba(245,243,237,.88);transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.footer-social a:hover{border-color:var(--paper);color:var(--ink);background:var(--paper)}
.footer-col{grid-column:span 3;border-left:1px solid rgba(245,243,237,.26);padding-left:clamp(22px,2.9vw,52px);padding-right:clamp(14px,1.8vw,30px)}
.footer-col:first-of-type{grid-column:7/span 3}
.footer-col h2{font-weight:600;font-size:15.5px;font-stretch:100%;text-transform:none;letter-spacing:-.002em;color:rgba(245,243,237,.58);margin-bottom:18px}
.footer-col ul{list-style:none}
.footer-col a{display:inline-flex;align-items:center;min-height:42px;text-decoration:none;font-size:16px;color:rgba(245,243,237,.88);transition:color .18s ease}
.footer-col a,.footer-brand address a{position:relative}
.footer-col a::after,.footer-brand address a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--paper)}
.footer-col a:hover::after,.footer-col a:focus-visible::after,.footer-brand address a:hover::after,.footer-brand address a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.footer-col a::after,.footer-brand address a::after{transition:none}}
.footer-legal{margin-top:clamp(56px,6vw,76px);padding-top:26px;border-top:1px solid var(--line-dark-soft);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 32px;align-items:start;font-stretch:88%;font-size:13.5px;color:rgba(245,243,237,.66);line-height:1.62}
.footer-legal .lines{display:flex;flex-direction:column;gap:9px;max-width:104ch}
.footer-totop{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(245,243,237,.30);color:rgba(245,243,237,.88);transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.footer-totop:hover{border-color:var(--paper);color:var(--ink);background:var(--paper)}
@media(max-width:1000px){.footer-brand{grid-column:1/span 5}.footer-col,.footer-col:first-of-type{grid-column:span 3}.footer-col:first-of-type{grid-column:7/span 3}}
@media(max-width:820px){
  .footer{padding:clamp(60px,8vw,80px) 0 36px}
  .footer-top{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .footer-brand{grid-column:1/-1;padding-right:0}
  .footer-brand img{height:30px;margin-bottom:20px}
  .footer-social{margin-top:0;padding-top:26px}
  .footer-col,.footer-col:first-of-type{grid-column:span 1;border-left:0;padding-left:0;padding-right:0}
  .footer-legal{grid-template-columns:1fr;margin-top:clamp(40px,7vw,52px)}
  .footer-totop{justify-self:start}
}


/* ---------- form error line (theme addition, matches the .hint / invalid-field red) ---------- */
.form-error{margin:0 0 18px;padding:14px 16px;border:1px solid #8c2f2f;background:rgba(140,47,47,.06);color:#6f2424;font-size:15.5px;line-height:1.5;outline:none}
.form-error a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* "Requesting information on: <unit>" line at the top of the request form (same weight as the field labels) */
.unit-line{margin:0 0 20px;font-weight:600;font-size:15px;line-height:1.4;color:var(--ink)}
/* the inventory "Request info" buttons land on the form itself, just below the fixed header */
#requestForm{scroll-margin-top:24px}