/* ===========================================================================
   Components. Geometry measured from the source (data/cards/*.json):
     hero band 767h over TrueNorth-1.webp
     service cards  350w gap 30 r7  pad 18 18 30 18
     material cards 278w gap 30 r8  pad 30 30 0 30
     benefit cols   570w gap 40 · permit cols 565w gap 70
     deck-type rows 639w (2 cols) 54h · FAQ items 575w r32 52h collapsed
   =========================================================================== */

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border: 0; border-radius: var(--r-7);
  font-size: var(--fs-btn); font-weight: var(--fw-bold); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: var(--black); }
.btn--primary:hover { background: #c98800; color: var(--black); }
/* Solid fill, never a transparent outline: an outline on photography drops
   below contrast minimums. */
.btn--dark { background: var(--text-dark); color: var(--white); }
.btn--dark:hover { background: var(--black); color: var(--white); }
.btn--wide { width: 100%; }

/* ---------- section heading --------------------------------------------- */
.sec-head { max-width: 900px; margin: 0 auto 44px; text-align: center; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.sec-head--left { margin-inline: 0; text-align: left; }

/* ---------- hero --------------------------------------------------------- */
.hero {
  position: relative;
  display: flex; align-items: center;
  background: var(--text-dark) 50% 0% / cover no-repeat;
  color: var(--white);
}
/* Measured overlay: hero::before carries a radial gradient at 84% opacity.
   Without it the photograph is far too bright for the white headline. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgb(0,0,0) 0%, rgba(0,0,0,.75) 100%);
  opacity: .84;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero .btn--primary { min-width: 327px; height: 50px; }
.hero__grid {
  display: grid; grid-template-columns: 1fr 399px; gap: 60px; align-items: center;
  min-height: 563px;   /* source hero content box: 767 - 85 top - 119 bottom */
}
.hero h1 { font-size: var(--fs-h1); color: var(--brand); margin: 0 0 14px; }
.hero__display {
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: var(--fw-xbold); color: var(--white); margin: 0 0 20px;
}
.hero__lede { font-size: 19px; line-height: 1.6; color: var(--text-on-image); margin: 0 0 28px; max-width: 60ch; }

/* ---------- quote form --------------------------------------------------- */
/* Measured panel: 399x563, bg #e7e8e7, radius 10, padding 51/34,
   canada-flag background at 35% pinned top-left. */
.quote-form {
  background-color: var(--border); border-radius: 10px;
  padding: 51px 34px; color: var(--text);
  background-repeat: no-repeat; background-position: 0% 0%; background-size: 35%;
}
.quote-form h2, .quote-form h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; color: var(--text-dark); }
.quote-form p { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); }
.quote-form__row { display: grid; gap: 10px; }
.quote-form label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%; height: 42px; padding: 0 12px;
  font: var(--fw-reg) var(--fs-body)/1.4 var(--font); color: var(--black);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-5);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.quote-form textarea { height: auto; min-height: 58px; padding: 8px 12px; resize: vertical; }
.quote-form :is(input,select,textarea):focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(224,153,0,.18);
}
.quote-form :is(input,textarea)::placeholder { color: rgba(0,0,0,.45); }
.quote-form .btn { margin-top: 4px; }
.form-note { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; }
.form-error { color: #b3261e; font-size: 13px; margin: 4px 0 0; display: none; }
.is-invalid + .form-error { display: block; }
.is-invalid { border-color: #b3261e !important; }

/* ---------- badge strip -------------------------------------------------- */
.badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px; padding-block: 34px; }
.badges img { height: 68px; width: auto; object-fit: contain; }
@media (max-width: 1024px) { .badges { gap: 18px; padding-block: 22px; } .badges img { height: 44px; } }

/* ---------- generic card grid -------------------------------------------- */
.grid { display: grid; gap: 30px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* service card - 350w r7 pad 18 18 30 18 */
.card {
  background: var(--white); border-radius: var(--r-7); overflow: hidden;
  min-height: 595px;              /* measured card height at 1440 */
  padding: 18px 18px 30px; box-shadow: 0 2px 14px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.13); }
.card__media { margin: -18px -18px 18px; height: 330px; overflow: hidden; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card h3 { margin: 0 0 10px; font-size: 22px; color: var(--text-dark); }
.card h3 a, .mat-card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--brand); }
.card p { margin: 0 0 16px; font-size: 16px; color: var(--text-muted); }
.card__link { margin-top: auto; font-weight: var(--fw-bold); color: var(--brand); font-size: 16px; }
.card__link:hover { text-decoration: underline; }

/* material card - measured 278x420: photo tile, 1px amber border, r8,
   ::before linear-gradient(transparent 20%, #000 72%) at .53, white text
   anchored to the bottom (justify-content:flex-end), padding 30 30 0.       */
.mat-card {
  position: relative; isolation: isolate;
  min-height: 420px; border-radius: var(--r-8);
  border: 1px solid var(--brand);
  padding: 30px 30px 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--text-dark) 50% 50% / cover no-repeat;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(0,0,0,0) 20%, rgb(0,0,0) 72%);
  opacity: .53;
}
.mat-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.mat-card h3 { font-size: 24px; line-height: 1.2; color: var(--white); margin: 0; }
.mat-card p { font-size: 16px; line-height: 24px; color: var(--white); margin: 0 0 22px; }
.mat-card .rule { margin: 10px 0 12px; }

/* ---------- deck types: photo (511) + accordion (639), gap 50 -----------
   Measured item: 639x54, bg #f1f1f1, 18px/700 #333, padding 15, mb 6,
   border 1px rgba(0,0,0,.02). Panel: padding 15, 16px/27.2, border 1px #eee.
   States: default grey, dark on hover, amber when open.            */
.type-split { display: grid; grid-template-columns: 511px 639px; gap: 50px; align-items: start; }
.type-photo { margin: 0; border-radius: var(--r-8); overflow: hidden; }
.type-photo img { width: 100%; height: auto; }   /* natural 4:3 -> 511x383 */

.accordion__item + .accordion__item { margin-top: 6px; }
.accordion__head {
  width: 100%; min-height: 54px; padding: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid rgba(0,0,0,.02); border-radius: 0;
  cursor: pointer; text-align: left; font-family: var(--font);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.accordion__head h3 {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold);
  color: var(--text); transition: color var(--dur) var(--ease);
}
.accordion__head .ic { width: 16px; height: 16px; color: #444; flex: 0 0 auto; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.accordion__head:hover { background: var(--text-dark); }
.accordion__head:hover h3, .accordion__head:hover .ic { color: var(--white); }
.accordion__item[data-open="true"] .accordion__head { background: var(--brand); }
.accordion__item[data-open="true"] .accordion__head h3,
.accordion__item[data-open="true"] .accordion__head .ic { color: var(--white); }
.accordion__item[data-open="true"] .accordion__head .ic { transform: rotate(90deg); }

.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.accordion__item[data-open="true"] .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  margin: 0; padding: 15px; font-size: 16px; line-height: 27.2px;
  color: var(--text); border: 1px solid #eee; border-top: 0;
}
.accordion__panel a { color: var(--link); }

/* ---------- benefits / permits ------------------------------------------- */
.benefit h3 { font-size: 20px; margin: 0 0 10px; }
.benefit p { margin: 0; color: var(--text-muted); }
.band--dark .benefit p, .band--dark p { color: rgba(255,255,255,.85); }
.cols-70 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 70px; }

/* ---------- process ------------------------------------------------------ */
.process { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px; counter-reset: step; }
.process__step { text-align: center; }
.process__num {
  counter-increment: step; width: 64px; height: 64px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: var(--black); font-size: 24px; font-weight: var(--fw-xbold);
}
.process__num::before { content: counter(step); }
.process__step h3 { font-size: var(--fs-h3); margin: 0 0 8px; }
.process__step p { margin: 0; font-size: 16px; color: var(--text-muted); }

