/* Custom Manufactured Parts - homepage mockup
   NOTE: all figures on this page (tolerances, capacities, lead times) are
   PLACEHOLDER. Replace before this goes anywhere near a customer. */

:root {
  /* ground + surfaces - saturated racing green, surfaces recessed darker */
  --ink:        #196923;
  --surface:    #10491A;
  --surface-2:  #14561D;
  --field:      #0B3A12;
  --line:       #4E9C58;
  --line-soft:  #3F8F4A;

  /* text - cream, the classic partner to this green */
  --bone:       #FFFDF7;
  --sage:       #EDF2E8;
  --sage-dim:   #D3E0CE;

  /* accent - warm gold, the only colour that holds up on this ground */
  --brass:      #FFCB4D;
  --brass-lit:  #FFD97A;
  --brass-dim:  rgba(255, 203, 77, .34);

  --display: "Bitter", Georgia, "Times New Roman", serif;
  --body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --r: 4px;

  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--brass-lit); text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

.wrap {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---- shared bits ------------------------------------------------ */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
/* In-links inside headings and lead copy keep the surrounding colour and
   weight - a thin underline is enough to say "this goes somewhere". */
.eyebrow a,
.hero-lede a {
  color: inherit;
  text-decoration-color: var(--brass-dim);
}
.eyebrow a:hover,
.hero-lede a:hover { color: var(--brass-lit); text-decoration-color: currentColor; }

.btn {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  border: 0;
  border-radius: var(--r);
  padding: 13px 24px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-brass { background: var(--brass); color: #143A1B; }
.btn-brass:hover { background: var(--brass-lit); }

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--line);
  padding: 12px 23px;
}
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-lit); }

/* dimension line - one deliberate technical flourish, for contrast */
.dim {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-dim);
}
.dim::before,
.dim::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.dim-cap { position: relative; }
.dim-cap::before,
.dim-cap::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 11px;
  background: var(--line);
  transform: translateY(-50%);
}
.dim-cap::before { left: -12px; }
.dim-cap::after { right: -12px; }

/* photo slots for real workshop photography */
.photo {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0 1px, transparent 1px 11px),
    var(--surface);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage-dim);
  text-align: center;
  padding: 12px;
}

/* A real photograph fills the slot its placeholder was drawing. The hatched
   .photo stays in place for the slots still waiting on a shoot. */
img.photo {
  display: block;
  width: 100%;
  /* height:auto is load-bearing - the width/height attributes land as
     presentation hints and would otherwise fix the box at the source
     pixel height, ignoring the slot's aspect-ratio. */
  height: auto;
  padding: 0;
  object-fit: cover;
  background-color: var(--surface);
  background-image: none;
}

/* ---- header ----------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: rgba(25, 105, 35, .94);
  backdrop-filter: blur(8px);
  z-index: 20;
}

.masthead-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-block: 14px;
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--bone);
  margin-right: auto;
}
.wordmark-name {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark-name span { color: var(--brass); }
.wordmark-sub {
  font-size: 12.5px;
  color: var(--sage-dim);
}

.nav {
  display: flex;
  gap: 26px;
  font-size: 15.5px;
}
.nav a {
  color: var(--sage);
  text-decoration: none;
}
.nav a:hover { color: var(--brass-lit); }
.nav a[aria-current="page"] {
  color: var(--bone);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}

/* ---- services dropdown ------------------------------------------
   A native <details>/<summary>. It opens, closes and takes focus on its
   own with no script, which is why it isn't a button and a pile of ARIA;
   site.js only adds close-on-outside-click and Escape. */
.menu { position: relative; }

.menu-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--sage);
  cursor: pointer;
  list-style: none;          /* kill the default disclosure triangle */
  user-select: none;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.menu-btn:hover { color: var(--brass-lit); }
.menu[open] > .menu-btn { color: var(--bone); }
.menu[open] > .menu-btn::after { transform: translateY(1px) rotate(-135deg); }

.menu-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 228px;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px;
  z-index: 30;
}
.menu-panel a {
  padding: 9px 12px;
  border-radius: var(--r);
  color: var(--sage);
  white-space: nowrap;
}
.menu-panel a:hover { background: var(--field); color: var(--brass-lit); }
.menu-panel a[aria-current="page"] {
  color: var(--bone);
  border-bottom: 0;          /* the desktop underline would look like a rule here */
  background: var(--field);
}

.masthead-contact {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
}
.masthead-contact:hover { color: var(--brass-lit); }

/* ---- hero ------------------------------------------------------- */

.hero { border-bottom: 1px solid var(--line); }

