/*
Theme Name:   Zencore Child
Theme URI:    https://zencoredynamics.ca
Description:  Flatsome child theme for Zencore Dynamics Ltd. Dark brand theme: palette, typography, buttons, cards, pipe-flow dividers and mobile call bar.
Author:       Zencore Dynamics Ltd
Template:     flatsome
Version:      1.6.4
Text Domain:  zencore-child
*/

/* =========================================================
   HOW TO USE THIS FILE
   - Colours live in :root below. Change a colour once and it
     updates everywhere.
   - Classes starting with "zc-" are added in UX Builder:
     select an element > Advanced > Class.
   - Set the same colours and fonts in Flatsome > Theme Options
     too (see 04-child-theme.md), so the builder preview matches.
   ========================================================= */


/* ---------- 1. Brand tokens ---------- */
:root {
  /* Brand palette (from the logo) */
  --zc-charcoal:   #22363E; /* accent sections */
  --zc-navy:       #232D35; /* header, footer, feature cards */
  --zc-ember:      #D37255; /* accents, icons, eyebrows (5.4:1 on ink) */
  --zc-orange:     #B5573C; /* buttons with white text (AA 4.78:1) */
  --zc-rust:       #974342; /* button hover */
  --zc-peach:      #F1AA77; /* links, highlights (9.2:1 on ink) */
  --zc-teal:       #678389; /* borders, icons */
  --zc-teal-text:  #8FA9AE; /* small secondary teal text (7.2:1 on ink) */
  --zc-cream:      #FDE8C7; /* accent text only, never a background */
  --zc-white:      #FFFFFF;

  /* Dark surfaces: the whole site sits on these (no white backgrounds) */
  --zc-ink:        #12181C; /* page background */
  --zc-base:       #171F24; /* alternate sections */
  --zc-raise:      #1E282E; /* cards, form fields */
  --zc-line:       rgba(143,169,174,.18); /* hairlines and card borders */

  /* Text on dark (soft off-white, easier on the eyes than pure white) */
  --zc-text:       #E6ECED; /* body, 15:1 on ink */
  --zc-head:       #F4F1EA; /* headings, warm off-white */
  --zc-muted:      #A9B8BB; /* secondary text, 8.7:1 on ink */
  --zc-mist:       var(--zc-base); /* kept so older zc-mist classes stay dark */

  /* Pipe colours for diagrams and the 3D model */
  --zc-pipe-hot:   var(--zc-ember);
  --zc-pipe-cold:  var(--zc-teal);
  --zc-pipe-loop:  var(--zc-peach);

  /* Type */
  --zc-font-head: "Barlow Semi Condensed","Barlow Semi Condensed Fallback", "Arial Narrow", system-ui, sans-serif;
  --zc-font-body: "Source Sans 3","Source Sans 3 Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape and motion */
  --zc-radius:     10px;
  --zc-radius-sm:  6px;
  --zc-shadow:     0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --zc-shadow-lg:  0 2px 4px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.45);
  --zc-ease:       cubic-bezier(.2,.7,.2,1);

  /* Spacing scale */
  --zc-space-1: 8px;
  --zc-space-2: 16px;
  --zc-space-3: 24px;
  --zc-space-4: 40px;
  --zc-space-5: 64px;
  --zc-space-6: 96px;

  /* Flatsome reads these in recent versions */
  --primary-color: var(--zc-orange);
  --fs-color-primary: var(--zc-orange);
  --fs-color-secondary: var(--zc-navy);
  --fs-color-alert: var(--zc-rust);
}


