/* Ocala Fence Company - Marion County pasture palette */
:root{
  --board:#0D1411;
  --pasture:#183527;
  --pasture-2:#224934;
  --moss:#7FA07F;
  --limestone:#F1EDE2;
  --limestone-2:#E3DCCB;
  --sun:#E3A017;
  --sun-dark:#B67B08;
  --paper:#FBF9F4;
  --line:rgba(13,20,17,.16);
  --line-light:rgba(241,237,226,.2);
  --maxw:1180px;
  --pad:clamp(20px,5vw,48px);
}

*{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(--paper);color:var(--board);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--pasture);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--sun);outline-offset:2px}

h1,h2,h3,h4{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 112;
  font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem);margin-top:0}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}

.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sun-dark);margin:0 0 14px;font-weight:600;
}
.hero .eyebrow{color:var(--sun)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding:clamp(60px,8vw,110px) 0;position:relative}
.section + .section{border-top:2px solid var(--board)}
.section--dark + .section,.section + .section--dark{border-top:0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--dark{background:var(--pasture);color:var(--limestone)}
.section--dark h2,.section--dark h3{color:var(--limestone)}
.section--stone{background:var(--limestone)}

/* ---- SIGNATURE: four-board fence rule ---- */
.boardrule{height:26px;width:100%;
  background:repeating-linear-gradient(to bottom,
    var(--board) 0 5px, transparent 5px 12px);
  opacity:.9}
.boardrule--light{background:repeating-linear-gradient(to bottom,
  var(--sun) 0 3px, transparent 3px 11px);opacity:.85;height:22px}

/* ---- HEADER ---- */
.topbar{background:var(--board);color:var(--limestone);font-size:.82rem}
.topbar .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;
  min-height:38px;flex-wrap:wrap;font-family:"JetBrains Mono",monospace;letter-spacing:.04em}
.topbar a{color:var(--sun);text-decoration:none}

header.site{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:2px solid var(--board)}
.nav{display:flex;align-items:center;gap:18px;min-height:80px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--board);margin-right:auto}
.brand-mark{width:38px;height:38px;flex:none}
.brand b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118;
  font-weight:800;font-size:1.06rem;line-height:1.05;display:block;letter-spacing:-.02em}
.brand span{font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sun-dark)}

.menu{display:flex;gap:2px;align-items:center;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu>li>a{display:block;padding:9px 11px;text-decoration:none;color:var(--board);
  font-weight:700;font-size:.9rem;border-radius:2px;white-space:nowrap}
.menu>li>a[aria-current]{box-shadow:inset 0 -3px 0 var(--sun)}
.menu>li>a:hover{background:var(--limestone-2)}
.drop{position:absolute;top:100%;left:0;background:var(--paper);border:2px solid var(--board);
  min-width:270px;padding:6px;display:none;box-shadow:6px 6px 0 rgba(13,20,17,.12)}
.menu>li:hover .drop,.menu>li:focus-within .drop{display:block}
.drop a{display:block;padding:9px 12px;text-decoration:none;color:var(--board);font-size:.92rem}
.drop a:hover{background:var(--limestone-2)}

.btn{display:inline-block;padding:14px 24px;text-decoration:none;font-weight:800;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;
  border-radius:2px;border:2px solid var(--board);transition:transform .12s ease,box-shadow .12s ease;
  cursor:pointer;font-size:.98rem;letter-spacing:.01em}
.btn--sun{background:var(--sun);color:var(--board);box-shadow:4px 4px 0 var(--board)}
.btn--sun:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--board)}
.btn--ghost{background:transparent;color:var(--limestone);border-color:var(--limestone)}
.btn--ghost:hover{background:var(--limestone);color:var(--board)}
.btn--dark{background:var(--board);color:#FFFFFF;box-shadow:4px 4px 0 var(--sun)}
.btn--dark:visited{color:#FFFFFF}
.btn--dark:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sun)}
.btn--full{width:100%;text-align:center}

.nav>.btn{box-shadow:none;padding:12px 18px;font-size:.9rem;white-space:nowrap;flex:none}
.nav>.btn:hover{transform:none;background:var(--sun-dark);color:var(--paper)}
.navtoggle{display:none;background:var(--board);color:var(--limestone);border:0;
  padding:11px 14px;border-radius:2px;font-weight:800;cursor:pointer}

