/* ==========================================================================
   Carbotech Manufacturing LLC — site.css
   Design language: shop drawing. Dimension callouts, title blocks, hairlines.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink:      #010e1e;
  --ink-2:    #0a1929;
  --ink-3:    #132a41;
  --ink-4:    #1e3a55;

  --blue:     #017dc5;
  --blue-lt:  #3aa3e0;
  --blue-dk:  #015f95;
  --red:      #ef454e;

  --paper:    #eef2f5;
  --paper-2:  #f8fafb;
  --white:    #ffffff;

  --rule:     #c3cfd9;
  --rule-2:   #dee5eb;
  --rule-dk:  rgba(255, 255, 255, .14);

  --text:     #14212d;
  --muted:    #56697a;
  --muted-dk: #8ea4b8;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;

  --shell: 1280px;
  --gut: clamp(20px, 4.5vw, 56px);

  /* sticky header, border included. The hero subtracts this to make
     header + hero exactly one viewport. */
  --hdr-h: 82px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

a { color: var(--blue-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 1px;
}

.u-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 14px 22px;
  font-family: var(--display); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: 13px; text-decoration: none;
}
.u-skip:focus { left: 0; }

.u-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ typography */
h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  line-height: 1.02;
  letter-spacing: -.015em;
  font-weight: 700;
  font-stretch: 112%;
  text-wrap: balance;
}

.t-hero {
  font-size: clamp(2.9rem, 7.4vw, 6.1rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -.03em;
  line-height: .92;
  text-transform: uppercase;
}

.t-xl { font-size: clamp(2.1rem, 4.4vw, 3.5rem); letter-spacing: -.025em; text-transform: uppercase; font-stretch: 116%; }
.t-lg { font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.02em; }
.t-md { font-size: clamp(1.24rem, 2vw, 1.5rem); letter-spacing: -.012em; }
.t-sm { font-size: 1.06rem; letter-spacing: -.005em; }

.t-lede {
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

/* Eyebrow — reads like a drawing zone label */
.eyebrow {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue-dk);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--red);
  flex: none;
}
.eyebrow--dark { color: var(--blue-lt); }

.prose p { margin: 0 0 1.1em; max-width: 72ch; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }

/* ----------------------------------------------------------- containers */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shell--wide { max-width: 1560px; }

.band { padding-block: clamp(60px, 8vw, 118px); position: relative; }
.band--tight { padding-block: clamp(46px, 5.5vw, 76px); }
.band--paper { background: var(--paper); }
.band--white { background: var(--white); }
.band--ink { background: var(--ink); color: #dbe6ef; }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: #fff; }
.band--ink .t-lede { color: var(--muted-dk); }
/* :not(.btn) matters — `.band--ink a` is 0,1,1 and `.btn--red` is only
   0,1,0, so without it a button dropped into this band silently loses its
   own text colour to the prose link colour. */
.band--ink a:not(.btn) { color: var(--blue-lt); }

/* ============================================ BAND BACKGROUNDS — homepage
   The page reads as a sheet laid over the shop: each band lets a little of
   the floor show through, then closes again well before its own edge, so no
   two bands ever meet at a seam. Three things do that work.

   1. A radial reveal, never a rectangle. It feathers in every direction at
      once, so there is no edge to notice and nothing to line up between one
      band and the next. Each band anchors its reveal differently — right,
      high, low, hard against the edge, wide and low — so the eye is led down
      the page instead of hitting the same shape seven times.
   2. Duotone, not photography. Greyscale plus a blue cast maps every frame
      onto the site's own ink, so what shows through reads as material rather
      than as a picture someone dropped in.
   3. multiply on the light bands. The image darkens the paper instead of
      sitting on top of it — ink soaking in, not a photo pasted down. The
      matching screen on the dark bands does the inverse: only the highlights
      come through, so the shop emerges out of the ink.
   ========================================================================= */
/* isolate so multiply/screen blend against the band's own background and
   cannot reach the page behind it */
.band:has(> .band-bg) { isolation: isolate; }
.band > .shell { position: relative; z-index: 2; }

.band-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--reveal);
  mask-image: var(--reveal);
}
.band-bg picture { display: contents; }
.band-bg img { width: 100%; height: 100%; object-fit: cover; }

/* Reveal shapes — the anchor walks down the page so the eye is led rather
   than meeting the same bloom seven times. Every vertical radius is set so
   the gradient reaches full transparency BEFORE the band's own top and
   bottom edge; that is the whole seamlessness trick. An ellipse anchored at
   50% with a 60% radius is transparent by 0.5/0.6 = 83% of its ramp, i.e.
   gone well before the edge. Anchor a reveal low and give it a tall radius
   and the image arrives at the boundary still at full strength — which is
   exactly what a seam looks like. */
