@charset "UTF-8";
/* ============================================================================
   HOMEZY.AE - assets/css/homezy.css
   Single stylesheet. No preprocessor, no build step.

   TABLE OF CONTENTS
   01  TOKENS ............ :root custom properties (ONLY place a hex may appear)
   02  RESET & BASE ...... box-sizing, media defaults, focus ring, selection
   03  TYPOGRAPHY ........ h1–h4, p, .lead, .prose
   04  LAYOUT ............ .container .section .split .grid-* .stack
   05  COMPONENTS ........ alphabetical
   06  CHROME ............ header, nav, drawer, footer, FAB, action bar
   07  UTILITIES ......... max 12, prefixed .u-
   08  PAGE BLOCKS ....... one-offs only (.p-home__*), kept rare
   09  MOTION ............ html.motion reveal states + keyframes
   10  REDUCED MOTION .... the global override

   HOUSE RULES
   · A hex code may NEVER appear outside section 01a. Components use --c-* only.
   · Max two class selectors deep. Zero IDs. Zero !important outside section 10.
   · A style belongs in 08 only if used exactly once. Used twice → promote to 05.
   ========================================================================= */


/* ============================================================================
   01  TOKENS
   ========================================================================= */

/* --- 01a  Brand ramps - the only hex codes in this file ------------------ */
:root{
  /* Green. #3CA200 is the brand green in practice (67 uses on the live site)
     but it is only 3.30:1 on white - fine for fills, borders and large text,
     FAILS 4.5:1 for body copy and links. Hence --green-600 for text. */
  --green-700:#256300;   /* pressed / active                                 */
  --green-600:#2E7D00;   /* text & links on white - 5.19:1 AA                */
  --green-500:#3CA200;   /* brand fill; white on it - 6.36:1 AA             */
  --green-400:#5CBF20;
  --green-300:#8FD46B;   /* decorative only                                  */
  --green-100:#E8F5D3;   /* pale tint surface                                */

  /* Amber. CTA colour. White on amber is 1.61:1 - catastrophic.
     --c-cta-text is locked to ink and must never be overridden. */
  --amber-500:#FFC15A;   /* CTA fill; ink on it - 11.4:1 AAA                */
  --amber-600:#F2A92F;   /* CTA hover                                        */
  --amber-100:#FFF4E0;

  /* Mint. Decorative only - 2.46:1. Never carries text. */
  --mint-500:#5AB691;
  --mint-400:#3DD598;

  /* Ink */
  --ink-900:#121711;     /* headings                                         */
  --ink-700:#2A3327;
  --ink-500:#4B554A;     /* body - 7.79:1 AAA                                */
  --ink-400:#6B7569;     /* muted - 5.31:1 AA                                */

  /* Lines & surfaces */
  --line:#E4E8DE;
  --line-strong:#CBD3C4;
  --surface:#FFFFFF;
  --surface-2:#F4F6F0;   /* cream                                            */
  --surface-3:#E8F5D3;   /* pale green                                       */
  --surface-dark:#131A11;
  --surface-dark-2:#1C2619;

  /* Fixed-meaning colours */
  --whatsapp:#25D366;    /* WhatsApp brand green - do not restyle            */
  --whatsapp-hover:#1EBE5A;
  --whatsapp-ink:#062512; /* text on WhatsApp green - 8.9:1                  */
  --star:#F5A623;
  /* Google's own mark. Four fixed hues, reproduced exactly - a recoloured
     Google logo is a trademark problem, so these are never themed. */
  --google-blue:#4285F4;
  --google-green:#34A853;
  --google-yellow:#FBBC05;
  --google-red:#EA4335;
  --error:#B3261E;       /* 5.9:1 on white - AA                              */
  --error-bg:#FDECEA;
  --white:#FFFFFF;

  /* Not a colour - the opaque stop of a mask-image alpha channel. */
  --mask-opaque:#000;
}

/* --- 01b  Semantic aliases - components reference ONLY these ------------- */
:root{
  --c-bg:var(--surface);
  --c-bg-alt:var(--surface-2);
  --c-bg-tint:var(--surface-3);
  --c-bg-dark:var(--surface-dark);
  --c-bg-dark-2:var(--surface-dark-2);

  --c-text:var(--ink-500);
  --c-heading:var(--ink-900);
  --c-muted:var(--ink-400);
  --c-text-on-dark:rgb(255 255 255 / .78);
  --c-heading-on-dark:var(--white);

  --c-brand:var(--green-500);
  --c-brand-text:var(--green-600);      /* links and small text - AA         */
  --c-brand-hover:var(--green-700);
  --c-brand-soft:var(--green-100);
  --c-on-brand:var(--white);

  --c-cta:var(--amber-500);
  --c-cta-hover:var(--amber-600);
  --c-cta-text:var(--ink-900);          /* NEVER white - 1.61:1              */

  --c-border:var(--line);
  --c-border-strong:var(--line-strong);
  --c-border-on-dark:rgb(255 255 255 / .16);

  --c-focus:var(--green-700);
  --c-whatsapp:var(--whatsapp);
  --c-whatsapp-hover:var(--whatsapp-hover);
  --c-whatsapp-ink:var(--whatsapp-ink);
  --c-star:var(--star);
  --c-google-blue:var(--google-blue);
  --c-google-green:var(--google-green);
  --c-google-yellow:var(--google-yellow);
  --c-google-red:var(--google-red);
  --c-error:var(--error);
  --c-error-bg:var(--error-bg);
}

/* --- 01c  Spacing - 4/8 scale ------------------------------------------- */
:root{
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:20px;
  --s-6:24px;  --s-7:28px;  --s-8:32px;  --s-10:40px; --s-12:48px;
  --s-14:56px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;
}

/* --- 01d  Typography ---------------------------------------------------- */
:root{
  --font-head:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --fw-body:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-head:600;

  --fs-xs:0.8125rem;    /* 13 - label, meta, chip text only. Never body.     */
  --fs-sm:0.9375rem;    /* 15                                                */
  --fs-base:1rem;       /* 16 - mobile minimum, avoids iOS input auto-zoom   */
  --fs-md:1.0625rem;    /* 17 - desktop body                                 */
  --fs-lg:clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  --fs-xl:clamp(1.125rem, .6vw + 1rem, 1.375rem);        /* .lead            */
  --fs-h4:clamp(1.0625rem, .5vw + 1rem, 1.25rem);
  --fs-h3:clamp(1.25rem, 1.4vw + .9rem, 1.6rem);
  --fs-h2:clamp(2rem, 4.6vw, 3.4rem);                    /* the signature H2 */
  --fs-h1:clamp(2.35rem, 6vw, 4.2rem);
  --fs-display:clamp(2.6rem, 7vw, 5rem);

  --lh-tight:1.02;
  --lh-head:1.1;
  --lh-snug:1.35;
  --lh-body:1.6;
  --lh-prose:1.75;

  --ls-tight:-.025em;
  --ls-head:-.02em;

  --measure:65ch;
  --measure-narrow:46ch;
}

/* --- 01e  Radii --------------------------------------------------------- */
:root{
  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --radius-pill:999px;
}

/* --- 01f  Elevation - hairlines, not shadows ---------------------------- */
:root{
  --hairline:1px solid var(--c-border);
  --hairline-strong:1px solid var(--c-border-strong);
  --shadow-1:0 1px 2px rgb(18 23 17 / .04);
  --shadow-lift:0 10px 30px -12px rgb(18 23 17 / .18);
  --shadow-brand:0 14px 30px -10px rgb(60 162 0 / .28);
  --shadow-cta:0 14px 30px -10px rgb(242 169 47 / .42);
  --shadow-panel:0 18px 50px -18px rgb(18 23 17 / .30);
  --shadow-media:0 30px 60px -24px rgb(18 23 17 / .38);
}

/* --- 01g  Motion -------------------------------------------------------- */
:root{
  --ease:cubic-bezier(.16, 1, .3, 1);        /* expo-out, shared everywhere  */
  --ease-in:cubic-bezier(.4, 0, 1, 1);
  --dur-fast:150ms;
  --dur:220ms;
  --dur-slow:300ms;
  --dur-reveal:600ms;
}

/* --- 01h  Layout -------------------------------------------------------- */
:root{
  --container:1240px;
  --container-narrow:720px;
  --gutter:clamp(20px, 5vw, 56px);
  --section-y:clamp(56px, 8vw, 100px);
  --section-y-lg:clamp(72px, 10vw, 140px);
  --head-gap:clamp(32px, 5vw, 56px);
  --header-h:84px;
  --header-h-scrolled:70px;
  --action-bar-h:60px;
}

