/* ============================================================
   EvoHeat - shared site stylesheet
   Base design system is copied VERBATIM from the signed-off
   homepage (index.html) so every interior page has byte-identical
   nav / footer / brand chrome. Interior-page components are
   appended in the "INTERIOR PAGES" block at the bottom.
   Fonts: Circular Std (real files pending) with Outfit stand-in.
   ============================================================ */
/* Circular Std - the real brand face (replaces the Outfit stand-in).
   Paths are RELATIVE to this stylesheet (wp-content/themes/evoheat/assets/),
   so they resolve on any host and under any theme directory. The old
   root-absolute /assets/fonts/ paths 404'd on WordPress, which silently
   dropped every page back to the Outfit fallback and shifted all type. */
@font-face{font-family:'Circular Std';src:url('/wp-content/themes/evoheat/assets/fonts/circularstd-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Circular Std';src:url('/wp-content/themes/evoheat/assets/fonts/circularstd-book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Circular Std';src:url('/wp-content/themes/evoheat/assets/fonts/circularstd-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Circular Std';src:url('/wp-content/themes/evoheat/assets/fonts/circularstd-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Circular Std';src:url('/wp-content/themes/evoheat/assets/fonts/circularstd-black.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
/* ============================================================
   DESIGN TOKENS - the single authority, taken from Figma
   file hEz76xPVqoOfNSJ9VKwfTQ. Every value below was read off a
   frame with get_design_context, not eyeballed. Figma's own
   variables are empty (get_variable_defs returns {}), the numbers
   live raw on the layers, so this block IS the token layer.

   KNOWN CONTRADICTIONS, for whoever works on a template next:
   39 of the 83 theme templates still carry their own inline
   <style> block, holding 1,362 px font-size declarations between
   them, 220 of them fractional (eyeballed off screenshot slices,
   e.g. 17.6px, 26.4px). Those blocks override this scale and are
   the main reason interior pages measure ~45-50% to design. The
   fix per template is the one already done for front-page.php:
   move the block into this file, scoped to that page, then gate
   it. Until that happens, a token here is only advisory on those
   39 pages. docs/figma-exact-worklist.md lists them.
   ============================================================ */
:root{
  /* ---- brand colour ---- */
  --navy:#002b54;        /* quote bar, Why panel, footer headings, next arrow */
  --navy-alt:#002345;    /* evaluation CTA band */
  --card:#02315e;        /* Why feature cards */
  --blue:#2baae3;        /* intro heading accent, pool nav evaluation button */
  --blue-hero:#2ca9e3;   /* hero primary button, eyebrows, promo + contact buttons */
  --ink:#27272d;         /* headings and nav links on white */
  --band:#f4f4f4;        /* product band, FAQ open-icon fill */
  --red:#d5242b;         /* quote bar button */
  --red-alt:#d2232a;     /* evaluation CTA button */
  --white:#ffffff;
  --line:#d3d3d3;        /* FAQ dividers, contact card border */
  --pill-line:#b7b7b7;   /* logos strip pill outline */
  --field:#f9f9f9;       /* contact card field fill */
  --placeholder:#d9d9d9; /* Figma's own empty grey boxes, see worklist flags */
  --icon-grey:#8f8f8f;   /* FAQ open-icon glyph */
  /* NOTE two near-identical blues ship side by side in the design,
     #2baae3 and #2ca9e3. Both are reproduced as drawn. Flagged for Sell. */

  /* ---- type ---- */
  --font-display:'Circular Std','Outfit',-apple-system,'Segoe UI',sans-serif;
  --font-ui:'Inter',-apple-system,'Segoe UI',sans-serif;
  /* The scale actually used across the frames: size / line-height / tracking.
     Nothing between these steps appears in any frame. */
  --t-hero:80px;        --t-hero-lh:75px;     --t-hero-ls:-3.2px;   /* hero h1 */
  --t-h2:60px;          --t-h2-lh:64px;       --t-h2-ls:-1.2px;     /* section h2 (85px lh on the Why panel) */
  --t-h2-sm:50px;       --t-h2-sm-lh:58px;    --t-h2-sm-ls:-1px;    /* band headings (63 reviews, 67 projects) */
  --t-h2-cta:48px;      --t-h2-cta-lh:57px;   --t-h2-cta-ls:-1.92px;/* evaluation CTA heading, Medium */
  --t-card-title:40px;  --t-card-title-lh:51px; --t-card-title-ls:-1.6px;
  --t-h3:36px;          --t-h3-lh:40px;       --t-h3-ls:-0.72px;    /* CTA band heading */
  --t-quotebar:33px;    --t-quotebar-lh:42px; --t-quotebar-ls:-0.66px;
  --t-product-name:30px;                                            /* product card name, Medium */
  --t-lead:26px;        --t-lead-lh:56px;     --t-lead-ls:-0.78px;  /* FAQ question; logos heading is 26 Bold */
  --t-sub:24px;                                                     /* hero sub, Book */
  --t-eyebrow:22px;     --t-eyebrow-lh:28px;  --t-eyebrow-ls:-0.44px;
  --t-body-lg:20px;     --t-body-lg-lh:28px;  --t-body-lg-ls:-0.4px;/* CTA body, buttons, FAQ answer (26 lh) */
  --t-body:18px;        --t-body-lh:24px;                           /* reviews, fields, footer headings (30 lh) */
  --t-body-sm:17px;                                                 /* card sub lines, product card sub */
  --t-link:16px;                                                    /* footer links, nav buttons (Inter) */
  /* weights: 300 Light, 400 Book, 500 Medium, 700 Bold, 800 Black */

  /* ---- radii ---- */
  --r-pill:9999px;   /* nav buttons, product card button */
  --r-100:100px;     /* quote bar button, logos pill */
  --r-nav:66.67px;   /* the nav bar itself */
  --r-60:60px;       /* hero buttons */
  --r-50:50px;       /* input fields, CTA + promo + footer buttons */
  --r-40:40px;       /* intro and project cards */
  --r-29:29px;       /* carousel arrows (58px circles) */
  --r-28:28px;       /* product cards, navy bands, contact card */
  --r-20:20px;       /* Why cards, evaluation CTA box */

  /* ---- layout ---- */
  --page:1920px;     /* every Figma frame is 1920 wide */
  --container:1520px;
  --gutter:200px;    /* (1920-1520)/2 */

  /* ---- section rhythm, measured off the home frame 559:2282 ---- */
  --sec-hero-h:1066px;      --sec-quotebar-h:120px;   --sec-ctaband-h:275px;
  --pad-products:118px;     --pad-products-end:153px;
  --pad-ctaform:130px;      --pad-ctaform-end:270px;
  --pad-why:160px;
  --pad-reviews:166px;      --pad-reviews-end:133px;
  --pad-logos-end:133px;    --pad-projects-end:72px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Design is a 1920px artboard. On laptop viewports, scale uniformly (preserves
   pixel-exact proportions - same as viewing at browser zoom 100% on a 1920 screen). */
@media (min-width:1681px) and (max-width:1919px){body{zoom:.92;}}
@media (min-width:1537px) and (max-width:1680px){body{zoom:.84;}}
@media (min-width:1441px) and (max-width:1536px){body{zoom:.8;}}
@media (min-width:1367px) and (max-width:1440px){body{zoom:.75;}}
@media (min-width:1201px) and (max-width:1366px){body{zoom:.71;}}
body{
  font-family:var(--font-display);
  background:#fff;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}

/* Centred content container; full-bleed sections opt out */
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
@media(min-width:1568px){.container{padding:0;}}

/* ---------- generic button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;
     font-family:var(--font-display);font-weight:500;color:#fff;
     border-radius:9999px;white-space:nowrap;cursor:pointer;
     transition:filter .15s ease,background .15s ease;}
.btn:hover{filter:brightness(1.06);}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{position:absolute;top:24px;left:0;right:0;z-index:50;}
.nav{
  max-width:1814px;margin:0 auto;height:72px;background:#fff;
  border-radius:66.67px;display:flex;align-items:center;
  padding:0 20px 0 40px;gap:14px;
}
.nav .logo{width:171px;height:70px;object-fit:contain;flex:0 0 auto;}
/* 23 Sep 2026, integrator fix. Figma nav 559:2608 is a FRAME at x53, so
   get_metadata reports its children RELATIVE to it: link boxes read
   x369 / 545.85 / 718 / 960 / 1091 / 1295 and the buttons x1432 / x1649.
   Absolute page x is 53 + that, i.e. 422 / 598.85 / 771 / 1013 / 1144 / 1348
   and 1485 / 1702. The original build added the 53 to the logo (40+53=93) and
   to every y (23+24=47, 14+24=38) but not to the link or button x, so the
   whole run shipped 53px left of the design on every pool page. Confirmed
   independently against four frame exports (home, contact-us, about,
   downloads-brochures): the first label's ink starts at x424 in all four.
   specs/components-pool.json asserted the same unconverted numbers, which is
   why the gate passed a wrong nav. Both were corrected together.
   Margin-neutral: the 53px moved from .nav-cta's right margin to this one,
   so the row's free space is unchanged. */
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,37px);margin:0 auto 0 144px;list-style:none;}
.nav-links a{display:flex;align-items:center;gap:9px;
   font-family:var(--font-display);font-weight:500;font-size:18px;line-height:26.4px;
   color:var(--ink);white-space:nowrap;}
.nav-links .chev{width:9px;height:5.14px;}
/* Figma 559:2623 / 559:2621, converted to absolute: evaluation x1485 w205,
   contact x1702 w140 ending at 1842, i.e. 24px inside the bar's right edge.
   The bar's right content edge is 53+1814-20 = 1847, so the pair sits 5px in. */
.nav-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-right:5px;}
.nav-cta .btn{height:45px;font-family:var(--font-ui);font-weight:500;font-size:16px;}
.btn-eval{background:var(--blue);padding:0 24px;}
.btn-contact{background:var(--navy);padding:0 27px;}
.nav-toggle{display:none;flex:0 0 auto;width:46px;height:46px;border:none;background:transparent;
   cursor:pointer;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;}
.nav-toggle span{display:block;height:3px;width:26px;background:var(--ink);border-radius:2px;}

/* mobile dropdown panel (best-practice reflow; no approved mobile design yet) */
@media(max-width:1200px){
  .nav{position:relative;flex-wrap:wrap;}
  /* 10 Sep 2026: collapse the desktop links behind the hamburger below 1200px. The panel rules below
     already existed but nothing hid the links or showed the toggle, so phones got the 870px desktop
     nav and a sideways-scrolling page. */
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-links.open{display:flex;flex-direction:column;align-items:flex-start;gap:18px;
     position:absolute;top:80px;left:0;right:0;background:#fff;border-radius:24px;
     padding:24px 30px;margin:0;box-shadow:0 20px 50px rgba(0,0,0,.18);}
  .nav-links.open a{font-size:20px;}
}

/* =========================================================
   QUOTE BAR (shared component)
   ========================================================= */
/* Figma 559:2313: a 1920x120 navy bar that OVERLAPS the hero photo, sitting at
   y949 over a 1066 hero. Stacking it after the hero instead pushed the whole
   page down and exposed a bare band under the photo. Pages opt in by setting
   --qb-overlap to (hero height - the bar's Figma y); the home page is
   1066 - 949 = 117. Desktop only: below 1200px the bar wraps and stacks. */
.quotebar{background:var(--navy);position:relative;z-index:3;}
@media(min-width:1201px){
  .quotebar{margin-top:calc(-1 * var(--qb-overlap, 0px));}
}
body.home{--qb-overlap:117px;}
/* Figma row: heading x221, fields x568/883/1198 (300x59), button x1512 (194x59),
   right edge 1706. Container is 200..1720, so pad 21 left / 14 right. */
.quotebar .container{display:flex;align-items:center;gap:24px;
   height:120px;flex-wrap:nowrap;padding:0 14px 0 21px;}
@media(min-width:1568px){.quotebar .container{padding:0 14px 0 21px;}}
/* Figma sets the heading box at y987 h42 and the field row at y978, both
   slightly above the bar's centre line; the trailing margins reproduce that. */
.quotebar .qh{font-weight:700;font-size:33px;line-height:42px;letter-spacing:-0.66px;color:#fff;
   white-space:nowrap;flex:0 0 auto;margin-bottom:2px;}
.quotebar .qfields{display:flex;align-items:center;gap:15px;margin-left:auto;flex-wrap:nowrap;
   margin-bottom:3px;}
.quotebar .field{height:59px;width:300px;background:#fff;border-radius:50px;border:none;
   padding:0 34px;font-family:var(--font-display);font-weight:300;font-size:18px;
   letter-spacing:-0.36px;color:#1e1e1e;}
.quotebar .field::placeholder{color:#1e1e1e;opacity:1;}
/* field3 ends at 1498, button starts at 1512: a 14px gap inside a 15px row */
.quotebar .qbtn{height:59px;width:194px;background:var(--red);border-radius:100px;
   font-weight:500;font-size:20px;flex:0 0 auto;margin-left:-1px;}

/* =========================================================
   FOOTER (shared component)
   ========================================================= */
.footer{position:relative;overflow:hidden;color:#fff;border-radius:50px 50px 0 0;margin-top:0;}
.footer .ftbg{position:absolute;inset:0;z-index:0;}
.footer .ftbg img{width:100%;height:100%;object-fit:cover;}
.footer .ftbg .ov{position:absolute;inset:0;background:rgba(0,0,0,0.45);}
.footer .ftgrad{position:absolute;inset:0;z-index:1;
   background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0.8) 100%);opacity:.7;}
.footer .container{position:relative;z-index:2;}
/* Figma "Get in Touch" block 559:2603 and form 559:2584, both inside the
   footer frame 559:2549 which starts at y7102:
     eyebrow  y7307 x206 112x25   headline y7343 x203 689x219 (72/73, -2.88)
     sub      y7591 x206 629x48   phone    y7660 x203 243x59
     form     y7324 x983 737x545
       Name    y7324 x986 734x46      Email y7419 x986 357x46
       Phone   y7419 x1359 361x46     Company y7514 x983 734x46
       Message y7601 x983 734x147     Submit  y7789 x983 193x80
   Field boxes are 46 tall measured from the LABEL's top down to the rule, so
   the label, the input and the 1px underline share one fixed-height box. */
.ft-top{display:grid;grid-template-columns:689px 1fr;gap:94px;padding:205px 0 0;}
.ft-intro .ftgit{font-weight:500;font-size:20px;line-height:25px;letter-spacing:-0.4px;margin-bottom:11px;}
.ft-intro .fthead{font-weight:700;font-size:72px;line-height:73px;letter-spacing:-2.88px;margin-bottom:29px;}
.ft-intro .ftsub{font-weight:300;font-size:24px;line-height:24px;max-width:629px;margin-bottom:21px;}
.ft-intro .ftphone{font-weight:700;font-size:40px;line-height:59px;}
.ft-form{width:737px;margin-top:17px;padding-top:0;display:flex;flex-direction:column;align-items:flex-start;}
/* nth-CHILD, not nth-of-type: .ft-form's children are all divs, so
   nth-of-type would count .frow as one of the fields. */
.ft-form .frow{display:flex;gap:16px;flex-wrap:nowrap;margin-left:3px;margin-top:49px;}
.ft-field{display:flex;flex-direction:column;height:46px;margin-bottom:0;
   border-bottom:1px solid #fff;}
.ft-form>.ft-field:nth-child(1){margin-left:3px;width:734px;}
.ft-form>.ft-field:nth-child(3){margin-top:49px;width:734px;}
.ft-field.half:nth-child(1){width:357px;}
.ft-field.half:nth-child(2){width:361px;}
.ft-field label{display:block;font-weight:300;font-size:20px;line-height:28px;color:#fff;margin-bottom:0;}
.ft-field input,.ft-field textarea{width:100%;flex:1 1 auto;background:transparent;border:none;
   color:#fff;font-family:var(--font-display);font-size:18px;padding:0;outline:none;}
.ft-form>.ft-field.message{margin-top:41px;width:734px;height:147px;}
.ft-field.message input{min-height:0;}
.ftsub-btn{width:193px;height:80px;background:#fff;color:var(--ink);border-radius:50px;
   font-weight:500;font-size:20px;margin-top:41px;}
/* Figma 559:2549 bottom row: the three link columns start at x898 / x1196 /
   x1548 with their headings on y8069, and the logo + copyright sit on that
   SAME row at the far left (logo x311 y8075, copyright x204 y8169). The build
   stacked the logo and copyright underneath the columns and centred them,
   which is why the whole footer block read wrong. Columns are placed on a
   fixed track and the logo block is pinned to the row. */
.ft-cols{display:grid;grid-template-columns:298px 352px 172px;gap:0;
   padding:200px 0 93px;margin-left:698px;}
.ft-col h4{font-weight:700;font-size:18px;letter-spacing:0.45px;line-height:30px;margin-bottom:14px;}
.ft-col a,.ft-col p{display:block;font-weight:300;font-size:16px;line-height:33px;color:#fff;}
.ft-col p.b{font-weight:700;}
/* Figma social row 559:2570: x1549 / 1596 / 1649 / 1699 and each icon its own
   size. They are NOT square and NOT evenly spaced in the design. */
/* Figma puts the social row 122px below its column heading's top edge */
.ft-social{display:flex;gap:0;margin-top:12px;margin-left:1px;align-items:flex-start;}
.ft-social a{display:block;flex:0 0 auto;}
.ft-social img{width:100%;height:100%;object-fit:contain;}
.ft-social a:nth-of-type(1){width:17.143px;height:16.959px;margin-right:29.857px;}
.ft-social a:nth-of-type(2){width:19.5px;height:19.291px;margin-right:33.5px;}
.ft-social a:nth-of-type(3){width:19.5px;height:19.291px;margin-right:30.5px;}
.ft-social a:nth-of-type(4){width:21px;height:16.323px;margin-top:1.979px;}
/* The logo block shares the link columns' grid row instead of following them,
   so it sits on the row no matter how tall the columns get. */
.footer>.container{display:grid;grid-template-columns:minmax(0,1fr);}
.footer .ft-cols{grid-row:2;grid-column:1;}
.ft-bottom{grid-row:2;grid-column:1;justify-self:start;align-self:start;
   margin-top:206px;margin-left:4px;width:454px;
   display:flex;flex-direction:column;align-items:center;gap:23px;padding:0;text-align:center;}
.ft-bottom .ftlogo{width:239px;height:71px;object-fit:contain;}
.ft-bottom .ftcopy{width:454px;font-weight:300;font-size:18px;line-height:30px;letter-spacing:0.45px;}

/* =========================================================
   WHY / CTA-FORM / REVIEWS / LOGOS  (shared, reused on interior pages)
   ========================================================= */
.ctaform{position:relative;background:#fff;}
.ctaform .cfbg{position:relative;overflow:hidden;}
.ctaform .cfbg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.ctaform .cfbg .ov{position:absolute;inset:0;background:rgba(0,0,0,0.2);z-index:1;}
/* Figma cta-form 559:2327: the photo band runs y3458 to y4225 (767 tall).
   Its content block (frosted box / copy / badge) sits y3588 to y3955, so the
   band is 130px of padding above and 270px below, not 130 both ways. The
   short band was why every section below it sat ~140px high. */
/* The row's gaps are not uniform in Figma (79 after the box, 46 after the
   copy), so they are per-child margins rather than a flex gap. */
.ctaform .cf-inner{position:relative;z-index:2;display:flex;align-items:flex-start;
   gap:0;min-height:497px;padding:130px 0 270px;}
/* Figma 559:2330 x215 (15 inside the container), copy x718, badge x1441..1695.
   Copy and badge both start at y3630, 42px below the box top, so they are
   top-aligned with an offset rather than centred on the box. */
.ctaform .cfcard{width:424px;height:367px;background:#d9d9d9;opacity:.5;border-radius:20px;
   flex:0 0 auto;margin-left:15px;}
.ctaform .cf-copy{color:#fff;flex:1 1 auto;max-width:677px;margin-top:42px;margin-left:79px;}
.ctaform .cfhead{font-weight:500;font-size:48px;line-height:57px;letter-spacing:-1.92px;margin-bottom:15px;}
/* Figma 559:2332 is 677x84, i.e. three lines. At 680 it wrapped to four,
   which made the whole band 14px too tall and pushed the page down. */
.ctaform .cfbody{width:677px;max-width:100%;font-weight:400;font-size:20px;line-height:28px;
   letter-spacing:-0.4px;margin-bottom:28px;}
.ctaform .cfbtn{width:234px;height:70px;background:var(--red-alt);border-radius:50px;
   font-weight:500;font-size:20px;}
/* Figma 559:2337 x1441: the gap after the copy is 46, not the row's 79 */
.ctaform .cfbadge{width:254px;height:249px;object-fit:contain;flex:0 0 auto;
   margin-left:46px;margin-top:42px;}

/* Figma Reviews 559:2440: heading y5420 h63, badge y5505 h69, cards y5707,
   band ends y5892 with the logos heading 133px below it. The review columns
   are 346 wide at x172..1748, i.e. 28px WIDER than the 1520 container
   each side, so the row is pulled out rather than fitted inside. */
.reviews{padding:166px 0 133px;text-align:center;}
.reviews .rh{font-weight:700;font-size:50px;line-height:63px;letter-spacing:-1.25px;
   color:var(--ink);margin-bottom:22px;}
.reviews .rlogo{width:349px;height:69px;object-fit:contain;margin:0 auto 133px;}
.rev-row{display:grid;grid-template-columns:repeat(4,346px);justify-content:space-between;
   text-align:left;width:1576px;margin-left:-28px;}
.rcell .rname{font-weight:700;font-size:18px;color:#000;margin-bottom:16px;}
.rcell .rstars{display:flex;gap:13.148px;margin-bottom:20px;}
.rcell .rstars img{width:22.262px;height:22.262px;}
.rcell .rbody{font-weight:300;font-size:18px;line-height:24px;color:var(--ink);max-width:346px;}
/* Figma fixes each review column's height (559:2441 173, 559:2455 168,
   559:2469 161, 559:2483 185). Pinning them keeps the band's bottom edge, and
   so every section below it, independent of how the quoted text wraps. */
.rev-row .rcell:nth-child(1){height:173px;}
.rev-row .rcell:nth-child(2){height:168px;}
.rev-row .rcell:nth-child(3){height:161px;}
.rev-row .rcell:nth-child(4){height:185px;}

/* Figma Logos 559:2499: the strip is FULL BLEED and wider than the canvas -
   the frame runs x-100 to x2020. Pills are 349x95 at x -100, 274, 648, 1022,
   1396 and a final 236-wide pill at 1770 (pitch 374, gap 25). The heading is
   centred on the 1920 canvas. The build had the row inside the 1520 container
   with equal flex widths, which is why it never matched. */
/* 23 Sep 2026, integrator fix. The last pill is drawn at x1770 w236, so it
   ends at 2006, 86px past the 1920 artboard, and Figma clips it at the
   artboard edge. Without a clip here the document measured 2006 wide at a
   1920 viewport and EVERY page carried a horizontal scrollbar. overflow-x
   clip reproduces the artboard clip without making the section a scroll
   container, so no y position moves. Reported by commercial-pool-category,
   about, pool-accessory and pool-product-a, each of which had patched it
   inside its own stylesheet; those scoped copies are now redundant. */
.logos{padding:0 0 133px;overflow-x:clip;}
.logos>.container{max-width:none;padding:0;}
.logos .lh{text-align:center;font-weight:700;font-size:26px;color:#000;margin-bottom:53px;}
.logo-row{display:flex;align-items:flex-end;gap:25px;flex-wrap:nowrap;
   justify-content:flex-start;margin-left:-100px;}
.lpill{height:95px;border:2px solid #b7b7b7;border-radius:100px;
   display:flex;align-items:flex-end;justify-content:center;padding-bottom:25px;
   flex:0 0 349px;min-width:0;}
.lpill:last-child{flex-basis:236px;}
/* every logo's baseline sits at y6181, 25px up from the pill's bottom edge */
.lpill img{object-fit:contain;max-width:none;}
.lpill:nth-child(1) img{width:132px;height:48px;}
.lpill:nth-child(2) img{width:183px;height:52px;}
.lpill:nth-child(3) img{width:188.571px;height:44px;}
.lpill:nth-child(4) img{width:140px;height:57px;}
.lpill:nth-child(5) img{width:202px;height:40px;}
.lpill:nth-child(6) img{width:173px;height:43px;}
.lum{mix-blend-mode:luminosity;}

/* =========================================================
   ==============  INTERIOR PAGES  =========================
   New components for all non-homepage pages. Built on the
   same tokens/containers so they inherit the brand exactly.
   ========================================================= */

/* ---- page hero (navy band that clears the floating nav) ---- */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
   padding:190px 0 90px;}
.page-hero.img{background:var(--navy-alt);}
.page-hero .ph-bg{position:absolute;inset:0;z-index:0;}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover;}
.page-hero .ph-bg .ov{position:absolute;inset:0;background:rgba(0,20,45,.6);}
.page-hero .container{position:relative;z-index:2;}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--font-ui);font-weight:500;
   font-size:15px;color:var(--blue-hero);margin-bottom:22px;}
.breadcrumb a{color:rgba(255,255,255,.7);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb span{color:var(--blue-hero);}
.page-hero h1{font-weight:700;font-size:clamp(36px,5vw,64px);line-height:1.04;
   letter-spacing:-1.6px;max-width:900px;margin-bottom:20px;}
.page-hero .ph-sub{font-weight:300;font-size:clamp(18px,2.2vw,23px);line-height:1.35;
   max-width:720px;color:rgba(255,255,255,.9);}
.page-hero .ph-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}
.page-hero .ph-cta .btn{height:60px;padding:0 34px;font-size:18px;font-weight:500;}
.page-hero .ph-cta .primary{background:var(--blue-hero);}
.page-hero .ph-cta .red{background:var(--red-alt);}
.page-hero .ph-cta .ghost{background:transparent;border:1.5px solid rgba(255,255,255,.6);}

/* ---- generic section + prose ---- */
.section{padding:100px 0;}
.section.tight{padding:70px 0;}
.section.band{background:var(--band);}
.section.navy{background:var(--navy);color:#fff;}
.sec-head{text-align:center;max-width:820px;margin:0 auto 60px;}
.sec-head .eyebrow{font-weight:500;font-size:20px;letter-spacing:-0.4px;color:var(--blue);margin-bottom:10px;}
.sec-head h2{font-weight:700;font-size:clamp(32px,4.5vw,50px);line-height:1.1;letter-spacing:-1px;margin-bottom:16px;}
.sec-head h2 .blue{color:var(--blue);}
.sec-head p{font-weight:300;font-size:19px;line-height:1.5;color:inherit;opacity:.9;}
.section.navy .sec-head .eyebrow{color:var(--blue-hero);}

.prose{max-width:820px;margin:0 auto;}
.prose.wide{max-width:1000px;}
.prose h2{font-weight:700;font-size:clamp(28px,3.4vw,38px);line-height:1.15;letter-spacing:-0.8px;
   margin:44px 0 18px;color:var(--ink);}
.prose h3{font-weight:600;font-size:23px;line-height:1.25;margin:32px 0 12px;color:var(--ink);}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose p{font-weight:300;font-size:18px;line-height:1.72;color:var(--ink);margin-bottom:20px;}
.prose ul,.prose ol{margin:0 0 22px 22px;}
.prose li{font-weight:300;font-size:18px;line-height:1.65;color:var(--ink);margin-bottom:10px;}
.prose a.inline{color:var(--blue);font-weight:500;}
.prose strong{font-weight:600;}
.prose .lead{font-size:22px;line-height:1.5;color:var(--ink);font-weight:400;margin-bottom:28px;}

/* ---- two column: content + sticky aside ---- */
.two-col{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start;max-width:1200px;margin:0 auto;}
.aside-card{background:var(--navy);color:#fff;border-radius:24px;padding:40px 36px;position:sticky;top:110px;}
.aside-card h3{font-weight:700;font-size:26px;letter-spacing:-0.6px;margin-bottom:12px;}
.aside-card p{font-weight:300;font-size:16px;line-height:1.55;color:rgba(255,255,255,.85);margin-bottom:22px;}
.aside-card .btn{width:100%;height:58px;background:var(--red-alt);font-size:18px;margin-bottom:14px;}
.aside-card .btn.blue{background:var(--blue-hero);}
.aside-card .phone{font-weight:700;font-size:26px;margin-top:6px;}

/* ---- card grid (listings / categories / downloads / products) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:34px;}
.cards.c2{grid-template-columns:repeat(auto-fill,minmax(440px,1fr));}
.card{background:#fff;border:1px solid #e7e9ee;border-radius:24px;overflow:hidden;
   display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,20,45,.12);}
.card .card-img{aspect-ratio:16/10;background:var(--band);position:relative;overflow:hidden;}
.card .card-img img{width:100%;height:100%;object-fit:cover;}
.card.prodcard .card-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:26px;}
.card.prodcard .card-img img{width:auto;height:100%;object-fit:contain;}
.card .card-body{padding:28px 30px 32px;display:flex;flex-direction:column;flex:1 1 auto;}
.card .tag{font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.4px;
   text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.card h3{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-0.5px;color:var(--ink);margin-bottom:12px;}
.card p{font-weight:300;font-size:16px;line-height:1.55;color:var(--ink);margin-bottom:20px;flex:1 1 auto;}
.card .card-link{font-family:var(--font-ui);font-weight:600;font-size:16px;color:var(--red-alt);
   display:inline-flex;align-items:center;gap:8px;margin-top:auto;}
.card .card-link::after{content:"→";font-size:18px;}

/* ---- feature grid (icon bullets) ---- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px;}
.feat{background:var(--card);color:#fff;border-radius:20px;padding:44px 36px;}
.feat .fnum{font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--blue-hero);margin-bottom:16px;letter-spacing:1px;}
.feat h3{font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-0.5px;margin-bottom:12px;}
.feat p{font-weight:300;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85);}
.section.band .feat{background:#fff;color:var(--ink);border:1px solid #e7e9ee;}
.section.band .feat h3{color:var(--ink);}
.section.band .feat p{color:var(--ink);opacity:.8;}

/* ---- product detail ---- */
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.product-hero .p-media{background:var(--band);border-radius:32px;aspect-ratio:1/1;
   display:flex;align-items:center;justify-content:center;padding:50px;}
.product-hero .p-media img{max-width:100%;max-height:100%;object-fit:contain;}
.product-hero .p-info .tag{font-family:var(--font-ui);font-weight:600;font-size:14px;letter-spacing:.5px;
   text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.product-hero .p-info h1{font-weight:700;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-1.4px;
   color:var(--ink);margin-bottom:20px;}
.product-hero .p-info .p-lead{font-weight:300;font-size:20px;line-height:1.55;color:var(--ink);margin-bottom:28px;}
.product-hero .p-badges{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:30px;}
.product-hero .p-badges img{height:78px;width:auto;object-fit:contain;}
.product-hero .p-cta{display:flex;gap:14px;flex-wrap:wrap;}
.product-hero .p-cta .btn{height:64px;padding:0 32px;font-size:18px;}
.product-hero .p-cta .buy{background:var(--red-alt);}
.product-hero .p-cta .quote{background:var(--navy);}

.spec-table{width:100%;border-collapse:collapse;margin:0 auto;max-width:1000px;}
.spec-table caption{text-align:left;font-weight:700;font-size:24px;color:var(--ink);margin-bottom:20px;letter-spacing:-0.5px;}
.spec-table th,.spec-table td{text-align:left;padding:18px 22px;border-bottom:1px solid #e2e5ec;font-size:17px;}
.spec-table th{font-weight:600;color:var(--ink);width:40%;background:var(--band);}
.spec-table td{font-weight:300;color:var(--ink);}

/* ---- FAQ accordion ---- */
.faq{max-width:900px;margin:0 auto;}
.faq details{border:1px solid #e2e5ec;border-radius:16px;margin-bottom:16px;overflow:hidden;background:#fff;}
.faq details[open]{border-color:var(--blue);}
.faq summary{list-style:none;cursor:pointer;padding:26px 30px;font-weight:600;font-size:20px;
   color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:28px;font-weight:400;color:var(--blue);flex:0 0 auto;transition:transform .2s;}
.faq details[open] summary::after{content:"-";}
.faq .faq-body{padding:0 30px 28px;font-weight:300;font-size:17px;line-height:1.65;color:var(--ink);}

/* ---- form pages ---- */
.form-wrap{max-width:760px;margin:0 auto;background:#fff;border:1px solid #e2e5ec;border-radius:28px;
   padding:52px 54px;box-shadow:0 24px 60px rgba(0,20,45,.06);}
.form-wrap.navy{background:var(--navy);border:none;color:#fff;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.fld{margin-bottom:24px;}
.fld.full{grid-column:1 / -1;}
.fld label{display:block;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:9px;}
.form-wrap.navy .fld label{color:#fff;}
.fld input,.fld select,.fld textarea{width:100%;height:56px;border:1px solid #cfd4de;border-radius:12px;
   padding:0 18px;font-family:var(--font-display);font-size:17px;color:var(--ink);background:#fff;outline:none;}
.fld textarea{height:140px;padding:16px 18px;resize:vertical;}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);}
.form-submit{height:64px;padding:0 44px;background:var(--red-alt);font-size:19px;font-weight:500;margin-top:6px;}
.form-note{font-weight:300;font-size:14px;color:#6a7180;margin-top:18px;}
.form-wrap.navy .form-note{color:rgba(255,255,255,.7);}

/* ---- simple stat / trust strip ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;text-align:center;}
.stat .n{font-weight:700;font-size:clamp(40px,5vw,62px);line-height:1;letter-spacing:-2px;color:var(--blue);margin-bottom:10px;}
.stat .l{font-weight:300;font-size:17px;color:inherit;opacity:.85;}

/* ---- CTA strip (reusable red/navy call to action) ---- */
.cta-strip{background:var(--navy-alt);color:#fff;border-radius:28px;padding:64px 60px;
   display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-strip h2{font-weight:700;font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-1px;max-width:640px;}
.cta-strip .btn{height:66px;padding:0 40px;background:var(--red-alt);font-size:19px;flex:0 0 auto;}

/* =========================================================
   RESPONSIVE (interior)
   ========================================================= */
@media(max-width:1200px){
  .two-col{grid-template-columns:1fr;gap:40px;}
  .aside-card{position:static;}
  .product-hero{grid-template-columns:1fr;gap:40px;}
  .page-hero{padding:160px 0 70px;}
}
@media(max-width:768px){
  .section{padding:64px 0;}
  .field-row{grid-template-columns:1fr;}
  .form-wrap{padding:36px 26px;}
  .cta-strip{padding:44px 32px;}
  .container{padding:0 20px;}
  .cards{grid-template-columns:1fr;}
  h1,h2,h3,.page-hero h1,.prose p,.card h3{overflow-wrap:break-word;}
}

/* ---- Footer "recent projects" CTA variant (replaces the Get-in-Touch form band
   on form / support pages: contact, service request, warranty, tech support,
   thank-you family). Values are the verbatim page-scoped rules those pages
   already ship, promoted here so the shared footer markup styles itself. ---- */
.footer .ft-projects{padding:180px 0 90px;text-align:center;}
.footer .ft-projects h2{font-weight:600;font-size:44px;letter-spacing:-1px;margin-bottom:16px;}
.footer .ft-projects p{font-weight:300;font-size:18px;margin-bottom:34px;}
.footer .ft-projects .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.footer .ft-projects .btn{height:56px;padding:0 34px;background:#fff;color:var(--ink);border-radius:28px;font-size:16px;}
.footer .ft-projects .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7);}
@media(max-width:768px){.footer .ft-projects h2{font-size:30px;}}

/* =========================================================
   THANK-YOU TEMPLATE (8 variants: pool+spa heating, evaluation,
   150 series, 270 series, contact, warranty registration,
   feedback, service request). No Figma frame exists for these -
   geometry is cloned from the measured Contact hero (559:2045)
   and the Service Request intro (559:1481) so the family matches
   the signed-off design system exactly.
   ========================================================= */
/* Hero - same geometry as .ct-hero (photo band 0-571, eyebrow fs20, H1 fs75/89/-3) */
.ty-hero{position:relative;min-height:572px;overflow:hidden;color:#fff;background:#4a5b66;}
.ty-hero .bg{position:absolute;inset:0;z-index:0;}
.ty-hero .bg img{width:100%;height:100%;object-fit:cover;}
.ty-hero .bg .ov{position:absolute;inset:0;background:rgba(0,10,25,.14);}
.ty-hero .lip{position:absolute;left:0;right:0;bottom:-1px;height:56px;background:#fff;border-radius:50px 50px 0 0;z-index:3;}
.ty-hero .container{position:relative;z-index:2;padding-top:400px;}
.ty-hero .eyebrow{font-weight:400;font-size:20px;line-height:25px;margin-bottom:2px;}
.ty-hero h1{font-weight:700;font-size:75px;line-height:89px;letter-spacing:-3px;}
/* Confirmation intro - centred (clone of .sr-intro) */
.ty-intro{padding:132px 0 0;text-align:center;}
.ty-intro h2{font-weight:700;font-size:44px;line-height:1.25;letter-spacing:-1px;color:var(--ink);max-width:1000px;margin:0 auto 24px;}
.ty-intro p{font-weight:300;font-size:16px;line-height:1.6;color:var(--ink);max-width:980px;margin:0 auto 18px;}
.ty-intro p a{color:var(--red-alt);text-decoration:underline;font-weight:500;}
.ty-intro .ty-note{font-weight:400;font-size:15px;color:#5a6068;max-width:980px;margin:0 auto;}
.ty-intro .ty-note b{font-weight:600;color:var(--ink);}
/* Offer panel - navy rounded panel (same radius/padding language as .cta-strip) */
.ty-offer{padding:110px 0 0;}
.ty-offer .panel{background:var(--navy-alt);color:#fff;border-radius:28px;padding:64px 60px;text-align:center;}
.ty-offer .eyebrow{font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.ty-offer h2{font-weight:700;font-size:40px;line-height:1.15;letter-spacing:-1px;margin-bottom:8px;}
.ty-offer .sub{font-weight:300;font-size:19px;margin-bottom:22px;}
.ty-offer p{font-weight:300;font-size:16px;line-height:1.65;max-width:1000px;margin:0 auto 26px;}
.ty-offer .btn{height:52px;padding:0 32px;background:var(--red-alt);border-radius:26px;font-size:15.5px;}
/* Help cards - clone of the Contact page .ct-card */
.ty-cards{padding:110px 0 0;}
.ty-cards .sec-title{text-align:center;font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.ty-cards h2{text-align:center;font-weight:700;font-size:40px;line-height:1.15;letter-spacing:-1px;color:var(--ink);margin-bottom:14px;}
.ty-cards .lead{text-align:center;font-weight:300;font-size:16px;color:var(--ink);max-width:700px;margin:0 auto 48px;}
.ty-cards .row{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.ty-card{background:var(--band);border-radius:16px;padding:28px 28px 34px;text-align:center;min-height:289px;
  display:flex;flex-direction:column;}
.ty-card .pill{background:#fff;border-radius:10px;padding:14px 10px;font-weight:600;font-size:17px;color:var(--ink);margin-bottom:24px;width:100%;}
/* value block centres in the space under the pill so every pill sits on the
   same baseline whether or not the card carries a descriptor line */
.ty-card .val{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ty-card .big{font-weight:700;font-size:24px;color:var(--blue);margin-bottom:6px;}
.ty-card .big.dark{color:var(--ink);}
.ty-card .em{font-weight:300;font-size:15px;color:var(--ink);}
.ty-card a.big{text-decoration:none;}
/* Closing CTA spacing (uses the shared .cta-strip component) */
.ty-close{padding:110px 0 130px;}
@media(max-width:1200px){
  .ty-hero{min-height:640px;} .ty-hero .container{padding-top:400px;} .ty-hero h1{font-size:52px;}
  .ty-cards .row{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
}
@media(max-width:768px){
  .ty-hero h1{font-size:40px;}
  .ty-intro h2{font-size:30px;} .ty-offer h2,.ty-cards h2{font-size:28px;}
  .ty-offer .panel{padding:44px 28px;}
}

/* =========================================================
   TECH-SUPPORT PRODUCT PAGES (12 children of /tech-support/:
   fusion-i-pro, force-i-pro, dynamic-i-pro, apex, edge-i,
   evo-dhp-r, cs-i, evo-cs, evo150-1, evo270-1, evo270-e,
   evo315-c). No Figma frame - built to the design system, copy
   transcribed VERBATIM from the client's live /tech_support/*
   pages. Hero geometry clones the measured Tech Support hub
   (559:1327). Accordions reuse the shared .faq component; the
   closing band reuses the shared .cta-strip.
   ========================================================= */
.tsp-hero{position:relative;min-height:572px;overflow:hidden;color:#fff;background:#7a8a8f;}
.tsp-hero .bg{position:absolute;inset:0;z-index:0;}
.tsp-hero .bg img{width:100%;height:100%;object-fit:cover;}
.tsp-hero .bg .ov{position:absolute;inset:0;background:rgba(0,10,25,.30);}
.tsp-hero .container{position:relative;z-index:2;padding-top:302px;}
.tsp-hero .eyebrow{font-weight:400;font-size:20px;line-height:25px;margin-bottom:2px;}
.tsp-hero h1{font-weight:700;font-size:75px;line-height:89px;letter-spacing:-3px;}
/* intro band */
.tsp-intro{padding:118px 0 44px;text-align:center;}
.tsp-intro .eyebrow{font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.tsp-intro h2{font-weight:700;font-size:40px;line-height:1.15;letter-spacing:-1px;color:var(--ink);margin-bottom:30px;}
.tsp-intro .lede{max-width:840px;margin:0 auto;}
.tsp-intro .lede h3{font-weight:700;font-size:26px;line-height:1.25;color:var(--blue-hero);margin-bottom:16px;}
.tsp-intro .lede p{font-weight:300;font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:18px;}
.tsp-intro .wbtns{display:flex;gap:14px;justify-content:center;margin:24px 0 8px;flex-wrap:wrap;}
.tsp-intro .wbtns a{display:inline-flex;align-items:center;height:52px;padding:0 30px;border-radius:26px;
  font-family:var(--font-ui);font-weight:600;font-size:15px;text-decoration:none;}
.tsp-intro .wbtns a.fill{background:var(--navy);color:#fff;}
.tsp-intro .wbtns a.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--navy);}
/* accordion sections (reuse .faq shell) */
.tsp-sections{padding:16px 0 130px;}
.tsp-sections .faq summary{font-family:var(--font-ui);}
.tsp-body{font-weight:300;color:var(--ink);}
.tsp-body>p:first-child{margin-top:0;}
.tsp-body p{font-weight:300;font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 14px;}
.tsp-body strong{font-weight:600;color:var(--ink);}
.tsp-body ul,.tsp-body ol{margin:0 0 18px;padding-left:22px;}
.tsp-body li{font-weight:300;font-size:16px;line-height:1.62;color:var(--ink);margin-bottom:10px;}
.tsp-body h4{font-family:var(--font-ui);font-weight:700;font-size:18px;color:var(--navy);margin:24px 0 12px;}
.tsp-body a{color:var(--red-alt);text-decoration:underline;font-weight:500;}
.tsp-video{position:relative;width:100%;max-width:640px;margin:18px 0 24px;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#000;}
.tsp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@media(max-width:1200px){
  .tsp-hero{min-height:520px;} .tsp-hero .container{padding-top:330px;} .tsp-hero h1{font-size:52px;}
}
@media(max-width:768px){
  .tsp-hero h1{font-size:38px;} .tsp-intro h2{font-size:28px;} .tsp-intro .lede h3{font-size:22px;}
}

/* =========================================================
   TRADE PORTAL SET (Nicole brief family 3 - 14 pages: portal
   home/login, register, logout, forgot/reset password x4,
   portal thank-you, pool heater sizing guide + a location page
   template, marketing collateral form, submit-your-install +
   thank-you, training & selling info archive).
   NO Figma frame AND (for the gated pages) no public copy to
   transcribe - built to the established design system, reusing
   .ty-hero geometry, the .fld inputs, and the shared .cta-strip.
   Auth + gated-tool pages carry NO real backend (front-end only,
   for Jesse + Nicole sign-off); the capture is a marked TODO in
   each page source.
   ========================================================= */
/* Auth layout - form card beside a navy benefits aside */
.tp-auth{padding:110px 0 0;}
.tp-auth .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:stretch;}
.tp-card{background:#fff;border:1px solid #e4e7ee;border-radius:20px;padding:44px 44px 48px;
  box-shadow:0 24px 60px rgba(0,20,50,.07);}
.tp-card.wide{grid-column:1 / -1;}
.tp-card h2{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:-.5px;color:var(--ink);margin-bottom:10px;}
.tp-card h3{font-family:var(--font-ui);font-weight:700;font-size:16px;letter-spacing:1px;text-transform:uppercase;
  color:var(--blue);margin:0 0 24px;padding-bottom:14px;border-bottom:1px solid #eceef3;}
.tp-card p.lead{font-weight:300;font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:26px;}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}
.tp-grid .full{grid-column:1 / -1;}
.tp-pass{position:relative;}
.tp-pass .show{position:absolute;right:16px;top:42px;font-weight:600;font-size:13px;letter-spacing:.5px;
  color:var(--blue);cursor:pointer;user-select:none;background:none;border:0;}
.req{color:var(--red-alt);}
.tp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:2px 0 26px;}
.tp-check{display:flex;align-items:center;gap:9px;font-weight:400;font-size:15px;color:var(--ink);}
.tp-check input{width:18px;height:18px;accent-color:var(--blue);}
.tp-link{color:var(--red-alt);text-decoration:underline;font-weight:500;font-size:15px;}
.tp-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;}
.tp-actions .btn{height:56px;padding:0 44px;background:var(--blue);border-radius:12px;font-size:16px;}
.tp-actions .btn.ghost{background:transparent;color:var(--ink);border:1px solid #cfd4de;}
.tp-alt{font-weight:400;font-size:15px;color:var(--ink);margin-top:22px;}
.tp-alt a{color:var(--red-alt);text-decoration:underline;font-weight:600;}
/* Navy benefits aside */
.tp-aside{background:var(--navy);color:#fff;border-radius:20px;padding:48px 44px;display:flex;flex-direction:column;}
.tp-aside .eyebrow{font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:16px;}
.tp-aside h2{font-weight:700;font-size:34px;line-height:1.12;letter-spacing:-1px;margin-bottom:26px;}
.tp-aside ul{list-style:none;padding:0;margin:0 0 auto;}
.tp-aside li{position:relative;padding-left:34px;font-weight:300;font-size:16.5px;line-height:1.5;margin-bottom:18px;}
.tp-aside li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--blue);}
.tp-aside li::after{content:"";position:absolute;left:7px;top:9px;width:6px;height:9px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg);}
.tp-aside .aside-cta{margin-top:34px;}
.tp-aside .aside-cta a{color:#fff;font-weight:600;font-size:15px;text-decoration:underline;}
/* Utility message card (logout / reset confirmation / reset success) */
.tp-note-sec{padding:132px 0 0;}
.tp-note-card{max-width:760px;margin:0 auto;background:var(--band);border-radius:20px;padding:56px 54px;text-align:center;}
.tp-note-card .ic{width:64px;height:64px;border-radius:50%;background:var(--blue);margin:0 auto 24px;position:relative;}
.tp-note-card .ic::after{content:"";position:absolute;left:22px;top:18px;width:14px;height:26px;border:solid #fff;
  border-width:0 4px 4px 0;transform:rotate(45deg);}
.tp-note-card h2{font-weight:700;font-size:34px;line-height:1.2;letter-spacing:-.5px;color:var(--ink);margin-bottom:14px;}
.tp-note-card p{font-weight:300;font-size:17px;line-height:1.6;color:var(--ink);max-width:560px;margin:0 auto 30px;}
.tp-note-card .btn{height:56px;padding:0 40px;background:var(--blue);border-radius:12px;font-size:16px;}
/* Sizing-guide location grid */
.tp-locs{padding:70px 0 0;}
.tp-locs .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.tp-loc{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--band);
  border-radius:14px;padding:24px 26px;text-decoration:none;color:var(--ink);font-weight:600;font-size:18px;
  border:1px solid transparent;transition:border-color .15s,background .15s;}
.tp-loc:hover{border-color:var(--blue);background:#fff;}
.tp-loc .st{font-weight:400;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--blue);}
.tp-loc .arw{font-size:22px;color:var(--blue);}
/* Training / selling resource archive */
.tp-archive{padding:70px 0 0;}
.tp-archive .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.tp-res{background:#fff;border:1px solid #e4e7ee;border-radius:16px;padding:32px 30px 34px;}
.tp-res .tag{font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.tp-res h3{font-weight:700;font-size:21px;line-height:1.25;color:var(--ink);margin-bottom:10px;}
.tp-res p{font-weight:300;font-size:15px;line-height:1.6;color:var(--ink);margin-bottom:18px;}
.tp-res a{color:var(--red-alt);text-decoration:underline;font-weight:600;font-size:15px;}
/* Submit-your-install photo examples band */
.tp-examples{padding:96px 0 0;}
.tp-examples h2{text-align:center;font-weight:700;font-size:30px;letter-spacing:-.5px;color:var(--ink);margin-bottom:34px;}
.tp-examples .row{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:900px;margin:0 auto;}
.tp-shot{background:var(--band);border-radius:16px;overflow:hidden;text-align:center;}
.tp-shot .ph{aspect-ratio:4/3;background:#dfe3ea url(https://evoheat.balartestingserver.com/assets/hero-bg.jpg) center/cover;}
.tp-shot .cap{padding:16px;font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);}
.tp-terms{text-align:center;font-weight:400;font-size:14px;color:#5a6068;margin-top:26px;}
@media(max-width:1200px){
  .tp-auth .grid{grid-template-columns:1fr;} .tp-locs .grid,.tp-archive .grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .tp-card{padding:32px 26px 36px;} .tp-grid{grid-template-columns:1fr;}
  .tp-locs .grid,.tp-archive .grid,.tp-examples .row{grid-template-columns:1fr;}
  .tp-aside{padding:36px 28px;} .tp-aside h2{font-size:26px;} .tp-note-card{padding:40px 26px;}
}

/* 5 Sep 2026: the footer grid had a fixed 689px first column and no responsive rule, so every page
   overflowed horizontally below about 1000px (Jesse review item 11, Nomar 4 Sep). */
@media(max-width:1100px){
  .ft-top{grid-template-columns:1fr;gap:48px;padding:80px 0 60px;}
  .ft-intro .fthead{font-size:44px;line-height:1.05;letter-spacing:-1.2px;margin-bottom:24px;}
  .ft-intro .ftsub{font-size:19px;max-width:none;}
  .ft-intro .ftphone{font-size:30px;}
}
@media(max-width:560px){
  .ft-top{padding:60px 0 40px;}
  .ft-intro .fthead{font-size:34px;}
  .ft-form .frow{gap:0;}
  .ft-field.half{flex:1 1 100%;}
  .ftsub-btn{width:100%;max-width:260px;height:64px;}
}
/* 23 Sep 2026, integrator fix. .ft-top was released above but .ft-form, its
   fields and .ft-cols were not, so below about 1100px the whole contact form
   (737px fixed) and all three link columns (fixed tracks pushed out by
   margin-left:698px) were laid out past the viewport and then hidden by
   .footer{overflow:hidden}. No horizontal scroll resulted, which is exactly
   why every pattern's 375px mobile check passed while the footer's content
   was unreachable on a phone. Reported independently by contact, blog,
   projects, downloads, about, pool-category and pool-accessory.
   Desktop is untouched: everything here is inside the same max-width the
   .ft-top release already uses, so no 1920 assertion can move. */
@media(max-width:1100px){
  .footer>.container{display:block;}
  .ft-form{width:100%;max-width:100%;margin-top:0;}
  .ft-form .frow{flex-wrap:wrap;margin-left:0;margin-top:24px;gap:16px;}
  .ft-form>.ft-field:nth-child(1),
  .ft-form>.ft-field:nth-child(3),
  .ft-form>.ft-field.message{width:100%;margin-left:0;}
  .ft-form>.ft-field:nth-child(3){margin-top:24px;}
  .ft-field.half:nth-child(1),.ft-field.half:nth-child(2){width:100%;flex:1 1 100%;}
  .ft-form>.ft-field.message{margin-top:24px;}
  .ftsub-btn{margin-top:28px;}
  .ft-cols{grid-template-columns:1fr;margin-left:0;padding:56px 0 32px;gap:28px;}
  .ft-bottom{width:auto;margin:0 0 24px;align-items:flex-start;text-align:left;justify-self:stretch;}
  .ft-bottom .ftcopy{width:auto;max-width:100%;}
}

/* =========================================================
   QUOTE BAR: NARROW SCREENS
   The base rules hold .quotebar .container and .qfields at
   flex-wrap:nowrap around two 300px inputs and a 194px button.
   That is 1,139px of content, so on a phone it pushed the whole
   document sideways to 1,495px rather than just clipping itself.
   Below 1200px the row is allowed to wrap; below 768px the
   inputs and the button each take the full width.
   ========================================================= */
@media(max-width:1200px){
  .quotebar .container{flex-wrap:wrap;height:auto;padding-top:28px;padding-bottom:28px;gap:18px;}
  .quotebar .qh{white-space:normal;flex:1 1 100%;}
  .quotebar .qfields{flex-wrap:wrap;margin-left:0;flex:1 1 100%;width:100%;}
}
@media(max-width:768px){
  .quotebar .qh{font-size:26px;}
  .quotebar .field{width:100%;flex:1 1 100%;}
  .quotebar .qbtn{width:100%;flex:1 1 100%;}
}
/* 10 Sep 2026: image rules for the containers that used to hold TODO-asset placeholders
   (live uploads and Figma exports now fill them). Contain for renders and drawings, cover for photos. */
.badges2 img{max-height:80px;max-width:100%;width:auto;object-fit:contain;}
.fip-feat .media .punit img,.punit img{max-height:100%;max-width:100%;object-fit:contain;}
.fip-feat .media .cer img{height:96px;width:auto;max-width:100%;object-fit:contain;}
.spec-panel .draw img{max-height:100%;max-width:100%;object-fit:contain;}
.php-navy .chart img,.chart img{max-width:100%;max-height:100%;object-fit:contain;}
.com-mod .info img{max-width:100%;max-height:430px;object-fit:contain;border-radius:20px;}
.php-guarantee .media .circ{overflow:hidden;}
.php-guarantee .media .circ img{width:100%;height:100%;object-fit:cover;}
.fip-video a.play{display:flex;text-decoration:none;}

/* 10 Sep 2026: CTA form band below 1100px. Copy (max 680) + gap + the 254px sizing-guarantee badge is wider
   than the container on tablets and phones and pushed the page sideways; the badge now wraps under the copy. */
@media(max-width:1100px){
  .ctaform .cf-inner{flex-wrap:wrap;}
  .ctaform .cf-copy{max-width:100%;flex:1 1 100%;}
  .ctaform .cfbadge{margin:18px auto 0;}
  .ctaform .cfcard{max-width:100%;}
}
@media(max-width:768px){
  .ctaform .cfbadge{width:150px;height:147px;}
}

/* 10 Sep 2026: phone header. Logo + hamburger only; the two header CTA buttons do not fit beside them at 375px
   and every page carries the same calls to action in its body and footer. */
@media(max-width:768px){
  .nav{padding:0 14px 0 20px;height:64px;}
  .nav .logo{width:140px;height:56px;}
  .nav-cta{display:none;}
  .nav-links.open{top:72px;}
}

/* 10 Sep 2026: phone reflow for two About page components that were fixed-width. */
@media(max-width:768px){
  .logo-row{flex-wrap:wrap;}
  .ab-why .track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;}
}

/* =========================================================
   10 Sep 2026: PHONE REFLOW for components that were fixed width in the page-scoped styles.
   Page styles are printed after this sheet (wp_head priority 20), so these selectors carry
   `html body` to win on specificity rather than order. Verified with a 375px sweep.
   ========================================================= */
@media(max-width:768px){
  /* shared reviews strip: 4 columns -> 1 */
  html body .rev-row{grid-template-columns:1fr;gap:28px;}
  html body .rcell .rbody{max-width:100%;}
  /* product sub-nav: scroll sideways inside its bar instead of widening the page */
  html body .fip-subnav .container{overflow-x:auto;gap:22px;height:64px;scrollbar-width:none;}
  html body .fip-subnav .container::-webkit-scrollbar{display:none;}
  html body .fip-subnav .container > *{flex:0 0 auto;white-space:nowrap;}
  html body .fip-subnav .pname{padding-right:18px;}
  /* spec and warranty tables keep their minimum width but scroll inside their card */
  html body .spec-card,html body .warr-card{overflow-x:auto;padding:24px 16px 28px;}
  /* homepage product cards: let the card shrink to the column, images scale down */
  html body .prod-row .pcard{min-width:0;}
  html body .pcard img{max-width:100%;height:auto;}
  html body .pcard .p-badge{max-height:80px;}
  html body .pcard .p-unit{max-height:180px;}
  /* about page why-cards: one column */
  html body .ab-why .track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:20px;}
  html body .ab-wcard{padding:36px 24px 20px;min-height:0;}
  /* wide tables anywhere else */
  html body table{max-width:100%;}
}
@media(max-width:768px){
  /* service request / warranty step rails: the 1200px rule lays the steps in one row, let them wrap on phones */
  html body .sr-steps,html body .wr-steps{flex-wrap:wrap;gap:10px 18px;}
  html body .sr-step,html body .wr-step{margin-bottom:8px;}
}
@media(max-width:768px){
  /* 10 Sep 2026: remaining fixed-column grids found by the 375px sweep */
  html body .php-faq .grid{grid-template-columns:1fr;gap:32px;}
  html body .fip-explore .row{display:grid;grid-template-columns:1fr;gap:24px;flex-wrap:wrap;}
  html body .fip-explore .php-pcard{min-width:0;max-width:100%;}
  html body .why-grid,html body .hw-why-grid,html body .ab-intro .grid,html body .php-guarantee .head{grid-template-columns:1fr;}
}
@media(max-width:768px){
  /* project pages: explore arrows sit inside the container instead of 8px outside it */
  html body .ps-exarr.prev{left:0;}
  html body .ps-exarr.next{right:0;}
}
@media(max-width:768px){
  /* explore-row product cards: image box and render scale to the card */
  html body .fip-explore .php-pcard > div{max-width:100%;width:auto;}
  html body .fip-explore .php-pcard img{max-width:100%;height:auto;}
}
@media(max-width:768px){
  /* explore cards: the card must fill the single grid column (it shrank to its content) and the inline
     max-width on the render has to yield */
  html body .fip-explore .row{justify-items:stretch;justify-content:stretch;}
  html body .fip-explore .php-pcard{width:100%;justify-self:stretch;margin:0;}
  html body .fip-explore .php-pcard img{max-width:100% !important;}
  html body .php-faq .grid > *{min-width:0;max-width:100%;}
}


/* 17 Sep 2026 parity fixes */
/* A1: product-page FAQ blocks reuse the .php-faq markup of the category pages but had no styles outside those templates */
.php-faq{padding:156px 0;}
.php-faq .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;max-width:1200px;margin:0 auto;}
.php-faq h2{font-weight:700;font-size:40px;line-height:1.15;letter-spacing:-0.9px;color:var(--ink);margin-bottom:22px;}
.php-faq .lead2{font-weight:300;font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:28px;max-width:340px;}
.php-faq .fbtn{width:140px;height:44px;background:var(--navy);border-radius:22px;font-size:14.5px;}
.php-faq details{border-bottom:1px solid #e2e5ec;}
.php-faq details:first-of-type{border-top:1px solid #e2e5ec;}
.php-faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-weight:600;font-size:18px;color:var(--ink);}
.php-faq summary::-webkit-details-marker{display:none;}
.php-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--band);color:#8a8f98;font-size:20px;font-weight:400;
  display:flex;align-items:center;justify-content:center;}
.php-faq details[open] summary::after{content:"-";}
.php-faq .fb{padding:0 0 24px;font-weight:300;font-size:15.5px;line-height:1.65;color:var(--ink);}
/* A7: hot water feature media: product image beside the badge column, as designed */
.fip-feat .media:has(.badges-col){display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;}
@media(max-width:1200px){.fip-faq-x{display:none;}}
/* click-to-play YouTube (data-yt), see assets/js/main.js */
[data-yt]{position:relative;cursor:pointer;}
[data-yt] iframe.yt-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;background:#000;}
[data-yt].playing > img,[data-yt].playing > .play,[data-yt].playing > .cov,[data-yt].playing > .lab,[data-yt].playing > video{display:none;}


/* =========================================================
   HOMEPAGE (front-page.php)
   Moved here from the template's inline <style> block as part of the
   figma-exact pass, and scoped to "body.home" so these rules cannot reach
   interior pages that share the same class names. Editing one file now
   changes the page, and the render harness measures what actually ships.
   ========================================================= */  /* 1920px artboard scaled uniformly on laptop viewports (pixel proportions preserved) */
  @media (min-width:1681px) and (max-width:1919px){body.home{zoom:.92;}}
  @media (min-width:1537px) and (max-width:1680px){body.home{zoom:.84;}}
  @media (min-width:1441px) and (max-width:1536px){body.home{zoom:.8;}}
  @media (min-width:1367px) and (max-width:1440px){body.home{zoom:.75;}}
  @media (min-width:1201px) and (max-width:1366px){body.home{zoom:.71;}}

  /* =========================================================
     HERO
     ========================================================= */
  body.home .hero{position:relative;min-height:1066px;overflow:hidden;color:#fff;}
  body.home .hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  /* Figma 559:2285 places the hero photo at x0 y-66 at 1980x1087, so its
     bottom edge lands at y1021. The quote bar (Figma 559:2313, y949 h120)
     then sits ON TOP of the photo and covers everything below y949. The old
     top:-148px with height:auto ended the photo at y954 and left a bare band
     under it once the bar was pushed down the page. */
  @media(min-width:1201px){
    body.home .hero .hero-bg{inset:auto;left:0;top:-66px;width:1980px;max-width:none;
       height:1087px;object-fit:cover;}
  }
  body.home .hero .overlay{position:absolute;inset:0;background:rgba(0,0,0,0.15);z-index:1;}
  body.home .hero .container{position:relative;z-index:2;width:100%;}
  /* Figma txt group: x=205 y=329; h1->sub 33px; sub->btns 32px; btn gap 10px */
  /* Figma txt group 559:2287 x205 y329; h1 y329 h225, sub y587 h47, btns y667 */
  body.home .hero .hero-inner{max-width:716px;padding-top:329px;margin-left:5px;}
  @media(max-width:1200px){body.home .hero .hero-inner{padding-top:180px;margin-left:0;}}
  body.home .hero h1{font-family:var(--font-display);font-weight:700;
     font-size:80px;line-height:75px;letter-spacing:-3.2px;margin-bottom:33px;}
  body.home .hero .sub{max-width:692px;font-weight:400;font-size:24px;line-height:23.5px;margin-bottom:33px;}
  /* Figma btn 1 x205, btn 2 x407: a 9px gap, not 10 */
  body.home .hero .hero-btns{display:flex;gap:9px;flex-wrap:wrap;}
  body.home .hero .hero-btns .btn{height:70px;width:193px;border-radius:60px;
     font-family:var(--font-display);font-weight:500;font-size:20px;}
  body.home .hero .btn-primary{background:var(--blue-hero);}
  body.home .hero .btn-ghost{background:transparent;border:1.5px solid #fff;}

  /* =========================================================
     CTA EVAL BAND
     ========================================================= */
  /* Figma: navy band 559:2383 y1068 h275; float image 559:2394 x197 y1017
     504x415, so it overhangs 51px above the band and 89px below. */
  body.home .ctaband{background:var(--navy-alt);position:relative;margin-top:-1px;}
  body.home .ctaband .container{display:flex;align-items:center;gap:47px;min-height:275px;}
  body.home .ctaband .unit{width:504px;height:415px;object-fit:contain;flex:0 0 auto;
     margin-left:-3px;margin-top:-51px;margin-bottom:-89px;}
  /* Figma copy block 1144..1242 inside a 1068..1343 band: 12.5px above the
     band's centre line, hence the trailing margin. */
  body.home .ctaband .cta-copy{color:#fff;flex:1 1 auto;margin-bottom:25px;}
  /* heading 559:2387 y1162 sits on the logo's baseline row (logo y1144 h57) */
  body.home .ctaband .cta-head-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:11px;}
  body.home .ctaband .ctahead{font-weight:700;font-size:36px;line-height:40px;letter-spacing:-0.72px;}
  body.home .ctaband .ctalogo{width:188.727px;height:57.011px;object-fit:contain;margin-left:auto;}
  body.home .ctaband .ctasub{font-weight:300;font-size:20px;line-height:30px;max-width:802px;}

  /* =========================================================
     INTRO 3-CARD
     ========================================================= */
  body.home .intro{padding:172px 0 155px;}
  body.home .intro .ih{text-align:center;font-weight:700;font-size:60px;line-height:64px;
     letter-spacing:-1.2px;color:var(--ink);margin-bottom:80px;}
  body.home .intro .ih .blue{color:var(--blue);}
  /* Figma cards 559:2343/2356/2369: 481 wide at x202 / 722 / 1242 */
  body.home .card-row{display:grid;grid-template-columns:repeat(3,481px);gap:39px;margin-left:2px;}
  body.home .icard{position:relative;border-radius:40px;overflow:hidden;aspect-ratio:481/698;}
  body.home .icard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  body.home .icard .grad{position:absolute;inset:0;
     background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0.8) 100%);opacity:.7;}
  body.home .icard.ic2 .shade{position:absolute;inset:0;background:rgba(0,0,0,0.1);}
  body.home .icard .icard-body{position:absolute;left:41px;right:41px;bottom:56px;z-index:2;color:#fff;}
  body.home .icard .ititle{font-weight:700;font-size:40px;letter-spacing:-1.6px;line-height:51px;margin-bottom:16px;}
  body.home .icard .isub{font-weight:300;font-size:17px;line-height:1.25;max-width:320px;}
  body.home .icard .iarrow{position:absolute;right:39px;bottom:56px;width:43px;height:43px;z-index:3;}

  /* =========================================================
     PRODUCTS
     ========================================================= */
  /* Figma Products 559:2296: band y2575 h905, heading y2693 h116, cards y2884.
     The cta-form photo below starts at y3458, so the band's own flow height
     stops there (the design's 905 tall rect is overlapped by that photo). */
  body.home .products{background:var(--band);padding:118px 0 153px;}
  body.home .products .ph{text-align:center;font-weight:700;font-size:50px;line-height:58px;
     letter-spacing:-1px;color:var(--ink);margin-bottom:75px;}
  /* cards 480x421 at x199 / 719 / 1239 */
  body.home .prod-row{display:grid;grid-template-columns:repeat(3,480px);gap:40px;margin-left:-1px;}
  body.home .pcard{background:#fff;border-radius:28px;height:421px;position:relative;}
  body.home .pcard .p-badge,body.home .pcard .p-unit{position:absolute;object-fit:contain;}
  /* Each card's badge and render is hand-placed in Figma, so they are set
     per card rather than centred. Offsets are frame px minus the card origin. */
  body.home .pcard:nth-child(1) .p-badge{left:114px;top:35px;width:253px;height:118.397px;}
  body.home .pcard:nth-child(1) .p-unit{left:83px;top:151px;width:312.563px;height:228px;}
  body.home .pcard:nth-child(2) .p-badge{left:118px;top:40px;width:244px;height:113px;}
  body.home .pcard:nth-child(2) .p-unit{left:86px;top:161px;width:308px;height:209px;}
  body.home .pcard:nth-child(3) .p-badge{left:79px;top:51px;width:323px;height:64px;}
  body.home .pcard:nth-child(3) .p-unit{left:92px;top:137px;width:297px;height:245px;}

  /* The homepage used to nudge this badge with translate(-25px,-51px). The
     x nudge is now the shared component's own margin-right (Figma 559:2337
     ends at x1695, 25px inside the container) and the y nudge was wrong: the
     badge's top is y3630, the same as the heading. */

  /* =========================================================
     WHY CHOOSE
     ========================================================= */
  /* Figma Why 559:2395: the navy panel starts at y4118, which is 107px ABOVE
     the bottom of the cta-form photo, and its top corners are rounded (r28).
     The build had it square and stacked after the photo. */
  body.home .why{background:#fff;padding-top:0;position:relative;z-index:2;margin-top:-107px;}
  body.home .why>.container{max-width:none;padding:0;} /* design: navy panel is full-bleed */
  /* Figma panel 4118..5254: 160px padding, eyebrow y4278, heading row y4306,
     sub y4402, card rows y4534 and y4837 (461 wide at x217/x739, 46px row gap,
     61px column gap), promo 443x560 at x1261. */
  body.home .why-wrap{background:var(--navy);border-radius:28px;padding:160px 0;}
  body.home .why .weyebrow{text-align:center;font-weight:500;font-size:22px;line-height:28px;
     letter-spacing:-0.44px;color:var(--blue-hero);margin-bottom:0;}
  body.home .why .whead-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:11px;}
  body.home .why .whead{font-weight:700;font-size:60px;line-height:85px;letter-spacing:-1.2px;color:#fff;}
  body.home .why .wlogo{width:269px;height:81px;object-fit:contain;}
  body.home .why .wsub{text-align:center;font-weight:300;font-size:20px;line-height:28px;
     letter-spacing:-0.4px;color:#fff;margin-bottom:104px;}
  body.home .why-grid{display:grid;grid-template-columns:461px 461px 443px;
     grid-template-rows:257px 257px;gap:46px 61px;align-items:stretch;margin-left:17px;}
  body.home .wcard{background:var(--card);border-radius:20px;padding:64px 58px 0;
     display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-content:start;}
  body.home .wcard .wcicon{grid-column:1;align-self:center;}
  body.home .wcard .wctitle{grid-column:2;align-self:center;font-weight:500;color:#fff;font-size:32px;line-height:38px;letter-spacing:-0.64px;}
  body.home .wcard.small .wctitle{font-size:30px;line-height:36px;letter-spacing:-0.6px;}
  body.home .wcard .wcbody{grid-column:1 / -1;margin-top:18px;font-weight:300;font-size:17px;line-height:22px;color:#fff;max-width:353px;}
  body.home .wpromo{grid-column:3;grid-row:1 / span 2;position:relative;border-radius:20px;overflow:hidden;
     display:flex;flex-direction:column;align-items:center;justify-content:space-between;
     padding:119px 33px 97px;text-align:center;}
  body.home .wpromo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  body.home .wpromo .ov{position:absolute;inset:0;background:rgba(0,0,0,0.2);z-index:1;}
  body.home .wpromo .wptitle{position:relative;z-index:2;font-weight:700;font-size:40px;line-height:38px;
     letter-spacing:-1.6px;color:#fff;max-width:317px;}
  body.home .wpromo .wpbtn{position:relative;z-index:2;width:100%;max-width:376px;height:57px;
     background:var(--blue-hero);border-radius:50px;font-weight:500;font-size:20px;}

  /* =========================================================
     FEATURED PROJECTS
     ========================================================= */
  /* Figma Projects 559:2514: heading y6339, cards y6460..7030, footer y7102 */
  body.home .projects{padding:0 0 73px;}
  body.home .projects .prh{text-align:center;font-weight:700;font-size:50px;line-height:67px;
     letter-spacing:-1px;color:var(--ink);margin-bottom:54px;}
  /* Figma cards 559:2515/2522/2532: 481 wide at x199 / 718 / 1239 */
  body.home .proj-row{display:grid;grid-template-columns:repeat(3,481px);gap:39px;margin-left:-1px;}
  body.home .prcard{position:relative;border-radius:40px;overflow:hidden;aspect-ratio:481/570;}
  body.home .prcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  body.home .prcard .grad{position:absolute;inset:0;
     background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0.8) 100%);opacity:.6;}
  body.home .prcard .prtitle{position:absolute;left:53px;right:40px;bottom:66px;z-index:2;color:#fff;
     font-weight:500;font-size:40px;letter-spacing:-1.6px;line-height:50px;}
  body.home .proj-wrap{position:relative;}
  /* Figma 559:2543 / 559:2546: the arrows sit OUTSIDE the cards, at x103 and
     x1758 on the 1920 frame, i.e. beyond the 200..1720 container. */
  body.home .proj-nav{position:absolute;top:50%;transform:translateY(-50%);left:-97px;right:-96px;
     display:flex;justify-content:space-between;z-index:5;pointer-events:none;}
  body.home .prnav{width:58px;height:58px;border-radius:29px;display:flex;align-items:center;justify-content:center;
     pointer-events:auto;cursor:pointer;}
  body.home .prnav img{width:14px;height:12px;}
  body.home .prprev{border:1px solid #18181e;opacity:.5;background:transparent;}
  body.home .prnext{background:var(--navy);}

  /* =========================================================
     RESPONSIVE (homepage-only rules)
     ========================================================= */
  @media(max-width:1200px){
    body.home .hero h1{font-size:clamp(44px,7vw,80px);line-height:1.02;letter-spacing:-2px;}
    body.home .hero .sub{font-size:clamp(18px,2.4vw,24px);}

    body.home .ctaband .container{flex-wrap:wrap;justify-content:center;text-align:center;padding-top:0;padding-bottom:40px;gap:24px;}
    body.home .ctaband .unit{margin:-40px auto 0;width:min(420px,80%);height:auto;}
    body.home .ctaband .cta-head-row{justify-content:center;}
    body.home .ctaband .ctalogo{margin:0;}
    body.home .ctaband .ctasub{margin:0 auto;}

    body.home .intro .ih{font-size:clamp(34px,5vw,60px);line-height:1.08;}
    body.home .products .ph,body.home .projects .prh{font-size:clamp(32px,4.5vw,50px);line-height:1.12;}

    body.home .why .whead{font-size:clamp(34px,5vw,60px);}
    body.home .why-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:24px;}
    body.home .wcard{padding:48px 40px;min-height:240px;}
    body.home .wpromo{grid-row:auto;grid-column:1 / -1;min-height:420px;padding:70px 33px;}
  }

  @media(max-width:768px){
    body.home .card-row,body.home .prod-row,body.home .proj-row{grid-template-columns:1fr;max-width:481px;margin:0 auto;}
    body.home .icard{aspect-ratio:481/560;}
    body.home .why-grid{grid-template-columns:1fr;}
    body.home .wpromo{grid-column:auto;}
    body.home .proj-nav{display:none;}
    body.home .hero{min-height:600px;}
    body.home .hero .hero-inner{padding-top:40px;}
    /* let long headings wrap naturally instead of the desktop hard breaks */
    body.home .hero h1{font-size:clamp(30px,8.2vw,80px);line-height:1.06;letter-spacing:-1px;}
    body.home .hero .sub{font-size:clamp(16px,4.4vw,24px);}
    body.home .hero .hero-btns .btn{width:auto;padding:0 30px;}
    body.home h1,body.home h2,body.home .ctahead,body.home .whead{overflow-wrap:break-word;}
    body.home .ctaband .ctahead{font-size:clamp(24px,5.5vw,36px);line-height:1.15;}
    body.home .why .whead{font-size:clamp(28px,6vw,60px);}
  }

/* =========================================================
   RESPONSIVE GUARDS (figma-exact)
   Figma has no mobile frames, so the pixel-exact desktop rules above are
   written for the 1920 artboard only. Below 1201px this block releases the
   fixed widths, negative margins and absolute placements back to a fluid
   layout, so the desktop work cannot leak a horizontal scrollbar onto phones.
   Placed last, and mirroring each rule's own specificity, so it wins.
   ========================================================= */
@media(max-width:1200px){
  .quotebar{margin-top:0;}
  .quotebar .container{padding:0 24px;}

  /* reviews: the row is pulled 28px outside the container on desktop */
  .rev-row{width:auto;margin-left:0;grid-template-columns:repeat(2,minmax(0,1fr));
     justify-content:start;gap:40px;}
  .rev-row .rcell:nth-child(1),
  .rev-row .rcell:nth-child(2),
  .rev-row .rcell:nth-child(3),
  .rev-row .rcell:nth-child(4){height:auto;}

  /* logos: full-bleed -100..2020 row on desktop */
  .logos{padding:60px 0 60px;}
  .logos>.container{max-width:var(--container);padding:0 24px;}
  .logo-row{margin-left:0;flex-wrap:wrap;justify-content:center;}
  .lpill{flex:0 1 auto;padding:0 34px;}
  .lpill:last-child{flex-basis:auto;}
  .lpill:nth-child(1) img,.lpill:nth-child(2) img,.lpill:nth-child(3) img,
  .lpill:nth-child(4) img,.lpill:nth-child(5) img,.lpill:nth-child(6) img{
     width:auto;height:auto;max-height:52px;max-width:100%;}

  /* evaluation CTA: per-child margins replace the flex gap on desktop */
  .ctaform .cf-inner{padding:80px 0;gap:24px;align-items:center;}
  .ctaform .cfcard{margin-left:0;}
  .ctaform .cf-copy{margin-left:0;margin-top:0;max-width:100%;}
  .ctaform .cfbody{width:auto;}
  .ctaform .cfbadge{margin-left:auto;margin-top:0;}

  /* homepage grids and the hand-placed product card contents */
  body.home .why{margin-top:0;}
  body.home .why-grid{margin-left:0;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:24px;}
  body.home .card-row,body.home .prod-row,body.home .proj-row{
     grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0;gap:24px;}
  body.home .pcard{height:auto;aspect-ratio:480/421;display:flex;flex-direction:column;
     align-items:center;justify-content:center;gap:8px;padding:35px;}
  body.home .pcard .p-badge,body.home .pcard .p-unit{position:static;left:auto;top:auto;
     width:auto;height:auto;max-width:100%;}
  body.home .pcard .p-badge{max-height:118px;}
  body.home .pcard .p-unit{max-height:245px;}
}
@media(max-width:768px){
  .rev-row{grid-template-columns:1fr;}
  body.home .card-row,body.home .prod-row,body.home .proj-row{grid-template-columns:1fr;}
  body.home .why-grid{grid-template-columns:1fr;}
}
/* =========================================================
   PRODUCT CARD (shared component, Figma 704:3 section 704:62)
   480x645, radius 28, on #ffffff. Card internals are hand-placed in Figma
   rather than flowed, so they are absolutely positioned from the card's own
   top-left: badge at (99,341) 316x90, name top 455, sub top 495, button
   (88,548) 321x45. The product render differs per card and is set per card.
   Row: three 480 cards on a 40px gap, filling the 1520 container exactly.
   Canonical class .product-card; .php-pcard is the name the category
   templates already use, kept as an alias so no markup change is needed.
   ========================================================= */
.product-card,.php-pcard{position:relative;width:480px;height:645px;
   background:#fff;border-radius:28px;padding:0;display:block;text-align:center;}
.product-card .pimg,.php-pcard .pimg{position:absolute;margin:0;display:block;height:auto;}
.product-card .pimg img,.php-pcard .pimg img{width:100%;height:100%;object-fit:contain;}
.product-card .pbadge,.php-pcard .pbadge{position:absolute;left:99px;top:341px;width:316px;height:90px;object-fit:contain;}
.product-card h3,.php-pcard h3{position:absolute;left:0;right:0;top:455px;margin:0;
   font-family:var(--font-display);font-weight:500;font-size:30px;line-height:32px;
   letter-spacing:-0.6px;color:#27272d;}
.product-card .psub,.php-pcard .psub{position:absolute;left:0;right:0;top:495px;margin:0;
   font-family:var(--font-display);font-weight:300;font-size:17px;line-height:22px;color:#000;}
.product-card .pbtn,.php-pcard .pbtn{position:absolute;left:88px;top:548px;width:321px;height:45px;
   display:inline-flex;align-items:center;justify-content:center;
   background:var(--navy);border-radius:9999px;
   font-family:var(--font-ui);font-weight:500;font-size:16px;line-height:26.4px;color:#fff;}
/* Figma places each render differently: card 1 (76,60) 361x263,
   card 2 (80,66) 355x275, card 3 (153,51) 194x281. */
.product-card-row .product-card:nth-child(1) .pimg,.php-range .row .php-pcard:nth-child(1) .pimg{left:76px;top:60px;width:361px;height:263px;}
.product-card-row .product-card:nth-child(2) .pimg,.php-range .row .php-pcard:nth-child(2) .pimg{left:80px;top:66px;width:355px;height:275px;}
.product-card-row .product-card:nth-child(3) .pimg,.php-range .row .php-pcard:nth-child(3) .pimg{left:153px;top:51px;width:194px;height:281px;}
.product-card-row,.php-range .row{display:grid;grid-template-columns:repeat(3,480px);
   gap:40px;max-width:none;margin:0;}

/* =========================================================
   FAQ (shared component, Figma 704:3 section 704:267)
   Two columns: copy at x232 w598, accordion at x977 w743 (147px gap).
   Rows are 90px apart closed; the divider is a 741x1 #d3d3d3 line and the
   last row has none. The toggle is a 57.962x58 circle: closed is a #d3d3d3
   outline with a #d3d3d3 plus, open is a solid #f4f4f4 disc with a #8f8f8f minus.
   ========================================================= */
/* Figma puts the block at x232, 32px inside the 1520 container */
.faq-block,.php-faq .grid{display:grid;grid-template-columns:598px 743px;gap:0 147px;
   align-items:start;max-width:none;margin:0 0 0 32px;}
.faq-block h2,.php-faq h2{font-family:var(--font-display);font-weight:700;font-size:50px;
   line-height:55px;letter-spacing:-1.5px;color:#27272d;margin:0 0 23px;}
.faq-block .lead2,.php-faq .lead2{font-family:var(--font-display);font-weight:300;font-size:20px;
   line-height:26px;color:#27272d;max-width:572px;margin:0 0 14px;}
.faq-block .fbtn,.php-faq .fbtn{display:inline-flex;align-items:center;justify-content:center;
   width:140px;height:45px;background:var(--navy);border-radius:9999px;
   font-family:var(--font-ui);font-weight:500;font-size:16px;line-height:26.4px;color:#fff;}
.faq-block details,.php-faq details{border-bottom:1px solid var(--line);border-top:0;}
.faq-block details:last-of-type,.php-faq details:last-of-type{border-bottom:0;}
.faq-block details:first-of-type,.php-faq details:first-of-type{border-top:0;}
.faq-block summary,.php-faq summary{list-style:none;cursor:pointer;position:relative;
   margin:0;padding:0 80px 0 0;height:89px;display:flex;align-items:center;
   font-family:var(--font-display);font-weight:500;font-size:26px;line-height:56px;
   letter-spacing:-0.78px;color:#27272d;}
.faq-block summary::-webkit-details-marker,.php-faq summary::-webkit-details-marker{display:none;}
.faq-block summary::after,.php-faq summary::after{content:"+";position:absolute;right:0;top:50%;
   transform:translateY(-50%);width:57.962px;height:58px;border-radius:50%;
   background:transparent;border:1px solid var(--line);color:var(--line);
   font-family:var(--font-display);font-size:26px;font-weight:300;
   display:flex;align-items:center;justify-content:center;}
.faq-block details[open] summary::after,.php-faq details[open] summary::after{content:"-";
   background:var(--band);border-color:var(--band);color:var(--icon-grey);}
.faq-block .fb,.php-faq .fb{margin:0;padding:0 0 32px;width:649px;
   font-family:var(--font-display);font-weight:300;font-size:20px;line-height:26px;color:#27272d;}

/* =========================================================
   CONTACT CARD (shared component, Figma 704:3 node 704:20)
   604x706 at x1114, straddling the hero's bottom edge: 392px of it sits on
   the hero and 314px below. Radius 28, 1px #d3d3d3 border on white.
   Padding 34 left / 35 right / 39 top. Fields are 62 high on #f9f9f9 at 18px,
   the row pitch is 78, and the button is 534x65 at 20px.
   ========================================================= */
.contact-card,.php-contact{position:absolute;right:202px;width:604px;height:706px;
   background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:none;
   padding:39px 35px 55px 34px;z-index:4;}
.contact-card h2,.php-contact h2{display:flex;align-items:center;justify-content:flex-start;
   gap:12px;margin:0;font-family:var(--font-display);font-weight:700;font-size:40px;
   line-height:50px;letter-spacing:-1.2px;color:#27272d;text-align:left;}
.contact-card h2 img,.php-contact h2 img{width:196px;height:59px;object-fit:contain;}
.contact-card .fld2,.php-contact .fld2{height:62px;background:var(--field);border:none;
   border-radius:50px;padding:0 24px;font-family:var(--font-display);font-weight:300;
   font-size:18px;color:#27272d;}
.contact-card .fld2::placeholder,.php-contact .fld2::placeholder{color:#27272d;opacity:1;}
.contact-card .btn,.php-contact .btn{width:534px;height:65px;background:var(--blue-hero);
   border-radius:60px;font-family:var(--font-display);font-weight:500;font-size:20px;color:#fff;}
/* =========================================================
   HOT WATER CHROME (shared component)
   The hot water engine has its OWN nav (Figma 957:399) and footer (957:341).
   They are not the pool ones with different links: the bar sits 3px lower,
   the links are 20px not 18px and are hand-placed rather than evenly spaced,
   the buttons are 53 tall not 45 with the colours swapped, the footer is 51px
   shorter and its logo is a different, larger piece of artwork.
   header-hotwater.php and footer-hotwater.php carry the --hw modifier.
   ========================================================= */
/* -- nav 957:399: bar x53 y27 1813x72 -- */
.site-header--hw{top:27px;}
/* The links are not vertically centred in the bar: Figma puts their boxes
   24px down from the bar's top edge, 27px tall. */
/* 23 Sep 2026, integrator fix: the hot water nav carried the SAME error as the
   pool one. Frame 957:399 is at x53, its children are reported relative to it,
   and the build converted every y (24+27=51, 9+27=36) but no x. Proved by
   rendering 957:399 on its own at 1813 wide: the Residential label inks at
   501 inside that render, i.e. at page x552, not 499. Absolute link x is
   552.15 / 717 / 889 / 1031 / 1251 and the buttons 1416 / 1702.
   215.2 + 53 = 268.2, less the 13px the logo's own correction below already
   pushes this row (the links follow the logo in the flex line), so 255.2. */
.site-header--hw .nav-links{margin-left:255.2px;gap:0;align-self:flex-start;margin-top:24px;}
.site-header--hw .nav-links a{font-size:20px;line-height:27px;}
.site-header--hw .nav-links li{flex:0 0 auto;}
.site-header--hw .nav-links li:nth-child(1){width:101px;}
.site-header--hw .nav-links li:nth-child(2){width:112px;}
.site-header--hw .nav-links li:nth-child(3){width:101.474px;}
.site-header--hw .nav-links li:nth-child(4){width:183.474px;}
.site-header--hw .nav-links li:nth-child(5){width:121.474px;}
/* Figma link boxes: Residential x499.15 w101, Commercial x664 w112,
   About x836 w101.474, Technical Support x978 w183.474, Downloads x1198
   w121.474. The gaps between them are 63.85 / 60 / 40.526 / 36.526, so they
   are set per item rather than as one flex gap. */
.site-header--hw .nav-links li:nth-child(1){margin-right:63.85px;}
.site-header--hw .nav-links li:nth-child(2){margin-right:60px;}
.site-header--hw .nav-links li:nth-child(3){margin-right:40.526px;}
.site-header--hw .nav-links li:nth-child(4){margin-right:36.526px;}
/* buttons 957:413 Rebates 273x53 at x1416, 957:411 Contact 148x53 at x1702
   (both absolute, i.e. the reported 1363 / 1649 plus the frame's own x53),
   13px apart and ending at 1850, which is 3px PAST the bar's right content
   edge of 1847, hence the negative margin. */
.site-header--hw .nav-cta{gap:13px;margin-right:-3px;}
.site-header--hw .nav-cta .btn{height:53px;font-size:17.6px;line-height:26.4px;padding:0;}
.site-header--hw .nav-cta .btn-contact{width:273px;background:var(--navy);}
.site-header--hw .nav-cta .btn-eval{width:148px;background:var(--blue-hero);}
/* logo-2 957:416 is x59 w171 inside the frame, so absolute x112; the bar's
   content starts at 93, hence 19. The old 6 came from reading 59 as absolute. */
.site-header--hw .logo{margin-left:19px;}

/* -- footer 957:341: frame y7285 h1185, 51px shorter than the pool one --
   eyebrow +178 from the footer top (pool +205), link headings +887 (pool
   +967), logo 298x89 at x278 (pool 239x71 at x311), copyright centred on
   x427 (pool x431), columns 4px left of the pool ones. */
.footer--hw .ft-top{padding-top:178px;}
.footer--hw .ft-cols{padding:147px 0 122px;margin-left:694px;
   grid-template-columns:298px 352px 176px;}
.footer--hw .ft-bottom{margin-top:141px;margin-left:0;gap:17px;}
.footer--hw .ft-bottom .ftlogo{width:298px;height:89px;}
/* ---- responsive guards for the shared components added in the
   figma-exact pass. Same rule as the block above: the pixel-exact values are
   for the 1920 artboard only, and below 1201px they go back to fluid. ---- */
@media(max-width:1200px){
  .product-card-row,.php-range .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .product-card,.php-pcard{width:auto;height:auto;min-height:645px;}
  .product-card .pimg,.php-pcard .pimg,
  .product-card-row .product-card:nth-child(1) .pimg,.php-range .row .php-pcard:nth-child(1) .pimg,
  .product-card-row .product-card:nth-child(2) .pimg,.php-range .row .php-pcard:nth-child(2) .pimg,
  .product-card-row .product-card:nth-child(3) .pimg,.php-range .row .php-pcard:nth-child(3) .pimg{
     position:static;left:auto;top:auto;width:auto;height:263px;margin:60px auto 0;}
  .product-card .pbadge,.php-pcard .pbadge{position:static;margin:18px auto 0;max-width:100%;}
  .product-card h3,.php-pcard h3,.product-card .psub,.php-pcard .psub{position:static;top:auto;margin:16px 0 0;}
  .product-card .pbtn,.php-pcard .pbtn{position:static;left:auto;top:auto;margin:24px auto 0;max-width:100%;}

  .faq-block,.php-faq .grid{grid-template-columns:1fr;gap:44px;margin-left:0;}
  .faq-block summary,.php-faq summary{height:auto;padding:24px 70px 24px 0;font-size:22px;line-height:1.3;}
  .faq-block .fb,.php-faq .fb{width:auto;}

  .contact-card,.php-contact{position:static;width:100%;max-width:604px;height:auto;
     margin:40px auto -20px;padding:32px 24px;}
  .contact-card .btn,.php-contact .btn{width:100%;}

  .site-header--hw{top:24px;}
  .site-header--hw .nav-links{margin-left:0;margin-top:0;align-self:auto;}
  .site-header--hw .nav-links li{width:auto !important;margin-right:0 !important;}
  .site-header--hw .nav-cta{margin-right:0;}
  .footer--hw .ft-top{padding-top:80px;}
  .footer--hw .ft-cols{padding:60px 0 40px;margin-left:0;grid-template-columns:1fr;}
  .footer--hw .ft-bottom{margin-top:24px;}
}
@media(max-width:768px){
  .product-card-row,.php-range .row{grid-template-columns:1fr;}
}