/* Vogel Fencing - design system
   Palette reasoning: this is a 40-year-old Canterbury fencing contractor, not a tech brand.
   Charcoal for structure, a warm timber tone for accent (the product is largely timber), and a
   paper off-white so photography carries the page. No gradients-for-the-sake-of-it. */

:root{
  --ink:#171512;          /* near-black, warm */
  --ink-2:#3d3831;
  --muted:#6d665c;
  --line:#e0dbd2;
  --paper:#faf8f5;
  --white:#fff;
  /* #ff9900 is sampled straight from the client's own logo (orange.png) - it is the brand.
     It is only ever used as a FILL behind dark ink, never as small text on white, because
     orange-on-white is about 2.2:1 and fails WCAG AA. --timber is the darkened text-safe
     sibling used for links and small accent type (3.6:1 on white, 4.9:1 on paper). */
  --brand:#ff9900;
  --brand-dk:#e88700;
  --timber:#b4762c;       /* accent - warm timber, text-safe */
  --timber-dk:#8e5a1d;
  --moss:#3f5540;         /* secondary - Canterbury green */
  --shadow:0 1px 2px rgba(23,21,18,.05), 0 8px 24px rgba(23,21,18,.06);
  --radius:3px;
  --wrap:1180px;
  /* System stack on purpose: no third-party font request, no FOUT, nothing to self-host. */
  --ff:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:var(--ff);color:var(--ink);background:var(--paper);line-height:1.65;
  font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--radius)}
:focus-visible{outline:2px solid var(--timber);outline-offset:2px}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:.6em}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin-bottom:1.1em;max-width:68ch}
.lede{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--ink-2)}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--timber);display:block;margin-bottom:.9em}

/* ---------- buttons ---------- */
/* Brand orange fill with ink text: 11:1 contrast, and it matches the logo exactly. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:var(--ink);font-weight:700;font-size:.95rem;
  padding:14px 26px;border:none;border-radius:var(--radius);text-decoration:none;
  cursor:pointer;transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--brand-dk)}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:10px 18px;font-size:.88rem}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--white);border-color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.92);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:22px;min-height:86px}
/* The client's actual logo file, not a redrawn approximation. It is a tall stacked
   lockup, so it is sized by height and the header bar grows to suit. */
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:62px;width:auto}
.ftr .brand img{height:64px}
.nav{display:flex;gap:15px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:.87rem;font-weight:500;color:var(--ink-2);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--timber)}
.hdr__cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr__phone{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-weight:600;font-size:.92rem;white-space:nowrap}
.hdr__phone:hover{color:var(--timber)}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;
  padding:9px;cursor:pointer}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-m{display:none;flex-direction:column;border-top:1px solid var(--line);background:var(--white)}
.nav-m a{padding:14px 22px;text-decoration:none;border-bottom:1px solid var(--line);font-weight:500}
.nav-m__cta{background:var(--brand);color:var(--ink);font-weight:700;border-bottom:none!important}

@media(max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .nav-m[data-open]{display:flex}
  .hdr__phone span{display:none}
}
@media(max-width:520px){ .hdr__cta .btn{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.78}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(23,21,18,.92) 0%,rgba(23,21,18,.78) 38%,rgba(23,21,18,.34) 72%,rgba(23,21,18,.18) 100%)}
.hero__in{position:relative;z-index:2;padding-top:clamp(64px,11vw,124px);padding-bottom:clamp(64px,11vw,124px)}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:rgba(255,255,255,.82);max-width:52ch;margin-top:18px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero__trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.hero__trust div{font-size:.86rem;color:rgba(255,255,255,.72)}
.hero__trust b{display:block;font-size:1.25rem;color:#fff;font-weight:700;letter-spacing:-.02em}

/* ---------- sections ---------- */
.sec{padding:clamp(52px,8vw,88px) 0}
.sec--paper{background:var(--paper)}
.sec--white{background:var(--white)}
.sec__head{max-width:62ch;margin-bottom:40px}

/* ---------- service cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfc7ba}
.card__img{aspect-ratio:4/3;background:var(--line);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card__img img{transform:scale(1.04)}
.card__body{padding:20px 22px 24px}
.card h3{margin-bottom:.4em}
.card p{font-size:.94rem;color:var(--muted);margin-bottom:.8em}
.card__more{font-size:.86rem;font-weight:600;color:var(--timber)}

/* ---------- prose ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.6em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em}
.prose li{margin-bottom:.45em}
.prose a{color:var(--timber-dk);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--timber)}
.split{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:1.15fr .85fr;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split__media img{border-radius:var(--radius);width:100%}
/* Service pages run long, so the media column would otherwise leave a metre of white space
   below the fold. Sticking it keeps the photo and the phone CTA beside the reader the whole
   way down. Disabled below the breakpoint, where the columns stack. */
@media(min-width:861px){.split__media{position:sticky;top:104px}}

/* callout - used for consent thresholds, compliance notes */
.note{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--timber);
  border-radius:var(--radius);padding:18px 22px;margin:1.6em 0}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink)}

