/* Smick Fencing — Concept 2 "The Fence Line"
   Own design system. Dark steel, industrial, built around one live tool.

   No existing brand to extract, so this palette is a PROPOSAL built from the
   other material of the trade: galvanised steel and the safety orange that is
   already on every site in the country.
   --orange never carries white text. White on it fails contrast badly, so the
   button uses near black text on orange, which is also how the real thing looks.
   On the dark ground --orange passes as text, so it is allowed there. */

:root{
  --bg:#0E1214;
  --bg-2:#161B1E;
  --bg-3:#1E2529;
  --ice:#E7ECEF;
  --soft:#A7B1B6;
  --mute:#8A959B;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.2);
  --orange:#FF6A1F;
  --orange-hi:#FF8447;
  --zinc:#8E9AA0;
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ice);font-family:var(--f);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
svg{display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.05}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---------- concept notice ---------- */
.cnote{display:flex;gap:14px;align-items:flex-start;justify-content:center;
  background:var(--orange);color:#12171A;padding:11px 18px;font-size:.83rem;
  line-height:1.5;font-weight:500}
.cnote strong{font-weight:800}
.cnote span{max-width:74ch}
.cnote button{flex:0 0 auto;background:none;border:0;color:#12171A;font-size:1.35rem;
  line-height:1;cursor:pointer;padding:11px 14px;margin:-9px -9px -9px 0;border-radius:8px}
.cnote button:hover{background:rgba(0,0,0,.14)}
.cnote[hidden]{display:none}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(14,18,20,.9);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand svg{width:34px;height:34px;flex:0 0 auto;color:var(--orange)}
.brand b{display:block;font-size:1.06rem;font-weight:800;letter-spacing:.01em;text-transform:uppercase}
.brand i{display:block;font-style:normal;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-top:2px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:.83rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);padding:11px 0;position:relative}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--orange);transition:right .28s ease}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.hd-cta{flex:0 0 auto;margin-left:8px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line-2);
  background:none;border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--ice);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:19px;height:2px;background:var(--ice)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.mnav{display:none;background:var(--bg-2);border-bottom:1px solid var(--line)}
.mnav.open{display:block}
.mnav a{display:block;padding:15px 22px;text-decoration:none;font-size:1rem;
  border-bottom:1px solid var(--line);color:var(--ice)}
.mnav a:last-child{border-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:9px;text-decoration:none;font-size:.85rem;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;border:1px solid transparent;
  cursor:pointer;font-family:var(--f);transition:transform .18s ease,background .18s ease}
.btn svg{width:16px;height:16px}
.btn-pri{background:var(--orange);color:#12171A}
.btn-pri:hover{background:var(--orange-hi);transform:translateY(-2px)}
.btn-gho{background:transparent;color:var(--ice);border-color:var(--line-2)}
.btn-gho:hover{border-color:var(--ice);transform:translateY(-2px)}
.btn-sm{padding:11px 17px;font-size:.78rem}

/* ---------- motion ---------- */
.sprog{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;z-index:200}
.reveal{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease}
.reveal.in{opacity:1;transform:none;filter:none}
[data-cascade] .word{display:inline-block;opacity:0;transform:translateY(26px);filter:blur(8px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease}
[data-cascade].in .word{opacity:1;transform:none;filter:none}

/* ---------- section furniture ---------- */
section{padding:clamp(58px,8vw,106px) 0}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px}
.s-head{max-width:64ch;margin-bottom:clamp(30px,4.5vw,50px)}
.s-head h2{font-size:clamp(1.9rem,4.6vw,3rem);text-transform:uppercase}
.s-head p{margin-top:16px;color:var(--soft);font-size:1.02rem}
.chip{display:inline-block;margin-left:10px;padding:5px 11px;border-radius:5px;
  background:rgba(255,106,31,.13);border:1px solid rgba(255,106,31,.34);
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);vertical-align:middle}

