/* ============================================
   Weld Plus — Design Tokens
   ============================================ */
:root{
  --bg:#FDFCFC;
  --bg-alt:#f4f4f4;
  --bg-raised:#ffffff;
  --bg-hover:#f1f2f6;
  --line:#d1d1d1;
  --line-soft:#e2e2e2;
  --card-line:#d1d1d1;
  --photo-frame:#eeeeee;
  --text:#000000;
  --text-dim:#4f4f4f;
  --text-faint:#63676d;
  --text-on-dark-dim:#b9b9b9;
  --text-on-dark-faint:#d1d1d1;
  --accent:#ff2828;
  --accent-dim:#e01414;
  --accent-hover:#ff5252;
  --blue:#2b7fa3;
  --dark:#191818;
  --header-bg:#ffffff;

  --font-display:'Oswald', sans-serif;
  --font-body:'Public Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --container:1200px;
  --frame-x:calc(50% - (var(--container) / 2));
  /* Three insets from the vertical rails, straight off Figma:
     44px for text (1112 content), 25px for card rows (1150) and
     35px for full panels (1130). Card and panel blocks bleed back
     out of the text gutter with a negative margin, so nothing needs
     a second wrapper. */
  --gutter:clamp(20px, 5vw, 44px);
  --gutter-card:clamp(16px, 4.2vw, 25px);
  --gutter-panel:clamp(18px, 4.6vw, 35px);
  --line-w:.8px;
  --dot-size:2px;
  --dot-color:#000000;
  --radius:12px;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-panel:12px;
  --ease:cubic-bezier(.25,.8,.35,1);
  /* Motion tokens measured off elevenlabs.io: 0.15s for hover and
     state changes (their dominant interaction, on 92 elements) and
     0.3s for opacity/transform, both on the same standard curve. */
  --t-fast:.15s;
  --t-base:.3s;
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --ease-fluid:cubic-bezier(.16,1,.3,1);
  /* Gentle in and out — nothing lurches at either end of the travel. */
  --ease-morph:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* iOS Safari inflates text per block container, scaled to that block's
   width against the viewport. The filter trigger sits in a full-width
   row and got boosted; the dropdown panel is a hard 197px and did not,
   so two elements authored at the same size rendered differently on a
   real phone (and identically in desktop device emulation, which does
   not run the algorithm). Opting out keeps the authored sizes. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

/* ------------------------------------------------------------------
   Text balance. Body copy is balanced so no line is left with one or
   two hanging words; headings keep their own deliberate line breaks.
   Chrome stops balancing past 6 lines, so the few long paragraphs
   that exceed it are fixed in the markup with non-breaking spaces
   binding their last words together.
   ------------------------------------------------------------------ */
p,li,figcaption,dd,
.desc,.work-desc,.work-sub,.work-heading-desc,
.cwb-head-desc,.ab-proj-desc,.eng-copy p,
.service-card-lg-text p,.wwd-card-body p,.pj-card p,
.svc-chip,.field-hint,.form-note{
  text-wrap:balance;
}
/* Headings too: a long title left one or two words stranded on the
   last line. balance never overrides an explicit <br>, so the titles
   that carry deliberate breaks are untouched. */
h1,h2,h3,h4,h5,h6{text-wrap:balance;}

/* Section subtitles are right-aligned against the rail, and balance
   shortens every line to equalise them — it left up to 127px of slack
   between the longest line and the rail, so the copy read as shifted
   off the right edge. pretty only guards the last line, so these fill
   their measure again (slack back to the normal ~25px rag). The
   three-word tails bound in the markup still hold. */
.section-head .desc,.wwd-head-desc,.cwb-head-desc,
.work-heading-desc,.svc-head-desc{
  text-wrap:pretty;
}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:normal;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}

::selection{background:var(--accent);color:var(--dark);}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
/* Card rows sit 25px off the rails, panels 35px — both wider than the
   44px text column they share a .wrap with. */
.wwd-cards,
.svc-track-window,
.work-stage,
.svc-cards,
.pj-row,
.ab-latest-grid{margin-inline:calc(var(--gutter-card) - var(--gutter));}
.careers-cluster,
.cwb-panel,
.ab-careers-row{margin-inline:calc(var(--gutter-panel) - var(--gutter));}

/* ============================================
   Header — floating white rounded bar, matched to
   Figma's header component: a rounded-12 white
   surface inset from the page edges, sticky at the
   top of every page (utility bar removed — phone
   number now lives in the footer only).
   ============================================ */
/* Fixed, not sticky: a sticky header reserves its own height in the
   flow, which pushed the full-bleed heroes down and left a white band
   above them. Fixed lifts it out so the hero starts at the very top of
   the viewport and the bar floats over it. */
/* The bar itself is the full 1200px container — it is not inset by the
   text gutter (972:183). Padding it in made the nav cramped and the
   20px type read oversized. */
/* A full-bleed white bar pinned to the top (1056:132), not a floating
   pill: 8px of padding around the 51px button gives the 67.8px height,
   and the hairline is the bar's own bottom border. */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  max-width:none;margin:0;
  padding:8px 0;
  background:#fff;border-bottom:.8px solid var(--line);
  transition:transform var(--t-base) var(--ease-ui);
}
/* Pages open below the floating header; the full-bleed heroes pull
   back up under it. */
main{padding-top:68px;}
.hero,.svc-hero{margin-top:-68px;}
/* Three separate floating elements, not one bar (1023:422): the logo
   sits bare on the left, the white pill holds only the links, and the
   red button stands alone on the right. */
/* The bar spans the viewport; its contents stop at the 1200 container. */
header.site-header .wrap{
  background:none;border:0;box-shadow:none;
  max-width:var(--container);margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  height:51px;padding-top:0;padding-bottom:0;
}
/* Scrolling down takes the whole bar with it; scrolling up brings the
   full bar back. There is no condensed logo-and-button state — it had
   no background of its own and collided with the copy underneath. */
header.site-header.is-condensed{transform:translateY(-100%);}
@media (prefers-reduced-motion: reduce){
  nav.main-nav{transition:none;}
}

.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.02em;
}
/* Wordmark at its native 40px height inside the 51px bar; the text
   lockup only appears if the image is missing, so the header never
   looks broken. */
.logo-img{height:40px;width:auto;display:block;}
/* Smaller lockup in the footer. */
.footer-logo{display:inline-flex;margin-bottom:16px;}
.footer-logo .logo-img{height:34px;}
.logo-fallback{display:none;align-items:baseline;gap:10px;}
.logo-img[data-missing] + .logo-fallback{display:flex;}
.logo-img[data-missing]{display:none;}
.logo .mark{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.95rem;
  border:1px solid var(--accent);
  padding:2px 6px;
  line-height:1;
}
.logo .sub{
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--text-faint);
  letter-spacing:.08em;
  text-transform:uppercase;
  display:block;
}
.logo-text{display:flex;flex-direction:column;line-height:1.15;}

/* Nav is Public Sans 20 in sentence case now, not uppercase mono
   (972:186). Contact has moved into the Request a Quote button. */
/* The nav IS the white pill: 51px tall, 57px of inner padding either
   side of the links (1023:423/1023:424). */
/* The bar itself is now the white surface, so the nav carries no fill,
   border or shadow of its own — just the links (1056:132). It keeps the
   51px height so the flyouts have a full-height box to hang from. */
nav.main-nav{
  display:flex;align-items:stretch;flex:none;
  background:none;border:0;border-radius:0;box-shadow:none;
  height:51px;padding:0;
}
nav.main-nav ul{display:flex;gap:28px;align-items:stretch;}
nav.main-nav li{position:relative;display:flex;align-items:center;}
/* 16px / -0.64px tracking (1023:424). The old 4px bottom padding was
   there to seat the underline; with that gone it only pushed the text
   off-centre in the pill. */
nav.main-nav a.nav-link{
  position:relative;display:block;
  font-family:var(--font-body);font-weight:400;
  font-size:1rem;line-height:1.1;letter-spacing:-.04em;
  text-transform:none;
  color:var(--text);
  transition:color var(--t-fast) var(--ease-ui);
}
/* No underline — hover and current page are signalled by colour alone. */
nav.main-nav a.nav-link:hover{color:var(--accent);}
nav.main-nav a.nav-link.active{color:var(--accent);}

/* ---- Hover flyouts (972:255 / 972:180) --------------------------
   The panel hangs from the <li>, and a transparent 10px bridge sits
   between trigger and panel so the pointer can cross the gap without
   the menu closing under it. */
/* The <li> now stretches to the bar's content box, so its bottom sits
   exactly the wrap's 14px bottom padding above the header edge. 14 + 10
   puts the panel the requested 10px clear of the header. */
.has-flyout .nav-flyout{
  position:absolute;top:calc(100% + 10px);left:-32px;
  background:#fff;border:.8px solid var(--card-line);
  border-radius:var(--radius-md);
  box-shadow:0 1px 2px rgba(0,0,0,.1), 0 12px 32px rgba(0,0,0,.10);
  padding:32px;width:327px;
  display:flex;flex-direction:column;gap:28px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:20;
}
.has-flyout .nav-flyout-wide{width:395px;}
.has-flyout .nav-flyout::before{
  content:'';position:absolute;left:0;right:0;top:-10px;height:10px;
}
.has-flyout:hover .nav-flyout,
.has-flyout:focus-within .nav-flyout{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-fly-group{display:flex;flex-direction:column;gap:16px;}
.nav-fly-label{
  font-family:var(--font-body);font-weight:400;
  font-size:1rem;line-height:1.1;letter-spacing:-.04em;color:var(--text-dim);
}
.nav-fly-items{display:flex;flex-direction:column;gap:12px;}
.nav-flyout:not(.nav-flyout-wide) .nav-fly-items{gap:16px;}
.nav-fly-item{display:flex;flex-direction:column;gap:6px;}
.nav-fly-title{
  font-family:var(--font-body);font-weight:500;
  font-size:1rem;line-height:1.1;letter-spacing:-.04em;
  color:var(--text);transition:color var(--t-fast) var(--ease-ui);
}
.nav-fly-desc{
  font-family:var(--font-body);font-weight:500;
  font-size:.75rem;line-height:1.1;letter-spacing:-.04em;color:var(--text-dim);
}
.nav-fly-item:hover .nav-fly-title{color:var(--accent);}

.nav-cta{display:flex;align-items:center;gap:20px;}
.menu-toggle{
  display:none;background:none;border:1px solid var(--line);
  width:42px;height:42px;align-items:center;justify-content:center;color:var(--text);
}

/* ============================================
   Buttons — matched to Figma: solid-fill primary,
   white bordered secondary, sentence case, 16px
   Public Sans Medium, -1% tracking, 12px radius.
   ============================================ */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:1rem;
  letter-spacing:-.01em;line-height:1.2;
  text-transform:none;
  height:51px;padding:16px 28px;
  border:.8px solid var(--line);
  border-radius:var(--radius);
  isolation:isolate;
  transition:color var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui), background-color var(--t-fast) var(--ease-ui);
  white-space:nowrap;
}
.btn .label{display:inline-block;transition:transform var(--t-base) var(--ease-ui);}
.btn:hover .label{transform:none;}   /* the slide only made room for the dot */
/* The hover dot is retired. Hidden here rather than stripped from the
   markup, which would mean editing the same span across five pages. */
.btn .spark{display:none;}

.btn-primary{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
/* Paler on hover, not darker: --accent-dim is #e01414 and is still
   used as a border on the carousel panel, so this is its own token. */
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-ghost{
  background:var(--bg-raised);color:var(--text);border-color:var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent);}

.btn-arrow{transition:transform var(--t-base) var(--ease-ui);}
.btn:hover .btn-arrow{transform:translateX(4px);}

/* ============================================
   Hero — full-bleed photo background
   ============================================ */
.hero{
  position:relative;
  z-index:1;
  overflow:hidden;
  height:100vh;
}
.hero-content{
  position:absolute;left:0;right:0;bottom:clamp(64px,9vw,110px);z-index:1;
}
.hero-content > .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{
  width:100%;height:130%;object-fit:cover;display:block;
  will-change:transform;
  opacity:0;animation:heroPhotoIn 1.3s var(--ease-fluid) forwards;animation-delay:.1s;
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(115deg, rgba(10,12,14,.6) 0%, rgba(10,12,14,.38) 40%, rgba(10,12,14,.16) 72%, rgba(10,12,14,.05) 100%),
    linear-gradient(0deg, rgba(10,12,14,.32) 0%, rgba(10,12,14,0) 45%);
}
.hero .wrap{position:relative;z-index:1;}
.eyebrow{
  font-family:var(--font-mono);font-weight:500;
  font-size:.625rem;
  letter-spacing:normal;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:10px;
  margin-bottom:20px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);}

.hero-eyebrows{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--text-on-dark-faint);
  margin-bottom:16px;
}
.hero-dot{width:3px;height:3px;border-radius:50%;background:var(--text-on-dark-faint);flex-shrink:0;}

/* Inner content block, capped for readability. It sits inside the
   standard centered .wrap (same one the header uses), so its left
   edge lines up exactly with the logo/nav above it at any viewport
   width — no custom centering or edge-pinning needed here. */
.hero-layout{max-width:640px;}
.hero h1{
  color:#fff;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.1rem, 4vw, 3rem);
  line-height:1.2;letter-spacing:-.06em;
  text-transform:uppercase;
  margin-bottom:24px;
  max-width:22ch;
  text-wrap:balance;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero .lede{
  font-family:var(--font-body);font-weight:500;
  font-size:1.125rem;line-height:1.4;
  color:#fff;
  max-width:46ch;
  margin-bottom:24px;
  text-shadow:0 2px 16px rgba(0,0,0,.3);
}
.hero-ctas{display:flex;gap:23px;flex-wrap:wrap;margin-bottom:60px;}
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none;}
.hero .btn-ghost:hover{color:var(--accent);border-color:var(--accent);}

.stat-row{display:flex;gap:clamp(28px,4vw,54px);flex-wrap:wrap;}
.stat{font-family:var(--font-mono);}
.stat .num{
  font-family:var(--font-display);font-weight:400;
  font-size:1.9rem;letter-spacing:-.06em;
  color:var(--text);
  display:block;
}
.stat .label{
  font-size:.625rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.02em;
}
/* Hero stats sit on the dark photo scrim and need light text — scoped
   here so other stat strips (e.g. "Why Weld Plus") keep normal dark text. */
.hero .stat .num{color:#fff;font-size:2.5rem;text-shadow:0 2px 12px rgba(0,0,0,.3);}
.hero .stat .label{color:var(--text-on-dark-faint);}

/* "Scroll" sits on the same baseline row as the stat labels
   (Figma puts it in an items-end / justify-between row beside
   the whole left column), so it lines up with the last line
   of text on screen rather than floating below it. */
.scroll-cue{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-weight:600;font-size:.875rem;
  color:var(--text-on-dark-faint);
  text-transform:uppercase;letter-spacing:-.01em;
  flex-shrink:0;
}
.scroll-cue svg{animation:bob 1.8s ease-in-out infinite;}
/* Desktop has no scroll indicator; the mobile red button stays. */
@media (min-width:641px){.scroll-cue{display:none;}}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
@keyframes heroPhotoIn{to{opacity:1;}}


/* ============================================
   Page frame — matched to the Figma grid exactly.

   Figma draws the grid as SEGMENTS, not continuous
   rules: at every intersection there is a 2x2px black
   dot with an 8px gap of empty space on all four sides
   before any line resumes. Lines are 0.8px #d1d1d1.

   So each section paints its own pieces:
     ::before → the two vertical rails, inset 9px from
                the section's top and bottom so the gap
                appears above and below each dot.
     ::after  → the horizontal rule at the section's
                bottom edge, composed of five background
                layers: the outer stub either side of the
                page, the centre rule between the rails,
                and the two dots themselves.
   Every offset below derives from --container/2 (600px),
   which is where the rails sit.
   ============================================ */
main{position:relative;}

.section,.page-hero{position:relative;}

/* Vertical rails, broken 9px short at each end. */
.section::before,
.page-hero::before{
  content:'';position:absolute;top:9px;bottom:9px;left:0;right:0;
  background-image:
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line));
  background-repeat:no-repeat;
  background-size:var(--line-w) 100%, var(--line-w) 100%;
  background-position:
    calc(50% - (var(--container) / 2)) center,
    calc(50% + (var(--container) / 2)) center;
  z-index:0;pointer-events:none;
}
/* Blocks that butt straight against a hero have no dot above them, so
   their rails start flush. (:first-of-type can't be used here — it
   matches by element type, and the heroes are <section> too.) */
.wwd-section::before,
main > .page-hero::before{top:0;}

/* Horizontal rule + its two intersection dots. */
.section::after,
.page-hero::after,
.grid-rule{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background-image:
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--dot-color),var(--dot-color)),
    linear-gradient(var(--dot-color),var(--dot-color));
  background-repeat:no-repeat;
  background-size:
    max(0px, calc(50% - (var(--container) / 2) - 9px)) var(--line-w),
    min(calc(var(--container) - 18px), 100%) var(--line-w),
    max(0px, calc(50% - (var(--container) / 2) - 9px)) var(--line-w),
    var(--dot-size) var(--dot-size),
    var(--dot-size) var(--dot-size);
  background-position:
    left center, center center, right center,
    calc(50% - (var(--container) / 2)) center,
    calc(50% + (var(--container) / 2)) center;
  z-index:2;pointer-events:none;
}
/* Standalone rule used inside a section (e.g. under the certs title). */
.grid-rule{position:relative;bottom:auto;}

/* ONLY the engineering rows: these are the sections a centre rail
   actually crosses, so the rule breaks 9px either side of a dot there.
   Every other rule on the site stays unbroken end to end — a centre
   dot on a rule with no rail behind it has nothing to intersect.
   Two 582px halves either side of centre (Figma 920:2215); the
   +/- container/4 offsets put each half's left edge 9px clear of the
   midpoint. */
.eng-head-section::after,
.eng-row::after{
  background-image:
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--dot-color),var(--dot-color)),
    linear-gradient(var(--dot-color),var(--dot-color)),
    linear-gradient(var(--dot-color),var(--dot-color));
  background-size:
    max(0px, calc(50% - (var(--container) / 2) - 9px)) var(--line-w),
    max(0px, calc(var(--container) / 2 - 18px)) var(--line-w),
    max(0px, calc(var(--container) / 2 - 18px)) var(--line-w),
    max(0px, calc(50% - (var(--container) / 2) - 9px)) var(--line-w),
    var(--dot-size) var(--dot-size),
    var(--dot-size) var(--dot-size),
    var(--dot-size) var(--dot-size);
  background-position:
    left center,
    calc(50% - (var(--container) / 4)) center,
    calc(50% + (var(--container) / 4)) center,
    right center,
    calc(50% - (var(--container) / 2)) center,
    calc(50% + (var(--container) / 2)) center,
    center center;
}

.frame-dot{display:none;}

@media (max-width:1260px){
  .section::before,.section::after,
  .page-hero::before,.page-hero::after,
  .grid-rule{display:none;}
  .section,.page-hero{border-bottom:var(--line-w) solid var(--line);}
}

/* ============================================
   Sections generic — Figma's rhythm is a 120px gap
   from the rule above and a 35px gap to the rule
   below, on every section.
   ============================================ */
.section{padding-top:120px;padding-bottom:35px;}
.section.has-inner-frame::after{display:none;}
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:76px;
}
.section-head h2{font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;max-width:20ch;text-transform:uppercase;text-wrap:balance;font-weight:400;}
.section-head .desc{color:var(--text-dim);font-family:var(--font-body);font-weight:500;font-size:1.125rem;line-height:1.4;max-width:40ch;justify-self:end;}
.section-head-side{
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  justify-self:end;max-width:40ch;
}
.section-tag{
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:normal;line-height:1.1;margin-bottom:16px;display:block;
}

.bg-alt{background:var(--bg-alt);}

/* reveal on scroll */
.reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity 250ms var(--ease-ui), transform 250ms var(--ease-ui);
}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 25ms);}

/* ============================================
   Corner-bracket card decoration
   ============================================ */
.bracket-card{position:relative;border:1px solid var(--line);background:var(--bg-alt);transition:border-color var(--t-fast) var(--ease-ui), transform var(--t-base) var(--ease-ui);}
.bracket-card::before,.bracket-card::after{
  content:'';position:absolute;width:12px;height:12px;
  border-color:var(--accent);opacity:0;transition:opacity var(--t-base) var(--ease-ui);
}
.bracket-card::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;}
.bracket-card::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;}
.bracket-card:hover{transform:translateY(-4px);border-color:var(--line);}
.bracket-card:hover::before,.bracket-card:hover::after{opacity:1;}

/* ============================================
   Services grid — matched to Figma node 571-904:
   full-bleed 595:797 photo card, dark bottom-scrim,
   title + description overlaid bottom-left, orange
   60px arrow button fades/slides in on hover only.
   ============================================ */
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}

/* Production services carousel — four cards on a three-wide track.
   The window clips at the wrap's content edge; the arrows live
   outside it, 16px clear of the vertical grid rails (Figma 893:1455).
   The track is duplicated in JS so the loop never visibly rewinds. */
.svc-carousel{position:relative;}
.svc-track-window{overflow:hidden;}
.svc-track{
  display:flex;gap:20px;
  will-change:transform;
  transition:transform .9s cubic-bezier(.4,0,.2,1);
}
.svc-track.no-anim{transition:none;}
.svc-track > .service-card-lg{flex:0 0 calc((100% - 40px) / 3);}

