/* Excel Tool — concept site by Lagrange Software
   Palette (named roles)
     ink     #0b1622  night steel: hero, dark sections, footer
     sign    #1a3f78  the blue of the EXCEL TOOL letters on the building
     yellow  #fddb4d  their site's accent; the safety yellow on their shop floor
     block   #f2efe8  the cream block of their building
     steel   #56606b  secondary text; rules #c9cdd1
   Type: Archivo (variable, width 100-125, weight 400-800) + JetBrains Mono 500, both OFL, self-hosted.
   Signature: drawing conventions — dimension rules, to-scale views, figure numbers, a title-block footer. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JB Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b1622;
  --ink-2: #111f2e;
  --ink-3: #182a3c;
  --sign: #1a3f78;
  --sign-deep: #14315e;
  --yellow: #fddb4d;
  --yellow-2: #ffe680;
  --block: #f2efe8;
  --paper: #faf9f6;
  --white: #ffffff;
  --text: #15202b;
  --steel: #56606b;
  --rule: #c9cdd1;
  --rule-soft: #e2e4e6;
  --light: #eef2f5;
  --light-2: #b8c3ce;
  --rule-dark: rgba(255, 255, 255, .16);
  --focus: var(--sign);

  --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JB Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-h1: clamp(2.2rem, 1rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2.5vw, 3.1rem);
  --fs-h3: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  --fs-lead: clamp(1.06rem, 1rem + .35vw, 1.27rem);
  --fs-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-mono: .8125rem;

  --gutter: clamp(1.1rem, 4.2vw, 2.75rem);
  --wrap: 1240px;
  --sec: clamp(4rem, 2.8rem + 5.5vw, 7.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 10rem; /* the demo host's banner is up to ~153 px tall on phones */
}
@media (min-width: 900px) { html { scroll-padding-top: 4rem; } }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--block);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
small { font-size: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
#main:focus { outline: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.measure { max-width: 62ch; }
.nw { white-space: nowrap; }

/* skip link: stays in normal flow when focused, so the host banner cannot cover it */
.skip {
  position: absolute; left: -9999px; top: auto;
  background: var(--yellow); color: var(--ink); font-weight: 700; padding: .9rem 1.2rem; text-decoration: none;
}
.skip:focus { position: static; display: block; left: auto; --focus: var(--ink); }

/* ---------- shared type ---------- */
.eyebrow, .tag, .fig, .mark-sub, .view-label, .cl-label, .tb-k, .materials-label, .router-head, .router-where, .stamp, .keyfigs dt, .spec-table thead th, .group-note, .legend, .op-n, .setup-dim span, .hours-title span {
  font-family: var(--f-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.tag {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-mono); color: var(--steel); margin: 0 0 1.1rem;
}
.tag-n {
  display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.45rem; padding: 0 .35rem;
  background: var(--sign); color: var(--white); letter-spacing: .04em;
}
.tag-light { color: var(--light-2); }
.tag-light .tag-n { background: var(--yellow); color: var(--ink); }

h2 {
  font-size: var(--fs-h2);
  font-weight: 760;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -.018em;
  color: var(--sign);
  max-width: 21ch;
}
.section-ink h2, .section-contact h2 { color: var(--white); }
.h3 {
  font-size: var(--fs-h3); font-weight: 740; font-stretch: 115%; line-height: 1.1; letter-spacing: -.01em; color: var(--sign);
}

/* the dimension rule under headings: |———| */
.dim-rule::after {
  content: "";
  display: block;
  width: min(13rem, 60%);
  height: 11px;
  margin-top: 1.05rem;
  color: var(--sign);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 1.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 1.5px 100% no-repeat;
}
.section-ink .dim-rule::after, .section-contact .dim-rule::after { color: var(--yellow); }
.dim-rule { margin-bottom: 1.6rem; }
.section-head .dim-rule { margin-bottom: 0; }
.section-head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section-head .measure { margin-top: 1.4rem; color: var(--steel); }
.section-head-row { display: grid; gap: 1.2rem; align-items: end; }
@media (min-width: 900px) {
  .section-head-row { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .section-head-row .measure { margin: 0 0 .3rem; justify-self: end; max-width: 40ch; }
}

.fig { color: var(--sign); font-size: .8125rem; margin-right: .45rem; }
figure { margin: 0; }
figcaption { font-size: .84rem; color: var(--steel); margin-top: .7rem; line-height: 1.45; }
.section-ink figcaption, .hero figcaption { color: var(--light-2); }
.section-ink .fig, .hero .fig, .section-contact .fig { color: var(--yellow); }

/* crop-mark corners on key photos */
.frame { display: block; position: relative; }
.corners .frame::before, .corners .frame::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 1;
  border: 0 solid var(--sign);
}
.corners .frame::before { top: -9px; left: -9px; border-top-width: 2px; border-left-width: 2px; }
.corners .frame::after { right: -9px; bottom: -9px; border-bottom-width: 2px; border-right-width: 2px; }
.hero .corners .frame::before, .hero .corners .frame::after, .section-ink .corners .frame::before, .section-ink .corners .frame::after { border-color: var(--yellow); }
@media (max-width: 599.98px) {
  .corners .frame::before { top: -6px; left: -6px; width: 16px; height: 16px; }
  .corners .frame::after { right: -6px; bottom: -6px; width: 16px; height: 16px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; padding: .8rem 1.35rem;
  font-family: var(--f-sans); font-size: 1rem; font-weight: 680; font-stretch: 108%; letter-spacing: .005em; line-height: 1.15;
  text-decoration: none; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn .arrow { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; transition: transform .25s ease; }
.btn .ico { width: 1.05em; height: 1.05em; fill: currentColor; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn-yellow:hover { background: var(--yellow-2); border-color: var(--yellow-2); transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); text-decoration: none; }
.btn-ghost { color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.07); text-decoration: none; }
.btn-blue { background: var(--sign); color: var(--white); border-color: var(--sign); }
.btn-blue:hover { background: var(--sign-deep); border-color: var(--sign-deep); text-decoration: none; }
.btn-line { background: transparent; color: var(--sign); border-color: var(--sign); }
.btn-line:hover { background: rgba(26,63,120,.07); text-decoration: none; }
.btn-sm { min-height: 2.75rem; padding: .5rem 1rem; font-size: .94rem; }

/* ---------- header: the building's fascia ---------- */
.fascia { position: relative; z-index: 30; background: var(--block); color: var(--sign); --focus: var(--sign); }
.fascia::after {
  content: ""; display: block; height: 9px;
  background: repeating-linear-gradient(90deg, #b3b8bb 0 2px, #d3d6d6 2px 5px);
  border-top: 1px solid #a9aeb1;
}
.fascia-bar { display: flex; align-items: center; gap: .75rem; min-height: 4.25rem; flex-wrap: wrap; }
.mark { display: flex; flex-direction: column; text-decoration: none; padding: .55rem 0; margin-right: auto; line-height: 1; }
.mark-word {
  font-size: clamp(1.28rem, 1.05rem + 1vw, 1.7rem); font-weight: 800; font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .015em; color: var(--sign);
}
.mark { min-width: 0; }
.mark-sub-long { display: none; }
@media (min-width: 700px) { .mark-sub-long { display: inline; } }
.mark-sub { font-size: .8125rem; letter-spacing: .07em; color: var(--steel); margin-top: .38rem; line-height: 1.35; }
.menu-btn { min-width: 6.1rem; justify-content: center; }
@media (max-width: 1199.98px) { .js .fascia-bar { flex-wrap: nowrap; } }
.mark:hover .mark-word { color: var(--sign-deep); }

.menu-btn {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; min-width: 2.75rem; padding: .4rem .8rem;
  background: transparent; border: 1.5px solid var(--sign); color: var(--sign); border-radius: 2px; cursor: pointer;
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase;
}
.menu-icon { display: grid; gap: 4px; width: 18px; }
.menu-icon i { display: block; height: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.no-js .menu-btn { display: none; }
.fascia-quote { order: 2; }
.menu-btn { order: 3; }
.site-nav { order: 10; flex-basis: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: flex; align-items: center; min-height: 3rem; text-decoration: none;
  font-weight: 620; font-stretch: 108%;
}
.site-nav a:hover { text-decoration: underline; }
/* phones and tablets: a drop panel when JS runs, a plain wrapped row when it does not */
@media (max-width: 1199.98px) {
  .no-js .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; padding-bottom: .4rem; }
  .js .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--block); border-bottom: 2px solid var(--sign);
    box-shadow: 0 18px 30px -18px rgba(11,22,34,.45);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .js .site-nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .js .site-nav ul { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; padding: .4rem 0 1rem; }
  .js .site-nav li + li { border-top: 1px solid var(--rule); }
  .js .site-nav a { font-size: 1.12rem; min-height: 3.3rem; }
  .nav-call a { color: var(--sign); }
}
@media (max-width: 559.98px) { .fascia-quote { display: none; } }
@media (max-width: 379.98px) {
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menu-btn { padding: .4rem; justify-content: center; }
}
@media (min-width: 1200px) {
  .fascia-bar { flex-wrap: nowrap; min-height: 5rem; gap: 1.5rem; }
  .menu-btn { display: none; }
  .site-nav { order: 1; flex-basis: auto; }
  .site-nav ul { display: flex; gap: .15rem; }
  .site-nav a {
    min-height: 2.75rem; padding: 0 .6rem;
    font-size: .95rem; font-weight: 620; font-stretch: 104%;
    position: relative;
  }
  .site-nav a::after {
    content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .55rem; height: 2px;
    background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  .site-nav a:hover { text-decoration: none; }
  .site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
  .nav-call { display: none; }
}
@media (min-width: 1360px) {
  .nav-call { display: block; }
  .nav-call a { color: var(--sign); font-weight: 500; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--ink);
  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: 32px 32px;
  background-position: -1px -1px;
  color: var(--light);
  --focus: var(--yellow);
}
.hero-grid { padding-top: clamp(2.2rem, 1.5rem + 3vw, 5rem); }
.eyebrow { font-size: .8125rem; letter-spacing: .09em; margin: 0 0 1.3rem; color: var(--light-2); }
.eyebrow span { color: var(--yellow); }
.hero h1 {
  font-size: var(--fs-h1); font-weight: 780; font-stretch: 112%; line-height: 1.01; letter-spacing: -.022em;
  color: var(--white); max-width: 15ch;
}
.hero-lead { font-size: var(--fs-lead); line-height: 1.55; color: #cdd6df; max-width: 46ch; margin: 1.4rem 0 1.9rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-contact { margin: 1.3rem 0 0; font-size: .95rem; color: var(--light-2); }
.hero-contact a { color: var(--white); white-space: nowrap; }
.hero-photo { margin-top: 2.4rem; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; background: var(--ink-3); }
.hero-photo figcaption { min-height: 1.5rem; }

.keyfigs {
  display: grid; grid-template-columns: 1fr 1fr; margin: clamp(2.2rem, 1.5rem + 2vw, 3.5rem) 0 0; padding: 0;
  border-top: 1px solid var(--rule-dark);
}
.keyfigs div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem;
  padding: 1.15rem 1rem 1.4rem 0; border-bottom: 1px solid var(--rule-dark);
}
.keyfigs div:nth-child(odd) { border-right: 1px solid var(--rule-dark); }
.keyfigs div:nth-child(even) { padding-left: 1rem; }
.keyfigs dt { font-size: .8125rem; letter-spacing: .05em; color: var(--light-2); line-height: 1.4; }
.keyfigs dd {
  margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 760; font-stretch: 115%; line-height: 1.05;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.keyfigs dd::before { content: ""; display: block; width: 18px; height: 3px; background: var(--yellow); margin-bottom: .7rem; }
@media (min-width: 900px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .hero-photo { margin-top: 0; }
  .hero-photo img { aspect-ratio: 4 / 5; max-height: min(70vh, 640px); }
  .keyfigs { grid-template-columns: repeat(4, 1fr); border-bottom: 0; }
  .keyfigs div { border-bottom: 0; border-right: 1px solid var(--rule-dark); padding: 1.4rem 1.5rem 2.2rem; }
  .keyfigs div:first-child { padding-left: 0; }
  .keyfigs div:last-child { border-right: 0; }
  .keyfigs div:nth-child(even) { padding-left: 1.5rem; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--sec); position: relative; }
.section-light { background: var(--paper); }
.section-paper { background: var(--block); }
.section-ink { background: var(--ink); color: var(--light); --focus: var(--yellow); }
.section-ink .measure { color: #cdd6df; }

/* 01 capabilities */
.cap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.cap-copy > .measure { font-size: 1.06rem; }
.cap-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 900px) {
  .cap-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; }
}

.setup { margin: 2.2rem 0 2.6rem; max-width: 36rem; }
.setup-ops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.setup-ops li { display: grid; }
/* each operation is a tab (button); closed, it looks exactly as the plain card did */
.setup-ops [role="tab"] {
  position: relative; display: flex; align-items: center; gap: .65rem;
  margin: 0; padding: .85rem .9rem; background: var(--white); border: 1px solid var(--rule); border-radius: 0;
  font: inherit; font-weight: 660; font-stretch: 110%; font-size: 1.04rem; color: var(--ink); text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.setup-ops [role="tab"]:hover { border-color: var(--sign); transform: translateY(-2px); }
/* play mark, top right: says the card opens a clip; turns down (toward the clip) when selected */
.setup-ops [role="tab"]::after {
  content: ""; position: absolute; top: .5rem; right: .55rem; width: .42rem; height: .5rem;
  background: var(--steel); opacity: .55; clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}
.setup-ops [role="tab"]:hover::after { background: var(--sign); opacity: 1; }
.setup-ops [role="tab"][aria-selected="true"] { border-color: var(--sign); box-shadow: inset 0 0 0 1px var(--sign); }
.setup-ops [role="tab"][aria-selected="true"] .op-n { background: var(--sign); color: var(--white); }
.setup-ops [role="tab"][aria-selected="true"]::after { background: var(--sign); opacity: 1; transform: rotate(90deg); }
.op-n {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none;
  border: 1.5px solid var(--sign); color: var(--sign); font-size: .7rem; letter-spacing: 0; border-radius: 50%;
}
@media (min-width: 560px) { .setup-ops { grid-template-columns: repeat(4, 1fr); } .setup-ops [role="tab"] { flex-direction: column; align-items: flex-start; gap: .55rem; } }
.setup-dim {
  position: relative; margin: .75rem 0 0; height: 1.9rem; display: grid; place-items: center;
  border-inline: 1.5px solid var(--sign);
}
.setup-dim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--sign);
}
.setup-dim::after {
  content: ""; position: absolute; inset: 0;
  background:
    conic-gradient(from 60deg at 0 50%, var(--sign) 0 60deg, transparent 0) left center / 10px 8px no-repeat,
    conic-gradient(from 240deg at 100% 50%, var(--sign) 0 60deg, transparent 0) right center / 10px 8px no-repeat;
}
.setup-dim span { position: relative; z-index: 1; background: var(--paper); padding: 0 .75rem; color: var(--sign); font-size: .8125rem; letter-spacing: .12em; }
/* the clip a tab opens, under the "one setup" line (16:9; src and poster are set only when a tab is chosen) */
.setup-clip { margin-top: 1.4rem; }
.setup-clip[hidden] { display: none; }
.clip-frame { background: var(--ink); }
.clip-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.clip-still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.clip-video[hidden], .clip-still[hidden] { display: none; }
.clip-embed { display: flex; justify-content: center; width: 100%; height: min(72vh, 560px); background: var(--ink); }
.clip-embed iframe { display: block; height: 100%; aspect-ratio: 9 / 16; border: 0; background: #000; }
.is-embed .clip-frame { aspect-ratio: auto; }
.clip-embed[hidden] { display: none; }
.clip-toggle {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--white); cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.clip-toggle[hidden] { display: none; }
.clip-toggle:focus-visible { --focus: var(--yellow); outline-offset: -5px; }
.clip-state {
  margin: .6rem; padding: .2rem .5rem; background: rgba(11, 22, 34, .78);
  font-family: var(--f-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: opacity .2s ease;
}
.clip-toggle:hover .clip-state, .clip-toggle:focus-visible .clip-state, .setup-clip.is-paused .clip-state { opacity: 1; }

.materials-label { font-size: .8125rem; color: var(--steel); margin: 0 0 .6rem; }
.materials ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.materials li {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); font-weight: 740; font-stretch: 118%; letter-spacing: -.01em; color: var(--ink);
  padding: .15rem 1rem .15rem 0; margin-right: 1rem; border-right: 1px solid var(--rule); line-height: 1.25;
}
.materials li:last-child { border-right: 0; margin-right: 0; }

/* 02 completion */
.comp-grid { display: grid; gap: 2.6rem; }
.comp-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 60%; }
@media (min-width: 900px) {
  .comp-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.8rem clamp(3rem, 6vw, 6rem);
    grid-template-areas: "copy router" "photo router";
    align-items: start;
  }
  .comp-copy { grid-area: copy; }
  .router { grid-area: router; }
  .comp-photo { grid-area: photo; }
}
.router { background: var(--ink-2); border: 1px solid var(--rule-dark); }
.router-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin: 0; padding: .9rem 1.2rem; border-bottom: 1px solid var(--rule-dark); font-size: .8125rem; color: var(--light-2); }
.router-head span:first-child { color: var(--yellow); }
.router-block { padding: 1.35rem 1.2rem 1.45rem; border-bottom: 1px solid var(--rule-dark); }
.router-where { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin: 0 0 1rem; font-size: .8125rem; color: var(--light-2); }
.stamp { display: inline-block; border: 1.5px solid var(--light-2); color: var(--white); padding: .18rem .5rem; font-size: .8125rem; letter-spacing: .07em; }
.stamp-yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.router ul { list-style: none; margin: 0; padding: 0; }
.router-block:first-of-type li {
  font-size: 1.15rem; font-weight: 640; font-stretch: 106%; color: var(--white); line-height: 1.3;
  padding: .65rem 0 .65rem 1.9rem; position: relative;
}
.router-block:first-of-type li + li { border-top: 1px dashed var(--rule-dark); }
.router-block:first-of-type li::before {
  content: ""; position: absolute; left: 0; top: .8rem; width: 1.05rem; height: 1.05rem;
  background: var(--yellow);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.router-block:first-of-type li small { display: block; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--light-2); font-weight: 500; margin-top: .3rem; }
.router-outside { display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem 1rem; }
.router-outside li {
  display: flex; align-items: center; gap: .7rem; padding: .55rem 0; font-size: 1.05rem; font-weight: 560; color: var(--white);
  border-bottom: 1px dashed var(--rule-dark);
}
.router-outside li::before { content: ""; width: .9rem; height: .9rem; flex: none; border: 1.5px solid var(--light-2); }
.router-outside li:last-child { color: var(--light-2); font-style: normal; }
@media (min-width: 560px) { .router-outside { grid-template-columns: repeat(3, 1fr); } }
.router-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; min-height: 3.5rem;
  color: var(--yellow); text-decoration: none; font-weight: 620; transition: background-color .2s ease;
}
.router-cta .arrow { width: 1.3rem; height: 1.3rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s ease; }
.router-cta:hover { background: rgba(253,219,77,.07); }
.router-cta:hover .arrow { transform: translateX(4px); }