/* --- 01i  Z-index scale ------------------------------------------------- */
:root{
  --z-base:0;
  --z-raised:10;
  --z-sticky:100;
  --z-header:200;
  --z-fab:300;
  --z-drawer:400;
  --z-overlay:500;
}


/* ============================================================================
   02  RESET & BASE
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Anchor targets clear the fixed header instead of hiding under it. */
  scroll-padding-top:calc(var(--header-h-scrolled) + var(--s-6));
}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Belt and braces against a stray wide child on mobile. */
  overflow-x:hidden;
}

@media (min-width:768px){
  body{font-size:var(--fs-md)}
}

/* Drawer open - lock the page behind it. */
body.is-locked{overflow:hidden}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}

img,picture,video,canvas,svg{
  display:block;
  max-width:100%;
  height:auto;
}

/* Icons must not inherit the img rule's height:auto when sized by CSS. */
svg{flex-shrink:0}

input,button,textarea,select{
  font:inherit;
  color:inherit;
}

button{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}

a{
  color:var(--c-brand-text);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
a:hover{color:var(--c-brand-hover)}

table{border-collapse:collapse;width:100%}

/* Every interactive element gets a visible ring. Never remove this. */
:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
  border-radius:var(--s-1);
}
/* Over dark surfaces the green ring disappears - switch to white. */
.site-footer :focus-visible,
.hero :focus-visible,
.cta-band--dark :focus-visible,
.svc-hero :focus-visible{
  outline-color:var(--white);
}

::selection{
  background:var(--c-brand-soft);
  color:var(--c-heading);
}

[hidden]{display:none !important}

/* Kills the 300ms tap delay without disabling pinch-zoom. */
a,button,label,summary,input,select,textarea,[role="button"]{
  touch-action:manipulation;
}

.skip-link{
  position:absolute;
  left:var(--s-4);
  top:calc(-1 * var(--s-20));
  z-index:var(--z-overlay);
  padding:var(--s-3) var(--s-5);
  background:var(--c-brand);
  color:var(--c-on-brand);
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  border-radius:var(--radius-sm);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{
  top:var(--s-4);
  color:var(--c-on-brand);
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --- Fonts --------------------------------------------------------------
   Self-hosted woff2, latin subset. No CDN: no third-party DNS+TLS on the
   critical path, full font-display control.

   Both are VARIABLE fonts, so one file per family covers every weight -
   two requests instead of four, and any weight is available without a new
   download. That is why `font-weight` here is a RANGE, not a number: writing
   `font-weight:700` on a variable face pins it and silently breaks 600.

   Archivo is a news grotesque: upright, tight, authoritative. Inter is the
   most legible body face at small sizes and carries true tabular numerals,
   which the price tables depend on (see .u-tnum). Replaced Parkinsans +
   Outfit, whose rounded terminals and circular bowls read as juvenile for a
   technical trade. */
@font-face{
  font-family:"Archivo";
  src:url(/assets/fonts/archivo-var.woff2) format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url(/assets/fonts/inter-var.woff2) format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ============================================================================
   03  TYPOGRAPHY
   ========================================================================= */

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  text-wrap:balance;
}

h1,.h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  max-width:16ch;
}

h2,.h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  max-width:20ch;
}

h3,.h3{font-size:var(--fs-h3)}
h4,.h4{font-size:var(--fs-h4)}

/* Centred section heads shouldn't be clamped off-centre. */
.u-center h1,.u-center h2,.u-center .h2{
  margin-inline:auto;
}

p{max-width:var(--measure)}

.lead{
  font-size:var(--fs-xl);
  line-height:var(--lh-snug);
  color:var(--c-muted);
  max-width:60ch;
  text-wrap:pretty;
}

/* Section head grouping: h2 + lead, with one consistent gap to whatever
   content follows. The heading is the first child, so `> * + *` never fires
   on it and the block starts flush against the section's own padding. */
.sec-head{margin-bottom:var(--head-gap)}
.sec-head > * + *{margin-top:var(--s-5)}
.sec-head--center{text-align:center}
.sec-head--center .lead{margin-inline:auto}

.text-brand{color:var(--c-brand-text)}
.text-muted{color:var(--c-muted)}
/* De-emphasised span inside a big statement - the second clause of a sentence. */
.soft{color:var(--c-muted)}

/* Tabular figures for prices and any number in a column, so digits don't
   jitter as values change. */
.num{font-variant-numeric:tabular-nums}


/* --- .prose - long-form body copy (blog posts, privacy policy) ---------- */
.prose{
  max-width:var(--container-narrow);
  font-size:var(--fs-md);
  line-height:var(--lh-prose);
}
.prose > * + *{margin-top:var(--s-6)}
.prose h2{
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  margin-top:var(--s-14);
  max-width:none;
  scroll-margin-top:calc(var(--header-h-scrolled) + var(--s-6));
}
.prose h3{
  font-size:clamp(1.15rem, 1.8vw, 1.4rem);
  margin-top:var(--s-10);
  max-width:none;
  scroll-margin-top:calc(var(--header-h-scrolled) + var(--s-6));
}
.prose h2 + *,.prose h3 + *{margin-top:var(--s-4)}
.prose p{max-width:none}
.prose ul,.prose ol{padding-left:var(--s-6)}
.prose li{list-style:disc;margin-top:var(--s-2)}
.prose ol li{list-style:decimal}
.prose li::marker{color:var(--c-brand)}
.prose a{font-weight:var(--fw-medium);text-decoration:underline}
.prose strong{color:var(--c-heading);font-weight:var(--fw-semi)}
.prose img{border-radius:var(--radius);margin-block:var(--s-8)}
.prose figure{margin-block:var(--s-8)}
.prose figcaption{
  margin-top:var(--s-3);
  font-size:var(--fs-sm);
  color:var(--c-muted);
}
.prose blockquote{
  padding:var(--s-5) var(--s-6);
  border-left:3px solid var(--c-brand);
  background:var(--c-bg-alt);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:var(--fs-lg);
  color:var(--c-heading);
}
.prose table{
  display:block;
  overflow-x:auto;          /* wide tables scroll themselves, never the page */
  font-size:var(--fs-sm);
  border:var(--hairline);
  border-radius:var(--radius-sm);
}
.prose th,.prose td{
  padding:var(--s-3) var(--s-4);
  text-align:left;
  border-bottom:var(--hairline);
}
.prose th{
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  background:var(--c-bg-alt);
}
.prose tr:last-child td{border-bottom:0}


/* ============================================================================
   04  LAYOUT
   ========================================================================= */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow)}

.section{padding-block:var(--section-y)}
.section--lg{padding-block:var(--section-y-lg)}
.section--tight{padding-block:clamp(40px, 6vw, 72px)}
.section--flush-top{padding-top:0}
.section--alt{background:var(--c-bg-alt)}
.section--tint{background:var(--c-bg-tint)}
.section--dark{
  background:var(--c-bg-dark);
  color:var(--c-text-on-dark);
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{
  color:var(--c-heading-on-dark);
}
.section--dark .lead{color:var(--c-text-on-dark)}

/* Hairline between two same-coloured sections. */
.section--ruled{border-top:var(--hairline)}

/* Two-column split. Collapses at 900px - the point where 46ch of prose
   beside an image stops being readable. */
.split{
  display:grid;
  gap:clamp(var(--s-8), 5vw, var(--s-16));
  align-items:center;
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
  .split--wide-right{grid-template-columns:.85fr 1.15fr}
  .split--end{align-items:end}
  .split--start{align-items:start}
  /* Reverse visual order without touching DOM order (keeps reading order). */
  .split--rev > :first-child{order:2}
}

.grid{display:grid;gap:var(--s-6)}
@media (min-width:600px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .grid{gap:var(--s-8)}
}

/* Vertical rhythm helper - one gap value for a stack of children. */
.stack > * + *{margin-top:var(--s-4)}
.stack--lg > * + *{margin-top:var(--s-6)}
.stack--xl > * + *{margin-top:var(--s-8)}

.cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3);
}

/* Media frames. aspect-ratio reserves the box so nothing shifts on load. */
.frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--c-bg-alt);
}
.frame > img,.frame > video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.frame--4x3{aspect-ratio:4/3}
.frame--3x2{aspect-ratio:3/2}
.frame--16x9{aspect-ratio:16/9}
.frame--1x1{aspect-ratio:1/1}
.frame--tall{aspect-ratio:4/5}
.frame--lift{box-shadow:var(--shadow-media)}


