/* ==========================================================================
   Nafas Healthy Building Assessment (AQD) page, from the AQD full-page wireframe v1.
   Nine sections plus the optional EcoFlow pilot (9b). Rhythm opens light, dark anchor at 03, dark case card in 07,
   dark close at 09. Fonts, colours and spacing follow the nafas.com homepage rebuild (nafas-homepage-v14);
   section headlines run smaller than the homepage's (48 vs 64) because every one here is a full sentence.
   Buttons: the site's one button system (32px corners, Regular, 21px / 54px desktop and tablet, 15px / 35px phone;
   Danny, 2026-10-28). Breakpoints as base.css: desktop >= 1440, tablet 810 to 1439.98, phone <= 809.98; the two-column splits
   stack below 1024.
   ========================================================================== */

:root {
  --aqd-display: 72px;
  --aqd-hero-lead: 28px;
  --aqd-h2: 52px;
  --aqd-h3: 28px;
  --aqd-h4: 22px;
  --aqd-lead: 24px;
  --aqd-body: 20px;
  --aqd-small: 16px;
  --aqd-micro: 14px;
  --aqd-stat: 72px;
  --aqd-btn: 21px;
  --aqd-btn-h: 54px;
  --aqd-btn-pad: 0 24px;

  --aqd-content: 1240px;
  --aqd-gutter: 100px;
  --aqd-section-pad: 80px;
  --aqd-title-gap: 48px;
  --aqd-grid-gap: 24px;
  /* The fixed nav bar (components/nav.css), on every breakpoint */
  --aqd-bar-h: 80px;

  --aqd-line: #e5e5e5;
  --aqd-text-2: var(--nf-grey-61);
  /* Dark surfaces, from the Nafas design system */
  --aqd-card-dark: #161819;
  --aqd-stroke-dark: #202222;
  --aqd-text-2-dark: rgba(255, 255, 255, 0.62);
  --aqd-line-dark: rgba(255, 255, 255, 0.14);
  /* Chart colours. Status (Nafas PM2.5 tiers): within the reference vs above it, red/green checked for colour-blind
     separation (deutan ΔE 19); grey is the outdoor air, shown as context; "before" is a faint red. Every bar is also
     labelled, so colour never carries the meaning alone. */
  --aqd-above: #dc0602;
  --aqd-good: #91c851;
  --aqd-good-ink: #4f7d1f;
  --aqd-was: rgba(220, 6, 2, 0.4);

  /* Motion (Nafas animation guideline): short 200ms ease-out-cubic, standard 300ms, reveal 600ms ease-out-expo */
  --aqd-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --aqd-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --aqd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--aqd-bar-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { color: var(--nf-black); }
/* base.css stretches direct section children of .nf-page; this page wraps its sections in <main> */
.nf-page > main { width: 100%; }
strong { font-family: var(--nf-font-medium); font-weight: 500; -webkit-text-stroke: 0; }
sub { font-size: 0.7em; line-height: 0; }

.aqd-wrap { width: 100%; max-width: calc(var(--aqd-content) + 2 * var(--aqd-gutter)); margin: 0 auto; padding: 0 var(--aqd-gutter); }
.aqd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Copy the wireframe shortens for the phone: .aqd-d shows on desktop and tablet, .aqd-m on the phone */
.aqd-m { display: none; }

/* ---------- Type ---------- */
/* Balanced lines so a centred headline never leaves one word on its last line */
/* Section titles in the residential type (the testimonials title; Danny, 2026-10-28): SF Pro Text Regular 400,
   52 / 38 / 28, line height 1.2, normal tracking. The hero title keeps its own style. */
.aqd-h2 {
  max-width: 36ch; text-wrap: balance;
  font-family: var(--nf-font-sfns-text); font-weight: 400; font-size: var(--aqd-h2); line-height: 1.2; letter-spacing: normal;
}
.aqd-h3 { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-h3); line-height: 1.2; letter-spacing: -0.005em; }
.aqd-h4 { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-h4); line-height: 1.25; }
.aqd-lead { max-width: 760px; text-wrap: balance; font-family: var(--nf-font-regular); font-size: var(--aqd-lead); line-height: 1.2; color: var(--aqd-text-2); }
/* Type scale based on the residential page, shared with index.html (Danny, 2026-10-28), desktop / tablet / phone:
   section titles 52 / 38 / 28 (SF Pro Text Regular, 1.2), intro lines 24 / 24 / 18 at 1.2, body 20 / 20 / 15 at 1.4,
   card titles 28 / 28 / 21, small text 16 / 16 / 13. The FAQ keeps the residential FAQ style. */
main p { font-family: var(--nf-font-regular); font-size: var(--aqd-body); line-height: 1.4; }
.aqd-placeholder { color: var(--nf-grey-9e); }

/* Scroll reveal on the hero and section headlines only: opacity + 16px rise, 600ms ease-out-expo, 40ms stagger */
.aqd-hero [data-reveal], .aqd-h2[data-reveal] {
  --nf-reveal-from-transform: translateY(16px);
  --nf-reveal-duration: 0.6s;
  --nf-reveal-ease: var(--aqd-ease-expo);
}
.aqd-hero__lead[data-reveal] { --nf-reveal-delay: 0.04s; }
.aqd-hero__cta[data-reveal] { --nf-reveal-delay: 0.08s; }
.aqd-hero__media[data-reveal] { --nf-reveal-delay: 0.12s; }

