/* ============================================================
   EUROHEAT - BRAND TOKENS
   Single source of truth for colour and type. Linked by every
   page in <head>; pages no longer define their own :root block.

   WHY THESE VALUES (warm parchment palette, updated 2025):
   - --red is the actual logo red (BC0F35 from the brand file),
     a deep brick/wine red. Correct for light backgrounds where
     it achieves 6:1+ contrast.
   - --red-bright exists for one reason only: small bold red
     labels sitting directly on --black or --ink. The true brand
     red only reaches ~2.5:1 contrast against --black; --red-bright
     is tuned to clear 3:1+ so those labels stay legible. Never
     use it on light backgrounds.
   - --blush (#f5ede8) is the hero/section background: warm,
     slightly rose-tinted near-white. Matches --grey-100.
   - --parchment (#e2cfc6) is used for .dark sections (formerly
     black). The old black-on-dark scheme is retired.
   - Greys carry warm undertones throughout (--grey-600 at
     #6a5248, etc.) to complement the brand red.

   To re-tune the whole site, edit the values below. Nothing else
   needs to change.
   ============================================================ */
:root{
  --red:#bc0f35;
  --red-deep:#8f0b29;
  --red-bright:#ef335c;
  --red-soft:#f1dde2;
  --black:#221f20;
  --ink:#3a2d2a;
  --grey-900:#433d3e;
  --grey-600:#6a5248;
  --grey-500:#886e64;
  --grey-400:#a88c82;
  --grey-300:#c4aa9f;
  --grey-200:#ddc9bf;
  --grey-100:#f5ede8;
  --blush:#f5ede8;
  --parchment:#e2cfc6;
  --paper:#fdf9f4;
  --white:#fff;
  --font-display:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ============================================================
   SHARED PAGE CHROME
   Reset, layout shell, masthead, buttons, section label, dark
   sections, footer, focus rings, site navigation – identical
   across all pages. Defined once here so each page's <style>
   block only carries page-specific component rules.

   To change any of these site-wide: edit only this file.
   ============================================================ */

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--white);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}

/* layout shell */
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
/* One left edge (27 Sep 2026, owner feedback): a .wrap.narrow section keeps the
   same left edge as every other section and only limits line length. Before,
   it re-centred a 760px column, so its text started 120px further right than
   the section above it. Never centre a section's text column again. */
.wrap.narrow{max-width:1000px}
.wrap.narrow>*{max-width:712px}

/* masthead – ONE sticky bar since 27 Sep 2026: logo left, menu next to it,
   the action button right, the red brand rule under the whole bar.
   It replaced a two-bar header whose menu stuck at top:65px under a 74px
   masthead, so on scroll the menu slid 9px under it and its labels were
   clipped against the red line. Nothing is stacked any more, so nothing
   can overlap. Pages must not set top offsets for the menu again. */
header.masthead{background:var(--white);color:var(--black);border-bottom:3px solid var(--red);position:sticky;top:0;z-index:50}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.masthead .wrap.mh{max-width:1240px;gap:22px}
.logo{font-family:var(--font-display);font-weight:900;letter-spacing:-0.02em;font-size:19px;text-transform:uppercase;flex-shrink:0}
.logo span{color:var(--red)}
.nav-cta{font-family:var(--font-display);font-size:12px;text-transform:uppercase;background:var(--red);color:var(--white);text-decoration:none;padding:10px 16px;letter-spacing:0.02em;white-space:nowrap;flex-shrink:0}
.nav-cta:hover{background:var(--red-deep)}
html{scroll-padding-top:84px}

/* buttons */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-primary{font-family:var(--font-display);font-size:16px;text-transform:uppercase;background:var(--red);color:var(--white);text-decoration:none;padding:17px 28px;letter-spacing:0.01em;transition:background .14s}
.btn-primary:hover{background:var(--red-deep)}
.btn-ghost{font-family:var(--font-body);font-size:15px;color:var(--ink);text-decoration:none;padding:17px 4px;border-bottom:2px solid var(--grey-400);transition:border-color .14s}
.btn-ghost:hover{border-color:var(--red)}

/* section label */
section{padding:64px 0}
.sec-eyebrow{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:14px}

