/*
Theme Name: Stephenson Home Improvement
Theme URI: https://stephensonwindows.ca
Author: Go Vertical Media Group
Author URI: https://goverticalmediagroup.com
Description: A custom WordPress theme designed and built exclusively for Stephenson Home Improvement - Strathroy's trusted window & door installer since 1959. Handcrafted by Go Vertical Media Group to showcase their work beautifully and make every page simple to manage.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: stephenson
*/

/* ===================================================================
   DESIGN TOKENS -- single source of truth (ported from the design comps)
   =================================================================== */
:root {
  --color-primary-50:#f2f5fa;--color-primary-100:#e2e9f3;--color-primary-200:#c6d3e6;--color-primary-300:#9db2d1;--color-primary-400:#6d8ab6;--color-primary-500:#46679b;--color-primary-600:#33507f;--color-primary-700:#253d63;--color-primary-800:#1b2a4a;--color-primary-900:#151f37;--color-primary-950:#0d1425;
  --color-secondary-50:#faf7f2;--color-secondary-100:#f3ece0;--color-secondary-200:#e6d7bf;--color-secondary-300:#d5bd96;--color-secondary-400:#c2a173;--color-secondary-500:#b08d57;--color-secondary-600:#977448;--color-secondary-700:#785c3b;--color-secondary-800:#5b4630;--color-secondary-900:#423325;--color-secondary-950:#291f17;
  --color-neutral-50:#f7f8fa;--color-neutral-100:#eef0f4;--color-neutral-200:#dde1e8;--color-neutral-300:#c3c9d4;--color-neutral-400:#99a1b1;--color-neutral-500:#737b8c;--color-neutral-600:#5a616f;--color-neutral-700:#464c58;--color-neutral-800:#333842;--color-neutral-900:#23262e;--color-neutral-950:#15171c;
  --color-surface:#ffffff;--color-surface-subtle:var(--color-neutral-50);--color-surface-muted:var(--color-neutral-100);--color-surface-invert:var(--color-primary-800);
  --font-display:"Libre Baskerville",Georgia,serif;--font-body:"Poppins",system-ui,sans-serif;--font-logo:"Kaushan Script",cursive;
  /* --text-3xl..6xl are used only by the display headings (hero, hero band,
     section titles) and sit ~8% below the raw 1.25 scale: Libre Baskerville has a
     much larger x-height than Playfair Display, so it reads bigger at equal px. */
  --text-xs:0.64rem;--text-sm:0.8rem;--text-nav:0.9rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.563rem;--text-2xl:1.953rem;--text-3xl:2.25rem;--text-4xl:2.8rem;--text-5xl:3.5rem;--text-6xl:4.35rem;
  --text-base--line-height:1.6;--text-lg--line-height:1.55;--text-3xl--line-height:1.2;--text-4xl--line-height:1.15;--text-5xl--line-height:1.1;
  --tracking-tight:-0.02em;--tracking-normal:0em;--tracking-wide:0.08em;--tracking-wider:0.14em;
  --space-3xs:0.25rem;--space-2xs:0.5rem;--space-xs:0.75rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-2xl:4rem;--space-3xl:6rem;--space-4xl:8rem;--space-5xl:12rem;
  --radius-none:0;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px;--radius-card:1rem;
  --shadow-sm:0 1px 2px 0 rgb(27 42 74 / 0.06);--shadow-md:0 4px 12px -2px rgb(27 42 74 / 0.10);--shadow-lg:0 12px 32px -8px rgb(27 42 74 / 0.16);
}

/* -- Base --------------------------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Always reserve the scrollbar gutter so opening the menu (scroll-lock) doesn't
   shift the fixed header — keeps the hamburger and the X perfectly aligned. */
html{scrollbar-gutter:stable;}
body{font-family:var(--font-body);color:var(--color-neutral-800);background:var(--color-surface);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:var(--color-secondary-600);text-decoration:none;}
a:hover{color:var(--color-secondary-700);}
:focus-visible{outline:2px solid var(--color-secondary-500);outline-offset:3px;border-radius:var(--radius-xs);}
h1,h2,h3,h4,p{margin:0;}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}}

/* -- Layout helpers ----------------------------------------------- */
.container{max-width:1240px;margin:0 auto;}
.section{padding:clamp(var(--space-xl),8vw,var(--space-3xl)) clamp(var(--space-lg),5vw,var(--space-3xl));}
.section--subtle{background:var(--color-surface-subtle);}
.section--white{background:var(--color-surface);}
.section--navy{background:var(--color-primary-800);}
.section--imgband{padding-top:clamp(var(--space-lg),5.3vw,var(--space-2xl));padding-bottom:clamp(var(--space-lg),5.3vw,var(--space-2xl));padding-left:0;padding-right:0;}