/* ---------- 2. Typography and page background ---------- */
html, body, #wrapper, #main, .page-wrapper, .section, .row-dark, .blog-wrapper {
  background-color: var(--zc-ink);
}
body {
  font-family: var(--zc-font-body);
  color: var(--zc-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.heading-font, .section-title-main, .banner h1, .banner h2 {
  font-family: var(--zc-font-head);
  color: var(--zc-head);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
h4 { font-size: 1.2rem; }

p { max-width: 68ch; }
.text-center p { margin-left: auto; margin-right: auto; }

/* Small eyebrow line above a heading, e.g. the tagline in the hero */
.zc-eyebrow {
  display: inline-block;
  font-family: var(--zc-font-head);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zc-ember);
  margin-bottom: var(--zc-space-2);
}
.zc-muted, small, .is-small { color: var(--zc-muted); }
p, li, td, th, label, .entry-content { color: var(--zc-text); }

a { color: var(--zc-peach); }
a:hover { color: var(--zc-cream); }

/* Everything is dark now, so Flatsome's "Dark text" switch changes nothing */
.dark, .dark p, .dark li { color: var(--zc-text); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--zc-head); }
hr, .is-divider { border-color: var(--zc-line); background-color: var(--zc-line); }


/* ---------- 3. Buttons ---------- */
.button, button, input[type="submit"], input[type="button"] {
  font-family: var(--zc-font-head);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: none;
  border-radius: var(--zc-radius-sm);
  padding: .55em 1.4em;
  min-height: 48px;           /* finger-sized */
  line-height: 1.6;
  transition: background-color .2s var(--zc-ease), transform .2s var(--zc-ease), box-shadow .2s var(--zc-ease);
}

.button.primary, input[type="submit"], .button.alt {
  background-color: var(--zc-orange);
  border-color: var(--zc-orange);
  color: var(--zc-white);
}
.button.primary:hover, input[type="submit"]:hover, .button.alt:hover {
  background-color: var(--zc-rust);
  border-color: var(--zc-rust);
  color: var(--zc-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(151,67,66,.28);
}

.button.secondary {
  background-color: var(--zc-raise);
  border-color: rgba(143,169,174,.35);
  color: var(--zc-text);
}
.button.secondary:hover { background-color: var(--zc-charcoal); border-color: var(--zc-teal); }

/* Outline buttons (e.g. "Call 778-837-9572" in the hero) */
.button.is-outline, .dark .button.is-outline {
  border: 2px solid rgba(230,236,237,.6);
  background: transparent;
  color: var(--zc-text);
}
.button.is-outline:hover, .dark .button.is-outline:hover { background: var(--zc-text); color: var(--zc-ink); border-color: var(--zc-text); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--zc-peach);
  outline-offset: 2px;
}


/* ---------- 4. Header ---------- */
.header-top {
  background-color: var(--zc-ink) !important;
  border-bottom: 1px solid var(--zc-line);
  font-size: .85rem;
}
.header-top, .header-top a { color: var(--zc-muted); }
.header-top a:hover { color: var(--zc-peach); }

.header-wrapper, .header-main, .header-bottom, .stuck .header-main { background-color: var(--zc-navy) !important; }
.header-main { box-shadow: 0 1px 0 var(--zc-line); }
.nav-dropdown { background-color: var(--zc-raise) !important; border: 1px solid var(--zc-line); }
.nav-dropdown li a { color: var(--zc-text) !important; }
.nav-dropdown li a:hover { color: var(--zc-peach) !important; }
.mobile-sidebar, .off-canvas-left .mfp-content, .off-canvas-right .mfp-content { background-color: var(--zc-navy) !important; }
.mobile-sidebar a, .off-canvas .nav-sidebar a { color: var(--zc-text) !important; }
.header-main .nav > li > a {
  font-family: var(--zc-font-head);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .02em;
  color: var(--zc-text);
}
.header-main .nav > li > a:hover,
.header-main .nav > li.active > a { color: var(--zc-orange); }

/* Header CTA button: add class "zc-header-cta" in Header Builder */
.zc-header-cta.button { min-height: 42px; padding: .35em 1.1em; }


/* ---------- 5. Sections and spacing ---------- */
.section { padding-top: var(--zc-space-5); padding-bottom: var(--zc-space-5); }
@media (max-width: 849px) {
  .section { padding-top: var(--zc-space-4); padding-bottom: var(--zc-space-4); }
}

/* Section backgrounds: alternate these so sections don't blur together */
.zc-navy     { background-color: var(--zc-navy) !important; }
.zc-base     { background-color: var(--zc-base) !important; }
.zc-mist     { background-color: var(--zc-base) !important; }
/* "Warm" section (was cream): charcoal with a faint ember glow */
.zc-cream, .zc-warm {
  background: radial-gradient(120% 140% at 0% 0%, rgba(211,114,85,.14), transparent 55%), var(--zc-charcoal) !important;
}

/* Hero: add class "zc-hero" to the Banner */
.zc-hero .overlay {
  background: linear-gradient(100deg, rgba(18,24,28,.95) 0%, rgba(18,24,28,.78) 45%, rgba(18,24,28,.4) 100%) !important;
}
.zc-hero h1 { color: var(--zc-head); max-width: 18ch; }
.zc-hero p  { color: var(--zc-text); font-size: 1.15rem; }
.zc-hero .button { margin-right: var(--zc-space-1); margin-bottom: var(--zc-space-1); }


/* ---------- 6. Cards (service cards, project cards) ---------- */
/* Add class "zc-card" to a Featured Box, Icon Box or Image Box */
.zc-card {
  position: relative;
  background: var(--zc-raise);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  padding: var(--zc-space-3);
  box-shadow: var(--zc-shadow);
  height: 100%;
  overflow: hidden;
  transition: transform .25s var(--zc-ease), box-shadow .25s var(--zc-ease), border-color .25s var(--zc-ease);
}
.zc-card::before { /* orange bar that slides in on hover */
  content: "";
  position: absolute; left: 0; top: 0;
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--zc-orange), var(--zc-ember));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--zc-ease);
}
.zc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--zc-shadow-lg);
  border-color: rgba(181,87,60,.35);
}
.zc-card:hover::before { transform: scaleX(1); }
.zc-card h3, .zc-card h4 { margin-bottom: .35em; }
.zc-card p { color: var(--zc-muted); margin-bottom: .6em; }
.zc-card .icon-box-img svg, .zc-card .icon-box-img img { color: var(--zc-ember); }