/* ---------- projects gallery --------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.gallery figure { margin: 0; border-radius: var(--r-8); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }

/* ---------- CTA band ----------------------------------------------------- */
.cta { background: var(--text-dark) center/cover no-repeat; color: var(--white); text-align: center; position: relative; }
.cta::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.cta > .container { position: relative; z-index: 1; }
.cta h2 { color: var(--white); margin: 0 0 14px; }
.cta p { color: var(--text-on-image); margin: 0 auto 26px; max-width: 62ch; }

/* ---------- service areas ------------------------------------------------ */
.areas { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0 30px; list-style: none; margin: 0; padding: 0; }
.areas li { border-bottom: 1px solid var(--border); }
.areas a { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 16px; color: var(--text); text-decoration: none; }
.areas a:hover { color: var(--brand); text-decoration: none; }
.areas .ic { color: var(--brand); }

/* ---------- FAQ (2 cols, items r32, 52h collapsed) ----------------------- */
.faq {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  gap: 20px 50px; align-items: start;
}
.faq__item { border: 1px solid var(--border); border-radius: var(--r-32); background: var(--white); overflow: hidden; }
.faq__q {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 16px; font-weight: var(--fw-semi); color: var(--text-dark); font-family: var(--font);
}
.faq__q .ic { flex: 0 0 auto; color: var(--brand); transition: transform var(--dur) var(--ease); }
.faq__item[data-open="true"] .faq__q .ic { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 24px 18px; font-size: 16px; color: var(--text-muted); }

/* ---------- local info --------------------------------------------------- */
.local h3 { font-size: var(--fs-h3-lg); margin: 0 0 14px; }
.local p { color: var(--text-muted); }

/* ---------- scroll reveal -----------------------------------------------
   Only applied once JS runs, so content is never hidden pre-hydration. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .areas { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cols-70 { gap: 40px; }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  :root { --fs-display: 34px; }
  .hero { min-height: 0; }
  .hero__grid { padding-block: 44px; }
  .grid, .grid--2, .grid--3, .grid--4, .cols-70, .gallery { grid-template-columns: 1fr; gap: 20px; }
  .faq { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 14px; }
  .areas-band__grid { grid-template-columns: 1fr; gap: 28px; }
  .areas { grid-template-columns: 1fr; }
  .type-list { grid-template-columns: 1fr; gap: 0; }
  .areas { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .badges { gap: 22px; }
  .badges img { height: 52px; }
  .quote-form { padding: 22px; }
  .btn { width: 100%; }
}

/* ---------- material grid (8 x 278 + 2 x 585, all 420h) ------------------ */
.mat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px; }
.mat-card { min-height: 420px; overflow: hidden; padding: 30px 30px 0; }
.mat-card--wide { grid-column: span 2; }
.mat-card img { display: block; width: calc(100% + 60px); margin-inline: -30px; height: 240px; object-fit: cover; }

/* ---------- band with a photographic background -------------------------- */
.band--photo { position: relative; background: var(--text-dark) center/cover no-repeat; color: var(--white); }
.band--photo::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.band--photo > .container { position: relative; z-index: 1; }
.band--photo h2 { color: var(--white); }
.band--photo p { color: var(--text-on-image); }

/* ---------- project carousel ------------------------------------------
   Source Swiper settings (data-settings on the nested-carousel widget):
   slides_to_show 5 / tablet 2 / mobile 1, gap 20, autoplay 3000ms,
   speed 500ms, arrows + bullet pagination. Slides are 330px tall.      */
.carousel { position: relative; --per-view: 5; --slide-gap: 20px; }
.carousel__track {
  display: flex; gap: var(--slide-gap); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-inline: var(--slide-gap);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
  margin: 0; height: 330px; scroll-snap-align: start;
  background: var(--surface); overflow: hidden;
}
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.55); color: var(--white);
  transition: background var(--dur-fast) var(--ease);
}
.carousel__btn:hover { background: var(--brand); color: var(--black); }
.carousel__btn .ic { width: 22px; height: 22px; }
.carousel__btn--prev { left: 18px; }
.carousel__btn--prev .ic { transform: rotate(90deg); }
.carousel__btn--next { right: 18px; }
.carousel__btn--next .ic { transform: rotate(-90deg); }
.carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.carousel__dot[aria-current="true"] { background: var(--brand); }

@media (max-width: 1024px) {
  .carousel { --per-view: 2; }
  .mat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .mat-grid { grid-template-columns: 1fr; gap: 20px; }
  .mat-card--wide { grid-column: auto; }
  .carousel { --per-view: 1; }
  .carousel__btn { width: 38px; height: 38px; }
}

/* ---------- deck-type list beside its photo (source band 997h) ---------- */
.type-split { display: grid; grid-template-columns: 511px 639px; gap: 50px; align-items: stretch; }
.type-split .type-list { grid-template-columns: 1fr; gap: 0; }
.type-photo { margin: 0; border-radius: var(--r-8); overflow: hidden; min-height: 715px; }
.type-photo img { width: 100%; height: 100%; min-height: 715px; object-fit: cover; }

/* ---------- USP strip (dark, 5 x 62px icons, band 196h) ----------------- */
.usp-strip { background: var(--text-dark); color: var(--white); }
.usp {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 24px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.usp li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 94px;
}
.usp li + li { border-left: 1px solid rgba(255,255,255,.14); }
.usp img { width: 62px; height: 62px; object-fit: contain; flex: 0 0 auto; }
.usp h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--white); }

@media (max-width: 1024px) {
  .type-split { grid-template-columns: 1fr; gap: 34px; }
  .usp { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 767px) {
  .type-split .type-list { grid-template-columns: 1fr; }
  .type-photo img { height: 240px; }
  .usp { grid-template-columns: 1fr; }
  .usp li { justify-content: flex-start; }
}

/* ---------- contact block (source row 1200x433: 603 + 577, gap 20) ------ */
.local--split { display: grid; grid-template-columns: 603px 577px; gap: 20px; align-items: center; min-height: 433px; }
.local__logo { width: 177px; height: auto; margin-bottom: 18px; }
.local__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 30px; }
.local__grid h3 { font-size: 20px; margin: 0 0 6px; }
.local__grid p { margin: 0; color: var(--text-muted); }
@media (max-width: 1024px) {
  .local--split { grid-template-columns: 1fr; min-height: 0; }
  .type-split { grid-template-columns: 1fr; }
  .type-photo, .type-photo img { min-height: 320px; }
  .card { min-height: 0; }
}
@media (max-width: 767px) {
  .local__grid { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
}

/* quote form sits on the canada-flag panel used by the source */

.quote-form__sub { font-size: 18px !important; color: var(--brand) !important; margin: 0 0 14px !important; }
.cta__lead { font-size: 36px; line-height: 1.25; font-weight: var(--fw-xbold); color: var(--white); margin: 0 auto 26px; max-width: 22ch; }
/* deck-type rows are H3 on the source; keep the heading semantics, keep the row look */
.type-list h3 {
  display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0;
  font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-dark);
}
.type-list .ic { color: var(--brand); flex: 0 0 auto; }
@media (max-width: 767px) { .cta__lead { font-size: 24px; } }

/* ==========================================================================
   Responsive behaviour, MEASURED from the source at 390 / 768 / 1440
   (scripts/measure_responsive.mjs -> data/home-responsive.json).
   The source does NOT do a simple 4->2->1 stack; each band has its own rule.
   ========================================================================== */
