/* =========================================================
   COAST LAND CLEARING INC — FINAL UI SYSTEM
   Single authoritative stylesheet.
   ========================================================= */

:root{
  --bg:#081015;
  --bg-2:#0b151b;
  --bg-3:#101c23;
  --panel:rgba(17,28,35,.82);
  --panel-strong:rgba(12,21,27,.92);
  --panel-soft:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.115);
  --line-soft:rgba(255,255,255,.075);
  --orange:#d18a4b;
  --orange-deep:#b86a2d;
  --white:#f7f6f1;
  --muted:#bac3c0;
  --muted-2:#929e9b;
  --danger:#d76750;

  --r-btn:9px;
  --r-card:14px;
  --r-major:18px;

  --shadow:0 20px 50px rgba(0,0,0,.22);
  --shadow-soft:0 12px 30px rgba(0,0,0,.16);

  --max:1180px;
  --s1:8px;
  --s2:12px;
  --s3:16px;
  --s4:24px;
  --s5:32px;
  --s6:48px;
  --s7:64px;
  --s8:80px;
}

/* ---------- RESET ---------- */
*{box-sizing:border-box}
html{
  max-width:100%;
  overflow-x:hidden;
  background:var(--bg);
  scroll-behavior:smooth;
}
body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
p{margin:0 0 16px;color:var(--muted)}
ul{color:var(--muted)}
h1,h2,h3{
  margin:0;
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  font-weight:900;
  line-height:.98;
  letter-spacing:-.03em;
}
.wrap{
  width:min(var(--max),calc(100% - 48px));
  margin-inline:auto;
}
.skip{
  position:absolute;
  left:-9999px;
  top:0;
}
.skip:focus{
  left:16px;
  top:16px;
  z-index:9999;
  padding:12px 16px;
  border-radius:var(--r-btn);
  background:#fff;
  color:#111;
}

/* ---------- ACCESSIBILITY ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid #e9a36a;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(209,138,75,.16);
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}

/* ---------- TOP-ONLY GLASS HEADER ---------- */
.utility{
  position:absolute;
  z-index:101;
  top:18px;
  left:28px;
  right:28px;
  min-height:38px;
  border:1px solid var(--line);
  border-bottom-color:rgba(255,255,255,.055);
  border-radius:15px 15px 0 0;
  background:rgba(20,31,39,.58);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
}
.utility .wrap{
  width:100%;
  height:38px;
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#bfc7c5;
  font-size:10px;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
.utility a{color:#e2e5e2}
header{
  position:absolute;
  z-index:100;
  top:56px;
  left:28px;
  right:28px;
  min-height:68px;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 15px 15px;
  background:rgba(15,25,32,.68);
  backdrop-filter:blur(22px) saturate(128%);
  -webkit-backdrop-filter:blur(22px) saturate(128%);
  box-shadow:0 14px 34px rgba(0,0,0,.2);
}
.nav{
  width:100%;
  min-height:68px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex:0 0 auto;
}
.brand img{
  width:46px;
  height:46px;
  object-fit:contain;
}
.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.brand-text strong{
  color:#fff;
  font-size:13px;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}
.brand-text small{
  margin-top:5px;
  color:var(--orange);
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:21px;
  min-width:0;
}
.links a:not(.btn){
  position:relative;
  padding:25px 0 21px;
  color:#f2f2ee;
  font-size:10px;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .18s ease;
}
.links a:not(.btn):hover{color:#fff}
.links a.active:after{
  content:"";
  position:absolute;
  left:20%;
  right:20%;
  bottom:10px;
  height:2px;
  border-radius:999px;
  background:var(--orange);
}
.menu{
  display:none;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  background:rgba(255,255,255,.045);
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
}

/* ---------- BUTTONS ---------- */
.btn,
button.btn,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 21px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-btn);
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.055em;
  line-height:1.1;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(184,106,45,.2);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease;
}
.btn:hover,
button.btn:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 30px rgba(184,106,45,.28);
  filter:brightness(1.04);
}
.btn.outline{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.42);
  box-shadow:none;
}
.btn.outline:hover{background:rgba(255,255,255,.10)}

