/* ============================================================
   GET FENCED CONSTRUCTION — stylesheet
   ============================================================ */

:root{
  --ink:        #14161a;   /* near-black charcoal */
  --ink-2:      #1d2026;
  --ink-3:      #262a32;
  --steel:      #3a3f49;
  --line:       rgba(255,255,255,.10);
  --paper:      #f6f4f0;   /* warm off-white */
  --paper-2:    #ece8e1;
  --muted:      #6c7180;
  --muted-d:    #9aa0ad;   /* muted on dark */
  --amber:      #e07a2b;   /* cedar / warm accent */
  --amber-2:    #c9611a;
  --amber-soft: rgba(224,122,43,.14);
  --white:      #ffffff;
  --radius:     18px;
  --radius-sm:  12px;
  --shadow:     0 24px 60px -20px rgba(10,12,16,.45);
  --shadow-sm:  0 12px 30px -12px rgba(10,12,16,.35);
  --ease:       cubic-bezier(.16,.84,.36,1);
  --sans:       'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cond:       'Barlow Condensed', var(--sans);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.05; font-family:var(--cond); letter-spacing:.5px; text-transform:uppercase; }
h2{ font-size:clamp(2rem,4.6vw,3.4rem); }
p{ margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.2px;
  padding:.8em 1.5em; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap; line-height:1;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-solid{ background:var(--amber); color:#fff; box-shadow:0 10px 24px -10px rgba(224,122,43,.8); }
.btn-solid:hover{ background:var(--amber-2); box-shadow:0 14px 30px -10px rgba(224,122,43,.9); }
.btn-outline{ border-color:currentColor; color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-outline-light{ color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-ghost{ background:transparent; color:inherit; padding:.6em 1em; }
.btn-lg{ font-size:1.02rem; padding:1em 1.9em; }
.btn-block{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding:.5rem 0;
}
.site-header.scrolled{
  background:rgba(18,20,24,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -18px rgba(0,0,0,.6);
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:.55rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:#fff; }
.brand-mark{ color:var(--amber); display:grid; place-items:center; }
.brand-text{ font-family:var(--cond); font-weight:700; font-size:1.35rem; line-height:.9; letter-spacing:.5px; text-transform:uppercase; display:flex; flex-direction:column; }
.brand-sub{ font-size:.62rem; letter-spacing:3.5px; color:var(--amber); font-weight:600; }
.brand-logo{ height:36px; width:auto; display:block; }
.brand-logo-footer{ height:42px; }

.nav-links{ display:flex; gap:.35rem; }
.nav-links a{
  color:rgba(255,255,255,.82); font-weight:500; font-size:.95rem;
  padding:.5rem .9rem; border-radius:100px; position:relative; transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:#fff; background:rgba(255,255,255,.08); }

.nav-actions{ display:flex; align-items:center; gap:.5rem; }
.btn-call{ color:#fff; }
.btn-call:hover{ color:var(--amber); }
.nav-toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0; }
.nav-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease); }

/* tap-anywhere-outside backdrop for the mobile menu (sits under the header's z-index:100) */
.nav-scrim{
  position:fixed; inset:0; z-index:99; background:rgba(10,12,16,.55);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.nav-scrim.show{ opacity:1; pointer-events:auto; }
@media (min-width:961px){ .nav-scrim{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--ink); }
.hero-bg{
  position:absolute; inset:0;
  background:url('assets/img/hero-2.webp') center 55% / cover no-repeat;
  filter:blur(3px) saturate(1.05);
  transform:scale(1.06);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,17,21,.96) 0%, rgba(15,17,21,.85) 38%, rgba(15,17,21,.45) 68%, rgba(15,17,21,.25) 100%),
    linear-gradient(180deg, rgba(15,17,21,.5) 0%, rgba(15,17,21,0) 30%, rgba(15,17,21,.55) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:7rem 1.5rem 6rem; width:100%; }
.hero-content{ max-width:640px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#fff; font-size:.82rem; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  background:rgba(255,255,255,.08); border:1px solid var(--line);
  padding:.5rem .9rem; border-radius:100px; margin-bottom:1.5rem;
}
.stars-inline{ color:var(--amber); letter-spacing:2px; }
.hero h1{
  color:#fff; font-size:clamp(2.9rem,7vw,5.4rem); line-height:.94; margin-bottom:1.3rem;
}
.hero h1 .accent{ color:var(--amber); }
.hero-lead{ color:rgba(255,255,255,.82); font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:540px; margin-bottom:2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.5rem; }
.hero-cta .btn-outline{ color:#fff; border-color:rgba(255,255,255,.55); }
.hero-cta .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.hero-badges{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.8rem;
  border-top:1px solid var(--line); padding-top:1.5rem;
}
.hero-badges li{ color:rgba(255,255,255,.7); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; display:flex; flex-direction:column; gap:.15rem; }
.badge-num{ color:#fff; font-family:var(--cond); font-size:1.5rem; font-weight:700; letter-spacing:.5px; }

.scroll-hint{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  color:rgba(255,255,255,.6); font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
}
.scroll-hint svg{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.06s; }
.reveal:nth-child(3){ transition-delay:.12s; }
.reveal:nth-child(4){ transition-delay:.18s; }
.reveal:nth-child(5){ transition-delay:.24s; }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.section-eyebrow{
  display:inline-block; color:var(--amber); font-weight:700; font-size:.8rem;
  letter-spacing:3px; text-transform:uppercase; margin-bottom:.7rem;
}
.section-eyebrow.light{ color:var(--amber); }

/* ============================================================
   FENCE TYPES — slim material strip between the hero and services
   ============================================================ */
.fence-types{
  position:relative; color:#fff; padding:3.2rem 1.5rem 3rem;
  background:linear-gradient(180deg, #101216 0%, var(--ink) 100%);
  overflow:hidden;
}
.fence-types::before{
  content:''; position:absolute; top:-40%; left:-8%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,122,43,.10), transparent 65%); pointer-events:none;
}
.ft-inner{ position:relative; max-width:1240px; margin:0 auto; }
.ft-head{ text-align:center; margin-bottom:1.6rem; }
.ft-head h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); }

.ft-row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
}
.ft-card{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--ink-3);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.ft-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ft-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,14,18,0) 42%, rgba(12,14,18,.5) 68%, rgba(10,12,16,.88) 100%);
}
.ft-name{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:.7rem .85rem .8rem;
  font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  font-size:clamp(.98rem,1.25vw,1.18rem); line-height:1.1; color:#fff;
}
.ft-name::before{
  content:''; display:block; width:24px; height:3px; border-radius:3px;
  background:var(--amber); margin-bottom:.45rem; transition:width .4s var(--ease);
}
.ft-card:hover{ transform:translateY(-6px); border-color:rgba(224,122,43,.45); box-shadow:var(--shadow); }
.ft-card:hover img{ transform:scale(1.07); }
.ft-card:hover .ft-name::before{ width:44px; }

/* ============================================================
   SERVICES — horizontal scroll
   ============================================================ */
.services{ background:var(--ink); color:#fff; position:relative; }
.services-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; padding:1rem 0;
}
.services-head{ max-width:1240px; margin:0 auto; padding:0 1.5rem; width:100%; margin-bottom:2rem; }
.services-head h2{ color:#fff; }
.services-progress-hint{ color:var(--muted-d); font-size:.9rem; margin-top:.5rem; letter-spacing:.5px; }
.services-progress-hint span{ color:var(--amber); font-weight:700; font-variant-numeric:tabular-nums; }
.services-progress{ height:3px; background:rgba(255,255,255,.1); border-radius:3px; margin-top:1rem; max-width:320px; overflow:hidden; }
.services-progress span{ display:block; height:100%; width:20%; background:var(--amber); border-radius:3px; transition:width .15s linear; }

.services-track{
  display:flex; gap:1.6rem; padding:0 max(1.5rem, calc((100vw - 1240px)/2 + 1.5rem)); will-change:transform;
  -webkit-overflow-scrolling:touch;
}
.service-card{
  flex:0 0 min(420px, 82vw); min-height:clamp(360px,52vh,460px);
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem; position:relative; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
}
a.service-card{ color:inherit; }
.service-media{
  margin:-2.2rem -2.2rem 1.4rem; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0; position:relative; background:var(--ink-3);
}
.service-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.service-card:hover .service-media img{ transform:scale(1.05); }
.service-num{ z-index:1; }
.service-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%, var(--amber-soft), transparent 55%);
  opacity:0; transition:opacity .4s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); border-color:rgba(224,122,43,.45); box-shadow:var(--shadow); }
