/* ==========================================================================
   AIRWARM — airwarm.css
   The single stylesheet for the whole website. There is no build step:
   this file is served to the browser exactly as it is written here.

   HOW THIS FILE IS ORGANISED
   01. Brand tokens (colours, type, spacing)   <- change colours HERE only
   02. Base and typography
   03. Layout helpers (page width, sections, grids)
   04. Header and navigation
   05. Buttons
   06. Hero and navy panels
   07. Cards, lists, steps, icons
   08. Assessment form (Home Energy Assessment)
   09. Footer
   10. Utilities and accessibility
   11. Figures, diagrams and article furniture   <- the assets/ folder
   12. Responsive rules (mobile-first: these ADD to the mobile styles)

   SAFE TO EDIT: any value inside section 01, and any text in comments.
   TAKE CARE: the brand colours and the tagline colour order are fixed by
   the Airwarm brand rules. Do not introduce new colours.

   The drawings and icons this stylesheet sizes live in assets/, and each one
   is documented in assets/README.md.
   ========================================================================== */

/* ==========================================================================
   01. BRAND TOKENS

   WHERE THESE COLOURS COME FROM. They were sampled out of the permanent
   Airwarm identity artwork when it landed, replacing an earlier temporary
   palette:

     navy    #010F23   the Hero Logo canvas
     orange  #F76201   the amber of the tagline
     blue    #017FE1   the blue of the tagline
     green   #689E14   the green of the tagline

   DO NOT RE-SAMPLE THESE FROM NEWER ARTWORK. Ruled by Thomas Robinson on
   15 August 2026, and it overrides the instruction that used to sit here.

   The August 2026 asset pack arrived with measurably different colours —
   its blue #0494EF, amber #F27103 and green #74B305, the green furthest off
   by a long way. The decision was that the documented palette stays the
   source of truth and artwork that has drifted from it is the thing that is
   wrong, not the documentation. One inconsistent image does not get to
   redefine the colour system, and the intent of new artwork is to use the
   branding rather than quietly replace it.

   So: if reissued artwork disagrees with these values, flag the artwork for
   correction. Do not change the numbers here, and do not eyeball a
   near-match in either direction. Changing them means re-measuring every
   ratio in the contrast table below, which is the real cost.

   The brand rules name these as Air (blue), Heating (burnt orange) and
   Renewables (green), and they are the site's accent colours everywhere.
   In the tagline they carry ENGINEERED DESIGN, SMARTER HEATING and GREENER
   FUTURES respectively.

   --------------------------------------------------------------------------
   CONTRAST RULES. READ THESE BEFORE PUTTING A COLOUR ON A COLOUR.
   --------------------------------------------------------------------------
   Airwarm is a UK service provider, so the Equality Act 2010 duty to make
   reasonable adjustments applies, and WCAG 2.2 AA is the yardstick used to
   judge whether a website meets it. AA asks for 4.5:1 for normal text, 3:1
   for large text, icons, borders that carry meaning, and focus rings.

   Every ratio below was measured against THIS palette, not inherited from
   the old one. The navy went darker, which lifted everything sitting on it.

     PASSES                                 FAILS
     white on navy          19.2:1          white on blue        4.1:1
     orange on navy          6.1:1          white on orange      3.1:1
     green on navy           5.9:1          white on green       3.2:1
     blue on navy            4.7:1          blue on white        4.1:1
     navy on orange          6.1:1          orange on white      3.1:1
     navy on green           5.9:1          green on white       3.2:1
     navy on blue            4.7:1          grey on navy         3.9:1
     grey on white           5.0:1
     grey on light neutral   4.6:1

   So, as rules:

   1. ORANGE AND GREEN FILLS ALWAYS CARRY NAVY OR DARK TEXT, NEVER WHITE.
      That is why the primary button is orange with dark text (6.1:1) and not
      blue with white text (4.1:1). See section 05.
   2. NEVER SET ORANGE OR GREEN AS TEXT, OR AS A MEANINGFUL ICON, ON WHITE OR
      ON THE LIGHT NEUTRAL. At 3.1:1 and 3.2:1 they fail for body copy at any
      size. Use --airwarm-orange-text or --airwarm-green-text instead, which
      are the same hues darkened until they pass. They are for text and line
      work only: never use them as a fill.
   3. A BLUE FILL WITH WHITE TEXT USES --airwarm-blue-accessible, not
      --airwarm-blue.
   4. GREY TEXT NEVER GOES ON NAVY. On navy panels captions and supporting
      text use white or the light neutral.
   5. NEVER LET COLOUR BE THE ONLY SIGNAL. Every coloured state in this
      stylesheet is paired with a shape, an icon or a word, so it still reads
      in black and white. WCAG 1.4.1.

   THE THREE DARKENED TOKENS ARE ADDITIONS, NOT REPLACEMENTS. The identity
   artwork's own colours are what appear on navy, in fills carrying dark
   text, and in the tagline — untouched, exactly as supplied. The darkened
   variants exist only because a logo colour and a body-copy colour are
   different jobs: nothing in the brand artwork is ever asked to sit as small
   text on white, and these three are.
   ========================================================================== */
:root {
  /* --- Approved colour palette (do not add to this list) ---
     The four brand values are sampled from the Hero Logo. See above. */
  --airwarm-navy: #010F23;        /* principal background; Hero Logo canvas */
  --airwarm-white: #FFFFFF;
  --airwarm-orange: #F76201;      /* Amber. The words SMARTER HEATING       */
  --airwarm-blue: #017FE1;        /* Blue. The words ENGINEERED DESIGN      */
  --airwarm-green: #689E14;       /* Green. The words GREENER FUTURES       */
  --airwarm-light-bg: #F4F7F9;    /* light neutral section background */
  --airwarm-grey: #65717C;        /* supporting text on white */
  --airwarm-dark-text: #14212B;   /* body copy */

  /* --- The same three hues, darkened until they pass on a light background.
     Read the contrast rules above before using any of them. These are not
     new brand colours and they never appear on navy, where the brand
     colours themselves already pass. Each is the brand hue with lightness
     reduced until it clears 4.5:1 on BOTH white and the light neutral. --- */
  --airwarm-blue-accessible: #0178D5;  /* blue fill + white text: 4.5:1     */
  --airwarm-orange-text: #C14D01;      /* orange as text or line: 4.9:1     */
  --airwarm-green-text: #537D10;       /* green as text or line: 4.9:1      */

  /* --- Translucent tints derived from the palette ---
     These are rgba() versions of white and navy. They are used for hairline
     borders and subtle panels so that we never need an extra colour. */
  --airwarm-white-line: rgba(255, 255, 255, 0.18);
  --airwarm-white-panel: rgba(255, 255, 255, 0.06);
  --airwarm-white-soft: rgba(255, 255, 255, 0.78);
  --airwarm-navy-line: rgba(1, 15, 35, 0.14);
  --airwarm-navy-shade: rgba(1, 15, 35, 0.05);

  /* --- Typography --- */
  /* Montserrat is the fixed brand typeface. The rest of the stack is the
     system-safe fallback required by the brand rules. */
  --airwarm-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --airwarm-body-size: 17px;      /* desktop body copy, per the framework */
  --airwarm-body-size-mobile: 16px;

  /* --- Radii (moderate rounding: professional, not playful) --- */
  --airwarm-radius-sm: 6px;
  --airwarm-radius-md: 12px;
  --airwarm-radius-lg: 18px;

  /* --- Spacing scale --- */
  --airwarm-space-xs: 8px;
  --airwarm-space-sm: 16px;
  --airwarm-space-md: 24px;
  --airwarm-space-lg: 40px;
  --airwarm-space-xl: 72px;

  /* --- Page width ---
     1200px matches the desktop breakpoint in the brand pack's design tokens. */
  --airwarm-max-width: 1200px;
}

/* ==========================================================================
   02. BASE AND TYPOGRAPHY
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Anchor links land below the sticky header rather than under it. */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--airwarm-font);
  font-weight: 400;
  font-size: var(--airwarm-body-size-mobile);
  line-height: 1.65;
  color: var(--airwarm-dark-text);
  background: var(--airwarm-white);
  /* Nothing on this site may scroll sideways. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--airwarm-space-sm) 0;
  /* Long words such as postcodes or e-mail addresses must not overflow. */
  overflow-wrap: break-word;
}

h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p, li { margin: 0 0 var(--airwarm-space-sm) 0; }
p:last-child, li:last-child { margin-bottom: 0; }

/* A comfortable measure for reading. Roughly 70 characters per line. */
.aw-measure { max-width: 62ch; }

a {
  color: var(--airwarm-dark-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

small, .aw-small {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--airwarm-grey);
}

/* Text that supports a heading. Grey on white passes AA contrast (4.99:1). */
.aw-lead {
  font-size: 1.0625rem;
  color: var(--airwarm-grey);
}

hr {
  border: 0;
  border-top: 1px solid var(--airwarm-navy-line);
  margin: var(--airwarm-space-lg) 0;
}

/* ==========================================================================
   03. LAYOUT HELPERS
   ========================================================================== */

/* .aw-wrap centres content and holds the page gutters. Put it inside a
   section, never around one. */
.aw-wrap {
  width: 100%;
  max-width: var(--airwarm-max-width);
  margin: 0 auto;
  padding: 0 var(--airwarm-space-md);
}

/* Every band of content on a page is a <section class="aw-section">. */
.aw-section { padding: var(--airwarm-space-lg) 0; }
.aw-section--tight { padding: var(--airwarm-space-md) 0; }

/* Background variants for sections. */
.aw-section--light { background: var(--airwarm-light-bg); }
.aw-section--navy {
  background: var(--airwarm-navy);
  color: var(--airwarm-white);
}
/* Rule 4 in section 01: grey text never goes on navy. Every navy surface on
   the site is listed here, not just .aw-section--navy — the hero and the
   footer are navy too, they just carry different classes.

   This matters because .aw-small sets its colour on the element itself, and a
   rule applied directly to an element always beats a colour inherited from
   its parent, whatever the specificity. So .aw-small inside a navy panel fell
   back to the mid grey, which measures 3.9:1 on navy and fails AA for small
   text. Naming each navy surface is what fixes it. */
.aw-section--navy .aw-lead,
.aw-section--navy .aw-small,
.aw-section--navy small,
.aw-hero .aw-lead,
.aw-hero .aw-small,
.aw-hero small,
.aw-footer .aw-lead,
.aw-footer .aw-small,
.aw-footer small { color: var(--airwarm-white-soft); }
/* Links on navy, same reasoning as the rule above: the hero is a navy panel
   carrying a different class. Without it, a link in hero copy fell back to
   the base dark body colour, which on navy is 1.2:1 — a link you cannot see.
   The button classes set their own colour and are unaffected. */
.aw-section--navy a,
.aw-hero a:not(.aw-btn) { color: var(--airwarm-white); }

/* Simple responsive grid. Single column on mobile; see section 11. */
.aw-grid {
  display: grid;
  gap: var(--airwarm-space-md);
  grid-template-columns: 1fr;
}

/* A two-column text-and-aside arrangement. */
.aw-split {
  display: grid;
  gap: var(--airwarm-space-lg);
  grid-template-columns: 1fr;
}

/* ==========================================================================
   04. HEADER AND NAVIGATION
   The header markup is identical on every page. If you change it, change it
   everywhere, or the site will look inconsistent.

   There is deliberately no hamburger menu and no JavaScript in the header.
   On small screens the navigation simply wraps onto more lines with large
   tap targets. That is easier to maintain and cannot break.
   ========================================================================== */
.aw-header {
  /* Deliberately NOT sticky on small screens. The navigation needs three
     lines on a phone, and a sticky bar that tall would obstruct the content
     the visitor came to read. It becomes sticky on desktop, where it is one
     line. See section 11. */
  position: static;
  z-index: 50;
  background: var(--airwarm-navy);
  color: var(--airwarm-white);
  border-bottom: 1px solid var(--airwarm-white-line);
}

.aw-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--airwarm-space-sm);
  padding-top: var(--airwarm-space-sm);
  padding-bottom: var(--airwarm-space-sm);
}

/* ---- The wordmark ------------------------------------------------------
   The permanent identity supplies a ready-made horizontal lockup
   (assets/brand/hero-horizontal.svg) with the wordmark baked in. It is NOT
   used here, deliberately. That file is a 339KB auto-traced vector: at the
   44px the header gives it the letterforms go soft, the wordmark stops being
   selectable text, and it ignores the reader's font-size setting.

   So the header and footer rebuild the same lockup from its parts — the
   supplied Corporate Mark (assets/airwarm-mark.svg, clean vector, 10KB) plus
   the wordmark and tagline as live text in Montserrat, the brand typeface.
   No artwork is redrawn or reinterpreted: the emblem is the supplied file
   unaltered, and the type follows the supplied lockup's colours and order.
   See section 13 for the lockup itself.
   ---------------------------------------------------------------------- */
.aw-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--airwarm-white);
  /* Clear space around the identity, per the brand rules. */
  padding: var(--airwarm-space-xs) 0;
}
.aw-wordmark:hover { text-decoration: none; }

.aw-wordmark__name {
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--airwarm-white);
}