/* Split: content + full-bleed media (photo runs to the page edge) */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));align-items:stretch;}
.split--top{align-items:start;}
.split__media{position:relative;min-height:560px;overflow:hidden;}
.split__media--left{border-radius:0 var(--radius-card) var(--radius-card) 0;}     /* bleeds off left edge */
.split__media--right{border-radius:var(--radius-card) 0 0 var(--radius-card);}    /* bleeds off right edge */
.split__body{display:flex;flex-direction:column;justify-content:center;gap:var(--space-md);padding:clamp(var(--space-md),4vw,var(--space-xl)) clamp(var(--space-lg),6vw,var(--space-4xl));}
.split__body--wide-gap{gap:var(--space-lg);}
.order-1{order:1;} .order-2{order:2;}
/*
 * Stacked .split: the two columns become two rows below 880px of container, and
 * .split has no row-gap -- so .split__body's vertical padding was doing two jobs
 * at once, separating the image from the text AND padding the section boundary.
 * That made an imgband-to-imgband boundary stack four paddings where an ordinary
 * one stacks two, which is why Who We Are -> Service Area read as a dead zone on
 * iPad while the rest of the page looked fine.
 *
 * Split the two jobs: row-gap separates image from text, and a small symmetric
 * padding is all the boundary needs on top of the section's own. Has to be
 * row-gap rather than padding-top, because the media sits on either side
 * depending on the section (ServiceArea renders the body first, contact uses
 * order-2), so which edge faces the image is not fixed.
 *
 * 879px, not 880: at exactly 880 the two 440px columns still fit.
 */
@media (max-width:879px){
  .split{row-gap:var(--space-lg);}
  .split__body{padding-top:var(--space-sm);padding-bottom:var(--space-sm);}
}

/* -- Media / image slots ------------------------------------------ */
.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Anchor the crop to the top of the frame. For photos where the subject sits high --
   a group shot, anything with faces near the upper edge -- centring the crop takes
   the tops of heads off. */
.media-cover--top{object-position:top;}
.media-contain{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.sw-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-md);
  background:repeating-linear-gradient(45deg,var(--color-neutral-100),var(--color-neutral-100) 12px,var(--color-neutral-50) 12px,var(--color-neutral-50) 24px);
  color:var(--color-neutral-400);font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;}
.sw-ph--contain{background:var(--color-neutral-50);}

/* -- Typography components ---------------------------------------- */
.eyebrow{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);font-size:var(--text-sm);color:var(--color-secondary-300);margin:0 0 var(--space-sm);}
.section-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-normal);color:var(--color-primary-800);font-size:clamp(var(--text-3xl),3.7vw,var(--text-4xl));line-height:var(--text-4xl--line-height);margin:0;}
.section-title--sm{font-size:clamp(var(--text-2xl),2.75vw,var(--text-3xl));line-height:var(--text-3xl--line-height);}
.section-title--light{color:#ffffff;}
.rule{width:116px;height:2px;background:var(--color-secondary-600);margin-top:var(--space-md);}
.rule--light{background:var(--color-secondary-500);}
.heading-center{display:flex;flex-direction:column;align-items:center;text-align:center;}
.heading-center .rule{margin-left:auto;margin-right:auto;}
.lead{font-family:var(--font-body);color:var(--color-neutral-600);font-size:var(--text-base);line-height:var(--text-base--line-height);margin:0;}
.lead--light{color:var(--color-primary-200);font-weight:600;}
.measure{max-width:600px;}
.measure-wide{max-width:760px;}

/* Feature blocks (title + description grids) */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-lg) var(--space-2xl);margin-top:var(--space-2xs);}
.feature-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-secondary-600);font-size:var(--text-lg);font-weight:600;margin:0 0 var(--space-2xs);}
.feature-desc{font-family:var(--font-body);color:var(--color-neutral-600);font-size:var(--text-base);line-height:var(--text-base--line-height);margin:0;}

/* Rich text (wysiwyg) */
.rich p{font-family:var(--font-body);color:var(--color-neutral-600);font-size:var(--text-base);line-height:var(--text-base--line-height);margin:0 0 var(--space-md);}
.rich p:last-child{margin-bottom:0;}
.rich a{color:var(--color-secondary-600);text-decoration:underline;}
.rich ul,.rich ol{color:var(--color-neutral-600);font-size:var(--text-base);line-height:1.9;margin:0 0 var(--space-md);padding-left:var(--space-md);}

