/* ============================================================
   INDUSTRIAL PIPING — Fargo, ND
   Design system: shop-dark steel + arc heat.
   Display: Big Shoulders Display · Body: Barlow · Spec: IBM Plex Mono
   No frameworks, no build step. Progressive enhancement only.
   ============================================================ */

/* Self-hosted web fonts (latin woff2) — no Google Fonts runtime dependency. */
@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")}
/* Big Shoulders Display: Google serves one variable woff2 covering 500–700 (one file, a weight range). */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/big-shoulders-display-500-700-variable.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}

:root{
  /* ============================================================
     PALETTE — "THE DRAWING SET": this whole site is Ben's engineering
     drawing package — electric arc-blue ink drafted on blueprint-navy
     steel. There is NO orange in the page UI (design decision).
     The ONLY warm colour left in the whole experience is the real molten
     metal + sparks inside the live weld intro (physics — kept for realism).
       • ARC (action)   → CTA fills, live-drawn lines, active ticks,
         the "spark" that is now an arc-strike; cyan-white at the hottest.
       • LINEWORK (data)→ links, spec labels, numbers, nav, glass tints,
         the blueprint grid, dimension lines, focus, registration ticks.
       • ICE (white) = primary ink.   STEEL (navy-black) = the sheet.
     Two blue families give hierarchy: cyan-forward ARC energy vs the
     deeper indigo LINEWORK. A section is steel + ice + ONE blue doing
     the work; they only meet where the drawing meets the arc.
     ============================================================ */

  /* INK */
  --ice:#EAF1F4;          /* primary text / brightest */
  --slate:#3A4A5E;        /* blueprint steel-blue — DEPTHS/borders only, NOT an accent */

  /* BLUEPRINT PAPER — navy-shifted steel (bluer than black; the drawing sheet) */
  --steel-950:#080C14;
  --steel-900:#0C1220;
  --steel-850:#101829;
  --steel-800:#141E31;    /* card / drafted panel */
  --steel-700:#25344B;    /* border / line */
  --steel-500:#4A5E78;
  --steel-400:#7C90A8;
  --steel-300:#AEC0D4;    /* light secondary — cool, legible */
  --ink:var(--ice);

  /* ARC ENERGY (action) — electric blue → cyan-white. Replaces orange's role. */
  --arc:#3B82F6;          /* primary action arc-blue (CTA fills) */
  --arc-hot:#A9DBFF;      /* bright cyan-white arc highlight (was hot amber) */
  --arc-live:#4FB0FF;     /* the live "drawn line" / active cyan */
  --ember:#123E6E;        /* deep arc-blue (depths; was ember) */
  --cyan:#7CDBFF;         /* brightest arc-cyan — sparks / live tip / hi-glows */
  --heat-grad:linear-gradient(90deg,var(--arc-hot) 0%,var(--arc-live) 42%,var(--arc) 100%);

  /* PRECISION / LINEWORK blues */
  --blue:#2E6BF0;         /* electric arc blue — the linework accent */
  --blue-bright:#5C93FF;  /* lighter — text on dark, glows, highlights, hover */
  --blue-deep:#12386E;    /* deep — depths, borders, glass tint */
  --arc-grad:linear-gradient(90deg,var(--blue-bright) 0%,var(--blue) 55%,var(--blue-deep) 100%);

  /* Arc LIGHT (weld intro) — KEEP (the live weld reads warm-white → blue). */
  --arc-core:#F1F6FF;      /* searing center — coolest white */
  --arc-blue:#AECBF2;      /* electric blue-white halo */
  --arc-blue-deep:#5E82B8; /* cool outer */

  /* Semantic */
  --bg:var(--steel-950);
  --surface:var(--steel-900);
  --card:var(--steel-800);
  --line:var(--steel-700);
  --muted:#9FB2C8;        /* secondary text — ~10:1 on the sheet: readable, clearly below ice */
  --ring:var(--cyan);        /* focus ring — arc-cyan + high contrast on the sheet */
  --glass-tint:59,130,246;   /* liquid-glass tint (r,g,b) — arc-blue everywhere now */

  --font-display:"Big Shoulders Display","Big Shoulders","Oswald","Arial Narrow",sans-serif;
  --font-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Consolas",monospace;

  --wrap:1180px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* V2: raise the WHOLE scale off the old 14px floor.
   Root 17px lifts every rem-based size ~6% (.9rem mono labels → 15.3px, off 14),
   and body copy runs a generous ~18.7px. Display headings are vw-clamped so they
   barely move on desktop; mobile heading mins are guarded below. */
html{scroll-behavior:smooth;font-size:17px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.1rem;          /* ~18.7px reading copy (V2: was 17px) */
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}
::selection{background:var(--blue-deep);color:var(--ice)}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--arc);color:#06101E;padding:.6rem 1rem;font-weight:700;
}
.skip:focus{left:0}

/* ---------- Type ---------- */
.h-hero,.h-1,.h-2,.h-3{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.012em;
  margin:0 0 .5em;
}
.h-hero{font-size:clamp(3.2rem,7.4vw,6.6rem);line-height:1.0}
.h-1{font-size:clamp(2.6rem,5.4vw,4.4rem)}
.h-2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.h-3{font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:.03em}
/* AWE R2: drafter-clean line breaks — balance heads, no orphans in copy (progressive; ignored where unsupported) */
.h-hero,.h-1,.h-2,.h-3{text-wrap:balance}
p,.lede,.work-card__cap{text-wrap:pretty}
/* AWE R2: variable-font "forged steel flexing" — display heads settle 540→700 as they reveal.
   Scoped to html.js (JS-off keeps the static 700), covers the failsafe's .on/.in classes so a
   partial-JS browser still lands on 700; reduced-motion snaps via the global reveal kill below. */
html.js .h-hero.reveal,html.js .h-1.reveal,html.js .h-2.reveal{
  font-weight:540;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),font-weight 1.25s var(--ease-out);
}
html.js .h-hero.reveal.is-visible,html.js .h-hero.reveal.on,html.js .h-hero.reveal.in,
html.js .h-1.reveal.is-visible,html.js .h-1.reveal.on,html.js .h-1.reveal.in,
html.js .h-2.reveal.is-visible,html.js .h-2.reveal.on,html.js .h-2.reveal.in{font-weight:700}
.lede{font-size:clamp(1.18rem,1.6vw,1.36rem);line-height:1.55;color:#CFD8E1;max-width:58ch}
.muted{color:var(--muted)}
p{margin:0 0 1em}

/* Spec eyebrow — mono, amber, tick prefix */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-bright);          /* spec label → BLUE (precision) */
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";width:1.4rem;height:2px;flex:none;
  background:var(--arc-grad);         /* arc tick → blue */
}
.eyebrow--center{justify-content:center}
.eyebrow--plain::before{display:none}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.section--tight{padding:clamp(2.6rem,6vw,4.5rem) 0}
.bg-panel{background:var(--surface)}
.bg-card{background:var(--steel-850)}

/* Weld-seam divider — the site's connective tissue */
.seam{
  height:2px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--steel-700) 18%,var(--steel-700) 82%,transparent);
  position:relative;overflow:hidden;
}
.seam::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,transparent,rgba(79,176,255,.85),var(--arc-hot),rgba(79,176,255,.85),transparent);
  background-size:180px 100%;
  background-repeat:no-repeat;
  background-position:-200px 0;
  animation:seamglint 7s var(--ease-in-out) infinite;
}
@keyframes seamglint{
  0%{background-position:-200px 0}
  45%,100%{background-position:calc(100% + 200px) 0}
}

/* Scroll-drawn weld bead — a stack-of-dimes seam that lays itself as you scroll.
   JS sets the path + drives stroke-dashoffset; the puddle rides the draw tip. */
.weld-bead{position:relative;height:26px;margin:0;overflow:visible;line-height:0}
.weld-bead__svg{display:block;width:100%;height:100%;overflow:visible}
.wb-groove{fill:none;stroke:var(--steel-800);stroke-width:3;stroke-linecap:round}
.wb-bead{
  fill:none;stroke:url(#wbGrad);stroke-width:3.4;stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(79,176,255,.55));
}
.wb-puddle{
  position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  background:radial-gradient(circle,#EAF6FF 0%,#A9DBFF 42%,#4FB0FF 72%,rgba(79,176,255,0) 100%);
  box-shadow:0 0 12px 4px rgba(79,176,255,.55);
}
.weld-bead.is-drawing .wb-puddle{opacity:1}
.wb-spark{
  position:absolute;top:50%;width:2px;height:2px;border-radius:50%;
  background:#A9DBFF;pointer-events:none;
  animation:wbspark .6s ease-out forwards;
}
@keyframes wbspark{
  0%{opacity:1;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(calc(-50% + var(--sx,6px)),calc(-50% - var(--sy,14px)))}
}

/* Molten underline for key headlines */
.molten{
  display:inline-block;position:relative;padding-bottom:.18em;
}
.molten::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--heat-grad);
  box-shadow:0 0 14px rgba(59,130,246,.5);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:4px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .15s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s,border-color .2s,color .2s;
}
.btn svg{width:1.1em;height:1.1em;flex:none}
/* Primary CTA — a struck arc: deep electric-blue fill, cyan-white top rim,
   white ink (AA: #FFF on #2F63D6 ≈ 5.4:1). The action colour is the arc. */
