/* Homepage v14 (Danny, 2026-10-28): css/home.css from ~/Downloads/nafas-homepage-v14, unchanged except this note.
   One stylesheet for partials 10-hero, 20-system and 30-doors (its tablet and phone blocks cover all three), loaded last
   as the home page.css. */
/* ==========================================================================
   Nafas homepage (nafas.com root), wireframe v14: F1 hero, F2 system, F3 doors.
   Nav and footer are Danny's components (components/), unchanged.
   Layout and copy from the wireframe. Type sizes from live nafas.com/how-it-works (the wireframe's locked scale read
   too small next to the live pages); fonts, colours and radii from live nafas.com and shop.nafas.com.
   Breakpoints as base.css: desktop >= 1440, tablet 810 to 1439.98, phone <= 809.98.
   ========================================================================== */

:root {
  /* Type scale measured on live nafas.com/how-it-works at 1440 (section 64, step title 42, lead 28, body 20,
     eyebrow 20, button 22). Display follows the live residential hero (72). Headlines Medium 500, as live. */
  --nf-home-display: 72px;
  --nf-home-section: 64px;
  --nf-home-lead: 28px;
  --nf-home-body: 20px;
  --nf-home-caption: 20px;
  --nf-home-label: 20px;
  --nf-home-label-strip: 16px;
  --nf-home-btn: 20px;
  --nf-home-btn-h: 54px;
  --nf-home-btn-pad: 14px 28px;
  --nf-home-headline-font: var(--nf-font-medium);
  --nf-home-headline-weight: 500;
  /* live 64px headings carry -0.64px */
  --nf-home-tracking: -0.01em;

  --nf-home-content: 1240px;
  --nf-home-gutter: 100px;
  /* The background change already marks each section, so the padding only needs to clear the title gap */
  --nf-home-section-pad: 80px;
  /* Section title to its content: about half the section padding, so the title reads as part of its section */
  --nf-home-title-gap: 64px;
  /* One gutter between images and between cards */
  --nf-home-grid-gap: 24px;
  --nf-home-logo-gap: 30px;
  --nf-home-line: #e5e5e5;
  --nf-home-text-2: var(--nf-grey-61);

  /* Motion (Nafas animation guideline): hover short 200ms ease-out-cubic, reveal medium 600ms ease-out-expo */
  --nf-home-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --nf-home-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shared: section column, label, Tier 1 and Tier 2 buttons */
.nf-home-wrap { width: 100%; max-width: calc(var(--nf-home-content) + 2 * var(--nf-home-gutter)); margin: 0 auto; padding: 0 var(--nf-home-gutter); }

/* Eyebrow, as the live "STEP 1" / "CHOOSE YOUR TERM" labels: Medium, uppercase, no extra tracking */
.nf-label {
  font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--nf-home-label); line-height: 1.2;
  text-transform: uppercase; color: var(--nf-home-text-2);
}

.nf-section-title {
  font-family: var(--nf-home-headline-font); font-weight: var(--nf-home-headline-weight);
  font-size: var(--nf-home-section); line-height: 1.1; letter-spacing: var(--nf-home-tracking);
  color: var(--nf-black); text-align: center;
}

/* Live Framer j74DL pills, on the home button scale so both tiers are the same size.
   Tier 1: green filled ("Tier 1 - Eng"), for the two hero doors. Tier 2: black outline ("Tier 2 Black - Eng"), for
   the door cards. Neither carries an arrow. */
.nf-tier1, .nf-tier2 {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--nf-home-btn-h); padding: var(--nf-home-btn-pad); border: 1px solid var(--nf-black); border-radius: 999px;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: var(--nf-home-btn); line-height: 1.2;
  color: var(--nf-black); background-color: transparent; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--nf-home-ease-out), color 0.2s var(--nf-home-ease-out),
              border-color 0.2s var(--nf-home-ease-out), transform 0.15s var(--nf-home-ease-out);
}
.nf-tier1 { border-color: var(--nf-green); background-color: var(--nf-green); }
.nf-tier1:active, .nf-tier2:active { transform: scale(0.96); transition-duration: 0.1s; }
/* Tier 1 sits on the black hero, where a green ring would merge with the button */
.nf-tier1:focus-visible { outline: 2px solid var(--nf-white); outline-offset: 2px; }
.nf-tier2:focus-visible { outline: 2px solid var(--nf-green); outline-offset: 2px; }
/* Hover as live: Tier 1 lightens to rgb(165, 207, 118), Tier 2 fills #f5f5f5 with the label staying black */
@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); }
}
@media (prefers-reduced-motion: reduce) { .nf-tier1:active, .nf-tier2:active { transform: none; opacity: 0.85; } }

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