.svc-car-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:8px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  color:#000;cursor:pointer;z-index:3;
  transition:background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.svc-car-btn:hover{background:#000;border-color:#000;color:#fff;}
.svc-car-btn:active{background:#2e2e2e;border-color:#2e2e2e;}
/* max() keeps the buttons on-screen once the viewport is too narrow
   to seat them outside the rails. */
.svc-car-btn.prev{left:max(8px, calc(50% - (var(--container) / 2) - 50px));}
.svc-car-btn.next{right:max(8px, calc(50% - (var(--container) / 2) - 50px));}

/* Hairline frame, not the old 4px #eee slab that read as white arcs. */
.service-card-lg{
  display:block;position:relative;overflow:hidden;border-radius:var(--radius-md);
  /* .svc-photo-blur carries filter:blur(), which promotes it to its own
     composited layer, and iOS Safari clips composited descendants to the
     square border box — 14px of the overhanging blur copy survived at the
     bottom corners. clip-path IS honoured for composited descendants. */
  clip-path:inset(0 round var(--radius-md));
  border:.8px solid var(--card-line);
  aspect-ratio:370/496;
  container-type:inline-size;container-name:svc-card;
}
.service-card-lg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-base) var(--ease-ui);
}
.service-card-lg:hover img{transform:scale(1.05);}
/* Placeholder until the real photo lands. */
.service-card-lg .photo-needed{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);color:var(--text-dim);
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
}
/* Figma's gradient (747:1349) sits inside the content block so it
   always clears the text, however many lines the title runs to. */
/* The blur is a second copy of the photo, NOT backdrop-filter.
   backdrop-filter samples everything painted behind the element,
   including the near-white page outside the card, so its kernel drags
   that page colour inward at the clipped corners — those were the pale
   corners, and no amount of rounding the overlay fixes it because the
   sampling isn't bounded by the overlay.
   This copy is inset -14px so it overhangs the card on every side: the
   4px kernel therefore always has real image pixels to read, even in
   the corners, and the card's overflow:hidden trims the overhang. */
.service-card-lg .svc-photo-blur{
  inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);
  filter:blur(4px);pointer-events:none;
  /* Stops scaled to 0.7 of the original 20/29/38: the band is 30%
     shorter and therefore sits lower, closer to the text. */
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 14%,rgba(0,0,0,.5) 20%,transparent 27%);
          mask-image:linear-gradient(to top,#000 0%,#000 14%,rgba(0,0,0,.5) 20%,transparent 27%);
}
/* Figma's gradient (747:1349), ending fully opaque so the bottom
   corners are solid black rather than a washed-out photo edge. */
.service-card-lg-scrim{
  position:absolute;left:0;right:0;bottom:0;height:29%;   /* was 36% */
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(55,55,55,.6) 50%,
    rgba(0,0,0,.7) 75%,
    rgba(0,0,0,1) 100%);
}
/* Sizes below are all keyed to the card's own width (container query
   units), matching the Figma ratios at its 595px reference card —
   NOT viewport width. The card is one of 3 columns inside a 1200px
   max wrap, so its real rendered width (~300-350px on desktop) is
   much narrower than the viewport; vw-based sizing was oversizing
   and wrapping the text. */
.service-card-lg-content{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 24px 24px;
}
.service-card-lg-text{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:10px;color:#fff;
}
.service-card-lg-text h3{
  font-family:var(--font-body);font-weight:500;
  font-size:1.5rem;line-height:1.1;letter-spacing:-.04em;
  margin:0;
}
/* Three reserved lines hold every card's title on one shared
   horizontal line, while the longest description still clears
   the card's 24px bottom padding. */
.service-card-lg-text p{
  font-family:var(--font-body);font-weight:400;
  font-size:.875rem;line-height:1.2;letter-spacing:normal;
  margin:0;min-height:calc(3 * 1.2 * .875rem);
}
/* Arrow sits in the top-right corner, revealed on hover. */
.service-card-lg-arrow{
  position:absolute;right:20px;top:20px;
  width:52px;height:52px;border-radius:12px;
  background:var(--accent);border:1px solid var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-8px) scale(.92);
  transition:opacity var(--t-base) var(--ease-ui), transform var(--t-base) var(--ease-ui);
}
.service-card-lg:hover .service-card-lg-arrow{opacity:1;transform:translateY(0) scale(1);}

/* Fewer cards in view as the track narrows — the JS reads the real
   card width, so stepping stays correct at every breakpoint. */
@media (max-width:900px){
  .service-card-lg{aspect-ratio:4/5;}
  .svc-track > .service-card-lg{flex:0 0 calc((100% - 20px) / 2);}
}
@media (max-width:620px){
  .svc-track > .service-card-lg{flex:0 0 100%;}
}

/* ============================================
   Engineering services (Figma 934:134)
   Heading block, then three 50/50 rows. Copy sits left of the
   centre rail; the right half is reserved for imagery still to
   come, so it is deliberately left empty.
   ============================================ */
/* The shared .section-head already carries a 76px bottom margin for
   the card rows that normally follow it. Here the button follows
   instead, so drop that and use Figma's 32px on its own. */
.eng-head-section .section-head{margin-bottom:0;}
.eng-cta{margin-top:32px;}
/* 60px clear of the rule above and below, with the row hugging its
   content so that spacing stays exact rather than being padded out
   to a fixed height. */
.eng-row{padding-top:60px;padding-bottom:60px;}
.eng-mid-rail{
  position:absolute;top:9px;bottom:9px;left:50%;
  width:var(--line-w);background:var(--line);
  z-index:0;pointer-events:none;
}
.eng-row-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;align-items:center;position:relative;z-index:1;
}
.eng-copy{display:flex;flex-direction:column;gap:32px;max-width:446px;}
.eng-lead,.eng-point{display:flex;flex-direction:column;gap:10px;}
.eng-points{display:flex;flex-direction:column;gap:24px;}
.eng-copy h3,.eng-copy h4{
  font-family:var(--font-body);font-weight:500;
  font-size:1.25rem;line-height:1.1;letter-spacing:-.04em;
  color:var(--text);margin:0;text-transform:none;
}
.eng-copy p{
  font-family:var(--font-body);font-weight:500;
  font-size:1.125rem;line-height:1.4;color:var(--text-dim);margin:0;
}
/* Artwork fills the right half of the row, centred and contained so
   the drawings keep their own proportions whatever the row height. */
/* Padded on both sides — the architectural drawing is a single stroke
   that runs the full width of its artboard, so with no right padding
   its baseline ran straight into the rails. */
/* The drawings span the column rather than being capped by their own
   height — that cap was leaving them small with a lot of dead space.
   24px of clearance keeps the architectural drawing's ground line,
   which runs the full width of its artboard, off the rails. */
.eng-media{
  min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 24px;
}
/* Only the architectural drawing runs rail to rail (1022:408 — 599.25
   wide in a 600 cell). The grid column is narrower than that because of
   the 40px row gap and the wrap's gutter, so this one cell bleeds back
   out to both rails. The other two drawings stay inside the column. */
.eng-media-bleed{
  margin-left:-20px;                        /* half the 40px row gap */
  margin-right:calc(-1 * var(--gutter));    /* out to the right rail */
  padding:0;
}
.eng-media img{
  width:100%;max-width:100%;height:auto;
  object-fit:contain;display:block;
}
@media (max-width:900px){
  .eng-row{min-height:0;padding-top:48px;padding-bottom:48px;}
  .eng-row-inner{grid-template-columns:1fr;}
  .eng-mid-rail{display:none;}
  .eng-media,.eng-media-bleed{margin:0;padding:24px 0 0;min-height:0;}
}

/* ============================================
   CWB certified fabrication (Figma 932:212)
   Replaces the old Licenses & Compliance badge grid.
   ============================================ */
.cwb-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;align-items:start;
}
.cwb-head h2{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  text-transform:uppercase;font-weight:400;max-width:20ch;
}
.cwb-head-desc{
  color:var(--text-dim);font-family:var(--font-body);font-weight:500;
  font-size:1.125rem;line-height:1.4;max-width:40ch;justify-self:end;
}
.cwb-panel{
  margin-top:48px;position:relative;
  background:var(--bg-alt);border:.8px solid var(--card-line);
  border-radius:var(--radius-md);
  min-height:430px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
/* Hairline splitting logo from claims, matching the panel's own rule. */
.cwb-panel::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;
  width:var(--line-w);background:var(--card-line);
}
/* The panel links out to the CWB Group, with the destination revealed
   on hover so the logo reads as clickable rather than decorative. */
.cwb-logo{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:40px;text-decoration:none;
}
.cwb-logo-link{
  position:absolute;left:50%;bottom:24px;transform:translate(-50%,4px);
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--ease-ui), transform var(--t-base) var(--ease-ui);
}
.cwb-logo:hover .cwb-logo-link,
.cwb-logo:focus-visible .cwb-logo-link{opacity:1;transform:translate(-50%,0);}
.cwb-logo img{width:min(446px,80%);height:auto;display:block;}
.cwb-points{display:flex;flex-direction:column;gap:24px;padding:68px 60px;}
.cwb-point{display:flex;flex-direction:column;gap:10px;}
.cwb-point h3{
  font-family:var(--font-body);font-weight:500;
  font-size:1.25rem;line-height:1.1;letter-spacing:-.06em;
  color:var(--text);margin:0;text-transform:none;
}
.cwb-point p{
  font-family:var(--font-body);font-weight:500;
  font-size:1.125rem;line-height:1.4;color:var(--text-dim);margin:0;
}
@media (max-width:900px){
  .cwb-head{grid-template-columns:1fr;gap:16px;}
  .cwb-head-desc{justify-self:start;}
  .cwb-panel{grid-template-columns:1fr;min-height:0;}
  .cwb-panel::before{display:none;}
  .cwb-logo{padding:40px 24px;}
  .cwb-points{padding:32px 24px 40px;border-top:var(--line-w) solid var(--card-line);}
}

/* ============================================
   Contact / inquiry (Figma 951:634)
   ============================================ */
/* This is the first block on the page — no hero above it to supply the
   opening rule, so it carries its own. */
.ct-section{padding-top:60px;padding-bottom:60px;}
.ct-section .grid-rule-top{position:absolute;top:-1px;}
.ct-row{
  display:grid;grid-template-columns:406px minmax(0,1fr);
  gap:24px;align-items:stretch;
}
.ct-info{
  background:var(--bg-alt);border:.8px solid var(--card-line);
  border-radius:var(--radius-md);padding:32px;
  display:flex;flex-direction:column;justify-content:space-between;gap:34px;
}
.ct-info-head{display:flex;flex-direction:column;gap:14px;}
.ct-info h1,.ct-form-card h2{
  font-family:var(--font-body);font-weight:400;
  font-size:2rem;line-height:1.1;letter-spacing:-.06em;
  color:var(--text);margin:0;text-transform:none;
}
.ct-info-head p{
  font-family:var(--font-body);font-size:.875rem;line-height:1.2;
  color:var(--text-dim);margin:0;
}
.ct-facts{display:flex;flex-direction:column;gap:18px;margin:0;}
.ct-fact{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.ct-fact-top{align-items:flex-start;}
.ct-fact dt{
  font-family:var(--font-mono);font-weight:500;font-size:.75rem;line-height:1.1;
  text-transform:uppercase;color:var(--text-dim);flex:none;
}
.ct-fact dd{
  font-family:var(--font-body);font-size:.875rem;line-height:1.2;
  color:var(--text);margin:0;text-align:right;
}
.ct-fact-sub dt{text-transform:none;font-family:var(--font-body);font-size:.875rem;max-width:166px;text-align:left;}
.ct-hours{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.ct-hours:last-child{margin-bottom:0;}
.ct-rule{height:.8px;background:var(--card-line);}
.ct-accent{color:var(--accent);font-family:var(--font-body);font-size:.875rem;line-height:1.2;}
.ct-accent:hover{text-decoration:underline;}

.ct-form-card{
  background:var(--bg);border:.8px solid var(--card-line);
  border-radius:var(--radius-md);padding:32px;
  display:flex;flex-direction:column;gap:48px;
}
.ct-form{display:flex;flex-direction:column;gap:28px;}
.ct-grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.ct-field{display:flex;flex-direction:column;gap:6px;position:relative;}
.ct-field label{
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;line-height:1.1;
  text-transform:uppercase;color:var(--text);
}
.ct-field input,.ct-field textarea{
  font-family:var(--font-body);font-size:.875rem;line-height:1.2;color:var(--text);
  background:#fff;border:.8px solid var(--card-line);border-radius:var(--radius);
  padding:14px 16px 14px 10px;width:100%;
  transition:border-color var(--t-fast) var(--ease-ui), box-shadow var(--t-fast) var(--ease-ui);
}
.ct-field input{height:46px;}
.ct-field textarea{min-height:108px;resize:vertical;}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--text-dim);}
.ct-field input:focus,.ct-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,40,40,.12);
}
.ct-field input[aria-invalid="true"]{border-color:var(--accent);}
.ct-submit{width:100%;justify-content:center;margin-top:11px;}
/* Honeypot: real people never see it, bots fill it in. */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.ct-status{
  font-family:var(--font-body);font-size:.875rem;line-height:1.4;margin:0;color:var(--text-dim);
}
.ct-status.is-error{color:var(--accent);}

/* Address suggestions */
.ct-suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;
  background:#fff;border:.8px solid var(--card-line);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:220px;overflow-y:auto;padding:4px;margin:0;list-style:none;
}
.ct-suggest[hidden]{display:none;}
.ct-suggest li{
  font-family:var(--font-body);font-size:.875rem;line-height:1.3;
  padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text);
}
.ct-suggest li:hover,.ct-suggest li[aria-selected="true"]{background:var(--bg-alt);}

@media (max-width:900px){
  .ct-row{grid-template-columns:1fr;}
  .ct-grid-2{grid-template-columns:1fr;}
}

/* ---- Careers modal (Figma 953:863) ---------------------------- */
.cm-panel{
  background:var(--bg);border:.8px solid var(--card-line);
  border-radius:var(--radius-md);padding:52px;position:relative;
  width:min(1040px,94vw);max-height:92vh;overflow-y:auto;
}
.cm-close{
  position:absolute;top:20px;right:20px;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:6px;border-radius:6px;
  background:#fff;border:.8px solid var(--card-line);color:var(--text);
  cursor:pointer;transition:background var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.cm-close:hover{background:var(--text);color:#fff;}
.cm-grid{display:grid;grid-template-columns:311px minmax(0,1fr);gap:85px;align-items:start;}
.cm-aside{display:flex;flex-direction:column;gap:18px;}
.cm-intro{display:flex;flex-direction:column;gap:14px;}
.cm-head{display:flex;flex-direction:column;gap:16px;}
.cm-aside h3{
  font-family:var(--font-body);font-weight:400;
  font-size:2rem;line-height:1.1;letter-spacing:-.06em;
  color:var(--text);margin:0;text-transform:none;
}
.cm-intro p{
  font-family:var(--font-body);font-size:.875rem;line-height:1.2;
  color:var(--text-dim);margin:0;
}
.cm-block{display:flex;flex-direction:column;gap:14px;}
.cm-label{
  font-family:var(--font-mono);font-weight:500;font-size:.75rem;line-height:1.1;
  text-transform:uppercase;color:var(--text-dim);
}
.cm-phone{
  font-family:var(--font-body);font-size:1.5rem;line-height:1.2;color:var(--accent);
}
.cm-phone:hover{text-decoration:underline;}
.cm-hours{display:flex;flex-direction:column;gap:8px;}
.cm-hours > span{
  display:flex;justify-content:space-between;gap:8px;
  font-family:var(--font-body);font-size:.875rem;line-height:1.2;color:var(--text);
}
.cm-form{gap:28px;}
.cm-hint{
  font-family:var(--font-body);font-size:.75rem;line-height:1.3;
  color:var(--text-dim);margin:2px 0 0;
}
/* File input styled to match the other fields. */
.ct-field input[type="file"]{
  padding:0;height:46px;display:flex;align-items:center;
  font-family:var(--font-body);font-size:.875rem;color:var(--text-dim);
}
.ct-field input[type="file"]::file-selector-button{
  height:100%;margin-right:12px;padding:0 16px;
  border:0;border-right:.8px solid var(--card-line);
  border-radius:var(--radius) 0 0 var(--radius);
  background:var(--bg-alt);color:var(--text);cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:.875rem;
  transition:background var(--t-fast) var(--ease-ui);
}
.ct-field input[type="file"]::file-selector-button:hover{background:#e9e9e9;}

@media (max-width:900px){
  .cm-panel{padding:32px 24px;}
  .cm-grid{grid-template-columns:1fr;gap:32px;}
}

/* ============================================
   Project cards
   ============================================ */
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line);}
.project-card{background:var(--bg);overflow:hidden;position:relative;border-radius:var(--radius);}
.project-card .img-wrap{aspect-ratio:16/10;overflow:hidden;position:relative;}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-base) var(--ease-ui);}
.project-card:hover img{transform:scale(1.05);}
.project-card .tag{
  position:absolute;top:14px;left:14px;background:rgba(18,20,23,.85);
  font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  padding:6px 10px;border:1px solid var(--line);color:var(--text-dim);
}
.project-card .info{padding:22px 24px;}
.project-card h3{font-size:1.15rem;margin-bottom:6px;}
.project-card .loc{font-family:var(--font-mono);font-size:.8rem;color:var(--text-faint);}

/* ============================================
   Selected Work — matched to Figma reference:
   big rounded photo with a floating dark rounded
   panel over its lower-right corner (index, title,
   subtitle, description, circular arrows, pill CTA).
   Projects transition with a fade + vertical slide.
   Normal in-flow section: no scroll-jacking — the
   page scrolls straight through to the next section.
   Navigation is via arrows + an autoplay timer.
   ============================================ */
.work-header-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:80px;}
.work-heading-col{display:flex;flex-direction:column;max-width:307px;}
.work-heading-col .section-tag{margin-bottom:16px;}
.work-heading{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;font-weight:400;
  text-transform:uppercase;max-width:20ch;text-wrap:balance;
}
.work-heading-desc{color:var(--text-dim);font-family:var(--font-body);font-weight:500;font-size:1.125rem;line-height:1.3;width:419px;max-width:100%;flex-shrink:0;}

/* Slider geometry is Figma's: a 1019-wide photo inside the 1150-wide
   section, with the 418-wide dark card overlapping its right edge and
   centred on the photo's height (equal 52px above and below). The 4px
   frame is inset (border-box) so it can't bleed past the photo. */
.work-stage{display:flex;flex-direction:column;gap:20px;}
.work-frame{position:relative;aspect-ratio:1150/732;min-height:320px;}
.work-photo-area{
  position:absolute;left:0;top:0;width:88.61%;height:100%;
  border:4px solid var(--photo-frame);border-radius:var(--radius-md);
  background:var(--bg-alt);box-sizing:border-box;overflow:hidden;
}
.work-card{
  position:absolute;inset:0;display:block;overflow:hidden;
  opacity:0;transform:translateX(-48px);pointer-events:none;
  transition:opacity .65s var(--ease-fluid), transform .65s var(--ease-fluid);
}
.work-card.active{opacity:1;transform:translateX(0);pointer-events:auto;z-index:1;}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-fluid);}

/* 396x582 in Figma's 1150-wide slider, flush right and centred on the
   732-tall photo (equal 75px above and below). */
/* Redesigned to Figma 747:1371 — the panel now reads as a light card
   on the photo rather than a black one, with the CTA carrying the
   dark fill instead. Position and size are unchanged. */
.work-panel{
  position:absolute;right:0;top:10.25%;bottom:10.25%;z-index:3;
  width:34.43%;
  background:var(--bg-alt);color:var(--text);
  border:.8px solid var(--line);border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  padding:32px 35px;
  display:flex;flex-direction:column;
}
.work-panel-text{display:flex;flex-direction:column;transition:opacity .3s var(--ease);}
.work-count{margin-top:0;font-family:var(--font-body);font-weight:400;color:var(--text-dim);font-size:.75rem;letter-spacing:normal;line-height:1.2;}
/* Title and location are no longer one Oswald block: the location
   dropped to Public Sans 20 and sits 6px under the name (981:606). */
.work-title{
  margin-top:18px;
  display:flex;flex-direction:column;gap:6px;
}
.work-title .title-main{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:-.06em;
  color:var(--text);
}
.work-title .title-loc{
  font-family:var(--font-body);font-weight:400;
  font-size:1.25rem;line-height:1.4;letter-spacing:-.06em;
  color:var(--text-dim);
}
.work-sub{margin-top:32px;font-family:var(--font-body);font-weight:500;font-size:1.25rem;color:var(--text);letter-spacing:-.04em;line-height:1.4;}
.work-desc{margin-top:10px;font-family:var(--font-body);font-weight:400;color:var(--text-dim);font-size:1.25rem;line-height:1.4;letter-spacing:-.06em;}
.work-panel-actions{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:auto;}
.work-arrows{display:flex;align-items:center;gap:10px;}
/* Outlined at rest; on hover the button fills black and the chevron
   flips to white. No red anywhere in this cluster. */