.btn--molten{
  background:linear-gradient(180deg,#2F63D6,#153F97);
  color:#FFFFFF;
  box-shadow:0 1px 0 rgba(169,219,255,.55) inset,0 8px 22px -10px rgba(21,63,151,.6);
}
.btn--molten:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(169,219,255,.7) inset,0 0 26px -2px rgba(79,176,255,.5),0 10px 26px -10px rgba(21,63,151,.7);
}
.btn--ghost{
  border-color:var(--steel-500);color:var(--ink);background:transparent;
}
.btn--ghost:hover{border-color:var(--blue-bright);color:var(--arc-core);box-shadow:0 0 20px -6px rgba(46,107,240,.45)} /* secondary CTA hover → blue (arc getting hotter = whiter) */
.btn--lg{padding:1.05rem 1.9rem;font-size:1.08rem}
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:600;
  color:var(--blue-bright);   /* navigation link → BLUE */
  text-decoration:underline;text-decoration-color:rgba(92,147,255,.45);
  text-decoration-thickness:1px;text-underline-offset:4px;
}
.link-arrow svg{width:1.05em;height:1.05em;transition:transform .18s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow:hover{color:var(--arc-core)}            /* hover → near-white (hotter arc) */

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:linear-gradient(180deg,rgba(11,14,17,.80),rgba(11,14,17,.44));
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background-color .3s,box-shadow .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;
}
/* On scroll the bar becomes a liquid-glass rail: heavier blur + a specular top
   edge + a gradient hairline base tinted to the arc blue (precision). */
.site-header.is-solid{
  background:linear-gradient(180deg,rgba(16,21,28,.72),rgba(11,14,17,.60));
  -webkit-backdrop-filter:blur(18px) saturate(165%) brightness(1.04);backdrop-filter:blur(18px) saturate(165%) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px -18px rgba(0,0,0,.85);
}
.site-header.is-solid::after{ /* gradient hairline base — arc-blue tinted at the leading edge, not a flat line */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 18%,rgba(46,107,240,.55) 55%,rgba(255,255,255,.12) 82%,transparent);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:74px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
/* Ben's mark is dark slate artwork drawn for a LIGHT background (his own logo, 2026-08-04).
   The header and footer are near-black, so the badge sits on a light chip rather than being
   recoloured — the logo itself is never altered. */
.brand-mark{display:inline-flex;align-items:center;justify-content:center;
  background:#EDF1F5;border-radius:50%;padding:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 2px 8px rgba(0,0,0,.45)}
.brand-mark{display:inline-grid;place-items:center;background:#E9F0F2;border-radius:50%;padding:2px;flex:none}.brand-mark img{width:46px;height:46px;display:block}
.brand-word{display:flex;flex-direction:column;line-height:1.05}
.bw-name{
  font-family:var(--font-display);font-weight:700;font-size:1.32rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.bw-name i{font-style:normal;color:var(--blue-bright)}   /* "Piping" = electric-arc blue */
.bw-sub{font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav-links{display:flex;align-items:center;gap:1.4rem}
.nav-links a{
  text-decoration:none;font-weight:500;font-size:.98rem;color:var(--steel-300);
  padding:.35rem 0;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}  /* nav = precision → blue underline */
.call-pill{white-space:nowrap}

.nav-toggle{
  display:none;background:none;border:1px solid var(--steel-700);border-radius:4px;
  width:44px;height:44px;cursor:pointer;padding:10px;
  flex-direction:column;justify-content:space-between;
}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:1px}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:150;background:var(--steel-950);
  padding:1.2rem clamp(1.1rem,5vw,2rem) 2rem;
  display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .32s var(--ease-out);
  overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0)}
body.menu-open{overflow:hidden}
.mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.mm-close{
  background:none;border:1px solid var(--steel-700);border-radius:4px;color:var(--ink);
  font-size:1.6rem;line-height:1;width:44px;height:44px;cursor:pointer;
}
.mobile-menu nav{display:flex;flex-direction:column;gap:.15rem}
.mobile-menu nav a{
  text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-size:2rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;padding:.55rem 0;border-bottom:1px solid var(--steel-800);
}
.mobile-menu nav a[aria-current="page"]{color:var(--blue-bright)}
.mm-grouplabel{
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:1.4rem 0 .3rem;
}
.mm-cta{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-top:2rem}

/* ---------- Mobile bottom bar ---------- */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1fr 1fr;
  background:rgba(11,14,17,.97);border-top:1px solid var(--steel-700);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobilebar a{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding: .95rem .4rem;text-decoration:none;font-weight:600;font-size:1rem;
}
.mobilebar svg{width:1.1em;height:1.1em}
.mb-call{color:#FFFFFF;background:linear-gradient(180deg,#2F63D6,#153F97)}
.mb-text,.mb-email{color:var(--ink);border-left:1px solid var(--steel-800)}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  align-items:stretch;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 12% -10%,rgba(56,72,90,.55),transparent 60%),
    var(--steel-950);
}
.hero__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(74px + clamp(2.5rem,6vw,4rem)) clamp(1.2rem,5vw,4.5rem) clamp(3rem,7vw,4.5rem);
  position:relative;z-index:2;
}
.hero__body .h-hero{max-width:12ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero__chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.6rem}
.chip{
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel-300);border:1px solid var(--steel-700);border-radius:3px;
  padding:.42rem .72rem;background:rgba(26,32,39,.55);
}
.chip b{color:var(--blue-bright);font-weight:600}   /* data/number → blue */
.hero__panel{
  position:relative;min-height:420px;
  border-left:1px solid var(--steel-700);
}
.hero__panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;
}
/* Optional hero video loop — ships disabled; sits over the photo when enabled.
   Reduced-motion users always get the still photo. */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
@media (prefers-reduced-motion: reduce){.hero__video{display:none}}
.hero__panel::before{ /* steel scrim so type zones stay clean */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,14,17,.32),transparent 30%,transparent 62%,rgba(11,14,17,.78));
}
.hero__panel::after{ /* blueprint registration tick — precision → blue */
  content:"";position:absolute;left:0;top:0;width:64px;height:64px;z-index:2;
  background:
    linear-gradient(90deg,var(--blue-bright),transparent 60%) top left/64px 2px no-repeat,
    linear-gradient(180deg,var(--blue-bright),transparent 60%) top left/2px 64px no-repeat;
}
.hero__caption{
  position:absolute;left:1.1rem;bottom:1rem;z-index:2;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel-300);
  background:rgba(11,14,17,.72);border:1px solid var(--steel-700);border-radius:3px;
  padding:.45rem .7rem;
}
.hero__scroll{
  position:absolute;left:clamp(1.2rem,5vw,4.5rem);bottom:1.4rem;z-index:2;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.6rem;
}
.hero__scroll::after{
  content:"";width:2px;height:34px;
  background:linear-gradient(180deg,var(--blue-bright),transparent);  /* scroll indicator → blue */
}