/* ============================================================================
   05  COMPONENTS  (alphabetical)
   ========================================================================= */

/* --- .areas - two opposing marquee rows of Dubai community chips ---------
   CSS-only. The duplicate row is aria-hidden so screen readers hear the list
   once. Paused entirely under reduced motion (section 10). */
.areas{overflow:hidden}
.areas__row{
  display:flex;
  gap:var(--s-3);
  width:max-content;
  margin-bottom:var(--s-3);
  /* Fade the edges so chips don't hard-clip at the viewport. */
  animation:marquee-left 46s linear infinite;
}
.areas__row--rev{animation-name:marquee-right;animation-duration:56s}
.areas__mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--mask-opaque) 6%,var(--mask-opaque) 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,var(--mask-opaque) 6%,var(--mask-opaque) 94%,transparent);
}
.area-chip{
  flex:none;
  padding:var(--s-3) var(--s-5);
  border:var(--hairline);
  border-radius:var(--radius-pill);
  background:var(--c-bg);
  color:var(--c-text);
  font-size:var(--fs-sm);
  white-space:nowrap;
}
.areas__note{
  margin-top:var(--s-8);
  text-align:center;
  color:var(--c-muted);
}

/* --- .ba - before/after comparison slider -------------------------------
   The "after" image is clipped by --pos, driven by a real <input type=range>
   so it is keyboard-operable and screen-reader-announced for free. */
.ba{
  --pos:50%;
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--c-bg-alt);
  aspect-ratio:4/3;
  isolation:isolate;
}
.ba__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ba__img--after{
  clip-path:inset(0 0 0 var(--pos));
}
.ba__label{
  position:absolute;
  top:var(--s-4);
  z-index:2;
  padding:var(--s-2) var(--s-4);
  border-radius:var(--radius-pill);
  background:rgb(18 23 17 / .72);
  color:var(--white);
  font-family:var(--font-head);
  font-size:var(--fs-xs);
  font-weight:var(--fw-head);
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.ba__label--before{left:var(--s-4)}
.ba__label--after{right:var(--s-4)}

/* The visible divider line + grab handle, positioned from the same var. */
.ba__divider{
  position:absolute;
  top:0;bottom:0;
  left:var(--pos);
  width:2px;
  background:var(--white);
  z-index:2;
  pointer-events:none;
  box-shadow:0 0 0 1px rgb(18 23 17 / .18);
}
.ba__divider::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  translate:-50% -50%;
  width:44px;height:44px;      /* meets the 44px touch target */
  border-radius:50%;
  background:var(--white);
  box-shadow:var(--shadow-lift);
}

/* The range input is stretched over the whole image, made invisible, and
   left fully interactive. Its thumb is 44px so dragging feels natural. */
.ba__range{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}
.ba__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:44px;height:44px;
  cursor:ew-resize;
}
.ba__range::-moz-range-thumb{
  width:44px;height:44px;
  border:0;
  cursor:ew-resize;
}
/* The input is transparent, so its focus ring must land on the wrapper. */
.ba:has(.ba__range:focus-visible){
  outline:3px solid var(--c-focus);
  outline-offset:3px;
}
.ba__hint{
  position:absolute;
  bottom:var(--s-4);
  left:50%;
  translate:-50% 0;
  z-index:2;
  padding:var(--s-2) var(--s-4);
  border-radius:var(--radius-pill);
  background:rgb(18 23 17 / .72);
  color:var(--white);
  font-size:var(--fs-xs);
  backdrop-filter:blur(6px);
  pointer-events:none;
}

/* --- .btn ---------------------------------------------------------------
   All pills. All lift on hover. Min 48px tall so they clear 44px with room. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:48px;
  padding:var(--s-4) var(--s-7);
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-head);
  font-size:var(--fs-base);
  font-weight:var(--fw-head);
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             translate var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn:hover{translate:0 -3px}
.btn:active{translate:0 -1px}
.btn svg{width:20px;height:20px}

.btn--cta{
  background:var(--c-cta);
  color:var(--c-cta-text);       /* locked to ink - white would be 1.61:1 */
}
.btn--cta:hover{
  background:var(--c-cta-hover);
  color:var(--c-cta-text);
  box-shadow:var(--shadow-cta);
}

.btn--brand{background:var(--c-brand);color:var(--c-on-brand)}
.btn--brand:hover{
  background:var(--c-brand-hover);
  color:var(--c-on-brand);
  box-shadow:var(--shadow-brand);
}

.btn--whatsapp{background:var(--c-whatsapp);color:var(--c-whatsapp-ink)}
.btn--whatsapp:hover{background:var(--c-whatsapp-hover);color:var(--c-whatsapp-ink);box-shadow:0 14px 30px -10px rgb(37 211 102 / .5)}

.btn--outline{
  background:transparent;
  border-color:var(--c-border-strong);
  color:var(--c-heading);
}
.btn--outline:hover{
  border-color:var(--c-brand);
  color:var(--c-brand-text);
  background:var(--c-brand-soft);
}

/* Over dark heroes. */
.btn--light{background:var(--white);color:var(--ink-900)}
.btn--light:hover{background:var(--surface-2);color:var(--ink-900)}
.btn--ghost{
  background:transparent;
  border-color:var(--c-border-on-dark);
  color:var(--white);
}
.btn--ghost:hover{background:rgb(255 255 255 / .12);color:var(--white)}

.btn--lg{min-height:56px;padding:var(--s-5) var(--s-8);font-size:var(--fs-lg)}
.btn--sm{min-height:44px;padding:var(--s-3) var(--s-5);font-size:var(--fs-sm)}
.btn--block{width:100%}

/* Text link with a sliding arrow. */
.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  color:var(--c-brand-text);
  text-decoration:none;
}
.arrow-link svg{
  width:18px;height:18px;
  transition:translate var(--dur) var(--ease);
}
.arrow-link:hover svg{translate:4px 0}

/* --- .card - the generic hairline surface -------------------------------- */
.card{
  display:flex;
  flex-direction:column;
  padding:var(--s-6);
  background:var(--c-bg);
  border:var(--hairline);
  border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease),
             translate var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.card--link{text-decoration:none;color:inherit}
.card--link:hover{
  border-color:var(--c-brand);
  translate:0 -4px;
  box-shadow:var(--shadow-lift);
  color:inherit;
}
/* Photo slot. Cards with a photo drop their side padding at the top so the
   image runs edge to edge - hence `.card--media`, which resets the padding
   the base .card sets. A trade service should show the work; a grid of icons
   on a category page reads like a brochure for software. */
.card--media{padding:0;overflow:hidden}
.card__media{
  aspect-ratio:3/2;
  background:var(--c-bg-alt);
  overflow:hidden;
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:scale var(--dur-slow) var(--ease);
}
.card--link:hover .card__media img{scale:1.04}
.card--media .card__inner{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:var(--s-6);
}
/* An icon still works as an overlay badge on a photo card. */
.card--media .card__icon{
  position:absolute;
  top:var(--s-4);
  left:var(--s-4);
  margin:0;
  background:rgb(255 255 255 / .92);
  backdrop-filter:blur(6px);
}
.card--media{position:relative}

.card__icon{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  margin-bottom:var(--s-5);
  border-radius:var(--radius-sm);
  background:var(--c-brand-soft);
  color:var(--c-brand-text);
}
.card__icon svg{width:24px;height:24px}
.card__title{margin-bottom:var(--s-3)}
.card__body{color:var(--c-text);max-width:none}
.card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  margin-top:auto;
  padding-top:var(--s-5);
}
.card__foot svg{width:20px;height:20px;color:var(--c-brand-text)}
.card__price{
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  font-variant-numeric:tabular-nums;
}

/* --- .compare - "what you usually get" vs "what Homezy does" -------------
   Deliberately never names a competitor. */
.compare{
  display:grid;
  gap:var(--s-6);
}
@media (min-width:800px){
  .compare{grid-template-columns:1fr 1fr;gap:var(--s-8)}
}
.compare__col{
  padding:var(--s-7);
  border-radius:var(--radius-lg);
  border:var(--hairline);
}
.compare__col--them{background:var(--c-bg-alt)}
.compare__col--us{
  background:var(--c-brand-soft);
  border-color:var(--green-300);
}
.compare__head{
  margin-bottom:var(--s-5);
  font-size:var(--fs-h4);
}
.compare__list > li{
  display:flex;
  gap:var(--s-3);
  padding-block:var(--s-3);
  align-items:flex-start;
}
.compare__list > li + li{border-top:var(--hairline)}
.compare__col--us .compare__list > li + li{border-top-color:var(--green-300)}
.compare__list svg{width:20px;height:20px;margin-top:2px}
.compare__col--them svg{color:var(--c-muted)}
.compare__col--us svg{color:var(--c-brand-text)}

