
/* =========================================================
   Sal's Handyman Services — shared stylesheet
   ========================================================= */
:root{
  --ink:#181A14;
  --canvas:#EFE7D3;
  --canvas-2:#E4D9BC;
  --navy:#22303C;
  --orange:#D4600A;
  --orange-dark:#A94C08;
  --steel:#5B6B72;
  --line:#20241d33;
  --ok:#3E6B4F;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{overflow-x:hidden; max-width:100%;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Barlow', sans-serif;
  font-size:17px;
  line-height:1.5;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}
h1,h2,h3,h4,.display{
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:700;
  margin:0;
}
.stencil{
  font-family:'Archivo Black', sans-serif;
  text-transform:uppercase;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
main{display:block;}

/* focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
  border-radius:1px;
}

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--orange); color:var(--navy);
  padding:12px 20px; z-index:200;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  text-decoration:none;
}
.skip-link:focus{
  left:12px; top:12px;
}

/* ===== HEADER / NAV ===== */
header{
  position:sticky; top:0; z-index:50;
  background:var(--navy);
  border-bottom:4px solid var(--orange);
}
.nav-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:14px 20px; max-width:1120px; margin:0 auto;
  gap:10px 14px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--canvas); text-decoration:none; min-width:0; flex-shrink:1;}
.brand-logo{height:44px; width:auto; display:block; flex-shrink:0;}