/* dark sections (now parchment, not black) */
h2.on-dark{color:var(--black)}
.dark{background:var(--parchment);color:var(--ink)}
.dark .sec-eyebrow{color:var(--red)}
.dark .body-lg{color:var(--grey-600)}
.dark .body-lg strong{color:var(--ink)}
.dark .guarantee-list li{color:var(--grey-600);border-bottom-color:var(--grey-300)}
.dark .guarantee-list li strong{color:var(--ink)}
.dark .about-strip p{color:var(--grey-600)}
.dark .about-strip strong{color:var(--ink)}
.dark .about-contact a{color:var(--red)}
.dark .about-contact a:hover{color:var(--red-deep)}

/* footer */
footer{background:var(--black);color:var(--grey-400);padding:34px 0;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
footer a{color:var(--white);text-decoration:none}

/* footer legal row (23 July 2026)
   Privacy used to sit inline, one middot from "Contact ->", in the same
   colour - the eye read them as a matching pair of nav links. It now has
   its own hairline-separated row so the enquiry CTA is the only link in
   the footer sentence. Do NOT dim it below --grey-400: that is 5.2:1 on
   --black and passes AA at 11px; --grey-500 is 3.5:1 and fails. The
   demotion comes from position and size, not from fading the link out. */
footer .f-contact{color:var(--white)}
footer .f-legal{display:block;border-top:1px solid rgba(255,255,255,0.10);margin-top:18px;padding-top:12px;text-align:right;font-size:11px}
footer .f-legal a{color:var(--grey-400)}
footer .f-legal a:hover{color:var(--white)}

/* focus rings */
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.dark a:focus-visible,.final a:focus-visible{outline-color:var(--red)}

/* site navigation – lives INSIDE header.masthead (one bar, see masthead note).
   Desktop: logo | menu | action button. At 1300px and below the menu folds
   into the hamburger panel that drops below the red rule. */
nav.sitenav{flex:1;min-width:0;align-self:stretch;display:flex}
nav.sitenav .nav-inner{display:flex;align-items:stretch;gap:0}
nav.sitenav a{font-family:var(--font-body);font-size:14px;color:var(--grey-600);text-decoration:none;white-space:nowrap;transition:color .12s}
nav.sitenav .nav-inner>a{display:flex;align-items:center;padding:0 7px}
nav.sitenav a:hover{color:var(--black)}
nav.sitenav a.active{color:var(--black);font-weight:600;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:7px}
nav.sitenav a:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
nav.sitenav .nav-inner>a.nav-cta-mobile{display:none}

/* logo link */
.logo a{display:block;line-height:0}

/* dropdown ("has-sub" details wrapper). The panel is grouped into columns
   with small headings (.sub-col / .sub-h) so a long Resources list reads as
   Tools / Guides / Learn instead of one 16-line column. */
.has-sub{position:relative;display:flex;flex-shrink:0}
.has-sub>summary{list-style:none;font-family:var(--font-body);font-size:14px;color:var(--grey-600);padding:0 7px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;user-select:none;transition:color .12s}
.has-sub>summary::-webkit-details-marker{display:none}
.has-sub>summary::marker{content:""}
.has-sub>summary::after{content:"▾";margin-left:4px;font-size:10px}
.has-sub>summary:hover,.has-sub[open]>summary{color:var(--black)}
.has-sub:has(a.active)>summary{color:var(--black);font-weight:600;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:7px}
.sub-menu{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid #e0d4ce;border-top:none;z-index:200;box-shadow:0 10px 24px rgba(34,31,32,0.12);display:grid;grid-template-columns:repeat(3,max-content);gap:4px 10px;padding:18px 14px 20px}
/* wide screens: the panel hangs from the whole bar, centred, not from the word */
@media(min-width:1301px){.masthead .wrap.mh{position:relative}nav.sitenav .has-sub{position:static}}
.sub-col{display:flex;flex-direction:column;min-width:0}
.sub-h{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--red);font-weight:700;padding:4px 12px 8px}
.sub-menu a{display:block;font-size:14px;color:var(--grey-600);padding:8px 12px;white-space:nowrap;transition:color .12s,background .12s}
.sub-menu a:hover{color:var(--black);background:var(--grey-100)}
.sub-menu a.active{color:var(--black);font-weight:600;background:var(--grey-100);text-decoration:none}
.sub-menu .sub-note{display:block;font-size:12px;color:var(--grey-500);font-weight:400;margin-top:1px;white-space:normal}

/* hamburger button (hidden on wide screens) */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px 8px;color:var(--black);font-size:26px;line-height:1;margin-left:4px;flex-shrink:0}
.nav-toggle:hover{color:var(--red)}