/* 03 capacities: the sheet */
.sheet {
  background: var(--white);
  border: 1.5px solid var(--sign);
  outline: 1px solid var(--sign); outline-offset: 5px;
  margin: 6px;
  padding: clamp(1.1rem, .6rem + 2.4vw, 2.6rem);
  position: relative;
}
.sheet-zones { display: none; }
@media (min-width: 900px) {
  .sheet-zones {
    display: flex; justify-content: space-around; position: absolute; left: 0; right: 0; top: -1.15rem;
    font-family: var(--f-mono); font-size: .6rem; color: var(--sign); pointer-events: none;
  }
}
.spec-grid { display: grid; gap: 2.6rem; }
@media (min-width: 1024px) { .spec-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 4vw, 4rem); align-items: start; } }

.spec-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.spec-table thead th { font-size: .8125rem; color: var(--steel); text-align: left; padding: 0 .5rem .65rem 0; border-bottom: 2px solid var(--sign); }
.spec-table .num { text-align: right; padding-left: .75rem; }
.spec-table thead th.num { padding-right: 0; }
.approx { letter-spacing: 0; }
.spec-table .group th { padding: 1.5rem 0 .55rem; border-bottom: 1px solid var(--sign); text-align: left; }
.spec-table tbody:first-of-type .group th { padding-top: 1.05rem; }
.group-name { font-size: 1.02rem; font-weight: 780; font-stretch: 122%; text-transform: uppercase; letter-spacing: .03em; color: var(--sign); margin-right: .6rem; }
.spec-table .group-note { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 450; color: var(--steel); display: inline-block; }
.spec-table tbody tr:not(.group) { border-bottom: 1px solid var(--rule-soft); transition: background-color .2s ease, box-shadow .2s ease; }
.spec-table tbody tr:not(.group) th { font-weight: 560; text-align: left; padding: .75rem .5rem .75rem 0; line-height: 1.3; font-size: .98rem; }
.spec-table tbody tr:not(.group) th small { display: block; font-size: .86rem; color: var(--steel); font-weight: 430; margin-top: .2rem; }
.spec-table td { padding: .75rem 0 .75rem .75rem; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); font-weight: 680; font-stretch: 106%; color: var(--ink); white-space: nowrap; vertical-align: baseline; }
.spec-table td:last-child { color: var(--steel); font-weight: 520; font-size: clamp(.94rem, .9rem + .2vw, 1.05rem); }
.spec-table td[colspan] { color: var(--ink); font-weight: 680; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.spec-table td.txt { white-space: normal; text-align: right; line-height: 1.3; }
.spec-table tr[data-dim] { cursor: default; }
.spec-table tr.is-hot { background: rgba(253,219,77,.28); box-shadow: inset 3px 0 0 var(--sign); }
.spec-note { font-size: .82rem; color: var(--steel); margin: 1rem 0 0; }

/* the drawing */
.drawing { margin: 0; }
/* one viewBox unit is the same size in all three views at every width: the two lathe views (180 + 236, a 10-unit
   gap) share a row of 426 units that fills the column, and the mill (370) is 370 / 426 of it; under 600 px all
   three stack and the mill fills the column, so the lathe svgs are their width / 370 */
.drawing-views { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; row-gap: 1.4rem; }
.view { min-width: 0; }
.view-lathe-bar { width: calc(100% * 180 / 426); }
.view-lathe-turn { width: calc(100% * 236 / 426); }
.view-mill { width: calc(100% * 370 / 426); }
.view svg { width: 100%; height: auto; overflow: visible; }
.view-label { font-size: .8125rem; color: var(--sign); margin: .55rem 0 0; }
@media (max-width: 599.98px) {
  .drawing-views { flex-direction: column; flex-wrap: nowrap; }
  .view-lathe-bar, .view-lathe-turn, .view-mill { width: 100%; }
  .view-lathe-bar svg { width: calc(100% * 180 / 370); }
  .view-lathe-turn svg { width: calc(100% * 236 / 370); }
}
.drawing figcaption { margin-top: 1.2rem; font-size: .82rem; }
.drawing text { font-family: var(--f-sans); font-weight: 600; font-stretch: 104%; font-size: 15px; fill: var(--sign); font-variant-numeric: tabular-nums; }
.drawing text.note { font-size: 13px; }
.g-minor { fill: none; stroke: rgba(26,63,120,.1); stroke-width: .6; }
.hatch { stroke: rgba(26,63,120,.55); stroke-width: 1; }
.envelope { fill: rgba(26,63,120,.045); stroke: var(--sign); stroke-width: 1.6; }
.bar-edge { fill: none; stroke: var(--sign); stroke-width: 1.4; }
.table { fill: rgba(26,63,120,.045); stroke: var(--sign); stroke-width: 1.6; }
.slots { fill: none; stroke: var(--sign); stroke-width: .8; opacity: .55; }
/* mill table, isometric view: a white ground hides the sheet grid under the slab; the 1-inch grid on the table is lighter than its outline */
.iso-ground { fill: var(--white); }
.iso-side { fill: rgba(26,63,120,.07); }
.iso-side-r { fill: rgba(26,63,120,.15); }
.iso-edge { fill: none; stroke: var(--sign); stroke-width: 1.6; stroke-linejoin: round; }
.g-iso { fill: none; stroke: rgba(26,63,120,.24); stroke-width: .5; }
.g-iso-half { stroke: rgba(26,63,120,.21); stroke-width: .45; }
.g-iso-major { stroke: rgba(26,63,120,.42); stroke-width: .7; }
/* round 11: the mill vises' -X faces, one step darker than iso-side-r, so the vises (top iso-side, -Y iso-side-r) read as
   solid steel on the table and the stock in them (top white, -Y iso-face, -X iso-side) stands out */
.iso-side-d { fill: rgba(26,63,120,.22); }
/* lathe views: the Y-travel plane is a translucent pane (white at .72 with the .05 blue tint folded in), so the bar
   behind it reads through; the turned face is lit like the table top */
.iso-pane { fill: rgba(239,242,246,.72); }
.pane-edge { fill: none; stroke: var(--sign); stroke-width: 1.1; stroke-linejoin: round; }
.iso-face { fill: rgba(26,63,120,.045); }
.phantom { stroke-dasharray: 12 2.5 2 2.5 2 2.5; stroke-opacity: .6; }
.d-center path { fill: none; stroke: var(--sign); stroke-width: .8; stroke-dasharray: 14 3 3 3; opacity: .7; }
.ext { fill: none; stroke: var(--sign); stroke-width: .8; }
.dline { fill: none; stroke: var(--sign); stroke-width: 1; }
.arrowhead { fill: var(--sign); }
.hot { fill: var(--yellow); opacity: 0; transition: opacity .2s ease; }
.dim.is-hot .hot { opacity: 1; }
.dim.is-hot .dline, .dim.is-hot .ext { stroke-width: 1.6; }
.js .drawing .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.45,.05,.2,1) .2s; }
.js .drawing.in .draw { stroke-dashoffset: 0; }
.js .drawing .dline.draw { transition-delay: .9s; transition-duration: .9s; }
.js .drawing .arrowhead, .js .drawing text, .js .drawing .ext, .js .drawing .bar, .js .drawing .slots { opacity: 0; transition: opacity .5s ease 1.4s; }
.js .drawing.in .arrowhead, .js .drawing.in text, .js .drawing.in .ext, .js .drawing.in .bar { opacity: 1; }
.js .drawing.in .slots { opacity: .55; }
.js .drawing .g-iso { opacity: 0; transition: opacity .6s ease 1.1s; }
.js .drawing.in .g-iso { opacity: 1; }