/* ---------- Buttons: the homepage's Tier 1 (green fill) and Tier 2 (black outline), no arrows ---------- */
.nf-tier1, .nf-tier2 {
  /* border-box again: base.css's button reset (all: unset) puts buttons back on content-box */
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  height: var(--aqd-btn-h); padding: var(--aqd-btn-pad); border: 1px solid var(--nf-black); border-radius: 32px;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: var(--aqd-btn); line-height: 1.2;
  color: var(--nf-black); background-color: transparent; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--aqd-ease-out), color 0.2s var(--aqd-ease-out),
              border-color 0.2s var(--aqd-ease-out), transform 0.15s var(--aqd-ease-out);
}
.nf-tier1 { border-color: var(--nf-green); background-color: var(--nf-green); }
.nf-tier2--inverse { border-color: var(--nf-white); color: var(--nf-white); }
.nf-tier1:active, .nf-tier2:active { transform: scale(0.96); transition-duration: 0.1s; }
.nf-tier1:focus-visible, .nf-tier2:focus-visible { outline: 2px solid var(--nf-black); outline-offset: 2px; }
.aqd-section--dark .nf-tier1:focus-visible, .aqd-section--dark .nf-tier2:focus-visible { outline-color: var(--nf-white); }
@media (hover: hover) {
  .nf-tier1:hover { border-color: rgb(165, 207, 118); background-color: rgb(165, 207, 118); }
  .nf-tier2:hover { background-color: var(--nf-grey-f5); }
  .nf-tier2--inverse:hover { background-color: rgba(255, 255, 255, 0.08); }
}
@media (prefers-reduced-motion: reduce) { .nf-tier1:active, .nf-tier2:active { transform: none; opacity: 0.85; } }

.aqd-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aqd-cta__micro { font-size: var(--aqd-small); color: var(--aqd-text-2); }

/* "Optional" tag, on the pilot and the HVAC insight */
.aqd-tag {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-micro); line-height: 1.2; white-space: nowrap;
  color: var(--aqd-text-2); background-color: rgba(0, 0, 0, 0.06);
}

.aqd-link {
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-small); line-height: 1.3; color: var(--nf-black);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: text-decoration-color 0.2s var(--aqd-ease-out);
}
@media (hover: hover) { .aqd-link:hover { text-decoration-color: currentColor; } }
.aqd-link:focus-visible { outline: 2px solid var(--nf-green); outline-offset: 2px; border-radius: 2px; }
.aqd-link--light { color: var(--nf-white); }

/* Flag on charts that still run on placeholder data; remove with the data swap */
.aqd-flag {
  position: absolute; top: 16px; right: 16px; padding: 3px 8px; border: 1px dashed #c9a227; border-radius: 6px;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: 12px; line-height: 1.3; color: #7a5d00; background: #fffbea;
}

/* ==========================================================================
   01 Hero: the homepage hero (nafas-homepage-v14 css/home.css .nf-hero), with a photo of its own in the video's place
   and the proof chips where the homepage carries its logo strip. Below 1060px of height it tightens and the photo
   gives up height (see "fits the first screen" further down), so copy, CTA, photo and chips all show on a 13-inch
   laptop.
   ========================================================================== */
.aqd-hero { padding: 152px 0 64px; background-color: var(--nf-black); color: var(--nf-white); }
.aqd-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.aqd-hero__title {
  max-width: 1100px;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-display); line-height: 1.1; letter-spacing: -0.01em;
}
/* Wider than the homepage's 820 so this longer line still sets on two lines */
.aqd-hero__lead { max-width: 1040px; margin-top: 20px; font-size: var(--aqd-hero-lead); line-height: 1.25; color: var(--nf-white); }
/* CTA and its microcopy on one line, so the hero spends no extra height on it (the phone stacks them) */
.aqd-hero__cta { flex-direction: row; gap: 16px; margin-top: 40px; }
.aqd-hero .aqd-cta__micro { color: var(--aqd-text-2-dark); }
.aqd-hero__media { width: 100%; margin-top: 56px; aspect-ratio: 1240 / 396; border-radius: 20px; overflow: hidden; background-color: #1a1a1a; }
/* 78% down keeps all five people, the desks and the window onto the city inside the wide strip */
/* the home page's old business card photo (Danny, 2026-10-28): the wall dashboard sits a little above the middle */
.aqd-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% calc(11% - 16px); } /* res-healthy-air-one-monthl-hero: whole ceiling unit and the wall AirTest in view; crop starts 16px lower (Danny), close to the How it works business hero framing (Danny, 2026-10-29) */
.aqd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.aqd-hero__chips { margin-top: 40px; }
.aqd-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px;
  font-family: var(--nf-font-regular); font-size: var(--aqd-small); line-height: 1.25; color: var(--nf-white);
}
.aqd-chip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--nf-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Sections
   ========================================================================== */
