/* Smick Fencing — Concept 1 "Straight Lines"
   Own design system. Warm timber and paper, editorial, unhurried.

   There is no existing Smick Fencing brand to pull from: no website, no socials,
   no registered business name. So this palette is a PROPOSAL, not an extraction.
   It is built from the two materials the trade actually works in, dressed timber
   and charcoal steel, so it is defensible rather than arbitrary.
   --tan is the decorative accent. --tan-txt is the same hue darkened until it
   passes contrast as text on paper, and --tan-btn until white text passes on it.
   Never use --tan for words. */

:root{
  --ink:#171A19;
  --ink-2:#2C3331;
  --paper:#F7F3ED;
  --paper-2:#EFE8DE;
  --tan:#C4762F;
  --tan-txt:#8A4F17;
  --tan-btn:#A05F1F;
  --line:#DDD4C7;
  --line-2:#C9BCA9;
  --muted:#5B615E;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --disp:'Fraunces','Iowan Old Style',Georgia,serif;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
svg{display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0}
p{margin:0}
.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(--ink);color:#EDE7DE;padding:11px 18px;font-size:.83rem;line-height:1.5}
.cnote strong{color:#E8A45E}
.cnote span{max-width:74ch}
.cnote button{flex:0 0 auto;background:none;border:0;color:#C7C0B6;font-size:1.35rem;
  line-height:1;cursor:pointer;padding:11px 14px;margin:-9px -9px -9px 0;border-radius:8px}
.cnote button:hover{color:#fff;background:rgba(255,255,255,.1)}
.cnote[hidden]{display:none}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(247,243,237,.93);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:18px;min-height:72px}
.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}
.brand b{display:block;font-family:var(--disp);font-size:1.09rem;font-weight:600;letter-spacing:-.02em}
.brand i{display:block;font-style:normal;font-size:.685rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:1px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:.93rem;color:var(--ink-2);padding:10px 0;position:relative}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--tan);transition:right .28s ease}
.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:11px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:19px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.mnav{display:none;border-bottom:1px solid var(--line);background:var(--paper)}
.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(--ink)}
.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:12px;text-decoration:none;font-size:.95rem;
  font-weight:600;border:1px solid transparent;cursor:pointer;font-family:var(--sans);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.btn svg{width:17px;height:17px}
.btn-pri{background:var(--tan-btn);color:#fff;box-shadow:0 6px 20px rgba(160,95,31,.24)}
.btn-pri:hover{background:#8E5319;transform:translateY(-2px)}
.btn-gho{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-gho:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-sm{padding:11px 18px;font-size:.9rem}

/* ---------- motion ---------- */
.sprog{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--tan);
  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}
.html-noscript .reveal{opacity:1;transform:none;filter:none}
[data-cascade] .word{display:inline-block;opacity:0;transform:translateY(24px);filter:blur(7px);
  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,104px) 0}
.eyebrow{font-size:.71rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tan-txt);margin-bottom:13px}
.s-head{max-width:62ch;margin-bottom:clamp(30px,4.5vw,48px)}
.s-head h2{font-size:clamp(1.85rem,4.4vw,2.85rem)}
.s-head p{margin-top:15px;color:var(--muted);font-size:1.03rem}
.chip{display:inline-block;margin-left:10px;padding:5px 11px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line-2);font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);vertical-align:middle}