/* Ambient embers over the hero photo (JS builds them; reduced-motion = none) */
.hero__embers{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero__ember{
  position:absolute;bottom:-8px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#EAF6FF 0%,#A9DBFF 45%,rgba(79,176,255,.55) 75%,transparent 100%);
  opacity:0;
  animation:emberDrift var(--dur,7s) ease-in-out var(--delay,0s) infinite;
}
@keyframes emberDrift{
  0%{opacity:0;transform:translate(0,0) scale(.75)}
  12%{opacity:.72}
  68%{opacity:.42}
  100%{opacity:0;transform:translate(var(--dx,10px),-300px) scale(1.15)}
}
.hero__embers.paused .hero__ember{animation-play-state:paused}

/* ---------- Service cards → BLUEPRINT DETAIL CARDS ----------
   Each service is a numbered DETAIL on the sheet: a drafted panel with an
   inner double-line drafting frame, a circled DETAIL balloon straddling the
   top edge (a real callout), a stroke line-icon, and a mono spec/action
   footer. Hover lights the frame + balloon cyan — the arc-live edge. */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.4rem;
}
.svc-card{
  position:relative;display:block;text-decoration:none;overflow:visible;
  background:linear-gradient(180deg,rgba(92,147,255,.035),transparent 42%),var(--card);
  border:1px solid var(--line);border-radius:5px;
  padding:2.7rem 2.05rem 1.95rem;   /* V2: looser, so the card breathes */
  transition:transform .2s var(--ease-out),border-color .25s,box-shadow .3s;
}
.svc-card::before{ /* inner double-line drafting frame */
  content:"";position:absolute;inset:9px;border:1px solid var(--steel-700);border-radius:3px;
  pointer-events:none;opacity:.55;transition:border-color .3s,opacity .3s;
}
.svc-det{ /* circled detail balloon, straddling the card's top border (a drafting callout) */
  position:absolute;top:0;left:24px;transform:translateY(-48%);z-index:3;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.02em;
  color:var(--cyan);background:radial-gradient(circle at 50% 34%,#12203588,#080C14);
  border:1.5px solid var(--blue-bright);
  box-shadow:0 0 0 6px var(--card),0 0 14px -4px rgba(92,147,255,.55);
  transition:border-color .3s,box-shadow .3s;
}
.svc-card .ico{
  display:block;width:46px;height:46px;color:var(--blue-bright);margin:.7rem 0 1.4rem;
}
.svc-card .ico svg{width:100%;height:100%}
.svc-card h3{margin:0 0 .6rem;letter-spacing:.02em}
.svc-card p{margin:0;color:var(--steel-300);font-size:1.02rem;line-height:1.62}
/* V2 R2 (grader's #1 fix): the spec string + "DETAILS ▸" shared one flex row and collided,
   wrapping into ragged 2–3 line stacks with orphaned middots. Give the spec its own full-width
   row and drop DETAILS onto a fixed baseline beneath it → every card footer aligns, no orphans. */
.svc-foot{
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--steel-700);
  font-family:var(--font-mono);font-size:15px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
}
.svc-spec{color:var(--blue-bright);line-height:1.4}
.svc-more{color:var(--cyan);white-space:nowrap;transition:transform .18s var(--ease-out)}
.svc-card:hover{transform:translateY(-3px);border-color:var(--steel-500);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.82),0 0 24px -12px rgba(59,130,246,.4)}
.svc-card:hover::before{border-color:var(--blue);opacity:1}
.svc-card:hover .svc-det{border-color:var(--cyan);box-shadow:0 0 0 5px var(--card),0 0 18px -2px rgba(124,219,255,.75)}
.svc-card:hover .svc-more{transform:translateX(3px)}
.svc-card:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

/* Community callout — the one warm card */
.community{
  margin-top:1.1rem;
  border:1px solid var(--line);border-radius:6px;
  background:
    radial-gradient(600px 220px at 8% 0%,rgba(59,130,246,.10),transparent 70%),
    var(--card);
  padding:1.9rem 1.6rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;justify-content:space-between;
}
.community h3{margin:0 0 .3rem}
.community p{margin:0;color:var(--steel-300);max-width:58ch}

/* ---------- Full-bleed photo band ---------- */
.band{position:relative;min-height:62vh;overflow:hidden;display:flex;align-items:flex-end}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::before{
  content:"";position:absolute;inset:0;
  /* V2: the caption copy read hard over the bright
     flange. Much stronger reading scrim — a dark pool concentrated at the bottom-left
     text zone that feathers out (keeps the flange visible on the right) + a heavier
     left wash + a deeper bottom fade. Combined with the bigger type + shadow below. */
  background:
    radial-gradient(120% 120% at 2% 90%, rgba(3,6,10,.82), transparent 58%),
    linear-gradient(90deg,rgba(3,6,10,.93) 0%,rgba(3,6,10,.78) 28%,rgba(3,6,10,.36) 52%,transparent 80%),
    linear-gradient(180deg,rgba(3,6,10,.42),rgba(3,6,10,.05) 28%,rgba(3,6,10,.44) 62%,rgba(3,6,10,.97));
}
.band__inner{position:relative;z-index:1;padding:clamp(2.2rem,5vw,3.6rem) 0;width:100%}
.band .h-2{max-width:16ch;font-size:clamp(2.2rem,4.2vw,3.3rem)}
.band .h-2,.band .lede,.band .eyebrow{text-shadow:0 2px 22px rgba(3,6,10,.96),0 1px 4px rgba(3,6,10,1)}
.band .lede{color:var(--ice);font-weight:500;max-width:52ch}

/* ---------- Steps (a real sequence: how a shut-down goes) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.4rem}
.step{
  border-left:2px solid var(--steel-700);padding:0 0 0 1.3rem;position:relative;
}
.step::before{
  content:"";position:absolute;left:-2px;top:0;height:44px;width:2px;
  background:var(--arc-grad);          /* process marker → blue */
}
.step .step-no{
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.18em;color:var(--blue-bright);
  display:block;margin-bottom:.5rem;
}
.step h3{margin:0 0 .5rem}
.step p{color:var(--steel-300);font-size:1.02rem;line-height:1.6;margin:0}

/* ---------- Safety First (V2: company-voice trust band, mirrors Ben's live site:
   "We prioritize quality, safety, and expertise" + "all staff undergo OSHA training") ---------- */
.safety__inner{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.8rem,5vw,3.6rem);align-items:center}
.safety__lede .h-2{max-width:15ch}
.safety__lede .lede{margin-bottom:0}
.safety__pillars{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.safety__pillars li{
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:5px;
  background:linear-gradient(90deg,rgba(46,107,240,.07),transparent 62%),var(--steel-850);
  padding:1.15rem 1.4rem;
}
.safety__pillars b{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.4rem;color:var(--ice);line-height:1}
.safety__pillars span{display:block;margin-top:.35rem;font-family:var(--font-mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-300)}
@media (max-width:860px){.safety__inner{grid-template-columns:1fr}}

/* ---------- Split (craft / about teaser) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,5vw,4rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media .frame{
  position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--card);
}
.split__media .frame img{width:100%;height:100%;object-fit:cover}
.split__media .frame::after{  /* blueprint registration tick → blue */
  content:"";position:absolute;right:0;bottom:0;width:64px;height:64px;
  background:
    linear-gradient(270deg,var(--blue-bright),transparent 60%) bottom right/64px 2px no-repeat,
    linear-gradient(0deg,var(--blue-bright),transparent 60%) bottom right/2px 64px no-repeat;
}
.split__media .tag{
  position:absolute;left:.9rem;top:.9rem;z-index:2;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel-300);background:rgba(11,14,17,.78);border:1px solid var(--steel-700);
  border-radius:3px;padding:.4rem .68rem;
}
.split__body .h-2{max-width:16ch}

/* Bore-shot pair row */
.bores{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.4rem}
.bores figure{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.bores img{aspect-ratio:4/3;object-fit:cover;width:100%}
.bores figcaption{
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:.6rem .8rem;
}

/* ---------- Quote / about teaser band ---------- */
.quoteband{position:relative}
.quoteband blockquote{
  margin:0;font-family:var(--font-display);font-weight:600;text-transform:none;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.2;max-width:26ch;
}
.quoteband blockquote q{quotes:"\201C" "\201D"}
.quoteband cite{
  display:block;margin-top:1.2rem;font-style:normal;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-bright);
}

/* ---------- Gallery (work page) ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}
.gallery a{
  display:block;position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--card);text-decoration:none;
}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s var(--ease-out),opacity .3s}
.gallery a:hover img{transform:scale(1.03)}
.gallery a:hover{border-color:var(--blue);box-shadow:0 0 26px -10px rgba(46,107,240,.4)}
.gallery .cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:.9rem .9rem .8rem;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-300);
  background:linear-gradient(180deg,transparent,rgba(11,14,17,.9));
}
.gallery .cap b{display:block;color:var(--ink);font-family:var(--font-body);font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:600;margin-bottom:.15rem}
.gallery a.wide{grid-column:span 2}
.gallery a.wide img{aspect-ratio:16/10}

/* Lightbox (native dialog) — glassed: frosted backdrop, layered depth, specular edge */
/* FIXED 2026-08-04 (Asenath's note: weld photos "cut off, without ability to move it around
   screen to center"). Two real bugs:
   1. position:relative took a MODAL dialog out of the top-layer centring and put it back in
      document flow, so on a scrolled page it rendered partly above the viewport (measured
      top:-312px at 1440x900) — and overflow:hidden meant you could not scroll to it.
   2. There was no max-height, while the image alone was 82vh plus the caption bar, so the
      dialog could always exceed the screen.
   Now: fixed + inset:0 + margin:auto centres it in the top layer, max-height keeps it on
   screen, and the image flexes to whatever space is left instead of a fixed 82vh. */