.nav-call{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--orange); color:var(--navy)!important;
  padding:8px 14px; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  text-decoration:none; font-size:.85rem; white-space:nowrap;
  flex-shrink:0;
}
.nav-call:hover{background:#E4740F;}

/* Nav sits on its own full-width row so it never competes for
   horizontal space with the logo or the phone button. Every link
   is plain text, laid out edge to edge, and wraps onto as many
   rows as it needs — nothing is ever hidden behind a menu button
   or a scrollable strip. */
.nav-primary{
  order:3; flex-basis:100%; width:100%;
  border-top:1px solid #ffffff1f;
  margin-top:6px; padding-top:6px;
}
.nav-primary nav{display:block;}
.nav-primary ul{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  margin:0; padding:0; gap:4px 6px;
}
.nav-primary li{flex:0 0 auto;}
.nav-primary a{
  display:block; color:#FFFFFF; text-decoration:none; font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; font-weight:700; letter-spacing:.05em; font-size:.92rem;
  padding:8px 10px; border-bottom:3px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nav-primary a:hover{border-color:var(--orange);}
.nav-primary a[aria-current="page"]{border-color:var(--orange); color:var(--orange);}
.nav-primary .nav-book a{color:var(--orange); font-weight:700;}
.nav-primary .nav-book a:hover{color:#FFA85C;}

@media (min-width:860px){
  .nav-inner{flex-wrap:nowrap; padding:14px 28px;}
  .brand-logo{height:52px;}
  .nav-call{font-size:.95rem; padding:9px 16px; gap:8px;}
  .nav-primary{
    order:2; flex-basis:auto; width:auto; flex:1 1 auto;
    border-top:none; margin-top:0; padding-top:0;
  }
  .nav-primary ul{justify-content:center;}
}

/* ===== HERO (home) ===== */
.hero{
  background:var(--navy); color:var(--canvas);
  position:relative; overflow:hidden;
  padding:80px 0 60px;
  border-bottom:4px solid var(--ink);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(212,96,10,0.06) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  position:relative; z-index:1;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--orange); font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:.9rem;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:inline-block;}
.hero h1{
  font-size:clamp(2.6rem, 5.4vw, 4.3rem);
  line-height:0.98;
  color:var(--canvas);
}
.hero h1 em{
  font-style:normal; color:var(--orange);
  text-decoration:underline; text-decoration-color:var(--ink); text-decoration-thickness:6px; text-underline-offset:-2px;
}
.hero p.lede{
  font-size:1.15rem; max-width:46ch; color:#CFD6D6; margin-top:20px;
}
.hero-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.05rem; text-decoration:none;
  padding:14px 26px; border:2px solid transparent; cursor:pointer;
  font:inherit; line-height:1;
}
.btn-primary{background:var(--orange); color:var(--navy);}
.btn-primary:hover{background:#E4740F;}
.btn-outline{border-color:var(--canvas); color:var(--canvas); background:transparent;}
.btn-outline:hover{background:var(--canvas); color:var(--navy);}
.btn-dark{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-dark:hover{background:var(--ink); color:var(--canvas);}
.hero-stats{display:flex; gap:28px; margin-top:44px; flex-wrap:wrap;}
.stat b{
  display:block; font-family:'Archivo Black',sans-serif; font-size:1.9rem; color:var(--orange);
}
.stat span{font-size:.85rem; color:#B9C2C2; text-transform:uppercase; letter-spacing:.06em;}

.ticket{
  background:var(--canvas); color:var(--ink);
  padding:26px 24px; transform:rotate(2.5deg);
  box-shadow:10px 12px 0 rgba(0,0,0,0.35);
  border:1px solid var(--ink);
  position:relative;
}
.ticket::after{
  content:"PAID IN FULL BY A HAPPY NEIGHBOUR";
  position:absolute; top:14px; right:-38px;
  background:var(--ok); color:#fff; font-family:'Barlow Condensed',sans-serif;
  font-size:.62rem; letter-spacing:.08em; font-weight:700; text-transform:uppercase;
  padding:4px 40px; transform:rotate(8deg);
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.ticket h3{font-size:1.6rem; border-bottom:3px solid var(--ink); padding-bottom:10px; margin-bottom:12px;}
.ticket-row{display:flex; justify-content:space-between; font-size:.92rem; padding:6px 0; border-bottom:1px dashed #20241d55;}
.ticket-row b{font-family:'Barlow Condensed',sans-serif;}
.ticket-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:3px solid var(--ink);}
.ticket-foot .total{font-family:'Archivo Black',sans-serif; font-size:1.4rem;}
.stamp{
  font-family:'Archivo Black',sans-serif; color:var(--orange); border:3px solid var(--orange);
  padding:3px 10px; font-size:.9rem; transform:rotate(-8deg); display:inline-block;
}

/* ===== PAGE HERO (interior pages) ===== */
.page-hero{
  background:var(--navy); color:var(--canvas);
  padding:56px 0; border-bottom:4px solid var(--ink);
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(212,96,10,0.06) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.page-hero .inner{position:relative; z-index:1; max-width:760px;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem); color:var(--canvas);}
.page-hero p{font-size:1.05rem; color:#CFD6D6; margin-top:14px; max-width:56ch;}
.breadcrumb{font-family:'Barlow Condensed',sans-serif; font-size:.85rem; color:#9FB0B0; margin-bottom:10px; text-transform:uppercase; letter-spacing:.05em;}
.breadcrumb a{color:#CFD6D6; text-decoration:none;}
.breadcrumb a:hover{color:var(--orange);}

/* ===== SECTION HEADERS ===== */
section{padding:76px 0;}
.sec-head{max-width:640px; margin-bottom:46px;}
.sec-head .eyebrow{color:var(--orange-dark);}
.sec-head .eyebrow::before{background:var(--orange-dark);}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem); color:var(--ink);}
.sec-head p{color:var(--steel); font-size:1.05rem; margin-top:10px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head.center .eyebrow::before{display:none;}

/* ===== ABOUT ===== */
.about{background:var(--canvas);}
.about-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start;}
.about-body p{color:var(--steel); font-size:1.02rem; line-height:1.65;}
.about-body p + p{margin-top:16px;}
.about-list{
  background:var(--canvas-2); border:1px solid var(--line);
  padding:30px 32px; box-shadow:8px 8px 0 rgba(32,36,29,0.08);
}
.about-list h3{font-size:1.15rem; color:var(--ink); margin-bottom:16px;}
.about-list ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
.about-list li{
  display:flex; align-items:flex-start; gap:10px;
  color:var(--steel); font-size:.96rem; line-height:1.4;
}
.about-list li::before{
  content:"\2713"; color:var(--orange-dark); font-weight:700;
  flex-shrink:0; margin-top:1px;
}
@media (max-width: 860px){
  .about-grid{grid-template-columns:1fr; gap:28px;}
}

/* ===== SERVICES ===== */
.services{background:var(--canvas-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink);}
.svc-card{background:var(--canvas-2); padding:32px 26px; transition:background .15s ease;}
.svc-card:hover{background:var(--canvas);}
.svc-num{font-family:'Archivo Black',sans-serif; color:var(--orange); font-size:.85rem; letter-spacing:.05em;}
.svc-card h3{font-size:1.5rem; margin-top:10px; color:var(--ink);}
.svc-card p{color:var(--steel); font-size:.96rem; margin-top:8px;}

/* ===== ESTIMATE (signature section) ===== */
.estimate{background:var(--navy); color:var(--canvas); position:relative;}
.estimate .sec-head h2{color:var(--canvas);}
.estimate .sec-head p{color:#B9C2C2;}
.estimate .sec-head .eyebrow{color:var(--orange);}
.estimate .sec-head .eyebrow::before{background:var(--orange);}

.work-order{
  background:var(--canvas); color:var(--ink);
  border:1px solid var(--ink);
  box-shadow:14px 14px 0 rgba(212,96,10,0.35);
  display:grid; grid-template-columns:1.3fr 1fr;
}
.wo-left{padding:36px; border-right:2px dashed #20241d55;}
.wo-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--ink); padding-bottom:16px; margin-bottom:22px;}
.wo-head h3{font-size:1.7rem;}
.wo-head .wo-id{font-family:'Barlow Condensed',sans-serif; color:var(--steel); font-size:.85rem;}
.job-list{display:flex; flex-direction:column; gap:0;}
.job-item{
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-bottom:1px solid #20241d22;
}
.job-item input[type=checkbox]{
  width:20px; height:20px; accent-color:var(--orange); flex-shrink:0; cursor:pointer;
}
.job-item label{flex:1; cursor:pointer; font-size:1rem;}
.job-item .job-hours{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--orange-dark); white-space:nowrap; font-size:.9rem;
}
.qty-row{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #20241d22;}
.qty-row label{flex:1; font-size:1rem;}
.qty-controls{display:flex; align-items:center; gap:10px;}
.qty-controls button{
  width:28px; height:28px; border:2px solid var(--ink); background:var(--canvas);
  font-family:'Archivo Black',sans-serif; cursor:pointer; font-size:.9rem; line-height:1;
}
.qty-controls button:hover{background:var(--orange); color:var(--canvas); border-color:var(--orange);}
.qty-controls span{min-width:22px; text-align:center; font-family:'Barlow Condensed',sans-serif; font-weight:700;}

.wo-right{padding:36px; background:repeating-linear-gradient(180deg, transparent 0 39px, #20241d14 39px 40px);}
.wo-right h4{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; color:var(--steel); margin-bottom:16px;}
.line-item{display:flex; justify-content:space-between; font-size:.95rem; padding:4px 0;}
.line-item.empty{color:var(--steel); font-style:italic;}
.wo-total{
  margin-top:20px; padding-top:16px; border-top:3px solid var(--ink);
  display:flex; justify-content:space-between; align-items:baseline;
}
.wo-total .label{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:1rem;}
.wo-total .amount{font-family:'Archivo Black',sans-serif; font-size:2.1rem; color:var(--orange-dark);}
.wo-note{font-size:.82rem; color:var(--steel); margin-top:10px; line-height:1.5;}
.btn-benchmark{
  font-family:'Barlow',sans-serif; font-size:.82rem; font-weight:600;
  background:var(--canvas-2); border:1px solid var(--line); color:var(--ink);
  padding:8px 12px; cursor:pointer; text-align:left; border-radius:2px;
  transition:background .15s ease, border-color .15s ease;
}
.btn-benchmark span{display:block; color:var(--steel); font-weight:500; font-size:.78rem; margin-top:2px;}
.btn-benchmark:hover, .btn-benchmark:focus-visible{background:var(--orange); color:#fff; border-color:var(--orange);}
.btn-benchmark:hover span, .btn-benchmark:focus-visible span{color:#fff;}
.wo-pricing-note{
  background:var(--canvas-2); border:1px dashed var(--ink); padding:10px 14px; font-size:.85rem;
  margin-top:16px; color:var(--ink);
}
.wo-cta{
  margin-top:22px; display:flex; flex-direction:column; gap:10px;
}
.wo-cta .btn{justify-content:center;}

/* ===== PROCESS ===== */
.process{background:var(--canvas);}
.proc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.proc-step{position:relative; padding-top:6px;}
.proc-step .n{
  font-family:'Archivo Black',sans-serif; font-size:2.4rem; color:transparent;
  -webkit-text-stroke:1.5px var(--orange); display:block; margin-bottom:6px;
}
.proc-step h3{font-size:1.3rem;}
.proc-step p{color:var(--steel); font-size:.94rem; margin-top:6px;}

/* ===== TESTIMONIALS ===== */
.reviews{background:var(--canvas-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.rev-card{background:var(--canvas); border:1px solid var(--ink); padding:26px; position:relative;}
.rev-stars{color:var(--orange); letter-spacing:2px; font-size:1rem; margin-bottom:12px;}
.rev-card p{font-size:.98rem; color:var(--ink);}
.rev-name{margin-top:16px; font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; font-size:.88rem; color:var(--steel);}
.rev-summary{
  display:flex; align-items:center; gap:16px; margin-bottom:40px; flex-wrap:wrap;
  background:var(--canvas); border:1px solid var(--ink); padding:22px 26px; box-shadow:8px 8px 0 rgba(212,96,10,0.25);
}
.rev-summary .big-rating{font-family:'Archivo Black',sans-serif; font-size:2.6rem; color:var(--orange-dark);}
.rev-summary .rating-meta{font-size:.9rem; color:var(--steel);}
.rev-summary .rating-meta .stars{color:var(--orange); letter-spacing:2px; display:block; font-size:1.05rem;}
.google-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:8px 14px;
  background:#fff; border:1px solid var(--line); border-radius:999px; text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.08); transition:box-shadow .2s ease, transform .2s ease;
}
.google-badge:hover, .google-badge:focus-visible{box-shadow:0 3px 10px rgba(0,0,0,.14); transform:translateY(-1px);}
.google-badge-text{font-family:'Barlow',sans-serif; font-size:.85rem; color:var(--ink); white-space:nowrap;}
.google-badge-text strong{color:var(--orange-dark);}

/* ===== GALLERY ===== */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.gal-card{background:var(--canvas-2); border:1px solid var(--ink);}
.gal-thumb{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  border-bottom:1px solid var(--ink);
  color:var(--steel);
}
.gal-cap{padding:16px 18px;}
.gal-cap h3{font-size:1.15rem;}
.gal-cap p{font-size:.88rem; color:var(--steel); margin-top:4px;}

/* ===== BEFORE / AFTER ===== */
.ba-list{display:flex; flex-direction:column; gap:56px;}
.ba-item{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.ba-item:nth-child(even) .ba-compare{order:2;}
.ba-compare{
  position:relative; border:1px solid var(--ink); box-shadow:10px 10px 0 rgba(212,96,10,0.3);
  overflow:hidden; aspect-ratio:4/3; background:var(--ink);
}
.ba-compare .ba-layer{position:absolute; inset:0; width:100%; height:100%; background:var(--ink); cursor:ew-resize;}
.ba-compare .ba-after{clip-path: inset(0 0 0 var(--reveal, 50%));}
.ba-tag{
  position:absolute; top:10px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; font-size:.75rem; letter-spacing:.05em; padding:4px 10px;
  background:var(--ink); color:var(--canvas); z-index:2;
}
.ba-tag.before-tag{left:10px;}
.ba-tag.after-tag{right:10px; background:var(--orange); color:var(--navy);}
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--reveal, 50%); width:3px; background:var(--ink);
  transform:translateX(-50%); z-index:3; pointer-events:none;
}
.ba-handle::after{
  content:"⇔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; background:var(--orange); color:var(--navy); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1rem; border:2px solid var(--ink);
}
.ba-range{
  width:100%; margin-top:14px; accent-color:var(--orange); cursor:ew-resize;
}
.ba-text h3{font-size:1.5rem;}
.ba-text p{color:var(--steel); margin-top:10px;}
.ba-text ul{color:var(--steel); font-size:.95rem; padding-left:20px; margin-top:10px;}
.ba-note{font-size:.85rem; color:var(--steel); margin-top:60px; border-top:1px dashed var(--line); padding-top:18px;}

/* ===== FAQ ===== */
.faq-list{display:flex; flex-direction:column; gap:2px; background:var(--ink); max-width:820px;}
.faq-item{background:var(--canvas);}
.faq-item summary{
  padding:20px 24px; cursor:pointer; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em;
  display:flex; justify-content:space-between; align-items:center; gap:16px; list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; font-family:'Archivo Black',sans-serif; color:var(--orange); font-size:1.4rem; flex-shrink:0;
}
.faq-item[open] summary::after{content:"–";}
.faq-item[open] summary{background:var(--canvas-2);}
.faq-item .faq-a{padding:0 24px 22px; color:var(--steel); font-size:.98rem; max-width:70ch;}

/* ===== BOOKING FORM ===== */
.booking-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;}
.booking-form{
  background:var(--canvas); border:1px solid var(--ink); padding:36px;
  box-shadow:12px 12px 0 rgba(212,96,10,0.3);
}
.form-row{margin-bottom:20px;}
.form-row label, .form-row legend{
  display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:.85rem; margin-bottom:6px; padding:0;
}
.form-row .req{color:var(--orange-dark);}
.form-row input[type=text],
.form-row input[type=tel],
.form-row input[type=email],
.form-row input[type=date],
.form-row select,
.form-row textarea{
  width:100%; padding:11px 12px; border:2px solid var(--ink); background:#fff;
  font-family:'Barlow',sans-serif; font-size:1rem; color:var(--ink);
}
.form-row textarea{resize:vertical; min-height:110px;}
.form-row .hint{font-size:.8rem; color:var(--steel); margin-top:5px; font-weight:400; text-transform:none; letter-spacing:0;}
fieldset{border:2px solid var(--ink); padding:14px 16px 16px;}
.radio-group{display:flex; gap:18px; flex-wrap:wrap; margin-top:6px;}
.radio-group label{
  display:flex; align-items:center; gap:8px; font-family:'Barlow',sans-serif; font-weight:400;
  text-transform:none; letter-spacing:0; font-size:.96rem; cursor:pointer;
}
.radio-group input{accent-color:var(--orange); width:18px; height:18px; cursor:pointer;}
.consent-row{display:flex; align-items:flex-start; gap:10px;}
.consent-row input{margin-top:4px; accent-color:var(--orange); width:18px; height:18px; flex-shrink:0; cursor:pointer;}
.consent-row label{font-family:'Barlow',sans-serif; font-weight:400; text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--steel);}
.hp-field{display:none !important;}
.form-msg{
  margin-top:18px; padding:14px 16px; border:2px solid var(--ok); background:#e9f2ec; color:#1f4a30;
  font-size:.95rem; display:none;
}
.form-msg.error{border-color:var(--orange-dark); background:#fbe9df; color:var(--orange-dark);}
.form-msg.show{display:block;}
.booking-side{
  background:var(--navy); color:var(--canvas); padding:32px; border:1px solid var(--ink);
}
.booking-side h3{font-size:1.4rem; color:var(--canvas);}
.booking-side p{color:#CFD6D6; font-size:.95rem; margin-top:10px;}
.booking-side ul{color:#CFD6D6; font-size:.92rem; padding-left:20px; margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.booking-side .big-phone-sm{
  display:inline-flex; margin-top:20px; font-family:'Archivo Black',sans-serif; font-size:1.6rem;
  color:var(--orange); text-decoration:none;
}

/* ===== SERVICE AREA / CONTACT ===== */
.contact{background:var(--navy); color:var(--canvas);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.contact h1, .contact h2{font-size:clamp(2rem,3.6vw,2.8rem); color:var(--canvas);}
.contact p{color:#B9C2C2; margin-top:14px; max-width:46ch;}
.big-phone{
  display:inline-flex; align-items:baseline; gap:12px; margin-top:26px;
  font-family:'Archivo Black',sans-serif; font-size:clamp(2rem,4.4vw,3.2rem);
  color:var(--orange); text-decoration:none;
}
.contact-list{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.contact-list li{display:flex; gap:12px; font-size:.98rem; color:#DCE2E2;}
.contact-list b{color:var(--canvas); font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:.82rem; letter-spacing:.04em; min-width:90px;}
.area-card{
  background:var(--canvas); color:var(--ink); border:1px solid var(--ink);
  padding:30px; box-shadow:10px 10px 0 rgba(212,96,10,0.5);
}
.area-card h2{font-size:1.4rem; margin-bottom:14px;}
.area-tags{display:flex; flex-wrap:wrap; gap:8px;}
.area-tags span{
  border:1.5px solid var(--ink); padding:5px 12px; font-family:'Barlow Condensed',sans-serif;
  font-size:.85rem; font-weight:600; text-transform:uppercase;
}

/* ===== related links (bottom of interior pages) ===== */
.related{background:var(--canvas-2); border-top:1px solid var(--line);}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.related-card{
  background:var(--canvas); border:1px solid var(--ink); padding:22px; text-decoration:none; color:var(--ink);
  display:block; transition:box-shadow .15s ease, transform .15s ease;
}
.related-card:hover{box-shadow:6px 6px 0 rgba(212,96,10,0.4); transform:translate(-2px,-2px);}
.related-card .eyebrow{margin-bottom:8px;}
.related-card h3{font-size:1.25rem;}
.related-card p{color:var(--steel); font-size:.9rem; margin-top:6px;}

footer{background:var(--ink); color:#9AA3A0; padding:30px 0; font-size:.85rem;}
.foot-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
footer a{color:var(--orange); text-decoration:none;}

.mobile-action-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:var(--ink); border-top:1px solid #ffffff22;
  padding:10px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
  gap:10px; box-shadow:0 -2px 12px rgba(0,0,0,.25);
}
.mab-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 10px; border-radius:10px; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.95rem;
}
.mab-call{background:var(--orange); color:var(--navy)!important;}
.mab-text{background:#ffffff14; color:#fff!important; border:1px solid #ffffff33;}
@media (max-width:640px){
  .mobile-action-bar{display:flex;}
  body{padding-bottom:64px;}
}
.foot-links{display:flex; gap:16px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.foot-links a{color:#9AA3A0;}
.foot-links a:hover{color:var(--orange);}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .ticket{transform:rotate(0); margin-top:10px;}
  .svc-grid{grid-template-columns:1fr;}
  .work-order{grid-template-columns:1fr;}
  .wo-left{border-right:none; border-bottom:2px dashed #20241d55;}
  .proc-grid{grid-template-columns:1fr 1fr;}
  .rev-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .related-grid{grid-template-columns:1fr;}
  .ba-item, .ba-item:nth-child(even) .ba-compare{grid-template-columns:1fr; order:0;}
  .ba-item{grid-template-columns:1fr;}
  .booking-wrap{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .gallery-grid{grid-template-columns:1fr;}
}
@media (max-width:380px){
  .nav-inner{padding:10px 14px;}
  .brand-logo{height:34px;}
  .nav-call{font-size:.78rem; padding:7px 10px; gap:5px;}
  .nav-primary a{padding:7px 8px; font-size:.8rem;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* anchor scroll offset so the sticky header doesn't cover section tops */
[id]{scroll-margin-top:120px;}

/* single-page: subtle divider under the hero-integrated intro blurbs */
.section-intro-link{margin-top:32px;}


/* =========================================================
   Additions: SEO pages, conversion elements
   ========================================================= */
.h1-sub{
  display:block; margin-top:16px; font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.05rem,1.9vw,1.35rem); letter-spacing:.06em; color:#CFD6D6; line-height:1.2;
}
.trust-row{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; color:#CFD6D6; font-size:.92rem;}
.trust-row span::before{content:"\2713  "; color:var(--orange); font-weight:700;}

.svc-more{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:16px;}
.svc-more a{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:.9rem; color:var(--orange-dark); text-decoration:none; border-bottom:2px solid currentColor;
}
.svc-more a:hover{color:var(--ink);}

.rev-date{font-size:.8rem; color:var(--steel); margin-top:2px; text-transform:none; font-family:'Barlow',sans-serif; font-weight:400; letter-spacing:0;}
.rev-more{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center;}

.area-tags a{
  border:1.5px solid var(--ink); padding:5px 12px; font-family:'Barlow Condensed',sans-serif;
  font-size:.85rem; font-weight:600; text-transform:uppercase; text-decoration:none; color:var(--ink);
}
.area-tags a:hover{background:var(--orange); border-color:var(--orange); color:var(--navy);}

/* interior page body */
.page-body{background:var(--canvas);}
.page-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start;}
.prose{max-width:70ch;}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.1rem); margin:40px 0 12px; color:var(--ink);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.25rem; margin:26px 0 8px;}
.prose p, .prose li{color:#3d4a50; font-size:1.03rem; line-height:1.7;}
.prose p + p{margin-top:14px;}
.prose ul, .prose ol{padding-left:22px; margin:12px 0;}
.prose li + li{margin-top:6px;}
.prose a{color:var(--orange-dark); font-weight:600;}
.prose figure{margin:26px 0; border:1px solid var(--ink); background:var(--ink); box-shadow:8px 8px 0 rgba(212,96,10,0.25);}
.prose figure img{width:100%; height:auto; max-height:520px; object-fit:contain;}
.prose figcaption{background:var(--canvas-2); color:var(--steel); font-size:.88rem; padding:10px 14px;}
.callout{background:var(--canvas-2); border:1px dashed var(--ink); padding:16px 18px; margin:22px 0;}
.callout strong{color:var(--ink);}
.price-table{width:100%; border-collapse:collapse; margin:16px 0; font-size:.98rem; background:#fff;}
.price-table th, .price-table td{border:1px solid #20241d33; padding:10px 12px; text-align:left; vertical-align:top;}
.price-table th{background:var(--navy); color:var(--canvas); font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:700;}
.price-table td:last-child{white-space:nowrap; font-weight:600;}
.table-scroll{overflow-x:auto;}

.side-card{
  position:sticky; top:130px; background:var(--navy); color:var(--canvas);
  border:1px solid var(--ink); padding:26px; box-shadow:10px 10px 0 rgba(212,96,10,0.35);
}
.side-card h2{font-size:1.5rem; color:var(--canvas);}
.side-card p{color:#CFD6D6; font-size:.95rem; margin-top:8px;}
.side-card .big-phone-sm{display:inline-flex; margin-top:14px; font-family:'Archivo Black',sans-serif; font-size:1.5rem; color:var(--orange); text-decoration:none;}
.side-card .btn{width:100%; justify-content:center; margin-top:12px;}
.side-card ul{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:6px; color:#CFD6D6; font-size:.92rem;}
.side-card li::before{content:"\2713  "; color:var(--orange); font-weight:700;}

.quick-form{background:var(--canvas); border:1px solid var(--ink); padding:28px; box-shadow:12px 12px 0 rgba(212,96,10,0.3); max-width:640px;}
.quick-form .form-row{margin-bottom:16px;}
.cta-band{background:var(--navy); color:var(--canvas);}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.cta-band h2{font-size:clamp(2rem,3.6vw,2.6rem); color:var(--canvas);}
.cta-band p{color:#B9C2C2; margin-top:12px; max-width:46ch;}

.page-faq{margin-top:10px;}

/* footer hub */
footer{padding:44px 0 30px;}
.foot-cols{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; margin-bottom:28px;}
.foot-cols h2{font-family:'Barlow Condensed',sans-serif; font-size:1rem; color:#fff; letter-spacing:.06em; margin-bottom:10px;}
.foot-cols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.foot-cols a{color:#C9D0CD;}
.foot-cols a:hover{color:var(--orange);}
.foot-cols p{margin:0 0 6px;}
.foot-bottom{border-top:1px solid #ffffff1f; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media (max-width:880px){
  .page-grid{grid-template-columns:1fr;}
  .side-card{position:static;}
  .cta-grid{grid-template-columns:1fr;}
  .foot-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .wrap{padding:0 16px;}
  .foot-cols{grid-template-columns:1fr;}
  section{padding:56px 0;}
  .booking-form, .quick-form{padding:22px 18px;}
}

/* ===== back-to-top arrow ===== */
.to-top{
  position:fixed; right:18px; bottom:22px; z-index:450;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--navy); border:2px solid var(--ink);
  box-shadow:0 4px 12px rgba(0,0,0,.3); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
}
.to-top.show{opacity:1; visibility:visible; transform:none;}
.to-top:hover{background:#E4740F;}
.to-top svg{width:22px; height:22px;}
@media (max-width:640px){
  .to-top{bottom:calc(84px + env(safe-area-inset-bottom)); right:14px; width:44px; height:44px;}
}
@media (prefers-reduced-motion: reduce){ .to-top{transition:none;} }

/* ===== fixes 2026-10-29: quick-form labels readable + Netlify badge off the mobile bar ===== */
.quick-form{color:var(--ink);}
@media (max-width:640px){
  #nl-badge-frame{bottom:calc(66px + env(safe-area-inset-bottom))!important; left:0!important; right:auto!important;}
}