.aqd-section { padding: var(--aqd-section-pad) 0; background-color: var(--nf-white); }
.aqd-section--grey { background-color: var(--nf-grey-f5); }
.aqd-section--dark { background-color: var(--nf-black); color: var(--nf-white); }
.aqd-section--dark .aqd-lead, .aqd-section--dark .aqd-cta__micro { color: var(--aqd-text-2-dark); }
/* Section heads centred over their content, as the homepage's section titles; the phone sets them left */
.aqd-head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: var(--aqd-title-gap); text-align: center; }
.aqd-section .aqd-cta { margin-top: 48px; }
.aqd-pill {
  flex: none; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px;
  font-size: var(--aqd-small); line-height: 1.25; color: rgba(255, 255, 255, 0.86); white-space: nowrap;
}

/* ---------- Bar charts (02, the 04 worked example, the 07 "after" chart) ----------
   One visual language, drawn to be read at a glance by someone with no data background:
   - a green band for the reference level (the WHO guideline, or "good" in the worked example), labelled where it sits;
   - each indoor bar green up to that level and red past it, so the red part is the excess;
   - the outdoor air in grey, as context; in 07 the "before" value as a faint red bar under the "after" one;
   - every value printed at the end of its row, so nothing is read off an axis.
   The figure carries --max (the scale) and --safe (the band), each row --val (and in 07 --was), as plain numbers in
   one unit, so the bars redraw from data alone. Bars: 22px, 4px rounded data end on a square baseline. */