/* ---------- gallery ----------
   Every shot carries a visible caption naming the style it shows, so a visitor can tie the photo
   back to the styles list further up the page. The photo itself is an <a> to the full image, not a
   <button>: with JavaScript off the click still opens the picture, and the lightbox in site.js
   just intercepts it. */
.grid-img{display:grid;gap:20px 14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.shot{margin:0;display:flex;flex-direction:column;gap:9px}
.shot__btn{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  cursor:zoom-in;background:var(--line)}
.shot__btn img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .4s ease}
.shot__btn:hover img{transform:scale(1.04)}
.shot__zoom{position:absolute;right:9px;bottom:9px;display:grid;place-items:center;
  width:32px;height:32px;border-radius:99px;background:rgba(23,21,18,.62);color:#fff;
  opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.shot__btn:hover .shot__zoom,.shot__btn:focus-visible .shot__zoom{opacity:1;transform:none}
/* Coarse pointers get no hover, so the affordance has to be permanent there. */
@media(hover:none){.shot__zoom{opacity:1;transform:none}}
.shot__cap{font-size:.85rem;line-height:1.45;color:var(--muted)}

/* ---------- lightbox ----------
   Markup is created by site.js and only exists when JavaScript is running. */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(12,11,9,.92);padding:clamp(14px,4vw,48px)}
.lb[hidden]{display:none}
.lb__fig{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;
  max-width:min(1180px,100%);max-height:100%}
