/* Ironbark Fabrication — concept site
   Art direction: precise industrial. Engineering-drawing language on graphite and drawing paper,
   hi-vis Forge accent, Archivo (variable width) for voice, IBM Plex Mono for measurement. */

/* ---------- fonts: the self-hosted web fonts are declared in fonts.css (the home page loads it once the first paint is
   on screen, other pages link it). These metric-matched local fallbacks (size-adjust / ascent / descent overrides, one
   set for regular text and one for the bold, widened display cuts) hold the same layout until then. */
@font-face { font-family: "Archivo Fallback"; font-weight: 100 599; font-stretch: 50% 100%; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 98.03%; ascent-override: 89.57%; descent-override: 21.42%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; font-weight: 600 1000; font-stretch: 50% 100%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 98.3%; ascent-override: 89.32%; descent-override: 21.36%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; font-weight: 100 599; font-stretch: 100.1% 200%; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 103%; ascent-override: 85.25%; descent-override: 20.39%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; font-weight: 600 1000; font-stretch: 100.1% 200%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 112.5%; ascent-override: 78.04%; descent-override: 18.67%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"); size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.5%; line-gap-override: 0%; }

:root {
  --ink: #0E1012;
  --graphite: #14171A;
  --steel-900: #1A1E22;
  --steel-850: #1F2428;
  --steel-800: #252B30;
  --steel-700: #30373D;
  --steel-600: #424A51;
  --steel-500: #5E6870;
  --steel-400: #8A949C;
  --steel-300: #B2BAC0;
  --steel-200: #D0D5D9;
  --steel-100: #E6E9EB;
  --paper: #EBECE8;
  --paper-2: #E0E2DD;
  --paper-line: rgba(20, 26, 31, .12);
  --paper-ink: #13171B;
  --paper-mute: #4B545B;
  --hi: #FFC31F;
  --hi-deep: #E5A800;
  --hi-ink: #1A1300;
  --ok: #57C78A;
  --warn: #FF8A3D;
  --line: rgba(230, 233, 235, .10);
  --line-2: rgba(230, 233, 235, .18);
  --text: #E8EAEC;
  --mute: #A3ACB3;

  --f-sans: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1400px;
  --header-h: 68px;
  --chamfer: 12px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* motion tokens — precise, mechanical, snappy (see README "Motion & micro-interactions") */
  --dur-1: 120ms;   /* hover, press, focus */
  --dur-2: 200ms;   /* state change: toggles, selection, indicators */
  --dur-3: 320ms;   /* entering content */
  --dur-tween: 320ms; /* number tweens */
  --ease-in: cubic-bezier(.5, 0, .75, 0);      /* exits */
  --ease-snap: cubic-bezier(.2, 0, 0, 1);       /* indicators that travel: fast start, hard stop */
  --detent: cubic-bezier(.3, 1.3, .55, 1);     /* press release / toggles: a small mechanical overshoot */
  --press: .97;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--graphite); color: var(--text);
  font: 400 17px/1.6 var(--f-sans); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
::selection { background: var(--hi); color: var(--hi-ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--hi); color: var(--hi-ink); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: .98; text-wrap: balance; }
.display { font-size: clamp(2.6rem, 4.9vw, 4.6rem); font-stretch: 108%; letter-spacing: -.04em; line-height: .96; font-weight: 800; }
.h1 { font-size: clamp(2.5rem, 5.4vw, 5rem); font-stretch: 112%; letter-spacing: -.038em; line-height: .94; }
.h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); font-stretch: 108%; }
.h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); letter-spacing: -.02em; line-height: 1.08; font-stretch: 104%; }
.h4 { font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.2; font-weight: 700; }
.lede { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--mute); max-width: 56ch; font-weight: 400; }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em; }
.label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.hi { color: var(--hi); }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.sec { position: relative; padding: clamp(72px, 10vw, 140px) 0; }
.sec--tight { padding: clamp(56px, 7vw, 96px) 0; }
.sec--paper { background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.sec--paper .lede, .sec--paper .label { color: var(--paper-mute); }
.sec--steel { background: var(--steel-900); }
.sec--ink { background: var(--ink); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.sec--paper .rule { border-color: var(--paper-line); }

/* engineering grid backgrounds */
.blueprint {
  background-color: var(--graphite);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(rgba(230,233,235,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,233,235,.035) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
}
.paper-grid {
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}

/* ruler ticks along a section edge */
.ruler { height: 14px; background-image:
  repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 8px),
  repeating-linear-gradient(90deg, var(--steel-400) 0 1px, transparent 1px 80px);
  background-size: 100% 6px, 100% 14px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; opacity: .7; }
.sec--paper .ruler { background-image:
  repeating-linear-gradient(90deg, rgba(20,26,31,.25) 0 1px, transparent 1px 8px),
  repeating-linear-gradient(90deg, rgba(20,26,31,.6) 0 1px, transparent 1px 80px); }

/* section heading block: sheet-reference caption sits in the margin, not above the heading */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head h2 { grid-column: 1 / span 7; }
.sec-head .lede { grid-column: 8 / span 5; margin: 0; }
.sheet-ref { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-400); display: flex; gap: 10px; align-items: center; }
.sheet-ref::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.sec--paper .sheet-ref { color: var(--paper-mute); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(20, 23, 26, .88); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid var(--line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand svg { width: 34px; height: 34px; }
.brand__name { display: grid; line-height: 1; }
.brand__name strong { font-size: 1.02rem; font-weight: 800; font-stretch: 118%; letter-spacing: -.01em; text-transform: uppercase; }
.brand__name span { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { position: relative; text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--steel-200); padding: 10px 12px; border-radius: 2px; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--hi); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.concept-pill { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line-2); color: var(--steel-300); padding: 6px 10px; border-radius: 999px; white-space: nowrap; transition: border-color .2s, color .2s; }
.concept-pill:hover { border-color: var(--hi); color: var(--hi); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); background: transparent; border-radius: 2px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); position: relative; transition: transform .3s var(--ease-out), background .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); transition: transform .3s var(--ease-out); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn { --c: var(--hi); position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; font-weight: 700; font-size: .95rem; letter-spacing: -.005em; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); transition: background .25s, color .25s, transform .2s var(--ease-out); }
.btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--hi { background: var(--hi); color: var(--hi-ink); }
.btn--hi:hover { background: #FFD24F; }
.btn--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: none; }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--steel-300); background: rgba(255,255,255,.03); }
.sec--paper .btn--line { color: var(--paper-ink); box-shadow: inset 0 0 0 1px rgba(20,26,31,.3); }
.sec--paper .btn--line:hover { box-shadow: inset 0 0 0 1px var(--paper-ink); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .85rem; --chamfer: 9px; }
.btn--dark { background: var(--paper-ink); color: var(--paper); }
.btn--dark:hover { background: #000; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.textlink:hover { color: var(--hi); }
.sec--paper .textlink:hover { color: var(--paper-ink); border-bottom-width: 2px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.hero__meta dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-400); }
.hero__meta dd { margin: 0; font-family: var(--f-mono); font-size: .92rem; color: var(--text); }