.service-card:hover::before{ opacity:1; }
.service-num{
  position:absolute; top:1.4rem; right:1.6rem; font-family:var(--cond); font-weight:700;
  font-size:3.4rem; color:rgba(255,255,255,.06); line-height:1;
}
.service-icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:var(--amber-soft); color:var(--amber); margin-bottom:1.4rem;
}
.service-icon svg{ width:28px; height:28px; }
.service-card h3{ color:#fff; font-size:1.7rem; margin-bottom:.7rem; }
.service-card p{ color:var(--muted-d); font-size:.98rem; margin-bottom:1.2rem; }
.service-list{ list-style:none; margin:0; padding:0; margin-top:auto; display:grid; gap:.55rem; }
.service-list li{ color:rgba(255,255,255,.8); font-size:.92rem; padding-left:1.5rem; position:relative; }
.service-list li::before{
  content:''; position:absolute; left:0; top:.5em; width:8px; height:8px;
  background:var(--amber); border-radius:2px; transform:rotate(45deg);
}
.service-cta{
  display:flex; align-items:center; gap:.5rem; margin-top:1.4rem; padding-top:1.2rem;
  border-top:1px solid var(--line); color:var(--amber); font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:1px; transition:gap .3s var(--ease);
}
.service-cta svg{ flex:0 0 auto; transition:transform .3s var(--ease); }
.service-card:hover .service-cta{ gap:.8rem; color:var(--amber-2); }
.service-card:hover .service-cta svg{ transform:translateX(4px); }

/* dots + swipe nudge below the track — mobile carousel only (see the max-width:900px block) */
.services-swipe{ display:none; }

/* ============================================================
   OUR WORK
   ============================================================ */
.work{ background:var(--paper); padding:6rem 1.5rem; }
.work-head{ max-width:1240px; margin:0 auto 3rem; text-align:center; }
.work-head p{ color:var(--muted); max-width:620px; margin:1rem auto 0; }

.work-group{ max-width:1240px; margin:0 auto; }
.work-group + .work-group{ margin-top:3.2rem; }
.work-group-title{
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--cond); font-size:1.5rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink); margin-bottom:1.3rem;
}
.work-group-title::before{ content:''; width:34px; height:3px; background:var(--amber); border-radius:3px; flex:0 0 auto; }

