/* ── INNER PAGE SYSTEM ────────────────────────────────────────────────────
   Shared by any v2 page that isn't the homepage: simple breadcrumb hero +
   article-style content sections. About/Contact keep their own bespoke
   hero CSS; this is for Services, Reviews, Home Automation Zoning, and the
   Tier 2/3 hub + city pages that follow the same shape.
   Tokens come from style.css — nothing redefined here.
   ──────────────────────────────────────────────────────────────────────── */

/* breadcrumb (shared with about.css's .crumb, redefined here so this file
   works standalone on pages that don't load about.css) */
.crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-faint);margin:0 0 18px;
}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--orange)}
.crumb span[aria-current]{color:var(--navy);font-weight:600}
.crumb .crumb__sep{color:var(--line-2)}

/* ── SIMPLE HERO (centered, no media column) ── */
.i-hero{
  position:relative;overflow:hidden;
  background:var(--cream-2);
  padding:clamp(28px,3.5vw,44px) 0;
  text-align:center;
}
.i-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:url('/wc-assets/6931280ce8d9acda024b1e74_heroimg-p-2600.png') center 30%/cover no-repeat;
  opacity:.35;
}
.i-hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,
    rgba(243,226,218,.92) 0%,
    rgba(243,226,218,.85) 30%,
    rgba(243,226,218,.60) 52%,
    rgba(243,226,218,.30) 68%,
    rgba(243,226,218,0) 85%
  );
}

.i-hero .container{position:relative;z-index:1}
.i-hero .crumb{justify-content:center}
.i-hero h1{color:var(--navy);margin:0 0 14px}
.i-hero__sub{
  font-size:18px;color:var(--ink-soft);max-width:62ch;
  margin:0 auto 24px;line-height:1.65;
}
.i-hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}

/* ── SIMPLE HERO, LEFT ALIGNED (for content-heavy pages) ── */
.i-hero--left{text-align:left}
.i-hero--left .crumb{justify-content:flex-start}
.i-hero--left .i-hero__sub{margin:0 0 24px}
.i-hero--left .i-hero__actions{justify-content:flex-start}

/* ── SERVICE GRID (Services hub) ── */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.svc-card__img{aspect-ratio:16/10;background-size:cover;background-position:center}
.svc-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc-card h3{font-size:20px}
.svc-card p{font-size:16px;color:var(--ink-soft);line-height:1.55;flex:1;margin:0}
.svc-card__link{
  font-size:15.5px;font-weight:600;color:var(--orange);
  display:inline-flex;align-items:center;gap:5px;margin-top:4px;
}

/* ── LEGAL PAGES (Privacy / Terms / Accessibility) ── */
.legal{max-width:820px;margin:0 auto}
.legal h2{font-size:22px;margin:40px 0 12px;color:var(--navy)}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:18px;margin:22px 0 8px;color:var(--navy)}
.legal p{font-size:16.5px;color:var(--ink-soft);line-height:1.75;margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px;display:block}
.legal ul li{
  display:list-item;font-size:16.5px;color:var(--ink-soft);
  line-height:1.7;margin-bottom:6px;
}
.legal ul li::before{content:none}
.legal strong{color:var(--navy)}
.legal .legal-updated{
  font-size:14.5px;color:var(--ink-faint);margin-bottom:28px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.legal .legal-contact{
  margin-top:8px;padding:18px 20px;background:var(--cream-2);
  border-radius:var(--r-sm);font-size:16px;color:var(--ink-soft);line-height:1.8;
}
.legal .legal-contact strong{display:block;color:var(--navy);margin-bottom:4px}

/* ── ROLE LIST (Careers) ── */
.role-list{
  max-width:720px;margin:0 auto;list-style:none;
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.role-list li{
  background:var(--white);padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.role-list li span{font-size:17px;font-weight:600;color:var(--navy)}

/* ── ARTICLE CONTENT (Home Automation Zoning and similar single-service pages) ── */
.article{max-width:840px;margin-inline:auto}
.article h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 14px}
.article h2:not(:first-child){margin-top:8px}
.article > *+h2{margin-top:44px}
.article p{font-size:17px;color:var(--ink-soft);line-height:1.7;margin:0 0 16px}
.article ul,.article ol{display:grid;gap:10px;margin:0 0 16px;padding-left:0}
.article ul{list-style:none}
.article ol{counter-reset:step;list-style:none}
.article ul li,.article ol li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:16.5px;color:var(--ink-soft);line-height:1.6;
}
.article ul li::before{
  content:'';flex:none;width:8px;height:8px;margin-top:7px;
  border-radius:50%;background:var(--orange);
}
.article ol li{counter-increment:step}
.article ol li::before{
  content:counter(step);flex:none;
  width:24px;height:24px;border-radius:50%;
  background:var(--orange);color:var(--white);
  font-size:13.5px;font-weight:700;font-family:var(--font-sans);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.article strong{color:var(--navy)}
.article .lede{font-size:19px;color:var(--ink-soft)}

.i-cta{
  margin-top:36px;padding:28px 30px;border-radius:var(--r-lg);
  background:linear-gradient(122deg, var(--orange) 0%, #e03300 52%, var(--orange-2) 100%);color:var(--white);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.i-cta h3{color:var(--white);margin:0 0 4px}
.i-cta p{color:rgba(255,255,255,.92)}
.i-cta .btn--white{background:var(--white);color:var(--orange)}
.i-cta .btn--white:hover{background:var(--cream-2)}
.i-cta p{color:rgba(255,255,255,.75);margin:0;font-size:16px}

@media(max-width:900px){
  .svc-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .svc-cards{grid-template-columns:1fr}
  .i-hero__actions{flex-direction:column}
  .i-hero__actions .btn{width:100%;justify-content:center}
  .i-cta{flex-direction:column;align-items:flex-start;text-align:left}
}
@media(max-width:480px){
  .i-hero h1{font-size:clamp(26px,8vw,32px)}
  .i-hero__sub{font-size:16.5px}
}

/* Mobile QA: on phones the hero text spans the full width, so flatten the
   left-to-right wash to keep copy readable over the van photo. */
@media(max-width:700px){
  .i-hero::after{background:linear-gradient(90deg, rgba(243,226,218,.92) 0%, rgba(243,226,218,.88) 55%, rgba(243,226,218,.62) 100%);}
}

/* ── inner hero 2026-10-07: full-strength photo on the right, white wash only behind the text (original stop positions) ── */
.i-hero{ background:var(--white); }
.i-hero::before{ opacity:1 !important; background-position:right 30% !important; }
.i-hero::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.92) 30%,
    rgba(255,255,255,.72) 52%,
    rgba(255,255,255,.36) 68%,
    rgba(255,255,255,0) 85%) !important;
}
@media (max-width:700px){
  .i-hero::after{ background:rgba(255,255,255,.9) !important; }
}