/* TurboShade Solution
   Tough industrial palette: forged gunmetal, hazard orange and concrete. Shapes come from the logo: one square corner. */
@font-face { font-family: 'Sofia Display'; src: url(/assets/fonts/sofia-extra-condensed.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Sofia'; src: url(/assets/fonts/sofia.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --forge: #171d20;
  --steel: #2a3338;
  --orange: #f26b1d;
  --orange-deep: #c04b09;
  --teal: #4db8bf;
  --teal-deep: #0e6d73;
  --concrete: #e4e6e3;
  --concrete-2: #d3d7d4;
  --slate: #4b5558;
  --rule: #a4acaa;
  --r: clamp(10px, 1.2vw, 18px);
  --r-s: 5px;
  --gutter: clamp(16px, 4vw, 48px);
  --display: 'Sofia Display', 'Arial Narrow', Arial, sans-serif;
  --body: 'Sofia', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--concrete); color: var(--forge); font: 400 1.0938rem/1.55 var(--body); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 4px solid var(--forge); outline-offset: 2px; }
.on-dark :focus-visible, .foot :focus-visible, .circuit-band :focus-visible, .top :focus-visible, .hero :focus-visible, .head :focus-visible, .rf :focus-visible { outline-color: var(--orange); }
[id] { scroll-margin-top: 24px; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; }
h1 { font-size: clamp(3.3rem, 8.8vw, 8.6rem); line-height: .9; letter-spacing: -0.012em; text-wrap: balance; }
h2 { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: .94; letter-spacing: -0.006em; }
h3 { font-size: 1.65rem; font-weight: 750; line-height: 1.05; }