/* ---------- HOMEPAGE HERO ---------- */
.hero{
  position:relative;
  min-height:780px;
  overflow:hidden;
  background:#071015;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,9,12,.84) 0%,rgba(5,9,12,.56) 42%,rgba(5,9,12,.12) 100%),
    image-set(
      url('../img/hero/coast-land-clearing-main-hero.avif') type('image/avif'),
      url('../img/hero/coast-land-clearing-main-hero.webp') type('image/webp')
    );
  background-position:center,center;
  background-size:100% 100%,100% 100%;
  background-repeat:no-repeat;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,8,10,.18),rgba(4,8,10,.05) 58%,rgba(4,8,10,.38));
  pointer-events:none;
}
.terrain{display:none}
.hero-grid{
  position:relative;
  z-index:2;
  min-height:780px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:40px;
  align-items:end;
  padding-top:160px;
  padding-bottom:52px;
}
.hero-copy{
  max-width:720px;
  padding-bottom:82px;
}
.kicker,.eyebrow,.crumb{
  color:var(--orange);
  font-weight:900;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.kicker{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
}
.kicker:before{
  content:"";
  width:34px;
  height:2px;
  background:var(--orange);
}
.hero h1{
  max-width:720px;
  margin-bottom:18px;
  font-size:clamp(56px,5vw,70px);
  line-height:.93;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.hero h1 span{
  display:block;
  color:#e98f52;
}
.hero-copy>p{
  max-width:560px;
  margin-bottom:0;
  color:#e1e4e0;
  font-size:15px;
  line-height:1.6;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.proof{
  align-self:end;
  width:300px;
  margin-bottom:28px;
  padding:22px;
  border:1px solid var(--line);
  border-left:2px solid var(--orange);
  border-radius:var(--r-card);
  background:rgba(11,19,24,.75);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft);
}
.proof strong{
  display:block;
  color:var(--orange);
  font-size:43px;
  line-height:.95;
}
.proof span{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.065em;
  line-height:1.2;
  text-transform:uppercase;
}
.proof p{
  margin:10px 0 0;
  color:#c0c7c4;
  font-size:12px;
  line-height:1.5;
}

/* ---------- BRAND STRIP ---------- */
.brand-strip{
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:#0a1319;
}
.ticker{
  width:max-content;
  display:flex;
  gap:38px;
  padding:13px 0;
  color:#c9cfcc;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  animation:ticker 26s linear infinite;
}
.ticker span:before{
  content:"•";
  margin-right:38px;
  color:var(--orange);
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- SECTION SYSTEM ---------- */
main>section:not(.hero):not(.page-hero):not(.cta){
  padding:64px 0;
  background:
    radial-gradient(circle at 90% 0%,rgba(209,138,75,.055),transparent 30%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
}
main>section.dark{
  background:
    radial-gradient(circle at 12% 12%,rgba(209,138,75,.045),transparent 26%),
    #081116;
}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);
  gap:42px;
  align-items:end;
  margin-bottom:30px;
}
.section-head h2{
  max-width:680px;
  margin-top:9px;
  font-size:clamp(34px,3.3vw,44px);
  text-transform:uppercase;
}
.section-head>p{
  max-width:520px;
  margin:0;
  font-size:15px;
  line-height:1.6;
}
.eyebrow{margin-bottom:9px}

/* ---------- GLASS CARD SYSTEM ---------- */
.services-grid,
.area-grid,
.path,
.metrics,
.features{
  display:grid;
  gap:14px;
}
.services-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.service,
.area-card,
.step,
.feature,
.aside,
.contact-card,
.form{
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    var(--panel);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.service{
  position:relative;
  isolation:isolate;
  min-height:205px;
  padding:22px;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.service:before{
  content:attr(data-num);
  position:absolute;
  right:10px;
  bottom:-14px;
  z-index:0;
  color:rgba(209,138,75,.09);
  font-size:80px;
  font-weight:900;
  line-height:1;
}
.service h3{
  position:relative;
  z-index:2;
  margin-bottom:12px;
  color:#fff;
  font-size:22px;
  line-height:1.04;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.service p{
  position:relative;
  z-index:2;
  color:#c4ccca;
  font-size:13px;
  line-height:1.55;
}
.service>a{
  position:relative;
  z-index:2;
  color:#e4a06a;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.service:hover{
  transform:translateY(-2px);
  border-color:rgba(209,138,75,.36);
  background:
    linear-gradient(145deg,rgba(209,138,75,.10),rgba(255,255,255,.025)),
    rgba(15,25,32,.92);
}
.service:hover h3{color:#fff}

/* ---------- IDENTITY / COMPANY FEATURE ---------- */
.identity{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:52px;
  align-items:center;
}
.machine-frame{
  min-height:430px;
  border:1px solid var(--line);
  border-radius:var(--r-major);
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(5,10,13,.08),rgba(5,10,13,.20)),
    url('../img/earthwork-company-local.webp') center/cover no-repeat;
  box-shadow:var(--shadow);
}
.identity h2{
  max-width:650px;
  margin:9px 0 16px;
  font-size:clamp(34px,3.2vw,44px);
  text-transform:uppercase;
}
.identity>div>p{
  max-width:650px;
  font-size:14px;
  line-height:1.65;
}
.features{
  grid-template-columns:1fr;
  margin:24px 0;
}
.feature{
  min-height:74px;
  padding:15px 16px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:13px;
  align-items:center;
  box-shadow:none;
  background:rgba(255,255,255,.035);
}
.feature b{
  color:var(--orange);
  font-size:12px;
}
.feature strong{
  display:block;
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
}
.feature span{
  display:block;
  margin-top:3px;
  color:#abb5b2;
  font-size:12px;
  line-height:1.4;
}

/* ---------- METRICS ---------- */
.metrics{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:10px;
  background:#091218;
}
.metric{
  min-height:112px;
  padding:19px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:13px;
  background:linear-gradient(140deg,#df8e50,#b8652d);
  color:#fff;
  box-shadow:0 10px 24px rgba(184,106,45,.16);
}
.metric strong{
  color:#fff;
  font-size:31px;
  line-height:1;
}
.metric span{
  margin-top:7px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.075em;
  line-height:1.3;
  text-transform:uppercase;
}

/* ---------- WORKFLOW ---------- */
.path{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{
  min-height:170px;
  padding:20px;
  box-shadow:none;
  background:rgba(255,255,255,.035);
}
.step b{
  display:flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border:1px solid rgba(209,138,75,.30);
  border-radius:10px;
  color:var(--orange);
  font-size:11px;
}
.step h3{
  margin-bottom:9px;
  color:#fff;
  font-size:17px;
  line-height:1.05;
  text-transform:uppercase;
}
.step p{
  margin:0;
  color:#b5bfbc;
  font-size:12px;
  line-height:1.5;
}

/* ---------- CTA ---------- */
.cta{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:
    linear-gradient(90deg,rgba(5,10,13,.92),rgba(5,10,13,.52)),
    url('../img/earthwork-cta-local.webp') center/cover no-repeat;
}
.cta-inner{
  min-height:270px;
  padding:58px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;
}
.cta h2{
  max-width:650px;
  margin:9px 0 12px;
  font-size:clamp(36px,4vw,54px);
  text-transform:uppercase;
}
.cta p{max-width:650px;color:#d2d7d4}

/* ---------- INTERNAL PAGE HERO ---------- */
.page-hero{
  position:relative;
  min-height:350px;
  padding:176px 0 48px;
  overflow:hidden;
  background:#081015;
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,10,13,.88),rgba(5,10,13,.42)),
    image-set(
      url('../img/hero/coast-land-clearing-main-hero.avif') type('image/avif'),
      url('../img/hero/coast-land-clearing-main-hero.webp') type('image/webp')
    );
  background-position:center,center;
  background-size:100% 100%,100% 100%;
  background-repeat:no-repeat;
}
.page-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,8,10,.12),rgba(4,8,10,.32));
}
.page-hero .wrap{
  position:relative;
  z-index:2;
}
.crumb{margin-bottom:12px}
.page-hero h1{
  max-width:760px;
  margin-bottom:12px;
  font-size:clamp(42px,4.2vw,54px);
  text-transform:uppercase;
}
.page-hero p{
  max-width:620px;
  margin:0;
  color:#d5dad7;
  font-size:14px;
  line-height:1.6;
}

/* ---------- INTERNAL CONTENT ---------- */
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:46px;
  align-items:start;
}
.copy>div{
  padding-bottom:34px;
  margin-bottom:34px;
  border-bottom:1px solid var(--line-soft);
}
.copy>div:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}
.copy h2{
  max-width:680px;
  margin:8px 0 13px;
  font-size:clamp(31px,2.8vw,40px);
  text-transform:uppercase;
}
.copy h3{
  margin:24px 0 8px;
  font-size:18px;
  text-transform:uppercase;
}
.copy p,.copy li{
  max-width:720px;
  color:#b8c1be;
  font-size:14px;
  line-height:1.65;
}
.aside{
  padding:22px;
}
.aside h3{
  margin-bottom:10px;
  font-size:20px;
  text-transform:uppercase;
}
.aside p{
  color:#b2bcba;
  font-size:13px;
}
.aside>a:not(.btn){
  display:block;
  padding:11px 0;
  border-bottom:1px solid var(--line-soft);
  color:#d5dad7;
  font-size:12px;
}
.aside .btn{
  width:100%;
  margin:10px 0 4px;
}

/* ---------- CAPABILITY CARDS ---------- */
.page-capabilities .services-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.page-capabilities .service{
  min-height:168px;
}
.page-capabilities .service h3{
  color:#fff;
  opacity:1;
}

/* ---------- SERVICE AREAS ---------- */
.area-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.area-card{
  min-height:155px;
  padding:19px;
  box-shadow:none;
  transition:transform .18s ease,border-color .18s ease;
}
.area-card h3{
  margin:7px 0 8px;
  color:#fff;
  font-size:18px;
  text-transform:uppercase;
}
.area-card p{
  margin-bottom:9px;
  color:#b7c0bd;
  font-size:12px;
  line-height:1.5;
}
.area-card a{
  color:#e3a06a;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.area-card:hover{
  transform:translateY(-2px);
  border-color:rgba(209,138,75,.34);
}

/* ---------- CONTACT / QUOTE ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.contact-card,.form{
  padding:24px;
}
.contact-card h2,.form>h2{
  margin:8px 0 18px;
  font-size:28px;
  text-transform:uppercase;
}
.contact-line{
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.contact-line small{
  display:block;
  margin-bottom:3px;
  color:var(--orange);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-line a,.contact-line strong{
  color:#eef0ec;
  font-size:13px;
  line-height:1.45;
}
.form{
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),
    var(--panel-strong);
}
.form-section{
  padding-top:20px;
  margin-top:20px;
  border-top:1px solid var(--line-soft);
}
.form-section:first-of-type{
  padding-top:0;
  margin-top:0;
  border-top:0;
}
.form-section h3{
  margin-bottom:13px;
  color:#fff;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.field.full{grid-column:1/-1}
.field label{
  display:block;
  margin-bottom:6px;
  color:#d8ddda;
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:43px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  outline:0;
  background:rgba(255,255,255,.055);
  color:#fff;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.field textarea{
  min-height:108px;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{color:#8e9996}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(209,138,75,.58);
  background:rgba(255,255,255,.075);
  box-shadow:0 0 0 3px rgba(209,138,75,.10);
}
.field select option{background:#fff;color:#111}
.help{
  display:block;
  margin-top:6px;
  color:#96a19e;
  font-size:10px;
  line-height:1.45;
}
.checks{display:grid;gap:9px}
.service-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.checkline{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  color:#e7ebe8;
  cursor:pointer;
}
.checkline input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.choice-mark{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:5px;
  background:rgba(255,255,255,.045);
}
.checkline:has(input:checked){
  border-color:rgba(209,138,75,.48);
  background:rgba(209,138,75,.10);
}
.checkline:has(input:checked) .choice-mark{
  border-color:var(--orange);
  background:var(--orange);
  box-shadow:inset 0 0 0 4px #152028;
}
.choice-copy,.choice-copy b{color:#eef0ed}
.filebox{margin-top:2px}
.upload-input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
.upload-surface{
  min-height:126px;
  padding:18px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  border:1px dashed rgba(255,255,255,.20);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.modern-upload.is-dragging .upload-surface,
.upload-surface:hover{
  border-color:rgba(209,138,75,.48);
  background:rgba(209,138,75,.075);
}
.upload-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:10px;
  background:rgba(209,138,75,.11);
  color:var(--orange);
}
.upload-icon svg{
  width:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}
.upload-copy strong{
  display:block;
  color:#fff;
  font-size:12px;
}
.upload-copy span{
  display:block;
  margin-top:4px;
  color:#9fa9a6;
  font-size:10px;
}
.upload-action{
  color:#fff;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.upload-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
}
.upload-status{color:#9fa9a6;font-size:10px}
.upload-list{margin-top:8px}
.upload-file{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 10px;
  border-bottom:1px solid var(--line-soft);
  color:#dce1de;
  font-size:11px;
}
.upload-file-size{color:#8f9a97}
.notice{
  margin-top:22px;
  padding:15px 16px;
  border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;
  background:rgba(209,138,75,.09);
  color:#e6d7ca;
  font-size:12px;
}
.form-alert{
  display:none;
  margin-bottom:14px;
  padding:11px 12px;
  border:1px solid rgba(215,103,80,.38);
  border-radius:10px;
  background:rgba(215,103,80,.10);
  color:#ffd8d0;
  font-size:11px;
}
.form-alert.is-visible{display:block}
.field-error,.upload-validation-message{
  display:block;
  margin-top:6px;
  color:#ffb3a4;
  font-size:10px;
}
.is-invalid input,
.is-invalid select,
.is-invalid textarea{
  border-color:rgba(215,103,80,.72);
}

/* ---------- FOOTER ---------- */
footer{
  padding:54px 0 20px;
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(circle at 12% 0%,rgba(209,138,75,.07),transparent 28%),
    #050a0d;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.55fr .75fr 1fr 1fr;
  gap:30px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--r-major);
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:var(--shadow-soft);
}
.footer-brand-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-logo{
  width:64px;
  height:64px;
  object-fit:contain;
}
.footer-brand-name{
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.footer-brand-tagline{
  margin-top:4px;
  color:var(--orange);
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.footer-brand p{
  max-width:390px;
  margin-top:14px;
  color:#9ba6a3;
  font-size:12px;
  line-height:1.55;
}
.footer-title{
  margin-bottom:12px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-links a,.footer-links span,footer p{
  color:#9ea8a5;
  font-size:11px;
  line-height:1.45;
}
.footer-links a:hover{color:#fff}
.copyright{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 3px 0;
  color:#778481;
  font-size:10px;
}
.designer-credit a{color:#aeb7b4}

/* ---------- ERROR / THANK-YOU ---------- */
.page-error main,
.page-thank-you main{
  min-height:70vh;
}
.page-error h1,
.page-thank-you h1{
  font-size:clamp(42px,5vw,64px);
}

/* ---------- REVEALS ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.on{
  opacity:1;
  transform:none;
}

/* =========================================================
   RESPONSIVE SYSTEM
   <=430 phone, 431–767 large phone, 768–1024 tablet,
   1025–1199 small desktop, 1200–1399 laptop,
   1400–1599 desktop, 1600+ wide.
   ========================================================= */

/* ---------- 1600+ ---------- */
@media(min-width:1600px){
  :root{--max:1260px}
  .hero,.hero-grid{min-height:860px}
  .hero h1{font-size:74px}
}

/* ---------- 1400–1599 ---------- */
@media(min-width:1400px) and (max-width:1599px){
  .hero,.hero-grid{min-height:810px}
  .hero-copy{padding-bottom:92px}
}

/* ---------- 1200–1399 LAPTOP ---------- */
@media(min-width:1200px) and (max-width:1399px){
  :root{--max:1130px}
  .utility{left:24px;right:24px}
  header{left:24px;right:24px}
  .nav{padding-inline:28px}
  .links{gap:16px}
  .links a:not(.btn){font-size:9px}
  .brand-text strong{font-size:12px}
  .hero,.hero-grid{min-height:740px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 280px;padding-top:150px}
  .hero-copy{padding-bottom:70px}
  .hero h1{font-size:58px;max-width:650px}
  .proof{width:280px}
  main>section:not(.hero):not(.page-hero):not(.cta){padding:54px 0}
  .section-head h2{font-size:38px}
  .service{min-height:190px;padding:19px}
  .service h3{font-size:19px}
  .identity{gap:44px}
  .identity h2{font-size:38px}
  .machine-frame{min-height:390px}
  .metric{min-height:104px}
  .step{min-height:160px;padding:18px}
  .page-hero{min-height:330px;padding-top:166px}
  .page-hero h1{font-size:46px}
  .copy h2{font-size:34px}
}

/* Short laptop height */
@media(min-width:1200px) and (max-width:1440px) and (max-height:850px){
  .hero,.hero-grid{min-height:690px}
  .hero-copy{padding-bottom:54px}
  .proof{margin-bottom:20px}
  main>section:not(.hero):not(.page-hero):not(.cta){padding:48px 0}
  .section-head{margin-bottom:24px}
  .service{min-height:178px}
  .machine-frame{min-height:360px}
  .metrics{padding:8px}
  .metric{min-height:96px;padding:16px}
  .page-hero{min-height:305px;padding:155px 0 40px}
}

/* ---------- 1025–1199 SMALL DESKTOP ---------- */
@media(min-width:1025px) and (max-width:1199px){
  :root{--max:960px}
  .utility{left:16px;right:16px}
  header{left:16px;right:16px}
  .brand-text small{display:none}
  .links{gap:12px}
  .links a:not(.btn){font-size:8.5px}
  .links .btn{padding-inline:14px;font-size:9px}
  .hero,.hero-grid{min-height:700px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 260px;gap:26px}
  .hero h1{font-size:54px}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service{min-height:170px}
  .metrics,.path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .identity{gap:36px}
  .machine-frame{min-height:360px}
  .page-capabilities .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- <=1024 TABLET / NAV ---------- */
@media(max-width:1024px){
  .utility{
    top:12px;
    left:14px;
    right:14px;
  }
  header{
    top:50px;
    left:14px;
    right:14px;
  }
  .nav{padding-inline:18px}
  .brand-text small{display:none}
  .menu{display:inline-flex}
  .links{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    display:none;
    padding:18px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:rgba(8,16,21,.96);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--shadow);
  }
  .links.open{display:flex}
  .links a:not(.btn){
    padding:11px 10px;
    font-size:11px;
  }
  .links a.active:after{display:none}
  .links .btn{width:100%}
  body.menu-open{overflow:hidden}
  .hero,.hero-grid{min-height:760px}
  .hero-grid{
    grid-template-columns:1fr;
    gap:18px;
    padding-top:155px;
  }
  .hero-copy{padding-bottom:0}
  .hero h1{font-size:clamp(48px,7.2vw,62px)}
  .proof{
    width:min(100%,390px);
    margin:0 0 24px;
    justify-self:start;
  }
  .services-grid,
  .path,
  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .identity,
  .content-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .machine-frame{min-height:420px}
  .aside{max-width:none}
  .section-head{grid-template-columns:1fr;gap:14px}
  .section-head>p{max-width:650px}
  .page-hero{padding-top:160px}
  .page-capabilities .services-grid,
  .area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-card{max-width:none}
  .footer-grid{grid-template-columns:1.3fr 1fr}
}

/* ---------- 768–1024 TABLET ---------- */
@media(min-width:768px) and (max-width:1024px){
  :root{--max:900px}
  .hero h1{max-width:680px}
  main>section:not(.hero):not(.page-hero):not(.cta){padding:54px 0}
  .identity h2{font-size:38px}
}

/* ---------- <=767 PHONE ---------- */
@media(max-width:767px){
  .wrap{width:calc(100% - 28px)}
  .utility{display:none}
  header{
    top:12px;
    left:12px;
    right:12px;
    min-height:60px;
    border:1px solid var(--line);
    border-radius:13px;
  }
  .nav{min-height:60px;padding:0 12px}
  .brand img{width:40px;height:40px}
  .brand-text strong{font-size:11px}
  .links{top:70px}
  .hero,.hero-grid{min-height:690px}
  .hero:before{
    background:
      linear-gradient(90deg,rgba(5,9,12,.91) 0%,rgba(5,9,12,.70) 45%,rgba(5,9,12,.22) 100%),
      image-set(
        url('../img/hero/coast-land-clearing-main-hero-mobile.avif') type('image/avif'),
        url('../img/hero/coast-land-clearing-main-hero-mobile.webp') type('image/webp')
      );
    background-position:center,center;
    background-size:100% 100%,100% 100%;
  }
  .hero-grid{
    padding-top:112px;
    padding-bottom:28px;
  }
  .hero h1{
    max-width:10ch;
    font-size:clamp(42px,11vw,56px);
  }
  .hero-copy>p{font-size:14px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .proof{width:100%;padding:18px}
  .ticker{animation:none;flex-wrap:nowrap}
  main>section:not(.hero):not(.page-hero):not(.cta){padding:44px 0}
  .section-head{margin-bottom:22px}
  .section-head h2{font-size:clamp(29px,8vw,38px)}
  .services-grid,
  .path,
  .metrics,
  .features,
  .page-capabilities .services-grid,
  .area-grid{
    grid-template-columns:1fr;
  }
  .service{min-height:auto}
  .machine-frame{min-height:330px}
  .identity{gap:28px}
  .identity h2{font-size:clamp(29px,8vw,38px)}
  .metrics{padding:8px}
  .metric{min-height:92px}
  .cta-inner{
    grid-template-columns:1fr;
    gap:20px;
    min-height:300px;
    padding:48px 0;
  }
  .cta .btn{width:100%}
  .page-hero{
    min-height:270px;
    padding:100px 0 34px;
  }
  .page-hero:before{
    background:
      linear-gradient(90deg,rgba(5,10,13,.90),rgba(5,10,13,.48)),
      image-set(
        url('../img/hero/coast-land-clearing-main-hero-mobile.avif') type('image/avif'),
        url('../img/hero/coast-land-clearing-main-hero-mobile.webp') type('image/webp')
      );
    background-position:center,center;
    background-size:100% 100%,100% 100%;
  }
  .page-hero h1{font-size:clamp(32px,9vw,44px)}
  .copy h2{font-size:clamp(28px,7.8vw,36px)}
  .fields,
  .service-choice-grid{
    grid-template-columns:1fr;
  }
  .upload-surface{
    grid-template-columns:38px 1fr;
  }
  .upload-action{grid-column:1/-1}
  .upload-meta{flex-direction:column;gap:4px}
  .footer-grid{grid-template-columns:1fr;padding:22px}
  .copyright{flex-direction:column}
}

/* ---------- <=430 CURRENT IPHONE WIDTH ---------- */
@media(max-width:430px){
  .wrap{width:calc(100% - 24px)}
  .brand-text{max-width:175px}
  .brand-text strong{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero,.hero-grid{min-height:650px}
  .hero h1{font-size:clamp(39px,11.2vw,49px)}
  .kicker{font-size:9px}
  .proof strong{font-size:38px}
  .section-head h2,
  .identity h2{font-size:30px}
  .service,.area-card,.step,.form,.contact-card,.aside{
    border-radius:13px;
  }
  .contact-card,.form{padding:18px}
  .contact-card h2,.form>h2{font-size:24px}
  footer{padding-top:42px}
}



/* ---------- UPGRADE 1: HOMEPAGE MICRO-SPACING ---------- */
body.home .hero-copy{padding-bottom:72px}
body.home .hero h1{margin-bottom:15px}
body.home .hero-copy>p{max-width:540px}
body.home .hero-actions{margin-top:21px}
body.home .proof{margin-bottom:24px}
body.home main>section:not(.hero):not(.page-hero):not(.cta){
  padding-top:58px;
  padding-bottom:58px;
}
body.home .section-head{margin-bottom:26px}
body.home .services-grid{gap:13px}
body.home .service{min-height:192px;padding:20px}
body.home .identity{gap:46px}
body.home .features{gap:10px;margin-top:20px;margin-bottom:20px}
body.home .feature{min-height:68px;padding:13px 15px}
body.home .metrics{gap:9px;padding:9px}
body.home .metric{min-height:102px;padding:17px}
body.home .path{gap:12px}
body.home .step{min-height:158px;padding:18px}
body.home .step b{margin-bottom:12px}
body.home .step h3{margin-bottom:7px}

/* ---------- UPGRADE 2: UNIFIED MICROINTERACTIONS ---------- */
.service,
.area-card,
.step,
.feature,
.metric,
.contact-card,
.form,
.aside,
.footer-grid{
  transition:
    transform .20s ease,
    border-color .20s ease,
    background-color .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
}
.service:hover,
.area-card:hover,
.step:hover,
.feature:hover{
  transform:translateY(-2px);
  border-color:rgba(209,138,75,.38);
  box-shadow:0 16px 34px rgba(0,0,0,.20);
}
.service:hover,
.step:hover,
.feature:hover{
  background:
    linear-gradient(145deg,rgba(209,138,75,.085),rgba(255,255,255,.025)),
    rgba(15,25,32,.90);
}
.area-card:hover{
  background:
    linear-gradient(145deg,rgba(209,138,75,.075),rgba(255,255,255,.022)),
    rgba(15,25,32,.90);
}
.metric:hover{
  transform:translateY(-2px);
  filter:brightness(1.035);
  box-shadow:0 14px 28px rgba(184,106,45,.20);
}
.service:hover h3,
.step:hover h3,
.feature:hover strong,
.area-card:hover h3{
  color:#fff;
  opacity:1;
}
.service>a,
.area-card>a,
.footer-links a{
  transition:color .18s ease,opacity .18s ease,transform .18s ease;
}
.service>a:hover,
.area-card>a:hover{color:#f0b17f}
.footer-links a:hover{transform:translateX(2px)}
.btn{will-change:transform}

@media(min-width:1200px) and (max-width:1399px){
  body.home .hero-copy{padding-bottom:62px}
  body.home main>section:not(.hero):not(.page-hero):not(.cta){
    padding-top:50px;
    padding-bottom:50px;
  }
  body.home .service{min-height:180px}
  body.home .metric{min-height:96px}
  body.home .step{min-height:150px}
}
@media(max-width:767px){
  body.home main>section:not(.hero):not(.page-hero):not(.cta){
    padding-top:42px;
    padding-bottom:42px;
  }
  body.home .section-head{margin-bottom:20px}
  body.home .service,
  body.home .step{min-height:auto}
}



/* =========================================================
   UPGRADE 4 + 5 + 6
   Mobile header/menu + tablet polish + quote conversion UX
   ========================================================= */

/* ---------- UPGRADE 4: MOBILE HEADER / MENU ---------- */
@media(max-width:767px){
  header{
    top:10px;
    left:10px;
    right:10px;
    min-height:62px;
    border-radius:14px;
    background:rgba(12,21,27,.82);
    backdrop-filter:blur(24px) saturate(128%);
    -webkit-backdrop-filter:blur(24px) saturate(128%);
    box-shadow:0 12px 32px rgba(0,0,0,.24);
  }
  .nav{
    min-height:62px;
    padding:0 11px 0 10px;
    gap:10px;
  }
  .brand{
    gap:9px;
    min-width:0;
  }
  .brand img{
    width:41px;
    height:41px;
    flex:0 0 41px;
  }
  .brand-text{
    min-width:0;
    max-width:190px;
  }
  .brand-text strong{
    font-size:11px;
    line-height:1.05;
    letter-spacing:.015em;
  }
  .menu{
    min-width:74px;
    min-height:42px;
    padding:0 12px;
    border-color:rgba(255,255,255,.14);
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    font-size:10px;
    letter-spacing:.06em;
  }
  .menu:hover{
    background:rgba(255,255,255,.09);
  }
  .links{
    top:72px;
    padding:10px;
    gap:2px;
    border-radius:14px;
    background:rgba(7,14,19,.98);
    box-shadow:0 22px 48px rgba(0,0,0,.34);
  }
  .links a:not(.btn){
    min-height:44px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border-radius:9px;
    font-size:11px;
    letter-spacing:.06em;
  }
  .links a:not(.btn):hover,
  .links a:not(.btn).active{
    background:rgba(255,255,255,.05);
  }
  .links .btn{
    margin-top:6px;
    min-height:46px;
  }
  body.menu-open:after{
    content:"";
    position:fixed;
    inset:0;
    z-index:80;
    background:rgba(0,0,0,.42);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    pointer-events:none;
  }
}

/* ---------- UPGRADE 5: 1024PX TABLET POLISH ---------- */
@media(min-width:768px) and (max-width:1024px){
  :root{--max:940px}
  .wrap{width:min(var(--max),calc(100% - 36px))}
  .utility{
    left:18px;
    right:18px;
  }
  header{
    left:18px;
    right:18px;
  }
  .nav{
    padding-inline:18px;
  }
  .hero,
  .hero-grid{
    min-height:720px;
  }
  .hero-grid{
    grid-template-columns:minmax(0,1fr) 250px;
    gap:24px;
    padding-top:146px;
    align-items:end;
  }
  .hero-copy{
    padding-bottom:50px;
  }
  .hero h1{
    max-width:620px;
    font-size:clamp(48px,6vw,58px);
  }
  .hero-copy>p{
    max-width:500px;
  }
  .proof{
    width:250px;
    margin-bottom:24px;
    padding:18px;
  }
  .proof strong{font-size:38px}
  main>section:not(.hero):not(.page-hero):not(.cta){
    padding:50px 0;
  }
  .section-head{
    grid-template-columns:minmax(0,1fr) minmax(260px,.82fr);
    gap:28px;
    margin-bottom:24px;
  }
  .section-head h2{
    font-size:34px;
  }
  .services-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .service{
    min-height:172px;
  }
  .identity{
    grid-template-columns:1fr;
    gap:28px;
  }
  .machine-frame{
    min-height:360px;
  }
  .features{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .feature{
    grid-template-columns:1fr;
    align-items:start;
    min-height:118px;
  }
  .metrics,
  .path{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-hero{
    min-height:300px;
    padding:148px 0 38px;
  }
  .page-hero h1{
    font-size:42px;
  }
  .content-grid{
    grid-template-columns:minmax(0,1fr) 255px;
    gap:30px;
  }
  .page-capabilities .services-grid,
  .area-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .contact-grid{
    grid-template-columns:280px minmax(0,1fr);
    gap:18px;
  }
  .contact-card,
  .form{
    padding:20px;
  }
  .footer-grid{
    grid-template-columns:1.25fr 1fr;
    gap:24px;
  }
}

/* Prevent tablet rules collapsing too early */
@media(min-width:900px) and (max-width:1024px){
  .links{
    position:static;
    display:flex;
    flex-direction:row;
    align-items:center;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    gap:10px;
  }
  .menu{display:none}
  .links a:not(.btn){
    min-height:auto;
    padding:24px 0 20px;
    font-size:8.5px;
  }
  .links .btn{
    width:auto;
    min-height:42px;
    padding-inline:13px;
    font-size:9px;
  }
}

/* ---------- UPGRADE 6: QUOTE CONVERSION UX ---------- */
body.page-quote .contact-grid{
  grid-template-columns:300px minmax(0,1fr);
  gap:20px;
}
body.page-quote .contact-card{
  padding:22px;
}
body.page-quote .contact-card h2{
  margin-bottom:15px;
  font-size:24px;
}
body.page-quote .form{
  padding:24px;
}
body.page-quote .form>h2{
  margin-bottom:7px;
  font-size:25px;
}
body.page-quote .form>p{
  max-width:670px;
  margin-bottom:18px;
  color:#aeb8b5;
  font-size:12px;
  line-height:1.5;
}
body.page-quote .form-section{
  position:relative;
  padding-top:22px;
  margin-top:22px;
}
body.page-quote .form-section h3{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
  font-size:14px;
}
body.page-quote .form-section h3:before{
  content:"";
  width:5px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--orange),var(--orange-deep));
  box-shadow:0 0 16px rgba(209,138,75,.18);
}
body.page-quote .fields{
  gap:11px 12px;
}
body.page-quote .field label{
  font-size:9.5px;
}
body.page-quote .field input,
body.page-quote .field select,
body.page-quote .field textarea{
  min-height:44px;
}
body.page-quote .service-choice-grid{
  gap:8px;
}
body.page-quote .checkline{
  min-height:52px;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
body.page-quote .checkline:hover{
  border-color:rgba(209,138,75,.32);
  background:rgba(209,138,75,.055);
}
body.page-quote .checkline:has(input:checked){
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(184,106,45,.10);
}
body.page-quote .choice-copy b{
  display:block;
  font-size:11px;
  line-height:1.25;
}
body.page-quote .choice-copy span{
  display:block;
  margin-top:2px;
  color:#9da8a5;
  font-size:9.5px;
  line-height:1.35;
}
body.page-quote .upload-surface{
  min-height:116px;
  padding:16px;
}
body.page-quote .upload-action{
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.045);
}
body.page-quote .upload-surface:hover .upload-action{
  background:rgba(209,138,75,.10);
}
body.page-quote .form-alert{
  border-left:3px solid var(--danger);
}
body.page-quote .field-error,
body.page-quote .upload-validation-message{
  padding-left:2px;
}
body.page-quote button[type="submit"]{
  width:100%;
  min-height:48px;
  margin-top:4px;
  font-size:11.5px;
  letter-spacing:.065em;
}
body.page-quote .notice{
  margin-top:18px;
}

/* Quote tablet/mobile */
@media(max-width:1024px){
  body.page-quote .contact-grid{
    grid-template-columns:1fr;
  }
  body.page-quote .contact-card{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px;
  }
  body.page-quote .contact-card h2,
  body.page-quote .contact-card>.eyebrow,
  body.page-quote .contact-card>.btn{
    grid-column:1/-1;
  }
}
@media(max-width:650px){
  body.page-quote .contact-card{
    display:block;
  }
  body.page-quote .form{
    padding:18px;
  }
  body.page-quote .form-section{
    padding-top:18px;
    margin-top:18px;
  }
  body.page-quote .fields,
  body.page-quote .service-choice-grid{
    grid-template-columns:1fr;
  }
  body.page-quote .checkline{
    min-height:50px;
  }
}



/* =========================================================
   UPGRADE 7 + 8 + 9
   Internal-page differentiation + footer refinement + AVIF
   ========================================================= */

/* ---------- UPGRADE 7: INTERNAL PAGE DIFFERENTIATION ---------- */

/* SERVICES */
body.page-services .page-hero:after{
  background:
    linear-gradient(180deg,rgba(4,8,10,.08),rgba(4,8,10,.34)),
    linear-gradient(90deg,rgba(209,138,75,.06),transparent 48%);
}
body.page-services .copy>div{
  position:relative;
  padding-left:18px;
}
body.page-services .copy>div:before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:3px;
  height:42px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--orange),rgba(209,138,75,.12));
}
body.page-services .copy h2{
  max-width:640px;
}
body.page-services .aside{
  background:
    linear-gradient(145deg,rgba(209,138,75,.06),rgba(255,255,255,.018)),
    rgba(13,22,28,.88);
}

/* CAPABILITIES */
body.page-capabilities .services-grid{
  gap:15px;
}
body.page-capabilities .service{
  min-height:164px;
  background:
    radial-gradient(circle at 88% 14%,rgba(209,138,75,.08),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    rgba(13,22,28,.88);
}
body.page-capabilities .service:before{
  font-size:72px;
  opacity:.85;
}
body.page-capabilities .service h3{
  max-width:330px;
}
body.page-capabilities .service p{
  max-width:520px;
}

/* SAFETY */
body.page-safety .copy>div{
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.028);
}
body.page-safety .copy>div+div{
  margin-top:14px;
}
body.page-safety .copy>div:last-child{
  border-bottom:1px solid var(--line);
}
body.page-safety .copy h2{
  font-size:clamp(30px,2.5vw,38px);
}

/* COMPANY */
body.page-company .identity{
  align-items:start;
}
body.page-company .identity>div:last-child{
  padding:10px 0 0;
}
body.page-company .features{
  margin-top:22px;
}
body.page-company .feature{
  border-left:2px solid rgba(209,138,75,.22);
}

/* CONTACT */
body.page-contact .contact-grid{
  gap:18px;
}
body.page-contact .contact-card{
  background:
    linear-gradient(145deg,rgba(209,138,75,.055),rgba(255,255,255,.018)),
    rgba(13,22,28,.9);
}
body.page-contact .form{
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),
    rgba(10,18,24,.94);
}

/* SERVICE AREAS */
body.page-service-areas .area-grid{
  gap:12px;
}
body.page-service-areas .area-card{
  min-height:148px;
  position:relative;
  overflow:hidden;
}
body.page-service-areas .area-card:after{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  right:-30px;
  top:-30px;
  border-radius:50%;
  background:rgba(209,138,75,.055);
}
body.page-service-areas .area-card h3,
body.page-service-areas .area-card p,
body.page-service-areas .area-card a{
  position:relative;
  z-index:2;
}

/* COUNTY DETAIL PAGES */
body.page-service-area-detail .copy{
  position:relative;
}
body.page-service-area-detail .copy>div{
  padding-left:18px;
}
body.page-service-area-detail .copy>div:before{
  content:"";
  position:absolute;
  left:0;
  width:2px;
  height:36px;
  border-radius:999px;
  background:rgba(209,138,75,.35);
}

/* ---------- UPGRADE 8: FOOTER ARCHITECTURE ---------- */
footer{
  padding-top:44px;
  padding-bottom:16px;
}
.footer-grid{
  grid-template-columns:1.7fr .72fr .95fr .9fr;
  gap:24px;
  padding:24px 26px;
  align-items:start;
}
.footer-brand-head{
  gap:10px;
}
.footer-logo{
  width:58px;
  height:58px;
}
.footer-brand-name{
  font-size:12px;
}
.footer-brand p{
  max-width:360px;
  margin-top:12px;
  font-size:11px;
  line-height:1.5;
}
.footer-title{
  margin-bottom:10px;
  font-size:10px;
}
.footer-links{
  gap:7px;
}
.footer-links a,
.footer-links span,
footer p{
  font-size:10.5px;
}
.copyright{
  padding-top:15px;
  font-size:9.5px;
  color:#83908d;
}
.designer-credit{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}
.designer-credit a{
  color:#d7ddd9;
  font-weight:700;
}
@media(max-width:1024px){
  .footer-grid{
    grid-template-columns:1.4fr 1fr;
    gap:20px 26px;
  }
}
@media(max-width:767px){
  footer{
    padding-top:36px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    padding:20px;
    gap:18px;
  }
  .footer-logo{
    width:54px;
    height:54px;
  }
  .copyright{
    gap:7px;
  }
}

/* ---------- UPGRADE 9: LOCAL AVIF/WEBP SOURCE SWITCH ---------- */
.machine-frame{
  background:
    linear-gradient(180deg,rgba(5,10,13,.08),rgba(5,10,13,.20)),
    image-set(
      url('../img/earthwork-company-local.avif') type('image/avif'),
      url('../img/earthwork-company-local.webp') type('image/webp')
    ) center/cover no-repeat;
}
.cta{
  background:
    linear-gradient(90deg,rgba(5,10,13,.92),rgba(5,10,13,.52)),
    image-set(
      url('../img/earthwork-cta-local.avif') type('image/avif'),
      url('../img/earthwork-cta-local.webp') type('image/webp')
    ) center/cover no-repeat;
}



/* ---------- COMPANY IMAGE CORRECTION ---------- */
.machine-frame{
  background-position:center,right 46% center!important;
}
@media(max-width:1024px){
  .machine-frame{
    background-position:center,right 42% center!important;
  }
}
@media(max-width:767px){
  .machine-frame{
    background-position:center,right 38% center!important;
  }
}



/* =========================================================
   ACCESSIBILITY + TYPOGRAPHY + IMAGE FOCAL AUDIT
   ========================================================= */

/* ---------- ACCESSIBILITY INTERACTION AUDIT ---------- */
:root{
  --focus-ring:#f3ad75;
}

/* Strong, consistent keyboard focus */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(243,173,117,.16);
}

/* Ensure invisible controls remain keyboard/screen-reader usable */
.checkline input,
.service-choice input,
.consent-choice input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:auto;
}
.checkline:focus-within,
.service-choice:focus-within,
.consent-choice:focus-within{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}

/* More obvious selected state beyond color alone */
.checkline:has(input:checked),
.service-choice:has(input:checked),
.consent-choice:has(input:checked){
  border-width:2px;
}
.checkline:has(input:checked) .choice-mark:after{
  content:"";
  display:block;
  width:7px;
  height:4px;
  margin:4px 0 0 4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* Error state not dependent on color only */
.is-invalid label:after{
  content:" — CHECK THIS FIELD";
  color:#ffb3a4;
  font-size:9px;
  letter-spacing:.04em;
}
.form-alert[role="alert"]{
  font-weight:700;
}

/* Better menu keyboard visibility */
.links a:focus-visible,
.menu:focus-visible{
  position:relative;
  z-index:3;
}

/* Accessible skip-link polish */
.skip:focus{
  left:12px;
  top:12px;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 16px;
  background:#fff;
  color:#111;
  font-weight:900;
  border-radius:9px;
}

/* Minimum touch targets */
@media(max-width:1024px){
  .btn,
  .menu,
  .links a,
  .checkline,
  .contact-line a{
    min-height:44px;
  }
}

/* ---------- REAL-DEVICE TYPOGRAPHY CALIBRATION ---------- */

/* Wide desktop */
@media(min-width:1600px){
  body{font-size:16px}
  .hero h1{font-size:72px;max-width:760px}
  .hero-copy>p{font-size:15.5px;max-width:565px}
  .section-head h2{font-size:44px}
  .page-hero h1{font-size:54px}
  .copy h2{font-size:40px}
  .service h3{font-size:22px}
}

/* 1440 class */
@media(min-width:1400px) and (max-width:1599px){
  .hero h1{font-size:66px;max-width:705px}
  .hero-copy>p{font-size:15px;max-width:545px}
  .section-head h2{font-size:41px}
  .page-hero h1{font-size:49px}
  .copy h2{font-size:36px}
}

/* 1366 laptop class */
@media(min-width:1200px) and (max-width:1399px){
  body{font-size:15px}
  .hero h1{font-size:56px;max-width:625px}
  .hero-copy>p{font-size:14px;max-width:505px}
  .section-head h2{font-size:36px;max-width:610px}
  .section-head>p{font-size:13.5px;max-width:470px}
  .page-hero h1{font-size:43px;max-width:680px}
  .page-hero p{font-size:13px;max-width:570px}
  .copy h2{font-size:32px;max-width:610px}
  .copy p,.copy li{font-size:13px;line-height:1.6}
  .service h3{font-size:18px}
  .service p{font-size:12px}
  .area-card h3{font-size:16px}
}

/* 1024 tablet class */
@media(min-width:768px) and (max-width:1024px){
  body{font-size:15px}
  .hero h1{font-size:50px;max-width:570px}
  .hero-copy>p{font-size:13.5px;max-width:475px}
  .section-head h2{font-size:32px;max-width:550px}
  .section-head>p{font-size:13px}
  .page-hero h1{font-size:39px;max-width:620px}
  .page-hero p{font-size:13px}
  .copy h2{font-size:30px}
  .copy p,.copy li{font-size:13px}
}

/* Large phones */
@media(min-width:431px) and (max-width:767px){
  body{font-size:15px}
  .hero h1{font-size:47px;max-width:9.5ch}
  .hero-copy>p{font-size:13.5px}
  .section-head h2{font-size:31px}
  .page-hero h1{font-size:37px}
  .copy h2{font-size:29px}
  .service h3{font-size:18px}
}

/* Current iPhone widths */
@media(max-width:430px){
  body{font-size:14.5px}
  .hero h1{
    font-size:clamp(38px,10.8vw,46px);
    max-width:9.5ch;
    line-height:.94;
  }
  .hero-copy>p{
    max-width:34ch;
    font-size:13px;
    line-height:1.52;
  }
  .section-head h2,
  .identity h2{
    font-size:29px;
    line-height:.98;
  }
  .section-head>p{
    font-size:12.5px;
    line-height:1.55;
  }
  .page-hero h1{
    font-size:34px;
    line-height:.98;
  }
  .page-hero p{
    font-size:12.5px;
  }
  .copy h2{
    font-size:27px;
    line-height:1;
  }
  .copy p,.copy li{
    font-size:12.5px;
  }
  .service h3,
  .area-card h3{
    font-size:17px;
  }
}

/* ---------- IMAGE FOCAL-POINT AUDIT ---------- */

/* Homepage + internal hero: keep excavator machinery visible */
.hero:before{
  background-position:center,left 47% center;
}
.page-hero:before{
  background-position:center,left 50% center;
}

/* Company / field panel */
.machine-frame{
  background-position:right 44% center!important;
}

/* CTA: keep machinery centered and avoid empty sky */
.cta{
  background-position:center 58%!important;
}

/* Tablet */
@media(min-width:768px) and (max-width:1024px){
  .hero:before{
    background-position:center,left 52% center;
  }
  .page-hero:before{
    background-position:center,left 53% center;
  }
  .machine-frame{
    background-position:right 40% center!important;
  }
  .cta{
    background-position:center 62%!important;
  }
}

/* Phone */
@media(max-width:767px){
  .hero:before{
    background-position:center,left 58% center;
  }
  .page-hero:before{
    background-position:center,left 58% center;
  }
  .machine-frame{
    background-position:right 36% center!important;
  }
  .cta{
    background-position:center 64%!important;
  }
}

/* Keep images from stretching beyond containers */
.machine-frame,
.hero,
.page-hero,
.cta{
  max-width:100%;
  overflow:hidden;
}


/* BUILD 1 — MOTION + SERVICES UX + QUOTE STATES */
.reveal{opacity:0;transform:translateY(18px) scale(.992);filter:blur(4px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1),filter .55s cubic-bezier(.22,.61,.36,1)}
.reveal.on{opacity:1;transform:none;filter:none}
.services-grid .reveal:nth-child(2),.path .reveal:nth-child(2),.area-grid .reveal:nth-child(2){transition-delay:.05s}
.services-grid .reveal:nth-child(3),.path .reveal:nth-child(3),.area-grid .reveal:nth-child(3){transition-delay:.10s}
.services-grid .reveal:nth-child(4),.path .reveal:nth-child(4),.area-grid .reveal:nth-child(4){transition-delay:.15s}
body.page-services .copy>div{padding-top:6px;padding-bottom:30px;margin-bottom:30px}
body.page-services .copy h2{margin-bottom:11px}
body.page-services .copy ul{margin-top:12px;padding-left:19px}
body.page-services .copy li+li{margin-top:5px}
body.page-services .aside .btn{margin-top:14px}
body.page-services .aside a:not(.btn){min-height:42px;display:flex;align-items:center}
body.page-quote button[type="submit"].is-loading{position:relative;pointer-events:none;opacity:.88}
body.page-quote button[type="submit"].is-loading:before{content:"";width:15px;height:15px;margin-right:9px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:clc-spin .75s linear infinite}
@keyframes clc-spin{to{transform:rotate(360deg)}}
body.page-quote .form-alert.success{display:block;border-color:rgba(80,185,126,.34);border-left:3px solid #50b97e;background:rgba(80,185,126,.08);color:#d8f4e4}
body.page-quote .form-alert.error{display:block}
body.page-quote .upload-file{border-radius:8px;background:rgba(255,255,255,.025)}


/* BUILD 2 — COUNTY CONSISTENCY + HOME CONVERSION + FOOTER UX */
body.home .hero-actions .btn:first-child{min-width:164px}
body.home .proof{border-color:rgba(209,138,75,.28)}
body.home .proof strong{letter-spacing:-.025em}
body.home .services-grid .service>a{display:inline-flex;align-items:center;gap:6px}
body.home .services-grid .service>a:after{content:"→";transition:transform .18s ease}
body.home .services-grid .service:hover>a:after{transform:translateX(3px)}
body.page-service-area-detail main>section:not(.page-hero):not(.cta){padding-top:52px;padding-bottom:52px}
body.page-service-area-detail .content-grid{grid-template-columns:minmax(0,1fr) 285px;gap:38px}
body.page-service-area-detail .copy>div{padding-bottom:28px;margin-bottom:28px}
body.page-service-area-detail .aside{align-self:start}
body.page-service-area-detail .aside .btn{width:100%}
.footer-grid{overflow:hidden}
.footer-links a{position:relative;width:max-content;max-width:100%}
.footer-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--orange);transition:right .2s ease}
.footer-links a:hover:after{right:0}
.designer-credit a:hover{color:#fff}
@media(max-width:767px){.footer-links a{min-height:36px;display:flex;align-items:center}}


/* BUILD 3 — PERFORMANCE + UTILITY PAGES */
.page-error main,.page-thank-you main{display:grid;place-items:center}
.page-error main>section,.page-thank-you main>section{width:100%}
.page-error .page-hero,.page-thank-you .page-hero{min-height:360px}
.page-error .page-hero h1,.page-thank-you .page-hero h1{max-width:680px}
.page-error .btn,.page-thank-you .btn{margin-top:10px}
@supports(content-visibility:auto){
 body:not(.home) main>section:not(.page-hero),body.home main>section:nth-of-type(n+3){content-visibility:auto;contain-intrinsic-size:700px}
}


/* BUILD 4 — ACCESSIBILITY + UPLOAD UX */
.upload-surface:focus-within{outline:3px solid var(--focus-ring);outline-offset:3px}
.upload-file{min-height:38px;align-items:center}
.upload-file-size{white-space:nowrap}
.form-alert{line-height:1.45}
.field-error{font-weight:700}
@media(max-width:650px){.upload-surface{min-height:108px}}


/* BUILD 5 — VISUAL RHYTHM + CTA HIERARCHY + AREA COMPACTNESS */
.btn.outline{box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.hero-actions .btn:first-child,.cta .btn,body.page-quote button[type="submit"]{box-shadow:0 12px 28px rgba(184,106,45,.24)}
.hero-actions .btn.outline{min-width:142px}
main>section+section{border-top:1px solid rgba(255,255,255,.035)}
.section-head{margin-bottom:24px}
.section-head h2{text-wrap:balance}
.section-head>p{text-wrap:pretty}
body.page-service-areas main>section:not(.page-hero){padding-top:46px;padding-bottom:48px}
body.page-service-areas .area-grid{gap:11px}
body.page-service-areas .area-card{min-height:140px;padding:17px}
body.page-service-areas .area-card h3{margin-top:6px}

/* ---------- Quote page final hard lock ---------- */
body.page-quote .form,
body.page-quote .contact-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),
    rgba(10,19,25,.93)!important;
  color:#fff!important;
}
body.page-quote .field input,
body.page-quote .field select,
body.page-quote .field textarea{
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
}
body.page-quote .service-choice,
body.page-quote .consent-choice,
body.page-quote .upload-surface{
  background:rgba(255,255,255,.035)!important;
  color:#fff!important;
}

/* ---------- Homepage card title hard lock ---------- */
body.home .service h3,
body.home .step h3,
body.home .feature strong{
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
}


/* =========================================================
   BUILD 7 — MORE GLASS + COMPANY LAYOUT BALANCE + METRICS REDESIGN
   ========================================================= */
:root{
  --glass-surface: rgba(11,18,24,.70);
  --glass-surface-soft: rgba(14,22,29,.62);
  --glass-stroke-strong: rgba(255,255,255,.12);
  --glass-blur-strong: blur(18px) saturate(150%);
}

.utility,
header{
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),
    rgba(8,14,19,.74);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 18px 42px rgba(0,0,0,.24);
  backdrop-filter:var(--glass-blur-strong);
  -webkit-backdrop-filter:var(--glass-blur-strong);
}

.links,
.proof,
.service,
.feature,
.step,
.metric,
.area-card,
.contact-card,
.form,
.aside,
.footer-grid,
.upload-surface,
.page-hero .wrap{
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)),
    var(--glass-surface);
  border-color:rgba(255,255,255,.11);
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
}