@media (max-width: 1024px) {
  /* services: 3 cols -> ONE column at 768 (source cards 734w) */
  .grid--3 { grid-template-columns: 1fr; }
  /* materials: 4 cols -> 2 cols at 768 (source cards 345x420) */
  .mat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mat-card--wide { grid-column: auto; }
  /* reasons, permits, FAQ, process all collapse to one column at 768 */
  .grid--2, .cols-70 { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .areas-band__grid { grid-template-columns: 1fr; gap: 30px; }
  /* USP strip stays 5 across at 768 (source row is 164w x 72h) */
  .usp { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; }
  .usp li { gap: 8px; }
  .usp img { width: 42px; height: 42px; }
  .usp h3 { font-size: 14px; }
  /* service areas: 5 -> 3 columns */
  .areas { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 767px) {
  /* the quote form is hidden in the hero at mobile on the source */
  .hero .quote-form { display: none; }
  /* material tiles at 390: 2 columns of 167x250, gap 18, padding 20/20/0,
     h3 18px, and the description is visibility:hidden on the source */
  .mat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .mat-card { min-height: 250px; padding: 20px 20px 0; }
  .mat-card h3 { font-size: 18px; }
  .mat-card p { visibility: hidden; height: 0; margin: 0; overflow: hidden; }
  .mat-card .rule { margin: 8px 0 0; }
  .usp { grid-template-columns: 1fr; gap: 18px; }
  .usp li + li { border-left: 0; }
  .usp img { width: 62px; height: 62px; }
  .usp h3 { font-size: var(--fs-h3); }
  .areas { grid-template-columns: 1fr; }
}

/* ---------- Trustindex Google reviews (source renders it at mobile) ------ */
.reviews-widget { margin-top: 18px; }
@media (min-width: 768px) { .reviews-widget:not(.reviews-widget--page) { display: none; } }
.reviews-widget--page { min-height: 120px; }

/* ---------- amber rule under headings (source: 100x4 rgb(224,153,0)) ---- */
.rule {
  position: relative; display: block; width: 100px; height: 4px;
  background: var(--brand); margin: 10px 0 14px;
}
.rule::before {
  content: ""; position: absolute; left: -27px; top: 0;
  width: 4px; height: 4px; background: var(--brand);
  box-shadow: 9px 0 0 var(--brand), 18px 0 0 var(--brand);
}
.sec-head .rule { margin-inline: auto; }
.sec-head--left .rule { margin-inline: 0; }
.rule--sm { width: 80px; height: 3px; margin: 10px 0 14px; }

/* band 3: left text column, 565 wide on the source */
.intro-col { max-width: 565px; margin-inline: 0; text-align: left; }

/* ---------- process: bordered cards with an overlapping icon ------------
   Measured card 333x285, white, 1px solid #e09900, radius 14,
   padding 0 30 30, text-align start. Arrows between cards are small amber. */
.process { display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.process__step {
  flex: 1 1 333px; max-width: 333px; min-height: 285px;
  background: var(--white); border: 1px solid var(--brand); border-radius: var(--r-14);
  padding: 0 30px 30px; text-align: left;
}
.process__icon {
  width: 90px; height: 90px; margin: -45px auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: var(--white);
}
.process__icon .ic { width: 45px; height: 45px; }
.process__step h3 { font-size: var(--fs-h3); margin: 0 0 8px; text-align: center; }
.process__step p { margin: 0; font-size: 16px; color: var(--text-muted); text-align: center; }
.process__arrow {
  flex: 0 0 100px; display: grid; place-items: center;
  color: var(--brand); align-self: center;
}
.process__arrow .ic { width: 44px; height: 44px; }

/* ---------- areas band: text column + promo card (491x365) -------------- */
.areas-band__grid { display: grid; grid-template-columns: 690px 491px; gap: 20px; align-items: start; }
.areas-band__title { color: var(--brand); font-size: var(--fs-h2); }
.areas-band .sec-head { margin-bottom: 24px; }
.areas { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 30px; }
.promo {
  position: relative; isolation: isolate;
  min-height: 365px; border-radius: var(--r-8); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 30px; text-align: center;
  background: var(--text-dark) center/cover no-repeat;
}
.promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.45); }
.promo h2 { color: var(--brand); font-size: 32px; margin: 0; }

/* ---------- projects gallery --------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.gallery figure { margin: 0; border-radius: var(--r-8); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }

/* ---------- CTA band ----------------------------------------------------- */
.cta { background: var(--text-dark) center/cover no-repeat; color: var(--white); text-align: center; position: relative; }
.cta::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.cta > .container { position: relative; z-index: 1; }
.cta h2 { color: var(--white); margin: 0 0 14px; }
.cta p { color: var(--text-on-image); margin: 0 auto 26px; max-width: 62ch; }

/* ---------- service areas ------------------------------------------------ */
.areas { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0 30px; list-style: none; margin: 0; padding: 0; }
.areas li { border-bottom: 1px solid var(--border); }
.areas a { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 16px; color: var(--text); text-decoration: none; }
.areas a:hover { color: var(--brand); text-decoration: none; }
.areas .ic { color: var(--brand); }

/* ---------- FAQ (2 cols, items r32, 52h collapsed) ----------------------- */
.faq {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  gap: 20px 50px; align-items: start;
}
.faq__item { border: 1px solid var(--border); border-radius: var(--r-32); background: var(--white); overflow: hidden; }
.faq__q {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 16px; font-weight: var(--fw-semi); color: var(--text-dark); font-family: var(--font);
}
.faq__q .ic { flex: 0 0 auto; color: var(--brand); transition: transform var(--dur) var(--ease); }
.faq__item[data-open="true"] .faq__q .ic { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 24px 18px; font-size: 16px; color: var(--text-muted); }

/* ---------- local info --------------------------------------------------- */
.local h3 { font-size: var(--fs-h3-lg); margin: 0 0 14px; }
.local p { color: var(--text-muted); }

/* ---------- scroll reveal -----------------------------------------------
   Only applied once JS runs, so content is never hidden pre-hydration. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .areas { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cols-70 { gap: 40px; }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  :root { --fs-display: 34px; }
  .hero { min-height: 0; }
  .hero__grid { padding-block: 44px; }
  .grid, .grid--2, .grid--3, .grid--4, .cols-70, .gallery { grid-template-columns: 1fr; gap: 20px; }
  .faq { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 14px; }
  .areas-band__grid { grid-template-columns: 1fr; gap: 28px; }
  .areas { grid-template-columns: 1fr; }
  .type-list { grid-template-columns: 1fr; gap: 0; }
  .areas { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .badges { gap: 22px; }
  .badges img { height: 52px; }
  .quote-form { padding: 22px; }
  .btn { width: 100%; }
}

/* ---------- material grid (8 x 278 + 2 x 585, all 420h) ------------------ */
.mat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px; }
.mat-card { min-height: 420px; overflow: hidden; padding: 30px 30px 0; }
.mat-card--wide { grid-column: span 2; }
.mat-card img { display: block; width: calc(100% + 60px); margin-inline: -30px; height: 240px; object-fit: cover; }

/* ---------- band with a photographic background -------------------------- */
.band--photo { position: relative; background: var(--text-dark) center/cover no-repeat; color: var(--white); }
.band--photo::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.band--photo > .container { position: relative; z-index: 1; }
.band--photo h2 { color: var(--white); }
.band--photo p { color: var(--text-on-image); }

/* ---------- project carousel ------------------------------------------
   Source Swiper settings (data-settings on the nested-carousel widget):
   slides_to_show 5 / tablet 2 / mobile 1, gap 20, autoplay 3000ms,
   speed 500ms, arrows + bullet pagination. Slides are 330px tall.      */