/* --- .cta-band - the two-button close on 22 pages ------------------------ */
.cta-band{
  padding-block:var(--section-y);
  background:var(--c-bg-tint);
  text-align:center;
}
.cta-band--dark{
  background:var(--c-bg-dark);
  color:var(--c-text-on-dark);
}
.cta-band--dark h2{color:var(--c-heading-on-dark)}
.cta-band__inner > * + *{margin-top:var(--s-5)}
.cta-band h2{margin-inline:auto}
.cta-band p{margin-inline:auto;max-width:52ch}
.cta-band .cluster{justify-content:center;margin-top:var(--s-8)}

/* --- .faq - native <details>, zero JavaScript ---------------------------- */
.faq{max-width:var(--container-narrow)}
.faq-item{border-bottom:var(--hairline)}
.faq-item summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-5);
  padding-block:var(--s-6);
  cursor:pointer;
  list-style:none;
  font-family:var(--font-head);
  font-size:var(--fs-h4);
  font-weight:var(--fw-head);
  color:var(--c-heading);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--c-brand-text)}

/* Plus → minus, built from two bars so there's no icon dependency. */
.faq-item__icon{
  position:relative;
  flex:none;
  width:24px;height:24px;
  margin-top:2px;
}
.faq-item__icon::before,.faq-item__icon::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  translate:-50% -50%;
  background:var(--c-brand);
  transition:rotate var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.faq-item__icon::before{width:14px;height:2px}
.faq-item__icon::after{width:2px;height:14px}
.faq-item[open] .faq-item__icon::after{rotate:90deg;opacity:0}

.faq-item__body{padding:0 0 var(--s-6)}
.faq-item__body > * + *{margin-top:var(--s-4)}
.faq-item__body p{max-width:70ch}

/* --- .feature - 50/50 image + text, the workhorse split ------------------ */
.feature__body > * + *{margin-top:var(--s-5)}
.feature__body p{max-width:var(--measure-narrow)}
.feature__body .cluster{margin-top:var(--s-7)}

/* Camera-proof variant: the named differentiator from the client brief. */
.feature--proof .feature__media{position:relative}
/* The photo is portrait. Stacked, the 4:3 frame crops it to the middle band;
   beside the copy there is height to spare, so the frame goes upright. */
@media (min-width:900px){
  .feature--proof .frame{aspect-ratio:3/4}
}
.proof__badge{
  position:absolute;
  left:var(--s-5);
  bottom:var(--s-5);
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-5);
  border-radius:var(--radius-pill);
  background:rgb(18 23 17 / .78);
  color:var(--white);
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  backdrop-filter:blur(8px);
}
.proof__badge svg{width:18px;height:18px;color:var(--mint-400)}

.pullquote{
  margin-top:var(--s-7);
  padding:var(--s-5) var(--s-6);
  border-left:3px solid var(--c-brand);
  background:var(--c-bg-alt);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.pullquote p{
  font-size:var(--fs-lg);
  color:var(--c-heading);
  max-width:none;
}
.pullquote cite{
  display:block;
  margin-top:var(--s-3);
  font-size:var(--fs-sm);
  font-style:normal;
  color:var(--c-muted);
}

/* --- .field - form control ---------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field + .field{margin-top:var(--s-5)}
.field label{
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-heading);
}
.field__hint{font-size:var(--fs-sm);color:var(--c-muted)}

.field input,.field select,.field textarea{
  width:100%;
  min-height:48px;
  padding:var(--s-3) var(--s-4);
  background:var(--c-bg);
  border:1px solid var(--c-border-strong);
  border-radius:var(--radius-sm);
  font-size:var(--fs-base);   /* 16px - below this iOS zooms the viewport */
  color:var(--c-heading);
  transition:border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.field textarea{min-height:112px;padding-top:var(--s-3);resize:vertical}
.field select{
  appearance:none;
  padding-right:var(--s-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B554A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s-4) center;
  background-size:20px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--c-muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--c-brand);
  box-shadow:0 0 0 4px rgb(60 162 0 / .16);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:1px;
}
.field [aria-invalid="true"]{border-color:var(--c-error)}
.field [aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgb(179 38 30 / .16)}

/* Errors sit BELOW the field they describe, never in a summary at the top. */
.field__err{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  color:var(--c-error);
  max-width:none;
}
.field__err svg{width:16px;height:16px;margin-top:3px}

.field-row{display:grid;gap:var(--s-5)}
@media (min-width:560px){
  .field-row{grid-template-columns:1fr 1fr}
  .field-row .field + .field{margin-top:0}
}

/* --- .hero - homepage, full height -------------------------------------- */
.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(100svh,860px);
  padding-top:calc(var(--header-h) + var(--s-16));
  padding-bottom:var(--s-20);
  isolation:isolate;
  background:var(--surface-dark);
  color:var(--c-text-on-dark);
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover}
/* Scrim: dark at top for header legibility, dark at bottom for the copy. */
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgb(12 18 10 / .72) 0%, rgb(12 18 10 / .38) 34%, rgb(12 18 10 / .86) 100%),
    radial-gradient(120% 80% at 50% 0%, rgb(60 162 0 / .18), transparent 58%);
}
.hero__inner{max-width:none}
.hero h1{
  color:var(--white);
  max-width:18ch;
}
.hero__sub{
  margin-top:var(--s-6);
  font-size:var(--fs-xl);
  line-height:var(--lh-snug);
  color:rgb(255 255 255 / .86);
  max-width:56ch;
  text-wrap:pretty;
}
.hero__cta{margin-top:var(--s-8);gap:var(--s-4)}
.hero__trust{margin-top:var(--s-10)}

/* --- .svc-hero - compact service-page hero ------------------------------ */
.svc-hero{
  position:relative;
  padding-top:calc(var(--header-h) + var(--s-12));
  padding-bottom:var(--s-16);
  background:
    radial-gradient(90% 70% at 8% 0%, rgb(60 162 0 / .22), transparent 60%),
    linear-gradient(165deg, var(--surface-dark-2), var(--surface-dark) 62%);
  color:var(--c-text-on-dark);
}
.svc-hero__grid{
  display:grid;
  gap:clamp(var(--s-8),5vw,var(--s-14));
  align-items:center;
}
@media (min-width:960px){
  .svc-hero__grid{grid-template-columns:1.08fr .92fr}
}
.svc-hero h1{color:var(--white);max-width:15ch}
/* The highlighted clause of a hero headline. Both heroes sit on dark
   surfaces, where amber reads far stronger than the text green. */
.hero .text-brand,
.svc-hero .text-brand{color:var(--c-cta)}
.svc-hero__sub{
  margin-top:var(--s-5);
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
  color:rgb(255 255 255 / .82);
  max-width:52ch;
  text-wrap:pretty;
}
.svc-hero__cta{margin-top:var(--s-8);gap:var(--s-4)}

.price-chip{
  display:inline-flex;
  align-items:baseline;
  gap:var(--s-2);
  margin-top:var(--s-6);
  padding:var(--s-3) var(--s-5);
  border:1px solid var(--c-border-on-dark);
  border-radius:var(--radius-pill);
  background:rgb(255 255 255 / .08);
  color:var(--white);
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  font-variant-numeric:tabular-nums;
}
.price-chip small{
  font-family:var(--font-body);
  font-weight:var(--fw-body);
  font-size:var(--fs-sm);
  color:rgb(255 255 255 / .68);
}

/* --- .page-hero - tinted band for about/contact/blog/posts --------------- */
.page-hero{
  padding-top:calc(var(--header-h) + var(--s-12));
  padding-bottom:var(--s-12);
  background:var(--c-bg-tint);
}
.page-hero h1{max-width:22ch}
.page-hero__dek{
  margin-top:var(--s-5);
  font-size:var(--fs-xl);
  line-height:var(--lh-snug);
  color:var(--c-muted);
  max-width:58ch;
}
.page-hero__meta{
  margin-top:var(--s-5);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-4);
  font-size:var(--fs-sm);
  color:var(--c-muted);
}