.footer-grid{
  border:1px solid rgba(255,255,255,.08);
}

.page-hero .wrap{
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  display:block;
  width:min(var(--max),calc(100% - 40px));
}

/* Company page balance: reduce left-side dead space and tighten visual structure */
body.page-company .identity{
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:34px;
  align-items:stretch;
}
body.page-company .machine-frame{
  min-height:540px;
  height:100%;
  border-radius:24px;
  background-position:center center;
}
body.page-company .identity>div:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 0 0;
}
body.page-company .features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
body.page-company .feature{
  min-height:134px;
  padding:16px 14px;
  grid-template-columns:1fr;
  align-content:start;
  gap:10px;
  border-left:0;
}
body.page-company .feature b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid rgba(209,138,75,.28);
  border-radius:10px;
  color:#f0b17f;
}
body.page-company .feature strong{font-size:12px;line-height:1.2}
body.page-company .feature span{font-size:11px;line-height:1.45}

/* Homepage metric cards: replace solid orange slabs with refined glass cards */
.metrics{
  width:min(calc(100% - 32px),var(--max));
  margin:0 auto;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    rgba(8,14,20,.78);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}
.metric{
  position:relative;
  overflow:hidden;
  min-height:116px;
  padding:18px 18px 17px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:
    radial-gradient(circle at top right,rgba(209,138,75,.20),transparent 38%),
    linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.025)),
    rgba(11,19,26,.78);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.metric:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,rgba(209,138,75,.95),rgba(209,138,75,.36),transparent 86%);
}
.metric strong{
  color:#f7f8f9;
  font-size:30px;
  line-height:1;
  letter-spacing:-.03em;
}
.metric span{
  margin-top:8px;
  color:#dde2e0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
}
.metric:hover{
  filter:none;
  background:
    radial-gradient(circle at top right,rgba(209,138,75,.24),transparent 38%),
    linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),
    rgba(11,19,26,.82);
}