.aqd-chart {
  --lab: 96px; --valw: 264px; --gap: 20px;
  --zone: rgba(145, 200, 81, 0.2); --zone-ink: var(--aqd-good-ink); --outdoor: #a8a8a8; --ink-2: var(--aqd-text-2); --rule: var(--aqd-line);
  position: relative; margin: 0; padding: 32px 40px 28px; border-radius: 24px; background-color: var(--nf-grey-f5); /* grey card on a white section, like the 04 worked example (Danny, 2026-10-29) */
}
.aqd-chart .aqd-flag { top: 32px; right: 40px; }
.aqd-chart__head { display: flex; flex-direction: column; gap: 4px; padding-right: 150px; }
.aqd-chart__title { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-h4); line-height: 1.25; }
.aqd-chart__sub { font-size: var(--aqd-small); line-height: 1.4; color: var(--ink-2); }
.aqd-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.aqd-chart__legend li { display: flex; align-items: center; gap: 8px; font-family: var(--nf-font-regular); font-size: var(--aqd-micro); line-height: 1.3; color: var(--ink-2); }
.aqd-chart__legend i { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.is-ok { background-color: var(--aqd-good); }
.is-above { background-color: var(--aqd-above); }
.is-outdoor { background-color: var(--outdoor); }
.is-was { background-color: var(--aqd-was); }

/* Rows: label, track, value. The band is drawn once behind every row, from 0 to --safe on the track's scale. */
.aqd-chart__plot { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 24px; padding-top: 30px; }
.aqd-chart__zone {
  position: absolute; top: 30px; bottom: 0; left: calc(var(--lab) + var(--gap));
  width: calc((100% - var(--lab) - var(--valw) - 2 * var(--gap)) * var(--safe) / var(--max));
  border-radius: 4px; background-color: var(--zone);
}
.aqd-chart__zone span {
  position: absolute; bottom: 100%; left: 0; padding-bottom: 8px; white-space: nowrap;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-micro); line-height: 1.3; color: var(--zone-ink);
}
.aqd-bar {
  position: relative; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--valw); gap: var(--gap); align-items: center;
  min-height: 36px; transition: opacity 0.2s var(--aqd-ease-in-out);
}
.aqd-bar__label { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-small); line-height: 1.2; }
.aqd-bar__track { position: relative; height: 22px; }
.aqd-bar__track i {
  --cut: calc(100% * var(--safe) / var(--val));
  position: absolute; top: 0; left: 0; height: 100%; width: calc(100% * var(--val) / var(--max)); border-radius: 0 4px 4px 0;
  /* green to the reference, a 2px gap, red past it */
  background: linear-gradient(90deg, var(--aqd-good) 0 calc(var(--cut) - 1px), transparent 0 calc(var(--cut) + 1px), var(--aqd-above) 0);
}
/* The value bar is the last in its track; a "before" or ghost bar sits under it */
.aqd-bar--ok .aqd-bar__track i:last-child { background: var(--aqd-good); }
.aqd-bar--outdoor .aqd-bar__track i:last-child { background: var(--outdoor); }
.aqd-bar__track .aqd-bar__was { width: calc(100% * var(--was) / var(--max)); background: var(--aqd-was); }
/* Worked example: the outdoor level drawn faintly behind the inside bar */
.aqd-bar__track .aqd-bar__ghost { width: calc(100% * var(--was) / var(--max)); background: none; box-shadow: inset 0 0 0 1px var(--outdoor); opacity: 0.7; }
.aqd-bar__val { font-family: var(--nf-font-regular); font-size: var(--aqd-small); line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.aqd-bar__val b { margin-right: 4px; font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-body); color: var(--nf-black); }
/* PM2.5 unit after every value (Danny, 2026-10-29); value columns (--valw) widened to fit it */
.aqd-bar__unit { margin-right: 6px; font-size: var(--aqd-micro); color: var(--ink-2); }
/* Group heading between the outdoor row and the indoor rows; the worked example's note between its two bars */
.aqd-chart__group {
  position: relative; margin-top: 8px; padding: 12px 0 4px; border-top: 1px solid var(--rule);
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-micro); line-height: 1.3; color: var(--ink-2);
}
.aqd-chart__note { position: relative; padding: 2px 0 2px calc(var(--lab) + var(--gap)); font-size: var(--aqd-micro); line-height: 1.3; color: var(--ink-2); }
.aqd-chart__src { margin-top: 20px; font-size: var(--aqd-micro); line-height: 1.4; color: var(--ink-2); }
/* Hovering a row keeps it and dims the others (data highlight, 200ms; never resizes a bar) */
@media (hover: hover) { .aqd-chart__plot:has(.aqd-bar:hover) .aqd-bar:not(:hover) { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .aqd-bar { transition: none; } }

/* 04 worked example: inside its own card, no chart card of its own */
.aqd-chart--example { --lab: 60px; --valw: 96px; --gap: 12px; padding: 0; background: none; }
.aqd-chart--example .aqd-chart__head { padding-right: 0; }
.aqd-chart--example .aqd-chart__legend { margin-top: 12px; }
.aqd-chart--example .aqd-chart__plot { margin-top: 20px; }

/* 07 "after" chart, on the dark case card */
.aqd-chart--dark {
  --lab: 80px; --valw: 180px;
  --zone: rgba(145, 200, 81, 0.18); --zone-ink: var(--aqd-good); --outdoor: #5e5e5e; --ink-2: var(--aqd-text-2-dark); --rule: var(--aqd-line-dark);
  padding: 40px 48px 44px; border-top: 1px solid var(--aqd-line-dark); border-radius: 0; background: none; color: var(--nf-white);
}
.aqd-chart--dark .aqd-flag { top: 40px; right: 48px; }
.aqd-chart--dark .aqd-bar__val b { color: var(--nf-white); }
/* A 2px ring of the card's black between the "after" bar and the "before" bar under it */
.aqd-chart--dark .aqd-bar__was + i { box-shadow: 2px 0 0 var(--nf-black); }

/* ==========================================================================
   03 How the Assessment Works
   ========================================================================== */
.aqd-how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.aqd-steps { display: flex; flex-direction: column; }
.aqd-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding-bottom: 28px; }
.aqd-step:last-child { padding-bottom: 0; }
/* Connector between the step numbers */
.aqd-step:not(:last-child)::before { content: ""; position: absolute; top: 48px; bottom: 8px; left: 20px; border-left: 1px solid var(--aqd-line-dark); }
.aqd-step__num {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-small);
}
.aqd-step__body { padding-top: 8px; }
.aqd-step__body p { margin-top: 6px; color: var(--aqd-text-2-dark); }
.aqd-step__body a { color: var(--nf-white); text-decoration: underline; text-underline-offset: 3px; }
.aqd-step--open .aqd-step__num { border-color: var(--nf-green); background-color: var(--nf-green); color: var(--nf-black); }
.aqd-step--open .aqd-step__body { padding: 20px; border: 1px solid var(--aqd-stroke-dark); border-radius: 16px; background-color: var(--aqd-card-dark); }
.aqd-params { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; }
.aqd-params div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.aqd-params dt { flex: none; width: 96px; font-family: var(--nf-font-regular); font-size: var(--aqd-micro); color: var(--aqd-text-2-dark); }
.aqd-params dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; flex: 1 1 0; min-width: 0; }   /* chips wrap in their own column, so a long row (Gases, 7 chips; Danny 2026-10-30) stays beside its label */
.aqd-params div:has(dd > :nth-child(5)) { align-items: baseline; }   /* a wrapped row: label on the first chip line */
.aqd-params dd span {
  padding: 4px 10px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.08);
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-micro); line-height: 1.3;
}
.aqd-how__media { display: flex; flex-direction: column; gap: 16px; }
.aqd-how__render { margin: 0; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background-color: #1a1a1a; }
.aqd-how__render img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Asset slot for the AQD 3D cutaway: the brief in place of the render until it exists */
.aqd-slot { display: grid; place-items: center; padding: 32px; border: 1px dashed rgba(255, 255, 255, 0.24); background-color: var(--aqd-card-dark); text-align: center; }
.aqd-slot figcaption { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.aqd-slot strong { font-size: var(--aqd-h4); line-height: 1.25; }
.aqd-slot span { font-family: var(--nf-font-regular); font-size: var(--aqd-small); line-height: 1.4; color: var(--aqd-text-2-dark); }
.aqd-dash { margin: 0; padding: 16px; border: 1px solid var(--aqd-stroke-dark); border-radius: 20px; background-color: var(--aqd-card-dark); }
.aqd-dash__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-small); }
.aqd-dash__sub { font-family: var(--nf-font-regular); font-weight: 400; color: var(--aqd-text-2-dark); }
/* Live dot: ambient pulse, 2400ms ease-in-out (animation guideline "live data pulse"); solid when motion is reduced */
.aqd-dash__live { width: 8px; height: 8px; border-radius: 50%; background-color: var(--nf-green); animation: aqd-live 2.4s var(--aqd-ease-in-out) infinite; }
@keyframes aqd-live { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .aqd-dash__live { animation: none; } }
/* Cropped to the screen of the dashboard shot so the right column stays close to the steps' height */
.aqd-dash img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 10%; border-radius: 12px; }
/* the tablet screen (Danny, 2026-10-28) is a cut-out PNG: shown whole, no crop, no rounded corners */
.aqd-dash img.aqd-dash__tablet { aspect-ratio: auto; object-fit: contain; border-radius: 0; width: 100%; margin: 4px 0 0; display: block; }