/* ---------- Spec tables ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec caption { text-align: left; padding-bottom: 12px; }
.spec th, .spec td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th { font-family: var(--f-mono); font-weight: 500; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border-bottom-color: var(--line-2); }
.spec td.num, .spec th.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: .86rem; white-space: nowrap; }
.spec tbody th { font-weight: 600; }
.sec--paper .spec th, .sec--paper .spec td { border-bottom-color: var(--paper-line); }
.sec--paper .spec thead th { color: var(--paper-mute); border-bottom-color: rgba(20,26,31,.3); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Panels & sheets ---------- */
.panel { position: relative; border: 1px solid var(--line); background: var(--steel-900); padding: clamp(20px, 2.4vw, 32px); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.sec--paper .panel { background: #F4F5F2; border-color: var(--paper-line); }
.sheet { position: relative; background: #F6F6F3; color: var(--paper-ink); border: 1px solid rgba(20,26,31,.18); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 48px -28px rgba(10,14,18,.45); }
.sheet--dark { background: var(--steel-900); color: var(--text); border-color: var(--line); }
.concept-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border: 1px dashed currentColor; color: var(--steel-400); }
.sec--paper .concept-tag { color: var(--paper-mute); }

/* project sheet teaser */
.sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.sheet-card { display: flex; flex-direction: column; text-decoration: none; transition: transform .45s var(--ease-out); }
.sheet-card:hover { transform: translateY(-4px); }
.sheet-card__draw { aspect-ratio: 4 / 3; background: #F6F6F3; border: 1px solid rgba(20,26,31,.18); position: relative; overflow: hidden; }
.sheet-card__draw svg { width: 100%; height: 100%; }
.sheet-card__body { padding: 18px 0 0; display: grid; gap: 8px; }
.sheet-card__body h3 { font-size: 1.3rem; }
.sheet-card__body p { margin: 0; font-size: .92rem; color: var(--paper-mute); }
.sheet-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; color: var(--paper-mute); text-transform: uppercase; }

/* split feature */
.split { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 40px; align-items: start; }
.split > .a { grid-column: 1 / span 5; }
.split > .b { grid-column: 7 / span 6; }

/* numbered check list */
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.checks li > span { font-family: var(--f-mono); font-size: .75rem; color: var(--hi); padding-top: 4px; }
.sec--paper .checks, .sec--paper .checks li { border-color: var(--paper-line); }
.sec--paper .checks li > span { color: var(--paper-ink); }
.checks h3 { font-size: 1.15rem; letter-spacing: -.01em; font-weight: 700; margin-bottom: 6px; line-height: 1.2; }
.checks p { margin: 0; color: var(--mute); font-size: .95rem; }
.sec--paper .checks p { color: var(--paper-mute); }

/* CTA band */
.cta-band { background: var(--hi); color: var(--hi-ink); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(26,19,0,.07) 0 2px, transparent 2px 14px); pointer-events: none; }
.cta-band .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.cta-band h2 { font-size: clamp(2.4rem, 5.4vw, 5rem); font-stretch: 112%; letter-spacing: -.04em; }
.cta-band p { font-size: 1.1rem; max-width: 46ch; color: #3A2E00; }
.cta-band .btn--dark { background: var(--hi-ink); color: var(--hi); }

/* page hero (inner pages) */
.page-hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.page-hero .wrap { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 28px; align-items: end; }
.page-hero h1 { grid-column: 1 / span 8; }
.page-hero .lede { grid-column: 1 / span 6; }
.page-hero__aside { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: end; }
.crumbs { grid-column: 1 / -1; display: flex; gap: 10px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-400); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--hi); }

/* sub nav (jump links) */
.jump { position: sticky; top: var(--header-h); z-index: 50; background: rgba(14,16,18,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.jump .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.jump .wrap::-webkit-scrollbar { display: none; }
.jump a { flex: none; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--steel-300); padding: 15px 14px; border-bottom: 2px solid transparent; }
.jump a:hover, .jump a.is-active { color: #fff; border-bottom-color: var(--hi); }

/* process blocks */
.process { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 36px; padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--line); }
.process:first-of-type { border-top: 0; }
.process__head { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 20px; }
.process__fig { grid-column: 6 / span 7; margin: 0; }
.process__fig .figframe { background: #F4F5F1; border: 1px solid rgba(20,26,31,.2); position: relative; }
.process__fig svg { width: 100%; height: auto; }
.process__fig figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; color: var(--steel-400); text-transform: uppercase; }
.process__detail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 28px; }
.process__detail > .spec-wrap { grid-column: 1 / span 7; }
.process__detail > .dfm { grid-column: 9 / span 4; }
.dfm h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.dfm h3::before { content: ""; width: 10px; height: 10px; background: var(--hi); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dfm ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.dfm li { font-size: .92rem; color: var(--steel-300); padding-left: 18px; position: relative; line-height: 1.5; }
.dfm li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--steel-400); }