.hero-in {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  padding-block: 62px 70px;
  align-items: start;
}

.hero-solo { grid-template-columns: 1fr; }
.hero-solo .hero-lede { max-width: 72ch; }

.hero-title {
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 700;
  margin-block: 18px 0;
}
.hero-title em {
  font-style: italic;
  color: var(--brass-lit);
}

.hero-lede {
  font-size: 19px;
  color: var(--sage);
  max-width: 48ch;
  margin-top: 24px;
}
.hero-lede strong { color: var(--bone); font-weight: 700; }

.hero-strap {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.3;
  color: var(--brass-lit);
  margin-top: 22px;
}

.hero-dim { margin-top: 30px; }

/* full-width photograph between the hero and the first section */
.showcase {
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.showcase .photo {
  aspect-ratio: 2.6 / 1;
  border: 0;
  border-radius: 0;
}
/* Nearly-square source: hold the crop on the cutter and the workpiece
   rather than the empty machine enclosure above them. */
.showcase-img { object-position: center 55%; }
/* 3:2 source - the nozzle and the bed sit just below centre. */
.printer-img { object-position: center 54%; }
/* 3:2 source - the cutter and the coolant sit left of centre, so the wide
   crop holds the left of the frame rather than the empty spray on the right. */
.cnc-img { object-position: 38% 52%; }

.spec-figure {
  margin: 40px 0 30px;
}
.spec-img {
  aspect-ratio: 3 / 1;
  object-position: center 36%;
}

.showcase-caption {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--sage-dim);
  padding-block: 12px 16px;
}

.hero-reassure {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 15.5px;
  color: var(--sage);
}
.hero-reassure li::before {
  content: "- ";
  color: var(--brass);
}

/* ---- quote card ------------------------------------------------- */

.quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--r);
  padding: 26px 26px 28px;
}

.quote-head {
  font-size: 29px;
  font-weight: 700;
  margin-top: 10px;
}

.quote-note {
  font-size: 15px;
  color: var(--sage);
  margin-top: 10px;
}

.field { display: block; margin-top: 18px; }

.field-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--bone);
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  padding: 11px 12px;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--sage-dim); }
.field input:focus,
.field textarea:focus { border-color: var(--brass); outline: none; }

.drop {
  margin-top: 18px;
  border: 1px dashed var(--line);
  background: var(--field);
  border-radius: var(--r);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  display: block;
  transition: border-color .15s ease, background-color .15s ease;
}
.drop:hover { border-color: var(--brass); background: var(--surface-2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.drop-main {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--bone);
}
.drop-sub {
  font-size: 13.5px;
  color: var(--sage-dim);
  margin-top: 6px;
  word-break: break-word;
  display: block;
}

.quote-card .btn { width: 100%; margin-top: 20px; }

.quote-alt {
  font-size: 15px;
  color: var(--sage);
  margin-top: 16px;
  text-align: center;
}

.form-status {
  margin-top: 14px;
  border: 1px solid var(--brass-dim);
  border-radius: var(--r);
  background: rgba(255, 203, 77, .14);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--brass-lit);
}

/* honeypot - off-screen, not display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- generic section -------------------------------------------- */

.band { border-bottom: 1px solid var(--line); }
.band-in { padding-block: 72px; }
/* Bands alternate from the showcase down on every page: content, then the
   workshop note sunk, capabilities, then the closer sunk. Keep it that way
   when adding a section - see DESIGN.md. */
.band-sunk { background: var(--surface); }

.band-head { max-width: 62ch; }
.band-title {
  font-size: clamp(31px, 3.7vw, 44px);
  font-weight: 700;
  margin-top: 14px;
}
.band-lede {
  color: var(--sage);
  margin-top: 16px;
  max-width: 58ch;
}

/* ---- services: hairline grid, not cards ------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 44px;
}

.service {
  background: var(--ink);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.service-name {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.16;
}
.service-copy { font-size: 15.5px; color: var(--sage); }
/* Only one service has a page of its own so far; the heading link keeps the
   heading's colour rather than turning gold and singling the card out. */
.service-link { color: inherit; text-decoration: none; }
.service-link:hover { color: var(--brass-lit); }

/* ---- machine tiles (machining page) -----------------------------
   Name only at rest; hover or keyboard focus slides the description up
   over the tile. It overlays rather than grows, so the grid never jumps.
   The hatched ground is the photo slot for each machine. Touch screens
   can't hover, so there the description just sits under the name. */

