/* site.css: the content pages (home, locations, contact, neighbourhood) on top of shared.css.
   The text and images are the live site's (content/pages); only the look is new. */

/* ---- title banner: the live theme's page-title picture, dark overlay, centred white title (as live) ---- */
.titlebar{position:relative;isolation:isolate;text-align:center;color:#fff;padding-block:clamp(48px,6vw,90px) clamp(60px,8vw,130px);
  background:#2a333b url(/wp-content/uploads/2025/05/page-title.jpg) center bottom/cover no-repeat}
@media (max-width:768px){.titlebar{background-image:url(/wp-content/uploads/2025/05/page-title-800w.jpg)}} /* the same picture at phone size (20 KB, not 78) */
.titlebar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.6)}
.titlebar h1{font-size:clamp(30px,4.2vw,53px);color:#fff;margin:0}
.titlebar .subtitle{font-size:16px;margin-top:10px;color:#fff}
.titlebar .crumbs{font-size:15px;color:#fff;margin-top:12px;margin-bottom:0}
.titlebar .crumbs a{color:#fff;text-decoration:none}
.titlebar .crumbs a:hover{text-decoration:underline;color:#fff}
.titlebar .modified{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:#fff;margin-top:10px}
.titlebar.quiet{padding-block:0;background:none}
.titlebar.quiet::before{content:none}
.titlebar.quiet h1,.titlebar.quiet .crumbs{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pagebody{padding-top:clamp(28px,4vw,48px)}
.titlebar.quiet+.pagebody{padding-top:0}

/* ---- section heads ---- */
.sechead.center{margin-inline:auto;text-align:center;justify-items:center}
.sechead-row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:28px}
.sechead-row .sechead{margin-bottom:0}
.band.dark{background:var(--char);color:#fff;border-top:0}
.actions{margin-top:22px}

/* ---- hero: the live banner photo, its five category hotspots and the three slogan slides ----
   One composition that scales with the browser (Amro, 2026-10-13): the hero is a size container, and everything in it
   (slogan slides, VIEW CATALOG bar, slide control, pin dots, pills) is sized in --u, a fraction of the hero's width,
   so at 960, 1920 or 2560 px, half a window or 50% zoom it is the same picture scaled. Desktop is drawn at the live
   1920 px layout (--u = 1/1920 of the width); phones (<= 768 px) at the live 390 px layout of the mobile banner. Pin
   points are percentages of the banner image. */
.hero{position:relative;background:#ECEAE6;overflow:hidden;container-type:inline-size;--u:calc(100cqw / 1920)}
.hero-pic{position:relative}
.hero-pic img{display:block;width:100%;height:auto}
.spot{position:absolute;display:flex;gap:calc(10 * var(--u));align-items:flex-start;z-index:2}
.spot .dot{width:calc(16 * var(--u));height:calc(16 * var(--u));border-radius:50%;background:var(--red);margin-top:calc(6 * var(--u));flex:none;position:relative}
.spot .dot::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(180,0,35,.5);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.7)}50%{transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.spot .dot::before{animation:none}}
/* The pill is sized to its label (equal side padding, text centred, one height for all); the price shows on hover. */
.spot a{display:inline-flex;flex-direction:column;align-items:center;text-align:center;background:var(--red);color:#fff;text-decoration:none;border-radius:calc(16 * var(--u));padding:0 calc(12 * var(--u));box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(0,0,0,.45)}
.spot h3{font-size:calc(14 * var(--u));letter-spacing:.04em;text-transform:uppercase;line-height:calc(30 * var(--u));white-space:nowrap}
.spot p{display:none;font-size:calc(13 * var(--u));padding-bottom:calc(7 * var(--u));white-space:nowrap}
.spot a:hover p,.spot a:focus-visible p,.spot .dot:hover+a p{display:block}
.spot.up a{position:absolute;left:calc(28 * var(--u));bottom:calc(-6 * var(--u))} /* the two floor pins open upward, as live */
/* Pins: the live widget's own left/top percentages of the banner image (read 2026-10-13); the dot's centre sits 8 and 14
   units right of and below that point, as live. */
.spot1{top:.5%;left:38%}.spot2{top:28%;left:19%}.spot3{top:50%;left:26.3%}.spot4{top:92%;left:30%}.spot5{top:94.5%;left:45%}
/* The copy block where the live one is at 1920: 25% down the banner, 12% from the right, 555 units wide: the slogan
   slide, a full-width "VIEW CATALOG" bar and the 1 -> 2 -> 3 slide control. */
.hero-copy{position:absolute;z-index:1;top:25%;right:12%;width:calc(555 * var(--u));display:grid;gap:calc(31 * var(--u))}
.slides{position:relative;width:100%;aspect-ratio:555/155}
.slides img{display:block;position:absolute;inset:0;width:100%;height:100%}
.slides img[hidden]{display:none}
.slides img.on{animation:slidein .7s ease}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.slides img.on{animation:none}}
.catbtn{display:flex;align-items:center;justify-content:center;height:calc(60 * var(--u));background:var(--red);color:#fff;text-decoration:none;font-size:calc(30 * var(--u));font-weight:600;letter-spacing:calc(1 * var(--u));text-transform:uppercase;transition:background .15s}
.catbtn:hover{background:var(--red-2)}
.slidedots{display:flex;justify-content:center;align-items:center;margin-top:calc(-2 * var(--u))}
.slidedots button{position:relative;width:calc(40 * var(--u));height:calc(41 * var(--u));padding:0;margin-right:calc(16 * var(--u));border-radius:50%;border:calc(2 * var(--u)) solid var(--red);background:var(--red);color:#fff;font-size:calc(20 * var(--u));font-weight:600;line-height:1}
.slidedots button:last-child{margin-right:0}
.slidedots button.on{background:transparent;color:var(--red);margin-right:calc(70 * var(--u))}
.slidedots button.on:last-child{margin-right:0}
.slidedots button.on::before{content:"";position:absolute;left:calc(46 * var(--u));top:calc(12 * var(--u));width:calc(50 * var(--u));height:calc(20 * var(--u));background:url(/wp-content/uploads/2025/06/arrow-right-stroke.png) center/contain no-repeat}
.slidedots button.on:last-child::before{display:none}
/* Phones: the mobile banner (banner-image-mobile1.png) with the copy below it, the live 390 px layout scaled. */
@media (max-width:768px){
  .hero{--u:calc(100cqw / 390)}
  .hero-copy{position:static;width:auto;padding:calc(26 * var(--u)) 7.5% calc(22 * var(--u));background:#E0E0E4;gap:calc(22 * var(--u))}
  .catbtn{height:calc(48 * var(--u));font-size:calc(21 * var(--u))}
  .spot1{top:2.5%;left:40%}.spot2{top:32%;left:15%}.spot3{top:45%;left:24.5%}.spot4{top:86%;left:28%}.spot5{top:88%;left:64%}
  .spot a{padding:0 calc(10 * var(--u))}.spot h3{font-size:calc(12.5 * var(--u));line-height:calc(28 * var(--u))}
  .spot.up a{left:calc(20 * var(--u))}
}

/* ---- categories: six photo tiles ---- */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1000px){.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.cat{position:relative;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.cat img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;transition:transform .4s}
.cat:hover img{transform:scale(1.04)}
.cat h5{position:absolute;left:10px;bottom:10px;font-size:15px}
.cat h5 a{display:inline-block;background:var(--sheet);color:var(--ink);text-decoration:none;padding:6px 12px;border-radius:999px;box-shadow:0 4px 14px -6px rgba(0,0,0,.35)}
.cat:hover h5 a{background:var(--red);color:#fff}
@media (min-width:700px){.cat h5{left:16px;bottom:16px;font-size:17px}.cat h5 a{padding:8px 16px}}

/* ---- split sections: picture + text ---- */
.split{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}.split.rev .split-text{order:0}}
.split-pic img{display:block;width:100%;height:auto;border-radius:12px}
.split-pic.square img{aspect-ratio:1;object-fit:cover}
.split-text .sechead{margin-bottom:18px}
.why{align-items:start}
@media (min-width:900px){.why{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.why4{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.why4 li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}
.why4 .n{color:var(--red);font-weight:600;font-size:22px;line-height:1.1}
.why4 b{font-weight:600;font-size:18px;display:block;margin-bottom:6px}
.why4 p{color:var(--ink-2)}

/* ---- call-out (charcoal) ---- */
.callout{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.callout{grid-template-columns:320px minmax(0,1fr);gap:64px}}
.callout-pic img{display:block;width:min(100%,320px);height:auto;border-radius:12px}
.callout .lede{font-size:clamp(18px,2.4vw,24px);line-height:1.45;color:#fff;max-width:46ch}
.callout .row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:24px}
.callout .tel{font-size:clamp(24px,3.4vw,34px);font-weight:600;color:#fff;text-decoration:none}
.callout .tel:hover{color:#F1E8DD}
.callout .touch{margin-top:18px;font-size:13px;letter-spacing:.04em;color:var(--on-char-2)}
.callout .touch a{color:var(--on-char-2)}


/* ---- blog cards ---- */
.posts{display:grid;gap:16px}
@media (min-width:800px){.posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.post{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--sheet);display:grid;grid-template-rows:auto 1fr}
.post-pic img{display:block;width:100%;height:auto;aspect-ratio:1.9/1;object-fit:cover}
.post-body{padding:16px 18px 18px;display:grid;gap:8px;align-content:start}
.post time{font-size:12.5px;color:var(--ink-3)}
.post h4{font-size:18px;line-height:1.25}
.post h4 a{text-decoration:none}
.post h4 a:hover{color:var(--red)}
.post p{color:var(--ink-2);font-size:14.5px}
.post .link{justify-self:start}

/* ---- testimonials ---- */
.tests{display:grid;gap:16px}
@media (min-width:800px){.tests{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.test{margin:0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--sheet);align-items:start}
@media (min-width:900px){.test{grid-template-columns:150px minmax(0,1fr);padding:20px;gap:20px}}
.test img{display:block;width:100%;height:auto;aspect-ratio:800/910;object-fit:cover;border-radius:8px}
.test figcaption{display:grid;gap:10px}
.test .stars{color:#C9961A;letter-spacing:2px;font-size:15px}
.test p{color:var(--ink-2);font-size:14.5px}
.test h5{font-size:14px}

/* ---- /locations/ and /contact-us/ ---- */
.locgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:640px){.locgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.locgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.loccard{border:1px solid var(--line);border-radius:12px;background:var(--sheet);padding:18px;display:grid;gap:6px;align-content:start}
.loccard h5{font-size:21px}
.loccard .addr{color:var(--ink-2)}
.loccard .ph{color:var(--red);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.loccard .lact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:8px}
.loccard.mine{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.loccard .yours{display:none;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;color:var(--ok);font-size:13px;width:100%}
.loccard .yours svg{width:18px;height:18px;grid-row:span 2;color:#fff;background:var(--ok);border-radius:50%;padding:3px}
.loccard .yours b{font-weight:600;font-size:14px}
.loccard .yours span{color:var(--ink-2);grid-column:2}
.loccard.mine .yours{display:grid}
.loccard.mine .shopbtn{display:none}
.cgrid{display:grid;gap:28px;padding-bottom:48px}
@media (min-width:900px){.cgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px}}
.infocol{display:grid;gap:22px;align-content:start}
.infocol h3{font-size:17px;margin-bottom:8px}
.infocol ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.infocol a{color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.infocol a:hover{color:var(--red)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;color:var(--ink-2);margin:0}
.hours dt,.hours dd{margin:0;font-weight:inherit}
.formnote.sent{color:var(--ok);font-weight:600;font-size:13.5px}

/* ---- neighbourhood (location) pages ---- */
.nbgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:56px}
@media (min-width:1000px){.nbgrid{grid-template-columns:minmax(0,1fr) 380px;gap:56px}.nbside{position:sticky;top:120px;align-self:start}}
.prose .rq{margin-top:4px}
.map{border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.map iframe{display:block;width:100%;height:100%;border:0}

/* ---- pages not rebuilt yet (dev only) ---- */
.notyet{padding-block:48px 72px;display:grid;gap:14px;max-width:60ch}
.notyet h1{font-size:clamp(26px,5vw,40px)}
.notyet p{color:var(--ink-2)}

/* ---- exported pages (tools/export.ts): posts, post lists, plain pages, request a quote ---- */
/* The exported pages wrap their paragraphs in plain <div>s (Elementor's text widgets): give those the prose's own
   rhythm, or every paragraph and heading on the 215 location pages runs into the next one. One column that can
   shrink, and long words wrap, so nothing pushes the page sideways on a phone. */
.prose{grid-template-columns:minmax(0,1fr);overflow-wrap:break-word}
.prose div:not([class]){display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.wrap.narrow{max-width:820px;padding-bottom:56px}
.wrap.narrow .prose{max-width:none}
.prose h2{color:var(--ink);font-size:clamp(22px,4vw,32px);margin-top:18px}
.prose h4{color:var(--ink);font-size:18px;margin-top:10px}
.prose img{max-width:100%;height:auto;border-radius:10px}
.prose a{color:var(--red)}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
@media (max-width:600px){.prose table{font-size:14px}.prose th,.prose td{padding:6px 7px;hyphens:auto;overflow-wrap:anywhere}} /* a 3-column table fits 375 px */
.prose details{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.prose summary{cursor:pointer;font-weight:600;color:var(--ink)}
.post .feat{margin:0}
.post .feat img{width:100%}
.postmeta{font-size:13.5px;color:var(--ink-3)}
 /* the blog's two columns as live: posts, then the sidebar (Recent Post, Categories, Image gallery) */
.blogrid{display:grid;gap:40px;padding-bottom:56px}
@media (min-width:1000px){.blogrid{grid-template-columns:minmax(0,1fr) 320px;gap:56px}}
.blogmain{min-width:0}
.blogside{display:grid;gap:28px;align-content:start}
.blogside .widget{border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.blogside h2{font-size:19px;margin:0 0 12px}
.blogside ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.blogside .w-recent_posts li{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;align-items:start}
.blogside .w-recent_posts li>a:first-child{grid-row:1/3}
.blogside .w-recent_posts img{width:72px;height:56px;object-fit:cover;border-radius:6px;display:block}
.blogside .w-recent_posts p{margin:0;font-size:12.5px;color:var(--ink-3)}
.blogside .w-recent_posts h4{margin:2px 0 0;font-size:14.5px;line-height:1.35}
.blogside a{color:var(--ink);text-decoration:none}
.blogside a:hover{color:var(--red)}
.blogside .w-media_gallery>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.blogside .w-media_gallery figure{margin:0}
.blogside .w-media_gallery img{width:100%;aspect-ratio:12/11;object-fit:cover;border-radius:6px;display:block}
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.postnav a{display:grid;gap:4px;color:var(--ink);text-decoration:none;font-weight:600}
.postnav a small{color:var(--ink-3);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.postnav .next{text-align:right}
.postnav a:hover{color:var(--red)}
.postlist{list-style:none;margin:0;padding:0 0 24px;display:grid;gap:28px}
@media (min-width:760px){.postlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.postlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.postcard{display:grid;gap:12px;align-content:start}
.postcard .pic img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:10px}
.postcard h2{font-size:20px;line-height:1.3}
.postcard h2 a{color:var(--ink);text-decoration:none}
.postcard h2 a:hover{color:var(--red)}
.postcard p{color:var(--ink-2);font-size:15px}
.postcard>div{display:grid;gap:8px}
.pager{display:flex;gap:8px;justify-content:center;padding-bottom:56px}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}
.pager [aria-current]{background:var(--red);border-color:var(--red);color:#fff}
.quotepage .prose{max-width:none}
.quotepage aside h2{font-size:24px;color:var(--ink);margin-bottom:6px}
.quotepage aside h4{font-size:17px;margin-bottom:4px}
.quotepage aside h4 a{color:var(--ink);text-decoration:none}
.quotepage aside ul{list-style:none;margin:0;padding:0}
/* Phone pass (2026-10-14): small links keep their look but get a 44 px tap area. */
.titlebar .crumbs a{display:inline-block;padding-block:13px;margin-block:-13px}
.slidedots button::after{content:"";position:absolute;inset:-3px}
.spot h3{position:relative}
.spot h3::after{content:"";position:absolute;inset:-8px -6px}
.callout .tel{display:inline-block;padding-block:4px}
.link{display:inline-block;padding-block:11px;margin-block:-11px}
/* Store pages (/stores/<key>/, src/stores.ts) */
.storepage{padding-top:32px;padding-bottom:64px;display:grid;gap:28px}
.storepage .sgrid{display:grid;gap:20px}
@media (min-width:900px){.storepage .sgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}}
.storepage .sinfo{display:grid;gap:18px}
.storepage .sinfo h2,.storepage section.stock h2,.storepage .snotes h2{font-size:22px;line-height:1.3}
.storepage .addr{font-size:17px;color:var(--ink)}
.storepage .sacts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.storepage .hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-variant-numeric:tabular-nums}
.storepage .hours dt{font-weight:600;color:var(--ink)}
.storepage .hours dd{margin:0;color:var(--ink-2)}
.storepage .callrow{display:grid;gap:4px}
.storepage .callrow .ph{font-size:22px;color:var(--red);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.storepage .map{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
.storepage .map iframe{display:block;width:100%;height:100%;border:0}
.storepage .loccard{max-width:none}
.storepage .snotes{display:grid;gap:14px}
@media (min-width:900px){.storepage .snotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.storepage .snote{border:1px solid var(--line);border-top:3px solid var(--red);border-radius:4px;padding:18px;background:var(--sheet);display:grid;gap:8px;align-content:start}
/* section.stock, not .stock: the availability badge is also class "stock" (.avail.stock) and became a grid here */
.storepage section.stock{display:grid;gap:14px}
.storepage section.stock .more{margin-top:4px}