.carousel { position: relative; --per-view: 5; --slide-gap: 20px; }
.carousel__track {
  display: flex; gap: var(--slide-gap); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-inline: var(--slide-gap);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
  margin: 0; height: 330px; scroll-snap-align: start;
  background: var(--surface); overflow: hidden;
}
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.55); color: var(--white);
  transition: background var(--dur-fast) var(--ease);
}
.carousel__btn:hover { background: var(--brand); color: var(--black); }
.carousel__btn .ic { width: 22px; height: 22px; }
.carousel__btn--prev { left: 18px; }
.carousel__btn--prev .ic { transform: rotate(90deg); }
.carousel__btn--next { right: 18px; }
.carousel__btn--next .ic { transform: rotate(-90deg); }
.carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.carousel__dot[aria-current="true"] { background: var(--brand); }

@media (max-width: 1024px) {
  .carousel { --per-view: 2; }
  .mat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .mat-grid { grid-template-columns: 1fr; gap: 20px; }
  .mat-card--wide { grid-column: auto; }
  .carousel { --per-view: 1; }
  .carousel__btn { width: 38px; height: 38px; }
}

/* ---------- deck-type list beside its photo (source band 997h) ---------- */
.type-split { display: grid; grid-template-columns: 511px 639px; gap: 50px; align-items: stretch; }
.type-split .type-list { grid-template-columns: 1fr; gap: 0; }
.type-photo { margin: 0; border-radius: var(--r-8); overflow: hidden; min-height: 715px; }
.type-photo img { width: 100%; height: 100%; min-height: 715px; object-fit: cover; }

/* ---------- USP strip (dark, 5 x 62px icons, band 196h) ----------------- */
.usp-strip { background: var(--text-dark); color: var(--white); }
.usp {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 24px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.usp li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 94px;
}
.usp li + li { border-left: 1px solid rgba(255,255,255,.14); }
.usp img { width: 62px; height: 62px; object-fit: contain; flex: 0 0 auto; }
.usp h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--white); }

@media (max-width: 1024px) {
  .type-split { grid-template-columns: 1fr; gap: 34px; }
  .usp { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 767px) {
  .type-split .type-list { grid-template-columns: 1fr; }
  .type-photo img { height: 240px; }
  .usp { grid-template-columns: 1fr; }
  .usp li { justify-content: flex-start; }
}

/* ---------- contact block (source row 1200x433: 603 + 577, gap 20) ------ */
.local--split { display: grid; grid-template-columns: 603px 577px; gap: 20px; align-items: center; min-height: 433px; }
.local__logo { width: 177px; height: auto; margin-bottom: 18px; }
.local__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 30px; }
.local__grid h3 { font-size: 20px; margin: 0 0 6px; }
.local__grid p { margin: 0; color: var(--text-muted); }
@media (max-width: 1024px) {
  .local--split { grid-template-columns: 1fr; min-height: 0; }
  .type-split { grid-template-columns: 1fr; }
  .type-photo, .type-photo img { min-height: 320px; }
  .card { min-height: 0; }
}
@media (max-width: 767px) {
  .local__grid { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
}

/* quote form sits on the canada-flag panel used by the source */

.quote-form__sub { font-size: 18px !important; color: var(--brand) !important; margin: 0 0 14px !important; }
.cta__lead { font-size: 36px; line-height: 1.25; font-weight: var(--fw-xbold); color: var(--white); margin: 0 auto 26px; max-width: 22ch; }
/* deck-type rows are H3 on the source; keep the heading semantics, keep the row look */
.type-list h3 {
  display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0;
  font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-dark);
}
.type-list .ic { color: var(--brand); flex: 0 0 auto; }
@media (max-width: 767px) { .cta__lead { font-size: 24px; } }

/* ==========================================================================
   Responsive behaviour, MEASURED from the source at 390 / 768 / 1440
   (scripts/measure_responsive.mjs -> data/home-responsive.json).
   The source does NOT do a simple 4->2->1 stack; each band has its own rule.
   ========================================================================== */
@media (max-width: 1024px) {
  /* services: 3 cols -> ONE column at 768 (source cards 734w) */
  .grid--3 { grid-template-columns: 1fr; }
  /* materials: 4 cols -> 2 cols at 768 (source cards 345x420) */
  .mat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mat-card--wide { grid-column: auto; }
  /* reasons, permits, FAQ, process all collapse to one column at 768 */
  .grid--2, .cols-70 { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .areas-band__grid { grid-template-columns: 1fr; gap: 30px; }
  /* USP strip stays 5 across at 768 (source row is 164w x 72h) */
  .usp { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; }
  .usp li { gap: 8px; }
  .usp img { width: 42px; height: 42px; }
  .usp h3 { font-size: 14px; }
  /* service areas: 5 -> 3 columns */
  .areas { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 767px) {
  /* the quote form is hidden in the hero at mobile on the source */
  .hero .quote-form { display: none; }
  /* material tiles at 390: 2 columns of 167x250, gap 18, padding 20/20/0,
     h3 18px, and the description is visibility:hidden on the source */
  .mat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .mat-card { min-height: 250px; padding: 20px 20px 0; }
  .mat-card h3 { font-size: 18px; }
  .mat-card p { visibility: hidden; height: 0; margin: 0; overflow: hidden; }
  .mat-card .rule { margin: 8px 0 0; }
  .usp { grid-template-columns: 1fr; gap: 18px; }
  .usp li + li { border-left: 0; }
  .usp img { width: 62px; height: 62px; }
  .usp h3 { font-size: var(--fs-h3); }
  .areas { grid-template-columns: 1fr; }
}

/* ---------- Trustindex Google reviews (source renders it at mobile) ------ */
.reviews-widget { margin-top: 18px; }
@media (min-width: 768px) { .reviews-widget:not(.reviews-widget--page) { display: none; } }
.reviews-widget--page { min-height: 120px; }

/* ---------- amber rule under headings (source: 100x4 rgb(224,153,0)) ---- */
.rule {
  position: relative; display: block; width: 100px; height: 4px;
  background: var(--brand); margin: 10px 0 14px;
}
.rule::before {
  content: ""; position: absolute; left: -27px; top: 0;
  width: 4px; height: 4px; background: var(--brand);
  box-shadow: 9px 0 0 var(--brand), 18px 0 0 var(--brand);
}
.sec-head .rule { margin-inline: auto; }
.sec-head--left .rule { margin-inline: 0; }
.rule--sm { width: 80px; height: 3px; margin: 10px 0 14px; }

/* band 3: left text column, 565 wide on the source */
.intro-col { max-width: 565px; margin-inline: 0; text-align: left; }

/* ---------- process: 90x90 amber icon circles + arrow connectors -------- */
.process {
  display: flex; align-items: flex-start; justify-content: center; gap: 0;
  grid-template-columns: none;
}
.process__step { flex: 1 1 271px; max-width: 271px; text-align: center; }
.process__icon {
  width: 90px; height: 90px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: var(--white);
}
.process__icon .ic { width: 45px; height: 45px; }
.process__arrow {
  flex: 0 0 100px; display: grid; place-items: center;
  color: var(--brand); align-self: flex-start; margin-top: 15px;
}
.process__arrow .ic { width: 60px; height: 60px; }
@media (max-width: 1024px) {
  .process { flex-direction: column; align-items: center; gap: 0; }
  .process__step { max-width: 100%; }
  .process__arrow { flex: 0 0 auto; margin: 8px 0 20px; transform: rotate(90deg); }
}

/* ---------- badge strip sits in a white card (measured 1008x136, r10) --- */
.badges {
  max-width: 1008px; margin-inline: auto;
  background: var(--white); border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.09);
  padding: 17px 34px;
}
/* ---------- band 3: white, photo left, dark text right ------------------ */
.intro-band { background: var(--white); }
.intro-band__grid { display: grid; grid-template-columns: 565px 565px; gap: 70px; align-items: center; }
.intro-band__photo { margin: 0; }
.intro-band__photo img { width: 100%; height: auto; object-fit: contain; }
.intro-band .sec-head { margin-bottom: 0; }
@media (max-width: 1024px) {
  .intro-band__grid { grid-template-columns: 1fr; gap: 28px; }
  .badges { max-width: 100%; padding: 14px 18px; }
}

/* ==========================================================================
   Measured type + layout per breakpoint (scripts/probe_type390.mjs).
   The source does not simply shrink text on small screens - several card
   headings get LARGER at 390 than they are at 1440.
   ========================================================================== */
.card h3 { font-size: 22px; line-height: 28.6px; }
.card p  { font-size: 16px; line-height: 24px; margin-bottom: 14.4px; }
.benefit h3 { font-size: 23px; line-height: 27.6px; margin-bottom: 6px; }
.benefit p  { font-size: 17px; line-height: 26px; margin: 0; }
.mat-card h3 { font-size: 24px; line-height: 28.8px; font-weight: var(--fw-bold); }
.faq__q { font-size: 17px; font-weight: var(--fw-reg); }

@media (max-width: 1024px) {
  .card p { font-size: 18px; line-height: 27px; }
  /* band 3 at 768: text first (200h), then the photo (316h), gap 45 */
  .intro-band__grid { display: flex; flex-direction: column; gap: 45px; }
  .intro-band__photo { order: 2; }
  .intro-band .sec-head { order: 1; max-width: 100%; }
  .intro-band__photo img { height: 316px; object-fit: cover; width: 100%; }
  /* process stays HORIZONTAL at 768: 3 steps of 208 + 2 arrows of 56 */
  .process { flex-direction: row; align-items: flex-start; }
  .process__step { max-width: 208px; flex: 1 1 208px; }
  .process__arrow { flex: 0 0 56px; transform: none; margin: 15px 0 0; }
  .process__arrow .ic { width: 40px; height: 40px; }
  .process__icon { width: 70px; height: 70px; }
  .process__icon .ic { width: 34px; height: 34px; }
}

@media (max-width: 767px) {
  /* badge strip stays a single 88px-tall row at 390 (source: 17px padding + ~54px logos) */
  .badges { gap: 6px; padding: 17px 10px; flex-wrap: nowrap; }
  .badges img { height: 44px; min-width: 0; }
  /* process at 390: 50px icon, and the arrow block measures ~147px tall */
  .process__icon { width: 50px; height: 50px; }
  .process__icon .ic { width: 26px; height: 26px; }
  .process__arrow { flex: 0 0 147px; height: 147px; margin: 0; transform: none; }
  .process__arrow .ic { width: 48px; height: 48px; transform: rotate(90deg); }
  .card h3 { font-size: 26px; line-height: 33.8px; }
  .card p  { font-size: 16px; line-height: 24px; }
  .benefit h3 { font-size: 20px; line-height: 24px; }
  .mat-card h3 { font-size: 18px; line-height: 21.6px; }
  /* process stacks only below 768 */
  .process { flex-direction: column; align-items: center; }
  .process__step { max-width: 294px; flex: 1 1 auto; }
  .intro-band__photo img { height: 240px; }
}

/* ---------- "Top Reasons" infobox: 108px icon column + 462px text --------
   Measured: 88x88 white tile, radius 7, 1px hairline border, 50px amber glyph.
   At 390 the icon column narrows the text to 248px, which is what makes the
   source paragraphs run to 8 lines instead of 5.                            */
.benefit { display: flex; align-items: flex-start; gap: 20px; }
.benefit__icon {
  flex: 0 0 88px; width: 88px; height: 88px;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid rgba(136,136,136,.35); border-radius: var(--r-7);
  color: var(--brand);
}
.benefit__icon .ic { width: 50px; height: 50px; }
.benefit__body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767px) {
  .benefit { gap: 20px; }
  .benefit__icon { flex-basis: 88px; }
}