/* ==========================================================================
   F1 Hero and credibility strip
   ========================================================================== */
.nf-hero { background-color: var(--nf-black); color: var(--nf-white); padding: 152px 0 64px; }
.nf-hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-hero__title {
  max-width: 1000px;
  font-family: var(--nf-home-headline-font); font-weight: var(--nf-home-headline-weight);
  font-size: var(--nf-home-display); line-height: 1.1; letter-spacing: var(--nf-home-tracking);
}
.nf-hero__lead {
  max-width: 820px; margin-top: 20px;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: var(--nf-home-lead); line-height: 1.25;
  color: var(--nf-white);
}
.nf-hero__doors { display: flex; gap: 12px; margin-top: 40px; }

/* Column width; 20% taller than the wireframe's 1240 / 330 (Nathan), so 1240 / 396 */
.nf-hero__media { margin-top: 56px; aspect-ratio: 1240 / 396; border-radius: 20px; overflow: hidden; background-color: #1a1a1a; }
/* 20% from the top keeps the whole Doha skyline and the sea in the strip */
.nf-hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.nf-hero__strip {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  margin-top: 40px;
}
.nf-hero__group { display: flex; align-items: center; gap: 32px; }
.nf-hero__group .nf-label { flex: none; font-size: var(--nf-home-label-strip); color: var(--nf-grey-9e); }
.nf-hero__logos { display: flex; align-items: center; gap: var(--nf-home-logo-gap); }
.nf-hero__logos li { display: flex; align-items: center; justify-content: center; }

/* Trusted by marquee, as the live home ticker: leftward at 40px/s, linear, edges faded over 12.5%. js/home.js sets
   the duration from the list width (40s until it runs). Pauses under the pointer so a name can be read. */
.nf-hero__group--trusted { flex: 1 1 auto; min-width: 0; }
/* Held at its own width: next to the marquee's long track it would otherwise be squeezed and its logos overflow */
.nf-hero__group--press { flex: none; }
.nf-hero__marquee {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -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%);
}
.nf-hero__track { display: flex; width: max-content; animation: nf-hero-marquee var(--nf-hero-marquee-dur, 40s) linear infinite; }
/* Each list carries the gap after its last logo, so -50% is exactly one list and the loop has no seam */
.nf-hero__track .nf-hero__logos { flex: none; padding-right: var(--nf-home-logo-gap); }
@keyframes nf-hero-marquee { to { transform: translateX(-50%); } }
@media (hover: hover) { .nf-hero__marquee:hover .nf-hero__track { animation-play-state: paused; } }
/* Reduced motion: no run; the copy is dropped and every logo shows, wrapped */
@media (prefers-reduced-motion: reduce) {
  .nf-hero__marquee { -webkit-mask-image: none; mask-image: none; }
  .nf-hero__track { width: auto; animation: none; }
  .nf-hero__track .nf-hero__logos { flex: 1 1 auto; flex-wrap: wrap; row-gap: 20px; padding-right: 0; }
  .nf-hero__track .nf-hero__logos[aria-hidden="true"] { display: none; }
}

/* Logos drawn white on the black hero; heights set per mark so wordmarks and stacked marks read at one size */
.nf-hero__logo { width: auto; height: 26px; max-width: 120px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.72; }
.nf-hero__logo--qdb { height: 38px; }
.nf-hero__logo--qf { height: 44px; }
.nf-hero__logo--sis, .nf-hero__logo--embassy { height: 40px; }
.nf-hero__logo--bni, .nf-hero__logo--dbs, .nf-hero__logo--hei { height: 22px; }
.nf-hero__logo--pwc { height: 34px; }
.nf-hero__logo--wpp { height: 20px; }
.nf-hero__logo--mazars { height: 18px; }
.nf-hero__logo--noc { height: 32px; }
.nf-hero__logo--bsj { height: 28px; }
.nf-hero__logo--nzs { height: 26px; }
.nf-hero__logo--fortune { height: 20px; }
.nf-hero__logo--nikkei { height: 16px; }
.nf-hero__logo--natgeo { height: 26px; }

/* ==========================================================================
   F2 How the system works together
   ========================================================================== */