/* Stronger glass consistency across dark sections */
section.dark .service,
section.dark .feature,
section.dark .step,
section.dark .area-card,
section.dark .contact-card,
section.dark .form,
section.dark .aside{
  background:
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.022)),
    rgba(10,18,24,.78);
}

@media(min-width:768px) and (max-width:1199px){
  body.page-company .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-company .feature:last-child{grid-column:1 / -1}
  body.page-company .machine-frame{min-height:470px}
}

@media(max-width:767px){
  .page-hero .wrap{width:calc(100% - 28px);padding:18px}
  .metrics{width:calc(100% - 28px);padding:10px}
  .metric{min-height:100px}
  body.page-company .features{grid-template-columns:1fr}
  body.page-company .machine-frame{min-height:340px}
}


/* =========================================================
   BUILD 8 — SPACING + INTERNAL HERO COMPOSITION + COMPANY IMAGE
   ========================================================= */

/* 1) Tighter site-wide section rhythm */
main>section:not(.hero):not(.page-hero):not(.cta){
  padding-top:52px;
  padding-bottom:52px;
}
.section-head{
  margin-bottom:22px;
}
.copy>div{
  padding-bottom:26px;
  margin-bottom:26px;
}
.identity{
  gap:34px;
}
.features{
  margin-top:18px;
  margin-bottom:18px;
}
footer{
  padding-top:38px;
}