/* "Learn more →" link inside cards */
.zc-more {
  font-family: var(--zc-font-head);
  font-weight: 600;
  color: var(--zc-peach);
  text-decoration: none;
}
.zc-more::after { content: " →"; display: inline-block; transition: transform .2s var(--zc-ease); }
.zc-card:hover .zc-more::after, .zc-more:hover::after { transform: translateX(4px); }

/* Wide feature card (Service & maintenance, first card) */
.zc-card--feature {
  background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-navy));
  border-color: rgba(181,87,60,.4);
}
.zc-card--feature h3 { color: var(--zc-head); }
.zc-card--feature p { color: var(--zc-text); }
.zc-card--feature .zc-more { color: var(--zc-peach); }

/* Project cards: image zoom on hover (Image Box with class zc-project) */
.zc-project .box-image { border-radius: var(--zc-radius); overflow: hidden; }
.zc-project .box-image img { transition: transform .6s var(--zc-ease); }
.zc-project:hover .box-image img { transform: scale(1.05); }
.zc-project .box-text h4 { margin-bottom: 0; }
.zc-project .box-text p { color: var(--zc-muted); font-size: .9rem; }


/* ---------- 7. Trust strip ---------- */
/* Row with class "zc-trust"; each column holds an Icon Box */
.zc-trust .icon-box { align-items: center; }
.zc-trust .icon-box-text h4,
.zc-trust .icon-box-text p {
  font-family: var(--zc-font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
  color: var(--zc-text);
}
.zc-trust { background-color: var(--zc-base); border-block: 1px solid var(--zc-line); }
.zc-trust .icon-box-img { color: var(--zc-ember); }
.zc-trust .col { border-right: 1px solid var(--zc-line); }
.zc-trust .col:last-child { border-right: 0; }
@media (max-width: 849px) { .zc-trust .col { border-right: 0; } }


/* ---------- 8. Service-call band ---------- */
/* Section with class "zc-service-band" */
.zc-service-band {
  position: relative;
  background-color: var(--zc-raise) !important;
  border-left: 6px solid var(--zc-orange);
}
.zc-service-band h2 { margin-bottom: .3em; }


/* ---------- 9. Pipe-flow divider (signature element) ----------
   Add an HTML element in UX Builder with:
   <div class="zc-flow" aria-hidden="true"><span></span><span></span></div>
   Two "pipes" (hot and cold) with water slowly flowing through them.
   ------------------------------------------------------------- */
.zc-flow {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  margin: var(--zc-space-2) 0 var(--zc-space-3);
}
.text-center .zc-flow { margin-left: auto; margin-right: auto; }
.zc-flow span {
  display: block;
  height: 4px;
  border-radius: 4px;
  background-size: 28px 4px;
  animation: zc-flow 1.6s linear infinite;
}
.zc-flow span:nth-child(1) {
  background-image: linear-gradient(90deg, var(--zc-pipe-hot) 0 60%, rgba(211,114,85,.35) 60% 100%);
}
.zc-flow span:nth-child(2) {
  background-image: linear-gradient(90deg, var(--zc-pipe-cold) 0 60%, rgba(103,131,137,.35) 60% 100%);
  animation-direction: reverse;   /* return line flows the other way */
}
@keyframes zc-flow { to { background-position: 28px 0; } }


/* ---------- 10. Service areas tiles ---------- */
.zc-area { border-radius: var(--zc-radius); overflow: hidden; }
.zc-area .box-text {
  background: linear-gradient(0deg, rgba(35,45,53,.88), rgba(35,45,53,0));
}
.zc-area .box-text h4 { color: var(--zc-white); font-family: var(--zc-font-head); }
.zc-area .box-image img { transition: transform .6s var(--zc-ease); }
.zc-area:hover .box-image img { transform: scale(1.06); }
.zc-also { color: var(--zc-muted); font-size: .95rem; }


/* ---------- 11. Forms (Contact Form 7 / WPForms / Flatsome) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  border: 1.5px solid rgba(143,169,174,.4);
  border-radius: var(--zc-radius-sm);
  background: var(--zc-raise);
  color: var(--zc-text);
  min-height: 48px;
  font-size: 16px;              /* stops iPhone zooming in on tap */
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 120px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--zc-orange);
  box-shadow: 0 0 0 3px rgba(241,170,119,.35);
  background: var(--zc-raise);
  color: var(--zc-text);
}
input::placeholder, textarea::placeholder { color: #7F9093; }
select option { background: var(--zc-raise); color: var(--zc-text); }
label, .dark label { font-weight: 600; color: var(--zc-text); font-size: .95rem; }
.wpcf7-not-valid-tip { color: var(--zc-peach); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--zc-teal); }