/* ---- The tagline -------------------------------------------------------
   ENGINEERED DESIGN | SMARTER HEATING | GREENER FUTURES

   Confirmed by Thomas Robinson, 15 August 2026. This replaces the two-part
   SMART HEATING | GREENER FUTURES, which is retired wording — and note that
   "SMARTER" is deliberate. Some of the supplied hero artwork still reads
   SMART HEATING; that artwork is flagged for reissue and is NOT the
   authority for the wording. Do not change this back to match a picture.

   THREE RULES FROM THE BRAND, ALL OF THEM HARD:
   1. The colours are fixed and belong to specific words. ENGINEERED DESIGN
      is blue, SMARTER HEATING is amber, GREENER FUTURES is green. Never
      reorder, recolour or swap them.
   2. All three statements stay on ONE line. They are never stacked. That is
      why this is a plain inline row with nowrap and no column direction.
   3. No punctuation is added. The bars are separators; there is no full
      stop, comma or ampersand anywhere in it.

   THE SEPARATOR IS NO LONGER BLUE. It was, when blue was spare. Blue now
   carries ENGINEERED DESIGN, and a blue bar next to a blue word reads as
   part of it rather than as the thing dividing it from the next. It is a
   muted white instead, which is also what the supplied artwork does — the
   separator is punctuation, not a fourth term.

   ON THE SIZE: three statements on one unbroken line is much wider than two,
   and this sits under a wordmark barely half its width. The type is small and
   tightly tracked for that reason, and steps down again on narrow screens.
   Rule 2 is what costs the width; it is not negotiable, so the size gives way
   instead. Measured to fit without overflow at 320px, which is the narrowest
   screen worth supporting.
   ---------------------------------------------------------------------- */
.aw-tagline {
  display: block;
  /* nowrap enforces rule 2: the browser may not break this line, whatever
     the viewport does. */
  white-space: nowrap;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.aw-tagline .design  { color: var(--airwarm-blue); }
.aw-tagline .heating { color: var(--airwarm-orange); }
.aw-tagline .futures { color: var(--airwarm-green); }
/* The separator. A muted white bar — not a bullet, slash or dash, and not
   decoration that a screen reader should read out. */
.aw-tagline .aw-sep {
  color: var(--airwarm-white-soft);
  padding: 0 0.4em;
  font-weight: 500;
}

/* ---- Navigation ---- */
.aw-nav {
  flex: 1 1 100%;
  order: 3;
}
.aw-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--airwarm-space-xs) var(--airwarm-space-md);
}
.aw-nav__list li { margin: 0; }
.aw-nav__list a {
  display: block;
  /* Large tap targets on mobile. */
  padding: 10px 0;
  color: var(--airwarm-white);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.aw-nav__list a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* The current page is marked with aria-current="page" in the HTML. */
.aw-nav__list a[aria-current="page"] {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--airwarm-orange);
}

.aw-header__cta { order: 2; margin-left: auto; }

/* ==========================================================================
   05. BUTTONS
   Button labels always describe the action ("Start the assessment"),
   never "Click here".

   Why the primary button is orange with dark text: the brand rules allow a
   solid blue or orange primary button and ask for one consistent choice.
   White text on the brand blue reaches only 4.1:1 against that blue, which
   fails the 4.5:1 accessibility threshold for normal-size text. Dark text on
   the brand orange reaches 6.1:1, so orange is the accessible choice and is
   used consistently site-wide.
   ========================================================================== */
.aw-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--airwarm-radius-sm);
  padding: 14px var(--airwarm-space-md);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.aw-btn:hover { text-decoration: none; }

/* Primary: the main action on the page. One per page where possible. */
.aw-btn--primary {
  background: var(--airwarm-orange);
  color: var(--airwarm-dark-text);
  border-color: var(--airwarm-orange);
}
.aw-btn--primary:hover { background: var(--airwarm-white); border-color: var(--airwarm-white); }

/* Secondary on navy: transparent with a clear white border. */
.aw-btn--secondary {
  background: transparent;
  color: var(--airwarm-white);
  border-color: var(--airwarm-white);
}
.aw-btn--secondary:hover { background: var(--airwarm-white); color: var(--airwarm-navy); }

/* Secondary on white or light backgrounds. */
.aw-btn--outline {
  background: transparent;
  color: var(--airwarm-dark-text);
  border-color: var(--airwarm-dark-text);
}
.aw-btn--outline:hover { background: var(--airwarm-navy); color: var(--airwarm-white); }

/* A deliberately quiet action. Used for "Change an answer" under the
   assessment result, where the action must stay available but must not
   compete with the Desktop Review form directly beneath it. No border and no
   fill: it reads as a link with a proper tap target rather than a button
   asking to be pressed.

   Still 48px tall and still underlined on hover and focus, because quiet is
   not the same as hard to hit or hard to see. */
.aw-btn--quiet {
  background: transparent;
  color: var(--airwarm-grey);
  border-color: transparent;
  padding-left: 0;
  padding-right: var(--airwarm-space-sm);
  font-weight: 500;
}
.aw-btn--quiet:hover,
.aw-btn--quiet:focus-visible {
  background: transparent;
  color: var(--airwarm-dark-text);
  text-decoration: underline;
}

/* A row of buttons that stacks on very small screens. */
.aw-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--airwarm-space-sm);
  margin-top: var(--airwarm-space-md);
}
.aw-btn-row .aw-btn { flex: 1 1 auto; }

/* ==========================================================================
   06. HERO AND NAVY PANELS
   There is no photography anywhere on this site yet. Navy panels and
   generous type do the work instead. See the commented image placeholders
   in the page HTML for where real Airwarm photographs belong.
   ========================================================================== */
.aw-hero {
  background: var(--airwarm-navy);
  color: var(--airwarm-white);
  padding: var(--airwarm-space-lg) 0 var(--airwarm-space-xl) 0;
}
.aw-hero h1 { color: var(--airwarm-white); max-width: 20ch; }
.aw-hero__support {
  font-size: 1.0625rem;
  color: var(--airwarm-white-soft);
  max-width: 56ch;
}

/* ---- The launch-status line --------------------------------------------
   "Preparing for our April 2027 launch." Airwarm is not trading yet, and
   nothing on this site may suggest otherwise, so this is styled to be read
   rather than skimmed past: a blue rule to its left ties it to the Air
   accent and stops it reading as small print.

   Blue on navy is 4.7:1, so the rule clears the 3:1 that WCAG asks of a
   graphical element carrying meaning. The text itself stays white, because
   the rule is not the only signal — the sentence says it in words too. */
.aw-hero__launch {
  margin-top: var(--airwarm-space-md);
  padding-left: var(--airwarm-space-sm);
  border-left: 3px solid var(--airwarm-blue);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--airwarm-white);
  max-width: 46ch;
}

/* The launch positioning line. The wording is fixed. */
.aw-positioning {
  display: inline-block;
  margin-bottom: var(--airwarm-space-md);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--airwarm-white-soft);
  border: 1px solid var(--airwarm-white-line);
  border-radius: 999px;
  padding: 6px 14px;
}

/* A quiet panel used inside navy sections. */
.aw-panel {
  background: var(--airwarm-white-panel);
  border: 1px solid var(--airwarm-white-line);
  border-radius: var(--airwarm-radius-md);
  padding: var(--airwarm-space-md);
}

/* ==========================================================================
   07. CARDS, LISTS, STEPS AND ICONS
   Subtle borders and generous spacing, not heavy shadows.
   ========================================================================== */
.aw-card {
  background: var(--airwarm-white);
  border: 1px solid var(--airwarm-navy-line);
  border-radius: var(--airwarm-radius-md);
  padding: var(--airwarm-space-md);
}
.aw-card h3 { margin-bottom: var(--airwarm-space-xs); }
/* Some cards, notes and step lists sit directly under the page h1, so their
   heading has to be an <h2> to keep the heading order sensible. These rules
   make an <h2> in those places look the same size as an <h3> elsewhere. */
.aw-card h2,
.aw-note h2,
.aw-steps h2 { font-size: 1.15rem; margin-bottom: var(--airwarm-space-xs); }
.aw-card p { color: var(--airwarm-grey); }
.aw-card--link { text-decoration: none; display: block; color: inherit; }
.aw-card--link:hover { border-color: var(--airwarm-navy); text-decoration: none; }

/* The three brand benefits. Each keeps its own fixed accent colour. */
.aw-benefit { border-top: 4px solid var(--airwarm-navy-line); }
.aw-benefit--heating { border-top-color: var(--airwarm-orange); }
.aw-benefit--air  { border-top-color: var(--airwarm-blue); }
.aw-benefit--renewables { border-top-color: var(--airwarm-green); }

/* ---- Line icons --------------------------------------------------------
   One consistent family, drawn by hand. They come from two places, and both
   work the same way: either written straight into the page as inline SVG, or
   pulled out of the sprite in assets/icons.svg:

     <svg class="aw-icon" aria-hidden="true" focusable="false">
       <use href="/assets/icons.svg#icon-radiator"></use>
     </svg>

   An icon is one em square by default, so it lines up with the text beside it
   and grows with it. It takes the colour of the surrounding text.
   ---------------------------------------------------------------------- */
.aw-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  /* Sits on the text baseline rather than below it. */
  vertical-align: -0.125em;
  /* These two win over the same attributes written on the svg itself, so the
     whole family behaves identically however it was written. */
  fill: none;
  stroke: currentColor;
  /* Never let an icon be squashed by a flex container. */
  flex: 0 0 auto;
}

/* A bigger icon, for the top of a card. */
.aw-icon--lg {
  width: 1.75em;
  height: 1.75em;
  vertical-align: -0.35em;
}

/* The three benefit cards on the homepage put their icon on its own line
   above the heading at a fixed 32px. Those three are the only place this
   applies, and it keeps that layout exactly as it was. */
.aw-benefit > .aw-icon {
  width: 32px;
  height: 32px;
  display: block;
  vertical-align: baseline;
  margin-bottom: var(--airwarm-space-sm);
}

/* The benefit accent colours. On a white or light background these use the
   darkened variants, because the brand orange and green reach only 2.9:1 and
   3.0:1 on the light neutral and an icon has to reach 3:1. The 4px rule along the top of
   each card keeps the brand colour itself: it is decoration, and the card
   heading says which benefit it is. See the contrast rules in section 01. */
.aw-icon--heating { color: var(--airwarm-orange-text); }
.aw-icon--air  { color: var(--airwarm-blue-accessible); }
.aw-icon--renewables { color: var(--airwarm-green-text); }

/* On navy the brand colours themselves pass comfortably (6.1:1, 4.7:1 and
   5.9:1), so they are used unchanged. */
.aw-section--navy .aw-icon--heating,
.aw-hero .aw-icon--heating,
.aw-cta-band .aw-icon--heating { color: var(--airwarm-orange); }
.aw-section--navy .aw-icon--air,
.aw-hero .aw-icon--air,
.aw-cta-band .aw-icon--air { color: var(--airwarm-blue); }
.aw-section--navy .aw-icon--renewables,
.aw-hero .aw-icon--renewables,
.aw-cta-band .aw-icon--renewables { color: var(--airwarm-green); }

/* Numbered process steps, used on How It Works. */
.aw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: awstep;
}
.aw-steps > li {
  counter-increment: awstep;
  position: relative;
  padding: 0 0 var(--airwarm-space-md) var(--airwarm-space-lg);
  border-left: 1px solid var(--airwarm-navy-line);
  margin-left: 14px;
}
.aw-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.aw-steps > li::before {
  content: counter(awstep);
  position: absolute;
  left: -15px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--airwarm-navy);
  color: var(--airwarm-white);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aw-section--navy .aw-steps > li { border-left-color: var(--airwarm-white-line); }
.aw-section--navy .aw-steps > li::before {
  background: var(--airwarm-orange);
  color: var(--airwarm-dark-text);
}
.aw-steps h2,
.aw-steps h3,
.aw-steps h4 { margin-bottom: 4px; }

/* Tick list, used for "what is included" style lists. */
.aw-ticks { list-style: none; margin: 0; padding: 0; }
.aw-ticks > li {
  position: relative;
  padding-left: var(--airwarm-space-md);
  margin-bottom: var(--airwarm-space-xs);
}
.aw-ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--airwarm-blue);
}

/* An honest "what to be aware of" block. Not a warning banner: a plain,
   calm panel, because limitations are part of the advice, not an alarm. */
.aw-note {
  background: var(--airwarm-light-bg);
  border-left: 4px solid var(--airwarm-blue);
  border-radius: 0 var(--airwarm-radius-sm) var(--airwarm-radius-sm) 0;
  padding: var(--airwarm-space-md);
}
.aw-note h3 { margin-bottom: var(--airwarm-space-xs); }

/* Frequently asked questions use native <details> so they work without
   JavaScript and remain readable when printed. All of the styling for them
   now lives together in section 11, so that the older markup (.aw-faq with
   plain <details> and <summary> inside it) and the newer markup (with
   .aw-faq__item and .aw-faq__question on those same elements) cannot drift
   apart. Look for "Frequently asked questions" in section 11. */
.aw-faq { border-top: 1px solid var(--airwarm-navy-line); }

/* An empty slot waiting for real evidence. Visible on the page as a quiet
   line of text, NOT as an invented claim. */
.aw-evidence-slot {
  border: 1px dashed var(--airwarm-navy-line);
  border-radius: var(--airwarm-radius-sm);
  padding: var(--airwarm-space-md);
  color: var(--airwarm-grey);
  font-size: 0.9375rem;
}
.aw-section--navy .aw-evidence-slot {
  border-color: var(--airwarm-white-line);
  color: var(--airwarm-white-soft);
}

/* ==========================================================================
   08. ASSESSMENT FORM
   Used only on /home-energy-assessment/. One question group per screen,
   with a progress indicator, per the mobile design rules.
   ========================================================================== */
.aw-form { max-width: 640px; }

.aw-progress { margin-bottom: var(--airwarm-space-md); }
.aw-progress__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--airwarm-navy-shade);
  overflow: hidden;
}
.aw-progress__fill {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--airwarm-blue);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.aw-progress__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--airwarm-grey);
  margin-bottom: var(--airwarm-space-xs);
}

.aw-stage { display: none; }
.aw-stage.is-active { display: block; }