/* ---------- page title band (post / legal H1) --------------------------- */
.page-title { padding-block: 60px 0; }
.page-title h1 { font-size: 58px; line-height: 1.15; color: var(--text-dark); margin: 0; }
@media (max-width: 1024px) { .page-title h1 { font-size: 38px; } }
@media (max-width: 767px)  { .page-title h1 { font-size: 28px; } .page-title { padding-block: 34px 0; } }

/* ---------- long-form article ------------------------------------------
   Source article column is 787px at 1440, body 17px/25.5.                  */
.article-band { padding-block: 40px 60px; }
.article { max-width: 787px; }
.article h2 { font-size: 32px; margin: 34px 0 12px; }
.article h3 { font-size: 24px; margin: 26px 0 10px; }
.article h4 { font-size: 20px; margin: 22px 0 8px; }
.article p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 1.15em; }
.article ul, .article ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.article li { margin-bottom: .45em; }
.article a { color: var(--link); }
.article a:hover { text-decoration: underline; }
.article figure { margin: 24px 0; }
.article img { border-radius: var(--r-8); }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; }
.article th, .article td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; font-size: 16px; }
.article th { background: var(--surface); font-weight: var(--fw-bold); }
.article blockquote {
  margin: 24px 0; padding: 14px 20px; border-left: 4px solid var(--brand);
  background: var(--surface); font-style: italic;
}

/* ---------- blog / answer card ----------------------------------------- */
.post-card { background: var(--white); border-radius: var(--r-8); overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card h3 { font-size: 20px; margin: 16px 18px 10px; }
.post-card h3 a { color: var(--text-dark); }
.post-card h3 a:hover { color: var(--brand); text-decoration: none; }
.post-card .card__link { margin: auto 18px 18px; }

/* article + sidebar quote form (source article column is 787 of 1200) */
.article-band__grid { display: grid; grid-template-columns: 787px 1fr; gap: 40px; align-items: start; }
.article-aside { position: sticky; top: 24px; }
.article-aside .quote-form { padding: 24px; background-image: none; }
@media (max-width: 1024px) {
  .article-band__grid { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}
/* A grid/flex child defaults to min-width:auto, so it refuses to shrink below
   its content and overflow-x:auto never engages - the table's min-content
   width then widens the whole layout viewport on mobile (measured 477px at a
   390 device). min-width:0 on the ancestors lets the wrapper actually scroll. */
.table-wrap {
  overflow-x: auto; width: 100%; max-width: 100%; min-width: 0;
  margin: 0 0 1.4em; -webkit-overflow-scrolling: touch;
  /* isolate the child's intrinsic width: without this the table's min-width
     still feeds the document's intrinsic size and Chromium's mobile
     shrink-to-fit widens the layout viewport (measured 441 at a 390 device) */
}
.table-wrap table { min-width: 460px; }
/* Below the tablet breakpoint the 460px floor still feeds the document's
   intrinsic width, and Chromium's mobile shrink-to-fit then widens the layout
   viewport to 441 at a 390 device - the whole page renders zoomed out with a
   dead gutter. Let the table fill the column and wrap instead. */
@media (max-width: 767px) {
  .table-wrap table { min-width: 100%; }
  .table-wrap th, .table-wrap td { padding: 8px 9px; font-size: 14px; }
}
.article, .article-band__grid > *, .article > * { min-width: 0; }
.nap-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px 30px; }
.nap-grid h3, .nap-grid h4 { font-size: 20px; margin: 0 0 6px; color: var(--text-dark); }
.nap-grid p { margin: 0 0 4px; color: var(--text-muted); }
@media (max-width: 1024px) { .nap-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px)  { .nap-grid { grid-template-columns: 1fr; } }
.post-card__excerpt { margin: 0 18px 14px; font-size: 16px; line-height: 1.5; color: var(--text-muted); }
/* article blocks used as page sections (location/service copy) run full width;
   only the blog post body is constrained to the 787px reading column */
.article--wide { max-width: none; }
.article-band__grid .article--wide { max-width: 787px; }
.article--wide > figure { float: right; max-width: 420px; margin: 0 0 20px 30px; }
.article--wide > figure img { width: 100%; height: auto; }
@media (max-width: 767px) { .article--wide > figure { float: none; max-width: 100%; margin: 20px 0; } }

/* ---------- sub-page templates (location / service / reviews / posts) ---- */
.eyebrow { font-size: 16px; font-weight: var(--fw-bold); color: var(--brand); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.hero h1.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); color: var(--white); margin: 0 0 20px; }
.hero h1.hero__title span { color: var(--brand); }
.hero .hero__lede { font-size: 22px; line-height: 1.5; color: var(--text-on-image); margin: 0 0 30px; max-width: 60ch; }
.rule--left { margin-left: 0; }