/* ---- HERO ---- */
.hero{position:relative;background:var(--pasture);color:var(--limestone);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   repeating-linear-gradient(to right, rgba(241,237,226,.055) 0 3px, transparent 3px 84px),
   repeating-linear-gradient(to bottom, rgba(241,237,226,.05) 0 4px, transparent 4px 60px);
  mask-image:linear-gradient(to bottom,transparent,#000 55%)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(44px,6vw,80px)}
.hero h1{color:var(--limestone);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero p.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:56ch;color:rgba(241,237,226,.88)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* spec strip */
.spec{background:var(--board);color:var(--limestone)}
.spec .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(241,237,226,.14);padding-inline:0;max-width:var(--maxw)}
.spec div{background:var(--board);padding:22px var(--pad)}
.spec dt{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);margin-bottom:6px}
.spec dd{margin:0;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112;
  font-weight:800;font-size:1.28rem}

/* ---- GRID / CARDS ---- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--paper);border:2px solid var(--board);padding:26px;border-radius:2px;
  display:flex;flex-direction:column;transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--sun)}
.card h3{margin-bottom:8px}
.card p{font-size:.95rem;margin-bottom:14px;color:#3a4740}
.card a.more{margin-top:auto;font-family:"JetBrains Mono",monospace;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sun-dark);text-decoration:none}
.card a.more:hover{text-decoration:underline}
.card--link{text-decoration:none;color:inherit}

.card__num{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  color:var(--moss);margin-bottom:10px}

.section--dark .card{background:var(--pasture-2);border-color:rgba(241,237,226,.28);color:var(--limestone)}
.section--dark .card p{color:rgba(241,237,226,.8)}
.section--dark .card:hover{box-shadow:7px 7px 0 var(--sun)}
.section--dark .card a.more{color:var(--sun)}

/* light surfaces keep dark text even inside dark sections */
.card,.formcard,.railbox,details.faq,.mapwrap,.pills li,.quote{color:var(--board)}
.section--dark .card{color:var(--limestone)}
.railbox--dark,.railbox--dark *{color:var(--limestone)}
.railbox--dark a.btn--sun{color:var(--board)}
.section--dark .formcard p,.section--dark .formcard label,
.section--dark .formcard h2,.section--dark .formcard h3{color:var(--board)}
.section--dark details.faq summary,.section--dark details.faq .faqbody,
.section--dark details.faq .faqbody p{color:var(--board)}
.section--dark .formcard .formnote{color:#4a564f}
.formcard .formnote a{color:var(--sun-dark);font-weight:700}
.section--dark .pills li{color:var(--limestone)}

/* prose */
.prose{max-width:none}
.prose h2{margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.4em}
.prose ul li{position:relative;padding-left:30px;margin-bottom:12px}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:18px;height:0;
  border-top:4px solid var(--sun)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start}
aside.rail{position:sticky;top:96px;display:grid;gap:18px}
.railbox{border:2px solid var(--board);padding:22px;border-radius:2px;background:var(--limestone)}
.railbox--dark{background:var(--board);color:var(--limestone);border-color:var(--board)}
.railbox--dark h3{color:var(--limestone)}
.railbox h3{font-size:1.05rem}
.railbox ul{list-style:none;padding:0;margin:0}
.railbox li{border-bottom:1px solid var(--line);padding:8px 0}
.railbox li:last-child{border:0}
.railbox a{text-decoration:none;font-weight:700;font-size:.93rem}
.railbox a:hover{text-decoration:underline}

/* breadcrumb */
.crumbs{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.08em;
  padding:14px 0;border-bottom:1px solid var(--line)}
.crumbs a{color:var(--board);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* page head */
.pagehead{background:var(--pasture);color:var(--limestone);
  padding:clamp(40px,5vw,72px) 0 clamp(36px,4.5vw,60px)}
.pagehead h1{color:var(--limestone);max-width:20ch}
.pagehead p{max-width:62ch;color:rgba(241,237,226,.86);margin-bottom:0}

/* FAQ */
details.faq{border:2px solid var(--board);border-radius:2px;background:var(--paper);margin-bottom:12px}
details.faq summary{cursor:pointer;padding:18px 22px;font-weight:800;font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 108;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--sun-dark);font-size:1.4rem;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .faqbody{padding:0 22px 20px;font-size:.96rem}

/* form */
.formcard{background:var(--limestone);border:2px solid var(--board);padding:clamp(22px,3vw,36px);border-radius:2px}
.field{margin-bottom:16px}
.field label{display:block;font-family:"JetBrains Mono",monospace;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:2px solid var(--board);border-radius:2px;
  background:var(--paper);font:inherit;font-size:.97rem;color:var(--board)}
.field textarea{min-height:118px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formnote{font-size:.8rem;color:#4a564f;margin:12px 0 0}
.formstatus{margin-top:14px;padding:13px 16px;border:2px solid var(--board);border-radius:2px;display:none;font-size:.92rem}
.formstatus.ok{display:block;background:var(--sun);color:var(--board)}
.formstatus.err{display:block;background:#F3D6D0}

/* map */
.mapwrap{border:2px solid var(--board);border-radius:2px;overflow:hidden;line-height:0;background:var(--limestone-2)}
.mapwrap iframe{width:100%;height:420px;border:0;display:block}
.mapwrap--sm iframe{height:280px}

/* reviews */
.quote{border-left:5px solid var(--sun);padding:4px 0 4px 20px;font-size:1rem}
.quote cite{display:block;margin-top:10px;font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-dark)}
.stars{color:var(--sun-dark);letter-spacing:2px;font-size:.9rem}

/* pill list */
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.pills li{border:1.5px solid var(--line);padding:6px 12px;border-radius:2px;font-size:.85rem;
  font-family:"JetBrains Mono",monospace;letter-spacing:.03em}
.section--dark .pills li{border-color:var(--line-light)}

/* CTA band */
.ctaband{background:var(--sun);color:var(--board);text-align:center}
.ctaband h2{max-width:22ch;margin-inline:auto}
.ctaband p{max-width:52ch;margin-inline:auto}

/* footer */
footer.site{background:var(--board);color:rgba(241,237,226,.78);font-size:.92rem}
footer.site .wrap{padding-block:clamp(44px,5vw,72px)}
footer.site h4{color:var(--limestone);font-size:.82rem;font-family:"JetBrains Mono",monospace;
  font-variation-settings:normal;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
footer.site a{color:rgba(241,237,226,.78);text-decoration:none}
footer.site a:hover{color:var(--sun);text-decoration:underline}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.legal{border-top:1px solid rgba(241,237,226,.18);margin-top:40px;padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem}

/* mobile call bar */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--board);border-top:2px solid var(--sun);padding:9px;gap:9px}
.callbar a{flex:1;text-align:center;padding:13px 8px;font-weight:800;text-decoration:none;
  border-radius:2px;font-family:"Archivo",sans-serif;font-size:.92rem}
.callbar .c1{background:var(--sun);color:var(--board)}
.callbar .c2{background:transparent;color:var(--limestone);border:2px solid var(--limestone)}

.layout > *,.grid > *{min-width:0}
@media (max-width:1000px){
  .layout,.layout[style]{grid-template-columns:minmax(0,1fr)!important;gap:36px!important}
  aside.rail{position:static}
  .g4{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .spec .wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .navtoggle{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:2px solid var(--board);flex-direction:column;align-items:stretch;
    padding:10px var(--pad) 18px;gap:0;max-height:74vh;overflow:auto}
  .menu.open{display:flex}
  .nav{position:relative;flex-wrap:wrap}
  .menu>li>a{padding:13px 0;border-bottom:1px solid var(--line)}
  .drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  .drop a{padding:8px 0;font-size:.88rem;color:#46534c}
  .nav .btn{display:none}
  .callbar{display:flex}
  body{padding-bottom:74px}
}
@media (max-width:640px){
  .g2,.g3,.g4,.grid[style*="columns"]{grid-template-columns:minmax(0,1fr)!important}
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
  .two{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .spec .wrap{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center;text-align:center}
}


/* ---- HERO LEAD FORM ---- */
.herogrid{display:grid;grid-template-columns:1fr 430px;gap:clamp(28px,4vw,60px);align-items:start}
.leadcard{background:var(--paper);border:2px solid var(--board);border-radius:2px;
  padding:26px;box-shadow:8px 8px 0 rgba(13,20,17,.45);color:var(--board)}
.leadcard h2{font-size:1.35rem;margin-bottom:4px;color:var(--board)}
.leadcard .sub{font-size:.88rem;color:#4a564f;margin-bottom:18px}
.leadcard .field{margin-bottom:12px}
.leadcard .field input,.leadcard .field select{padding:11px 12px;font-size:.94rem}
.leadcard .formnote{font-size:.76rem;margin-top:10px}
.leadticks{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 16px;padding:0;list-style:none;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#4a564f}
.leadticks li::before{content:"✓ ";color:var(--sun-dark);font-weight:700}

/* ---- BLOG ---- */
.postmeta{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sun-dark);margin-bottom:10px}
.pagehead .postmeta{color:var(--sun)}
.prose .keybox{border:2px solid var(--board);background:var(--limestone);padding:22px 24px;
  border-radius:2px;margin:0 0 1.8em;color:var(--board)}
.prose .keybox h3{margin-bottom:10px;font-size:1.05rem}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.8em;font-size:.93rem}
.prose th,.prose td{border:1.5px solid var(--line);padding:11px 13px;text-align:left}
.prose th{background:var(--limestone);font-family:"Archivo",sans-serif;font-weight:800}
.prose ol{padding-left:20px;margin:0 0 1.4em}
.prose ol li{margin-bottom:10px}

@media (max-width:1000px){.herogrid{grid-template-columns:1fr}}
@media (max-width:900px){
  .menu>li>a{font-size:.86rem;padding:9px 8px}
  .nav>.btn{padding:11px 14px;font-size:.85rem}
}

/* ---- accessibility + media ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sun);color:var(--board);
  padding:12px 18px;font-weight:800;border:2px solid var(--board)}
.skip:focus{left:8px;top:8px}
.figure{margin:0 0 1.9em;border:2px solid var(--board);border-radius:2px;background:var(--limestone);overflow:hidden}
.figure img{width:100%;height:auto;display:block;background:var(--limestone)}
.figure figcaption{padding:12px 16px;font-size:.86rem;color:#3a4740;border-top:2px solid var(--board);background:var(--paper)}
img.cardimg{width:calc(100% + 52px);margin:-26px -26px 18px;height:auto;border-bottom:2px solid var(--board);background:var(--limestone)}


/* ---- INLINE SVG ILLUSTRATIONS ---- */
.figure{margin:0 0 1.8em;border:2px solid var(--board);border-radius:2px;background:var(--limestone);overflow:hidden}
.figure svg{display:block;width:100%;height:auto;aspect-ratio:800/460}
.figure figcaption{padding:12px 16px;font-size:.85rem;color:#41504a;border-top:2px solid var(--board);background:var(--paper)}
.cardimg{border-bottom:2px solid var(--board);background:var(--limestone);line-height:0;margin:-26px -26px 18px}
.cardimg svg{display:block;width:100%;height:auto;aspect-ratio:800/460}

/* ---- COMPACT SERVICE-AREA CHIPS ---- */
.areagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;list-style:none;padding:0;margin:0}
.areacard{display:block;border:2px solid var(--board);border-radius:2px;background:var(--paper);
  padding:14px 16px;text-decoration:none;color:var(--board);transition:transform .12s ease,box-shadow .12s ease}
.areacard:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--sun)}
.areacard b{display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;
  font-weight:800;font-size:1.02rem;line-height:1.15;letter-spacing:-.01em}
.areacard span{display:block;font-size:.8rem;color:#4d5b54;margin-top:3px;line-height:1.35}
.areacard em{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--sun-dark);margin-top:8px;font-weight:700}
.section--dark .areacard{background:var(--pasture-2);border-color:rgba(241,237,226,.3);color:var(--limestone)}
.section--dark .areacard span{color:rgba(241,237,226,.8)}
.section--dark .areacard em{color:var(--sun)}


/* ================= MOBILE OPTIMISATION ================= */
/* iOS zooms any input under 16px on focus. Never go below it. */
input,select,textarea{font-size:16px!important}

@media (max-width:860px){
  .brand span{font-size:.7rem}
  .brand b{font-size:1rem}
  .topbar{font-size:.76rem}
  .topbar .wrap{min-height:34px;padding-block:5px}
  .nav{min-height:66px}
  .menu>li>a{padding:15px 0;font-size:1rem}
  .drop a{padding:11px 0;font-size:.95rem}
  .navtoggle{padding:13px 16px;font-size:1rem;min-height:44px}
  h1{font-size:clamp(1.85rem,7.6vw,2.5rem)}
  h2{font-size:clamp(1.4rem,5.6vw,1.9rem)}
  .section{padding:44px 0}
  .section--tight{padding:34px 0}
  .hero .wrap{padding-top:36px;padding-bottom:36px}
  .pagehead{padding:32px 0 30px}
  .leadcard{box-shadow:5px 5px 0 rgba(13,20,17,.4);padding:20px}
  .spec div{padding:16px var(--pad)}
  .spec dd{font-size:1.12rem}
  .btn{padding:15px 22px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .card{padding:20px}
  .cardimg{margin:-20px -20px 14px}
  .mapwrap iframe{height:300px}
  .mapwrap--sm iframe{height:230px}
  details.faq summary{padding:16px 18px;min-height:48px;align-items:center}
  details.faq .faqbody{padding:0 18px 18px}
  .railbox{padding:18px}
  .railbox li{padding:11px 0}
  .prose ul li{padding-left:24px;margin-bottom:14px}
  .areagrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .areacard{padding:12px 13px}
  .areacard b{font-size:.94rem}
  .areacard span{font-size:.75rem}
  .figure figcaption{padding:11px 14px;font-size:.82rem}
  .quote{padding-left:16px}
  .callbar a{min-height:48px;display:flex;align-items:center;justify-content:center}
  footer.site .wrap{padding-block:38px}
  .fgrid{gap:28px}
}

@media (max-width:420px){
  body{font-size:16.5px}
  .wrap{padding-inline:18px}
  h1{font-size:1.72rem;letter-spacing:-.015em}
  .hero p.lede{font-size:1rem}
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%}
  .areagrid{grid-template-columns:1fr 1fr;gap:9px}
  .areacard em{font-size:.6rem;letter-spacing:.08em}
  .spec dd{font-size:1.05rem}
  .prose table{font-size:.86rem}
  .leadticks{font-size:.7rem;gap:5px 12px}
  .brand-mark{width:32px;height:32px}
  .btn{font-size:.92rem;padding:14px 16px}
}


/* ---- BLOG ---- */
.featpost{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border:2px solid var(--board);
  border-radius:2px;background:var(--paper);text-decoration:none;color:var(--board);overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease}
.featpost:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--sun)}
.featpost__img{background:var(--limestone);border-right:2px solid var(--board);line-height:0;
  display:flex;align-items:center}
.featpost__img svg{width:100%;height:auto;display:block}
.featpost__body{padding:clamp(22px,3vw,36px)}
.featpost__body h2{margin:6px 0 10px;font-size:clamp(1.35rem,2.4vw,1.9rem)}
.featpost__body p{color:#3a4740;font-size:.97rem}
.postcard h3{font-size:1.1rem;line-height:1.2}
@media (max-width:860px){
  .featpost{grid-template-columns:1fr}
  .featpost__img{border-right:0;border-bottom:2px solid var(--board)}
}


/* contrast fixes for cards/pills sitting on the dark page header */
.leadcard,.leadcard *{color:var(--board)}
.leadcard .sub,.leadcard .formnote{color:#4a564f}
.leadcard .formnote a,.leadcard a{color:var(--sun-dark);font-weight:700}
.leadcard .btn--dark,.leadcard .btn--dark *{color:#FFFFFF}
.leadcard label{color:var(--board)}
.pagehead .pills li,.hero .pills li{color:var(--limestone);border-color:var(--line-light)}
.pagehead .postmeta{color:var(--sun)}


/* ---- MOBILE FOOTER: fill the dead space, halve the height ---- */
@media (max-width:860px){
  .fgrid{grid-template-columns:1fr 1fr;gap:26px 24px}
  .fgrid > :first-child{grid-column:1 / -1}
  footer.site h4{margin-bottom:10px}
  footer.site li{margin-bottom:9px;line-height:1.35}
}
@media (max-width:640px){
  .fgrid{grid-template-columns:1fr;gap:26px}
  .fgrid > :first-child{grid-column:auto}
  /* two-up link lists so they do not run down one narrow strip */
  footer.site .fgrid > :not(:first-child) ul{columns:2;column-gap:22px}
  footer.site .fgrid > :not(:first-child) li{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:11px}
  footer.site .fgrid > :first-child p{max-width:38ch}
  .legal{flex-direction:column;gap:10px;margin-top:30px;padding-top:18px}
}


/* =================================================================
   MOBILE: cut the scroll length without cutting the content
   ================================================================= */

/* collapsible rail lists */
details.railbox--list summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
details.railbox--list summary::-webkit-details-marker{display:none}
details.railbox--list summary h3{margin:0}
details.railbox--list summary::after{content:"+";font-family:"Archivo",sans-serif;font-weight:800;
  font-size:1.5rem;line-height:1;color:var(--sun-dark);display:none}
details.railbox--list[open] summary::after{content:"–"}
details.railbox--list ul{margin-top:12px}

@media (max-width:1000px){
  details.railbox--list summary::after{display:block}
  details.railbox--list summary{min-height:44px}
  aside.rail{gap:12px}
}

@media (max-width:860px){
  /* 2x2 spec strip instead of a four-storey stack */
  .spec .wrap{grid-template-columns:1fr 1fr}
  .spec div{padding:14px 18px}
  .spec dd{font-size:1rem;line-height:1.2}
  .spec dt{font-size:.6rem;margin-bottom:4px}

  /* service tiles two-up and compact */
  .grid.tiles{grid-template-columns:1fr 1fr!important;gap:10px}
  .grid.tiles .card{padding:15px 14px}
  .grid.tiles .card__num{font-size:.62rem;margin-bottom:6px}
  .grid.tiles .card h3{font-size:.98rem;line-height:1.18;margin-bottom:6px}
  .grid.tiles .card p{font-size:.82rem;line-height:1.4;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .grid.tiles .card .more{font-size:.7rem;letter-spacing:.06em;line-height:1.3}

  /* reviews swipe instead of a six-card tower */
  .grid.swipe{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:none;
    max-width:100%;overscroll-behavior-x:contain}
  .grid.swipe::-webkit-scrollbar{display:none}
  .grid.swipe > *{flex:0 0 78%;scroll-snap-align:start}
  .grid.swipe .card{padding:18px}
  .swipehint{display:block;font-family:"JetBrains Mono",monospace;font-size:.72rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--sun-dark);margin-top:10px}

  /* tighter rhythm everywhere */
  .section{padding:38px 0}
  .section--tight{padding:30px 0}
  .prose h2{margin-top:1.5em}
  .prose p{margin-bottom:.9em}
  .prose ul{margin-bottom:1.1em}
  .prose ul li{margin-bottom:10px}
  .card{padding:18px}
  .grid{gap:14px}
  .figure{margin-bottom:1.4em}
  .keybox{padding:18px 18px}
  details.faq{margin-bottom:9px}
  .boardrule{height:18px}
  .boardrule--light{height:16px}
}

@media (min-width:861px){.swipehint{display:none}}

@media (max-width:420px){
  .grid.tiles{gap:9px}
  .grid.tiles .card h3{font-size:.92rem}
  .grid.tiles .card p{font-size:.79rem;-webkit-line-clamp:2}
  .grid.swipe > *{flex:0 0 85%}
  .spec dd{font-size:.95rem}
}


@media (max-width:860px){
  /* clamp long descriptive text so cards stay one screen-friendly size */
  .areacard span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .postcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    font-size:.88rem;margin-bottom:12px}
  .postcard h3{font-size:1.02rem}
  .featpost__body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* footer: tighter */
  footer.site{font-size:.88rem}
  footer.site .wrap{padding-block:32px}
  footer.site li{margin-bottom:8px}
  footer.site .fgrid > :first-child p{margin-bottom:.8em}
  .fgrid{gap:22px}
}
@media (max-width:420px){
  .grid.tiles .card p{-webkit-line-clamp:3}
}


@media (max-width:860px){
  /* chips: tighter, and on the homepage show the 8 city pages only.
     The other 8 towns stay one tap away on the service areas page. */
  .areacard{padding:11px 12px}
  .areacard b{font-size:.9rem;line-height:1.12}
  .areacard span{font-size:.73rem;line-height:1.3;margin-top:2px}
  .areacard em{margin-top:6px;font-size:.66rem;letter-spacing:.07em}
  .areagrid--home .areacard:nth-child(n+9){display:none}
}


/* ---- HOMEPAGE: local Ocala section ---- */
.localhead{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,56px);
  align-items:end;margin-bottom:clamp(26px,3.5vw,40px)}
.localhead h2{margin:0;max-width:20ch}
.localhead__lede{margin:0;font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.62;color:#3d4a43;
  border-left:3px solid var(--sun);padding-left:18px}

.localgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.localcard{position:relative;border:2px solid var(--board);border-radius:2px;background:var(--paper);
  padding:22px 20px 20px;display:flex;flex-direction:column}
.localcard__ix{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;
  color:var(--sun-dark);font-weight:700;margin-bottom:10px;display:block}
.localcard h3{font-size:1.02rem;line-height:1.18;margin:0 0 9px;letter-spacing:-.01em}
.localcard p{font-size:.9rem;line-height:1.55;color:#3d4a43;margin:0 0 12px}
.localcard .more{margin-top:auto;font-family:"JetBrains Mono",monospace;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sun-dark);
  text-decoration:none;border-bottom:2px solid var(--sun);align-self:flex-start;padding-bottom:2px}
.localcard .more:hover{color:var(--board);border-color:var(--board)}

.localfoot{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3.5vw,44px);
  margin-top:clamp(22px,3vw,34px);padding-top:clamp(22px,3vw,32px);border-top:2px solid var(--board)}
.localfoot h3{font-size:.72rem;font-family:"JetBrains Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sun-dark);margin:0 0 12px;font-weight:700}
.localfoot .pills{margin:0}
.ziplist{font-family:"JetBrains Mono",monospace;font-size:.82rem;line-height:1.9;color:#3d4a43;
  margin:0 0 16px}

@media (max-width:1000px){
  .localgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .localhead{grid-template-columns:1fr;gap:16px;align-items:start}
  .localhead__lede{padding-left:14px;font-size:.97rem}
  .localgrid{gap:10px}
  .localcard{padding:16px 15px 15px}
  .localcard h3{font-size:.97rem}
  .localcard p{font-size:.85rem;line-height:1.5}
  .localfoot{grid-template-columns:1fr;gap:22px}
  .localfoot .btn{width:100%}
}
@media (max-width:620px){
  /* one per row reads better than two narrow columns, but keep each card short:
     the index number sits inline with the heading to save a line */
  .localgrid{grid-template-columns:1fr;gap:9px}
  .localcard{padding:15px 16px 14px}
  .localcard__ix{position:absolute;top:16px;right:16px;margin:0;font-size:12px}
  .localcard h3{font-size:.98rem;padding-right:34px;margin-bottom:7px}
  .localcard p{font-size:.87rem;line-height:1.5;margin-bottom:9px}
  .localcard .more{font-size:12px;letter-spacing:.07em}
}


@media (max-width:860px){
  /* local section: tighter pills and zip block so the footer of the section
     does not run half a screen on its own */
  .localfoot .pills li{font-size:.72rem;padding:5px 9px}
  .localfoot .pills{gap:6px}
  .localfoot{gap:18px;margin-top:20px;padding-top:20px}
  .ziplist{font-size:.76rem;line-height:1.75;margin-bottom:12px}
  .localhead{margin-bottom:20px}
}


/* =================================================================
   MOBILE ACCESSIBILITY PASS
   Every tappable thing gets a real finger-sized target, and no text
   drops below 11px. Applies to phones and small tablets.
   ================================================================= */
@media (max-width:860px){

  /* footer link lists: were ~17px tall, now a proper target */
  footer.site li{margin-bottom:2px}
  footer.site li > a{display:inline-block;padding:9px 0;min-height:38px;
    line-height:1.35;box-sizing:border-box}
  footer.site .fgrid > :first-child a{display:inline-block;padding:7px 0;min-height:36px}

  /* top bar phone number */
  .topbar a,.topbar span > a{display:inline-block;padding:7px 0;min-height:34px;line-height:1.4}

  /* the "or call ..." line under every submit button */
  .formnote a{display:inline-block;padding:6px 0;min-height:32px}

  /* card read-more links */
  .localcard .more,.card .more,.cta .more{display:inline-block;padding:7px 0;min-height:34px}

  /* no text below 11px anywhere */
  .card__num{font-size:12px}
  .areacard em{font-size:12px}
  .spec dt{font-size:11px;letter-spacing:.1em}
  .postmeta{font-size:12px}
  .leadticks{font-size:12px}
  .eyebrow{font-size:12px}
  .swipehint{font-size:12px}
  .localcard__ix{font-size:12px}
}

/* very small phones: keep everything inside the viewport */
@media (max-width:360px){
  .wrap{padding-inline:15px}
  h1{font-size:1.6rem}
  .spec dd{font-size:.9rem}
  .btn{font-size:.88rem;padding:13px 14px}
  .areagrid{gap:8px}
  .grid.tiles{gap:8px}
}


@media (max-width:860px){
  /* breadcrumbs: were 15px tall inline links */
  .crumbs{font-size:12px}
  .crumbs a,.crumbs span{display:inline-block;padding:8px 0;min-height:34px;line-height:1.5}
  .crumbs .wrap{padding-block:2px}

  /* wide comparison tables scroll inside their own box, with a hint */
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;font-size:.86rem}
  .prose table th,.prose table td{scroll-snap-align:start;min-width:132px}
  .prose table + .tablehint{display:block}
  .tablehint{display:none;font-family:"JetBrains Mono",monospace;font-size:12px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--sun-dark);
    margin:-1em 0 1.6em;font-weight:700}
}
@media (min-width:861px){.tablehint{display:none!important}}


@media (max-width:860px){
  /* sidebar accordion lists: standalone nav links need finger targets */
  .railbox li{padding:0}
  .railbox li > a{display:block;padding:10px 0;min-height:40px;line-height:1.35}
  .railbox ul{margin-top:8px}
  .railbox .btn{min-height:48px}
  /* the phone link inside the dark rail CTA */
  .railbox--dark a:not(.btn){display:inline-block;padding:7px 0;min-height:34px}
}


@media (max-width:860px){
  /* contact page detail links */
  .contactblock a,.contactlist a,.contactcard a{display:inline-block;padding:8px 0;min-height:36px}
  .prose a[href^="tel:"],.prose a[href^="mailto:"]{display:inline-block;padding:6px 0;min-height:32px}
}


/* =================================================================
   NAV BREAKPOINT
   The horizontal nav plus the CTA button needs ~1140px to fit.
   Between 861 and 1140 it used to push the button off the right edge
   (45px of horizontal overflow at 1024). Collapse to the hamburger
   for that range too.
   ================================================================= */
@media (max-width:1140px){
  .navtoggle{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:2px solid var(--board);flex-direction:column;align-items:stretch;
    padding:10px var(--pad) 18px;gap:0;max-height:74vh;overflow:auto;z-index:60}
  .menu.open{display:flex}
  .nav{position:relative;flex-wrap:wrap}
  .menu>li>a{padding:13px 0;border-bottom:1px solid var(--line)}
  .drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  .drop a{padding:8px 0;font-size:.88rem;color:#46534c}
  .nav .btn{display:none}
  .callbar{display:flex}
  body{padding-bottom:74px}
}


/* Tablets are touch devices too. The tap-target sizing below 860px also needs
   to apply at iPad landscape width, where the sidebar and footer are still shown. */
@media (min-width:861px) and (max-width:1024px){
  footer.site li > a{display:inline-block;padding:9px 0;min-height:38px;line-height:1.35}
  .topbar a{display:inline-block;padding:7px 0;min-height:34px}
  .crumbs a,.crumbs span{display:inline-block;padding:8px 0;min-height:34px}
  .railbox li > a{display:block;padding:10px 0;min-height:40px}
  .formnote a{display:inline-block;padding:6px 0;min-height:32px}
  .card .more,.localcard .more{display:inline-block;padding:7px 0;min-height:34px}
  .brand span{font-size:11px}
  .card__num,.areacard em,.postmeta,.eyebrow,.localcard__ix{font-size:12px}
  .spec dt{font-size:11px}
}

@media (max-width:1024px){
  details.railbox--list summary{min-height:44px;padding:4px 0}
}

@media (max-width:1024px){
  .contactblock a,.contactlist a,.contactcard a{display:inline-block;padding:8px 0;min-height:36px}
  .prose a[href^="tel:"],.prose a[href^="mailto:"]{display:inline-block;padding:6px 0;min-height:32px}
}