.work-panel-actions .car-btn{
  width:51px;height:51px;border-radius:var(--radius);
  background:transparent;border:1px solid var(--text);color:var(--text);
  transition:background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.work-panel-actions .car-btn:hover{background:var(--text);border-color:var(--text);color:#fff;}
.work-panel-actions .car-btn:active{background:#2e2e2e;border-color:#2e2e2e;color:#fff;}
/* Dark CTA — greys down slightly on hover and press. */
.work-pill-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--text);color:#fff;
  border:.8px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.1);
  border-radius:var(--radius);height:51px;padding:0 28px;
  font-family:var(--font-body);font-weight:500;font-size:1rem;letter-spacing:-.01em;
  text-transform:none;
  transition:background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
}
.work-pill-btn:hover{background:#2e2e2e;border-color:#2e2e2e;color:#fff;}
.work-pill-btn:active{background:#3d3d3d;border-color:#3d3d3d;}

@media (max-width:900px){
  .work-header-row{flex-direction:column;align-items:flex-start;gap:16px;}
  .work-heading-desc{justify-self:start;}
  .work-frame{aspect-ratio:auto;min-height:0;}
  .work-card{
    position:relative;inset:auto;display:none;
    opacity:1;transform:none;pointer-events:auto;
    aspect-ratio:4/5;
  }
  .work-card.active{display:block;}
  .work-panel{position:relative;top:auto;right:auto;bottom:auto;width:100%;margin-top:16px;border-radius:var(--radius);}
  .work-progress{position:relative;left:auto;right:auto;bottom:auto;background:none;padding:16px 0 0;margin-top:12px;}
  .work-progress .seg{background:var(--line-soft);}
}

/* ============================================
   Project carousel (Selected Work)
   ============================================ */
.carousel{position:relative;border:1px solid var(--line);}
.carousel-track{position:relative;}
.carousel-slide{display:none;position:relative;}
.carousel-slide.active{display:block;}
.carousel-slide .slide-img{width:100%;height:clamp(340px,52vw,600px);object-fit:cover;display:block;}
.carousel-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(420px,90%);
  background:rgba(25,24,24,.88);backdrop-filter:blur(8px);
  border-left:1px solid var(--line);
  padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  color:#fff;
}
.carousel-count{font-family:var(--font-mono);color:rgba(255,255,255,.6);font-size:.85rem;letter-spacing:.04em;}
.carousel-panel h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2;color:#fff;}
.carousel-panel h3 .loc{color:rgba(255,255,255,.7);font-family:var(--font-body);font-weight:400;}
.carousel-sub{font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);}
.carousel-desc{color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.55;}
.carousel-controls{display:flex;align-items:center;gap:12px;margin-top:8px;}
.car-btn{
  width:42px;height:42px;border-radius:var(--radius);flex-shrink:0;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui);
}
.car-btn:hover{border-color:var(--accent);color:var(--accent);}
.carousel-cta{margin-left:auto;padding:12px 20px;}
.carousel-panel .btn-primary{color:#fff;border-color:rgba(255,255,255,.45);}

.carousel-progress{display:flex;gap:6px;padding:16px clamp(24px,3vw,40px);border-top:1px solid var(--line);}
.work-progress{
  position:absolute;left:28px;right:calc(22% + 28px);bottom:14px;z-index:2;
  border-top:none;padding:0;
}
.work-progress .seg{background:rgba(255,255,255,.4);}
.carousel-progress .seg{flex:1;height:2px;background:var(--line-soft);position:relative;overflow:hidden;}
.carousel-progress .seg .fill{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--accent);}
.carousel-progress .seg.done .fill{width:100%;}
.carousel-progress .seg.active .fill{animation:progressFill linear forwards;animation-duration:var(--dur,6s);}
@keyframes progressFill{from{width:0%;}to{width:100%;}}

@media (max-width:720px){
  .carousel-panel{
    position:static;width:100%;background:var(--bg-alt);
    border-left:none;border-top:1px solid var(--line);
    color:var(--text);
  }
  .carousel-count{color:var(--text-faint);}
  .carousel-panel h3{color:var(--text);}
  .carousel-panel h3 .loc{color:var(--text-dim);}
  .carousel-desc{color:var(--text-dim);}
  .car-btn{border-color:var(--line);color:var(--text);}
  .carousel-panel .btn-primary{color:var(--text);border-color:var(--accent-dim);}
  .carousel-slide .slide-img{height:240px;}
  .carousel-cta{margin-left:0;}
  .carousel-controls{flex-wrap:wrap;}
}

/* ============================================
   Process steps
   ============================================ */
.process-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;}
.process-step{border-top:2px solid var(--line);padding-top:20px;position:relative;}
.process-step .idx{
  font-family:var(--font-mono);color:var(--accent);font-size:.95rem;display:block;margin-bottom:12px;
}
.process-step h3{font-size:1.15rem;margin-bottom:10px;}
.process-step p{color:var(--text-dim);font-size:.92rem;}

/* ============================================
   How we work — 3 cards (Plan & Coordinate /
   Fabricate / Install), each with a small technical
   line-drawing keyed to that card's theme. Card
   fill/border use the site's card tokens
   (--bg-alt / --card-line), not a bordered single
   frame — modeled on the ElevenLabs icon-card row.
   ============================================ */
/* ============================================
   What we do — title row + the three drawing
   cards, one section (Figma 747:1222). The card
   artwork is Figma's own exported vector, placed
   at the exact offset its "animated-element"
   frame has inside the 370x450 card.
   ============================================ */
.wwd-head{display:flex;flex-direction:column;align-items:flex-start;gap:32px;margin-bottom:80px;}
.wwd-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;width:100%;}
.wwd-head-title{display:flex;flex-direction:column;max-width:307px;}
.wwd-head-title .section-tag{margin-bottom:16px;}
.wwd-head-title h2{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  font-weight:400;text-transform:uppercase;
}
.wwd-head-desc{
  color:var(--text-dim);font-family:var(--font-body);font-weight:500;
  font-size:1.125rem;line-height:1.4;width:419px;max-width:100%;flex-shrink:0;
}

.wwd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.wwd-card{
  position:relative;background:var(--bg-alt);border:.8px solid var(--card-line);
  border-radius:var(--radius-md);overflow:hidden;
  aspect-ratio:370/450;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 30px 30px;
}
/* left/width are % of the card's own width; top/height are % of its
   height, so the artwork keeps Figma's placement at any viewport. */
.wwd-card-art{position:absolute;}
.wwd-card-art img{width:100%;height:100%;display:block;}
.wwd-card-art-1{left:29.46%;width:41.23%;top:10.89%;height:54.78%;}
.wwd-card-art-2{left:7.35%;width:88.92%;top:11.38%;height:50.67%;}
.wwd-card-art-3{left:9.24%;width:81.35%;top:4.49%;height:66.89%;}
.wwd-card-body{position:relative;z-index:1;}
.wwd-card-body h3{font-family:var(--font-body);font-weight:500;font-size:1.25rem;letter-spacing:-.06em;line-height:1.1;margin-bottom:10px;}
/* Reserving three lines keeps every card's title on the same
   horizontal line while the longest description still clears
   the card's 30px bottom padding. */
.wwd-card-body p{color:var(--text-dim);font-size:.875rem;line-height:1.2;letter-spacing:normal;min-height:calc(3 * 1.2 * .75rem);}

/* The drawings breathe slowly rather than move — matching the
   restraint of the technical-drawing style. */
.wwd-card-art img{animation:wwdBreathe 6s ease-in-out infinite;}
.wwd-card:nth-child(2) .wwd-card-art img{animation-delay:-2s;}
.wwd-card:nth-child(3) .wwd-card-art img{animation-delay:-4s;}
@keyframes wwdBreathe{0%,100%{opacity:.75;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .wwd-card-art img{animation:none;}
}
@media (max-width:900px){
  .wwd-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .wwd-head-row{flex-direction:column;align-items:flex-start;gap:24px;}
  .wwd-head-desc{width:auto;}
}
@media (max-width:600px){
  .wwd-cards{grid-template-columns:1fr;}
}

.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.stat-strip .stat{padding:26px 20px;border-right:1px solid var(--line);}
.stat-strip .stat:last-child{border-right:none;}

/* ============================================
   Why Weld Plus — title on the left, a 2x2 stat
   graph on the right (Figma 747:1390). The graph's
   dividers are two standalone dashed lines at
   Figma's own sizes (467 wide, 202 tall) that stop
   short of the cells rather than a full bordered
   grid, and each stat is centre-aligned.
   ============================================ */
/* Both columns share the section's top and bottom bounds — the
   eyebrow lines up with the top stat row and the last title line
   with the bottom label row. Figma insets the graph 9px inside
   that shared height, so the same inset is applied here. */
.why-frame{
  position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:40px;
}
.why-left{display:flex;flex-direction:column;max-width:307px;}
.why-left .section-tag{margin-bottom:16px;}
.why-left h2{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;margin:0;font-weight:400;
  text-transform:uppercase;text-wrap:balance;
}

.why-stats{
  position:relative;flex-shrink:0;
  width:467px;max-width:100%;
  margin-block:9px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr;
}
/* horizontal + vertical dashed dividers, sized exactly as in Figma */
/* Painted as gradients, not borders: WebKit rounds sub-pixel border
   widths differently on vertical edges, so border-left:.8px dashed
   rounded away to nothing on iOS and the column divider vanished while
   the horizontal one survived. Both use one dash rhythm now. */
.why-stats::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:var(--line-w);
  background-image:repeating-linear-gradient(to right,
    var(--line) 0 3px, transparent 3px 6px);
  pointer-events:none;
}
.why-stats::after{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:var(--line-w);
  background-image:repeating-linear-gradient(to bottom,
    var(--line) 0 3px, transparent 3px 6px);
  pointer-events:none;
}
.why-stats .stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14px 12px;
}
.why-stats .stat .num{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.06em;
  font-size:clamp(1.8rem,3vw,2.375rem);line-height:1.2;color:var(--text);display:block;
  margin-bottom:12px;text-transform:uppercase;white-space:nowrap;
}
.why-stats .stat .label{font-weight:500;font-size:.625rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.02em;line-height:1.1;}

@media (max-width:900px){
  .why-frame{flex-direction:column;align-items:flex-start;gap:48px;}
  .why-stats{width:100%;}
}

/* ============================================
   Careers — matched to Figma node 673:397/672:363:
   centered eyebrow+heading, a Welding/Trade segmented
   toggle, and an interactive 3-photo cluster (a big
   center card flanked by two offset side cards + two
   filler tiles) whose vertical arrangement MIRRORS
   left-to-right when the toggle is switched — the
   left card is top-aligned / right offset-down on
   "Welding", and the reverse on "Trade". Positions
   below are percentages of the Figma cluster's own
   1130×447 reference box, so the mirroring is exact.
   ============================================ */
/* Section's own top gap is Figma's ~120px from the rule above. */
.careers-v2{padding-top:120px;}
.careers-v2-wrap{display:flex;flex-direction:column;align-items:center;gap:50px;}
/* Figma: eyebrow →16px→ title →24px→ toggle →40px→ cards */
.careers-v2-head{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;max-width:500px;}
/* 16px on desktop like every other eyebrow; the flex gap used to add
   24 on top of it here, which is why this one sat wider. */
.careers-v2-head .section-tag{margin-bottom:16px;}
.careers-v2-head h2{margin-bottom:24px;}
.careers-v2-head h2{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  font-weight:400;text-transform:uppercase;text-wrap:balance;margin-top:-8px;
}

/* The two pills overlap: the active one sits on top with a full
   radius and shadow, the inactive one is tucked behind it with
   extra padding on the covered side — exactly as in Figma, rather
   than a flush segmented control with a seam. */
.careers-toggle{display:inline-flex;position:relative;align-items:center;}
.careers-toggle-btn{
  font-family:var(--font-body);font-weight:500;font-size:1rem;letter-spacing:-.01em;
  color:var(--text-dim);background:transparent;
  border:.8px solid var(--line);border-radius:var(--radius);
  height:50px;padding:0 28px;display:flex;align-items:center;justify-content:center;
  transition:background-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui), box-shadow var(--t-fast) var(--ease-ui);
}
.careers-toggle-btn:first-child{padding-right:40px;margin-right:-12px;}
.careers-toggle-btn:last-child{padding-left:40px;margin-left:-12px;}
.careers-toggle-btn.is-active{
  background:var(--bg-raised);color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  position:relative;z-index:2;
}
.careers-toggle-btn.is-active:first-child{padding-right:28px;margin-right:-12px;}
.careers-toggle-btn.is-active:last-child{padding-left:28px;margin-left:-12px;}

/* Five slots that re-size in place. Toggling the state changes each
   slot's geometry, so the open cards shrink into the small squares'
   footprint while those squares grow into full cards — the tiles
   trade roles rather than one panel replacing another. Every slot is
   grey underneath; the photo faces sit on top and fade with it. */
.careers-cluster{position:relative;width:100%;aspect-ratio:1130/447;}
.cc-slot{
  position:absolute;background:var(--bg-alt);border-radius:var(--radius-md);
  overflow:hidden;
  /* Quick off the mark, long soft settle. */
  transition:left .62s var(--ease-morph), top .62s var(--ease-morph),
             width .62s var(--ease-morph), height .62s var(--ease-morph);
}
.cc-main{left:30.09%;width:39.82%;top:0;height:100%;border:4px solid var(--photo-frame);z-index:2;}

/* Welding: left card open at the top, right card open at the bottom. */
.is-welding .cc-lt{left:0;      top:0;      width:29.2%;  height:67.34%;}
.is-welding .cc-lb{left:17%;    top:71.81%; width:12.21%; height:28.19%;}
.is-welding .cc-rt{left:70.8%;  top:0;      width:12.21%; height:28.19%;}
.is-welding .cc-rb{left:70.8%;  top:32.66%; width:29.2%;  height:67.34%;}

/* Trade mirrors it vertically: the small squares expand, the cards shrink. */
.is-trade   .cc-lt{left:17%;    top:0;      width:12.21%; height:28.19%;}
.is-trade   .cc-lb{left:0;      top:32.66%; width:29.2%;  height:67.34%;}
.is-trade   .cc-rt{left:70.8%;  top:0;      width:29.2%;  height:67.34%;}
.is-trade   .cc-rb{left:70.8%;  top:71.81%; width:12.21%; height:28.19%;}

/* The photo simply fades — no sliding. It leaves briskly as its tile
   collapses and arrives just after the incoming tile has begun to
   open, so the image is never seen stretched mid-resize. */
.cc-face{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease);
}
.is-welding .cc-face[data-tab="welding"],
.is-trade   .cc-face[data-tab="trade"]{
  opacity:1;pointer-events:auto;
  transition:opacity .3s var(--ease) .1s;
}

/* Text follows the image in, lifting slightly as it appears. */
.cc-face .careers-card-text{
  opacity:0;transform:translateY(10px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.is-welding .cc-face[data-tab="welding"] .careers-card-text,
.is-trade   .cc-face[data-tab="trade"] .careers-card-text{
  opacity:1;transform:none;
  transition:opacity .38s var(--ease-morph) .24s, transform .38s var(--ease-morph) .24s;
}
.cc-face img,.cc-face video,.cc-face .photo-placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cc-face .photo-placeholder{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
}
.careers-card-scrim{
  position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(55,55,55,.6) 50%, rgba(0,0,0,.7) 75%, rgba(0,0,0,.85) 100%);
}
.careers-card-text{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:1;
  display:flex;flex-direction:column;gap:6px;color:#fff;
}
.careers-card-text .tag-label{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.02em;}
.careers-card-text h4{font-family:var(--font-body);font-weight:500;font-size:1.25rem;letter-spacing:-.04em;}
.careers-card-text p{font-family:var(--font-body);font-size:.75rem;letter-spacing:.01em;line-height:1.2;}

@media (prefers-reduced-motion: reduce){
  .cc-slot,.cc-face{transition:none;}
}


.careers-v2-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;width:100%;flex-wrap:wrap;}
.careers-v2-footer p{color:var(--text-dim);font-family:var(--font-body);font-weight:500;font-size:1.125rem;line-height:1.3;max-width:590px;}

@media (max-width:900px){
  .careers-v2-footer{flex-direction:column;align-items:flex-start;}
}

/* ============================================
   Industry certifications — 4x2 grid of logo tiles,
   matched to Figma node 671:165 (8 certification/
   client logos). Real logo assets still needed —
   these render as labeled placeholders until supplied.
   ============================================ */
.certs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.certs-head-title{display:flex;flex-direction:column;max-width:307px;}
.certs-head-title .section-tag{margin-bottom:16px;}
.certs-head-title h2{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  font-weight:400;text-transform:uppercase;
}
.certs-head-desc{color:var(--text-dim);font-family:var(--font-body);font-weight:500;font-size:1.125rem;line-height:1.3;width:419px;max-width:100%;flex-shrink:0;}
/* Figma puts a full grid rule between the title block and the logos:
   35px below the title, 54px above the first logo row. */
.certs-section{padding-bottom:55px;}
.certs-rule{display:block;margin:35px 0 0;}
.certs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:64px 20px;margin-top:54px;}
.cert-badge{
  aspect-ratio:168/50.7;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.625rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.05em;
}
.cert-badge img{max-width:100%;max-height:100%;object-fit:contain;}
@media (max-width:900px){
  .certs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .certs-head{flex-direction:column;align-items:flex-start;gap:24px;}
  .certs-head-desc{width:auto;}
}

/* ============================================
   Start a conversation — no background change in
   Figma; it's a normal section carrying the same
   page background and the same grid treatment as
   every other section.
   ============================================ */
/* Figma breaks the grid here: the vertical rails stop at the certs
   rule and don't resume for ~180px, then this section starts with
   its own top rule. The margin creates that empty run (rails are
   painted per-section, so nothing is drawn across it). */
.cta-band{text-align:center;margin-top:180px;padding-top:80px;}
.cta-band .grid-rule-top,
.pj-toolbar .grid-rule-top{position:absolute;top:-1px;}
.cta-band .section-tag{margin-bottom:16px;}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.375rem);line-height:1.2;letter-spacing:-.06em;font-weight:400;text-transform:uppercase;max-width:697px;margin:0 auto 24px;text-wrap:balance;}
.cta-band .actions{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;}

/* ============================================
   Footer
   ============================================ */
footer.site-footer{padding-block:56px 28px;}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px;margin-bottom:48px;
}
.footer-grid h4{
  font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-faint);margin-bottom:16px;
}
.footer-grid p{color:var(--text-dim);font-size:.92rem;max-width:32ch;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{color:var(--text-dim);font-size:.92rem;transition:color var(--t-fast) var(--ease-ui);}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  padding-top:24px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-faint);
}

/* ============================================
   Services page — hero (Figma 804:710)

   The copy sits at the bottom of the hero frame,
   matching Figma's resting state; no scroll cue.
   ============================================ */
/* Fixed 850px rather than 100vh — a full viewport pushed the title
   to the very bottom edge on taller screens. */
.svc-hero{
  position:relative;height:850px;min-height:850px;overflow:hidden;
}
.svc-hero-media{position:absolute;inset:0;z-index:0;}
.svc-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* Diamond gradient replaces the old bottom scrim; it stretches with
   the frame (preserveAspectRatio="none") exactly as Figma's fill does. */
.svc-hero-diamond{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
/* Figma pins the text block 70px above the hero's bottom edge
   (top 385.5 + 354 tall inside an 810 frame), scaled to 850. */
.svc-hero-content{
  position:absolute;left:0;right:0;bottom:74px;z-index:1;
}
.svc-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.svc-hero-text{width:504px;max-width:100%;display:flex;flex-direction:column;color:#fff;}
.svc-hero-eyebrow{
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;
  text-transform:uppercase;letter-spacing:normal;color:var(--text-on-dark-faint);
  margin-bottom:16px;
}
.svc-hero h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.1rem,4vw,3rem);line-height:1.2;letter-spacing:-.06em;
  text-transform:uppercase;max-width:466px;margin-bottom:14px;
}
.svc-hero .lede{
  font-family:var(--font-body);font-weight:500;font-size:1.125rem;line-height:1.4;color:#fff;
}
@media (max-width:900px){
  .svc-hero{height:auto;min-height:640px;}
  .svc-hero-content{position:relative;bottom:auto;padding-block:220px 60px;}
  .svc-hero-row{flex-direction:column;align-items:flex-start;gap:32px;}
}

/* Go-to chip bar — Figma places it in ungridded space above the
   first grid rule, so it carries no vertical rails; the rule closes
   the block and the rails begin 9px below it in the next section. */
.svc-sortbar{position:relative;padding-top:80px;}
.svc-sortbar .grid-rule{display:block;margin-top:34px;}
.svc-sortbar .wrap{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.svc-sortbar-label{font-family:var(--font-mono);font-weight:500;font-size:.75rem;line-height:1.1;text-transform:uppercase;color:var(--text-dim);}
.svc-chips{display:flex;gap:12px;flex-wrap:wrap;}
.svc-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-raised);border:.8px solid var(--line);border-radius:6px;
  padding:8px 10px;
  font-family:var(--font-mono);font-weight:500;font-size:.75rem;line-height:1.1;
  text-transform:uppercase;color:var(--text-dim);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  transition:color var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
}
.svc-chip:hover{color:var(--accent);border-color:var(--accent);}

/* Service section — heading row, then a 565px photo card
   beside a 565px "What we do" card, then the small-card row. */
.svc-section{scroll-margin-top:120px;}
/* Unlike the homepage's first section, this one has a rule above it,
   so its rails start 9px down to leave the gap around the dots. */
main > .svc-section:first-of-type::before{top:9px;}
.svc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:80px;}
.svc-head-title{display:flex;flex-direction:column;max-width:348px;}
.svc-head-title .section-tag{margin-bottom:16px;}
.svc-head-title h2{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  font-weight:400;text-transform:uppercase;
}