.work-row{ display:grid; gap:1.2rem; align-items:start; }
.work-row.cols-3{ grid-template-columns:repeat(3,1fr); }
.work-row.cols-2{ grid-template-columns:repeat(2,1fr); }
.work-item{
  margin:0; overflow:hidden; border-radius:var(--radius); background:#dedad3;
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.work-item:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
/* uniform frame per group — every photo in a group is the exact same shape */
.work-item img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.work-row.cols-3 .work-item{ aspect-ratio:4/5; }   /* portraits, matched */
.work-row.cols-2 .work-item{ aspect-ratio:3/2; }   /* landscapes, matched */

/* --- scroll-reveal + gentle image settle --- */
.work-item{ opacity:0; transform:translateY(34px) scale(.97); }
.work-item.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow .5s var(--ease); }
.work-item img{ transform:scale(1.14); transition:transform 1.1s var(--ease); }
.work-item.in img{ transform:scale(1); }
.work-item.in:hover img{ transform:scale(1.06); }
/* stagger across a row */
.work-row .work-item:nth-child(2){ transition-delay:.12s; }
.work-row .work-item:nth-child(2).in img{ transition-delay:.12s; }
.work-row .work-item:nth-child(3){ transition-delay:.24s; }
.work-row .work-item:nth-child(3).in img{ transition-delay:.24s; }

