@font-face { font-family: "Barlow"; font-weight: 300; font-display: swap; src: url(/theme/fonts/barlow-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(/theme/fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/theme/fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/theme/fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(/theme/fonts/barlow-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/theme/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/theme/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(/theme/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }

:root {
  --tank: oklch(0.975 0.003 250);
  --tank-shade: oklch(0.935 0.004 250);
  --frame: oklch(0.20 0.01 250);
  --frame-raised: oklch(0.27 0.012 250);
  --ink: oklch(0.20 0.01 250);
  --ink-quiet: oklch(0.42 0.012 250);
  --on-frame: oklch(0.975 0.003 250);
  --on-frame-quiet: oklch(0.80 0.008 250);
  --red: oklch(0.55 0.21 27);
  --red-pressed: oklch(0.48 0.20 27);
  --reflective: oklch(0.985 0.004 95);
  --steel-a: oklch(0.95 0.004 250);
  --steel-b: oklch(0.84 0.007 250);
  --steel-c: oklch(0.91 0.005 250);
  --rivet: oklch(0.62 0.008 250);
  --tube: 4px;
  --hair: 1px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 68ch;
  --rail-h: 64px;
  --ease-reel: cubic-bezier(0.22, 1, 0.36, 1);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--rail-h) + 16px); scroll-padding-bottom: 96px; }
body {
  margin: 0; background: var(--frame); color: var(--ink);
  font: 400 1.125rem/1.55 var(--text); font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--frame); color: var(--on-frame); }
:focus-visible { outline: 3px solid var(--frame); outline-offset: 3px; }
.on-frame :focus-visible, .rail :focus-visible, .footer :focus-visible { outline-color: var(--on-frame); }
html { scrollbar-color: var(--frame-raised) var(--frame); }
p, ul, ol { max-width: var(--measure); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 0.5em; text-transform: uppercase; }
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-top: 0.4em; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tank); padding: 12px 16px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The frame: the page is a black tube frame; content sits in white tank panels set into it. */
.panel { background: var(--tank); padding: clamp(36px, 5vw, 72px) var(--gutter); margin-top: var(--tube); }
.panel--tight { padding-block: clamp(28px, 4vw, 48px); }
.panel--frame { background: var(--frame); color: var(--on-frame); }
.panel--frame p { color: var(--on-frame-quiet); }
.inner { max-width: 1320px; margin: 0 auto; }
.lede { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.45; color: var(--ink-quiet); }
.panel--frame .lede { color: var(--on-frame-quiet); }

