/*
Theme Name: Countertop Canada Co.
Theme URI: https://countertopcanada.ca
Author: Countertop Canada Co.
Author URI: https://countertopcanada.ca
Description: WordPress theme for Countertop Canada Co. — a countertop fabrication and installation company serving homeowners across Canada in quartz, granite, marble, porcelain and laminate. Head office in Mississauga, Ontario. Includes an interactive countertop material visualizer, province service pages, an editable Canada coverage map and full SEO/AEO/GEO structured data.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: countertopcanada
Tags: business, franchise, home-services, custom-menu, custom-logo, translation-ready
*/

/* =========================================================
   Palette : deep navy / warm gold / cream. Chosen to read as a
   premium stone showroom and to stay deliberately distinct from
   any red/blue branding. Variable names are kept from the base
   architecture so every rule keeps working; only values changed.
   All four core colours are overridable in the Customizer.
   Navy #16324F · Gold #C9A227 · Cream #F7F4EC
   Type    : Fraunces (display) · Manrope (text) · IBM Plex Mono
   ========================================================= */
:root{
  --paper:#F7F4EC; --paper-2:#EFE9DB; --chalk:#FFFFFF;
  --ink:#1B2430; --ink-60:#5A6472;
  --spruce:#16324F; --spruce-deep:#0E2438; --spruce-light:#2C5C88;
  --brass:#C9A227; --brass-light:#E0BC49;
  --sage:#A7B39F; --oak-dark:#0E2438;
  --line:rgba(27,36,48,.14); --line-light:rgba(255,255,255,.22);
  --r-sm:6px; --r-md:14px; --r-lg:26px;
  --pad:clamp(20px,5vw,72px); --maxw:1220px;
  --shadow-sm:0 1px 2px rgba(14,36,56,.05),0 6px 18px rgba(14,36,56,.08);
  --shadow-md:0 14px 48px rgba(14,36,56,.16);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{font-family:"Fraunces","Manrope",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.008em;margin:0;font-optical-sizing:auto;}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem);}
h2{font-size:clamp(1.8rem,3.5vw,2.9rem);}
h3{font-size:clamp(1.08rem,1.7vw,1.36rem);letter-spacing:-.012em;}
p{margin:0 0 1em;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:4px;}