/* ---------- hero ---------- */
.hero{padding-top:clamp(46px,6vw,74px);padding-bottom:0;position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,60px);align-items:center}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.4rem);letter-spacing:-.03em}
.hero h1 em{font-style:italic;color:var(--tan-txt)}
.hero .lede{margin-top:22px;font-size:1.11rem;color:var(--muted);max-width:50ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.hero .undr{margin-top:22px;font-size:.87rem;color:var(--muted)}
.hero-art{position:relative;aspect-ratio:5/4.4;border-radius:20px;overflow:hidden;
  background:linear-gradient(168deg,#2C3331,#171A19 62%);border:1px solid var(--line-2)}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%}
.hero-tag{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(23,26,25,.94);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:12px 15px;color:#EDE7DE;font-size:.79rem;line-height:1.5}
.marq{margin-top:clamp(46px,6vw,74px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:17px 0;overflow:hidden}
.marq-in{display:flex;gap:44px;white-space:nowrap;font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);animation:marq 34s linear infinite}
.marq-in span{display:inline-flex;align-items:center;gap:44px}
.marq-in b{font-weight:600;color:var(--ink-2)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- services ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{padding:26px 24px 28px;background:#fff;border:1px solid var(--line);border-radius:16px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.svc:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(23,26,25,.09)}
.svc .ic{width:46px;height:46px;border-radius:12px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:17px;color:var(--tan-txt)}
.svc .ic svg{width:24px;height:24px}
.svc h3{font-size:1.2rem;margin-bottom:8px}
.svc p{font-size:.94rem;color:var(--muted)}

/* ---------- style explorer ---------- */
.exp{background:var(--ink);color:#EDE7DE}
.exp .eyebrow{color:#E8A45E}
.exp h2{color:#fff}
.exp .s-head p{color:#ADB4B1}
.exp-in{display:grid;grid-template-columns:290px 1fr;gap:26px;align-items:start}
.exp-list{display:grid;gap:9px}
.exp-b{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 17px;border-radius:13px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);color:#EDE7DE;cursor:pointer;
  font-family:var(--sans);font-size:.96rem;transition:background .2s ease,border-color .2s ease}
.exp-b:hover{background:rgba(255,255,255,.09)}
.exp-b[aria-selected="true"]{background:rgba(232,164,94,.14);border-color:#E8A45E;color:#fff}
.exp-b .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);flex:0 0 auto}
.exp-b[aria-selected="true"] .dot{background:#E8A45E}
.exp-stage{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.11);
  border-radius:18px;padding:clamp(18px,3vw,26px);min-height:340px}
.exp-draw{width:100%;aspect-ratio:16/8;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#20272A,#151A1C)}
.exp-draw svg{width:100%;height:100%}
.exp-body{margin-top:20px}
.exp-body h3{color:#fff;font-size:1.42rem;margin-bottom:9px}
.exp-body p{color:#ADB4B1;font-size:.97rem;max-width:60ch}
.exp-facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.exp-facts li{list-style:none;padding:7px 13px;border-radius:999px;font-size:.8rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);color:#C9CFCC}
.exp-note{margin-top:18px;font-size:.79rem;color:#8E9693;max-width:66ch}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:st}
.step{padding-top:22px;border-top:2px solid var(--line-2);counter-increment:st}
.step::before{content:'0' counter(st);display:block;font-family:var(--disp);font-size:1.5rem;
  color:var(--tan-txt);margin-bottom:9px}
.step h3{font-size:1.14rem;margin-bottom:7px}
.step p{font-size:.93rem;color:var(--muted)}

/* ---------- areas ---------- */
.areas{background:var(--paper-2)}
.area-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,5vw,54px);align-items:center}
.area-list{display:flex;flex-wrap:wrap;gap:10px}
.area-list li{list-style:none;padding:10px 16px;background:#fff;border:1px solid var(--line);
  border-radius:999px;font-size:.92rem}

/* ---------- quotes ---------- */
.qs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.q{padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column}
.q blockquote{margin:0;font-family:var(--disp);font-size:1.13rem;line-height:1.45}
.q .who{margin-top:auto;padding-top:18px;font-size:.85rem;color:var(--muted)}
.q .lbl{display:inline-block;margin-bottom:15px;padding:5px 10px;border-radius:6px;
  background:var(--paper-2);border:1px solid var(--line-2);font-size:.63rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- form ---------- */
.enq-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,56px);align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.4vw,32px)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 15px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--paper);font-family:var(--sans);
  font-size:1rem;color:var(--ink);min-height:52px}
.fld textarea{min-height:112px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--tan-btn);outline-offset:1px}
.form .btn{width:100%}
.form .fine{margin-top:14px;font-size:.79rem;color:var(--muted);line-height:1.55}
.enq-ok{display:none;background:#fff;border:1px solid var(--tan-btn);border-radius:18px;
  padding:clamp(24px,3.6vw,34px)}
.enq-ok.show{display:block}
.enq-ok h3{font-size:1.42rem;margin-bottom:11px}
.enq-ok p{color:var(--muted);font-size:.97rem}
.enq-ok .tick{width:48px;height:48px;border-radius:50%;background:var(--tan-btn);color:#fff;
  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(--paper-2);border:1px solid var(--line-2);
  border-radius:14px;margin-top:20px;font-size:.9rem;color:var(--muted)}
.wrong h4{font-family:var(--sans);font-size:.94rem;font-weight:700;color:var(--ink);margin-bottom:6px}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:#C9CFCC;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.22rem;margin-bottom:6px}
.ft .fsub{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8E9693;margin-bottom:12px}
.ft p{font-size:.92rem;line-height:1.65}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ft ul a{display:block;padding:11px 0;text-decoration:none;font-size:.92rem;color:#C9CFCC}
.ft ul a:hover{color:#fff}
.disc{font-size:.76rem;line-height:1.68;color:#868E8B;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);max-width:none}
.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 rgba(255,255,255,.12);font-size:.85rem;color:#868E8B}
.by{text-decoration:none;color:#868E8B;padding:11px 0;display:inline-block}
.by b{color:#E8A45E;font-weight:700}
.by:hover{color:#C9CFCC}

/* 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){
  .hero-in,.area-in,.enq-in{grid-template-columns:1fr}
  .exp-in{grid-template-columns:1fr}
  .exp-list{grid-template-columns:repeat(2,1fr)}
  .svcs,.qs{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .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{gap:11px}
  .hero .acts .btn{width:100%}
  .svcs,.qs,.steps,.exp-list{grid-template-columns:1fr}
  .exp-draw{aspect-ratio:16/9.5}
  .ft-top{grid-template-columns:1fr;gap:26px}
  .cnote{font-size:.8rem;padding:10px 14px}
  .area-list li{font-size:.88rem;padding:9px 14px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,[data-cascade] .word{transition:none;opacity:1;transform:none;filter:none}
  .marq-in{animation:none}
  .btn:hover,.svc:hover{transform:none}
}