/* folded menu: tablets and small laptops (full bar needs ~1,240px) */
@media(max-width:1300px){
  .masthead .wrap.mh{gap:16px}
  .nav-toggle{display:block}
  .nav-cta{margin-left:auto}
  nav.sitenav{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--white);border-bottom:1px solid var(--grey-200);box-shadow:0 12px 24px rgba(34,31,32,0.12);max-height:calc(100vh - 70px);overflow-y:auto;flex:none}
  nav.sitenav.open{display:block}
  nav.sitenav .nav-inner{flex-direction:column;align-items:stretch;max-width:1240px;margin:0 auto}
  nav.sitenav .nav-inner>a{padding:14px 24px;border-bottom:1px solid var(--grey-200);border-left:3px solid transparent;font-size:15px}
  nav.sitenav .nav-inner>a.active{border-left-color:var(--red);padding-left:21px;text-decoration:none}
  nav.sitenav .has-sub{flex-direction:column}
  nav.sitenav .has-sub>summary{padding:14px 24px;border-bottom:1px solid var(--grey-200);border-left:3px solid transparent;font-size:15px}
  nav.sitenav .has-sub:has(a.active)>summary{border-left-color:var(--red);padding-left:21px;text-decoration:none}
  nav.sitenav .sub-menu{position:static;transform:none;box-shadow:none;border:none;border-bottom:1px solid var(--grey-200);grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 14px 14px 24px;background:var(--paper)}
  nav.sitenav .sub-menu a{white-space:normal}
}
/* folded by nav.js: a wide screen whose bar is still too full (a long action
   button, a wider font) folds exactly like the 1300px layout above instead of
   letting the button slide over "Contact" (28 Sep 2026). Same rules as the
   media query – keep the two blocks in step. */
.masthead.fold .wrap.mh{gap:16px;position:static}
.masthead.fold .nav-toggle{display:block}
.masthead.fold .nav-cta{margin-left:auto}
.masthead.fold nav.sitenav{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--white);border-bottom:1px solid var(--grey-200);box-shadow:0 12px 24px rgba(34,31,32,0.12);max-height:calc(100vh - 70px);overflow-y:auto;flex:none}
.masthead.fold nav.sitenav.open{display:block}
.masthead.fold nav.sitenav .nav-inner{flex-direction:column;align-items:stretch;max-width:1240px;margin:0 auto}
.masthead.fold nav.sitenav .nav-inner>a{padding:14px 24px;border-bottom:1px solid var(--grey-200);border-left:3px solid transparent;font-size:15px}
.masthead.fold nav.sitenav .nav-inner>a.active{border-left-color:var(--red);padding-left:21px;text-decoration:none}
.masthead.fold nav.sitenav .has-sub{flex-direction:column;position:relative}
.masthead.fold nav.sitenav .has-sub>summary{padding:14px 24px;border-bottom:1px solid var(--grey-200);border-left:3px solid transparent;font-size:15px}
.masthead.fold nav.sitenav .has-sub:has(a.active)>summary{border-left-color:var(--red);padding-left:21px;text-decoration:none}
.masthead.fold nav.sitenav .sub-menu{position:static;transform:none;box-shadow:none;border:none;border-bottom:1px solid var(--grey-200);grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 14px 14px 24px;background:var(--paper)}
.masthead.fold nav.sitenav .sub-menu a{white-space:normal}