.breadcrumb{margin-bottom:var(--s-5)}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-sm);
}
.breadcrumb li{display:flex;align-items:center;gap:var(--s-2)}
.breadcrumb li + li::before{content:"/";color:var(--c-muted);opacity:.6}
.breadcrumb a{color:inherit;opacity:.78;text-decoration:none}
.breadcrumb a:hover{opacity:1;text-decoration:underline}
.breadcrumb [aria-current]{opacity:1;font-weight:var(--fw-medium)}
.svc-hero .breadcrumb{color:rgb(255 255 255 / .7)}
.page-hero .breadcrumb{color:var(--c-muted)}

/* --- .nlist - numbered rows, the benefits/inclusions pattern ------------- */
.nlist{border-top:var(--hairline)}
.nlist__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s-5);
  align-items:start;
  padding-block:var(--s-7);
  border-bottom:var(--hairline);
}
@media (min-width:700px){
  .nlist__item{gap:var(--s-8)}
}
.nlist__num{
  font-family:var(--font-head);
  font-size:clamp(2rem,4.4vw,3.2rem);
  font-weight:var(--fw-head);
  line-height:.9;
  letter-spacing:var(--ls-tight);
  color:var(--green-300);
  font-variant-numeric:tabular-nums;
  min-width:2.2ch;
}
.nlist__body > * + *{margin-top:var(--s-3)}
.nlist__body p{max-width:64ch}

/* Check variant - the numeral is replaced by a mark that draws itself in. */
.nlist--check .nlist__num{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  min-width:0;
  border-radius:50%;
  background:var(--c-brand-soft);
  color:var(--c-brand-text);
}
.nlist--check .nlist__num svg{width:22px;height:22px}
.nlist--check .nlist__num path{
  stroke-dasharray:24;
  stroke-dashoffset:0;
}

/* --- .post-card / .post-grid -------------------------------------------- */
.post-grid{
  display:grid;
  gap:var(--s-6);
}
@media (min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.post-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-8)}}

.post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:var(--hairline);
  border-radius:var(--radius-lg);
  background:var(--c-bg);
  text-decoration:none;
  color:inherit;
  transition:border-color var(--dur) var(--ease),
             translate var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.post-card:hover{
  border-color:var(--c-brand);
  translate:0 -4px;
  box-shadow:var(--shadow-lift);
  color:inherit;
}
/* Blog featured images are edge-to-edge INFOGRAPHICS - headline text and the
   Homezy logo sit in the margins - not photographs. Their aspect ratios run
   1.50 to 1.95, so `object-fit:cover` on a fixed box crops 9–16% off one axis
   and clips those headlines. That already happened once during asset
   generation ("AC CLEANING:" became "C CLEANING:").

   So: `contain` on a tinted panel. Nothing is ever clipped, cards stay a
   uniform height, and the letterboxing reads as deliberate artwork framing
   rather than a broken crop. Do NOT switch this back to `cover` without
   re-cropping the assets, and re-cropping is what caused the clipping. */
.post-card__media{
  aspect-ratio:16/9;
  background:var(--c-bg-alt);
  overflow:hidden;
  padding:var(--s-3);
  border-bottom:var(--hairline);
}
.post-card__media img{
  width:100%;height:100%;
  object-fit:contain;
  transition:scale var(--dur-slow) var(--ease);
}
.post-card:hover .post-card__media img{scale:1.04}
.post-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:var(--s-6);
}
.post-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-bottom:var(--s-3);
  font-size:var(--fs-xs);
  color:var(--c-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.post-card__title{font-size:var(--fs-h4);max-width:none}
.post-card__excerpt{
  margin-top:var(--s-3);
  font-size:var(--fs-sm);
  color:var(--c-text);
  max-width:none;
}
.post-card__more{margin-top:auto;padding-top:var(--s-5)}

/* --- .pricing ------------------------------------------------------------ */
.pricing-table{
  width:100%;
  border:var(--hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--c-bg);
}
.pricing-table th,.pricing-table td{
  padding:var(--s-5) var(--s-5);
  text-align:left;
  vertical-align:top;
  border-bottom:var(--hairline);
}
.pricing-table thead th{
  background:var(--c-bg-alt);
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td{border-bottom:0}
.pricing-table tbody tr:hover{background:var(--c-bg-alt)}
.pricing-table__svc{
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  color:var(--c-heading);
}
.pricing-table__svc a{color:inherit;text-decoration:none}
.pricing-table__svc a:hover{color:var(--c-brand-text);text-decoration:underline}
.pricing-table__price{
  white-space:nowrap;
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  color:var(--c-brand-text);
  font-variant-numeric:tabular-nums;
}
/* Wide table scrolls itself rather than the page. */
.pricing-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:700px){
  .pricing-table{min-width:560px}
}
.pricing__note{
  margin-top:var(--s-5);
  font-size:var(--fs-sm);
  color:var(--c-muted);
  max-width:68ch;
}

.price-card{
  padding:var(--s-8);
  border:var(--hairline);
  border-radius:var(--radius-lg);
  background:var(--c-bg-alt);
}
.price-card__amount{
  font-family:var(--font-head);
  font-size:clamp(2.2rem,5vw,3rem);
  font-weight:var(--fw-head);
  line-height:1;
  letter-spacing:var(--ls-tight);
  color:var(--c-heading);
  font-variant-numeric:tabular-nums;
}
.price-card__unit{
  margin-top:var(--s-2);
  color:var(--c-muted);
}
.price-card__tiers{margin-top:var(--s-6)}
.price-card__tiers li{
  display:flex;
  justify-content:space-between;
  gap:var(--s-4);
  padding-block:var(--s-3);
  border-bottom:var(--hairline);
  font-variant-numeric:tabular-nums;
}
.price-card__tiers li:last-child{border-bottom:0}

/* --- .qcard - contact methods ------------------------------------------- */
.qcard__row{
  display:flex;
  align-items:center;
  gap:var(--s-5);
  padding-block:var(--s-5);
  border-bottom:var(--hairline);
  text-decoration:none;
  color:inherit;
}
.qcard__row:last-child{border-bottom:0}
.qcard__row:hover{color:inherit}
.qcard__icon{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  flex:none;
  border-radius:var(--radius-sm);
  background:var(--c-brand-soft);
  color:var(--c-brand-text);
}
.qcard__icon svg{width:22px;height:22px}
.qcard__label{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--c-muted);
}
.qcard__value{
  font-family:var(--font-head);
  font-size:var(--fs-h4);
  font-weight:var(--fw-head);
  color:var(--c-heading);
}
a.qcard__row:hover .qcard__value{color:var(--c-brand-text)}

/* --- .qform - the WhatsApp quote builder --------------------------------- */
.qform{
  padding:clamp(var(--s-6),4vw,var(--s-10));
  background:var(--c-bg);
  border:var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
}
.qform__title{margin-bottom:var(--s-2)}
.qform__dek{margin-bottom:var(--s-8);color:var(--c-muted)}

/* Live estimate readout. aria-live="polite" so it's announced on change. */
.qform__estimate{
  display:block;
  margin-top:var(--s-6);
  padding:var(--s-5) var(--s-6);
  border-radius:var(--radius);
  background:var(--c-brand-soft);
  border:1px solid var(--green-300);
}
.qform__estimate-label{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--c-brand-text);
}
.qform__estimate-value{
  display:block;
  margin-top:var(--s-1);
  font-family:var(--font-head);
  font-size:clamp(1.6rem,3.4vw,2.2rem);
  font-weight:var(--fw-head);
  line-height:1.1;
  color:var(--c-heading);
  font-variant-numeric:tabular-nums;
}
.qform__estimate-note{
  display:block;
  margin-top:var(--s-2);
  font-size:var(--fs-sm);
  color:var(--ink-700);
}
.qform__submit{margin-top:var(--s-8)}
.qform__foot{
  margin-top:var(--s-5);
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  color:var(--c-muted);
}
.qform__foot svg{width:16px;height:16px;margin-top:3px;flex:none}

/* --- .reviews - static 3-up grid ---------------------------------------- */
.review-card{
  display:flex;
  flex-direction:column;
  padding:var(--s-7);
  background:var(--c-bg);
  border:var(--hairline);
  border-radius:var(--radius-lg);
}
.review-card__stars{
  display:flex;
  gap:2px;
  margin-bottom:var(--s-4);
  color:var(--c-star);
}
.review-card__stars svg{width:18px;height:18px}
.review-card__title{
  margin-bottom:var(--s-3);
  font-size:var(--fs-h4);
  max-width:none;
}
.review-card__text{color:var(--c-text);max-width:none}
.review-card__foot{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  margin-top:auto;
  padding-top:var(--s-6);
}
.review-card__avatar{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  flex:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green-500),var(--green-700));
  color:var(--white);
  font-family:var(--font-head);
  font-weight:var(--fw-head);
}
.review-card__name{
  font-family:var(--font-head);
  font-weight:var(--fw-head);
  color:var(--c-heading);
}