.svc-cards{display:flex;flex-direction:column;gap:20px;}
.svc-large-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
.svc-photo-card,.svc-what-card{
  aspect-ratio:1;border:.8px solid var(--card-line);border-radius:var(--radius-md);
  overflow:hidden;position:relative;
}
.svc-photo-card{background:var(--bg-alt);}
.svc-photo-card img,.svc-photo-card .photo-placeholder{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.svc-photo-card .photo-placeholder{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
}
.svc-what-card{
  background:var(--bg-alt);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px;
}
/* Holds the isometric line drawing above the copy. It sits on the
   card's own background, centred in whatever room the text leaves. */
.svc-what-art{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:24px;
}
.svc-what-art img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply;
}
/* Rotating drawing sets: frames stack and cross-dissolve in place, so
   the card never reflows as the artwork changes. */
.svc-what-art[data-artset]{position:relative;}
.svc-what-art[data-artset] .svc-art-frame{
  position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;
  opacity:0;transition:opacity var(--t-base) var(--ease-ui);
}
.svc-what-art[data-artset] .svc-art-frame.is-current{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .svc-what-art[data-artset] .svc-art-frame{transition:none;}
}
.svc-what-body h3{
  font-family:var(--font-body);font-weight:500;font-size:1.25rem;
  letter-spacing:-.06em;line-height:1.1;margin-bottom:10px;
}
.svc-what-body p{font-size:.875rem;line-height:1.2;color:var(--text);max-width:500px;}

/* Two 272px cards plus one 20px gap equals 565px — exactly one large
   card — so with four equal columns at the same 20px gap, cards 1-2
   land under the left card above and 3-4 under the right one.
   The pair wrappers are kept in the markup for readability but set to
   display:contents so all four cards are items of a single grid row:
   nesting them in their own grids let each half size independently,
   which made the halves different heights. */
.svc-small-row{display:grid;gap:20px;}
.svc-small-row-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.svc-small-row-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.svc-small-pair{display:contents;}

/* Figma anchors the title block to a fixed offset from the card's
   top (index at 30px, title block below it) and lets the body hang
   down. Bottom-aligning instead makes the titles drift to different
   heights whenever the descriptions differ in length, so the offset
   is fixed and the tallest card sets the row height — giving 30px
   of clearance above and below the longest text. */
/* No aspect-ratio: the row's tallest card sets the height and grid
   stretch gives every card in the row the same one, so the longest
   description ends 30px clear of the bottom and the rest follow. */
.svc-small-card{
  background:var(--bg-alt);border:.8px solid var(--card-line);border-radius:var(--radius-md);
  padding:30px;display:flex;flex-direction:column;
}
.svc-idx{font-family:var(--font-body);font-size:1rem;letter-spacing:-.06em;color:var(--text-dim);}
.svc-small-body{display:flex;flex-direction:column;gap:10px;margin-top:42px;}
.svc-small-body h4{
  font-family:var(--font-body);font-weight:500;font-size:1.25rem;
  letter-spacing:-.06em;line-height:1.1;
}
.svc-small-body p{font-size:.875rem;line-height:1.2;color:var(--text);}

/* Awaiting copy — the empty headings and paragraphs would collapse to
   zero height, so reserve the space a filled section would occupy. */
.svc-section-empty .svc-head-title h2{min-height:calc(2 * 1.2em);}
.svc-section-empty .svc-what-body p{min-height:calc(5 * 1.4em);}
.svc-section-empty .svc-small-body h4{min-height:calc(2 * 1.1em);}
.svc-section-empty .svc-small-body p{min-height:calc(4 * 1.2em);}

@media (max-width:900px){
  .svc-head{flex-direction:column;align-items:flex-start;gap:24px;}
  .svc-large-row{grid-template-columns:minmax(0,1fr);}
  .svc-small-row-3,
  .svc-small-row-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .svc-small-row-3,
  .svc-small-row-4{grid-template-columns:minmax(0,1fr);}
}

/* ============================================
   Projects page (Figma 756:2282)

   One template, four states. The state comes from
   ?service=… in the URL, read by script.js, which
   swaps the hero copy and pre-applies the filter.
   Every project row uses the same markup, so adding
   a project is a matter of copying one <article>.
   ============================================ */
/* The whole hero — copy and photo — runs the full 1200px container,
   flush with the rails, so the text's left and right edges line up
   with the featured card's borders. Section content elsewhere stays
   inset by the gutter. */
.pj-hero{padding-top:67px;padding-bottom:80px;}
.pj-hero > .wrap{padding-inline:0;}
.pj-hero-head{display:flex;flex-direction:column;gap:16px;margin-bottom:47px;}
@media (max-width:1260px){
  .pj-hero > .wrap{padding-inline:var(--gutter);}
}
.pj-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.pj-hero h1{
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  font-weight:400;text-transform:uppercase;width:361px;max-width:100%;
}
.pj-hero-desc{
  color:var(--text-dim);font-family:var(--font-body);font-weight:500;
  font-size:1.125rem;line-height:1.4;width:503px;max-width:100%;flex-shrink:0;
}

/* Featured project — full-width photo with the dark card inset 32px
   from its bottom-right corner. */
.pj-feature{
  position:relative;aspect-ratio:1200/716;
  border-radius:var(--radius-md);
  overflow:hidden;background:var(--bg-alt);
}
.pj-feature > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pj-feature-card{
  position:absolute;right:32px;bottom:32px;z-index:1;
  width:var(--pj-card-width, 420px);max-width:calc(100% - 64px);
  background:var(--dark);color:#fff;border-radius:14px;padding:28px;
  display:flex;flex-direction:column;
}
.pj-feature-card h2{
  font-family:var(--font-display);font-size:1.875rem;line-height:1.2;letter-spacing:-.06em;
  display:flex;flex-direction:column;font-weight:400;
}
.pj-feature-card p{
  font-family:var(--font-body);font-weight:500;font-size:1.125rem;line-height:1.4;
  margin-top:10px;
}
.pj-learn{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--font-body);font-weight:500;font-size:1rem;letter-spacing:-.01em;
}
.pj-learn svg{transition:transform var(--t-base) var(--ease-ui);}
.pj-feature-card:hover .pj-learn svg{transform:translateX(4px);}
.t-main{color:inherit;}
.pj-feature-card .t-loc{color:var(--text-on-dark-dim);font-weight:300;}

/* Sort bar — chips take the same red treatment as the site's buttons
   on hover and when their category is the active one.
   It lives in its own block so a filtered-out row can't hide it. */
.pj-toolbar{padding-top:35px;padding-bottom:0;}
.pj-toolbar::after{display:none;}          /* no rule between bar and first row */
.pj-toolbar::before{bottom:0;}             /* rails run straight through */
.pj-rail-join::before{top:0;}
.pj-rail-join{padding-top:120px;}
.pj-sortbar{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
/* Mobile-only control; the chips show as a row on desktop. */
.pj-filter-toggle{display:none;}
.pj-sortbar-label{font-family:var(--font-mono);font-weight:500;font-size:.75rem;line-height:1.1;text-transform:uppercase;color:var(--text-dim);}
.pj-sortbar .svc-chip{cursor:pointer;}
.pj-sortbar .svc-chip.is-active,
.pj-sortbar .svc-chip:hover{color:var(--accent);border-color:var(--accent);}

/* Project row — the template every project uses. Text card and photo
   swap sides on alternate rows via .pj-row-reverse.
   In Figma the text card is sized to its own content, so the split is
   a per-project value carried as --pj-card-w on the article rather
   than one ratio shared by every row. */
.pj-section{padding-top:80px;padding-bottom:35px;}

.pj-row{
  --pj-card-w:36.3%;
  display:grid;grid-template-columns:minmax(0,var(--pj-card-w)) minmax(0,1fr);
  gap:20px;align-items:stretch;scroll-margin-top:120px;
}
.pj-row-reverse{grid-template-columns:minmax(0,1fr) minmax(0,var(--pj-card-w));}
.pj-row-reverse .pj-card{order:2;}
.pj-row-reverse .pj-photo{order:1;}
.pj-card{
  background:var(--bg-alt);border:.8px solid var(--card-line);border-radius:var(--radius-md);
  padding:32px;display:flex;flex-direction:column;min-height:565px;
}
.pj-card-tag{
  font-family:var(--font-mono);font-weight:500;font-size:.625rem;line-height:1.1;color:var(--accent);
  text-transform:uppercase;margin-bottom:16px;
}
/* Name stays Oswald 28; the location dropped to Public Sans 20 and sits
   6px beneath it (757:2771). */
.pj-card h2{
  display:flex;flex-direction:column;gap:6px;margin:0;
}
.pj-card .t-main{
  font-family:var(--font-display);font-weight:400;
  font-size:1.625rem;line-height:1.2;letter-spacing:-.06em;color:var(--text);
}
.pj-card .t-loc{
  font-family:var(--font-body);font-weight:400;
  font-size:1.25rem;line-height:1.4;letter-spacing:-.06em;color:var(--text-dim);
}
/* Head block sits at the top, description at the bottom — space-between
   across a uniform 32px inset (782:160). auto on the heading does the
   distributing, so the tag stays tight under the top edge instead of
   being spread out with everything else. */
.pj-card h2{margin-bottom:auto;}
.pj-card > p{
  font-family:var(--font-body);font-size:1.25rem;line-height:1.4;letter-spacing:-.06em;
  color:var(--text);margin:0;
}

/* Photo side — a crossfading set. Frames stack and cross-dissolve in
   place; nothing slides. A single-image project just sits on frame 1. */
.pj-photo{
  border:4px solid var(--photo-frame);border-radius:var(--radius-md);
  overflow:hidden;background:var(--bg-alt);position:relative;min-height:565px;
}
.pj-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--t-base) var(--ease-ui);
}
.pj-photo img.is-current{opacity:1;}

/* Photo controls — the same 34px button as the homepage carousel, but
   translucent so the photo still reads behind it. 16px in from each
   edge, vertically centred (895:1515). */
.pj-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:8px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  color:#000;cursor:pointer;z-index:3;
  transition:background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.pj-nav:hover{background:#000;border-color:#000;color:#fff;}
.pj-nav:active{background:#2e2e2e;border-color:#2e2e2e;color:#fff;}
.pj-nav[hidden]{display:none;}
.pj-nav.prev{left:16px;}
.pj-nav.next{right:16px;}
/* Invisible hit area over the photo that opens the full-screen view;
   sits under the arrows so they keep their own clicks. */
.pj-expand{
  position:absolute;inset:0;z-index:2;
  background:none;border:0;padding:0;cursor:zoom-in;
}
.pj-expand:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;}

/* Full-screen viewer — one shared overlay for every card. */
.pj-lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(10,10,10,.92);
  padding:clamp(16px,4vw,56px);
}
.pj-lightbox.is-open{display:flex;}
.pj-lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%;}
.pj-lb-stage img{
  max-width:100%;max-height:80vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--radius);display:block;
}
.pj-lb-stage figcaption{
  font-family:var(--font-body);font-size:.9375rem;line-height:1.4;
  color:var(--text-on-dark-faint);text-align:center;max-width:70ch;
}
.pj-lb-close,.pj-lb-nav{
  position:absolute;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;border-radius:10px;
  transition:background var(--t-fast) var(--ease-ui);
}
.pj-lb-close:hover,.pj-lb-nav:hover{background:rgba(255,255,255,.22);}
.pj-lb-close{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);width:44px;height:44px;}
.pj-lb-nav{top:50%;transform:translateY(-50%);width:48px;height:64px;}
.pj-lb-nav.prev{left:clamp(8px,2vw,28px);}
.pj-lb-nav.next{right:clamp(8px,2vw,28px);}
.pj-lb-nav[hidden]{display:none;}
.pj-lb-count{
  position:absolute;bottom:clamp(12px,3vw,28px);left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.75rem;color:var(--text-on-dark-faint);
}
.pj-lb-count[hidden]{display:none;}
.pj-photo .photo-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
}
@media (prefers-reduced-motion: reduce){
  .pj-photo img{transition:none;}
}

.pj-empty{
  text-align:center;padding-block:80px;color:var(--text-dim);
  font-family:var(--font-body);font-size:1.125rem;
}
/* "View More" sits in the ungridded run between the last row's rule
   and the CTA band's own top rule. */
.pj-viewmore{display:flex;justify-content:center;padding-top:34px;}
.pj-viewmore[hidden]{display:none;}
.pj-viewmore .btn{height:51px;}

@media (max-width:900px){
  .pj-hero-row{flex-direction:column;align-items:flex-start;gap:24px;}
  .pj-hero h1,.pj-hero-desc{width:auto;}
  .pj-feature-card{position:relative;right:auto;bottom:auto;width:100%;max-width:none;border-radius:0;}
  .pj-feature{aspect-ratio:auto;}
  .pj-feature > img{position:relative;aspect-ratio:16/10;}
  .pj-row,.pj-row-reverse{grid-template-columns:1fr;}
  .pj-row-reverse .pj-card{order:0;}
  .pj-row-reverse .pj-photo{order:0;}
  .pj-card,.pj-photo{min-height:0;}
  .pj-photo{aspect-ratio:4/3;}

}

/* ============================================
   About page (Figma 873:653)
   ============================================ */
/* Hero: title block, then a full-1200 video card flush with the rails. */
.ab-hero{padding-top:67px;padding-bottom:80px;}
.ab-hero > .wrap{padding-inline:0;}
.ab-hero-head{display:flex;flex-direction:column;gap:16px;margin-bottom:64px;}
.ab-hero h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  text-transform:uppercase;width:510px;max-width:100%;
}
.ab-hero-media{
  border-radius:var(--radius-md);overflow:hidden;
  aspect-ratio:1200/716;background:var(--bg-alt);
}
.ab-hero-media video{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:1260px){
  .ab-hero > .wrap{padding-inline:var(--gutter);}
}

/* Story — a single centred column of 20px body copy. */
.ab-story-section{padding-top:120px;padding-bottom:35px;}
.ab-story-section .grid-rule-top{position:absolute;top:-1px;}
.ab-story{
  width:852px;max-width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:24px;
}
.ab-story p,.ab-list li{
  font-family:var(--font-body);font-size:1.25rem;line-height:1.4;
  letter-spacing:-.06em;color:var(--text);
}
.ab-list{display:flex;flex-direction:column;gap:16px;padding-left:23px;}
.ab-list li{position:relative;}
.ab-list li::before{
  content:'';position:absolute;left:-23px;top:.55em;
  width:7px;height:6px;border-radius:50%;background:var(--text);
}
.ab-list strong{font-weight:500;}

/* Latest projects — three square thumbnails with caption and meta. */
.ab-latest-head{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:80px;}
.ab-latest-head h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  text-transform:uppercase;max-width:348px;
}
.ab-latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.ab-proj{display:flex;flex-direction:column;}
/* The frame crops an enlarged image using Figma's own offsets, so what
   you see matches the design rather than a centred cover crop. On hover
   the image contracts back to a plain cover fit. */
.ab-proj-img{
  position:relative;display:block;aspect-ratio:1;border-radius:var(--radius-md);
  overflow:hidden;background:var(--bg-alt);margin-bottom:18px;
}
.ab-proj-img img{
  position:absolute;max-width:none;
  width:var(--w);height:var(--h);left:var(--l);top:var(--t);
  object-fit:cover;
  transition:width .6s var(--ease-fluid), height .6s var(--ease-fluid),
             left .6s var(--ease-fluid), top .6s var(--ease-fluid);
}
.ab-proj:hover .ab-proj-img img{width:100%;height:100%;left:0;top:0;}
.ab-proj-desc{font-family:var(--font-body);font-size:1.125rem;line-height:1.4;color:var(--text);margin-bottom:18px;}
.ab-proj-meta{
  display:flex;gap:12px;font-family:var(--font-body);font-size:.875rem;color:var(--text-dim);
}
.ab-proj-meta span:first-child{color:var(--text);}

/* Careers — copy on the left, an overlapping three-photo collage right. */
.ab-careers-row{display:flex;align-items:center;justify-content:space-between;gap:60px;}
.ab-careers-text{width:508px;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.ab-careers-text h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.375rem);line-height:1.2;letter-spacing:-.06em;
  text-transform:uppercase;
}
.ab-careers-text p{color:var(--text-dim);font-family:var(--font-body);font-weight:500;font-size:1.125rem;line-height:1.3;}
/* Positions come from the Figma cluster's own 565x270 box. */
.ab-careers-collage{position:relative;width:565px;max-width:100%;aspect-ratio:565/270;flex-shrink:0;}
.ab-careers-collage span{position:absolute;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-alt);}
/* Same Figma-offset framing as the project cards, but static — no hover. */
.ab-careers-collage img{
  position:absolute;max-width:none;display:block;
  width:var(--w);height:var(--h);left:var(--l);top:var(--t);
  object-fit:cover;
}
.ab-collage-1{left:0;top:25.6%;width:43.7%;height:69.6%;}
.ab-collage-2{left:30.6%;top:0;width:43.5%;height:69.3%;z-index:2;}
.ab-collage-3{left:56.6%;top:34.8%;width:43.4%;height:65.2%;}

@media (max-width:900px){
  .ab-hero h1{width:auto;}
  .ab-latest-head{flex-direction:column;align-items:flex-start;gap:24px;}
  .ab-latest-grid{grid-template-columns:minmax(0,1fr);}
  .ab-careers-row{flex-direction:column;align-items:flex-start;gap:40px;}
  .ab-careers-collage{width:100%;}
}

/* ============================================
   Inner page hero (smaller)
   ============================================ */
.page-hero{padding-top:120px;padding-bottom:35px;position:relative;}
.page-hero h1{font-size:clamp(2.3rem,4.2vw,3.6rem);line-height:1.1;max-width:22ch;margin-bottom:18px;text-wrap:balance;}
h1{text-wrap:balance;}
.page-hero .lede{color:var(--text-dim);max-width:46ch;font-size:1.05rem;}

/* Jump nav (services/projects index) */
.jump-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.jump-nav a{
  font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;
  border:1px solid var(--line);padding:8px 14px;color:var(--text-dim);transition:.2s var(--ease);
}
.jump-nav a:hover{border-color:var(--accent);color:var(--accent);}

/* Service detail block — bordered frame connected to the outer grid,
   matching the same technique used for Why Weld Plus: bleed out to the
   true grid edge via negative margin, dots at every real intersection. */
.service-detail{
  position:relative;
  border-top:1px solid var(--line);
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
  width:calc(100% + 2 * var(--gutter));
  scroll-margin-top:110px;
}
.service-detail:last-of-type{border-bottom:1px solid var(--line);}
.service-detail::before,.service-detail::after{
  content:'';position:absolute;top:-2px;width:4px;height:4px;border-radius:50%;
  background:var(--text-dim);box-shadow:0 0 0 2px var(--bg);z-index:3;
}
.service-detail::before{left:-2px;}
.service-detail::after{right:-2px;}
.sd-bottom-dot-l,.sd-bottom-dot-r{
  position:absolute;bottom:-2px;width:4px;height:4px;border-radius:50%;
  background:var(--text-dim);box-shadow:0 0 0 2px var(--bg);z-index:3;
  pointer-events:none;
}
.sd-bottom-dot-l{left:-2px;}
.sd-bottom-dot-r{right:-2px;}

/* Header row — spans the full width, above the divider.
   Eyebrow + heading on the left, CTA button on the right. */
.sd-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,52px);
  border-bottom:1px solid var(--line);
}
.sd-header-text{display:flex;flex-direction:column;}
.sd-idx{
  font-family:var(--font-mono);color:var(--accent);font-size:.75rem;
  letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:18px;
}
.service-detail h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.9rem,3vw,3rem);line-height:1.1;letter-spacing:-.06em;
  margin:0;max-width:16ch;
}
.sd-cta{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  border:1px solid var(--text);border-radius:var(--radius);padding:15px 24px;
  font-family:var(--font-body);font-size:.75rem;color:var(--text);
  text-transform:uppercase;letter-spacing:.02em;
  transition:border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.sd-cta:hover{border-color:var(--accent);color:var(--accent);}

/* Body row — below the header divider. Text column | image column,
   split by a vertical divider with dots at the two real intersections. */
.sd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
.sd-text{
  padding:clamp(48px,6vw,80px) clamp(24px,4vw,52px);
  border-right:1px solid var(--line);position:relative;
  display:flex;flex-direction:column;justify-content:center;
}
.sd-text::before,.sd-text::after{
  content:'';position:absolute;right:-2px;width:4px;height:4px;border-radius:50%;
  background:var(--text-dim);box-shadow:0 0 0 2px var(--bg);z-index:3;
}
.sd-text::before{top:-2px;}
.sd-text::after{bottom:-2px;}
.service-detail .desc{
  font-family:var(--font-body);font-weight:500;color:var(--text);
  font-size:1.125rem;line-height:1.2;letter-spacing:.02em;margin-bottom:30px;
}
.sd-list{margin-bottom:0;}
.sd-list li{
  display:flex;gap:18px;align-items:center;color:var(--text);
  font-family:var(--font-body);font-size:1.375rem;letter-spacing:.02em;
  padding:14px 0;
}
.sd-list li::before{content:'—';color:var(--accent);flex-shrink:0;font-size:1.5rem;}

.sd-media-wrap{
  padding:clamp(48px,6vw,80px) clamp(24px,4vw,52px);
  display:flex;align-items:center;
}
.sd-media{
  border-radius:var(--radius-lg);aspect-ratio:784/478;width:100%;overflow:hidden;position:relative;
}
.sd-media img{width:100%;height:100%;object-fit:cover;}

@media (max-width:900px){
  .sd-header{flex-direction:column;align-items:flex-start;gap:20px;}
  .sd-body{grid-template-columns:1fr;}
  .sd-text{border-right:none;border-bottom:1px solid var(--line);}
  .sd-text::before,.sd-text::after{right:auto;left:50%;transform:translateX(-50%);}
}

/* Project detail block */
.project-detail{padding-block:clamp(48px,7vw,80px);border-bottom:1px solid var(--line);scroll-margin-top:110px;}
.pd-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-bottom:36px;align-items:end;}
.pd-tag{font-family:var(--font-mono);color:var(--accent);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:block;}
.pd-head h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:10px;}
.pd-loc{font-family:var(--font-mono);color:var(--text-faint);font-size:.88rem;}
.pd-desc{color:var(--text-dim);}
.pd-scope{font-family:var(--font-mono);font-size:.78rem;color:var(--text-faint);margin-top:14px;letter-spacing:.03em;}
.pd-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);}
.pd-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform var(--t-base) var(--ease-ui), filter var(--t-base) var(--ease-ui);}
.pd-gallery a{overflow:hidden;display:block;border-radius:var(--radius);}
.pd-gallery a:hover img{transform:scale(1.06);}

