/* Dörguard — consolidated stylesheet (proof-of-concept)
 * Built by merging index.html's CSS (home page + shared chrome: header,
 * nav, footer, buttons, forms, FAQ accordion) with the shared 'interior
 * page' component library used by every non-home page (.page-hero/.ph-*,
 * .breadcrumb, .stats-bar, .section-head, .related/.rel-card, etc.),
 * sourced from the Abbotsford cluster.
 *
 * One real conflict was found and resolved during the merge: .btn-primary
 * had two different definitions across the live site (white-bg/black-text
 * on 5+ page types vs. black-bg/white-text on 2 Abbotsford pages). The
 * majority version (white-bg/black-text) was kept as canonical here — the
 * 2 outlier pages were rendering a different-looking primary button than
 * the rest of the site.
 *
 * NOT YET MERGED: CSS specific to the garage-doors style pages (.brand-card,
 * .spec-table, .design-grid...) and the repair-problem pages (.safety-item,
 * .warning-box, .acc-card...) — add those in the same way when you build
 * those templates (see the plan doc, Phase 2).
 *
 * This file has NOT been visually verified pixel-for-pixel against the
 * live site (no browser available in this environment) — do a visual
 * pass on the POC pages before treating this as final.
 */
/* Design tokens (:root) now live in tokens.css, loaded before this file.
   All var(--token) references below resolve from there. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--fb);
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(64px + var(--safe-b));
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--fb); cursor: pointer; background: none; border: none; }

/* TYPOGRAPHY */
.label.lt  { color: rgba(255,255,255,.85); }
.label.acc { color: var(--accent); }
h1, h2, h3 { font-family: var(--fd); letter-spacing: -.01em; line-height: 1.08; font-weight: 700; }
.hero-h1 { font-size: clamp(38px, 9vw, 88px); font-weight:700; color:var(--white); margin-bottom:20px; }
.hero-h1 em { font-style:normal; font-weight:700; color:var(--accent); }
.section-h2 { font-size:clamp(28px,5vw,52px); font-weight:700; color:var(--black); margin-bottom:16px; }
.section-h2.wt { color: var(--white); }
.body-copy { font-size:17px; line-height:1.75; color:var(--grey-dk); font-weight:300; }
.body-copy.lt { color:rgba(255,255,255,.85); }

/* LAYOUT */

/* BUTTONS */
.btn-primary         { background:var(--white); color:var(--black); }
.btn-primary:hover   { background:var(--grey-lt); }
.btn-primary.dk      { background:var(--black); color:var(--white); }
.btn-primary.dk:hover{ background:var(--mid); }
.btn-outline         { border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.8); }
.btn-outline:hover   { border-color:var(--white); color:var(--white); background:rgba(255,255,255,.05); }
.btn-outline.dk-border      { border-color:var(--border); color:var(--grey-dk); }
.btn-outline.dk-border:hover{ border-color:var(--black); color:var(--black); }
.btn svg { flex-shrink:0; transition:transform .2s; }
.btn:hover svg { transform:translateX(3px); }
.btn-red { background:var(--accent); color:var(--white); }
.btn-red:hover { background:#a00f27; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
.anim-0 { opacity:0; animation:fadeUp .7s var(--ease) .15s forwards; }
.anim-1 { opacity:0; animation:fadeUp .7s var(--ease) .30s forwards; }
.anim-2 { opacity:0; animation:fadeUp .7s var(--ease) .45s forwards; }
.anim-3 { opacity:0; animation:fadeUp .7s var(--ease) .60s forwards; }
.anim-4 { opacity:0; animation:fadeIn  .8s var(--ease) .90s forwards; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.reveal.in { opacity:1; transform:translateY(0); }
.rv1 { transition-delay:.1s; }
.rv2 { transition-delay:.2s; }
.rv3 { transition-delay:.3s; }

/* HEADER */
.site-header { position:fixed; inset:0 0 auto 0; z-index:900; height:62px; display:flex; align-items:center; padding:0 var(--cx); transition:background .35s var(--ease),border-color .35s,height .3s var(--ease); border-bottom:1px solid transparent; }
.site-header.scrolled { background:rgba(14,14,14,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:rgba(255,255,255,.07); height:56px; }
.hdr-inner { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:var(--cmax); margin:0 auto; }
.logo { font-family:var(--fd); font-size:22px; font-weight:800; color:var(--white); letter-spacing:.02em; line-height:1; flex-shrink:0; }

.hdr-nav { display:none; align-items:center; gap:32px; }
.hdr-nav a { font-size:15px; font-weight:400; color:rgba(255,255,255,.68); letter-spacing:.03em; transition:color .2s; }
.hdr-nav a:hover { color:var(--white); }
.hdr-right { display:flex; align-items:center; gap:8px; }
.hdr-phone { display:none; font-size:15px; color:rgba(255,255,255,.85); letter-spacing:.02em; transition:color .2s; }
.hdr-phone:hover { color:var(--white); }
.hdr-quote { display:none; background:var(--accent) !important; color:var(--white) !important; }
.hdr-call-pill { display:flex; align-items:center; gap:6px; padding:9px 14px; background:var(--white); color:var(--black); font-size:13px; font-weight:600; letter-spacing:.04em; -webkit-tap-highlight-color:transparent; }
.burger { width:44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:4px; flex-shrink:0; }
.burger span { display:block; width:22px; height:1.5px; background:var(--white); transform-origin:center; transition:all .3s var(--ease); }
.burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* NAV DRAWER */
.nav-drawer.open { transform:translateX(0); }
.drawer-links { flex:1; display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.07); margin-bottom:40px; }
.drawer-link { display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.07); font-family:var(--fd); font-size:30px; font-weight:700; color:var(--white); letter-spacing:-.01em; transition:color .2s; }
.drawer-link:hover { color:var(--accent); }
.drawer-link svg { opacity:.3; flex-shrink:0; }
.drawer-foot { border-top:1px solid rgba(255,255,255,.07); padding-top:28px; }
.drawer-phone { font-family:var(--fd); font-size:28px; font-weight:500; color:var(--white); letter-spacing:-.01em; display:block; margin-bottom:6px; }
.drawer-email { font-size:16px; color:rgba(255,255,255,.78); font-weight:300; display:block; margin-bottom:24px; }
.drawer-cta { display:block; width:100%; padding:16px; background:var(--accent); color:var(--white); text-align:center; font-size:15px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }

/* HERO */
.hero { position:relative; min-height:100svh; background:var(--black); display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--cx) 60px; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url('/images/dorguard-residential-garage-door-langley-bc.webp') center 35%/cover no-repeat; opacity:.55; }
.hero-panels { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,1fr); gap:3px; padding:3px; opacity:.05; }
.hero-panels div { border:1px solid rgba(255,255,255,.55); position:relative; }
.hero-panels div::after { content:''; position:absolute; left:6px; right:6px; top:50%; height:1px; background:rgba(255,255,255,.35); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(165deg,rgba(14,14,14,.15) 0%,rgba(14,14,14,.55) 45%,rgba(14,14,14,.93) 78%,#0e0e0e 100%); }
.hero-grid-lines { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 30%,transparent 100%); }
.hero-content { position:relative; z-index:10; max-width:var(--cmax); margin:0 auto; width:100%; }
.hero-ctas { display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }
.hero-scroll { display:flex; align-items:center; gap:10px; }
.hero-scroll-line { width:24px; height:1px; background:rgba(255,255,255,.2); }
.hero-scroll-lbl { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); }