/* --- .signs - symptom cards --------------------------------------------- */
.signs__item{
  padding:var(--s-6);
  border:var(--hairline);
  border-radius:var(--radius);
  background:var(--c-bg);
}
.signs__icon{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  margin-bottom:var(--s-5);
  border-radius:var(--radius-sm);
  background:var(--amber-100);
  color:var(--amber-600);
}
.signs__icon svg{width:22px;height:22px}
.signs__item h3{margin-bottom:var(--s-2);font-size:var(--fs-h4)}
.signs__item p{font-size:var(--fs-sm);max-width:none}

/* --- .stats -------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s-8) 0;
}
@media (min-width:900px){
  .stats{grid-template-columns:repeat(4,1fr)}
}
.stats__item{
  padding-inline:var(--s-5);
  text-align:center;
  position:relative;
}
/* Hairline dividers between, not around. */
.stats__item + .stats__item::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  translate:0 -50%;
  width:1px;height:64px;
  background:var(--c-border);
}
@media (max-width:899px){
  .stats__item:nth-child(odd)::before{display:none}
}
.stats__value{
  font-family:var(--font-head);
  font-size:clamp(2rem,4.4vw,2.9rem);
  font-weight:var(--fw-head);
  line-height:1.05;
  letter-spacing:var(--ls-tight);
  color:var(--c-heading);
  font-variant-numeric:tabular-nums;
}
.stats__value em{font-style:normal;color:var(--c-brand)}
.stats__label{
  margin-top:var(--s-2);
  font-size:var(--fs-sm);
  color:var(--c-muted);
  max-width:none;
}

/* --- .statement - one oversized sentence -------------------------------- */
/* Asymmetric split: the claim carries the left, a supporting paragraph sits
   bottom-right so the two align on their baselines rather than their tops. */
.statement{display:grid;gap:var(--s-8)}
@media (min-width:900px){
  .statement{grid-template-columns:1.3fr .7fr;gap:var(--s-16);align-items:end}
}
.statement__text{
  font-family:var(--font-head);
  font-size:clamp(1.65rem,3.6vw,2.6rem);
  font-weight:var(--fw-head);
  line-height:1.18;
  letter-spacing:var(--ls-head);
  color:var(--c-heading);
  max-width:22ch;
}

/* --- .process - numbered steps ------------------------------------------ */
.process{display:grid;gap:var(--s-8)}
@media (min-width:700px){.process{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.process{grid-template-columns:repeat(4,1fr);gap:var(--s-6)}}
.pstep{position:relative;padding-top:var(--s-6);border-top:2px solid var(--c-brand-soft)}
.pstep__num{
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  letter-spacing:.14em;
  color:var(--c-brand-text);
}
.pstep h3{margin-top:var(--s-3);font-size:var(--fs-h4)}
.pstep p{margin-top:var(--s-3);font-size:var(--fs-sm);max-width:none}

/* --- .svc-list / .svc-media - the numbered service switcher -------------- */
.svc-explore{display:grid;gap:var(--s-8)}
@media (min-width:1000px){
  .svc-explore{grid-template-columns:1fr .78fr;gap:var(--s-14);align-items:start}
}
.svc-list{border-top:var(--hairline)}
.svc-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--s-5);
  align-items:center;
  width:100%;
  padding-block:var(--s-5);
  border-bottom:var(--hairline);
  text-align:left;
  text-decoration:none;
  color:inherit;
  transition:color var(--dur) var(--ease);
}
.svc-item:hover,.svc-item.is-active{color:var(--c-brand-text)}
.svc-item__num{
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-muted);
  font-variant-numeric:tabular-nums;
}
.svc-item.is-active .svc-item__num{color:var(--c-brand)}
.svc-item__name{
  font-family:var(--font-head);
  font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:var(--fw-head);
  color:inherit;
  max-width:none;
}
.svc-item__price{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* The row is `auto 1fr auto`, but on mobile a thumbnail makes four children
   and the fourth wraps to a second line. Widening to four columns below the
   panel breakpoint keeps every row on one line whether or not a thumb is
   present. */
@media (max-width:999px){
  .svc-item{grid-template-columns:auto auto 1fr auto;gap:var(--s-4)}
}

/* The synced image panel. Hidden below 1000px, where the list stands alone
   with its own thumbnails instead. */
.svc-media{
  position:relative;
  display:none;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--c-bg-alt);
}
@media (min-width:1000px){
  .svc-media{display:block;position:sticky;top:calc(var(--header-h-scrolled) + var(--s-8))}
}
.svc-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease);
}
.svc-slide.is-active{opacity:1}
.svc-slide img{width:100%;height:100%;object-fit:cover}
.svc-slide__caption{
  position:absolute;
  inset:auto 0 0 0;
  padding:var(--s-12) var(--s-6) var(--s-6);
  background:linear-gradient(180deg,transparent,rgb(12 18 10 / .88));
  color:var(--white);
}
.svc-slide__caption h3,
.svc-slide__caption .h3{color:var(--white)}
.svc-slide__caption p{color:rgb(255 255 255 / .84);max-width:36ch;font-size:var(--fs-sm)}
.svc-slide__caption .arrow-link{margin-top:var(--s-4);color:var(--mint-400)}

/* Mobile thumbnail inside the list row. */
.svc-item__thumb{
  display:block;
  width:64px;height:48px;
  border-radius:var(--radius-sm);
  object-fit:cover;
}
@media (min-width:1000px){.svc-item__thumb{display:none}}

/* --- .svc-grid - service cards ------------------------------------------ */
.svc-grid{display:grid;gap:var(--s-6)}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr)}}

/* --- .trustbar ----------------------------------------------------------- */
.trustbar{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s-5);
  padding-block:var(--s-8);
}
@media (min-width:900px){
  .trustbar{grid-template-columns:repeat(4,1fr);gap:0}
}
.trustbar__item{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding-inline:var(--s-5);
  position:relative;
}
@media (min-width:900px){
  .trustbar__item + .trustbar__item::before{
    content:"";
    position:absolute;
    left:0;top:50%;
    translate:0 -50%;
    width:1px;height:36px;
    background:var(--c-border);
  }
}
.trustbar__item svg{width:24px;height:24px;color:var(--c-brand);flex:none}
.trustbar__text{
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  line-height:1.3;
}
/* On dark heroes. */
.trustbar--on-dark .trustbar__text{color:var(--white)}
.trustbar--on-dark svg{color:var(--mint-400)}
.trustbar--on-dark .trustbar__item + .trustbar__item::before{background:var(--c-border-on-dark)}


/* ============================================================================
   06  CHROME  -  header, nav, drawer, footer, FAB, mobile action bar
   ========================================================================= */

/* --- .site-header --------------------------------------------------------
   Transparent over a dark hero, glass once scrolled. The `.is-scrolled`
   class is toggled by an IntersectionObserver on a 1px sentinel - no scroll
   listener, no rAF throttling. */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--z-header);
  height:var(--header-h);
  transition:height var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-6);
  height:100%;
}

/* Scrolled state, and the permanent state on light-hero pages. */
.site-header.is-scrolled,
.site-header--solid{
  height:var(--header-h-scrolled);
  background:rgb(255 255 255 / .88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--c-border);
}

/* Scroll sentinel - a 1px element the observer watches. */
.scroll-sentinel{
  position:absolute;
  top:0;left:0;
  width:1px;height:1px;
  pointer-events:none;
}

/* The lockup is the client's own wordmark - the name is drawn into the art, so
   there is no separate text node to style. Sized by HEIGHT with width:auto so
   the 273x120 source can never be squashed; the intrinsic width/height on the
   <img> still reserves the right box, so there is no layout shift.
   It is a transparent knockout, so one asset serves both the white header and
   the transparent-over-hero header - no second white variant needed. */