/* -- Buttons ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);font-family:var(--font-display);font-weight:600;font-size:var(--text-base);letter-spacing:var(--tracking-wide);text-transform:uppercase;border-radius:var(--radius-full);border:none;cursor:pointer;transition:background-color .18s ease;color:#fff;}
.btn:hover{color:#fff;}
.btn--gold{background:var(--color-secondary-500);}
.btn--gold:hover{background:var(--color-secondary-600);}
.btn--navy{background:var(--color-primary-800);}
.btn--navy:hover{background:var(--color-primary-900);}
.btn--square{border-radius:var(--radius-sm);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-sm);}

/* -- Header ------------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);padding:var(--space-md) clamp(var(--space-lg),5vw,var(--space-3xl));transition:background-color .3s ease,padding .3s ease,box-shadow .3s ease;}
.site-header--solid{background:var(--color-primary-800);}
/* Sticky/scrolled state -- solid navy bar with shadow */
.site-header.is-stuck{background:var(--color-primary-900);box-shadow:var(--shadow-md);padding-top:var(--space-2xs);padding-bottom:var(--space-2xs);}
.site-header.is-stuck .site-logo img{height:44px;transition:height .3s ease;}
.site-logo img{transition:height .3s ease;}
.site-logo{display:flex;flex-direction:column;align-items:center;line-height:.9;text-decoration:none;}
.site-logo img{width:210px;height:60px;object-fit:contain;}
.site-logo__text{font-family:var(--font-logo);color:#fff;font-size:var(--text-2xl);}
.primary-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:clamp(var(--space-md),2.5vw,var(--space-xl));list-style:none;margin:0;padding:0;}
.primary-nav a{font-family:var(--font-display);font-weight:500;font-size:var(--text-nav);letter-spacing:var(--tracking-normal);text-transform:uppercase;color:#fff;}
.primary-nav a:hover{color:var(--color-secondary-300);}
.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a,
.primary-nav .current-menu-ancestor>a,.primary-nav .current-page-ancestor>a,
.primary-nav .current_page_parent>a{color:var(--color-secondary-300);font-weight:600;}
.nav-toggle{display:none;align-items:center;justify-content:center;background:none;border:none;color:#fff;cursor:pointer;padding:var(--space-2xs);}
/* Animated hamburger -> X (three morphing bars) */
.nav-toggle__box{position:relative;display:block;width:28px;height:18px;}
.nav-toggle__bar{position:absolute;left:0;right:0;height:2.5px;background:currentColor;border-radius:2px;transform-origin:center;transition:top .25s ease,transform .3s ease,opacity .2s ease;}
.nav-toggle__bar:nth-child(1){top:0;}
.nav-toggle__bar:nth-child(2){top:8px;}
.nav-toggle__bar:nth-child(3){top:16px;}
.site-header.nav-open .nav-toggle__bar:nth-child(1){top:8px;transform:rotate(45deg);}
.site-header.nav-open .nav-toggle__bar:nth-child(2){opacity:0;transform:scaleX(0);}
.site-header.nav-open .nav-toggle__bar:nth-child(3){top:8px;transform:rotate(-45deg);}

/* -- Hero --------------------------------------------------------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;}
.hero--page{min-height:56vh;}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,20,37,0.32) 0%,rgba(13,20,37,0.44) 100%);pointer-events:none;}
.hero--page .hero__overlay{background:linear-gradient(180deg,rgba(13,20,37,0.42) 0%,rgba(13,20,37,0.56) 100%);}
.hero__inner{position:relative;z-index:2;text-align:center;max-width:820px;min-width:0;padding:var(--space-4xl) var(--space-lg) var(--space-3xl);}
.hero__title{font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(var(--text-2xl),6vw,var(--text-6xl));line-height:var(--text-5xl--line-height);margin:0;text-transform:uppercase;overflow-wrap:break-word;}
.hero--page .hero__title{font-size:clamp(var(--text-2xl),5.5vw,var(--text-5xl));}
.hero__divider{width:120px;height:2px;background:var(--color-secondary-500);margin:var(--space-lg) auto;}
.hero__text{font-family:var(--font-body);color:#fff;font-weight:600;font-size:var(--text-base);line-height:var(--text-base--line-height);margin:0 auto;max-width:560px;}
/* Hero Ken Burns — slow cinematic zoom/drift on the homepage hero photo */
.hero{overflow:hidden;}
@media (prefers-reduced-motion:no-preference){
  .hero .media-cover{animation:sw-kenburns 28s ease-in-out infinite alternate;transform-origin:50% 50%;will-change:transform;}
}
@keyframes sw-kenburns{from{transform:scale(1.06);}to{transform:scale(1.18) translate(-1.8%,-1.2%);}}
.hero-band{background:var(--color-primary-800);min-height:34vh;display:flex;align-items:center;justify-content:center;padding:clamp(var(--space-2xl),10.7vw,var(--space-4xl)) var(--space-lg) clamp(var(--space-xl),5.3vw,var(--space-2xl));}
.hero-band__title{font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(var(--text-2xl),4.6vw,var(--text-5xl));line-height:var(--text-5xl--line-height);margin:0;text-transform:uppercase;text-align:center;overflow-wrap:break-word;}

/* -- Cards / grids ------------------------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-lg);}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-lg);}

/* Product card (image w/ label caption + description below) */
.pcard{display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-md);}
/* overflow:hidden added — the hover zoom (scale 1.06) otherwise spills ~13px past
   the 4:3 media box and over .pcard__desc. Every other zoom container (.catcard,
   .grille, .gallery-grid__item, .mosaic>div, .photo-stack>div, .split__media)
   already clips its own box; this one relied on .pcard, which only stops it
   escaping the card, not covering the text. */
.pcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;}
.pcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,20,37,0) 45%,rgba(13,20,37,0.72) 100%);pointer-events:none;}
.pcard__label{position:absolute;left:var(--space-sm);right:var(--space-sm);bottom:var(--space-md);z-index:1;text-align:center;font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:#fff;font-size:var(--text-xl);line-height:1.15;}
.pcard__desc{font-family:var(--font-body);color:var(--color-neutral-600);font-size:var(--text-sm);line-height:var(--text-base--line-height);text-align:center;margin:0;padding:var(--space-md) var(--space-lg) var(--space-lg);}

/* Category card (square, gradient, centered label + link) */
.catcard{position:relative;aspect-ratio:1/1;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-md);}
.catcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,20,37,0) 45%,rgba(13,20,37,0.78) 100%);pointer-events:none;}
.catcard__inner{position:absolute;left:0;right:0;bottom:var(--space-lg);z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);}
.catcard__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:#fff;font-size:var(--text-2xl);}
.catcard__sep{width:150px;height:1px;background:rgba(255,255,255,0.45);}
.catcard__link,.catcard__cta{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wider);font-size:var(--text-xs);color:#fff;transition:color .2s ease;}
.catcard__link:hover{color:var(--color-secondary-300);}
/* Whole-card link: a stretched anchor covers the card; inner content is visual only */
.catcard__stretch,.supplier-logo__stretch{position:absolute;inset:0;z-index:3;}
.catcard__inner{pointer-events:none;}
.catcard:hover .catcard__cta{color:var(--color-secondary-300);}