dialog.lightbox{
  position:fixed;inset:0;margin:auto;
  border:1px solid transparent;border-radius:14px;padding:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(23,29,37,.97),rgba(11,14,17,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 44px 90px -22px rgba(0,0,0,.82),0 4px 14px rgba(0,0,0,.5);
  max-width:min(92vw,1100px);
  max-height:92dvh;
  width:max-content;height:max-content;
}
@supports not (height:1dvh){ dialog.lightbox{max-height:92vh} }
dialog.lightbox[open]{display:flex;flex-direction:column}
dialog.lightbox::before{ /* gradient hairline frame */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.04) 45%,rgba(46,107,240,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
dialog.lightbox::backdrop{background:rgba(4,6,8,.86);-webkit-backdrop-filter:blur(7px) saturate(120%);backdrop-filter:blur(7px) saturate(120%)}
/* Flex child: shrink to whatever height is left after the caption bar, never overflow.
   min-height:0 is required or a flex item refuses to shrink below its intrinsic size. */
dialog.lightbox img{display:block;width:auto;max-width:100%;margin:0 auto;
  flex:0 1 auto;min-height:0;object-fit:contain}
dialog.lightbox .lb-bar{
  flex:0 0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;position:relative;
  padding:.75rem .95rem;border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-300);
}
dialog.lightbox button{
  background:none;border:1px solid var(--steel-700);border-radius:4px;color:var(--ink);
  padding:.4rem .8rem;cursor:pointer;font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.1em;
}
dialog.lightbox button:hover{border-color:var(--blue-bright);color:var(--arc-core)}
/* 2026-07-28 lightbox fixes (an opened image could sit off-screen):
   the page must NOT scroll behind an open lightbox — confirmed live in Firefox AND Chromium
   (wheel/swipe moved the page under the modal, so you closed it somewhere else). Two rules,
   NOT a shared selector list: a no-:has engine would drop the whole list, killing the JS
   fallback too. overscroll-behavior stops scroll-chaining out of the dialog. */
body.lb-open{overflow:hidden}
body:has(dialog.lightbox[open]){overflow:hidden}
dialog.lightbox{overscroll-behavior:contain}
/* Entry fade — @starting-style is ignored (instant open) by older engines; off for reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  dialog.lightbox[open]{transition:opacity .22s var(--ease-out)}
  @starting-style{
    dialog.lightbox[open]{opacity:0}
  }
}
/* Homepage figures deep-link to their gallery card — land clear of the sticky nav. */
.featured-weld,.work-card{scroll-margin-top:96px}

/* ---------- Interior page hero ---------- */
.pagehero{
  position:relative;padding:calc(74px + clamp(3.2rem,8vw,5.5rem)) 0 clamp(2.6rem,6vw,4rem);
  background:
    radial-gradient(900px 420px at 85% -20%,rgba(46,107,240,.10),transparent 65%),  /* arc-blue precision wash */
    radial-gradient(1000px 500px at 10% -10%,rgba(42,50,60,.5),transparent 60%),
    var(--steel-950);
  border-bottom:1px solid var(--steel-800);
}
.crumbs{font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue-bright)}

/* ---------- Services page ---------- */
.svc-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.svc-rail{position:sticky;top:96px}
.rail-title{font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 .8rem}
.svc-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.svc-rail a{
  display:block;text-decoration:none;color:var(--steel-300);font-weight:500;font-size:.95rem;
  padding:.5rem .8rem;border-left:2px solid var(--steel-800);
  transition:color .15s,border-color .15s,background-color .15s;
}
.svc-rail a:hover{color:var(--ink)}
.svc-rail a.active{color:var(--arc-core);border-left-color:var(--blue);background:rgba(46,107,240,.08)}  /* rail = navigation → blue */
.svc-block{padding:2.4rem 0;border-bottom:1px solid var(--steel-800);scroll-margin-top:96px}
.svc-block:last-child{border-bottom:0}
.svc-num{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-bright);
  margin-bottom:.7rem;
}
.svc-num svg{width:20px;height:20px}
.svc-block h2{margin-top:0}
.svc-block ul{color:var(--steel-300);line-height:1.7;padding-left:1.2rem}
.svc-block ul li::marker{color:var(--blue-bright)}

/* ---------- Contact ---------- */
.callcard{
  border:1px solid var(--line);border-radius:6px;background:var(--card);
  padding:clamp(1.6rem,4vw,2.6rem);text-align:center;
}
.callcard .phone{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,7vw,5rem);letter-spacing:.02em;line-height:1;
  color:var(--ink);text-decoration:none;display:inline-block;
}
.callcard .phone:hover{color:var(--arc-hot)}
.callcard-ctas{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.5rem}
.contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.4rem}
.contact-meta .row{
  border:1px solid var(--line);border-radius:6px;background:var(--steel-850);
  padding:1.2rem 1.3rem;display:flex;gap:.9rem;align-items:flex-start;
}
.contact-meta svg{width:22px;height:22px;color:var(--blue-bright);flex:none;margin-top:.15rem}
.contact-meta b{display:block;margin-bottom:.2rem}
.contact-meta a{color:var(--steel-300);text-decoration:none}
.contact-meta a:hover{color:var(--blue-bright)}
.mapframe{
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:1.4rem;
  filter:grayscale(.5) contrast(1.05) brightness(.9);
  position:relative;min-height:360px;
}
.mapframe::before{ /* fallback if the maps embed ever fails to load */
  content:"Fargo, North Dakota — serving the Red River Valley, MN–ND";
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:1rem;
}
.mapframe iframe{display:block;width:100%;height:360px;border:0;position:relative;background:transparent}
/* Custom inline service-area map (no third-party embed): drop the map-tuned filter,
   let the SVG fill; it sits above the ::before fallback (which is inert for inline SVG).
   min-width keeps every label >=14px (the 22u label crosses 14px at ~640px render width);
   the container scrolls horizontally on narrow phones instead of shrinking the type. */
.mapframe--svg{filter:none;overflow-x:auto}
.mapframe--svg svg{position:relative;z-index:1;display:block;width:100%;min-width:660px;height:auto}
/* Map styling lives here (NOT in an inline SVG <style>, which the HTML parser mis-nests). */
/* The service-area map reads as an engineering BLUEPRINT: blue linework + blue
   labels, with the FARGO home base as the one hot ORANGE beacon (heat = home). */