/* Rail (header) */
.rail {
  position: sticky; top: 0; z-index: 40; background: var(--frame); color: var(--on-frame);
  border-bottom: var(--hair) solid var(--frame-raised);
}
.rail__in { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: var(--rail-h); padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.decal-mark { display: block; background: var(--tank); padding: 6px 10px; line-height: 0; flex: none; }
.decal-mark img { height: 40px; width: auto; }
.rail__nav { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rail__nav a { display: block; white-space: nowrap; padding: 10px 12px; font: 600 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; color: var(--on-frame); }
.rail__nav a:hover, .rail__nav a[aria-current="page"] { background: var(--frame-raised); }
.rail__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rail__phone { display: flex; flex-direction: column; justify-content: center; text-decoration: none; padding: 6px 10px; line-height: 1.1; min-height: 48px; }
.rail__phone small { font: 500 0.75rem/1 var(--text); color: var(--on-frame-quiet); text-transform: uppercase; letter-spacing: 0.04em; }
.rail__phone strong { font: 700 1.3rem/1.15 var(--display); letter-spacing: 0.01em; }
.rail__phone--other strong { font-weight: 600; color: var(--on-frame-quiet); font-size: 1.05rem; }
.rail__lang { font: 600 1rem/1 var(--display); text-transform: uppercase; padding: 10px; min-height: 48px; display: inline-flex; align-items: center; color: var(--on-frame); text-decoration: none; border: var(--hair) solid var(--frame-raised); }
.rail__menu { display: none; background: none; border: var(--hair) solid var(--frame-raised); color: var(--on-frame); font: 600 1rem/1 var(--display); text-transform: uppercase; padding: 12px; min-height: 48px; }

/* Shop chooser */
.shopswitch { display: flex; align-items: center; gap: 0; border: var(--hair) solid var(--frame-raised); }
.shopswitch button { background: none; border: 0; color: var(--on-frame-quiet); font: 600 0.95rem/1 var(--display); text-transform: uppercase; padding: 10px; min-height: 48px; cursor: pointer; }
.shopswitch button[aria-pressed="true"] { background: var(--on-frame); color: var(--frame); }
.chooser { background: var(--frame-raised); color: var(--on-frame); padding: 8px var(--gutter); }
.chooser .btn { min-height: 48px; }
.chooser__in { max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.chooser p { margin: 0; color: var(--on-frame); font-weight: 500; }
.chooser[hidden] { display: none; }

/* Conspicuity stripe: DOT-C2 tape proportions, red 7 to white 11. */
.stripe { height: 10px; background: repeating-linear-gradient(90deg, var(--red) 0 28px, var(--reflective) 28px 72px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  font: 700 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
  border: var(--hair) solid var(--frame); background: var(--tank); color: var(--ink); cursor: pointer;
}
.btn:hover { background: var(--frame); color: var(--on-frame); }
.btn--go { background: var(--red); border-color: var(--red); color: var(--tank); min-height: 60px; font-size: 1.35rem; }
.btn--go:hover { background: var(--red-pressed); border-color: var(--red-pressed); color: var(--tank); }
.btn--frame { background: var(--frame); color: var(--on-frame); }
.btn--frame:hover { background: var(--frame-raised); }
.panel--frame .btn:not(.btn--go) { background: transparent; color: var(--on-frame); border-color: var(--on-frame-quiet); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* Hero: the rig in the yard, the headline as a decal on its tank, the intake set into the frame. */
.hero { position: relative; background: var(--frame); display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.52fr); min-height: calc(100svh - var(--rail-h)); max-height: 980px; }
.hero__rig { position: relative; background: var(--frame); }
.hero__intake { background: var(--tank); border-left: var(--tube) solid var(--frame); display: flex; flex-direction: column; }
.hero__intake .intake { flex: 1; gap: 14px; padding-block: 18px; }
.hero__intake .intake__q { font-size: 1.5rem; }
.hero__intake .jobs a { min-height: 50px; }
.hero__intake .field .hint { display: none; }
.hero__intake textarea { min-height: 72px; }
.hero__intake .ufc { font-size: 0.95rem; line-height: 1.42; padding-top: 10px; }
.hero__intake .more { padding-top: 8px; }
.hero__intake .more summary { min-height: 48px; }

/* Intake */
.intake { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.intake__q { font: 800 1.7rem/1 var(--display); text-transform: uppercase; margin: 0; }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hair); background: var(--frame); border: var(--hair) solid var(--frame); margin: 0; padding: 0; list-style: none; }
.jobs a, .jobs button {
  display: flex; align-items: center; min-height: 58px; padding: 8px 10px; background: var(--tank); color: var(--ink);
  font: 700 1.02rem/1.05 var(--display); text-transform: uppercase; text-decoration: none; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.jobs a:hover, .jobs button:hover { background: var(--tank-shade); }
.jobs [aria-pressed="true"], .jobs [aria-pressed="true"]:hover { background: var(--frame); color: var(--on-frame); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font: 600 0.95rem/1.2 var(--text); }
.field .hint { font-size: 0.9rem; color: var(--ink-quiet); }
.field input, .field textarea, .field select {
  font: 400 1.1rem/1.4 var(--text); color: var(--ink); background: #fff; border: var(--hair) solid var(--frame);
  border-radius: 0; padding: 12px 14px; min-height: 52px; width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--frame); outline-offset: 0; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-width: 3px; }
.field__err { font-weight: 600; font-size: 0.95rem; display: flex; gap: 6px; align-items: center; }
.field__err::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.more { border-top: var(--hair) solid var(--frame); padding-top: 14px; }
.more summary { font: 700 1.1rem/1.2 var(--display); text-transform: uppercase; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.more[open] summary { margin-bottom: 12px; }
.more .field + .field { margin-top: 14px; }
.ufc { font-size: 1rem; line-height: 1.5; margin: 0; padding: 14px 0 0; border-top: var(--hair) solid var(--frame); }
.ufc strong { font-weight: 700; }
.go { display: flex; flex-direction: column; gap: 0; }
.formwrap { position: relative; }
.formwrap::before, .hero__intake::before { content: ""; display: block; height: 10px; background: repeating-linear-gradient(90deg, var(--red) 0 28px, var(--reflective) 28px 72px); }
.hero__intake .formwrap::before { display: none; }
.go .btn--go { width: 100%; }
.callme { font-size: 1rem; margin: 0; }
.formstate { padding: 16px; border: var(--tube) solid var(--frame); }
.formstate[hidden] { display: none; }
.formstate h3 { margin: 0 0 8px; }

/* Spec plates: the riveted data plate on every machine. */
.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--tube); background: var(--frame); }
.plates--one { grid-template-columns: 1fr; }
.plate {
  position: relative; padding: 26px 26px 22px; color: var(--ink);
  background: linear-gradient(115deg, var(--steel-a) 0%, var(--steel-b) 38%, var(--steel-c) 52%, var(--steel-b) 78%, var(--steel-a) 100%);
}
.plate::before, .plate::after {
  content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--steel-a), var(--rivet) 70%);
  box-shadow: 0 1px 1px oklch(0.2 0.01 250 / 0.35);
}
.plate::before { left: 10px; }
.plate::after { right: 10px; }
.plate__rivets { position: absolute; inset: 0; pointer-events: none; }
.plate__rivets::before, .plate__rivets::after {
  content: ""; position: absolute; bottom: 10px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--steel-a), var(--rivet) 70%);
  box-shadow: 0 1px 1px oklch(0.2 0.01 250 / 0.35);
}
.plate__rivets::before { left: 10px; }
.plate__rivets::after { right: 10px; }
.plate__name { font: 800 1.9rem/0.95 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.plate__name a { text-decoration: none; }
.plate__name a:hover { text-decoration: underline; }
.plate__data { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0 0 16px; border-top: var(--hair) solid var(--frame); }
.plate__data dt, .plate__data dd { margin: 0; padding: 6px 0; border-bottom: var(--hair) solid oklch(0.20 0.01 250 / 0.35); }
.plate__data dt { font: 600 0.8rem/1.6 var(--text); text-transform: uppercase; letter-spacing: 0.06em; padding-right: 16px; color: var(--ink-quiet); }
.plate__data dd { font: 600 1.05rem/1.4 var(--text); }
.plate__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.plate--one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; padding: 34px; }
.plate--one .plate__why { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.plate--rig { padding: 0; display: grid; grid-template-rows: auto 1fr; }
.plate--rig .plate__body { padding: 22px 26px 24px; position: relative; }
.plate--rig img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }

/* Price provenance: a figure read from a published source is set solid; an owner-posted figure is hairline with its date. */
.price { font: 800 1.9rem/1 var(--display); }
.price small { display: block; font: 500 0.8rem/1.3 var(--text); color: var(--ink-quiet); margin-top: 4px; text-transform: none; }
.price--posted { font-weight: 600; }
.price--quote { font: 700 1.25rem/1.1 var(--display); text-transform: uppercase; }
.from { font: 600 0.8rem/1 var(--text); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 2px; color: var(--ink-quiet); }

/* Reel-out reveal of the plates on job pick */
.reel > * { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .reel.is-paying > * { animation: reel 500ms var(--ease-reel) both; animation-delay: calc(var(--i, 0) * 80ms); }
  @keyframes reel { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* Clipboard: "my sheet" hanging off the rail */
.clipboard { position: relative; }
.clipboard__tab {
  display: flex; align-items: center; gap: 8px; background: var(--tank); color: var(--ink); border: var(--hair) solid var(--frame);
  font: 700 1rem/1 var(--display); text-transform: uppercase; padding: 10px 14px; min-height: 48px; cursor: pointer;
}
.clipboard__tab::before { content: ""; width: 18px; height: 6px; background: var(--steel-b); border: var(--hair) solid var(--frame); }
.clipboard__count { background: var(--frame); color: var(--on-frame); padding: 3px 7px; font-size: 0.95rem; }
.clipboard[hidden] { display: none; }
.clipboard__sheet { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(380px, 92vw); background: var(--tank); border: var(--tube) solid var(--frame); padding: 18px; }
.clipboard__sheet[hidden] { display: none; }
.clipboard__sheet ul { list-style: none; margin: 0 0 14px; padding: 0; }
.clipboard__sheet li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: var(--hair) solid var(--frame); }
.clipboard__sheet li button { background: none; border: 0; font: 600 0.9rem/1 var(--text); text-decoration: underline; cursor: pointer; min-height: 48px; min-width: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .clipboard.is-adding { animation: slide 420ms var(--ease-reel); }
  @keyframes slide { from { transform: translateX(-64px); } to { transform: none; } }
}

/* Sections */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.split--media { align-items: center; }
.pain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tube); background: var(--frame); border: var(--tube) solid var(--frame); }
.pain > div { background: var(--tank); padding: 24px; }
.pain h3 { font-size: 1.15rem; color: var(--ink-quiet); margin-bottom: 10px; }
.pain p { margin: 0; font-size: 1.15rem; }
.figure { margin: 0; }
.figure figcaption { font-size: 0.9rem; color: var(--ink-quiet); padding-top: 8px; }
.panel--frame .figure figcaption { color: var(--on-frame-quiet); }