/* -- Suppliers band ----------------------------------------------- */
.suppliers{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-2xl);align-items:center;}
.supplier-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-lg);}
.supplier-logo{position:relative;background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-md);height:150px;padding:var(--space-lg) var(--space-xl);}
/* Give contained logos breathing room (the absolute image ignores the box padding) */
.supplier-logo .media-contain,.supplier-logo .sw-ph{padding:var(--space-md) var(--space-2xl);}
.supplier-logo--tall{min-height:200px;padding:var(--space-2xl) var(--space-3xl);box-shadow:var(--shadow-lg);}

/* -- Gallery (tabs + grid) ---------------------------------------- */
.gallery-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(var(--space-md),3vw,var(--space-2xl));margin-bottom:var(--space-2xl);}
.gallery-tab{background:none;border:none;cursor:pointer;padding:var(--space-2xs) 0;font-family:var(--font-body);font-weight:700;font-size:var(--text-base);color:var(--color-primary-900);}
.gallery-tab__underline{display:block;height:3px;margin-top:var(--space-2xs);background:var(--color-secondary-600);opacity:0;}
.gallery-tab.is-active{color:var(--color-secondary-600);}
.gallery-tab.is-active .gallery-tab__underline{opacity:1;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);}
.gallery-grid__item{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;}
.gallery-grid__item.is-hidden{display:none;}
.gallery-grid--loose .gallery-grid__item{aspect-ratio:3/2;}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;}}

/* -- Mosaic (5-image bleed) --------------------------------------- */
.dg-split{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:var(--space-lg);}
.dg-split__text{display:flex;flex-direction:column;gap:var(--space-md);padding:clamp(var(--space-md),4vw,var(--space-xl)) var(--space-md) clamp(var(--space-md),4vw,var(--space-xl)) clamp(var(--space-lg),5vw,var(--space-3xl));}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(140px,13vw,190px);gap:var(--space-sm);width:calc(100% + clamp(50px,10vw,170px));}
.mosaic>div{border-radius:var(--radius-lg);overflow:hidden;position:relative;}
/* Placement is keyed off the COUNT class, never off .mosaic alone. Every variant
   below therefore has identical specificity and none can accidentally override
   another depending on source order. Each fills the same three-row height, so a
   two-photo gallery sits at the same height as a five-photo one and the page does
   not change shape from one door type to the next. */
.mosaic--5{grid-template-columns:repeat(3,1fr);}
.mosaic--5>div:nth-child(1){grid-column:1;grid-row:1 / span 2;}
.mosaic--5>div:nth-child(2){grid-column:2;grid-row:1;}
.mosaic--5>div:nth-child(3){grid-column:3;grid-row:1;}
.mosaic--5>div:nth-child(4){grid-column:1;grid-row:3;}
.mosaic--5>div:nth-child(5){grid-column:2 / span 2;grid-row:2 / span 2;}