/* phones: the action button moves from the bar into the open menu */
@media(max-width:640px){
  .nav-cta{display:none}
  .nav-toggle{margin-left:auto}
  nav.sitenav .sub-menu{grid-template-columns:1fr;padding:6px 0 10px 24px}
  nav.sitenav .nav-inner>a.nav-cta-mobile{display:block;margin:16px 24px 20px;border:none;text-align:center;font-family:var(--font-display);font-size:14px;text-transform:uppercase;background:var(--red);color:var(--white)!important;text-decoration:none;padding:15px 18px}
  nav.sitenav .nav-inner>a.nav-cta-mobile:hover{background:var(--red-deep)}
}
@media(max-width:400px){
  header.masthead .wrap{padding:0 12px}
  .logo img{width:150px;height:auto}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Photo captions — used across all pages with placed photography */
.photo-caption{font-size:12px;color:var(--grey-400);margin-top:8px;margin-bottom:16px;font-style:italic}

/* ============================================================
   SHARED CONTENT COMPONENTS (27 Sep 2026, site review)
   Reusable pieces for breaking up long pages. Rules in
   guidelines-website-design-and-pages.md -> "Shared content components".
   ============================================================ */

/* "The whole job is ours" – four numbered steps under a hero */
.job-strip{background:var(--white);padding:44px 0 46px;border-bottom:1px solid var(--grey-200)}
.job-strip .js-title{font-family:var(--font-display);font-weight:900;font-size:clamp(22px,3vw,30px);color:var(--black);letter-spacing:-0.015em;line-height:1.05;margin-bottom:22px;max-width:none}
.job-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:js;margin:0;padding:0}
.job-steps li{counter-increment:js;border-top:3px solid var(--red);padding-top:14px;font-size:14.5px;color:var(--grey-600);line-height:1.55}
.job-steps li::before{content:"0" counter(js);display:block;font-family:var(--font-display);font-size:13px;color:var(--red);letter-spacing:0.08em;margin-bottom:6px}
.job-steps strong{display:block;color:var(--ink);font-size:17px;margin-bottom:4px;line-height:1.25}
.job-strip .js-foot{margin-top:22px;font-size:15.5px;color:var(--ink);max-width:72ch}
@media(max-width:860px){.job-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.job-steps{grid-template-columns:1fr;gap:16px}}

/* split: text beside a picture or diagram (stacks on phones) */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.split.top{align-items:start}
.split.flip>:first-child{order:2}
.split figure{margin:0}
.split img{display:block;width:100%;height:auto}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:26px}.split.flip>:first-child{order:0}}

/* mood band: a generated atmosphere image between sections.
   Generated images are MOOD, never proof: no job, suburb or year in any text
   near them, never a hero (guidelines -> Generated mood imagery). */
.mood-band{position:relative;height:clamp(230px,32vw,420px);overflow:hidden;background:var(--parchment)}
.mood-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mood-band .mb-line{position:absolute;left:0;right:0;bottom:0;padding:60px 24px 26px;background:linear-gradient(to top,rgba(34,31,32,0.75),rgba(34,31,32,0))}
.mood-band .mb-line p{max-width:952px;margin:0 auto;color:#fff;font-family:var(--font-display);font-size:clamp(19px,2.4vw,28px);line-height:1.15;letter-spacing:-0.01em}

/* diagram pair: two labelled drawings side by side */
.diagram-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}
.diagram-pair figure{margin:0;background:var(--paper);border:1px solid var(--grey-200);display:flex;flex-direction:column}
.diagram-pair svg,.diagram-pair img{display:block;width:100%;height:auto}
.diagram-pair figcaption{padding:12px 16px 14px;font-size:14px;color:var(--grey-600);line-height:1.5;border-top:1px solid var(--grey-200)}
.diagram-pair figcaption strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.diagram-pair .bad figcaption strong{color:var(--red-deep)}
@media(max-width:640px){.diagram-pair{grid-template-columns:1fr}}

/* skip link (keyboard users jump past the menu) */
.skip{position:absolute;left:-9999px;top:0;background:var(--black);color:var(--white);padding:10px 16px;z-index:100;text-decoration:none;font-size:14px}
.skip:focus{left:12px;top:12px}

/* sticky action bar on phones (27 Sep 2026). Built by nav.js from the page's
   own .nav-cta, so each page keeps its context action. Shown after the first
   scroll; hidden while a primary button, a form or the footer is on screen. */
.m-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--white);border-top:1px solid var(--grey-200);box-shadow:0 -6px 18px rgba(34,31,32,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .2s ease}
.m-cta-bar.show{transform:none}
.m-cta-bar a{display:block;text-align:center;background:var(--red);color:var(--white);font-family:var(--font-display);text-transform:uppercase;font-size:14px;letter-spacing:0.01em;padding:14px 16px;text-decoration:none}
.m-cta-bar a:hover{background:var(--red-deep)}
@media(min-width:641px){.m-cta-bar{display:none}}
@media print{.m-cta-bar{display:none!important}}