@media(max-width:800px){ .work-row.cols-3{ grid-template-columns:1fr 1fr; } }

/* ---- mobile: one lead photo per group, the rest live in the lightbox ---- */
.work-more{ display:none; }
@media(max-width:700px){
  .work-row.cols-3, .work-row.cols-2{ grid-template-columns:1fr; }
  .work-row .work-item:nth-child(n+2){ display:none; }
  .work-row.cols-3 .work-item, .work-row.cols-2 .work-item{ aspect-ratio:4/3; }
  .work-item{ cursor:pointer; }
  .work-more{
    display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
    padding:0; border:0; border-bottom:1px solid rgba(201,97,26,.4); background:none;
    font-family:var(--sans); font-size:.92rem; font-weight:700; line-height:1.7;
    color:var(--amber-2); cursor:pointer;
  }
  .work-more svg{ flex:0 0 auto; }
}

/* ---- fullscreen swipeable lightbox (native scroll-snap, no library) ---- */
body.lb-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(10,12,16,.97);
}
.lb-track{
  display:flex; width:100%; height:100%;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.lb-track::-webkit-scrollbar{ display:none; }
.lb-slide{ flex:0 0 100%; scroll-snap-align:center; display:grid; place-items:center; padding:4rem 1rem; }
.lb-slide img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:10px; }
.lb-close{
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(6px);
}
.lb-close:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.lb-counter{
  position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  padding:.35rem .85rem; border-radius:100px; background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.9); font-size:.78rem; font-weight:600; letter-spacing:2px;
  font-variant-numeric:tabular-nums; backdrop-filter:blur(6px);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{ background:var(--paper-2); padding:6rem 1.5rem; overflow:hidden; }