.mosaic--1{grid-template-columns:1fr;}
.mosaic--1>div:nth-child(1){grid-column:1;grid-row:1 / span 3;}

.mosaic--2{grid-template-columns:repeat(2,1fr);}
.mosaic--2>div:nth-child(1){grid-column:1;grid-row:1 / span 3;}
.mosaic--2>div:nth-child(2){grid-column:2;grid-row:1 / span 3;}

.mosaic--3{grid-template-columns:repeat(3,1fr);}
.mosaic--3>div:nth-child(1){grid-column:1;grid-row:1 / span 3;}
.mosaic--3>div:nth-child(2){grid-column:2;grid-row:1 / span 3;}
.mosaic--3>div:nth-child(3){grid-column:3;grid-row:1 / span 3;}

/* Two rows instead of three, so each cell keeps a usable height rather than being
   squashed into half a mosaic row. */
.mosaic--4{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(215px,20vw,290px);}
.mosaic--4>div:nth-child(1){grid-column:1;grid-row:1;}
.mosaic--4>div:nth-child(2){grid-column:2;grid-row:1;}
.mosaic--4>div:nth-child(3){grid-column:1;grid-row:2;}
.mosaic--4>div:nth-child(4){grid-column:2;grid-row:2;}
@media (max-width:820px){.dg-split{grid-template-columns:1fr;}.mosaic{width:100%;}.dg-split__text{padding-right:clamp(var(--space-lg),5vw,var(--space-3xl));}
  /* Three tall slivers do not survive a phone; stack them two-up instead. */
  .mosaic--3{grid-template-columns:repeat(2,1fr);}
  .mosaic--3>div:nth-child(1){grid-column:1 / span 2;grid-row:1 / span 2;}
  .mosaic--3>div:nth-child(2){grid-column:1;grid-row:3;}
  .mosaic--3>div:nth-child(3){grid-column:2;grid-row:3;}}

/* -- Colour swatches ---------------------------------------------- */
.swatch-groups{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-lg);align-items:start;}
.swatch-head{font-family:var(--font-body);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-secondary-600);font-size:var(--text-base);font-weight:700;margin:0 0 var(--space-md);border-bottom:2px solid var(--color-secondary-600);padding-bottom:var(--space-3xs);}
.swatch-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);}
.swatch{height:96px;background:var(--color-neutral-200);border-radius:var(--radius-lg);position:relative;overflow:hidden;}
.swatch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.swatch__name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--space-2xs);font-size:var(--text-xs);font-weight:600;color:var(--color-neutral-700);}
.swatch__name--on-dark{color:#fff;}
/* Over a photo the label cannot rely on the stored hex (see Swatch.astro), so it sits
   on a bottom-weighted scrim: contrast is guaranteed on any image, and the top of the
   swatch stays clear so the colour itself still reads. */
.swatch__name--over-image{color:#fff;align-items:flex-end;padding-bottom:var(--space-2xs);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  background:linear-gradient(to top,rgba(0,0,0,.66) 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,.04) 100%);}
@media (max-width:820px){.swatch-groups{grid-template-columns:1fr;row-gap:var(--space-2xl);}}

/* Grille rows */
.grille-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);}
.grille-row--wide{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);}
@media(max-width:900px){.grille-row{grid-template-columns:repeat(2,1fr);}.grille-row--wide{grid-template-columns:1fr;}}
@media(max-width:520px){.grille-row{grid-template-columns:1fr;}}
.grille{position:relative;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-md);background:var(--color-surface);}
.grille .media-contain{padding:var(--space-md);}
.grille--wide{aspect-ratio:16/10;}
.grille::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,20,37,0) 45%,rgba(13,20,37,0.72) 100%);pointer-events:none;}
.grille__name{position:absolute;left:var(--space-md);right:var(--space-md);bottom:var(--space-md);z-index:1;font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:#fff;font-size:var(--text-lg);line-height:1.15;}

/* Handle-options split (text left, cards right) */
.ho-split{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(240px,0.8fr) 2fr;gap:var(--space-2xl);align-items:center;}
@media (max-width:860px){.ho-split{grid-template-columns:1fr;}}

/* -- Glass options accordion -------------------------------------- */
.glass-item{border-bottom:1px solid var(--color-neutral-200);}
.glass-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) 0;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--color-primary-800);}
.glass-item summary::-webkit-details-marker{display:none;}
.glass-item .chev{transition:transform .2s ease;flex:none;color:var(--color-secondary-600);}
.glass-item[open] .chev{transform:rotate(180deg);}
.glass-body{font-family:var(--font-body);color:var(--color-neutral-600);font-size:var(--text-base);line-height:var(--text-base--line-height);margin:0;padding:0 0 var(--space-md);}