/* ============================================
   Contact page
   ============================================ */
.contact-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start;}
.contact-card{border:1px solid var(--line);background:var(--bg-alt);padding:32px;border-radius:var(--radius);}
.contact-card h3{font-size:1.1rem;margin-bottom:18px;}
.info-row{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line-soft);font-size:.92rem;}
.info-row:first-of-type{border-top:none;}
.info-row .k{color:var(--text-faint);font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;}
.info-row .v{color:var(--text-dim);text-align:right;}
.map-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--font-mono);font-size:.8rem;color:var(--accent);}

.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);}
.field input,.field select,.field textarea{
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:13px 14px;font-family:var(--font-body);font-size:.95rem;
  border-radius:var(--radius);
  transition:border-color var(--t-fast) var(--ease-ui);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
}
.field textarea{resize:vertical;min-height:110px;}
.form-note{font-size:.85rem;color:var(--text-faint);margin-top:18px;}

/* ============================================
   Career application modal
   ============================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(25,24,24,.55);padding:24px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease);
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-panel{
  position:relative;width:100%;max-width:860px;max-height:88vh;overflow-y:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:clamp(28px,4vw,48px);
  transform:translateY(16px);transition:transform .3s var(--ease);
}
.modal-overlay.open .modal-panel{transform:translateY(0);}
.modal-close{
  position:absolute;top:20px;right:20px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--line);color:var(--text-dim);background:transparent;
  transition:border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.modal-close:hover{border-color:var(--accent);color:var(--accent);}
.modal-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;}
.modal-aside h3{font-size:1.5rem;margin:14px 0 12px;}
.modal-aside p{color:var(--text-dim);font-size:.92rem;line-height:1.55;margin-bottom:26px;}
.modal-phone-block{border-top:1px solid var(--line-soft);padding-top:20px;display:flex;flex-direction:column;gap:6px;}
.modal-phone-label{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);}
.modal-phone{font-family:var(--font-body);font-size:1.3rem;color:var(--text);}
.modal-phone:hover{color:var(--accent);}
.modal-phone-hours{font-size:.82rem;color:var(--text-faint);line-height:1.5;}
.modal-form-col .form-grid{margin-bottom:0;}

@media (max-width:700px){
  .modal-grid{grid-template-columns:1fr;gap:28px;}
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width:900px){
  .section-head{grid-template-columns:1fr;}
  .section-head .desc{justify-self:start;max-width:none;}
  .section-head-side{justify-self:start;align-items:flex-start;max-width:none;}
  .services-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .projects-grid{grid-template-columns:1fr;}
  .process-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .stat-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .sd-body,.service-detail:nth-child(even) .sd-body{grid-template-columns:1fr;}
  .service-detail:nth-child(even) .sd-media{order:0;}
  .pd-head{grid-template-columns:1fr;}
  .pd-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
  .contact-layout{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}

/* Raised from 720 to 1024: portrait tablet uses the same slide-in
   drawer and hamburger as mobile (1065:1763). Widening the ceiling
   leaves every rule below identical at mobile widths. */
@media (max-width:1023px){
  nav.main-nav ul{
    position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);
    background:var(--bg-alt);border-left:1px solid var(--line);
    flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;
    padding:32px;
    transform:translateX(100%);transition:transform var(--t-base) var(--ease-ui);
    z-index:200;
  }
  nav.main-nav ul.open{transform:translateX(0);}
  /* The pill chrome belongs to the desktop bar only — on mobile the
     links live in the slide-in panel, so nav is just a container. */
  nav.main-nav{background:none;border:0;box-shadow:none;height:auto;padding-inline:0;}
  /* .nav-cta is no longer a child of <nav>, so this is scoped to the header. */
  header.site-header .nav-cta .btn-primary{display:none;}
  .menu-toggle{display:flex;}
  .utility-bar .hide-mobile{display:none;}
  .stat-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .stat-strip .stat:nth-child(2){border-right:none;}
  .services-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
}

/* ==================================================================
   MOBILE — homepage (Figma 974:628, drawn at 393px)
   ------------------------------------------------------------------
   --container is viewport-relative here so the existing rail/rule
   painting lands 16px in from each edge with no rework. It is
   expressed with 100%, NOT 100vw: 100vw includes the scrollbar, so it
   resolves wider than the real content box and pushes everything
   sideways — that was behind the hero not reaching the edges and the
   Selected Work copy spilling past the right rail.
   ================================================================== */
@media (max-width:640px){
  :root{
    --container:calc(100% - 32px);    /* rails 16px in from both edges */
    --gutter:14px;                    /* text sits at x=30 */
    --gutter-card:10px;               /* cards sit at x=26 */
    --gutter-panel:10px;
  }

  /* The 1260px breakpoint hides the grid; mobile restores it. */
  .section::before,.page-hero::before{display:block;top:9px;bottom:9px;}
  .section::after,.page-hero::after,.grid-rule{display:block;}
  .section,.page-hero{border-bottom:0;}
  .wwd-section::before,main > .page-hero::before{top:0;}

  /* No centre rail exists on mobile, so no rule may carry a centre
     dot. Reverts the engineering rules to the standard two-dot form. */
  .eng-head-section::after,
  .eng-row::after{
    background-image:
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--dot-color),var(--dot-color)),
      linear-gradient(var(--dot-color),var(--dot-color));
    background-size:
      max(0px, calc(50% - (var(--container) / 2) - 9px)) var(--line-w),
      min(calc(var(--container) - 18px), 100%) var(--line-w),
      max(0px, calc(50% - (var(--container) / 2) - 9px)) var(--line-w),
      var(--dot-size) var(--dot-size),
      var(--dot-size) var(--dot-size);
    background-position:
      left center, center center, right center,
      calc(50% - (var(--container) / 2)) center,
      calc(50% + (var(--container) / 2)) center;
  }

  /* Nothing may exceed the viewport. The real fix is the rules below
     that reset desktop widths; this is a backstop so a future stray
     element cannot reintroduce sideways scrolling. clip, not hidden,
     because hidden on <body> also kills position:sticky. */
  html,body{max-width:100%;overflow-x:clip;}

  /* Desktop spacing that the mobile block previously left running:
     the eyebrow carries its own 16px margin on top of the flex gap,
     and both heading blocks reserve a large margin for the card rows
     that follow them. */
  .menu-toggle{border:0;width:auto;height:auto;padding:0;}

  /* ---- global mobile spacing -----------------------------------
     eyebrow -> title 8, title -> subtitle 16, copy -> image/cards 40,
     copy -> button 16. Applied once here rather than per section. */
  /* Six separate rules set this margin per section at higher
     specificity, which is why the eyebrow gap looked different
     everywhere. Normalised to 8px in one place. */
  .section-tag,
  .work-heading-col .section-tag,
  .wwd-head-title .section-tag,
  .why-left .section-tag,
  .careers-v2-head .section-tag,
  .cta-band .section-tag,
  .svc-head-title .section-tag,
  .certs-head-title .section-tag{margin-bottom:8px;}
  /* where a flex gap would stack on top of that margin, zero the gap
     and let the margin alone define the 8px */
  .careers-v2-head{gap:0;}
  .careers-v2-head h2{margin-bottom:16px;}
  .wwd-head-title{gap:0;}
  .wwd-head{gap:16px;margin-bottom:0;}   /* no cards below it on mobile */

  /* .section-head is a 2-col grid with gap:40px on desktop. On mobile
     it collapses to one column and that 40px becomes the title-to-
     subtitle gap — which is the oversized space in every section. */
  .section-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px;}
  .cwb-head{gap:16px;}
  .work-header-row{gap:16px;margin-bottom:40px;}

  /* ---- type scale (981:324) ------------------------------------ */
  .section-tag,.svc-hero-eyebrow,.pj-sortbar-label{font-size:.5rem;}
  .section-head h2,.wwd-head-title h2,.cwb-head h2,
  .work-heading,.why-left h2,.ab-careers-text h2,
  .careers-v2-head h2,.cta-band h2,.svc-head-title h2{
    font-size:1.5rem;line-height:1.2;letter-spacing:-.06em;
  }
  .section-head .desc,.wwd-head-desc,.cwb-head-desc,
  .work-heading-desc,.careers-v2-footer p,.eng-copy p{
    font-size:.75rem;line-height:1.5;
  }
  .btn{height:45px;padding:0 18px;font-size:.875rem;letter-spacing:-.01em;}
  .btn-arrow{width:14px;height:14px;}

  /* ---- header (1035:442): flush to the top, full width, a plain
     white bar with a hairline under it — not a floating pill ------ */
  /* Mobile draws its bar on .wrap, so the desktop bar's own padding,
     fill and hairline come back off here. */
  header.site-header{
    position:fixed;top:0;left:0;right:0;
    max-width:none;margin:0;padding:0;
    background:none;border-bottom:0;
  }
  header.site-header.shrink{top:0;}
  /* The mobile bar does not hide on scroll. */
  header.site-header.is-condensed{transform:none;}
  header.site-header .wrap{
    background:#fff;border:0;border-bottom:.8px solid var(--line);
    border-radius:0;box-shadow:none;
    max-width:none;height:66px;padding-inline:16px;
    display:flex;align-items:center;justify-content:space-between;
  }
  :root{--header-h:66px;}
  header.site-header.is-condensed nav.main-nav{opacity:1;visibility:visible;transform:none;}
  .logo-img{height:32px;}
  /* Pages without a hero start below the bar. Heroes pull back up so
     the header floats over the image: with the hero offset by 66px its
     804px frame ran past the bottom of the screen, which is what
     pushed the copy too low. */
  main{padding-top:66px;}
  .hero,.svc-hero{margin-top:-66px;}

  /* ---- hero (975:128) ------------------------------------------ */
  .hero{height:804px;min-height:804px;}
  .hero-scrim{background:rgba(0,0,0,.3);}
  /* Reset the desktop offset so the copy is placed once, not twice. */
  .hero-content{position:absolute;left:0;right:0;top:0;bottom:0;}
  .hero-content > .wrap{
    display:block;position:static;
    max-width:none;padding-inline:0;height:100%;
  }
  /* The block's BOTTOM edge sits at y=748 in the 804px frame — level
     with the base of the arrow button, which is the alignment the
     Figma ruler shows. (275px was the distance to its top edge.) */
  /* Bottom edge 60px off the base of the image, and the right edge
     held 13px clear of the arrow (16 rail + 32 button + 13 gap = 61),
     so the last line of the title can never run under it. */
  .hero-layout{
    position:absolute;left:16px;right:61px;bottom:60px;
    display:flex;flex-direction:column;gap:8px;max-width:none;
  }
  .hero-eyebrows{margin-bottom:0;}
  .hero-eyebrows{gap:5px;font-size:.5rem;margin-bottom:0;}
  .hero-dot{width:3px;height:3px;}
  .hero h1{
    font-family:var(--font-display);font-weight:400;
    font-size:2.25rem;line-height:1.32;letter-spacing:-.06em;
    text-transform:uppercase;max-width:none;margin:0;
  }
  .hero .lede,.hero-ctas,.stat-row{display:none;}
  .scroll-cue{
    position:absolute;right:16px;bottom:60px;left:auto;
    cursor:pointer;border:0;
    width:32px;height:32px;padding:0;border-radius:8px;
    background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:0;letter-spacing:0;gap:0;
  }
  /* Kill the bob keyframe on the glyph: the button is static. */
  .scroll-cue svg{width:12px;height:12px;animation:none;transform:none;}

  /* ---- what we do (1035:446): 40px below the rule, 28px above --- */
  .wwd-section{padding-top:40px;padding-bottom:28px;}
  .wwd-head{gap:16px;}
  .wwd-head-row{display:flex;flex-direction:column;gap:16px;}
  .wwd-head-title{gap:8px;}
  .wwd-cards{display:none;}

  /* ---- production services (1036:447) --------------------------
     A plain vertical stack — no carousel here. The track is cloned in
     JS to make the desktop loop seamless; those copies carry
     aria-hidden, so hiding them is what takes the stack back from
     eight cards to four. */
  .svc-cards-section{padding-top:60px;padding-bottom:28px;}
  .svc-carousel{padding:0;}
  .svc-car-btn{display:none;}
  .svc-track-window{overflow:visible;}
  .svc-track{
    flex-direction:column;gap:20px;
    transform:none !important;transition:none;
  }
  .svc-track > .service-card-lg{flex:0 0 auto;width:100%;aspect-ratio:341/303;}
  .svc-track > [aria-hidden="true"]{display:none;}
  .service-card-lg-text h3{font-size:1.125rem;}
  .service-card-lg-text p{font-size:.75rem;min-height:0;}
  .service-card-lg-content{padding:0 20px 20px;}
  /* The link arrow is permanent on mobile — there is no hover to
     reveal it — at 45px in brand red. */
  .service-card-lg-arrow{
    width:45px;height:45px;right:14px;top:14px;
    opacity:1;transform:none;
  }

  /* ---- engineering (1036:448) ---------------------------------- */
  .eng-head-section{padding-top:42px;padding-bottom:40px;}
  .eng-cta{margin-top:16px;}
  .eng-row{padding-top:42px;padding-bottom:40px;}
  .eng-mid-rail{display:none;}
  .eng-row-inner{grid-template-columns:1fr;gap:40px;}
  .eng-copy{gap:24px;max-width:none;}
  .eng-lead,.eng-point{gap:8px;}
  .eng-points{gap:16px;}
  .eng-copy h3,.eng-copy h4{font-size:1rem;line-height:1.25;}
  .eng-media,.eng-media-bleed{margin:0;padding:0;min-height:0;}
  .eng-media-bleed{margin-inline:calc(-1 * var(--gutter));}

  /* ---- selected work (1037:449) -------------------------------- */
  .work-section{padding-top:62px;padding-bottom:26px;}
  .work-header-row{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:40px;}
  /* Desktop pins this to width:419px. On a 333px column that alone
     overflowed the viewport by 86px and produced the sideways scroll;
     max-width:none had removed the only thing containing it. */
  .work-heading-desc{width:100%;max-width:none;justify-self:start;}
  .work-frame{aspect-ratio:auto;min-height:0;}
  .work-photo-area{position:relative;width:100%;aspect-ratio:342/240;border:0;}
  .work-card{position:absolute;inset:0;}
  .work-panel{
    position:relative;inset:auto;width:100%;margin-top:4px;
    padding:21px;border-radius:14px;
  }
  .work-count{font-size:.875rem;}
  .work-title{margin-top:14px;gap:4px;}
  .work-title .title-main{font-size:1.375rem;}
  .work-title .title-loc{font-size:1rem;}
  .work-sub{margin-top:16px;font-size:1rem;}
  .work-desc{margin-top:8px;font-size:.75rem;line-height:1.5;}
  .work-panel-actions{margin-top:24px;gap:12px;}
  .work-panel-actions .car-btn{width:45px;height:45px;}
  .work-pill-btn{height:45px;padding:0 18px;font-size:.875rem;}

  /* ---- why weld plus (1037:450) --------------------------------
     The inner 2x2 grid is inset 16px from the outer rails and split by
     a centre divider; it must not run into the rails. */
  .why-section{padding-top:62px;padding-bottom:61px;}
  .why-frame{display:flex;flex-direction:column;gap:62px;}
  .why-left h2{max-width:16ch;}
  .why-stats{
    position:relative;display:grid;grid-template-columns:1fr 1fr;
    gap:48px 0;border:0;padding:0;
    width:auto;                        /* desktop pins this to 467px */
    margin-inline:2px;                 /* 16px in from the rails */
  }
  /* Dashed, matching desktop — only the geometry changes for the 2x2. */
  .why-stats::before{                  /* horizontal divider */
    content:'';position:absolute;left:0;right:0;top:50%;
    width:auto;height:var(--line-w);border:0;
    background-image:repeating-linear-gradient(to right,
      var(--line) 0 3px, transparent 3px 6px);
    pointer-events:none;
  }
  .why-stats::after{                   /* vertical divider */
    content:'';position:absolute;top:0;bottom:0;left:50%;
    width:var(--line-w);height:auto;border:0;
    background-image:repeating-linear-gradient(to bottom,
      var(--line) 0 3px, transparent 3px 6px);
    pointer-events:none;
  }
  .why-stats .stat{align-items:center;text-align:center;border:0;padding:0 8px;}
  .why-stats .num{font-size:1.75rem;}
  .why-stats .label{font-size:.5rem;line-height:1.4;}

  /* ---- CWB (1037:451) ------------------------------------------ */
  .cwb-section{padding-top:61px;padding-bottom:26px;}
  .cwb-head{grid-template-columns:1fr;gap:16px;}
  .cwb-head-desc{justify-self:start;max-width:none;}
  .cwb-panel{grid-template-columns:1fr;min-height:0;margin-top:40px;}
  .cwb-panel::before{display:none;}
  .cwb-logo{padding:0;height:264px;}
  .cwb-logo img{width:min(266px,78%);}
  .cwb-points{
    padding:20px;gap:16px;
    border-top:.8px solid var(--card-line);
  }
  .cwb-point{gap:8px;}
  .cwb-point h3{font-size:1rem;}
  .cwb-point p{font-size:.75rem;line-height:1.5;}

  /* ---- careers -------------------------------------------------- */
  .careers-v2{padding-top:62px;padding-bottom:28px;}
  .careers-v2-head h2{max-width:none;}
  .careers-toggle-btn{height:47px;padding:0 24px;font-size:1rem;}
  .careers-v2-footer{flex-direction:column;align-items:flex-start;gap:24px;margin-top:40px;}
  .careers-v2-footer p{max-width:none;}

  /* ---- start a conversation: 60px clear of the careers rule ----- */
  .cta-band{margin-top:0;padding-top:60px;padding-bottom:34px;}
  .cta-band h2{max-width:none;}
  .cta-band .actions{gap:6px;flex-wrap:nowrap;}
  .cta-band .actions .btn{flex:1 1 auto;white-space:nowrap;padding-inline:14px;}

  .footer-logo .logo-img{height:30px;}
}

/* ---- MOBILE careers cluster (Group 84 — 341x861) ----------------
   The tile-morph survives on mobile, just re-stacked: the big card and
   its paired square swap footprints at the top and again at the
   bottom, so cards still shrink into squares rather than the cluster
   collapsing into a plain list. */
@media (max-width:640px){
  .careers-cluster{aspect-ratio:341/861;display:block;}
  .cc-slot{position:absolute;}
  .cc-main{left:0.00%;top:30.31%;width:100.00%;height:39.37%;border-width:3px;z-index:2;}

  .is-welding .cc-lt{left:0.00%;top:0.00%;width:82.70%;height:29.85%;}
  .is-welding .cc-rt{left:83.87%;top:23.46%;width:16.13%;height:6.39%;}
  .is-welding .cc-lb{left:0.00%;top:70.15%;width:16.13%;height:6.39%;}
  .is-welding .cc-rb{left:17.30%;top:70.15%;width:82.70%;height:29.85%;}

  .is-trade   .cc-lt{left:83.87%;top:23.46%;width:16.13%;height:6.39%;}
  .is-trade   .cc-rt{left:0.00%;top:0.00%;width:82.70%;height:29.85%;}
  .is-trade   .cc-lb{left:17.30%;top:70.15%;width:82.70%;height:29.85%;}
  .is-trade   .cc-rb{left:0.00%;top:70.15%;width:16.13%;height:6.39%;}

  .careers-card-text{left:14px;right:14px;bottom:14px;gap:4px;}
  .careers-card-text h4{font-size:1rem;}
  .careers-card-text p{font-size:.6875rem;}
  .careers-card-text .tag-label{font-size:.5rem;}
}

/* ==================================================================
   Touch devices: no hover states.
   On a touchscreen :hover latches after a tap and stays until you tap
   elsewhere, so these read as stuck rather than interactive. Better to
   switch them off than to fight them with resets.
   ================================================================== */