/* materials */
.mat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mat { background: var(--graphite); padding: 0; display: flex; flex-direction: column; }
.mat__swatch { height: 120px; position: relative; overflow: hidden; }
.mat__swatch span { position: absolute; left: 16px; bottom: 12px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; color: rgba(0,0,0,.65); text-transform: uppercase; }
.mat__body { padding: 22px 20px 24px; display: grid; gap: 10px; flex: 1; align-content: start; }
.mat__body h3 { font-size: 1.25rem; }
.mat__body p { font-size: .9rem; color: var(--mute); margin: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 6px 0 0; font-size: .84rem; }
.kv dt { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-400); padding-top: 2px; }
.kv dd { margin: 0; font-family: var(--f-mono); }
.sw-mild { background: linear-gradient(100deg, #5b6268, #7d858b 30%, #50575d 55%, #8c949a 80%, #5d6469); }
.sw-ss { background: linear-gradient(100deg, #a9b0b5, #dfe3e5 25%, #9aa2a8 50%, #e8ebec 72%, #a7aeb3); }
.sw-al { background: linear-gradient(100deg, #c1c6c9, #eef0f1 30%, #b9bec2 55%, #f3f4f5 78%, #c6cacd); }
.sw-gal { background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.35) 0 8%, transparent 9%), radial-gradient(circle at 70% 60%, rgba(255,255,255,.28) 0 11%, transparent 12%), linear-gradient(100deg, #8f989e, #b9c0c4 40%, #889196 70%, #b0b7bb); }
.sw-4140 { background: linear-gradient(100deg, #3e4448, #5f666b 35%, #383e42 60%, #666d72); }
.sw-brass { background: linear-gradient(100deg, #9c8240, #d6bd73 35%, #8f7536 60%, #d9c27c); }
.mat__swatch::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); border: 1px solid rgba(20,26,31,.2); background: #F6F6F3; }
.calc__in { padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px; border-right: 1px solid rgba(20,26,31,.15); }
.calc__out { padding: clamp(20px, 3vw, 36px); display: grid; gap: 20px; align-content: start; background: var(--paper-ink); color: var(--paper); }
.calc__out .big { font-family: var(--f-mono); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--hi); }
.calc__out .formula { font-family: var(--f-mono); font-size: .8rem; color: var(--steel-300); line-height: 1.7; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; }
.field > label, .field > .flabel, fieldset legend { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-300); }
.sec--paper .field > label, .sec--paper .field > .flabel, .sec--paper fieldset legend { color: var(--paper-mute); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--steel-900); border: 1px solid var(--line-2); border-radius: 0; color: var(--text); transition: border-color .2s, box-shadow .2s, background .2s; }
.textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--hi); box-shadow: 0 0 0 3px rgba(255,195,31,.2); }
.sec--paper .input, .sec--paper .select, .sec--paper .textarea { background: #F8F8F6; border-color: rgba(20,26,31,.25); color: var(--paper-ink); }
.sec--paper .input:focus, .sec--paper .select:focus, .sec--paper .textarea:focus { border-color: var(--paper-ink); box-shadow: 0 0 0 3px rgba(255,195,31,.55); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A949C' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.hint { font-size: .82rem; color: var(--mute); }
.sec--paper .hint { color: var(--paper-mute); }
.err { font-size: .82rem; color: #B42318; font-weight: 600; display: none; }
.field.is-invalid .err { display: block; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: #B42318; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(20,26,31,.25); background: #F8F8F6; font-size: .9rem; font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.chip span::before { content: ""; width: 9px; height: 9px; border: 1px solid currentColor; transition: background .2s; }
.chip input:checked + span { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.chip input:checked + span::before { background: var(--hi); border-color: var(--hi); }
.chip input:focus-visible + span { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.seg { display: inline-flex; border: 1px solid rgba(20,26,31,.3); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-family: var(--f-mono); font-size: .85rem; transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--paper-ink); color: var(--hi); }
.seg input:focus-visible + span { outline: 2px solid var(--paper-ink); outline-offset: -4px; }
.drop { border: 1.5px dashed rgba(20,26,31,.35); background: #F8F8F6 repeating-linear-gradient(135deg, transparent 0 10px, rgba(20,26,31,.03) 10px 11px); padding: 28px; display: grid; gap: 10px; justify-items: start; transition: border-color .2s, background-color .2s; position: relative; }
.drop.is-over { border-color: var(--paper-ink); background-color: #FFF6D6; }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.files li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid rgba(20,26,31,.15); font-family: var(--f-mono); font-size: .8rem; }
.files li button { border: 0; background: transparent; cursor: pointer; min-width: 36px; min-height: 36px; color: var(--paper-mute); }
.files .ftype { font-size: .65rem; padding: 2px 6px; background: var(--paper-ink); color: var(--hi); letter-spacing: .06em; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .draw-in path, .js .draw-in line, .js .draw-in polyline, .js .draw-in circle.dl { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.js .draw-in.is-in path, .js .draw-in.is-in line, .js .draw-in.is-in polyline, .js .draw-in.is-in circle.dl { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) 0 28px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 2fr); gap: 32px; }
.footer-grid h2 { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-400); font-weight: 500; margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer-grid a { text-decoration: none; color: var(--steel-200); display: inline-block; padding: 6px 0; }
.footer-grid a:hover { color: var(--hi); }
.footer-grid address { font-style: normal; color: var(--steel-300); line-height: 1.75; }
.footer-word { font-size: clamp(3rem, 11vw, 10.5rem); font-weight: 900; font-stretch: 125%; letter-spacing: -.05em; line-height: .8; color: var(--steel-850); margin: clamp(48px, 7vw, 96px) 0 24px; user-select: none; white-space: nowrap; overflow: hidden; }
/* The word is drawn from data-w (generated content): decorative and aria-hidden, so it stays out of the text contrast checks. */
.footer-word[data-w]::before { content: attr(data-w); }
.footer-base { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; color: var(--steel-400); }
.footer-base a { color: var(--steel-200); }
.footer-base a:hover { color: var(--hi); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav a { padding: 10px 8px; font-size: .86rem; }
  .concept-pill { display: none; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  :root { --header-h: 62px; }
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); border-bottom: 1px solid var(--line-2); padding: 8px var(--gutter) 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .3s var(--ease-out), visibility 0s .3s; max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .3s var(--ease-out); }
  .nav a { font-size: 1.35rem; font-weight: 700; padding: 14px 0; border-bottom: 1px solid var(--line); letter-spacing: -.01em; }
  .nav a::after { left: 0; right: auto; width: 32px; bottom: 10px; }
  .nav .concept-pill-m { display: inline-flex; }
  .header-actions .btn { display: none; }
  .sec-head h2, .sec-head .lede { grid-column: 1 / -1; }
  .sec-head { row-gap: 20px; }
  .split > .a, .split > .b { grid-column: 1 / -1; }
  .sheets { grid-template-columns: 1fr 1fr; }
  .page-hero h1, .page-hero .lede, .page-hero__aside { grid-column: 1 / -1; grid-row: auto; }
  .process__head, .process__fig, .process__detail > .spec-wrap, .process__detail > .dfm { grid-column: 1 / -1; }
  .mat-grid { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc__in { border-right: 0; border-bottom: 1px solid rgba(20,26,31,.15); }
  .cta-band .wrap { grid-template-columns: 1fr; }
}
@media (min-width: 981px) { .nav .concept-pill-m { display: none; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sheets { grid-template-columns: 1fr; }
  .mat-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero__meta { grid-template-columns: repeat(2, auto); }
  .brand__name span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* keep colour and opacity feedback; drop movement, scale and keyframed motion */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-property: color, background-color, border-color, opacity, box-shadow, fill, stroke, outline-color, text-decoration-color !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .draw-in path, .js .draw-in line, .js .draw-in polyline, .js .draw-in circle.dl { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media print {
  .site-header, .site-footer, .jump, .cta-band { display: none; }
  body { background: #fff; color: #000; }
}

/* annotated drawing */
.annot-drawing { position: relative; }
.annot-drawing svg { width: 100%; height: auto; }
.annot { position: absolute; transform: translate(-50%, -100%); margin-top: -8px; font-family: var(--f-mono); font-size: .7rem; line-height: 1.3; background: var(--paper-ink); color: var(--paper); padding: 6px 9px; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); pointer-events: none; }
.annot b { color: var(--hi); font-weight: 600; margin-right: 6px; }
.annot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: var(--paper-ink); }
.annot--q { background: var(--hi); color: var(--hi-ink); }
.annot--q b { color: var(--hi-ink); }
.annot--q::after { background: var(--hi-deep); }
@media (min-width: 981px) { .nav .nav-rfq-m { display: none; } }
@media (max-width: 640px) { .annot { font-size: .58rem; padding: 4px 6px; } }

/* process diagrams */
.pd { font-family: var(--f-mono); }
.pd .s { fill: none; stroke: #13171B; stroke-width: 1.6; stroke-linejoin: round; }
.pd .t { fill: none; stroke: #13171B; stroke-width: .8; }
.pd .h { fill: none; stroke: #13171B; stroke-width: 1; stroke-dasharray: 6 4; }
.pd .c { fill: none; stroke: #13171B; stroke-width: .7; stroke-dasharray: 16 4 3 4; }
.pd .f { fill: #D9DCD8; }
.pd .s.f { fill: #D9DCD8; }
.pd .y { fill: #FFC31F; stroke: #13171B; stroke-width: 1; }
.pd .yl { fill: none; stroke: #E5A800; stroke-width: 2.4; }
.pd .ycut { fill: #FFC31F; fill-opacity: .55; stroke: none; }
.pd .ycoat { fill: #FFC31F; fill-opacity: .8; stroke: none; }
.pd .beam { fill: none; stroke: #E5A800; stroke-width: 1.2; }
.pd .beamfill { fill: #FFC31F; fill-opacity: .35; stroke: none; }
.pd .gas { fill: none; stroke: #5E6870; stroke-width: 1; stroke-dasharray: 3 4; }
.pd .sheetbend { fill: none; stroke: #13171B; stroke-width: 7; stroke-linejoin: round; }
.pd .lbl { font-size: 12.5px; fill: #13171B; }
.pd .ttl { font-size: 11px; letter-spacing: .12em; fill: #4B545B; }
.pd .formula { font-size: 14px; fill: #13171B; font-weight: 500; }
[hidden] { display: none !important; }

/* industries */
.ind-list { border-top: 1px solid var(--line-2); counter-reset: ind; }
.ind { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: 20px clamp(20px, 3vw, 48px); padding: clamp(32px, 4vw, 52px) 0; border-bottom: 1px solid var(--line); position: relative; transition: background .4s; }
.ind::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--hi); transition: transform .7s var(--ease-out); }
.ind:hover::before { transform: scaleX(1); }
.ind h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-stretch: 108%; letter-spacing: -.03em; }
.ind .label { margin: 0 0 10px; }
.ind ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; color: var(--steel-200); }
.ind ul li::before { content: "—"; color: var(--steel-500); margin-right: 8px; }
.ind p { margin: 0; color: var(--steel-300); font-size: .98rem; }
.ind__mat { grid-column: 2 / -1; font-family: var(--f-mono); font-size: .74rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--hi) !important; }
@media (max-width: 860px) { .ind { grid-template-columns: 1fr; } .ind__mat { grid-column: 1; } }

/* project sheets */
.proj__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px 48px; align-items: end; margin-bottom: 36px; }
.proj__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid rgba(20,26,31,.3); }
.proj__facts div { padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
.proj__facts div:nth-child(odd) { padding-right: 16px; }
.proj__facts dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mute); }
.proj__facts dd { margin: 4px 0 0; font-weight: 600; }
.proj__drawing { padding: 0; }
.proj__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.proj__scroll svg { min-width: 760px; width: 100%; height: auto; }
.proj__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: 40px; }
.proj__cols h3 { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--paper-ink); }
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.route li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--paper-line); font-size: .93rem; }
.route b { font-family: var(--f-mono); font-weight: 600; font-size: .78rem; padding-top: 2px; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qs li { position: relative; padding: 14px 16px 14px 44px; background: #FFF4CF; border: 1px solid #F0D57A; font-size: .93rem; line-height: 1.5; }
.qs li::before { content: "?"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--paper-ink); color: var(--hi); font-family: var(--f-mono); font-size: .75rem; font-weight: 600; }
@media (max-width: 980px) { .proj__head, .proj__cols { grid-template-columns: 1fr; } }

/* quality */
.res { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; }
.res.ok { background: #DDF1E4; color: #145A32; }

/* RFQ */
.rfq { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.rfq__form { display: grid; gap: 0; }
.rfq__set { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--paper-line); }
.rfq__set legend { display: flex; align-items: center; gap: 14px; font-family: var(--f-sans) !important; font-size: 1.5rem !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--paper-ink) !important; font-weight: 800; font-stretch: 106%; margin-bottom: 24px; padding: 0; }
.rfq__n { width: 34px; height: 34px; display: inline-grid; place-items: center; background: var(--paper-ink); color: var(--hi); font-family: var(--f-mono); font-size: .85rem; font-weight: 600; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.rfq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rfq__submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ack { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.ack input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--paper-ink); flex: none; }
.rfq__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.rfq__card { background: var(--paper-ink); color: var(--paper); padding: 26px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.rfq__sum { margin: 0; display: grid; }
.rfq__sum div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.rfq__sum dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-400); padding-top: 3px; }
.rfq__sum dd { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.rfq__sum dd.is-set { color: #fff; }
.rfq__next { margin-top: 24px; }
.rfq__next ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .88rem; color: var(--steel-300); }
.rfq__done { grid-column: 1 / -1; }
.rfq__done:focus { outline: none; }
.rfq__sum--paper div { grid-template-columns: 180px 1fr; border-bottom-color: var(--paper-line); }
.rfq__sum--paper dt { color: var(--paper-mute); }
.rfq__sum--paper { margin-top: 32px; border-top: 2px solid var(--paper-ink); max-width: 860px; }
@media (max-width: 980px) { .rfq { grid-template-columns: 1fr; } .rfq__aside { position: static; order: -1; } }
@media (max-width: 640px) { .rfq__grid { grid-template-columns: 1fr; } .rfq__sum--paper div { grid-template-columns: 110px 1fr; } }
.page-hero__aside { grid-row: 2 / span 2 !important; }
.seg { justify-self: start; }
.field > label.ack { font-family: var(--f-sans); font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--paper-ink); }
@media (max-width: 980px) { .page-hero__aside { grid-row: auto !important; } }
@media (max-width: 980px) { .header-actions { margin-left: auto; } }
.field { align-content: start; }

/* =====================================================================
   Round 2 — photography, workshop fly-through, breakdown sequence
   ===================================================================== */
.img-note { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-400); margin: 0; }
figure > .img-note { padding-top: 10px; }
.photo { margin: 0; background: var(--steel-850); }
.photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Photographic hero ---------- */
.hero2 { position: relative; isolation: isolate; min-height: min(940px, calc(100svh - var(--header-h))); display: grid; align-items: end; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--line); }
.hero2__media { position: absolute; inset: 0; z-index: -2; transform-origin: 68% 62%; }
.hero2__media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 55%; }
.hero2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(14,16,18,.95) 0%, rgba(14,16,18,.84) 28%, rgba(14,16,18,.3) 58%, rgba(14,16,18,0) 78%),
  linear-gradient(0deg, rgba(14,16,18,.92) 0%, rgba(14,16,18,0) 38%); }
.hero2__inner { padding-top: clamp(72px, 12vh, 140px); padding-bottom: clamp(44px, 8vh, 88px); display: grid; gap: 28px; justify-items: start; }
.hero2__title { max-width: 8.12em; /* 12ch of Archivo 800 at 108%, in em so the fallback font wraps the same */ font-size: clamp(2.9rem, 6.6vw, 6rem); line-height: .93; }
.hero2__title span { display: block; color: var(--hi); }
.hero2__lede { max-width: 28.64em; /* 50ch of Archivo */ color: var(--steel-200); }
.hero2__meta { grid-template-columns: repeat(4, auto); min-width: min(560px, 100%); }
.hero2__note { position: absolute; right: var(--gutter); bottom: 20px; color: var(--steel-300); }

/* ---------- Workshop fly-through ---------- */
.tour { background: var(--ink); border-bottom: 1px solid var(--line); }
.tour__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 24px; align-items: end; padding-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(40px, 5vw, 64px); }
.tour__intro h2 { grid-column: 1 / span 6; }
.tour__aside { grid-column: 8 / span 5; display: grid; gap: 18px; justify-items: start; }
.tour__aside .lede { margin: 0; }
.tour__ss { --ss-bg: var(--ink); --ss-accent: var(--hi); }
.tour__scrim { position: absolute; inset: 0; z-index: 20; pointer-events: none; background:
  linear-gradient(90deg, rgba(10,12,14,.82) 0%, rgba(10,12,14,.42) 32%, rgba(10,12,14,0) 56%),
  linear-gradient(0deg, rgba(10,12,14,.72) 0%, rgba(10,12,14,0) 34%); }
.tour__cap { z-index: 30; left: var(--gutter); bottom: clamp(64px, 11vh, 120px); width: min(460px, calc(100% - 2 * var(--gutter))); }
.tour__n { margin: 0 0 14px; font-size: .8rem; color: var(--hi); letter-spacing: .06em; }
.tour__n span { color: var(--steel-400); }
.tour__h { font-size: clamp(2.2rem, 4.4vw, 4rem); font-stretch: 112%; letter-spacing: -.04em; line-height: .95; margin-bottom: 18px; color: #fff; }
.tour__p { margin: 0; color: var(--steel-200); max-width: 40ch; font-size: 1.02rem; line-height: 1.55; }
.tour__spec { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 4px 32px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); }
.tour__spec dt { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-400); grid-row: 1; }
.tour__spec dd { margin: 0; font-family: var(--f-mono); font-size: .88rem; color: #fff; grid-row: 2; }
.tour__spec div { display: contents; }
.tour__rail { position: absolute; z-index: 30; right: var(--gutter); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tour__rail button, .bd__rail button { min-height: 40px; min-width: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 0 0 12px; border: 0; background: none; cursor: pointer; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-400); transition: color .25s; }
.tour__rail button::after, .bd__rail button::after { content: ""; width: 34px; height: 2px; background: currentColor; transform: scaleX(.42); transform-origin: 100% 50%; transition: transform .4s var(--ease-out), background .25s; }
.tour__rail button:hover, .bd__rail button:hover { color: #fff; }
.tour__rail button[aria-current="step"], .bd__rail button[aria-current="step"] { color: var(--hi); }
.tour__rail button[aria-current="step"]::after, .bd__rail button[aria-current="step"]::after { transform: scaleX(1); }
.tour__rail .num { color: inherit; opacity: .7; }
.tour__note { position: absolute; z-index: 30; right: var(--gutter); bottom: 18px; color: var(--steel-300); }
@media (prefers-reduced-motion: no-preference) {
  .tour .ss__stage { top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
}
@media (prefers-reduced-motion: reduce) {
  .tour .ss__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; background: var(--ink); }
  .tour .ss__frame { grid-column: 1; }
  .tour .ss__caption { grid-column: 2; align-self: center; width: auto; padding: 32px var(--gutter) 32px clamp(24px, 3vw, 48px) !important; }
  .tour .ss__frame:nth-of-type(1), .tour [data-caption="0"] { grid-row: 1; }
  .tour .ss__frame:nth-of-type(2), .tour [data-caption="1"] { grid-row: 2; }
  .tour .ss__frame:nth-of-type(3), .tour [data-caption="2"] { grid-row: 3; }
  .tour .ss__frame:nth-of-type(4), .tour [data-caption="3"] { grid-row: 4; }
  .tour .ss__frame:nth-of-type(5), .tour [data-caption="4"] { grid-row: 5; }
  .tour .ss__frame:nth-of-type(6), .tour [data-caption="5"] { grid-row: 6; }
  .tour .ss__frame:nth-of-type(7), .tour [data-caption="6"] { grid-row: 7; }
  .tour__scrim, .tour__rail { display: none; }
  .tour__note { position: static; grid-column: 1 / -1; grid-row: 8; padding: 14px var(--gutter); }
}

/* ---------- Breakdown ---------- */
.bd { position: relative; background: radial-gradient(80% 70% at 66% 48%, #232a30 0%, var(--graphite) 62%); border-bottom: 1px solid var(--line); }
.bd.is-pinned { height: 760vh; }
.bd__stage { position: relative; }
.bd.is-pinned .bd__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden; }
.bd.is-pinned .bd__stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(20,23,26,.92) 0%, rgba(20,23,26,.6) 26%, rgba(20,23,26,0) 46%); }
.bd__canvas { position: absolute; inset: 0; }
.bd__canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .9s var(--ease); }
.bd.is-live .bd__canvas canvas { opacity: 1; }
.bd__poster { position: absolute; inset: 0; display: none; place-items: center; padding: 24px; }
.bd__poster svg { width: min(86%, 620px); height: auto; }
.bd.no-webgl .bd__poster { display: grid; }
.bd__labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bd-dim { position: absolute; left: 0; top: 0; opacity: 0; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--hi-ink); background: var(--hi); padding: 3px 7px; white-space: nowrap; will-change: transform, opacity; }
/* hands-on controls: drag to rotate, click to take apart (vertical swipes still scroll the page) */
.bd__canvas canvas { cursor: grab; touch-action: pan-y; }
.bd.is-dragging .bd__canvas canvas { cursor: grabbing; }
.bd__canvas canvas:focus-visible { outline: 2px solid var(--hi); outline-offset: -2px; }
.bd__ui { position: absolute; z-index: 6; right: var(--gutter); bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.bd__ui .btn--line { background: rgba(20,23,26,.72); }
.bd__hint { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-300); text-shadow: 0 0 6px var(--graphite), 0 0 12px var(--graphite); }
.bd__copy { position: absolute; z-index: 4; left: var(--gutter); top: 0; bottom: 0; width: min(440px, 36vw); display: flex; flex-direction: column; padding: clamp(32px, 9vh, 96px) 0 48px; }
.bd__title { font-size: clamp(2.4rem, 4.4vw, 4.2rem); font-stretch: 112%; letter-spacing: -.04em; margin-bottom: clamp(20px, 4vh, 40px); transition: opacity .4s; }
.bd__steps { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; }
.bd.is-pinned .bd__step { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .45s var(--ease), transform .6s var(--ease-out), visibility 0s .45s; }
.bd.is-pinned .bd__step.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .6s var(--ease-out), visibility 0s; }
.bd__proc { margin: -4px 0 16px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hi); }
.bd__h { font-size: clamp(1.9rem, 2.8vw, 2.7rem); font-stretch: 108%; letter-spacing: -.035em; margin-bottom: 14px; }
.bd__p { margin: 0; color: var(--steel-200); max-width: 40ch; }
.bd__dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); font-family: var(--f-mono); font-size: .84rem; }
.bd__dl dt { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-400); padding-top: 3px; }
.bd__dl dd { margin: 0; color: #fff; }
.bd__dl div { display: contents; }
.bd__rail { position: absolute; z-index: 5; right: var(--gutter); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bd__progress { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.bd__progress span { display: block; height: 100%; background: var(--hi); transform-origin: 0 50%; transform: scaleX(0); }

/* quote step */
.bd.is-pinned[data-phase="quote"] .bd__title { opacity: 0; }
.bd { --ts: calc(clamp(2.4rem, 4.4vw, 4.2rem) * 1.96 + clamp(20px, 4vh, 40px)); }
.bd.is-pinned .bdq { top: calc(-1 * var(--ts)); }
.bdq__lines { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.bdq__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .86rem; line-height: 1.35; }
.bd.is-pinned .bdq__row { opacity: .08; transition: opacity .35s var(--ease); }
.bd.is-pinned .bdq__row.is-in { opacity: 1; }
.bdq__amt { font-size: .82rem; text-align: right; color: #fff; }
.bdq__note { grid-column: 1 / -1; font-family: var(--f-mono); font-size: .66rem; color: var(--steel-400); letter-spacing: .01em; }
.bdq__row.is-excluded .bdq__amt, .bdq__row.is-excluded .bdq__label { color: var(--steel-400); }
.bdq__row.is-margin .bdq__label { color: var(--steel-300); }
.bdq__tot { margin: 10px 0 0; display: grid; }
.bd.is-pinned .bdq__tot, .bd.is-pinned .bdq__fine, .bd.is-pinned .bdq .btn { opacity: .08; transition: opacity .5s var(--ease); }
.bd.is-pinned .is-total .bdq__tot, .bd.is-pinned .is-total .bdq__fine, .bd.is-pinned .is-total .btn { opacity: 1; }
.bdq__tot div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: .86rem; }
.bdq__tot dt { color: var(--steel-300); }
.bdq__tot dd { margin: 0; }
.bdq__tot .bdq__grand { margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--hi); font-size: 1.2rem; font-weight: 700; }
.bdq__grand dt { color: #fff; }
.bdq__grand dd { color: var(--hi); }
.bdq__fine { font-size: .78rem; line-height: 1.5; color: var(--mute); margin: 12px 0 16px; max-width: 52ch; }
@media (max-height: 940px) { .bd.is-pinned .bdq__note { display: none; } }

/* breakdown without pinning: reduced motion, no WebGL, or before JS */
.bd:not(.is-pinned) .bd__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); max-width: var(--maxw); margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--gutter); }
.bd:not(.is-pinned) .bd__copy { display: contents; }
.bd:not(.is-pinned) .bd__title { grid-column: 1 / -1; order: 0; }
.bd:not(.is-pinned) .bd__canvas { position: relative; order: 1; grid-column: 1 / -1; height: min(64vh, 620px); margin-bottom: 40px; }
.bd:not(.is-pinned):not(.is-live):not(.no-webgl) .bd__canvas { display: none; }
.bd:not(.is-pinned) .bd__labels, .bd:not(.is-pinned) .bd__rail, .bd:not(.is-pinned) .bd__progress { display: none; }
.bd:not(.is-pinned) .bd__steps { order: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.bd:not(.is-pinned) .bd__step { padding: 28px 0; border-top: 1px solid var(--line-2); }
.bd:not(.is-pinned) .bdq { grid-column: 1 / -1; max-width: 720px; }

/* ---------- Materials with photograph ---------- */
.matx__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 40px; align-items: center; }
.matx__fig { grid-column: 1 / span 6; margin: 0; }
.matx__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--steel-850); }
.matx__copy { grid-column: 8 / span 5; }
.matx__copy .lede { margin: 24px 0 32px; }
.matx__table th a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.matx__table th a:hover { color: var(--hi); border-color: var(--hi); }
.matx__std { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: .68rem; font-weight: 400; letter-spacing: .06em; color: var(--steel-400); }

/* ---------- Quality photograph, project sheets rhythm, CTA with photo ---------- */
.qx__fig { margin-top: clamp(56px, 7vw, 96px); margin-bottom: 0; }
.qx__fig img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--steel-850); }
@media (min-width: 981px) {
  .sheets { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sheets > :first-child { grid-row: span 2; }
  .sheets > :first-child .sheet-card__draw { aspect-ratio: auto; flex: 1; min-height: 360px; }
}
.cta-band--photo .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.cta-band--photo h2 { margin-bottom: 24px; }
.cta-band__fig { margin: 0; }
.cta-band__fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #2a2412; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.cta-band__fig .img-note { color: rgba(26, 19, 0, .72); }

/* inner-page photographs */
.page-photo { position: relative; margin: 0; background: var(--steel-850); }
.page-photo img { width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; }
.page-photo .img-note { position: absolute; right: var(--gutter); bottom: 14px; color: var(--steel-200); text-shadow: 0 1px 8px rgba(0,0,0,.6); padding: 0; }
.process__photo { margin: 12px 0 0; }
.process__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--steel-850); }