.bg--right { --reveal: radial-gradient( 88% 62% at 84% 48%, #000 3%, transparent 72%); }
.bg--corner{ --reveal: radial-gradient( 56% 34% at 88% 68%, #000 2%, transparent 76%); }
.bg--low   { --reveal: radial-gradient( 80% 42% at 80% 64%, #000 3%, transparent 74%); }
.bg--wide  { --reveal: radial-gradient( 96% 50% at 74% 62%, #000 3%, transparent 74%); }
/* the quote band is the only one whose copy sits right, so its reveal is the
   only one that belongs left — where the opaque quote card masks it */
.bg--edge  {
  --reveal:      radial-gradient( 52% 64% at  8% 50%, #000 2%, transparent 76%);
  --grid-reveal: radial-gradient(115% 58% at 18% 50%, #000 0%, transparent 80%);
}

/* --- light bands: ink soaking into paper -------------------------------- */
.band--white .band-bg,
.band--paper .band-bg {
  opacity: .34;
  mix-blend-mode: multiply;
}
.band--white .band-bg img,
.band--paper .band-bg img {
  filter: grayscale(1) sepia(.55) hue-rotate(176deg) saturate(1.5)
          contrast(.5) brightness(1.42);
}

/* --- dark bands: the shop emerging out of the ink ----------------------- */
.band--ink .band-bg,
.stdnote--cta .band-bg,
.endcta .band-bg {
  opacity: .42;
  mix-blend-mode: screen;
}
.band--ink .band-bg img,
.stdnote--cta .band-bg img,
.endcta .band-bg img {
  filter: grayscale(1) sepia(.5) hue-rotate(178deg) saturate(1.7)
          contrast(1.15) brightness(.62);
}

/* --- the drafting grid the dark bands already carry, extended to the light
   ones so the photograph surfaces inside a drawn field rather than on top of
   a blank one. Broader and constant, so each band's own reveal blooms from
   within it. --------------------------------------------------------------*/
.band--white:has(> .band-bg)::before,
.band--paper:has(> .band-bg)::before,
.band--ink:has(> .band-bg)::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-size: 64px 64px;
  -webkit-mask-image: var(--grid-reveal, radial-gradient(115% 58% at 82% 50%, #000 0%, transparent 80%));
  mask-image: var(--grid-reveal, radial-gradient(115% 58% at 82% 50%, #000 0%, transparent 80%));
}
.band--white:has(> .band-bg)::before,
.band--paper:has(> .band-bg)::before {
  background-image:
    linear-gradient(rgba(1, 14, 30, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 14, 30, .055) 1px, transparent 1px);
}
.band--ink:has(> .band-bg)::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}
/* the end CTA already draws its own grid; keep it above the photograph */
.endcta::before { z-index: 1; }


/* ============================================================== SIGNATURE
   Dimension callout. A drafting dimension line: extension ticks, an arrowed
   rule, and the measured value sitting in a gap. Used for every hard number
   on the site, because every number here came off a drawing.
   ========================================================================== */
.dim {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.dim-rule {
  position: relative;
  height: 9px;
  border-left: 2px solid var(--rule);
  border-right: 2px solid var(--rule);
}
.dim-rule::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--rule);
}
/* arrow terminators */
.dim-rule::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; top: 50%;
  transform: translateY(-50%);
  height: 7px;
  background:
    linear-gradient(45deg,  var(--rule) 1px, transparent 1.5px) left  center / 6px 4px no-repeat,
    linear-gradient(-45deg, var(--rule) 1px, transparent 1.5px) left  bottom / 6px 4px no-repeat,
    linear-gradient(135deg, var(--rule) 1px, transparent 1.5px) right center / 6px 4px no-repeat,
    linear-gradient(-135deg,var(--rule) 1px, transparent 1.5px) right bottom / 6px 4px no-repeat;
}

.dim-val {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dim-val small {
  font-size: .48em;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: .01em;
  color: var(--muted);
}

.dim-lbl {
  font-family: var(--display);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}

.dim--dark .dim-rule { border-color: var(--ink-4); }
.dim--dark .dim-rule::before { background: var(--ink-4); }
.dim--dark .dim-rule::after {
  background:
    linear-gradient(45deg,  var(--ink-4) 1px, transparent 1.5px) left  center / 6px 4px no-repeat,
    linear-gradient(-45deg, var(--ink-4) 1px, transparent 1.5px) left  bottom / 6px 4px no-repeat,
    linear-gradient(135deg, var(--ink-4) 1px, transparent 1.5px) right center / 6px 4px no-repeat,
    linear-gradient(-135deg,var(--ink-4) 1px, transparent 1.5px) right bottom / 6px 4px no-repeat;
}
.dim--dark .dim-val { color: #fff; }
.dim--dark .dim-val small { color: var(--muted-dk); }
.dim--dark .dim-lbl { color: var(--muted-dk); }

.dim--sm .dim-val { font-size: 1.16rem; }
.dim--sm .dim-lbl { font-size: .63rem; }
.dim--sm { gap: 6px; }

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-3);
}
.hdr-in {
  display: flex; align-items: center; gap: 30px;
  height: calc(var(--hdr-h) - 1px);
}
.hdr-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.hdr-brand img { height: 25px; width: auto; }
.hdr-brand span {
  display: none;
  font-family: var(--display);
  font-size: .58rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-dk);
  border-left: 1px solid var(--ink-4); padding-left: 14px; line-height: 1.4;
}

.hdr-nav { margin-left: auto; display: none; align-items: center; align-self: stretch; gap: 4px; }
.hdr-link {
  font-family: var(--display);
  font-size: .8rem; font-weight: 600; font-stretch: 104%;
  letter-spacing: .1em; text-transform: uppercase;
  color: #c3d2df; text-decoration: none;
  padding: 10px; border-radius: 2px;
  position: relative; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.hdr-link:hover { color: #fff; background: rgba(255,255,255,.06); }
/* is-section marks an ancestor of the current page, not the page itself —
   the five service pages are inside Services but are not services.html, and
   the menu below already carries the one true aria-current. */
.hdr-link[aria-current="page"],
.hdr-link.is-section { color: #fff; }
.hdr-link[aria-current="page"]::after,
.hdr-link.is-section::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; background: var(--red);
}

/* --- services dropdown, desktop nav only -------------------------------
   Hover for pointers, :focus-within for keyboards. The trigger is inside
   the wrapper, so tabbing to it opens the panel and the next Tab walks
   into it; closed, the panel is visibility:hidden, so it is neither
   tabbable nor announced. No JS involved — Services stays a real link to
   the hub, and the drawer below 1080px already carries the same list. */
.hdr-sub {
  position: relative;
  display: flex; align-items: center;
  align-self: stretch;   /* so the panel hangs off the header, with no gap
                            for the pointer to fall through on the way down */
}
.hdr-caret { flex: none; transition: transform .22s var(--ease); }
.hdr-sub:hover .hdr-caret,
.hdr-sub:focus-within .hdr-caret { transform: rotate(180deg); }

.hdr-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 268px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-top: 2px solid var(--red);
  padding-block: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.hdr-sub:hover .hdr-menu,
.hdr-sub:focus-within .hdr-menu { opacity: 1; visibility: visible; transform: none; }

.hdr-menu a {
  display: block;
  padding: 11px 20px;
  font-size: .89rem; line-height: 1.3;
  color: #c3d2df; text-decoration: none; white-space: nowrap;
  border-left: 2px solid transparent;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.hdr-menu a:hover { background: rgba(255,255,255,.06); color: #fff; border-left-color: var(--red); }
.hdr-menu a[aria-current="page"] {
  color: #fff; background: rgba(255,255,255,.04); border-left-color: var(--red);
}


.hdr-cta {
  display: none;
  font-family: var(--display);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  background: var(--red); color: #fff;
  padding: 13px 20px; margin-left: 8px;
  white-space: nowrap;
  transition: background .18s var(--ease);
}
.hdr-cta:hover { background: #d8323b; color: #fff; }

.hdr-burger {
  margin-left: auto;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--ink-4);
  cursor: pointer; padding: 0;
}
.hdr-burger span {
  display: block; width: 20px; height: 2px; background: #fff;
  position: relative;
  transition: background .2s var(--ease);
}
.hdr-burger span::before, .hdr-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff;
  transition: transform .26s var(--ease);
}
.hdr-burger span::before { top: -6px; }
.hdr-burger span::after  { top: 6px; }
.hdr-burger[aria-expanded="true"] span { background: transparent; }
.hdr-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.hdr-drawer {
  display: none;
  background: var(--ink-2);
  border-top: 1px solid var(--ink-3);
  padding: 10px var(--gut) 26px;
}
.hdr-drawer.is-open { display: block; }
.hdr-drawer a {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem; font-weight: 700; font-stretch: 108%;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--ink-3);
}
.hdr-drawer a.is-sub {
  font-size: .84rem; font-weight: 500; font-stretch: 100%;
  text-transform: none; letter-spacing: 0;
  color: var(--muted-dk); padding: 9px 0 9px 18px;
  border-bottom: none;
  font-family: var(--body);
}
.hdr-drawer .drawer-cta {
  background: var(--red); text-align: center; margin-top: 20px;
  border: none; padding: 16px; font-size: .9rem;
}

/* The drawer holds until the bar genuinely fits, which needs two thresholds
   rather than one: the brand's second line costs ~155px, so below 1280 the
   logo goes it alone and the CTA never has to wrap to stay inside the shell. */
@media (min-width: 1080px) {
  .hdr-nav, .hdr-cta { display: flex; }
  .hdr-burger { display: none; }
  .hdr-drawer { display: none !important; }
}
@media (min-width: 1280px) {
  .hdr-brand span { display: block; }
}

/* ============================================================== HOMEPAGE HERO
   Header + hero copy + spec rail together fill exactly one viewport. The
   headline is capped against vh as well as vw so it can never outgrow that
   budget, and the band uses min-height rather than height: an unusually
   short or narrow window grows it instead of clipping the copy.
   ========================================================================== */
.hero {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* drafting grid, over the plate but under the copy */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 20% 20%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* ---------------------------------------------------------- the plate
   Full bleed, faded right -> left so it resolves into flat ink beneath the
   headline. The fade lives on the wrapper, not the <img>: the image is
   mirrored, and a mask on it would be mirrored with it. Keeping the two on
   separate elements means the photo can be panned without dragging the
   fade along behind it. */
/* Height is the grid box, not the section: .hero also contains the rail,
   and inset:0 here would run the plate on underneath an opaque band —
   harmless on desktop, but it hides whatever the narrow-screen treatment
   anchors to the bottom. */
.hero-bg {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  height: calc(100vh - var(--hdr-h));
  height: calc(100svh - var(--hdr-h));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, transparent 29%, rgba(0,0,0,.16) 43%,
    rgba(0,0,0,.6) 57%, #000 71%);
  mask-image: linear-gradient(90deg,
    transparent 0%, transparent 29%, rgba(0,0,0,.16) 43%,
    rgba(0,0,0,.6) 57%, #000 71%);
}
/* The plate is now shot for this slot - head already right of centre, left
   third already empty - so the mirror and the pan that dragged the old
   stock photo into place are both gone. Still and loop share one 16:9
   framing, so cover crops them identically and the fade-in holds register. */
.hero-bg picture { display: contents; }
.hero-bg img,
.hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The loop sits over the still and is revealed only once it can play, so a
   slow connection shows the still rather than a black hole. */
.hero-bg video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero-bg video.is-on { opacity: 1; }
/* Top scrim only: seats the plate under the header. The bottom needs none
   because the rail is an opaque band, and its top border is the cut. The
   wrapper's fade takes this with it, so it stops where the photo does. */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(1,14,30,.5) 0%, rgba(1,14,30,.03) 34%, rgba(1,14,30,.03) 100%);
}

/* ------------------------------------------------------------ the copy */
.hero-grid {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  padding-block: clamp(30px, 5.5vh, 76px);
  min-height: calc(100vh - var(--hdr-h));
  min-height: calc(100svh - var(--hdr-h));
}
/* wide enough to hold "One floor." on one line at the headline's ceiling,
   so the three authored line breaks are the only ones that ever land */
.hero-copy { max-width: 43rem; }

.hero-loc {
  font-family: var(--display);
  font-size: .72rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blue-lt);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 clamp(13px, 2.4vh, 26px);
}
.hero-loc i {
  font-style: normal; color: var(--muted-dk);
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap;
}
.hero-loc i::before { content: ""; width: 1px; height: 12px; background: var(--ink-4); }

/* three lines at .92 leading, so the vh cap is roughly a third of the
   height the headline is allowed to occupy */
.hero-copy .t-hero {
  font-size: clamp(2.5rem, min(6.4vw, 12.6vh), 5.1rem);
  text-shadow: 0 2px 30px rgba(1, 14, 30, .45);
}
.t-hero em {
  font-style: normal;
  color: var(--blue-lt);
  position: relative;
}
.hero-copy .t-lede {
  margin: clamp(12px, 2.1vh, 24px) 0 0;
  max-width: 44ch;
  font-size: clamp(1.02rem, min(1.36vw, 2.5vh), 1.24rem);
  color: #b3c7d8;
  text-shadow: 0 1px 18px rgba(1, 14, 30, .5);
}
.hero-copy .hero-btns { margin-top: clamp(17px, 3vh, 34px); }
.hero-copy .btn--ghost { background: rgba(1, 14, 30, .5); }
.hero-copy .btn--ghost:hover { background: rgba(1, 14, 30, .72); border-color: #fff; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* A narrow window crops the plate down to roughly one column of it, so a
   right-to-left fade would land on the empty half of the frame and show
   nothing. Recentre on the head and fade top-down instead: flat ink under
   the header, the machine emerging behind the copy. */
/* A narrow window makes cover magnify the plate until it is an unreadable
   slab of machine body, and a right-to-left fade would land on the empty
   half of the frame besides. Anchor it as a shorter band at the foot of
   the hero instead: less height to cover means less upscaling, so roughly
   44% of the frame reads across rather than 29%. Fade top-down into flat
   ink, and aim the crop at the cut so the band carries the sparks and the
   nozzle rather than a featureless casting. */
@media (max-width: 939px) {
  .hero-bg {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 32%, rgba(0,0,0,.45) 48%, #000 74%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 32%, rgba(0,0,0,.45) 48%, #000 74%);
  }
  .hero-bg img,
  .hero-bg video {
    position: absolute; top: auto; bottom: 0; left: 0; right: 0;
    height: 66%;
    object-position: 72% center;
  }
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(1,14,30,.78) 0%, rgba(1,14,30,.5) 44%, rgba(1,14,30,.42) 100%);
  }
}

/* --------------------------------------------------------- spec rail bar */
.rail {
  background: var(--ink-2);
  border-top: 1px solid var(--ink-3);
  position: relative; z-index: 3;
}
.rail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.rail-item {
  padding: 26px var(--gut) 26px 0;
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
}
.rail-item:nth-child(2n) { padding-right: 0; border-right: none; }
@media (min-width: 700px)  { .rail-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) {
  .rail-grid { grid-template-columns: repeat(5, 1fr); }
  .rail-item { border-bottom: none; padding-block: 32px; }
  .rail-item:nth-child(2n) { padding-right: var(--gut); border-right: 1px solid var(--ink-3); }
  .rail-item:last-child { padding-right: 0; border-right: none; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display);
  font-size: .81rem; font-weight: 700; font-stretch: 106%;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 16px 26px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { flex: none; transition: transform .24s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--red   { background: var(--red); color: #fff; }
.btn--red:hover { background: #d8323b; color: #fff; }
.btn--ink   { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-3); color: #fff; }
.btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); color: #fff; }
.btn--line  { border-color: var(--rule); color: var(--ink); background: var(--white); }
.btn--line:hover { border-color: var(--ink); color: var(--ink); }

/* ------------------------------------------------------- section heading */
.sec-head {
  display: grid; gap: 22px;
  margin-bottom: clamp(34px, 4vw, 56px);
  align-items: end;
}
.sec-head p { margin: 0; }
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: 1.15fr .85fr; gap: 48px; }
}

/* ----------------------------------------------------------- service grid */
/* Separated tiles rather than the hairline-gap trick the other grids use,
   so the background and outer border that only existed to paint those
   1px seams are gone and each card carries its own rule instead. */
.svc-grid {
  display: grid;
  gap: clamp(10px, 1vw, 16px);
}
@media (min-width: 620px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 34px 30px 30px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  min-height: 260px;
  transition: background .24s var(--ease);
  overflow: hidden;
}
/* Accent rule sweeps in across the foot of the card, left to right. Sits
   at the padding edge, not -1px: overflow:hidden clips to the padding box,
   so a negative offset would be trimmed rather than covering the border. */
.svc::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.svc:hover { background: var(--paper-2); color: inherit; }
.svc:hover::after { transform: scaleX(1); }
.svc-no {
  font-family: var(--display);
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  color: var(--blue-dk); text-transform: uppercase;
}
.svc h3 { font-size: 1.32rem; letter-spacing: -.018em; }
.svc p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.svc-go {
  margin-top: auto; padding-top: 20px;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.svc:hover .svc-go { color: var(--red); }
.svc-go svg { transition: transform .24s var(--ease); }
.svc:hover .svc-go svg { transform: translateX(5px); }

/* feature service card carries the photo */
.svc--photo { padding: 0; min-height: 0; }
.svc--photo .svc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.svc--photo .svc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.svc--photo:hover .svc-media img { transform: scale(1.045); }
/* Masked rather than overlaid with a gradient, so the photograph dissolves
   into whatever the card body happens to be — including the tint it takes
   on hover. Scoped to the homepage grid for now; services.html carries the
   same component untouched. */
.svc-grid--soft .svc--photo .svc-media img {
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 50%, transparent 97%);
}
.svc--photo .svc-body { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* ------------------------------------------------------------- split row */
.split {
  display: grid; gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-l { grid-template-columns: 1.25fr .75fr; }
  .split--wide-r { grid-template-columns: .75fr 1.25fr; }
  .split--flip > :first-child { order: 2; }
}

.frame {
  position: relative;
  border: 1px solid var(--rule);
  padding: 12px;
  background: var(--white);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall img { aspect-ratio: 3 / 4; }
.frame--wide img { aspect-ratio: 16 / 10; }
.frame-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--ink); color: #fff;
  font-family: var(--display); font-size: .64rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  padding: 9px 14px;
}
.frame--dark { border-color: var(--ink-3); background: var(--ink-2); }

/* --- drafting marks on the framed photograph ---------------------------
   Registration marks of the kind that sit at the corners of a drawing
   sheet: eight hairlines held off the frame, with the top-left pair in red
   as the origin corner — the same mark the eyebrow and the quote card open
   with. Drawn on a pseudo-element, so the frame keeps its own border and
   nothing is added to the markup. */
.frame--drawn::after {
  content: "";
  position: absolute;
  inset: -11px;
  pointer-events: none;
  --l: 26px;                       /* arm length */
  --c: var(--rule);
  --o: var(--red);                 /* origin corner */
  background:
    linear-gradient(var(--o), var(--o)) left  top    / 1px var(--l) no-repeat,
    linear-gradient(var(--o), var(--o)) left  top    / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top    / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top    / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left  bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left  bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px no-repeat;
}
.frame--drawn picture { display: contents; }

/* ------------------------------------------------------------- checklist */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule-2); }
.band--ink .checks { background: var(--ink-3); }
.checks li {
  background: var(--white);
  padding: 15px 18px 15px 46px;
  position: relative;
  font-size: .96rem;
  line-height: 1.5;
}
.band--ink .checks li { background: var(--ink-2); color: #cfdcea; }
.checks li::before {
  content: "";
  position: absolute; left: 18px; top: 22px;
  width: 9px; height: 9px;
  border: 2px solid var(--red);
  transform: rotate(45deg);
}
@media (min-width: 780px) { .checks--2 { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- steps 01-05
   Numbered because the content genuinely is a sequence: the route a job
   takes through the shop, in order.                                         */
.steps { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.step {
  background: var(--white);
  display: grid; gap: 6px 26px;
  padding: 26px 6px;
  align-items: start;
}
.step-no {
  font-family: var(--display);
  font-size: 1.05rem; font-weight: 700; font-stretch: 116%;
  letter-spacing: .04em;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  transition: color .3s var(--ease);
}
.step:hover .step-no { color: var(--red); }
.step h3 { font-size: 1.14rem; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.56; max-width: 62ch; }
@media (min-width: 760px) {
  .step { grid-template-columns: 66px 260px 1fr; align-items: baseline; padding: 28px 6px; }
  .step h3 { padding-right: 20px; }
}

/* --------------------------------------------------------- standard note */
.stdnote {
  background: var(--ink);
  color: #cfdcea;
  padding: clamp(30px, 4vw, 46px);
  position: relative;
  border-left: 3px solid var(--blue);
}
.stdnote h2, .stdnote h3 { color: #fff; margin-bottom: 16px; }
.stdnote p { margin: 0 0 1em; max-width: 74ch; }
.stdnote p:last-child { margin-bottom: 0; }
.stdnote a:not(.btn) { color: var(--blue-lt); }
/* The closing CTA on a service page is a panel, not a band, so it needs its
   own clip and its own stacking — the note's children are bare h2/p rather
   than a wrapper that could carry z-index. Scoped with a modifier so the
   mid-article reference notes are untouched. */
.stdnote--cta { overflow: hidden; border-left-color: var(--red); }
.stdnote--cta > :not(.band-bg) { position: relative; z-index: 2; }

.stdnote-ref {
  font-family: var(--display); font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dk);
  margin: 0 0 14px;
}

/* -------------------------------------------------------- pull statement */
.pull {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 26px;
  margin: 0;
}
.pull p {
  font-family: var(--display);
  font-size: clamp(1.16rem, 1.85vw, 1.5rem);
  font-weight: 600; font-stretch: 106%;
  line-height: 1.42; letter-spacing: -.015em;
  color: var(--ink); margin: 0; max-width: 60ch;
}
.band--ink .pull p { color: #fff; }

/* -------------------------------------------------------------- faq list */
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; gap: 20px;
  padding: 22px 0; text-align: left;
  font-family: var(--display);
  font-size: 1.06rem; font-weight: 600; font-stretch: 106%;
  letter-spacing: -.01em; line-height: 1.35; color: var(--ink);
  transition: color .18s var(--ease);
}
.faq-q:hover { color: var(--blue-dk); }
.faq-ic {
  margin-left: auto; flex: none;
  width: 22px; height: 22px; position: relative; margin-top: 3px;
}
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; background: var(--red);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.faq-ic::before { left: 0; right: 0; top: 10px; height: 2px; }
.faq-ic::after  { top: 0; bottom: 0; left: 10px; width: 2px; }
.faq-q[aria-expanded="true"] .faq-ic::after { transform: rotate(90deg); opacity: 0; }

.faq-a {
  overflow: hidden;
  height: 0;
  transition: height .34s var(--ease);
}
.faq-a-in { padding: 0 60px 26px 0; color: var(--muted); font-size: .98rem; line-height: 1.62; }
.faq-a-in p { margin: 0 0 .9em; max-width: 72ch; }
.faq-a-in p:last-child { margin-bottom: 0; }

/* ==================================================== SERVICE PAGE LAYOUT */
/* The band is a hard letterbox — roughly 3:1 at 1280 and 5:1 at 1920 — so
   object-fit:cover keeps only a horizontal slice of each header photo.
   These paddings are set to show about half the frame rather than a third.
   The floor stays near the old value so narrow screens, where the band is
   already close to square and gains no extra image, gain no dead space. */
.pagehead {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(44px, 7.5vw, 120px) clamp(40px, 6.5vw, 100px);
  position: relative;
  overflow: hidden;
}
.pagehead::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 100% at 82% 12%, #000 10%, transparent 72%);
}
/* ::after (the photo scrim) is generated last, so content needs a stacking
   bump or the gradient paints straight over the h1. */
.pagehead-in { position: relative; z-index: 2; }
.pagehead--photo .pagehead-bg {
  position: absolute; inset: 0;
  opacity: .42;
}
.pagehead-bg picture { display: contents; }
.pagehead--photo .pagehead-bg img { width: 100%; height: 100%; object-fit: cover; }
/* for frames whose subject sits below the centre line — the laser nest and
   the drawing table both lie flat and low — bias the slice downward */
.pagehead--photo .pagehead-bg--low img { object-position: center 62%; }
.pagehead--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink) 26%, rgba(1,14,30,.35) 100%);
}

.crumbs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dk); margin: 0 0 22px;
}
.crumbs a { color: var(--muted-dk); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--blue-lt); }
.crumbs i { font-style: normal; color: var(--ink-4); }

.pagehead .t-lede { color: #a9bfd2; margin: 22px 0 0; }

/* --- the two-column body: sticky sidebar + article --- */
.layout {
  display: grid;
  gap: clamp(34px, 4vw, 60px);
  padding-block: clamp(44px, 5.5vw, 82px);
  align-items: start;
}
@media (min-width: 980px) {
  .layout { grid-template-columns: 292px 1fr; gap: 60px; }
  .layout--right { grid-template-columns: 1fr 292px; }
  .layout--right .side { order: 2; }
}

/* Below the two-column breakpoint the sidebar would bury the article under
   ~950px of nav and shop data. Flatten it into the page flow instead and let
   the services nav lead, with the reference blocks following the content.
   The wrapper is a plain div, so `display: contents` drops no landmark —
   the inner <nav> keeps its own. */
.side { position: relative; min-width: 0; display: contents; }
.side > * { margin-bottom: 0; }
.side > nav      { order: 1; }
.layout .article { order: 2; }
.side > .titleblock { order: 3; }
.side > .side-cta   { order: 4; }

/* The column itself scrolls away; only the call card follows you down. It
   can travel no further than its containing block, and .layout sets
   align-items:start, which would size .side to its own content and leave
   the card nothing to stick within — hence the stretch. The card is last,
   so the nav and the shop data scroll past first and it pins on its own. */
@media (min-width: 980px) {
  .side { display: block; align-self: stretch; }
  .side > * { margin-bottom: 20px; }
  .side > :last-child { margin-bottom: 0; }
  .side > nav, .side > .titleblock, .side > .side-cta, .layout .article { order: 0; }
  .side > .side-cta { position: sticky; top: calc(var(--hdr-h) + 26px); }
}

.side-block { border: 1px solid var(--rule); background: var(--white); margin-bottom: 20px; }
.side-block:last-child { margin-bottom: 0; }

.side-hd {
  font-family: var(--display);
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  display: flex; align-items: center; gap: 10px;
  margin: 0;
}
.side-hd::before { content: ""; width: 14px; height: 2px; background: var(--red); flex: none; }

.side-nav { list-style: none; margin: 0; padding: 0; }
.side-nav li + li { border-top: 1px solid var(--rule-2); }
.side-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  font-size: .93rem; line-height: 1.35;
  color: var(--text); text-decoration: none;
  position: relative;
  transition: background .18s var(--ease), color .18s var(--ease), padding .2s var(--ease);
}
.side-nav a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--red); transform: scaleY(0); transform-origin: center;
  transition: transform .26s var(--ease);
}
.side-nav a:hover { background: var(--paper-2); color: var(--ink); padding-left: 22px; }
.side-nav a:hover::before { transform: scaleY(1); }
.side-nav a[aria-current="page"] {
  background: var(--paper); color: var(--ink); font-weight: 600;
}
.side-nav a[aria-current="page"]::before { transform: scaleY(1); }
.side-nav a[aria-current="page"] .side-mark { background: var(--red); border-color: var(--red); }
.side-mark {
  width: 8px; height: 8px; flex: none;
  border: 1.5px solid var(--rule);
  transform: rotate(45deg);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

/* --- title block: the artifact every shop drawing ends with --- */
.titleblock { border: 1px solid var(--rule); background: var(--white); margin-bottom: 20px; }
.tb-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule-2); }
.tb-row:last-child { border-bottom: none; }
.tb-cell { padding: 12px 16px; }
.tb-cell + .tb-cell { border-left: 1px solid var(--rule-2); }
.tb-cell--full { grid-column: 1 / -1; }
.tb-k {
  font-family: var(--display);
  font-size: .58rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px;
}
.tb-v {
  font-family: var(--display);
  font-size: .88rem; font-weight: 700; font-stretch: 108%;
  letter-spacing: -.005em; color: var(--ink); line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.tb-v a { color: var(--ink); text-decoration: none; }
.tb-v a:hover { color: var(--blue-dk); text-decoration: underline; }
.tb-v small { display: block; font-family: var(--body); font-size: .78rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }

/* --- sidebar call card --- */
.side-cta { background: var(--ink); color: #fff; padding: 24px 20px 26px; }
.side-cta h3 { font-size: 1.15rem; color: #fff; margin-bottom: 10px; letter-spacing: -.015em; }
.side-cta p { margin: 0 0 18px; font-size: .89rem; line-height: 1.5; color: var(--muted-dk); }
.side-cta .btn { width: 100%; justify-content: center; padding: 14px 18px; }
.side-contact { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ink-3); }
.side-contact a {
  display: block; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
}
.side-contact a:hover { color: var(--blue-lt); }
.side-contact span {
  display: block; font-size: .62rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted-dk); font-family: var(--display); font-weight: 600; margin-bottom: 3px;
}
.side-contact + .side-contact { margin-top: 14px; padding-top: 14px; }

/* --- article --- */
.article { min-width: 0; }
.article > * + * { margin-top: clamp(38px, 4.5vw, 62px); }
.article h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  letter-spacing: -.022em;
  margin-bottom: 20px;
}
.article h3 { font-size: 1.18rem; margin-bottom: 12px; }
.article-sec { scroll-margin-top: 110px; }

/* lead answer panel — the definition a buyer is searching for */
.lead-panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  padding: clamp(26px, 3.2vw, 38px);
}
.lead-panel p {
  margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.58;
  color: var(--text); max-width: 68ch;
}
.lead-panel p + p { margin-top: 1em; }
.lead-panel strong { font-weight: 600; }
.lead-panel--blue { border-top-color: var(--blue); }

/* related services inside sidebar layout */
.rel-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .rel-grid { grid-template-columns: 1fr 1fr; } }
.rel {
  background: var(--white); padding: 22px 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .2s var(--ease);
}
.rel:hover { background: var(--paper-2); color: inherit; }
.rel strong {
  font-family: var(--display); font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.012em; color: var(--ink);
}
.rel:hover strong { color: var(--blue-dk); }
.rel span { font-size: .89rem; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- tables */
.spec-table { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); background: var(--white); }
.spec-table th, .spec-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--rule-2); font-size: .94rem; }
.spec-table th {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.spec-table td:first-child { font-weight: 600; color: var(--ink); width: 38%; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ stat strip */
.stats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.band--ink .stats { background: var(--ink-3); border-color: var(--ink-3); }
.stat { background: var(--white); padding: 26px 24px; }
.band--ink .stat { background: var(--ink); }
@media (min-width: 620px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } .stats--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stats--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------- credits */
.creds { display: grid; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); }
@media (min-width: 700px) { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .creds { grid-template-columns: repeat(4, 1fr); } }
.cred { background: var(--ink); padding: 24px 22px; }
.cred dt {
  font-family: var(--display); font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dk); margin-bottom: 8px;
}
.cred dd {
  margin: 0; font-family: var(--display); font-size: 1.06rem; font-weight: 700;
  letter-spacing: .01em; color: #fff; font-variant-numeric: tabular-nums;
}
.cred dd small { display: block; font-family: var(--body); font-size: .8rem; font-weight: 400; color: var(--muted-dk); letter-spacing: 0; margin-top: 5px; line-height: 1.45; }

