/* ============================================================
   House Insulation Canberra – landing page
   Source: Figma nZ3DFlHhu9qLXULnJWWtAm, page "Approved Landing page –
   Desktop 1920" (406:2), frame 406:3 (1920 × 12,030), read 29 Sep 2026.
   Desktop model (Imaccstudio standard): the 1920 frame with its 1280
   column at x 320.
     ≥1024  every value is the Figma px value; 1440–1919 keeps the
            column centred and crops the frame margins; 1024–1439 and
            ≥1921 are zoomed proportionally (never reflowed).
     ≤1023  tablet / phone derived from the desktop composition.
   Scoped: the theme's stylesheet is not loaded on this template.
   ============================================================ */

:root {
  --c-ink: #173c32;        /* headings, body copy, dark bands */
  --c-green: #00bf63;      /* accent words, ticks, review strokes */
  --c-orange: #ef7224;     /* book buttons */
  --c-orange-h: #d9651f;
  --c-blue: #3c51c4;       /* call buttons, chip text */
  --c-blue-h: #3245a9;
  --c-cream: #f6f4ec;      /* process + FAQ bands, inputs, trust text */
  --c-mint: #e6efe9;       /* before & after band, chips, tiles, pull quote */
  --c-border: #d6e0db;
  --c-dark-text: #1a1a1a;  /* hero paragraph, "5.0" */
  --c-lede-dark: #d1e3db;  /* final CTA paragraph */
  --c-placeholder: rgba(23, 60, 50, 0.5);
  --c-divider: #386154;

  --font-h: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-b: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --header-h: 92px;
  --callbar-h: 72px;
  --page-pad: 20px;
  /* Left edge of the 1920 frame. Every full-bleed decoration sits at
     calc(var(--stage-x) + <Figma x>). Tied to the 1440 "stage" (the
     1280 column + 80px each side), which is centred and never narrower. */
  --stage-x: calc(max(0px, 50% - 720px) - 240px);
  --shadow-review: 0 12px 32px rgba(23, 60, 50, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 360ms;
  --dur-fast: 180ms;
}

/* ---- Fonts (SIL OFL, self-hosted, latin subset) ---- */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { color-scheme: light; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
@media (min-width: 1024px) and (max-width: 1439.98px) { html { zoom: tan(atan2(100vw, 1440px)); } }
@media (min-width: 1921px) { html { zoom: tan(atan2(100vw, 1920px)); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: #fff; color: var(--c-ink); font-family: var(--font-b); font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.625; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hdr { top: 46px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, p, blockquote, figure { margin: 0; font-style: normal; }
strong { font-weight: 700; }
::selection { background: var(--c-green); color: #fff; }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--c-ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
section[id] { scroll-margin-top: var(--header-h); }
.lb { display: none; }                 /* Figma's manual line breaks: on from 641px; a space is kept when hidden */
@media (min-width: 641px) { .lb { display: inline; } }
.accent { color: var(--c-green); }
.lp-preview-note { position: relative; z-index: 101; background: #fff4d6; color: #5b3a00; font-size: 13px; text-align: center; padding: 6px 12px; }
.ico { flex: 0 0 auto; }

/* ---- Container: 1280 column, 80 sides (the 1440 stage). ---- */
.container { position: relative; width: 100%; margin-inline: auto; padding-inline: var(--page-pad); }
@media (min-width: 641px) { :root { --page-pad: 32px; } }
@media (min-width: 1024px) { .container { width: 1440px; max-width: none; padding-inline: 80px; } }

/* ---- Type ---- */
.h2 { font-family: var(--font-h); font-weight: 800; font-size: 44px; line-height: 54px; letter-spacing: -0.66px; color: var(--c-ink); }
.lede { font-size: 18px; line-height: 29px; color: var(--c-ink); }
@media (max-width: 1023px) { .h2 { font-size: clamp(30px, 4.2vw + 14px, 40px); line-height: 1.2; letter-spacing: -0.5px; } .lede { font-size: 17px; line-height: 28px; } }

/* ---- Buttons (Figma "Button / …": px 32, py 18, radius 6, Manrope 700 18/24, icon 20, gap 10) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 32px; border-radius: 6px; font-family: var(--font-h); font-weight: 700; font-size: 18px; line-height: 24px; color: #fff; white-space: nowrap; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur-fast) var(--ease); }
.btn__icon { width: 20px; height: 20px; }
.btn--book { background: var(--c-orange); }
.btn--book:hover { background: var(--c-orange-h); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(239, 114, 36, 0.3); }
.btn--call { background: var(--c-blue); }
.btn--call:hover { background: var(--c-blue-h); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(60, 81, 196, 0.3); }
.btn--block { width: 100%; }
.btn:active { transform: scale(0.98); }
.ctas { display: flex; gap: 16px; align-items: flex-start; }
.ctas--center { justify-content: center; }
@media (max-width: 1023px) { .btn { font-size: 17px; padding: 16px 24px; } }
@media (max-width: 560px) { .ctas { flex-direction: column; align-items: stretch; } .ctas .btn { width: 100%; } }

/* ---- Google rating ("Source" group: wordmark 77 × 25, "5.0" 20/20, stars 112 × 18, gap 8) ---- */
.grating { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.grating__logo { width: 77px; height: 25px; }
.grating__score { font-weight: 600; font-size: 20px; line-height: 20px; color: var(--c-dark-text); }
.grating__stars { width: 112px; height: 18px; }

/* ---- Review cards (Figma "Review / …": 1040 wide, 1.5px green stroke drawn inside, radius 12) ---- */
.rv { position: relative; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--c-green), var(--shadow-review); padding: 31.5px; color: var(--c-ink); }
.rv__text { font-size: 17px; line-height: 28px; color: var(--c-ink); }
.rv__author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv__avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 100px; overflow: hidden; }
.rv__avatar img { width: 39px; height: 39px; object-fit: cover; }
.rv__avatar--letter { background: var(--c-green); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 18px; line-height: 24px; }
.rv__name { font-weight: 600; font-size: 16px; line-height: 24px; white-space: nowrap; }
.rv--photo .rv__row { display: flex; gap: 20px; align-items: stretch; }
.rv__photo { position: relative; width: 215px; flex: 0 0 215px; overflow: hidden; }
.rv__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.rv--photo .rv__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.rv__foot { display: flex; align-items: center; gap: 10px; }
.rv__foot .rv__author { flex: 1 0 0; }
.rv--center, .rv--left { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.rv--center .rv__text { text-align: center; }
.rv--left .rv__text { width: 100%; }
.rv--wide { padding: 33.5px 49.5px; }
.rv--short .rv__row { height: 153px; }
.rv--short .rv__body { gap: 20px; }
.rv--hang-proc .rv__avatar img, .rv--hang-about .rv__avatar img, .rv--final .rv__avatar img { width: 36px; height: 36px; }
@media (min-width: 1024px) {
  .rv--hang { position: absolute; z-index: 5; left: calc(50% - 520px); width: 1040px; }
  .rv--hang-trust { top: -124px; }
  .rv--hang-why { top: -127px; }
  .rv--hang-svc { top: -127px; }
  .rv--hang-proc { top: -142px; }
  .rv--hang-about { top: -128px; }
  .rv--hang-where { top: -127px; }
  .rv--hang-faq { top: -100px; }
}
@media (max-width: 1023px) {
  .rv--hang { position: relative; margin: 0 var(--page-pad) 48px; padding: 21.5px; }
  .rv--wide { padding: 21.5px; }
  .rv--photo .rv__row { flex-direction: column; height: auto; }
  .rv__photo { width: 100%; flex: none; aspect-ratio: 16 / 9; }
  .rv__foot { flex-wrap: wrap; row-gap: 12px; }
  .rv__foot .rv__author { flex: 1 1 auto; }
  .rv__text { font-size: 16px; line-height: 26px; }
}

@media (max-width: 640px) { .rv__foot { flex-direction: column; align-items: flex-start; } }

/* ---- Reveal motion (Ian's standard: ease, never snap) ---- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .btn { transition: none; } }

/* ============================================================
   Header (Figma 406:8) – 1280 × 92, py 16. Overlays the hero; becomes a
   white sticky bar once the page scrolls (agreed addition).
   ============================================================ */
.hdr { position: sticky; top: 0; z-index: 100; height: var(--header-h); margin-bottom: calc(-1 * var(--header-h)); background: transparent; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hdr.is-stuck { background: #fff; box-shadow: 0 6px 24px rgba(23, 60, 50, 0.1); }
.hdr__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.hdr__logo img { width: 176px; height: 50px; object-fit: contain; transition: transform var(--dur) var(--ease); }
.hdr__logo:hover img { transform: scale(1.03); }
.hdr__ctas { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
@media (max-width: 1023px) {
  :root { --header-h: 68px; }
  .hdr { background: #fff; box-shadow: 0 1px 0 rgba(23, 60, 50, 0.08); margin-bottom: 0; }
  .hdr__logo img { width: 134px; height: 38px; }
  .hdr .btn { padding: 11px 16px; font-size: 15px; }
}
@media (max-width: 640px) { .hdr__book { display: none; } }

/* ============================================================
   01 Hero (Figma 406:4) – 856 tall; content column 660 at pt 80 below the header
   ============================================================ */
.hero { position: relative; background: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__layer { position: absolute; left: calc(var(--stage-x) + 311px); top: -125px; width: 1612px; height: 981px; overflow: hidden; }
.hero__layer img { position: absolute; max-width: none; }
.hero__fade { position: absolute; inset: 0; background: linear-gradient(-89.99999956deg, rgba(255, 255, 255, 0) 27.732%, #fff 71.068%, #fff 100.5%); }
.hero__inner { padding-top: calc(var(--header-h) + 80px); }
.hero__content { width: 660px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
.hero__pre { font-weight: 600; font-size: 18px; line-height: 26px; color: var(--c-green); }
.hero__title { font-family: var(--font-h); font-weight: 800; font-size: 60px; line-height: 68px; letter-spacing: -1.2px; color: var(--c-ink); }
.hero__photo { display: none; }
.hero__sub { font-size: 18px; line-height: 29px; color: var(--c-dark-text); }
.hero__ctas { display: flex; justify-content: center; gap: 16px; padding-top: 8px; }
.hero__note { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--c-ink); }
@media (min-width: 1024px) { .hero { height: 856px; } }
@media (max-width: 1023px) {
  .hero__bg { display: none; }
  .hero__inner { padding-top: 32px; padding-bottom: 48px; }
  .hero__content { width: 100%; gap: 16px; }
  .hero__title { font-size: clamp(34px, 5.4vw + 14px, 52px); line-height: 1.12; letter-spacing: -0.8px; }
  .hero__photo { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--c-cream); }
  .hero__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
  .hero__sub { font-size: 17px; line-height: 28px; }
  .hero__ctas { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 560px) { .hero__ctas { flex-direction: column; } .hero__ctas .btn { width: 100%; } }

/* ============================================================
   02 Trust bar (Figma 406:38) – 248 tall, pt 170 / pb 40; Renee card hangs 124 above
   ============================================================ */
.trust { position: relative; background: var(--c-ink); padding: 170px 0 40px; }
.trust__list { display: flex; justify-content: center; align-items: flex-start; gap: 40px; }
.trust__item { display: flex; gap: 12px; padding-right: 23px; color: var(--c-cream); }
.trust__tick { font-weight: 600; font-size: 18px; line-height: 21.6px; color: var(--c-green); }
.trust__text { font-size: 16px; line-height: 19px; white-space: nowrap; }
.trust__text strong { font-weight: 700; }
@media (max-width: 1023px) {
  .trust { padding: 40px 0; }
  .trust .rv--hang { margin-top: -8px; }
  .trust__list { flex-wrap: wrap; justify-content: flex-start; gap: 20px 32px; }
  .trust__item { padding-right: 0; width: calc(50% - 16px); }
  .trust__text { white-space: normal; line-height: 22px; }
}
@media (max-width: 560px) { .trust__item { width: 100%; } }

/* ============================================================
   03 The Difference (Figma 406:84) – 803 tall, 112/112; content 651 right-aligned
   ============================================================ */
.diff { position: relative; background: #fff; padding: 112px 0; }
.diff__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.diff__layer { position: absolute; top: 0; height: 803px; overflow: hidden; }
.diff__l1 { left: calc(var(--stage-x) + 0px); width: 1649px; }
.diff__l2 { left: calc(var(--stage-x) + 136px); width: 1513px; }
.diff__layer img { position: absolute; max-width: none; }
.diff__fade { position: absolute; inset: 0; }
.diff__fade--1 { background: linear-gradient(to right, rgba(255, 255, 255, 0) 15.768%, #fff 58.413%); }
.diff__fade--2 { background: linear-gradient(to right, rgba(255, 255, 255, 0) 15.768%, #fff 55.179%); }
.diff__photo { display: none; }
.diff__inner { display: flex; justify-content: flex-end; }
.diff__content { width: 651px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.diff__p { font-size: 18px; line-height: 29px; }
.diff__p strong { font-weight: 700; }
.diff__ctas { padding-top: 12px; }
@media (max-width: 1023px) {
  .diff { padding: 0 0 56px; }
  .diff__bg { display: none; }
  .diff__photo { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 32px; }
  .diff__photo::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
  .diff__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 30%; }
  .diff__content { width: 100%; }
  .diff__p { font-size: 17px; line-height: 28px; }
}

/* ============================================================
   04 Before & After (Figma 406:103) – 1341 tall, 112 / 222; 3 × 2 cards, gap 24
   ============================================================ */
.ba { position: relative; background: var(--c-mint); padding: 112px 0 222px; }
.ba__inner { display: flex; flex-direction: column; gap: 48px; }
.ba__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ba__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ba-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: 4px; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ba-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(23, 60, 50, 0.1); }
.ba-card__pair { display: flex; gap: 2px; height: 220px; background: #fff; }
.ba-card__half { position: relative; flex: 1 0 0; min-width: 0; overflow: hidden; }
.ba-card__half img { position: absolute; max-width: none; transform: scale(var(--z, 1)); transition: transform 900ms var(--ease); }
.ba-card:hover .ba-card__half img { transform: scale(calc(var(--z, 1) * 1.04)); }
.ba-card__tag { position: absolute; left: 0; top: 190px; width: 70px; padding: 6px 12px; background: var(--c-green); color: #fff; font-weight: 600; font-size: 13px; line-height: 18px; text-align: center; }
.ba-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 24px 24px; }
.chip { display: inline-flex; padding: 6px 12px; border-radius: 100px; background: var(--c-mint); color: var(--c-blue); font-weight: 600; font-size: 13px; line-height: 18px; }
.ba-card__title { font-family: var(--font-h); font-weight: 700; font-size: 20px; line-height: 28px; }
.ba-card__text { font-size: 15px; line-height: 24px; }
@media (max-width: 1023px) {
  .ba { padding: 56px 0 72px; }
  .ba__inner { gap: 32px; }
  .ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 640px) { .ba__grid { grid-template-columns: 1fr; } }

/* ---- Photo frames shared by several sections ---- */
.is-cover, img.is-media { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; max-width: none; }

/* ============================================================
   05 Why Choose Us (Figma 406:190) – 1380 tall, 254 / 222; photos 520 | 64 | benefits 696
   ============================================================ */
.why { position: relative; background: #fff; padding: 254px 0 222px; }
.why__inner { display: flex; gap: 64px; align-items: stretch; }
.why__photos { position: relative; width: 520px; flex: 0 0 520px; }
.polaroid { position: absolute; width: 381.632px; height: 293.424px; }
.polaroid__frame { position: relative; width: 100%; height: 100%; border: 4px solid #fff; background: #d9d9d9; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.polaroid__frame img { position: absolute; max-width: none; }
.polaroid--1 { left: 82.54px; top: 34.54px; }
.polaroid--1 .polaroid__frame { transform: rotate(-7.46deg); }
.polaroid--2 { left: 82.81px; top: 276.24px; }
.polaroid--2 .polaroid__frame { transform: rotate(21.18deg); }
.polaroid--3 { left: 78.75px; top: 539.69px; }
.polaroid--3 .polaroid__frame { transform: rotate(-20.06deg); }
.polaroid:hover { z-index: 2; }
.polaroid--1:hover .polaroid__frame { transform: rotate(-5deg) scale(1.03); }
.polaroid--2:hover .polaroid__frame { transform: rotate(18deg) scale(1.03); }
.polaroid--3:hover .polaroid__frame { transform: rotate(-17deg) scale(1.03); }
.why__benefits { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 50px; }
.why__list { display: flex; flex-direction: column; }
.benefit { display: flex; gap: 16px; align-items: flex-start; padding-top: 20px; }
.benefit:first-child { padding-top: 0; }
.benefit__tick { width: 28px; height: 28px; transition: transform var(--dur) var(--ease); }
.benefit:hover .benefit__tick { transform: scale(1.1) rotate(-6deg); }
.benefit__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.benefit__title { font-family: var(--font-h); font-weight: 700; font-size: 19px; line-height: 26px; }
.benefit__body { font-size: 16px; line-height: 26px; }
@media (max-width: 1023px) {
  .why { padding: 40px 0 64px; }
  .why__inner { flex-direction: column-reverse; gap: 40px; }
  .why__photos { width: 100%; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px 8px; }
  .polaroid { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 381 / 293; }
  .polaroid__frame { border-width: 3px; }
  .polaroid__frame img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
  .why__benefits { gap: 28px; }
}

/* ============================================================
   06 Our Services (Figma 406:268) – 1612 tall, 254 / 222; 4 × 2 cards 302 wide, gap 24
   ============================================================ */
.svc { position: relative; background: var(--c-ink); padding: 254px 0 222px; }
.svc__bg { position: absolute; left: calc(var(--stage-x) + 0px); top: 0; width: 1920px; height: 1572px; overflow: hidden; pointer-events: none; }
.svc__bg img { position: absolute; max-width: none; }
.svc__fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(23, 60, 50, 0) 3.751%, var(--c-ink) 31.123%); }
.svc__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.svc__title { width: 800px; max-width: 100%; text-align: center; color: #fff; }
.svc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; }
.svc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 4px solid #fff; border-radius: 4px; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
.svc-card__photo { position: relative; height: 176px; overflow: hidden; }
.svc-card__photo img { position: absolute; max-width: none; transition: transform 900ms var(--ease); }
.svc-card:hover .svc-card__photo img { transform: scale(1.04); }
.svc-card__badge { position: absolute; left: 115px; top: var(--badge-top, 141px); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 100px; background: #fff; border: 1px solid var(--badge-stroke, var(--c-ink)); overflow: hidden; z-index: 1; transition: transform var(--dur) var(--ease); }
.svc-card:hover .svc-card__badge { transform: translateY(-3px); }
.svc-card__icon { position: relative; width: 45px; height: 45px; overflow: hidden; }
.ico--placed { position: absolute; max-width: none; }
.ico--fit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.svc-card__body { display: flex; flex-direction: column; gap: 10px; padding: 44px 20px 24px; color: var(--c-ink); }
.svc-card__title { width: 254px; max-width: 100%; font-family: var(--font-h); font-weight: 700; font-size: 19px; line-height: 26px; }
@media (min-width: 1024px) { .svc-card:nth-child(3) .svc-card__title { width: 262px; max-width: none; } }
.svc-card__text { font-size: 15px; line-height: 24px; }
.svc__prompt { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 8px; text-align: center; }
.svc__prompt-text { font-weight: 500; font-size: 19px; line-height: 28px; color: #fff; }
@media (min-width: 1024px) { .svc__prompt-text { white-space: nowrap; } }
@media (max-width: 1023px) {
  .svc { padding: 40px 0 64px; }
  .svc__bg { left: 0; width: 100%; height: 520px; }
  .svc__bg img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
  .svc__fade { background: linear-gradient(to bottom, rgba(23, 60, 50, 0.35) 0%, var(--c-ink) 85%); }
  .svc__inner { gap: 32px; }
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .svc-card__badge { left: calc(50% - 28px); }
  .svc-card__title { width: auto; }
}
@media (max-width: 560px) { .svc__grid { grid-template-columns: 1fr; } .svc-card__photo { height: 200px; } .svc-card__badge { top: 168px !important; } }

/* ============================================================
   07 How the Process Works (Figma 406:391) – 1218 tall, pt 254 (content 786, rest to 1218)
   ============================================================ */
.proc { position: relative; background: var(--c-cream); padding: 254px 0 178px; }
.proc__bg { position: absolute; left: calc(var(--stage-x) + 302px); top: 0; width: 1618px; height: 625px; overflow: hidden; pointer-events: none; }
.proc__bg img { position: absolute; max-width: none; }
.proc__fade { position: absolute; inset: 0; background: linear-gradient(253.24449deg, rgba(246, 244, 236, 0) 18.658%, var(--c-cream) 92.135%), linear-gradient(180deg, rgba(246, 244, 236, 0) 0%, var(--c-cream) 60%, var(--c-cream) 100%); }
.proc__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.proc__title { width: 100%; text-align: center; }
.proc__row { display: flex; gap: 50px; width: 100%; height: 576px; align-items: stretch; }
.proc__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.proc__col--left .step:first-child, .proc__col--right .step { flex: 1 0 0; }
.step { display: flex; gap: 16px; align-items: flex-start; padding: 28px; background: #fff; border: 1px solid var(--c-border); border-radius: 4px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(23, 60, 50, 0.1); }
.step__tile { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 10px; background: var(--c-mint); }
.step__icon { position: relative; width: 36px; height: 36px; overflow: hidden; }
.step__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.step__title { font-family: var(--font-h); font-weight: 700; font-size: 21px; line-height: 28px; }
.step__body { font-size: 15px; line-height: 24px; }
.proc__video { position: relative; width: 334px; flex: 0 0 334px; border: 4px solid #fff; overflow: hidden; cursor: pointer; }
.proc__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none; }
.proc__play { position: absolute; left: calc(50% - 44px); top: calc(50% - 44px); width: 88px; height: 88px; transition: transform var(--dur) var(--ease); }
.proc__video:hover .proc__play { transform: scale(1.08); }
@media (max-width: 1023px) {
  .proc { padding: 40px 0 64px; }
  .proc__bg { display: none; }
  .proc__inner { gap: 32px; }
  .proc__row { flex-direction: column; height: auto; gap: 16px; }
  .proc__col { gap: 16px; }
  .proc__video { width: min(334px, 100%); flex: none; aspect-ratio: 334 / 576; align-self: center; order: 3; }
  .proc__col--right { order: 2; }
  .step { padding: 22px; }
}

/* ============================================================
   08 About our Team (Figma 406:478) – 1104 tall, 240 / 208; 560 space | 64 | content 656
   ============================================================ */
.about { position: relative; background: #fff; padding: 240px 0 208px; }
.about__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.about__scene, .about__cutout { position: absolute; top: -1px; height: 1277px; overflow: hidden; }
.about__scene { left: calc(var(--stage-x) + 0px); width: 1506px; }
.about__cutout { left: calc(var(--stage-x) + 268px); width: 1238px; }
.about__scene img, .about__cutout img { position: absolute; max-width: none; }
.about__logo { position: absolute; left: calc(var(--stage-x) + 312.38px); top: 9px; width: 633.619px; height: 696.076px; max-width: none; }
.about__fade { position: absolute; left: calc(var(--stage-x) + 0px); top: -1px; width: 1506px; height: 1112px; background: linear-gradient(69.60301deg, rgba(255, 255, 255, 0) 25.832%, rgba(255, 255, 255, 0.95) 51.972%, #fff 86.732%), linear-gradient(168.02602deg, rgba(255, 255, 255, 0) 38.562%, #fff 71.219%); }
.about__photo { display: none; }
.about__inner { display: flex; align-items: center; gap: 64px; }
.about__space { width: 560px; flex: 0 0 560px; align-self: stretch; }
.about__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about__p { font-size: 17px; line-height: 28px; }
.pull { display: flex; gap: 20px; padding: 20px 24px 20px 0; background: var(--c-mint); border-radius: 8px; overflow: hidden; }
.pull__bar { width: 4px; flex: 0 0 4px; border-radius: 2px; background: var(--c-green); }
.pull p { flex: 1 0 0; font-family: var(--font-h); font-weight: 600; font-size: 18px; line-height: 28px; }
.sign { display: flex; align-items: center; gap: 12px; }
.sign__avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 100px; background: var(--c-green); overflow: hidden; }
.sign__avatar img { width: 40px; height: 44.95px; object-fit: cover; max-width: none; }
.sign__text { display: flex; flex-direction: column; }
.sign__name { font-weight: 600; font-size: 16px; line-height: 22px; }
.sign__role { font-size: 14px; line-height: 20px; }
@media (max-width: 1023px) {
  .about { padding: 40px 0 64px; }
  .about__bg { display: none; }
  .about__photo { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0 0 32px; }
  .about__photo::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
  .about__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 30%; }
  .about__space { display: none; }
  .about__p { font-size: 16px; line-height: 26px; }
}

/* ============================================================
   09 Where We Work (Figma 406:518) – 1191 tall, pt 240 (content 593, aerial photo below)
   ============================================================ */
.where { position: relative; background: #fff; padding: 240px 0 358px; }
.where__bg { position: absolute; left: calc(var(--stage-x) + 0px); top: 478px; width: 1920px; height: 851px; overflow: hidden; pointer-events: none; }
.where__bg img { position: absolute; max-width: none; }
.where__fade { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 10.778%, rgba(255, 255, 255, 0.85) 30.638%, rgba(255, 255, 255, 0.51) 41.536%, rgba(255, 255, 255, 0) 49.771%); }
.where__inner { display: flex; flex-direction: column; gap: 48px; }
.where__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.where__areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 100px; row-gap: 50px; }
.area { display: flex; flex-direction: column; gap: 8px; }
.area__title { font-family: var(--font-h); font-weight: 700; font-size: 17px; line-height: 24px; color: var(--c-green); }
.area__list { font-size: 15px; line-height: 24px; }
.dot { color: var(--c-green); }
.where__call { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-inline: 32px; text-align: center; }
.where__call-text { font-family: var(--font-h); font-weight: 700; font-size: 20px; line-height: 28px; }
@media (max-width: 1023px) {
  .where { padding: 40px 0 240px; overflow: hidden; }
  .where__bg { left: 0; top: auto; bottom: 0; width: 100%; height: 420px; }
  .where__bg img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
  .where__fade { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 60%); }
  .where__inner { gap: 32px; }
  .where__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; }
}
@media (max-width: 560px) { .where__areas { grid-template-columns: 1fr; } .where__call { padding-inline: 0; } }

/* ============================================================
   10 Common Questions (Figma 406:572) – 1081 tall, 212 / 112; accordion 590 | 100 | space
   ============================================================ */
.faq { position: relative; background: var(--c-cream); padding: 212px 0 112px; }
.faq__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.faq__house { position: absolute; left: calc(var(--stage-x) + 522px); top: 0; width: 1398px; height: 1081px; overflow: hidden; }
.faq__house img, .faq__cutout img { position: absolute; max-width: none; }
.faq__fade { position: absolute; inset: 0; background: linear-gradient(131.20558deg, var(--c-cream) 24.758%, rgba(246, 244, 236, 0) 58.94%), linear-gradient(265.73501deg, rgba(246, 244, 236, 0) 22.981%, var(--c-cream) 70.139%); }
.faq__logo { position: absolute; left: calc(var(--stage-x) + 896px); top: 579px; width: 784px; height: 1054.076px; max-width: none; }
.faq__cutout { position: absolute; left: calc(var(--stage-x) + 913px); top: 121px; width: 761px; height: 1096px; overflow: hidden; }
.faq__inner { display: flex; gap: 100px; align-items: flex-start; }
.faq__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.faq__space { flex: 1 0 0; }
.faq__list { display: flex; flex-direction: column; }
.acc { border-bottom: 1px solid var(--c-border); padding: 20px 0; }
.acc:first-child { padding-top: 0; }
.acc__q { font-size: inherit; }
.acc__btn { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; text-align: left; font-family: var(--font-h); font-weight: 700; font-size: 18px; line-height: 26px; color: var(--c-ink); }
.acc__label { flex: 1 0 0; min-width: 0; }
.acc__toggle { position: relative; width: 28px; height: 28px; flex: 0 0 28px; transition: transform var(--dur) var(--ease); }
.acc__toggle img { position: absolute; inset: 0; width: 28px; height: 28px; transition: opacity var(--dur) var(--ease); }
.acc__minus { opacity: 0; }
.acc.is-open .acc__minus { opacity: 1; }
.acc.is-open .acc__plus { opacity: 0; }
.acc__btn:hover .acc__toggle { transform: scale(1.08); }
.acc__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur) var(--ease); }
.acc:not(.is-open) .acc__panel { grid-template-rows: 0fr; }
.acc__inner { overflow: hidden; min-height: 0; }
.acc__a { font-size: 16px; line-height: 26px; padding-top: 12px; }
@media (max-width: 1023px) {
  .faq { padding: 40px 0 64px; } /* the phone/tablet couple photo was removed at Ian's request (29 Sep 2026) */
  .faq__bg { display: none; }
  .faq__inner { flex-direction: column; gap: 0; }
  .faq__col { gap: 28px; }
  .faq__space { display: none; }
  .acc__btn { font-size: 17px; line-height: 24px; }
}

/* ============================================================
   11 Final CTA (Figma 406:649) – 1118 tall, pt 100; content 700 | 80 | form 500
   ============================================================ */
.final { position: relative; background: var(--c-ink); padding: 100px 0 319px; overflow: hidden; }
.final__bg { position: absolute; left: calc(var(--stage-x) + 0px); top: 478px; width: 1920px; height: 867px; overflow: hidden; pointer-events: none; }
.final__bg img { position: absolute; max-width: none; }
.final__fade { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--c-ink) 5.825%, rgba(23, 60, 50, 0) 73.587%); }
.final__inner { display: flex; gap: 80px; align-items: stretch; }
.final__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.final__intro { display: flex; flex-direction: column; gap: 24px; }
.final__title { width: 700px; max-width: 100%; font-family: var(--font-h); font-weight: 800; font-size: 48px; line-height: 58px; letter-spacing: -0.72px; color: #fff; }
.final__lede { width: 700px; max-width: 100%; font-size: 18px; line-height: 29px; color: var(--c-lede-dark); }
.final__points { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.final__points li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 16px; line-height: 24px; color: #fff; }
.final__points .ico { width: 22px; height: 22px; }
.rv--final { display: flex; gap: 20px; align-items: stretch; padding: 21.5px 31.5px; }
.rv--final .rv__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.rv__photo--framed { width: 231px; flex: 0 0 231px; border: 4px solid #fff; background: #d9d9d9; }
.qform-wrap { width: 500px; flex: 0 0 500px; display: flex; }
.qform { position: relative; width: 100%; display: flex; flex-direction: column; gap: 18px; padding: 36px; background: #fff; border-radius: 12px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25); color: var(--c-ink); }
.qform__title { font-family: var(--font-h); font-weight: 700; font-size: 24px; line-height: 32px; }
.qform__intro { font-size: 15px; line-height: 23px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 500; font-size: 14px; line-height: 20px; }
.field__input { display: block; width: 100%; height: 48px; padding: 0 14px; background: var(--c-cream); border: 1px solid var(--c-border); border-radius: 6px; font-size: 15px; line-height: 22px; color: var(--c-ink); appearance: none; -webkit-appearance: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.field__input::placeholder { color: var(--c-placeholder); opacity: 1; }
.field__input:focus { outline: none; border-color: var(--c-green); background: #fff; box-shadow: 0 0 0 3px rgba(0, 191, 99, 0.18); }
.field.is-invalid .field__input { border-color: #c92a2a; }
.qform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qform__error { color: #c92a2a; font-size: 14px; line-height: 20px; }
.qform__submit:disabled { opacity: 0.7; cursor: progress; }
.qform__foot { display: flex; align-items: center; justify-content: center; gap: 10px; }
.qform__badge { position: relative; width: 98px; height: 47px; flex: none; overflow: hidden; }
.qform__badge img { position: absolute; max-width: none; }
.qform__note { font-weight: 700; font-size: 15px; line-height: 18px; }
.qform__demo-flag { position: absolute; top: 10px; right: 12px; font-size: 11px; line-height: 16px; color: #6b5a2e; background: #fff4d6; border: 1px dashed #e0b44a; border-radius: 6px; padding: 2px 8px; }
.qform__success { padding: 16px 18px; border-radius: 8px; background: var(--c-mint); border: 1px solid #b6d8c3; }
.qform__success.is-demo { background: #fff4d6; border-color: #e0b44a; }
.qform__success-title { font-family: var(--font-h); font-weight: 700; font-size: 17px; line-height: 24px; }
.qform__success-body { font-size: 14px; line-height: 22px; margin-top: 4px; }
@media (max-width: 1023px) {
  .final { padding: 56px 0 280px; }
  .final__bg { left: 0; top: auto; bottom: 0; width: 100%; height: 420px; }
  .final__bg img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
  .final__inner { flex-direction: column; gap: 40px; }
  .final__title { font-size: clamp(32px, 4.4vw + 14px, 44px); line-height: 1.2; }
  .final__lede { font-size: 17px; line-height: 28px; }
  .final__points li { align-items: flex-start; }
  .qform-wrap { width: 100%; flex: none; }
  .qform { padding: 28px 22px; }
  .field__input { font-size: 16px; }
  .rv--final { flex-direction: column-reverse; padding: 21.5px; }
  .rv__photo--framed { width: 100%; flex: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) { .qform__foot { flex-direction: column; text-align: center; } }

/* ============================================================
   12 Footer (Figma 406:719) – 78 tall, py 20
   ============================================================ */
.ftr { background: #fff; padding: 20px 0; }
.ftr__inner { display: flex; align-items: center; gap: 32px; }
.ftr__brand { width: 591px; flex: 0 0 591px; }
.ftr__brand img { width: 118px; height: 38px; object-fit: contain; }
.ftr__row { flex: 1 0 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 14px; line-height: 20px; color: var(--c-ink); white-space: nowrap; }
.ftr__row strong { font-weight: 700; }
.ftr__row a:hover { text-decoration: underline; }
.ftr__div { width: 1px; height: 20px; background: var(--c-divider); }
@media (max-width: 1023px) {
  .ftr { padding: 28px 0; }
  .ftr__inner { flex-direction: column; gap: 16px; }
  .ftr__brand { width: auto; flex: none; }
  .ftr__row { flex-wrap: wrap; gap: 8px 14px; white-space: normal; text-align: center; }
  .ftr__row > span:first-child { flex-basis: 100%; }
  .ftr__div { display: none; }
}

/* ============================================================
   Mobile sticky call / book bar (agreed addition, ≤1023px)
   ============================================================ */
.callbar { display: none; }
@media (max-width: 1023px) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 10px; padding: 10px var(--page-pad) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); box-shadow: 0 -8px 24px rgba(23, 60, 50, 0.12); transform: translateY(0); transition: transform var(--dur) var(--ease); }
  .callbar.is-hidden { transform: translateY(110%); }
  .callbar .btn { flex: 1 0 0; min-width: 0; padding: 12px 10px; font-size: 14px; min-height: 48px; }
  .callbar .btn span { overflow: hidden; text-overflow: ellipsis; }
  body.has-callbar { padding-bottom: var(--callbar-h); }
}

/* ============================================================
   Process video dialog
   ============================================================ */
.vmodal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.vmodal::backdrop { background: rgba(10, 24, 20, 0.82); }
.vmodal[open] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; width: 100%; height: 100%; }
.vmodal__box { position: relative; height: min(86vh, 900px); aspect-ratio: 9 / 16; max-width: 92vw; }
.vmodal__video { width: 100%; height: 100%; background: #000; border-radius: 12px; object-fit: contain; }
.vmodal__close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 100px; background: #fff; color: var(--c-ink); font-size: 26px; line-height: 40px; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }

/* ---- Print: no sticky chrome ---- */
@media print { .hdr, .callbar, .lp-preview-note { position: static; box-shadow: none; } [data-reveal] { opacity: 1; transform: none; } }