.machine-group { margin-top: 46px; }
.machine-group + .machine-group { margin-top: 40px; }
.machine-group-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.machines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.machine {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 240px;
  /* without this, min-height x aspect-ratio becomes a 384px minimum width */
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0 1px, transparent 1px 11px),
    var(--surface);
  outline: none;
}
.machine:focus-visible { box-shadow: 0 0 0 2px var(--brass); }
.machine-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* portrait source - hold the crop on the working head, not the floor.
   (The drill was portrait too; it is pre-cropped to 16:10 in the file,
   because it needed moving sideways as well, which object-position can't
   do when the image already fills the tile's width.) */
.slotter-img { object-position: center 58%; }
/* 4:3 source - the table and vice sit below centre */
.mill-img { object-position: center 75%; }
/* 4:3 source - the rotor sits high, keep it clear of the label */
.balancer-img { object-position: center 20%; }
.machine-label,
.machine-more {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 20px 20px;
}
.machine-label {
  background: linear-gradient(to top, var(--field) 30%, transparent);
  padding-top: 40px;
}
.machine-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}
.machine-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.16;
  margin: 4px 0 0;
}
.machine-more {
  inset: 0;
  background: var(--field);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(100%);
  transition: transform .28s ease;
}
.machine-copy { font-size: 15px; color: var(--sage); margin-top: 10px; }
.machine:hover .machine-more,
.machine:focus .machine-more { transform: none; }

@media (hover: none) {
  .machine { aspect-ratio: auto; min-height: 0; background: var(--surface); }
  .machine-label { display: none; }
  .machine-img { position: static; height: auto; aspect-ratio: 16 / 10; }
  .machine-more { position: static; transform: none; }
}

/* ---- who we work with ------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.person {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  padding: 0 0 26px;
  display: flex;
  flex-direction: column;
}
.person .photo {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 10;
}
.person-body { padding: 22px 24px 0; display: flex; flex-direction: column; gap: 10px; }
.person-name {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.16;
}
.person-quote {
  font-size: 16.5px;
  color: var(--brass-lit);
  font-style: italic;
}
.person-copy { font-size: 15.5px; color: var(--sage); }

/* ---- customer quote --------------------------------------------- */

.testimonial {
  margin-top: 50px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
  max-width: 34em;
}
.testimonial-text {
  font-family: var(--display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.38;
  color: var(--bone);
}
.testimonial-by {
  font-size: 14.5px;
  color: var(--sage-dim);
  margin-top: 16px;
}

/* ---- the note from the workshop --------------------------------- */

.note-in {
  padding-block: 74px;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 56em;
}
.note-body {
  border-left: 2px solid var(--brass);
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* note with a photo beside it - takes the full wrap width so the copy
   keeps its measure */
.note-in--figure {
  max-width: none;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}
.note-photo { aspect-ratio: 4 / 5; }
/* landscape photos whose subject spans the frame - a portrait crop would
   cut them off - stacked so the pair runs the height of the note. */
.note-photos { display: grid; gap: 16px; }
.note-photo--landscape { aspect-ratio: 3 / 2; object-position: center 62%; }
/* show the whole 4:3 photo, uncropped */
.note-photo--uncropped { aspect-ratio: 4 / 3; object-position: center; }
/* a half-and-half split, for a photo that should carry more weight. The
   section runs wider than the standard .wrap so the text column isn't
   squeezed into a tall strip beside the photo. */
.note-in--wide-figure {
  grid-template-columns: 1fr 1fr;
  width: min(1360px, 100%);
}
.note-in--wide-figure .note-body p { max-width: 72ch; }
.note-title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  margin-top: 6px;
}
.note-body p { font-size: 18px; color: var(--sage); max-width: 64ch; }
.note-body p strong { color: var(--bone); font-weight: 700; }
.note-sign {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--brass-lit);
}

/* ---- capability table ------------------------------------------- */

.table-scroll { overflow-x: auto; margin-top: 40px; }

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 620px;
  font-variant-numeric: tabular-nums;
}
.spec th, .spec td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sage-dim);
  border-bottom-color: var(--brass-dim);
}
.spec tbody th { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--bone); }
.spec td { color: var(--sage); }
.spec .num { font-family: var(--mono); font-size: 14px; color: var(--bone); white-space: nowrap; }