.banner { position: relative; background: var(--text-dark) center/cover no-repeat; color: var(--white); text-align: center; padding-block: 85px; }
.banner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.banner > .container { position: relative; z-index: 1; }
.banner h1 { font-size: 40px; line-height: 1.2; color: var(--white); margin: 0 0 12px; }
.banner p { color: var(--text-on-image); max-width: 70ch; margin: 0 auto; }

.split { display: grid; grid-template-columns: 445px 1fr; gap: 60px; align-items: center; }
.split--photo-right { grid-template-columns: 1fr 502px; }
.split--photo-right .split__photo { order: 2; }
.split--no-photo { grid-template-columns: 1fr; }
.split__photo { margin: 0; }
.split__photo img { width: 100%; height: auto; max-height: 670px; object-fit: cover; border-radius: var(--r-8); display: block; }
.split__body h2, .split__body h1 { font-size: var(--fs-h2); margin: 0 0 12px; }
.split__body .rule { margin-bottom: 22px; }
.split__body h3 { font-size: 22px; margin: 18px 0 8px; }
.split__body p { margin: 0 0 14px; }
.split__lists { display: grid; gap: 0 30px; }
.split__lists--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.icon-list, .plain-list { margin: 0; padding: 0; list-style: none; }
.icon-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; line-height: 1.45; }
.icon-list .ic { flex: none; color: var(--brand); font-size: 18px; margin-top: 3px; }
.icon-list a { color: inherit; }
.icon-list a:hover { color: var(--brand); text-decoration: none; }
.icon-list--center { max-width: 320px; margin: 0 auto; font-weight: var(--fw-bold); }
.plain-list { padding-left: 1.2em; list-style: disc; }
.plain-list li { margin-bottom: 8px; }
.band--dark .split__body, .band--dark .icon-list a { color: var(--white); }

.quote-band { background: #4a4a4a center/cover no-repeat; color: var(--white); }
.quote-band__grid { display: grid; grid-template-columns: 1fr 399px; gap: 60px; align-items: center; }
.quote-band__copy h2 { color: var(--white); font-size: var(--fs-h2); margin: 0 0 12px; }
.quote-band__copy h2 span, .quote-band__copy h3 span { color: var(--brand); }
.quote-band__copy .rule { margin-bottom: 22px; }
.quote-band__copy p { font-size: 20px; line-height: 1.5; color: var(--text-on-image); margin: 0 0 16px; }
.quote-band__copy .btn { margin-top: 10px; }

.contact-page__grid { display: grid; grid-template-columns: 1fr 480px; gap: 60px; align-items: center; }
.contact-page h1 { font-size: 36px; margin: 0 0 8px; }
.contact-page__lead { color: var(--text-muted); margin: 0 0 30px; }
.nap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 30px; }
.nap__item { display: flex; gap: 14px; align-items: flex-start; }
.nap__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--white); display: grid; place-items: center; font-size: 17px; }
.nap h3 { font-size: 16px; color: var(--brand); margin: 0 0 4px; }
.nap p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.nap a { color: inherit; }
.contact-page__social-title { font-size: 16px; color: var(--brand); margin: 34px 0 10px; padding-top: 24px; border-top: 1px solid var(--border); }
.social-row { display: flex; gap: 10px; }
.social-row a, .social-row__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--text-dark); color: var(--white); display: grid; place-items: center; }
.social-row a:hover { background: var(--brand); }

.process--4 .process__step { max-width: 250px; }
.process__num { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }

.cta--plain { background: var(--white); color: var(--text-dark); text-align: center; }
.cta--plain .cta__lead { color: var(--text-dark); font-size: 36px; line-height: 1.25; max-width: 24ch; margin: 0 auto 26px; }
.cta--plain::after { display: none; }

.page-title--brand { background: var(--brand); text-align: center; padding-block: 48px; }
.page-title--brand h1 { color: var(--text-dark); font-size: 58px; }
.page-title--brand .post-meta { margin: 14px 0 0; font-size: 14px; color: var(--text-dark); }
.page-title--light h1 { color: var(--white); font-size: 40px; }

.article--post > figure { float: none; max-width: 100%; margin: 24px 0; }
.article--post > figure img { width: 100%; height: auto; }
.toc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-8); padding: 16px 18px; margin-bottom: 20px; }
.toc h3 { font-size: 16px; margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.5; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--text); }
.toc a:hover { color: var(--brand); }

.stars { display: inline-flex; gap: 2px; color: var(--brand); font-size: 16px; }
.review-grid .review-card { margin: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-8); padding: 24px 22px; display: flex; flex-direction: column; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.review-card p { font-size: 15px; line-height: 1.55; color: var(--text); margin: 14px 0 18px; flex: 1; }
.review-card footer { font-size: 20px; font-weight: var(--fw-bold); color: var(--brand); }
.card--compact { min-height: 0; text-decoration: none; color: inherit; text-align: center; padding-bottom: 22px; }
.card--compact h3 { font-size: 18px; margin: 0; }
.card--compact .card__media { height: 250px; }
.card--compact .card__media img { width: 100%; height: 100%; object-fit: cover; }

