/* ============================================================
   HANDY HYENA HVAC LLC — LIGHT WORKSHOP BAY theme
   Hyena-umber accent on bay white, cool-charge secondary.
   ============================================================ */

:root{
  --workshop-bay:#FAF9F4;
  --base-white:#FFFFFF;
  --service-slab:#F1EFE5;
  --deep-bay:#26241E;
  --hyena-umber:#8A6420;
  --umber-dark:#5F4A24;
  --cool-charge:#4E8FB0;
  --heat-coil:#D96C3F;
  --mint:#8FBFA8;
  --body-text:#2E3128;
  --body-soft:#3F423A;
  --spot-brush:#6E6A60;
  --hairline:#E5E2D6;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background-color:var(--workshop-bay);
  color:var(--body-text);
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--body-text);
}

a{
  color:var(--cool-charge);
  text-decoration:none;
}
a:hover{color:var(--umber-dark)}

/* ---------- VENT-RUN NAV ---------- */
.ventrun-nav{
  position:sticky;
  top:0;
  z-index:900;
  background-color:var(--base-white);
  box-shadow:0 2px 10px rgba(38,36,30,0.05);
}

.duct-strip{
  height:12px;
  width:100%;
  border-bottom:1px solid var(--hairline);
  background:
    radial-gradient(circle 3px at 6px center,var(--hairline) 1.5px,transparent 2px)
    repeat-x,
    linear-gradient(180deg,#FFFFFF,#FFFFFF);
  background-size:26px 10px,100% 100%;
}

.duct-strip-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
}
.duct-run{
  height:10px;
  flex:1;
  position:relative;
  border-bottom:2px solid var(--hyena-umber);
  border-top:2px solid var(--hyena-umber);
  margin-top:1px;
}
.duct-run::after{
  content:"";
  position:absolute;
  top:3px;left:0;
  height:2px;width:100%;
  background:repeating-linear-gradient(90deg,var(--cool-charge) 0 10px,transparent 10px 18px);
  opacity:1;
}
.drop-branch{
  position:absolute;
  right:60px;bottom:-3px;
  width:2px;height:6px;
  background:var(--hyena-umber);
}
.drop-branch::after{
  content:"";
  position:absolute;
  bottom:-2px;left:-3px;
  width:8px;height:4px;
  border:1px solid var(--cool-charge);
  border-radius:2px;
}

.nav-row{
  max-width:1240px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  letter-spacing:2px;
  font-size:21px;
  color:var(--body-text);
}
.brand:hover{color:var(--body-text)}

.thermo-glyph{
  width:16px;height:16px;
  border-radius:50%;
  border:2px solid var(--hyena-umber);
  position:relative;
  flex:none;
  background:var(--base-white);
}
.thermo-glyph::before{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:3px;height:9px;
  transform:translateX(-50%);
  background:var(--heat-coil);
  border-radius:2px 2px 0 0;
}
.thermo-glyph::after{
  content:"";
  position:absolute;
  top:2px;left:2px;
  width:3px;height:3px;
  background:var(--hyena-umber);
  border-radius:50%;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:1.5px;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:600;
}
.nav-links a{
  color:var(--body-text);
  padding:6px 4px;
  margin:0 9px;
  position:relative;
}
.nav-links a:hover{
  color:var(--umber-dark);
}
.nav-links a:hover::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:2px;width:100%;
  background:var(--hyena-umber);
}
.nav-links a:hover::before{
  content:"";
  position:absolute;
  right:-6px;bottom:2px;
  width:5px;height:5px;
  border-left:1px solid var(--cool-charge);
  border-top:1px solid var(--cool-charge);
}
.dot-sep{
  width:4px;height:4px;
  background:var(--cool-charge);
  border-radius:50%;
  flex:none;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:22px;height:3px;
  background:var(--hyena-umber);
}