/* Two-photo stack (glass options media column) */
.photo-stack{display:flex;flex-direction:column;gap:var(--space-sm);}
.photo-stack>div{position:relative;overflow:hidden;border-radius:0 var(--radius-card) var(--radius-card) 0;}
.photo-stack>div:nth-child(1){min-height:400px;}
.photo-stack>div:nth-child(2){min-height:260px;}
/* Glass Options: photo column stretches to match the accordion height on desktop */
@media(min-width:861px){
  .split--glass{align-items:stretch;}
  .split--glass .photo-stack{height:100%;}
  .split--glass .photo-stack>div{min-height:0;}
  .split--glass .photo-stack>div:nth-child(1){flex:3;}
  .split--glass .photo-stack>div:nth-child(2){flex:2;}
}

/* -- Timeline (Our History) --------------------------------------- */
.tl{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:minmax(150px,auto) 56px minmax(150px,auto);column-gap:var(--space-lg);}
.tl-line{grid-row:2;grid-column:1 / -1;align-self:center;height:2px;background:var(--color-secondary-500);position:relative;left:50%;width:100vw;margin-left:-50vw;}
.tl-item{position:relative;}
.tl-item.top{grid-row:1;}
.tl-item.bottom{grid-row:3;}
.tl-box{border:1px solid var(--color-secondary-500);padding:var(--space-md);height:100%;}
.tl-year{font-family:var(--font-body);font-weight:700;font-size:var(--text-xl);color:#fff;margin-bottom:var(--space-2xs);}
.tl-desc{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);line-height:1.55;color:var(--color-primary-200);margin:0;}
.tl-conn{grid-row:2;position:relative;}
.tl-node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:var(--radius-full);background:var(--color-secondary-500);border:2px solid var(--color-secondary-500);}
.tl-stem{position:absolute;left:50%;transform:translateX(-50%);width:2px;height:50%;background:var(--color-secondary-500);}
.tl-conn.up .tl-stem{top:0;}
.tl-conn.down .tl-stem{bottom:0;}
/* Column placement for boxes + connectors (kept from the source design) */
.tl-c1{grid-column:1;}.tl-c2{grid-column:2;}.tl-c3{grid-column:3;}.tl-c4{grid-column:4;}
@media (max-width:820px){.tl{grid-template-columns:1fr;grid-template-rows:none;row-gap:var(--space-lg);}.tl-line,.tl-conn{display:none;}.tl-item{grid-column:auto !important;grid-row:auto !important;}}

/* -- Contact / Let's Chat ----------------------------------------- */
/* Column gap reduced from --space-xl (48px) to --space-md (24px): the longest
   value in this grid, the email address, needs 254px and was getting 244px, so it
   wrapped. The extra 24px buys ~12px per column and clears it. Row gap is
   unchanged. */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-lg) var(--space-md);}
.contact-block h3{font-family:var(--font-body);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-secondary-600);font-size:var(--text-sm);font-weight:700;margin:0 0 var(--space-2xs);}
/* overflow-wrap replaces word-break:break-word. word-break authorised a break at
   ANY character, so mike@stephensonwindows.ca split as "mike@stephensonwindow" /
   "s.ca". overflow-wrap only breaks when a word genuinely cannot fit, and it
   prefers a real break opportunity — LetsChat.astro emits a <wbr> after the "@",
   so a too-narrow column now breaks as "mike@" / "stephensonwindows.ca". */
.contact-block p,.contact-block a{font-family:var(--font-body);color:var(--color-primary-900);font-weight:700;font-size:var(--text-base);line-height:var(--text-base--line-height);margin:0;overflow-wrap:break-word;}

/* Service area list */
.area-cols{display:grid;grid-template-columns:repeat(2,max-content);column-gap:var(--space-2xl);}
.area-cols ul{margin:0;padding-left:var(--space-md);color:var(--color-neutral-600);font-size:var(--text-base);line-height:1.9;list-style:disc;}

/* -- Quote form --------------------------------------------------- */
.quote-form{display:flex;flex-direction:column;gap:var(--space-md);max-width:620px;}
.sw-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.quote-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--space-md);}
.quote-form input,.quote-form textarea{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-neutral-300);border-radius:var(--radius-xs);font-family:var(--font-body);font-size:var(--text-base);color:var(--color-neutral-800);background:var(--color-surface);}
.quote-form textarea{resize:vertical;}
.quote-form input:focus,.quote-form textarea:focus{border-color:var(--color-primary-800);outline:none;}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:var(--color-neutral-400);}
.quote-form__legend{font-family:var(--font-body);font-weight:700;color:var(--color-primary-900);font-size:var(--text-base);margin:0 0 var(--space-2xs);}
.quote-form__radios{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-lg);}
.quote-form__radios label{display:inline-flex;align-items:center;gap:var(--space-2xs);font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);color:var(--color-neutral-700);cursor:pointer;}
.quote-form__radios input{width:auto;accent-color:var(--color-primary-800);}
.quote-form__status{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);color:#326543;margin:0;min-height:1.2em;}