/* equipment */
.equip { display: grid; gap: 2.2rem 1rem; grid-template-columns: 1fr 1fr; margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.equip-copy { grid-column: 1 / -1; }
.equip-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.equip-photo figcaption { font-size: .84rem; }
@media (min-width: 900px) {
  .equip { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .85fr); gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start; }
  .equip-copy { grid-column: auto; }
  .equip-photo-b { margin-top: 4rem; }
}
.equip .h3 { margin-bottom: 1.1rem; }
.register { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.register li {
  display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .3rem 1rem; align-items: center;
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.reg-qty { font-size: 2.15rem; font-weight: 800; font-stretch: 125%; color: var(--sign); line-height: 1; font-variant-numeric: tabular-nums; grid-row: span 2; }
.reg-what { font-size: 1.08rem; font-weight: 640; font-stretch: 106%; line-height: 1.25; color: var(--ink); }
.reg-what small { display: block; font-size: .84rem; font-weight: 450; font-stretch: 100%; color: var(--steel); margin-top: .2rem; }
.pips { display: flex; gap: 4px; }
.pip { display: inline-block; width: 12px; height: 18px; border: 1.5px solid var(--sign); vertical-align: middle; }
.pip.feed { background: linear-gradient(to top, var(--yellow) 0 45%, transparent 45%); }
.pip.mill { width: 18px; background: var(--sign); }
@media (min-width: 480px) {
  .register li { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
  .reg-qty { grid-row: auto; }
}
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .9rem 0 0; font-size: .8125rem; color: var(--steel); }
.legend .pip { width: 9px; height: 13px; margin-left: .5rem; }
.legend .pip:first-child { margin-left: 0; }
.legend .pip.mill { width: 13px; }

/* 04 gallery mosaic */
.mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 54vw; gap: .55rem; }
.mosaic li { position: relative; overflow: hidden; background: var(--ink-3); }
.mosaic figure { height: 100%; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.mosaic li:hover img { transform: scale(1.04); }
.mosaic figcaption {
  position: absolute; left: .5rem; bottom: .5rem; right: auto; margin: 0; max-width: calc(100% - 1rem);
  background: rgba(11,22,34,.86); color: var(--white); padding: .3rem .55rem; font-family: var(--f-sans); font-weight: 600; font-size: .8125rem;
  letter-spacing: 0; line-height: 1.3;
}
.mosaic .fig { color: var(--yellow); margin-right: .4rem; font-family: var(--f-mono); font-weight: 500; }
.mosaic .m-parts { grid-column: span 2; }
.m-parts img { object-position: 50% 50%; }
.m-plates img { object-position: 50% 45%; }
.m-a img { object-position: 50% 40%; }
.m-b img { object-position: 50% 60%; }
.m-c img { object-position: 45% 50%; }
.m-d img { object-position: 60% 40%; }
.m-e img { object-position: 50% 35%; }
.m-f img { object-position: 45% 45%; }
.m-g img { object-position: 50% 40%; }
@media (min-width: 600px) {
  .mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(84px, 9vw, 132px); gap: .7rem; }
  .mosaic li { grid-column: span 3; grid-row: span 3; }
  .mosaic .m-parts { grid-column: span 6; grid-row: span 4; }
}
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(12, 1fr); }
  .mosaic .m-parts { grid-column: span 8; grid-row: span 4; }
  .mosaic .m-plates { grid-column: span 4; grid-row: span 4; }
  .mosaic .m-a, .mosaic .m-b, .mosaic .m-c, .mosaic .m-d { grid-column: span 3; grid-row: span 3; }
  .mosaic .m-e, .mosaic .m-f, .mosaic .m-g { grid-column: span 4; grid-row: span 3; }
}