/* ---------- BAY-DIAGNOSTIC HERO ---------- */
.baydiag-hero{
  background-image:
    repeating-linear-gradient(0deg,transparent 0 31px,#EDEAE0 31px 32px);
  background-color:var(--workshop-bay);
}
.hero-inner{
  max-width:1240px;
  margin:0 auto;
  padding:70px 24px 80px;
  display:grid;
  grid-template-columns:55% 45%;
  gap:44px;
  align-items:center;
}
.hero-copy{
  position:relative;
  z-index:1;
}
.eyebrow-chip{
  display:inline-block;
  background-color:var(--hyena-umber);
  color:#FFFFFF;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:22px;
}
.hero-copy h1{
  font-size:54px;
  font-size:clamp(40px,5vw,62px);
  margin-bottom:22px;
  color:var(--body-text);
}
.hero-copy h1 .number-word{
  color:var(--hyena-umber);
}
.hero-sub{
  color:var(--spot-brush);
  font-size:18px;
  max-width:560px;
  margin-bottom:32px;
}
.hero-ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.btn-umber{
  display:inline-block;
  background-color:var(--hyena-umber);
  color:#FFFFFF;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:1px;
  padding:15px 30px;
  border-radius:4px;
  transition:background-color .2s;
}
.btn-umber:hover{background-color:var(--umber-dark);color:#FFFFFF}
.btn-coo{
  display:inline-block;
  border:1px solid var(--cool-charge);
  color:var(--cool-charge);
  background-color:transparent;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:1px;
  padding:15px 30px;
  border-radius:4px;
  transition:background-color .2s;
}
.btn-coo:hover{background-color:var(--cool-charge);color:#FFFFFF}

/* ------ hero service bay scene (pure CSS) ------ */
.bay-scene{
  position:relative;
  height:560px;
  background:
    linear-gradient(180deg,#F6F4EC,#FFFFFF 40%),
    repeating-linear-gradient(0deg,var(--hairline) 0 1px,transparent 1px 46px);
  background-blend-mode:multiply;
  border:1px solid var(--hairline);
  border-radius:8px;
  box-shadow:0 12px 30px rgba(38,36,30,0.08);
  overflow:hidden;
}
/* water-mark decal wall text hidden */
.scene-floor{
  position:absolute;
  bottom:0;left:0;right:0;height:70px;
  background:repeating-linear-gradient(90deg,var(--service-slab) 0 90px,#E4E0D2 90px 92px);
  border-top:1px solid var(--hairline);
}
.scene-bench{
  position:absolute;
  bottom:66px;left:14px;
  width:118px;height:10px;
  background:var(--umber-dark);
  border-radius:2px;
}
.tool-roll{
  position:absolute;
  bottom:58px;left:24px;
  width:64px;height:42px;
  background:#5B4831;
  border-radius:6px;
}
.wrench{
  position:absolute;
  width:4px;height:30px;
  background:#3F423A;
  left:38px;top:-24px;
}
.wrench::before{
  content:"";
  position:absolute;top:-8px;left:-3px;
  width:10px;height:9px;
  border:3px solid #3F423A;
  border-radius:6px 2px;
}
.wrench.two{left:30px;transform:rotate(8deg)}
.wrench.three{left:50px;transform:rotate(-6deg)}

.manifold-set{
  position:absolute;
  bottom:76px;right:8px;
  width:120px;height:70px;
  background:var(--service-slab);
  border:1px solid var(--hairline);
  border-radius:6px;
}
.gauge-dial{
  position:absolute;
  width:46px;height:46px;
  border-radius:50%;
  border:3px solid #C7C2B4;
  background:#FFFFFF;
  bottom:8px;
}
.gauge-dial.red{left:8px}
.gauge-dial.blue{right:8px}
.gauge-dial::before{
  content:"";
  position:absolute;inset:5px;
  border-radius:50%;
  border:1px solid var(--hairline);
}
.gauge-dial::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:12px;height:12px;
  transform:translate(-50%,-50%);
  background:#3F423A;
  border-radius:50%;
}
.needle{
  content:"";
  position:absolute;
  left:50%;top:4px;
  width:2px;height:16px;
  transform-origin:bottom;
}
.gauge-dial.red .needle{background:var(--heat-coil)}
.gauge-dial.blue .needle{background:var(--cool-charge)}
.needle.red{transform:translateX(-50%) rotate(150deg)}
.needle.blue{transform:translateX(-50%) rotate(-150deg)}
.nihose{
  position:absolute;
  bottom:0;left:30px;right:30px;
  height:14px;
  border-bottom:3px dotted var(--cool-charge);
}

.manometer{
  position:absolute;
  bottom:60px;left:118px;
  width:60px;height:26px;
  background:#FFFFFF;
  border:1px solid var(--hairline);
  border-radius:3px;
  font-family:"Trebuchet MS",monospace;
  font-size:10px;
  color:var(--umber-dark);
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.5px;
  transform:rotate(-2deg);
}

.filter-stack{
  position:absolute;
  right:6px;top:8px;
  width:96px;height:96px;
}
.filter-card{
  position:absolute;
  width:84px;height:34px;
  border:2px solid var(--cool-charge);
  border-radius:3px;
  background:#FFFFFF;
  font-family:"Trebuchet MS",sans-serif;
  font-size:10px;
  font-weight:700;
  color:var(--umber-dark);
  display:flex;align-items:center;justify-content:center;
  letter-spacing:1px;
  box-shadow:0 2px 0 rgba(38,36,30,0.06);
}
.filter-card.f1{top:0;left:8px}
.filter-card.f2{top:14px;left:16px;border-color:var(--mint)}
.filter-card.f3{top:28px;left:24px;border-color:var(--hyena-umber)}

/* thermostat on wall */
.thermostat-wall{
  position:absolute;
  top:34px;left:16px;
  width:56px;height:56px;
  border-radius:50%;
  background:#FFFFFF;
  border:3px solid var(--umber-dark);
  box-shadow:0 4px 8px rgba(38,36,30,0.12);
}
.thermostat-wall::after{
  content:"";
  position:absolute;inset:4px;
  border-radius:50%;
  border:1px solid var(--hairline);
}
.comfort-band{
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:conic-gradient(var(--mint) 0deg 110deg,transparent 110deg);
  opacity:1;
}
.set-mark{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:20px;height:6px;
  background:var(--umber-dark);
}
.set-arrow{
  content:"";
  position:absolute;
  left:6px;top:12px;
  width:5px;height:5px;
  border-right:2px solid var(--heat-coil);
  border-top:2px solid var(--heat-coil);
}

/* condenser */
.condenser{
  position:absolute;
  bottom:64px;left:230px;
  width:104px;height:88px;
  background:#D9D6CC;
  border:2px solid #A9A49A;
  border-radius:4px;
}
.cfan{
  position:absolute;
  top:5px;left:50%;
  width:58px;height:58px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#FFFFFF;
  border:3px solid #8F8A80;
}
.cfan::before{
  content:"";
  position:absolute;inset:0;
  background:conic-gradient(#4E8FB0 0deg 3deg,transparent 3deg 60deg,#4E8FB0 60deg 63deg,transparent 63deg 120deg,#4E8FB0 120deg 123deg,transparent 123deg 180deg,#4E8FB0 180deg 183deg,transparent 183deg 240deg,#4E8FB0 240deg 243deg,transparent 243deg 300deg,#4E8FB0 300deg 303deg,transparent 303deg);
  animation:bladespin 6s linear infinite;
  border-radius:50%;
}
.cfan::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:10px;height:10px;
  transform:translate(-50%,-50%);
  background:var(--umber-dark);
  border-radius:50%;
}
@keyframes bladespin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
.clines{
  position:absolute;
  bottom:-14px;left:109px;
  height:2px;width:34px;
  background:repeating-linear-gradient(90deg,var(--cool-charge) 0 4px,transparent 4px 8px);
}
.clines.v2{left:44px;top:70px;width:20px;transform:rotate(90deg)}
.cpad{
  position:absolute;
  bottom:-6px;left:-8px;right:-8px;height:6px;
  background:#BDB7AA;
  border-radius:2px;
}

/* furnace cabinet */
.furnace{
  position:absolute;
  left:120px;bottom:52px;
  width:58px;height:120px;
  background:#FFFFFF;
  border:2px solid var(--umber-dark);
  border-radius:4px 4px 0 0;
}
.furnace::before{
  content:"";
  position:absolute;top:-52px;left:50%;
  transform:translateX(-50%);
  width:6px;height:54px;
  background:#3F423A;
  border:2px solid #3F423A;
  border-radius:3px;
}
.fvface{
  position:absolute;top:6px;left:6px;right:6px;height:10px;
  background:var(--service-slab);
  border-radius:2px;
}
.burner-window{
  position:absolute;
  bottom:12px;left:8px;right:8px;
  height:40px;
  background:#201A12;
  border:2px solid var(--umber-dark);
  border-radius:3px 3px 8px 8px;
  overflow:hidden;
}
.flame-row{
  position:absolute;
  left:8px;right:8px;bottom:2px;
  height:7px;
  background:repeating-linear-gradient(90deg,var(--heat-coil) 0 5px,var(--cool-charge) 5px 5px,#201A12 8px);
  background-color:var(--heat-coil);
  border-radius:4px 4px 0 0;
  animation:flicker 2.4s ease-in-out infinite;
}
.flame-row.f2{bottom:12px}
.flame-row.f3{bottom:22px;height:6px}
@keyframes flicker{
  0%,100%{opacity:1;transform:scaleX(1)}
  50%{transform:scaleX(0.86)}
}

/* duct run overhead */
.bay-duct{
  position:absolute;
  top:0;left:0;right:0;height:24px;
  background:#F1EEE3;
  border-bottom:2px solid var(--hyena-umber);
  border-top:2px solid var(--hyena-umber);
}
.bay-duct::after{
  content:"";
  position:absolute;top:9px;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--cool-charge) 0 12px,transparent 12px 20px);
  animation:airflow 8s linear infinite;
}
@keyframes airflow{from{background-position:0 0}to{background-position:-20px 0}}
.takeoff{
  position:absolute;top:24px;
  width:2px;height:22px;
  background:var(--hyena-umber);
}
.takeoff.t1{left:150px}
.takeoff.t2{left:330px}
.takeoff.t3{left:430px}
.takeoff.t3 .reg-grille{left:-9px}

.reg-grille{
  content:"";
  position:absolute;top:22px;left:-11px;
  width:24px;height:16px;
  background:#FFFFFF;
  border:2px solid var(--umber-dark);
  border-radius:2px;
}
.reg-grille::after{
  content:"";
  position:absolute;inset:2px 1px;
  background:repeating-linear-gradient(0deg,#8F8A80 0 1.5px,transparent 1.5px 4px);
}

/* service van */
.van{
  position:absolute;
  bottom:58px;right:220px;
  width:150px;height:64px;
}
.van-body{
  position:absolute;bottom:8px;left:0;
  width:150px;height:40px;
  background:#5F5C52;
  border-radius:6px 6px 0 0;
}
.van-cab{
  position:absolute;bottom:8px;left:0;
  width:44px;height:40px;
  background:var(--umber-dark);
  border-top-left-radius:16px;
}
.van-roof{
  position:absolute;bottom:32px;left:120px;
  width:14px;height:10px;
  background:var(--heat-coil);
}
.van-wheel{
  position:absolute;bottom:2px;
  width:20px;height:20px;
  border-radius:50%;
  background:#26221B;
  border:3px solid #3F423A;
}
.van-wheel.w1{left:34px}
.van-wheel.w2{left:120px}
.van-wind{position:absolute;bottom:22px;left:6px;width:22px;height:14px;background:#BBD7E4;border-radius:3px}
.van-paw{
  position:absolute;bottom:20px;right:30px;
  width:16px;height:16px;
  border-radius:50% 50% 4px 4px;
  background:transparent;
  border:3px solid var(--cool-charge);
}
.van-paw::before{
  content:"";
  position:absolute;top:-8px;left:-3px;right:-3px;height:8px;
  background:transparent;
  box-shadow:0 -10px 0 -8px var(--cool-charge);
}
.ladder{
  position:absolute;bottom:52px;left:2px;
  width:2px;height:26px;
  background:var(--mint);
}
.ladder::after{
  content:"";
  position:absolute;left:14px;top:0;
  width:2px;height:26px;
  background:var(--mint);
}

 /* brand mark on van */
 .van-brand{
  position:absolute;bottom:40px;left:52px;
  font-family:"Trebuchet MS",monospace;
  font-size:9px;
  color:var(--base-white);
  letter-spacing:1px;
  background:var(--umber-dark);
  padding:1px 4px;
  border-radius:2px;
 }

/* scroll indicator chip */
.scene-side-note{
  position:absolute;
  top:10px;right:122px;
  font-size:11px;
  letter-spacing:1px;
  color:var(--umber-dark);
  font-family:"Trebuchet MS",monospace;
  background:var(--base-white);
  border:1px dashed var(--cool-charge);
  padding:4px 8px;
  border-radius:3px;
}
.scene-side-note .emoji{font-size:14px}

/* hero soft edge */
.hero-copy .trim{
  color:var(--cool-charge);
  font-weight:700;
}

/* ---------- SERVICE-ORDER ROWS ---------- */
.section-head{
  max-width:1240px;
  margin:0 auto;
  padding:20px 24px 0;
}
.section-head .kicker{
  color:var(--cool-charge);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  margin-bottom:8px;
}
.section-head h2{
  font-size:36px;
  font-size:clamp(30px,4vw,42px);
  color:var(--hyena-umber);
  position:relative;
  padding-left:18px;
  border-left:4px solid var(--heat-coil);
  line-height:1.25;
}

.serviceorder-rows{
  background-color:var(--workshop-bay);
  padding-bottom:60px;
}
.order-row{
  max-width:1240px;
  margin:0 auto;
}
.order-list-wrap{
  max-width:1240px;
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.order-item{
  background-color:var(--base-white);
  border:1px solid var(--hairline);
  border-radius:8px;
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  gap:24px;
  padding:22px 26px;
  transition:transform .2s,box-shadow .2s;
}
.order-item:hover{
  transform:translateX(4px);
  box-shadow:0 8px 20px rgba(138,100,32,0.08);
}
.job-tag{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  flex-direction:column;
  font-family:"Courier New",monospace;
  font-weight:700;
  color:var(--umber-dark);
  font-size:13px;
  letter-spacing:.5px;
  background:var(--service-slab);
  border:1px dashed var(--cool-charge);
  border-radius:4px;
  padding:8px 10px;
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 18px,100% 36px,0 36px);
}
.job-tag .clip{
  width:8px;height:8px;
  background:var(--cool-charge);
  border-radius:50% 50% 0 0;
  margin-bottom:2px;
}
.order-body h3{
  font-size:22px;
  color:var(--body-text);
  margin-bottom:6px;
  font-family:"Trebuchet MS",sans-serif;
}
.order-body h3 em{color:var(--number-word,var(--umber-dark));font-style:normal}
.order-body p{
  color:var(--spot-brush);
  font-size:15.5px;
}
.comfort-dial{
  width:70px;height:70px;
  border-radius:50%;
  border:3px solid var(--umber-dark);
  background:var(--base-white);
  position:relative;
  flex:none;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.comfort-dial::after{
  content:"";
  position:absolute;inset:5px;
  border-radius:50%;
  background:conic-gradient(var(--mint) 0deg 135deg,transparent 135deg);
  opacity:1;
}
.comfort-num{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--umber-dark);
  background:transparent;
}
.dial-needle{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:3px;height:22px;
  transform-origin:50% 0;
  transform:translateX(-50%) translateY(-8px);
  background:var(--heat-coil);
  z-index:3;
}
.dial-needle.n68{transform:translateX(-50%) rotate(0deg)}
.dial-needle.n70{transform:translateX(-50%) rotate(30deg)}
.dial-needle.n72{transform:translateX(-50%) rotate(70deg)}
.dial-needle.n74{transform:translateX(-50%) rotate(110deg)}
.dial-dot{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;
  background:var(--umber-dark);
  border-radius:50%;
  z-index:4;
}
.comfort-dial .heatdot{
  position:absolute;
  top:8px;right:8px;
  width:8px;height:8px;
  background:var(--heat-coil);
  border-radius:50%;
  z-index:5;
}

/* ---------- METRIC BAND ---------- */
.comfort-metric-band{
  background-color:var(--service-slab);
  width:100%;
}
.metric-inner{
  max-width:1240px;
  margin:0 auto;
  padding:54px 24px;
  display:grid;
  grid-template-columns:auto auto auto auto;
}
.metric-cell{
  text-align:center;
  padding:0 22px;
  position:relative;
}
.metric-cell + .metric-cell::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:1px;height:64px;
  transform:translateY(-50%);
  background:var(--cool-charge);
}
.metric-num{
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  font-size:56px;
  font-size:clamp(40px,5vw,60px);
  color:var(--hyena-umber);
  line-height:1;
}
.metric-lab{
  margin-top:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--umber-dark);
  font-size:12px;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
}

/* ---------- STATEMENT BAND ---------- */
.statement-band{
  background-color:var(--base-white);
  width:100%;
  position:relative;
}
.statement-inner{
  max-width:900px;
  margin:0 auto;
  padding:64px 24px;
  text-align:center;
}
.statement-text{
  font-size:26px;
  font-size:clamp(20px,3vw,30px);
  line-height:1.5;
  color:var(--body-text);
  border-left:4px solid var(--heat-coil);
  padding-left:26px;
  text-align:left;
  font-family:"Trebuchet MS",sans-serif;
  max-width:820px;
  margin:0 auto;
}
.statement-attr{
  margin-top:14px;
  text-align:right;
  font-style:normal;
  color:var(--umber-dark);
  font-weight:700;
  font-family:"Trebuchet MS",sans-serif;
  letter-spacing:1px;
  font-size:14px;
}
.statement-attr::before{
  content:"— ";
  color:var(--cool-charge);
}

/* ---------- PROCESS OVERVIEW ---------- */
.process-strip{
  background-color:var(--workshop-bay);
}
.process-grid{
  max-width:1240px;
  margin:0 auto;
  padding:20px 24px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.process-step{
  background:var(--base-white);
  border:1px solid var(--hairline);
  border-top:4px solid var(--hyena-umber);
  border-radius:6px;
  padding:22px;
}
.process-step .stepnum{
  font-family:"Courier New",monospace;
  color:var(--cool-charge);
  font-weight:700;
  font-size:13px;
  letter-spacing:1px;
}
.process-step h3{
  font-family:"Trebuchet MS",sans-serif;
  font-size:18px;
  margin:6px 0;
  color:var(--body-text);
}
.process-step p{
  color:var(--spot-brush);
  font-size:15px;
}

/* ---------- CTA BAND ---------- */
.cta-band{
  background-color:var(--workshop-bay);
  width:100%;
}
.cta-inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:70px 24px;
}
.cta-inner h2{
  font-size:38px;
  font-size:clamp(30px,4vw,44px);
  color:var(--body-text);
  margin-bottom:16px;
}
.cta-inner p{
  color:var(--spot-brush);
  font-size:18px;
  margin-bottom:34px;
}
.btn-big{
  padding:18px 44px;
  font-size:17px;
  color:#FFFFFF;
}

/* ---------- FILTER-RACK FOOTER ---------- */
.filterrack-footer{
  background-color:var(--deep-bay);
  color:var(--base-white);
  width:100%;
  margin-top:0;
  padding:0;
}
.vent-strip{
  height:14px;
  width:100%;
  background:repeating-linear-gradient(90deg,
    #FFFFFF 0 3px,transparent 3px 8px);
  background-color:#FFFFFF;
}
.vent-strip-inner{
  height:14px;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  overflow:hidden;
}
.louver{
  flex:none;
  width:26px;height:10px;
  background:#8A6420;
  position:relative;
}
.louver::after{
  content:"";
  position:absolute;top:4px;left:0;right:0;height:3px;
  background:#B9C9D4;
}
.vflow{
  flex:none;
  color:var(--cool-charge);
  font-weight:700;
}
.footer-stack{
  max-width:1240px;
  margin:0 auto;
  padding:52px 24px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  position:relative;
  z-index:1;
}
.footer-mark{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  letter-spacing:3px;
  font-size:20px;
  color:var(--base-white);
}
.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
  font-family:"Trebuchet MS",sans-serif;
  font-size:13px;
  letter-spacing:1px;
}
.footer-links a{
  color:#D8D4C6;
  margin:0 10px;
  font-weight:600;
}
.footer-links a:hover{color:var(--base-white)}
.footer-links .fdot{color:var(--hyena-umber)}
.manifold-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
}
.md-gaugepair{position:relative;display:flex;align-items:center;gap:4px}
.md-gauge{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--cool-charge);
  position:relative;
}
.md-gauge.hot{border-color:var(--heat-coil)}
.md-hose{
  width:34px;height:3px;
  background:var(--cool-charge);
}
.md-hose.hot{background:var(--heat-coil)}
.md-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--mint);
}
.legal-foot{
  color:#A9C4D0;
  font-size:13.5px;
  line-height:1.9;
  max-width:900px;
}
.legal-foot .fphone{color:var(--cool-charge);font-weight:700}
.footer-bottomrule{
  width:100%;
  border-top:1px solid rgba(232,229,216,0.18);
  padding-top:16px;
  font-size:12px;
  letter-spacing:1px;
  color:#8C8A7F;
  text-transform:uppercase;
}