/* ---------- 12. 3D model block ([zencore_3d] shortcode) ---------- */
/* Shows a poster image until tapped, then loads the model in an iframe.
   Nothing 3D loads until someone asks for it, so the page stays fast,
   and the poster doesn't trap scrolling on phones. */
.zc-3d {
  position: relative;
  border-radius: var(--zc-radius);
  overflow: hidden;
  background: var(--zc-ink);
  border: 1px solid var(--zc-line);
  aspect-ratio: 16 / 9;
}
@media (max-width: 849px) { .zc-3d { aspect-ratio: 4 / 5; } }
.zc-3d picture, .zc-3d img, .zc-3d iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
}
.zc-3d::after { /* darkens the poster bottom so the button stands out */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(18,24,28,.75), rgba(18,24,28,0) 55%);
}
.zc-3d__btn {
  position: absolute; left: 50%; bottom: 24px; z-index: 2;
  transform: translateX(-50%);
  margin: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.zc-3d__btn:hover { transform: translateX(-50%) translateY(-1px); }
.zc-3d.is-live::after, .zc-3d.is-live picture, .zc-3d.is-live .zc-3d__btn { display: none; }
.zc-3d__close {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  min-height: 40px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(230,236,237,.5);
  background: rgba(18,24,28,.85);
  color: var(--zc-text);
  font-family: var(--zc-font-head); font-weight: 600; font-size: 1rem;
  cursor: pointer;
}
.zc-3d__close:hover { border-color: var(--zc-peach); color: var(--zc-peach); }


/* ---------- 13. Footer ---------- */
.footer-wrapper, .footer-1, .footer-2 { background-color: var(--zc-navy) !important; }
.footer-wrapper, .footer-wrapper p, .footer-wrapper li { color: var(--zc-muted); }
.footer-wrapper h3, .footer-wrapper h4, .footer-wrapper .widget-title { color: var(--zc-head); font-family: var(--zc-font-head); }
.footer-wrapper a { color: var(--zc-text); }
.footer-wrapper a:hover { color: var(--zc-peach); }
.absolute-footer { background-color: var(--zc-ink) !important; color: var(--zc-muted); font-size: .85rem; }


/* ---------- 14. Mobile call bar (output by functions.php) ---------- */
.zc-callbar { display: none; }
@media (max-width: 849px) {
  .zc-callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    display: grid; grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(18,24,28,.97);
    border-top: 1px solid var(--zc-line);
    box-shadow: 0 -6px 20px rgba(0,0,0,.4);
    transform: translateY(0);
    transition: transform .3s var(--zc-ease);
  }
  .zc-callbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px;
    border-radius: var(--zc-radius-sm);
    font-family: var(--zc-font-head);
    font-weight: 600; font-size: 1.05rem;
    text-decoration: none;
  }
  .zc-callbar__call { border: 2px solid rgba(230,236,237,.6); color: var(--zc-text); }
  .zc-callbar__book { background: var(--zc-orange); color: var(--zc-white); }
  .zc-callbar__book:active { background: var(--zc-rust); }
  .zc-callbar svg { width: 18px; height: 18px; fill: currentColor; }
  body { padding-bottom: 72px; }     /* keeps the footer clear of the bar */
  .back-to-top { bottom: 84px !important; }
}


/* ---------- 15. Hide old leftovers (until removed in the editor) ---------- */
.zc-hide { display: none !important; }