/* TRUST STRIP */
.trust-strip { background:var(--white); border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.trust-strip::-webkit-scrollbar { display:none; }
.trust-inner { display:flex; min-width:max-content; width:100%; }
.trust-item { display:flex; align-items:center; gap:10px; padding:18px 24px; border-right:1px solid var(--border); flex-shrink:0; }
.trust-icon { width:16px; height:16px; color:var(--grey-dk); flex-shrink:0; }
.trust-text { font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--grey-dk); white-space:nowrap; }

/* ROUTING HUB */
.routing { background:var(--white); padding:56px var(--cx); }
.routing-intro { margin-bottom:36px; padding-bottom:32px; border-bottom:1px solid var(--border); }
.route-grid { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.route-card { background:var(--white); padding:28px 24px; display:flex; align-items:flex-start; gap:18px; position:relative; border-left:3px solid transparent; transition:background .2s,border-color .2s; -webkit-tap-highlight-color:transparent; }
.route-card:hover, .route-card:active { background:var(--grey-bg); border-left-color:var(--black); }
.route-icon { width:36px; height:36px; flex-shrink:0; color:var(--black); margin-top:2px; }
.route-body { flex:1; min-width:0; }
.route-num { font-family:var(--fd); font-size:12px; color:var(--grey-lt); letter-spacing:.1em; display:block; margin-bottom:4px; }
.route-card h3 { font-size:16px; font-weight:500; margin-bottom:6px; line-height:1.3; letter-spacing:-.01em; }
.route-card p { font-size:15px; line-height:1.6; color:var(--grey-dk); font-weight:300; }
.route-card-link { font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--black); display:none; align-items:center; gap:8px; margin-top:10px; transition:gap .2s; }
.route-card:hover .route-card-link { gap:14px; }
.route-arrow { width:32px; height:32px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; align-self:center; color:var(--grey-dk); transition:all .2s; }
.route-card:hover .route-arrow, .route-card:active .route-arrow { background:var(--black); border-color:var(--black); color:var(--white); }

/* CREDIBILITY */
.cred { background:var(--black); padding:64px var(--cx); position:relative; overflow:hidden; }
.cred::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(196,18,48,.5),transparent); }
.cred-intro { padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:40px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07); margin-bottom:36px; }
.stat-cell { background:var(--black); padding:28px 20px; }
.stat-cell.span2 { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.07); }
.stat-num { font-family:var(--fd); font-size:clamp(36px,8vw,56px); font-weight:700; color:var(--white); line-height:1; letter-spacing:-.03em; margin-bottom:8px; }
.stat-num s { text-decoration:none; color:var(--white); font-style:normal; }
.stat-lbl  { font-size:13px; font-weight:500; color:rgba(255,255,255,.78); line-height:1.4; margin-bottom:8px; }
.stat-desc { font-size:13px; line-height:1.6; color:rgba(255,255,255,.65); font-weight:300; }

/* PROCESS */
.process { background:var(--grey-bg); padding:36px var(--cx); }
.steps { margin-top:16px; }
.step { display:grid; grid-template-columns:36px 1fr; padding:10px 0; border-top:1px solid var(--border); gap:0; }
.step:last-child { border-bottom:1px solid var(--border); }
.step-num { font-family:var(--fd); font-size:12px; color:var(--grey-lt); letter-spacing:.06em; padding-top:3px; }
.step h4 { font-size:15px; font-weight:500; margin-bottom:2px; letter-spacing:-.01em; }
.step p { font-size:13px; line-height:1.55; color:var(--grey-dk); font-weight:300; }

/* DECISION */
.decision { background:var(--white); padding:64px var(--cx); }
.decision-box { border:1px solid var(--border); margin-top:32px; overflow:hidden; }
.decision-head { background:var(--black); padding:24px 24px 22px; }
.decision-head h3 { font-family:var(--fd); font-size:22px; font-weight:700; color:var(--white); letter-spacing:-.01em; margin-bottom:4px; }
.decision-head p { font-size:15px; color:rgba(255,255,255,.78); font-weight:300; }
.decision-cols { display:flex; flex-direction:column; }
.decision-col { padding:22px 24px; border-bottom:1px solid var(--border); }
.decision-col:last-of-type { border-bottom:none; }
.decision-col-lbl { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); color:var(--black); }
.decision-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.decision-list li { font-size:15px; line-height:1.5; color:var(--grey-dk); font-weight:300; display:flex; gap:10px; }
.decision-list li::before { content:'—'; color:var(--grey-lt); flex-shrink:0; }
.decision-foot { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; }

/* SERVICES */
.services { background:var(--white); padding:64px var(--cx); }
.svc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:28px; border-bottom:1px solid var(--border); margin-bottom:28px; }
.svc-view-all { font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--grey-dk); display:flex; align-items:center; gap:4px; margin-top:10px; white-space:nowrap; }
.svc-cards { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.svc-card { background:var(--white); padding:28px 24px; display:block; border-left:3px solid transparent; transition:background .2s,border-color .2s; -webkit-tap-highlight-color:transparent; }
.svc-card:hover, .svc-card:active { background:var(--grey-bg); border-left-color:var(--black); }
.svc-tag { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-md); display:block; margin-bottom:10px; }
.svc-card h3 { font-family:var(--fd); font-size:24px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em; }
.svc-card p { font-size:15px; line-height:1.65; color:var(--grey-dk); font-weight:300; margin-bottom:20px; }
.svc-more { font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:8px; color:var(--black); }

/* EMERGENCY */
.emergency { background:var(--dark); padding:32px var(--cx); border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
.emrg-label { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block; }
.emrg-text { font-size:16px; line-height:1.6; color:rgba(255,255,255,.85); font-weight:300; margin-bottom:18px; }
.emrg-text strong { color:var(--white); font-weight:500; }
.emrg-phone-link { display:flex; align-items:center; gap:14px; padding:16px 20px; border:1px solid rgba(255,255,255,.12); transition:border-color .2s; -webkit-tap-highlight-color:transparent; max-width:400px; }
.emrg-phone-link:hover { border-color:rgba(255,255,255,.4); }
.emrg-phone-icon { width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.emrg-num { font-family:var(--fd); font-size:28px; font-weight:500; color:var(--white); line-height:1; }
.emrg-sub { font-size:12px; color:rgba(255,255,255,.70); margin-top:2px; font-weight:300; }

/* STRATA */
.strata { background:var(--dark); padding:64px var(--cx); position:relative; overflow:hidden; }
.strata-art { position:relative; height:220px; margin-bottom:36px; overflow:hidden; border-radius:4px; }
.strata-art img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.feat-list { margin:28px 0; }
.feat-item { display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-top:1px solid rgba(255,255,255,.06); }
.feat-item:last-child { border-bottom:1px solid rgba(255,255,255,.06); }
.feat-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:7px; flex-shrink:0; }
.feat-item p { font-size:15px; line-height:1.6; color:rgba(255,255,255,.78); font-weight:300; }

/* CITIES */
.cities { background:var(--grey-bg); padding:64px var(--cx); }
.city-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:32px; }
.city-link { background:var(--white); padding:15px 16px; font-size:15px; color:var(--grey-dk); display:flex; align-items:center; justify-content:space-between; gap:6px; font-weight:400; transition:all .2s var(--ease); min-height:50px; -webkit-tap-highlight-color:transparent; border-bottom:2px solid transparent; }
.city-link:hover, .city-link:active { background:var(--black); color:var(--white); border-bottom-color:var(--accent); box-shadow:0 4px 18px rgba(196,18,48,.18); }
.city-link:hover svg, .city-link:active svg { opacity:1; }
.city-link svg { opacity:.2; flex-shrink:0; width:11px; transition:opacity .2s; }