/* legacy left accent bar hidden decorations safeguard */
.water-guard{visibility:hidden;position:absolute;width:0;height:0;overflow:hidden}

/* ---------- SERVICES / CONTACT page shared content styling ---------- */
.page-hero{
  background-color:var(--workshop-bay);
  border-bottom:1px solid var(--hairline);
}
.page-hero-inner{
  max-width:1100px;
  margin:0 auto;
  padding:60px 24px 54px;
  text-align:center;
}
.page-hero-inner .kicker{
  color:var(--cool-charge);
  text-transform:uppercase;
  letter-spacing:2px;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  font-size:13px;
  margin-bottom:12px;
}
.page-hero-inner h1{
  font-size:46px;
  font-size:clamp(32px,5vw,50px);
  color:var(--umber-dark);
  margin-bottom:16px;
}
.page-hero-inner p{
  color:var(--spot-brush);
  max-width:720px;
  margin:0 auto;
  font-size:18px;
}
.content-band{
  background-color:var(--workshop-bay);
}
.content-band.raise{background-color:var(--base-white)}
.content-band-narrow{
  max-width:1000px;
  margin:0 auto;
  padding:44px 24px 20px;
}
.service-detail{
  background:var(--base-white);
  border-left:5px solid var(--hyena-umber);
  border-radius:0 8px 8px 0;
  box-shadow:0 4px 16px rgba(38,36,30,0.06);
  padding:28px 30px;
  margin-bottom:22px;
}
.service-detail h2{
  font-family:"Trebuchet MS",sans-serif;
  font-size:26px;
  color:var(--umber-dark);
  margin-bottom:10px;
}
.service-detail h2 .sd-kick{
  color:var(--cool-charge);
  font-family:"Courier New",monospace;
  font-size:14px;
  margin-right:12px;
  vertical-align:middle;
}
.service-detail p{
  color:var(--body-soft);
  font-size:16px;
  margin-bottom:12px;
}
.service-detail p:last-child{margin-bottom:0}
.dual-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  align-items:start;
}
.fact-card{
  background:var(--base-white);
  border:1px solid var(--hairline);
  border-top:3px solid var(--cool-charge);
  padding:26px;
  border-radius:6px;
}
.fact-card h3{
  color:var(--umber-dark);
  font-family:"Trebuchet MS",sans-serif;
  font-size:20px;
  margin-bottom:12px;
}
.fact-card ul{list-style:none}
.fact-card li{
  padding:9px 0 9px 24px;
  position:relative;
  color:var(--body-soft);
  font-size:15px;
  border-bottom:1px solid var(--hairline);
  line-height:1.5;
}
.fact-card li:last-child{border-bottom:none}
.fact-card li::before{
  content:"";
  position:absolute;left:2px;top:16px;
  width:8px;height:8px;
  background:var(--mint);
  border-radius:2px;
}
.fact-card li::after{
  content:"";
  position:absolute;left:2px;top:16px;
  width:2px;height:8px;
  background:var(--umber-dark);
}