.aw-field { margin-bottom: var(--airwarm-space-md); }
.aw-field > label,
.aw-fieldset > legend {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 6px;
  padding: 0;
}
.aw-field__hint {
  display: block;
  font-size: 0.875rem;
  color: var(--airwarm-grey);
  margin-bottom: 6px;
}

.aw-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--airwarm-space-md) 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  min-height: 48px;              /* large tap target */
  padding: 12px var(--airwarm-space-sm);
  color: var(--airwarm-dark-text);
  background: var(--airwarm-white);
  border: 1px solid var(--airwarm-grey);
  border-radius: var(--airwarm-radius-sm);
}
textarea { min-height: 130px; line-height: 1.6; }
/* The dropdown indicator.

   appearance:none strips the browser's own arrow, which is what makes a select
   match the text inputs beside it. For a while nothing replaced it, so every
   select on the site read as a text box: people tried to type into them, and
   there was no way to tell a "Please choose" placeholder from something already
   filled in.

   The chevron is an inline data URI rather than a file, so it cannot 404 and
   costs no request. It is navy at 60% rather than full strength — present when
   looked for, quiet when not, which is what keeps it an indicator rather than a
   piece of decoration.

   pointer-events are irrelevant here (it is a background, not an element), and
   the right-hand padding is what stops a long option colliding with it. */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23010F23' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--airwarm-space-sm) center;
  background-size: 12px 8px;
  padding-right: 44px;
}

/* Radio and checkbox rows with the label as the tap target. */
.aw-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--airwarm-space-xs);
  border: 1px solid var(--airwarm-navy-line);
  border-radius: var(--airwarm-radius-sm);
  padding: 12px var(--airwarm-space-sm);
  margin-bottom: var(--airwarm-space-xs);
  cursor: pointer;
  font-size: 0.9375rem;
}
.aw-choice:hover { border-color: var(--airwarm-navy); }
.aw-choice input { margin: 3px 0 0 0; width: 20px; height: 20px; flex: 0 0 auto; }

/* The chosen answer, shown as a change of weight and border as well as a
   tint. The radio dot is the real indicator; this is the row catching up with
   it, so someone scrolling back through a long stage can see what they picked
   without hunting for a 20px circle. Colour is never the only signal. */
.aw-choice:has(input:checked) {
  border-color: var(--airwarm-navy);
  box-shadow: inset 0 0 0 1px var(--airwarm-navy);
  background: var(--airwarm-light-bg);
  font-weight: 600;
}
/* Keyboard focus on the row, not just on the 20px control inside it. */
.aw-choice:focus-within {
  outline: 3px solid var(--airwarm-blue-accessible);
  outline-offset: 2px;
}

/* ---- Visual reference questions ---------------------------------------
   Two questions — the consumer unit and the radiator pipework — show
   Airwarm's own approved photographs and ask the visitor to pick the closest
   match. The picture does the explaining, which is the point: nobody can
   describe their fuse box in a text field, but most people recognise theirs
   in a photograph.

   THIS IS NOT A PHOTO UPLOAD. Asking visitors for photographs was rejected
   for keeping the form completable on a phone, and this pattern exists
   precisely because it respects that decision.

   The image sits above the answers and is decorative to nobody: it carries a
   full alt description, so the question is answerable without seeing it.
   ---------------------------------------------------------------------- */
.aw-visual-question__image {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--airwarm-space-xs) 0 var(--airwarm-space-sm);
  border: 1px solid var(--airwarm-navy-line);
  border-radius: var(--airwarm-radius-sm);
  background: var(--airwarm-white);
}
/* The caveat that follows the electrical question. It is a condition of the
   answer, so it stays attached to the question rather than drifting into the
   page's general small print. */
.aw-visual-question .aw-small {
  margin-top: var(--airwarm-space-sm);
  padding-left: var(--airwarm-space-sm);
  border-left: 3px solid var(--airwarm-orange);
}

.aw-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--airwarm-space-sm);
  margin-top: var(--airwarm-space-md);
}

/* Validation message. Uses the navy/orange palette, not a new red. */
.aw-form__error {
  margin-top: var(--airwarm-space-sm);
  padding: 12px var(--airwarm-space-sm);
  border-left: 4px solid var(--airwarm-orange);
  background: var(--airwarm-light-bg);
  font-size: 0.9375rem;
  font-weight: 500;
}
.aw-form__error:empty { display: none; }

/* ---- The enquiry form -------------------------------------------------
   The only part of this site that collects personal data. It sits inside the
   result panel, after the visitor has already seen their outcome, so it reads
   as an offer rather than a toll gate.

   Set apart on the light neutral with a blue rule, because it is a change of
   mode: everything above it is information, this is the one place something
   is asked of you. The blue is the Air accent and reaches 4.7:1 on navy and
   3.9:1 on the light neutral, which clears the 3:1 WCAG asks of a boundary
   that carries meaning. It is not the only signal — the heading says what
   the block is for.
   --------------------------------------------------------------------- */
.aw-enquiry {
  margin-top: var(--airwarm-space-lg);
  padding: var(--airwarm-space-md);
  background: var(--airwarm-light-bg);
  border-top: 3px solid var(--airwarm-blue);
  border-radius: 0 0 var(--airwarm-radius-md) var(--airwarm-radius-md);
}
.aw-enquiry h4 { margin-top: 0; font-size: 1.15rem; }

/* ---- The consent row --------------------------------------------------
   The label is the tap target and carries the full sentence, so nobody has
   to aim at a 20px box. Never add a `checked` attribute to this input:
   pre-ticked consent is not consent under UK GDPR Article 7, and this is
   the single most important line in the form. */
.aw-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--airwarm-space-sm);
  margin: var(--airwarm-space-md) 0;
  padding: var(--airwarm-space-sm);
  background: var(--airwarm-white);
  border: 1px solid var(--airwarm-navy-line);
  border-radius: var(--airwarm-radius-sm);
}
/* 24px, not 22. WCAG 2.2 AA (2.5.8 Target Size) sets 24 by 24 CSS pixels as
   the minimum, and this is the one control in the whole journey that a
   submission cannot proceed without. The label beside it is clickable too, so
   the real target is larger — but the box itself should clear the bar on its
   own rather than relying on that. */
.aw-consent input {
  margin: 2px 0 0 0;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.aw-consent label {
  font-size: 0.9375rem;
  line-height: 1.55;
  cursor: pointer;
}

/* ---- The honeypot -----------------------------------------------------
   A field bots fill and people never see. Positioned off-screen rather than
   `display:none`, because some bots skip hidden fields — this has to look
   real to a script and be unreachable for a person. It also carries
   aria-hidden and tabindex="-1" in the markup, so a screen-reader user is
   never asked to complete a field that must stay empty. */
.aw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- The sent confirmation ------------------------------------------- */
.aw-enquiry-sent {
  margin-top: var(--airwarm-space-lg);
  padding: var(--airwarm-space-md);
  background: var(--airwarm-light-bg);
  border-top: 3px solid var(--airwarm-green);
  border-radius: 0 0 var(--airwarm-radius-md) var(--airwarm-radius-md);
}
.aw-enquiry-sent h4 { margin-top: 0; font-size: 1.15rem; }
.aw-enquiry-sent:focus { outline: none; }

/* ---- Outcome cards ----
   The traffic-light colour is a SUPPORTING indicator only. The explanation
   carries the message. There is no red rejection screen anywhere. */
.aw-outcome {
  border: 1px solid var(--airwarm-navy-line);
  border-left-width: 6px;
  border-radius: 0 var(--airwarm-radius-md) var(--airwarm-radius-md) 0;
  padding: var(--airwarm-space-md);
  background: var(--airwarm-white);
}
/* GREEN / BLUE / AMBER, per Tom's action plan of 15 Sep 2026. The class
   names still carry the old outcome keys so the script and payload did not
   have to change: --potentially is BLUE, "Needs a closer look", and
   --not-currently is AMBER, "Potentially unsuitable". Never red: AMBER is an
   explanation, not a refusal. The label text also carries the meaning, so
   nothing depends on colour alone. */
.aw-outcome--likely      { border-left-color: var(--airwarm-green); }
.aw-outcome--potentially { border-left-color: var(--airwarm-blue); }
.aw-outcome--not-currently { border-left-color: var(--airwarm-orange); }

.aw-outcome__label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: var(--airwarm-space-sm);
  color: var(--airwarm-dark-text);
}
.aw-outcome--likely .aw-outcome__label      { background: var(--airwarm-green); }
/* Navy text on the blue label: 4.7:1. Dark text is 4.0:1 and white 4.1:1,
   both short of AA for text this small. */
.aw-outcome--potentially .aw-outcome__label {
  background: var(--airwarm-blue);
  color: var(--airwarm-navy);
}
.aw-outcome--not-currently .aw-outcome__label { background: var(--airwarm-orange); }

/* ==========================================================================
   09. FOOTER
   The footer markup is identical on every page.
   ========================================================================== */
.aw-footer {
  background: var(--airwarm-navy);
  color: var(--airwarm-white);
  padding: var(--airwarm-space-lg) 0 var(--airwarm-space-md) 0;
  /* No margin-top. It used to add 40px above the footer, which showed as a
     white bar wherever the preceding section was navy — the closing call to
     action on most pages. The footer's own top padding gives the breathing
     room, and butting straight up against the section above reads as
     deliberate rather than as a gap. */
}
.aw-footer a { color: var(--airwarm-white); text-decoration: none; }
.aw-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

.aw-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--airwarm-space-md);
}
.aw-footer h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--airwarm-white-soft);
  margin-bottom: var(--airwarm-space-xs);
}
.aw-footer ul { list-style: none; margin: 0; padding: 0; }
.aw-footer li { margin: 0 0 6px 0; font-size: 0.9375rem; }

.aw-footer__base {
  margin-top: var(--airwarm-space-lg);
  padding-top: var(--airwarm-space-md);
  border-top: 1px solid var(--airwarm-white-line);
  font-size: 0.8125rem;
  color: var(--airwarm-white-soft);
}

/* ==========================================================================
   10. UTILITIES AND ACCESSIBILITY
   ========================================================================== */

/* Visible focus state on every interactive element. Do not remove this, and
   never replace it with outline: none.

   It is two rings, not one, and that is on purpose. WCAG asks a focus
   indicator to reach 3:1 against whatever is next to it. The brand orange
   reaches only 3.1:1 against white, which clears 3:1 but only barely, so
   orange on its own is not enough to rely on. So the OUTER ring is navy,
   which reaches 19.2:1 on white and 6.1:1 against the orange inside it, and
   the orange stays as the inner ring where it is unmistakably Airwarm. On
   navy panels the outer ring turns white instead, which is 19.2:1 the other
   way round.

   Both rings are 2px or more, and the offset keeps them clear of the element
   so nothing is obscured. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--airwarm-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--airwarm-orange);
  border-radius: 2px;
}

/* On the navy surfaces, the outer ring has to be white to be seen at all. */
.aw-header a:focus-visible,
.aw-header button:focus-visible,
.aw-footer a:focus-visible,
.aw-hero a:focus-visible,
.aw-hero button:focus-visible,
.aw-section--navy a:focus-visible,
.aw-section--navy button:focus-visible,
.aw-section--navy summary:focus-visible,
.aw-cta-band a:focus-visible,
.aw-cta-band button:focus-visible {
  outline-color: var(--airwarm-white);
}

/* Skip link: first thing in the tab order, hidden until focused. */
.aw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--airwarm-white);
  color: var(--airwarm-dark-text);
  padding: 12px var(--airwarm-space-sm);
  z-index: 100;
}
.aw-skip:focus {
  left: var(--airwarm-space-sm);
  top: var(--airwarm-space-sm);
}

/* Visually hidden but still read by screen readers. */
.aw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.aw-hidden { display: none !important; }

.aw-eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--airwarm-grey);
  margin-bottom: var(--airwarm-space-xs);
}
.aw-section--navy .aw-eyebrow { color: var(--airwarm-white-soft); }

.aw-stack > * + * { margin-top: var(--airwarm-space-md); }

/* Breadcrumbs on deeper pages. */
.aw-crumbs {
  font-size: 0.875rem;
  color: var(--airwarm-grey);
  padding-top: var(--airwarm-space-md);
}
.aw-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.aw-crumbs li { margin: 0; }
.aw-crumbs li + li::before { content: "/ "; color: var(--airwarm-navy-line); }

/* Respect a reader's request for less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   11. FIGURES, DIAGRAMS AND ARTICLE FURNITURE

   Everything in this section exists to put the drawings in assets/ on a page,
   and to set the longer article pages. Each drawing is a plain .svg file with
   no build step and nothing loaded from anywhere else. assets/README.md lists
   every file, every icon name, and every class below with an example.

   Three rules held throughout:

   - Nothing here scrolls the page sideways, at any width down to 320px. Wide
     things scroll inside their own box instead. See .aw-table-wrap.
   - Nothing here sets a max-height on a box that holds text, so text can grow
     to 200% and reflow rather than being clipped. WCAG 1.4.12.
   - Nothing here animates. The reduced-motion rule in section 10 covers the
     two transitions elsewhere in this file.
   ========================================================================== */

/* ---- Figures -----------------------------------------------------------
   Every drawing goes in a <figure class="aw-figure"> with a
   <figcaption class="aw-figure__caption"> under it. The caption is not
   optional: it is what tells a reader what they are looking at.
   ---------------------------------------------------------------------- */
.aw-figure {
  margin: var(--airwarm-space-lg) auto;
  padding: 0;
  text-align: center;
}
.aw-figure__caption {
  margin: var(--airwarm-space-sm) auto 0 auto;
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--airwarm-grey);
  text-align: center;
}
/* Grey on navy is only 3.9:1, so captions on navy go light instead. */
.aw-section--navy .aw-figure__caption,
.aw-hero .aw-figure__caption,
.aw-cta-band .aw-figure__caption { color: var(--airwarm-white-soft); }