/* FAQ */
.faq { background:var(--white); padding:64px var(--cx); }
.faq-item { border-top:1px solid var(--border); }
.faq-item:last-child { border-bottom:1px solid var(--border); }
.faq-q { width:100%; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; -webkit-tap-highlight-color:transparent; }
.faq-q-txt { font-size:17px; font-weight:400; color:var(--black); line-height:1.4; letter-spacing:-.01em; }
.faq-ico { width:28px; height:28px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--grey-dk); transition:all .3s var(--ease); }
.faq-item.open .faq-ico { background:var(--black); border-color:var(--black); color:var(--white); transform:rotate(45deg); }
.faq-ans { max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-item.open .faq-ans { max-height:600px; }
.faq-ans-inner { padding:0 0 20px; font-size:16px; line-height:1.75; color:var(--grey-dk); font-weight:300; }

/* FAQ homepage list wrapper (column of .faq-item) */
.faq-list { display:flex; flex-direction:column; }

/* ===== Repair-problem pages (/garage-door-repair/{problem}) ===== */
.ph-panels { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,1fr); gap:3px; padding:3px; opacity:.035; }
.ph-panels div { border:1px solid rgba(255,255,255,.55); position:relative; }
.overview { background:var(--grey-bg); padding:64px var(--cx); border-bottom:1px solid var(--border); }
.overview-inner { max-width:760px; }
.overview p { font-size:17px; line-height:1.8; color:var(--grey-dk); font-weight:400; margin-bottom:18px; }
.overview p:last-child { margin-bottom:0; }
.overview strong { font-weight:600; color:var(--black); }
.products { background:var(--white); padding:64px var(--cx); }
.products.alt { background:var(--grey-bg); }
.acc-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:32px; }
.acc-card { background:var(--white); padding:26px 24px; border-left:3px solid transparent; transition:border-color .2s; }
.acc-card:hover { border-left-color:var(--accent); }
.acc-card h3,.acc-card h4 { font-size:18px; font-weight:700; margin-bottom:8px; }
.acc-card p { font-size:16px; color:var(--grey-dk); font-weight:400; line-height:1.7; margin-bottom:0; }
.safety { background:var(--dark); padding:56px var(--cx); }
.safety-inner { max-width:820px; }
.safety-list { display:flex; flex-direction:column; gap:0; border:1px solid rgba(255,255,255,.1); margin-top:24px; }
.safety-item { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.safety-item:last-child { border-bottom:none; }
.safety-item svg { flex-shrink:0; margin-top:2px; color:var(--accent); }
.safety-item p { font-size:16px; color:rgba(255,255,255,.75); font-weight:400; line-height:1.6; margin:0; }
.safety-item p strong { color:var(--white); font-weight:600; }
.areas-section { background:var(--grey-bg); padding:56px var(--cx); }
.local-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.local-badge { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--grey-dk); font-weight:500; background:var(--white); border:1px solid var(--border); padding:9px 14px; }
.local-badge svg { color:var(--accent); flex-shrink:0; }
@media (min-width:700px) { .acc-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1080px) {
  .acc-grid { grid-template-columns:1fr 1fr 1fr; }
  /* padding bump only for repair-only sections — NOT the shared .faq/.contact/.related */
  .overview, .products, .safety, .areas-section { padding-top:90px; padding-bottom:90px; }
}