/* ---------- hero ---------- */
.hero{padding-top:clamp(44px,6vw,72px);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 380px at 78% 14%,rgba(255,106,31,.13),transparent 68%)}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.4rem);text-transform:uppercase;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lede{margin-top:24px;font-size:1.11rem;color:var(--soft);max-width:56ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-strip{margin-top:clamp(40px,5.5vw,64px);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:var(--bg-2)}
.hero-strip svg{width:100%;height:auto;aspect-ratio:1200/300}
.hero-strip .cap{padding:13px 18px;border-top:1px solid var(--line);font-size:.79rem;color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(30px,4vw,44px)}
.stat{background:var(--bg-2);padding:24px 22px}
.stat b{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.stat span{display:block;font-size:.85rem;color:var(--mute);margin-top:5px}

/* ---------- planner ---------- */
.pl{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pl-in{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
.pl-ctl{background:var(--bg-3);border:1px solid var(--line);border-radius:16px;padding:24px 22px}
.pl-grp{margin-bottom:22px}
.pl-grp:last-child{margin-bottom:0}
.pl-lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.73rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:11px}
.pl-lab b{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:var(--orange);text-transform:none}
.pl-grp input[type=range]{width:100%;height:46px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer}
.pl-grp input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgba(255,255,255,.14)}
.pl-grp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  border-radius:50%;background:var(--orange);border:3px solid var(--bg-3);margin-top:-10px}
.pl-grp input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.14)}
.pl-grp input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--orange);border:3px solid var(--bg-3)}
.pl-grp input[type=range]:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:8px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.seg button{padding:13px 10px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--soft);font-family:var(--f);font-size:.86rem;
  font-weight:600;cursor:pointer;min-height:48px;transition:background .18s ease,border-color .18s ease}
