/*
Theme Name: Metallico
Theme URI: https://metallicoltd.com
Author: Metallico Ltd
Description: Custom theme for Metallico Ltd, structural steel fabricators in Leyton, London E10. Activating it creates the Home, Services, Projects, Explore, About us, Quality and Contact pages, adds the starter projects, and imports the photos from the old site.
Version: 1.17.10
Requires at least: 6.2
Requires PHP: 7.4
License: Proprietary
Text Domain: metallico
*/
:root{
  --charcoal:#4f4c4d; --blue:#86a5c1; --blue-deep:#7792b1; --paper:#ffffff;
  --surface:#ffffff; --surface-alt:#f1f1f1; --ink:#4f4c4d; --ink-muted:#6b6869;
  --link:#4b6b8c; --hairline:#e3e3e3; --band:#4f4c4d; --band-ink:#ffffff; --band-muted:#d2d0d1;
  --profile:#4f4c4d; --bar:#6f8fae; --star:#4b6b8c;
  --f-display:Futura,"Futura PT",Jost,"Century Gothic",sans-serif;
  --f-text:Helvetica,"Helvetica Neue",Arial,sans-serif;
  --f-strap:"Gill Sans","Gill Sans MT",Calibri,sans-serif;
  --s3:16px; --s4:24px; --s5:40px; --s6:64px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --surface:#3d3b3c; --surface-alt:#353334; --ink:#ffffff; --ink-muted:#d2d0d1;
  --link:#b4c8da; --hairline:#5d5a5b; --band:#2f2d2e; --profile:#d2d0d1; --bar:#86a5c1; --star:#b4c8da; color-scheme:dark}}
:root[data-theme="dark"]{
  --surface:#3d3b3c; --surface-alt:#353334; --ink:#ffffff; --ink-muted:#d2d0d1;
  --link:#b4c8da; --hairline:#5d5a5b; --band:#2f2d2e; --profile:#d2d0d1; --bar:#86a5c1; --star:#b4c8da; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--surface);color:var(--ink);font:15px/1.6 var(--f-text);margin:0}
a{color:var(--link)}
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:max(16px,4vw)}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(26px,3.4vw,34px);line-height:1.15}
h3{font-size:20px;line-height:1.25}
p{margin:0}
.label{font-family:var(--f-display);font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--ink-muted)}
.bar{display:block;width:44px;height:3px;background:var(--blue)}

/* header */
.site-head{background:var(--band);color:var(--band-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:5;border-bottom:1px solid rgba(255,255,255,.08)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-block:12px}
.site-head img{width:200px;height:auto;display:block}
nav{display:flex;gap:6px 22px;flex-wrap:wrap}
nav a{color:var(--band-ink);text-decoration:none;font-family:var(--f-display);font-size:14px;letter-spacing:.06em;padding-block:4px;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--blue)}

/* hero */
.hero{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-6%;bottom:-8%;transform:translate3d(0,var(--py,0px),0) scale(var(--pz,1));transform-origin:right bottom;width:min(980px,92%);aspect-ratio:2400/1406;background:url(assets/img/frame-white.webp) no-repeat right bottom/contain;opacity:.16;pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-block:var(--s6) calc(var(--s6) + 24px);display:grid;gap:var(--s4)}
.hero .label{color:var(--band-muted)}
.hero h1{font-size:clamp(34px,5.6vw,60px);line-height:1.05;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lead{font-size:17px;max-width:52ch;color:var(--band-muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15px var(--f-display);letter-spacing:.04em;padding:12px 20px;border-radius:2px;text-decoration:none;border:1px solid var(--blue);cursor:pointer}
.btn.solid{background:var(--blue);color:#242223}
.btn.ghost{background:transparent;color:var(--band-ink)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14)}
.facts div{display:grid;gap:2px}
.facts b{font:500 26px var(--f-display);font-variant-numeric:tabular-nums}
.facts span{font-size:13px;color:var(--band-muted)}

/* sections */
section.block{padding-block:var(--s6)}
section.alt{background:var(--surface-alt)}
.sec-head{display:grid;gap:12px;margin-bottom:var(--s5);max-width:62ch}
.sec-head p{color:var(--ink-muted)}

.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.svc{display:grid;gap:10px;align-content:start;padding-top:var(--s3);border-top:1px solid var(--hairline)}
.svc .bar{margin-bottom:4px}
.svc p{color:var(--ink-muted)}

.make{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4)}
.tile{background:var(--surface);border:1px solid var(--hairline);border-radius:4px;padding:var(--s4) var(--s3) var(--s3);display:grid;gap:10px;align-content:start;min-width:0}
.tile svg{width:64px;height:64px;color:var(--profile)}
.tile .sec{font-family:var(--f-display);font-size:12px;letter-spacing:.14em;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.tile p{color:var(--ink-muted);font-size:14px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4) var(--s4);counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding-top:14px;border-top:3px solid var(--blue)}
.steps li::before{content:"Step " counter(s);font-family:var(--f-display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
.steps p{color:var(--ink-muted);font-size:14px}

.quals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.qual-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.qual-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s3);padding-block:14px;border-bottom:1px solid var(--hairline)}
.qual-list b{font-family:var(--f-display);font-weight:500}
.qual-list span{color:var(--ink-muted)}
.strap{font:italic 22px/1.3 var(--f-strap);color:var(--link);margin-top:var(--s4)}

.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5)}
.cbox{display:grid;gap:18px;align-content:start}
.crow{display:grid;gap:2px}
.crow .val{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:18px;font-family:var(--f-display);user-select:all}
.copy{font:13px var(--f-text);background:transparent;border:1px solid var(--hairline);color:var(--ink-muted);border-radius:2px;padding:3px 9px;cursor:pointer;user-select:none}
.map{border:1px solid var(--hairline);border-radius:4px;padding:var(--s4);display:grid;gap:10px;align-content:start;background:var(--surface-alt)}
.map p{color:var(--ink-muted)}

/* footer */
footer{background:var(--band);color:var(--band-muted);position:relative;overflow:hidden;font-size:13px}
footer .wrap{padding-block:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;align-items:flex-end}
footer img{width:170px;display:block;margin-bottom:10px}