.mapframe--svg .sm-eyebrow{font-family:var(--font-mono);font-size:22px;letter-spacing:3px;fill:#8FB0E8}
.mapframe--svg .sm-state{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:6px;fill:#8FB0E8}
.mapframe--svg .sm-river{font-family:var(--font-mono);font-size:24px;letter-spacing:5px;fill:#5E82B8}
.mapframe--svg .sm-fargo{font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:2px;fill:#EAF1F4}
.mapframe--svg .sm-fargosub{font-family:var(--font-mono);font-size:24px;letter-spacing:2px;fill:#A6B6C4}
.mapframe--svg .sm-reach{font-family:var(--font-mono);font-size:24px;letter-spacing:2px;fill:#8FB0E8}
.mapframe--svg .sm-compass{font-family:var(--font-mono);font-size:24px;fill:#5E82B8}
.mapframe--svg .sm-outline{fill:url(#stateFill);stroke:#33517A;stroke-width:3;stroke-linejoin:round}
.mapframe--svg .sm-riverline{fill:none;stroke:#5C93FF;stroke-width:2.5;stroke-dasharray:2 10;stroke-linecap:round;opacity:.85}
.mapframe--svg .sm-reachring{fill:none;stroke:#2E4D74;stroke-width:1.5;stroke-dasharray:6 8;opacity:.6}
.mapframe--svg .sm-pulsering{fill:none;stroke:#7CDBFF;stroke-width:2;opacity:.55;transform-origin:411px 345px}
@media (prefers-reduced-motion: no-preference){.mapframe--svg .sm-pulsering{animation:fargoPulse 2.6s ease-out infinite}}
@keyframes fargoPulse{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}

/* Quote composer (no backend — builds an email) */
.quoteform{display:grid;gap:1rem;margin-top:1.6rem}
.quoteform label{display:block;font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.quoteform input,.quoteform textarea,.quoteform select{
  width:100%;background:var(--steel-850);border:1px solid var(--steel-700);border-radius:4px;
  color:var(--ink);font-family:var(--font-body);font-size:1rem;padding:.75rem .9rem;
}
.quoteform input:focus,.quoteform textarea:focus,.quoteform select:focus{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--blue)}
.quoteform .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.formnote{font-size:.9rem;color:var(--muted)}

/* ---------- Final CTA band ---------- */
.cta-final{
  text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(700px 320px at 50% 118%,rgba(47,99,214,.18),transparent 70%),
    var(--steel-900);
  border-top:1px solid var(--steel-800);
}
.cta-final .phone-huge{
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(3rem,9vw,7rem);letter-spacing:.02em;
  color:var(--ink);text-decoration:none;display:inline-block;margin:.4rem 0 .8rem;
}
.cta-final .phone-huge:hover{color:var(--arc-hot);text-shadow:0 0 34px rgba(124,219,255,.45)}
.cta-final .sub{font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:var(--steel-950);border-top:1px solid var(--steel-800);padding:3.2rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.foot-grid h4{
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem;
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.foot-grid a{color:var(--steel-300);text-decoration:none;font-size:.95rem}
.foot-grid a:hover{color:var(--blue-bright)}    /* footer nav → blue hover */
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:34ch;margin:.8rem 0 0}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--steel-800);
  font-size:.9rem;color:var(--muted);
}
.foot-bottom a{color:var(--muted);text-decoration:none}
.foot-bottom a:hover{color:var(--blue-bright)}

/* ---------- Prose (privacy) ---------- */
.prose h3{margin:1.8em 0 .5em;font-family:var(--font-body);font-weight:600;font-size:1.15rem}
.prose p{color:var(--steel-300)}

/* ---------- Reveal animations ----------
   Hide rule is scoped to html.js (flag set by an inline head script) so content
   is ALWAYS visible with JS off/blocked — the cross-browser gate depends on this. */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js .reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}

/* AWE R5: NATIVE scroll-driven reveals — where the browser supports scroll timelines, entrance
   motion runs GPU-composited off the scroll position itself (buttery, main-thread-free) and the
   IntersectionObserver keeps running purely for the .is-visible weight-settle. Non-supporting
   browsers skip this block and use the IO transitions above unchanged. Safety: fill-mode "both"
   + animation-range means above-fold elements sit at the finished state on load; the JS-off
   failsafe's inline !important styles outrank animations by cascade, so content can never hide. */
@supports (animation-timeline: view()) {
  html.js .reveal{
    transition:font-weight 1.25s var(--ease-out);        /* motion moves to the timeline; keep only the wght settle */
    animation:cbxRevealIn linear both;
    animation-timeline:view();
    animation-range:entry 4% entry 46%;
  }
  /* Dimension-line dividers DRAW themselves left→right as they enter — drafted, not faded.
     (Replaces the generic rise for .dimline only; the measuring line appears the way a drafter
     would strike it.) */
  html.js .dimline.reveal{
    animation:cbxDimDraw linear both;
    animation-timeline:view();
    animation-range:entry 8% entry 62%;
  }
}
@keyframes cbxRevealIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cbxDimDraw{from{opacity:1;transform:none;clip-path:inset(-8px 100% -8px 0)}to{opacity:1;transform:none;clip-path:inset(-8px 0 -8px 0)}}

/* ============================================================
   ARC-STRIKE INTRO
   Overlay above already-painted hero. Default hidden — JS opts in.
   ============================================================ */
#arc-intro{
  position:fixed;inset:0;z-index:300;
  background:
    radial-gradient(60vmax 42vmax at 36% 46%, rgba(70,87,102,.15), transparent 55%),
    #06080A;
  overflow:hidden;
}
#arc-intro[hidden]{display:none}
#arc-intro.arc-forced{display:block !important} /* ?arc demo switch overrides reduced-motion */
#arc-intro .arc-stage{position:absolute;inset:0;
  /* AWE R3: filmic tone-curve + cold grade over the whole weld scene (canvases + stinger + flash;
     the skip button sits OUTSIDE this wrapper). Pure color-matrix ops — one cheap GPU pass, no blur
     (blur would soften the forged logo). Raw canvas is flat/linear; footage always carries a grade.
     A/B kill switch: ?arc&gradeoff (JS adds .grade-off). */
  filter:contrast(1.09) saturate(1.03) brightness(.98) sepia(.05) hue-rotate(-4deg);  /* eased 2026-07-28: sat 1.06→1.03, hue -8→-4 — the stronger grade over-saturated the oxide; sepia stays ≤.05 (hard cap) */
  transition:filter .8s var(--ease-in-out),transform .9s var(--ease-out)}  /* AWE R11: the grade RESOLVES + the ignition breath eases */
#arc-intro.grade-off .arc-stage{filter:none}
/* AWE R11a: graded crossfade — as .is-out fades the intro, the filmic grade resolves to neutral
   in parallel, so the "footage" dissolves INTO the flat page instead of a hard opacity cut. */
#arc-intro.is-out .arc-stage{filter:contrast(1) saturate(1) brightness(1) sepia(0) hue-rotate(0deg)}
/* AWE R11b: ignition lens-breath — one subtle ≤1.5% push on the strike, easing back out (the
   camera "breathes" with the exposure pump). Transform-only; JS gates it off under reduced-motion. */
#arc-intro .arc-stage.breathe{transform:scale(1.015)}
#arc-pipe{position:absolute;inset:0;width:100%;height:100%;z-index:3;
  filter:blur(.3px)}  /* AWE R10: one focal plane — the BACK canvas (workpiece) sits a hair soft while the front
                         (arc/sparks/tool) stays razor-sharp = "a lens saw this". 0.3px is imperceptible on the
                         forged mark (clear + steady — unchanged position/reveal). A/B: ?arc&dofoff */
#arc-intro.dof-off #arc-pipe{filter:none}
#arc-spark{position:absolute;inset:0;width:100%;height:100%;z-index:6} /* arc glow / bead / molten / spatter, IN FRONT of the tool (arc light wraps the tip) */

/* The stinger (electrode holder) — descends, strikes, then lifts away.
   Steel + his slate on the tool body. JS drives all motion. */
.arc-stinger{
  position:absolute;left:0;top:0;width:0;height:0;z-index:4;
  transform-origin:0 0;opacity:0;pointer-events:none;
  filter:drop-shadow(-3px 4px 5px rgba(94,130,184,.32)); /* offset toward the arc — directional, not a halo */
  will-change:transform,opacity,filter;
}
.arc-stinger svg,.arc-stinger img{position:absolute;display:block;width:260px;height:200px;max-width:none;margin-left:-30px;margin-top:-170px} /* pin the electrode tip to the strike point (max-width:none defeats the global img{max-width:100%} which would collapse it against the 0-width parent) */

/* The arc's glow, corona, molten puddle, fume and plate-light are all drawn on
   #arc-spark (the canvas) now — flickering with one grain, like real footage.
   The old .arc-core/.arc-bloom/.arc-puddle DOM radials were removed on 2026-07-22. */

/* Blinding ignition blowout — coolest white, full frame, near-instant */
.arc-flash{
  position:absolute;inset:0;z-index:7;background:var(--arc-core);opacity:0;pointer-events:none;
}
.arc-skip{
  position:absolute;right:1.2rem;bottom:1.2rem;z-index:8;
  background:rgba(11,14,17,.6);border:1px solid var(--steel-700);border-radius:4px;
  color:var(--steel-300);font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:.55rem .9rem;cursor:pointer;
}
.arc-skip:hover{color:var(--blue-bright);border-color:var(--blue)}
#arc-intro.is-out{transition:opacity .8s var(--ease-in-out);opacity:0;pointer-events:none}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:1.8rem}
  .svc-layout{grid-template-columns:1fr}
  .svc-rail{position:static;margin-bottom:1rem}
  .svc-rail ol{flex-direction:row;flex-wrap:wrap;gap:.4rem}
  .svc-rail a{border:1px solid var(--steel-700);border-radius:3px;padding:.4rem .7rem;font-size:.9rem}
  .svc-rail a.active{border-color:var(--blue)}
  /* Collapse to the hamburger below 1020 so the full nav + phone pill + wider
     14px brand sub-line never crowd the bar on small laptops / split-screen. */
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .call-pill{display:none}
  .mobilebar{display:grid}
  body{padding-bottom:66px}   /* clear the fixed Call/Text/Email bar (incl. hero chips at the fold) */
}
/* 2026-08-07: the sticky Call / Text / Email bar is only useful where tel: and sms: actually do
   something — a phone. On a laptop at a narrow width those two buttons were dead on click, so the
   bar is hidden for devices driven by a mouse. Phones and tablets (coarse pointer) keep it exactly
   as it is. Those visitors still get the phone number in the header, the hamburger menu's
   "Call or Text" + "Email a Quote Request" buttons, and the big number in the closing panel. */
@media (max-width:1020px) and (hover:hover) and (pointer:fine){
  .mobilebar{display:none}
  body{padding-bottom:0}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__panel{min-height:56vh;border-left:0;border-top:1px solid var(--steel-700)}
  .hero__scroll{display:none}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .contact-meta{grid-template-columns:1fr}
  .quoteform .two{grid-template-columns:1fr}
  .community{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery a.wide{grid-column:span 1}
  .gallery a.wide img{aspect-ratio:4/5}
  .foot-grid{grid-template-columns:1fr}
  .bores{grid-template-columns:1fr}
}
@media (max-width:520px){
  /* The 14px type-floor widened the header sub-line; hide it on the tightest phones
     so the brand + hamburger can never overflow the bar. Footer still shows it. */
  .site-header .bw-sub{display:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,html.js .reveal,html.js .dimline.reveal{opacity:1;transform:none;transition:none;animation:none;clip-path:none}  /* R5 fix (grader): .dimline.reveal's 0,3,1 specificity beat the generic kill — name it explicitly so reduced-motion truly stills the draw-on too */
  /* AWE R2: no weight breathing — snap display heads straight to their settled 700 */
  html.js .h-hero.reveal,html.js .h-1.reveal,html.js .h-2.reveal{font-weight:700}
  .seam::after{animation:none;display:none}
  .btn,.svc-card,.gallery img,.link-arrow svg{transition:none}
  #arc-intro{display:none !important}
  /* Weld bead: show the finished seam, no puddle/sparks */
  .weld-bead .wb-puddle,.weld-bead .wb-spark{display:none}
}

/* ============================================================
   LIQUID GLASS  — Apple-2025 "Liquid Glass" energy: translucent,
   refractive, specular-edged, with real depth. NOT flat 2020 frost.
   Every glass surface layers three things — an illumination fill, a
   specular highlight, and a depth shadow — plus a GRADIENT hairline
   border (never a solid white line) and LAYERED shadows. The accent
   lives in the glow / edge / shadow ONLY, never as a saturated fill
   (a fully-tinted panel reads as an app skin, not glass).
   Homes: scroll-nav (above), stat/trust cards, work-card hover
   overlays, the CTA island. NOT: the primary button, testimonials on
   plain dark, full-section backgrounds, or small spec text.
   Perf: blur 8–20px, ≤~8 on screen, never animate blur/scale.
   ============================================================ */
.glass{
  position:relative; isolation:isolate; border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 12%),   /* specular top SHEEN — the light-catch that reads as glass, not flat frost */
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 42%,rgba(255,255,255,.015)),
    rgba(20,26,34,.50);
  -webkit-backdrop-filter:blur(15px) saturate(165%) brightness(1.08);
  backdrop-filter:blur(15px) saturate(165%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),          /* bright top rim */
    inset 0 7px 16px -14px rgba(255,255,255,.28),  /* soft inner top bevel glow — depth */
    inset 0 -14px 26px -22px rgba(0,0,0,.55),       /* inner bottom shade */
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 22px 44px -12px rgba(0,0,0,.58), 0 2px 6px rgba(0,0,0,.35);
}
.glass::before{ /* gradient hairline border: brightest top-left → fades → tints to the section accent */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:1;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.08) 42%,rgba(var(--glass-tint),.40) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass > *{position:relative;z-index:2}

/* Interactive glass — a pointer-tracked specular highlight (cheap; the ONLY
   animated part is a gradient position + opacity, never the blur). JS sets
   --mx/--my on pointermove; keyboard focus lights it centered. */
.glass--interactive{transition:transform .25s var(--ease-out),box-shadow .3s var(--ease-out)}
.glass--interactive::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,-10%),rgba(255,255,255,.11),rgba(var(--glass-tint),.05) 40%,transparent 66%);
  opacity:0;transition:opacity .4s var(--ease-out);
}
.glass--interactive:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.42),0 26px 50px -14px rgba(0,0,0,.62),0 0 30px -14px rgba(var(--glass-tint),.5)}
.glass--interactive:hover::after,.glass--interactive:focus-within::after{opacity:1}

/* Featured / hero glass — brighter tapered top specular edge + a warm inset
   bounce (the orange molten light catching the near lip of the glass). */
.glass--hero{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.45),
    inset 0 40px 60px -40px rgba(59,130,246,.16),
    0 28px 56px -16px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}