/* ---- The drawings themselves -------------------------------------------
   Works the same whether the SVG is written into the page or loaded with an
   <img src="/assets/diagram-how-it-works.svg" class="aw-diagram" alt="...">.

   width:100% with height:auto means a diagram can never be wider than the
   column it sits in, so it can never push the page sideways. The max-width
   stops the larger drawings becoming cartoonish on a wide screen; each SVG
   already carries its own pale background panel and its own margins, so it
   needs no border or padding here.
   ---------------------------------------------------------------------- */
.aw-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 760px;
  margin: 0 auto;
}
/* Two of the drawings are wider than they are tall and can take more room. */
.aw-diagram--wide { max-width: 900px; }

/* ---- Card grid ---------------------------------------------------------
   Cards in as many columns as will fit, one column on a phone, with no
   breakpoint to maintain. The min() is what stops a 260px minimum from
   overflowing a container narrower than 260px.
   ---------------------------------------------------------------------- */
.aw-card-grid {
  display: grid;
  gap: var(--airwarm-space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ---- Cards ----
   .aw-card itself is defined in section 07: a hairline border, generous
   padding, moderate rounding and deliberately no shadow. These add the
   heading, and fix the text colour so that a white card dropped inside a navy
   section does not inherit white text onto its white background. */
.aw-card { color: var(--airwarm-dark-text); }
.aw-card__title {
  margin: 0 0 var(--airwarm-space-xs) 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--airwarm-dark-text);
}

/* ---- Steps ----
   .aw-steps is the numbered list defined in section 07. It expects list
   items; .aw-step lets a page mark each one explicitly, or use a <div> where
   a list is not the right element. Both get the same treatment. */
.aw-steps > .aw-step {
  counter-increment: awstep;
  position: relative;
  padding: 0 0 var(--airwarm-space-md) var(--airwarm-space-lg);
  border-left: 1px solid var(--airwarm-navy-line);
  margin-left: 14px;
  list-style: none;
}
.aw-steps > .aw-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.aw-steps > .aw-step::before {
  content: counter(awstep);
  position: absolute;
  left: -15px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--airwarm-navy);
  color: var(--airwarm-white);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aw-section--navy .aw-steps > .aw-step { border-left-color: var(--airwarm-white-line); }
.aw-section--navy .aw-steps > .aw-step::before {
  background: var(--airwarm-orange);
  color: var(--airwarm-dark-text);
}
.aw-step__title {
  margin: 0 0 4px 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ---- Callouts ----------------------------------------------------------
   A quiet panel for something a reader needs to know. Three flavours: plain
   information, a positive outcome, and something to be careful about.

   The accent is a bar down the left, and the text is always dark on the light
   neutral: never coloured text, and never white on a colour. Each flavour is
   meant to be used with a word or an icon that says the same thing, so the
   meaning does not rest on the colour of a 4px bar.
   ---------------------------------------------------------------------- */
.aw-callout {
  background: var(--airwarm-light-bg);
  border-left: 4px solid var(--airwarm-blue);
  border-radius: 0 var(--airwarm-radius-sm) var(--airwarm-radius-sm) 0;
  padding: var(--airwarm-space-md);
  color: var(--airwarm-dark-text);
}
.aw-callout > :first-child { margin-top: 0; }
.aw-callout > :last-child { margin-bottom: 0; }
.aw-callout h2,
.aw-callout h3,
.aw-callout h4 {
  font-size: 1.0625rem;
  margin-bottom: var(--airwarm-space-xs);
}
/* Green is the Renewables accent and is reserved for positive outcomes.
   This is one of the few places it belongs. */
.aw-callout--positive { border-left-color: var(--airwarm-green); }
.aw-callout--caution  { border-left-color: var(--airwarm-orange); }

/* An icon inside a callout uses the darkened variant, because an icon that
   carries meaning has to reach 3:1 and the brand orange and green do not on a
   pale panel. */
.aw-callout .aw-icon           { color: var(--airwarm-blue-accessible); }
.aw-callout--positive .aw-icon { color: var(--airwarm-green-text); }
.aw-callout--caution .aw-icon  { color: var(--airwarm-orange-text); }

/* On navy, a callout becomes a quiet translucent panel with white text. */
.aw-section--navy .aw-callout,
.aw-cta-band .aw-callout {
  background: var(--airwarm-white-panel);
  color: var(--airwarm-white);
}
.aw-section--navy .aw-callout .aw-icon { color: var(--airwarm-blue); }
.aw-section--navy .aw-callout--positive .aw-icon { color: var(--airwarm-green); }
.aw-section--navy .aw-callout--caution .aw-icon { color: var(--airwarm-orange); }

/* ---- Frequently asked questions ---------------------------------------
   Native <details> and <summary>, so it works with JavaScript switched off,
   prints sensibly, and is keyboard operable without a line of script:

     <div class="aw-faq">
       <details class="aw-faq__item">
         <summary class="aw-faq__question">Does it work in winter?</summary>
         <div class="aw-faq__answer"><p>...</p></div>
       </details>
     </div>

   The older pages use plain <details> and <summary> inside .aw-faq without
   those two class names. Every rule below names both, so the two are
   identical and cannot drift apart. This is the only place either is styled.
   ---------------------------------------------------------------------- */
.aw-faq details,
.aw-faq .aw-faq__item {
  border-bottom: 1px solid var(--airwarm-navy-line);
  padding: var(--airwarm-space-sm) 0;
}
.aw-faq summary,
.aw-faq .aw-faq__question {
  font-weight: 600;
  cursor: pointer;
  /* Comfortably over the 24px minimum target size, and roomy enough to tap. */
  min-height: 24px;
  padding: 8px 0 8px 22px;
  position: relative;
  list-style: none;
}
.aw-faq summary::-webkit-details-marker,
.aw-faq .aw-faq__question::-webkit-details-marker { display: none; }
/* The plus and the dash are shapes as well as a colour, so the open and
   closed state does not depend on colour alone. */
.aw-faq summary::before,
.aw-faq .aw-faq__question::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--airwarm-blue-accessible);
  font-weight: 700;
}
.aw-faq details[open] > summary::before,
.aw-faq .aw-faq__item[open] > .aw-faq__question::before { content: "\2013"; }
.aw-faq details > *:not(summary),
.aw-faq .aw-faq__answer {
  margin-top: var(--airwarm-space-xs);
  max-width: 62ch;
}
.aw-faq .aw-faq__answer > :first-child { margin-top: 0; }
.aw-faq .aw-faq__answer > :last-child { margin-bottom: 0; }
.aw-section--navy .aw-faq details,
.aw-section--navy .aw-faq .aw-faq__item { border-bottom-color: var(--airwarm-white-line); }
.aw-section--navy .aw-faq summary::before,
.aw-section--navy .aw-faq .aw-faq__question::before { color: var(--airwarm-orange); }

/* ---- Tables -----------------------------------------------------------
   A wide table must never widen the page. The wrapper scrolls instead:

     <div class="aw-table-wrap" tabindex="0" role="region"
          aria-label="Emitter types compared">
       <table class="aw-table"> ... </table>
     </div>

   The tabindex and the label are worth adding: they let someone using a
   keyboard scroll the table, and they let a screen reader announce it.
   ---------------------------------------------------------------------- */
.aw-table-wrap {
  overflow-x: auto;
  /* Keeps the momentum scroll on iOS. */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: var(--airwarm-space-md) 0;
}
.aw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}
.aw-table caption {
  caption-side: bottom;
  padding-top: var(--airwarm-space-xs);
  font-size: 0.875rem;
  color: var(--airwarm-grey);
  text-align: left;
}
.aw-table th,
.aw-table td {
  padding: 12px var(--airwarm-space-sm);
  border-bottom: 1px solid var(--airwarm-navy-line);
  vertical-align: top;
}
.aw-table th {
  font-weight: 600;
  background: var(--airwarm-light-bg);
  color: var(--airwarm-dark-text);
}
.aw-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Where a real photograph goes -------------------------------------
   There is no photography on this site yet, and no stock photography is
   allowed to stand in for it. This marks a slot honestly, in the page, where
   a real Airwarm photograph belongs:

     <div class="aw-photo-placeholder">
       <p>Photograph: a finished outdoor unit installation.</p>
       <p class="aw-small">To be added when Airwarm has its own.</p>
     </div>
   ---------------------------------------------------------------------- */
.aw-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--airwarm-space-xs);
  /* min-height, never height or max-height, so the caption can grow. */
  min-height: 180px;
  padding: var(--airwarm-space-md);
  border: 2px dashed var(--airwarm-navy-line);
  border-radius: var(--airwarm-radius-md);
  background: var(--airwarm-light-bg);
  color: var(--airwarm-grey);
  font-size: 0.9375rem;
  text-align: center;
}
.aw-photo-placeholder p { margin: 0; }
.aw-section--navy .aw-photo-placeholder,
.aw-cta-band .aw-photo-placeholder {
  border-color: var(--airwarm-white-line);
  background: var(--airwarm-white-panel);
  color: var(--airwarm-white-soft);
}

/* ---- The opening paragraph of a page ---------------------------------- */
.aw-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 58ch;
  color: var(--airwarm-dark-text);
}
.aw-section--navy .aw-lede,
.aw-hero .aw-lede,
.aw-cta-band .aw-lede { color: var(--airwarm-white); }

/* ---- Article body -----------------------------------------------------
   Wrap the body of a guide in <div class="aw-prose"> and the measure, the
   type size and the spacing between elements are all handled. The measure is
   65 characters, which is the comfortable range for continuous reading; the
   size is 16px on a phone and 18px from tablet up, per the framework.
   ---------------------------------------------------------------------- */
.aw-prose {
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.7;
  /* A long word, a URL or a postcode must not stretch the column. */
  overflow-wrap: break-word;
}
.aw-prose > * + * { margin-top: var(--airwarm-space-sm); }
.aw-prose h2 {
  margin-top: var(--airwarm-space-lg);
  margin-bottom: var(--airwarm-space-xs);
}
.aw-prose h3 {
  margin-top: var(--airwarm-space-md);
  margin-bottom: var(--airwarm-space-xs);
}
.aw-prose ul,
.aw-prose ol { padding-left: var(--airwarm-space-md); }
.aw-prose li + li { margin-top: var(--airwarm-space-xs); }
.aw-prose img { max-width: 100%; height: auto; }
/* A figure inside prose may be wider than the reading measure. */
.aw-prose .aw-figure { max-width: none; }