/* ===== Door-style / product pages (/garage-doors/{style}) ===== */
.ph-price { font-size:15px; color:rgba(255,255,255,.70); font-weight:300; margin-bottom:28px; }
.ph-price b { font-family:var(--fd); font-size:22px; color:rgba(255,255,255,.7); font-weight:700; }
.intro { background:var(--grey-bg); padding:64px var(--cx); border-bottom:1px solid var(--border); }
.intro-inner { max-width:720px; }
.intro p { font-size:17px; line-height:1.8; color:var(--grey-dk); font-weight:300; margin-bottom:18px; }
.intro p:last-child { margin-bottom:0; }
.intro strong { font-weight:600; color:var(--black); }
.designs-section { padding:80px var(--cx); }
.design-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.design-card { background:var(--white); border-left:3px solid transparent; transition:border-color .25s, background .2s; }
.design-card:hover { border-left-color:var(--accent); background:#fdfcfb; }
.design-img { aspect-ratio:16/7; background:var(--dark); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.design-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.design-img-lbl { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); font-weight:500; text-align:center; }
.design-body { padding:24px 22px 28px; }
.design-body h3 { font-size:clamp(18px,2.5vw,24px); font-weight:700; margin-bottom:8px; }
.design-body p { font-size:16px; line-height:1.75; color:var(--grey-dk); font-weight:300; }
.specs-section { background:var(--grey-bg); padding:80px var(--cx); }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:28px; }
.spec-cell { background:var(--white); padding:24px 22px; }
.spec-cell .k { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-md); margin-bottom:8px; }
.spec-cell .v { font-family:var(--fd); font-size:clamp(16px,2.5vw,20px); font-weight:700; color:var(--black); line-height:1.2; }
.colour-chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:13px; color:var(--grey-dk); border:1px solid var(--border); padding:8px 14px; font-weight:400; }
.brands-section { padding:80px var(--cx); }
.brand-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.brand-card { background:var(--white); padding:32px 28px; border-left:3px solid transparent; transition:border-color .25s; }
.brand-card:hover { border-left-color:var(--accent); }
.brand-lead-tag { display:inline-block; background:var(--accent); color:var(--white); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; margin-bottom:14px; }
.brand-name { font-family:var(--fd); font-size:clamp(24px,4vw,36px); font-weight:700; letter-spacing:-.01em; margin-bottom:4px; }
.brand-role { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.brand-card p { font-size:16px; line-height:1.75; color:var(--grey-dk); font-weight:300; max-width:560px; }
@media (min-width:700px) {
  .design-grid { grid-template-columns:1fr 1fr 1fr; }
  .spec-grid { grid-template-columns:repeat(4,1fr); }
  .brand-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:1080px) {
  .intro, .designs-section, .specs-section, .brands-section { padding-top:100px; padding-bottom:100px; }
}

/* CONTACT */
.contact::before { content:''; position:absolute; font-family:var(--fd); font-size:clamp(80px,15vw,220px); font-weight:600; color:rgba(255,255,255,.022); letter-spacing:-.04em; top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; user-select:none; }
.contact-inner-wrap { position:relative; }
.contact-intro { padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:36px; }
.contact-intro h2 { font-family:var(--fd); font-size:clamp(28px,5vw,50px); font-weight:700; color:var(--white); letter-spacing:-.02em; line-height:1.1; margin-bottom:14px; }
.contact-intro p { font-size:16px; line-height:1.7; color:rgba(255,255,255,.78); font-weight:300; }
.contact-direct { margin-top:24px; }
.cd-label { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.65); display:block; margin-bottom:8px; }
.cd-phone { font-family:var(--fd); font-size:clamp(28px,5vw,42px); font-weight:500; color:var(--white); letter-spacing:-.02em; display:block; transition:color .2s; }
.cd-phone:hover { color:var(--accent); }
.cd-sub { font-size:12px; color:rgba(255,255,255,.65); font-weight:300; margin-top:4px; }
.form-title { font-size:16px; font-weight:500; color:var(--white); letter-spacing:-.01em; margin-bottom:14px; }
.form-stack { display:flex; flex-direction:column; gap:10px; }
.form-row-2 { display:flex; flex-direction:column; gap:10px; }
.f-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); padding:14px 16px; font-size:17px; font-family:var(--fb); color:var(--white); outline:none; transition:border-color .2s; -webkit-appearance:none; appearance:none; min-height:50px; }
.f-input::placeholder { color:rgba(255,255,255,.55); }
.f-input:focus { border-color:rgba(255,255,255,.3); }
.f-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.25)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-color:rgba(255,255,255,.05); padding-right:40px; color:rgba(255,255,255,.85); cursor:pointer; }
.f-select option { background:var(--dark); color:var(--white); }
.f-textarea { resize:none; min-height:90px; }
.f-honeypot { display:none; }
.f-upload-wrap { position:relative; }
.f-upload-label { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px 16px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.18); color:rgba(255,255,255,.78); font-size:16px; font-family:var(--fb); cursor:pointer; transition:border-color .2s, color .2s; min-height:50px; }
.f-upload-label:hover { border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.85); }
.f-upload-label svg { flex-shrink:0; }
.f-upload-input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.f-upload-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.f-upload-thumb { position:relative; width:56px; height:56px; border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.f-upload-thumb img { width:100%; height:100%; object-fit:cover; }
.f-upload-thumb .f-remove { position:absolute; top:2px; right:2px; width:18px; height:18px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; line-height:18px; text-align:center; cursor:pointer; border:none; font-family:var(--fb); }
.f-upload-count { font-size:12px; color:rgba(255,255,255,.70); margin-top:4px; }
.f-submit { width:100%; padding:17px; background:var(--white); color:var(--black); border:none; font-size:15px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-family:var(--fb); display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; transition:background .2s; -webkit-tap-highlight-color:transparent; cursor:pointer; }
.f-submit:hover { background:var(--grey-lt); }
.f-submit.sent { background:var(--mid); color:var(--white); pointer-events:none; }
.f-micro   { font-size:12px; color:rgba(255,255,255,.65); text-align:center; line-height:1.5; font-weight:300; margin-top:4px; }
.f-privacy { font-size:11px; color:rgba(255,255,255,.65); text-align:center; margin-top:6px; }

/* FOOTER */
.site-footer { background:var(--black); border-top:1px solid rgba(255,255,255,.06); padding:52px var(--cx) 32px; }
.foot-top { display:grid; grid-template-columns:1fr 1fr; gap:36px 24px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:28px; }
.foot-logo { font-family:var(--fd); font-size:20px; font-weight:600; color:var(--white); letter-spacing:.02em; display:block; margin-bottom:10px; }

.foot-about { font-size:15px; line-height:1.65; color:rgba(255,255,255,.70); font-weight:300; margin-bottom:20px; }
.foot-contacts { display:flex; flex-direction:column; gap:10px; }
.foot-contacts a { display:flex; align-items:center; gap:10px; font-size:15px; color:rgba(255,255,255,.78); font-weight:300; transition:color .2s; }
.foot-contacts a:hover { color:var(--white); }
.foot-col-title { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:16px; }
.foot-links { display:flex; flex-direction:column; gap:12px; }
.foot-links a { font-size:15px; color:rgba(255,255,255,.78); font-weight:300; line-height:1.4; transition:color .2s; }
.foot-links a:hover { color:var(--white); }
.foot-bottom { display:flex; flex-direction:column; gap:10px; }
.foot-copy { font-size:12px; color:rgba(255,255,255,.65); font-weight:300; line-height:1.5; }
.foot-legal { display:flex; flex-wrap:wrap; gap:14px; }
.foot-legal a { font-size:12px; color:rgba(255,255,255,.65); transition:color .2s; }
.foot-legal a:hover { color:rgba(255,255,255,.85); }

/* BOTTOM BAR */
.bb-call { display:flex; align-items:center; justify-content:center; gap:8px; padding:17px 12px; background:var(--white); color:var(--black); font-size:15px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-right:1px solid rgba(0,0,0,.1); -webkit-tap-highlight-color:transparent; transition:background .15s; }
.bb-call:active { background:var(--grey-lt); }
.bb-quote { display:flex; align-items:center; justify-content:center; gap:8px; padding:17px 12px; color:var(--white); font-size:15px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; -webkit-tap-highlight-color:transparent; transition:background .15s; }
.bb-quote:active { background:rgba(255,255,255,.06); }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--mid); }

/* ── TABLET ≥700px ── */
@media (min-width:700px) {
  .hero-ctas { flex-direction:row; }
  .hero-ctas .btn { flex:1; }
  .trust-strip { overflow:visible; }
  .trust-inner { min-width:0; }
  .trust-item { flex:1; justify-content:center; padding:18px 16px; }
  .route-grid { display:grid; grid-template-columns:1fr 1fr; }
  .process-decision-wrap { display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--border); }
  .process { padding-right:40px; padding-bottom:64px; }
  .decision { padding-left:40px; padding-bottom:64px; }
  .decision-cols { flex-direction:row; }
  .decision-col { flex:1; border-bottom:none; }
  .decision-col + .decision-col { border-left:1px solid var(--border); border-bottom:none; }
  .svc-cards { display:grid; grid-template-columns:1fr 1fr; }
  .city-grid { grid-template-columns:repeat(4,1fr); }
  .faq-inner-wrap { display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:start; }
  .faq-sidebar { position:sticky; top:80px; }
  .foot-top { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:0; }
  .foot-brand { padding-right:48px; border-right:1px solid rgba(255,255,255,.06); }
  .foot-col { padding:0 32px; border-right:1px solid rgba(255,255,255,.06); }
  .foot-col:last-child { border-right:none; }
  .foot-bottom { flex-direction:row; justify-content:space-between; align-items:center; }
  .strata-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .strata-art { height:100%; min-height:340px; margin-bottom:0; }
}