.glass--hero::after{ /* bright tapered top specular — the light-catch that reads as GLASS */
  content:"";position:absolute;left:6%;right:6%;top:0;height:1px;pointer-events:none;z-index:3;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 30%,rgba(46,107,240,.6) 60%,transparent);
}

/* Signature refraction — reserved for ONE hero element (Chromium bends the
   backdrop through an SVG turbulence lens; Safari/FF keep the plain blur via
   the cascade). Never on small text. */
.glass-lens{
  -webkit-backdrop-filter:blur(16px) saturate(160%) brightness(1.08);
          backdrop-filter:blur(16px) saturate(160%) brightness(1.08);              /* universal fallback (Safari/FF stop here) */
  -webkit-backdrop-filter:blur(6px) url(#liquid-lens) saturate(160%) brightness(1.08);
          backdrop-filter:blur(6px) url(#liquid-lens) saturate(160%) brightness(1.08); /* Chromium: frosted AND refractive (6px keeps it premium over dark, not see-through) */
}

/* A11y: any text ON glass keeps the 14px floor + weight 500 (blur eats thin
   edges); a subtle scrim keeps contrast over the bright specular zone. */
.glass :is(h1,h2,h3,h4,p,span,a,li){text-shadow:0 1px 2px rgba(5,8,12,.5)}
.glass-scrim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(120% 100% at 50% 0%,rgba(6,9,13,.28),transparent 62%)}

/* PERF + ROBUSTNESS FALLBACKS — backdrop-filter is GPU-expensive; below 780px,
   without support, or with reduced-transparency, glass becomes a solid steel
   panel that keeps the same border/shadow language (no legibility loss). */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.glass-lens{background:rgba(21,26,32,.94)}
}
@media (max-width:780px){
  .glass,.glass-lens{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(180deg,rgba(28,35,44,.96),rgba(20,26,33,.96));
  }
  .glass--interactive:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-lens{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,28,35,.97)}
}
@media (prefers-reduced-motion:reduce){
  .glass--interactive::after{transition:none}
  .glass--interactive:hover{transform:none}
}

/* ============================================================
   WELDING FEATURES — tasteful, premium, restrained interactions.
   Governing rule: ORANGE = heat (sparks, weld bead, molten);
   BLUE = precision/tech (blueprint grid, magnetic glow, the dimes
   rail, data UI). NEVER both accents inside one micro-interaction.
   Every motion feature has a static reduced-motion fallback.
   ============================================================ */

/* — Primary CTA spark emitter (JS paints a shared canvas over the viewport;
     the button just needs a marker + a hairline heat lift on hover). ORANGE. */
.btn--spark{position:relative}
.btn--spark:hover{box-shadow:0 1px 0 rgba(169,219,255,.6) inset,0 0 30px -4px rgba(79,176,255,.55),0 12px 28px -10px rgba(21,63,151,.7)}

/* — Magnetic / hover-lit SECONDARY CTA — cursor-proximity BLUE glow + a slight
     pull toward the cursor (JS drives the transform + --mx/--my). Blue keeps
     orange reserved for hot-metal moments. */
.btn--magnetic{will-change:transform}
.btn--magnetic:hover,.btn--magnetic:focus-visible{
  border-color:var(--blue-bright);color:var(--arc-core);
  box-shadow:0 0 30px -5px rgba(46,107,240,.6),0 8px 24px -12px rgba(0,0,0,.6);
}

/* — "Stack of dimes" scroll-progress rail — thin fixed rail of overlapping
     coin-segments that weld together as you scroll (a real TIG term). BLUE
     (the arc laying precision progress) balances the orange weld elements. */
.stack-rail{position:fixed;top:0;right:0;bottom:0;width:6px;z-index:60;pointer-events:none;overflow:hidden}
.stack-rail__track{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,107,240,.05),rgba(46,107,240,.015))}
.stack-rail__fill{
  position:absolute;top:0;left:0;right:0;height:0;
  background:
    repeating-linear-gradient(180deg,
      rgba(140,180,255,.95) 0 4px, rgba(92,147,255,.85) 4px 6px, rgba(46,107,240,.55) 6px 8px);
  box-shadow:0 0 8px rgba(46,107,240,.55);
}
.stack-rail__head{
  position:absolute;left:50%;top:0;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#F1F6FF 0%,#5C93FF 55%,rgba(46,107,240,0) 100%);
  box-shadow:0 0 12px 2px rgba(92,147,255,.75);
}

/* — Blueprint / engineering-drawing spec grid — fine BLUE lines + a coarser
     grid + corner ticks, behind SPEC / detail sections only (not SaaS dots). */
.blueprint{position:relative;isolation:isolate}
.blueprint::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(46,107,240,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,107,240,.05) 1px,transparent 1px),
    linear-gradient(rgba(46,107,240,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,107,240,.08) 1px,transparent 1px);
  background-size:32px 32px,32px 32px,160px 160px,160px 160px;
  -webkit-mask:radial-gradient(130% 100% at 50% -10%,#000 30%,transparent 78%);
          mask:radial-gradient(130% 100% at 50% -10%,#000 30%,transparent 78%);
}

/* — Heat-shimmer over the hero weld photo ONLY — a subtle warm haze rising off
     the weld (never over UI text, never full-bleed). ORANGE. */
.heat-shimmer{
  position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(0deg,rgba(90,150,230,.12),rgba(150,190,255,.05) 45%,transparent);
  -webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent);
  animation:heatShimmer 6s ease-in-out infinite;
}
@keyframes heatShimmer{
  0%,100%{transform:translateY(0) scaleY(1);opacity:.42}
  50%{transform:translateY(-1.5%) scaleY(1.05);opacity:.66}
}