/* ==========================================================================
   04 What Nafas Looks For
   ========================================================================== */
.aqd-insights { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: stretch; }
/* Title, chart and result spread over the card, which runs the height of the insight list beside it */
.aqd-example { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 24px; background-color: var(--nf-grey-f5); }
.aqd-example__num { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-stat); line-height: 1; letter-spacing: -0.02em; }
.aqd-example__text { margin-top: 12px; color: var(--aqd-text-2); }
.aqd-receive .aqd-h3 { margin-bottom: 16px; }
.aqd-receive__intro { margin-bottom: 16px; color: var(--aqd-text-2); }

/* ---------- Accordion (04 insights, 08 FAQ): height eases open on the grid-rows trick, 300ms ease-out-cubic ---------- */
.aqd-acc { border-top: 1px solid var(--aqd-line); }
.aqd-acc__item { border-bottom: 1px solid var(--aqd-line); }
.aqd-acc__h { margin: 0; }
.aqd-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; box-sizing: border-box; padding: 20px 0;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-h4); line-height: 1.3; color: var(--nf-black); text-align: left; cursor: pointer;
}
.aqd-acc__btn > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.aqd-acc__btn:focus-visible { outline: 2px solid var(--nf-green); outline-offset: 2px; border-radius: 4px; }
.aqd-acc__icon { position: relative; flex: none; width: 20px; height: 20px; }
.aqd-acc__icon::before, .aqd-acc__icon::after { content: ""; position: absolute; top: 9px; left: 2px; width: 16px; height: 2px; border-radius: 1px; background-color: currentColor; }
.aqd-acc__icon::after { transform: rotate(90deg); transition: transform 0.2s var(--aqd-ease-out); }
.is-open > .aqd-acc__h .aqd-acc__icon::after { transform: rotate(0deg); }
.aqd-acc__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s var(--aqd-ease-out), visibility 0s linear 0.3s; }
.aqd-acc__panel > div { min-height: 0; overflow: hidden; }
.aqd-acc__panel p { max-width: 680px; padding-bottom: 22px; color: var(--aqd-text-2); }
.is-open > .aqd-acc__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s var(--aqd-ease-out), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .aqd-acc__panel, .is-open > .aqd-acc__panel, .aqd-acc__icon::after { transition: none; } }
.aqd-acc__btn .aqd-tag { font-size: 13px; }

/* ==========================================================================
   05 Why Start Here (+ 9b EcoFlow pilot)
   ========================================================================== */
.aqd-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--aqd-grid-gap); }
.aqd-pillars li { padding-top: 20px; border-top: 2px solid var(--nf-black); }
.aqd-pillars p { margin-top: 8px; color: var(--aqd-text-2); }
.aqd-pilot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  margin-top: 48px; padding: 32px; border-radius: 24px; background-color: var(--nf-white);
}
.aqd-pilot .aqd-h3 { margin-top: 16px; }
.aqd-pilot p { margin-top: 12px; color: var(--aqd-text-2); }
.aqd-pilot__media { margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background-color: var(--nf-grey-f5); }
.aqd-pilot__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   06 Who It Is For
   ========================================================================== */