/* ── DESKTOP ≥1080px ── */
@media (min-width:1080px) {
  .routing,.cred,.services,.cities,.faq,.contact { padding-top:100px; padding-bottom:100px; }
  .process { padding-top:60px; padding-bottom:60px; }
  .decision { padding-top:60px; padding-bottom:60px; }
  .emergency { padding:36px var(--cx); }
  .hero { justify-content:center; align-items:flex-start; }
  .hero-content { display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding-top:72px; }
  .hero-h1 { max-width:680px; }
  .hero-ctas { flex-direction:row; width:auto; }
  .hero-ctas .btn { flex:none; }
  .trust-inner { width:100%; }
  .trust-item { flex:1; }
  .route-grid { display:grid; grid-template-columns:repeat(4,1fr); }
  .route-card { flex-direction:column; gap:20px; padding:36px 28px 32px; border-left:none; border-bottom:3px solid transparent; }
  .route-card:hover, .route-card:active { background:var(--grey-bg); border-bottom-color:var(--black); border-left-color:transparent; }
  .route-icon { width:40px; height:40px; }
  .route-arrow { display:none; }
  .route-card p { font-size:16px; }
  .route-card-link { display:flex; }
  .cred-intro { padding-bottom:0; border-bottom:none; margin-bottom:0; }
  .stats-grid-wrap { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; border:1px solid rgba(255,255,255,.07); gap:0; background:transparent; }
  .cred-intro-cell { padding:56px 48px 56px 0; border-right:1px solid rgba(255,255,255,.07); }
  .stats-grid { display:contents; margin:0; }
  .stat-cell { padding:56px 36px; border-right:1px solid rgba(255,255,255,.07); border-top:none; }
  .stat-cell:last-child { border-right:none; }
  .stat-cell.span2 { grid-column:auto; border-top:none; }
  .process-decision-wrap { background:none; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; max-width:var(--cmax); margin:0 auto; }
  .process { padding:100px 60px 100px var(--cx); }
  .decision { padding:100px var(--cx) 100px 60px; }
  .decision-aside { position:sticky; top:88px; }
  .svc-cards { display:grid; grid-template-columns:repeat(3,1fr); }
  .city-grid { grid-template-columns:repeat(8,1fr); }
  .faq-inner-wrap { grid-template-columns:1fr 1.8fr; }
  .contact-inner-wrap { grid-template-columns:1fr 1fr; gap:80px; }
  .strata-art { min-height:440px; }
}

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testimonials { background:var(--black); padding:64px var(--cx); }
.test-header { margin-bottom:40px; }
.test-header .section-h2 { color:var(--white); }
.test-rating-bar { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.test-stars-big { color:#f5a623; font-size:20px; letter-spacing:2px; line-height:1; }
.test-avg { font-family:var(--fd); font-size:28px; font-weight:400; color:var(--white); line-height:1; }
.test-count { font-size:13px; color:rgba(255,255,255,.70); font-weight:300; letter-spacing:.04em; }
.test-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:36px; }
.test-card { background:var(--dark); border:1px solid rgba(255,255,255,.07); padding:28px; display:flex; flex-direction:column; gap:16px; transition:border-color .2s; }
.test-card:hover { border-color:rgba(200,169,110,.25); }
.test-card-top { display:flex; justify-content:space-between; align-items:flex-start; }
.test-card-stars { color:#f5a623; font-size:16px; letter-spacing:2px; line-height:1; }
.test-source { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.70); }
.test-source svg { flex-shrink:0; }
.test-text { font-size:15px; line-height:1.75; color:rgba(255,255,255,.65); font-weight:300; font-style:normal; margin:0; flex:1; }
.test-author { border-top:1px solid rgba(255,255,255,.06); padding-top:14px; }
.test-name { font-size:15px; font-weight:500; color:rgba(255,255,255,.85); letter-spacing:-.01em; }
.test-meta { font-size:12px; color:rgba(255,255,255,.70); margin-top:2px; font-weight:300; }
.test-cta-row { display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; align-items:center; }
.test-cta-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:2px; transition:color .2s,border-color .2s; text-decoration:none; }
.test-cta-link:hover { color:var(--accent); border-color:var(--accent); }
@media(min-width:700px) {
  .test-grid { grid-template-columns:1fr 1fr; }
  .test-card:nth-child(5) { grid-column:span 2; max-width:calc(50% - 8px); }
}
@media(min-width:1080px) {
  .testimonials { padding-top:100px; padding-bottom:100px; }
  .test-grid { grid-template-columns:1fr 1fr 1fr; }
  .test-card:nth-child(5) { grid-column:span 1; max-width:100%; }
  .test-header-row { display:flex; justify-content:space-between; align-items:flex-end; }
}

/* ── TYPOGRAPHY & CONTRAST FIXES Apr 10 ── */
.body-copy { font-size:17px !important; }
.route-card p,.svc-card p,.step p,.feat-item p,
.decision-list li,.faq-ans-inner,.test-text,
.ph-body,.ph-meta,.ph-intro p { font-size:17px !important; line-height:1.75 !important; }
.hdr-nav a { font-size:17px !important; }
.label,.section-label,.svc-tag,.trust-text,
.route-num,.step-num,.foot-col-title,
.ph-label,.ph-section-label { font-size:13px !important; }
.faq-ans-inner { font-size:16px !important; }
.body-copy,.route-card p,.svc-card p,
.step p,.ph-body,.ph-intro p { font-weight:400 !important; }
.stat-desc    { color:rgba(255,255,255,.85) !important; }
.f-privacy    { color:rgba(255,255,255,.78) !important; font-size:12px !important; }
.f-micro      { color:rgba(255,255,255,.78) !important; font-size:13px !important; }
.foot-copy    { color:rgba(255,255,255,.85) !important; font-size:13px !important; }
.cd-sub       { color:rgba(255,255,255,.78) !important; }
.foot-links a { color:rgba(255,255,255,.85) !important; }
.foot-contacts a { color:rgba(255,255,255,.85) !important; }

.foot-social { display:flex; gap:10px; margin-top:20px; }
.foot-social a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.78); transition:all .2s; }
.foot-social a:hover { border-color:var(--white); color:var(--white); }

/* ===== Merged from interior-page templates (city/service pages) ===== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
.label{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-md);margin-bottom:14px;}
h1,h2,h3{font-family:var(--fd);letter-spacing:-.01em;line-height:1.08;}
.wrap{width:100%;max-width:var(--cmax);margin:0 auto;padding:0 var(--cx);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:15px 28px;transition:all .25s var(--ease);white-space:nowrap;-webkit-tap-highlight-color:transparent;cursor:pointer;text-decoration:none;}
.btn-primary.wt{background:var(--white);color:var(--black);}
.btn-primary.wt:hover{background:var(--grey-lt);}
.btn-outline.lt{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.8);}
.btn-outline.lt:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.05);}
@keyframes fadeUp {
from{opacity:0;transform:translateY(22px)}
to{opacity:1;transform:translateY(0)}
}
/* HEADER */
    .site-header{position:fixed;inset:0 0 auto 0;z-index:900;height:62px;display:flex;align-items:center;padding:0 var(--cx);transition:background .35s var(--ease),border-color .35s,height .3s;border-bottom:1px solid transparent;}
/* DRAWER */
/* PAGE HERO */
    .page-hero{position:relative;background:var(--black);min-height:min(80svh,600px);display:flex;flex-direction:column;justify-content:flex-start;padding:104px var(--cx) 56px;overflow:hidden;}