.nf-system { background-color: var(--nf-white); padding: var(--nf-home-section-pad) 0; }
.nf-system__title { margin-bottom: var(--nf-home-title-gap); }

/* ABA rhythm: Sensing and Intelligence label-left (340 + 840), Filtration full width with the label above */
.nf-system__panel { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 60px; row-gap: 32px; padding: 48px 0; }
.nf-system__panel + .nf-system__panel { border-top: 1px solid var(--nf-home-line); }
/* The title gap alone sets the space above the first panel */
.nf-system__panel:first-of-type { padding-top: 0; }
.nf-system__panel--wide { grid-template-columns: minmax(0, 1fr); }
.nf-system__text { display: flex; flex-direction: column; gap: 12px; }
.nf-system__panel--wide .nf-system__text { max-width: 760px; }
.nf-system__desc { font-family: var(--nf-font-regular); font-weight: 400; font-size: var(--nf-home-body); line-height: 1.4; color: var(--nf-black); }

.nf-system__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nf-home-grid-gap); }
.nf-system__media--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nf-system__fig { display: flex; flex-direction: column; gap: 12px; }
.nf-system__img { width: 100%; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background-color: var(--nf-grey-f5); }
.nf-system__img img { width: 100%; height: 100%; object-fit: cover; }
.nf-system__cap { font-family: var(--nf-font-medium); font-weight: 500; font-size: var(--nf-home-caption); line-height: 1.25; color: var(--nf-home-text-2); }
.nf-system__cap-short { display: none; }

/* Maintenance, carried as one line under the three panels; full-width rule like the panel dividers, text left, and
   the same spacing either side of the rule (the last panel's 48px bottom padding above, 48px below) */
.nf-system__service {
  padding-top: 48px; border-top: 1px solid var(--nf-home-line);
  font-family: var(--nf-font-regular); font-weight: 400; font-size: var(--nf-home-body); line-height: 1.4;
  color: var(--nf-black); text-align: left;
}

/* ==========================================================================
   F3 The two doors
   ========================================================================== */
.nf-doors { background-color: var(--nf-grey-f5); padding: var(--nf-home-section-pad) 0; }
.nf-doors__title { margin-bottom: var(--nf-home-title-gap); }
.nf-doors__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nf-home-grid-gap); }
.nf-doors__card { display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background-color: var(--nf-white); }
.nf-doors__img { aspect-ratio: 5 / 2; border-radius: 16px; overflow: hidden; background-color: var(--nf-grey-f5); }
.nf-doors__img img { width: 100%; height: 100%; object-fit: cover; }
.nf-doors__card .nf-label { margin-top: 32px; }
.nf-doors__text {
  margin-top: 12px;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: var(--nf-home-lead); line-height: 1.25;
  color: var(--nf-black);
}
/* Quote slot: one attributed line per card. Homes carries a member quote, Business the GIZ result until a business
   quote clears the gate (see the comments in index.html). The two boxes grow to the same height with the attribution
   on the bottom line, and lines are balanced so a last word never sits alone. */
.nf-doors__quote {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; flex: 1 0 auto;
  margin: 24px 0 0; padding: 16px 20px; border-radius: 12px; background-color: var(--nf-grey-f5);
}
.nf-doors__quote[hidden] { display: none; }
.nf-doors__quote p { font-family: var(--nf-font-regular); font-size: var(--nf-home-body); line-height: 1.4; color: var(--nf-black); text-wrap: balance; }
.nf-doors__quote .nf-doors__cite { font-family: var(--nf-font-medium); font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--nf-home-text-2); }
/* The result's figure, in Medium so the line reads as data rather than as a quote */
.nf-doors__stat { font-family: var(--nf-font-medium); font-weight: 500; }
/* Buttons at their own width (as live Tier 2) and left aligned; pinned to the card bottom so both line up */
.nf-doors__cta { padding-top: 40px; margin-top: auto; }
/* Desktop and tablet: each card is a subgrid of the pair's five rows, so image, label, text, quote box and button sit
   level across both cards whatever their line counts (the quote boxes take the taller one's height) */
@media (min-width: 810px) {
  .nf-doors__cards { row-gap: 0; }
  .nf-doors__card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .nf-doors__cta { grid-row: 5; }
}

/* ==========================================================================
   Tablet (810 to 1439.98): fluid, same structure
   ========================================================================== */