.reviews-head{
  max-width:1240px; margin:0 auto 2.5rem; display:flex; align-items:flex-end;
  justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.rating-summary{ display:flex; align-items:center; gap:.9rem; background:#fff; padding:1rem 1.4rem; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.google-g-lg{ flex:0 0 auto; }
.rating-score{ font-family:var(--cond); font-weight:700; font-size:3.2rem; line-height:1; color:var(--ink); }
.rating-meta .stars{ color:#FBBC04; letter-spacing:2px; font-size:1.1rem; }
.rating-meta span{ color:var(--muted); font-size:.85rem; }

.reviews-viewport{ max-width:1240px; margin:0 auto; overflow:hidden; }
.reviews-track{ display:flex; gap:1.4rem; transition:transform .6s var(--ease); }
/* staggered card entrance when the reviews section scrolls in */
.reviews-track .review-card{ opacity:0; transform:translateY(36px); }
.reviews-track.in .review-card{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reviews-track.in .review-card:nth-child(1){ transition-delay:.05s; }
.reviews-track.in .review-card:nth-child(2){ transition-delay:.17s; }
.reviews-track.in .review-card:nth-child(3){ transition-delay:.29s; }
.reviews-track.in .review-card:nth-child(4){ transition-delay:.41s; }
.review-card{
  flex:0 0 calc((100% - 2.8rem)/3); background:#fff; border-radius:var(--radius);
  padding:2rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.9rem;
  border:1px solid rgba(0,0,0,.04); position:relative; min-height:280px;
}
.review-g{ position:absolute; top:2rem; right:2rem; }
.review-stars{ color:#FBBC04; letter-spacing:2px; font-size:1.05rem; padding-right:1.6rem; }
.review-text-wrap{ flex:1; }
.review-text{ color:#33373f; font-size:1rem; margin:0; }
.review-text{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.review-text.expanded{ -webkit-line-clamp:unset; overflow:visible; }
.review-readmore{
  border:none; background:none; padding:.4rem 0 0; margin:0; color:var(--amber-2); font-weight:700;
  font-size:.85rem; cursor:pointer; font-family:var(--sans);
}
.review-readmore:hover, .review-readmore:focus-visible{ text-decoration:underline; }
.review-author{ display:flex; align-items:center; gap:.8rem; border-top:1px solid var(--paper-2); padding-top:1rem; }
.review-avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  color:#fff; font-family:var(--cond); font-weight:700; font-size:1.2rem;
}
.review-name{ font-weight:700; color:var(--ink); font-size:.98rem; line-height:1.2; }
.review-date{ color:var(--muted); font-size:.82rem; }

.reviews-controls{ max-width:1240px; margin:2.5rem auto 0; display:flex; align-items:center; justify-content:center; gap:1rem; }
.rev-arrow{
  width:50px; height:50px; border-radius:50%; border:1.5px solid rgba(0,0,0,.15); background:#fff;
  color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:.25s var(--ease);
}
.rev-arrow:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }
.rev-arrow:disabled{ opacity:.3; cursor:not-allowed; }
.btn-seemore{ min-width:180px; }

.reviews-google-link{ max-width:1240px; margin:1.4rem auto 0; text-align:center; }
.google-reviews-link{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.88rem;
  font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:.2s var(--ease);
}
.google-reviews-link:hover, .google-reviews-link:focus-visible{ color:var(--ink); border-bottom-color:var(--ink); }

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta{ background:var(--ink); color:#fff; padding:6rem 1.5rem; position:relative; overflow:hidden; }
.cta::before{
  content:''; position:absolute; top:-30%; right:-10%; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,122,43,.16), transparent 65%); pointer-events:none;
}
.cta-inner{
  max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; position:relative;
}
.cta-copy h2{ color:#fff; margin:.4rem 0 1rem; }
.cta-copy p{ color:var(--muted-d); max-width:460px; margin-bottom:2rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* panel holds the booking form */
.cta-panel{ position:relative; min-height:340px; }
.booking-card{
  background:#fff; color:var(--ink); border-radius:var(--radius); padding:2.2rem; box-shadow:var(--shadow);
  animation:cardIn .5s var(--ease);
}
.booking-card h3{ font-size:1.5rem; margin-bottom:1.4rem; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{ opacity:1; transform:none;} }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field span{ font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:.75rem .9rem; border:1.5px solid var(--paper-2); border-radius:var(--radius-sm);
  background:var(--paper); transition:.2s var(--ease); width:100%; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--amber); background:#fff; box-shadow:0 0 0 4px var(--amber-soft);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#0f1115; color:#fff; padding:4rem 1.5rem 1.5rem; }
.footer-inner{
  max-width:1240px; margin:0 auto; display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line);
}
.brand-footer{ margin-bottom:1.1rem; }
.footer-brand p{ color:var(--muted-d); max-width:320px; margin-bottom:1rem; }
.footer-rating{ color:rgba(255,255,255,.8); font-size:.9rem; }
.footer-rating .stars{ color:var(--amber); letter-spacing:2px; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.social-icon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); transition:.2s var(--ease);
}
.social-icon:hover, .social-icon:focus-visible{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
.social-icon:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.footer-col h4{ font-family:var(--cond); font-size:1.05rem; letter-spacing:1.5px; color:var(--amber); margin-bottom:1.1rem; }
.footer-col a, .footer-plain{ display:block; color:rgba(255,255,255,.72); font-size:.94rem; padding:.3rem 0; transition:color .2s var(--ease); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  max-width:1240px; margin:1.5rem auto 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  color:var(--muted-d); font-size:.85rem;
}
/* ============================================================
   SERVICE DETAIL PAGE
   ============================================================ */
.svc-breadcrumb{
  position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:6.5rem 1.5rem 0;
}
.svc-breadcrumb a{
  display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.75);
  font-size:.88rem; font-weight:500; transition:color .2s var(--ease);
}
.svc-breadcrumb a:hover{ color:var(--amber); }

.svc-hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; padding-bottom:4.5rem; }
.svc-hero-media{
  position:relative; z-index:2; max-width:1240px; margin:2rem auto 0; padding:0 1.5rem;
}
.svc-hero-media figure{
  margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:21/9; background:var(--ink-3);
}
.svc-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* portrait source photo — a taller band keeps the whole structure in frame */
.svc-hero-media figure.tall{ aspect-ratio:16/9; }
.svc-hero-content{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:1.6rem 1.5rem 0; }
.svc-hero-content h1{ color:#fff; font-size:clamp(2.4rem,5.2vw,4rem); margin:.6rem 0 1rem; }
.svc-hero-lead{ color:var(--muted-d); font-size:1.1rem; max-width:640px; }
.svc-hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.svc-hero-cta .btn-outline{ color:#fff; border-color:rgba(255,255,255,.55); }
.svc-hero-cta .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.svc-body{ background:var(--paper); padding:5rem 1.5rem; }
.svc-body-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:3.5rem; align-items:start; }
.svc-body-inner.single{ grid-template-columns:1fr; max-width:900px; }
.svc-desc h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:1.2rem; }
.svc-desc p{ color:var(--muted); margin-bottom:1.1rem; font-size:1.02rem; }
.svc-desc p:last-child{ margin-bottom:0; }

.svc-side{ display:flex; flex-direction:column; gap:1.6rem; }
.svc-side-photo{
  margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  aspect-ratio:4/3; background:#dedad3;
}
.svc-side-photo img{ width:100%; height:100%; display:block; object-fit:cover; }

/* fencing types band — only on the services a fence material actually applies to.
   Reuses the .ft-row / .ft-card tiles from the home page strip. */
.svc-materials{
  position:relative; color:#fff; padding:3.4rem 1.5rem 3.2rem; overflow:hidden;
  background:linear-gradient(180deg, var(--ink) 0%, #101216 100%);
}
.svc-materials::before{
  content:''; position:absolute; top:-45%; right:-6%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,122,43,.10), transparent 65%); pointer-events:none;
}
.svc-materials-inner{ position:relative; max-width:1240px; margin:0 auto; }
.svc-materials-head{ text-align:center; margin-bottom:1.6rem; }
.svc-materials-head h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.2rem); }
.svc-materials-head p{ color:var(--muted-d); max-width:620px; margin:.9rem auto 0; font-size:.98rem; }