.ph-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(14,14,14,.1) 0%,rgba(14,14,14,.5) 40%,rgba(14,14,14,.92) 75%,#0e0e0e 100%);}
.ph-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 30%,transparent 100%);}
.ph-bg{position:absolute;inset:0;background:url('/images/dorguard-residential-garage-door-langley-bc.webp') center 40%/cover no-repeat;opacity:.5;}
.breadcrumb{position:static;z-index:10;display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.70);font-weight:400;margin-bottom:20px;}
.breadcrumb a{transition:color .2s;}
.breadcrumb a:hover{color:rgba(255,255,255,.7);}
.breadcrumb-sep{color:rgba(255,255,255,.65);}
.breadcrumb-cur{color:rgba(255,255,255,.85);}
.ph-content{position:relative;z-index:10;max-width:var(--cmax);margin:0 auto;width:100%;}
.ph-h1{font-size:clamp(30px,8vw,78px);font-weight:500;color:var(--white);margin-bottom:14px;}
.ph-h1 em{font-style:italic;font-weight:400;color:rgba(255,255,255,.78);}
.ph-sub{font-size:17px;line-height:1.75;color:rgba(255,255,255,.85);font-weight:300;max-width:480px;margin-bottom:32px;}
.ph-ctas{display:flex;flex-direction:column;gap:12px;}
/* STATS BAR */
    .stats-bar{background:var(--white);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.stats-bar::-webkit-scrollbar{display:none;}
.stats-bar-inner{display:flex;min-width:max-content;width:100%;}
.stat-pill{display:flex;align-items:center;gap:10px;padding:18px 24px;border-right:1px solid var(--border);flex-shrink:0;}
.sp-num{font-family:var(--fd);font-size:22px;font-weight:500;color:var(--black);line-height:1;}
.sp-num s{text-decoration:none;color:var(--accent);}
.sp-lbl{font-size:12px;font-weight:400;color:var(--grey-dk);line-height:1.4;}
/* SECTIONS */
    .section{padding:64px var(--cx);}
.section-head{margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border);}
.section-head.lt{border-bottom-color:rgba(255,255,255,.08);}
.section-head h2{font-size:clamp(26px,4vw,46px);font-weight:500;margin-bottom:12px;}
.section-head p{font-size:16px;line-height:1.75;color:var(--grey-dk);font-weight:300;max-width:560px;}
.section-head.lt h2{color:var(--white);}
.section-head.lt p{color:rgba(255,255,255,.78);}
/* INTRO TWO COL */
.intro-copy h2{font-size:clamp(26px,4vw,46px);font-weight:500;margin-bottom:16px;}
.intro-copy p{font-size:17px;line-height:1.8;color:var(--grey-dk);font-weight:300;margin-bottom:16px;}
.intro-aside{border:1px solid var(--border);padding:28px 24px;display:flex;flex-direction:column;gap:20px;background:var(--grey-bg);}
.aside-item{display:flex;gap:14px;align-items:flex-start;}
.aside-icon{width:18px;height:18px;color:var(--black);flex-shrink:0;margin-top:2px;}
.aside-item h3,.aside-item h4{font-size:15px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em;}
.aside-item p{font-size:13px;line-height:1.6;color:var(--grey-dk);font-weight:300;}
/* SERVICE GRID */
    .service-grid{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);}
.svc-card:hover{background:var(--grey-bg);border-left-color:var(--accent);}
.svc-icon{width:36px;height:36px;flex-shrink:0;color:var(--black);margin-top:2px;}
.svc-body{flex:1;min-width:0;}
.svc-link{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--black);display:inline-flex;align-items:center;gap:6px;margin-top:10px;transition:gap .2s;}
.svc-card:hover .svc-link{gap:12px;}
.svc-arrow{width:30px;height:30px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;color:var(--grey-dk);transition:all .2s;}
.svc-card:hover .svc-arrow{background:var(--black);border-color:var(--black);color:var(--white);}
/* WHY SECTION */
.why-card{background:var(--white);padding:28px 24px;border-left:3px solid transparent;transition:border-color .2s,background .2s;}
.why-card:hover{border-left-color:var(--accent);background:#fdfcfb;}
.why-card h3,.why-card h4{font-size:17px;font-weight:500;margin-bottom:8px;letter-spacing:-.01em;}
.why-card p{font-size:15px;line-height:1.65;color:var(--grey-dk);font-weight:300;}
/* PROCESS */
    .proc-grid{display:flex;flex-direction:column;}
.proc-step{display:grid;grid-template-columns:48px 1fr;padding:24px 0;border-top:1px solid rgba(255,255,255,.07);gap:0;}
.proc-step:last-child{border-bottom:1px solid rgba(255,255,255,.07);}
.proc-num{font-family:var(--fd);font-size:13px;color:rgba(255,255,255,.65);letter-spacing:.06em;padding-top:3px;}
.proc-step h3,.proc-step h4{font-size:17px;font-weight:500;color:var(--white);margin-bottom:6px;letter-spacing:-.01em;}
.proc-step p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.78);font-weight:300;}
/* AUDIENCE CALLOUT */
    .audience-grid{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);margin-top:32px;}
.aud-card{background:var(--dark);padding:24px;border-left:3px solid transparent;transition:border-color .2s;}
.aud-card:hover{border-left-color:var(--accent);}
.aud-card h3,.aud-card h4{font-size:17px;font-weight:500;color:var(--white);margin-bottom:8px;letter-spacing:-.01em;}
.aud-card p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.78);font-weight:300;}
/* NEIGHBOURHOODS */
    .nbhd-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.nbhd-tag{padding:8px 16px;border:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.85);letter-spacing:.04em;transition:all .2s;}
.nbhd-tag:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85);}
/* FAQ */
    .faq-section{background:var(--white);padding:64px var(--cx);}
.faq-wrap{display:flex;flex-direction:column;gap:0;}
/* FOOTER */
    .site-footer{background:var(--black);border-top:1px solid rgba(255,255,255,.06);padding:32px var(--cx);}
.foot-inner{display:flex;flex-direction:column;gap:16px;}
/* BOTTOM BAR */
/* CONTACT FORM (homepage component) */
/* RESPONSIVE */
    @media(min-width:700px){
      :root{--cx:36px;}
      body{padding-bottom:0;}
      .ph-ctas{flex-direction:row;}
      .ph-ctas .btn{flex:none;}
      .stats-bar{overflow:visible;}
      .stats-bar-inner{min-width:0;}
      .stat-pill{flex:1;justify-content:center;}
      .why-grid{grid-template-columns:1fr 1fr;}
      .service-grid{display:grid;grid-template-columns:1fr 1fr;}
      .audience-grid{grid-template-columns:1fr 1fr 1fr;}
      .foot-inner{flex-direction:row;align-items:center;justify-content:space-between;}
      .bottom-bar{display:none;}
      .intro-two-col{flex-direction:row;gap:56px;align-items:start;}
      .intro-copy{flex:1.5;}
      .intro-aside{flex:1;}
      .contact-inner-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
      .form-row-2{flex-direction:row;}
      .form-row-2 .f-input{flex:1;}
    }
@media(min-width:1080px) {
:root{--cx:48px;}
.section{padding-top:100px;padding-bottom:100px;}
.faq-section{padding-top:100px;padding-bottom:100px;}
.contact{padding-top:100px;padding-bottom:100px;}
.site-header{height:72px;}
.site-header.scrolled{height:60px;}
.hdr-nav{display:flex;}
.hdr-phone{display:block;}
.hdr-quote{display:inline-flex;}
.hdr-call-pill{display:none;}
.burger{display:none;}
.why-grid{grid-template-columns:1fr 1fr 1fr;}
.contact-inner-wrap{gap:80px;}
.page-hero{min-height:min(75svh,650px);}
}
.nav-drawer{position:fixed;inset:0;z-index:800;background:var(--black);transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;padding:80px 28px 40px;overflow-y:auto;}
.intro-two-col{display:flex;flex-direction:column;gap:36px;}
/* CHECK LIST */
    .check-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);}