/* (The site's ONE arc-strike set-piece is the weld intro itself — a second
    scroll-triggered flash would read as a demo reel, so it is deliberately
    omitted. The intro delivers the arc strike.) */

@media (prefers-reduced-motion:reduce){
  /* Motion features go static: rail shows a still fill, no shimmer/pull. */
  .heat-shimmer{animation:none;opacity:.4}
  .btn--magnetic{will-change:auto}
  .stack-rail__head{display:none}
}

/* ============================================================
   WORK SECTION + GLASS INSTANCES (hero spec, Our Work band, CTA
   island, work.html case studies). Real welds carry it; glass
   frames them. Every label ≥14px, mono weight 500.
   ============================================================ */

/* ---- Hero glass spec card — the signature refraction element, over the weld photo.
   It sits over a DARK part of the photo, so it gets a more opaque fill + stronger specular
   than the base glass so it reads as a premium card, not a see-through panel. ---- */
.hero__spec{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:3;width:min(15.5rem,66%);padding:.8rem 1rem .95rem;border-radius:14px;
  background:
    radial-gradient(220px circle at var(--mx,50%) var(--my,-8%),rgba(255,255,255,.15),transparent 60%),  /* pointer-tracked liquid sheen (JS sets --mx/--my) */
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 15%),   /* stronger top sheen */
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 42%),
    rgba(13,18,25,.60);                                                        /* more opaque steel fill */
  transition:box-shadow .3s var(--ease-out);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.4),
    inset 0 8px 18px -13px rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(124,219,255,.12),                       /* cyan glass edge */
    0 0 32px -12px rgba(79,176,255,.24),                   /* outer rim glow */
    0 20px 42px -14px rgba(0,0,0,.72), 0 2px 6px rgba(0,0,0,.4);
}
.hero__spec::before{background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.12) 40%,rgba(92,147,255,.5) 92%)}
.hero__spec-eyebrow{margin:0;font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright)}
.hero__spec-title{margin:.05rem 0 .55rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.42rem;line-height:1;letter-spacing:.02em;color:var(--ice)}
.hero__spec-rows{margin:0;display:grid;gap:.02rem}
.hero__spec-rows > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;border-top:1px solid rgba(255,255,255,.10);padding:.3rem 0 .06rem}
.hero__spec-rows dt{margin:0;font-family:var(--font-mono);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hero__spec-rows dd{margin:0;font-family:var(--font-mono);font-size:.9rem;font-weight:500;color:var(--ice)}
@media (max-width:520px){.hero__spec{left:.8rem;right:.8rem;bottom:.8rem;width:auto}}

/* ---- Homepage "Our Work" band (the homepage had none) ---- */
/* Round 2: a distinct tonal panel + drafted FIGURE tags so the drawing-set
   metaphor carries into the mid-page gallery (was the most templated block). */
.workband{--glass-tint:59,130,246;background:linear-gradient(180deg,var(--steel-900),var(--steel-950) 84%);border-top:1px solid var(--steel-800)}
.work-fig{position:absolute;top:.55rem;left:.55rem;z-index:4;
  font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--cyan);
  background:rgba(8,12,20,.74);border:1px solid rgba(92,147,255,.5);border-radius:2px;padding:.2rem .48rem;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.workband-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.workband-grid .work-card{aspect-ratio:auto}
.workband-foot{margin-top:1.6rem}
@media (max-width:900px){.workband-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.workband-grid{grid-template-columns:1fr 1fr;gap:.7rem}}

/* ---- CTA island: the final call sits inside a hero-glass island ---- */
.cta-island{
  max-width:660px;margin:0 auto;padding:clamp(2rem,5vw,3.2rem) clamp(1.4rem,5vw,3rem);border-radius:22px;text-align:center;
  /* Over the dark cta-final steel, boost fill + specular so the island reads as premium glass, not a flat panel.
     The first layer is a pointer-tracked liquid sheen (JS sets --mx/--my) so the glass reacts, not just sits. */
  background:
    radial-gradient(300px circle at var(--mx,50%) var(--my,-6%),rgba(255,255,255,.16),transparent 62%),
    linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 26%),   /* diagonal specular sweep — reads as lit glass */
    linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,0) 12%),   /* brighter top sheen */
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 46%),
    rgba(17,23,31,.5);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),               /* crisp specular top rim */
    inset 0 12px 26px -20px rgba(255,255,255,.4),
    inset 0 44px 66px -44px rgba(59,130,246,.2),          /* arc-blue bounce on the near lip */
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(124,219,255,.14),                       /* cyan glass edge catches the arc */
    0 0 48px -14px rgba(79,176,255,.3),                    /* outer rim glow */
    0 30px 62px -18px rgba(0,0,0,.66), 0 3px 10px rgba(0,0,0,.4);
}
.cta-island::before{background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.08) 42%,rgba(46,107,240,.42) 92%)}
.cta-island.glass--hero::after{left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 28%,rgba(92,147,255,.7) 60%,transparent);filter:blur(.3px)}
/* Size the number to the island so it never wraps (the full-viewport .phone-huge is too big here). */
.cta-island .phone-huge{margin:.3rem 0 .7rem;font-size:clamp(2rem,5.2vw,3.9rem);white-space:nowrap}

/* ---- work.html: filter bar ---- */
.work-intro{max-width:60ch}
.work-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.9rem 0 .4rem}
.work-filter{
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-300);background:rgba(26,32,39,.6);border:1px solid var(--steel-700);border-radius:4px;
  padding:.5rem .9rem;cursor:pointer;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s;
}
.work-filter:hover{color:var(--ice);border-color:var(--steel-500)}
.work-filter[aria-pressed="true"]{color:var(--arc-core);border-color:var(--blue);background:rgba(46,107,240,.12);box-shadow:0 0 16px -8px rgba(46,107,240,.6)}

/* ---- Featured weld (full-bleed, the differentiator up top) ---- */
.featured-weld{position:relative;margin-top:1.4rem;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.featured-weld a{display:block}
.featured-weld img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
.featured-weld a:hover img,.featured-weld a:focus-visible img{transform:scale(1.02)}
.featured-weld::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,11,15,.82),rgba(8,11,15,.25) 46%,transparent 72%)}
.featured-weld__panel{position:absolute;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:2;max-width:34rem;padding:1.1rem 1.35rem 1.2rem;border-radius:16px;--glass-tint:46,107,240}
.featured-weld__eyebrow{margin:0 0 .3rem;font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright)}
.featured-weld__title{margin:0 0 .5rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--ice)}
.featured-weld__note{margin:0 0 .75rem;color:var(--steel-300);font-size:1rem;max-width:44ch}
.featured-weld__spec{display:flex;flex-wrap:wrap;gap:.45rem}
.spec-chip{font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-300);border:1px solid var(--steel-700);border-radius:3px;padding:.32rem .6rem;background:rgba(11,14,17,.5)}
.spec-chip b{color:var(--blue-bright);font-weight:600}

/* ---- Case grid + glass cards + slide-up spec overlay ---- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.4rem}
.work-card{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);text-decoration:none;isolation:isolate;
  content-visibility:auto;contain-intrinsic-size:auto 420px}  /* AWE R2: skip offscreen paint on the GPU-heavy glass cards — keeps scroll 60fps */
.work-card > img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.work-card:hover > img,.work-card:focus-visible > img{transform:scale(1.045)}
.work-card:hover,.work-card:focus-visible{border-color:var(--blue);box-shadow:0 0 26px -10px rgba(46,107,240,.45)}
.work-card__tag{position:absolute;top:.7rem;left:.7rem;z-index:3;font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--arc-core);background:rgba(11,14,17,.66);border:1px solid rgba(46,107,240,.5);border-radius:3px;padding:.28rem .55rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.work-card__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem .9rem .8rem;background:linear-gradient(180deg,transparent,rgba(8,11,15,.92));transition:opacity .3s}
.work-card__cap b{display:block;color:var(--ice);font-weight:600;font-size:1rem;margin-bottom:.1rem}
.work-card__cap span{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-300)}
.work-card__overlay{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:.9rem 1rem 1rem;border-radius:12px 12px 0 0;transform:translateY(101%);transition:transform .34s var(--ease-out);--glass-tint:46,107,240}
.work-card:hover .work-card__overlay,.work-card:focus-within .work-card__overlay{transform:translateY(0)}
.work-card:hover .work-card__cap,.work-card:focus-within .work-card__cap{opacity:0}
.work-card__overlay b{display:block;color:var(--ice);font-weight:600;font-size:1rem;margin-bottom:.4rem}
.work-card__rows{display:grid;gap:.02rem}
.work-card__rows > div{display:flex;justify-content:space-between;gap:.8rem;border-top:1px solid rgba(255,255,255,.09);padding:.26rem 0 .04rem}
.work-card__rows dt{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.work-card__rows dd{margin:0;font-family:var(--font-mono);font-size:.9rem;font-weight:500;color:var(--ice)}
.work-card[hidden]{display:none}
.work-empty{margin-top:1.4rem;color:var(--muted)}

/* ---- Trust strip under the featured weld ---- */
.work-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.3rem}
.work-trust .tw{padding:1.05rem 1.2rem;border-radius:12px}
.work-trust .tw b{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--ice);letter-spacing:.01em}
.work-trust .tw span{display:block;margin-top:.35rem;font-family:var(--font-mono);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.work-grid{grid-template-columns:1fr 1fr}.work-trust{grid-template-columns:1fr}}
/* Featured weld: below 720px the overlaid glass panel can't fit over the image —
   stack it BELOW the photo as a solid info block (no clip/overflow). */