.seg button:hover{background:rgba(255,255,255,.09)}
.seg button[aria-pressed="true"]{background:rgba(255,106,31,.15);border-color:var(--orange);color:#fff}
.pl-out{background:var(--bg-3);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pl-draw{background:linear-gradient(180deg,#232B2F,#12181A);border-bottom:1px solid var(--line)}
.pl-draw svg{width:100%;height:auto;aspect-ratio:1000/420}
.pl-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.pl-num{background:var(--bg-3);padding:18px 16px}
.pl-num b{display:block;font-size:1.42rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.pl-num span{display:block;font-size:.75rem;color:var(--mute);margin-top:4px;line-height:1.4}
.pl-foot{padding:18px 20px;border-top:1px solid var(--line);font-size:.83rem;color:var(--soft)}
.pl-foot b{color:#fff;font-weight:700}
.pl-warn{margin-top:16px;padding:15px 17px;border-radius:11px;background:rgba(255,106,31,.09);
  border:1px solid rgba(255,106,31,.28);font-size:.85rem;color:var(--soft)}
.pl-warn b{color:var(--orange);font-weight:800}

/* ---------- job cards ---------- */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.job{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease}
.job:hover{transform:translateY(-4px);border-color:var(--line-2)}
.job .top{background:linear-gradient(180deg,#232B2F,#151B1D);border-bottom:1px solid var(--line)}
.job .top svg{width:100%;height:auto;aspect-ratio:16/9}
.job .bod{padding:22px 22px 26px}
.job h3{font-size:1.18rem;text-transform:uppercase;margin-bottom:9px}
.job p{font-size:.93rem;color:var(--soft)}
.job .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;padding:0;list-style:none}
.job .tags li{padding:6px 11px;border-radius:5px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);font-size:.73rem;color:var(--soft)}

/* ---------- day timeline ---------- */
.day{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:d}
.dstep{position:relative;padding-top:30px;counter-increment:d}
.dstep::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--line-2)}
.dstep::after{content:'0' counter(d);position:absolute;top:12px;left:0;font-size:.72rem;
  font-weight:800;letter-spacing:.14em;color:var(--orange)}
.dstep h3{font-size:1.08rem;text-transform:uppercase;margin:14px 0 8px}
.dstep p{font-size:.92rem;color:var(--soft)}

/* ---------- areas ---------- */
.area-list{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.area-list li{padding:10px 16px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:7px;font-size:.9rem;color:var(--soft)}

/* ---------- quotes ---------- */
.qs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.q{padding:26px 24px;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column}
.q blockquote{margin:0;font-size:1.08rem;line-height:1.5;color:#fff;font-weight:500}
.q .who{margin-top:auto;padding-top:18px;font-size:.83rem;color:var(--mute)}
.q .lbl{display:inline-block;margin-bottom:15px;padding:5px 10px;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:.62rem;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ---------- form ---------- */
.enq-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,56px);align-items:start}
.form{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.4vw,32px)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.73rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 15px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--bg);font-family:var(--f);font-size:1rem;
  color:var(--ice);min-height:52px}
.fld textarea{min-height:112px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#6B767C}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.form .btn{width:100%}
.form .fine{margin-top:14px;font-size:.79rem;color:var(--mute);line-height:1.55}
.enq-ok{display:none;background:var(--bg-2);border:1px solid var(--orange);border-radius:18px;
  padding:clamp(24px,3.6vw,34px)}
.enq-ok.show{display:block}
.enq-ok h3{font-size:1.4rem;text-transform:uppercase;margin-bottom:11px}
.enq-ok p{color:var(--soft);font-size:.96rem}
.enq-ok .tick{width:48px;height:48px;border-radius:50%;background:var(--orange);color:#12171A;
  display:flex;align-items:center;justify-content:center;margin-bottom:17px}
.enq-ok .tick svg{width:24px;height:24px}
.wrong{padding:18px 20px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:12px;margin-top:20px;font-size:.89rem;color:var(--soft)}
.wrong h4{font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);margin-bottom:7px}

/* ---------- footer ---------- */
.ft{background:#0A0D0F;border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 26px}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;margin-bottom:34px}
.ft h4{color:#fff;font-size:1.16rem;text-transform:uppercase;margin-bottom:7px}
.ft .fsub{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.ft p{font-size:.91rem;line-height:1.65;color:var(--soft)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.ft ul a{display:block;padding:11px 0;text-decoration:none;font-size:.91rem;color:var(--soft)}
.ft ul a:hover{color:#fff}
.disc{font-size:.75rem;line-height:1.68;color:var(--mute);padding-top:26px;
  border-top:1px solid var(--line)}
.ft-bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  padding-top:20px;margin-top:20px;border-top:1px solid var(--line);font-size:.84rem;color:var(--mute)}
.by{text-decoration:none;color:var(--mute);padding:11px 0;display:inline-block}
.by b{color:var(--orange);font-weight:800}
.by:hover{color:var(--soft)}

/* Anchor targets must clear the sticky header. Lenis handles this on desktop with
   its own -96 offset, but Lenis is desktop only, so on a phone a tapped nav link
   landed the section 70 to 76px BEHIND the header. scroll-margin-top fixes the
   native path and is harmless when Lenis is driving. */
section[id],[id]:target{scroll-margin-top:92px}
@media (max-width:640px){ section[id],[id]:target{scroll-margin-top:84px} }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pl-in,.enq-in{grid-template-columns:1fr}
  .jobs,.qs{grid-template-columns:repeat(2,1fr)}
  .day{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .nav,.hd-cta{display:none}
  .burger{display:flex}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  section{padding:52px 0}
  .hero{padding-top:34px}
  .hero .acts .btn{width:100%}
  .jobs,.qs,.day{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .pl-nums{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1fr;gap:26px}
  .cnote{font-size:.8rem;padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,[data-cascade] .word{transition:none;opacity:1;transform:none;filter:none}
  .btn:hover,.job:hover{transform:none}
}