/* 05 about */
.about-grid { display: grid; gap: 2rem; }
.about-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); font-weight: 520; }
.about-a img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; }
.about-b img, .about-c img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about-b img { object-position: 50% 55%; }
.about-c img { object-position: 40% 55%; }
@media (min-width: 600px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-copy, .about-a { grid-column: 1 / -1; }
  .about-b img { aspect-ratio: 4 / 5; }
  .about-c img { aspect-ratio: 4 / 5; }
}
@media (min-width: 1000px) {
  .about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.4rem 1.6rem; align-items: start; }
  .about-copy { grid-column: 1 / span 5; grid-row: 1; padding-top: .5rem; }
  .about-a { grid-column: 7 / span 6; grid-row: 1; }
  .about-b { grid-column: 1 / span 4; grid-row: 2; }
  .about-c { grid-column: 5 / span 8; grid-row: 2; }
  .about-b img { aspect-ratio: auto; height: clamp(300px, 30vw, 380px); }
  .about-c img { aspect-ratio: auto; height: clamp(300px, 30vw, 380px); }
}

/* 06 contact */
.section-contact { background: var(--sign); color: var(--white); --focus: var(--yellow); }
.section-contact .tag-light { color: #c3d2e8; }
.section-contact .measure { color: #dbe5f2; font-size: 1.06rem; }
.section-contact figcaption { color: #c3d2e8; }
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
.contact-list { list-style: none; margin: 2rem 0 2.2rem; padding: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.contact-list li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .2rem 1rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.22); }
.cl-label { font-size: .8125rem; color: #c3d2e8; }
.contact-list a { color: var(--white); font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-list a.cl-big { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); font-weight: 760; font-stretch: 112%; text-decoration: none; letter-spacing: -.01em; }
.contact-list a.cl-big:hover { text-decoration: underline; }
.cl-hint { grid-column: 2; font-size: .84rem; color: #c3d2e8; }
.building img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 40%; }
.hours { margin-top: 2rem; background: var(--sign-deep); padding: 1.3rem 1.4rem 1rem; border: 1px solid rgba(255,255,255,.18); }
.hours-title { font-size: 1.15rem; font-weight: 720; font-stretch: 112%; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-bottom: .7rem; }
.hours-title span { font-size: .8125rem; color: #c3d2e8; font-weight: 500; }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.14); text-align: left; font-weight: 500; }
.hours-table td { text-align: right; color: #e6edf7; }
.hours-table tr.today th, .hours-table tr.today td { color: var(--white); font-weight: 700; }
.hours-table tr.today th::after {
  content: "Today"; margin-left: .6rem; padding: .1rem .4rem; background: var(--yellow); color: var(--ink);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: .08em;
}

/* ---------- footer: the title block ---------- */
.titleblock { background: var(--ink); color: var(--light); padding: 3rem 0 2.4rem; --focus: var(--yellow); }
.tb { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.24); border-left: 1px solid rgba(255,255,255,.24); }
.tb-cell { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem .9rem; border-right: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); min-width: 0; }
.tb-name { grid-column: 1 / -1; }
.tb-k { font-size: .8125rem; color: var(--light-2); }
.tb-v { font-size: .95rem; color: var(--white); font-weight: 560; overflow-wrap: anywhere; }
a.tb-v { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
a.tb-v:hover { text-decoration-color: currentColor; }
.tb-brand { font-size: 1.02rem; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: .02em; }
.tb-s { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--yellow); }
@media (min-width: 900px) {
  .tb { grid-template-columns: 1.6fr 1.5fr 1fr 1.25fr .6fr .85fr; }
  .tb-name { grid-column: auto; }
}
.tb-foot { margin: 1.3rem 0 0; font-size: .9rem; }
.tb-foot a { color: var(--white); display: inline-block; padding: .55rem 0; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* =================== quote page =================== */
.page-head {
  background-color: var(--ink);
  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: 32px 32px; background-position: -1px -1px;
  color: var(--light); padding: clamp(2.2rem, 1.5rem + 3vw, 4.5rem) 0 clamp(2.2rem, 1.6rem + 2.5vw, 3.6rem);
  --focus: var(--yellow);
}
.page-head h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.7rem); font-weight: 780; font-stretch: 112%; line-height: 1.02; letter-spacing: -.02em; color: var(--white); max-width: 16ch; }
.page-head .hero-lead { margin-bottom: 1.2rem; }
.page-head-grid { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .page-head-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 4rem; align-items: end; } }
.concept-flag {
  border: 1.5px dashed var(--yellow); padding: 1rem 1.1rem; font-size: .92rem; color: #e6ecf1; margin: 0; max-width: 34rem;
}
.concept-flag strong { color: var(--yellow); font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: .35rem; font-weight: 500; }
.page-head .hero-contact a { color: var(--white); }

.rfq-wrap { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--sec); background: var(--block); }
.rfq-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .rfq-grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; align-items: start; } }