/* -- Footer ------------------------------------------------------- */
.ig-embed{width:100%;}
.footer-bar{background:var(--color-primary-800);padding:var(--space-lg) clamp(var(--space-lg),5vw,var(--space-3xl));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);}
.footer-bar__copy{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);color:var(--color-primary-200);margin:0;text-align:right;}
/*
 * Narrow footer: stack, and align the copy with the logo.
 *
 * .footer-bar is space-between, so side by side the logo sits left and the copy
 * right, and text-align:right is what keeps those two lines flush with the right
 * edge. Once the bar wraps, both items start at the same left edge and that
 * right-alignment is suddenly pointing away from the logo.
 *
 * Stacking explicitly rather than leaving it to flex-wrap: the natural wrap point
 * depends on how wide the copy renders, and footer_copyright is editable in
 * WordPress -- so left to itself the breakpoint moves whenever someone edits the
 * footer text. Measured at 560px with the current copy; 600 gives it room.
 */
@media (max-width:600px){
  .footer-bar{flex-direction:column;align-items:flex-start;}
  .footer-bar__copy{text-align:left;}
}

/* -- Responsive nav: full-width slide-down mobile panel ----------- */
@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  /* When the panel is open, the header bar goes solid dark */
  .site-header.nav-open{background:var(--color-primary-950);box-shadow:none;}

  /* Keep the logo + toggle painted above the panel (same stacking context) */
  .site-header .site-logo,.site-header .nav-toggle{position:relative;z-index:2;}

  /* The menu <ul> becomes a full-width panel dropping from below the bar */
  .primary-nav{
    position:fixed;left:0;right:0;top:0;z-index:1;
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0;
    margin:0;padding:calc(var(--space-md) * 2 + 60px) clamp(var(--space-lg),5vw,var(--space-3xl)) var(--space-xl);
    background:var(--color-primary-950);
    max-height:100vh;overflow-y:auto;
    /* fade in + slide down */
    opacity:0;transform:translateY(-14px);visibility:hidden;pointer-events:none;
    transition:opacity .3s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s;
  }
  .site-header.nav-open .primary-nav{
    opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;
    transition:opacity .32s ease,transform .34s cubic-bezier(.2,.7,.2,1);
  }

  /* Stacked links with full-width dividers */
  .primary-nav li{width:100%;list-style:none;}
  .primary-nav a:not(.btn){
    display:block;width:100%;padding:var(--space-md) 0;
    border-bottom:1px solid rgba(255,255,255,0.12);
    color:var(--color-neutral-300);font-size:var(--text-lg);
    letter-spacing:var(--tracking-wide);
  }
  .primary-nav a:not(.btn)::after{display:none;} /* no underline slide on mobile */
  .primary-nav a:not(.btn):hover,
  .primary-nav .current-menu-item>a,
  .primary-nav .current_page_item>a,
  .primary-nav .current-menu-ancestor>a,
  .primary-nav .current-page-ancestor>a,
  .primary-nav .current_page_parent>a{color:#fff;}

  /* Full-width CTA pill at the bottom */
  .primary-nav .menu-item-cta{margin-top:var(--space-lg);}
  .primary-nav .menu-item-cta .btn{width:100%;padding-top:var(--space-md);padding-bottom:var(--space-md);}

  /* Keep the logo + toggle above the panel */
  .site-header{z-index:60;}
}

/* Lock page scroll while the mobile panel is open */
html.nav-lock{overflow:hidden;}

/* ===================================================================
   MOTION LAYER -- hover interactions + scroll reveal
   =================================================================== */

/* Buttons: lift + shadow on hover */
.btn{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}

/* Card lift on hover (elements that already carry a shadow) */
.pcard,.catcard,.grille,.supplier-logo{transition:transform .3s ease,box-shadow .3s ease;}
.pcard:hover,.catcard:hover,.grille:hover,.supplier-logo:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}

/* Image zoom inside any media frame with overflow:hidden */
.media-cover{transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.pcard__media:hover .media-cover,
.catcard:hover .media-cover,
.grille:hover .media-cover,
.split__media:hover .media-cover,
.gallery-grid__item:hover .media-cover,
.mosaic>div:hover .media-cover,
.photo-stack>div:hover .media-cover{transform:scale(1.06);}

/* Gallery + mosaic tiles: subtle lift (no shadow frame) */
.gallery-grid__item,.mosaic>div{transition:transform .3s ease;}
.gallery-grid__item:hover,.mosaic>div:hover{transform:translateY(-4px);}

/* Animated underline on nav links (not the CTA button) */
.primary-nav a:not(.btn){position:relative;}
.primary-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--color-secondary-300);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease;}
.primary-nav a:not(.btn):hover::after,
.primary-nav .current-menu-item>a::after,
.primary-nav .current_page_item>a::after,
.primary-nav .current-menu-ancestor>a::after,
.primary-nav .current-page-ancestor>a::after,
.primary-nav .current_page_parent>a::after{transform:scaleX(1);}