@media (max-width: 980px) {
  .tour__intro h2, .tour__aside { grid-column: 1 / -1; }
  .matx__fig, .matx__copy { grid-column: 1 / -1; }
  .cta-band--photo .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .hero2 { align-items: end; min-height: calc(100svh - var(--header-h)); }
  .hero2__media img { object-position: 58% 40%; }
  .hero2::before { background: linear-gradient(0deg, rgba(14,16,18,.97) 0%, rgba(14,16,18,.9) 46%, rgba(14,16,18,.25) 78%, rgba(14,16,18,.1) 100%); }
  .hero2__inner { gap: 22px; }
  .hero2__meta { grid-template-columns: repeat(2, auto); min-width: 0; }
  .hero2__note { top: 14px; bottom: auto; }
  .tour__cap { bottom: 30px; }
  .tour__h { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 12px; }
  .tour__p { font-size: .95rem; }
  .tour__spec { margin-top: 16px; padding-top: 12px; gap: 2px 22px; }
  .tour__scrim { background: linear-gradient(0deg, rgba(10,12,14,.94) 0%, rgba(10,12,14,.78) 38%, rgba(10,12,14,0) 66%); }
  .tour__rail { top: 12px; right: auto; left: var(--gutter); transform: none; display: flex; gap: 4px; }
  .tour__rail button { justify-content: center; padding: 0; width: 44px; min-height: 44px; font-size: .72rem; background: rgba(10,12,14,.55); }
  .tour__rail button::after { display: none; }
  .tour__rail button[aria-current="step"] { background: var(--hi); color: var(--hi-ink); }
  .tour__rail .num { opacity: 1; }
  .tour__rail button { font-size: 0; }
  .tour__rail button .num { font-size: .72rem; }
  .tour__note { top: 66px; bottom: auto; right: auto; left: var(--gutter); }
  .bd.is-pinned { height: 620vh; }
  .bd.is-pinned .bd__stage::before { background: linear-gradient(0deg, rgba(20,23,26,.98) 0%, rgba(20,23,26,.92) 40%, rgba(20,23,26,0) 54%); }
  .bd.is-pinned .bd__canvas { bottom: 40%; }
  .bd.is-pinned .bd__copy { top: auto; bottom: 0; height: 48%; width: auto; right: var(--gutter); padding: 0 0 22px; }
  .bd.is-pinned .bd__title { font-size: 1.05rem; font-stretch: 100%; letter-spacing: -.01em; margin-bottom: 10px; color: var(--steel-300); }
  .bd.is-pinned .bd__h { font-size: 1.7rem; margin-bottom: 8px; }
  .bd.is-pinned .bd__p { font-size: .92rem; line-height: 1.5; }
  .bd.is-pinned .bd__dl { margin-top: 12px; padding-top: 10px; font-size: .78rem; }
  .bd.is-pinned[data-phase="quote"] .bd__copy { height: 100%; padding-top: 20px; background: rgba(20,23,26,.97); }
  .bd.is-pinned[data-phase="quote"] .bd__title { display: none; }
  .bd.is-pinned .bdq { top: 0; }
  .bd.is-pinned .bdq__row { font-size: .8rem; padding: 4px 0; }
  .bd.is-pinned .bdq__note { display: none; }
  .bd.is-pinned .bdq__fine { font-size: .72rem; margin: 8px 0 10px; }
  .bd__rail { display: none; }
  .bd.is-pinned .bd__ui { top: 12px; bottom: auto; }
  .bd.is-pinned[data-phase="quote"] .bd__ui { visibility: hidden; }
  .bd-dim { font-size: 10px; padding: 2px 5px; }
  .bd:not(.is-pinned) .bd__steps { grid-template-columns: 1fr; }
  .qx__fig img { aspect-ratio: 4 / 3; }
  .page-photo img { aspect-ratio: 4 / 3; }
}
.page-photo--slim img { aspect-ratio: 21 / 5; }
@media (max-width: 759px) { .page-photo--slim img { aspect-ratio: 16 / 7; } }