.brand{
  display:inline-flex;
  align-items:center;
  flex:none;
  text-decoration:none;
}
.brand__logo{
  height:34px;
  width:auto;
  display:block;
  transition:opacity var(--dur) var(--ease);
}
.brand:hover .brand__logo{opacity:.82}
.brand__tagline{
  display:none;
  font-size:var(--fs-xs);
  color:var(--c-muted);
  letter-spacing:.02em;
}
@media (min-width:768px){
  .brand__logo{height:38px}
}
.footer__brand .brand__logo{height:40px}

/* --- Transparent-over-hero header ---------------------------------------
   The homepage opens on a full-bleed dark hero, so the header should float
   over it and only turn to glass once you scroll.

   Driven by `body[data-page="home"]`, NOT by a class on <header>. The header
   lives inside a `@partial:header` sentinel and must stay byte-identical
   across all 25 files so scripts/sync_partials.py can stamp it blindly -
   the same reason the active-nav state is done this way. Giving another page
   a dark hero is then a one-line change here, never a markup fork.

   Specificity: the header partial ships `.site-header--solid`, which sets
   background and height unconditionally. `[data-page] .site-header:not(...)`
   is 0,3,0 against its 0,1,0, so these win with no !important. */
[data-page="home"] .site-header:not(.is-scrolled){
  height:var(--header-h);
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
/* The wordmark is a fixed-colour raster, so it cannot be recoloured for the
   dark hero the way the old two-tone lockup was. It does not need to be: the
   brand green is light enough to hold against the hero photograph, and the
   knockout counters let the image behind show through. */
[data-page="home"] .site-header:not(.is-scrolled) .nav__link{color:rgb(255 255 255 / .88)}
[data-page="home"] .site-header:not(.is-scrolled) .nav__link:hover{color:var(--white)}
[data-page="home"] .site-header:not(.is-scrolled) .header-phone{color:rgb(255 255 255 / .88)}
[data-page="home"] .site-header:not(.is-scrolled) .header-phone:hover{color:var(--white)}
[data-page="home"] .site-header:not(.is-scrolled) .nav-toggle{color:var(--white)}
[data-page="home"] .site-header:not(.is-scrolled) .grating{
  background:rgb(255 255 255 / .12);
  border-color:var(--c-border-on-dark);
}
[data-page="home"] .site-header:not(.is-scrolled) .grating:hover{
  background:rgb(255 255 255 / .2);
  border-color:rgb(255 255 255 / .32);
}
[data-page="home"] .site-header:not(.is-scrolled) .grating__score{color:var(--white)}
[data-page="home"] .site-header:not(.is-scrolled) .grating__count{color:rgb(255 255 255 / .78)}
/* The green focus ring disappears against the dark hero - go white. */
[data-page="home"] .site-header:not(.is-scrolled) :focus-visible{outline-color:var(--white)}
/* The green active-nav colour is unreadable on the hero, and the rule above
   would flatten it to the same white as its siblings. Full white keeps the
   active item distinguishable without losing contrast. */
[data-page="home"] .site-header:not(.is-scrolled) .nav__link--home{color:var(--white)}

/* --- .nav - desktop ------------------------------------------------------ */
.nav{display:none}
@media (min-width:1040px){
  .nav{
    display:flex;
    align-items:center;
    gap:var(--s-7);
  }
}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  padding-block:var(--s-2);
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.nav__link:hover{color:var(--c-brand-text)}
.nav__link svg{width:16px;height:16px;transition:rotate var(--dur) var(--ease)}

/* Active page. Driven entirely by body[data-page] so the header markup can
   stay byte-identical across all 25 files and be machine-stamped. */
[data-page="home"]      .nav__link--home,
[data-page^="ac-"]      .nav__link--ac,
[data-page="ac-cleaning"] .nav__link--ac,
[data-page="furniture"] .nav__link--furniture,
[data-page="handyman"]  .nav__link--handyman,
[data-page="about"]     .nav__link--about,
[data-page="contact"]   .nav__link--contact,
[data-page="blog"]      .nav__link--blog,
[data-page^="post-"]    .nav__link--blog{
  color:var(--c-brand-text);
}

/* Mega panel - opens on hover AND focus-within, so it is keyboard-reachable
   without any JavaScript. */
.nav__panel{
  position:absolute;
  top:calc(100% + var(--s-4));
  left:50%;
  translate:-50% 0;
  width:300px;
  padding:var(--s-3);
  background:var(--c-bg);
  border:var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow-panel);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             visibility var(--dur);
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav__item:hover > .nav__link svg,
.nav__item:focus-within > .nav__link svg{rotate:180deg}
.nav__panel-link{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  color:var(--c-heading);
  text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease);
}
.nav__panel-link:hover{background:var(--c-brand-soft);color:var(--c-brand-text)}
.nav__panel-link span:last-child{
  color:var(--c-muted);
  font-size:var(--fs-xs);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  flex:none;
}

/* --- .grating - Google rating badge ---------------------------------------
   The rating and the review count are NOT in this file. They live once, in
   _partials/header.html, and are stamped to all 29 pages by
   sync_partials.py - so refreshing them is a one-line edit, not a sweep.

   Deliberately no `aggregateRating` JSON-LD alongside it: a rating a site
   publishes about itself is not eligible for review rich results, and
   emitting one is the manual-action risk HANDOVER.md flags. The badge links
   straight to the profile instead, so the claim is one tap from its source.

   Three widths, because the header runs out of room before the nav does:
     < 768px   the mark and the score only
     >= 768px  stars appear
     >= 1180px the review count appears, alongside the phone number */
.grating{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:6px var(--s-3);
  border:1px solid var(--c-border);
  border-radius:var(--radius-pill);
  background:var(--c-bg);
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.grating:hover{
  border-color:var(--c-border-strong);
  box-shadow:0 6px 16px -8px rgb(18 23 17 / .25);
}
.grating__mark{width:16px;height:16px;flex:none}
.grating__mark-blue{fill:var(--c-google-blue)}
.grating__mark-green{fill:var(--c-google-green)}
.grating__mark-yellow{fill:var(--c-google-yellow)}
.grating__mark-red{fill:var(--c-google-red)}
.grating__stars{display:none;color:var(--c-star)}
.grating__stars svg{width:12px;height:12px}
.grating__score{
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  font-variant-numeric:tabular-nums;
}
.grating__count{display:none;font-size:var(--fs-xs);color:var(--c-muted)}
@media (min-width:768px){.grating__stars{display:inline-flex;gap:1px}}
@media (min-width:1180px){.grating__count{display:inline}}

.header-phone{
  display:none;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  text-decoration:none;
  white-space:nowrap;
}
@media (min-width:1180px){.header-phone{display:inline-flex}}
.header-phone:hover{color:var(--c-brand-text)}
.header-phone svg{width:18px;height:18px}
.header-actions .btn{display:none}
@media (min-width:768px){.header-actions .btn{display:inline-flex}}

.nav-toggle{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  margin-right:calc(-1 * var(--s-3));
  color:var(--c-heading);
}
@media (min-width:1040px){.nav-toggle{display:none}}
.nav-toggle svg{width:26px;height:26px}

/* --- .drawer - mobile navigation, JS-injected ---------------------------
   Injected at runtime because it carries no crawlable value: every link in
   it is duplicated in the header and footer, which stay in the markup. */
.drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  display:flex;
  flex-direction:column;
  background:var(--c-bg);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--dur-slow) var(--ease),visibility var(--dur-slow);
  overscroll-behavior:contain;
}
.drawer.is-open{transform:translateX(0);visibility:visible}
.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  padding-inline:var(--gutter);
  border-bottom:var(--hairline);
  flex:none;
}
.drawer__body{
  flex:1;
  overflow-y:auto;
  padding:var(--s-6) var(--gutter);
}
.drawer__link{
  display:block;
  padding-block:var(--s-4);
  border-bottom:var(--hairline);
  font-family:var(--font-head);
  font-size:var(--fs-h3);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  text-decoration:none;
}
.drawer__link:hover{color:var(--c-brand-text)}
.drawer__group summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:var(--s-4);
  border-bottom:var(--hairline);
  font-family:var(--font-head);
  font-size:var(--fs-h3);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  cursor:pointer;
  list-style:none;
}
.drawer__group summary::-webkit-details-marker{display:none}
.drawer__group summary svg{width:20px;height:20px;transition:rotate var(--dur) var(--ease)}
.drawer__group[open] summary svg{rotate:180deg}
.drawer__sub{padding-left:var(--s-4)}
.drawer__sub a{
  display:flex;
  justify-content:space-between;
  gap:var(--s-4);
  padding-block:var(--s-3);
  border-bottom:var(--hairline);
  font-size:var(--fs-base);
  color:var(--c-text);
  text-decoration:none;
}
.drawer__sub a:hover{color:var(--c-brand-text)}
.drawer__foot{
  flex:none;
  display:grid;
  gap:var(--s-3);
  padding:var(--s-6) var(--gutter);
  padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom));
  border-top:var(--hairline);
  background:var(--c-bg-alt);
}