.rfq-form { min-width: 0; }
.fs {
  border: 0; margin: 0 0 1.25rem; padding: clamp(1.2rem, .8rem + 2vw, 2rem);
  background: var(--white); border-top: 3px solid var(--sign); min-width: 0;
}
.fs > legend { float: left; width: 100%; padding: 0; margin: 0 0 1.4rem; display: flex; align-items: baseline; gap: .8rem; }
.fs > legend + * { clear: both; }
.fs-n { font-family: var(--f-mono); font-size: .72rem; color: var(--white); background: var(--sign); padding: .15rem .45rem; letter-spacing: .06em; }
.fs-t { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); font-weight: 740; font-stretch: 112%; color: var(--sign); letter-spacing: -.01em; }
.fs-hint { display: block; color: var(--steel); font-size: .92rem; }

.row { display: grid; gap: 1.1rem 1rem; }
.fs > * + *:not(.err) { margin-top: 1.35rem; }
.fs > .fs-hint { margin-top: -.7rem; margin-bottom: 0; }
.row > * { margin: 0; }
.repeat-only > .row { margin-top: 0; }
@media (min-width: 600px) {
  .row-2 { grid-template-columns: 1fr 1fr; }
  .row-3 { grid-template-columns: 1.4fr 1fr .6fr; }
  .row-qty { grid-template-columns: 1fr 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field label, .choice legend, .lbl { font-weight: 620; font-size: .98rem; color: var(--ink); }
.opt { font-weight: 450; color: var(--steel); font-size: .86rem; }
.req { color: #9a2a12; font-weight: 700; }
.help { font-size: .84rem; color: var(--steel); margin: 0; line-height: 1.4; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 3rem; padding: .7rem .8rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid #9aa3ac; border-radius: 2px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--sign) 50%), linear-gradient(135deg, var(--sign) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .36rem .36rem; background-repeat: no-repeat; }
input:hover, select:hover, textarea:hover { border-color: var(--sign); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sign); background: var(--white); box-shadow: 0 0 0 3px rgba(26,63,120,.25); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #b3261e; background: #fff8f7; }
.err { display: none; color: #9a1f17; font-size: .88rem; font-weight: 600; margin: 0; align-items: flex-start; gap: .45rem; }
.err.on { display: flex; margin-top: .55rem; }
.err::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #b3261e; color: #fff; font-size: .72rem; font-weight: 800; margin-top: .1rem; }

.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: .55rem 1rem;
  border: 1.5px solid #9aa3ac; background: var(--paper); color: var(--ink); font-weight: 580; border-radius: 2px;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip span::before { content: ""; width: .95rem; height: .95rem; border: 1.5px solid currentColor; flex: none; transition: background-color .15s ease, box-shadow .15s ease; }
.chip input[type="radio"] + span::before { border-radius: 50%; }
.chip input:hover + span { border-color: var(--sign); }
.chip input:checked + span { border-color: var(--sign); background: #e8eef7; color: var(--sign); }
.chip input:checked + span::before { background: var(--sign); box-shadow: inset 0 0 0 2.5px #e8eef7; }
.chip input:focus-visible + span { outline: 3px solid var(--sign); outline-offset: 2px; }
.chips-lg .chip span { min-width: 8.2rem; font-size: 1.02rem; font-stretch: 106%; }
.chips[aria-invalid="true"] .chip span, .choice.invalid .chip span { border-color: #b3261e; }
.repeat-only[hidden] { display: none; }
.repeat-only { padding: 1.1rem; border-left: 3px solid var(--yellow); background: #fffbea; }
.check { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-size: .96rem; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--sign); flex: none; }

/* drop zone */
.drop {
  position: relative; display: grid; place-items: center; text-align: center; gap: .4rem;
  padding: 2rem 1.2rem; border: 2px dashed #8c96a0; background: var(--paper);
  transition: border-color .2s ease, background-color .2s ease;
}
.drop.over { border-color: var(--sign); background: #e8eef7; }
.drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-icon { width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--sign); stroke-width: 1.6; }
.drop-main { font-weight: 680; font-stretch: 106%; font-size: 1.05rem; color: var(--ink); margin: 0; }
.drop-main u { color: var(--sign); text-underline-offset: .2em; }
.drop-sub { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--steel); margin: 0; }
.drop:focus-within { outline: 3px solid var(--sign); outline-offset: 3px; }
.no-js .drop input[type="file"] { position: static; opacity: 1; width: auto; height: auto; margin-top: .6rem; }
.files { list-style: none; margin: 1rem 0 0; padding: 0; }
.files li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center;
  padding: .6rem .7rem; border: 1px solid var(--rule); border-top-width: 0; background: var(--white);
}
.files li:first-child { border-top-width: 1px; }
.f-kind { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; background: var(--sign); color: var(--white); padding: .2rem .4rem; min-width: 3.2rem; text-align: center; }
.f-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.f-name small { display: block; font-weight: 450; color: var(--steel); font-size: .82rem; }
.f-rm { min-height: 2.75rem; min-width: 2.75rem; padding: .3rem .7rem; background: transparent; border: 1.5px solid var(--rule); color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; border-radius: 2px; }
.f-rm:hover { border-color: #b3261e; color: #9a1f17; }
.files-total { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--steel); margin: .6rem 0 0; }

.err-summary { background: #fff4f2; border: 2px solid #b3261e; padding: 1.1rem 1.3rem; margin: 0 0 1.25rem; }
.err-summary h2 { font-size: 1.15rem; color: #8c1d16; font-stretch: 106%; max-width: none; }
.err-summary ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.err-summary a { color: #8c1d16; font-weight: 600; }
.submit-row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 1.6rem; }
.submit-row .help { max-width: 36ch; }
.placeholder {
  outline: 2px dashed #b86e00; outline-offset: 2px; background: #fff3d6; color: #5a3600; padding: 0 .25rem; font-weight: 650;
}

/* live RFQ sheet */
.sheet-live { background: var(--white); border: 1.5px solid var(--sign); outline: 1px solid var(--sign); outline-offset: 4px; margin: 5px; }
@media (min-width: 1024px) { .sheet-live { position: sticky; top: 3.75rem; } }
.sl-head { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; background: var(--sign); color: var(--white); }
.sl-head b { white-space: nowrap; font-weight: 780; font-stretch: 120%; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; }
.sl-head span { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: #c3d2e8; }
.sl-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.sl-grid div { padding: .6rem .8rem .7rem; border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); min-width: 0; }
.sl-grid div:nth-child(even) { border-right: 0; }
.sl-grid .wide { grid-column: 1 / -1; border-right: 0; }
.sl-grid dt { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--steel); }
.sl-grid dd { margin: .2rem 0 0; font-weight: 620; font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; line-height: 1.3; }
.sl-grid dd.empty { color: #9aa3ac; font-weight: 450; }
.sl-progress { padding: .9rem 1rem 1rem; }
.sl-bar { height: 6px; background: var(--rule-soft); position: relative; overflow: hidden; }
.sl-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--yellow); transition: width .35s ease; border-right: 2px solid var(--sign); }
.sl-progress p { margin: .55rem 0 0; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--steel); }
.no-js .sheet-live { display: none; }
@media (max-width: 1023.98px) { .sheet-live { display: none; } }

/* summary */
.summary[hidden] { display: none; }
.summary { grid-column: 1 / -1; }
[hidden] { display: none !important; }
.no-js .js-only, .js .no-js-only { display: none; }
@media (max-width: 599.98px) { .row-2 .lbl[aria-hidden="true"] { display: none; } }
.summary { background: var(--white); border: 1.5px solid var(--sign); outline: 1px solid var(--sign); outline-offset: 5px; margin: 6px; }
.sum-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; align-items: baseline; padding: 1.2rem clamp(1.1rem, 3vw, 2rem); background: var(--sign); color: var(--white); }
.sum-head h2 { color: var(--white); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); max-width: none; }
.sum-head p { margin: 0; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: #c3d2e8; }
.sum-body { padding: clamp(1.1rem, 3vw, 2rem); }
.send-box {
  display: flex; gap: .9rem; align-items: flex-start; border: 2px solid var(--rule); border-left-width: 6px; background: var(--paper); color: var(--text); padding: 1rem 1.1rem; margin: 0 0 1.6rem;
}
.send-box strong { display: block; font-size: 1.08rem; color: var(--ink); }
.send-box p { margin: .25rem 0 0; }
.send-box.is-busy { border-color: var(--sign); }
.send-box.is-sent { border-color: var(--sign); border-left-color: var(--yellow); background: #eef3fa; }
.send-box.is-sent strong { color: var(--sign); }
.send-box.is-error { border-color: #b3261e; background: #fff4f2; }
.send-box.is-error strong { color: #8c1d16; }
.send-box .send-ref { font-family: var(--f-mono); font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.sum-table { width: 100%; border-collapse: collapse; }
.sum-table th, .sum-table td { text-align: left; vertical-align: top; padding: .7rem 0; border-top: 1px solid var(--rule-soft); }
.sum-table th { width: 32%; padding-right: 1rem; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--steel); font-weight: 500; padding-top: .9rem; }
.sum-table td { font-weight: 560; overflow-wrap: anywhere; }
.sum-table tr.sec th { color: var(--sign); border-top: 2px solid var(--sign); padding-top: 1.1rem; }
.sum-table td ul { margin: 0; padding-left: 1.1rem; }
.sum-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.sum-to { margin-top: 1.4rem; font-size: .92rem; color: var(--steel); }

/* capacities table on narrow phones: inches and mm stack in one column so the names keep their room */
@media (max-width: 479.98px) {
  .spec-table, .spec-table thead, .spec-table tbody { display: block; }
  .spec-table thead tr, .spec-table tbody tr:not(.group) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; }
  .spec-table thead th:first-child, .spec-table tbody tr:not(.group) th { grid-row: 1 / span 2; }
  .spec-table thead th.num { padding: 0; border: 0; }
  .spec-table thead tr { border-bottom: 2px solid var(--sign); padding-bottom: .65rem; }
  .spec-table thead th { border: 0; padding-bottom: 0; }
  .spec-table thead th:nth-child(3) { padding-top: .15rem; }
  .spec-table tbody tr.group, .spec-table tbody tr.group th { display: block; }
  .spec-table td { padding: .7rem 0 0 0; }
  .spec-table td + td { padding: .1rem 0 .7rem; }
  .spec-table td[colspan] { padding: .75rem 0; grid-row: 1 / span 2; align-self: center; }
  .spec-table td.txt { max-width: 11rem; }
}
@media (max-width: 559.98px) {
  .materials ul { display: grid; grid-template-columns: 1fr 1fr; }
  .materials li { border-right: 0; margin: 0; padding: .35rem 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 899.98px) {
  .tb-email { grid-column: 1 / -1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .drawing .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .drawing .arrowhead, .js .drawing text, .js .drawing .ext, .js .drawing .bar { opacity: 1; }
  .js .drawing .slots { opacity: .55; }
  .js .drawing .g-iso { opacity: 1; }
  .mosaic li:hover img, .btn-yellow:hover, .setup-ops [role="tab"]:hover { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .fascia, .titleblock, .page-head, .rfq-form, .sheet-live, .sum-actions, .skip { display: none !important; }
  body, .rfq-wrap { background: #fff; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .summary { outline: 0; margin: 0; }
}

/* round 26: home is page 1, capacities/equipment/gallery are page 2 (machines.html); the band on home points there */
.bridge-grid { display: grid; gap: 1.75rem; align-items: end; }
.bridge-grid .btn { justify-self: start; }
@media (min-width: 900px) { .bridge-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }

/* round 27: flyer download in every footer */
.tb-flyer { margin: 1.3rem 0 0; }
.tb-flyer .btn .ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }