/* ==========================================================================
   KanCraft Metal Fabrication — design system

   The page is a drafting sheet: a bordered field with registration ticks,
   sections divided by dimension rules, a title block at the foot. Data and
   labels are set in tracked mono because that is how drawings are lettered.
   Dark panels are instrument readouts dropped onto the sheet.

   Palette is the logo's: navy ground, amber/ember for anything hot.
   ========================================================================== */

:root{
  --paper:#EDF0F3;          /* cool drafting stock, biased toward the navy */
  --sheet:#FFFFFF;
  --ink:#141E2B;
  --ink-soft:#3B4A5C;
  --steel:#6B7A8F;
  --rule:#C6CFD9;
  --rule-firm:#9AA8B8;
  --panel:#0E1826;          /* logo navy — instrument panels */
  --panel-ink:#E9EEF6;
  --panel-steel:#8093AB;
  --panel-rule:rgba(255,255,255,.11);
  --amber:#C96A16;          /* darkened for contrast on paper */
  --ember:#D33B0C;
  --amber-on-panel:#E8862B; /* brand values, legible on navy */
  --ember-on-panel:#FF4A14;
  --focus:#1F6FEB;
  --field:#FFFFFF;
  --field-rule:#B4BFCC;


  --f-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --gut:clamp(18px,4vw,44px);
  --maxw:1180px;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0A1017; --sheet:#0E151E; --ink:#E3EAF3; --ink-soft:#AEBCCC;
    --steel:#7E8DA1; --rule:#25313F; --rule-firm:#3A4959;
    --panel:#131E2C; --panel-ink:#EAF0F7; --panel-steel:#8A9AB1;
    --panel-rule:rgba(255,255,255,.10);
    --amber:#E8862B; --ember:#FF5A28; --focus:#6BA8FF;
    --field:#111A25; --field-rule:#33414F;
  }
}
:root[data-theme="dark"]{
  --paper:#0A1017; --sheet:#0E151E; --ink:#E3EAF3; --ink-soft:#AEBCCC;
  --steel:#7E8DA1; --rule:#25313F; --rule-firm:#3A4959;
  --panel:#131E2C; --panel-ink:#EAF0F7; --panel-steel:#8A9AB1;
  --panel-rule:rgba(255,255,255,.10);
  --amber:#E8862B; --ember:#FF5A28; --focus:#6BA8FF;
  --field:#111A25; --field-rule:#33414F;
}
:root[data-theme="light"]{
  --paper:#EDF0F3; --sheet:#FFFFFF; --ink:#141E2B; --ink-soft:#3B4A5C;
  --steel:#6B7A8F; --rule:#C6CFD9; --rule-firm:#9AA8B8;
  --panel:#0E1826; --panel-ink:#E9EEF6; --panel-steel:#8093AB;
  --panel-rule:rgba(255,255,255,.11);
  --amber:#C96A16; --ember:#D33B0C; --focus:#1F6FEB;
  --field:#FFFFFF; --field-rule:#B4BFCC;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--panel); color:var(--panel-ink); padding:12px 18px;
  font-family:var(--f-mono); font-size:12px; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---- the sheet ---------------------------------------------------- */
.sheet{
  max-width:var(--maxw); margin:0 auto; background:var(--sheet);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  position:relative;
}
.tick{ position:absolute; width:13px; height:13px; pointer-events:none; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--rule-firm); }
.tick::before{ left:0; top:6px; width:13px; height:1px; }
.tick::after{ top:0; left:6px; width:1px; height:13px; }
.tick.tl{ left:-7px; top:-7px; } .tick.tr{ right:-7px; top:-7px; }
.tick.bl{ left:-7px; bottom:-7px; } .tick.br{ right:-7px; bottom:-7px; }

.pad{ padding-left:var(--gut); padding-right:var(--gut); }

/* dimension rule: hairline with tick terminators */
.dim{ position:relative; height:1px; background:var(--rule); margin:0 var(--gut); }
.dim::before,.dim::after{
  content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--rule-firm);
}
.dim::before{ left:0; } .dim::after{ right:0; }

/* ---- type --------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--steel); margin:0;
}
h1,h2,h3{ font-family:var(--f-display); text-wrap:balance; margin:0; }
h1{ font-size:clamp(36px,5.6vw,68px); font-weight:800; line-height:1; letter-spacing:-.032em; }
h2{ font-size:clamp(25px,3.2vw,38px); font-weight:800; line-height:1.06; letter-spacing:-.024em; }
h3{ font-size:19px; font-weight:700; line-height:1.25; letter-spacing:-.012em; }
p{ margin:0; }
.lede{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-soft); max-width:60ch; }
.prose{ max-width:64ch; color:var(--ink-soft); }
.prose p + p{ margin-top:14px; }

/* ---- masthead ----------------------------------------------------- */
.mast{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding-top:18px; padding-bottom:16px; flex-wrap:wrap;
}
.wordmark{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.mark{ width:clamp(116px,13vw,150px); height:auto; flex:none; display:block; }
nav{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
nav a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
nav a:hover{ color:var(--ink); border-bottom-color:var(--amber); }
nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }

.btn{
  display:inline-block; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  padding:12px 20px; border:1px solid var(--ink); color:var(--ink);
  background:transparent; cursor:pointer;
}
.btn:hover{ background:var(--ink); color:var(--sheet); }
.btn-hot{ border-color:var(--ember); background:var(--ember); color:#fff; }
.btn-hot:hover{ background:transparent; color:var(--ember); }
nav .btn[aria-current="page"]{ border-bottom-color:var(--ink); }

/* ---- photography --------------------------------------------------- */
.band{ position:relative; display:block; overflow:hidden; background:var(--panel); margin:0; }
.band img{ display:block; width:100%; height:100%; object-fit:cover; }
.band.wide{ aspect-ratio:2/1; }
.band.cine{ aspect-ratio:21/9; }
.band figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px var(--gut) 14px;
  background:linear-gradient(transparent,rgba(6,11,18,.86));
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:#D6DFEA;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.band figcaption b{ color:#fff; font-weight:600; }

.details{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:36px; }
.details figure{ margin:0; }
.details .shot{ aspect-ratio:4/3; overflow:hidden; background:var(--panel); }
.details .shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.details figcaption{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--rule-firm);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel);
  display:flex; justify-content:space-between; gap:10px;
}
.details figcaption b{ color:var(--ink); font-weight:600; }

.partshot{ margin:0; }
/* The part shot is portrait (2:3). Beside a short prose column it ran several
   hundred pixels past it and left a dead field; capped and cropped from the
   top so the formed edge — the subject — stays in frame. */
.partshot img{
  display:block; width:100%; height:auto;
  max-height:clamp(300px,32vw,430px); object-fit:cover; object-position:50% 38%;
}
.partshot figcaption{
  margin-top:11px; padding-top:9px; border-top:1px solid var(--rule-firm);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel);
}

/* ---- hero ---------------------------------------------------------- */
.hero{ padding-top:clamp(34px,5vw,66px); padding-bottom:clamp(28px,4vw,48px); }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(26px,4vw,56px); align-items:end;
}
.hero h1 .hot{ color:var(--ember); }
.hero .lede{ margin-top:20px; }
.hero-cta{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }

/* page header for interior pages */
.phead{ padding-top:clamp(30px,4vw,54px); padding-bottom:clamp(24px,3vw,40px); }
.phead h1{ margin-top:16px; }
.phead .lede{ margin-top:20px; }

/* ---- instrument readout -------------------------------------------- */
.readout{ background:var(--panel); color:var(--panel-ink); padding:20px 22px 18px; align-self:end; }
.readout .row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--panel-steel);
}
.state{
  display:flex; align-items:center; gap:10px; margin-top:16px;
  font-family:var(--f-display); font-weight:800; font-size:29px;
  letter-spacing:-.02em; color:var(--panel-ink); line-height:1;
}
.lamp{ width:11px; height:11px; border-radius:50%; background:var(--panel-steel); flex:none; }
.lamp.hot{ background:var(--ember-on-panel); animation:pulse 1.7s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }
@media (prefers-reduced-motion:reduce){ .lamp.hot{ animation:none; } }
.readout .note{
  font-family:var(--f-mono); font-size:10.5px; line-height:1.65; color:var(--panel-steel);
  margin-top:15px; padding-top:14px; border-top:1px solid var(--panel-rule);
}
.readout .note b{ color:var(--panel-ink); font-weight:600; }
.readout .note.small{ font-size:10px; line-height:1.6; }
.state-since{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--panel-steel); margin-top:9px;
}
/* The frame only exists when the gate is open; it is never a placeholder box */
.camframe{ margin-top:15px; aspect-ratio:16/9; overflow:hidden; background:#070C12; }
.camframe img{ display:block; width:100%; height:100%; object-fit:cover; }

/* shift breakdown — the same four buckets the shop sees internally */
.shift{ margin-top:16px; padding-top:14px; border-top:1px solid var(--panel-rule); }
.sh-hd{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--panel-steel); margin-bottom:9px;
}
.sh-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-family:var(--f-mono); font-size:11.5px; color:var(--panel-steel);
  padding:3px 0;
}
.sh-row b{
  color:var(--panel-ink); font-weight:600; font-variant-numeric:tabular-nums;
}

/* ---- live figures --------------------------------------------------- */
.figures{ background:var(--panel); color:var(--panel-ink); }
.figures-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:17px var(--gut) 15px; border-bottom:1px solid var(--panel-rule); flex-wrap:wrap;
}
.figures-hd .t{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--panel-ink);
}
.figures-hd .s{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--panel-steel);
}
.fig-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.fig{
  padding:24px var(--gut) 26px;
  border-right:1px solid var(--panel-rule); border-bottom:1px solid var(--panel-rule);
  min-width:0;
}
.fig:nth-child(3n){ border-right:0; }
.fig:nth-last-child(-n+3){ border-bottom:0; }
.fig .k{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--panel-steel); min-height:2.7em; line-height:1.35;
}
.fig .v{
  font-family:var(--f-display); font-weight:800; font-size:clamp(28px,3.5vw,42px);
  line-height:.94; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  margin-top:9px; white-space:nowrap;
}
.fig .v u{ text-decoration:none; font-size:.42em; color:var(--panel-steel); margin-left:4px; font-weight:700; }
.fig .sub{
  font-family:var(--f-mono); font-size:11px; color:var(--amber-on-panel);
  margin-top:7px; font-variant-numeric:tabular-nums;
}
.figures-ft{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:13px var(--gut) 15px; border-top:1px solid var(--panel-rule);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--panel-steel);
}

/* ---- sections -------------------------------------------------------- */
section{ padding-top:clamp(40px,5.5vw,74px); padding-bottom:clamp(40px,5.5vw,74px); }
.sec-hd{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(20px,4vw,52px); align-items:start;
}
.sec-hd h2{ margin-top:9px; }
.cap-grid{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px); align-items:start;
}

/* ---- services -------------------------------------------------------- */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); margin-top:38px; }
.svc article{ padding:24px 26px 28px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.svc article:nth-child(3n){ border-right:0; }
.svc .no{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em; color:var(--steel); }
.svc h3{ margin-top:12px; }
.svc p{ margin-top:10px; font-size:15.5px; color:var(--ink-soft); line-height:1.58; }
.svc .spec{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--rule);
  font-family:var(--f-mono); font-size:11px; color:var(--amber);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}

/* ---- mechanisms (the system section) ------------------------------------ */
/* Unnumbered on purpose: parallel facts, not a sequence. */
.mechs{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule); margin-top:38px;
}
.mech{
  padding:22px 24px 26px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.mech:nth-child(3n){ border-right:0; }
.mechs-2{ grid-template-columns:repeat(2,1fr); }
.mechs-2 .mech:nth-child(3n){ border-right:1px solid var(--rule); }
.mechs-2 .mech:nth-child(2n){ border-right:0; }
.mech .addr{ font-family:var(--f-mono); font-size:13.5px; color:var(--ink); line-height:1.7; }
.mechs-4{ grid-template-columns:repeat(4,1fr); }
.mechs-4 .mech:nth-child(3n){ border-right:1px solid var(--rule); }
.mechs-4 .mech:nth-child(4n){ border-right:0; }
.mech h3{ font-size:17px; }
.mech h3::before{
  content:""; display:block; width:16px; height:2px;
  background:var(--amber); margin-bottom:11px;
}
.mech p{ margin-top:9px; font-size:15px; color:var(--ink-soft); line-height:1.55; }

/* ---- tables ----------------------------------------------------------- */
.tablewrap{ overflow-x:auto; margin-top:34px; }
table{ width:100%; border-collapse:collapse; min-width:660px; }
caption{
  text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel); padding-bottom:12px;
}
th,td{ text-align:left; padding:13px 16px 12px; border-bottom:1px solid var(--rule); }
th{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--steel); font-weight:400; border-bottom:1px solid var(--rule-firm);
}
td{ font-size:15px; }
td.mat{ font-weight:600; }
td.num{ font-family:var(--f-mono); font-size:13.5px; font-variant-numeric:tabular-nums; }
tbody tr:hover{ background:color-mix(in srgb, var(--amber) 7%, transparent); }

/* ---- surface finishes (sits under the capability table) ---------------- */
/* Kinds, not counts — so unlike the sheet numbers beside it, this list is
   hand-written and does not update itself. See content.json. */
.finishes{ margin-top:32px; padding-top:22px; border-top:1px solid var(--rule); }
.finishes-hd{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel);
}
.finishes ul{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin-top:14px; padding:0;
}
.finishes li{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.03em;
  padding:6px 11px; border:1px solid var(--rule-firm); border-radius:2px;
  color:var(--ink-soft); white-space:nowrap;
}
.finishes p{
  margin-top:16px; font-size:15px; color:var(--ink-soft);
  line-height:1.55; max-width:64ch;
}
.bar{ display:block; height:3px; min-width:2px; background:var(--amber); margin-top:7px; }

/* ---- process ---------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:38px; border-top:1px solid var(--rule); padding-left:0; }
.steps li{ list-style:none; padding:22px 22px 26px; border-right:1px solid var(--rule); }
.steps li:last-child{ border-right:0; }
.steps .n{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em; color:var(--amber); }
.steps h3{ margin-top:11px; font-size:17px; }
.steps p{ margin-top:8px; font-size:15px; color:var(--ink-soft); line-height:1.55; }

/* ---- dedicated rep ----------------------------------------------------- */
.stages{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-top:36px;
}
.stages div{
  padding:16px 10px 18px; border-right:1px solid var(--rule);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.5; text-align:center;
}
.stages div:last-child{ border-right:0; }

/* a true dimension line spanning every stage */
.callout{ position:relative; height:46px; }
.callout .ln{ position:absolute; top:15px; left:7px; right:7px; height:1px; background:var(--amber); }
.callout .ar{ position:absolute; top:11px; width:0; height:0; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; }
.callout .ar.l{ left:0; border-right:8px solid var(--amber); }
.callout .ar.r{ right:0; border-left:8px solid var(--amber); }
.callout .ext{ position:absolute; top:0; width:1px; height:11px; background:var(--rule-firm); }
.callout .ext.l{ left:0; } .callout .ext.r{ right:0; }
.callout .lab{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  background:var(--sheet); padding:0 14px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--amber); white-space:nowrap;
}
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,52px); margin-top:34px; }
.ask{ border-top:1px solid var(--rule); }
.ask dl{ margin:0; }
.ask .qa{ padding:15px 0 16px; border-bottom:1px solid var(--rule); }
.ask dt{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--steel); }
.ask dd{ margin:6px 0 0; font-size:15.5px; color:var(--ink); }

/* ---- portal ------------------------------------------------------------ */
.portal{ background:var(--panel); color:var(--panel-ink); margin-top:6px; }
.portal-bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:14px 20px 13px; border-bottom:1px solid var(--panel-rule);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; flex-wrap:wrap;
}
.portal-bar .who{ color:var(--panel-ink); }
.portal-bar .mut{ color:var(--panel-steel); }
.ptwrap{ overflow-x:auto; }
.ptable{ width:100%; border-collapse:collapse; min-width:520px; }
.ptable th{
  text-align:left; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--panel-steel); font-weight:400;
  padding:12px 20px 10px; border-bottom:1px solid var(--panel-rule);
}
.ptable td{
  padding:13px 20px; border-bottom:1px solid var(--panel-rule);
  font-family:var(--f-mono); font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--panel-ink);
}
.ptable tr:last-child td{ border-bottom:0; }
.ptable td.mut{ color:var(--panel-steel); }
/* status runs hot to cool: ember on the machine, steel once it has shipped */
.chip{
  display:inline-block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:4px 9px 3px; border:1px solid currentColor; white-space:nowrap;
}
.chip.hot{ color:var(--ember-on-panel); }
.chip.warm{ color:var(--amber-on-panel); }
.chip.cool{ color:var(--panel-steel); }
.portal-ft{
  padding:12px 20px 14px; border-top:1px solid var(--panel-rule);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--panel-steel);
}

/* ---- lists -------------------------------------------------------------- */
.seelist{ margin:24px 0 0; padding:0; columns:2; column-gap:clamp(24px,4vw,48px); }
.seelist li{
  list-style:none; break-inside:avoid; padding-left:20px; position:relative;
  font-size:15.5px; color:var(--ink-soft); margin-bottom:11px; line-height:1.5;
}
.seelist li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--amber); }
.checks{ margin:22px 0 0; padding:0; }
.checks li{ list-style:none; padding-left:20px; position:relative; font-size:15.5px; color:var(--ink-soft); margin-top:9px; }
.checks li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--amber); }

/* ---- forms ---------------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(26px,4vw,56px); align-items:start; }
.field{ display:block; margin-top:20px; }
.field .lab{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel); margin-bottom:7px;
}
.field .lab .req{ color:var(--ember); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--f-body); font-size:16px; color:var(--ink);
  background:var(--field); border:1px solid var(--field-rule); border-radius:0;
  padding:11px 13px; line-height:1.4;
}
.field textarea{ min-height:130px; resize:vertical; }
.field .hint{ font-family:var(--f-mono); font-size:10.5px; color:var(--steel); margin-top:6px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-actions{ margin-top:28px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.form-note{ font-family:var(--f-mono); font-size:10.5px; color:var(--steel); line-height:1.7; }

/* ---- title block ----------------------------------------------------------- */
.titleblock{ border-top:1px solid var(--rule-firm); }
.tb-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.tb-grid div{ padding:15px var(--gut) 17px; border-right:1px solid var(--rule); }
.tb-grid div:last-child{ border-right:0; }
.tb-grid .k{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--steel); }
.tb-grid .v{ font-size:14.5px; margin-top:5px; }
.tb-grid .v a{ text-decoration:none; border-bottom:1px solid var(--rule-firm); }
.tb-grid .v a:hover{ border-bottom-color:var(--amber); color:var(--amber); }
.colophon{
  padding:14px var(--gut) 26px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--steel);
  border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}

/* ---- responsive -------------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid, .sec-hd, .cap-grid, .contact-grid, .form-grid{ grid-template-columns:1fr; }
  .partshot{ max-width:420px; }
  .fig-grid{ grid-template-columns:repeat(2,1fr); }
  .fig:nth-child(3n){ border-right:1px solid var(--panel-rule); }
  .fig:nth-child(2n){ border-right:0; }
  .fig:nth-last-child(-n+3){ border-bottom:1px solid var(--panel-rule); }
  .fig:nth-last-child(-n+2){ border-bottom:0; }
  .svc{ grid-template-columns:repeat(2,1fr); }
  .svc article:nth-child(3n){ border-right:1px solid var(--rule); }
  .svc article:nth-child(2n){ border-right:0; }
  .mechs, .mechs-4{ grid-template-columns:repeat(2,1fr); }
  .mechs-4 .mech:nth-child(3n){ border-right:1px solid var(--rule); }
  .mechs-4 .mech:nth-child(2n){ border-right:0; }
  .mech:nth-child(3n){ border-right:1px solid var(--rule); }
  .mech:nth-child(2n){ border-right:0; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps li:nth-child(2n){ border-right:0; }
  .steps li{ border-bottom:1px solid var(--rule); }
  .stages{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stages div{ border-bottom:1px solid var(--rule); }
  .stages div:nth-child(3n){ border-right:0; }
  .stages div:nth-last-child(-n+1){ border-bottom:0; }
  .tb-grid{ grid-template-columns:repeat(2,1fr); }
  .tb-grid div:nth-child(2n){ border-right:0; }
  .tb-grid div{ border-bottom:1px solid var(--rule); }
}
@media (max-width:560px){
  .fig-grid{ grid-template-columns:1fr; }
  .fig{ border-right:0 !important; border-bottom:1px solid var(--panel-rule) !important; }
  .fig:last-child{ border-bottom:0 !important; }
  .svc{ grid-template-columns:1fr; }
  .svc article{ border-right:0 !important; }
  .mechs, .mechs-4{ grid-template-columns:1fr; }
  .mech{ border-right:0 !important; }
  .steps{ grid-template-columns:1fr; }
  .steps li{ border-right:0 !important; }
  .details{ grid-template-columns:1fr; }
  .band.cine{ aspect-ratio:16/9; }
  .stages{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stages div:nth-child(3n){ border-right:1px solid var(--rule); }
  .stages div:nth-child(2n){ border-right:0; }
  .callout .lab{ font-size:9.5px; letter-spacing:.13em; padding:0 9px; }
  .seelist{ columns:1; }
  .form-row{ grid-template-columns:1fr; }
  .mast{ gap:12px; }
  nav{ gap:16px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}