/* Ideal Fencing and Welding concept. Hand-written stylesheet (replaces the Astro/Tailwind build CSS).
   Direction: monochrome steel catalogue. Charcoal, concrete and one signal yellow. */
:root{
  --ink:#141517; --char:#1b1c1f; --char-2:#25272b; --char-3:#303237;
  --steel:#a3a7ad; --steel-2:#d5d7da;
  --canvas:#efeeea; --card:#f7f6f3; --rule:rgba(20,21,23,.16); --rule-d:rgba(255,255,255,.14);
  --text:#141517; --text-2:#2f3236; --text-3:#4a4d53;
  --yellow:#f4c20d; --yellow-h:#ffd23a;
  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --sans:'Archivo',system-ui,sans-serif;
  --wrap:1280px; --gut:20px; --sec:88px; --sec-s:56px;
  --ease:cubic-bezier(.23,1,.32,1); --r:4px;
}
@media (min-width:768px){:root{--gut:32px;--sec:120px;--sec-s:72px}}
@media (min-width:1200px){:root{--sec:128px;--sec-s:80px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--canvas);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:18px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--yellow);color:var(--ink);padding:12px 16px;font-weight:500}
.skip:focus{left:8px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}

/* type */
.display{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:.92;text-wrap:balance}
.h2{font-size:clamp(42px,4.8vw,66px);line-height:.95}
.h3{font:700 clamp(30px,3vw,40px)/1 var(--display)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;max-width:44ch}
.body-lg{font-size:clamp(17px,1.3vw,19px);line-height:1.6;max-width:54ch;color:var(--text-2)}
.body{color:var(--text-2);max-width:60ch}
.label{font:500 14px/1.4 var(--sans);color:var(--text-3)}
.cap{font:400 14px/1.45 var(--sans);color:var(--text-2);padding-top:10px}
.label{display:block}
.dark .cap{color:var(--steel)}
.text-link{font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(20,21,23,.35);padding:10px 0;display:inline-block}
.text-link:hover{text-decoration-color:currentColor}
.dark .text-link{text-decoration-color:rgba(255,255,255,.4)}