/* --- .site-footer -------------------------------------------------------- */
.site-footer{
  padding-top:var(--section-y);
  padding-bottom:calc(var(--s-8) + env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 70% at 50% 0%, rgb(60 162 0 / .16), transparent 58%),
    linear-gradient(165deg, var(--surface-dark-2), var(--surface-dark) 60%);
  color:var(--c-text-on-dark);
}
/* Clear the mobile action bar so the footer isn't covered. */
@media (max-width:767px){
  .site-footer{padding-bottom:calc(var(--action-bar-h) + var(--s-8) + env(safe-area-inset-bottom))}
}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:var(--white);text-decoration:underline}

.footer__grid{
  display:grid;
  gap:var(--s-10);
}
@media (min-width:700px){
  .footer__grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1020px){
  .footer__grid{grid-template-columns:1.4fr .9fr .9fr 1.3fr;gap:var(--s-8)}
}
.footer__brand svg,.footer__brand img{height:44px;width:auto;margin-bottom:var(--s-5)}
.footer__mission{
  color:var(--c-text-on-dark);
  max-width:38ch;
  font-size:var(--fs-sm);
}
.footer__title{
  margin-bottom:var(--s-5);
  font-family:var(--font-head);
  font-size:var(--fs-xs);
  font-weight:var(--fw-head);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint-400);
}
.footer__list li + li{margin-top:var(--s-3)}
.footer__list a{font-size:var(--fs-sm)}

.footer__contact li{
  display:flex;
  gap:var(--s-3);
  align-items:flex-start;
  font-size:var(--fs-sm);
}
.footer__contact li + li{margin-top:var(--s-4)}
.footer__contact svg{width:18px;height:18px;color:var(--mint-400);margin-top:3px;flex:none}
.footer__contact dt{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgb(255 255 255 / .55);
}
.footer__contact dd{margin:0}

.footer__social{
  display:flex;
  gap:var(--s-3);
  margin-top:var(--s-7);
}
.footer__social a{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border:1px solid var(--c-border-on-dark);
  border-radius:50%;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.footer__social a:hover{background:rgb(255 255 255 / .1);border-color:var(--mint-400)}
.footer__social svg{width:20px;height:20px}

.footer__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  margin-top:var(--s-14);
  padding-top:var(--s-6);
  border-top:1px solid var(--c-border-on-dark);
  font-size:var(--fs-sm);
  color:rgb(255 255 255 / .6);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-5)}

/* --- .wa-fab - floating WhatsApp button, JS-injected --------------------- */
.wa-fab{
  position:fixed;
  right:var(--s-5);
  bottom:calc(var(--s-5) + env(safe-area-inset-bottom));
  z-index:var(--z-fab);
  display:grid;
  place-items:center;
  width:58px;height:58px;
  border-radius:50%;
  background:var(--c-whatsapp);
  color:var(--c-whatsapp-ink);
  box-shadow:0 10px 30px rgb(37 211 102 / .45);
  transition:scale var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.wa-fab:hover{scale:1.07;color:var(--c-whatsapp-ink);box-shadow:0 14px 36px rgb(37 211 102 / .55)}
.wa-fab svg{width:30px;height:30px}
/* On mobile the action bar takes over, so lift the FAB above it. */
@media (max-width:767px){
  .wa-fab{bottom:calc(var(--action-bar-h) + var(--s-4) + env(safe-area-inset-bottom))}
}

/* --- .action-bar - mobile-only sticky Call / WhatsApp -------------------- */
.action-bar{
  position:fixed;
  inset:auto 0 0 0;
  z-index:var(--z-fab);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  height:calc(var(--action-bar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--c-border);
  border-top:var(--hairline);
}
@media (min-width:768px){.action-bar{display:none}}
.action-bar a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  background:var(--c-bg);
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-head);
  color:var(--c-heading);
  text-decoration:none;
}
.action-bar a:hover{color:var(--c-heading)}
.action-bar svg{width:20px;height:20px}
.action-bar__wa{color:var(--c-brand-text)}
.action-bar__wa svg{color:var(--c-whatsapp)}
/* Page content must clear the bar. */
@media (max-width:767px){
  body{padding-bottom:var(--action-bar-h)}
}


/* ============================================================================
   07  UTILITIES  (max 12 - if you want a 13th, you want a component)
   ========================================================================= */

.u-center{text-align:center}
.u-narrow{max-width:var(--container-narrow);margin-inline:auto}
.u-measure{max-width:var(--measure)}
.u-mt-4{margin-top:var(--s-4)}
.u-mt-6{margin-top:var(--s-6)}
.u-mt-8{margin-top:var(--s-8)}
.u-mt-12{margin-top:var(--s-12)}
.u-nowrap{white-space:nowrap}
.u-flex-center{display:flex;align-items:center;justify-content:center}
@media (max-width:639px){.u-hide-sm{display:none}}
@media (min-width:1000px){.u-hide-lg{display:none}}


/* ============================================================================
   08  PAGE BLOCKS  -  one-offs only. Used twice? Promote it to section 05.
   ========================================================================= */

/* Homepage pricing snapshot sits on tint so it reads as the page's anchor. */
.p-home__pricing{background:var(--c-bg-tint)}

/* 404 popular-links pills. */
.p-404__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s-3);
  margin-top:var(--s-8);
}

/* Blog post table of contents - sticky beside the prose on wide screens. */
.p-post__layout{display:grid;gap:var(--s-10)}
@media (min-width:1060px){
  .p-post__layout{grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-16)}
  .p-post__aside{order:2}
}
.p-post__toc{
  position:sticky;
  top:calc(var(--header-h-scrolled) + var(--s-8));
  padding:var(--s-6);
  border:var(--hairline);
  border-radius:var(--radius);
  background:var(--c-bg-alt);
}
.p-post__toc li + li{margin-top:var(--s-3)}
.p-post__toc a{
  font-size:var(--fs-sm);
  color:var(--c-text);
  text-decoration:none;
}
.p-post__toc a:hover{color:var(--c-brand-text);text-decoration:underline}


/* ============================================================================
   09  MOTION
   Everything here is scoped under html.motion, which an inline head script
   adds ONLY when prefers-reduced-motion is not set. If that script fails,
   is blocked, or throws, no class is added and every element below renders
   fully visible. Never invert this - the naive version (hide by default,
   reveal with JS) shows a blank page whenever JS fails.
   ========================================================================= */

html.motion [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-reveal) var(--ease);
}
html.motion [data-reveal].is-in{
  opacity:1;
  transform:none;
}
/* Stagger children of a revealed group by 60ms each, capped at 6. */
html.motion [data-reveal-group] > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-reveal) var(--ease);
}
html.motion [data-reveal-group].is-in > *{opacity:1;transform:none}
html.motion [data-reveal-group].is-in > :nth-child(1){transition-delay:0ms}
html.motion [data-reveal-group].is-in > :nth-child(2){transition-delay:60ms}
html.motion [data-reveal-group].is-in > :nth-child(3){transition-delay:120ms}
html.motion [data-reveal-group].is-in > :nth-child(4){transition-delay:180ms}
html.motion [data-reveal-group].is-in > :nth-child(5){transition-delay:240ms}
html.motion [data-reveal-group].is-in > :nth-child(n+6){transition-delay:300ms}

/* The check mark in .nlist--check draws itself once revealed. */
html.motion .nlist--check .nlist__num path{
  stroke-dashoffset:24;
  transition:stroke-dashoffset var(--dur-reveal) var(--ease) 120ms;
}
html.motion [data-reveal].is-in .nlist__num path,
html.motion [data-reveal-group].is-in .nlist__num path{stroke-dashoffset:0}

@keyframes marquee-left{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes marquee-right{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}


/* ============================================================================
   10  REDUCED MOTION  -  the only place !important is permitted
   ========================================================================= */

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast:.01ms;
    --dur:.01ms;
    --dur-slow:.01ms;
    --dur-reveal:.01ms;
  }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  /* Marquees stop dead rather than snapping to their end frame. */
  .areas__row{animation-play-state:paused !important}
  html{scroll-behavior:auto}
}