.g-reviews { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 0 50px; }
.g-reviews__badge { display: grid; gap: 6px; justify-items: start; font-size: 14px; }
.g-reviews__badge strong { font-size: 16px; }
.g-reviews__link { font-size: 13px; padding: 6px 12px; border: 1px solid var(--text-dark); border-radius: var(--r-5); color: var(--text-dark); }
.g-reviews__link:hover { background: var(--text-dark); color: var(--white); text-decoration: none; }
.g-reviews__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 0; }
.g-reviews__track::-webkit-scrollbar { display: none; }
.g-review { flex: 0 0 300px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-8); padding: 16px; }
.g-review header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.g-review header > .ic { margin-left: auto; color: var(--brand); }
.g-review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--white); display: grid; place-items: center; font-weight: var(--fw-bold); }
.g-review header strong { display: block; font-size: 14px; }
.g-review header time { font-size: 12px; color: var(--text-muted); }
.g-review p { font-size: 14px; line-height: 1.5; margin: 8px 0 0; max-height: 105px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.g-reviews .carousel__btn--prev { left: 0; }
.g-reviews .carousel__btn--next { right: 0; }

.areas-acc-title { padding-bottom: 0; }
.areas-acc-title + .areas-acc-band { padding-top: 24px; }
.areas-acc-band .areas-band__title { text-align: center; margin: 0 0 26px; font-size: 49px; }
.areas-acc { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 30px; align-items: start; }
.areas-acc .accordion__item { border: 1px solid var(--border); }
.areas-acc .accordion__head h3 { font-size: 15px; }

.faq--answers { display: grid; gap: 30px; }
.answer { display: grid; grid-template-columns: 380px 1fr; gap: 30px; align-items: center; background: var(--surface-alt); border-radius: var(--r-8); overflow: hidden; }
.answer__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.answer__media img { width: 100%; height: 100%; object-fit: cover; }
.answer > div { padding: 20px 24px 20px 0; }
.answer h2 { font-size: 24px; margin: 0 0 10px; }
.answer h2 a { color: var(--text-dark); }
.answer h2 a:hover { color: var(--brand); text-decoration: none; }
.answer p { color: var(--text-muted); margin: 0 0 12px; }

@media (max-width: 1024px) {
  .split, .split--photo-right, .quote-band__grid, .contact-page__grid { grid-template-columns: 1fr; gap: 34px; }
  .split--photo-right .split__photo { order: 0; }
  .g-reviews { grid-template-columns: 1fr; padding: 0; }
  .g-reviews .carousel__btn { display: none; }
  .areas-acc { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .banner h1, .page-title--brand h1 { font-size: 34px; }
  .answer { grid-template-columns: 1fr; }
  .answer > div { padding: 0 22px 22px; }
  .cta--plain .cta__lead { font-size: 28px; }
}
@media (max-width: 767px) {
  .hero h1.hero__title { font-size: clamp(28px, 8vw, 40px); }
  .hero .hero__lede { font-size: 17px; }
  .split__lists--2, .nap, .areas-acc { grid-template-columns: 1fr; }
  .banner { padding-block: 50px; }
  .banner h1 { font-size: 28px; }
  .page-title--brand h1 { font-size: 26px; }
  .areas-acc-band .areas-band__title { font-size: 30px; }
  .quote-band__copy p { font-size: 17px; }
  .g-review { flex-basis: 260px; }
}
.banner--lg { padding-block: 110px; }
.banner--lg h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
.banner__tag { color: var(--brand) !important; text-transform: uppercase; letter-spacing: .12em; font-weight: var(--fw-bold); font-size: 20px; }
.center-card { max-width: 750px; margin: 0 auto; background: var(--white); border-radius: var(--r-8); padding: 46px 40px; text-align: center; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.center-card h1, .center-card h2 { font-size: 36px; margin: 0 0 10px; }
.center-card p { color: var(--text-muted); margin: 0 0 22px; }
/* Areas band. With the promo card the list shares the row (690 + 491) and runs
   two across, as the source does. Without it (--plain, every location page) the
   list owns the full container, so it runs five across over two rows instead of
   hugging the left edge and leaving the right half of the band empty. */
/* The icon-card grid runs 570px columns with a 60px gutter on the source; the
   generic .grid--2 gap of 40 makes the cards 10px wider than the original. */
.grid--benefits { column-gap: 60px; row-gap: 40px; }

.areas-band--plain .areas-band__grid { grid-template-columns: 1fr; }
.areas-band--plain .areas { grid-template-columns: repeat(5, minmax(0,1fr)); }
.areas-band:not(.areas-band--plain) .areas { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* below 1024 the promo card drops under the list, so both variants are full width */
@media (max-width: 1024px) { .areas-band .areas { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 767px)  { .areas-band .areas { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.faq__q span { text-transform: capitalize; }
.card--text { min-height: 0; padding-top: 26px; }
.answers-list { display: grid; gap: 30px; }
@media (max-width: 767px) { .banner--lg { padding-block: 60px; } .banner--lg h1 { font-size: 30px; } .banner__tag { font-size: 15px; } .center-card { padding: 30px 20px; } .center-card h1, .center-card h2 { font-size: 26px; } }
.process__label { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
.g-review__more { background: none; border: 0; padding: 6px 0 0; color: var(--brand); font: inherit; font-size: 13px; cursor: pointer; }
.g-review.is-open p { max-height: none; -webkit-line-clamp: unset; display: block; }

/* 404 page */
.notfound { padding-block: 48px 70px; }
.notfound__lead { font-size: 19px; line-height: 1.6; color: var(--text-muted); max-width: 720px; margin: 0 0 26px; }
.notfound__list { margin: 0 0 30px; padding-left: 20px; line-height: 2.1; }
.notfound__list a { color: var(--link); font-weight: var(--fw-bold); }

/* honeypot spam trap - off-screen rather than display:none so bots that skip hidden fields still fill it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   2026-09-08 client review (screen recording): nine components the clone
   rendered as a different pattern from the source. Each block names the
   source rule it reproduces.
   ========================================================================== */

/* H1s carry no text-transform on the source (design-raw: h1 textTransform
   none) - "Landscaping in Newmarket, ON", not "In". Other headings keep the
   capitalize the ekit heading widget applies. */
h1 { text-transform: none; }

/* header dropdown: hovered item is an amber bar with dark text */
.nav__dropdown a:hover, .nav__dropdown a:focus-visible { background: var(--brand); color: var(--text-dark); }

/* material tiles: the source hides the description (.hide-description:
   opacity 0, visibility hidden, height 0) and reveals it on hover of the tile.
   Only the title and the small rule show at rest. */
.mat-card p {
  opacity: 0; visibility: hidden; height: 0; margin: 0; overflow: hidden;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out, height .6s ease-in-out;
}
.mat-card:hover p, .mat-card:focus-within p {
  opacity: 1; visibility: visible; height: auto; margin: 0 0 22px;
  transition: opacity .6s ease-in-out, visibility .6s ease-in-out, height .6s ease-in-out;
}
.mat-card .rule { margin: 10px 0 24px; }
.mat-card:hover .rule, .mat-card:focus-within .rule { margin: 10px 0 12px; }
@media (max-width: 767px) { .mat-card:hover p, .mat-card:focus-within p { visibility: hidden; height: 0; margin: 0; } }

/* check-circle icon-box bands (ElementsKit infobox, e-fas-check-circle):
   row of three - list, photo column (background-size cover), list - 30px gap;
   boxes 40px apart, icon 32px amber 12px from the text, title 20px/800 with
   no transform, copy 16px/26px. */
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: stretch; margin-top: 1em; }
.check-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; }
.check-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-col { display: flex; flex-direction: column; gap: 40px; }
.check-box { display: flex; gap: 12px; align-items: flex-start; }
.check-box__icon { flex: none; color: var(--brand); font-size: 32px; line-height: 1; display: inline-flex; }
.check-box__icon .ic { width: 1em; height: 1em; }
.check-box h3 { font-size: 20px; font-weight: var(--fw-xbold); line-height: 1.2; margin: 0 0 6px; color: var(--text-dark); text-transform: none; }
.check-box p { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-muted); }
.check-photo { margin: 0; border-radius: var(--r-5); overflow: hidden; min-height: 320px; }
.check-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  .check-grid, .check-grid--2, .check-grid--3 { grid-template-columns: 1fr; }
  .check-photo { aspect-ratio: 4 / 3; min-height: 0; }
}

/* process cards: the icon circle overlaps the card's top edge by 42px on the
   source (margin -42 0 -6). Already so in .process__icon; nothing to add. */

/* CTA band: a wood photo (CTA-bg.webp) behind one white line and a button */
.cta { background-color: var(--text-dark); }
.cta--plain { background-image: none !important; }
.cta--plain::after { background: none; }
.cta--plain .cta__lead { color: var(--text-dark); }

/* justified gallery (Elementor gallery widget, layout "justified":
   ideal row height 200 / 150 mobile, gap 10, overlay rgba(0,0,0,.5) on hover) */
.jgallery { --rh: 200px; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.jgallery + .jgallery { margin-top: 10px; }
.jgallery__item {
  position: relative; display: block; overflow: hidden; background: var(--surface);
  flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--rh));
  min-width: 0;
}
.jgallery__item img { display: block; width: 100%; height: auto; }
.jgallery__item::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .8s ease;
}
.jgallery__item:hover::after, .jgallery__item:focus-visible::after { opacity: 1; }
.jgallery__fill { flex: 1000 1 0; }
@media (max-width: 767px) { .jgallery { --rh: 150px; } }

/* lightbox for the gallery */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(0,0,0,.92); }
.lightbox__frame { position: fixed; inset: 0; display: grid; place-items: center; padding: 56px 64px; }
.lightbox__frame img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox__cap { position: fixed; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--white); font-size: 15px; padding: 0 20px; }
.lightbox__btn {
  position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: var(--white); cursor: pointer; display: grid; place-items: center;
}
.lightbox__btn:hover { background: var(--brand); }
.lightbox__btn .ic { width: 22px; height: 22px; }
.lightbox__btn--prev { left: 14px; } .lightbox__btn--prev .ic { transform: rotate(90deg); }
.lightbox__btn--next { right: 14px; } .lightbox__btn--next .ic { transform: rotate(-90deg); }
.lightbox__btn--close { top: 14px; right: 14px; transform: none; }
@media (max-width: 767px) { .lightbox__frame { padding: 60px 8px; } .lightbox__btn { width: 40px; height: 40px; } }