/* Shorter laptop screens */
@media(min-width:1200px) and (max-width:1440px) and (max-height:850px){
  main>section:not(.hero):not(.page-hero):not(.cta){
    padding-top:42px;
    padding-bottom:42px;
  }
  .section-head{
    margin-bottom:20px;
  }
  .copy>div{
    padding-bottom:22px;
    margin-bottom:22px;
  }
}

/* 2) Internal-page hero composition */
.page-hero{
  min-height:320px;
  padding-top:156px;
  padding-bottom:36px;
}
.page-hero .wrap{
  max-width:760px;
  margin-left:max(28px,calc((100vw - var(--max))/2));
  margin-right:auto;
}
.page-hero h1{
  max-width:700px;
  margin-bottom:10px;
}
.page-hero p{
  max-width:570px;
}

/* Services */
body.page-services .page-hero:before{
  background-position:center,left 45% center;
}
body.page-services .page-hero .wrap{
  max-width:720px;
}

/* Capabilities */
body.page-capabilities .page-hero:before{
  background-position:center,left 52% center;
}
body.page-capabilities .page-hero .wrap{
  max-width:710px;
}

/* Safety */
body.page-safety .page-hero:before{
  background-position:center,left 48% center;
}
body.page-safety .page-hero .wrap{
  max-width:690px;
}