.check-item{background:var(--white);padding:20px 22px;display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;border-left:3px solid transparent;transition:border-color .2s;}
.check-item:hover{border-left-color:var(--black);}
.check-icon{width:20px;height:20px;color:var(--accent);flex-shrink:0;margin-top:1px;}
.check-item h3,.check-item h4{font-size:16px;font-weight:500;margin-bottom:4px;letter-spacing:-.01em;}
.check-item p{font-size:15px;line-height:1.6;color:var(--grey-dk);font-weight:300;}
/* WHY */
    .why-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:32px;}
/* RELATED / SERVICE MENU */
    .related{background:var(--dark);padding:56px var(--cx);}
.related-grid{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);margin-top:28px;}
.rel-card{background:var(--dark);padding:24px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-left:3px solid transparent;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent;}
.rel-card:hover{background:rgba(255,255,255,.04);border-left-color:var(--accent);}
.rel-icon{width:32px;height:32px;color:var(--accent);flex-shrink:0;}
.rel-body{flex:1;}
.rel-card h3,.rel-card h4{font-size:17px;font-weight:500;color:var(--white);margin-bottom:4px;letter-spacing:-.01em;}
.rel-card p{font-size:13px;color:rgba(255,255,255,.85);font-weight:300;}
.rel-arrow{width:30px;height:30px;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.70);flex-shrink:0;transition:all .2s;}
.rel-card:hover .rel-arrow{background:var(--accent);border-color:var(--accent);color:var(--black);}
/* CONTACT FORM */
    .contact{background:var(--black);padding:64px var(--cx);position:relative;overflow:hidden;}
.bottom-bar{position:fixed;inset:auto 0 0 0;z-index:950;display:grid;grid-template-columns:1fr 1fr;background:var(--black);border-top:1px solid rgba(255,255,255,.1);padding-bottom:var(--safe-b);}
@media(min-width:1080px) {
.related{padding-top:80px;padding-bottom:80px;}
.check-list{grid-template-columns:1fr 1fr 1fr;}
}

/* ============================================================================
   DESIGN REFINEMENTS — folded in from dorguard-smoother.css (2026-07-15)
   Permanent home for the "smoother" direction. Token values already updated
   in tokens.css (--radius 8px, --radius-card 12px, darker greys, lighter
   section bg). The rules below are the small global rules + new components.
   ============================================================================ */