/* ---------- 16. Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .zc-card:hover, .button:hover { transform: none; }
}

/* ---- Page-content helpers added for the staging build (Roo, 2026-10-14) ---- */
.zc-section{padding:56px 0}
.zc-section:nth-of-type(even){background:#171F24}
.zc-inner{max-width:1100px;margin:0 auto;padding:0 20px}
.zc-hero{background:#232D35}
.zc-hero .zc-photo{width:100%;max-height:520px;object-fit:cover;border-radius:10px;margin-bottom:24px}
.zc-photo{max-width:100%;height:auto;border-radius:10px;display:block;margin:16px 0}
.zc-photo-placeholder{aspect-ratio:4/5;max-width:360px;background:#253139;border:1px dashed rgba(143,169,174,.4);border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#A9B8BB;font-size:14px;margin:16px 0}
.zc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:24px}
.zc-cards .zc-card{display:block;background:#1E282E;border-radius:10px;padding:22px;color:#E6ECED;text-decoration:none}
.zc-cards .zc-card--feature{grid-column:1/-1;background:#232D35}
.zc-cards .zc-card h3{margin:0 0 6px}
.zc-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:18px}
.zc-areas .zc-area{display:block;background:#1E282E;border-radius:10px;padding:22px 16px;text-align:center;color:#F4F1EA;font-weight:600}
.zc-trust p{text-align:center;font-weight:600;letter-spacing:.02em}
.zc-section table{width:100%}
.zc-builder iframe{background:#12181C;border-radius:10px}
/* Full-bleed hero + header fixes (v1.2.2) */
.zc-section.zc-hero{padding:0;background:#12181C}
.zc-hero:not(.zc-hero3d) .zc-inner{position:relative;max-width:none;padding:140px max(20px,calc(50% - 550px)) 110px;overflow:hidden}
.zc-hero .zc-photo{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;margin:0;border-radius:0;filter:brightness(.38)}
.zc-hero:not(.zc-hero3d) .zc-inner>*:not(.zc-photo){position:relative;z-index:1;max-width:660px}
.zc-hero h1{font-size:clamp(34px,5vw,58px)}
.zc-hero em{color:#F1AA77;font-style:normal;font-weight:600;letter-spacing:.04em}
.zc-photo-placeholder{aspect-ratio:16/10;max-width:100%;max-height:260px}
.header-main .nav>li>a,.header-main .nav-top-link{color:#E6ECED!important}
.header-main .nav>li>a:hover,.header-main .nav>li.active>a{color:#F1AA77!important}
#top-bar,.header-top{background:#1A2329!important;color:#C9D4D6}
#top-bar a{color:#F1AA77}
.zc-3d img{opacity:1!important}
@media (max-width:849px){.zc-hero:not(.zc-hero3d) .zc-inner{padding:90px 20px 70px}}
.zc-photo-placeholder{max-height:170px;aspect-ratio:auto;min-height:120px;max-width:420px}
.zc-trust .zc-inner{text-align:center}
.zc-trust p{max-width:900px;margin:0 auto}
.zc-section.zc-3d{display:block}

/* ---- v1.3.0 review fixes (2026-10-14) ---- */
/* 1. header pill: centre text */
.header-button .button,.header-main .button{display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important;min-height:40px;padding:0 1.2em!important;padding-top:2px!important;vertical-align:middle}
/* 2. equal-height content buttons */
.zc-section .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;line-height:1.15;padding:0 1.3em;margin:0 10px 10px 0;vertical-align:middle;box-sizing:border-box;border-width:2px}
.zc-section .button.is-outline{border:2px solid rgba(230,236,237,.6);background:transparent;color:#E6ECED}
/* 3. service band: button on its own line + maintenance card */
.zc-service-band p{max-width:720px}
.zc-service-band blockquote{margin:22px 0 0;max-width:720px;background:#1E282E;border:1px solid rgba(143,169,174,.2);border-left:4px solid #B5573C;border-radius:0 10px 10px 0;padding:16px 20px;font-style:normal}
.zc-service-band blockquote p{margin:0;color:#E6ECED}
.zc-service-band blockquote a{color:#F1AA77;font-weight:600;white-space:nowrap}
/* 4. recent work grid */
.zc-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:20px 0 24px}
.zc-project-card{background:#1E282E;border-radius:10px;padding:14px;border:1px solid rgba(143,169,174,.15)}
.zc-project-card .zc-photo-placeholder{max-width:none;margin:0 0 12px;min-height:150px}
.zc-project-card .zc-eyebrow{font:600 .8rem/1 "Barlow Semi Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#F1AA77;margin:0 0 6px}
.zc-project-card h3{font-size:1.15rem;margin:0;line-height:1.25}
/* 5. smooth sticky header: no animation, no shrink, reserved space */
.header-wrapper,.header-wrapper.stuck{animation:none!important;transition:none!important;will-change:transform;transform:translateZ(0)}
.header-wrapper.stuck .header-main,.header-main{height:96px!important}
.header-wrapper.stuck .header-main .nav>li>a{line-height:96px}
.header-wrapper.stuck .logo img{max-height:80px!important}
.stuck .header-top{display:none}
#header.has-sticky{min-height:132px}
@media (max-width:849px){#header.has-sticky{min-height:96px}}
/* 9. projects page old banner + dividers */
.page-id-projects .banner{display:none}
.is-divider{margin-left:auto!important;margin-right:auto!important}
.text-center .is-divider{display:block}
.zc-projects-hero{text-align:center}
.zc-projects-hero p{margin-left:auto;margin-right:auto;max-width:720px}
/* 10. top bar spacing */
#top-bar .html_topbar_left,#top-bar .html_topbar_right,#top-bar .html{white-space:nowrap}
#top-bar .zc-sep{display:inline-block;margin:0 12px;opacity:.45}
#top-bar .flex-col{padding:0 8px}
@media (max-width:849px){#top-bar{display:none}}

/* projects page: centre intro text and dividers */
.page-id-916 #content .text p.lead,.page-id-916 #content .text{margin-left:auto!important;margin-right:auto!important;max-width:780px;text-align:center}
.page-id-916 #content > .row:first-of-type{justify-content:center}
.page-id-916 .is-divider{margin:30px auto!important}

.zc-section .zc-photo{max-height:520px;width:100%;object-fit:cover}
/* v1.4.0 project pages + before/after */
.zc-project-card{display:block;text-decoration:none;color:#E6ECED;transition:transform .2s,border-color .2s}
a.zc-project-card:hover{transform:translateY(-2px);border-color:#B5573C}
.zc-card-img{width:100%;height:150px;object-fit:cover;border-radius:8px;margin:0 0 12px;display:block}
.zc-more{display:inline-block;margin-top:8px;color:#F1AA77;font-weight:600;font-size:.92rem}
.zc-ba{margin:28px 0}
.zc-ba h3{margin:0 0 12px}
.zc-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zc-ba-grid figure,.zc-gallery figure{position:relative;margin:0;background:#1E282E;border-radius:10px;overflow:hidden}
.zc-ba-img{display:block;width:100%;height:360px;object-fit:cover}
.zc-ba-tag{position:absolute;top:10px;left:10px;z-index:1;font:600 .78rem/1 "Barlow Semi Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:rgba(18,24,28,.85);color:#E6ECED}
.zc-ba-tag.is-after{background:#B5573C;color:#fff}
.zc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.zc-gallery .zc-ba-img{height:300px}
.zc-featured-project{max-width:1100px;margin:0 auto;padding:0 20px 20px}
.zc-featured-project .zc-project-card{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;padding:16px}
.zc-featured-project .zc-card-img{height:280px;margin:0}
@media (max-width:640px){.zc-ba-grid{grid-template-columns:1fr 1fr;gap:8px}.zc-ba-img{height:220px}.zc-featured-project .zc-project-card{grid-template-columns:1fr}.zc-featured-project .zc-card-img{height:200px}}
.zc-featured-project{display:grid;gap:18px}
.zc-video{display:block;width:100%;max-width:405px;height:auto;border-radius:10px;background:#000;aspect-ratio:406/720}
.zc-featured-project{grid-template-columns:repeat(auto-fill,minmax(460px,1fr))}
@media (max-width:640px){.zc-featured-project{grid-template-columns:1fr}}
.zc-more::after{content:none!important}
.zc-video{max-width:420px}
.zc-project-card .zc-card-img[src*="burnaby-york"]{object-position:center 30%}
/* 3D hero (v1.5) */
.zc-hero3d__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.zc-hero3d__model .zc-3d{margin:0;aspect-ratio:16/10;border-radius:14px;overflow:hidden}
.zc-hero3d h1{font-size:clamp(2rem,3.4vw,3rem)}
.zc-realjob{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:14px 18px;background:#1E262D;border:1px solid #33404a;border-radius:12px;color:#E9E4DC;text-decoration:none}
.zc-realjob:hover{border-color:#F1AA77}
.zc-realjob__go{display:inline-block;margin-left:8px;color:#F1AA77;font-weight:600}
.zc-realjob__thumbs{display:flex;gap:8px;flex:none}
.zc-realjob__thumbs img{width:96px;height:72px;object-fit:cover;border-radius:6px}
@media (max-width:849px){.zc-hero3d__grid{grid-template-columns:1fr;gap:24px}.zc-hero3d__model .zc-3d{aspect-ratio:4/5}
.zc-realjob{flex-direction:column;align-items:flex-start}.zc-realjob__thumbs img{width:calc((100vw - 90px)/4);height:auto;aspect-ratio:4/3}}
.zc-hero3d .zc-3d__btn{white-space:nowrap}
/* 3D hero spacing (scoped; photo-hero padding no longer applies) */
.zc-hero3d .zc-inner{max-width:1100px;margin:0 auto;padding:0 20px}
.zc-hero3d .zc-hero3d__grid{padding-top:48px}
.zc-hero3d>.zc-inner:last-child{padding-bottom:48px}
@media (max-width:849px){.zc-hero3d .zc-hero3d__grid{padding-top:24px}.zc-hero3d>.zc-inner:last-child{padding-bottom:32px}}
/* stop web-font swap re-centring the hero (CLS) */
.zc-hero3d .zc-hero3d__grid{align-items:start}
@media (min-width:850px){.zc-hero3d .zc-hero3d__grid{min-height:560px}.zc-hero3d__model{margin-top:56px}}
/* metric-matched fallbacks (see functions.php zencore_font_preload) */
body,p,li,input,textarea,select{font-family:"Source Sans 3","Source Sans 3 Fallback",sans-serif!important}
h1,h2,h3,h4,h5,h6,.heading-font,.button,.nav>li>a,.zc-eyebrow,.zc-more{font-family:"Barlow Semi Condensed","Barlow Semi Condensed Fallback",sans-serif!important}
/* owner portrait (4:5, never crop the face) */
.zc-portrait{aspect-ratio:4/5;width:100%;max-width:420px;height:auto!important;max-height:none!important;object-fit:cover;object-position:center top;border-radius:14px}
/* portrait + text split (desktop side by side, mobile stacked) */
.zc-split{display:grid;grid-template-columns:2fr 3fr;gap:48px;align-items:center}
.zc-split__img .zc-portrait{max-width:none;margin:0}
.zc-split__txt>*:first-child{margin-top:0}
@media (max-width:849px){.zc-split{grid-template-columns:1fr;gap:20px}.zc-split__img .zc-portrait{max-width:420px}}
.zc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---- v1.5.8 (2026-10-15): full-width 3D model, About two-column, logo plate ---- */
/* Home: text hero, then the 3D model on its own full-width row */
.zc-herotext .zc-hero3d__copy{max-width:760px}
.zc-herotext>.zc-inner:first-child{padding-top:64px;padding-bottom:48px}
@media (max-width:849px){.zc-herotext>.zc-inner:first-child{padding-top:32px;padding-bottom:32px}}
.zc-section.zc-model{background:#12181C;padding:0 0 56px}
.zc-model__head{max-width:1100px;margin:0 auto;padding:0 20px 20px}
.zc-model__head h2{margin:0 0 6px}
.zc-model__head p{margin:0;max-width:760px}
.zc-model__stage{max-width:1600px;margin:0 auto;padding:0 20px}
.zc-model .zc-3d{aspect-ratio:auto;height:min(76vh,900px);min-height:480px;border-radius:14px;margin:0}
@media (max-width:849px){.zc-model .zc-3d{height:72vh;height:72svh;min-height:420px}.zc-model__stage{padding:0 12px}}
.zc-model .zc-inner{max-width:1100px;margin:0 auto;padding:0 20px}
/* tap-to-load + fullscreen buttons */
.zc-3d__actions{position:absolute;left:50%;bottom:24px;z-index:2;transform:translateX(-50%);display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 24px)}
.zc-3d__actions .zc-3d__btn{position:static;transform:none;margin:0!important;white-space:nowrap}
.zc-3d__actions .zc-3d__btn:hover{transform:translateY(-1px)}
.zc-3d__actions .zc-3d__fs{margin:0!important;white-space:nowrap;background:rgba(18,24,28,.7)!important;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.zc-3d.is-live .zc-3d__actions{display:none}
.zc-3d__bar{position:absolute;left:12px;top:12px;z-index:3;display:flex;gap:8px}
.zc-3d__bar .zc-3d__close{position:static}
.zc-3d:fullscreen{border-radius:0;border:0;width:100vw;height:100vh;max-height:none}
.zc-3d:-webkit-full-screen{border-radius:0;border:0;width:100vw;height:100vh}
.zc-3d.zc-3d--fs{position:fixed!important;inset:0;z-index:100000;width:100vw;height:100vh;height:100dvh;max-height:none;min-height:0;border-radius:0!important;border:0;margin:0}
html.zc-3d-lock,html.zc-3d-lock body{overflow:hidden}
/* About: true two-column, portrait left (sticky), all text right */
.zc-split--about{align-items:start;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (min-width:850px){.zc-split--about .zc-split__img{position:sticky;top:120px}}
.zc-split--about .zc-split__txt h2{margin-top:1.6em}
@media (max-width:849px){.zc-split--about{grid-template-columns:1fr}}
/* Logo with soft white plate behind the swirl (asset is RGBA, 3x for retina) */
.header .logo img,.header-wrapper.stuck .logo img{background:transparent!important;image-rendering:auto}

/* ---- v1.5.9 (2026-10-15) ---- */
/* Heat pump cycle graphic (v1.5.9) */
.zc-hpc{margin:0;position:relative;background:radial-gradient(120% 90% at 70% 20%,#2A363F 0,#1B232A 60%,#161D22 100%);border:1px solid #33404a;border-radius:16px;padding:14px 14px 12px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.zc-hpc svg{display:block;width:100%;height:auto;aspect-ratio:600/440}
.zc-hpc__bar{display:flex;gap:4px;background:#12181C;border:1px solid #33404a;border-radius:999px;padding:3px;z-index:1}
.zc-hpc__tg{margin:0;min-height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#C9D4D6;font:600 .85rem/1 "Barlow Semi Condensed","Barlow Semi Condensed Fallback",sans-serif;letter-spacing:.04em;cursor:pointer;text-transform:uppercase}
.zc-hpc__tg.is-on[data-m=heat]{background:#C8573A;color:#fff}.zc-hpc__tg.is-on[data-m=cool]{background:#3B83A8;color:#fff}
.zc-hpc__tg:focus-visible{outline:2px solid #F1AA77;outline-offset:2px}
.zc-hpc__lbl text{fill:#E6ECED;font-family:"Source Sans 3","Source Sans 3 Fallback",sans-serif;font-weight:600}
.zc-hpc__ln,.zc-hpc__air-lbl{fill:#AFC0C5!important;font-weight:400!important}
.zc-hpc .t-c{display:none}.zc-hpc[data-mode=cool] .t-c{display:inline}.zc-hpc[data-mode=cool] .t-h{display:none}
.zc-hpc__flow path{stroke-dasharray:3 11;animation:zcHpF 1.1s linear infinite;transition:stroke .4s}
.zc-hpc__flow path.rev{animation-direction:reverse}
@keyframes zcHpF{to{stroke-dashoffset:-28}}
.zc-hpc .hot{stroke:#F0643C}.zc-hpc .liq{stroke:#F5B26B}.zc-hpc .cold{stroke:#5CB8E6}
.zc-hpc__air path{stroke-dasharray:6 6;animation:zcHpF 1.4s linear infinite}
.zc-hpc[data-mode=heat] .zc-hpc__air--in,.zc-hpc[data-mode=cool] .zc-hpc__air--out{stroke:#F59A5E}
.zc-hpc[data-mode=heat] .zc-hpc__air--out,.zc-hpc[data-mode=cool] .zc-hpc__air--in{stroke:#6FC3EA}
.zc-hpc__fan{animation:zcHpR 1.6s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes zcHpR{to{transform:rotate(360deg)}}
.zc-hpc__led{fill:#F0643C}.zc-hpc[data-mode=cool] .zc-hpc__led{fill:#5CB8E6}
.zc-hpc figcaption{font-family:"Source Sans 3","Source Sans 3 Fallback",sans-serif;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:.82rem;color:#AFC0C5;margin-top:6px}
.zc-hpc__k i{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.k-hot{background:#F0643C}.k-liq{background:#F5B26B}.k-cold{background:#5CB8E6}
@media (prefers-reduced-motion:reduce){.zc-hpc__flow path,.zc-hpc__air path,.zc-hpc__fan{animation:none}.zc-hpc__flow path{stroke-dasharray:none}}
/* hero grid: copy + graphic */
.zc-herotext .zc-inner.zc-herogrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;max-width:1240px}
@media (max-width:849px){.zc-herotext .zc-inner.zc-herogrid{grid-template-columns:1fr;gap:24px}}
/* 3D model: same width as the content container */
.zc-model__stage{max-width:1100px;padding:0 20px}
.zc-model .zc-3d{height:min(70vh,680px);min-height:440px}
@media (max-width:849px){.zc-model .zc-3d{height:72vh;height:72svh;min-height:420px}}

/* v1.6.0: ductless / forced-air views */
.zc-hpc__bars{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:8px;flex-wrap:wrap;z-index:1}
.zc-hpc__bars .zc-hpc__bar{position:static}
.zc-hpc__vw{margin:0;min-height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#C9D4D6;font:600 .85rem/1 "Barlow Semi Condensed","Barlow Semi Condensed Fallback",sans-serif;letter-spacing:.04em;cursor:pointer;text-transform:uppercase}
.zc-hpc__vw.is-on{background:#E6ECED;color:#1A2329}
.zc-hpc__vw:focus-visible{outline:2px solid #F1AA77;outline-offset:2px}
.zc-hpc svg.v-fa{display:none}.zc-hpc[data-view=fa] svg.v-fa{display:block}.zc-hpc[data-view=fa] svg.v-dl{display:none}
.zc-hpc__air--ret{stroke:#9AA7AD}
@media (max-width:600px){.zc-hpc__tg,.zc-hpc__vw{padding:0 9px;font-size:.75rem;min-height:28px}.zc-hpc__bars{top:10px;left:10px;right:10px;gap:6px}}
@media (max-width:600px){.zc-hpc__bars{position:static;margin:0 0 8px}}

/* v1.6.1: forced-air TXV + check-valve bypass */
.zc-hpc .idle{stroke:#55636C;animation:none;stroke-dasharray:none}

/* v1.6.3: heading above the heat pump graphic */
.zc-hpc-head{margin:0 0 14px}
.zc-hpc-head__eyebrow{margin:0 0 4px;font:600 .78rem/1.2 "Barlow Semi Condensed","Barlow Semi Condensed Fallback",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#F1AA77}
.zc-hero .zc-hpc-head__title{margin:0 0 6px;font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1.15;color:#E6ECED;font-weight:600}
.zc-hpc-head__sub{margin:0;font-size:.95rem;line-height:1.4;color:#AFC0C5}
@media (max-width:849px){.zc-hpc-head{margin-bottom:10px}.zc-hpc-head__sub{font-size:.9rem}}
.zc-hero .zc-hpc-head p.zc-hpc-head__eyebrow{color:#F1AA77!important;font-size:.78rem}.zc-hero .zc-hpc-head p.zc-hpc-head__sub{color:#AFC0C5}

/* v1.6.4: top-align hero columns */
.zc-herotext .zc-inner.zc-herogrid{align-items:start}