/* Company */
body.page-company .page-hero:before{
  background-position:center,left 54% center;
}
body.page-company .page-hero .wrap{
  max-width:670px;
}

/* Service Areas */
body.page-service-areas .page-hero:before,
body.page-service-area-detail .page-hero:before{
  background-position:center,left 56% center;
}
body.page-service-areas .page-hero .wrap,
body.page-service-area-detail .page-hero .wrap{
  max-width:690px;
}

/* Contact / Quote */
body.page-contact .page-hero:before,
body.page-quote .page-hero:before{
  background-position:center,left 50% center;
}
body.page-contact .page-hero .wrap,
body.page-quote .page-hero .wrap{
  max-width:670px;
}

/* 3) Premium Company image treatment */
body.page-company .machine-frame{
  position:relative;
  isolation:isolate;
  min-height:520px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  box-shadow:0 24px 54px rgba(0,0,0,.28);
}
body.page-company .machine-frame:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(3,7,10,.05),rgba(3,7,10,.18)),
    linear-gradient(90deg,rgba(209,138,75,.07),transparent 38%);
}
body.page-company .machine-frame:after{
  content:"";
  position:absolute;
  inset:12px;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.10);
  border-radius:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.page-company .identity>div:last-child{
  padding-top:0;
}
body.page-company .identity h2{
  margin-bottom:13px;
}

/* Improve glass depth in company feature cards */
body.page-company .feature{
  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.028)),
    rgba(9,16,22,.72);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

/* Tablet */
@media(min-width:768px) and (max-width:1024px){
  .page-hero{
    min-height:290px;
    padding-top:142px;
    padding-bottom:32px;
  }
  .page-hero .wrap{
    margin-left:18px;
    margin-right:18px;
    max-width:none;
  }
  main>section:not(.hero):not(.page-hero):not(.cta){
    padding-top:44px;
    padding-bottom:44px;
  }
  body.page-company .machine-frame{
    min-height:430px;
  }
}

/* Mobile */
@media(max-width:767px){
  .page-hero{
    min-height:245px;
    padding-top:96px;
    padding-bottom:28px;
  }
  .page-hero .wrap{
    margin-left:14px;
    margin-right:14px;
    width:auto;
    max-width:none;
  }
  main>section:not(.hero):not(.page-hero):not(.cta){
    padding-top:38px;
    padding-bottom:38px;
  }
  body.page-company .machine-frame{
    min-height:320px;
  }
}


/* =========================================================
   BUILD 9 — TEXT CONTRAST + WORKFLOW REDESIGN + GLASS HOVER DEPTH
   ========================================================= */

/* 1) Better small/body text readability, especially on laptop screens */
p,
.copy p,
.copy li,
.section-head>p,
.service p,
.area-card p,
.step p,
.feature span,
.footer-links,
.footer-brand p,
.contact-line a,
.contact-line strong{
  color:#c5cecb;
}

body.home .hero-copy>p,
.page-hero p{
  color:#e1e5e2;
}

.help,
.upload-status,
.upload-copy span{
  color:#aeb8b5;
}

@media(min-width:1200px) and (max-width:1399px){
  .section-head>p,
  .copy p,
  .copy li,
  .service p,
  .step p,
  .area-card p{
    color:#cbd2d0;
  }
  .section-head>p{
    font-size:14px;
    line-height:1.62;
  }
  .copy p,
  .copy li{
    font-size:13.25px;
    line-height:1.64;
  }
  .service p,
  .area-card p{
    font-size:12.25px;
  }
}

/* 2) Workflow card redesign: softer, more premium, less boxy */
.path{
  gap:14px;
}
.step{
  position:relative;
  isolation:isolate;
  min-height:168px;
  padding:21px 19px 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 10%,rgba(209,138,75,.09),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.022)),
    rgba(9,17,23,.74);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.step:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 38%),
    radial-gradient(circle at 0% 100%,rgba(209,138,75,.055),transparent 42%);
}
.step b{
  width:36px;
  height:36px;
  margin-bottom:13px;
  border:1px solid rgba(209,138,75,.30);
  border-radius:999px;
  background:rgba(209,138,75,.07);
  color:#f0b17f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.step h3{
  margin-bottom:8px;
  font-size:16px;
  letter-spacing:.01em;
}
.step p{
  max-width:29ch;
  font-size:11.75px;
  line-height:1.52;
}
.step:after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(209,138,75,.75),rgba(209,138,75,.12),transparent);
  opacity:.55;
}

@media(min-width:1200px) and (max-width:1399px){
  .step{
    min-height:154px;
    padding:18px 17px 16px;
  }
  .step p{
    font-size:11.5px;
  }
}

/* 3) Glass-first hover treatment across the site */
.service,
.area-card,
.step,
.feature,
.metric,
.aside,
.contact-card,
.form,
.footer-grid{
  will-change:transform,box-shadow,border-color,background;
}

.service:hover,
.area-card:hover,
.step:hover,
.feature:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 22px 42px rgba(0,0,0,.26),
    0 0 0 1px rgba(209,138,75,.08);
  background:
    radial-gradient(circle at 86% 12%,rgba(209,138,75,.12),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),
    rgba(10,18,25,.82);
}

.service:hover:before{
  color:rgba(209,138,75,.13);
}

.feature:hover,
.step:hover{
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

.metric:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 20px 40px rgba(0,0,0,.24),
    0 0 0 1px rgba(209,138,75,.08);
}

.footer-grid:hover{
  border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 42px rgba(0,0,0,.24);
}

.btn:hover{
  transform:translateY(-2px) scale(1.01);
}

/* Keep motion restrained on touch devices */
@media(hover:none){
  .service:hover,
  .area-card:hover,
  .step:hover,
  .feature:hover,
  .metric:hover,
  .btn:hover{
    transform:none;
  }
}


/* =========================================================
   BUILD 10 — FOOTER ALIGNMENT + TABLET 1024 + SERVICE CARD DENSITY
   ========================================================= */

/* 1) Final footer alignment */
.footer-grid{
  grid-template-columns:minmax(0,1.6fr) minmax(120px,.72fr) minmax(190px,1fr) minmax(180px,.92fr);
  gap:22px;
  align-items:start;
}
.footer-grid>div{
  min-width:0;
}
.footer-brand-head{
  align-items:flex-start;
}
.footer-brand p{
  max-width:345px;
}
.footer-title{
  min-height:18px;
  display:flex;
  align-items:center;
}
.footer-links{
  gap:6px;
}
.footer-links a,
.footer-links span{
  line-height:1.45;
}
.footer-grid>div:last-child .btn{
  width:100%;
  max-width:190px;
}
.copyright{
  align-items:center;
}