.skip { position: absolute; left: -999px; background: var(--forge); color: #fff; padding: 10px 16px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.wrap { max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4; max-width: 34em; }
.measure { max-width: 42em; }
h2.measure { max-width: 18em; }
h2 + .lead { margin-top: 16px; }
.band { padding-block: clamp(56px, 8vw, 116px); }
.band-tight { padding-block: clamp(40px, 5vw, 72px); }

/* One square corner, like the end of a logo stroke */
.btn { display: inline-block; min-height: 48px; padding: 13px 24px; font: 750 1.05rem/1.2 var(--body); text-decoration: none; border: 2px solid var(--orange); background: var(--orange); color: var(--forge); cursor: pointer; border-radius: var(--r-s) var(--r-s) var(--r-s) 0; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { background: #ff8238; border-color: #ff8238; }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn-line:hover { background: var(--forge); border-color: var(--forge); color: #fff; }
.hero .btn-line:hover, .head .btn-line:hover, .on-dark .btn-line:hover { background: #fff; border-color: #fff; color: var(--forge); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.text-link { font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--orange); }
.text-link:hover { text-decoration-color: currentColor; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--forge); color: #fff; padding: 12px var(--gutter); border-bottom: 1px solid var(--steel); }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 800 2rem/1 var(--display); text-decoration: none; }
#nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); font-weight: 600; font-size: 1.02rem; }
#nav a { text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
#nav a:hover { border-bottom-color: #7c8a8c; }
#nav a[aria-current] { border-bottom-color: var(--orange); }
#nav .nav-cta { background: var(--orange); color: var(--forge); font-weight: 750; border: 0; padding: 10px 16px; border-radius: var(--r-s) var(--r-s) var(--r-s) 0; }
#nav .nav-cta:hover, #nav .nav-cta[aria-current] { background: #ff8238; }
.menu-btn { display: none; min-height: 44px; background: none; border: 2px solid #fff; color: #fff; font: 700 1rem var(--body); padding: 7px 14px; border-radius: var(--r-s) var(--r-s) var(--r-s) 0; cursor: pointer; }
@media (max-width: 1120px) {
  .menu-btn { display: block; }
  #nav { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 8px; }
  #nav.open { display: flex; }
  #nav .nav-cta { margin-top: 8px; }
}

/* Home hero: the logo at page scale, the photo standing in for the S */
.hero { background: linear-gradient(var(--forge) 0 calc(100% - clamp(70px, 12vw, 170px)), var(--concrete) 0); color: #fff; padding-top: clamp(24px, 3.4vw, 48px); }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-top: clamp(20px, 2.6vw, 36px); }
.hero-row .actions { margin-top: 20px; }
@media (max-width: 820px) { .hero-row { grid-template-columns: 1fr; } }
.hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6.4fr) minmax(0, 1fr); gap: clamp(8px, 1.4vw, 20px); align-items: start; margin-top: clamp(28px, 4vw, 56px); }
.hero-stage .stem { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r) var(--r) var(--r) 0; }
.hero-stage .arm { width: 100%; height: auto; }

/* Part finder */
.finder { position: relative; }
.finder label { display: block; font-weight: 700; margin-bottom: 6px; }
.finder input { width: 100%; min-height: 52px; padding: 13px 16px; font: 500 1.1rem var(--body); color: var(--forge); background: #fff; border: 2px solid #fff; border-radius: var(--r-s) var(--r-s) var(--r-s) 0; }
.finder input::placeholder { color: var(--slate); }
.finder-results { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 6px; background: #fff; color: var(--forge); border: 2px solid var(--orange); border-radius: var(--r-s) var(--r-s) var(--r-s) 0; overflow: hidden; }
.finder-results[hidden] { display: none; }
.finder-results a { display: block; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid var(--concrete-2); }
.finder-results li:last-child a { border-bottom: 0; }
.finder-results a:hover, .finder-results a:focus-visible { background: var(--concrete); }
.finder-results b { display: block; font: 800 1.35rem/1.1 var(--display); }
.finder-results span { font-size: .96rem; color: var(--slate); }

/* What we do: a wall of blocks sized by importance */
.wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-top: clamp(24px, 3vw, 40px); }
.tile { color: var(--forge); display: flex; flex-direction: column; text-decoration: none; overflow: hidden; border-radius: var(--r) var(--r) var(--r) 0; background: #fff; }
.tile img, .tile svg { width: 100%; }
.tile-media { flex: 1; min-height: 0; }
.tile-media img { height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tile-body { padding: clamp(16px, 1.8vw, 26px); }
.tile h3 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: .95; letter-spacing: -0.006em; }
.tile:hover h3 { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.tile p { margin-top: 8px; max-width: 34em; }
.t-7 { grid-column: span 7; } .t-5 { grid-column: span 5; }
.tile-orange { background: var(--orange); }
.tile-teal { background: var(--teal); }
.tile-art { padding: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0; }
.tile .sym { width: 100%; stroke: var(--forge); }
.tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 20px); align-items: center; }
@media (max-width: 560px) { .tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile .sym .sym-a { stroke: var(--forge); stroke-width: 5; }
@media (max-width: 860px) { .t-7, .t-5 { grid-column: 1 / -1; } }
.wall-note { margin-top: 18px; }

/* Factory */
.factory-photo { width: 100%; max-height: 560px; object-fit: cover; }
.spec-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.spec-layout .lead { margin-top: 16px; }
@media (max-width: 900px) { .spec-layout { grid-template-columns: 1fr; } }
.spec th, .spec td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; font-weight: 400; }
.spec td { font: 800 clamp(1.5rem, 2.4vw, 2.1rem)/1.05 var(--display); text-align: right; font-variant-numeric: tabular-nums; padding-left: 16px; white-space: nowrap; }
.spec td.wrap-ok { white-space: normal; }
.spec tr:first-child th, .spec tr:first-child td { border-top: 4px solid var(--forge); }
.on-dark .spec th, .on-dark .spec td { border-bottom-color: rgba(255, 255, 255, .25); }
.on-dark .spec tr:first-child th, .on-dark .spec tr:first-child td { border-top-color: var(--orange); }
.on-head th, .on-head td { border-bottom-color: rgba(255, 255, 255, .25); }
.spec.on-head tr:first-child th, .spec.on-head tr:first-child td { border-top-color: var(--orange); }

/* Circuit on gunmetal: pressure is orange, return is logo teal */
.circuit-band { background: var(--forge); color: #fff; }
.circuit { position: relative; margin-top: 20px; }
.circuit-note { color: #e4e6e3; }
.circuit svg { width: 100%; height: auto; margin-top: 4px; }
.cl { fill: none; stroke: #c9cfcd; stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.cs { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cf { fill: #fff; }
.cd { stroke-dasharray: 5 4; }
.encl { fill: none; stroke: #7c8a8c; stroke-width: 1.5; stroke-dasharray: 16 5 3 5; vector-effect: non-scaling-stroke; }
.ctext { fill: #e4e6e3; font: 500 18px var(--body); }
.ctext-c { text-anchor: middle; }
.ctext-e { text-anchor: end; }
.ctext-m { font: 800 28px var(--display); fill: #fff; text-anchor: middle; }
.meter { stroke: var(--orange); }
.meter-t { fill: var(--orange); font: 800 24px var(--display); text-anchor: middle; }
#needle { transform-origin: 380px 420px; transition: transform .9s cubic-bezier(.3, .9, .3, 1); stroke: var(--orange); stroke-width: 3; }
#ram { transition: transform 2.4s cubic-bezier(.45, 0, .55, 1); }
#spool { transition: transform .35s ease; }
.rod { fill: #e8eae8; }
.piston { fill: #9aa6a7; }
.barrel { fill: var(--steel); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.platen { fill: var(--orange); }
.bale { fill: url(#hatch); stroke: #c9cfcd; stroke-width: 2; vector-effect: non-scaling-stroke; }
svg[data-position='out'] #ram { transform: translateX(190px); }
svg[data-state='extend'] #spool { transform: translateX(80px); }
svg[data-state='retract'] #spool { transform: translateX(-80px); }
svg[data-state='extend'] .l-p, svg[data-state='extend'] .l-a,
svg[data-state='retract'] .l-p, svg[data-state='retract'] .l-b { stroke: var(--orange); stroke-width: 3; }
svg[data-state='extend'] .l-b, svg[data-state='extend'] .l-t,
svg[data-state='retract'] .l-a, svg[data-state='retract'] .l-t { stroke: var(--teal); stroke-width: 3; }
svg[data-moving='no'][data-state='extend'] .l-r, svg[data-moving='no'][data-state='retract'] .l-r { stroke: var(--orange); stroke-width: 3; }
svg[data-moving='yes'] .l-flow { stroke-dasharray: 12 8; animation: flow .5s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.hot { fill: transparent; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; rx: 6; cursor: pointer; transition: stroke .15s; }
.hot:hover { stroke: rgba(242, 107, 29, .6); }
.hot.on { stroke: var(--orange); }
.panel { position: absolute; right: 0; bottom: 74px; width: 45%; background: var(--steel); padding: 20px 22px; border-radius: var(--r) var(--r) var(--r) 0; }
.lever-label { font-weight: 700; margin-bottom: 8px; }
.lever { display: flex; }
.lever button { flex: 1; min-height: 44px; padding: 9px 6px; font: 700 1rem var(--body); background: transparent; color: #fff; border: 2px solid #7c8a8c; margin-left: -2px; cursor: pointer; }
.lever button:first-child { margin-left: 0; border-radius: var(--r-s) 0 0 0; }
.lever button:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }
.lever button:hover { border-color: #fff; position: relative; }
.lever button[aria-pressed='true'] { background: var(--orange); color: var(--forge); border-color: var(--orange); position: relative; }
#readout { color: #e4e6e3; margin-top: 8px; min-height: 1.6em; font-variant-numeric: tabular-nums; }
.part { border-top: 1px solid rgba(255, 255, 255, .25); margin-top: 14px; padding-top: 14px; }
.part h3 { font-size: 2rem; }
.part p { margin-block: 6px 10px; line-height: 1.45; color: #e4e6e3; }
.part .text-link { text-decoration-color: var(--orange); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips button { min-height: 44px; background: transparent; border: 1px solid #7c8a8c; color: #fff; font: 600 1rem var(--body); padding: 8px 14px; border-radius: var(--r-s) var(--r-s) var(--r-s) 0; cursor: pointer; }
.chips button:hover { border-color: #fff; }
.chips button[aria-pressed='true'] { background: var(--orange); color: var(--forge); border-color: var(--orange); }
@media (max-width: 1040px) { .panel { position: static; width: auto; margin-top: 14px; } }
@media (max-width: 700px) { .ctext { display: none; } }

/* Steps that really run in order */
.flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(14px, 2vw, 28px); margin-top: 36px; counter-reset: step; }
.flow li { counter-increment: step; }
.flow li::before { content: counter(step); display: block; font: 800 clamp(3.4rem, 6vw, 5.6rem)/.9 var(--display); color: var(--orange-deep); margin-bottom: 8px; }
.flow p { margin-top: 4px; }
.flow-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
@media (max-width: 900px) {
  .flow, .flow-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
}

/* RaapidFix keeps its own navy and yellow, so it reads as its own brand */
.rf { background: #0b2d5b; color: #fff; }
.rf-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.rf h1, .rf h2 { margin-top: 18px; }
.rf .head-grid h1 { font-size: clamp(3rem, 6.4vw, 6rem); }
.rf .btn { background: #ffc20e; border-color: #ffc20e; color: #14213a; }
.rf .btn:hover { background: #ffd24d; border-color: #ffd24d; }
.rf .btn-line { background: transparent; border-color: #fff; color: #fff; }
.rf .btn-line:hover { background: #fff; border-color: #fff; color: #0b2d5b; }
.rf-logo { display: flex; align-items: center; gap: 12px; font: 800 2rem var(--display); }
.rf-logo b { color: #ffc20e; font-weight: inherit; }
.rf-p { margin-top: 14px; color: #dbe6f5; max-width: 36em; }
.rf .lead { color: #dbe6f5; }
@media (max-width: 860px) { .rf-grid { grid-template-columns: 1fr; } }
.sched { background: #fff; color: #14213a; border-radius: 16px 16px 16px 0; padding: 18px 20px; }
.sched h3 { font-size: 1.7rem; }
.sched-note { font-size: .95rem; color: #5a6679; }
.sched ul { margin-top: 10px; }
.sched li { padding-block: 10px; border-top: 1px solid #e1e5ec; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.sched b { font-weight: 650; font-variant-numeric: tabular-nums; }
.sched .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e7ebf1; overflow: hidden; }
.sched .bar i { display: block; height: 100%; background: #2a9d60; }
.sched .w40 { width: 40%; } .sched .w76 { width: 76%; } .sched .w100 { width: 100%; background: #c92f17; }
.sched .late { color: #c92f17; }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }
.plain-list li { padding-block: 9px; border-bottom: 1px solid var(--rule); }
.plain-list li:first-child { border-top: 4px solid var(--forge); }
.on-dark .plain-list li { border-bottom-color: rgba(255, 255, 255, .25); }
.on-dark .plain-list li:first-child { border-top-color: #fff; }
h2 + .plain-list, h3 + .plain-list { margin-top: 16px; }
.inds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 18px; border-top: 4px solid var(--forge); }
.inds li { font: 800 clamp(1.7rem, 3vw, 2.8rem)/1.1 var(--display); }
.inds li:first-child { border-top: 0; }
@media (max-width: 620px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ */
.faq { margin-top: 28px; border-top: 4px solid var(--forge); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { padding-block: 14px; font: 750 1.75rem/1.1 var(--display); cursor: pointer; }
.faq summary:hover { color: var(--orange-deep); }
.faq p { padding-bottom: 18px; max-width: 46em; }

/* Closing call */
.close { background: var(--orange); color: var(--forge); }
.close-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: clamp(36px, 5vw, 64px); }
.close h2 { max-width: 16em; }
.close .btn { background: var(--forge); border-color: var(--forge); color: #fff; }
.close .btn:hover { background: var(--steel); border-color: var(--steel); }
.close .btn-line { background: transparent; border-color: var(--forge); color: var(--forge); }
.close .btn-line:hover { background: var(--forge); color: #fff; }
.close .actions { margin-top: 0; }

/* Inner page heads */
.head { background: var(--forge); color: #fff; }
.head-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-block: clamp(32px, 5vw, 72px); }
.head h1 { font-size: clamp(3.2rem, 7.6vw, 7.4rem); }
.head .lead { margin-top: 18px; color: var(--concrete); }
.hero .lead { color: var(--concrete); }
.head img { border-radius: var(--r) var(--r) var(--r) 0; }
@media (max-width: 900px) { .head-grid { grid-template-columns: 1fr; } }
.on-dark { color: #fff; }
.dark-band { background: var(--forge); color: #fff; }
.dark-band .items > div { border-top-color: rgba(255, 255, 255, .25); }
.alt-band { background: var(--concrete-2); }
.alt-band .plain-list li, .alt-band .items > div, .alt-band .faq details { border-color: #a4acaa; }

/* Service pages */
.svc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.svc-layout > * { min-width: 0; }
.svc-index { position: sticky; top: 16px; padding-block: clamp(40px, 6vw, 80px) 24px; }
.svc-index h2 { font-size: 1.9rem; letter-spacing: 0; margin-bottom: 10px; }
.svc-index a { display: block; padding: 5px 0 5px 12px; text-decoration: none; border-left: 3px solid var(--rule); }
.svc-index a:hover { border-left-color: var(--orange); color: var(--orange-deep); }
@media (max-width: 960px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-index { position: static; padding-block: 32px 0; }
  .svc-index ul { columns: 2; column-gap: 20px; }
}
.svc { padding-block: clamp(40px, 6vw, 80px) 0; }
.svc-last { padding-bottom: clamp(56px, 8vw, 104px); }
.svc > h2 { max-width: 16em; }
.svc > .lead { margin-top: 14px; }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); margin-top: 26px; }
.items > div { padding-block: 14px 18px; border-top: 1px solid var(--rule); }
.items h3 { margin-bottom: 4px; }
@media (max-width: 640px) { .items { grid-template-columns: 1fr; } }
.svc figure { margin-top: 26px; }
.svc figure img { border-radius: var(--r) var(--r) var(--r) 0; }
figcaption { font-size: 1rem; color: var(--slate); margin-top: 8px; }
.fig-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.fig-two figure { margin-top: 0; }
.fig-two img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 560px) { .fig-two { grid-template-columns: 1fr; } }
.svc .spec { margin-top: 26px; max-width: 760px; }
@media (max-width: 640px) { .spec td { white-space: normal; } .family-head { grid-template-columns: 84px minmax(0, 1fr) !important; gap: 12px !important; } .family-head .sym { width: 84px; } }
.ticks { margin-top: 20px; }
.ticks li { padding: 6px 0 6px 26px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 13px; width: 13px; height: 13px; background: var(--orange); border-radius: 4px 4px 4px 0; }
.callout { margin-top: 24px; padding: 18px 22px; background: var(--concrete-2); max-width: 46em; border-radius: var(--r-s) var(--r-s) var(--r-s) 0; }

/* Products */
.prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px clamp(14px, 2vw, 28px); margin-top: 32px; }
.prod-grid img { width: 100%; aspect-ratio: 370 / 430; object-fit: cover; border-radius: var(--r) var(--r) var(--r) 0; background: #fff; }
.prod-grid h3 { margin-top: 12px; }
.prod-grid p { margin-top: 4px; }
@media (max-width: 960px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brandline { font: 750 clamp(1.8rem, 3vw, 2.8rem)/1.15 var(--display); max-width: 30em; margin-top: 18px; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r) var(--r) var(--r) 0; }
.gallery .g-a { grid-column: span 7; } .gallery .g-b { grid-column: span 5; } .gallery .g-c, .gallery .g-d, .gallery .g-e { grid-column: span 4; }
@media (max-width: 680px) { .gallery > * { grid-column: 1 / -1 !important; } }
.about-p { margin-top: 14px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
label { display: block; font-weight: 650; margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 12px 13px; font: 400 1.05rem var(--body); color: var(--forge); background: #fff; border: 2px solid #6f7a7c; border-radius: var(--r-s) var(--r-s) var(--r-s) 0; }
input:focus, select:focus, textarea:focus { border-color: var(--forge); }
textarea { min-height: 130px; resize: vertical; }
.opt { font-weight: 400; color: var(--slate); }
#enquiry-error { color: #b3261e; font-weight: 650; margin-top: 12px; min-height: 1.6em; }
.form-note { color: var(--slate); margin-top: 8px; }
.contact-lines { margin: 20px 0 0; }
.contact-lines dd { margin: 0; }
.contact-lines dt { font-weight: 650; margin-top: 18px; }
.contact-lines dt:first-child { margin-top: 0; }
.contact-lines dd > a { font: 800 1.9rem/1.2 var(--display); }
.contact-lines a.map-link { display: inline-block; margin-top: 6px; font: 600 1.05rem var(--body); }

/* TS catalogue */
.plate { background: #fff; max-width: 420px; justify-self: end; }
@media (max-width: 760px) { .plate { justify-self: start; max-width: 260px; } }
.mark { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border-top: 4px solid var(--forge); }
.mark > div { padding: 16px; border-right: 1px solid var(--rule); }
.mark > div:first-child { padding-left: 0; }
.mark > div:last-child { border-right: 0; }
.mark b { display: block; font: 800 clamp(3.4rem, 8vw, 7.4rem)/.95 var(--display); color: var(--orange-deep); }
.mark span { display: block; margin-top: 8px; }
@media (max-width: 680px) { .mark { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mark > div:nth-child(2n) { border-right: 0; } .mark > div:nth-child(odd) { padding-left: 0; } }
.parts-note { margin-top: 12px; }
.tbl-wrap { overflow-x: auto; margin-top: 22px; }
.parts { font-variant-numeric: tabular-nums; min-width: 560px; }
.parts thead th { text-align: left; font-weight: 650; padding: 8px 14px 8px 0; border-bottom: 4px solid var(--forge); white-space: nowrap; }
.parts tbody th, .parts td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.parts tbody th { font: 800 1.45rem/1.1 var(--display); white-space: nowrap; }
.parts .row-end { text-align: right; padding-right: 0; }
.row-link { display: inline-block; padding-block: 8px; font-weight: 650; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.family-head { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; align-items: center; }
.family-head p { margin-top: 6px; }
.sym { width: 130px; height: auto; fill: none; stroke: var(--forge); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sym .sym-a { stroke: var(--orange-deep); stroke-width: 4; }
.family:last-child { padding-bottom: clamp(56px, 8vw, 104px); }

/* Footer */
.foot { background: var(--forge); color: #e4e6e3; padding: clamp(36px, 5vw, 64px) var(--gutter) 28px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1304px; margin-inline: auto; }
.foot-grid p + p { margin-top: 12px; }
.foot-logo { width: 64px; margin-bottom: 14px; }
.foot-name { font: 800 2.2rem/1 var(--display); color: #fff; margin-bottom: 10px; }
.foot h2 { font-size: 1.6rem; letter-spacing: 0; color: var(--orange); margin-bottom: 8px; }
.foot li { padding-block: 3px; }
.foot a { text-underline-offset: 3px; }
.foot-legal { max-width: 1304px; margin: 32px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .98rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-lead { grid-column: 1 / -1; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

/* Prose pages */
.prose h2 { font-size: 2.2rem; margin-top: 32px; }
.prose p { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.finder-results a, .svc-index a { min-height: 44px; }
.contact-lines dd > a, .foot a { display: inline-block; padding-block: 3px; }