/* buttons: primary yellow, secondary outline */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:var(--r);font:500 17px/1 var(--sans);text-decoration:none;border:2px solid transparent;transition:background-color .16s,color .16s,border-color .16s,transform .12s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:var(--yellow-h)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-line{border-color:rgba(20,21,23,.35);color:var(--ink);min-height:48px;padding:0 20px}
.btn-line:hover{border-color:var(--ink);background:var(--yellow)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--char-3)}
.btn-sm{min-height:44px;padding:0 18px;font-size:16px}
.btn-wide{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-head{position:fixed;inset:0 0 auto 0;z-index:50;color:#fff;transition:background-color .24s,box-shadow .24s}
.site-head.is-solid,.site-head.menu-open{background:rgba(27,28,31,.97);box-shadow:0 1px 0 var(--rule-d)}
.head-row{display:flex;align-items:center;gap:24px;height:72px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-height:44px}
.wm-ideal{font:700 34px/1 var(--display);color:var(--yellow);letter-spacing:.02em}
.wm-sub{font:500 11px/1.15 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--steel-2)}
.head-nav{display:none;margin-left:auto;gap:4px}
.head-nav a{color:var(--steel-2);text-decoration:none;font-size:16px;font-weight:500;padding:12px 14px;transition:color .16s}
.head-nav a:hover,.head-nav a[aria-current]{color:#fff}
.head-nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--yellow)}
.head-act{display:none;align-items:center;gap:16px}
.head-tel{color:#fff;text-decoration:none;font-weight:500;font-size:16px;padding:14px 4px;font-variant-numeric:tabular-nums}
.head-tel:hover{color:var(--yellow)}
.menu-btn{margin-left:auto;min-height:44px;min-width:72px;padding:0 16px;background:transparent;border:1.5px solid rgba(255,255,255,.45);border-radius:var(--r);color:#fff;font-weight:500;cursor:pointer}
.mnav{background:rgba(27,28,31,.98);border-top:1px solid var(--rule-d)}
.mnav .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:16px}
.mnav a{color:#fff;text-decoration:none;font:700 32px/1 var(--display);padding:12px 0;border-bottom:1px solid var(--rule-d)}
@media (min-width:1000px){.head-nav,.head-act{display:flex}.menu-btn{display:none}.mnav{display:none!important}.head-row{height:84px}}

/* hero */
.hero{position:relative;background:var(--char);color:#fff;overflow:hidden;min-height:min(100svh,900px);display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0 0 auto 0;height:56%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:55% 62%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(27,28,31,.55) 0%,rgba(27,28,31,.08) 30%,rgba(27,28,31,.4) 70%,var(--char) 100%)}
.hero-inner{position:relative;padding-top:clamp(250px,44svh,420px);padding-bottom:40px;display:grid;gap:24px;justify-items:start}
.hero-h{font-size:clamp(70px,11.4vw,172px);line-height:.86;letter-spacing:-.02em}
.hero .lead{color:var(--steel-2)}
@media (min-width:1000px){
  .hero-media{height:100%}
  .hero-media::after{background:linear-gradient(to right,rgba(27,28,31,.9) 0%,rgba(27,28,31,.62) 40%,rgba(27,28,31,.12) 78%),linear-gradient(to top,rgba(27,28,31,.92) 0%,rgba(27,28,31,0) 50%),linear-gradient(to bottom,rgba(27,28,31,.6),rgba(27,28,31,0) 18%)}
  .hero-inner{padding-top:180px;padding-bottom:80px;gap:28px}
  .hero-h{max-width:10ch}
}

/* sections */
.sec{padding:var(--sec) 0}
.sec-head{display:grid;gap:16px;margin-bottom:48px}
.sec-intro{max-width:48ch;color:var(--text-2);font-size:18px}
.dark .sec-intro{color:var(--steel-2)}
@media (min-width:1000px){.sec-head{grid-template-columns:7fr 5fr;align-items:end;gap:48px}.sec-head>:last-child:not(:first-child){justify-self:end}}
.dark{background:var(--char);color:#fff}
.yellow{background:var(--yellow);color:var(--ink)}
.yellow .body-lg{color:var(--ink)}

/* plates: duotone at native size, colour on hover */
.plate{min-width:0}
.ph{position:relative;overflow:hidden;background:var(--char-2);min-width:0}
.plate .ph{aspect-ratio:var(--w)/var(--h)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (min-width:1000px){.plate{max-width:calc(var(--w) * 1px)}}

/* fence-top picker */
.picker{display:grid;gap:32px}
.pk-group{font:500 14px/1.4 var(--sans);color:var(--text-3);margin:0 0 4px}
.pk-index .pk-group+.pk-list{margin-bottom:24px}
.pk-list{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pk-item{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);color:var(--text-2);font:700 26px/1 var(--display);padding:12px 0 10px;cursor:pointer;min-height:48px;transition:color .14s,background-color .14s,padding .2s var(--ease)}
.pk-item:hover{color:var(--ink)}
.pk-item[aria-pressed="true"]{color:#fff;background:var(--ink);padding-left:12px;border-bottom-color:var(--ink)}
.pk-panel{display:grid;gap:16px}
.pk-photo{max-width:none}
.pk-sample-lg{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);aspect-ratio:4/3;display:grid;place-items:center}
.pk-sample-lg{gap:10px;align-content:center}
.pk-sample-lg img{width:120px;height:100px;object-fit:cover}
.pk-sample-lg figcaption{font-size:14px;color:var(--text-3)}
.pk-draw{position:relative;background:var(--char);color:#fff;padding:18px 18px 12px;border-radius:var(--r)}
.pk-draw svg{width:100%;height:auto}
.pk-draw span{display:block;font-size:13px;color:var(--steel);margin-top:6px}
.pk-draw .g{stroke:rgba(255,255,255,.35);stroke-width:2;stroke-dasharray:6 6}
.pk-draw .r,.chart-draw .r{stroke:currentColor;stroke-width:7;stroke-linecap:square}
.pk-draw .k,.chart-draw .k{stroke:currentColor;stroke-width:5;fill:none}
.pk-draw .t,.chart-draw .t{stroke:currentColor;stroke-width:3;fill:none}
.pk-draw .f,.chart-draw .f{fill:currentColor}
.pk-draw .p{fill:var(--char-3);stroke:currentColor;stroke-width:3}
.pk-draw .h,.chart-draw .h{stroke:currentColor;stroke-width:1.5;opacity:.6}
.pk-meta{display:grid;gap:8px;justify-items:start}
.pk-kind{font-size:14px;font-weight:500;color:var(--text-3)}
.pk-name{font:700 clamp(48px,5vw,72px)/.9 var(--display)}
.pk-note{color:var(--text-2);max-width:40ch;margin-bottom:8px}
.pk-panel:not([hidden]) .pk-draw svg *{animation:draw .5s var(--ease) both}
@keyframes draw{from{opacity:0;transform:translateY(6px)}}
@media (max-width:999px){.pk-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.pk-item{font-size:21px;min-height:44px;padding:10px 0 8px}.pk-item[aria-pressed="true"]{padding-left:8px}.pk-stage{scroll-margin-top:84px}}
@media (min-width:1000px){
  .picker{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .pk-item{font-size:30px}
  .pk-stage{position:sticky;top:100px}
  .pk-panel{position:relative;grid-template-columns:1fr auto;gap:20px 24px;align-items:end}
  .pk-photo,.pk-sample-lg{grid-column:1/-1;grid-row:1}
  .pk-photo .ph{aspect-ratio:4/3}
  .pk-sample-lg{aspect-ratio:4/3;align-content:start;justify-items:start;padding:32px}
  .pk-draw{grid-column:1/-1;grid-row:1;align-self:end;justify-self:end;width:280px;margin:0 16px 16px 0;padding:12px 12px 8px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
  .pk-meta{grid-column:1/-1;grid-row:2;grid-template-columns:1fr auto;align-items:end;column-gap:24px}
  .pk-meta .pk-name{grid-column:1}.pk-meta .pk-note{grid-column:1;margin:0}.pk-meta .btn{grid-column:2;grid-row:1/3}
}
/* supply modes */
.modes-grid{display:grid;gap:40px}
.modes-text{display:grid;gap:28px;align-content:center}
.mode{border-top:1px solid var(--rule-d);padding-top:20px;display:grid;gap:8px}
.mode h3{font:500 21px/1.3 var(--sans);color:#fff}
.mode p{color:var(--steel-2);max-width:46ch}
@media (min-width:1000px){.modes-grid{grid-template-columns:minmax(0,640px) 1fr;gap:88px;align-items:center}}

/* range list: whole row is the link, one shared preview on desktop */
.range-grid{display:grid;gap:40px}
.range-list{border-top:2px solid var(--ink)}
.range-row{display:grid;grid-template-columns:1fr 28px;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:center;text-decoration:none}
.rr-text{display:grid;gap:6px}
.rr-name{font:700 clamp(36px,4.6vw,64px)/.95 var(--display)}
.rr-line{color:var(--text-2);font-size:16px;max-width:52ch}
.arr{width:28px;height:28px;transition:transform .2s var(--ease);flex:none}
.range-row:hover .arr,.range-row[data-on] .arr{transform:translateX(6px)}
.range-row:hover .rr-name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.range-pv{display:none}
@media (min-width:1000px){
  .range-grid{grid-template-columns:minmax(0,1fr) 520px;gap:64px;align-items:start}
  .range-row{grid-template-columns:1fr 40px;padding:26px 0}
  .rr-line{font-size:18px}
  .arr{width:36px;height:36px}
  .range-pv{display:block;position:sticky;top:110px;aspect-ratio:4/3;background:var(--char-2);overflow:hidden}
  .range-pv img{width:100%;height:100%;object-fit:cover}
}

/* featured install: dark band, photo to the left edge at native scale */
.featured{padding:var(--sec) 0}
.feat-grid{display:grid;gap:32px}
.feat-photo{max-width:none!important}
.feat-text{display:grid;gap:24px;align-content:end;justify-items:start;padding:0 var(--gut)}
.feat-h{font-size:clamp(52px,7vw,120px);line-height:.88}
.spec-d{max-width:440px}
@media (min-width:1000px){
  .feat-grid{grid-template-columns:704px 1fr;gap:0;align-items:end}
  .feat-text{margin-left:64px;position:relative;z-index:1;padding:0 max(var(--gut),(100vw - var(--wrap))/2) 0 0}
  .feat-h{text-shadow:0 4px 40px rgba(0,0,0,.45)}
}
.strip-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 32px;margin-bottom:24px}
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 8px}
.strip .st-big{grid-column:1/-1}
@media (min-width:1000px){.strip{grid-template-columns:640px 1fr 1fr;gap:24px 8px}.strip .st-big{grid-column:1;grid-row:1/3}.strip .plate{max-width:none}}

/* installed work: native-size plates, two sizes */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 8px}
.work-grid .wg-a{grid-column:1/-1}
@media (min-width:1000px){
  .work-grid{grid-template-columns:640px 320px 320px;gap:24px 0;column-gap:0;justify-content:space-between}
  .work-grid{grid-template-columns:640px 300px 300px}
  .work-grid .wg-a{grid-column:1;grid-row:1/3}
}

/* trade counter */
.counter-grid{display:grid;gap:40px;align-items:start}
.counter-text{display:grid;gap:24px;justify-items:start}
.counter-list{border-top:2px solid currentColor;columns:1}
.counter-list li{font:500 20px/1.3 var(--sans);padding:14px 0;border-bottom:1px solid var(--rule);break-inside:avoid}
.counter{border-top:1px solid var(--rule)}
.dark .counter-list li{border-color:var(--rule-d)}
.dark .counter-text .body-lg{color:var(--steel-2)}
@media (min-width:700px){.counter-list{columns:2;column-gap:40px}}
@media (min-width:1000px){.counter-grid{grid-template-columns:5fr 6fr;gap:96px}}

/* areas marquee */
.areas{background:var(--char);color:#fff;padding:72px 0 88px;overflow:hidden}
.areas-h{font:500 15px/1.4 var(--sans);color:var(--steel);margin-bottom:24px}
.marquee{overflow:hidden}
.mq-track{display:flex;width:max-content;animation:marq 60s linear infinite}
.mq-track span{font:700 clamp(64px,10vw,150px)/1 var(--display);padding-right:.5em;color:rgba(255,255,255,.38)}
.mq-track span:nth-child(odd){color:#fff}
@keyframes marq{to{transform:translateX(-50%)}}

/* display centre */
.dc{padding-bottom:0}
.dc-grid{display:grid;gap:24px}
.dc-main{display:grid;gap:24px;justify-items:start}
.dc-label{font:500 15px/1.4 var(--sans);color:var(--yellow)}
.dc-h{font-size:clamp(64px,11vw,168px);line-height:.86;letter-spacing:-.02em}
.dc .body-lg{color:var(--steel-2)}
.dc-marquee{margin-top:var(--sec-s);padding:40px 0 64px;border-top:1px solid var(--rule-d);overflow:hidden}
.dc-mq-h{font:500 15px/1.4 var(--sans);color:var(--steel);margin-bottom:16px}

/* faq: visible, single column */
.faq-wrap{display:grid;gap:40px}
.faq-side{display:grid;gap:16px;align-content:start}
.faq-side a{font-weight:500}
@media (min-width:1000px){.faq-wrap{grid-template-columns:4fr 8fr;gap:64px}.faq-side{position:sticky;top:120px}}
.faq-list{border-top:2px solid var(--ink)}
.qa{padding:28px 0;border-bottom:1px solid var(--rule);display:grid;gap:8px}
.qa h3{font:500 21px/1.35 var(--sans);letter-spacing:-.005em}
.qa p{color:var(--text-2);max-width:68ch}

/* closing + footer (one dark block) */
.closing{background:var(--char);color:#fff;padding:var(--sec) 0 72px}
.close-grid{display:grid;gap:32px}
.close-h{font-size:clamp(46px,6vw,88px);line-height:.92;max-width:14ch}
.close-side{display:grid;gap:24px;color:var(--steel-2);max-width:52ch}
@media (min-width:1000px){.close-grid{grid-template-columns:7fr 5fr;gap:64px;align-items:end}}
.site-foot{background:var(--char);color:var(--steel-2);padding:0 0 32px;font-size:16px}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:560px){.foot-grid{grid-template-columns:1fr 1fr}}
.site-foot .foot-grid{border-top:1px solid var(--rule-d);padding-top:48px}
.foot-brand{grid-column:1/-1;display:grid;gap:16px;max-width:40ch}
.foot-h{font:500 14px/1.4 var(--sans);color:var(--steel);margin-bottom:8px}
.site-foot p{line-height:1.9}
.site-foot a{color:#fff;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.site-foot a:hover{text-decoration-color:var(--yellow)}
.site-foot p a{display:inline-block;padding:5px 0;line-height:1.4}
.foot-legal{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;font-size:14px;color:var(--steel)}
@media (min-width:1000px){.foot-grid{grid-template-columns:5fr 2fr 3fr 2fr}.foot-brand{grid-column:auto}}
@media (max-width:899px){.site-foot{padding-bottom:96px}}

/* mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:3fr 2fr;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--ink);box-shadow:0 -1px 0 var(--rule-d);transition:transform .28s var(--ease)}
.callbar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:var(--r);text-decoration:none;font-weight:500}
.cb-call{background:var(--yellow);color:var(--ink)}
.cb-quote{border:1.5px solid rgba(255,255,255,.45);color:#fff}
@media (min-width:900px){.callbar{display:none}}
.js .has-hero-cta .callbar{transform:translateY(110%)}
.js .has-hero-cta .callbar.show{transform:none}

/* inner page hero */
.page-hero{background:var(--char);color:#fff;padding:128px 0 64px}
.ph-grid{display:grid;gap:28px}
.ph-h{font-size:clamp(56px,7.6vw,112px);line-height:.9;max-width:13ch}
.ph-side{display:grid;gap:24px;align-content:end}
.ph-side .lead{color:var(--steel-2)}
.jump{display:flex;flex-wrap:wrap;gap:0 20px}
.jump a{color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:5px;padding:10px 0}
.jump a:hover{text-decoration-color:var(--yellow)}
@media (min-width:1000px){.page-hero{padding:184px 0 96px}.ph-grid{grid-template-columns:7fr 5fr;gap:64px;align-items:end}}

/* services */
.tf-head{display:grid;gap:28px;margin-bottom:40px}
.tf-h{font-size:clamp(64px,9vw,140px);line-height:.86}
.tf-intro{display:grid;gap:24px;justify-items:start}
@media (min-width:1000px){.tf-head{grid-template-columns:6fr 5fr;gap:64px;align-items:end}}
.tf-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 8px}
.tf-photos .tf-a{grid-column:1/-1}
@media (min-width:1000px){.tf-photos{grid-template-columns:640px 1fr 1fr;gap:8px;align-items:start}.tf-photos .tf-a{grid-column:auto}.tf-photos .plate{max-width:none}}
.svc{border-top:1px solid var(--rule)}
.svc-grid{display:grid;gap:32px}
.svc-photos{display:grid;gap:24px}
.svc-sup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.svc-sup .plate:only-child{grid-column:1/-1;max-width:640px}
.svc-text{display:grid;gap:24px;justify-items:start;align-content:start}
.spec{border-top:2px solid var(--ink);width:100%}
.spec>div{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--rule)}
.spec dt{font:500 15px/1.4 var(--sans)}
.spec dd{color:var(--text-2)}
.dark .spec{border-color:#fff}.dark .spec>div{border-color:var(--rule-d)}.dark .spec dd{color:var(--steel-2)}
@media (min-width:700px){.spec>div{grid-template-columns:150px 1fr;gap:20px}}
@media (min-width:1000px){
  .svc-grid{grid-template-columns:1fr 640px;gap:88px;align-items:start}
  .svc.flip .svc-grid{grid-template-columns:640px 1fr}
  .svc.flip .svc-photos{order:-1}
  .svc-sup .plate{max-width:none}
  .svc-text{position:sticky;top:120px;padding-top:8px}
}
.chart-wrap{margin-top:var(--sec-s);display:grid;gap:12px}
.chart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px;border-top:2px solid var(--ink);padding-top:24px;margin:20px 0 8px}
.spear-h{margin-top:32px}
.mat{display:grid;place-items:center;aspect-ratio:1;width:100%;background:#e3e1db;overflow:hidden}
.mat img{width:min(120px,80%);height:auto;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15)}
.chart-cell{display:grid;gap:10px;text-decoration:none;color:var(--ink)}
.chart-cell:hover .mat{background:#d6d3cb}
.chart-cell:hover .chart-name{text-decoration:underline}

.chart-draw svg{width:100%;height:auto}
.chart-draw .g{stroke:var(--rule);stroke-width:2}
.chart-draw .p{fill:var(--canvas);stroke:currentColor;stroke-width:3}
.chart-name{font:700 22px/1 var(--display)}
.arrow-link{display:inline-flex;align-items:center;gap:10px;font-size:18px}
.arrow-link .arr{width:22px;height:22px}
.arrow-link:hover .arr{transform:translateX(4px)}
.chart-cta{align-content:end;background:var(--ink);color:#fff;font-size:15px;line-height:1.4}
.chart-cta:hover{background:var(--char-3)}
.chart-cta .chart-name{font-size:28px}
@media (min-width:700px){.chart{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1100px){.chart{grid-template-columns:repeat(7,minmax(0,1fr))}.chart-spear{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* gallery (colour) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.chip{min-height:44px;padding:0 18px;border-radius:var(--r);border:1.5px solid var(--rule);background:transparent;font-weight:500;cursor:pointer;transition:background-color .14s,border-color .14s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.g-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 8px;grid-auto-flow:dense}
.g-tile{display:flex;flex-direction:column;min-width:0}
.g-tile a{display:block;flex:1;min-width:0}
.g-tile .ph{aspect-ratio:4/3}
.g-tile .ph img{transition:transform .6s var(--ease)}
.g-tile a:hover .ph img{transform:scale(1.03)}
.g-tile.big,.g-tile.wide{grid-column:span 2}
.g-tile.wide .ph{aspect-ratio:2/1}
.g-tile[hidden]{display:none}
@media (min-width:900px){.g-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.g-tile.big{grid-row:span 2}.g-tile.big .ph{aspect-ratio:auto;height:100%}}
.lightbox{border:0;padding:0;background:transparent;max-width:min(900px,94vw);width:100%;color:#fff}
.lightbox::backdrop{background:rgba(14,15,17,.92)}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;background:#000}
.lightbox .cap{display:block;padding:12px 0;color:var(--steel-2)}
.lb-ctl{display:flex;gap:8px;justify-content:flex-end}
.lb-ctl button{min-height:44px;padding:0 18px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer}
.lb-ctl button:hover{border-color:#fff}

/* contact */
.contact-grid{display:grid;gap:56px}
.c-info{display:grid;gap:32px;align-content:start}
.c-block{display:grid;gap:8px;border-top:2px solid var(--ink);padding-top:16px}
.c-h{font:500 15px/1.4 var(--sans);color:var(--text-3)}
.c-big{font:700 clamp(44px,5vw,64px)/1 var(--display);text-decoration:none}
.c-big:hover{color:var(--text-2)}
.c-mid{font-size:20px;font-weight:500;overflow-wrap:anywhere}
.quote{background:var(--card);padding:28px 20px;border-radius:var(--r);display:grid;gap:24px;box-shadow:inset 0 0 0 1px var(--rule)}
.quote fieldset{border:0;padding:0;margin:0;display:grid;gap:16px}
.quote legend{font:500 15px/1.4 var(--sans);color:var(--text-3);padding:0 0 12px;border-bottom:1px solid var(--rule);width:100%;margin-bottom:8px}
.row2{display:grid;gap:16px}
.fld{display:grid;gap:6px}
.fld span{font-size:15px;font-weight:500}
.fld em{font-style:normal;color:var(--text-3);font-weight:400;font-size:14px}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid rgba(20,21,23,.28);border-radius:var(--r);background:#fff;font-size:16px;transition:border-color .14s}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(20,21,23,.55)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--yellow)}
.fld.invalid input{border-color:#a3261a}
.form-msg{background:var(--ink);color:#fff;padding:20px;border-radius:var(--r)}
.form-msg a{color:var(--yellow)}
@media (min-width:700px){.row2{grid-template-columns:1fr 1fr}.quote{padding:40px}}
@media (min-width:1000px){.contact-grid{grid-template-columns:4fr 7fr;gap:80px}.c-info{position:sticky;top:120px}}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .pk-panel:not([hidden]) .pk-draw svg *{animation:none}
  .g-tile .ph img{transition:none!important;transform:none!important}
}
@media (max-width:999px){.c-photo{display:none}}