.small-note{font-size:13px;color:var(--ink-muted)}
.cov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s5);align-items:start}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.rev{margin:0;background:var(--surface);border:1px solid var(--hairline);border-radius:4px;padding:var(--s4);display:grid;gap:12px;align-content:start}
.rev .stars{color:var(--star);letter-spacing:2px;font-size:15px}
.rev p{font-size:16px;line-height:1.5}
.rev .who{font-size:13px;color:var(--ink-muted)}
@media (max-width:1000px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr))}.cov{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.reviews{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1000px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li:last-child{grid-column:1/-1}}
@media (max-width:760px){.services,.steps{grid-template-columns:minmax(0,1fr)}.steps li:last-child{grid-column:auto}
  .quals,.contact{grid-template-columns:minmax(0,1fr)}
  .qual-list li{grid-template-columns:minmax(0,1fr);gap:2px}
  .site-head img{width:160px}
  .hero::after{width:140%;right:-30%;opacity:.12}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead{animation:rise .6s ease-out both}
  .hero .lead{animation-delay:.08s}
  @keyframes rise{from{transform:translateY(10px)}to{transform:none}}
}

/* ---------- WordPress additions ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:99;background:var(--surface);color:var(--ink);padding:8px 12px;clip:auto;width:auto;height:auto}
img{max-width:100%;height:auto}
.site-head .menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--band-ink);font:500 14px var(--f-display);letter-spacing:.06em;padding:6px 12px;border-radius:2px;cursor:pointer}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 22px;flex-wrap:wrap}
nav .current-menu-item>a,nav a[aria-current="page"]{border-color:var(--blue)}
.head-phone{color:var(--band-ink);text-decoration:none;font:500 15px var(--f-display);letter-spacing:.04em;white-space:nowrap}
@media (max-width:860px){
  .site-head .menu-toggle{display:inline-block}
  .site-head nav{display:none;width:100%}
  .site-head.open nav{display:block}
  .site-head nav ul{flex-direction:column;gap:0;padding-bottom:8px}
  .site-head nav a{display:block;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .head-phone{display:none}
}
.page-hero{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.page-hero::after{content:"";transform:translate3d(0,var(--py,0px),0);position:absolute;right:-8%;bottom:-30%;width:min(720px,80%);aspect-ratio:2400/1406;background:url(assets/img/frame-white.webp) no-repeat right bottom/contain;opacity:.12;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;padding-block:var(--s5) var(--s5);display:grid;gap:12px}
.page-hero .label{color:var(--band-muted)}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;max-width:22ch}
.page-hero p{color:var(--band-muted);max-width:60ch;font-size:16px}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.filters button{font:500 13px var(--f-display);letter-spacing:.06em;background:transparent;border:1px solid var(--hairline);color:var(--ink);padding:7px 14px;border-radius:2px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.proj{background:var(--surface);border:1px solid var(--hairline);border-radius:4px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;min-width:0}
.proj .ph{display:block;aspect-ratio:4/3;background:var(--surface-alt);overflow:hidden;position:relative}
.proj .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.proj:hover .ph img{transform:scale(1.03)}
.proj .ph .count{position:absolute;right:8px;bottom:8px;background:rgba(36,34,35,.78);color:#fff;font-size:12px;padding:3px 8px;border-radius:2px}
.proj .body{padding:var(--s3) var(--s3) var(--s4);display:grid;gap:8px;align-content:start}
.proj .meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--f-display);color:var(--ink-muted)}
.proj .meta .loc::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:1px}
.proj h3{font-size:19px}
.proj p{color:var(--ink-muted);font-size:14px}
.proj a.more{font-size:14px}
.proj.placeholder .ph{display:grid;place-items:center}
.proj.placeholder svg{width:72px;height:72px;color:var(--profile);opacity:.7}
@media (max-width:1000px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.projects{grid-template-columns:minmax(0,1fr)}}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.gallery a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--surface-alt)}
.gallery img{width:100%;height:100%;object-fit:cover}
.proj-facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-bottom:var(--s4)}
.proj-facts div{display:grid;gap:2px}
.proj-facts b{font:500 18px var(--f-display)}
.proj-facts span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.lightbox{position:fixed;inset:0;background:rgba(20,19,19,.92);display:none;align-items:center;justify-content:center;z-index:50;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-height:90vh;max-width:94vw;width:auto;border-radius:2px}
.lightbox button{position:absolute;top:14px;right:16px;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;font:500 14px var(--f-display);padding:6px 12px;border-radius:2px;cursor:pointer}

/* content pages */
.prose{max-width:70ch;display:grid;gap:16px}
.prose h2{margin-top:var(--s4)}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.photo-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:var(--s5)}
.photo-strip img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:4px}
@media (max-width:760px){.photo-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cert{border:1px solid var(--hairline);border-radius:4px;padding:var(--s4);display:grid;gap:10px;background:var(--surface)}
.cert dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:14px}
.cert dt{color:var(--ink-muted)}
.cert dd{margin:0}