/* =====================================================================
   Motion & micro-interactions — precise, mechanical, snappy.
   Tokens on :root (--dur-1/2/3, --ease-out, --ease-in, --ease-snap, --detent, --press).
   Only transform, opacity, clip-path, filter and colour animate. JS pieces: assets/js/micro.js.
   ===================================================================== */

/* focus: the ring eases in rather than snapping */
@keyframes focus-in { from { outline-color: transparent; } }
:focus-visible { animation: focus-in var(--dur-1) var(--ease-out); }

/* buttons: colour shift on hover, press to .97 and spring back on a detent, arrow nudges */
.btn { transition: background-color var(--dur-1) linear, color var(--dur-1) linear, box-shadow var(--dur-1) linear, transform var(--dur-2) var(--detent); }
.btn svg { transition: transform var(--dur-2) var(--ease-snap); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(4px); }
.btn:active { transform: scale(var(--press)); transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
.btn--line:focus-visible { box-shadow: inset 0 0 0 1px var(--steel-300); }
.concept-pill { transition: border-color var(--dur-1) linear, color var(--dur-1) linear; }
.concept-pill:focus-visible { border-color: var(--hi); color: var(--hi); }

/* text links: a hi-vis rule draws left to right over the base underline */
.textlink { position: relative; transition: color var(--dur-1) linear; }
.textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hi); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease-snap); }
.textlink:hover::after, .textlink:focus-visible::after { transform: scaleX(1); }
.textlink svg { transition: transform var(--dur-2) var(--ease-snap); }
.textlink:hover svg, .textlink:focus-visible svg { transform: translateX(3px); }
.sec--paper .textlink:hover { border-bottom-width: 1px; }
.sec--paper .textlink::after { background: var(--paper-ink); }
.footer-grid a, .footer-base a, .crumbs a, .matx__table th a { position: relative; transition: color var(--dur-1) linear, border-color var(--dur-1) linear; }
.footer-grid a::after, .footer-base a::after, .crumbs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease-snap); }
.footer-base a::after, .crumbs a::after { bottom: -2px; }
.footer-grid a:hover::after, .footer-grid a:focus-visible::after, .footer-base a:hover::after, .footer-base a:focus-visible::after, .crumbs a:hover::after, .crumbs a:focus-visible::after { transform: scaleX(1); }
.footer-grid a:focus-visible, .crumbs a:focus-visible { color: var(--hi); }