/* 2) 1024 tablet-specific pass */
@media(min-width:900px) and (max-width:1024px){
  :root{--max:930px}
  .wrap{
    width:min(var(--max),calc(100% - 32px));
  }
  .utility{
    left:16px;
    right:16px;
  }
  header{
    left:16px;
    right:16px;
  }
  .nav{
    padding-inline:16px;
  }
  .brand img{
    width:43px;
    height:43px;
  }
  .brand-text strong{
    font-size:11px;
  }
  .links{
    gap:8px;
  }
  .links a:not(.btn){
    font-size:8px;
  }
  .links .btn{
    min-height:40px;
    padding-inline:11px;
    font-size:8.5px;
  }

  .hero,
  .hero-grid{
    min-height:690px;
  }
  .hero-grid{
    grid-template-columns:minmax(0,1fr) 230px;
    gap:22px;
    padding-top:138px;
    padding-bottom:34px;
  }
  .hero-copy{
    padding-bottom:36px;
  }
  .hero h1{
    font-size:48px;
    max-width:560px;
  }
  .hero-copy>p{
    max-width:465px;
  }
  .proof{
    width:230px;
    padding:17px;
    margin-bottom:18px;
  }

  main>section:not(.hero):not(.page-hero):not(.cta){
    padding-top:42px;
    padding-bottom:42px;
  }

  .section-head{
    grid-template-columns:minmax(0,1fr) minmax(250px,.78fr);
    gap:24px;
  }
  .section-head h2{
    font-size:31px;
  }

  .services-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .service{
    min-height:156px;
  }

  .identity{
    grid-template-columns:1fr;
    gap:24px;
  }
  .machine-frame{
    min-height:390px;
  }

  .metrics,
  .path{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .content-grid{
    grid-template-columns:minmax(0,1fr) 245px;
    gap:26px;
  }

  .contact-grid{
    grid-template-columns:270px minmax(0,1fr);
    gap:16px;
  }

  .footer-grid{
    grid-template-columns:1.35fr 1fr;
    gap:20px 24px;
  }
}

/* 3) Homepage service-card density */
body.home .services-grid{
  gap:12px;
}
body.home .service{
  min-height:174px;
  padding:18px;
}
body.home .service h3{
  margin-bottom:9px;
}
body.home .service p{
  margin-bottom:12px;
  line-height:1.5;
}
body.home .service>a{
  margin-top:auto;
}
body.home .service{
  display:flex;
  flex-direction:column;
}
body.home .service:before{
  font-size:68px;
  right:8px;
  bottom:-10px;
}

/* Keep cards comfortable on larger screens */
@media(min-width:1400px){
  body.home .service{
    min-height:182px;
    padding:19px;
  }
}

/* Keep mobile cards compact */
@media(max-width:767px){
  body.home .service{
    min-height:auto;
    padding:17px;
  }
}


/* =========================================================
   BUILD 11 — CONTACT CONVERSION + QUOTE MOBILE + GLASS CONSISTENCY
   ========================================================= */

/* 1) Contact-page conversion polish */
body.page-contact .contact-grid{
  grid-template-columns:310px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
body.page-contact .contact-card{
  padding:22px;
  position:relative;
  overflow:hidden;
}
body.page-contact .contact-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 8%,rgba(209,138,75,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 36%);
}
body.page-contact .contact-card>*{
  position:relative;
  z-index:2;
}
body.page-contact .contact-card h2{
  margin-bottom:14px;
  font-size:24px;
}
body.page-contact .contact-line{
  padding:11px 0;
}
body.page-contact .contact-line:last-of-type{
  border-bottom:0;
}
body.page-contact .contact-card .btn{
  width:100%;
  margin-top:14px;
}
body.page-contact .form{
  padding:24px;
}
body.page-contact .form>h2{
  margin-bottom:8px;
}
body.page-contact .form-section{
  margin-top:18px;
  padding-top:18px;
}
body.page-contact button[type="submit"]{
  width:100%;
  min-height:48px;
}

/* 2) Quote mobile field grouping */
@media(max-width:650px){
  body.page-quote .form{
    padding:16px;
  }
  body.page-quote .form>h2{
    font-size:23px;
  }
  body.page-quote .form>p{
    margin-bottom:14px;
  }
  body.page-quote .form-section{
    margin-top:16px;
    padding-top:16px;
    border-top-color:rgba(255,255,255,.08);
  }
  body.page-quote .form-section h3{
    margin-bottom:11px;
    font-size:13px;
  }
  body.page-quote .fields{
    gap:10px;
  }
  body.page-quote .field label{
    margin-bottom:5px;
  }
  body.page-quote .field input,
  body.page-quote .field select,
  body.page-quote .field textarea{
    min-height:46px;
    border-radius:9px;
  }
  body.page-quote .field textarea{
    min-height:100px;
  }
  body.page-quote .service-choice-grid{
    gap:7px;
  }
  body.page-quote .checkline{
    min-height:48px;
    padding:9px 10px;
  }
  body.page-quote .upload-surface{
    min-height:102px;
    padding:14px;
    grid-template-columns:36px 1fr;
    gap:10px;
  }
  body.page-quote .upload-action{
    grid-column:1/-1;
    width:100%;
    text-align:center;
  }
  body.page-quote button[type="submit"]{
    min-height:50px;
    margin-top:7px;
  }
}

/* Large phones */
@media(min-width:431px) and (max-width:650px){
  body.page-quote .fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.page-quote .field.full{
    grid-column:1/-1;
  }
  body.page-quote .service-choice-grid{
    grid-template-columns:1fr;
  }
}

/* 3) Glass-border consistency audit */
:root{
  --glass-border:rgba(255,255,255,.105);
  --glass-border-hover:rgba(255,255,255,.18);
  --glass-highlight:rgba(255,255,255,.075);
  --glass-orange:rgba(209,138,75,.10);
}

.utility,
header,
.proof,
.service,
.area-card,
.step,
.feature,
.metric,
.aside,
.contact-card,
.form,
.footer-grid,
.upload-surface,
.page-hero .wrap{
  border-color:var(--glass-border);
}

.utility,
header{
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 18px 40px rgba(0,0,0,.23);
}

.service,
.area-card,
.step,
.feature,
.metric,
.aside,
.contact-card,
.form,
.footer-grid{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 32px rgba(0,0,0,.19);
}

.service:hover,
.area-card:hover,
.step:hover,
.feature:hover,
.metric:hover{
  border-color:var(--glass-border-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 22px 42px rgba(0,0,0,.25),
    0 0 0 1px rgba(209,138,75,.055);
}

.field input,
.field select,
.field textarea,
.checkline{
  border-color:rgba(255,255,255,.12);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.checkline:focus-within{
  border-color:rgba(209,138,75,.46);
}

.btn.outline{
  border-color:rgba(255,255,255,.32);
}
.btn.outline:hover{
  border-color:rgba(255,255,255,.48);
}

/* Avoid border brightness inconsistency in nested cards */
section.dark .service,
section.dark .step,
section.dark .feature,
section.dark .area-card,
body.page-company .feature{
  border-color:var(--glass-border);
}

/* Tablet contact balance */
@media(min-width:768px) and (max-width:1024px){
  body.page-contact .contact-grid{
    grid-template-columns:270px minmax(0,1fr);
    gap:16px;
  }
}

/* Phone contact stack */
@media(max-width:767px){
  body.page-contact .contact-grid{
    grid-template-columns:1fr;
  }
  body.page-contact .contact-card,
  body.page-contact .form{
    padding:18px;
  }
}


/* =========================================================
   BUILD 12 — HERO CONSISTENCY + MOBILE FOOTER + LEGACY CSS CLEANUP
   ========================================================= */

/* 1) Internal hero overlay consistency */
.page-hero:before{
  background:
    linear-gradient(90deg,rgba(5,10,13,.88) 0%,rgba(5,10,13,.56) 48%,rgba(5,10,13,.22) 100%),
    image-set(
      url('../img/hero/coast-land-clearing-main-hero.avif') type('image/avif'),
      url('../img/hero/coast-land-clearing-main-hero.webp') type('image/webp')
    );
  background-size:100% 100%,100% 100%;
  background-repeat:no-repeat;
}
.page-hero:after{
  background:
    linear-gradient(180deg,rgba(3,7,10,.12),rgba(3,7,10,.34)),
    radial-gradient(circle at 20% 50%,rgba(209,138,75,.05),transparent 34%);
}
.page-hero .wrap{
  background:
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.02)),
    rgba(8,15,21,.64);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 38px rgba(0,0,0,.20);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.page-hero h1{
  text-shadow:0 4px 18px rgba(0,0,0,.30);
}
.page-hero p{
  color:#e0e5e2;
  text-shadow:0 2px 12px rgba(0,0,0,.24);
}

/* Fine page-specific focal positions */
body.page-services .page-hero:before{background-position:center,left 46% center}
body.page-capabilities .page-hero:before{background-position:center,left 51% center}
body.page-safety .page-hero:before{background-position:center,left 49% center}
body.page-company .page-hero:before{background-position:center,left 53% center}
body.page-service-areas .page-hero:before,
body.page-service-area-detail .page-hero:before{background-position:center,left 55% center}
body.page-contact .page-hero:before,
body.page-quote .page-hero:before{background-position:center,left 50% center}

/* 2) Mobile footer final polish */
@media(max-width:767px){
  footer{
    padding-top:32px;
    padding-bottom:14px;
  }
  .footer-grid{
    padding:18px;
    gap:16px;
    border-radius:16px;
  }
  .footer-brand-head{
    align-items:center;
  }
  .footer-logo{
    width:50px;
    height:50px;
  }
  .footer-brand-name{
    font-size:11.5px;
  }
  .footer-brand-tagline{
    font-size:7.5px;
  }
  .footer-brand p{
    margin-top:10px;
    font-size:11px;
    line-height:1.48;
  }
  .footer-title{
    margin-bottom:7px;
    min-height:auto;
    font-size:9.5px;
  }
  .footer-links{
    gap:4px;
  }
  .footer-links a,
  .footer-links span{
    min-height:38px;
    display:flex;
    align-items:center;
    font-size:11px;
  }
  .footer-links span{
    align-items:flex-start;
    padding-top:8px;
    line-height:1.45;
  }
  .footer-grid>div:last-child p{
    margin-bottom:10px;
  }
  .footer-grid>div:last-child .btn{
    max-width:none;
    width:100%;
    min-height:46px;
  }
  .copyright{
    padding-top:12px;
    gap:5px;
    font-size:9px;
    line-height:1.4;
  }
  .designer-credit{
    display:block;
  }
}

/* Tablet footer balance */
@media(min-width:768px) and (max-width:1024px){
  .footer-grid{
    grid-template-columns:1.3fr 1fr;
    padding:22px;
  }
  .footer-grid>div:last-child .btn{
    max-width:180px;
  }
}

/* Reduce hero density on phones while preserving readability */
@media(max-width:767px){
  .page-hero:before{
    background:
      linear-gradient(90deg,rgba(5,10,13,.91) 0%,rgba(5,10,13,.68) 48%,rgba(5,10,13,.28) 100%),
      image-set(
        url('../img/hero/coast-land-clearing-main-hero-mobile.avif') type('image/avif'),
        url('../img/hero/coast-land-clearing-main-hero-mobile.webp') type('image/webp')
      );
    background-size:100% 100%,100% 100%;
  }
  .page-hero .wrap{
    padding:16px;
    border-radius:16px;
  }
}


/* =========================================================
   BUILD 13 — QUOTE ACCESSIBILITY FINAL POLISH
   ========================================================= */
.field-error{
  min-height:16px;
  margin-top:5px;
  color:#ffc0b2;
  font-size:10px;
  line-height:1.35;
  font-weight:800;
}
.is-invalid input,
.is-invalid select,
.is-invalid textarea,
.is-invalid .checkline{
  border-color:rgba(255,139,118,.62)!important;
  box-shadow:0 0 0 1px rgba(255,139,118,.16);
}
[aria-invalid="true"]{
  scroll-margin-top:120px;
}
.form-alert{
  min-height:0;
}
.form-alert:empty{
  display:none;
}
.form-alert.error:not(:empty),
.form-alert.success:not(:empty){
  display:block;
}
button[aria-busy="true"]{
  cursor:wait;
}
button[aria-disabled="true"]{
  opacity:.82;
}
.upload-status{
  min-height:18px;
}
.upload-file{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.upload-file>span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.checkline:has(input:focus-visible){
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}


/* =========================================================
   BUILD 14 — UTILITY PAGES + SERVICES SIDEBAR + CAPABILITIES CARDS
   ========================================================= */

/* 1) 404 / Error / Thank-you premium redesign */
body.page-error main,
body.page-thank-you main{
  min-height:calc(100vh - 220px);
  display:grid;
  place-items:center;
}

body.page-error .page-hero,
body.page-thank-you .page-hero{
  width:100%;
  min-height:470px;
  display:grid;
  align-items:center;
  padding-top:120px;
  padding-bottom:54px;
  background:#081015;
}

body.page-error .page-hero .wrap,
body.page-thank-you .page-hero .wrap{
  max-width:760px;
  margin-inline:auto;
  text-align:left;
  padding:30px;
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 12%,rgba(209,138,75,.11),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.024)),
    rgba(8,15,21,.72);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 28px 64px rgba(0,0,0,.30);
}

body.page-error .page-hero .crumb,
body.page-thank-you .page-hero .crumb{
  margin-bottom:12px;
}

body.page-error .page-hero h1,
body.page-thank-you .page-hero h1{
  max-width:680px;
  margin-bottom:12px;
  font-size:clamp(40px,5vw,58px);
  line-height:.96;
}

body.page-error .page-hero p,
body.page-thank-you .page-hero p{
  max-width:590px;
  font-size:14px;
  line-height:1.62;
}

body.page-error .page-hero .btn,
body.page-thank-you .page-hero .btn{
  margin-top:18px;
  min-width:170px;
}

body.page-error .page-hero:after,
body.page-thank-you .page-hero:after{
  background:
    linear-gradient(180deg,rgba(3,7,10,.16),rgba(3,7,10,.40)),
    radial-gradient(circle at 20% 50%,rgba(209,138,75,.08),transparent 36%);
}

/* 2) Services sidebar final polish */
body.page-services .content-grid{
  grid-template-columns:minmax(0,1fr) 300px;
  gap:34px;
  align-items:start;
}

body.page-services .aside{
  position:sticky;
  top:24px;
  padding:20px;
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 8%,rgba(209,138,75,.10),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.022)),
    rgba(9,17,23,.78);
  border:1px solid rgba(255,255,255,.105);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