/* Spec table: one row anatomy, sortable, tabular */
.spec { width: 100%; border-collapse: collapse; font-size: 1rem; }
.spec caption { text-align: left; font: 700 1.1rem/1.3 var(--display); text-transform: uppercase; padding-bottom: 8px; }
.spec th, .spec td { text-align: left; padding: 12px 14px; border-bottom: var(--hair) solid var(--frame); vertical-align: top; }
.spec thead th { white-space: nowrap; background: var(--frame); color: var(--on-frame); font: 600 0.85rem/1.2 var(--text); text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 14px; }
.spec thead th button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.spec thead th button:focus-visible { outline: 2px solid var(--on-frame); }
.spec thead th button svg { width: 10px; height: 14px; flex: none; opacity: 0.6; }
.spec thead th[aria-sort] button svg { opacity: 1; }
.spec thead th[aria-sort="ascending"] .sort-down, .spec thead th[aria-sort="descending"] .sort-up { opacity: 0; }
.spec td.num, .spec th.num { text-align: right; white-space: nowrap; }
.spec tbody tr:hover { background: var(--tank-shade); }
.spec a { font-weight: 600; }
.tablewrap { overflow-x: auto; border: var(--hair) solid var(--frame); }
.tablewrap:focus-visible { outline-offset: 2px; }

/* Rig price grid */
.grid { width: 100%; border-collapse: collapse; background: var(--tank); color: var(--ink); }
.grid th, .grid td { border: var(--hair) solid var(--frame); padding: 12px; text-align: left; }
.grid thead th { background: var(--frame); color: var(--on-frame); font: 700 1.1rem/1.1 var(--display); text-transform: uppercase; }
.grid tbody th { font: 700 1.05rem/1.15 var(--display); text-transform: uppercase; width: 26%; }
.grid tbody th small { display: block; font: 500 0.85rem/1.3 var(--text); text-transform: none; color: var(--ink-quiet); }
.grid td a { display: block; text-decoration: none; }
.grid td a:hover { text-decoration: underline; }
.grid .na { color: var(--ink-quiet); font-size: 0.95rem; background: repeating-linear-gradient(135deg, transparent 0 10px, oklch(0.2 0.01 250 / 0.06) 10px 12px); }
.ca { display: inline-block; font: 700 0.75rem/1 var(--text); text-transform: uppercase; letter-spacing: 0.06em; border: var(--hair) solid var(--frame); padding: 4px 6px; margin-top: 6px; }