/* contact: how to get a price */
.howto{display:grid;gap:14px;align-content:start}
.howto h2{margin:0}
.howto-steps{margin:0;padding-left:1.3em;display:grid;gap:10px;max-width:60ch}
.howto .cta{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.howto .small{font-size:13px;color:var(--ink-muted);margin:0}
.notice{padding:12px 16px;border-radius:2px;border-left:3px solid var(--blue);background:var(--surface-alt);margin-bottom:var(--s4)}
.notice.err{border-color:#b5523b}
.section-cta{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}

.entry .wp-block-gallery{margin:var(--s4) 0 0}
.entry .wp-block-gallery figcaption{font-size:13px}
.entry p{max-width:70ch}

.iso-foot{text-align:center;font-size:12px}
.iso-foot img{display:inline-block;width:200px;height:auto;margin:0 0 6px}
.iso-foot p{margin:0}.iso-foot a{color:var(--band-muted)}

.cert-logo{margin:8px 0 0;text-align:center}
.cert-logo img{width:260px;max-width:100%;height:auto;display:inline-block}
.cert-logo figcaption{font-size:14px;margin-top:4px}
.iso-foot{display:grid;justify-items:center;gap:4px}
.iso-foot img.isoqar{width:200px;height:auto;margin:0}
.iso-foot p{margin:0 0 10px}
/* 3D model views from our drawings: show the whole model, never crop */
.proj .ph img[src*="-3d"],.gallery img[src*="-3d"],.entry img[src*="-3d"]{object-fit:contain;background:#fff;padding:6px}

/* 1.3.0: registered-office small print, project at-a-glance facts, section headings */
footer .legal{font-size:11px;line-height:1.5;opacity:.7;margin:12px 0 0;max-width:42ch}
.entry .glance{display:flex;flex-wrap:wrap;gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin:0 0 var(--s5)}
.entry .glance div{flex:1 1 170px;background:var(--surface-alt);padding:14px 16px}
.entry .glance dt{font:500 11px/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 4px}
.entry .glance dd{margin:0;font-size:15px;line-height:1.4;color:var(--ink)}
.entry h2{margin:var(--s5) 0 10px}
.entry h2:first-of-type{margin-top:0}

/* 1.4.0: sites with several packages */
.entry .subs-nav{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding-block:var(--s3);margin:0 0 var(--s5)}
.entry .subs-nav .label{display:block;margin:0 0 10px}
.entry .subs-nav ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px var(--s4);counter-reset:pk}
.entry .subs-nav li{counter-increment:pk;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline}
.entry .subs-nav li::before{content:counter(pk);font:500 12px var(--f-display);color:var(--ink-muted);grid-row:span 2}
.entry .subs-nav a{font-weight:600;color:var(--link)}
.entry .subs-nav span{font-size:13px;color:var(--ink-muted)}
.entry .sub-head{margin:var(--s5) 0 var(--s3);padding-top:var(--s4);border-top:2px solid var(--ink);scroll-margin-top:90px}
.entry .sub-head h2{margin:0}
.entry .sub-head p{margin:6px 0 0;font-size:14px;color:var(--ink-muted)}
.entry .glance.sm{margin-bottom:var(--s4)}
.entry .glance.sm dd{font-size:14px}

/* 1.5.0: projects split by photos / drawings; 3D drawings never cropped */
.proj-group+.proj-group{margin-top:var(--s6)}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s3);margin:0 0 var(--s4);padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.group-head h2{margin:0;font-size:24px}
.group-head p{margin:0;color:var(--ink-muted);font-size:14px}
.entry .wp-block-gallery.has-nested-images figure.wp-block-image img[src*="-3d"],.entry figure.wp-block-image img[src*="-3d"]{object-fit:contain!important;background:#fff;padding:6px}

/* fleet photos on Services */
.fleet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.fleet figure{margin:0;display:grid;gap:10px;align-content:start}
.fleet img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;display:block}
.fleet figcaption{font-size:14px;color:var(--ink-muted);display:grid;gap:2px}
.fleet figcaption strong{color:var(--ink);font-family:var(--f-display);font-weight:500;font-size:16px}
@media (max-width:800px){.fleet{grid-template-columns:minmax(0,1fr)}}

/* What we make: product tiles with example drawings */
.tile img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:3px;border:1px solid var(--hairline);padding:6px;display:block}

/* 1.6.0: Explore page (tabs + embedded tools) */
.wrap.wide{max-width:1400px}
section.explore{padding-top:var(--s5)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hairline);margin-bottom:var(--s4);overflow-x:auto;scrollbar-width:none}
.tabs[hidden]{display:none}
.tabs [role="tab"]{flex:0 0 auto;font:500 15px var(--f-display);letter-spacing:.04em;color:var(--ink-muted);background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 18px;cursor:pointer}
.tabs [role="tab"]:hover{color:var(--ink)}
.tabs [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.tabs [role="tab"]:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.tab-panel:focus-visible{outline:2px solid var(--link);outline-offset:4px}
.tab-panel+.tab-panel{margin-top:var(--s5)}
.tabs:not([hidden])~.tab-panel+.tab-panel{margin-top:0}
.embed{display:block;width:100%;border:1px solid var(--hairline);border-radius:6px;background:#fff}
.embed-showcase{height:820px}
.embed-sections{height:1100px}
@media (max-width:700px){.embed-showcase{height:1250px}}
.explore-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline)}
.explore-cta p{font:500 18px/1.35 var(--f-display);max-width:46ch}

/* 1.6.0: Explore teaser band (Home, Services) */
.teaser-sec{padding-top:0}
.teaser{background:var(--band);color:var(--band-ink);border-radius:6px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5);align-items:center;padding:var(--s4) var(--s5);margin-top:var(--s5)}
.teaser-sec .teaser{margin-top:0}
.teaser::after{content:"";transform:translate3d(0,var(--py,0px),0);position:absolute;left:-12%;bottom:-30%;width:min(640px,80%);aspect-ratio:2400/1406;background:url(assets/img/frame-white.webp) no-repeat left bottom/contain;opacity:.1;pointer-events:none}
.teaser-text{position:relative;z-index:1;display:grid;gap:12px;align-content:start}
.teaser .label{color:var(--band-muted)}
.teaser p{color:var(--band-muted);max-width:44ch}
.teaser-img{position:relative;z-index:1;display:block;background:#fff;border-radius:4px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.teaser-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}
@media (max-width:860px){.teaser{grid-template-columns:minmax(0,1fr);padding:var(--s4) var(--s3);gap:var(--s4)}}

/* intro: home page, once per session (inc/intro.php + assets/js/intro.js). The logo is the header file, unaltered. */
.intro{display:none}
html.mc-intro .intro,.intro.is-on{display:block;position:fixed;inset:0;z-index:90;background:var(--band);color:#fff;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.intro-frame{position:absolute;left:50%;top:50%;width:min(96vw,136vh);aspect-ratio:1200/703;transform:translate(-50%,-50%);transform-origin:0 0;opacity:.9}
.intro-svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:62% 62%}
.intro-svg path,.intro-svg circle{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:butt;stroke-dasharray:1 2;stroke-dashoffset:1}
.intro-svg .f-dim path,.intro-svg .f-dim circle{stroke-width:.8}
.intro-svg text{fill:currentColor;font:500 12px var(--f-display);letter-spacing:.04em;text-anchor:middle}
.intro-svg .f-txt{opacity:0}
.intro-logo{position:absolute;left:50%;top:50%;width:min(440px,72vw);height:auto;transform:translate(-50%,-50%);transform-origin:0 0;opacity:0;max-width:none}
.intro-skip{position:absolute;right:max(16px,4vw);bottom:calc(20px + env(safe-area-inset-bottom,0px));font:500 13px var(--f-display);letter-spacing:.08em;color:var(--band-ink);background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);border-radius:2px;padding:8px 14px;cursor:pointer;opacity:0}
.intro-skip:focus-visible{outline:2px solid var(--blue);outline-offset:2px;opacity:1}
html.mc-intro .hero h1,html.mc-intro .hero .lead{animation:none}