/* ---- Contents list at the top of a long guide ------------------------- */
.aw-toc {
  padding: var(--airwarm-space-md);
  border: 1px solid var(--airwarm-navy-line);
  border-radius: var(--airwarm-radius-md);
  background: var(--airwarm-light-bg);
}
.aw-toc h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--airwarm-grey);
  margin-bottom: var(--airwarm-space-xs);
}
.aw-toc ol,
.aw-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aw-toc li { margin: 0; }
.aw-toc a {
  display: block;
  /* 24px minimum target size, with room to spare. */
  padding: 8px 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ---- Closing call to action ------------------------------------------
   A full-width navy band, usually the last thing on a page. Put an .aw-wrap
   inside it, exactly like a section.
   ---------------------------------------------------------------------- */
.aw-cta-band {
  background: var(--airwarm-navy);
  color: var(--airwarm-white);
  padding: var(--airwarm-space-lg) 0;
}
.aw-cta-band h2 { color: var(--airwarm-white); }
.aw-cta-band a { color: var(--airwarm-white); }
.aw-cta-band .aw-lead,
.aw-cta-band .aw-small,
.aw-cta-band small { color: var(--airwarm-white-soft); }
/* The button keeps its orange fill and dark text: 6.1:1. */
.aw-cta-band .aw-btn--primary { color: var(--airwarm-dark-text); }

/* ---- The hero pattern ------------------------------------------------
   assets/hero-pattern.svg tiled over navy. It is drawn in white at about a
   tenth opacity on a transparent background, so the navy shows through and it
   never competes with the headline. Add this class to a hero or a navy
   section. It is decoration only and carries no information, so there is
   nothing to describe to a screen reader.

   The path below is relative, and starts with two dots on purpose. A URL
   inside a stylesheet is resolved against the STYLESHEET, not against the page
   that loaded it, so ../assets/ means "up out of css/, then into assets/" from
   every page on the site whatever its depth. A path starting with a slash
   would break, because the site is served from a sub-folder on GitHub Pages
   rather than from the root of a domain. Please keep it relative.
   ---------------------------------------------------------------------- */
.aw-hero-pattern {
  background-color: var(--airwarm-navy);
  background-image: url('../assets/hero-pattern.svg');
  background-repeat: repeat;
  background-size: 240px 240px;
  background-position: center top;
}

/* ==========================================================================
   12. RESPONSIVE RULES
   Mobile-first: everything above is the mobile layout. These blocks only
   add to it on larger screens.
   ========================================================================== */

/* The larger sizes for section 11. Kept with their own section rather than
   mixed into the general breakpoints below. */
@media (min-width: 768px) {
  .aw-figure { margin: var(--airwarm-space-xl) auto; }
  .aw-card__title { font-size: 1.25rem; }
  .aw-step__title { font-size: 1.125rem; }
  .aw-lede { font-size: 1.3125rem; }
  /* 18px, which is inside the 17 to 19px the framework asks for. */
  .aw-prose { font-size: 1.125rem; }
  .aw-callout h2,
  .aw-callout h3,
  .aw-callout h4 { font-size: 1.125rem; }
  .aw-cta-band { padding: var(--airwarm-space-xl) 0; }
  .aw-table { font-size: 1rem; }
}

/* Tablet and up */
@media (min-width: 768px) {
  body { font-size: var(--airwarm-body-size); }

  h1 { font-size: 2.75rem; }
  h2 { font-size: 1.875rem; }
  h3 { font-size: 1.25rem; }
  .aw-card h2,
  .aw-note h2,
  .aw-steps h2 { font-size: 1.25rem; }

  .aw-section { padding: var(--airwarm-space-xl) 0; }
  .aw-section--tight { padding: var(--airwarm-space-lg) 0; }
  .aw-hero { padding: var(--airwarm-space-xl) 0; }
  .aw-hero__support { font-size: 1.1875rem; }

  .aw-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .aw-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .aw-split { grid-template-columns: 3fr 2fr; }

  .aw-btn-row .aw-btn { flex: 0 0 auto; }

  .aw-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop — 1200px rather than 1024px because that is the width at which the
   wordmark, all seven navigation links and the assessment button fit on one
   line together. Below it, the tablet layout puts the navigation on its own
   full-width row, which is roomier. */
/* Tablet landscape gets the same header order as desktop.

   The base layout puts the button before the nav — right for a phone, where
   the nav wraps underneath anyway. That ordering only flipped to
   identity / nav / button at 1200px, so between roughly 1024 and 1199 the
   button sat wedged between the wordmark and the nav. That was there before
   the August 2026 work and was largely hidden by the nav wrapping; with five
   nav items it fits on one row and the odd order became visible.

   Below 1000px the wrapped layout stays: at 980px and down the nav genuinely
   does not fit beside the identity and the button. There is a band of roughly
   15px just under 1000 where it does fit and keeps the base order — visible
   only if someone parks a window at exactly that width, and nothing overlaps
   there, so it is not worth a third breakpoint. Measured at 901, 960, 980,
   999, 1000, 1010, 1024 and 1280. */
@media (min-width: 1000px) {
  .aw-header__inner { flex-wrap: nowrap; gap: var(--airwarm-space-xs); }
  .aw-wordmark { flex: 0 0 auto; }
  .aw-nav { flex: 1 1 auto; min-width: 0; order: 2; margin-left: auto; }
  .aw-header__cta { order: 3; margin-left: var(--airwarm-space-sm); flex: 0 0 auto; }
}

@media (min-width: 1200px) {
  /* On desktop the whole header fits on one line, so it can be sticky
     without getting in the way. */
  .aw-header { position: sticky; top: 0; }

  /* One row: wordmark, then navigation, then the assessment button.
     nowrap stops the button dropping onto a second line if the navigation
     is wide; min-width:0 lets the navigation shrink instead. */
  .aw-header__inner { flex-wrap: nowrap; gap: var(--airwarm-space-xs); }
  /* The wordmark keeps its natural width and its tagline stays on one line;
     the navigation takes whatever is left. */
  .aw-wordmark { flex: 0 0 auto; }
  .aw-nav { flex: 1 1 auto; min-width: 0; order: 2; margin-left: auto; }
  .aw-header__cta { order: 3; margin-left: var(--airwarm-space-sm); flex: 0 0 auto; }
  /* Navigation labels are small by design ("small navigation labels" are one
     of the few places the brand rules allow tighter type). This keeps all
     seven links on one line alongside the wordmark and the button. */
  .aw-nav__list { gap: var(--airwarm-space-xs) 14px; justify-content: flex-end; }
  .aw-nav__list a { font-size: 0.875rem; }
  /* The tagline is the widest part of the identity, because the brand rules
     forbid stacking it — and since August 2026 it carries three statements
     rather than two, which made it wider again. Holding it at this size is
     what keeps the whole header on one line. Colour order: blue, amber,
     green. */
  .aw-tagline { font-size: 0.5rem; }
  .aw-header__cta .aw-btn { padding: 10px var(--airwarm-space-sm); font-size: 0.9375rem; }

  .aw-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .aw-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* Print: keep pages legible on paper without wasting ink on navy panels. */
@media print {
  .aw-header, .aw-footer, .aw-btn-row, .aw-header__cta { display: none; }
  .aw-section--navy, .aw-hero { background: var(--airwarm-white); color: var(--airwarm-dark-text); }
  a { text-decoration: none; }
}

/* ==========================================================================
   13. LOGO LOCKUP

   WHICH FILE GOES WHERE. The permanent identity ships four pieces of
   artwork, and the brand rules assign each one a job. Do not substitute one
   for another — in particular, do not put the Hero Logo where the Corporate
   Mark belongs.

     assets/airwarm-hero-logo.svg   Homepage hero, brand introductions.
                                    The flagship. Mark + wordmark + tagline.
     assets/airwarm-mark.svg        Header, footer, small UI. The Corporate
                                    Mark, background removed.
     assets/airwarm-favicon.svg     Favicon and loading screen. The Corporate
                                    Mark with its navy tile kept.
     assets/brand/                  The supplied files, exactly as delivered.
                                    Source of truth. Never edit these.

   The header and footer lockup is the Corporate Mark plus a live-text
   wordmark. The mark carries alt="" because the wordmark beside it already
   names the company — announcing both would make a screen reader say
   "Airwarm Airwarm".
   ========================================================================== */

.aw-wordmark {
  display: inline-flex;
  /* Overrides the column direction set in section 05, which assumed a
     text-only wordmark with the tagline stacked beneath it. */
  flex-direction: row;
  align-items: center;
  gap: var(--airwarm-space-sm);
  text-decoration: none;
}

.aw-wordmark__emblem {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: block;
}

.aw-wordmark__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Footer lockup sits a little smaller. */
footer .aw-wordmark__emblem { width: 34px; height: 34px; }

/* ---- The Hero Logo -----------------------------------------------------
   The flagship identity, used on the homepage hero and nowhere else on this
   site. It is the whole lockup as artwork — mark, wordmark and tagline — so
   the page must NOT repeat the wordmark as text beside it.

   The brand rules ask for generous white space around it and forbid touching
   its proportions, so it gets a max-width and a wide margin below, and its
   aspect ratio is left to the SVG. Do not add a filter, shadow or glow: the
   rules say no effects.

   Its own navy background has been removed (see the file header), so it sits
   directly on the hero's navy and the hero pattern reads through the gaps in
   the mark. Its wordmark is white, which is why this asset is for navy
   panels only — never put it on white or on the light neutral. -------- */
.aw-hero__logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 0 var(--airwarm-space-lg) 0;
}

/* On narrow screens keep the emblem and drop to a tighter gap rather than
   shrinking the wordmark, which would hurt legibility. */
@media (max-width: 480px) {
  .aw-wordmark { gap: var(--airwarm-space-xs); }
  .aw-wordmark__emblem { width: 34px; height: 34px; }
}

/* ---- The three-part tagline on small screens ---------------------------
   Going from two statements to three in August 2026 made this line about 80%
   wider. The brand rules forbid stacking it, so on a narrow screen it either
   shrinks or it goes; it may not fold onto a second row.

   Measured at 8px it wants 300px. A 320px phone has 254px to give it and a
   360px phone has 294px, so both overflowed — and horizontal scroll on a
   phone is a real defect, not a cosmetic one.

   Between 360px and 480px it is set smaller and tracked tighter, which is
   enough to fit.

   Below 360px it is hidden altogether. That is a deliberate choice and the
   less bad of two: the alternative is roughly 6px type, which is decorative
   rather than readable, and a tagline nobody can read is worth less than the
   clean mark. The emblem and the AIRWARM wordmark still carry the identity —
   the Corporate Mark on its own is the everyday mark by the brand's own
   rules — and the full statement is still there in the footer of the same
   page, where the column is wide enough for it.

   If the wording ever gets shorter, raise these breakpoints or delete this
   block. Do NOT solve it by letting the line wrap.
   ---------------------------------------------------------------------- */
@media (max-width: 480px) {
  .aw-tagline { font-size: 0.4375rem; letter-spacing: 0.04em; }
  .aw-tagline .aw-sep { padding: 0 0.3em; }
}
@media (max-width: 359px) {
  .aw-tagline { display: none; }
}

/* ---- Phone header: Hero Logo and a centred button ----------------------
   Tom's September 2026 action plan. Below 768px the header shows the Hero
   Logo instead of the Corporate Mark and live-text lockup. The swap itself is
   the <picture> in the HEADER block, so a phone downloads only the Hero Logo
   and a desktop only the Corporate Mark; this block hides the live text and
   sizes the artwork. The footer lockup is untouched.

   The Hero Logo is square and carries its own wordmark, so it is sized by
   height: large enough for AIRWARM to read, small enough that the header does
   not become a hero of its own.

   "Check my home" moves under the navigation and is centred on its own row.
   In the base layout it sat on the identity's row pushed to the right, which
   read as an accident rather than a decision. Wording, colour and nav order
   are unchanged. Tablet and up keep the existing layout. */
@media (max-width: 767px) {
  .aw-header .aw-wordmark__text { display: none; }
  .aw-header .aw-wordmark { padding: 0; }
  .aw-header .aw-wordmark__emblem { width: 96px; height: 96px; }
  .aw-header__cta {
    order: 4;
    flex: 1 1 100%;
    margin-left: 0;
    display: flex;
    justify-content: center;
  }
}

/* Adding the emblem widened the identity, which pushed the last nav item onto
   a second line between roughly 1000px and 1400px. Tighten the nav gap and the
   emblem in that band rather than shrinking the type, which would hurt
   legibility. Below the mobile breakpoint the nav collapses anyway.

   AUGUST 2026: the three-part tagline widened the identity by 122px and broke
   this, so the nav was allowed to wrap onto its own row. Dropping "Heat pumps"
   and "Home Energy Assessment" from the nav then made that unnecessary — five
   items and the button fit beside the identity at every width from 901px up.
   The wrapping rules have been removed rather than left lying around.
   ------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* The nav takes the space left between the identity and the button. It no
     longer needs to be allowed to wrap onto its own row: that was necessary
     in August 2026 when the nav carried seven items and the three-part
     tagline had just widened the identity, and it caused the button to sit
     between the wordmark and the nav at around 1024px. With five items it
     fits on one row at every width from 901px up, measured. */
  .aw-nav { flex: 1 1 auto; }
  .aw-nav__list {
    flex-wrap: nowrap;
    /* Left-aligned so that when the nav wraps onto its own row it lines up
       with the identity above it rather than floating off to the right. */
    justify-content: flex-start;
    gap: var(--airwarm-space-sm);
  }
  .aw-nav__list a { white-space: nowrap; }
  .aw-wordmark__emblem { width: 40px; height: 40px; }
}


/* An icon that introduces a heading belongs inside it. As a sibling it sat on
   its own line, because the heading is block level. Inside the heading it runs
   inline with the text and moves with it when the text wraps. */
h1 > .aw-icon, h2 > .aw-icon, h3 > .aw-icon,
h4 > .aw-icon, h5 > .aw-icon, h6 > .aw-icon {
  margin-right: 0.45em;
  /* The large variant is 1.5em, which would otherwise ride high against
     heading type. Pull it back to the same optical line as the small one. */
}
h1 > .aw-icon--lg, h2 > .aw-icon--lg, h3 > .aw-icon--lg,
h4 > .aw-icon--lg, h5 > .aw-icon--lg, h6 > .aw-icon--lg {
  vertical-align: -0.22em;
  margin-right: 0.35em;
  /* Optical alignment: heading type is heavier than body text, so the icon
     needs to sit slightly higher than the default baseline nudge. */
  vertical-align: -0.1em;
  flex: 0 0 auto;
}


/* ==========================================================================
   14. HEADER REFINEMENT — 18 Sep 2026
   Use the transparent Hero mark in the header lockup and give the desktop
   identity, navigation and CTA more deliberate breathing room.
   ========================================================================== */
@media (min-width: 1000px) {
  .aw-header__inner {
    gap: 32px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .aw-header .aw-wordmark {
    gap: 14px;
    min-width: 292px;
  }
  .aw-header .aw-wordmark__emblem {
    width: 52px;
    height: 52px;
  }
  .aw-header .aw-nav {
    margin-left: 12px;
  }
  .aw-header .aw-nav__list {
    justify-content: center;
    gap: 28px;
  }
  .aw-header__cta {
    margin-left: 18px;
  }
}

@media (min-width: 1200px) {
  .aw-header__inner {
    gap: 40px;
  }
  .aw-header .aw-wordmark {
    min-width: 310px;
  }
  .aw-header .aw-wordmark__emblem {
    width: 56px;
    height: 56px;
  }
  .aw-header .aw-nav__list {
    gap: 32px;
  }
  .aw-header__cta {
    margin-left: 24px;
  }
}


/* Header logo hotfix — use the supplied transparent PNG directly.
   This deliberately bypasses the SVG wrapper so the browser fetches the
   actual artwork as the rendered content of the existing header <img>. */
.aw-header .aw-wordmark__emblem {
  content: url("/assets/airwarm-header-logo.png");
  object-fit: contain;
}


/* ==========================================================================
   15. HOMEPAGE HERO BRAND REFINEMENT — 18 Sep 2026
   Bring the opening proposition into the three-pillar Airwarm identity:
   Engineered Design = blue, Smarter Heating = amber/orange,
   Greener Futures = green. The heading remains real text for SEO/accessibility.
   ========================================================================== */
.aw-hero h1 {
  max-width: 22ch;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.aw-hero h1 .aw-hero__brand-name {
  color: var(--airwarm-white);
}
.aw-hero h1 .aw-hero__design {
  color: var(--airwarm-blue);
}
.aw-hero h1 .aw-hero__heating {
  color: var(--airwarm-orange);
}
.aw-hero h1 .aw-hero__futures {
  color: var(--airwarm-green);
}
.aw-hero__support {
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.65;
}
.aw-positioning {
  border-color: rgba(59, 169, 255, 0.5);
  color: var(--airwarm-white);
  background: rgba(0, 168, 255, 0.06);
}
@media (min-width: 768px) {
  .aw-hero {
    padding-top: 56px;
    padding-bottom: 72px;
  }
  .aw-hero h1 {
    font-size: clamp(2.6rem, 4.2vw, 4.25rem);
    margin-bottom: 22px;
  }
  .aw-hero__support {
    font-size: 1.2rem;
  }
}

.aw-hero h1 .aw-hero__brand-name,
.aw-hero h1 .aw-hero__brand-line { display:block; }
.aw-hero h1 .aw-hero__brand-name { margin-bottom:0.12em; }


/* Homepage hero watermark — 18 Sep 2026
   Uses the approved Airwarm emblem as a quiet oversized watermark over the
   existing navy/pattern background. Kept decorative and behind all content. */
.aw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.aw-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-110px, -4vw, -40px);
  width: clamp(420px, 48vw, 720px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background: url("/assets/airwarm-header-logo.png") center / contain no-repeat;
  opacity: 0.10;
  pointer-events: none;
}
.aw-hero > .aw-wrap {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .aw-hero::after {
    width: 520px;
    right: -250px;
    opacity: 0.07;
  }
}


/* ==========================================================================
   16. SITE-WIDE NAVY WATERMARK — 18 Sep 2026
   Carry the Airwarm emblem through substantial dark-navy content surfaces.
   Header and small navy UI elements are deliberately excluded: the header
   already carries the brand mark, and controls/step markers are not sections.
   ========================================================================== */
.aw-section--navy,
.aw-cta-band,
.aw-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.aw-section--navy::after,
.aw-cta-band::after,
.aw-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-120px, -5vw, -45px);
  width: clamp(360px, 42vw, 620px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background: url("../assets/airwarm-header-logo.png") center / contain no-repeat;
  opacity: 0.075;
  pointer-events: none;
}
.aw-section--navy > .aw-wrap,
.aw-cta-band > .aw-wrap,
.aw-footer > .aw-wrap {
  position: relative;
  z-index: 1;
}
.aw-footer::after {
  width: clamp(300px, 34vw, 500px);
  opacity: 0.055;
}
@media (max-width: 767px) {
  .aw-section--navy::after,
  .aw-cta-band::after,
  .aw-footer::after {
    width: 440px;
    right: -230px;
    opacity: 0.055;
  }
  .aw-footer::after {
    opacity: 0.04;
  }
}


/* Exception: the standard "Start with your home, not a product" closing
   assessment CTA stays clean navy with no emblem watermark. */
.aw-cta-band::after {
  content: none;
  background: none;
}


/* Footer identity — pair the AIRWARM wordmark with the approved Corporate Mark.
   Uses the untouched source-of-truth brand asset. */
.aw-footer .aw-wordmark {
  align-items: center;
  gap: 12px;
}
.aw-footer .aw-wordmark__emblem {
  content: url("../assets/brand/corporate-mark.svg");
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
}


/* ==========================================================================
   17. PREMIUM VISUAL POLISH — 18 Sep 2026
   A restrained finishing layer: more depth, rhythm and interaction without
   turning the technical/credible Airwarm identity into a glossy sales site.
   ========================================================================== */
:root {
  --aw-radius-sm: 10px;
  --aw-radius-md: 16px;
  --aw-shadow-soft: 0 12px 34px rgba(0, 21, 46, 0.08);
  --aw-shadow-lift: 0 18px 44px rgba(0, 21, 46, 0.13);
}

/* Stronger section rhythm and subtle separation. */
.aw-section {
  position: relative;
}
.aw-section--light {
  background:
    linear-gradient(180deg, rgba(0, 168, 255, 0.025), transparent 180px),
    var(--airwarm-light-bg);
}
main > .aw-section:not(.aw-section--navy):not(.aw-section--light) + .aw-section:not(.aw-section--navy) {
  border-top: 1px solid rgba(0, 21, 46, 0.07);
}

/* Cards feel like designed components rather than bordered boxes. */
.aw-card,
.aw-evidence-slot,
.aw-callout {
  border-radius: var(--aw-radius-md);
}
.aw-card {
  border-color: rgba(0, 21, 46, 0.11);
  box-shadow: var(--aw-shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.aw-card--link:hover,
.aw-card--link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--aw-shadow-lift);
  border-color: rgba(0, 168, 255, 0.45);
}

/* A fine brand accent gives ordinary headings a recognisable Airwarm cue. */
.aw-section:not(.aw-section--navy) > .aw-wrap > h2::after,
.aw-section:not(.aw-section--navy) .aw-prose > h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--airwarm-blue), var(--airwarm-orange), var(--airwarm-green));
}

