/* Zinco Holland Metals. Their house style: the blue waves and the dark grey ZHM of the logo,
   the black tarp and blue "cathodic protection" of their lorry, their own line drawings of anodes,
   white pages, plain words with "u". */
@font-face{font-family:Text;src:url(fonts/text.woff2) format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:Mark;src:url(fonts/mark-900.woff2) format('woff2');font-weight:400;font-display:block}

:root{
  --blue:#4DACDC; --sky:#D3EAF7; --blue-ink:#1A6894; --grey:#4E4B4C; --ink:#2F2D2E; --text:#2F2D2E; --muted:#5E5B5C;
  --line:#DCE3E8; --soft:#EEF5FA; --tarp:#1F1E1E; --tarp-2:#2A2929; --plate:#5F676D;
  --f:Text,"Source Sans 3","Myriad Pro","Segoe UI",Arial,sans-serif; --fm:Mark,"Archivo Black","Arial Black",sans-serif;
  --wrap:1240px; --pad:clamp(1.25rem,4vw,3rem); --sec:clamp(3.5rem,8vw,6.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* One type scale: 14 meta, 18 body and controls, 18-22 lead and h3, 24-32 feature, 32-48 h2, 40-70 h1 */
  --fs-s:.875rem; --fs-b:1.125rem; --fs-m:1.125rem; --fs-l:clamp(1.125rem,.75rem + 1vw,1.375rem);
  --fs-xl:clamp(1.5rem,1.2rem + 1vw,2rem); --fs-h2:clamp(2rem,1.45rem + 1.9vw,3rem); --fs-h1:clamp(2.5rem,1.4rem + 3.4vw,4.4rem);
  --on-dark:#D9DDE0; --on-dark-2:#D9DDE0;
}
/* Page changes fade instead of cutting; the top bar and header stay put. */
@view-transition{navigation:auto}
/* The old page fades out, then the new one fades in: two pages never show through each other. */
::view-transition-old(root){animation:vt-out .2s var(--ease) both}
::view-transition-new(root){animation:vt-in .3s var(--ease) .2s both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0}}
.util{view-transition-name:util}.head{view-transition-name:head}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6.5rem}
/* Smooth only after a link is followed (it then has focus), not for every script that scrolls the page. */
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{margin:0;background:#fff;color:var(--text);font:400 var(--fs-m)/1.6 var(--f);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
p{margin:0 0 1rem;text-wrap:pretty}
p a{padding-block:.25rem}
p,li,dd,dt,td,th{overflow-wrap:break-word}
h1,h2,h3{color:var(--ink);text-wrap:balance;margin:0;overflow-wrap:break-word}
a{color:var(--ink);text-decoration-color:var(--blue-ink);text-decoration-thickness:2px;text-underline-offset:.2em}
a:hover{color:var(--ink);text-decoration-thickness:3px;text-decoration-color:var(--ink)}
::selection{background:var(--sky);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.util :focus-visible,.foot :focus-visible{outline-color:var(--blue)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:0;right:0;top:-4rem;z-index:50;border-radius:4px;display:flex;align-items:center;min-height:2.5rem;padding:0 max(var(--pad),calc((100% - var(--wrap))/2));background:var(--blue-ink);color:#fff;font-weight:600}
.skip:focus{top:0;color:#fff;outline-offset:-4px;outline-color:#fff}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.num{font-variant-numeric:tabular-nums}

/* Buttons and links: blue fills, graphite on hover; links get a blue line */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem min(1.25rem,6vw);max-width:100%;overflow-wrap:anywhere;text-align:center;border:2px solid var(--blue-ink);border-radius:4px;background:var(--blue-ink);color:#fff;font:600 var(--fs-m)/1.2 var(--f);text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .1s var(--ease)}
.btn:hover{background:#145478;border-color:#145478;color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.btn.ghost{background:transparent;border-color:var(--grey);color:var(--ink)}
.btn.ghost:hover{background:var(--tarp);border-color:var(--tarp);color:#fff}
.more,.to{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--blue-ink);padding-block:.25rem;transition:gap .2s var(--ease),border-color .2s var(--ease)}
.more::after{content:'';width:.5rem;height:.5rem;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:.25rem}
.more:hover,.to:hover{gap:.75rem;border-color:var(--ink);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
/* On a phone the buttons stack at full width: whether two fit side by side must not depend on which font has loaded yet. */
@media (max-width:30em){.actions{display:grid}.actions .btn{justify-content:center}}
.eyebrow{margin:0 0 1rem;font:700 var(--fs-s) var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.eyebrow.light{color:var(--blue)}

/* Closed until further notice (owner, 2026-11-12): a line above the top bar on every page, and in place of the
   opening hours. Ink on their blue: 5.4:1. */
.closed{background:var(--blue);color:var(--ink);view-transition-name:closed}
.closed p{margin:0;padding-block:.625rem;font:700 var(--fs-b)/1.35 var(--f)}
.shut{max-width:26rem;margin:1.5rem 0 0;padding-left:1rem;border-left:4px solid var(--blue);font-weight:700;color:var(--ink)}

/* Top bar and header */
.util{background:var(--tarp);color:var(--on-dark);font-size:var(--fs-s)}
/* The top bar is always one line. As it gets narrower (or the text larger) it lets go of the tagline, then the
   e-mail, then the phone number (the header keeps its call button); NL/EN always stays.
   Widths are in em of the bar's own text, so they hold at any text size. */
.util{overflow-x:clip}
.util .wrap{display:flex;align-items:center;gap:1.5em;min-height:2.5rem;container:util/inline-size}
.util p{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util ul{display:flex;align-items:center;gap:1.5em;list-style:none;margin:0 0 0 auto;padding:0;white-space:nowrap}
@container util (max-width:64em){.util p{display:none}.util ul{flex:1}.util .lang{margin-left:auto}}
@container util (max-width:38em){.util ul{gap:1em}}
@container util (max-width:51em){.util .u-mail,.util .u-tel{display:none}}
.util a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding-block:.25rem;border-bottom:2px solid transparent}
/* Room for the focus ring beside the text; the item gives the room back, so nothing moves. */
.util .u-tel,.util .u-mail{margin-inline:-.375rem}.util .u-tel a,.util .u-mail a{padding-inline:.375rem}
.util a:focus-visible{outline-offset:0}
.util a:hover{border-bottom-color:var(--blue);color:#fff}
.util svg{width:1rem;height:1rem;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round}
.util .lang{gap:0}
.util .lang a{padding:.25rem .5rem;font-weight:700;letter-spacing:.04em}
.util .lang a[aria-current]{color:var(--blue)}
.util .lang a+a{border-left:1px solid #4A4848}
.util .lang a:last-child{padding-right:0}

.head{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}
.head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;min-height:5.75rem}
.logo{display:block;flex:none}
.logo-svg path{transition:fill .2s var(--ease)}
.logo:hover .logo-svg>path{fill:var(--blue-ink)}
.logo-svg{height:64px;width:auto}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;margin-left:auto}
.nav a{position:relative;padding:.75rem 1rem;color:var(--ink);font:600 var(--fs-b) var(--f);text-decoration:none;white-space:nowrap}
.nav a::after{content:'';position:absolute;left:1rem;right:1rem;bottom:.35rem;height:3px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.head .call{flex:none}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:.5rem 1rem;border:2px solid var(--grey);border-radius:4px;font:600 var(--fs-m) var(--f);color:var(--ink);transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.menu summary::-webkit-details-marker{display:none}
.menu:not([open]) nav{display:none}
.menu summary::before{content:'';width:1.1rem;height:.75rem;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
.menu summary:hover,.menu[open] summary{background:var(--tarp);border-color:var(--tarp);color:#fff}
.menu nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:4px solid var(--blue);box-shadow:0 18px 30px -18px rgba(0,0,0,.25);padding:.5rem var(--pad) 1rem;display:grid}
.menu nav a{padding:.75rem 0;border-bottom:1px solid var(--line);color:var(--ink);font:600 var(--fs-m) var(--f);text-decoration:none}
.menu nav a:hover{color:var(--ink);background:linear-gradient(var(--blue),var(--blue)) left bottom/2.5rem 3px no-repeat}
@media (min-width:961px) and (min-height:560px){.head{position:sticky;top:0}.js .head.scrolled{box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}}
@media (max-width:960px){.nav{display:none}.menu{display:block}.head .call{margin-left:auto}}
.js .head.compact{position:relative}
.js .head.compact .nav{display:none}
.js .head.compact .menu{display:block}
.js .head.compact .call{margin-left:auto}
.js .head.tight .wrap{column-gap:.75rem}.js .head.tight .call span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.js .head.tight .call{min-width:3rem;padding:.75rem}
.js .head.stacked .menu{order:3;flex:1 0 100%}.js .head.stacked .menu summary{width:100%;justify-content:center}
.js .head.tiny .wrap{column-gap:.5rem}.js .head.tiny .menu summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.js .head.tiny .menu summary{gap:0;min-width:3rem;justify-content:center;padding:.5rem .75rem}
@media (max-width:560px){.head .wrap{gap:.5rem;min-height:4.75rem;flex-wrap:wrap;padding-block:.5rem}.logo{margin-right:auto}.logo-svg{height:min(50px,13vw)}.head .call span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.head .call{min-width:3rem;padding:.75rem}.menu summary{padding:.5rem .75rem;gap:.5rem}}
@media (max-width:340px){.menu summary{font-size:0;gap:0;min-width:3rem;justify-content:center}.menu summary::before{width:1.25rem}}

/* Hero: words left, their zinc bars right to the edge, the logo's waves below */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:min(44rem,80vh)}
.hero-text{align-self:center;padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,4rem) clamp(6.5rem,10vw,9.5rem) max(var(--pad),calc((100vw - var(--wrap))/2))}
h1{font:700 var(--fs-h1)/1.02 var(--f);letter-spacing:-.02em;color:var(--ink)}
.sub{margin:1.25rem 0 0;font:600 var(--fs-l)/1.4 var(--f);color:var(--ink)}
.lead{margin-top:.5rem;font-size:var(--fs-l);line-height:1.55;max-width:32em}
.hero-photo{margin:0;position:relative;min-height:22rem}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.waveband{position:absolute;left:0;bottom:0;width:50%;height:clamp(3rem,5vw,4.6rem);pointer-events:none}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.hero-text{padding:clamp(2rem,6vw,3rem) var(--pad) 1rem}.hero-photo{min-height:0;aspect-ratio:3/2;order:2}.hero-photo img{position:static}.waveband{position:static;width:100%;order:1;margin-bottom:1rem}}

/* Promises */
.usps{background:#fff;border-bottom:1px solid var(--line)}
.usps ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 2.5rem;padding-block:3rem}
.usps li,.service li{display:flex;align-items:flex-start;gap:.75rem;font-weight:600;color:var(--ink);line-height:1.35}
.check{width:1.25rem;height:1.25rem;flex:none;margin-top:.125rem}
.check circle{fill:none;stroke:var(--blue-ink);stroke-width:1.6}.check path{fill:none;stroke:var(--blue-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.usps{container:usps/inline-size}
@container usps (max-width:62em){.usps ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container usps (max-width:30em){.usps ul{grid-template-columns:minmax(0,1fr)}}

/* Sections */
.sec{padding-block:var(--sec)}
/* Two white sections in a row share one gap, not two. */
.sec:not(.soft,.dark)+.sec:not(.soft,.dark){padding-top:0}
.soft{background:var(--soft)}
.sec h2{font:700 var(--fs-h2)/1.06 var(--f);letter-spacing:-.015em;margin-bottom:1rem}
.sec h3{font:700 var(--fs-l)/1.3 var(--f)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem clamp(2.5rem,6.2vw,5.5rem);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{margin:0}
.sec-head p{margin:0;max-width:32em}
.grid-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6.2vw,5.5rem);align-items:start}
.intro>p{max-width:34em}
.photo{margin:0}
.photo img{width:100%;border-radius:4px;background:#E3E9ED}
.dark .photo img{background:#3B3A3A}
.photo figcaption,.fine{margin-top:.75rem;font-size:var(--fs-s);color:var(--muted)}
@media (max-width:900px){.sec-head,.grid-2{grid-template-columns:minmax(0,1fr)}}

/* Products: their drawings */
.drawings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.drawings li{display:flex;flex-direction:column;align-items:stretch;min-width:0;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1.5rem;transition:border-color .2s var(--ease)}
.drawings li:hover{border-color:var(--blue)}
.draw{width:100%;height:11rem;margin-bottom:1.25rem;color:var(--grey)}
.draw .lines *{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.draw .lines .strap-o{stroke-width:9;vector-effect:none;stroke-linecap:butt}
.draw .lines .strap-i{stroke:#fff;stroke-width:5.6;vector-effect:none;stroke-linecap:butt}
.drawings li:hover .strap-i{stroke:#fff}
.draw .mark{fill:var(--ink)}
.drawings h3{margin-bottom:.25rem}
.drawings p{margin:0 0 1rem;color:var(--muted);flex:1}
.drawings .more{align-self:flex-start}
.drawnote{margin:2rem 0 0}
@media (max-width:1000px){.drawings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.drawings{grid-template-columns:minmax(0,1fr)}.drawings li{padding:1.25rem}.draw{height:6rem;margin-bottom:1rem}}
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3.5rem,7vw,5.5rem)}
.feature img{aspect-ratio:3/2;object-fit:cover}
.feature h3,.elements h3{font-size:var(--fs-xl);margin-bottom:.75rem}
.elements{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}
.elements ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.elements li{background:var(--soft);border-radius:4px;overflow:hidden}
.elements img{width:100%;aspect-ratio:1;object-fit:cover;transform:scale(1.18);mix-blend-mode:multiply}
@media (max-width:900px){.feature,.elements{grid-template-columns:minmax(0,1fr)}.elements ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* IMPA list */
.filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1rem;padding:calc(1rem - 1px);background:#fff;border:1px solid var(--line);border-radius:4px}
label{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-width:0;font:600 var(--fs-b) var(--f);color:var(--ink)}
select,input[type=search]{width:100%;min-width:0;max-width:100%;min-height:3rem;padding:.5rem .75rem;border:1px solid #8E979D;border-radius:4px;background:#fff;color:var(--ink);font:400 var(--fs-m) var(--f)}
select{text-overflow:ellipsis;overflow:hidden;appearance:none;padding-right:2.5rem;background:#fff}
/* The select's arrow sits beside it, not as its background, so its colours can be measured. */
label:has(>select){position:relative}
label:has(>select)::after{content:'';position:absolute;right:.9rem;bottom:1.5rem;width:.75rem;height:.5rem;margin-bottom:-.25rem;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232F2D2E' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
select:hover,input[type=search]:hover{border-color:var(--ink)}
.count{margin:1.25rem 0 .5rem;padding-inline:1rem;font-weight:600;color:var(--muted)}
.tablewrap{border-top:2px solid var(--ink);background:#fff;container:list/inline-size}
table{width:100%;border-collapse:collapse;font-size:var(--fs-b)}
thead th{background:#fff;text-align:left;font:700 var(--fs-s) var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.75rem 1rem;border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 var(--line)}
tbody th,tbody td{padding:.75rem 1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
tbody th{font-weight:600;color:var(--ink)}
.impa{font-weight:600;color:var(--ink)}
tbody tr:hover{background:#F6FAFD}
tbody tr[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.js #list.ready tbody tr{animation:rowin .2s var(--ease) both}}
@keyframes rowin{from{opacity:0}}
.js #list:not(.ready) tbody tr:nth-child(n+13){display:none}
@media (max-width:640px){.js #list:not(.ready) tbody tr:nth-child(n+7){display:none}}
.act{text-align:right;white-space:nowrap}
.act .more{margin-inline:.5rem}
#more{margin-top:1.5rem}
/* Nothing found: say so, offer the phone and mail, and a way back to the full list. */
.empty{margin:0 0 1rem;padding:1.5rem;background:#fff;border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:0 0 4px 4px}
.empty p{max-width:34em;margin-bottom:1rem}
.empty[hidden],.tablewrap[hidden]{display:none}
@media (max-width:760px){.filters{grid-template-columns:minmax(0,1fr)}}
@container list (max-width:40em){
  thead{display:none}
  table,tbody,tr,th,td{display:block}
  tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr));gap:.25rem 1rem;padding:1rem;border-bottom:1px solid var(--line)}
  tbody th{grid-column:1/-1;padding:0;border:0;font-size:var(--fs-m)}
  tbody td{padding:0;border:0;white-space:normal}
  tbody td::before{content:attr(data-l);display:block;font-size:var(--fs-s);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
  tbody th{order:-2}
  .impa{order:-1}
  .act{grid-column:auto;align-self:end;text-align:left}
  .act .more{margin-inline:0}
}

/* Factory: the black of their lorry; the casting moment */
.dark{background:var(--tarp);color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.cast-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6.2vw,5.5rem);align-items:center}
.points{margin:2rem 0 0;display:grid;gap:0}
.points div{display:block;padding:1rem 0;border-top:1px solid #3B3A3A}
.points dt{font-weight:700;color:var(--blue);margin-bottom:.25rem}
.points dd{margin:0;color:var(--on-dark);font-weight:400;text-align:left}
.cast{margin:0}
.cast-svg{width:100%;height:auto;overflow:visible}
.cast .metal{fill:#5F676D}
.cast .mould path{fill:none;stroke:var(--blue);stroke-width:1.1;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.cast .stamp{opacity:var(--stamp,1)}
.cast .stamp path{fill:#D9DDE0}
.cast figcaption{margin-top:1rem;color:var(--on-dark-2);font-size:var(--fs-s)}
@media (max-width:900px){.cast .mould path{stroke-width:1.6}}
.factory-photos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;margin-top:clamp(3rem,6vw,4.5rem);align-items:start}
.dark .photo figcaption{color:var(--on-dark-2)}
.factory-photos img,.stack .photo:not(.cast-mark) img{aspect-ratio:3/2;object-fit:cover}
@media (max-width:900px){.cast-grid,.factory-photos{grid-template-columns:minmax(0,1fr)}}

/* Stock and delivery */
.service{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.75rem}
.stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:560px){.stack{grid-template-columns:minmax(0,1fr)}}
.pack{background:var(--soft);border-radius:4px}
.pack img{width:100%;aspect-ratio:3/2;object-fit:contain;padding:1.5rem;mix-blend-mode:multiply;border-radius:0}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,38rem);gap:clamp(2.5rem,6vw,5rem);align-items:start}
.about-grid h2{margin-top:-.4rem}
.portrait{margin:0}
.portrait img{width:100%;border-radius:4px}
.portrait figcaption{margin-top:.75rem;font-size:var(--fs-s);color:var(--muted)}
.about p a{white-space:nowrap}
.big{font:400 var(--fs-l)/1.5 var(--f);color:var(--ink);max-width:30em;padding-left:1.25rem;border-left:4px solid var(--blue)}
/* On a phone the portrait keeps a size its source carries (380 px), beside its caption. */
@media (max-width:800px){.about-grid{grid-template-columns:minmax(0,1fr)}.portrait{display:grid;grid-template-columns:min(10rem,40%) minmax(0,1fr);gap:1rem;align-items:end}.portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}.portrait figcaption{margin:0}}

/* Contact */
.phone{margin:1.5rem 0 .25rem;font:700 var(--fs-h2)/1.1 var(--f);letter-spacing:-.01em}
/* An underline, not a bottom border: a border sits below the room kept for descenders, which digits never use. */
.phone a,.mail a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:3px;text-underline-offset:.12em}
.phone a:hover,.mail a:hover{color:var(--ink);text-decoration-color:var(--ink);text-decoration-thickness:3px}
.mail{font-size:var(--fs-l);font-weight:600;overflow-wrap:anywhere}
address{font-style:normal;margin-top:1.5rem;line-height:1.7}
dl{margin:0}
dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem;padding:.5rem 0;border-top:1px solid var(--line)}
dd{margin:0;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.building{align-self:center}
.building img{aspect-ratio:3/2;object-fit:cover}

/* Footer: their lorry's tarp, then the details */
.foot{background:var(--tarp);color:var(--on-dark);font-size:var(--fs-b)}
.tarp{background:var(--tarp);border-top:4px solid var(--blue);border-bottom:1px solid #444;padding-block:clamp(2rem,5vw,3.25rem) 0;overflow:hidden}
.tarp .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 2.5rem;padding-bottom:clamp(2rem,5vw,3.25rem)}
.tarp .logo-svg{height:clamp(4.5rem,3.5rem + 2.5vw,6rem)}
.tarp .logo-svg>path{fill:#fff;stroke:var(--tarp);stroke-width:70;paint-order:stroke;stroke-linejoin:round}
.tarp-sub{margin:0 0 .5rem;font:600 var(--fs-xl)/1.1 var(--f);color:var(--on-dark)}
.foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem;padding-block:clamp(3rem,6vw,4.5rem)}
.foot h2{font:700 var(--fs-s) var(--f);letter-spacing:.08em;text-transform:uppercase;color:#fff;padding-bottom:.75rem;border-bottom:1px solid #444;margin-bottom:1rem}
.foot a{overflow-wrap:anywhere;color:#fff;text-decoration:none;border-bottom:1px solid #6E7479;display:inline-block;padding-block:.25rem}
.foot a:hover{border-color:var(--blue);box-shadow:0 1px 0 var(--blue);color:#fff}
.foot .to{font-weight:400;gap:0;border-bottom-width:1px;border-color:#6E7479}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.foot dl div{border-color:#444;flex-direction:column;gap:0}
.foot dl div:first-child{border-top:0;padding-top:0}
.foot dt{color:var(--on-dark)}.foot dd{color:#fff;text-align:left}
.base{background:#161515;font-size:var(--fs-s);color:var(--on-dark-2)}
.base .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;padding-block:1rem}
.base p{margin:0}
@media (max-width:900px){.foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 1.5rem}.foot .cols>:nth-child(-n+2){grid-column:1/-1}.tarp-sub{display:none}}
@media (max-width:359px){.foot .cols{grid-template-columns:minmax(0,1fr)}}
.lost{padding-block:clamp(4rem,12vw,9rem)}.lost .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6.2vw,5.5rem);align-items:center}.lost h1{max-width:11em}.draw.lost-draw{width:100%;height:16rem;margin:0;color:var(--grey)}
@media (max-width:760px){.lost .wrap{grid-template-columns:minmax(0,1fr)}.draw.lost-draw{height:8rem}}.lost .fine{margin-top:2rem}
@media print{.util,.head,.menu,.filters,#more,.act,.tarp{display:none}}