/* ============================================================
   Wilco Fencing — site styles
   Palette sampled directly from the logo:
     forest green #1E1E1E · ink #1E1E1E
   Accent is survey marking-paint orange — the one color on a
   job site that isn't green, black, or dirt.
   ============================================================ */

/* ---------- self-hosted fonts (no external requests) ---------- */
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
@font-face{font-family:"Plex Sans";src:url("/assets/fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("/assets/fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("/assets/fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plex-mono-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --g900:#111111;
  --g800:#1E1E1E;   /* brand green, straight off the logo */
  --g700:#333333;
  --g600:#242424;
  --g400:#B9B9B9;
  --ink:#1E1E1E;
  --bone:#F4F3EE;
  --bone-2:#E9E7DF;
  --bone-3:#D8D5CA;
  --galv:#8D9997;
  --galv-lt:#C3CAC8;
  --marker:#1FA24C;
  --accent-deep:#15803A;
  --accent-bright:#43C776;
  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --display:"Archivo",system-ui,sans-serif;
  --body:"Plex Sans",system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--display);font-stretch:118%;
  font-weight:800;line-height:1.02;letter-spacing:-.018em;
  margin:0 0 .5em;text-wrap:balance;color:var(--g900);
}
h1{font-size:clamp(37px,6.1vw,72px)}
h2{font-size:clamp(27px,3.7vw,43px)}
h3{font-size:clamp(19px,2vw,23px);font-stretch:108%;font-weight:700}
p{margin:0 0 1.1em;max-width:66ch}
.lede{font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:#33453B}

.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 14px;
}
.section-dark .eyebrow,.hero .eyebrow{color:var(--accent-bright)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.section{padding:clamp(56px,8vw,104px) 0;position:relative;overflow:hidden}
.section-dark{background:var(--g800);color:var(--bone)}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#C9C9C9}
.section-tint{background:var(--bone-2)}
.narrow{max-width:790px}

/* survey rule — dashed line capped with corner-post markers */
.rule{display:flex;align-items:center;margin:0 0 clamp(26px,4vw,44px)}
.rule::before,.rule::after{content:"";width:9px;height:9px;flex:none;background:var(--marker)}
.rule span{flex:1;height:0;border-top:1px dashed var(--galv)}
.section-dark .rule span{border-top-color:#3A3A3A}

.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.g-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g-2,.g-3{grid-template-columns:1fr}}

/* monogram watermark — brand texture on dark sections */
.wm{
  position:absolute;right:-70px;bottom:-56px;width:min(430px,54vw);
  opacity:.055;pointer-events:none;user-select:none;z-index:0;
}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(6,26,11,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--bone);border-bottom:1px solid #333333;
}
.head-in{
  max-width:var(--wrap);margin:0 auto;padding:11px var(--pad);
  display:flex;align-items:center;gap:22px;
}
.brand{flex:none;display:block;line-height:0}
.brand img{height:44px;width:auto}
@media(max-width:600px){.brand img{height:38px}}
.nav{display:flex;gap:19px;margin-left:auto;flex-wrap:wrap}
.nav a{
  text-decoration:none;font-size:14.5px;font-weight:500;color:#D0D0D0;
  padding:7px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a:focus-visible{color:#fff;border-bottom-color:var(--marker)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--accent)}
.head-cta{
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;
  text-decoration:none;background:var(--marker);color:#0C2010;
  padding:11px 16px;flex:none;white-space:nowrap;
}
.head-cta:hover{background:#28B857}
@media(max-width:980px){.nav{display:none}.head-in{gap:12px}.head-cta{margin-left:auto}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.04em;
  padding:15px 26px;border:2px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--marker);color:#0C2010}
.btn-primary:hover{background:#28B857}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ghost:hover{background:rgba(127,127,127,.14)}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(168deg,#242424 0%,var(--g900) 62%);
  color:var(--bone);position:relative;overflow:hidden;
  padding:clamp(46px,7vw,82px) 0 clamp(54px,8vw,94px);
}
.hero h1{color:#fff}
.hero .lede{color:#C9C9C9;max-width:52ch}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,62px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero-meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#9A9A9A;margin-top:30px;padding-top:16px;border-top:1px dashed #3A3A3A;
}
.hero-sm{padding:clamp(40px,6vw,68px) 0 clamp(44px,6vw,70px)}
.hero-sm h1{font-size:clamp(32px,5.1vw,58px)}

.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#9A9A9A;margin:0 0 18px}
.crumb a{color:#9A9A9A;text-decoration:none}
.crumb a:hover{color:var(--marker)}

/* ---------- animated hero scene (survey -> build -> cycle) ---------- */
.hero-scene{width:100%;height:auto;overflow:visible}
.hero-scene .stage{opacity:0;transition:opacity .55s ease}
.hero-scene .stage.active{opacity:1}
.hero-scene .stagebg{opacity:0;transition:opacity .55s ease}
.hero-scene.on-fence .stagebg{opacity:.05}
/* plat (survey) */
.hero-scene .lot{fill:none;stroke:#3A3A3A;stroke-width:1.5;stroke-dasharray:7 5}
.hero-scene .house{fill:#202020;stroke:#3A3A3A;stroke-width:1.5}
.hero-scene .pline{
  fill:none;stroke:var(--marker);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
}
.hero-scene .plat.active .pline{animation:heroDraw 2.1s .1s cubic-bezier(.4,0,.2,1) forwards}
.hero-scene .cpost{fill:var(--marker);opacity:0}
.hero-scene .plat.active .cpost{animation:heroPop .01s 1.9s forwards}
.hero-scene .dim{font-family:var(--mono);font-size:11px;fill:#9A9A9A;letter-spacing:.06em}
.hero-scene .tag{font-family:var(--mono);font-size:10px;fill:#6A6A6A;letter-spacing:.14em}
.hero-scene .flabel{fill:var(--g400)}
/* fence build wipe */
.hero-scene .grade{stroke:var(--marker);stroke-width:3}
.hero-scene .fence .wipe{clip-path:inset(0 100% 0 0)}
.hero-scene .fence.active .wipe{animation:heroBuild 1.5s .12s cubic-bezier(.4,0,.2,1) forwards}
@keyframes heroDraw{to{stroke-dashoffset:0}}
@keyframes heroPop{to{opacity:1}}
@keyframes heroBuild{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .hero-scene .stage{transition:none}
  .hero-scene .pline{stroke-dashoffset:0}
  .hero-scene .cpost{opacity:1}
  .hero-scene .fence .wipe{clip-path:none}
}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid var(--bone-3);
  padding:clamp(20px,2.6vw,30px);position:relative;
  text-decoration:none;color:inherit;display:block;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:9px;height:9px;background:var(--marker)}
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.card h3{margin-bottom:8px}
.card p{font-size:15.5px;color:#41524A;margin-bottom:12px}
.card .more{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-deep);font-weight:600;
}
.card:hover .more{color:var(--marker)}
.section-dark .card{background:#282828;border-color:#3C3C3C;color:var(--bone)}
.section-dark .card h3{color:#fff}
.section-dark .card p{color:#B4B4B4}
.section-dark .card .more{color:var(--accent-bright)}
.section-dark .card:hover{border-color:var(--accent-bright);box-shadow:none}

/* spec list — reads like a materials takeoff */
.spec{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:13.5px}
.spec li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px dashed var(--galv-lt)}
.spec li span:first-child{font-weight:500}
.spec li span:last-child{text-align:right;color:#55665D}
.section-dark .spec li{border-bottom-color:#3C3C3C}
.section-dark .spec li span:last-child{color:var(--accent-bright)}

/* numbered process */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding:20px 0 20px 58px;position:relative;border-top:1px dashed var(--galv)}
.steps li::before{
  content:"0" counter(s);position:absolute;left:0;top:21px;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--marker);letter-spacing:.06em;
}
.section-dark .steps li{border-top-color:#3A3A3A}
.steps h3{margin-bottom:4px}
.steps p{margin:0;font-size:15.5px}

/* ---------- prose bits ---------- */
.checks{list-style:none;margin:0 0 1.2em;padding:0}
.checks li{padding:7px 0 7px 26px;position:relative;font-size:16px}
.checks li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:2px;background:var(--marker)}
.section-dark .checks li{color:#C9C9C9}

.faq{border-top:1px dashed var(--galv);padding:19px 0}
.faq h3{font-size:19px;margin-bottom:6px}
.faq p{margin:0;font-size:16px}

.areas{font-family:var(--mono);font-size:14.5px;line-height:2.05;max-width:none;color:#41524A}

/* ---------- form ---------- */
.form{background:#fff;border:1px solid var(--bone-3);padding:clamp(22px,3vw,34px)}
.field{margin-bottom:18px}
.field label{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:7px;font-weight:600;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;font-family:var(--body);font-size:16px;
  border:1px solid var(--galv-lt);background:var(--bone);color:var(--ink);border-radius:0;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--marker);outline-offset:1px;border-color:var(--marker);
}
.hp{position:absolute;left:-9999px}
.phone-big{
  font-family:var(--display);font-stretch:118%;font-weight:800;
  font-size:clamp(28px,4vw,40px);line-height:1.1;margin-bottom:6px;
}
.phone-big a{text-decoration:none;color:var(--ink)}
.phone-big a:hover{color:var(--marker)}

/* ---------- CTA band ---------- */
.band{background:var(--g600);color:#fff;padding:clamp(44px,6vw,72px) 0;position:relative;overflow:hidden}
.band h2{color:#fff;margin-bottom:10px}
.band p{color:#D3E6D8;margin-bottom:22px}

/* ---------- footer ---------- */
.site-foot{background:var(--g900);color:#A6A6A6;padding:clamp(46px,6vw,68px) 0 30px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{height:62px;width:auto;margin-bottom:18px}
.site-foot h4{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-bright);margin:0 0 14px;font-weight:600;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:#CFCFCF;text-decoration:none}
.site-foot a:hover{color:var(--marker)}
.foot-phone{font-family:var(--mono);font-size:17px;color:#fff;font-weight:600}
.foot-bar{
  margin-top:40px;padding-top:20px;border-top:1px dashed #333333;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:#7A7A7A;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

:focus-visible{outline:2px solid var(--marker);outline-offset:2px}
.skip{position:absolute;left:-9999px;background:var(--marker);color:#0C2010;padding:10px 16px;font-family:var(--mono);font-size:13px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- state sections (Where we work) ---------- */
.states{display:flex;flex-direction:column;gap:clamp(34px,5vw,52px)}
.state-block{}
.state-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.state-head h3{margin:0;font-stretch:112%;font-size:clamp(21px,2.4vw,27px)}
.state-tag{
  flex:none;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  color:#0C2010;background:var(--marker);padding:4px 9px;line-height:1;
}
.state-head .rule-fill{flex:1;height:0;border-top:1px dashed var(--galv)}
.section-dark .state-head .rule-fill{border-top-color:#3A3A3A}
.state-cards{align-items:stretch}

/* single-card rows (TN, SC) take half width on desktop, not full stretch */
@media(min-width:621px){
  .state-cards.state-one{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- style illustrations gallery ---------- */
.styles-gallery{}
.style-card{
  margin:0;background:#fff;border:1px solid var(--bone-3);position:relative;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.style-card::before{content:"";position:absolute;top:-1px;left:-1px;width:9px;height:9px;background:var(--marker);z-index:2}
.style-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.style-img{
  background:#EFEDE6;border-bottom:1px solid var(--bone-3);
  aspect-ratio:300/190;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
.style-img img{width:100%;height:100%;object-fit:contain;display:block}
.style-card figcaption{padding:16px 18px 20px}
.style-card figcaption h3{margin:0 0 6px;font-size:19px}
.style-card figcaption p{margin:0;font-size:14.5px;color:#41524A}

/* home service cards carrying an illustration */
.card-art{padding:0;overflow:hidden}
.card-art .style-img{aspect-ratio:300/175}
.card-art h3{margin:16px 20px 6px}
.card-art p{margin:0 20px 12px}
.card-art .more{margin:0 20px 20px;display:inline-block}

/* ---------- job photo galleries ---------- */
.photo-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px);
}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.photo-grid{grid-template-columns:1fr 1fr}}
.photo-cell{
  margin:0;position:relative;overflow:hidden;background:#111;
  border:1px solid var(--bone-3);aspect-ratio:4/3;
}
.photo-cell img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.photo-cell:hover img{transform:scale(1.05)}
.photo-cell figcaption{
  position:absolute;left:0;right:0;bottom:0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:#fff;
  padding:22px 12px 9px;
  background:linear-gradient(to top,rgba(6,10,7,.82),transparent);
  opacity:0;transition:opacity .25s ease;
}
.photo-cell:hover figcaption,.photo-cell:focus-within figcaption{opacity:1}
.photo-cell::before{content:"";position:absolute;top:0;left:0;width:9px;height:9px;background:var(--marker);z-index:2}
/* featured (aerial) spans two columns and rows */
.photo-feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.photo-feature figcaption{opacity:1;font-size:12.5px;padding:30px 16px 12px}
@media(max-width:900px){
  .photo-feature{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
}
@media(max-width:520px){
  .photo-feature{grid-column:span 2}
  .photo-cell figcaption{opacity:1}
}

/* home card photos crop to a consistent banner; illustrations still 'contain' */
.card-photo{aspect-ratio:3/2;background:#111}
.card-photo img{width:100%;height:100%;object-fit:cover}
.card-art .card-photo{aspect-ratio:3/2}

/* ---------- scheduling form extras ---------- */
.form-legend{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:600;margin:26px 0 12px;padding-bottom:8px;
  border-bottom:1px dashed var(--galv-lt);
}
.form-legend:first-of-type{margin-top:0}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field.two{grid-template-columns:1fr}}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--galv);font-size:11px}
.field input[type=date]{appearance:none;-webkit-appearance:none;min-height:49px}
.form-fine{font-size:13px;color:#5A6B62;margin:14px 0 0;line-height:1.5}