/* Buttons: same palette, more intentional physical presence. */
.aw-btn {
  border-radius: var(--aw-radius-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.aw-btn--primary {
  box-shadow: 0 8px 20px rgba(255, 112, 0, 0.18);
}
.aw-btn:hover {
  transform: translateY(-2px);
}
.aw-btn--primary:hover {
  box-shadow: 0 12px 26px rgba(0, 21, 46, 0.14);
}

/* Positioning/eyebrow chips gain a quieter premium finish. */
.aw-positioning,
.aw-eyebrow {
  letter-spacing: 0.045em;
}
.aw-positioning {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Process markers carry a little more visual hierarchy. */
.aw-steps > li::before,
.aw-steps > .aw-step::before {
  box-shadow: 0 0 0 5px rgba(0, 168, 255, 0.08);
}

/* Navy panels: retain the watermark but add depth at the lower edge. */
.aw-section--navy:not(.aw-cta-band) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), inset 0 -1px 0 rgba(255,255,255,0.035);
}

/* Footer: cleaner separation from the final content band. */
.aw-footer {
  border-top: 1px solid rgba(255,255,255,0.09);
}

/* Motion is decorative only; respect the user's OS preference. */
@media (prefers-reduced-motion: reduce) {
  .aw-card,
  .aw-btn {
    transition: none;
  }
  .aw-card--link:hover,
  .aw-card--link:focus-visible,
  .aw-btn:hover {
    transform: none;
  }
}


/* ==========================================================================
   18. TECHNICAL ASHP BACKDROP FOR LIGHT-GREY SECTIONS — 18 Sep 2026
   Light sections use Airwarm's existing system-layout engineering drawing as
   a very quiet technical backdrop. Dark navy keeps the emblem watermark;
   white remains clean; the closing assessment CTA remains watermark-free.
   ========================================================================== */
.aw-section--light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.aw-section--light::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-170px, -7vw, -70px);
  width: clamp(520px, 50vw, 820px);
  aspect-ratio: 16 / 10;
  transform: translateY(-50%);
  background: url("../assets/diagram-system-layout.svg") center / contain no-repeat;
  opacity: 0.045;
  filter: saturate(0.45);
  pointer-events: none;
}
.aw-section--light > .aw-wrap {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .aw-section--light::after {
    width: 620px;
    right: -360px;
    opacity: 0.03;
  }
}


/* ==========================================================================
   19. ALTERNATING LIGHT / WHITE CONTENT BANDS — 18 Sep 2026
   Prevent long runs of pale sections feeling repetitive. Among ordinary
   non-navy content sections, every other band becomes clean white. Explicit
   navy sections and CTA bands are untouched. Technical artwork remains only
   on sections that resolve to the light-grey treatment.
   ========================================================================== */
main > .aw-section:not(.aw-section--navy):not(.aw-cta-band):nth-of-type(even) {
  background-color: var(--airwarm-white);
  background-image: none;
}
main > .aw-section--light:not(.aw-section--navy):not(.aw-cta-band):nth-of-type(even)::after {
  content: none;
  background: none;
}
main > .aw-section--light:not(.aw-section--navy):not(.aw-cta-band):nth-of-type(odd) {
  background:
    linear-gradient(180deg, rgba(0, 168, 255, 0.025), transparent 180px),
    var(--airwarm-light-bg);
}


/* ==========================================================================
   20. CLEAN HOMEPAGE HERO LOCKUP — 18 Sep 2026
   Remove the generic wavy/tiled hero artwork on the homepage and present the
   three brand pillars as a deliberate lockup rather than a sentence.
   ========================================================================== */
.home .aw-hero-pattern,
body.home .aw-hero-pattern {
  background-image: none;
}
.home .aw-hero-pattern::before,
body.home .aw-hero-pattern::before {
  content: none;
  background: none;
}
.aw-hero__brand-lockup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38em 0.55em;
  margin-top: 0.22em;
  font-size: clamp(0.78rem, 1.35vw, 1.15rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.aw-hero__brand-lockup .aw-hero__design,
.aw-hero__brand-lockup .aw-hero__heating,
.aw-hero__brand-lockup .aw-hero__futures {
  white-space: nowrap;
}
.aw-hero__lockup-sep {
  color: rgba(255,255,255,0.48);
  font-weight: 400;
}
@media (max-width: 640px) {
  .aw-hero__brand-lockup {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.28rem;
    margin-top: 0.45rem;
    letter-spacing: 0.055em;
  }
  .aw-hero__lockup-sep {
    display: none;
  }
}


/* ==========================================================================
   21. PREMIUM POLISH — PASS TWO
   Small finishing details only: improve hierarchy and tactile quality without
   adding more visual noise or changing the established Airwarm layout.
   ========================================================================== */

/* Give major section headings a little more editorial presence. */
.aw-section > .aw-wrap > h2 {
  max-width: 22ch;
  text-wrap: balance;
}
.aw-section > .aw-wrap > h2 + .aw-lead,
.aw-section > .aw-wrap > h2 + .aw-measure {
  margin-top: 18px;
}

/* Cleaner card surfaces with a subtle top highlight. */
.aw-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.96) 100%);
}
.aw-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--airwarm-blue), rgba(0,168,255,0));
  opacity: .55;
}

/* Evidence / information blocks get quieter depth than primary cards. */
.aw-evidence-slot {
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 24px rgba(0,21,46,.055);
}
.aw-section--navy .aw-evidence-slot {
  background: rgba(255,255,255,.045);
  box-shadow: none;
}

/* FAQs read as individual controls rather than one long ruled list. */
.aw-faq {
  border-top: 0;
  display: grid;
  gap: 8px;
}
.aw-faq details,
.aw-faq .aw-faq__item {
  border: 1px solid rgba(0,21,46,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  overflow: hidden;
}
.aw-faq summary,
.aw-faq .aw-faq__question {
  padding: 16px 48px 16px 18px;
}
.aw-faq details > *:not(summary),
.aw-faq .aw-faq__answer {
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 18px;
}
.aw-faq details[open],
.aw-faq .aw-faq__item[open] {
  border-color: rgba(0,168,255,.30);
  box-shadow: 0 8px 22px rgba(0,21,46,.055);
}

/* Keep navy FAQs appropriately dark/translucent. */
.aw-section--navy .aw-faq details,
.aw-section--navy .aw-faq .aw-faq__item {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.13);
}

/* Slightly stronger inline links in prose without making every link shout. */
.aw-prose a:not(.aw-btn),
.aw-measure a:not(.aw-btn) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* More composed spacing on desktop, still compact on mobile. */
@media (min-width: 768px) {
  .aw-card { padding: 28px; }
  .aw-grid { gap: 24px; }
}


/* ==========================================================================
   22. PREMIUM MOTION & DEPTH — 19 Sep 2026
   Quiet architectural motion: no gimmicks, no layout shift. The brand emblem
   breathes gently, technical drawings drift almost imperceptibly, and useful
   interactive surfaces respond to the pointer.
   ========================================================================== */
@keyframes aw-emblem-breathe {
  0% { transform: translateY(-50%) rotate(0deg) scale(1); opacity:.10; }
  50% { transform: translateY(-50%) rotate(-180deg) scale(1.015); opacity:.115; }
  100% { transform: translateY(-50%) rotate(-360deg) scale(1); opacity:.10; }
}
@keyframes aw-tech-drift {
  0%,100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-14px); }
}
@keyframes aw-lockup-enter {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}

/* Homepage: make the brand lockup arrive as one composed identity. */
.aw-hero__brand-name {
  animation: aw-lockup-enter .55s cubic-bezier(.2,.7,.2,1) both;
}
.aw-hero__brand-lockup {
  animation: aw-lockup-enter .65s .10s cubic-bezier(.2,.7,.2,1) both;
}
.aw-hero__support {
  animation: aw-lockup-enter .65s .18s cubic-bezier(.2,.7,.2,1) both;
}
.aw-hero .aw-actions {
  animation: aw-lockup-enter .65s .25s cubic-bezier(.2,.7,.2,1) both;
}

/* Very slow background motion — texture, not a moving graphic. */
.aw-hero::after {
  animation: aw-emblem-breathe 48s linear infinite;
}
.aw-section--light::after {
  animation: aw-tech-drift 18s ease-in-out infinite;
}

/* More tactile cards. */
.aw-card--link {
  will-change: transform;
}
.aw-card--link:hover {
  transform: translateY(-6px);
}
.aw-card--link::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(0,168,255,.045) 48%, transparent 72%);
  transform:translateX(-120%);
  transition:transform .65s ease;
  pointer-events:none;
}
.aw-card--link:hover::after {
  transform:translateX(120%);
}

/* Buttons get a controlled highlight sweep and firmer hover state. */
.aw-btn {
  position:relative;
  overflow:hidden;
}
.aw-btn::after {
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.22) 48%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .55s ease;
  pointer-events:none;
}
.aw-btn:hover::after {
  transform:translateX(130%);
}

/* FAQ opening feels intentional rather than abrupt. */
.aw-faq details[open] .aw-faq__answer {
  animation: aw-lockup-enter .22s ease-out both;
}