/* Rig builder */
.builder { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: var(--tube); background: var(--frame); border: var(--tube) solid var(--frame); }
.builder__stage { position: sticky; top: calc(var(--rail-h) + 16px); background: var(--tank); align-self: start; }
.builder__stage img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.builder__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.callout-line { stroke: var(--frame); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.callout-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tank); border: 2px solid var(--frame); box-shadow: 0 1px 2px oklch(0.2 0.01 250 / 0.4); }
.callout-labels { position: absolute; inset: 0; pointer-events: none; }
.callout-label { position: absolute; transform: translate(-50%, -100%); background: var(--tank); border: var(--hair) solid var(--frame); padding: 4px 8px; font: 700 0.85rem/1.1 var(--display); text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .callout-line { stroke-dasharray: 400; animation: draw 500ms var(--ease-reel); }
  @keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
}
.builder__controls { background: var(--tank); padding: 22px; display: flex; flex-direction: column; gap: 20px; }
.step { border: 0; margin: 0; padding: 0; }
.step legend { font: 800 1.3rem/1 var(--display); text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.choices { display: grid; grid-template-columns: 1fr; gap: var(--hair); background: var(--frame); border: var(--hair) solid var(--frame); }
.choice { position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--tank); padding: 12px 14px; cursor: pointer; min-height: 52px; }
.choice input { position: absolute; opacity: 0; }
.choice:has(input:checked) { background: var(--frame); color: var(--on-frame); }
.choice:has(input:focus-visible) { outline: 3px solid var(--frame); outline-offset: -6px; }
.choice:has(input:checked):has(input:focus-visible) { outline-color: var(--on-frame); }
.choice:has(input:disabled) { color: var(--ink-quiet); cursor: not-allowed; background: var(--tank-shade); }
.choice b { font: 700 1.05rem/1.1 var(--display); text-transform: uppercase; }
.choice span { font-size: 0.9rem; }
.total { border-top: var(--tube) solid var(--frame); padding-top: 14px; }
.total .price { font-size: 2.6rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--tube); background: var(--frame); }
.gallery figure { margin: 0; background: var(--tank); }
.gallery img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.gallery figcaption { padding: 12px 14px 16px; font-size: 0.98rem; }
.gallery figcaption b { display: block; font: 700 0.85rem/1.2 var(--text); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-quiet); margin-bottom: 4px; }

/* Shops */
.shops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tube); background: var(--frame); border: var(--tube) solid var(--frame); }
.shop { background: var(--tank); padding: 28px; }
.shop h3 { margin-bottom: 4px; }
.shop address { font-style: normal; margin: 0 0 14px; }
.shop .tel { font: 800 2rem/1.1 var(--display); text-decoration: none; display: inline-block; margin-bottom: 4px; }
.posted { font-weight: 300; }
.posted small, .unconfirmed { display: inline-block; font-size: 0.85rem; color: var(--ink-quiet); border-bottom: var(--hair) dashed var(--ink-quiet); }

/* Long-form reading (guides) */
.prose { max-width: var(--measure); font-size: 1.15rem; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.prose th, .prose td { border-bottom: var(--hair) solid var(--frame); padding: 10px 12px 10px 0; text-align: left; }
.crumbs { font-size: 0.95rem; margin: 0 0 18px; color: var(--ink-quiet); }
.crumbs a { color: inherit; }

/* Lists of links set as a rule-separated column (jobs, guides, service areas) */
.index { list-style: none; margin: 0; padding: 0; border-top: var(--tube) solid var(--frame); max-width: none; columns: 2 320px; column-gap: 40px; }
.index li { break-inside: avoid; border-bottom: var(--hair) solid var(--frame); }
.index a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 4px; text-decoration: none; font: 700 1.3rem/1.15 var(--display); text-transform: uppercase; }
.index a span { font: 400 1rem/1.4 var(--text); text-transform: none; color: var(--ink-quiet); }
.index a:hover { background: var(--tank-shade); }