body.page-services .aside h3{
  margin-bottom:10px;
  font-size:15px;
  letter-spacing:.01em;
}

body.page-services .aside p{
  margin-bottom:13px;
  color:#c8d0cd;
  font-size:12px;
  line-height:1.55;
}

body.page-services .aside ul{
  display:grid;
  gap:6px;
  margin:12px 0 16px;
  padding:0;
  list-style:none;
}

body.page-services .aside li{
  margin:0;
}

body.page-services .aside li a,
body.page-services .aside>a:not(.btn){
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:#d7ddda;
  font-size:11px;
  line-height:1.3;
}

body.page-services .aside li a:hover,
body.page-services .aside>a:not(.btn):hover{
  border-color:rgba(209,138,75,.22);
  background:rgba(209,138,75,.055);
  color:#fff;
}

body.page-services .aside .btn{
  width:100%;
  min-height:44px;
  margin-top:8px;
}

/* Avoid sticky sidebar on smaller screens */
@media(max-width:1024px){
  body.page-services .aside{
    position:static;
  }
}

/* 3) Capabilities card micro-polish */
body.page-capabilities .services-grid{
  gap:13px;
}

body.page-capabilities .service{
  position:relative;
  min-height:170px;
  padding:20px;
  overflow:hidden;
  border-radius:17px;
  background:
    radial-gradient(circle at 90% 8%,rgba(209,138,75,.10),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.022)),
    rgba(9,17,23,.76);
}

body.page-capabilities .service:before{
  right:8px;
  bottom:-16px;
  font-size:68px;
  line-height:1;
  color:rgba(209,138,75,.08);
  letter-spacing:-.08em;
}

body.page-capabilities .service:after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(209,138,75,.68),rgba(209,138,75,.10),transparent);
  opacity:.52;
}

body.page-capabilities .service h3{
  max-width:290px;
  margin-bottom:9px;
  font-size:18px;
  line-height:1.05;
}

body.page-capabilities .service p{
  max-width:500px;
  margin-bottom:0;
  color:#c8d0cd;
  font-size:12px;
  line-height:1.52;
}

body.page-capabilities .service:hover:before{
  color:rgba(209,138,75,.12);
}

body.page-capabilities .service:hover:after{
  opacity:.80;
}

/* Compact capabilities on laptop */
@media(min-width:1200px) and (max-width:1399px){
  body.page-capabilities .service{
    min-height:158px;
    padding:18px;
  }
  body.page-capabilities .service h3{
    font-size:17px;
  }
  body.page-capabilities .service p{
    font-size:11.75px;
  }
}

/* Utility page mobile refinement */
@media(max-width:767px){
  body.page-error .page-hero,
  body.page-thank-you .page-hero{
    min-height:390px;
    padding-top:88px;
    padding-bottom:34px;
  }

  body.page-error .page-hero .wrap,
  body.page-thank-you .page-hero .wrap{
    margin-inline:14px;
    width:auto;
    padding:20px;
    border-radius:18px;
  }

  body.page-error .page-hero h1,
  body.page-thank-you .page-hero h1{
    font-size:clamp(34px,10vw,44px);
  }

  body.page-services .content-grid{
    grid-template-columns:1fr;
  }

  body.page-services .aside{
    padding:16px;
  }

  body.page-capabilities .service{
    min-height:auto;
    padding:17px;
  }
}


/* =========================================================
   BUILD 15 — COUNTY CTA CONSISTENCY + ASSET/PERFORMANCE CLEANUP
   ========================================================= */

/* County detail pages: one consistent action/sidebar system */
body.page-service-area-detail .content-grid{
  grid-template-columns:minmax(0,1fr) 290px;
  gap:32px;
  align-items:start;
}

body.page-service-area-detail .aside{
  position:sticky;
  top:24px;
  padding:20px;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 8%,rgba(209,138,75,.105),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.022)),
    rgba(9,17,23,.78);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 34px rgba(0,0,0,.20);
}

body.page-service-area-detail .aside:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,rgba(209,138,75,.92),rgba(209,138,75,.24),transparent 82%);
}

body.page-service-area-detail .aside h3{
  margin-bottom:9px;
  color:#fff;
  font-size:15px;
  line-height:1.1;
}

body.page-service-area-detail .aside p{
  margin-bottom:14px;
  color:#c8d0cd;
  font-size:12px;
  line-height:1.55;
}

body.page-service-area-detail .aside .btn{
  width:100%;
  min-height:45px;
  margin:0 0 9px;
}

body.page-service-area-detail .aside>a:not(.btn){
  display:flex;
  align-items:center;
  min-height:39px;
  margin-top:6px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:#d8dedb;
  font-size:11px;
  line-height:1.3;
}

body.page-service-area-detail .aside>a:not(.btn):hover{
  border-color:rgba(209,138,75,.24);
  background:rgba(209,138,75,.055);
  color:#fff;
}

body.page-service-area-detail .copy h3{
  margin-top:18px;
  margin-bottom:9px;
  font-size:15px;
}

body.page-service-area-detail .copy ul{
  margin-top:8px;
  margin-bottom:15px;
}

body.page-service-area-detail .copy li+li{
  margin-top:4px;
}

/* Keep county CTA layout stable on tablet/mobile */
@media(max-width:1024px){
  body.page-service-area-detail .aside{
    position:static;
  }
}

@media(min-width:768px) and (max-width:1024px){
  body.page-service-area-detail .content-grid{
    grid-template-columns:minmax(0,1fr) 245px;
    gap:22px;
  }
}

@media(max-width:767px){
  body.page-service-area-detail .content-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  body.page-service-area-detail .aside{
    padding:17px;
  }
}


/* =========================================================
   BUILD 16 — SERVICES MICRO-LAYOUT + SAFETY DIFFERENTIATION
   ========================================================= */

/* Services content-layout micro-pass */
body.page-services .content-grid{
  grid-template-columns:minmax(0,1fr) 292px;
  gap:30px;
}
body.page-services .copy>div{
  position:relative;
  padding:0 0 24px 17px;
  margin-bottom:24px;
}
body.page-services .copy>div:before{
  top:3px;
  height:34px;
}
body.page-services .copy h2{
  max-width:620px;
  margin:0 0 10px;
  font-size:clamp(29px,2.7vw,36px);
}
body.page-services .copy p{
  max-width:720px;
  margin-bottom:11px;
}
body.page-services .copy ul{
  display:grid;
  gap:4px;
  max-width:720px;
  margin:10px 0 0;
  padding-left:18px;
}
body.page-services .copy li{
  line-height:1.5;
}
body.page-services .copy>div:last-child{
  margin-bottom:0;
  padding-bottom:0;
}
body.page-services .aside{
  top:18px;
}
body.page-services .aside h3{
  font-size:14.5px;
}
body.page-services .aside .btn{
  margin-top:10px;
}
@media(min-width:1200px) and (max-width:1440px) and (max-height:850px){
  body.page-services .content-grid{gap:26px}
  body.page-services .copy>div{padding-bottom:20px;margin-bottom:20px}
  body.page-services .copy h2{font-size:31px}
}

/* Safety page visual differentiation */
body.page-safety .page-hero .wrap{
  border-color:rgba(209,138,75,.16);
}
body.page-safety .copy{
  counter-reset:safety-section;
}
body.page-safety .copy>div{
  position:relative;
  overflow:hidden;
  padding:22px 22px 22px 72px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 8%,rgba(209,138,75,.095),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.022)),
    rgba(9,17,23,.74);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 30px rgba(0,0,0,.18);
}
body.page-safety .copy>div:before{
  counter-increment:safety-section;
  content:counter(safety-section, decimal-leading-zero);
  position:absolute;
  left:20px;
  top:21px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(209,138,75,.28);
  border-radius:999px;
  background:rgba(209,138,75,.07);
  color:#f0b17f;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}
body.page-safety .copy>div:after{
  content:"";
  position:absolute;
  left:72px;
  right:22px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(209,138,75,.62),rgba(209,138,75,.08),transparent);
  opacity:.45;
}
body.page-safety .copy>div+div{
  margin-top:12px;
}
body.page-safety .copy h2{
  margin:0 0 9px;
  font-size:clamp(27px,2.35vw,34px);
  line-height:1.02;
}
body.page-safety .copy p,
body.page-safety .copy li{
  color:#cad2cf;
}
body.page-safety .copy ul{
  margin-top:10px;
  margin-bottom:0;
}
body.page-safety .copy>div:hover{
  border-color:rgba(255,255,255,.17);
  background:
    radial-gradient(circle at 90% 8%,rgba(209,138,75,.13),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.028)),
    rgba(9,17,23,.80);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 20px 38px rgba(0,0,0,.23);
}
@media(max-width:767px){
  body.page-safety .copy>div{
    padding:18px 17px 18px 58px;
    border-radius:15px;
  }
  body.page-safety .copy>div:before{
    left:15px;
    top:17px;
    width:30px;
    height:30px;
  }
  body.page-safety .copy>div:after{
    left:58px;
    right:17px;
  }
}