/* 1.6.0: home page (services link, compact quality strip) */
.more-link{margin-top:var(--s4);color:var(--ink-muted)}
.more-link a{font-weight:600}
.quals.compact{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.quals.compact .sec-head{margin-bottom:0}
.quals.compact .qual-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);border-top:1px solid var(--hairline);padding-top:var(--s3)}
.quals.compact .qual-list li{grid-template-columns:minmax(0,1fr);gap:4px;padding:0;border:0}
.quals.compact .qual-list span{font-size:13px;line-height:1.45}
@media (max-width:1000px){.quals.compact .qual-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.quals.compact .qual-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 1.6.0: About page */
.about-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s4);align-self:center}
.about-stats li{display:grid;gap:2px;padding-top:var(--s3);border-top:3px solid var(--blue)}
.about-stats b{font:500 clamp(26px,3vw,34px)/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.about-stats span{font-size:14px;color:var(--ink-muted)}
.stations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s4);counter-reset:st}
.stations li{counter-increment:st;display:grid;gap:8px;align-content:start}
.stations img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;margin-bottom:6px;background:var(--surface-alt)}
.stations img[src*="-3d"]{object-fit:contain;background:#fff;border:1px solid var(--hairline);padding:6px}
.stations h3::before{content:counter(st,decimal-leading-zero);display:block;font:500 12px var(--f-display);letter-spacing:.2em;color:var(--ink-muted);margin-bottom:4px}
.stations p{color:var(--ink-muted);font-size:14px}
@media (max-width:900px){.stations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stations{grid-template-columns:minmax(0,1fr)}}
#fleet,#workshop,#visit{scroll-margin-top:96px}
#fleet .fleet{margin-top:0}
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s5);align-items:start}
.visit-list{margin:0;display:grid}
.visit-list div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--s3);padding-block:12px;border-bottom:1px solid var(--hairline)}
.visit-list dt{font:500 12px/1.9 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.visit-list dd{margin:0}
@media (max-width:760px){.visit{grid-template-columns:minmax(0,1fr)}.visit-list div{grid-template-columns:minmax(0,1fr);gap:2px}}
@media (min-width:861px) and (max-width:1100px){nav ul{gap:6px 16px}}

/* 1.7.0: About page, six-step process animation (assets/process/embed.html). The iframe reports its own height. */
.embed-process{height:min(62vw,760px);min-height:300px;background:#4f4c4d;border:0}
@media (max-width:700px){.embed-process{height:560px}}
.process-fallback{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);counter-reset:pf}
.process-fallback li{counter-increment:pf;display:grid;gap:6px;align-content:start;padding-top:var(--s3);border-top:3px solid var(--blue)}
.process-fallback h3::before{content:counter(pf,decimal-leading-zero);display:block;font:500 12px var(--f-display);letter-spacing:.2em;color:var(--ink-muted);margin-bottom:4px}
.process-fallback p{color:var(--ink-muted);font-size:14px}
@media (max-width:700px){.process-fallback{grid-template-columns:minmax(0,1fr)}}

/* 1.8.0: delivery heat map (replaces the postcode bar chart) */
.heat{margin:0}
.heat img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--hairline);background:var(--surface)}
.heat-ph{aspect-ratio:4/3;display:grid;place-items:center;border:1px dashed var(--hairline);border-radius:6px;color:var(--ink-muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* 1.8.0: Google reviews: list without JS, carousel with it */
.rev-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.rev-slide{display:flex;min-width:0}
.rev-slide .rev{width:100%}
.rev .stars{display:flex;gap:3px;color:var(--star);letter-spacing:0}
.rev .stars svg{width:16px;height:16px;fill:currentColor;display:block}
.rev .who{font-size:13px;color:var(--ink-muted)}
.rev .who cite{font-style:normal;font-weight:600;color:var(--ink)}
.revs.is-carousel{--per:1;overflow:hidden;touch-action:pan-y}
@media (min-width:760px){.revs.is-carousel{--per:2}}
@media (min-width:1100px){.revs.is-carousel.many{--per:3}}
.is-carousel .rev-track{display:flex;gap:0;margin:0 -12px;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.is-carousel .rev-slide{flex:0 0 calc(100% / var(--per));padding:0 12px;transition:opacity .5s ease}
.is-carousel .rev-slide[aria-hidden="true"]{opacity:.35}
.rev-ctrl{display:flex;align-items:center;gap:10px;margin-top:var(--s4);flex-wrap:wrap}
.rev-btn,.rev-pause{font:500 14px var(--f-display);letter-spacing:.04em;color:var(--ink);background:transparent;border:1px solid var(--hairline);border-radius:2px;min-width:44px;height:40px;padding:0 12px;cursor:pointer}
.rev-btn:hover,.rev-pause:hover{border-color:var(--blue)}
.rev-pause{margin-left:auto;font-size:13px;color:var(--ink-muted)}
.rev-dots{display:flex;gap:2px}
.rev-dot{width:28px;height:40px;border:0;background:transparent;cursor:pointer;position:relative;padding:0}
.rev-dot::after{content:"";position:absolute;left:6px;right:6px;top:19px;height:3px;border-radius:2px;background:var(--hairline);transition:background .3s}
.rev-dot[aria-current="true"]::after{background:var(--blue)}
@media (prefers-reduced-motion:reduce){.is-carousel .rev-track,.is-carousel .rev-slide{transition:none}}

/* 1.8.0: two routes under the home hero */
.routes{position:relative;z-index:2;margin-top:-32px}
.routes .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.route{display:grid;gap:4px;align-content:start;background:var(--surface);color:var(--ink);text-decoration:none;border:1px solid var(--hairline);border-left:3px solid var(--blue);border-radius:4px;padding:var(--s3) var(--s4);box-shadow:0 10px 28px rgba(0,0,0,.10);transition:transform .2s ease,box-shadow .2s ease}
.route:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.14)}
.route .label{font-size:11px}
.route strong{font:500 20px/1.25 var(--f-display)}
.route span{color:var(--ink-muted);font-size:14px}
.route .go{color:var(--link);font-weight:600;margin-top:4px}
@media (max-width:700px){.routes .wrap{grid-template-columns:minmax(0,1fr);gap:12px}.route{padding:14px 16px}}

/* 1.8.0: FAQ (native details) */
.faq{display:grid;border-top:1px solid var(--hairline);max-width:780px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 0;font:500 17px/1.35 var(--f-display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.faq details p{padding:0 0 18px;color:var(--ink-muted);max-width:65ch}

/* 1.8.0: quote form file field */
.qform .file-drop{border:1.5px dashed var(--blue);border-radius:4px;padding:14px 16px;background:var(--surface-alt);gap:2px}
.qform .file-title{font:500 16px var(--f-display);color:var(--ink)}
.qform .file-hint{font-size:13px}
.qform .file-drop input{border:0;padding:8px 0 0;background:transparent}

/* 1.8.0: mobile action bar (phones only, shown by theme.js once past the hero) */
.mbar{display:none}
@media (max-width:860px){
  .has-mbar > footer{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .has-mbar .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--band);border-top:1px solid rgba(255,255,255,.12);transform:translate3d(0,110%,0);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
  .has-mbar .mbar.on{transform:none;visibility:visible;transition:transform .3s ease}
  .mbar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:2px;font:500 15px var(--f-display);letter-spacing:.03em;text-decoration:none;white-space:nowrap}
  .mbar-call{color:var(--band-ink);border:1px solid rgba(255,255,255,.35)}
  .mbar-send{background:var(--blue);color:#242223}
}

/* motion (1.8.0): theme.js adds .mo only with JavaScript and without reduced motion; nothing on screen at load is hidden */
.sec-head::before{content:"";display:block;width:44px;height:2px;background:var(--blue);transform-origin:left center}
.mo .rv-up{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms)}
.mo .rv-up:not(.in){opacity:0;transform:translate3d(0,16px,0)}
.mo .rv-head::before{transition:transform .6s cubic-bezier(.65,0,.25,1) .1s}
.mo .rv-head>*{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.mo .rv-head>.label{transition-delay:0s}
.mo .rv-head>h2{transition-delay:.3s}
.mo .rv-head>p{transition-delay:.4s}
.mo .rv-head:not(.in)::before{transform:scaleX(0)}
.mo .rv-head:not(.in)>*{opacity:0;transform:translate3d(0,16px,0)}
.mo .rv-head:not(.in)>.label{transform:none}
.mo .rv-wipe{transition:clip-path 1s cubic-bezier(.65,0,.25,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mo .rv-wipe:not(.in){clip-path:inset(0 100% 0 0);transform:scale(1.04)}
.mo .rv-wipe.in{clip-path:inset(0 0 0 0)}
@keyframes mc-bd-in{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .hero::after,.page-hero::after{animation:mc-bd-in 1.6s ease-out both}
  html.mc-intro-ran .hero::after{animation:none}
  .mo .teaser.rv-up::after{transition:opacity 1.2s ease .3s}
  .mo .teaser.rv-up:not(.in)::after{opacity:0}
  @supports (interpolate-size:allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
  /* page-to-page: cross-document view transitions; the header stays put, the page fades and lifts */
  @view-transition{navigation:auto}
  .site-head{view-transition-name:site-head}
  main{view-transition-name:main}
  ::view-transition-group(site-head){animation:none}
  ::view-transition-old(site-head){animation:none;opacity:0}
  ::view-transition-new(site-head){animation:none}
  ::view-transition-old(main){animation:mc-vt-out .16s ease-in both}
  ::view-transition-new(main){animation:mc-vt-in .34s cubic-bezier(.2,.7,.2,1) both}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}
@keyframes mc-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes mc-vt-in{from{opacity:0;transform:translateY(12px)}}

/* 1.9.0: charcoal "Send us your drawings" band, like the hero */
.cta-band{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-6%;bottom:-45%;width:min(760px,70%);aspect-ratio:2400/1406;background:url(assets/img/frame-white.webp) no-repeat right bottom/contain;opacity:.1;pointer-events:none;transform:translate3d(0,var(--py,0px),0)}
.cta-band .wrap{position:relative;z-index:1}
.cta-band .section-cta{margin-top:0}
.cta-band .label,.cta-band .sec-head p{color:var(--band-muted)}
.cta-band .btn.ghost{color:var(--band-ink)}
.cta-band a:focus-visible{outline-color:var(--blue)}
footer{border-top:1px solid rgba(255,255,255,.1)}
.mo .rv-band::after{transition:opacity 1.2s ease .2s}
.mo .rv-band:not(.in)::after{opacity:0}

/* 1.9.0: Explore teaser with the 3D tour preview video; teaser first on Services */
.teaser-top .teaser{margin-top:0}
.teaser-video{position:relative;padding:0;overflow:hidden;background:#fff;border-radius:4px}
.teaser-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#fff}
.play-badge{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(36,34,35,.85);color:#fff;font:500 12px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border-radius:2px;transition:background .2s ease,color .2s ease}
.teaser-video:hover .play-badge,.teaser-video:focus-visible .play-badge{background:var(--blue);color:#242223}
.teaser-video:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* 1.9.0: interactive delivery map (assets/coverage/embed.html, light theme only, so it sits on a white card in dark mode too) */
/* Starting height sits just under the map's content height: the embed reports its document height, which can grow the frame but never shrink it. */
.embed-coverage{height:480px;color-scheme:light;background:#fff}
@media (max-width:700px){.embed-coverage{height:520px}}

/* 1.9.0: reviews (16): counter instead of dots when there are many pages; link to Google */
.rev-count{font:500 14px var(--f-display);color:var(--ink-muted);font-variant-numeric:tabular-nums;min-width:4.5em;text-align:center;display:inline-block;line-height:40px}
.rev-more{margin-top:var(--s3);font-size:14px}
.rev-more a{font-weight:600}
.heat:has(> .embed-coverage){background:#fff;border:1px solid var(--hairline);border-radius:6px;padding:12px}
.heat .embed-coverage{border:0;border-radius:0}
@media (max-width:700px){.heat:has(> .embed-coverage){padding:8px}}

/* 1.10.0: Home in the menu; Explore head on Home */
.sec-head+.teaser{margin-top:0}
@media (min-width:861px) and (max-width:1180px){nav ul{gap:6px 14px}nav a{letter-spacing:.03em}.head-phone{font-size:14px}}

/* sheet (1.10.0): drawing-sheet scroll choreography. theme.js injects the spine, marks and tags, so without JS there is nothing. */
main>section{scroll-margin-top:var(--head-h,82px)}
main>section:not(.hero):not(.page-hero),main>section>.wrap{position:relative}
main>section>.wrap{transform-origin:50% 100%}
.draft{position:absolute;left:0;right:0;top:0;height:1px;overflow:hidden;pointer-events:none}
.dl{position:absolute;inset:0;background:var(--blue);opacity:.35;transform-origin:left}
.cm{position:absolute;inset:-14px calc(max(16px,4vw) - 14px);pointer-events:none}
.cm i{position:absolute;width:12px;height:12px;border:0 solid var(--blue);opacity:.6}
.cm i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px;transform-origin:0 0}
.cm i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0;transform-origin:100% 0}
.cm i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px;transform-origin:0 100%}
.cm i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0;transform-origin:100% 100%}
.cm b{position:absolute;left:14px;top:-24px;font:500 11px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--link);opacity:.75;white-space:nowrap}
.cta-band .dl,.cta-band .cm i{background-color:transparent;border-color:rgba(255,255,255,.45)}
.cta-band .dl{background:rgba(255,255,255,.5)}
.cta-band .cm b{color:var(--band-muted)}
.mo .sheet-pre .dl{transform:scaleX(0);opacity:1}
.mo .sheet-pre .cm i{transform:scale(0)}
.mo .sheet-pre .cm b{clip-path:inset(0 100% 0 0)}
.mo .drafted .dl{animation:mc-dl 1.1s cubic-bezier(.2,.7,.2,1) both}
.mo .drafted .cm i{transform:scale(1);transition:transform .45s cubic-bezier(.2,.7,.2,1) .35s}
.mo .drafted .cm b{clip-path:inset(0 0 0 0);transition:clip-path .45s steps(13) .2s}
@keyframes mc-dl{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.35}}
.mo .drafting .rv-up{transition-delay:calc(var(--rv-d,0ms) + 280ms)}
.mo .drafting .rv-head::before{transition-delay:.4s}
.mo .drafting .rv-head>.label{transition-delay:.3s}
.mo .drafting .rv-head>h2{transition-delay:.55s}
.mo .drafting .rv-head>p{transition-delay:.65s}
.rprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
.spine{display:none}
/* 1.10.1: the rail is a measuring scale near the viewport edge: hairline, one tick per section; the active tick runs out in blue
   with its name written along the scale (vertical, so it never sits on the content). Hover/focus shows every name to pick from. */
@media (min-width:1100px){
  .has-spine .rprog{display:none}
  .spine{--tk:16px;--sc:.5;--ln:var(--ink-muted);--tx:var(--ink-muted);display:block;position:fixed;z-index:20;left:22px;top:50%;height:46vh;width:calc(var(--tk) + 4px);transform:translateY(-50%);transition:opacity .3s}
  html.mc-intro .spine{opacity:0;visibility:hidden}
  .spine.on-dark{--ln:rgba(255,255,255,.55);--tx:rgba(255,255,255,.8)}
  .spine::before,.sp-fill{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--ln);opacity:.45}
  .sp-fill{width:2px;left:-.5px;opacity:1;background:var(--blue);transform:scaleY(0);transform-origin:top}
  .spine ol{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
  .spine a{display:block;position:relative;width:calc(var(--tk) + 4px);height:16px}
  .spine a::before{content:"";position:absolute;left:0;top:7.5px;width:var(--tk);height:1px;background:var(--ln);transform:scaleX(var(--sc));transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s}
  .spine a.on::before{transform:none;background:var(--blue);height:2px;top:7px}
  .spine span{position:absolute;right:calc(100% + 6px);top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg) translateY(-6px);opacity:0;pointer-events:none;white-space:nowrap;font:500 10px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--tx);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
  .spine a.on span{opacity:1;transform:translateY(-50%) rotate(180deg)}
  .spine:hover a span,.spine:focus-within a span{writing-mode:horizontal-tb;right:auto;left:calc(var(--tk) + 12px);transform:translateY(-50%);opacity:1;pointer-events:auto;color:var(--ink-muted);background:var(--surface);border:1px solid var(--hairline);padding:5px 8px;border-radius:2px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
  .spine:hover a.on span,.spine:focus-within a.on span,.spine a:hover span,.spine a:focus-visible span{color:var(--link);border-color:var(--blue)}
  .spine a:focus-visible{outline:2px solid var(--link);outline-offset:2px}
}
@media (min-width:1240px){.spine{--tk:28px;--sc:.2857}}
@media (prefers-reduced-motion:reduce){.spine,.spine *{transition:none!important}}
.site-head nav .current-menu-item>a,.site-head nav a[aria-current="page"]{border-bottom-color:var(--blue)}

/* 1.10.1: hash links (e.g. /contact/#quote, /about/#fleet) land below the sticky header */
:target,#quote{scroll-margin-top:calc(var(--head-h,82px) + 16px)}

/* Terms & conditions */
.entry .terms-lead{font-size:17px;color:var(--ink-muted)}
.entry .terms-keys{border-left:3px solid var(--blue);background:var(--surface-alt);padding:var(--s3) var(--s4);margin:var(--s3) 0 var(--s4);max-width:70ch}
.entry .terms-keys .label{display:block;margin:0 0 8px}
.entry .terms-keys ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.entry .terms-toc{list-style:none;margin:0 0 var(--s5);padding:var(--s3) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px var(--s4);counter-reset:tc}
.entry .terms-toc li{counter-increment:tc;display:flex;gap:10px;align-items:baseline}
.entry .terms-toc li::before{content:counter(tc);font:500 12px var(--f-display);color:var(--ink-muted);min-width:1.4em}
.entry .terms-toc a{color:var(--link);font-weight:600;text-decoration:none}
.entry .terms-toc a:hover{text-decoration:underline}
.entry h2[id^="t"]{scroll-margin-top:110px}
.entry p.clause{position:relative;padding-left:3.6em;margin:0}
.entry p.clause .cl{position:absolute;left:0;top:.15em;font:500 13px/1.7 var(--f-display);color:var(--ink-muted)}
.entry .terms-list{margin:-4px 0 12px 3.6em;padding-left:1.1em;display:grid;gap:4px;max-width:66ch}
.entry .legal-steps{margin:0;padding-left:1.4em;display:grid;gap:8px;max-width:70ch}
.entry.legal .terms-list{margin-left:0}
.entry.legal p.clause ~ .terms-list{margin-left:3.6em}

/* Explore: house cutaway */
.house-svg{display:block;width:100%;height:auto;max-height:78vh}
.house-svg path{stroke-linejoin:round;stroke-linecap:round}
.house-svg .hl{stroke:#a7a3a4;stroke-width:1;fill:none}
.house-svg .hg{stroke:#dedcdc;stroke-width:1;fill:none}
.house-svg .hx{stroke:#bdb9ba;stroke-width:1;fill:none;stroke-dasharray:4 4}
.house-svg .hw{stroke:#c9c6c7;stroke-width:.8;fill:none}
.house-svg .hs path{stroke:#3e5f80;stroke-width:.8}
.house-svg .st{fill:#e3ebf3}.house-svg .sr{fill:#b6c9db}.house-svg .sf{fill:#9db4cb}
.house-svg .pt,.house-svg .pr,.house-svg .pf{fill:#cbd8e5}
.house-svg .ct{fill:#ecebea}.house-svg .cr,.house-svg .cf{fill:#d3d1d0}
.house-svg .hs .ct,.house-svg .hs .cr,.house-svg .hs .cf{stroke:#8f8b8c}
.house-svg .tt{fill:#ecdcc0}.house-svg .tr,.house-svg .tf{fill:#d8bf95}
.house-svg .hs .tt,.house-svg .hs .tr,.house-svg .hs .tf{stroke:#8b6a3d}
.house-svg .hs{transition:opacity .25s}
.house-svg.has-sel .hs{opacity:.28}
.house-svg.has-sel .hs.on{opacity:1}
.house-svg .pin circle{fill:#4f4c4d;stroke:#fff;stroke-width:2}
.house-svg .pin text{fill:#fff;font:600 13px Helvetica,Arial,sans-serif;text-anchor:middle;pointer-events:none}
.house-svg .pin.on circle{fill:#4b6b8c}
.house-svg .pin{cursor:pointer}

/* Explore: past jobs iframe */
.embed-models{height:1500px}
@media (max-width:700px){.embed-models{height:2600px}}
/* Explore: built-in panels */
.tab-inline{padding:4px 0 8px}
.ex-head{max-width:68ch;margin:0 0 var(--s4)}
.ex-head h2{margin:0 0 6px}
.ex-head p{margin:0;color:var(--ink-muted)}
/* where steel goes */
.house{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:start}
@media (max-width:860px){.house{grid-template-columns:minmax(0,1fr)}}
.house-pic{background:#fff;border:1px solid var(--hairline);border-radius:6px;padding:12px;color-scheme:light}
.house-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hs-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;padding:10px 12px;border:1px solid var(--hairline);border-radius:6px;font:500 16px var(--f-display);color:var(--ink);background:var(--surface)}
.hs-btn .n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--charcoal);color:#fff;font:600 13px/26px var(--f-text);text-align:center}
.hs-btn:hover{border-color:var(--blue)}
.hs-btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hs-btn[aria-expanded="true"]{border-color:var(--link);background:var(--surface-alt)}
.hs-btn[aria-expanded="true"] .n{background:var(--link)}
.hs-card{padding:10px 12px 4px 50px}
.hs-card p{margin:0 0 8px}
.hs-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.hs-links a{color:var(--link);font-weight:600}
.house-note{font-size:13px;color:var(--ink-muted);margin:12px 0 0}
/* finishes */
.fins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:900px){.fins{grid-template-columns:minmax(0,1fr)}}
.fin{border:1px solid var(--hairline);border-radius:6px;padding:var(--s3) var(--s4) var(--s4);background:var(--surface)}
.fin h3{margin:2px 0 8px}.fin h4{margin:14px 0 4px;font:500 13px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.fin p{margin:0}.fin ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.fin-pic{display:block;width:150px;height:auto;margin:0 0 10px}
.fin-pic path{stroke:rgba(0,0,0,.35);stroke-width:1}
.fin-primer .face{fill:#8f3d2e}.fin-primer .side{fill:#6f2c21}
.fin-galv .face{fill:#bfc5ca}.fin-galv .side{fill:#9aa2a9}
.fin-powder .face{fill:#3e4246}.fin-powder .side{fill:#2b2e31}
.fin-more{margin:var(--s3) 0 0}.fin-more a{color:var(--link);font-weight:600}
/* what to send us */
.send{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:start}
@media (max-width:860px){.send{grid-template-columns:minmax(0,1fr)}}
.send-addr{display:grid;gap:6px;font-size:13px;color:var(--ink-muted);margin:0 0 var(--s3)}
.send-addr input{font:15px var(--f-text);color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:2px;padding:10px 12px;width:100%}
.send-addr input:focus{outline:2px solid var(--link);outline-offset:1px}
.send-need{border:0;margin:0 0 var(--s3);padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.send-need legend{font-size:13px;color:var(--ink-muted);margin-bottom:6px;padding:0}
.send-need label{display:flex;align-items:center;gap:6px;cursor:pointer}
.send-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.send-list label{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--hairline);border-radius:6px;cursor:pointer;background:var(--surface)}
.send-list input{margin-top:4px;width:18px;height:18px;accent-color:var(--link)}
.send-list b{display:block;font-weight:600}.send-list small{display:block;color:var(--ink-muted);font-size:13px}
.send-list label:has(input:checked){border-color:var(--link);background:var(--surface-alt)}
.send-side{border:1px solid var(--hairline);border-radius:6px;padding:var(--s3) var(--s4) var(--s4);background:var(--surface);position:sticky;top:100px;display:grid;gap:12px}
.send-meter b{display:block;font:500 22px var(--f-display);margin:2px 0 8px}
.send-meter .bar{height:6px;background:var(--hairline);border-radius:3px;overflow:hidden}
.send-meter .bar i{display:block;height:100%;width:0;background:var(--link);transition:width .3s}
.send-tips{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:14px}
.send-tips li.ok{list-style:none;margin-left:-1.1em;color:var(--link);font-weight:600}
.send-side .small{font-size:12.5px;color:var(--ink-muted);margin:0}
.send-side .btn{justify-content:center}

/* Explore: house 3D and finishes v2 */
.embed-house{height:1000px}
@media (max-width:860px){.embed-house{height:1450px}}
.fin{padding:0;overflow:hidden;display:flex;flex-direction:column}
.fin-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#f4f4f3;border-bottom:1px solid var(--hairline)}
.fin-body{padding:var(--s3) var(--s4) var(--s4)}
.fin-table-wrap{overflow-x:auto;margin:var(--s4) 0 0;border:1px solid var(--hairline);border-radius:6px}
.fin-table{width:100%;border-collapse:collapse;min-width:620px;font-size:14.5px}
.fin-table th,.fin-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--hairline);vertical-align:top}
.fin-table tbody tr:last-child th,.fin-table tbody tr:last-child td{border-bottom:0}
.fin-table thead th{font:500 14px var(--f-display);background:var(--surface-alt)}
.fin-table tbody th{font-weight:600;color:var(--ink-muted);width:20%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* fleet: crane reach and capacity */
.cranes{margin-top:var(--s6)}
.cranes h3{margin:0 0 6px}
.crane-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.crane{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--hairline);border-radius:6px;padding:var(--s3) var(--s4)}
.crane h4{margin:0 0 8px;font:500 19px var(--f-display)}
.crane-facts{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 16px;font-size:14px}
@media (max-width:760px){.crane-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.crane-facts span{display:block;font:500 11px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.crane-range-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-items:start;margin-top:var(--s2)}
@media (min-width:900px){.crane-range-wrap{grid-template-columns:minmax(0,560px) minmax(0,1fr)}}
.crane-range{display:block;width:100%;height:auto}
.crane-range text{font:15px var(--f-text);fill:var(--ink-muted)}
.crane-range .grid line{stroke:var(--hairline);stroke-width:1}
.crane-range .grid line.zero{stroke:var(--ink-muted);stroke-dasharray:4 3}
.crane-range .ya{text-anchor:end}
.crane-range .band.b0{fill:rgba(134,165,193,.30)}
.crane-range .band.b1{fill:rgba(134,165,193,.14)}
.crane-range .env{fill:none;stroke:var(--blue-deep);stroke-width:2}
.crane-range .edge{stroke:var(--ink);stroke-width:1.2}
.crane-range .bx{text-anchor:middle;font-weight:600;fill:var(--ink)}
.crane-range .bk{text-anchor:middle;font:700 16px var(--f-display);fill:var(--blue-deep)}
.crane-range .ax{text-anchor:end;font-size:14px}
.crane-range .ay{text-anchor:middle}
.crane-range .col rect,.crane-range .col circle{fill:var(--charcoal)}
.crane-range .boom{stroke:var(--charcoal);stroke-width:5;stroke-linecap:round}
.crane-range .rope{stroke:var(--ink);stroke-width:1.2}
.crane-range .ex circle{fill:var(--charcoal);stroke:#fff;stroke-width:2}
.crane-range .ex text{fill:#fff;font:700 15px var(--f-display);text-anchor:middle}
.crane-range .ex1 .boom{stroke:#8a2a1f}.crane-range .ex1 circle{fill:#8a2a1f}
.crane-range .live .boom{stroke:var(--blue-deep);stroke-dasharray:6 4}.crane-range .live circle{fill:var(--blue-deep)}
.crane-why{margin:0 0 var(--s2);font-size:15px}
.crane-ex{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:6px;font-size:15px}
.crane-ex .dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--charcoal);color:#fff;font:700 12px var(--f-display);margin-right:4px}
.crane-ex .dot1{background:#8a2a1f}
.crane-try{border-top:1px solid var(--hairline);padding-top:var(--s2);display:grid;gap:8px;font-size:14px}
.crane-try-h{margin:0;font:500 15px var(--f-display)}
.crane-try label{display:flex;justify-content:space-between;align-items:center;gap:10px}
.crane-try input{width:80px;font:inherit;padding:5px 8px;border:1px solid var(--hairline);border-radius:4px;background:var(--surface);color:var(--ink)}
.crane-out{margin:0;font-weight:600;color:var(--blue-deep)}
.crane-cap{margin:6px 0 0;font-size:13px;color:var(--ink-muted)}
.crane-note{margin:var(--s3) 0 0;font-size:14px;color:var(--ink-muted)}
.crane-table{margin-top:8px;font-size:14px}
.crane-table summary{cursor:pointer;color:var(--link);font-weight:600}
.crane-table table{border-collapse:collapse;margin-top:8px;min-width:220px}
.crane-table th,.crane-table td{text-align:left;padding:4px 14px 4px 0;border-bottom:1px solid var(--hairline)}

/* London landing page: project links */
.london-jobs{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.london-jobs a{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--hairline);border-radius:4px;background:var(--surface);text-decoration:none;color:var(--ink)}
.london-jobs a:hover{border-color:var(--blue)}
.london-jobs span{font-size:13px;color:var(--ink-muted)}

/* contact: click-to-load Google map */
.map-embed{margin:12px 0;aspect-ratio:4/3;max-height:320px;width:100%;border:1px solid var(--hairline);border-radius:4px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px) 0 0/28px 28px,#e3e7ea}
.map-embed iframe{display:block;width:100%;height:100%;border:0}
.map-load{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:4px;text-align:center;color:var(--ink);padding:16px}
.map-load svg{color:#8a2a1f}
.map-load strong{font:500 16px var(--f-display)}
.map-load span{font-size:12px;color:var(--ink-muted)}
.map-load:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}