@media (max-width: 1439.98px) {
  :root {
    --nf-home-display: 60px; --nf-home-section: 52px; --nf-home-lead: 24px; --nf-home-body: 18px; --nf-home-caption: 18px;
    --nf-home-label: 18px; --nf-home-btn: 18px; --nf-home-btn-h: 50px; --nf-home-btn-pad: 12px 26px;
    --nf-home-gutter: 40px; --nf-home-section-pad: 64px; --nf-home-title-gap: 48px; --nf-home-logo-gap: 28px;
  }
  .nf-hero { padding-top: 147px; }
  .nf-hero__strip { flex-wrap: wrap; justify-content: center; row-gap: 28px; }
  /* Trusted by takes its own row, the marquee filling it */
  .nf-hero__group--trusted { flex-basis: 100%; }
  .nf-system__panel { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); column-gap: 40px; }
  .nf-system__panel--wide { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Desktop and tablet: the hero fits the first screen
   A 13-inch laptop leaves the page about 800 to 930px of height; the hero needs about 1050. js/home.js sets
   --nf-hero-fit to everything above the video plus the strip under it (and a 24px margin), so the video gives up
   height, down to 280px, before the strip drops below the fold. Below 1060px of height the vertical rhythm also
   tightens so the video keeps most of its height. 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 video */
  .nf-hero__media { width: 100%; max-height: max(280px, 100svh - var(--nf-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 */
  .nf-hero { padding-top: 96px; padding-bottom: 48px; }
  .nf-hero__lead { margin-top: 16px; }
  .nf-hero__doors { margin-top: 28px; }
  .nf-hero__media { margin-top: 32px; }
  .nf-hero__strip { margin-top: 24px; }
}

/* ==========================================================================
   Phone (<= 809.98): 393 frame, first screen ends at 844
   ========================================================================== */
@media (max-width: 809.98px) {
  /* how-it-works at 390: subhead 20, body 16, eyebrow 18, secondary 13, buttons 16 Medium */
  :root {
    --nf-home-display: 40px; --nf-home-section: 32px; --nf-home-lead: 20px; --nf-home-body: 16px; --nf-home-caption: 14px;
    --nf-home-label: 16px; --nf-home-label-strip: 14px; --nf-home-btn: 16px; --nf-home-btn-h: 48px; --nf-home-btn-pad: 12px 24px;
    --nf-home-gutter: 24px; --nf-home-section-pad: 48px; --nf-home-title-gap: 32px; --nf-home-logo-gap: 24px;
  }
  .nf-tier1, .nf-tier2 { font-family: var(--nf-font-medium); font-weight: 500; }

  .nf-hero { padding: 107px 0 48px; }
  .nf-hero__copy { align-items: stretch; text-align: left; }
  .nf-hero__title { line-height: 1.1; }
  .nf-hero__lead { margin-top: 16px; }
  .nf-hero__doors { flex-direction: column; gap: 12px; margin-top: 24px; }
  .nf-hero__doors .nf-tier1 { width: 100%; }
  .nf-hero__media { margin-top: 20px; aspect-ratio: 345 / 220; border-radius: 16px; }

  /* Trusted by runs full width under its label; As seen in stays one static row of three */
  /* nowrap: a wrapping column would size its line to the marquee track's full width, not the column */
  .nf-hero__strip { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 32px; margin-top: 32px; }
  .nf-hero__group { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nf-hero__marquee { width: 100%; }
  .nf-hero__group--press .nf-hero__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; width: 100%; }
  .nf-hero__group--press .nf-hero__logos li { height: 40px; }
  .nf-hero__group--press .nf-hero__logo { max-width: 100%; }

  .nf-section-title { text-align: left; }
  .nf-system__panel, .nf-system__panel--wide { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 32px 0; }
  .nf-system__media { gap: 8px; }
  .nf-system__img { aspect-ratio: 4 / 3; border-radius: 12px; }
  .nf-system__media--3 .nf-system__img { aspect-ratio: 4 / 5; }
  .nf-system__fig { gap: 8px; }
  .nf-system__cap-long { display: none; }
  .nf-system__cap-short { display: inline; }
  .nf-system__service { padding-top: 32px; }

  .nf-doors__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nf-doors__card { padding: 16px; border-radius: 20px; }
  .nf-doors__img { aspect-ratio: 16 / 9; border-radius: 12px; }   /* taller on phone, the size of live nafas.com's home cards (403 x 226; Danny 2026-10-30) */
  .nf-doors__card .nf-label { margin-top: 20px; }
  .nf-doors__text { margin-top: 8px; }
  .nf-doors__cta .nf-tier1 { width: 100%; }
  .nf-doors__cta { padding-top: 24px; }
}

/* Door card buttons are Tier 1 green (Danny, 2026-10-28; v14 had Tier 2 outline). On the white card the hero's white
   focus ring would vanish, so it is black here. */
.nf-doors .nf-tier1:focus-visible { outline-color: var(--nf-black); }

/* Section titles ("How the system works together.", "For your home, or for your business.") in Regular 400, the weight
   of the residential "Real Stories from Clean Air Zone Members." title (Danny, 2026-10-28; v14 had Medium 500).
   The hero title stays Medium. */
.nf-section-title { font-family: var(--nf-font-regular); font-weight: 400; }

/* "In a home" photo zoomed in on the monitor (Danny, 2026-10-28): 1.5x from the monitor's spot in the photo (59% across,
   52% down), so it stays centred where it is and fills more of the frame at every breakpoint. */
.nf-system__img img.nf-system__zoom-home { transform: scale(1.5); transform-origin: 59% 52%; }

/* Filtration photo focus (Danny, 2026-10-28): the room purifier sits a bit lower in its frame so more of it shows;
   the office photo shows the top of the photo, a bit zoomed in (scaled from the top edge, so the top stays in place) */
.nf-system__img img[src$="filtration-room.jpg"] { object-position: 50% 75%; }
/* Phone (4:5 card): framed like desktop (Danny 2026-10-29): purifier top about 22% down, its base just past the bottom.
   Visible window 525 x 656 of the 840 x 1262 photo from x 149, y 486: cover at 50% 100%, then 1.6x about 47.3% 69.6%. */
/* + 10% (Danny 2026-10-29), zoomed about the purifier's top so the top stays where it is: scale(1.1) about (50%, 22%) after
   scale(1.6) about (47.3%, 69.6%) = scale(1.76) about (47.7%, 63.3%). */
@media (max-width: 809.98px) { .nf-system__img img[src$="filtration-room.jpg"] { object-position: 50% 100%; transform: scale(1.76); transform-origin: 47.7% 63.3%; } }
/* office photo: zoomed in on the ceiling unit and kept centred on it (the unit sits near the top of the photo, so the
   zoom grows from the top edge at the unit's centre line) */
.nf-system__img img[src$="filtration-mounted.jpg"] { object-position: 50% 0%; transform: scale(1.3); transform-origin: 48% 0%; }
/* Phone (4:5 card): on the ceiling Sky80 (photo x 213-560, top y 55 of 840 wide), sized so the unit spans the card width
   minus 16px each side, with 16px above it (Danny 2026-10-29). Width and margins in % of the card's width, so it holds at
   every phone size: image width = (100% - 32px) * 840 / 347. */
@media (max-width: 809.98px) {
  .nf-system__img img[src$="filtration-mounted.jpg"] {
    width: calc((100% - 32px) * 2.4207); max-width: none; height: auto; transform: none;
    margin-left: calc(16px - (100% - 32px) * 0.6138); margin-top: min(0px, calc(16px - (100% - 32px) * 0.1585)); /* the photo has only 55px above the unit: never leave a gap at the top */
  }
}
/* EcoFlow inside the AHU: a bit zoomed in and anchored to the right, on the EcoFlow modules (Danny, 2026-10-28) */
.nf-system__img img[src$="filtration-ahu.jpg"] { object-position: 100% 50%; transform: scale(1.5); transform-origin: 100% 50%; }
/* Integrates card = the technician in the AHU doors (Danny 2026-10-29): home/filtration-ahu-tech-2 is his full portrait
   "NFS_EcoFlow_Ins-06.jpg" (1334 x 2048). Focus on the top: the crop starts at the top of the doorway (y 300), so the blue
   pipes above it are out. 3:2 card shows 889px of height: (300 / (2048 - 889)) = 26%; phone 4:5 shows 1667: 79%. */
.nf-system__img img[src$="filtration-ahu-tech-2.jpg"] { object-position: 50% 22%; transform: scale(1.1); transform-origin: 50% 0%; } /* crop starts just under the 3 blue wires, at the door frame top (y 255 = 22% of 2048 - 889), 1.1x from the top edge (Danny 2026-10-29) */ /* crop starts at the base of the 3 blue wires (y 205; Danny 2026-10-29): 205 / (2048 - 889) */
@media (max-width: 809.98px) { .nf-system__img img[src$="filtration-ahu-tech-2.jpg"] { object-position: 50% 67%; transform: scale(1.65); transform-origin: 55% 0%; } } /* phone: from the wire base too (205 / (2048 - 1667)), 1.5x on the technician */

/* For Homes door: the bottom of the bedroom photo (bed, purifier) in view (Danny, 2026-10-28) */
.nf-doors__img img[src$="door-homes.jpg"] { object-position: 50% 100%; }
/* For Business door (the /business hero photo): the crop starts 24px below the top of the photo (Danny, 2026-10-28).
   max() with 100% (the photo's whole spare height) stops it at the bottom of the photo if a frame ever has less than
   24px to move, so no empty strip shows. */
.nf-doors__img img[src$="res-healthy-air-one-monthl-hero.jpg"] { object-position: 50% max(-24px, 100%); }

/* Type scale based on the residential page, shared with the Healthy Building Assessment page (Danny, 2026-10-28),
   desktop / tablet / phone: section titles SF Pro Text Regular 52 / 38 / 28 at 1.2, normal tracking (as the residential
   testimonials title); intro lines under titles 24 / 24 / 18 at 1.2; body 20 / 20 / 15 at 1.4. The hero keeps its own
   title (72) and line (28), as the residential hero. */
/* Also (Danny, 2026-10-28): panel labels ("Sensing", "For Homes"...) as the residential card names, Medium 28 / 28 / 21;
   photo captions as the residential small text, 16 / 16 / 13; buttons on the site's button system, 21px / 54px with
   32px corners (phone 15px / 35px). The "Trusted by" / "As seen in" strip labels keep their own size. */
:root {
  --nf-home-section: 52px; --nf-home-body: 20px; --nf-home-label: 28px; --nf-home-caption: 16px;
  --nf-home-btn: 21px; --nf-home-btn-h: 54px; --nf-home-btn-pad: 0 24px;
}
.nf-section-title { font-family: var(--nf-font-sfns-text); font-weight: 400; line-height: 1.2; letter-spacing: normal; }
.nf-doors__text { font-size: 24px; line-height: 1.2; }
.nf-tier1, .nf-tier2 { height: var(--nf-home-btn-h); min-height: 0; border-radius: 32px; }
@media (max-width: 1439.98px) {
  :root {
    --nf-home-section: 38px; --nf-home-body: 20px; --nf-home-label: 28px; --nf-home-caption: 16px;
    --nf-home-btn: 21px; --nf-home-btn-h: 54px; --nf-home-btn-pad: 0 24px;
  }
}
@media (max-width: 809.98px) {
  :root {
    --nf-home-section: 28px; --nf-home-body: 15px; --nf-home-label: 21px; --nf-home-caption: 13px;
    --nf-home-btn: 15px; --nf-home-btn-h: 35px; --nf-home-btn-pad: 0 16px;
  }
  .nf-doors__text { font-size: 18px; }
  .nf-tier1, .nf-tier2 { font-family: var(--nf-font-regular); font-weight: 400; }
}
/* No press animation on the home buttons (For Homes / For Business; Danny, 2026-10-28): no shrink or fade on click */
.nf-tier1:active, .nf-tier2:active { transform: none; opacity: 1; }

/* Phone "On your phone" card (4:3, Danny 2026-10-29): zoomed so the phone in the photo (x 476-787, y 171-667 of 1260 x 840)
   fills the card height with 16px above and below, centred across. Card height = 75% of its width, so in % of width:
   image width = (75% - 32px) * 1260 / 496. */
@media (max-width: 809.98px) {
  .nf-system__img img[src$="intelligence-phone-2.jpg"] {
    width: calc((75% - 32px) * 2.5403); max-width: none; height: auto; transform: none;
    margin-top: calc(16px - (75% - 32px) * 0.3448); margin-left: calc(50% - (75% - 32px) * 1.2722);
  }
}

/* Phone hero "For Homes" / "For Business": the residential "Become a Member" width (Danny 2026-10-29), 100vw - 112px
   (278 at 390), centred, instead of the full column. */
@media (max-width: 809.98px) {
  .nf-hero__doors { align-items: center; }
  .nf-hero__doors .nf-tier1 { width: calc(100vw - 112px); max-width: 100%; align-self: center; }
}

/* Phone system photos swipe left and right (Danny 2026-10-30): each row (Sensing, Filtration, Intelligence) is a
   horizontal scroller of 4:5 cards, 76% of the screen wide so the next card peeks in, snapping card by card. The row
   runs to the screen edges and starts and ends on the gutter. Tablet and desktop keep their grids. */
@media (max-width: 809.98px) {
  .nf-system__media, .nf-system__media--3 {
    display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--nf-home-gutter)); padding: 0 var(--nf-home-gutter); scroll-padding: 0 var(--nf-home-gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nf-system__media::-webkit-scrollbar { display: none; }
  .nf-system__media > li { flex: 0 0 76%; scroll-snap-align: start; }
  .nf-system__img, .nf-system__media--3 .nf-system__img { aspect-ratio: 4 / 5; }
  /* the long captions fit the wider cards */
  .nf-system__cap-long { display: inline; }
  .nf-system__cap-short { display: none; }
  /* "On your phone" in the 4:5 card: same fit as the 4:3 rule above (phone fills the height with 16px above and below),
     with the card height now 125% of its width */
  .nf-system__img img[src$="intelligence-phone-2.jpg"] {
    width: calc((125% - 32px) * 2.5403);
    margin-top: calc(16px - (125% - 32px) * 0.3448); margin-left: calc(50% - (125% - 32px) * 1.2722);
  }
  /* "On a dashboard": the 4:5 card shows 921 of the photo's 1400px width; the monitor (x 100-920) sits left of centre, so
     the window starts at x 50 (50 / (1400 - 921) = 10%) and the whole screen shows with a little room each side */
  .nf-system__img img[src$="hiw-business-findings.jpg"] { object-position: 10% 50%; }
}

/* Phone For Business door photo (Danny 2026-10-30, option B lowered): zoomed 1.2x from the top of the photo, then the
   frame moved 12px down the photo (24px on his 2x reference image; was 24, Danny: "not 48 but 24") so the dark band at the top is out: the ceiling unit,
   the panelled wall and the screens show. The 1.2x photo is 35px taller than the frame, so 12px leaves no gap below. */
@media (max-width: 809.98px) {
  .nf-doors__img img[src$="res-healthy-air-one-monthl-hero.jpg"] { object-position: 50% 0%; transform: translateY(-12px) scale(1.2); transform-origin: 50% 0%; }
}

/* Phone "In a home" (4:5 card): AirTest centred across (Danny 2026-10-30). The device (sphere + mount) is centred at
   63.7% across the photo; the 3:2 photo drawn at the card's height is 1.875 card widths wide, so object-position x =
   (1.875 x 0.637 - 0.5) / 0.875 = 79.3% puts it at the card's middle, and the 1.5x zoom grows from that middle. */
@media (max-width: 809.98px) {
  .nf-system__img img.nf-system__zoom-home { object-position: 79.3% 50%; transform: scale(1.65); transform-origin: 50% 52%; }   /* 1.5x + 10% (Danny 2026-10-30) */
}

/* Phone typescale = the residential page's phone sizes (Danny 2026-10-30; measured at 390 on residential.html):
   hero title 34 / 40.8 (residential hero title; weight stays Medium, Danny 2026-10-28), hero line 16 / 20.8 (hero sub),
   body and the line under a door label 16 / 20 (business, ownership and ecosystem copy), captions 13 / 16 (size plan
   notes), door quotes 14 / 16.8 Medium with 12 / 14.4 Medium names (the Antoine quote in the size section). Section
   titles 28 / 33.6, labels 21 / 25.2, buttons 15 / 18 and strip labels 14 / 16.8 already matched. */
@media (max-width: 809.98px) {
  .nf-hero__title { font-size: 34px; line-height: 40.8px; letter-spacing: normal; }
  .nf-hero__lead { font-size: 16px; line-height: 20.8px; }
  .nf-system__desc, .nf-system__service, .nf-doors__text { font-size: 16px; line-height: 20px; }
  .nf-system__cap { font-size: 13px; line-height: 16px; }
  .nf-doors__quote p { font-family: var(--nf-font-medium); font-weight: 500; font-size: 14px; line-height: 16.8px; }
  .nf-doors__quote .nf-doors__cite { font-size: 12px; line-height: 14.4px; }
  .nf-doors__quote p:has(.nf-doors__stat) { font-family: var(--nf-font-regular); font-weight: 400; }   /* GIZ line stays Regular so "95% lower" (Medium) still stands out */
}