@media (hover:none){
  .btn:hover,.btn-primary:hover,.btn-ghost:hover{transform:none;}
  .work-pill-btn:hover{background:var(--text);border-color:var(--line);color:#fff;}
  .work-panel-actions .car-btn:hover{background:transparent;border-color:var(--text);color:var(--text);}
  .pj-nav:hover{background:#fff;border-color:var(--line);color:#000;}
  .svc-car-btn:hover{background:#fff;border-color:var(--line);color:#000;}
  .service-card-lg:hover img{transform:none;}
  .service-card-lg:hover .service-card-lg-arrow{opacity:1;transform:none;}
  .ab-proj:hover .ab-proj-img img{width:var(--w);height:var(--h);left:var(--l);top:var(--t);}
  nav.main-nav a.nav-link:hover{color:var(--text);}
  nav.main-nav a.nav-link.active:hover{color:var(--accent);}
  .nav-fly-item:hover .nav-fly-title{color:var(--text);}
  .cm-close:hover{background:#fff;color:var(--text);}
  .logo:hover,.ct-accent:hover{text-decoration:none;}
}

/* ==================================================================
   MOBILE — services page (Figma 997:977, 393px frame)
   ------------------------------------------------------------------
   Section rhythm, gutters and type all come from the homepage mobile
   block above; only the layout changes here. Each service section
   becomes one vertical column: the photo card, then the "what we do"
   card, then the numbered cards — all 341px wide, 20px apart.
   ================================================================== */
@media (max-width:640px){
  /* ---- hero: same 804px frame as the homepage ------------------ */
  .svc-hero{height:804px;min-height:804px;}
  /* Same treatment as the homepage: reset the inherited offset, then
     place the copy once — bottom edge 60px up, right edge 61px clear
     of the arrow (16 rail + 32 button + 13 gap). */
  .svc-hero-content{position:absolute;inset:0;bottom:0;}
  .svc-hero-row{
    position:absolute;left:16px;right:61px;bottom:60px;
    max-width:none;padding-inline:0;
    flex-direction:column;align-items:flex-start;gap:8px;
  }
  .svc-hero-text{width:auto;gap:8px;}
  .svc-hero-eyebrow{margin-bottom:0;}
  .svc-hero h1{
    font-weight:400;                 /* desktop uses Oswald Medium */
    font-size:2.25rem;line-height:1.32;letter-spacing:-.06em;
    max-width:none;margin:0;
  }
  .svc-hero .lede{display:none;}     /* not in the mobile frame */

  /* ---- "Go to" chips: two per row (1006:1459) ------------------ */
  .svc-sortbar{padding-top:40px;}
  .svc-sortbar .grid-rule{margin-top:28px;}
  .svc-sortbar .wrap{gap:16px;}
  .svc-sortbar-label{font-size:.75rem;}
  .svc-chips{gap:8px 4px;max-width:263px;}
  /* 1006:1457: 10px mono, 8px/10px padding, radius 6. Height comes
     from the padding rather than being fixed, so the larger type has
     room. */
  .svc-chip{
    height:auto;padding:8px 10px;font-size:.625rem;line-height:1.1;
    border-radius:6px;
  }

  /* ---- service sections ---------------------------------------- */
  .svc-section{padding-top:62px;padding-bottom:28px;}
  .svc-head{
    flex-direction:column;align-items:flex-start;gap:16px;
    margin-bottom:40px;
  }
  .svc-head-title{gap:0;}
  .svc-head-title h2{font-size:1.5rem;line-height:1.2;letter-spacing:-.06em;}

  /* One column of cards, 20px apart, all 341 wide (10px off the
     rails — the card gutter already places them there). */
  .svc-cards{display:flex;flex-direction:column;gap:20px;}
  /* Photo always leads, then the "what we do" card. Desktop alternates
     the pair per section; order:1/2 normalises that for the stack
     without touching the markup. */
  .svc-large-row{display:flex;flex-direction:column;gap:20px;}
  .svc-large-row .svc-photo-card{order:1;}
  .svc-large-row .svc-what-card{order:2;}
  .svc-small-row,
  .svc-small-row-3,
  .svc-small-row-4{display:flex;flex-direction:column;gap:20px;}

  /* photo card is square (341x341); the copy card is taller and
     sized by its own content rather than a fixed ratio */
  .svc-photo-card{aspect-ratio:1;}
  .svc-what-card{
    aspect-ratio:auto;min-height:0;
    padding:21px;gap:0;
  }
  /* The art fills the card with flex:1 on desktop, which works only
     because the card has a fixed aspect ratio. With aspect:auto here
     it collapsed to zero height — which is why the drawings vanished.
     Size it from the artwork instead. */
  .svc-what-art{flex:none;padding-bottom:0;margin-bottom:35px;min-height:0;}
  .svc-what-art img{width:100%;height:auto;max-height:none;}
  /* Rotating sets stack absolutely; let the first frame stay in flow so
     it gives the container a height for the others to fill. */
  .svc-what-art[data-artset] .svc-art-frame:first-of-type{
    position:relative;width:100%;height:auto;
  }
  .svc-what-art[data-artset] .svc-art-frame:not(:first-of-type){
    width:100%;height:100%;object-fit:contain;
  }
  .svc-what-body h3{font-size:1rem;line-height:1.25;margin-bottom:8px;}
  .svc-what-body p{font-size:.75rem;line-height:1.5;}

  /* numbered cards: 341x206 with 21px padding (999:1000) */
  .svc-small-card{min-height:206px;padding:21px;}
  .svc-idx{font-size:.875rem;}
  .svc-small-body{margin-top:auto;gap:8px;}
  .svc-small-body h4{font-size:1rem;line-height:1.25;}
  .svc-small-body p{font-size:.75rem;line-height:1.5;}

  /* the aluminum section is still awaiting copy — keep its reserved
     heights from collapsing the stack */
  .svc-section-empty .svc-head-title h2,
  .svc-section-empty .svc-what-body p,
  .svc-section-empty .svc-small-body h4,
  .svc-section-empty .svc-small-body p{min-height:0;}
}

/* ==================================================================
   MOBILE — projects template (Figma 1002:1435, 393px frame)
   Applies to all five states: all / structural / misc / stairs /
   aluminum. Spacing, rails and type inherit from the homepage block.
   ================================================================== */
@media (max-width:640px){
  /* ---- hero: heading, then the photo, then the dark card -------- */
  .pj-hero{padding-top:40px;padding-bottom:0;}
  .pj-hero-head{gap:0;margin-bottom:40px;}
  .pj-hero-head{gap:0;}   /* the tag's own 8px margin defines it */
  .pj-hero-row{flex-direction:column;align-items:flex-start;gap:16px;}
  .pj-hero h1{
    font-size:1.5rem;line-height:1.2;letter-spacing:-.06em;
    width:auto;max-width:none;
  }
  .pj-hero-desc{width:auto;max-width:none;font-size:.75rem;line-height:1.5;}

  /* the card sits under the photo rather than overlapping it */
  .pj-feature{
    aspect-ratio:auto;background:none;border-radius:0;overflow:visible;
    display:flex;flex-direction:column;gap:4px;
  }
  .pj-feature > img{
    position:relative;inset:auto;width:100%;height:auto;
    aspect-ratio:341/294;border-radius:var(--radius-md);
  }
  /* 341x194 with a 20px pad (1002:1300). Figma fixes the height and lets
     the slack fall above "Learn More", so min-height + an auto top margin
     on the link reproduces that and still grows for the longer subtitles
     carried by the other four filter states. */
  .pj-feature-card{
    position:relative;right:auto;bottom:auto;
    width:100%;max-width:none;min-height:194px;padding:20px;
    border-radius:14px;
    display:flex;flex-direction:column;align-items:flex-start;
  }
  .pj-feature-card h2 .t-main{
    font-size:1.25rem;line-height:1.2;letter-spacing:-.06em;
  }
  .pj-feature-card > p{font-size:1.125rem;line-height:1.4;margin:16px 0 auto;}
  .pj-feature-card .pj-learn{margin-top:24px;font-size:.875rem;gap:10px;}
  .pj-feature-card .pj-learn svg{width:14px;height:14px;}

  /* ---- filter: chips collapse into a dropdown (1045:454) -------- */
  /* the filter band sits outside the grid (rails start below it, 1046:457) */
  .pj-toolbar{padding-top:40px;padding-bottom:28px;}
  .pj-toolbar .grid-rule-top{display:none;}
  .pj-toolbar::before{display:none;}
  .pj-toolbar::after{display:block;}   /* rule below the dropdown instead */
  .pj-sortbar{position:relative;gap:0;}
  .pj-sortbar-label{display:none;}
  .pj-filter-toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:#fff;border:.8px solid var(--line);border-radius:6px;
    box-shadow:0 1px 2px rgba(0,0,0,.1);
    padding:8px 10px;cursor:pointer;
    /* Btn2 from the design system. Was .625rem (10px), which read as
       undersized on a phone once Safari's autosizing was switched off. */
    font-family:var(--font-mono);font-weight:500;font-size:.75rem;
    text-transform:uppercase;color:var(--text);
  }
  .pj-filter-toggle svg{transition:transform var(--t-base) var(--ease-ui);}
  .pj-filter-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  /* the chip row becomes the panel */
  .pj-sortbar .svc-chips{
    position:absolute;top:calc(100% + 6px);left:0;z-index:30;
    /* 1045:454: panel is 197 wide with 14px padding and 18px between
       items; the items are the same 10px mono as the trigger, not 8. */
    /* Figma (1007:1482) has 14px padding against an 18px item gap,
       which reads tighter at the edges than between rows; padding
       raised to match the gap. */
    flex-direction:column;align-items:flex-start;gap:18px;
    width:197px;padding:18px;
    background:#fff;border:.8px solid var(--line);border-radius:8px;
    box-shadow:0 1px 2px rgba(0,0,0,.1), 0 10px 24px rgba(0,0,0,.10);
    max-width:none;
  }
  .pj-sortbar .svc-chips:not(.is-open){display:none;}
  .pj-sortbar .svc-chip{
    background:none;border:0;box-shadow:none;border-radius:0;
    padding:0;height:auto;font-size:.75rem;line-height:1.1;color:var(--text);
    text-align:left;justify-content:flex-start;width:100%;
  }
  .pj-sortbar .svc-chip.is-active{color:var(--accent);border-color:transparent;}

  /* ---- project rows: photo, then the copy card ------------------ */
  .pj-section{padding-top:42px;padding-bottom:28px;}
  .pj-rail-join{padding-top:62px;}   /* first row sits below the filter */
  .pj-row,.pj-row-reverse{
    display:flex;flex-direction:column;gap:4px;
  }
  .pj-row .pj-photo,.pj-row-reverse .pj-photo{order:1;min-height:0;aspect-ratio:341/271;}
  .pj-row .pj-card,.pj-row-reverse .pj-card{order:2;min-height:0;padding:21px;}
  .pj-card-tag{font-size:.5rem;margin-bottom:8px;}
  .pj-card h2{gap:4px;}
  .pj-card .t-main{font-size:1.125rem;line-height:1.2;}
  .pj-card .t-loc{font-size:1rem;line-height:1.25;}
  .pj-card > p{margin:16px 0 0;font-size:.75rem;line-height:1.5;}
  .pj-nav{display:none;}   /* no photo arrows on mobile */

  /* 28px below the rule above, 60px above the CTA band's rule */
  .pj-viewmore{margin-top:0;padding-top:28px;padding-bottom:60px;}
  .pj-viewmore .btn{height:45px;}
}

/* ==================================================================
   ABOUT — mobile (1007:1723). Content and imagery are the desktop
   ones; only the layout and the spacing scale change, and that scale
   is the homepage's, not a second set of numbers.
   ================================================================== */
@media (max-width:640px){
  /* ---- hero: title block, then the video card (341x563) --------- */
  .ab-hero{padding-top:40px;padding-bottom:60px;}
  .ab-hero-head{gap:0;margin-bottom:40px;}   /* the tag's own 8px margin */
  .ab-hero h1{
    width:auto;max-width:none;
    font-size:1.5rem;line-height:1.2;letter-spacing:-.06em;
  }
  .ab-hero-media{aspect-ratio:341/563;}

  /* ---- story: one column, 18px/1.5 copy (1007:1733) ------------- */
  .ab-story-section{padding-top:42px;padding-bottom:28px;}
  .ab-story{width:auto;max-width:none;margin:0;gap:32px;}
  .ab-story p,.ab-list li{font-size:1.125rem;line-height:1.5;}
  .ab-list{gap:16px;padding-left:9px;}
  .ab-list li::before{left:-9px;top:13px;width:4px;height:4px;}

  /* ---- latest projects: a swipe track, not a grid (1009:1821) ----
     The track starts on the card gutter and its right edge lands on
     the rail, so the second card is cut there and reads as swipeable.
     That resting state is the whole affordance — hence no arrows and
     no scrollbar. */
  .ab-latest{padding-top:62px;padding-bottom:28px;}
  .ab-latest-head{
    flex-direction:column;align-items:flex-start;
    gap:16px;margin-bottom:40px;
  }
  .ab-latest-head h2{
    max-width:none;font-size:1.5rem;line-height:1.2;letter-spacing:-.06em;
  }
  .ab-latest-head .btn-arrow{display:none;}   /* 89x45, text only (1007:1806) */
  .ab-latest-grid{
    display:flex;gap:20px;
    margin-inline:calc(var(--gutter-card) - var(--gutter)) calc(-1 * var(--gutter));
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .ab-latest-grid::-webkit-scrollbar{display:none;}
  .ab-proj{flex:0 0 290px;width:290px;scroll-snap-align:start;}
  .ab-proj-img{margin-bottom:16px;border-radius:16px;}
  .ab-proj-desc{font-size:1.125rem;line-height:1.3;margin-bottom:16px;}
  .ab-proj-meta{gap:12px;font-size:.75rem;line-height:1.2;}
  .ab-proj-meta span:last-child{color:#4f4f4f;}

  /* ---- careers: copy above the collage -------------------------- */
  .ab-careers{padding-top:62px;padding-bottom:28px;}
  .ab-careers-row{
    flex-direction:column;align-items:flex-start;
    gap:35px;margin-inline:0;
  }
  .ab-careers-text{width:auto;max-width:none;gap:16px;}
  .ab-careers-text p{font-size:.75rem;line-height:1.5;}
  /* The box is 354 wide from x=23, but its third photo reaches x=393 —
     Figma clips it on the right rail, so the box has to bleed out to
     the rail and clip rather than stop short at the text column. */
  .ab-careers-collage{
    width:auto;max-width:none;aspect-ratio:354/213;
    margin-left:-7px;margin-right:calc(-1 * var(--gutter));
    align-self:stretch;overflow:hidden;
  }
}

/* The mobile collage box is 354x213, not the desktop 565x270, so the
   three photos need their own percentages (1009:1858). */
@media (max-width:640px){
  .ab-collage-1{left:3.11%;top:23.94%;width:46.05%;height:58.22%;}
  .ab-collage-2{left:28.53%;top:0;width:42.14%;height:50.23%;}
  .ab-collage-3{left:55.65%;top:35.21%;width:48.87%;height:61.5%;}
}

/* ==================================================================
   FORMS — mobile (1071:2533 quote page, 1079:3063 careers modal)
   Both cards sit at x=21 in the 393 frame, so they bleed 9px outside
   the text column to reach 351 wide.
   ================================================================== */
@media (max-width:640px){
  /* ---- quote page ---------------------------------------------- */
  .ct-section{padding-top:20px;padding-bottom:40px;}
  .ct-row{
    grid-template-columns:1fr;gap:32px;
    margin-inline:-9px;               /* 30 -> 21, 363 -> 372 */
  }
  /* Figma leads with the form and puts the contact card underneath;
     the DOM has them the other way round for reading order. */
  .ct-form-card{order:1;}
  .ct-info{order:2;}

  .ct-form-card{padding:21px;gap:32px;border-radius:var(--radius-md);}
  .ct-form-card h2,.ct-info h1{font-size:1.375rem;line-height:1.2;}
  .ct-form{gap:16px;}
  .ct-grid-2{grid-template-columns:1fr;gap:16px;}
  .ct-field{gap:6px;}
  .ct-field label{font-size:.5rem;}
  .ct-field input,.ct-field input[type="file"]{height:45px;}
  .ct-field textarea{min-height:108px;}
  .ct-field input,.ct-field textarea{font-size:.75rem;}
  .ct-submit{margin-top:16px;}

  .ct-info{padding:21px;gap:32px;justify-content:flex-start;}
  .ct-info-head{gap:10px;}
  .ct-info-head p{font-size:.75rem;line-height:1.4;}
  .ct-facts{gap:16px;}
  .ct-fact dt{font-size:.625rem;}
  .ct-fact dd,.ct-fact-sub dt{font-size:.75rem;}
  .ct-fact-sub dt{max-width:135px;}
  .ct-accent{font-size:.75rem;}

  /* ---- careers modal ------------------------------------------- */
  .cm-panel{
    width:min(351px, calc(100% - 42px));
    padding:20px;border-radius:var(--radius-md);
  }
  .cm-close{top:20px;right:20px;}
  /* Figma order is intro, form, then the call and hours blocks — but
     all three live inside .cm-aside, so the aside has to stop being a
     box before `order` can separate its children. */
  .cm-grid{display:flex;flex-direction:column;gap:32px;}
  .cm-aside{display:contents;}
  .cm-intro{order:1;gap:14px;}
  .cm-form{order:2;gap:16px;}
  .cm-aside > .ct-rule,.cm-block{order:3;}   /* display:contents does not change the DOM */
  .cm-head{gap:8px;}
  .cm-aside h3{font-size:1.375rem;line-height:1.2;}
  .cm-intro p{font-size:.75rem;line-height:1.4;}
  .cm-label{font-size:.625rem;}
  .cm-phone{font-size:1.25rem;}
  .cm-hours > span{font-size:.75rem;}
  .cm-block{gap:14px;}
}

/* ==================================================================
   TABLET PORTRAIT — 641 to 1024, drawn at 768 (1059:1029)
   Rails land at 32 and 736, so the container is the viewport less
   64. Text sits 20 inside the rail, cards 16, panels 18. Unlike
   mobile there IS a centre rail, so the desktop centre-dot rules on
   the engineering rules are left alone.
   ================================================================== */
@media (min-width:641px) and (max-width:1023px){
  :root{
    --container:calc(100% - 64px);   /* rails 32px in from both edges */
    --gutter:20px;                   /* text at x=52 */
    --gutter-card:16px;              /* cards at x=48 */
    --gutter-panel:18px;             /* panels at x=50 */
  }

  /* The 1260 breakpoint hides the grid; tablet paints it again. */
  .section::before,.page-hero::before{display:block;top:9px;bottom:9px;}
  .section::after,.page-hero::after,.grid-rule{display:block;}
  .section,.page-hero{border-bottom:0;}
  .wwd-section::before,main > .page-hero::before{top:0;}

  html,body{max-width:100%;overflow-x:clip;}

  /* ---- header: the 768x50 bar with a hamburger (1065:1763) ------ */
  header.site-header{
    position:fixed;top:0;left:0;right:0;
    max-width:none;margin:0;padding:0;
    background:none;border-bottom:0;
  }
  header.site-header.shrink{top:0;}
  header.site-header.is-condensed{transform:none;}
  header.site-header .wrap{
    background:#fff;border:0;border-bottom:.8px solid var(--line);
    border-radius:0;box-shadow:none;
    max-width:none;height:50px;padding-inline:33px;
    display:flex;align-items:center;justify-content:space-between;
  }
  :root{--header-h:50px;}
  header.site-header.is-condensed nav.main-nav{opacity:1;visibility:visible;transform:none;}
  .logo-img{height:23px;}
  .menu-toggle{border:0;width:32px;height:32px;padding:0;}
  .menu-toggle svg{width:24px;height:19px;}
  main{padding-top:50px;}
  .hero,.svc-hero{margin-top:-50px;}

  /* ---- global spacing, same scale as mobile -------------------- */
  .section-tag,
  .work-heading-col .section-tag,
  .wwd-head-title .section-tag,
  .why-left .section-tag,
  .careers-v2-head .section-tag,
  .cta-band .section-tag,
  .svc-head-title .section-tag,
  .certs-head-title .section-tag{margin-bottom:8px;}
  .careers-v2-head{gap:0;}
  .wwd-head-title{gap:0;}
  .wwd-head{gap:16px;margin-bottom:0;}
  .section-head{grid-template-columns:1fr;gap:16px;margin-bottom:32px;}
  .cwb-head{grid-template-columns:1fr;gap:16px;}
  .work-header-row{gap:16px;margin-bottom:32px;}
  .btn{height:45px;padding:0 18px;font-size:.875rem;}
  .btn-arrow{width:14px;height:14px;}
  .scroll-cue{display:none;}
}

/* ==================================================================
   TABLET — homepage (1059:1029)
   ================================================================== */
@media (min-width:641px) and (max-width:1023px){
  /* ---- type scale (768 frame) ---------------------------------- */
  .section-tag,.svc-hero-eyebrow,.pj-sortbar-label{font-size:.5rem;}
  .section-head h2,.wwd-head-title h2,.cwb-head h2,
  .work-heading,.why-left h2,.ab-careers-text h2,
  .careers-v2-head h2,.cta-band h2,.svc-head-title h2,
  .pj-hero h1,.ab-hero h1,.ab-latest-head h2,.svc-hero h1{
    font-size:1.75rem;line-height:1.2;letter-spacing:-.06em;
  }
  .section-head .desc,.wwd-head-desc,.cwb-head-desc,
  .work-heading-desc,.careers-v2-footer p,.eng-copy p,
  .pj-hero-desc,.ab-careers-text p{font-size:.75rem;line-height:1.5;}

  /* ---- hero: 804 tall, not the full viewport (1059:1031) ------- */
  .hero{height:804px;}

  /* ---- what we do: heading only, no cards --------------------- */
  .wwd-section{padding-top:60px;padding-bottom:28px;}
  .wwd-head-row{display:flex;flex-direction:column;gap:16px;}
  .wwd-head-title{gap:0;}
  .wwd-head-desc{width:273px;max-width:100%;}
  .wwd-cards{display:none;}

  /* ---- production services: 280px swipe track (1060:1102) ------
     Four 280px cards with a 12px gap overflow the 688 window, so the
     track scrolls natively. The JS clones are for the desktop loop
     and would double the card count here, hence hiding them. */
  .svc-cards-section{padding-top:62px;padding-bottom:28px;}
  .svc-carousel{padding:0;}
  .svc-car-btn{display:none;}
  .svc-track-window{
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gutter-card) - var(--gutter)) calc(-1 * var(--gutter));
  }
  .svc-track-window::-webkit-scrollbar{display:none;}
  .svc-track{
    gap:12px;transform:none !important;transition:none;
  }
  .svc-track > .service-card-lg{
    flex:0 0 280px;width:280px;aspect-ratio:280/375;scroll-snap-align:start;
  }
  .svc-track > [aria-hidden="true"]{display:none;}
  .service-card-lg-text h3{font-size:1.125rem;}
  .service-card-lg-text p{font-size:.75rem;min-height:0;}
  .service-card-lg-content{padding:0 20px 20px;}
  /* Permanent link arrow, same as mobile — tablet has no hover. */
  .service-card-lg-arrow{
    width:45px;height:45px;right:14px;top:14px;
    opacity:1;transform:none;
  }
  .service-card-lg:hover img{transform:none;}

  /* ---- engineering: two columns on the centre rail ------------- */
  .eng-head-section{padding-top:62px;padding-bottom:28px;}
  .eng-cta{margin-top:16px;}
  .eng-row{padding-top:28px;padding-bottom:28px;min-height:0;}
  /* The 900px fallback collapses this to one column, which is why the
     drawing sat under the copy instead of beside it. Two columns with
     no gap puts the split exactly on the centre rail (measured: media
     starts at x=384 in a 768 viewport). */
  .eng-row-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:center;}
  /* The base ::before paints only the two outer rails; Figma has a
     third on the centre line between the copy and the drawing
     (1095:160). Measured: 2 layers before, 3 after. */
  /* Rows only — the head has no second column, so a centre rail there
     just cuts through the title. */
  .eng-row::before{
    background-image:
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line));
    background-size:var(--line-w) 100%,var(--line-w) 100%,var(--line-w) 100%;
    background-position:left 32px top,center top,right 32px top;
    background-repeat:no-repeat;
  }
  /* Full-width measure hurts readability here. */
  .eng-head-section .section-head .desc{max-width:70%;}
  .eng-copy{gap:24px;max-width:295px;}
  .eng-media{padding-inline:20px;}

  /* ---- selected work ------------------------------------------ */
  .work-section{padding-top:61px;padding-bottom:28px;}
  .work-header-row{flex-direction:column;align-items:flex-start;}
  .work-heading-desc{width:260px;max-width:100%;}

  /* ---- why weld plus ------------------------------------------ */
  .why-section{padding-top:62px;padding-bottom:28px;}
  .why-left{max-width:221px;}
  .why-stats{width:239px;}

  /* ---- CWB ---------------------------------------------------- */
  .cwb-section{padding-top:62px;padding-bottom:28px;}
  .cwb-head-desc{justify-self:start;max-width:274px;}
  /* The panel's own type was left on the desktop scale: only the
     mobile block ever listed .cwb-point, so at tablet the heading
     stayed 20px and the body 18px against Figma's 18 and 12
     (1062:1612). */
  .cwb-point{gap:8px;}
  .cwb-point h3{font-size:1.125rem;line-height:1.1;letter-spacing:-.04em;}
  .cwb-point p{font-size:.75rem;line-height:1.5;}

  /* ---- careers: centred head, then the collage ---------------- */
  .careers-v2-section{padding-top:62px;padding-bottom:28px;}
  .careers-v2-head{max-width:334px;gap:0;}
  .careers-v2-head h2{margin-bottom:16px;}
  /* 1065:1696: subtitle ends at 72, button starts at 88. The base
     gap:60px was never overridden here. */
  .careers-v2-footer{gap:16px;}
  .careers-v2-footer p{width:441px;max-width:100%;}

  /* ---- CTA band ----------------------------------------------- */
  .cta-band{margin-top:0;padding-top:62px;padding-bottom:32px;}
  .cta-band h2{max-width:375px;}
  .cta-band .actions{gap:6px;}
}