.materials {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.material {
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 13px;
  color: var(--sage);
}

.spec-note {
  font-size: 16px;
  color: var(--sage);
  margin-top: 26px;
  max-width: 54ch;
}

/* ---- closing CTA ------------------------------------------------ */

.closer-in {
  padding-block: 78px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
}
.closer-title {
  font-size: clamp(33px, 4.2vw, 50px);
  font-weight: 700;
  margin-top: 14px;
}
.closer-copy { color: var(--sage); margin-top: 18px; max-width: 46ch; font-size: 18px; }

/* how it works, folded into the closer - a real sequence, so it keeps its
   First / Then / Finally markers (see DESIGN.md) */
.closer-steps {
  list-style: none;
  padding: 0;
  margin-top: 26px;
  max-width: 52ch;
  border-top: 1px solid var(--line);
}
.closer-steps li {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--sage);
}
.closer-steps b { color: var(--bone); font-weight: 700; }
.closer-step-when {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 4px;
}
.closer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.contact-block {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 26px;
  display: grid;
  gap: 18px;
}
.contact-row { display: grid; gap: 4px; }
.contact-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sage-dim);
}
.contact-v {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--bone);
  text-decoration: none;
  line-height: 1.25;
}
a.contact-v:hover { color: var(--brass-lit); }
/* An email address is one long unbreakable word. Anywhere it appears, let it
   wrap rather than push its grid column - and the page - wider than a phone. */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.closer-in > *,
.hero-in > * { min-width: 0; }
/* the closer sits on a sunk band - drop the card a step further so it keeps its edge */
.band-sunk .contact-block { background: var(--field); }
.contact-small { font-family: var(--body); font-size: 15.5px; font-weight: 400; color: var(--sage); }
.contact-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--field);
}

/* ---- footer ----------------------------------------------------- */

.foot-in {
  padding-block: 34px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--sage-dim);
}
.foot-in a { color: var(--sage); text-decoration: none; }
.foot-in a:hover { color: var(--brass-lit); }
.foot-backed { margin-right: auto; max-width: 52ch; }
.foot-backed b { color: var(--sage); font-weight: 500; }

/* ---- responsive ------------------------------------------------- */

@media (max-width: 960px) {
  .hero-in, .closer-in { grid-template-columns: 1fr; gap: 40px; }
  .note-in--figure { grid-template-columns: 1fr; gap: 40px; }
  .note-photo { aspect-ratio: 16 / 9; }
  .note-photos { grid-template-columns: 1fr 1fr; }
  .services, .people { grid-template-columns: 1fr 1fr; }
  .machines { grid-template-columns: 1fr 1fr; }
  .nav-link { display: none; }
  .nav { gap: 18px; }
}

@media (max-width: 620px) {
  /* top bar: the email is on every page already - drop it here so the
     pinned bar is two short rows, not three */
  .masthead-contact { display: none; }

  /* closer: full-width buttons, smaller email */
  .closer-actions .btn { flex: 1 1 100%; text-align: center; }
  /* small enough that the domain fits one line after the <wbr> at the @ */
  .contact-v { font-size: 17px; }

  /* tiles: a touch taller so the hover copy fits a narrow tile */
  .machine { aspect-ratio: 4 / 3; min-height: 0; }

  /* capability tables: each row becomes a small card, labels from data-label */
  .table-scroll { overflow: visible; }
  .spec { min-width: 0; }
  .spec thead { display: none; }
  .spec, .spec tbody, .spec tr { display: block; }
  .spec tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .spec th, .spec td { display: block; border: 0; padding: 0; }
  .spec tbody th { font-size: 17px; margin-bottom: 6px; }
  .spec td { display: flex; gap: 12px; padding: 2px 0; }
  .spec .num { white-space: normal; }
  .spec td::before {
    content: attr(data-label);
    flex: 0 0 9.5em;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sage-dim);
    padding-top: 2px;
  }

  body { font-size: 16px; }
  .services, .people { grid-template-columns: 1fr; }
  .machines { grid-template-columns: 1fr; }
  .masthead-in { gap: 6px 16px; }
  .hero-in { padding-block: 48px 56px; }
  .band-in, .note-in { padding-block: 56px; }
  .closer-in { padding-block: 60px; }
  .note-body { padding-left: 20px; }
  .showcase .photo { aspect-ratio: 16 / 9; }
  .spec-img { aspect-ratio: 16 / 10; }
  /* The name runs the full width of the header on phones. The text is
     ~12.75x its font size wide in Bitter 700, so dividing the header's
     content width by 12.9 fills it with a hair to spare, on one line.
     cqi measures the header itself (gutters and scrollbar already out);
     the vw line is the fallback for browsers without container units. */
  .masthead-in { container-type: inline-size; }
  .wordmark { width: 100%; }
  .wordmark-name {
    font-size: calc((100vw - 48px) / 12.9);
    font-size: calc(100cqi / 12.9);
    white-space: nowrap;
  }
  .wordmark-sub { font-size: 11.5px; }
  .masthead-contact { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}