/* Gallery filter tabs hover */
.gallery-tab{transition:color .2s ease;}
.gallery-tab:hover{color:var(--color-secondary-600);}
.gallery-tab__underline{transition:opacity .25s ease;}

/* Glass accordion chevron / summary hover */
.glass-item summary{transition:color .2s ease;}
.glass-item summary:hover{color:var(--color-secondary-600);}

/* Contact links + timeline nodes */
.contact-block a{transition:color .2s ease;}
.contact-block a:hover{color:var(--color-secondary-600);}
.tl-node{transition:transform .3s ease,background-color .3s ease;}
.tl-item:hover .tl-node{transform:translate(-50%,-50%) scale(1.35);}

/* Scroll-reveal: elements get [data-reveal] from JS, animate in on view.
   Gated behind no-preference so reduced-motion users see content instantly,
   and only applied when JS added the attribute (no-JS shows everything). */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);will-change:opacity,transform;}
  [data-reveal].is-in{opacity:1;transform:none;}
}

/* ===================================================================
   ADDENDUM -- Mapbox service-area map + gallery CTA
   =================================================================== */
/* Interactive map fills its rounded media frame (corners clip via parent overflow) */
.sw-map{position:absolute;inset:0;width:100%;height:100%;}
.sw-map canvas{outline:none;}
.sw-map__pin{line-height:0;cursor:default;filter:drop-shadow(0 3px 5px rgba(0,0,0,0.45));}
.sw-map .mapboxgl-ctrl-logo,.sw-map .mapboxgl-ctrl-attrib{opacity:.65;}

/* Centered "View Full Gallery" CTA rendered inside the gallery block */
.gallery-cta{display:flex;justify-content:center;margin-top:var(--space-2xl);}

/* Door category cards: punch in a little (scale) on hover */
.catcard{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;}
.catcard:hover{transform:translateY(-6px) scale(1.03);}

/* Offset the fixed header for the WordPress admin bar (logged-in) so the header
   isn't hidden beneath the toolbar. Desktop (>=783px) is where the bar is fixed. */
@media screen and (min-width:783px){
  body.admin-bar .site-header{top:32px;}
  body.admin-bar .primary-nav{top:32px;}
}

/* ===================================================================
   BACK TO TOP -- reveals on scroll-up, hides on scroll-down / near top
   =================================================================== */
.to-top{
  position:fixed;right:clamp(var(--space-md),3vw,var(--space-xl));bottom:clamp(var(--space-md),3vw,var(--space-xl));z-index:40;
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-primary-800);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s,background-color .2s ease;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease,background-color .2s ease;}
.to-top:hover{background:var(--color-secondary-500);}
.to-top svg{width:22px;height:22px;}

/* ===================================================================
   LIGHTBOX -- gallery + mosaic image viewer
   =================================================================== */
.gallery-grid__item img,.mosaic > div img{cursor:zoom-in;}
.sw-lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(13,20,37,0.93);padding:clamp(var(--space-md),4vw,var(--space-2xl));
  opacity:0;transition:opacity .25s ease;}
.sw-lb.is-open{display:flex;opacity:1;}
.sw-lb__img{max-width:92vw;max-height:86vh;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.sw-lb__btn{position:absolute;background:rgba(255,255,255,0.12);color:#fff;border:none;cursor:pointer;
  width:52px;height:52px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;
  font-size:2rem;line-height:1;transition:background-color .2s ease;}
.sw-lb__btn:hover{background:var(--color-secondary-500);}
.sw-lb__close{top:clamp(var(--space-md),3vw,var(--space-lg));right:clamp(var(--space-md),3vw,var(--space-lg));}
.sw-lb__prev{left:clamp(var(--space-2xs),2vw,var(--space-lg));top:50%;transform:translateY(-50%);}
.sw-lb__next{right:clamp(var(--space-2xs),2vw,var(--space-lg));top:50%;transform:translateY(-50%);}

/* ===================================================================
   Headless additions — not in the classic theme's style.css.
   =================================================================== */

/* Smooth in-page anchor scrolling, e.g. the Request A Quote CTA -> #quote.
   The theme never declared this, so those links jumped instantly. It was clearly
   intended: the reduced-motion block near the top of this file already forces
   scroll-behavior:auto, which is only meaningful if smooth was set somewhere.
   That same block means this automatically respects prefers-reduced-motion. */
html{scroll-behavior:smooth;}

/* .site-header is position:fixed, so an anchor target would otherwise land
   underneath it. Offset past the stuck header (~60px) plus breathing room. */
section[id],:target{scroll-margin-top:96px;}