/* ==================================================================
   TABLET — services (1065:1740), projects (1071:1985), about (1071:2116)
   ================================================================== */
@media (min-width:641px) and (max-width:1023px){
  /* ---- services ------------------------------------------------ */
  .svc-hero{height:804px;min-height:0;}
  /* The "Go to" bar sits on the rail, not in the text column. */
  .svc-sortbar > .wrap{padding-inline:0;}
  /* The bar's own bottom padding pushed its rule 30px above the next
     section's top edge, so the rails began 35px below the line instead
     of 4. Zeroing it puts the rule on the boundary; .svc-section's
     62px padding still carries the gap to the heading. */
  .svc-sortbar{display:flex;flex-direction:column;gap:16px;padding-bottom:0;align-items:stretch;}
  /* .wrap's max-width:calc(100% - 64px) resolves against the flex
     content size, so as a flex item it shrank to the chips' width
     (619px) and centred at x=115 instead of sitting on the rail.
     width:100% makes it 785 wide at x=32 — measured. */
  .svc-sortbar > .wrap{width:100%;}
  .svc-sortbar .svc-chips{gap:8px;flex-wrap:wrap;}
  .svc-section{padding-top:62px;padding-bottom:28px;}
  .svc-head-title{max-width:275px;}
  .svc-head-title .section-tag{margin-bottom:8px;}
  .svc-head-title h2{margin-bottom:16px;}
  .svc-cards{gap:20px;}
  /* Every block goes full width; the desktop two-up and the 3/4-card
     rows all collapse to one column at 668. */
  .svc-large-row{grid-template-columns:1fr;gap:20px;}
  .svc-small-row-3,.svc-small-row-4{grid-template-columns:1fr;gap:20px;}
  .svc-what-body p{max-width:none;}

  /* ---- projects ------------------------------------------------ */
  .pj-hero{padding-top:62px;padding-bottom:0;}
  .pj-hero-row{flex-direction:column;align-items:flex-start;gap:16px;}
  .pj-hero h1{width:auto;max-width:495px;}
  .pj-hero-desc{width:auto;max-width:495px;}
  .pj-hero-head{margin-bottom:32px;}
  /* Photo runs rail to rail with the card overlapping it, 20px in
     from the right rail and 20px up from the photo's bottom edge —
     the desktop treatment, not the mobile stack. */
  .pj-feature{
    margin-inline:calc(-1 * var(--gutter));
    aspect-ratio:704/540;border-radius:var(--radius-md);overflow:hidden;
  }
  .pj-feature > img{position:absolute;inset:0;width:100%;height:100%;}
  .pj-feature-card{
    position:absolute;right:20px;bottom:20px;left:auto;
    width:284px;max-width:none;min-height:194px;padding:20px;border-radius:14px;
  }
  .pj-feature-card h2 .t-main{font-size:1.125rem;line-height:1.2;letter-spacing:-.06em;}
  .pj-feature-card > p{font-size:1rem;line-height:1.4;margin:16px 0 auto;}
  .pj-feature-card .pj-learn{margin-top:24px;font-size:.875rem;}
  /* Chips stay a visible row here — the dropdown is mobile only. */
  .pj-filter-toggle{display:none;}
  .pj-sortbar .svc-chips{position:static;display:flex;flex-direction:row;flex-wrap:wrap;
    width:auto;padding:0;background:none;border:0;box-shadow:none;gap:8px;}
  .pj-toolbar{padding-top:32px;padding-bottom:28px;}
  .pj-section{padding-top:62px;padding-bottom:28px;}
  .pj-rail-join{padding-top:62px;}
  .pj-row,.pj-row-reverse{display:flex;flex-direction:column;gap:4px;}
  .pj-row .pj-photo,.pj-row-reverse .pj-photo{order:1;min-height:0;aspect-ratio:668/530;}
  .pj-row .pj-card,.pj-row-reverse .pj-card{order:2;min-height:0;padding:21px;}
  /* No rule existed here, so this fell through to the desktop 28px.
     Figma is 22 at this width; 20 is that less the 2pt reduction. */
  .pj-card .t-main{font-size:1.25rem;line-height:1.2;}
  .pj-card > p{margin:32px 0 0;font-size:.75rem;line-height:1.5;max-width:566px;}
  .pj-nav{display:none;}
  .pj-viewmore{margin-top:0;padding-top:34px;padding-bottom:61px;}
  .pj-viewmore .btn{height:45px;}

  /* ---- about --------------------------------------------------- */
  /* Hero copy and photo both align to the rail here (1071:2118). */
  .ab-hero{padding-top:60px;padding-bottom:60px;}
  .ab-hero-head{gap:0;margin-bottom:32px;margin-inline:calc(-1 * var(--gutter));}
  .ab-hero h1{width:413px;max-width:100%;}
  .ab-hero-media{aspect-ratio:708/563;}
  .ab-story-section{padding-top:62px;padding-bottom:28px;}
  .ab-story{width:auto;max-width:none;margin:0;gap:32px;}
  .ab-story p,.ab-list li{font-size:1.125rem;line-height:1.5;}
  .ab-list{gap:16px;padding-left:18px;}
  .ab-list li::before{left:-18px;top:13px;width:4px;height:4px;}
  .ab-latest{padding-top:62px;padding-bottom:28px;}
  .ab-latest-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px;}
  .ab-latest-head h2{max-width:none;}
  .ab-latest-head .btn-arrow{display:none;}
  /* Same swipe track as mobile, wider: three 290px cards, 20px apart,
     clipped on the right rail so the third peeks. */
  .ab-latest-grid{
    display:flex;gap:20px;
    margin-inline:calc(var(--gutter-panel) - var(--gutter)) calc(-1 * var(--gutter));
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .ab-latest-grid::-webkit-scrollbar{display:none;}
  .ab-proj{flex:0 0 290px;width:290px;scroll-snap-align:start;}
  .ab-proj-img{margin-bottom:16px;border-radius:16px;}
  .ab-proj-desc{font-size:1.125rem;line-height:1.3;margin-bottom:16px;}
  .ab-proj-meta{gap:12px;font-size:.75rem;line-height:1.2;}
  .ab-proj-meta span:last-child{color:#4f4f4f;}
  /* Careers keeps two columns here, unlike mobile. */
  .ab-careers{padding-top:62px;padding-bottom:28px;}
  .ab-careers-row{flex-direction:row;align-items:center;gap:32px;}
  .ab-careers-text{width:247px;max-width:none;gap:16px;}
  .ab-careers-collage{width:354px;max-width:none;aspect-ratio:354/213;flex-shrink:0;}
}

/* ==================================================================
   TABLET — forms (1079:3168 inquiry, 1080:3606 careers modal)
   ================================================================== */
@media (min-width:641px) and (max-width:1023px){
  /* ---- quote page: info 307 left, form 387 right --------------- */
  .ct-section{padding-top:60px;padding-bottom:60px;}
  .ct-row{grid-template-columns:307px minmax(0,1fr);gap:10px;align-items:start;}
  .ct-info,.ct-form-card{padding:21px;}
  .ct-info h1,.ct-form-card h2{font-size:1.5rem;line-height:1.2;}
  .ct-form-card{gap:32px;}
  .ct-form{gap:16px;}
  .ct-grid-2{grid-template-columns:1fr;gap:16px;}
  .ct-field{gap:6px;}
  .ct-field label{font-size:.5rem;}
  .ct-field input,.ct-field input[type="file"]{height:45px;}
  .ct-field textarea{min-height:108px;}
  .ct-field input,.ct-field textarea{font-size:.75rem;}
  .ct-submit{margin-top:16px;}
  .ct-info{gap:32px;}
  .ct-info-head{gap:10px;}
  .ct-info-head p{font-size:.75rem;line-height:1.4;}
  .ct-facts{gap:16px;}
  .ct-fact dt{font-size:.625rem;}
  .ct-fact dd,.ct-fact-sub dt{font-size:.75rem;}
  .ct-fact-sub dt{max-width:113px;}
  .ct-accent{font-size:.75rem;}

  /* ---- careers modal: 250 left, 320 right ---------------------- */
  .cm-panel{width:min(668px, calc(100% - 104px));padding:33px;}
  .cm-close{top:19px;right:19px;}
  .cm-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start;}
  .cm-aside{gap:16px;}
  .cm-head{gap:8px;}
  .cm-aside h3{font-size:1.5rem;line-height:1.2;}
  .cm-intro{gap:10px;}
  .cm-intro p{font-size:.75rem;line-height:1.4;}
  .cm-label{font-size:.625rem;}
  .cm-phone{font-size:1.25rem;}
  .cm-hours > span{font-size:.75rem;}
  .cm-form{gap:16px;}
}

/* ==================================================================
   TABLET — corrections. The 900px and 720px fallbacks predate this
   breakpoint and sit inside its range, so each component they touch
   has to be reclaimed here explicitly.
   ================================================================== */