/* "Areas we serve in Newmarket": heading.default widget, centred, 49px/900,
   amber, no text-transform */
.areas-acc-title .areas-band__title { text-align: center; font-size: 49px; font-weight: 900; text-transform: none; color: var(--brand); margin: 0; }
@media (max-width: 767px) { .areas-acc-title .areas-band__title { font-size: 30px; } }

/* NAP block above the FAQ: one column. Image-box (logo 20% wide beside the
   name), then icon-boxes 14px apart with a solid amber circle, amber 5-level
   title, muted copy. Row padding 80/50, left column inset 50px. */
.local-band { padding-top: 80px; padding-bottom: 50px; }
.local--stack { display: grid; gap: 26px; padding-left: 50px; max-width: 603px; }
.local__brand { display: flex; align-items: center; gap: 15px; }
.local__brand .local__logo { width: 20%; max-width: 110px; height: auto; margin: 0; }
.local__brand h3 { font-size: 22px; margin: 0 0 5px; color: var(--brand); }
.local__brand p { margin: 0; color: var(--text-muted); }
.nap--stack { display: grid; grid-template-columns: 1fr; gap: 14px; }
.nap--stack .nap__item { align-items: center; }
.nap--stack .nap__icon { width: 44px; height: 44px; font-size: 22px; }
.nap--stack h3 { font-size: 17px; margin: 0 0 2px; }
.nap--stack p { font-size: 16px; }
@media (max-width: 767px) { .local--stack { padding-left: 0; } }

/* FAQ: ElementsKit accordion. Cards r32 with a 0 0 10px rgba(0,0,0,.19)
   shadow; the open card turns amber (--e-global-color-accent) with white
   question, a 1px rgba(255,255,255,.2) rule under it, white answer,
   body padding 25 65 26 30; question 14px 30px, black, capitalised. */
.faq__item { border: 0; box-shadow: 0 0 10px rgba(0,0,0,.19); transition: background var(--dur) var(--ease); }
.faq__q { padding: 14px 30px; color: var(--black); }
.faq__q .ic { color: var(--black); }
.faq__item[data-open="true"] { background: var(--brand); }
.faq__item[data-open="true"] .faq__q { color: var(--white); border-bottom: 1px solid rgba(255,255,255,.2); box-shadow: -1px 7px 15px 0 rgba(0,0,0,.07); }
.faq__item[data-open="true"] .faq__q .ic { color: var(--white); }
.faq__a p { padding: 25px 65px 26px 30px; }
.faq__item[data-open="true"] .faq__a p { color: var(--white); }
.faq__item[data-open="true"] .faq__a a { color: var(--white); text-decoration: underline; }
@media (max-width: 767px) { .faq__a p { padding: 18px 30px 22px; } }
/* plus at rest, minus when open (ekit normal/active icon pair), no rotation */
.faq__ic { display: inline-flex; flex: 0 0 auto; }
.faq__ic .ic { transition: none; }
.faq__item[data-open="true"] .faq__q .faq__ic .ic { transform: none; }
.faq__ic .ic:last-child, .faq__item[data-open="true"] .faq__ic .ic:first-child { display: none; }
.faq__item[data-open="true"] .faq__ic .ic:last-child { display: block; }

/* Google review cards styled after the source's Trustindex "thumbnail"
   layout (client request 2026-09-09): light card, round profile photo, the
   Google G at the top right, name + review age, Google-gold stars with the
   blue verified tick, clamped text + "Read more". */
.g-review { flex: 0 0 250px; background: #f8f8f8; border: 0; border-radius: 10px; padding: 18px 18px 16px; }
.g-review header { align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.g-review__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.g-review__avatar--initial { background: var(--brand); color: var(--white); display: grid; place-items: center; font-weight: var(--fw-bold); }
.g-review header strong { font-size: 15px; line-height: 1.2; color: var(--text-dark); }
.g-review header time { display: block; font-size: 13px; color: #6b6b6b; margin-top: 2px; }
.g-review__platform { margin-left: auto; flex: none; display: inline-flex; }
.g-review__platform .ic { width: 22px; height: 22px; }
.g-review__stars { display: flex; align-items: center; gap: 6px; }
.g-review__stars .stars { display: inline-flex; gap: 1px; color: #f6b700; }
.g-review__stars .stars .ic { width: 17px; height: 17px; }
.g-review__verified .ic { width: 15px; height: 15px; display: block; }
.g-review p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 10px 0 0; max-height: 88px; -webkit-line-clamp: 4; }
.g-review__more { color: #6b6b6b; font-size: 13px; }
.g-review__more:hover { color: var(--brand); }
@media (max-width: 767px) { .g-review { flex-basis: 240px; } }

/* "Areas we serve" title + accordion bands. bands.css applies the homepage's
   per-index paddings to every page with `main > section:nth-of-type(n)`,
   which out-ranks a single class, so the 85/102 padding of the homepage's
   14th band landed on this 64px title band (source: heading widget with
   15px below, no band padding; accordion band 266px incl. its own space). */
#main > section.areas-acc-title { padding: 0 0 15px; }   /* #main: must out-rank bands.css, which loads later */
#main > section.areas-acc-band { padding: 0 0 60px; }

/* Scroll-reveal disabled: the source has no entrance animation, and hiding
   blocks until an IntersectionObserver fires is the one thing that can leave
   a band blank (fast scrollbar drags, print, captures). Content always shows. */
.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }

/* ==========================================================================
   Client review round 2 (2026-09-09) - measured on xpdecking.ca at 1440/390
   ========================================================================== */
/* badge strip: the white card rides 34px up into the hero photo on every
   page type; card 1008x136 with 83px badges, 366x88 with 45px badges at 390 */
.badges-band { position: relative; z-index: 2; margin-top: -34px; }
.badges { min-height: 136px; }
.badges img { height: 83px; }
@media (max-width: 1024px) { .badges img { height: 60px; } .badges { min-height: 0; } }
@media (max-width: 767px)  { .badges { padding: 16px 10px; min-height: 88px; } .badges img { height: 45px; } }

/* section headings on the check-icon and reasons bands are 36px, not 40 */
.sec-head--sm h2 { font-size: var(--fs-h2-sm); }

/* FAQ question: 700 weight in #333 on the source (the .ekit-accordion--toggler link) */
.faq__q { font-weight: var(--fw-bold); color: var(--text); }

/* intro band whose photo sits to the right of the copy; portrait photos are
   capped at the band's 456px so the column keeps the source's height */
.intro-band__grid--photo-right .intro-band__photo { order: 2; }
.intro-band__photo img { max-height: 456px; object-fit: cover; border-radius: var(--r-8); }

/* NAP block with the map in the source's empty right-hand column */
.local--split { display: grid; grid-template-columns: 603px 577px; gap: 20px; align-items: center; min-height: 433px; }
.local--split .local--stack { padding-left: 50px; max-width: none; }
.local__map { border-radius: var(--r-8); overflow: hidden; line-height: 0; }
.local__map iframe { width: 100%; height: 433px; border: 0; display: block; }
@media (max-width: 1024px) {
  .local--split { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .local--split .local--stack { padding-left: 0; }
  .local__map iframe { height: 320px; }
}