/* Slight depth on substantial navy panels as the pointer interacts nearby. */
.aw-section--navy:not(.aw-cta-band) {
  background-image:
    radial-gradient(circle at 82% 18%, rgba(0,168,255,.055), transparent 34%);
}

/* Never animate for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .aw-hero__brand-name,
  .aw-hero__brand-lockup,
  .aw-hero__support,
  .aw-hero .aw-actions,
  .aw-hero::after,
  .aw-section--light::after,
  .aw-faq details[open] .aw-faq__answer {
    animation:none !important;
  }
  .aw-card--link::after,
  .aw-btn::after {
    display:none;
  }
}


/* ==========================================================================
   23. SITE-WIDE SPACING & COMPOSITION FINISH — 19 Sep 2026
   Final visual rhythm pass. Creates consistent vertical cadence across every
   page and gives the design more editorial composition without adding clutter.
   ========================================================================== */
:root {
  --aw-section-mobile: 52px;
  --aw-section-desktop: 88px;
  --aw-content-gap: 26px;
}

/* Consistent page rhythm. */
.aw-section { padding-block: var(--aw-section-mobile); }
.aw-section--tight { padding-block: 38px; }
.aw-section > .aw-wrap > :first-child { margin-top: 0; }
.aw-section > .aw-wrap > :last-child { margin-bottom: 0; }

/* Headings and their supporting copy behave as a single composition. */
.aw-section h2 { line-height: 1.16; letter-spacing: -.018em; }
.aw-section h3 { line-height: 1.25; }
.aw-section > .aw-wrap > h2 + p,
.aw-section > .aw-wrap > h2 + .aw-lead,
.aw-section > .aw-wrap > h2 + .aw-measure { margin-top: 18px; }
.aw-section > .aw-wrap > .aw-grid,
.aw-section > .aw-wrap > .aw-split,
.aw-section > .aw-wrap > .aw-steps,
.aw-section > .aw-wrap > .aw-faq,
.aw-section > .aw-wrap > .aw-card-grid { margin-top: var(--aw-content-gap); }

/* A touch more air around readable prose, but never huge empty gaps. */
.aw-prose > h2:not(:first-child) { margin-top: 2.25em; }
.aw-prose > h3:not(:first-child) { margin-top: 1.7em; }
.aw-prose > p + p { margin-top: 4px; }

/* Premium grid alignment: cards in a row finish at the same visual height. */
.aw-grid > .aw-card,
.aw-card-grid > .aw-card { height: 100%; }
.aw-card { padding: 24px; }
.aw-card h3, .aw-card__title { text-wrap: balance; }
.aw-card p:last-child { margin-bottom: 0; }

/* Brand-colour accent becomes a finer precision line rather than decoration. */
.aw-section:not(.aw-section--navy) > .aw-wrap > h2::after,
.aw-section:not(.aw-section--navy) .aw-prose > h2::after {
  width: 64px;
  height: 2px;
  margin-top: 14px;
}

/* Split layouts feel intentionally asymmetric on wide screens. */
@media (min-width: 900px) {
  .aw-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: clamp(44px, 6vw, 84px);
    align-items: start;
  }
}

/* Hero composition gets more breathing room without becoming oversized. */
.aw-hero .aw-wrap { position: relative; }
.aw-hero__support { max-width: 58ch; }
.aw-hero .aw-actions,
.aw-hero .aw-btn-row { margin-top: 28px; }

/* Navigation gains a subtle premium glass effect once it becomes sticky. */
@media (min-width: 1200px) {
  .aw-header {
    background: rgba(1,15,35,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,15,35,.12);
  }
}

/* Desktop spacing — deliberately one cadence across the entire site. */
@media (min-width: 768px) {
  .aw-section { padding-block: var(--aw-section-desktop); }
  .aw-section--tight { padding-block: 58px; }
  .aw-grid { gap: 28px; }
  .aw-card { padding: 30px; }
}

/* Small phones: preserve polish without wasting vertical space. */
@media (max-width: 480px) {
  .aw-wrap { padding-inline: 20px; }
  .aw-section { padding-block: 46px; }
  .aw-section--tight { padding-block: 34px; }
  .aw-card { padding: 21px; }
  .aw-grid { gap: 18px; }
  .aw-section > .aw-wrap > .aw-grid,
  .aw-section > .aw-wrap > .aw-split,
  .aw-section > .aw-wrap > .aw-steps,
  .aw-section > .aw-wrap > .aw-faq,
  .aw-section > .aw-wrap > .aw-card-grid { margin-top: 22px; }
}


/* ==========================================================================
   24. COMPOSITION / SCROLL POLISH — 19 Sep 2026
   Progressive enhancement only. Adds depth as sections enter the viewport in
   browsers supporting scroll-driven animation; unsupported browsers simply
   receive the fully visible static design.
   ========================================================================== */
@keyframes aw-section-reveal {
  from { opacity: .35; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aw-card-reveal {
  from { opacity: .25; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@supports (animation-timeline: view()) {
  main > .aw-section:not(.aw-hero) > .aw-wrap > :is(.aw-eyebrow,h2,.aw-lede,.aw-lead,.aw-measure) {
    animation: aw-section-reveal linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
  main .aw-card,
  main .aw-step,
  main .aw-faq__item {
    animation: aw-card-reveal linear both;
    animation-timeline: view();
    animation-range: entry 3% cover 22%;
  }
}

/* Process steps deliberately keep the original compact numbered markers.
   The oversized ghost-number experiment was removed after visual review. */

/* Cards get more architectural depth on capable pointing devices. */
@media (hover:hover) and (pointer:fine) {
  .aw-card--link:hover {
    transform: translateY(-7px) scale(1.008);
    box-shadow: 0 24px 54px rgba(0,21,46,.15);
  }
}

/* Eyebrows read like deliberate technical labels. */
.aw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.aw-eyebrow::before {
  content:"";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
}

/* Light technical sections gain a subtle blueprint grid beneath the existing
   ASHP artwork; white sections remain completely clean. */
.aw-section--light {
  background-image:
    linear-gradient(rgba(1,15,35,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,15,35,.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,168,255,.025), transparent 180px);
  background-size: 32px 32px, 32px 32px, auto;
}

/* Preserve the intentional white alternating bands from pass 19. */
main > .aw-section:not(.aw-section--navy):not(.aw-cta-band):nth-of-type(even) {
  background-image: none;
}

/* CTA gets a stronger focal composition while remaining deliberately free of
   the emblem watermark requested to be excluded here. */
.aw-cta-band .aw-wrap {
  max-width: 900px;
  text-align: center;
}
.aw-cta-band .aw-hero__support {
  margin-inline: auto;
}
.aw-cta-band .aw-btn-row {
  justify-content: center;
}

/* Accessibility: all viewport and interaction motion disappears cleanly. */
@media (prefers-reduced-motion: reduce) {
  main > .aw-section:not(.aw-hero) > .aw-wrap > :is(.aw-eyebrow,h2,.aw-lede,.aw-lead,.aw-measure),
  main .aw-card,
  main .aw-step,
  main .aw-faq__item {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ==========================================================================
   25. TECHNICAL BEAUTY SYSTEM — 19 Sep 2026
   Make Airwarm feel like an engineering practice: blueprint geometry,
   precision labels and schematic framing. Decorative only; content remains
   readable and the white bands stay deliberately quiet.
   ========================================================================== */

/* Blueprint sections: stronger technical identity, still extremely faint. */
.aw-section--light {
  --aw-grid-major: rgba(1,15,35,.026);
  --aw-grid-minor: rgba(1,15,35,.012);
  background-image:
    linear-gradient(var(--aw-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--aw-grid-major) 1px, transparent 1px),
    linear-gradient(var(--aw-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--aw-grid-minor) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,168,255,.028), transparent 210px);
  background-size: 128px 128px,128px 128px,32px 32px,32px 32px,auto;
}

/* Precision corner marks make technical cards feel drawn, not templated. */
.aw-section--light .aw-card,
.aw-technical-card {
  background:
    linear-gradient(var(--airwarm-blue),var(--airwarm-blue)) 14px 14px/18px 1px no-repeat,
    linear-gradient(var(--airwarm-blue),var(--airwarm-blue)) 14px 14px/1px 18px no-repeat,
    linear-gradient(180deg,#fff,rgba(255,255,255,.94));
}
.aw-section--light .aw-card::after,
.aw-technical-card::after {
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:18px;
  height:18px;
  border-right:1px solid rgba(0,168,255,.32);
  border-bottom:1px solid rgba(0,168,255,.32);
  pointer-events:none;
}

/* Diagrams get an intentional drawing-board frame. */
.aw-diagram,
.aw-system-diagram,
img[src*="diagram-"] {
  border: 1px solid rgba(1,15,35,.10);
  border-radius: 16px;
  background:
    linear-gradient(rgba(1,15,35,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,15,35,.018) 1px,transparent 1px),
    rgba(255,255,255,.82);
  background-size: 24px 24px;
  box-shadow: 0 18px 44px rgba(1,15,35,.08);
}

/* Tiny engineering datum line under technical labels. */
.aw-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .115em;
}
.aw-eyebrow::after {
  content:"";
  width:6px;
  height:6px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.45;
}

/* Technical lists get a schematic node rather than a generic bullet. */
.aw-section--light .aw-ticks > li::before {
  width:8px;
  height:8px;
  top:.5em;
  border:2px solid var(--airwarm-blue);
  border-radius:50%;
  background:#fff;
}

/* Flow-colour cue: a subtle hot/cool datum along technical diagram frames. */
.aw-section--light .aw-diagram::before,
.aw-section--light .aw-system-diagram::before {
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--airwarm-blue) 0 46%,transparent 46% 54%,var(--airwarm-orange) 54% 100%);
}

/* On wide screens, technical sections gain survey-style registration marks. */
@media (min-width: 1000px) {
  .aw-section--light > .aw-wrap::before,
  .aw-section--light > .aw-wrap::after {
    content:"+";
    position:absolute;
    font: 500 16px/1 monospace;
    color:rgba(1,15,35,.16);
    pointer-events:none;
  }
  .aw-section--light > .aw-wrap::before { left:-22px; top:-18px; }
  .aw-section--light > .aw-wrap::after { right:-22px; bottom:-18px; }
}

/* White bands must remain the visual rest point. */
main > .aw-section:not(.aw-section--navy):not(.aw-cta-band):nth-of-type(even) {
  background-image:none;
}

/* Mobile: retain the engineering cues without making the page busy. */
@media (max-width: 640px) {
  .aw-section--light {
    background-size:96px 96px,96px 96px,24px 24px,24px 24px,auto;
  }
  .aw-section--light .aw-card,
  .aw-technical-card {
    background:
      linear-gradient(var(--airwarm-blue),var(--airwarm-blue)) 12px 12px/14px 1px no-repeat,
      linear-gradient(var(--airwarm-blue),var(--airwarm-blue)) 12px 12px/1px 14px no-repeat,
      linear-gradient(180deg,#fff,rgba(255,255,255,.96));
  }
}


/* ==========================================================================
   26. CUSTOMER-JOURNEY FINISH — 19 Sep 2026
   Final hierarchy pass: cleaner header spacing, stronger hero focus and less
   visual competition around the principal assessment CTA.
   ========================================================================== */
.aw-header__inner { column-gap: clamp(18px, 2.2vw, 34px); }
.aw-nav__list { align-items: center; }
.aw-header__cta .aw-btn { white-space: nowrap; }

@media (min-width: 1000px) {
  .aw-header__inner { gap: clamp(16px, 1.8vw, 28px); }
  .aw-nav { margin-left: 0; }
  .aw-nav__list { justify-content: center; gap: 8px clamp(14px, 1.45vw, 24px); }
  .aw-header__cta { margin-left: 0; }
}

.aw-hero {
  padding-block: clamp(64px, 8vw, 112px);
}
.aw-hero .aw-wrap {
  max-width: 1180px;
}
.aw-hero h1 {
  max-width: 17ch;
  text-wrap: balance;
}
.aw-hero__support {
  max-width: 52ch;
}
.aw-hero__launch {
  margin-top: 30px;
}
.aw-hero .aw-btn-row {
  gap: 14px;
}

/* Keep the primary conversion action dominant. */
.aw-hero .aw-btn--primary {
  padding-inline: 28px;
}
.aw-hero .aw-btn--secondary {
  opacity: .92;
}

/* Reduce visual noise in long customer pages: cards remain technical but
   decorative geometry is reserved for light technical bands. */
.aw-section:not(.aw-section--light) .aw-card {
  box-shadow: none;
}

@media (max-width: 767px) {
  .aw-header__inner { row-gap: 12px; }
  .aw-nav { order: 3; }
  .aw-nav__list {
    justify-content: center;
    gap: 0 18px;
  }
  .aw-nav__list a { padding-block: 8px; }
  .aw-header__cta { margin-top: 2px; }
  .aw-header__cta .aw-btn {
    width: min(100%, 320px);
  }
  .aw-hero {
    padding-block: 56px 64px;
  }
  .aw-hero .aw-btn-row .aw-btn {
    width: 100%;
  }
}


/* ==========================================================================
   27. AIRWARM MOTION SYSTEM — premium, restrained, accessible
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .aw-motion .aw-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms cubic-bezier(.22,.61,.36,1),
                transform 560ms cubic-bezier(.22,.61,.36,1);
  }
  .aw-motion .aw-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .aw-brand-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: awBrandIn 700ms cubic-bezier(.22,.61,.36,1) forwards;
  }
  .aw-brand-reveal--1 { animation-delay: 180ms; }
  .aw-brand-reveal--2 { animation-delay: 330ms; }
  .aw-brand-reveal--3 { animation-delay: 480ms; }

  @keyframes awBrandIn {
    to { opacity: 1; transform: none; }
  }

  .aw-card,
  .aw-btn {
    transition: transform 180ms ease, box-shadow 180ms ease,
                border-color 180ms ease, background-color 180ms ease;
  }
  a.aw-card:hover,
  a.aw-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(1,15,35,.09);
  }
  .aw-btn:hover,
  .aw-btn:focus-visible { transform: translateY(-2px); }

  .aw-header {
    transition: box-shadow 220ms ease, background-color 220ms ease;
  }
  .aw-header.is-scrolled {
    box-shadow: 0 8px 26px rgba(1,15,35,.18);
  }

  .aw-journey {
    position: relative;
  }
  .aw-journey::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: rgba(255,255,255,.18);
    transform-origin: top;
  }
  .aw-journey::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--airwarm-blue);
    transform: scaleY(var(--aw-journey-progress, 0));
    transform-origin: top;
    transition: transform 80ms linear;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-motion .aw-reveal,
  .aw-brand-reveal { opacity: 1; transform: none; animation: none; }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .aw-header.is-scrolled .aw-header__inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .aw-header__inner {
    transition: padding 220ms ease;
  }
}






/* ==========================================================================
   28. HERO / CTA REFINEMENT — 20 Sep 2026
   Primary actions use Airwarm blue. Hero drops the generic tiled wave pattern
   and uses restrained engineering datum geometry instead.
   ========================================================================== */
.aw-btn--primary {
  background: var(--airwarm-blue);
  border-color: var(--airwarm-blue);
  color: var(--airwarm-navy);
  box-shadow: 0 8px 20px rgba(0, 168, 255, .18);
}
.aw-btn--primary:hover,
.aw-btn--primary:focus-visible {
  background: var(--airwarm-white);
  border-color: var(--airwarm-white);
  color: var(--airwarm-navy);
}

/* Remove the legacy repeating wave/tile on every hero. */
.aw-hero-pattern {
  background-color: var(--airwarm-navy);
  background-image: none;
}

/* Hero background: a quiet technical field, deliberately asymmetric.
   No repeating pattern, no waves, no fake photography. */
.aw-hero {
  background-color: var(--airwarm-navy);
  background-image:
    linear-gradient(90deg, transparent 0 72%, rgba(0,168,255,.08) 72% 72.12%, transparent 72.12%),
    linear-gradient(0deg, transparent 0 67%, rgba(255,255,255,.055) 67% 67.12%, transparent 67.12%),
    radial-gradient(circle at 78% 42%, rgba(0,168,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 42%, transparent 0 76px, rgba(0,168,255,.08) 77px 78px, transparent 79px),
    radial-gradient(circle at 78% 42%, transparent 0 150px, rgba(255,255,255,.045) 151px 152px, transparent 153px);
}

/* Keep the approved emblem watermark, but make it static and quieter so the
   geometry reads as engineering detail rather than decoration. */
.aw-hero::after {
  animation: none;
  opacity: .085;
}

@media (max-width: 767px) {
  .aw-hero {
    background-image:
      linear-gradient(90deg, transparent 0 84%, rgba(0,168,255,.07) 84% 84.18%, transparent 84.18%),
      radial-gradient(circle at 91% 36%, rgba(0,168,255,.09) 0 2px, transparent 3px),
      radial-gradient(circle at 91% 36%, transparent 0 72px, rgba(0,168,255,.07) 73px 74px, transparent 75px);
  }
  .aw-hero::after {
    opacity: .04;
  }
}


/* Hero/CTA tuning — 20 Sep 2026 */
.aw-btn--primary {
  color: var(--airwarm-white);
}
.aw-btn--primary:hover,
.aw-btn--primary:focus-visible {
  color: var(--airwarm-navy);
}
.aw-hero::after {
  opacity: .10;
}
@media (max-width: 767px) {
  .aw-hero::after {
    opacity: .11;
  }
}


/* ==========================================================================
   29. MOTION / TECHNICAL WATERMARK REFINEMENT — 20 Sep 2026
   ========================================================================== */
@keyframes aw-hero-clockwise {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(-360deg); }
}
.aw-hero::after {
  animation: aw-hero-clockwise 60s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Grey engineering bands use the refrigeration-cycle drawing rather than the
   broader house/system illustration. It travels gently in toward the content
   and back, remaining a watermark rather than a competing diagram. */
@keyframes aw-technical-watermark-in {
  0%, 100% { transform: translateY(-50%) translateX(34px); }
  50%      { transform: translateY(-50%) translateX(-54px); }
}
.aw-section--light::after {
  right: clamp(-130px, -5vw, -50px);
  width: clamp(500px, 46vw, 760px);
  aspect-ratio: 16 / 11;
  background: url("../assets/diagram-how-it-works.svg") center / contain no-repeat;
  opacity: .055;
  filter: grayscale(1) saturate(0) contrast(.85);
  animation: aw-technical-watermark-in 32s ease-in-out infinite;
  will-change: transform;
}
@media (max-width: 767px) {
  .aw-section--light::after {
    width: 560px;
    right: -300px;
    opacity: .038;
    animation-duration: 38s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aw-hero::after,
  .aw-section--light::after {
    animation: none !important;
  }
}


/* How It Works — scan-first process table with optional depth */
.aw-process-output { margin: 0; }
.aw-process-detail {
  margin-top: 12px;
  border-top: 1px solid rgba(1,15,35,.10);
  padding-top: 10px;
}
.aw-process-detail summary {
  cursor: pointer;
  color: var(--airwarm-blue);
  font-weight: 700;
  list-style-position: outside;
  width: fit-content;
}
.aw-process-detail summary:hover { text-decoration: underline; }
.aw-process-detail summary:focus-visible {
  outline: 3px solid var(--airwarm-blue);
  outline-offset: 4px;
  border-radius: 2px;
}
.aw-process-detail__body {
  padding: 14px 0 4px;
  max-width: 68ch;
}
.aw-process-detail__body > :first-child { margin-top: 0; }
.aw-process-detail__body > :last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .aw-process-table,
  .aw-process-table tbody,
  .aw-process-table tr,
  .aw-process-table th,
  .aw-process-table td {
    display: block;
    width: 100%;
  }
  .aw-process-table thead { display: none; }
  .aw-process-table-wrap {
    overflow: visible;
    border: 0;
  }
  .aw-process-table .aw-process-row {
    margin-bottom: 16px;
    border: 1px solid rgba(1,15,35,.12);
    border-radius: 10px;
    overflow: hidden;
    background: var(--airwarm-white);
  }
  .aw-process-table .aw-process-row th {
    padding: 16px 18px 8px;
    border: 0;
    font-size: 1rem;
  }
  .aw-process-table .aw-process-row td {
    padding: 4px 18px 16px;
    border: 0;
  }
}


/* How It Works mobile repair — caption must not become a narrow table column */
.aw-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 700px) {
  .aw-process-table caption.aw-visually-hidden { display: block; position: absolute !important; }
}


/* ==========================================================================
   30. PREMIUM FINISH PASS — restrained depth and tactile detail
   ========================================================================== */
:root {
  --aw-premium-shadow: 0 18px 48px rgba(1,15,35,.075);
  --aw-premium-shadow-hover: 0 24px 58px rgba(1,15,35,.12);
}

/* Hairline highlight gives the navigation a crisper architectural edge. */
.aw-header {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.045);
}
@media (min-width: 900px) {
  .aw-header__inner { padding-top: 15px; padding-bottom: 15px; }
}

/* More editorial heading rhythm without changing content or SEO structure. */
.aw-section > .aw-wrap > .aw-eyebrow,
.aw-prose > .aw-eyebrow {
  letter-spacing: .12em;
}
.aw-section > .aw-wrap > h2,
.aw-prose > h2 {
  text-wrap: balance;
}

/* Cards gain material depth only on interaction; resting state stays calm. */
.aw-card {
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
}
a.aw-card,
.aw-card--link {
  position: relative;
  overflow: hidden;
}
a.aw-card::after,
.aw-card--link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--airwarm-blue);
  transition: right 320ms cubic-bezier(.22,.61,.36,1);
}
a.aw-card:hover::after,
a.aw-card:focus-visible::after,
.aw-card--link:hover::after,
.aw-card--link:focus-visible::after { right: 0; }

/* Primary controls feel more considered while retaining the approved blue. */
.aw-btn {
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
}
.aw-btn--primary {
  box-shadow: 0 8px 22px rgba(0,168,255,.18);
}
.aw-btn--primary:hover,
.aw-btn--primary:focus-visible {
  box-shadow: 0 12px 30px rgba(0,168,255,.22);
}

/* Native details/summary gets a deliberate micro-interaction. */
details > summary {
  transition: color 180ms ease, padding-left 220ms ease;
}
details[open] > summary { color: var(--airwarm-blue); }

/* Desktop sections get a very subtle top-light at transitions; no gradients
   over text and no extra DOM. */
@media (min-width: 900px) {
  .aw-section--light {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  }
}

/* Respect touch devices and reduced-motion users. */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  a.aw-card:hover,
  a.aw-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--aw-premium-shadow-hover);
  }
  .aw-btn:hover,
  .aw-btn:focus-visible { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  a.aw-card::after,
  .aw-card--link::after,
  details > summary { transition: none; }
}