.svc-why{ background:var(--paper-2); padding:5rem 1.5rem; background-size:cover; background-position:center; }
.svc-why-inner{ max-width:1240px; margin:0 auto; }
.svc-why h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:2.2rem; text-align:center; }
.svc-why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; }
.svc-why-card{
  background:#fff; border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm);
}
.svc-why-card h3{ font-size:1.15rem; color:var(--ink); margin-bottom:.6rem; text-transform:none; letter-spacing:0; font-family:var(--sans); font-weight:700; }
.svc-why-card p{ color:var(--muted); font-size:.94rem; }

.svc-faq{ background:var(--paper); padding:5rem 1.5rem; }
.svc-faq-inner{ max-width:860px; margin:0 auto; }
.svc-faq h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:2.2rem; text-align:center; }
.svc-faq-item{ border-bottom:1px solid var(--paper-2); padding:1.6rem 0; }
.svc-faq-item:first-child{ padding-top:0; }
.svc-faq-item h3{
  font-family:var(--sans); font-weight:700; font-size:1.05rem; text-transform:none;
  letter-spacing:0; color:var(--ink); margin-bottom:.6rem;
}
.svc-faq-item p{ color:var(--muted); font-size:.98rem; }

.svc-cta{ background:var(--ink); color:#fff; padding:5rem 1.5rem; text-align:center; background-size:cover; background-position:center; }
.svc-cta-inner{ max-width:680px; margin:0 auto; }
.svc-cta h2{ color:#fff; margin:.6rem 0 1rem; }
.svc-cta p{ color:var(--muted-d); margin-bottom:2rem; }
.svc-cta-actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

.svc-other{ background:var(--paper); padding:0 1.5rem 5rem; }
.svc-other-inner{ max-width:1240px; margin:0 auto; }
.svc-other h2{ font-size:1.3rem; margin-bottom:1.4rem; }
.svc-other-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.svc-other-link{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:#fff; border-radius:var(--radius-sm); padding:1.1rem 1.3rem; box-shadow:var(--shadow-sm);
  color:var(--ink); font-weight:600; font-size:.95rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.svc-other-link:hover{ transform:translateY(-3px); box-shadow:var(--shadow); color:var(--amber-2); }

@media (max-width:860px){
  .svc-body-inner{ grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .nav-links{
    position:fixed; top:0; right:0; height:100svh; width:min(300px,80vw);
    background:rgba(16,18,22,.98); backdrop-filter:blur(14px);
    flex-direction:column; justify-content:center; gap:.5rem; padding:2rem;
    transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:var(--shadow);
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1.15rem; padding:.7rem 1rem; }
  .nav-toggle{ display:flex; }
  .btn-call span{ display:none; }
  .cta-inner{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

/* ---- fence types: five tiles laid out as a centered 3-over-2 grid on phones ---- */
@media (max-width:900px){
  .fence-types{ padding:2.2rem 0 2rem; }
  .svc-materials{ padding:2.6rem 0 2.4rem; }
  .ft-inner, .svc-materials-inner{ max-width:none; }
  .ft-head, .svc-materials-head{ padding:0 1.25rem; margin-bottom:1rem; }
  .svc-materials-head p{ font-size:.92rem; margin-top:.6rem; }
  .ft-row{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:.6rem; padding:0 1.25rem .25rem;
  }
  .ft-card{ flex:0 0 calc((100% - 1.2rem)/3); }
  .ft-name{ padding:.45rem .5rem .5rem; font-size:.72rem; letter-spacing:.5px; }
  .ft-name::before{ width:14px; height:2px; margin-bottom:.3rem; }
}

/* ---- services: kill the desktop scroll-jack pin, it's a native swipe carousel below 900px (see script.js) ---- */
@media (max-width:900px){
  .services-sticky{
    position:static; height:auto; overflow:visible;
    justify-content:flex-start; padding:2.4rem 0 .5rem;
  }
  .services-head{ margin-bottom:1.2rem; }
  .services-progress{ margin-top:.8rem; }

  /* The whole card has to clear the browser chrome in one screen, so the icon and the
     bullet list are dropped here — the photo, title, blurb and CTA carry the card. */
  .services-track{ gap:1rem; }
  .service-card{
    flex:0 0 min(360px,78vw);
    min-height:0; padding:1.15rem 1.25rem 1.25rem; border-radius:14px;
  }
  .service-media{ margin:-1.15rem -1.25rem 1rem; aspect-ratio:16/9; border-radius:14px 14px 0 0; }
  .service-icon{ display:none; }
  .service-list{ display:none; }
  .service-num{ top:.85rem; right:1.1rem; font-size:2.4rem; }
  .service-card h3{ font-size:1.3rem; margin-bottom:.4rem; }
  .service-card p{
    font-size:.9rem; margin-bottom:.9rem;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .service-cta{ margin-top:auto; padding-top:.85rem; font-size:.78rem; }

  .services-swipe{
    display:flex; align-items:center; justify-content:center; gap:1rem;
    margin-top:1.1rem; padding:0 1.25rem;
  }
  .services-dots{ display:flex; gap:.15rem; }
  .services-dots button{
    width:22px; height:22px; padding:0; border:0; background:none;
    cursor:pointer; display:grid; place-items:center;
  }
  .services-dots button::before{
    content:''; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25);
    transition:width .3s var(--ease), background .3s var(--ease);
  }
  .services-dots button.active::before{ width:20px; border-radius:100px; background:var(--amber); }
  .services-swipe-hint{
    display:inline-flex; align-items:center; gap:.35rem; color:var(--muted-d);
    font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    transition:opacity .35s var(--ease);
  }
  .services-swipe-hint svg{ animation:nudge 1.5s ease-in-out infinite; color:var(--amber); }
  .services-swipe-hint.done{ opacity:0; }
}
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }

@media (max-width:800px){
  /* ---- hero: everything has to land inside one svh, above the scroll hint.
     The extra bottom padding is what lifts the content clear of it. ---- */
  .hero-inner{ padding:4.75rem 1.25rem 4.5rem; }
  .hero h1{ font-size:clamp(2.3rem,8.6vw,3.2rem); margin-bottom:1rem; }
  .eyebrow{ margin-bottom:.85rem; }
  .hero-lead{ font-size:.98rem; margin-bottom:1.2rem; }
  .hero-cta{ margin-bottom:1.3rem; }
  .hero-badges{ padding-top:1rem; }
  /* the rating and the metal/wood claim are both already made above — keep only the local one */
  .hero-badges li:nth-child(1), .hero-badges li:nth-child(2){ display:none; }

  .work{ padding:3rem 1.25rem; }
  .work-head{ margin-bottom:2rem; }
  .work-group + .work-group{ margin-top:2.2rem; }
  .work-row{ gap:.8rem; }

  .reviews{ padding:3rem 1.25rem; }
  .reviews-head{ margin-bottom:1.6rem; }
  .reviews-controls{ margin-top:1.6rem; }
  .review-card{ flex:0 0 calc((100% - 1.4rem)/2); padding:1.5rem; min-height:0; }

  .cta{ padding:3rem 1.25rem; }
  .cta-panel{ min-height:0; }

  .svc-breadcrumb{ padding:5.5rem 1.25rem 0; }
  .svc-hero{ padding-bottom:2.5rem; }
  .svc-hero-media{ margin-top:1.25rem; }
  .svc-hero-media figure{ aspect-ratio:16/10; }
  .svc-body{ padding:3rem 1.25rem; }
  .svc-why{ padding:3rem 1.25rem; }
  .svc-why h2{ margin-bottom:1.4rem; }
  .svc-why-grid{ gap:1rem; }
  .svc-faq{ padding:3rem 1.25rem; }
  .svc-faq h2{ margin-bottom:1.4rem; }
  .svc-faq-item{ padding:1.2rem 0; }
  .svc-cta{ padding:3rem 1.25rem; }
  .svc-other{ padding:0 1.25rem 3rem; }

  .site-footer{ padding:2.5rem 1.25rem 1.25rem; }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:1.6rem 1rem; padding-bottom:2rem; }
  .footer-brand{ grid-column:1/-1; }
  .btn-contact{ display:none; }
}
/* short phones (SE-class) — claw back the last ~25px so the hero still fits one screen */
@media (max-width:800px) and (max-height:700px){
  .hero-inner{ padding:4.25rem 1.25rem 3.75rem; }
  .hero-lead{ margin-bottom:1rem; }
  .hero-cta{ margin-bottom:1.1rem; }
}

@media (max-width:560px){
  .review-card{ flex:0 0 100%; }
  .hero-badges{ gap:1.2rem; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .footer-inner{ grid-template-columns:1fr; gap:1.6rem; }
  .footer-brand{ grid-column:auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}