/* Used */
.filters { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; margin-bottom: 18px; }
.filters .field { min-width: 180px; }
.pager { display: flex; gap: var(--hair); margin-top: 18px; flex-wrap: wrap; }
.pager button { min-width: 48px; min-height: 48px; border: var(--hair) solid var(--frame); background: var(--tank); font: 700 1.05rem/1 var(--display); cursor: pointer; }
.pager button[aria-current="page"] { background: var(--frame); color: var(--on-frame); }
.empty { border: var(--tube) solid var(--frame); padding: clamp(24px, 4vw, 44px); background: var(--tank); }
.empty h3 { margin-top: 0; }
.sold { font: 800 1rem/1 var(--display); text-transform: uppercase; background: var(--frame); color: var(--on-frame); padding: 6px 8px; display: inline-block; }

/* Estimator */
.estimator { border: var(--tube) solid var(--frame); padding: 24px; background: var(--tank); }
.estimator output { display: block; margin-top: 12px; }

/* Footer */
.footer { background: var(--frame); color: var(--on-frame); padding: 56px var(--gutter) 120px; margin-top: var(--tube); }
.footer__in { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
.footer h2 { font-size: 1.3rem; margin: 0 0 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 6px; }
.footer a { color: var(--on-frame); }
.footer p, .footer address { color: var(--on-frame-quiet); font-style: normal; font-size: 1rem; }
.footer .tel { font: 800 1.6rem/1.2 var(--display); text-decoration: none; color: var(--on-frame); display: inline-flex; align-items: center; min-height: 48px; }

/* Bottom rail (phones) */
.bottomrail { display: none; }

/* HubSpot drag-and-drop areas inherit the panel grammar */
.dnd-section { padding: 0; }
.dnd-section > .row-fluid { max-width: 1320px; margin: 0 auto; }
.extra:empty { display: none; }

@media (max-width: 1360px) {
  .shopswitch { display: none; }
}
@media (max-width: 1100px) {
  .rail__nav { display: none; }
  .rail__nav.is-open { display: flex; position: absolute; top: var(--rail-h); left: 0; right: 0; flex-direction: column; background: var(--frame); padding: 8px var(--gutter) 16px; border-bottom: var(--tube) solid var(--frame-raised); }
  .rail__nav.is-open a { padding: 14px 8px; font-size: 1.3rem; border-bottom: var(--hair) solid var(--frame-raised); }
  .rail__menu { display: inline-flex; align-items: center; }
  .hero { grid-template-columns: 1fr; max-height: none; min-height: 0; }
  .hero__intake { border-left: 0; border-top: var(--tube) solid var(--frame); }
  .builder { grid-template-columns: 1fr; }
  .builder__stage { position: relative; top: auto; }
  .footer__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --rail-h: 56px; }
  body { font-size: 1.0625rem; }
  .decal-mark img { height: 32px; }
  .rail__phone--other, .rail__phone small, .shopswitch { display: none; }
  .rail__phone strong { font-size: 1.15rem; }
  .jobs { grid-template-columns: 1fr 1fr; }
  .hero__intake:not(.is-picked) [data-after-pick] { display: none; }
  .chooser { padding-block: 10px; }
  .chooser__in { flex-wrap: nowrap; gap: 8px; }
  .chooser .btn { min-height: 48px; padding: 0 10px; font-size: 0.95rem; flex: 1; }
  .chooser p { font-size: 0.9rem; flex: 0 1 auto; }
  .jobs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .jobs a, .jobs button { min-height: 54px; }
  .split, .pain, .shops, .row2, .plate--one { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr; }
  .bottomrail {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--hair); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--frame); border-top: var(--hair) solid var(--frame-raised); padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .bottomrail a { min-height: 52px; display: flex; align-items: center; justify-content: center; text-decoration: none; font: 700 1.1rem/1 var(--display); text-transform: uppercase; color: var(--on-frame); border: var(--hair) solid var(--frame-raised); }
  .bottomrail a.go-link { background: var(--red); border-color: var(--red); }
  .clipboard { position: fixed; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); right: 8px; z-index: 44; }
  .clipboard__sheet { top: auto; bottom: 100%; }
  .grid { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .rail, .bottomrail, .clipboard, .footer, .chooser { display: none; }
  body { background: #fff; }
}

/* An owner-facing marker on copy that is still a draft: removed by the owner when the copy is his. */
.draftmark { display: inline-block; font: 700 0.85rem/1.3 var(--text); text-transform: uppercase; letter-spacing: 0.05em; border: var(--hair) dashed currentColor; padding: 6px 10px; margin: 0 0 16px; }

.intake-side .lede { margin-top: 0; }
.intake-side .tel { font: 800 2rem/1.1 var(--display); text-decoration: none; }

/* Shop switch at every width: in the open mobile menu and in the footer. */
.rail__navshop { display: none; }
.rail__nav.is-open .rail__navshop { display: flex; gap: 8px; padding: 12px 0 4px; }
.rail__nav.is-open .rail__navshop .btn { flex: 1; min-height: 48px; }
.footshop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.footshop p { flex-basis: 100%; margin: 0; }
.footshop .btn { background: transparent; color: var(--on-frame); border-color: var(--on-frame-quiet); min-height: 48px; }

.tel { font: 800 1.8rem/1.2 var(--display); text-decoration: none; }

/* Rig hero: the headline is lettering on the rig's own tank. The stage keeps the photo's aspect so the decal box,
   set in percent of the photo, stays on the tank at every width. */
.righero { margin: 0; display: flex; flex-direction: column; height: 100%; }
.righero__stage { position: relative; aspect-ratio: 1431 / 1191; container-type: inline-size; overflow: hidden; }
.righero__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.righero__decal {
  position: absolute; left: var(--dl); top: var(--dt); width: var(--dw); margin: 0;
  font: 800 3.9cqw/0.98 var(--display); letter-spacing: 0.005em; text-transform: uppercase; color: oklch(0.16 0.01 250);
  mix-blend-mode: multiply; text-wrap: balance;
}
.righero__sub { padding: 18px clamp(16px, 2.4vw, 32px) 22px; color: var(--on-frame-quiet); font-size: 1.05rem; max-width: 52ch; }
@media (max-width: 760px) {
  .righero__stage { aspect-ratio: 894 / 715; }
  .righero__decal { left: var(--pl); top: var(--pt); width: var(--pw); font-size: 6.6cqw; line-height: 1; }
  .righero__sub { display: none; }
}

/* Finish pass: the rig line sits on the frame, the plates wrap without holes, the chooser only where the rail has no toggle. */
.rigline__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; margin-bottom: 28px; }
.rigline__head h2 { margin: 0; }
.rigline__head .lede { margin: 0; }
.rigline__body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: var(--tube); align-items: stretch; }
.rigline__body .framed img { height: 100%; object-fit: cover; }
.rigline__body .tablewrap { border: 0; }
.rigline__go { margin: 24px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.framed { margin: 0; border: var(--tube) solid var(--frame); background: var(--frame); }
.panel--frame .framed { border-color: var(--frame-raised); }
.plates { display: flex; flex-wrap: wrap; }
.plates > * { flex: 1 1 340px; }
.plates--one > * { flex-basis: 100%; }
@media (min-width: 1361px) { .chooser { display: none !important; } }
.clipboard[data-empty="true"] .clipboard__count { background: var(--tank-shade); color: var(--ink-quiet); }
.clipboard[data-empty="true"] .clipboard__sheet { display: none; }
.callout-pin { display: grid; place-items: center; font: 800 0.7rem/1 var(--display); color: var(--ink); }
.ticks ul { list-style: none; padding: 0; margin: 0 0 8px; }
.ticks li { position: relative; padding: 8px 0 8px 26px; border-bottom: var(--hair) solid oklch(0.20 0.01 250 / 0.2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg); }
.ticks--no li::before { width: 12px; height: 0; border-left: 0; border-bottom: 3px solid var(--ink-quiet); transform: none; top: 19px; }
.models table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.models th { background: var(--frame); color: var(--on-frame); font: 600 0.85rem/1.2 var(--text); text-transform: uppercase; letter-spacing: 0.05em; text-align: left; padding: 10px 14px; }
.models td { padding: 10px 14px; border-bottom: var(--hair) solid var(--frame); }
.index li a { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); align-items: baseline; }
.more summary { list-style: none; justify-content: space-between; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; width: 12px; height: 12px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); margin: -6px 6px 0 12px; flex: none; }
.more[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
fieldset.field legend { padding: 0; margin-left: 0; }
@media (max-width: 1100px) {
  .rigline__head, .rigline__body { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .clipboard[data-empty="true"] { display: none; }
  .callout-label { display: none; }
  .callout-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .builder__aside { padding: 14px 16px; }
  .callout-line { display: none; }
  .index li a { grid-template-columns: 1fr; }
}

.rail__navwrap { display: contents; }
.photo-note { padding: 0 clamp(20px, 2.4vw, 32px) 20px; margin: 0; font-size: 0.95rem; }
.video { aspect-ratio: 16 / 9; background: var(--frame); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Rail fit at 1440 in both languages: numbers never wrap, nav tightens before anything breaks. */
.rail__phone strong, .rail__phone small, .clipboard__tab, .rail__lang { white-space: nowrap; }
@media (max-width: 1600px) {
  .rail__in { gap: 10px; }
  .rail__nav a { padding: 10px 8px; font-size: 0.98rem; }
  .rail__end { gap: 6px; }
}
/* Builder: the photo column carries the parts key and the build summary under the photo, so it never rests empty. */
.builder__aside { background: var(--tank); padding: 18px 22px 22px; border-top: var(--tube) solid var(--frame); }
.builder__aside h3 { font-size: 1.1rem; margin: 0 0 8px; }
.builder__aside ol { margin: 0 0 14px; padding-left: 22px; font: 700 0.95rem/1.6 var(--display); text-transform: uppercase; }
.builder__aside pre { margin: 0; font: 500 0.95rem/1.5 var(--text); white-space: pre-wrap; }
.builder__left { align-self: start; position: sticky; top: calc(var(--rail-h) + 16px); background: var(--tank); }
.builder__left .builder__stage { position: relative; top: auto; }
@media (max-width: 1100px) { .builder__left { position: static; } }
@media (max-width: 760px) {
  .grid { min-width: 620px; }
  .grid tbody th { width: 160px; }
}

.hero__intake .intake--jobs { padding-bottom: 0; flex: none; }
.hero__intake .formwrap > .intake { padding-top: 14px; }
/* Builder: the photo column is a tank panel that ends at its content; the parts key is for phones, where pins replace the labels. */
.builder { align-items: start; }
.builder__left { border-bottom: 0; }
.builder__aside .callout-key, .builder__aside .key-head { display: none; }
.ca-note { margin: 10px 0 0; font-size: 0.9rem; color: var(--on-frame-quiet); }
.panel:not(.panel--frame) .ca-note { color: var(--ink-quiet); }
.chooser .btn .city-short { display: none; }
@media (max-width: 760px) {
  .builder__aside .callout-key, .builder__aside .key-head { display: block; }
  .chooser .btn .city-long { display: none; }
  .chooser .btn .city-short { display: inline; }
}
.builder { background: var(--tank); gap: 0; }
.builder__controls { border-left: var(--tube) solid var(--frame); }
@media (max-width: 1100px) { .builder__controls { border-left: 0; border-top: var(--tube) solid var(--frame); } }

.shopswitch__ask { display: none; padding: 0 8px; font: 600 0.85rem/1 var(--text); color: var(--on-frame); white-space: nowrap; }
[data-shop-chosen="false"] .shopswitch__ask { display: inline; }
[data-shop-chosen="false"] .shopswitch { border-color: var(--red); }