.spec{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none;}
.lede{font-size:clamp(1.01rem,1.3vw,1.16rem);color:var(--ink-60);max-width:58ch;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.section{padding:clamp(56px,8vw,110px) 0;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:2px;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.94rem;padding:14px 26px;border-radius:var(--r-sm);border:1.5px solid transparent;text-decoration:none;cursor:pointer;font-family:inherit;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--brass);color:var(--spruce-deep);border-color:var(--brass);box-shadow:0 6px 18px rgba(201,162,39,.28);}
.btn-primary:hover{background:var(--brass-light);border-color:var(--brass-light);box-shadow:0 10px 26px rgba(201,162,39,.36);}
.btn-dark{background:var(--spruce);color:#F3EFE4;border-color:var(--spruce);}
.btn-dark:hover{background:var(--spruce-light);border-color:var(--spruce-light);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost-light{background:transparent;color:#F3EFE4;border-color:var(--line-light);}
.btn-ghost-light:hover{border-color:#F3EFE4;}
.btn-lg{padding:17px 32px;font-size:1rem;}
.btn-block{width:100%;}

/* topbar + header */
html,body{overflow-x:hidden;max-width:100%;}

.topbar{background:var(--spruce-deep);color:#D8D2C7;font-size:.78rem;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:8px;padding-bottom:8px;}
.topbar a{text-decoration:none;color:#D8D2C7;}
.topbar a:hover{color:#fff;}
.topbar-left{display:flex;align-items:center;gap:8px;min-width:0;}
.topbar-left span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.maple{color:var(--brass);flex:none;}
.topbar-right{display:flex;align-items:center;gap:20px;flex:none;white-space:nowrap;}
.lang b{color:#fff;}

/* Sticky header — stays put, never scrolls away */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(244,245,241,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(12px,1.6vw,26px);
  padding-top:11px;padding-bottom:11px;
  min-height:64px;
}

/* Logo — single line, no tagline */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;margin-right:auto;min-width:0;}
.logo img{max-height:44px;width:auto;}
.logo-mark{width:34px;height:34px;border-radius:6px;flex:none;background:var(--spruce);position:relative;overflow:hidden;}
.logo-mark::before{content:"";position:absolute;left:0;top:0;bottom:0;width:42%;background:var(--brass);opacity:.9;}
.logo-mark::after{content:"";position:absolute;inset:7px;border:1.5px solid var(--brass);border-radius:2px;}
.logo-txt{line-height:1.1;min-width:0;}
.logo-txt b{
  font-family:"Fraunces",Arial,sans-serif;
  font-size:clamp(.95rem,1.2vw,1.08rem);
  letter-spacing:-.03em;display:block;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Nav — forced to one line */
.main-nav{flex:0 1 auto;min-width:0;}
.main-nav ul{
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(12px,1.5vw,24px);
  list-style:none;margin:0;padding:0;
}
.main-nav li{position:relative;flex:none;}
.main-nav a{
  text-decoration:none;
  font-size:clamp(.82rem,1.05vw,.92rem);
  font-weight:500;color:var(--ink);
  padding:8px 0;border-bottom:1.5px solid transparent;
  display:block;white-space:nowrap;
}
.main-nav a:hover{border-bottom-color:var(--brass);}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a,
.main-nav .current-menu-ancestor > a{border-bottom-color:var(--spruce);}
.main-nav .menu-item-has-children > a::after{content:"\25BE";font-size:.62em;margin-left:5px;opacity:.55;}

.main-nav .sub-menu{
  display:none;position:absolute;top:100%;left:-14px;
  background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 0;min-width:264px;box-shadow:var(--shadow-md);
  flex-direction:column;gap:0;z-index:70;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{display:flex;}
.main-nav .sub-menu li{width:100%;}
.main-nav .sub-menu a{padding:10px 18px;border-bottom:none;font-size:.88rem;white-space:normal;}
.main-nav .sub-menu a:hover{background:var(--paper-2);}

.nav-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto;white-space:nowrap;}
.nav-phone{font-family:"IBM Plex Mono",monospace;font-size:.8rem;text-decoration:none;font-weight:500;white-space:nowrap;color:var(--ink);}

.burger{
  display:none;background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 10px;cursor:pointer;order:-1;flex:none;
}
.burger span{display:block;width:18px;height:1.8px;background:var(--ink);margin:4px 0;transition:transform .25s ease,opacity .2s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Drawer-only elements are hard-hidden on desktop */
.nav-mobile-extra{display:none !important;}
.nav-overlay{display:none;}

/* Progressive tightening before collapse */
@media (max-width:1340px){
  .nav-phone{display:none;}
}
@media (max-width:1180px){
  .site-header .wrap{gap:14px;}
  .main-nav ul{gap:13px;}
  .main-nav a{font-size:.83rem;}
}

/* Collapse to drawer */
@media (max-width:1080px){
  .burger{display:block;}
  .site-header .wrap{gap:12px;}

  .main-nav{
    position:fixed;top:0;left:0;bottom:0;
    width:min(360px,86vw);
    background:var(--paper);
    padding:80px 26px 34px;
    border-right:1px solid var(--line);
    transform:translateX(-102%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:75;overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:8px 0 40px rgba(14,36,56,.14);
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;align-items:stretch;flex-wrap:wrap;gap:0;width:100%;}
  .main-nav li{width:100%;}
  .main-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.02rem;white-space:normal;}
  .main-nav .menu-item-has-children > a::after{float:right;}
  .main-nav .sub-menu{
    display:flex;position:static;border:none;box-shadow:none;
    padding:0 0 8px 14px;background:transparent;min-width:0;
  }
  .main-nav .sub-menu a{font-size:.92rem;padding:11px 0;border-bottom:1px dashed var(--line);}

  .nav-mobile-extra{display:block !important;margin-top:26px;}
  .nav-mobile-phone{
    display:block;text-align:center;margin-top:14px;
    font-family:"IBM Plex Mono",monospace;font-size:.9rem;
    text-decoration:none;color:var(--spruce);font-weight:600;
  }

  .nav-overlay{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(14,36,56,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .nav-overlay.show{opacity:1;pointer-events:auto;}
  body.nav-open{overflow:hidden;}
}

@media (max-width:760px){
  .topbar .wrap{justify-content:center;}
  .topbar-left{display:none;}
  .topbar-right{gap:16px;}
}
@media (max-width:620px){
  .hide-s{display:none;}
  .site-header .wrap{padding-top:9px;padding-bottom:9px;min-height:58px;}
  .nav-cta .btn{padding:10px 14px;font-size:.8rem;}
  .logo-mark{width:30px;height:30px;}
}
@media (max-width:440px){
  .nav-cta .btn{padding:9px 11px;font-size:.75rem;}
  .logo-txt b{font-size:.88rem;}
}

/* hero */
.hero{background:radial-gradient(1100px 520px at 12% -8%,rgba(143,169,196,.30),transparent 62%),var(--paper);padding:clamp(44px,6vw,84px) 0;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,64px);align-items:center;}
.hero h1 em{font-style:normal;color:var(--spruce);position:relative;}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.15em;background:var(--brass);opacity:.32;border-radius:2px;}
.hero .lede{margin-top:22px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.hero-badges div{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--ink-60);}
.tick{color:var(--spruce);font-weight:700;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}.hero-visual{order:-1;}}

/* CSS countertop + before/after slider */
.compare{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3.05;background:var(--oak-dark);user-select:none;touch-action:none;}
.compare-pane{position:absolute;inset:0;}
.kitchen{position:absolute;inset:0;display:grid;grid-template-rows:1fr 15% 1fr;padding:7%;}
.k-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.k-counter{background:#DAD6CC;border-radius:2px;margin:6px 0;}
.door{border-radius:2px;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.door::after{content:"";position:absolute;inset:13%;border-radius:1px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.13),inset 0 2px 5px rgba(0,0,0,.10);}
.door::before{content:"";position:absolute;right:9%;top:46%;width:15%;height:4.5%;border-radius:3px;background:var(--brass);opacity:.9;}
.compare-pane.before{background:linear-gradient(160deg,#5E4527,#3E2D19);}
.compare-pane.before .door{background:linear-gradient(150deg,#A57C4B,#7E5C33);}
.compare-pane.before .k-counter{background:#8E8778;}
.compare-pane.after{background:linear-gradient(160deg,#EDEFEA,#D9DED6);clip-path:inset(0 0 0 50%);}
.compare-pane.after .door{background:linear-gradient(150deg,#27584B,#1B3D34);}
.compare-pane.after .k-row.top .door{background:linear-gradient(150deg,#FBFCFA,#E7EAE4);}
.compare-pane.after .k-counter{background:#F2F2EE;}
.compare-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compare-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.14);z-index:3;}
.compare-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.85rem;color:var(--spruce);font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.22);}
.compare-tag{position:absolute;bottom:16px;z-index:4;padding:6px 11px;border-radius:var(--r-sm);backdrop-filter:blur(4px);}
.compare-tag.l{left:16px;background:rgba(14,36,56,.8);color:#fff;}
.compare-tag.r{right:16px;background:rgba(255,255,255,.9);color:var(--spruce);}
.compare-hint{text-align:center;margin-top:12px;color:var(--ink-60);}

/* stat band */
.statband{background:var(--spruce);color:#ECE6D8;}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:44px;padding-bottom:44px;gap:26px;}
.stat b{display:block;font-family:"Fraunces",Arial,sans-serif;font-size:clamp(1.9rem,3.1vw,2.7rem);color:#fff;line-height:1;letter-spacing:-.03em;}
.stat span{display:block;margin-top:9px;color:#8CA3BE;}
@media (max-width:760px){.statband .wrap{grid-template-columns:repeat(2,1fr);gap:30px 20px;}}

/* section head */
.sec-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:44px;}
.sec-head .lede{margin-top:16px;margin-bottom:0;}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;}}

/* services chips */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.chip{background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;color:inherit;}
.chip:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.chip-swatch{height:130px;position:relative;display:flex;align-items:flex-end;padding:14px;}
.chip-swatch-other{align-items:flex-end;justify-content:flex-start;}
.chip-plus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Fraunces",serif;font-size:2.6rem;line-height:1;color:var(--brass);opacity:.9;}
.chip-other .spec{color:#ECE6D8;}
.chip-other .chip-link{color:var(--brass);}
.chip-swatch .spec{color:rgba(255,255,255,.86);}
.chip-body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column;}
.chip-body p{color:var(--ink-60);font-size:.93rem;margin:10px 0 18px;}
.chip-link{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--spruce);display:inline-flex;align-items:center;gap:7px;transition:gap .18s ease;}
.chip:hover .chip-link{gap:12px;}
.sw-01{background:linear-gradient(145deg,#2E5A4E,#16352C);}
.sw-02{background:linear-gradient(145deg,#F0EDE4,#D8D3C4);}
.sw-02 .spec{color:rgba(20,23,26,.6);}
.sw-03{background:linear-gradient(145deg,#B8794F,#8E5733);}
.sw-04{background:linear-gradient(145deg,#606A70,#3B4247);}
.sw-05{background:linear-gradient(145deg,#C8AE86,#A4835A);}
.sw-05 .spec{color:rgba(20,23,26,.62);}
.sw-06{background:linear-gradient(145deg,#D8A44A,#A8761F);}
@media (max-width:960px){.chips{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.chips{grid-template-columns:1fr;}}

/* process */
.tinted{background:var(--paper-2);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
.step{padding:34px 30px 34px 0;border-right:1px solid var(--line);}
.step:last-child{border-right:none;padding-right:0;}
.step:not(:first-child){padding-left:30px;}
.step .num{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--brass);letter-spacing:.18em;margin-bottom:16px;display:block;}
.step p{color:var(--ink-60);font-size:.95rem;margin:12px 0 0;}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;}
  .step{border-right:none;border-bottom:1px solid var(--line);padding:26px 0;}
  .step:not(:first-child){padding-left:0;}
  .step:last-child{border-bottom:none;}
}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.gitem{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--chalk);}
.gitem .kitchen{position:relative;inset:auto;aspect-ratio:1/.86;padding:9%;}
.gitem-cap{padding:14px 16px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.gitem-cap .spec{color:var(--ink-60);}
.gitem-cap b{font-size:.9rem;}
.g1{background:#E9EBE5;} .g1 .door{background:linear-gradient(150deg,#FBFCFA,#E4E7E0);} .g1 .k-counter{background:#DAD6CC;}
.g2{background:#E4E7E7;} .g2 .door{background:linear-gradient(150deg,#4C5C66,#32424B);} .g2 .k-counter{background:#EDEDE9;}
.g3{background:#EDEAE3;} .g3 .door{background:linear-gradient(150deg,#2C5C88,#1A3B32);} .g3 .k-counter{background:#E8E5DC;}
.g4{background:#EEEAE4;} .g4 .door{background:linear-gradient(150deg,#1F3550,#132339);} .g4 .k-counter{background:#EFEDE7;}
@media (max-width:1000px){.gallery{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gallery{grid-template-columns:1fr;}}

/* promise */
.promise{background:var(--spruce-deep);color:#ECE6D8;}
.promise h2,.promise h3{color:#fff;}
.promise .lede{color:#8CA3BE;}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--r-md);overflow:hidden;}
.pcard{background:var(--spruce-deep);padding:30px 28px;}
.pcard .spec{
  display:inline-flex;align-items:center;margin-bottom:14px;
  background:var(--brass);color:#fff;
  padding:5px 12px 4px;border-radius:100px;
  box-shadow:0 2px 8px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.16);
}
.pcard h3{font-size:1.05rem;}
.pcard p{color:#8CA3BE;font-size:.92rem;margin:9px 0 0;}
@media (max-width:900px){.promise-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.promise-grid{grid-template-columns:1fr;}}

/* coverage */
.coverage-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,58px);align-items:start;}
.prov-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.prov{background:var(--chalk);padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.prov b{font-size:.92rem;font-weight:600;}
.pill{font-family:"IBM Plex Mono",monospace;font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:100px;white-space:nowrap;}
.pill.live{background:rgba(44,92,136,.1);color:var(--spruce);}
.pill.open{background:rgba(201,162,39,.14);color:#A50D14;}
.coverage-note{margin-top:22px;padding:20px 22px;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line);}
@media (max-width:900px){.coverage-grid{grid-template-columns:1fr;}}
@media (max-width:480px){.prov-list{grid-template-columns:1fr;}}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.review{background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px;display:flex;flex-direction:column;}
.stars{color:var(--brass);letter-spacing:2px;margin-bottom:14px;}
.review q{quotes:none;font-size:1.01rem;line-height:1.55;}
.review-by{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px;}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;background:var(--sage);display:grid;place-items:center;font-weight:700;color:var(--spruce-deep);font-size:.9rem;}
.review-by small{display:block;color:var(--ink-60);font-size:.8rem;}
@media (max-width:960px){.reviews{grid-template-columns:1fr;}}

/* franchise band */
.fband{background:linear-gradient(150deg,var(--spruce-deep),var(--spruce));color:#ECE6D8;}
.fband-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,62px);align-items:center;}
.fband h2{color:#fff;}
.fband p{color:#BDB4A0;}
.fstats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--r-md);overflow:hidden;}
.fstat{background:rgba(255,255,255,.03);padding:26px 24px;}
.fstat b{display:block;font-family:"Fraunces",Arial,sans-serif;font-size:1.85rem;color:#fff;line-height:1;letter-spacing:-.03em;}
.fstat span{display:block;margin-top:8px;color:#8FA9C4;font-size:.85rem;}
@media (max-width:900px){.fband-grid{grid-template-columns:1fr;}}

/* forms */
.formcard{background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-sm);}
.formcard h3{margin-bottom:6px;}
.formcard .hint{color:var(--ink-60);font-size:.88rem;margin-bottom:22px;}
.field{margin-bottom:15px;}
.field label{display:block;font-size:.76rem;font-weight:600;margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;font:inherit;font-size:.94rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--spruce);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.form-legal{font-size:.74rem;color:var(--ink-60);margin:14px 0 0;line-height:1.5;}
.form-msg{margin-top:16px;padding:13px 15px;border-radius:var(--r-sm);background:rgba(44,92,136,.09);border:1px solid rgba(44,92,136,.25);color:var(--spruce);font-size:.9rem;}
.form-msg.error{background:rgba(180,64,47,.08);border-color:rgba(180,64,47,.3);color:#8E2E20;}
.hp-field{position:absolute!important;left:-9999px;}
@media (max-width:480px){.field-row{grid-template-columns:1fr;}}

/* faq */
.faq{max-width:880px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);padding:4px 0;}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-family:"Fraunces",Arial,sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.012em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--brass);font-weight:400;line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{color:var(--ink-60);font-size:.95rem;padding-right:40px;margin:0 0 20px;}

/* footer */
.site-footer{background:var(--spruce-deep);color:#8FA9C4;padding:clamp(50px,6vw,78px) 0 0;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:42px;}
.site-footer h4,.site-footer .widget-title{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-family:"IBM Plex Mono",monospace;font-weight:500;margin-bottom:16px;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:10px;}
.site-footer a{text-decoration:none;font-size:.89rem;color:#8FA9C4;}
.site-footer a:hover{color:#fff;}
.foot-brand p{max-width:34ch;font-size:.89rem;margin-top:16px;}
.foot-logo .logo-txt b{color:#fff;}
.foot-logo .logo-txt span{color:#7791AE;}
.newsletter{display:flex;gap:8px;margin-top:18px;max-width:340px;}
.newsletter input{flex:1;padding:12px 13px;font:inherit;font-size:.88rem;background:rgba(255,255,255,.06);border:1px solid var(--line-light);border-radius:var(--r-sm);color:#fff;}
.newsletter input::placeholder{color:#7791AE;}
.foot-bottom{border-top:1px solid var(--line-light);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:.78rem;}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:20px;}
.foot-bottom li{margin:0;}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr;}}

/* mobile sticky cta */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--chalk);border-top:1px solid var(--line);padding:10px 14px;gap:10px;box-shadow:0 -6px 24px rgba(14,36,56,.10);}
.mobile-cta .btn{flex:1;padding:13px 10px;font-size:.88rem;}
@media (max-width:760px){.mobile-cta{display:flex;}body{padding-bottom:74px;}}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

/* page head */
.pagehead{background:linear-gradient(150deg,var(--spruce-deep),var(--spruce));color:#ECE6D8;padding:clamp(54px,7vw,94px) 0;}
.pagehead h1{color:#fff;max-width:19ch;}
.pagehead .lede{color:#BDB4A0;margin-top:22px;}
.crumbs{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:#7791AE;margin-bottom:24px;}
.crumbs a{color:#7791AE;text-decoration:none;}
.crumbs a:hover{color:#fff;}

/* ladder / tables */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,62px);align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}
.ladder{border-top:1px solid var(--line);}
.rung{display:grid;grid-template-columns:86px 1fr 1.2fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;}
.rung .num{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--brass);letter-spacing:.14em;padding-top:5px;}
.rung p{color:var(--ink-60);font-size:.94rem;margin:0;}
@media (max-width:760px){.rung{grid-template-columns:1fr;gap:8px;}}
.tablecard{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--chalk);overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;}
table.data th{text-align:left;background:var(--paper-2);padding:14px 18px;font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-60);border-bottom:1px solid var(--line);}
table.data td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;}
table.data tr:last-child td{border-bottom:none;}
.callout{border-left:3px solid var(--brass);background:var(--paper-2);padding:20px 24px;border-radius:0 var(--r-md) var(--r-md) 0;font-size:.93rem;color:var(--ink-60);}
.tag-note{font-size:.78rem;color:var(--ink-60);margin-top:14px;}

/* editor / blog content */
.entry-content{max-width:74ch;}
.entry-content h2,.entry-content h3{margin-top:1.6em;margin-bottom:.5em;}
.entry-content ul,.entry-content ol{padding-left:1.3em;}
.entry-content img{border-radius:var(--r-md);margin:1.4em 0;}
.entry-content blockquote{border-left:3px solid var(--brass);padding-left:20px;margin-left:0;color:var(--ink-60);font-style:italic;}
.post-card{background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.post-card .pc-body{padding:24px;}
.post-card h3{margin-bottom:10px;}
.post-card a{text-decoration:none;color:inherit;}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:960px){.post-grid{grid-template-columns:1fr;}}
.pagination{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap;}
.pagination .page-numbers{padding:9px 15px;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);}
.pagination .current{background:var(--spruce);color:#fff;border-color:var(--spruce);}

/* =========================================================
   SERVICE PAGES
   ========================================================= */
.service-head{background:linear-gradient(150deg,var(--spruce-deep),var(--svc,var(--spruce)));}
.service-head-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;}
.service-head h1{max-width:15ch;}
.head-region{font-size:.5em;font-weight:600;color:var(--brass);letter-spacing:-.01em;}
.head-sub{font-size:1.1rem;color:#fff;margin:16px 0 0;font-weight:500;}
.service-head .lede{margin-top:14px;}
@media (max-width:900px){.service-head-grid{grid-template-columns:1fr;}}

.answer-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,3vw,44px);align-items:start;}
@media (max-width:900px){.answer-grid{grid-template-columns:1fr;}}
.answer-card{background:var(--chalk);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:var(--r-md);padding:clamp(24px,3vw,36px);}
.answer-card h2{font-size:clamp(1.35rem,2.2vw,1.85rem);margin-bottom:14px;}
.answer-body{font-size:1.08rem;line-height:1.62;color:var(--ink);margin-bottom:0;}
.fact-list{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line);}
.fact-list li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font-size:.93rem;color:var(--ink-60);position:relative;}
.fact-list li::before{content:"";position:absolute;left:4px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--brass);}
.fact-list li:last-child{border-bottom:none;}
.glance table.data td:first-child{color:var(--ink-60);width:45%;}

.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.benefit{background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;}
.benefit .spec{color:var(--brass);display:block;margin-bottom:12px;}
.benefit h3{font-size:1.05rem;margin-bottom:8px;}
.benefit p{color:var(--ink-60);font-size:.92rem;margin:0;}
@media (max-width:960px){.benefit-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.benefit-grid{grid-template-columns:1fr;}}

.service-content{max-width:70ch;margin:0 auto;}
.service-content h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-top:1.8em;}
.service-content h2:first-child{margin-top:0;}

/* ---- service card image support ---- */
.chip-swatch{overflow:hidden;position:relative;}
.chip-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .5s ease;
}
.chip:hover .chip-img{transform:scale(1.05);}
.chip-swatch.has-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,20,17,.72) 0%,rgba(10,20,17,.28) 42%,rgba(10,20,17,0) 72%);
  z-index:1;
}
.chip-swatch .spec{position:relative;z-index:2;color:rgba(255,255,255,.92);}
.chip-swatch.has-img .spec{text-shadow:0 1px 8px rgba(0,0,0,.55);}
.chip-price{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-60);
  display:block;margin-bottom:12px;letter-spacing:.04em;
}
.chip-body h3{margin-bottom:2px;}

/* =========================================================
   AREA CHIPS (GEO)
   ========================================================= */
.area-cloud{display:flex;flex-wrap:wrap;gap:8px;}
.area-chip{
  font-size:.83rem;padding:7px 13px;border-radius:100px;
  background:var(--chalk);border:1px solid var(--line);color:var(--ink-60);
}
.area-chip.live{background:rgba(44,92,136,.08);border-color:rgba(44,92,136,.2);color:var(--spruce);font-weight:500;}
.cov-title{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--ink-60);margin-bottom:12px;}

/* =========================================================
   GALLERY / RECENT TRANSFORMATIONS
   ========================================================= */
.gitem{
  display:block;text-decoration:none;color:inherit;
  background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;
}
a.gitem:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.gitem-img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);}
.gitem-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
a.gitem:hover .gitem-img img{transform:scale(1.05);}
.gitem .kitchen{position:relative;inset:auto;aspect-ratio:4/3;padding:9%;}
.gitem-cap{
  padding:15px 17px 17px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:10px;border-top:1px solid var(--line);
}
.gitem-cap b{font-size:.94rem;display:block;}
.gitem-cap .spec{color:var(--ink-60);flex:none;padding-top:2px;}
.gitem-svc{display:block;color:var(--ink-60);font-size:.76rem;margin-top:3px;}

.filter-bar{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px;}
.filter-chip{
  font:inherit;font-size:.84rem;padding:9px 16px;border-radius:100px;cursor:pointer;
  background:var(--chalk);border:1px solid var(--line);color:var(--ink-60);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.filter-chip:hover{border-color:var(--ink);color:var(--ink);}
.filter-chip.active{background:var(--spruce);border-color:var(--spruce);color:#fff;}
.gitem.is-hidden{display:none;}

/* =========================================================
   APPLICATION FORM
   ========================================================= */
.apply-band{background:var(--paper-2);}
.apply-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,60px);align-items:start;}
@media (max-width:960px){.apply-grid{grid-template-columns:1fr;}}
.req{color:var(--brass);}

.upload-zone{
  position:relative;border:1.5px dashed var(--line);border-radius:var(--r-md);
  background:var(--paper);padding:26px 20px;text-align:center;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--brass);background:rgba(201,162,39,.05);}
.upload-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.upload-label b{display:block;font-size:.94rem;margin-bottom:4px;}
.upload-label small{color:var(--ink-60);font-size:.8rem;}
.upload-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.upload-thumb{
  display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--ink-60);
  background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:5px 12px;
}
.upload-thumb img{width:22px;height:22px;border-radius:50%;object-fit:cover;}
.upload-hint{display:block;font-size:.76rem;color:var(--ink-60);margin-top:8px;line-height:1.5;}
.fband .formcard{background:var(--chalk);}

/* =========================================================
   FRANCHISE PAGE
   ========================================================= */
.franchise-head{background:linear-gradient(140deg,var(--spruce-deep) 0%,var(--spruce) 62%,var(--spruce-light) 100%);}
.franchise-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;}
@media (max-width:900px){.franchise-hero-grid{grid-template-columns:1fr;}}
.franchise-quickstats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--r-md);overflow:hidden;
}
.franchise-quickstats > div{background:rgba(255,255,255,.05);padding:24px 22px;}
.franchise-quickstats b{display:block;font-family:"Fraunces",Arial,sans-serif;font-size:1.65rem;color:#fff;line-height:1;letter-spacing:-.03em;}
.franchise-quickstats span{display:block;margin-top:8px;color:#8FA9C4;font-size:.82rem;}
.terr-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.terr-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.terr-grid{grid-template-columns:1fr;}}

/* =========================================================
   CANADA COVERAGE MAP + BLINKING PINS
   ========================================================= */
.coverage-section .coverage-grid{align-items:center;}
.canada-map{position:relative;width:100%;aspect-ratio:1000/620;}
.canada-map-svg{width:100%;height:100%;display:block;overflow:visible;}
.cmap-land{fill:var(--spruce);}
.cmap-bay{fill:var(--paper);}
.tinted .cmap-bay{fill:var(--paper-2);}

.map-pin{position:absolute;transform:translate(-50%,-50%);cursor:default;}
.map-pin .pin-dot{
  display:block;width:13px;height:13px;border-radius:50%;
  background:var(--brass);border:2px solid var(--paper);
  box-shadow:0 0 0 0 rgba(201,162,39,.55);
  position:relative;z-index:2;
}
.map-pin.live .pin-dot{background:#C9A227;animation:ctc-ping 2s infinite;}
.map-pin.soon .pin-dot{background:var(--spruce-light);animation:ctc-ping-amber 2.4s infinite;}

@keyframes ctc-ping{
  0%{box-shadow:0 0 0 0 rgba(201,162,39,.55);}
  70%{box-shadow:0 0 0 12px rgba(201,162,39,0);}
  100%{box-shadow:0 0 0 0 rgba(201,162,39,0);}
}
@keyframes ctc-ping-amber{
  0%{box-shadow:0 0 0 0 rgba(44,92,136,.5);}
  70%{box-shadow:0 0 0 11px rgba(44,92,136,0);}
  100%{box-shadow:0 0 0 0 rgba(44,92,136,0);}
}
@media (prefers-reduced-motion:reduce){
  .map-pin.live .pin-dot,.map-pin.soon .pin-dot{animation:none;}
}

.map-pin .pin-label{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:#fff;font-size:.72rem;white-space:nowrap;
  padding:5px 9px;border-radius:6px;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;z-index:5;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.02em;
}
.map-pin .pin-label::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);}
.map-pin:hover .pin-label,.map-pin:focus .pin-label,.map-pin:focus-within .pin-label{opacity:1;transform:translateX(-50%) translateY(0);}

.map-legend{position:absolute;bottom:2%;right:2%;display:flex;gap:14px;background:rgba(244,245,241,.9);border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:.76rem;}
.tinted .map-legend{background:rgba(255,255,255,.9);}
.map-legend .leg{display:flex;align-items:center;gap:6px;color:var(--ink-60);}
.map-legend .leg i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.map-legend .live i{background:#C9A227;}
.map-legend .soon i{background:var(--brass);}
.map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-60);font-size:.85rem;padding:20px;}

/* =========================================================
   FRANCHISE BAND IMAGE
   ========================================================= */
.fband-grid{align-items:center;}
.fimage{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.fimage img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;}
.fimage-placeholder{
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 12px,transparent 12px,transparent 24px);
  border:1.5px dashed rgba(255,255,255,.28);border-radius:var(--r-lg);text-align:center;padding:24px;
}
.fimage-placeholder .spec{color:rgba(255,255,255,.85);}
.fimage-placeholder small{color:rgba(255,255,255,.55);font-size:.78rem;max-width:220px;}
.province-hero-img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-md);aspect-ratio:4/3;object-fit:cover;}

/* =========================================================
   SERVING CANADA — provinces
   ========================================================= */
.province-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.province-card{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;
  background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 18px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.province-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brass);}
.province-abbr{font-family:"IBM Plex Mono",monospace;font-size:1.3rem;font-weight:600;color:var(--spruce);letter-spacing:.02em;}
.province-name{font-family:"Fraunces",Arial,sans-serif;font-size:.98rem;color:var(--ink);line-height:1.15;}
.province-av{font-size:.74rem;color:var(--ink-60);margin-top:auto;padding-top:6px;}
@media (max-width:1000px){.province-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:620px){.province-grid{grid-template-columns:repeat(2,1fr);}}

/* form field optional label */
.field .opt{font-weight:400;color:var(--ink-60);font-size:.82em;}
.formcard .field{margin-bottom:14px;}
.formcard .field-row{gap:14px;}

/* provider services checkboxes */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:6px;}
.check{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;color:var(--ink);line-height:1.4;cursor:pointer;}
.check input{margin-top:3px;flex:none;}
@media (max-width:520px){.check-grid{grid-template-columns:1fr;}}

/* custom uploaded image in the Where We Work block */
.canada-map.has-custom-img{aspect-ratio:auto;}
.canada-map-img{width:100%;height:auto;display:block;border-radius:var(--r-lg);box-shadow:var(--shadow-md);}

/* footer: provinces list + head office */
.foot-provinces{columns:2;column-gap:18px;}
.foot-provinces li{break-inside:avoid;}
.foot-office{font-size:.86rem;color:rgba(255,255,255,.72);margin-top:14px;}
.foot-office b{color:#fff;font-weight:600;}
@media (max-width:620px){.foot-provinces{columns:2;}}

/* =========================================================
   KITCHEN COLOUR VISUALIZER
   ========================================================= */
.visualizer{
  display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;
  background:var(--chalk);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);
}
.viz-stage{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--paper-2);min-height:280px;
  display:flex;align-items:center;justify-content:center;
}
.viz-stage.is-drag{outline:2.5px dashed var(--brass);outline-offset:-8px;}
.viz-stage canvas{width:100%;height:auto;display:block;cursor:crosshair;}
.visualizer:not(.has-image) .viz-stage canvas{visibility:hidden;height:340px;}

/* upload dropzone shown before a photo is loaded */
.viz-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;cursor:pointer;border-radius:var(--r-md);
  border:2px dashed var(--line);background:var(--paper);
  transition:border-color .16s ease,background .16s ease;
}
.viz-empty:hover,.viz-stage.is-drag .viz-empty{border-color:var(--brass);background:var(--chalk);}
.visualizer.has-image .viz-empty{display:none;}
.viz-empty-inner{max-width:400px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.viz-drop-ico{
  width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--spruce);color:#fff;margin-bottom:16px;
}
.viz-drop-ico svg{width:30px;height:30px;}
.viz-empty-inner b{
  font-family:"Fraunces",Arial,sans-serif;font-size:1.12rem;
  color:var(--ink);margin-bottom:5px;
}
.viz-empty-inner small{color:var(--ink-60);font-size:.85rem;line-height:1.45;}
.viz-empty-note{
  display:block;margin-top:10px;font-size:.76rem;color:var(--ink-60);
  background:var(--paper-2);padding:6px 12px;border-radius:100px;
}
.viz-empty-or{
  display:block;margin:16px 0 10px;font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);
}
.viz-empty .btn{cursor:pointer;}

.viz-panel{display:flex;flex-direction:column;gap:16px;}
.viz-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.viz-swatch{
  padding:0;border:2px solid transparent;background:none;border-radius:8px;
  cursor:pointer;aspect-ratio:1;transition:border-color .15s ease,transform .15s ease;
}
.viz-swatch span{display:block;width:100%;height:100%;border-radius:6px;border:1px solid var(--line);}
.viz-swatch:hover{transform:scale(1.07);}
.viz-swatch.is-active{border-color:var(--brass);}

/* Countertop TYPE chooser (Quartz, Granite, Marble, Laminate, Porcelain, Other) */
.viz-choose-label{color:var(--ink-60);margin:4px 0 10px;}
.viz-types{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:10px;margin:0 0 14px !important;}
.visualizer.is-compact .viz-types{grid-template-columns:repeat(3,1fr) !important;}
.viz-panel .viz-hint{clear:both;margin:2px 0 14px;}
.viz-type{aspect-ratio:auto;padding:10px 8px 12px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--chalk);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;}
.viz-type:hover{transform:translateY(-2px);border-color:var(--spruce-light);box-shadow:var(--shadow-sm);}
.viz-type.is-active{border-color:var(--brass);box-shadow:0 0 0 2px rgba(201,162,39,.25);}
.viz-type-chip{width:100%;height:44px;border-radius:8px;border:1px solid var(--line);}
.viz-type-name{font-family:"Manrope",sans-serif;font-size:.9rem;font-weight:600;color:var(--ink);letter-spacing:0;}
@media (max-width:520px){.viz-types,.visualizer.is-compact .viz-types{grid-template-columns:repeat(2,1fr) !important;}}

.viz-current{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--paper);border-radius:var(--r-sm);}
.viz-current .spec{color:var(--ink-60);}
.viz-current strong{font-family:"Fraunces",Arial,sans-serif;font-size:1.02rem;}

.viz-tools{display:flex;flex-direction:column;gap:12px;}
.viz-tol{display:flex;flex-direction:column;gap:4px;font-size:.82rem;}
.viz-tol span{font-weight:600;}
.viz-tol input[type=range]{width:100%;accent-color:var(--brass);}
.viz-tol small{color:var(--ink-60);font-size:.74rem;line-height:1.35;}
.viz-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.btn-sm{padding:8px 10px;font-size:.8rem;}
.viz-swap{cursor:pointer;text-align:center;}
.viz-status{font-size:.78rem;color:var(--ink-60);margin:0;line-height:1.4;min-height:2.6em;}
.viz-buttons .btn[disabled]{opacity:.4;cursor:not-allowed;}

.visualizer.is-compact{grid-template-columns:1fr 260px;}
.visualizer.is-compact .viz-swatches{grid-template-columns:repeat(4,1fr);}

@media (max-width:900px){
  .visualizer,.visualizer.is-compact{grid-template-columns:1fr;}
  .viz-swatches{grid-template-columns:repeat(8,1fr);}
  .visualizer.is-compact .viz-swatches{grid-template-columns:repeat(8,1fr);}
}
@media (max-width:520px){
  .viz-swatches,.visualizer.is-compact .viz-swatches{grid-template-columns:repeat(6,1fr);}
  .viz-buttons{grid-template-columns:1fr 1fr;}
}

/* how-to grid under the full visualizer */
.viz-help{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;}
.viz-help > div{border-top:2px solid var(--brass);padding-top:14px;}
.viz-help .spec{color:var(--brass);display:block;margin-bottom:8px;}
.viz-help h3{font-size:1rem;margin-bottom:6px;}
.viz-help p{font-size:.86rem;color:var(--ink-60);margin:0;}
@media (max-width:900px){.viz-help{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.viz-help{grid-template-columns:1fr;}}

.viz-band .sec-head{align-items:end;}

/* ---- visualizer: upload bar under the preview ---- */
.viz-left{display:flex;flex-direction:column;gap:12px;}
.viz-uploadbar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.viz-upload-btn{
  flex:1 1 260px;display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:var(--r-md);
  padding:12px 16px;background:var(--paper);
  transition:border-color .16s ease,background .16s ease;
}
.viz-upload-btn:hover{border-color:var(--brass);background:var(--chalk);}
.viz-upload-ico{
  width:32px;height:32px;flex:none;border-radius:50%;
  background:var(--spruce);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:1rem;font-weight:700;
}
.viz-upload-btn b{display:block;font-size:.88rem;font-family:"Fraunces",Arial,sans-serif;}
.viz-upload-btn small{display:block;color:var(--ink-60);font-size:.74rem;line-height:1.35;}
.viz-demo-link{flex:0 0 auto;align-self:center;}

/* ---- visualizer: single / dual mode switch ---- */
.viz-modes{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--paper);}
.viz-mode{
  padding:9px 10px;border:0;background:none;cursor:pointer;
  font-family:"Manrope",Arial,sans-serif;font-size:.82rem;font-weight:600;
  color:var(--ink-60);transition:background .16s ease,color .16s ease;
}
.viz-mode.is-active{background:var(--spruce);color:#fff;}

/* ---- visualizer: the two colour slots ---- */
.viz-slots{display:flex;flex-direction:column;gap:8px;}
.viz-slots .viz-slot:nth-child(2){display:none;}
.viz-slots.is-dual .viz-slot:nth-child(2){display:flex;}
.viz-slot{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:8px 10px;transition:border-color .16s ease;
}
.viz-slot:hover{border-color:var(--brass-light);}
.viz-slot.is-active{border-color:var(--brass);background:var(--chalk);}
.viz-slot-chip{width:30px;height:30px;flex:none;border-radius:6px;border:1px solid var(--line);}
.viz-slot-chip.is-empty{background:repeating-linear-gradient(45deg,#ddd,#ddd 4px,#fff 4px,#fff 8px);}
.viz-slot-txt b{display:block;font-size:.82rem;font-family:"Fraunces",Arial,sans-serif;line-height:1.2;}
.viz-slot-txt small{display:block;color:var(--ink-60);font-size:.75rem;}
.viz-hint{font-size:.78rem;color:var(--ink-60);margin:0;line-height:1.4;}

@media (max-width:900px){
  .viz-uploadbar{flex-direction:column;}
  .viz-demo-link{align-self:stretch;}
}

/* =========================================================
   BRAND LOGO (bundled with the theme)
   Used when no custom logo is set in Customize → Site Identity.
   ========================================================= */
.logo-brand{display:block;flex:0 0 auto;margin-right:auto;line-height:0;}
.logo-brand img{
  display:block;width:auto;height:clamp(38px,4.6vw,54px);
  max-width:min(300px,52vw);object-fit:contain;
}
.logo .custom-logo{height:clamp(38px,4.6vw,54px);width:auto;object-fit:contain;}

/* footer: the logo sits on a white chip so the blue outline reads on the dark band */
.foot-logo{
  display:inline-block;background:#fff;border-radius:var(--r-md);
  padding:12px 16px;line-height:0;margin-bottom:16px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.foot-logo img{display:block;height:44px;width:auto;}

@media (max-width:520px){
  .logo-brand img{height:36px;max-width:56vw;}
  .foot-logo img{height:38px;}
}

/* =========================================================
   BRAND CONTRAST FIXES
   The accent is the logo red. Red text directly on the deep blue
   bands measures 1.96:1, well below readable, so on those bands
   the eyebrow becomes a solid red pill with white text (4.76:1).
   ========================================================= */
/* On the dark blue bands the red eyebrow is unreadable, so it becomes a
   solid red pill with white text — on brand and high contrast. */
.promise .eyebrow,
.fband .eyebrow,
.pagehead .eyebrow,
.franchise-head .eyebrow{
  display:inline-flex;align-items:center;
  background:var(--brass);color:#fff;
  padding:7px 15px 6px;border-radius:100px;
  margin-bottom:20px;
  /* the pill sits on deep blue, so lift it slightly off the background */
  box-shadow:0 2px 10px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.18);
}
.promise .eyebrow::before,
.fband .eyebrow::before,
.pagehead .eyebrow::before,
.franchise-head .eyebrow::before{display:none;}

/* map pins: red reads as a classic map marker on the blue landmass */
.map-pin.live .pin-dot{background:var(--brass);animation:ctc-ping-red 2s infinite;}
.map-pin.soon .pin-dot{background:#FFFFFF;animation:ctc-ping-white 2.4s infinite;}
@keyframes ctc-ping-red{
  0%{box-shadow:0 0 0 0 rgba(201,162,39,.6);}
  70%{box-shadow:0 0 0 12px rgba(201,162,39,0);}
  100%{box-shadow:0 0 0 0 rgba(201,162,39,0);}
}
@keyframes ctc-ping-white{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.75);}
  70%{box-shadow:0 0 0 11px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}
.map-legend .live i{background:var(--brass);}
.map-legend .soon i{background:#fff;border:1px solid var(--line);}

/* visualizer CTA fills the space at the foot of the control panel */
.viz-panel{justify-content:flex-start;}
.viz-tools{flex:1;}
.viz-cta{margin-top:auto;text-align:center;}
.viz-band .sec-head{grid-template-columns:1fr;}

/* =========================================================
   SERVICE PAGE HERO — matched to the homepage hero
   Light paper background with the same soft radial wash,
   overriding the dark .pagehead treatment for these pages only.
   ========================================================= */
.pagehead.service-head{
  background:radial-gradient(1100px 520px at 12% -8%,rgba(143,169,196,.30),transparent 62%),var(--paper);
  color:var(--ink);
  padding:clamp(44px,6vw,84px) 0;
}
.pagehead.service-head h1{color:var(--ink);}
.pagehead.service-head .lede{color:var(--ink-60);}
.pagehead.service-head .head-sub{color:var(--spruce);}
.pagehead.service-head .head-region{color:var(--brass);}
.pagehead.service-head .crumbs{color:var(--ink-60);}
.pagehead.service-head .crumbs a{color:var(--ink-60);}
.pagehead.service-head .crumbs a:hover{color:var(--spruce);}

/* the eyebrow reverts to the light-background dash style */
.pagehead.service-head .eyebrow{
  display:flex;background:none;color:var(--brass);
  padding:0;border-radius:0;box-shadow:none;margin-bottom:20px;
}
.pagehead.service-head .eyebrow::before{display:block;background:var(--brass);}

/* ghost button on light needs a visible edge */
.pagehead.service-head .btn-ghost-light{color:var(--ink);border-color:var(--line);}
.pagehead.service-head .btn-ghost-light:hover{border-color:var(--spruce);color:var(--spruce);}

/* =========================================================
   APPLICATION FORM — blue title, tighter overall height
   ========================================================= */
.formcard h3{color:var(--spruce);font-size:clamp(1.15rem,1.5vw,1.42rem);margin-bottom:4px;}
.formcard .hint{font-size:.83rem;margin-bottom:16px;}

/* tighter fields */
.formcard{padding:clamp(20px,2.4vw,30px);}
.formcard .field{margin-bottom:11px;}
.formcard .field-row{gap:11px;margin-bottom:0;}
.formcard .field label{font-size:.73rem;margin-bottom:4px;}
.formcard .field input,
.formcard .field select,
.formcard .field textarea{padding:10px 12px;font-size:.9rem;}
.formcard .field textarea{min-height:64px;}

/* compact upload zone */
.formcard .upload-zone{padding:14px 16px;}
.formcard .upload-label b{font-size:.86rem;margin-bottom:2px;}
.formcard .upload-label small{font-size:.74rem;}

/* smaller submit + legal line */
.formcard .btn-lg{padding:13px 26px;font-size:.95rem;}
.formcard .form-legal{font-size:.71rem;margin-top:10px;}

/* upload prompt on one line to save another row of height */
.formcard .upload-zone{padding:12px 14px;}
.formcard .upload-label b{display:inline;font-size:.85rem;margin:0;}
.formcard .upload-label small{display:inline;margin-left:7px;font-size:.73rem;}
.formcard .field{margin-bottom:10px;}
.formcard .field input,
.formcard .field select,
.formcard .field textarea{padding:9px 12px;}