.aqd-sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--aqd-grid-gap); }
.aqd-sectors__ctrls { display: none; }
.aqd-sector { display: flex; flex-direction: column; }
.aqd-sector__img { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background-color: var(--nf-grey-f5); }
.aqd-sector__img img { width: 100%; height: 100%; object-fit: cover; }
.aqd-sector__img--empty { display: grid; place-items: center; border: 1px dashed #cfcfcf; background-color: #fafafa; }
.aqd-sector__img--empty span { font-family: var(--nf-font-regular); font-size: var(--aqd-micro); color: var(--nf-grey-9e); }
.aqd-sector .aqd-h4 { margin-top: 20px; }
.aqd-sector p { margin-top: 8px; color: var(--aqd-text-2); }
.aqd-sector p strong { color: var(--nf-black); }
.aqd-sector .aqd-sector__src { margin-top: 6px; font-size: var(--aqd-micro); color: var(--nf-grey-9e); }
.aqd-sector .aqd-link { align-self: flex-start; margin-top: auto; padding-top: 16px; }
.aqd-note { margin-top: 48px; font-size: var(--aqd-small); color: var(--aqd-text-2); }

/* ==========================================================================
   07 Proof and Case Study
   ========================================================================== */
/* Client logos: a marquee like the home hero's (leftward at 40px/s, linear, edges faded over 12.5%, pauses on hover) */
.aqd-marquee {
  overflow: hidden; margin-bottom: 48px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
.aqd-track { display: flex; width: max-content; animation: aqd-marquee var(--aqd-marquee-dur, 40s) linear infinite; }
@keyframes aqd-marquee { to { transform: translateX(-50%); } }
@media (hover: hover) { .aqd-marquee:hover .aqd-track { animation-play-state: paused; } }
/* each list carries the gap after its last logo, so -50% is exactly one list and the loop has no seam */
.aqd-logos { flex: none; display: flex; align-items: center; gap: 96px; padding-right: 96px; }
@media (prefers-reduced-motion: reduce) {
  .aqd-marquee { -webkit-mask-image: none; mask-image: none; }
  .aqd-track { width: auto; animation: none; }
  .aqd-logos { flex: 1 1 auto; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; padding-right: 0; }
  .aqd-logos[aria-hidden="true"], .aqd-logos li[aria-hidden="true"] { display: none; }
}
.aqd-logos li { display: flex; align-items: center; }
/* Logos drawn grey on the light section; heights per mark so wordmarks and stacked marks read at one size */
.aqd-logo { width: auto; height: 28px; filter: brightness(0); opacity: 0.5; }
.aqd-logo--qdb { height: 40px; }
.aqd-logo--qf { height: 46px; }
.aqd-logo--noc { height: 36px; }
.aqd-logo--pwc { height: 36px; }
.aqd-logo--wpp { height: 22px; }
.aqd-logo--mazars { height: 20px; }

.aqd-case { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background-color: var(--nf-black); color: var(--nf-white); }
.aqd-case__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* The photo fills the row the copy sets (absolutely placed, so the portrait shot cannot stretch the card) */
.aqd-case__img { position: relative; margin: 0; min-height: 360px; background-color: #1a1a1a; }
.aqd-case__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.aqd-case__body { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 48px; }
.aqd-case__title { max-width: 18ch; font-size: 36px; }
.aqd-case__stats { display: flex; flex-wrap: wrap; gap: 24px 56px; margin: 0; }
.aqd-case__stats div { display: flex; flex-direction: column-reverse; gap: 6px; }
.aqd-case__stats dt { font-family: var(--nf-font-regular); font-size: var(--aqd-small); color: var(--aqd-text-2-dark); }
.aqd-case__stats dd { margin: 0; font-family: var(--nf-font-medium); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.015em; white-space: nowrap; }
.aqd-case__stats dd span { color: var(--aqd-text-2-dark); }
.aqd-case .aqd-link { align-self: flex-start; }

/* ==========================================================================
   08 FAQ
   ========================================================================== */
.aqd-faq .aqd-acc { max-width: 960px; margin: 0 auto; }

/* ==========================================================================
   09 Final Conversion: two-step form
   ========================================================================== */
.aqd-request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.aqd-request__copy { display: flex; flex-direction: column; gap: 16px; }
.aqd-form { padding: 40px; border: 1px solid var(--aqd-stroke-dark); border-radius: 24px; background-color: var(--aqd-card-dark); }
.aqd-form__progress { display: flex; gap: 6px; margin-bottom: 24px; }
.aqd-form__progress span { flex: 1; height: 4px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.14); transition: background-color 0.3s var(--aqd-ease-in-out); }
.aqd-form__progress span.is-on { background-color: var(--nf-green); }
.aqd-form__count { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-micro); color: var(--aqd-text-2-dark); }
.aqd-form .aqd-h3 { margin: 6px 0 24px; outline: none; }
.aqd-form__step:not([hidden]) { animation: aqd-step-in 0.3s var(--aqd-ease-out); }
@keyframes aqd-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aqd-form__step:not([hidden]) { animation-name: aqd-fade-in; } }
@keyframes aqd-fade-in { from { opacity: 0; } to { opacity: 1; } }
.aqd-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.aqd-field label { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--aqd-micro); color: rgba(255, 255, 255, 0.86); }
.aqd-field__opt { margin-left: 6px; font-family: var(--nf-font-regular); font-weight: 400; color: rgba(255, 255, 255, 0.45); }
.aqd-field input, .aqd-field select, .aqd-field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px;
  font-family: var(--nf-font-regular); font-size: 16px; line-height: 1.4; color: var(--nf-white); background-color: var(--nf-black);
  transition: border-color 0.2s var(--aqd-ease-out);
}
.aqd-field textarea { resize: vertical; }
.aqd-field select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.aqd-field select:invalid { color: rgba(255, 255, 255, 0.45); }
.aqd-field option { color: var(--nf-black); }
.aqd-field input:focus, .aqd-field select:focus, .aqd-field textarea:focus { outline: none; border-color: var(--nf-green); }
.aqd-field [aria-invalid="true"] { border-color: #ff7a6e; }
.aqd-field__err { font-family: var(--nf-font-regular); font-size: var(--aqd-micro); line-height: 1.3; color: #ff9a90; }
.aqd-form__submit { width: 100%; margin-top: 8px; }
.aqd-form__actions { display: flex; gap: 12px; margin-top: 8px; }
.aqd-form__actions .aqd-form__submit { flex: 1; width: auto; margin-top: 0; }
.aqd-form__done p { color: var(--aqd-text-2-dark); }
/* Honeypot (bots fill it; Make drops those) and the WhatsApp button on the thank-you step */
.aqd-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }   /* padding/border 0: Chrome and Safari give inputs different default padding (8x6 vs 16x10) */
.aqd-form__done p + p { margin-top: 12px; }
.aqd-form__wa { margin-top: 24px; }
.aqd-form__submit[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   Tablet (810 to 1439.98)
   ========================================================================== */
@media (max-width: 1439.98px) {
  :root {
    --aqd-display: 60px; --aqd-hero-lead: 24px; --aqd-h2: 38px; --aqd-h3: 28px; --aqd-h4: 20px; --aqd-lead: 24px; --aqd-body: 20px; --aqd-small: 16px;
    --aqd-stat: 60px;
    --aqd-gutter: 40px; --aqd-section-pad: 64px; --aqd-title-gap: 40px;
  }
  .aqd-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .aqd-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aqd-hero { padding-top: 147px; }
  .aqd-case__body { padding: 40px; }
  .aqd-case__title { font-size: 30px; }
  .aqd-case__stats dd { font-size: 40px; }
}

/* The two-column splits stack below 1024 */
@media (max-width: 1023.98px) {
  .aqd-how, .aqd-insights, .aqd-request { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .aqd-case__top { grid-template-columns: minmax(0, 1fr); }
  .aqd-case__img { aspect-ratio: 16 / 9; min-height: 0; }
  .aqd-chart--dark { padding: 32px 40px 36px; }
  .aqd-chart--dark .aqd-flag { top: 32px; right: 40px; }
  .aqd-pilot { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Desktop and tablet: the hero fits the first screen (as the homepage)
   A 13-inch laptop leaves the page about 800 to 930px of height. js/aqd.js sets --aqd-hero-fit to everything above the
   photo plus the chips under it (and a 24px margin), so the photo gives up height, down to 280px, before the chips
   drop below the fold. Below 1060px of height the vertical rhythm also tightens. Taller screens are unchanged.
   ========================================================================== */
@media (min-width: 810px) {
  /* width 100%: with width auto, the aspect ratio would carry the height cap over to the width and narrow the photo */
  .aqd-hero__media { width: 100%; max-height: max(280px, 100svh - var(--aqd-hero-fit, 0px)); }
}
@media (min-width: 810px) and (max-height: 1059.98px) {
  /* 16px under the 80px nav; with the title's own leading the cap sits ~31px below the nav line */
  .aqd-hero { padding-top: 96px; padding-bottom: 48px; }
  .aqd-hero__lead { margin-top: 16px; }
  .aqd-hero__cta { margin-top: 28px; }
  .aqd-hero__media { margin-top: 32px; }
  .aqd-hero__chips { margin-top: 24px; }
}

/* ==========================================================================
   Phone (<= 809.98): one column in reading order; dark sections stay dark
   ========================================================================== */
@media (max-width: 809.98px) {
  :root {
    --aqd-display: 40px; --aqd-hero-lead: 20px; --aqd-h2: 28px; --aqd-h3: 21px; --aqd-h4: 18px; --aqd-lead: 18px; --aqd-body: 15px; --aqd-small: 13px; --aqd-micro: 13px;
    --aqd-stat: 52px; --aqd-btn: 15px; --aqd-btn-h: 35px; --aqd-btn-pad: 0 16px;
    --aqd-gutter: 24px; --aqd-section-pad: 48px; --aqd-title-gap: 28px;
  }
  .aqd-d { display: none !important; }
  .aqd-m { display: revert; }


  /* Hero: headline, line, chips, image, CTA (the phone frame's order) */
  .aqd-hero { padding: 107px 0 48px; }
  .aqd-hero__inner { align-items: stretch; text-align: left; }
  .aqd-hero__lead { margin-top: 16px; }
  .aqd-hero__cta { flex-direction: column; gap: 10px; margin-top: 24px; }
  .aqd-hero__media { margin-top: 20px; aspect-ratio: 345 / 220; border-radius: 16px; }
  .aqd-hero__chips { justify-content: flex-start; gap: 8px; margin-top: 24px; }
  .aqd-chip { padding: 7px 12px; }
  .aqd-cta { align-items: stretch; text-align: center; }
  /* Phone: "Request assessment" matches the residential "Become a Member" button (100vw - 112px, centred) */
  .aqd-cta .nf-tier1 { align-self: center; width: calc(100vw - 112px); max-width: 100%; }
  .aqd-section .aqd-cta { margin-top: 32px; }

  .aqd-head { align-items: flex-start; text-align: left; }

  /* Charts: the multiples shorten to "7×" and the flag moves into the flow above the title */
  .aqd-chart { --lab: 52px; --valw: 96px; --gap: 10px; padding: 20px; border-radius: 20px; }
  .aqd-chart .aqd-flag { position: static; display: inline-block; margin-bottom: 12px; }
  .aqd-chart__head { padding-right: 0; }
  .aqd-chart__legend { gap: 6px 14px; }
  .aqd-chart--example { --lab: 52px; --valw: 84px; padding: 0; }
  .aqd-chart--dark { --lab: 52px; --valw: 96px; padding: 24px 20px; }
  .aqd-flag { top: 14px; right: 14px; }

  .aqd-step--open .aqd-step__body { padding: 16px; }
  /* Phone: steps start on the same edge as the title and chip (drop the browser's default <ol> indent) */
  .aqd-steps { padding-left: 0; }
  .aqd-params dt { width: 100%; }
  .aqd-how__render, .aqd-dash { border-radius: 16px; }

  .aqd-example { padding: 20px; border-radius: 20px; }

  .aqd-pillars { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .aqd-pilot { gap: 24px; margin-top: 32px; padding: 20px; border-radius: 20px; }

  /* one swipe row, one card at a time (Danny, 2026-10-29); the row runs to the screen edges, cards snap to the gutter */
  .aqd-sectors {
    display: flex; gap: 16px; margin: 0 calc(-1 * var(--aqd-gutter)); padding: 0 var(--aqd-gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--aqd-gutter); overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .aqd-sectors::-webkit-scrollbar { display: none; }
  .aqd-sector { flex: 0 0 100%; scroll-snap-align: start; }
  /* the /business industries buttons: grey back (hidden on the first card), black next (hidden on the last) */
  .aqd-sectors__ctrls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
  .aqd-sectors__btn {
    display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0;
    border-radius: 99px; cursor: pointer; transition: opacity 0.2s;
  }
  .aqd-sectors__btn svg { width: 24px; height: 24px; }
  .aqd-sectors__btn--prev { background: rgb(221, 221, 221); color: var(--nf-black); }
  .aqd-sectors__btn--prev svg { transform: scaleX(-1); }
  .aqd-sectors__btn--next { background: var(--nf-black); color: var(--nf-white); }
  .aqd-sectors__btn[disabled] { opacity: 0; pointer-events: none; }
  .aqd-sectors__btn:focus-visible { outline: 2px solid var(--nf-green); outline-offset: 3px; }
  .aqd-sector__img { aspect-ratio: 16 / 10; }
  .aqd-note { margin-top: 32px; }

  .aqd-marquee { margin-bottom: 32px; }
  .aqd-logos { gap: 56px; padding-right: 56px; }
  .aqd-logo { transform-origin: left center; scale: 0.8; }
  .aqd-case { border-radius: 20px; }
  .aqd-case__body { gap: 24px; padding: 24px 20px; }
  .aqd-case__title { font-size: 24px; }
  .aqd-case__stats { gap: 20px 32px; }
  .aqd-case__stats dd { font-size: 34px; }

  .aqd-form { padding: 24px 20px; border-radius: 20px; }
  .aqd-form__actions { flex-direction: column-reverse; }
}

/* ==========================================================================
   FAQ in the residential FAQ's style (Danny, 2026-10-28; pages/residential/css/45-faq.css): grey section, title then
   the list at 80% width, no rule above the first question, a dark 0.8px rule under each item, questions SF Pro Display
   Medium 24 / 30, answers SF Pro Display Regular 23 / 1.25 in black, 16px plus/minus. Phone: 24px Medium centred title,
   17px questions and 16px answers (1.4, +0.04em), 1px black rules, 12px icon. The first question starts open.
   ========================================================================== */
.aqd-section[data-section="faq"] { padding: 80px 60px; background-color: var(--nf-grey-f5); }
[data-section="faq"] .aqd-wrap { max-width: none; padding: 0; }
[data-section="faq"] .aqd-head { margin-bottom: 20px; }
[data-section="faq"] .aqd-h2 { max-width: 80%; font-size: 48px; line-height: 1.2; }
.aqd-faq .aqd-acc { max-width: 80%; border-top: 0; }
.aqd-acc--faq .aqd-acc__item { border-bottom: 0.8px solid rgb(34, 34, 34); }
.aqd-acc--faq .aqd-acc__item:last-child { border-bottom: 0; } /* no rule under the last question (Danny, 2026-10-28) */
.aqd-acc--faq .aqd-acc__btn { gap: 24px; padding: 20px 0; font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif; font-size: 24px; line-height: 1.25; letter-spacing: normal; }
.aqd-acc--faq .aqd-acc__icon { width: 16px; height: 16px; }
.aqd-acc--faq .aqd-acc__icon::before, .aqd-acc--faq .aqd-acc__icon::after { top: 7px; left: 0; width: 16px; height: 2px; border-radius: 10px; background-color: var(--nf-black); }
.aqd-acc--faq .aqd-acc__panel p {
  max-width: none; padding: 0 20px 20px 0; color: var(--nf-black);
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-size: 23px; line-height: 1.25; letter-spacing: normal;
}
@media (max-width: 809.98px) {
  .aqd-section[data-section="faq"] { padding: 56px 16px; }
  [data-section="faq"] .aqd-head { align-items: center; text-align: center; }
  [data-section="faq"] .aqd-h2 { max-width: 100%; font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif; font-weight: 500; font-size: 24px; line-height: 1.1; }
  .aqd-faq .aqd-acc { max-width: 100%; }
  .aqd-acc--faq .aqd-acc__item { border-bottom: 1px solid var(--nf-black); }
  .aqd-acc--faq .aqd-acc__item:last-child { border-bottom: 0; }
  .aqd-acc--faq .aqd-acc__btn { font-size: 17px; line-height: 1.4; letter-spacing: 0.04em; }
  .aqd-acc--faq .aqd-acc__icon { width: 12px; height: 12px; }
  .aqd-acc--faq .aqd-acc__icon::before, .aqd-acc--faq .aqd-acc__icon::after { top: 5px; width: 12px; }
  .aqd-acc--faq .aqd-acc__panel p { padding: 0 0 20px 0; font-size: 16px; line-height: 1.4; letter-spacing: 0.04em; }
}