/* ----------------------------------------------------------------- people */
.people { display: grid; gap: 24px; }
@media (min-width: 760px) { .people { grid-template-columns: 1fr 1fr; } }
.person { background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--blue); padding: 26px 28px; }
.person h3 { font-size: 1.18rem; margin-bottom: 4px; }
.person .role {
  font-family: var(--display); font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue-dk); margin: 0 0 14px;
}
.person p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.58; }

/* ------------------------------------------------------------ quote card */
.quote { background: var(--white); border: 1px solid var(--rule); padding: clamp(26px, 3.4vw, 40px); position: relative; }
.quote::before {
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: var(--red);
}
.quote blockquote {
  margin: 0 0 20px;
  font-family: var(--display); font-weight: 600; font-stretch: 104%;
  font-size: clamp(1.1rem, 1.7vw, 1.38rem); line-height: 1.45;
  letter-spacing: -.015em; color: var(--ink); max-width: 60ch;
}
.quote figcaption { font-size: .88rem; color: var(--muted); }
.quote figcaption strong { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------- forms */
.form-grid { display: grid; gap: 18px; }
@media (min-width: 680px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: .97rem; color: var(--text);
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356697a' stroke-width='1.6' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 44px;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(1,125,197,.16);
}
.field .hint { font-size: .8rem; color: var(--muted); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--red); }
.field .err { font-size: .8rem; color: #c62b34; display: none; }
.field.is-bad .err { display: block; }

.form-note { font-size: .85rem; color: var(--muted); margin: 0; }
.form-ok {
  display: none;
  border: 1px solid var(--blue);
  border-left: 3px solid var(--blue);
  background: rgba(1,125,197,.06);
  padding: 18px 22px;
  font-size: .95rem;
}
.form-ok.is-on { display: block; }

/* -------------------------------------------------------------- contacts */
.office-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px)  { .office-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .office-grid { grid-template-columns: repeat(4, 1fr); } }
.office { background: var(--white); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.office .kind {
  font-family: var(--display); font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-dk); margin: 0;
}
.office h3 { font-size: 1.02rem; letter-spacing: -.01em; }
.office address { font-style: normal; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.office .who { font-size: .9rem; color: var(--text); margin: 0; }
.office a { font-size: .9rem; word-break: break-word; }
.office--us { border-top: 3px solid var(--red); }

/* ------------------------------------------------------------- final CTA */
.endcta {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.endcta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(90% 130% at 88% 50%, #000 10%, transparent 74%);
}
.endcta-in { position: relative; display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .endcta-in { grid-template-columns: 1.3fr .7fr; gap: 56px; } }
.endcta h2 { color: #fff; }
.endcta p { color: #a9bfd2; margin: 18px 0 0; max-width: 56ch; }
.endcta-side { display: flex; flex-direction: column; gap: 14px; }
.endcta-side .btn { justify-content: center; }
.endcta-ph {
  border: 1px solid var(--ink-3); padding: 18px 22px; text-decoration: none;
  display: block;
}
.endcta-ph:hover { border-color: var(--blue); }
.endcta-ph span {
  display: block; font-family: var(--display); font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dk); margin-bottom: 5px;
}
.endcta-ph strong {
  font-family: var(--display); font-size: 1.34rem; font-weight: 700;
  letter-spacing: -.015em; color: #fff; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- footer */
.ftr { background: var(--ink-2); color: #a9bfd2; border-top: 1px solid var(--ink-3); }
.ftr-top { display: grid; gap: 40px; padding-block: clamp(46px, 5vw, 72px); }
@media (min-width: 820px)  { .ftr-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1100px) { .ftr-top { grid-template-columns: 1.5fr .8fr .8fr 1fr; gap: 50px; } }

.ftr-brand img { height: 24px; width: auto; margin-bottom: 22px; }
.ftr-brand address { font-style: normal; font-size: .93rem; line-height: 1.66; margin-bottom: 18px; }
.ftr-brand a { color: #fff; text-decoration: none; }
.ftr-brand a:hover { color: var(--blue-lt); text-decoration: underline; }

.ftr-hd {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-3);
}
.ftr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ftr-list a { color: #a9bfd2; text-decoration: none; font-size: .92rem; }
.ftr-list a:hover { color: #fff; }

.ftr-parent { border: 1px solid var(--ink-3); padding: 20px; background: rgba(255,255,255,.03); }
.ftr-parent .lbl {
  font-family: var(--display); font-size: .58rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--muted-dk); margin: 0 0 14px;
}
.ftr-parent img { width: 100%; max-width: 190px; height: auto; margin-bottom: 14px; }
.ftr-parent p { font-size: .84rem; line-height: 1.55; margin: 0 0 12px; }
.ftr-parent a { font-size: .84rem; color: var(--blue-lt); }

.ftr-bot {
  border-top: 1px solid var(--ink-3);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
  font-size: .82rem; color: #7d94a9;
}
.ftr-bot .codes { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
/* site credit — sits with the copyright, not competing with the codes */
.ftr-credit { color: #6b8299; }
.ftr-credit a { color: #93a9bd; text-decoration: none; }
.ftr-credit a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ftr-bot a { color: #7d94a9; text-decoration: none; }
.ftr-bot a:hover { color: #fff; }

.social { display: inline-flex; gap: 8px; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--ink-3); color: #a9bfd2;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.social a:hover { border-color: var(--blue); color: #fff; background: rgba(1,125,197,.14); }

/* ---------------------------------------------------------------- motion */
[data-rise] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-rise].is-in { opacity: 1; transform: none; }

.hero-copy .hero-loc,
.hero-copy .t-hero,
.hero-copy .t-lede,
.hero-copy .hero-btns {
  opacity: 0;
  animation: rise .9s var(--ease) forwards;
}
.hero-copy .hero-loc  { animation-delay: .08s; }
.hero-copy .t-hero    { animation-delay: .18s; }
.hero-copy .t-lede    { animation-delay: .32s; }
.hero-copy .hero-btns { animation-delay: .44s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* the plate settles in behind the copy rather than wiping across it */
.hero-bg { opacity: 0; animation: plate 1.3s var(--ease) .1s forwards; }
@keyframes plate {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1; transform: none; }
  .hero-copy .hero-loc, .hero-copy .t-hero, .hero-copy .t-lede, .hero-copy .hero-btns { opacity: 1; }
  .hero-bg { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- print */
@media print {
  .hdr, .endcta, .side-cta, .hero-btns, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .band--ink, .hero, .pagehead { background: #fff !important; color: #000 !important; }
  .band--ink h1, .band--ink h2, .pagehead h1 { color: #000 !important; }
}