/* primary nav: one rule that slides between links (desktop); per-link rules stay on mobile */
.nav a { transition: color var(--dur-1) linear; }
.nav a::after { transition: transform var(--dur-2) var(--ease-snap); }
.nav a:focus-visible { color: #fff; }
.nav__ind { display: none; }
@media (min-width: 981px) {
  .nav.has-ind { position: relative; }
  .nav.has-ind > a::after { display: none; }
  .nav__ind { display: block; position: absolute; left: 0; bottom: 4px; width: 100px; height: 2px; background: var(--hi); transform-origin: 0 50%; pointer-events: none; opacity: 0;
    transition: transform var(--dur-2) var(--ease-snap), opacity var(--dur-1) linear; }
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: transform var(--dur-2) var(--detent), background-color var(--dur-1) linear; }
.nav-toggle:active { transform: scale(.94); }
@keyframes nav-item-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 980px) {
  .nav { transition: opacity var(--dur-2) var(--ease-in), transform var(--dur-2) var(--ease-in), visibility 0s var(--dur-2); }
  .nav.is-open { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .nav.is-open > a { animation: nav-item-in var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
}

/* jump nav: the active-section rule travels along the strip */
.jump a { transition: color var(--dur-1) linear, border-color var(--dur-1) linear; }
.jump a:focus-visible { color: #fff; outline-offset: -3px; }
.jump .wrap.has-ind { position: relative; }
.jump .wrap.has-ind a, .jump .wrap.has-ind a.is-active, .jump .wrap.has-ind a:hover { border-bottom-color: transparent; }
.jump__ind { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--hi); transform-origin: 0 50%; pointer-events: none; opacity: 0;
  transition: transform var(--dur-2) var(--ease-snap), opacity var(--dur-1) linear; }

/* project sheet cards: lift, shadow, the drawing zooms inside its frame */
.sheet-card { transition: transform var(--dur-2) var(--ease-out); }
.sheet-card:hover, .sheet-card:focus-visible { transform: translateY(-4px); }
.sheet-card:active { transform: translateY(-2px) scale(.99); }
.sheet-card__draw { transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) linear; }
.sheet-card:hover .sheet-card__draw, .sheet-card:focus-visible .sheet-card__draw { box-shadow: 0 18px 36px -22px rgba(10,14,18,.55); border-color: rgba(20,26,31,.4); }
.sheet-card__draw svg { transition: transform var(--dur-3) var(--ease-out); }
.sheet-card:hover .sheet-card__draw svg, .sheet-card:focus-visible .sheet-card__draw svg { transform: scale(1.04); }
.sheet-card__body h3 { transition: color var(--dur-1) linear; }

/* industries: faster, snappier sector rule */
.ind::before { transition: transform var(--dur-3) var(--ease-snap); }

/* materials: a jumped-to grade (from the table) gets its rule drawn */
.mat { position: relative; }
.mat::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3px; background: var(--hi); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.mat:target::before { animation: rule-draw var(--dur-3) var(--ease-snap) 120ms both; }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.matx__table tbody tr { transition: background-color var(--dur-1) linear; }
.matx__table tbody tr:hover { background: rgba(255,255,255,.025); }

/* scroll rails */
.tour__rail button, .bd__rail button { transition: color var(--dur-1) linear; }
.tour__rail button::after, .bd__rail button::after { transition: transform var(--dur-2) var(--ease-snap), background-color var(--dur-1) linear; }
.tour__rail button:focus-visible, .bd__rail button:focus-visible { color: #fff; }

/* reveals: tighter, shorter travel */
.js .reveal { transform: translateY(12px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.is-in { transform: none; }

/* forms */
.input, .select, .textarea { transition: border-color var(--dur-1) linear, box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) linear; }
@keyframes err-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes nudge { 30% { transform: translateX(3px); } 65% { transform: translateX(-2px); } }
.field.is-invalid .err { animation: err-in var(--dur-3) var(--ease-out); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea, .field.is-invalid .chips, .field.is-invalid .ack { animation: nudge var(--dur-3) var(--ease-out); }
[data-summary-err]:not(:empty) { animation: err-in var(--dur-3) var(--ease-out); }
.chip span { transition: background-color var(--dur-1) linear, border-color var(--dur-1) linear, color var(--dur-1) linear, transform var(--dur-2) var(--detent); }
.chip span::before { transition: background-color var(--dur-1) linear, border-color var(--dur-1) linear; }
.chip:hover span { border-color: var(--paper-ink); }
.chip input:active + span { transform: scale(var(--press)); transition-duration: var(--dur-1); }
@keyframes tick-in { from { transform: scale(.3) rotate(45deg); } }
.chip input:checked + span::before { animation: tick-in var(--dur-2) var(--detent); }
.seg.has-ind { position: relative; }
.seg.has-ind label { z-index: 1; }
.seg.has-ind input:checked + span { background: transparent; }
.seg span { transition: color var(--dur-2) linear, background-color var(--dur-1) linear; }
.seg label:hover input:not(:checked) + span { background: rgba(20,26,31,.06); }
.seg__ind { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 100px; background: var(--paper-ink); transform-origin: 0 0; pointer-events: none; opacity: 0;
  transition: transform var(--dur-2) var(--ease-snap), opacity var(--dur-1) linear; }
.drop { transition: border-color var(--dur-1) linear, background-color var(--dur-2) linear; }
.drop:hover { border-color: rgba(20,26,31,.6); }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
.files li.is-new { animation: row-in var(--dur-3) var(--ease-out); }
.files li button { transition: color var(--dur-1) linear, background-color var(--dur-1) linear; }
.files li button:hover, .files li button:focus-visible { color: #B42318; background: rgba(180,35,24,.08); }

/* changed figures (calculator, RFQ summary): a brief hi-vis tint, then settle */
@keyframes tw-flash { from { color: var(--hi); } }
.tw-flash { animation: tw-flash .6s var(--ease-out); }
.sec--paper .tw-flash, .calc__in .tw-flash { animation-name: tw-flash-paper; }
@keyframes tw-flash-paper { from { color: var(--hi-deep); } }

/* RFQ success: the content steps in and a check mark is drawn */
.rfq__done.is-shown .rfq__done-head > * { animation: row-in var(--dur-3) var(--ease-out) both; }
.rfq__done.is-shown .rfq__done-head > :nth-child(2) { animation-delay: 40ms; }
.rfq__done.is-shown .rfq__done-head > :nth-child(3) { animation-delay: 80ms; }
.rfq__done.is-shown .rfq__done-head > :nth-child(4) { animation-delay: 120ms; }
.ok-check { display: block; width: 52px; height: 52px; margin-bottom: 18px; overflow: visible; }
.ok-check path { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.ok-check__ring { stroke: var(--paper-ink); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ok-check__tick { stroke: var(--hi-deep); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes draw { from { stroke-dashoffset: 1; } }
.rfq__done.is-shown .ok-check__ring { animation: draw .36s var(--ease-snap) both; }
.rfq__done.is-shown .ok-check__tick { animation: draw .24s var(--ease-out) .3s both; }

@media (prefers-reduced-motion: reduce) {
  .ok-check__ring, .ok-check__tick { animation: none !important; stroke-dashoffset: 0; }
  .sheet-card:hover .sheet-card__draw svg, .sheet-card:focus-visible .sheet-card__draw svg, .sheet-card:hover, .sheet-card:focus-visible { transform: none; }
  .mat:target::before { animation: none !important; transform: scaleX(1); }
  /* colour-only feedback keeps its timing */
  .tw-flash { animation-duration: .6s !important; }
  :focus-visible { animation-duration: var(--dur-1) !important; }
}
.nav-toggle { transition: transform var(--dur-2) var(--detent), border-color var(--dur-1) linear; }