@media (min-width:641px) and (max-width:1023px){
  /* ---- 1. hero matches 1059:1031: eyebrow + title only ---------- */
  .hero .lede,.hero-ctas,.stat-row{display:none;}
  .hero-layout{gap:0;}
  .scroll-cue{
    display:flex;align-items:center;justify-content:center;
    position:absolute;right:0;bottom:60px;
    width:34px;height:34px;border-radius:8px;
    background:var(--accent);color:#fff;font-size:0;
    /* font-size:0 collapses the "Scroll" label but not the flex gap,
       and that 6px gap pushed the glyph 3px right of centre. */
    gap:0;
  }
  .scroll-cue svg{width:12px;height:12px;animation:none;transform:none;}

  /* ---- 2. what we do: title constrained to 326 (1060:1058) ------ */
  .wwd-head-title{max-width:326px;}

  /* ---- 3. grid rules: line 4 dot 4 line 4 dot 4 line ------------
     A percentage in background-position resolves against
     (area - image), not area. `left calc(50% + 5px)` does NOT escape
     that — the three-value form only helps when the offset is a pure
     LENGTH. That is why my previous attempts kept landing short: the
     offset shifted with each layer's own width.
     So: the left half is anchored from the left in lengths, the right
     half from the right, and the centre dot uses the `center` keyword,
     which is exactly (area - image) / 2 — the true midpoint. The rail
     is a constant 32px in at this breakpoint, so 27 = 32 - 5 and
     37 = 32 + 5 give a 4px clearance either side of a 2px dot. */
  .section::after,.page-hero::after,.grid-rule{
    background-image:
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--dot-color),var(--dot-color)),
      linear-gradient(var(--dot-color),var(--dot-color));
    background-size:
      27px var(--line-w),
      calc(100% - 74px) var(--line-w),
      27px var(--line-w),
      var(--dot-size) var(--dot-size),
      var(--dot-size) var(--dot-size);
    background-position:
      left 0 center,
      left 37px center,
      right 0 center,
      left 31px center,
      right 31px center;
    background-repeat:no-repeat;
  }
  /* The engineering rules carry a third dot on the centre rail, so the
     middle line is two halves with 4px either side of it. */
  .eng-head-section::after,
  .eng-row::after{
    background-image:
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--dot-color),var(--dot-color)),
      linear-gradient(var(--dot-color),var(--dot-color)),
      linear-gradient(var(--dot-color),var(--dot-color));
    background-size:
      27px var(--line-w),
      calc(50% - 42px) var(--line-w),
      calc(50% - 42px) var(--line-w),
      27px var(--line-w),
      var(--dot-size) var(--dot-size),
      var(--dot-size) var(--dot-size),
      var(--dot-size) var(--dot-size);
    background-position:
      left 0 center,
      left 37px center,
      right 37px center,
      right 0 center,
      left 31px center,
      center center,
      right 31px center;
    background-repeat:no-repeat;
  }

  /* ---- 4. selected work (1095:159) -----------------------------
     Frame is 668 x 493.6: photo 621 x 428 at the top left, card
     292 x 306.6 flush to the right edge and starting 187 down, so it
     never crosses the top of the photo. */
  .work-frame{position:relative;aspect-ratio:668/493.6;min-height:0;}
  .work-photo-area{
    position:absolute;left:0;top:0;width:92.96%;height:86.71%;
    border:4px solid var(--photo-frame);border-radius:var(--radius-md);
    box-sizing:border-box;overflow:hidden;
  }
  .work-card{
    position:absolute;inset:0;display:block;aspect-ratio:auto;
    opacity:0;transform:translateX(-48px);pointer-events:none;
  }
  .work-card.active{opacity:1;transform:none;pointer-events:auto;z-index:1;}
  /* Pinned top *and* bottom, the card was a fixed ~311px and the
     longest description (Burger King) needs 334 — which is how the
     buttons ended up outside it. Anchored to the bottom instead, so
     it grows upward. Measured across all four slides: 334/315/311/311
     with 20px clear below the buttons. */
  .work-panel{
    position:absolute;left:56.29%;right:0;top:auto;bottom:0;
    height:auto;min-height:62.12%;
    width:auto;z-index:3;margin-top:0;
    padding:20px;border-radius:14px;gap:32px;
    background:#f4f4f4;border:.8px solid var(--line);
    box-shadow:0 1px 4px rgba(0,0,0,.1);
  }
  .work-panel-text{gap:8px;}
  .work-count{font-size:.75rem;line-height:1.2;letter-spacing:-.06em;margin-top:0;}
  .work-title{margin-top:0;gap:4px;}
  .work-title .title-main{font-size:1.25rem;line-height:1.2;letter-spacing:-.06em;}
  .work-title .title-loc{font-size:.875rem;line-height:1.4;letter-spacing:-.08em;color:#4f4f4f;}
  .work-sub{margin-top:16px;font-size:.875rem;line-height:1.4;letter-spacing:-.04em;font-weight:500;}
  .work-desc{margin-top:8px;font-size:.75rem;line-height:1.5;letter-spacing:-.06em;color:#4f4f4f;}
  .work-panel-actions{gap:6px;margin-top:auto;align-items:center;flex-wrap:nowrap;}
  .work-arrows{display:flex;gap:6px;}
  .work-panel-actions .car-btn{width:45px;height:45px;border-radius:12px;}
  .work-pill-btn{height:45px;padding:0 18px;font-size:.875rem;border-radius:12px;}
  .work-progress{display:none;}

  /* ---- 5. why weld plus: two columns (1094:155) ---------------- */
  .why-frame{flex-direction:row;align-items:stretch;gap:40px;}
  .why-left{max-width:221px;}
  .why-stats{width:271px;}

  /* ---- 6. careers cluster (1065:1700) --------------------------
     ElevenLabs' pattern, measured on their Case studies section: the
     tiles never move or resize between tabs, the incoming panel is
     stacked at the identical coordinates and the two cross-fade.
     Here the three card faces do not all live in the same slots in
     both states — welding fills main/lt/rb, trade fills main/lb/rt —
     so the positions are assigned per state. The five *visual* slots
     are therefore identical in both, and only the content changes.
     Verified: the sorted rect list is byte-identical across states. */
  .careers-cluster{aspect-ratio:668/640;display:block;}
  .cc-slot{display:block;}
  .cc-main{left:0;top:0;width:53.74%;height:55.78%;}
  /* the two medium card positions */
  .is-welding .cc-lt,.is-trade .cc-lb{left:55.24%;top:13.13%;width:44.76%;height:42.66%;}
  .is-welding .cc-rb,.is-trade .cc-rt{left:8.98%; top:57.34%;width:44.76%;height:42.66%;}
  /* the two empty decorative squares */
  .is-welding .cc-lb,.is-trade .cc-lt{left:55.24%;top:0;      width:11.08%;height:11.56%;}
  .is-welding .cc-rt,.is-trade .cc-rb{left:55.24%;top:57.34%; width:11.08%;height:11.56%;}
  .is-welding .cc-lb,.is-welding .cc-rt,
  .is-trade   .cc-lt,.is-trade   .cc-rb{display:block;}
}

/* ==================================================================
   TABLET — corrections, inner pages
   ================================================================== */
@media (min-width:641px) and (max-width:1023px){
  /* ---- rails: 4px clear of the 2px dot centred on the rule ----- */
  .section::before,.page-hero::before{top:5px;bottom:5px;}
  /* The first section sits directly under the hero, where there is no
     rule and therefore no dot to clear — the 5px read as a gap between
     the rail and the hero image. Desktop and mobile already do this;
     this block was overriding them. */
  .wwd-section::before,main > .page-hero::before{top:0;}

  /* ---- services hero: copy anchored bottom-left, no lede -------- */
  .svc-hero{height:803px;min-height:0;}
  .svc-hero-content{position:absolute;bottom:60px;padding-block:0;}
  .svc-hero-row{flex-direction:column;align-items:flex-start;gap:0;}
  .svc-hero-text{width:auto;max-width:480px;}   /* wraps to 3 lines */
  .svc-hero-eyebrow{margin-bottom:8px;}
  .svc-hero h1{max-width:none;margin-bottom:0;font-size:1.75rem;}
  .svc-hero .lede{display:none;}
  /* The cue is a child of .svc-hero-content, which is itself lifted
     60px off the bottom — so bottom:0 here puts it level with the last
     line of the title, which is what Figma shows (1065:1749). */
  .svc-hero .scroll-cue{bottom:0;right:var(--gutter);}

  /* ---- projects: the hero block carries no grid of its own ------
     Figma's first rule is at y=1000, below the sort bar. */
  .pj-hero::before,.pj-hero::after{display:none;}
  .pj-hero .grid-rule{display:none;}
  /* The sort bar sits outside the grid too: Figma's first rule is the
     one *below* it, at y=1000, with the rails starting after that. */
  .pj-toolbar::before{display:none;}
  .pj-toolbar .grid-rule-top{display:none;}
  .pj-toolbar::after{display:block;}

  /* ---- services: the photo always leads, the drawing follows ----
     Blocks 2 and 4 have them the other way round in the markup for
     the desktop zig-zag; `order` fixes the single column without
     touching that. */
  .svc-photo-card{order:1;}
  .svc-what-card{order:2;}

  /* ---- about: the media is wider than the heading (1071:2122) --- */
  .ab-hero-media{margin-inline:calc(-1 * var(--gutter));}

  /* ---- about careers collage: same 354x213 box as mobile -------
     Without these the desktop 565x270 percentages apply, and since
     each photo's crop offsets are percentages of its own span, a
     changed span aspect shows a different part of the photo — which
     is why it read as the wrong image rather than a moved one. */
  .ab-careers-collage{overflow:hidden;}
  .ab-collage-1{left:3.11%;top:23.94%;width:46.05%;height:58.22%;}
  .ab-collage-2{left:28.53%;top:0;width:42.14%;height:50.23%;}
  .ab-collage-3{left:55.65%;top:35.21%;width:48.87%;height:61.5%;}
}

/* ==================================================================
   TABLET + MOBILE MENU (1098:3614 mobile, 1099:4216 tablet)
   A panel stack, not the old slide-in drawer. Mobile geometry is the
   base; the tablet block below only changes the numbers that differ.
   ================================================================== */
@media (max-width:1023px){
  /* The old drawer is retired. */
  nav.main-nav ul{
    position:static;height:auto;width:auto;background:none;border:0;
    flex-direction:row;transform:none;padding:0;
  }
  nav.main-nav{display:none;}

  /* The overlay spans the viewport so the panel can be positioned
     against it, but it must not swallow clicks — the header (and the
     toggle that closes the menu) sits underneath it. Only the panel
     itself is interactive; Figma has no scrim here either. */
  .nav-menu{position:fixed;inset:0;z-index:150;pointer-events:none;}
  .nav-menu[hidden]{display:none;}

  .nav-panel{
    pointer-events:auto;
    /* 10px clear of the bar, derived from its height so the two can
       never drift apart again. */
    position:absolute;left:6px;right:6px;top:calc(var(--header-h) + 10px);
    background:#fff;border:.8px solid var(--line);border-radius:16px;
    box-shadow:0 1px 2px rgba(0,0,0,.1);
    padding:22px;display:flex;flex-direction:column;
    max-height:calc(100vh - var(--header-h) - 22px);overflow-y:auto;
  }
  .nav-panel[hidden]{display:none;}
  .nav-panel-root{height:503px;justify-content:space-between;}
  .nav-panel-sub{gap:22px;}

  .nav-rows{display:flex;flex-direction:column;gap:24px;list-style:none;margin:0;padding:0;}
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;
    font-family:var(--font-body);font-weight:500;font-size:.875rem;
    line-height:1.1;letter-spacing:-.04em;color:var(--text);
  }
  .nav-row-chev{flex:none;}

  /* The rule runs the full panel width, so it reaches past the padding. */
  /* Both buttons stretch to fill; the gap is the only space between
     them — 6 on mobile, 14 on portrait tablet. */
  .nav-foot{display:flex;align-items:center;gap:6px;position:relative;}
  .nav-foot::before{
    content:'';position:absolute;left:-22px;right:-22px;top:-22px;
    height:var(--line-w);background:var(--line);
  }
  .nav-foot .btn{
    height:45px;padding:0 18px;font-size:.875rem;border-radius:12px;
    flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;
  }

  .nav-sub-head{
    display:flex;align-items:center;gap:6px;
    font-family:var(--font-body);font-weight:500;font-size:.875rem;
    line-height:1.1;letter-spacing:-.04em;color:var(--text);
  }
  .nav-back{
    display:flex;align-items:center;justify-content:center;
    width:13px;height:13px;padding:0;border:0;background:none;
    color:var(--text);cursor:pointer;flex:none;
  }
  .nav-sub-rule{display:block;height:var(--line-w);background:var(--line);width:100%;}
  .nav-groups{display:flex;flex-direction:column;gap:32px;}
  .nav-group{display:flex;flex-direction:column;gap:24px;}
  .nav-group-label{
    font-family:var(--font-body);font-weight:400;font-size:.875rem;
    line-height:1.1;letter-spacing:-.04em;color:#4f4f4f;
  }

  /* The hamburger becomes the close cross while the menu is open. */
  .menu-toggle.is-close svg{display:none;}
  .menu-toggle.is-close::before{
    content:'';display:block;width:24px;height:24px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* ---- tablet numbers (1099:4358) --------------------------------- */
@media (min-width:641px) and (max-width:1023px){
  .nav-panel{left:14px;right:14px;padding:26px;}
  .nav-foot::before{left:-26px;right:-26px;top:-26px;}
  .nav-foot{gap:14px;}
  .menu-toggle.is-close::before{width:32px;height:32px;}
}

/* ==================================================================
   LANDSCAPE TABLET — 1024 to 1259, drawn at 1024 (1107:6597)
   The desktop layout compressed: same grid rules, same carousel and
   the same careers morph, with tighter type and gaps. Rails land at
   32 and 992, the centre rail at 512.
   ================================================================== */
@media (min-width:1024px) and (max-width:1259px){
  :root{
    --container:calc(100% - 64px);   /* rails 32px in from both edges */
    --gutter:20px;                   /* text at x=52 */
    --gutter-card:20px;              /* cards share the text gutter here */
    --gutter-panel:20px;
  }

  /* The 1260 breakpoint hides the grid; this band paints it again. */
  .section::before,.page-hero::before{display:block;top:5px;bottom:5px;}
  .section::after,.page-hero::after,.grid-rule{display:block;}
  .section,.page-hero{border-bottom:0;}
  .wwd-section::before,main > .page-hero::before{top:0;}

  /* ---- rules: 4px clear of every dot ---------------------------
     Positioned from the edges with length offsets, never from a
     percentage — a percentage in background-position resolves against
     (area - image), which shifts each layer by its own width. */
  .section::after,.page-hero::after,.grid-rule{
    background-image:
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--dot-color),var(--dot-color)),
      linear-gradient(var(--dot-color),var(--dot-color));
    background-size:
      27px var(--line-w),
      calc(100% - 74px) var(--line-w),
      27px var(--line-w),
      var(--dot-size) var(--dot-size),
      var(--dot-size) var(--dot-size);
    background-position:
      left 0 center, left 37px center, right 0 center,
      left 31px center, right 31px center;
    background-repeat:no-repeat;
  }
  /* Engineering rules carry the third dot on the centre rail. */
  .eng-head-section::after,
  .eng-row::after{
    background-image:
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--dot-color),var(--dot-color)),
      linear-gradient(var(--dot-color),var(--dot-color)),
      linear-gradient(var(--dot-color),var(--dot-color));
    background-size:
      27px var(--line-w),
      calc(50% - 42px) var(--line-w),
      calc(50% - 42px) var(--line-w),
      27px var(--line-w),
      var(--dot-size) var(--dot-size),
      var(--dot-size) var(--dot-size),
      var(--dot-size) var(--dot-size);
    background-position:
      left 0 center, left 37px center, right 37px center, right 0 center,
      left 31px center, center center, right 31px center;
    background-repeat:no-repeat;
  }
  /* Centre rail on the rows only — the head has no second column. */
  .eng-row::before{
    background-image:
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line)),
      linear-gradient(var(--line),var(--line));
    background-size:var(--line-w) 100%,var(--line-w) 100%,var(--line-w) 100%;
    background-position:left 32px top,center top,right 32px top;
    background-repeat:no-repeat;
  }

  /* ---- type: eyebrow -> title is 12 at this width, not 16 ------- */
  .section-tag,
  .work-heading-col .section-tag,
  .wwd-head-title .section-tag,
  .why-left .section-tag,
  .careers-v2-head .section-tag,
  .cta-band .section-tag,
  .svc-head-title .section-tag,
  .certs-head-title .section-tag{margin-bottom:12px;}
  .careers-v2-head{gap:0;}

  .section-head h2,.wwd-head-title h2,.cwb-head h2,
  .work-heading,.why-left h2,.ab-careers-text h2,
  .careers-v2-head h2,.cta-band h2,.svc-head-title h2,
  .pj-hero h1,.ab-hero h1,.ab-latest-head h2{
    font-size:2rem;line-height:1.2;letter-spacing:-.06em;
  }
  .section-head .desc,.wwd-head-desc,.cwb-head-desc,
  .work-heading-desc,.careers-v2-footer p,.eng-copy p,
  .pj-hero-desc,.ab-careers-text p{font-size:1rem;line-height:1.4;}
  .cwb-point h3,.eng-copy h3,.wwd-card-body h3{font-size:1.125rem;line-height:1.1;}
  .cwb-point p{font-size:1rem;line-height:1.4;}
  .wwd-card-body p{font-size:.875rem;line-height:1.4;}
}

/* ---- landscape tablet: section layouts -------------------------- */
@media (min-width:1024px) and (max-width:1259px){
  .hero{height:768px;}

  /* what we do: 307 title column, 391 subtitle, 3 cards of 293 */
  .wwd-head-desc{width:391px;}
  .wwd-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}

  /* production services: desktop carousel, 340px cards in a 940 window */
  .svc-head-title{max-width:307px;}
  .section-head .desc{max-width:419px;}
  .svc-track{gap:20px;}
  .svc-track > .service-card-lg{flex:0 0 340px;width:340px;}
  .service-card-lg{aspect-ratio:340/446;}

  /* engineering */
  .eng-copy{max-width:388px;}

  /* selected work: photo 835x600, dark card 350x458 overlapping */
  .work-frame{aspect-ratio:905/641;min-height:0;}
  .work-photo-area{width:92.27%;height:93.6%;top:0;left:0;}
  .work-panel{
    left:61.33%;right:0;top:28.55%;bottom:0;width:auto;
    padding:25px;border-radius:14px;
  }
  .work-title .title-main{font-size:1.5rem;}
  .work-title .title-loc{font-size:1.25rem;}
  .work-sub{font-size:1.25rem;}
  .work-desc{font-size:1rem;line-height:1.4;}
  .work-panel-actions .car-btn{width:51px;height:51px;}

  /* why weld plus */
  .why-left{max-width:249px;}
  .why-stats{width:399px;}

  /* CWB: 920x388 panel split on the centre rail */
  .cwb-head-desc{max-width:337px;}
  .cwb-panel{min-height:388px;}

  /* careers: desktop cluster and morph, unchanged */
  .careers-v2-head{max-width:500px;}
  .careers-v2-footer p{max-width:566px;}

  .cta-band h2{max-width:495px;}
}

/* ==================================================================
   900 to 1023 — heads stay two-column
   Below 900 the existing block stacks them and resets alignment. The
   portrait-tablet block stacked them at every width up to 1023 but
   only flipped flex-direction, leaving align-items:flex-end and
   justify-self:end from the desktop base still running — which threw
   the stacked title and subtitle to the right edge. Above 900 the
   desktop two-column, bottom-aligned head is restored instead.
   ================================================================== */
@media (min-width:900px) and (max-width:1023px){
  .wwd-head-row{
    flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;
  }
  .wwd-head-title{max-width:none;}
  .wwd-head-desc{width:auto;max-width:40ch;}
  .section-head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;
  }
  .section-head .desc{justify-self:end;max-width:40ch;}
  .cwb-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;}
  .cwb-head-desc{justify-self:end;}
  .work-header-row{
    flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;
  }
  .work-heading-desc{width:auto;max-width:40ch;}
  .ab-latest-head{
    flex-direction:row;align-items:center;justify-content:space-between;gap:40px;
  }
  .pj-hero-row,.svc-hero-row{
    flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;
  }
  .pj-hero-desc{width:auto;max-width:40ch;}
}

/* ---- landscape tablet: services carousel ------------------------
   Arrows move onto the cards (24px in from the card edge, 44 from
   the rail) and the per-card red arrow is dropped. The track scrolls
   natively so it can be swiped, with the buttons scrolling it by one
   card — which means this band has a finite track rather than the
   desktop's cloned infinite loop.
   ------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1259px){
  .svc-track-window{
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .svc-track-window::-webkit-scrollbar{display:none;}
  .svc-track{transform:none !important;transition:none;}
  .svc-track > .service-card-lg{scroll-snap-align:start;}
  .svc-track > [aria-hidden="true"]{display:none;}
  /* .svc-carousel spans the viewport, not the container, so the offset
     is measured from the rail: rail + 20 (card) + 24 = 44. */
  .svc-car-btn.prev{left:calc(50% - (var(--container) / 2) + 44px);}
  .svc-car-btn.next{right:calc(50% - (var(--container) / 2) + 44px);}
  .svc-car-btn{z-index:4;}
  .service-card-lg-arrow{display:none;}
}

/* ---- landscape tablet: What We Do cards (1107:6183/6212/6260) ----
   The card is 293x420 here and each drawing has its own placement in
   the frame; the desktop percentages put the spiral and the baseplate
   over their titles. Left/width are % of the card's width, top/height
   % of its height. */
@media (min-width:1024px) and (max-width:1259px){
  .wwd-card{aspect-ratio:293/420;padding:0 20.8px 20.8px;}
  .wwd-card-art-1{left:23.97%;width:52.07%;top:7.81%;height:58.69%;}
  .wwd-card-art-2{left:7.10%; width:86.08%;top:14.71%;height:44.55%;}
  .wwd-card-art-3{left:7.10%; width:84.30%;top:10.43%;height:58.81%;}
}

/* ==================================================================
   900 to 1259 — Selected Work panel (1161:190)
   The card is 350x420 now, ending 25px above the photo rather than
   hanging below it. The base pins the panel top *and* bottom and
   pushes the actions down with margin-top:auto, so all the slack
   collected in one gap above the buttons. Here the top is pinned at
   Figma's 155/600 and the height is content-driven, so shrinking the
   gap shrinks the card itself. Padding is uniform, so the inset above
   the first line and below the buttons stay equal.
   ================================================================== */
@media (min-width:900px) and (max-width:1259px){
  .work-frame{aspect-ratio:909/600;min-height:0;}
  .work-photo-area{position:absolute;left:0;top:0;width:91.86%;height:100%;}
  .work-panel{
    position:absolute;left:61.5%;right:0;
    top:25.83%;bottom:auto;height:auto;width:auto;
    /* The 641-1023 block sets min-height:62.12%, which kept forcing the
       card taller than its content on the shorter slides and dumped the
       surplus under the buttons. */
    min-height:0;
    padding:25px;border-radius:14px;
    gap:0;   /* the clamp below is the only spacing above the buttons */
  }
  .work-panel-actions{margin-top:clamp(50px,6vw,80px);}
  .work-progress{display:none;}
}

/* ==================================================================
   DESKTOP ONLY (>=1260)
   ================================================================== */
/* The base rule reserves three description lines so every card title
   lands on one shared horizontal line. On desktop that leaves the
   two-line cards floating ~17px above the 24px bottom padding while
   the three-line Aluminum card sits correctly. Dropping the reserve
   bottoms every card on the same 24px inset; titles no longer align
   across cards, which is the accepted trade. 1024-1259 keeps the
   reserve. */
@media (min-width:1260px){
  .service-card-lg-text p{min-height:0;}
  /* Same reserve, same symptom: Fabricate's two-line copy floated 9.6px
     above the card's 30px bottom padding. */
  .wwd-card-body p{min-height:0;}
}

/* ==================================================================
   Measured fixes — section subtitles, card blur, carousel edges,
   Why Weld Plus placement.
   ================================================================== */

/* ---- Section subtitle line length ------------------------------
   Between roughly 693 and 1023 the .desc had max-width:none and ran
   584px wide (76% of a 768 frame) as a single line. Capped at 48% of
   the frame; the About story column is long-form and keeps its own
   measure. Mobile caps at 80%. */
/* Only this band had max-width:none. Desktop (40ch ≈ 31% of frame) and
   1024-1259 (419px ≈ 38%) already sit under the 48% limit, so they are
   left alone rather than widened by a blanket rule. */
@media (min-width:641px) and (max-width:1023px){
  .section-head .desc,.wwd-head-desc,.cwb-head-desc,.svc-head-desc{
    max-width:48vw;
  }
  .ab-story-section .desc,.ab-story-section p{max-width:none;}
}
@media (max-width:640px){
  .section-head .desc,.wwd-head-desc,.cwb-head-desc,.svc-head-desc{
    max-width:80%;
  }
  .ab-story-section .desc,.ab-story-section p{max-width:none;}
}

/* Service sub-card copy ran the full card width as a single line at
   the wider tablet sizes — same readability problem, capped at 60%. */
.svc-small-body p{max-width:60%;}
@media (max-width:640px){
  .svc-small-body p{max-width:none;}
}

/* ---- Production Services card blur -----------------------------
   1. The base `img{max-width:100%}` was clamping the blur copy's
      calc(100% + 28px), so its right edge landed ~14px inside the
      card and the band stopped short of the card's width.
   2. The mask stops were a fixed percentage of card height, so the
      band sat at a constant ~75px above the bottom while the titles
      move: two-line titles (Specialty Aluminum & Buswork) rise to
      93px and float clear of the blur entirely. --blur-start is
      written per card by script.js from the real text-block height,
      3px above the title. The percentage stays as the fallback. */
.service-card-lg .svc-photo-blur{
  max-width:none;
}
.service-card-lg[style*="--blur-start"] .svc-photo-blur{
  -webkit-mask-image:linear-gradient(to top,
    #000 0, #000 var(--blur-start), rgba(0,0,0,.5) calc(var(--blur-start) + 18px), transparent calc(var(--blur-start) + 40px));
          mask-image:linear-gradient(to top,
    #000 0, #000 var(--blur-start), rgba(0,0,0,.5) calc(var(--blur-start) + 18px), transparent calc(var(--blur-start) + 40px));
}

/* ---- Carousel edges --------------------------------------------
   The window was inset from the left rail but flush to the right, so
   the last card touched the right rail while the first cleared the
   left. Running the window rail-to-rail and moving the inset onto the
   track means a fully-shown card keeps the normal gap on either side,
   while a partially-shown one is clipped exactly at the rail. */
/* The window's own .wrap is inset to the rails and then pads by
   --gutter, so cancelling exactly that padding puts the window edges
   on the rails. --gutter-card is the resting gap the cards already
   used (25px desktop, 16px tablet), so moving it onto the track leaves
   every at-rest position unchanged — including the flex basis, which
   still resolves to 370px at 1440. */
@media (min-width:641px){
  .svc-track-window{
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:0;
    scroll-padding-inline:var(--gutter-card);
  }
  .svc-track{padding-inline:var(--gutter-card);}
}
/* Tablet scrolls natively, and a scroll container drops its content's
   trailing padding from the scrollable area — the last card still
   finished flush against the right rail. A flex spacer is counted, but
   the track's own 12px gap sits in front of it, so the spacer only
   needs to make up the difference. */
@media (min-width:641px) and (max-width:1023px){
  .svc-track{padding-inline:var(--gutter-card) 0;}
  .svc-track::after{content:'';flex:0 0 calc(var(--gutter-card) - 12px);}
}

/* ---- Selected Work, 641-720 ------------------------------------
   The panel is pinned over the photo at 255px wide; "Project Details"
   is 112px and broke to two lines. Below 720 the panel drops under
   the photo at full width, as it already does on mobile. */
@media (min-width:641px) and (max-width:720px){
  .work-frame{aspect-ratio:auto;min-height:0;}
  .work-photo-area{position:relative;width:100%;height:auto;aspect-ratio:584/374;left:auto;top:auto;}
  .work-panel{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    width:100%;height:auto;min-height:0;
    margin-top:10px;
    padding:22px;border-radius:var(--radius-md);
  }
  .work-panel-actions{margin-top:24px;gap:12px;flex-wrap:nowrap;}
  .work-cta{white-space:nowrap;}
}

/* ---- Why Weld Plus ---------------------------------------------
   Tablet: the title ran to four lines in a 221px column. Widening the
   measure brings it to two.
   Desktop: the section inherits .section's 120/35 padding, so 214px of
   content sat well above centre in a 369px section. 77/77 centres it
   between the rules and keeps the section height unchanged. */
/* .why-left was capped at 221px beside a 271px stats grid, so the
   title had no room to reach two lines at 28px — it needs ~450px. The
   only way to give it that inside a 576px frame is to let it own a
   full-width row, with the stats grid beneath. */
@media (min-width:641px) and (max-width:1023px){
  .why-frame{flex-direction:column;align-items:flex-start;gap:32px;}
  .why-left{width:100%;max-width:none;}
  .why-left h2{max-width:450px;}
  .why-stats{width:100%;}
}
@media (min-width:1024px){
  .why-section{padding-top:77px;padding-bottom:77px;}
}