/* --- A. Text contrast + labels ------------------------------------------- */
/* Eyebrow / kicker labels were faded grey — make them read as the brand red. */
.label { color: var(--accent); opacity: 1; font-weight: 500; letter-spacing: var(--tracking-label); }
/* Keep the light/neutral variant available on dark sections that want it. */
.label.lt { color: rgba(255,255,255,.72); }
/* Lift washed-out body text inside dark sections from ~50% to ~90% white. */
.hero p, .cred p, .strata p, .testimonials p, .contact p,
.site-footer p, .site-footer a { color: rgba(255,255,255,.90); }
/* Accessible red for eyebrows on near-black sections. */
.hero .label, .cred .label, .strata .label,
.testimonials .label, .contact .label { color:#ff5a72; }

/* --- B. Heading sizes: card titles should read as titles ----------------- */
.route-card h3, .door-card h3 { font-size:20px; line-height:1.2; }

/* --- C. Softer corners (apply the new radius tokens) --------------------- */
.btn, a.btn, button.btn, [class*="btn"]:not(.route-card),
.f-submit, button[type="submit"], .hdr-quote, .drawer-cta { border-radius: var(--radius); }
.route-card, [class*="card"], .faq-item, .decision-box,
.decision-aside, .faq-sidebar, .intro-aside { border-radius: var(--radius-card); }
.f-input, .f-select, select.f-input, textarea.f-input { border-radius: var(--radius); }
.route-card img, .strata-art, .strata img, .design-img { border-radius: var(--radius-card); }

/* --- D. Homepage section rhythm (fewer dark moments, calmer page) -------- */
.strata { background: var(--c-black); }              /* unify the two darks */
.process, .cities { background:#fafafa; }
.cred { background:#ffffff; }
.cred, .cred p, .cred h2, .cred h3, .cred .section-h2,
.cred .stat, .cred .stat *, .cred .stat-num, .cred .stat-num s { color:#202124; }
.cred .label { color: var(--accent); }
.cred .stat-lbl { color:#5a6068; }
.cred .stat-desc { color:#5a6068 !important; }
.cred::before { background:linear-gradient(90deg,transparent,rgba(196,18,48,.35),transparent); }
.cred .stats-grid, .cred .stats-grid-wrap { background:var(--border); border-color:var(--border); }
.cred .stat-cell { background:#ffffff; border-color:var(--border); }
.cred-intro { border-bottom-color:var(--border); }
.cred .cred-intro-cell { border-right-color:var(--border); }
.services { border-top: var(--hairline); }           /* separate the two white sections */

/* --- E. Visible form labels (paired with the markup retrofit) ------------ */
.f-label { display:block; font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:6px; }
.f-label .req { color:var(--accent); margin-left:2px; }
.f-field { margin-bottom:14px; }
.form-row-2 .f-field { flex:1; margin-bottom:0; }
/* "Add details / photo" expander */
.f-more { margin:4px 0 14px; }
.f-more > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:8px; font-size:14px; font-weight:500; color:rgba(255,255,255,.7);
  padding:8px 0; -webkit-tap-highlight-color:transparent; }
.f-more > summary::-webkit-details-marker { display:none; }
.f-more > summary::before { content:'+'; font-size:18px; line-height:1; color:var(--accent); }
.f-more[open] > summary::before { content:'–'; }
.f-more[open] > summary { margin-bottom:10px; }
.f-response-note { display:flex; align-items:flex-start; gap:12px; margin:0 0 6px; padding:14px 16px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--accent); border-radius:var(--radius); }
.f-response-note > svg { color:var(--accent); flex:0 0 auto; margin-top:1px; }
.f-response-note > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.f-response-note strong { color:var(--white); font-size:14px; font-weight:600; line-height:1.35; }
.f-response-note span { color:rgba(255,255,255,.78); font-size:13px; font-weight:300; line-height:1.5; }
.f-next { font-size:13px; line-height:1.6; color:rgba(255,255,255,.85); text-align:center;
  margin-top:10px; font-weight:300; }
.f-next strong { color:rgba(255,255,255,.85); font-weight:500; }

/* --- F. Text-us-a-photo / SMS button ------------------------------------- */
.btn-sms { background:rgba(255,255,255,.06); color:var(--white); border:1px solid rgba(255,255,255,.18); }
.btn-sms:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); }
.f-actions { display:flex; flex-direction:column; gap:10px; }
@media(min-width:520px){ .f-actions{ flex-direction:row; } .f-actions > * { flex:1; } }

/* --- G. Bottom-bar intent variants (Call · Text · Quote) ----------------- */
.bottom-bar.bb-3 { grid-template-columns:1fr 1fr 1fr; }
.bb-text { display:flex; align-items:center; justify-content:center; gap:8px; padding:17px 12px;
  color:var(--white); font-size:15px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.1); -webkit-tap-highlight-color:transparent; transition:background .15s; }
.bb-text:active { background:rgba(255,255,255,.06); }

/* --- H. Price-transparency strip ----------------------------------------- */
.price-strip { background:var(--c-black); color:var(--white); padding:20px var(--cx); }
.price-strip-inner { max-width:var(--cmax); margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px 18px; }
.price-strip .ps-label { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); }
.price-strip .ps-range { font-family:var(--fd); font-size:clamp(18px,3vw,24px); font-weight:700; color:var(--white); }
.price-strip .ps-note { font-size:14px; color:rgba(255,255,255,.85); font-weight:300; }
.price-strip .ps-link { font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:1px; margin-left:auto; white-space:nowrap; }
.price-strip .ps-link:hover { border-color:var(--accent); color:#ff5a72; }

/* --- I. Comparison table (belt vs chain vs jackshaft) -------------------- */
.compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:28px; border:1px solid var(--border); border-radius:var(--radius-card); }
.compare-table { width:100%; border-collapse:collapse; min-width:560px; font-size:15px; }
.compare-table th, .compare-table td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.compare-table thead th { background:var(--c-black); color:var(--white); font-family:var(--fd);
  font-size:15px; font-weight:600; letter-spacing:.02em; }
.compare-table thead th:first-child { background:var(--c-black); }
.compare-table tbody th { font-family:var(--fd); font-weight:700; color:var(--black); font-size:17px; white-space:nowrap; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom:none; }
.compare-table td { color:var(--grey-dk); font-weight:400; line-height:1.5; }
.compare-table .ct-price { font-family:var(--fd); font-weight:700; color:var(--black); }
.compare-table .ct-best { background:#fafafa; }

/* --- J. Owner block (photo + first-person intro) ------------------------- */
.owner-block { background:var(--white); padding:56px var(--cx); border-bottom:1px solid var(--border); }
.owner-inner { max-width:var(--cmax); margin:0 auto; display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.owner-photo { width:120px; height:120px; border-radius:var(--radius-pill); object-fit:cover; flex-shrink:0; border:3px solid var(--grey-bg); }
.owner-monogram { width:120px; height:120px; border-radius:var(--radius-pill); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--c-black); color:var(--white);
  font-family:var(--fd); font-size:52px; font-weight:700; border:3px solid var(--grey-bg); }
.owner-copy .label { margin-bottom:12px; }
.owner-copy h2 { font-size:clamp(24px,4vw,34px); font-weight:700; color:var(--black); margin-bottom:14px; letter-spacing:-.01em; }
.owner-copy p { font-size:17px; line-height:1.75; color:var(--grey-dk); font-weight:400; margin-bottom:14px; max-width:640px; }
.owner-sign { font-family:var(--fd); font-size:20px; font-weight:700; color:var(--black); }
.owner-badges { display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:8px; }
.owner-badges span { font-size:13px; color:var(--grey-dk); font-weight:500; background:var(--grey-bg);
  border:1px solid var(--border); padding:7px 13px; border-radius:var(--radius-pill); }
@media(min-width:700px){ .owner-inner{ flex-direction:row; align-items:center; } .owner-photo{ width:150px; height:150px; } }

/* --- K. Per-card quote CTA on door-style cards --------------------------- */
.door-card-link { display:flex; flex-direction:column; flex:1; color:inherit; }
.door-card-foot { padding:0 22px 22px; margin-top:auto; }
.door-card-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:13px 18px; background:var(--accent); color:var(--white); font-size:13px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-radius:var(--radius);
  transition:background .2s; -webkit-tap-highlight-color:transparent; cursor:pointer; border:none;
  font-family:var(--fb); }
.door-card-cta:hover { background:var(--accent-hover); }
.door-card-cta svg { flex-shrink:0; transition:transform .2s; }
.door-card-cta:hover svg { transform:translateX(3px); }

/* --- L. Call-first hero helpers (city/repair pages) --------------------- */
.btn-call-lg { background:var(--accent); color:var(--white); font-size:16px; padding:18px 26px; }
.btn-call-lg:hover { background:var(--accent-hover); }
.btn-call-lg .bcl-sub { display:block; font-size:11px; font-weight:400; letter-spacing:.04em;
  text-transform:none; opacity:.85; margin-top:2px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.85); margin-bottom:20px; }
.hero-badge .stars { color:var(--star); letter-spacing:1px; }

/* --- M. Style filter (garage-doors) ------------------------------------- */
.style-filter { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.style-filter button { font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--grey-dk);
  background:var(--white); border:1px solid var(--border); padding:9px 16px; border-radius:var(--radius-pill);
  cursor:pointer; transition:all .2s; }
.style-filter button:hover { border-color:var(--black); color:var(--black); }
.style-filter button.active { background:var(--black); color:var(--white); border-color:var(--black); }

/* --- N. Standalone / legal pages (privacy, terms, contact, resources) ----
   Previously these lived inline only in resources.php, so /privacy and
   /terms rendered unstyled heroes. Promoted to the global sheet. */
.res-hero { background:var(--black); padding:120px var(--cx) 80px; position:relative; overflow:hidden; }
.res-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 30%,transparent 100%); pointer-events:none; }
.res-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(165deg,rgba(14,14,14,.1) 0%,rgba(14,14,14,.55) 45%,rgba(14,14,14,.93) 78%,#0e0e0e 100%); pointer-events:none; }
.res-hero-inner { position:relative; z-index:10; max-width:760px; }
.res-hero-label { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:20px; }
.res-hero h1 { font-family:var(--fd); font-size:clamp(38px,7vw,72px); font-weight:500; color:var(--white); letter-spacing:-.02em; line-height:1.06; margin-bottom:20px; }
.res-hero h1 em { font-style:italic; font-weight:400; color:rgba(255,255,255,.85); }
.res-hero p { font-size:17px; line-height:1.75; color:rgba(255,255,255,.65); font-weight:300; max-width:560px; }
.res-section { padding:72px var(--cx); }
.res-section.grey { background:var(--grey-bg); }
.res-section.black { background:var(--black); }
.cta-band { background:var(--black); border-top:1px solid rgba(255,255,255,.06); padding:72px var(--cx); text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; font-family:var(--fd); font-size:clamp(80px,18vw,180px); font-weight:600; color:rgba(255,255,255,.02); letter-spacing:-.04em; top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; }
.cta-band-inner { position:relative; }
.cta-band h2 { font-family:var(--fd); font-size:clamp(30px,5vw,56px); font-weight:500; color:var(--white); letter-spacing:-.02em; margin-bottom:14px; }
.cta-band p { font-size:16px; color:rgba(255,255,255,.85); font-weight:300; margin-bottom:28px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.7; }
.cta-actions { display:flex; flex-direction:column; align-items:center; gap:10px; }
@media(min-width:700px){ .cta-actions{ flex-direction:row; justify-content:center; } .res-hero{ padding:140px var(--cx) 96px; } }