/* contact page */
.contact-wrap{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:28px;
  align-items:start;
}
.contact-form{
  background:var(--base-white);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:30px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;margin-bottom:16px}
.form-group.full{grid-column:1 / -1}
.form-group label{
  font-family:"Trebuchet MS",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:1px;
  color:var(--umber-dark);
  margin-bottom:6px;
  text-transform:uppercase;
}
.form-group input,.form-group select,.form-group textarea{
  border:1px solid var(--hairline);
  background:var(--workshop-bay);
  color:var(--body-text);
  font-family:Georgia,serif;
  font-size:15px;
  padding:12px 14px;
  border-radius:4px;
  transition:border-color .2s,box-shadow .2s;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;
  border-color:var(--cool-charge);
  box-shadow:0 0 0 3px rgba(78,143,176,0.15);
}
.form-group textarea{resize:vertical;min-height:150px}
.form-status{
  display:none;
  margin-top:6px;
  font-size:14px;
  padding:12px 16px;
  border-radius:4px;
}
.form-status.show{display:block}
.form-status.ok{background:#E1EDE6;color:#2C5B3F;border:1px solid var(--mint)}
.form-status.err{background:#F6E3DB;color:#A64A22;border:1px solid var(--heat-coil)}
.info-card{
  background:var(--derk,var(--base-white));
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:20px;
}
.info-card .ic-accent{height:6px;background:var(--hyena-umber)}
.info-card .ic-body{padding:24px}
.info-card h3{
  font-family:"Trebuchet MS",sans-serif;
  color:var(--umber-dark);
  margin-bottom:12px;
  font-size:19px;
}
.info-card .ic-row{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--hairline)}
.info-card .ic-row:first-of-type{border-top:none}
.info-card .lbl{color:var(--cool-charge);font-weight:700;width:100px;flex:none;font-size:14px;text-transform:uppercase;letter-spacing:1px;font-family:"Trebuchet MS",sans-serif}
.info-card .val{color:var(--body-soft);font-size:15px}
.minifaq .faq-item{border-bottom:1px solid var(--hairline)}
.minifaq .faq-item:last-child{border:none}
.minifaq .faq-q{
  width:100%;text-align:left;
  background:none;border:none;
  font-family:"Trebuchet MS",sans-serif;
  font-size:16px;font-weight:700;
  color:var(--body-text);
  padding:16px 4px;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;
}
.minifaq .faq-q .pm{color:var(--hyena-umber);font-size:20px;transition:transform .2s}
.minifaq .faq-a{
  color:var(--body-soft);
  font-size:15px;
  padding:0 4px 18px;
  display:none;
  line-height:1.6;
}
.minifaq .faq-item.open .faq-a{display:block}
.minifaq .faq-item.open .pm{transform:rotate(45deg)}
.minifaq-banner{
  background:var(--service-slab);
  border-left:4px solid var(--cool-charge);
  padding:20px 24px;
  border-radius:4px;
  color:var(--body-soft);
  font-size:15px;
  margin-bottom:20px;
}
.form-note{
  color:var(--body-soft);
  font-size:13.5px;
  margin-top:-6px;
  margin-bottom:16px;
}
.submit-inline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* generic page blocks used on services page process */
.step-track{background:var(--service-slab);border-radius:8px;padding:6px}
.workorder{font-family:"Courier New",monospace;color:var(--umber-dark)}

/* CTA strip on secondary pages reuse */
.cta-band.secondary .cta-inner{padding:56px 24px}

/* reveal animation (safe fallback via noscript) */
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:34px;padding:48px 24px}
  .bay-scene{height:520px;max-width:620px;margin:0 auto;width:100%}
  .metric-inner{grid-template-columns:1fr 1fr;gap:36px 0}
  .metric-cell + .metric-cell::before{display:none}
  .metric-cell:nth-child(even)::before{left:0;display:block}
  .dual-col{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav-links{
    width:100%;
    flex-direction:column;
    align-items:center;
    display:none;
    background:var(--base-white);
    padding:8px 0 20px;
    border-top:1px solid var(--hairline);
  }
  .nav-links.open{display:flex}
  .dot-sep{display:none}
  .nav-links a{padding:11px 0;font-size:14px}
  .nav-links a:hover::before{display:none}
  .order-item{grid-template-columns:1fr;gap:14px;text-align:center}
  .job-tag{justify-content:center}
  .order-body p{text-align:center}
  .comfort-dial{margin:0 auto}
}

@media (max-width:560px){
  .metric-inner{grid-template-columns:1fr;gap:28px}
  .metric-cell + .metric-cell::before{display:none}
  .process-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:auto}
  .bay-scene{height:440px}
}

noscript .fade-up{opacity:1}