.lb__fig img{max-height:78vh;width:auto;object-fit:contain;border-radius:var(--radius)}
.lb__cap{color:#f2ede5;font-size:.95rem;text-align:center;max-width:64ch}
.lb__count{color:#8d867a;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.lb__btn{position:absolute;display:grid;place-items:center;width:46px;height:46px;padding:0;
  border:1px solid rgba(255,255,255,.22);border-radius:99px;background:rgba(0,0,0,.4);
  color:#fff;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.lb__btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.lb__btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lb__close{top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px)}
.lb__prev{left:clamp(6px,2vw,20px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(6px,2vw,20px);top:50%;transform:translateY(-50%)}
body.lb-open{overflow:hidden}

/* ---------- areas served ---------- */
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.areas span{font-size:.85rem;background:var(--white);border:1px solid var(--line);
  padding:6px 13px;border-radius:99px;color:var(--ink-2)}

/* ---------- enquiry ---------- */
.enq{background:var(--ink);color:#fff;padding:clamp(52px,8vw,84px) 0}
.enq__grid{display:grid;gap:clamp(30px,5vw,60px);grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:860px){.enq__grid{grid-template-columns:1fr}}
.enq h2{color:#fff}
.enq p{color:rgba(255,255,255,.76)}
.enq__facts{list-style:none;margin:22px 0}
.enq__facts li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.96rem}
.enq__facts a{color:#fff;text-decoration:none;font-weight:600}
.enq__facts a:hover{color:var(--brand)}
.enq__note{font-size:.88rem;color:rgba(255,255,255,.55)!important}

.form{background:var(--white);border-radius:var(--radius);padding:26px}
.form__row{margin-bottom:15px}
.form label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.form input,.form textarea{width:100%;font:inherit;font-size:.95rem;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.form input:focus,.form textarea:focus{border-color:var(--timber);background:#fff;outline:none}
.form textarea{resize:vertical}
.form .btn{width:100%;margin-top:6px}
.form .err{display:block;color:#b3261e;font-size:.8rem;margin-top:5px;
  text-transform:none;letter-spacing:0}
.form .err:empty{display:none}
.form__msg{margin:12px 0 0;font-size:.9rem;min-height:1.2em}
.form__msg.ok{color:#2f7d43}
.form__msg.err{color:#b3261e}
/* Honeypot: off-canvas so no human can reach it, but present in the DOM for bots. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.ftr{background:#11100e;color:rgba(255,255,255,.62);padding:52px 0 0;font-size:.92rem}
.ftr__grid{display:grid;gap:34px;grid-template-columns:1.4fr 1fr 1fr;padding-bottom:38px}
@media(max-width:760px){.ftr__grid{grid-template-columns:1fr}}
.ftr h3{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.ftr a{display:block;text-decoration:none;padding:5px 0;color:rgba(255,255,255,.62)}
.ftr a:hover{color:var(--brand)}
.ftr .brand{margin-bottom:14px}
.ftr__btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 22px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.84rem;color:var(--muted);padding-top:18px;padding-bottom:0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--timber)}

/* Agency credit. Underlined on hover only, so it reads as a credit rather than a nav link. */
.ftr__credit { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.ftr__credit:hover { color: var(--brand); border-bottom-color: currentColor; }


/* ---------- floating contact bar ----------
   Fleet component (see F:\_Websites\CLAUDE.md). Expandable icon stack pinned lower right, built by
   site.js from /api/config, so a field left blank in /dash simply has no icon and the bar shrinks
   to whatever the client actually filled in. Colours ride on the --fb-* custom properties, which
   the JS overrides inline from /dash; the values here are this site's defaults, taken from its own
   palette rather than from the fleet template. */
.floatbar{--fb-bg:var(--brand);--fb-icon:var(--ink);--fb-hover-bg:var(--ink);--fb-hover-icon:var(--brand);
  --fb-size:52px;--fb-gap:10px;
  position:fixed;right:clamp(.85rem,2vw,1.5rem);bottom:clamp(.85rem,2vw,1.5rem);z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:var(--fb-gap)}
.floatbar__list{display:flex;flex-direction:column;gap:var(--fb-gap)}
.floatbar__btn,.floatbar__toggle{width:var(--fb-size);height:var(--fb-size);display:flex;
  align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--fb-bg);
  color:var(--fb-icon);cursor:pointer;text-decoration:none;box-shadow:0 6px 18px rgba(23,21,18,.22);
  transition:background .25s ease,color .25s ease,transform .25s ease}

/* Collapsed: the buttons stay in the DOM but leave the tab order. `visibility`, not `display`, so
   the transition can run and nothing hidden is focusable. --i counts DOWN from the top item, so
   opening cascades upward from the toggle. */
.floatbar__btn{opacity:0;visibility:hidden;transform:translateY(14px) scale(.8);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,visibility .28s,background .25s ease,color .25s ease;
  transition-delay:calc(var(--i,1) * 35ms)}
.floatbar[data-open] .floatbar__btn{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* 🔴 This hover rule MUST come after the [data-open] rule above. In the jedibuilders original it
   did not, and `[data-open] .floatbar__btn{transform:none}` has equal specificity and won on source
   order, so the hover scale silently never fired on the link buttons - only on the toggle. */
.floatbar__btn:hover,.floatbar__btn:focus-visible,
.floatbar[data-open] .floatbar__btn:hover,.floatbar[data-open] .floatbar__btn:focus-visible,
.floatbar__toggle:hover,.floatbar__toggle:focus-visible{
  background:var(--fb-hover-bg);color:var(--fb-hover-icon);transform:scale(1.08)}

.floatbar__toggle svg{transition:transform .3s ease}
.floatbar[data-open] .floatbar__toggle svg{transform:rotate(180deg)}
@media(max-width:560px){ .floatbar{--fb-size:46px;--fb-gap:8px} }
@media(prefers-reduced-motion:reduce){ .floatbar__btn{transition-delay:0ms} }

/* Phone popup - tablet and desktop only, where a tel: link has nowhere useful to go. On a handset
   the click is never intercepted, so this never appears there. */
.phonepop{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:1.25rem;background:rgba(23,21,18,.72);backdrop-filter:blur(4px)}
.phonepop[data-open]{display:flex;animation:phonepop-in .2s ease}
@keyframes phonepop-in{from{opacity:0}to{opacity:1}}
.phonepop__panel{position:relative;background:var(--ink);color:#fff;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:2.4rem 3rem 2.1rem;
  text-align:center;box-shadow:0 18px 48px rgba(0,0,0,.45);max-width:min(92vw,26rem)}
.phonepop__label{margin:0 0 .3rem;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand)}
.phonepop__num{display:inline-block;font-size:clamp(1.8rem,5vw,2.5rem);font-weight:800;
  letter-spacing:-.03em;color:#fff;text-decoration:none;white-space:nowrap}
.phonepop__num:hover{color:var(--brand)}
.phonepop__close{position:absolute;top:.55rem;right:.55rem;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;
  color:rgba(255,255,255,.7);cursor:pointer;transition:background .2s ease,color .2s ease}
.phonepop__close:hover{background:rgba(255,255,255,.1);color:#fff}