@media (max-width:720px){
  .featured-weld img{aspect-ratio:4/3}
  .featured-weld::after{display:none}
  .featured-weld__panel{position:static;left:auto;right:auto;bottom:auto;max-width:none;border-radius:0}
}
@media (max-width:520px){.work-grid{grid-template-columns:1fr 1fr;gap:.7rem}.work-card__overlay{padding:.7rem .75rem .8rem}}

/* Mobile legibility: the hero spec card + CTA islands set their own (semi-transparent)
   backgrounds, which would otherwise override the <780px glass fallback and leave them
   see-through WITHOUT backdrop-blur (unblurred photo showing through). Force near-solid
   here so text stays legible on phones. Placed last so it wins the cascade. */
@media (max-width:780px){
  .hero__spec{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 16%),rgba(13,17,23,.96)}
  .cta-island{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 12%),rgba(16,21,29,.96)}
}
/* 2026-07-28: on phones, panels must NOT block the photos. The hero photo and the
   "root pass" band photo now show CLEAN, their text stacking BELOW as solid blocks — the
   stack-below pattern proven on .featured-weld__panel at ≤720. Desktop overlays unchanged. */
@media (max-width:720px){
  .hero__panel{min-height:0}
  .hero__panel img{position:static;height:auto;aspect-ratio:4/3;object-fit:cover}
  .hero__panel .heat-shimmer{display:none}
  .hero__panel::before{background:linear-gradient(180deg,rgba(11,14,17,.32),transparent 30%)}
  .hero__spec{position:relative;z-index:2;left:auto;right:auto;bottom:auto;width:auto;margin:.7rem .8rem .95rem}
  .band{min-height:0;display:block}
  .band img{position:static;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
  .band::before{display:none}
  .band__inner{padding:1.7rem 0 2.1rem}
  .band .h-2,.band .lede,.band .eyebrow{text-shadow:none}
}
/* The featured glass panel floats OVER the photo on desktop — it must never eat the photo's
   clicks (confirmed: the image center was click-dead; the <a data-full> sits underneath).
   No interactive children live inside the panel, so pass pointer events through. */
@media (min-width:721px){
  .featured-weld__panel{pointer-events:none}
}
/* No pointer sweep for reduced-motion users; the baked sheen still reads. */
@media (prefers-reduced-motion:reduce){
  .hero__spec,.cta-island{transition:none}
}

/* ============================================================
   THE DRAWING SET — engineering drawing-set identity.
   A fixed drafting sheet frame + coordinate ruler, a site-wide
   blueprint grid substrate, dimension-line dividers that MEASURE
   the honest facts, a real title block, and stencil/stamped type.
   All floor-safe (≥14px), reduced-motion static, JS-off intact.
   ============================================================ */

/* — Site-wide blueprint grid substrate: faint cyan gridlines behind the whole
     sheet. Opaque panels/photos cover it; transparent sections let it show. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(92,147,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,147,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(92,147,255,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,147,255,.085) 1px,transparent 1px);
  background-size:38px 38px,38px 38px,190px 190px,190px 190px;
}

/* — Stencil / stamped-part treatment: a hair of engraved depth on labels. */
.stencil{text-shadow:0 1px 0 rgba(4,8,14,.55)}

/* — Fixed drafting SHEET FRAME + corner registration marks + coordinate ruler
     + left-margin zone letters (wide screens). A desktop flourish; the frame
     hides on phones (where it would crowd the fixed contact bar). */
.sheet-frame{position:fixed;inset:16px;z-index:75;pointer-events:none;
  border:1px solid rgba(124,219,255,.18);border-radius:3px}
.sf-c{position:absolute;width:13px;height:13px}
.sf-tl{top:-1px;left:-1px;border-top:2px solid rgba(124,219,255,.55);border-left:2px solid rgba(124,219,255,.55)}
.sf-tr{top:-1px;right:-1px;border-top:2px solid rgba(124,219,255,.55);border-right:2px solid rgba(124,219,255,.55)}
.sf-bl{bottom:-1px;left:-1px;border-bottom:2px solid rgba(124,219,255,.55);border-left:2px solid rgba(124,219,255,.55)}
.sf-br{bottom:-1px;right:-1px;border-bottom:2px solid rgba(124,219,255,.55);border-right:2px solid rgba(124,219,255,.55)}
.sf-ruler{position:absolute;opacity:.72}
.sf-ruler--top{top:0;left:14px;right:14px;height:5px;
  background-image:repeating-linear-gradient(90deg,rgba(124,219,255,.30) 0 1px,transparent 1px 64px)}
.sf-ruler--left{top:14px;left:0;bottom:14px;width:5px;
  background-image:repeating-linear-gradient(180deg,rgba(124,219,255,.30) 0 1px,transparent 1px 64px)}
.sf-zones{position:absolute;display:none;font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.14em;color:rgba(124,219,255,.68)}
.sf-zones--left{left:8px;top:16%;bottom:16%;flex-direction:column;justify-content:space-between;align-items:center}
@media (min-width:1340px){.sf-zones--left{display:flex}}
@media (max-width:780px){.sheet-frame{display:none}}
/* R13: cross-document View Transitions — page navs flip like turning sheets in one drawing
   set. Supporting engines animate a root crossfade with the fixed sheet-frame held stable
   under its own name; everything else navigates instantly (pure progressive enhancement). */
@view-transition{navigation:auto}
.sheet-frame{view-transition-name:sheet-frame}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* — DIMENSION-LINE divider: the honest facts, measured. Extension ticks +
     arrowed rules + a stencil value between them. Replaces the plain seams. */
.dimline{max-width:var(--wrap);margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) clamp(1.1rem,4vw,2rem);
  display:flex;align-items:center;gap:.9rem}
.dimline__tick{flex:none;width:1px;height:15px;background:var(--blue-bright);opacity:.7}
.dimline__rule{flex:1;height:1px;position:relative;opacity:.8;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue) 55%,var(--blue-bright))}
.dimline__rule::before{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:var(--blue-bright)}
.dimline__rule--r{background:linear-gradient(90deg,var(--blue-bright),var(--blue) 45%,var(--blue-deep))}
.dimline__rule--r::before{left:auto;right:0;border-right-color:transparent;border-left-color:var(--blue-bright)}
.dimline__val{flex:none;font-family:var(--font-mono);font-size:15px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}
@media (max-width:520px){.dimline__val{letter-spacing:.12em;font-size:15px}}
/* 2026-08-07 (cross-platform sweep) - NARROW-PHONE OVERFLOW FIX.
   .dimline__val was flex:none + white-space:nowrap, so the stencil value could neither
   shrink nor wrap. That gave .dimline a hard min width of ~363px and pushed the whole
   document wider than the screen below 375px: 3px at 360, 43px at 320, 83px at 280.
   360px is one of the most common Android widths in the world, so this was a real
   defect, not a rounding artifact. Tighten tracking + gaps and let the value shrink
   (wrap is a safety valve that, measured, never actually triggers - the value still
   sets on ONE line from 280px up). Type floor untouched: font-size stays 15px, well
   clear of the 14px minimum. */
@media (max-width:420px){
  .dimline{gap:.45rem;padding-left:.8rem;padding-right:.8rem}
  .dimline__val{flex:0 1 auto;min-width:0;white-space:normal;text-align:center;letter-spacing:.06em}
}

/* (The footer TITLE BLOCK was removed in V2 — the DWG/SHEET panel was cut.
   The rest of the drawing-set language stays: sheet frame, dimension dividers, grid,
   detail balloons.) */

/* Quote-form safety net — shown only when the visitor's mail app never opened (2026-08-05).
   16px base keeps it over the 14px floor. */
.qf-fallback{margin-top:1.1rem;padding:1rem 1.15rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(28,77,143,.14)}
.qf-fallback[hidden]{display:none}
.qf-fallback p{margin:0 0 .6rem;font-size:1rem;line-height:1.55}
.qf-fallback__lines a{display:inline-block;font-size:1.05rem;font-weight:600;
  color:var(--arc-core,#7FB2FF);text-decoration:none;padding:.15rem 0;min-height:44px;line-height:44px}
.qf-fallback__lines a:hover{text-decoration:underline}
.qf-fallback [data-qf-copy]{min-height:44px}