/* Assessment outcomes — card layout replaces cramped three-column mobile table */
.aw-outcomes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.aw-outcome { background:#fff; border:1px solid rgba(1,15,35,.12); border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(1,15,35,.045); }
.aw-outcome__head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.aw-outcome__head h3 { margin:0; font-size:1.15rem; }
.aw-outcome__dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.aw-outcome--likely .aw-outcome__dot { background:var(--airwarm-green); }
.aw-outcome--review .aw-outcome__dot { background:var(--airwarm-blue); }
.aw-outcome--unlikely .aw-outcome__dot { background:var(--airwarm-orange); }
.aw-outcome__next { margin-top:18px; padding-top:16px; border-top:1px solid rgba(1,15,35,.10); }
@media (max-width:800px) {
  .aw-outcomes { grid-template-columns:1fr; gap:14px; }
  .aw-outcome { padding:20px; border-radius:12px; }
  .aw-outcome p { font-size:1rem; line-height:1.6; }
}


/* Homepage-only heat-pump photography — single authoritative rule. */
.aw-section--light { position:relative; isolation:isolate; overflow:hidden; }
@keyframes aw-home-heatpump-left-in {
  from { transform:translate3d(-100%,0,0); opacity:0; }
  to   { transform:translate3d(0,0,0); opacity:.18; }
}
body.aw-motion .aw-section--light::after {
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:0;
  width:54%;
  background:
    linear-gradient(90deg,rgba(244,247,249,.16),rgba(244,247,249,.03)),
    url("https://cdn.trendhunterstatic.com/thumbs/514/samsung-ehs-mono-r290.jpeg?auto=webp")
    center / contain no-repeat;
  opacity:.18;
  filter:saturate(.72) contrast(.94);
  pointer-events:none;
  animation:aw-home-heatpump-left-in 4s cubic-bezier(.22,.61,.36,1) 1 forwards;
  will-change:transform;
}
body.aw-motion .aw-section--light > * { position:relative; z-index:1; }
body:not(.aw-motion) .aw-section--light::after { content:none; }

body.aw-motion .aw-cta-band .aw-wrap {
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
body.aw-motion .aw-cta-band .aw-hero__support {
  max-width:680px;
  margin-inline:auto;
}
body.aw-motion .aw-cta-band .aw-btn-row { justify-content:center; }

@media (max-width:700px) {
  body.aw-motion .aw-section--light::after {
    width:66%;
    opacity:.13;
    animation-duration:4.5s;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.aw-motion .aw-section--light::after {
    animation:none;
    transform:translate3d(10%,0,0);
  }
}


/* CTA optical centring: reset inherited heading/paragraph offsets */
body.aw-motion .aw-cta-band .aw-wrap {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  max-width:760px !important;
  margin-inline:auto !important;
  text-align:center !important;
}
body.aw-motion .aw-cta-band h2,
body.aw-motion .aw-cta-band .aw-hero__support,
body.aw-motion .aw-cta-band .aw-btn-row {
  width:100% !important;
  max-width:680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
body.aw-motion .aw-cta-band .aw-btn-row {
  display:flex !important;
  justify-content:center !important;
}


/* Final CTA button contrast — keep label white in every interaction state */
body.aw-motion .aw-cta-band .aw-btn--primary,
body.aw-motion .aw-cta-band .aw-btn--primary:link,
body.aw-motion .aw-cta-band .aw-btn--primary:visited,
body.aw-motion .aw-cta-band .aw-btn--primary:hover,
body.aw-motion .aw-cta-band .aw-btn--primary:focus,
body.aw-motion .aw-cta-band .aw-btn--primary:focus-visible,
body.aw-motion .aw-cta-band .aw-btn--primary:active {
  color:#fff !important;
}


/* Mobile homepage ASHP treatment — preserve the desktop idea without crowding copy */
@media (max-width:700px) {
  body.aw-motion .aw-section--light::after {
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:auto !important;
    width:78vw !important;
    height:58% !important;
    background-size:contain !important;
    background-position:left bottom !important;
    opacity:.11 !important;
    transform:none;
    animation:aw-home-heatpump-left-in-mobile 3.6s cubic-bezier(.22,.61,.36,1) 1 forwards !important;
  }
  @keyframes aw-home-heatpump-left-in-mobile {
    from { transform:translate3d(-100%,0,0); opacity:0; }
    to   { transform:translate3d(0,0,0); opacity:.11; }
  }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce) {
  body.aw-motion .aw-section--light::after {
    animation:none !important;
    transform:none !important;
  }
}


/* Mobile: no ASHP background photography */
@media (max-width:700px) {
  body.aw-motion .aw-section--light::after {
    content:none !important;
    display:none !important;
    animation:none !important;
    background-image:none !important;
  }
}