@charset "UTF-8";
/* ==========================================================================
   KINGS ESTATE ADVISOR — styles.css
   Property dealers - Town planners - Construction builders. Serving
   Rawalpindi, Islamabad and all surroundings since 1998.

   Single production stylesheet. No build step, no preprocessor, no libraries.

   TABLE OF CONTENTS
   01. Modern reset
   02. Design tokens (:root)
   03. Base typography
   04. Urdu (lang="ur") + RTL base
   05. Accessibility helpers
   06. Layout: container, section, grid, stack, cluster
   07. Section heads, eyebrow, headings, lead, prose
   08. Buttons
   09. Site header, topbar, brand, nav, toggles
   10. Hero
   11. Breadcrumb
   12. Badges, pills, tags, chips
   13. Cards (base) + card variants
   14. Lists (checklist, steps, bullets, links, definitions, areas)
   15. Accordion + Tabs
   16. Forms, choice cards, wizard, progress, submit states
   17. Alerts + notices
   18. Split media/text, media frames, aspect boxes
   19. CTA band
   20. Stats strip
   21. Tables
   22. Dividers + ornaments
   23. Contact blocks, hours, map placeholder
   24. Site footer
   25. Floating actions + back to top
   26. Trust strip
   27. Utilities
   28. Scroll reveal + animation hooks
   29. Responsive refinements
   30. Print
   31. Reduced motion
   ========================================================================== */

/* ==========================================================================
   01. MODERN RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] { list-style: none; }

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

/* Must NOT override an icon's own fill. A CSS declaration beats a presentation
   attribute, so a bare `svg { fill: currentColor }` filled every fill="none"
   outline icon solid — 64 of them on the homepage alone. */
svg:not([fill]) { fill: currentColor; }

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

button { background: none; border: 0; }

a { color: inherit; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: 0;
  block-size: 1px;
  background: var(--border-default);
}

fieldset { border: 0; min-inline-size: 0; }

[hidden] { display: none !important; }

/* ==========================================================================
   02. DESIGN TOKENS
   Tier 1 = raw palette (--color-*). Tier 2 = semantic roles that dark
   surfaces re-map. Components MUST consume tier 2 wherever possible.
   ========================================================================== */

:root {
  /* --- Brand palette: deep authoritative navy ---------------------------- */
  --color-primary-900: #061A2E;
  --color-primary-800: #0A2440;
  --color-primary-700: #0E2F52;
  --color-primary-600: #123B67;
  --color-primary-500: #17497E;
  --color-primary-400: #2C6098;
  --color-primary-300: #5A87B5;
  --color-primary-200: #A3BED6;
  --color-primary-100: #D6E3EF;
  --color-primary-50:  #EEF4F9;

  /* --- Accent palette: warm gold / brass, "established 1998" ------------- */
  --color-accent-900: #4A3208;
  --color-accent-800: #6B4A0E;
  --color-accent-700: #8C6415;
  --color-accent-600: #A87E22;
  --color-accent-500: #C79A3A;
  --color-accent-400: #D9B45C;
  --color-accent-300: #E6CB8A;
  --color-accent-200: #F0DFB6;
  --color-accent-100: #F7EDD8;
  --color-accent-50:  #FCF8EF;

  /* --- Neutrals --------------------------------------------------------- */
  --color-neutral-950: #0B1420;
  --color-neutral-900: #10202F;
  --color-neutral-800: #22323F;
  --color-neutral-700: #33465A;
  --color-neutral-600: #4A5A6A;
  --color-neutral-500: #5E6E7E;
  --color-neutral-400: #8C9AA8;
  --color-neutral-300: #B4C2CE;
  --color-neutral-200: #D3DCE5;
  --color-neutral-100: #E4EAF0;
  --color-neutral-50:  #F1F5F9;
  --color-white: #FFFFFF;

  /* --- Feedback --------------------------------------------------------- */
  --color-success: #1F6B4E;
  --color-success-soft: #E7F2EC;
  --color-warning: #8A5A12;
  --color-warning-soft: #FBF1DF;
  --color-danger: #A32323;
  --color-danger-soft: #FBEAEA;
  --color-info: #17497E;
  --color-info-soft: #E8F0F8;

  /* --- Channel colours --------------------------------------------------- */
  --color-whatsapp: #0F7A41;
  --color-whatsapp-hover: #0B6134;

  /* --- Semantic: text ---------------------------------------------------- */
  --text-primary: #10202F;
  --text-secondary: #4A5A6A;
  --text-muted: #5E6E7E;
  --text-inverse: #FFFFFF;
  --text-accent: #8C6415;
  --text-link: #123B67;
  --text-link-hover: #17497E;

  /* --- Semantic: surfaces ------------------------------------------------ */
  --surface-page: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-sunken: #F5F7FA;
  --surface-muted: #EEF2F6;
  --surface-inverse: #0A2440;
  --surface-accent-soft: #FCF8EF;
  --surface-overlay: rgba(6, 26, 46, 0.62);

  /* --- Semantic: borders ------------------------------------------------- */
  --border-subtle: #E4EAF0;
  --border-default: #D3DCE5;
  --border-strong: #B4C2CE;
  --border-accent: #D9B45C;

  /* Control boundaries only. WCAG 1.4.11 wants 3:1 for the visual boundary
     that identifies a UI component, and --border-default (1.39:1 on white)
     and --border-strong (1.82:1) both fail it. These two clear 3:1 against
     EVERY light surface a control can sit on, not just #FFFFFF:
       --border-control        3.59:1 on --surface-card   #FFFFFF
                               3.35:1 on --surface-sunken #F5F7FA
                               3.19:1 on --surface-muted  #EEF2F6
                               3.39:1 on --color-accent-50 #FCF8EF (checked card)
       --border-control-hover  4.62:1 on --surface-card
     --border-default stays as-is for decorative edges (dividers, card edges,
     hours rows), where 1.4.11 does not apply. */
  --border-control: #78899A;
  --border-control-hover: #64778A;

  /* --- Focus ------------------------------------------------------------- */
  --focus-ring-color: #17497E;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* --- Spacing scale (4px base) ------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 8rem;
  --section-space: clamp(3.25rem, 2.2rem + 4.6vw, 6rem);
  --section-space-tight: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

  /* --- Radii -------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Shadows ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(6, 26, 46, 0.06);
  --shadow-sm: 0 1px 3px rgba(6, 26, 46, 0.08), 0 1px 2px rgba(6, 26, 46, 0.04);
  --shadow-md: 0 4px 10px rgba(6, 26, 46, 0.08), 0 2px 4px rgba(6, 26, 46, 0.04);
  --shadow-lg: 0 12px 26px rgba(6, 26, 46, 0.10), 0 4px 8px rgba(6, 26, 46, 0.05);
  --shadow-xl: 0 24px 48px rgba(6, 26, 46, 0.14), 0 8px 16px rgba(6, 26, 46, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-accent: 0 10px 24px rgba(140, 100, 21, 0.20);
  --shadow-focus: 0 0 0 3px rgba(23, 73, 126, 0.28);

  /* --- Font families ------------------------------------------------------ */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", "Plus Jakarta Sans", Georgia, "Times New Roman", serif;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Font sizes --------------------------------------------------------- */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --step-display: clamp(2.25rem, 1.60rem + 3.20vw, 4rem);
  --step-h1: clamp(1.90rem, 1.45rem + 2.20vw, 3.15rem);
  --step-h2: clamp(1.60rem, 1.32rem + 1.40vw, 2.40rem);
  --step-h3: clamp(1.30rem, 1.16rem + 0.70vw, 1.75rem);
  --step-h4: clamp(1.125rem, 1.06rem + 0.32vw, 1.30rem);
  --step-lead: clamp(1.05rem, 1.00rem + 0.35vw, 1.25rem);

  /* --- Line heights + tracking -------------------------------------------- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-urdu: 2;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-eyebrow: 0.14em;

  /* --- Font weights -------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- Transitions --------------------------------------------------------- */
  --transition-fast: 140ms;
  --transition-base: 220ms;
  --transition-slow: 360ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-colors: color var(--transition-fast) var(--ease-out),
                       background-color var(--transition-fast) var(--ease-out),
                       border-color var(--transition-fast) var(--ease-out);

  /* --- Containers ---------------------------------------------------------- */
  --container-sm: 40rem;
  --container-md: 52rem;
  --container-lg: 66rem;
  --container-xl: 75rem;
  --container-2xl: 82.5rem;
  --container-gutter: clamp(1rem, 4vw, 2rem);

  /* --- Z-index layers ------------------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  /* The nav backdrop must sit BELOW the drawer it dims: above the header,
     under the panel. On --z-overlay it covered the drawer and intercepted
     every tap, so the menu closed instead of navigating. */
  --z-nav-backdrop: 250;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-skiplink: 700;
  --z-max: 9999;

  /* --- Component sizing ----------------------------------------------------- */
  --header-height: 4.5rem;
  --topbar-height: 2.5rem;
  --control-height: 3rem;
  --control-height-sm: 2.75rem;   /* 44px — WCAG 2.5.5 touch-target minimum.
                                     Was 2.375rem/38px, which made .nav-toggle
                                     (the only route to the nav below 1024px)
                                     and .lang-toggle (the only route to Urdu)
                                     both under-sized on a phone. */
  --control-height-lg: 3.5rem;
  --icon-size: 1.25rem;
  --border-width: 1px;
  --border-width-thick: 2px;
}

/* Dark surfaces re-map the semantic tier so every component adapts with no
   duplicated component rules. */
.section--dark,
.hero,
.cta-band,
.site-footer,
.card--dark,
.topbar,
.on-dark {
  --text-primary: #F2F6FA;
  --text-secondary: #C2D2E0;
  --text-muted: #93A8BA;
  --text-accent: #E6CB8A;
  --text-link: #E6CB8A;
  --text-link-hover: #F0DFB6;
  --surface-card: rgba(255, 255, 255, 0.055);
  --surface-sunken: rgba(255, 255, 255, 0.035);
  --surface-muted: rgba(255, 255, 255, 0.08);
  --surface-accent-soft: rgba(217, 180, 92, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-control: rgba(255, 255, 255, 0.46);        /* 4.4:1 on the navy */
  --border-control-hover: rgba(255, 255, 255, 0.68);  /* 7.9:1 on the navy */
  --focus-ring-color: #E6CB8A;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.38);
  color: var(--text-primary);
}

/* ==========================================================================
   03. BASE TYPOGRAPHY
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-block-size: 100%;
  /* Site-wide last resort against a long unbreakable token — an email address,
     a URL, a pasted reference number — setting a line wider than its box on a
     320px handset. `break-word` only ever breaks a word that could not fit on a
     line of its own, so it changes nothing for ordinary copy in either script.
     It does NOT lower an element's min-content size, so it cannot rescue a grid
     track or a flex item on its own: those need `minmax(0, 1fr)` /
     `min-inline-size: 0` (see sections 06, 14, 18, 24) or `overflow-wrap:
     anywhere`, which the classes that actually carry those tokens declare. */
  overflow-wrap: break-word;
  /* NO overflow-x: hidden here. `html` sets no overflow, so a value on `body`
     propagates to the viewport and silently CLIPS anything that runs past the
     inline edge instead of revealing it — which is how the header overflow at
     360px managed to hide the menu button rather than show a scrollbar. The
     few elements that legitimately paint outside their box clip themselves;
     see the .hero / .cta-band / .section--pattern rule in section 19. */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }
h4 { font-size: var(--step-h4); line-height: var(--leading-snug); }
h5 { font-size: var(--font-size-lg); line-height: var(--leading-snug); }
h6 {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

p { text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: var(--transition-colors);
}

a:hover { color: var(--text-link-hover); }

strong, b { font-weight: var(--weight-bold); }

small { font-size: var(--font-size-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

blockquote { font-family: var(--font-display); }

::selection {
  background-color: var(--color-accent-200);
  color: var(--color-primary-900);
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Universal focus-visible treatment on every interactive element. */
:where(a, button, input, select, textarea, summary, details, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   04. URDU (lang="ur") + RTL BASE
   Nastaliq needs a much taller line box and must never receive tracking.
   ========================================================================== */

html[lang="ur"] body {
  font-family: var(--font-urdu);
  font-size: 1.0625rem;
  line-height: var(--leading-urdu);
  letter-spacing: normal;
  word-spacing: 0.02em;
}

html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3,
html[lang="ur"] h4,
html[lang="ur"] h5,
html[lang="ur"] h6,
html[lang="ur"] .heading-1,
html[lang="ur"] .heading-2,
html[lang="ur"] .heading-3,
html[lang="ur"] .heading-4,
html[lang="ur"] .display,
html[lang="ur"] .font-display,
html[lang="ur"] .hero__title,
html[lang="ur"] blockquote {
  font-family: var(--font-urdu);
  letter-spacing: normal;
  line-height: 1.85;
  font-weight: var(--weight-bold);
}

/* Nastaliq slopes downward across each line, so its real ink box is far taller
   than the em box a Latin face occupies. At body and sub-heading sizes 1.85 is
   enough, but at display sizes the tail of one line lands on the head of the
   next and the words physically collide. Large Urdu headings therefore need
   both a looser leading and a smaller cap size than their Latin counterparts —
   Nastaliq reads larger than Latin at the same font-size. */
html[lang="ur"] .hero__title,
html[lang="ur"] .display,
html[lang="ur"] .heading-1,
html[lang="ur"] h1 {
  font-size: clamp(1.6rem, 1.05rem + 2.6vw, 2.9rem);
  line-height: 2.35;
  text-wrap: normal;
}

html[lang="ur"] .heading-2,
html[lang="ur"] h2 {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  line-height: 2.15;
}

html[lang="ur"] .heading-3,
html[lang="ur"] h3 {
  line-height: 2;
}

/* Nastaliq is a joined script: any letter-spacing (positive OR the negative
   --tracking-tight) breaks the joins, and uppercase is meaningless. Every
   class that sets letter-spacing AND can hold a translated string must be
   listed here. */
html[lang="ur"] .eyebrow,
html[lang="ur"] .badge,
html[lang="ur"] .pill,
html[lang="ur"] .tag,
html[lang="ur"] .btn,
html[lang="ur"] .nav__link,
html[lang="ur"] h6,
html[lang="ur"] .footer__title,
html[lang="ur"] .stat__label,
html[lang="ur"] .uppercase,
html[lang="ur"] .tracking-wide,
html[lang="ur"] .brand__name,
html[lang="ur"] .brand__tagline,
html[lang="ur"] .hero__badge,
html[lang="ur"] .contact-item__label,
html[lang="ur"] .area-card__count,
html[lang="ur"] .team-card__role,
html[lang="ur"] .footer__brand-since,
html[lang="ur"] .definition-list dt,
html[lang="ur"] .table thead th {
  letter-spacing: normal;
  text-transform: none;
}

/* Two brand strings carry Urdu text but are <span>s, so the heading rule
   above misses them — and --font-display (Playfair Display) has no Urdu
   glyphs, so they would fall through to an arbitrary system serif. */
html[lang="ur"] .brand__name,
html[lang="ur"] .footer__brand-name { font-family: var(--font-urdu); }

/* .brand clips its overflow (see section 09); Nastaliq needs more room than
   the 1.15 Latin line-height or its descenders are cut off. */
html[lang="ur"] .brand__text { line-height: 1.9; }

/* NOTE — there is deliberately no `html[lang="ur"] … { white-space: normal }`
   block here any more. It used to relax .btn, .tabs__tab and .badge for Urdu
   only, which meant an English label could not shrink at all: a long
   `.btn--lg` on the homepage held a min-content width of 477px and pushed the
   viewport into horizontal scroll at every width from 320px to 430px. Wrapping
   is now the base behaviour of all three components in EVERY language (see
   sections 08, 12 and 15), so a copy change in either language can no longer
   reintroduce that overflow. Only the Nastaliq line-height needs a language
   rule, and that is the block below. */

html[lang="ur"] .btn,
html[lang="ur"] .nav__link,
html[lang="ur"] .badge,
html[lang="ur"] .pill { line-height: 1.7; }

html[lang="ur"] .input,
html[lang="ur"] .select,
html[lang="ur"] .textarea { line-height: 1.9; }

/* Latin runs inside Urdu copy (phone numbers, emails, sector names). */
html[lang="ur"] .latin,
html[lang="ur"] [dir="ltr"] {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
}

/* --- The complete set of directional overrides. Everything else is handled
   by logical properties. --------------------------------------------------- */
[dir="rtl"] .icon-flip,
[dir="rtl"] .btn__icon--arrow,
[dir="rtl"] .card__link .icon-flip,
[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
  transform: scaleX(-1);
}

/* .link-list__item::after used to live in the block above, but it is the one
   target there that ALSO animates its own transform on :hover. At (0,2,1) it
   tied with `.link-list__item:hover::after` and lost on source order, so the
   flip was defeated in the only state the arrow is ever visible. Its pair now
   sits next to the base rule in section 14 instead. */

[dir="rtl"] .hero__glow { background-position: 88% 12%, 8% 82%; }

[dir="rtl"] .corner-accent::before {
  transform: scaleX(-1);
}

[dir="rtl"] .accordion__item.is-open .accordion__icon { transform: rotate(-180deg); }

[dir="rtl"] .nav-toggle__bars span { transform-origin: right center; }

/* `transform-origin` has no logical grammar — it takes left | right | top |
   bottom | center | <length-percentage> only — so the accent bar gets the
   physical default plus this mirror, exactly like .nav-toggle__bars span. */
[dir="rtl"] .service-card::before { transform-origin: right center; }

/* ==========================================================================
   05. ACCESSIBILITY HELPERS
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: var(--z-skiplink);
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-primary-800);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: inset-block-start var(--transition-fast) var(--ease-out);
}

.skip-link:focus {
  inset-block-start: 0;
  color: var(--color-white);
}

/* #main carries tabindex="-1" so the skip link lands focus there even with no
   JavaScript. It must never show a ring for a pointer user; keyboard users
   still get one from the :focus-visible rule in section 03. */
.site-main:focus { outline: none; }

/* Progressive enhancement gates. The head bootstrap sets html[data-js="on"].
   CAUTION: the `revert` below restores the element's UA display, not any
   component display it may also carry, so `.js-only` and `.no-js-only` belong
   only on plain wrappers (a bare <div>/<p>). Putting either on a component that
   sets its own display — .cluster, .btn, .float-btn, .card — would silently
   flatten it to `block`/`inline`. See the note on .hide-desktop in section 27. */
.js-only { display: none; }
html[data-js="on"] .js-only { display: revert; }
html[data-js="on"] .no-js-only { display: none !important; }

/* ==========================================================================
   06. LAYOUT: CONTAINER, SECTION, GRID, STACK, CLUSTER
   ========================================================================== */

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

.container--narrow { max-inline-size: var(--container-md); }
.container--medium { max-inline-size: var(--container-lg); }
.container--wide   { max-inline-size: var(--container-2xl); }
.container--prose  { max-inline-size: var(--container-sm); }
.container--full   { max-inline-size: none; }

.section {
  padding-block: var(--section-space);
  position: relative;
}

.section--tight { padding-block: var(--section-space-tight); }
.section--flush { padding-block: 0; }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section--muted { background-color: var(--surface-sunken); }
.section--soft  { background-color: var(--surface-muted); }
.section--accent {
  background-color: var(--surface-accent-soft);
  border-block: var(--border-width) solid var(--color-accent-200);
}

.section--dark {
  background-color: var(--color-primary-800);
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(199, 154, 58, 0.16) 0%, rgba(199, 154, 58, 0) 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(44, 96, 152, 0.30) 0%, rgba(44, 96, 152, 0) 60%);
}

.section--pattern {
  background-color: var(--surface-sunken);
  background-image:
    linear-gradient(rgba(163, 190, 214, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163, 190, 214, 0.28) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
}

.section__bleed {
  margin-inline: calc(var(--container-gutter) * -1);
}

/* --- Grid ----------------------------------------------------------------
   Every track in this file is declared `minmax(0, 1fr)`, never a bare `1fr`.
   A bare `fr` track has an `auto` minimum, so the widest unbreakable thing in
   the column — a long word, an email address, a nowrap label — becomes the
   column's floor and pushes the whole grid past the viewport. `minmax(0, …)`
   pins that floor at zero and also switches off the automatic minimum size of
   the items inside it, which is what lets a column actually get narrow on a
   320px handset. */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

.grid--gap-sm { gap: var(--space-4); }
.grid--gap-lg { gap: var(--space-8); }
.grid--gap-xl { gap: var(--space-9); }

.grid--auto      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--auto-sm   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grid--auto-lg   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.grid--align-start  { align-items: start; }
.grid--align-center { align-items: center; }

/* --- Stack (vertical rhythm) --------------------------------------------- */
.stack > * + * { margin-block-start: var(--space-5); }
.stack--xs > * + * { margin-block-start: var(--space-2); }
.stack--sm > * + * { margin-block-start: var(--space-3); }
.stack--lg > * + * { margin-block-start: var(--space-7); }
.stack--xl > * + * { margin-block-start: var(--space-9); }

/* --- Cluster (inline group that wraps) ------------------------------------ */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--sm { gap: var(--space-2); }
.cluster--lg { gap: var(--space-5); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

/* --- Sidebar layout ------------------------------------------------------- */
.sidebar-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.sidebar-layout__aside { min-inline-size: 0; }
.sidebar-layout__main  { min-inline-size: 0; }

.sticky-aside { position: static; }

/* ==========================================================================
   07. SECTION HEADS, EYEBROW, HEADINGS, LEAD, PROSE
   ========================================================================== */

.section-head {
  max-inline-size: 46rem;
  margin-block-end: var(--space-8);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--wide { max-inline-size: 60rem; }

.section-head > * + * { margin-block-start: var(--space-4); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);   /* 14px readability floor, was 12px */
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-block-end: var(--space-3);
}

.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-300));
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}

.section-head--center .eyebrow { justify-content: center; }
.eyebrow--light { color: var(--color-accent-300); }
.eyebrow--plain::before { display: none; }

.display {
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.heading-1 { font-family: var(--font-display); font-size: var(--step-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.heading-2 { font-family: var(--font-display); font-size: var(--step-h2); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.heading-3 { font-family: var(--font-display); font-size: var(--step-h3); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.heading-4 { font-family: var(--font-display); font-size: var(--step-h4); font-weight: var(--weight-bold); line-height: var(--leading-snug); }

.lead {
  font-family: var(--font-sans);
  font-size: var(--step-lead);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-inline-size: 62ch;
}

.section-head--center .lead { margin-inline: auto; }

.rule-accent {
  inline-size: 3.5rem;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent-600), var(--color-accent-300));
  border: 0;
  margin-block: var(--space-5);
}

.section-head--center .rule-accent { margin-inline: auto; }

/* --- Prose (long-form legal / article copy) -------------------------------- */
.prose {
  max-inline-size: 68ch;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  /* Legal copy carries bare URLs and email addresses; without this a single
     long token sets the min-content width and overflows a 360px viewport.
     `anywhere` rather than `break-word` because the lists below are grids: only
     `anywhere` lowers the min-content size that an auto track measures itself
     against. It breaks no word that already fits, so ordinary copy is
     unchanged in either script. */
  overflow-wrap: anywhere;
}

.prose > * + * { margin-block-start: var(--space-5); }

.prose h2 {
  font-size: var(--step-h3);
  color: var(--text-primary);
  margin-block-start: var(--space-9);
}

.prose h3 {
  font-size: var(--step-h4);
  color: var(--text-primary);
  margin-block-start: var(--space-7);
}

.prose h2:first-child,
.prose h3:first-child { margin-block-start: 0; }

.prose ul,
.prose ol {
  padding-inline-start: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--color-accent-600); }

.prose a {
  color: var(--text-link);
  text-decoration: underline;
}

.prose blockquote {
  border-inline-start: 3px solid var(--color-accent-500);
  padding-inline-start: var(--space-5);
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  font-style: italic;
}

.prose table { inline-size: 100%; }

/* ==========================================================================
   08. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--color-primary-700);
  --btn-fg: var(--color-white);
  --btn-border: var(--color-primary-700);
  --btn-bg-hover: var(--color-primary-600);
  --btn-border-hover: var(--color-primary-600);
  --btn-shadow: var(--shadow-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  padding-inline: var(--space-6);
  padding-block: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  /* A label MUST be able to wrap, in every language. `white-space: nowrap`
     made each label's min-content width its full one-line width, so a long
     label simply could not shrink: two `.btn--secondary.btn--lg` labels on the
     homepage measured 477px against the 328px available inside .container and
     put a horizontal scrollbar on the page at 320/360/390/412/430px. Shortening
     those two labels would have fixed the symptom until the next copy change;
     wrapping fixes the shape of the component.
     `max-inline-size: 100%` stops a button from exceeding its container even
     when its longest single word still cannot fit, and `overflow-wrap` breaks
     that word rather than letting it paint outside the border.
     A wrapped label still reads as a deliberate button: `padding-block` and
     `min-block-size` grow the box symmetrically around the extra line,
     `text-align: center` centres both lines, and `align-items: center` keeps
     the icon on the optical centre of the whole stack rather than on the first
     line. Genuinely short controls that must never break — the icon-only
     button below, `.input-group__addon`, `.table thead th` — keep their own
     nowrap, and the `.nowrap` utility is there for one-off cases. */
  white-space: normal;
  overflow-wrap: break-word;
  max-inline-size: 100%;
  cursor: pointer;
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-md);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  transition: background-color var(--transition-fast) var(--ease-out),
              border-color var(--transition-fast) var(--ease-out),
              color var(--transition-fast) var(--ease-out),
              transform var(--transition-fast) var(--ease-out),
              box-shadow var(--transition-fast) var(--ease-out);
}

.btn:hover {
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* --- Variants -------------------------------------------------------------- */
.btn--primary {
  --btn-bg: var(--color-primary-700);
  --btn-border: var(--color-primary-700);
  --btn-bg-hover: var(--color-primary-500);
  --btn-border-hover: var(--color-primary-500);
  --btn-fg: var(--color-white);
}

.btn--accent {
  --btn-bg: var(--color-accent-500);
  --btn-border: var(--color-accent-500);
  --btn-bg-hover: var(--color-accent-400);
  --btn-border-hover: var(--color-accent-400);
  --btn-fg: var(--color-primary-900);
  --btn-shadow: var(--shadow-accent);
  font-weight: var(--weight-bold);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary-700);
  /* Transparent fill: this border IS the component boundary, so it needs the
     1.4.11 control token, not the 1.82:1 decorative one. */
  --btn-border: var(--border-control);
  --btn-bg-hover: var(--color-primary-50);
  --btn-border-hover: var(--color-primary-400);
  --btn-shadow: none;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-border: transparent;
  --btn-bg-hover: var(--surface-muted);
  --btn-border-hover: transparent;
  --btn-shadow: none;
}

/* A .btn--secondary or .btn--ghost dropped on any dark surface would otherwise
   be navy text on navy, unreadable until hover reveals it. These re-map the same
   tokens the dark-surface block re-maps, so either variant is safe anywhere and
   an author cannot reintroduce the bug by picking the wrong class. */
.section--dark .btn--secondary, .hero .btn--secondary, .cta-band .btn--secondary,
.site-footer .btn--secondary, .card--dark .btn--secondary, .topbar .btn--secondary,
.on-dark .btn--secondary,
.section--dark .btn--ghost, .hero .btn--ghost, .cta-band .btn--ghost,
.site-footer .btn--ghost, .card--dark .btn--ghost, .topbar .btn--ghost,
.on-dark .btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: var(--color-white);
  --btn-border: rgba(255, 255, 255, 0.34);
  --btn-bg-hover: rgba(255, 255, 255, 0.16);
  --btn-border-hover: var(--color-accent-300);
  --btn-shadow: none;
}

.btn--whatsapp {
  --btn-bg: var(--color-whatsapp);
  --btn-border: var(--color-whatsapp);
  --btn-bg-hover: var(--color-whatsapp-hover);
  --btn-border-hover: var(--color-whatsapp-hover);
  --btn-fg: var(--color-white);
}

.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: var(--color-white);
  --btn-border: rgba(255, 255, 255, 0.34);
  --btn-bg-hover: rgba(255, 255, 255, 0.16);
  --btn-border-hover: var(--color-accent-300);
  --btn-shadow: none;
}

/* --- Sizes ----------------------------------------------------------------- */
.btn--sm {
  min-block-size: var(--control-height-sm);
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  min-block-size: var(--control-height-lg);
  padding-inline: var(--space-8);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

.btn--block {
  display: flex;
  inline-size: 100%;
}

/* Icon-only: no text to wrap, and a fixed square well under any viewport. */
.btn--icon {
  padding-inline: var(--space-3);
  inline-size: var(--control-height);
  min-inline-size: var(--control-height);
  padding-block: 0;
  white-space: nowrap;
}

.btn__icon {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  flex: 0 0 auto;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn-group--center { justify-content: center; }
.btn-group--stretch > .btn { flex: 1 1 12rem; }

/* --- Loading / submit state -------------------------------------------------- */
.btn.is-loading {
  pointer-events: none;
  color: transparent !important;
  position: relative;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-circle);
  color: var(--btn-fg);
  animation: kea-spin 700ms linear infinite;
}

@keyframes kea-spin { to { transform: rotate(360deg); } }

/* Text link that behaves like a button-ish arrow link. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  text-decoration: none;
}

.link-arrow:hover { gap: var(--space-3); text-decoration: underline; }
.link-arrow .btn__icon { transition: transform var(--transition-fast) var(--ease-out); }

/* An inline <svg> with no width/height attribute and no sizing rule falls back
   to the replaced-element default of 300x150 — which is how one "Learn more"
   arrow rendered at 235px. This is the floor; every component rule that sizes
   an icon is more specific and still wins. */
svg:not([width]):not([height]) {
  inline-size: 1.25em;
  block-size: 1.25em;
}

/* ==========================================================================
   09. SITE HEADER, TOPBAR, BRAND, NAV, TOGGLES
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--surface-page);
  border-block-end: var(--border-width) solid var(--border-subtle);
  transition: box-shadow var(--transition-base) var(--ease-out),
              background-color var(--transition-base) var(--ease-out);
}

.site-header.is-stuck {
  box-shadow: var(--shadow-md);
  border-block-end-color: transparent;
}

.site-main { display: block; }

/* --- Topbar ---------------------------------------------------------------- */
.topbar {
  background-color: var(--color-primary-900);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);   /* 14px floor — this bar carries the phone
                                       number, email and office hours */
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  min-block-size: var(--topbar-height);
  padding-block: var(--space-2);
  text-align: center;
}

.topbar__item {
  color: var(--text-secondary);
  margin: 0;
}

.topbar__links {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-inline-start: auto;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 1.5rem;   /* 24px — WCAG 2.5.8; fits the 40px topbar row */
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.topbar__link:hover { color: var(--color-accent-300); }
.topbar__link svg { inline-size: 0.95rem; block-size: 0.95rem; }

/* --- Header inner row -------------------------------------------------------- */
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--header-height);
  padding-block: var(--space-3);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.header__cta { display: none; }

/* --- Brand -------------------------------------------------------------------- */
/* The brand must be able to give way. With `flex: 0 0 auto` and two nowrap
   text lines it could not compress, so at 360px the header flex line needed
   ~415px against 328px available and pushed #navToggle off the inline edge —
   where body { overflow-x: hidden } then clipped it, leaving small-phone
   visitors with no way to open the navigation at all. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  flex: 0 1 auto;
  min-inline-size: 0;
  overflow: hidden;
}

.brand__mark {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-inline-size: 0;
}

/* The firm's name is its identity: it must never be cut in half. `.brand`
   clips its overflow, so the name has to be able to WRAP rather than overflow.
   `white-space: nowrap` used to come back at 480px, which turned every squeeze
   into a mid-word cut — and the desktop header IS squeezed: at 1280px the flex
   line offered .brand 205px against the 330px it asked for and rendered the
   181px name inside 147px, so the company name read "Kings Estate Advi" on
   every laptop and desktop. Normal wrapping is the base behaviour at every
   width in every language now, so no future copy change, nav item or CTA can
   bring the cut back — the worst case is a second line, which reads as
   deliberate.
   Measured with the strapline and the duplicate WhatsApp CTA yielding first
   (section 29): one line from 400px to 1023px; two below 400px, as before; two
   from 1024px, where the horizontal nav over-subscribes the row by ~190px.
   That last case costs the header no height at all — the nav's own links are
   already wrapping to two and three lines there and are the tallest thing on
   the row. */
.brand__name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-800);
  line-height: 1.15;
  /* Wraps only on phones, where there is genuinely no room. From tablet up it
     is forced onto one line (below) — a two-line wordmark beside a square mark
     reads as broken, and it was what made the header 163px tall. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* One line where the row has room. Between 1024px and ~1080px the horizontal
   nav appears and over-subscribes the row, so the name must be allowed to wrap
   again there — otherwise .brand's overflow:hidden slices it mid-word. */
@media (min-width: 48em) and (max-width: 63.999em) {
  .brand__name { white-space: nowrap; overflow-wrap: normal; }
}

@media (min-width: 67.5em) {
  .brand__name { white-space: nowrap; overflow-wrap: normal; }
}

/* Nastaliq's descenders and kashida sweeps need far more leading than Latin.
   Any component that sets a tight Latin line-height must relax it in Urdu or
   the lines physically overprint. */
html[lang="ur"] .contact-item__value,
html[lang="ur"] .radio-card__title,
html[lang="ur"] .card__title,
html[lang="ur"] .area-card__title,
html[lang="ur"] .feature-card__title,
html[lang="ur"] .team-card__name,
html[lang="ur"] .step__title {
  line-height: 1.9;
}

/* Nav labels must never wrap. A wrapped "Areas We Cover" was rendering three
   lines deep and dragging the whole header to 179px. */
.nav__link { white-space: nowrap; }

/* Decorative reinforcement, not navigation — which is what makes it the right
   thing to drop whenever the header row is over-subscribed. It is the widest
   single item in .brand: 242px, against 181px for the brand name itself. It
   must stay on one line to read as a strapline, so unlike the name it cannot
   wrap its way out of trouble — it is hidden by default and shown only in the
   one band where it was MEASURED to fit end to end. See the header-fit budget
   in section 29 for the numbers.
   `overflow`/`text-overflow` are the graceful failure mode for the day someone
   lengthens the strapline or adds another header control: it then ends in an
   ellipsis, which reads as deliberate, instead of being sliced mid-letter by
   .brand's `overflow: hidden`. Safe on this element specifically because the
   text is uppercased and therefore has no descenders for the clip to eat. */
.brand__tagline {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);   /* 12px, was 10px */
  font-weight: var(--weight-semibold);
  /* --tracking-wide (0.06em), not --tracking-eyebrow (0.14em). At 12px across
     31 characters that 0.08em difference is 30px of pure letter-spacing —
     enough, on its own, to decide whether the strapline fits. Wide tracking
     buys a single continuous 512-1023px band instead of two bands with a
     4px-short hole at 768px (iPad portrait) in the middle of them, and the
     label still reads as tracked-out uppercase. Urdu overrides this to
     `normal` in section 04 either way. */
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Primary navigation (mobile drawer first) ---------------------------------- */
/* `translateX` is physical, so the closed drawer has to know its direction.
   That direction is carried by a custom property rather than by a
   `[dir="rtl"] .nav { transform: … }` rule: at (0,2,0) such a rule outranks
   BOTH `@media (min-width: 64em) .nav { transform: none }` (0,1,0) and
   `html:not([data-js="on"]) .nav { transform: none }` (0,1,1) — media queries
   add no specificity — so in Urdu the desktop nav and the no-JS nav were both
   left translated -110% and pushed off the page. Setting only a variable
   keeps every later `transform` declaration in charge of itself. */
.nav {
  --nav-closed-x: 110%;
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(21rem, 86vw);
  z-index: var(--z-drawer);
  background-color: var(--surface-page);
  border-inline-start: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
  padding: var(--space-9) var(--space-6) var(--space-7);
  overflow-y: auto;
  transform: translateX(var(--nav-closed-x));
  visibility: hidden;
  transition: transform var(--transition-base) var(--ease-out),
              visibility 0s linear var(--transition-base);
}

[dir="rtl"] .nav { --nav-closed-x: -110%; }

.nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition-base) var(--ease-out), visibility 0s;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__item { display: block; }

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
  transition: var(--transition-colors);
}

.nav__link:hover {
  background-color: var(--surface-sunken);
  color: var(--color-primary-700);
}

.nav__link.is-current,
.nav__link[aria-current="page"] {
  color: var(--color-primary-800);
  background-color: var(--color-primary-50);
  border-inline-start-color: var(--color-accent-500);
}

.nav__footer {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width) solid var(--border-subtle);
  display: grid;
  gap: var(--space-3);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav-backdrop);
  background-color: var(--surface-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base) var(--ease-out),
              visibility 0s linear var(--transition-base);
  border: 0;
  cursor: pointer;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-base) var(--ease-out), visibility 0s;
}

body.is-nav-open { overflow: hidden; }

/* --- Hamburger --------------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-sm);
  /* Icon-only below 768px (.nav-toggle__text is hidden), so it needs a square
     minimum or the hit area collapses to roughly 42px wide. */
  min-inline-size: var(--control-height-sm);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-sm);
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  position: relative;
  z-index: calc(var(--z-drawer) + 1);
  transition: var(--transition-colors);
}

.nav-toggle:hover { border-color: var(--color-primary-400); }

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  inline-size: 1.125rem;
  block-size: 0.875rem;
}

.nav-toggle__bars span {
  display: block;
  block-size: 2px;
  inline-size: 100%;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transform-origin: left center;
  transition: transform var(--transition-fast) var(--ease-out),
              opacity var(--transition-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(1px) rotate(45deg) scaleX(1.05); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-1px) rotate(-45deg) scaleX(1.05); }

.nav-toggle__text { display: none; }

/* --- Language toggle ----------------------------------------------------------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-sm);
  min-inline-size: var(--control-height-sm);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-pill);
  background-color: var(--surface-page);
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-colors);
}

.lang-toggle:hover {
  border-color: var(--color-accent-500);
  background-color: var(--color-accent-50);
  color: var(--color-accent-800);
}

.lang-toggle__icon { inline-size: 1rem; block-size: 1rem; flex: 0 0 auto; }
.lang-toggle__label { line-height: 1; }
html[lang="ur"] .lang-toggle__label { font-family: var(--font-sans); }
html[lang="en"] .lang-toggle__label { font-family: var(--font-urdu), var(--font-sans); }

/* No-JS degradation: the drawer becomes a plain stacked list, toggle hides. */
html:not([data-js="on"]) .nav {
  position: static;
  inline-size: 100%;
  transform: none;
  visibility: visible;
  box-shadow: none;
  border: 0;
  padding: 0 0 var(--space-4);
  overflow: visible;
}

html:not([data-js="on"]) .header__inner { flex-wrap: wrap; }
html:not([data-js="on"]) .nav__list { flex-direction: row; flex-wrap: wrap; }
html:not([data-js="on"]) .nav-toggle,
html:not([data-js="on"]) .nav-backdrop { display: none; }

/* ==========================================================================
   10. HERO
   Built entirely from CSS gradients: no image request, no layout shift.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-primary-900);
  padding-block: clamp(3.5rem, 2.4rem + 5vw, 7rem) clamp(3rem, 2rem + 4.5vw, 6rem);
  color: var(--text-primary);
}

/* Layer 1: the deep field — navy with a brass sunrise from the top corner. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    radial-gradient(115% 85% at 82% -10%, rgba(217, 180, 92, 0.30) 0%, rgba(217, 180, 92, 0.06) 38%, rgba(217, 180, 92, 0) 62%),
    radial-gradient(95% 80% at 5% 105%, rgba(44, 96, 152, 0.55) 0%, rgba(44, 96, 152, 0) 62%),
    linear-gradient(158deg, #0A2440 0%, #061A2E 46%, #0B2C4C 100%);
}

/* Layer 2: architectural grid lines + a soft brass sheen sweeping the plane. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(230, 203, 138, 0.10) 48%, rgba(255, 255, 255, 0) 64%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* Optional extra glow element for pages that want a warmer field. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 12% 12%, 92% 82%;
  background-size: 46rem 30rem, 34rem 26rem;
  background-image:
    radial-gradient(closest-side, rgba(230, 203, 138, 0.16), rgba(230, 203, 138, 0)),
    radial-gradient(closest-side, rgba(90, 135, 181, 0.24), rgba(90, 135, 181, 0));
}

/* A fine brass hairline finishing the bottom edge. */
.hero__edge {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: linear-gradient(90deg, rgba(199, 154, 58, 0) 0%, var(--color-accent-500) 30%, var(--color-accent-300) 50%, var(--color-accent-500) 70%, rgba(199, 154, 58, 0) 100%);
  z-index: 1;
}

.hero__inner {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}

.hero__content > * + * { margin-block-start: var(--space-5); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid rgba(230, 203, 138, 0.42);
  background-color: rgba(230, 203, 138, 0.12);
  color: var(--color-accent-300);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--color-accent-300);
  background: linear-gradient(180deg, var(--color-accent-200), var(--color-accent-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__lead {
  font-family: var(--font-sans);
  font-size: var(--step-lead);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-inline-size: 40rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width) solid var(--border-subtle);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Icon plus a short phrase, in a wrapping row. The icon is `flex: 0 0 auto`
   with an explicit size, so the zero applies only to the text beside it: it
   stops a long phrase — routinely half again as long once translated — from
   making this item's min-content the floor of the whole hero column. */
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.hero__trust-item svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  color: var(--color-accent-400);
  flex: 0 0 auto;
}

.hero__aside {
  background-color: rgba(255, 255, 255, 0.055);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-8);
}

.hero--compact { padding-block: clamp(2.5rem, 2rem + 2.6vw, 4rem); }

.hero--page {
  padding-block: clamp(2.75rem, 2.1rem + 3vw, 4.5rem) clamp(2.5rem, 2rem + 2.6vw, 4rem);
}

.hero--page .hero__title { font-size: var(--step-h1); }
.hero--page .hero__inner { gap: var(--space-6); }
.hero--center { text-align: center; }
.hero--center .hero__lead { margin-inline: auto; }
.hero--center .hero__actions,
.hero--center .hero__trust { justify-content: center; }

/* ==========================================================================
   11. BREADCRUMB
   ========================================================================== */

.breadcrumb { font-size: var(--font-size-sm); }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  display: inline-block;
  color: var(--border-strong);
  font-weight: var(--weight-bold);
}

.breadcrumb__link {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb__link:hover { color: var(--text-accent); text-decoration: underline; }

.breadcrumb__current {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   12. BADGES, PILLS, TAGS, CHIPS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.35;
  /* No nowrap: a badge sits inside cards and table cells that are only ~288px
     wide on a small handset, and a translated label is routinely half again as
     long as the English one. A badge that wraps to two lines is tidy; one that
     sets a min-content floor wider than the viewport is not. */
  max-inline-size: 100%;
}

.badge svg { inline-size: 0.85rem; block-size: 0.85rem; }

.badge--accent  { background-color: var(--color-accent-100); color: var(--color-accent-800); }
.badge--success { background-color: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background-color: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger  { background-color: var(--color-danger-soft); color: var(--color-danger); }
.badge--info    { background-color: var(--color-info-soft); color: var(--color-info); }
.badge--dark    { background-color: var(--color-primary-800); color: var(--color-accent-300); }
.badge--outline {
  background-color: transparent;
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* Same reasoning as .badge above: an inline-flex chip inside a card that is
   only ~288px wide on a small handset must never set a floor wider than the
   card. `max-inline-size: 100%` also clamps the automatic minimum size of a
   flex item, so it works in a wrapping row as well as in a grid cell. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-default);
  background-color: var(--surface-card);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  max-inline-size: 100%;
}

.pill--accent {
  border-color: var(--color-accent-300);
  background-color: var(--color-accent-50);
  color: var(--color-accent-800);
}

.pill--dark {
  border-color: var(--border-default);
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--text-secondary);
}

/* Unlike .badge and .hero__badge, a tag is not an uppercase micro-label: it
   carries real content (society and sector names such as "Airport Housing
   Society"), so it sits on the 14px readability floor rather than at 12px. */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem var(--space-3);
  border-radius: var(--radius-xs);
  background-color: var(--surface-muted);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  max-inline-size: 100%;
}

.tag--accent { background-color: var(--color-accent-100); color: var(--color-accent-800); }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-control);
  background-color: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: var(--transition-colors);
  max-inline-size: 100%;
}

a.chip:hover,
.chip.is-active {
  border-color: var(--color-accent-500);
  background-color: var(--color-accent-50);
  color: var(--color-accent-800);
}

/* ==========================================================================
   13. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out);
}

.card__media {
  position: relative;
  background: linear-gradient(140deg, var(--color-primary-700), var(--color-primary-500));
  color: var(--color-white);
  padding: var(--space-6);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--color-accent-100), var(--color-accent-200));
  color: var(--color-accent-800);
  flex: 0 0 auto;
  margin-block-end: var(--space-5);
}

.card__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

.card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.card__text {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.card__meta {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.card__footer {
  padding: var(--space-4) var(--space-6) var(--space-6);
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.card__footer--divided {
  border-block-start: var(--border-width) solid var(--border-subtle);
  padding-block-start: var(--space-5);
  margin-inline: var(--space-6);
  padding-inline: 0;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-link);
  text-decoration: none;
}

.card__link:hover { text-decoration: underline; }
.card__link svg { inline-size: 1rem; block-size: 1rem; }

/* Whole-card click target without nesting interactive elements. */
.card--interactive:hover,
.card--interactive:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-300);
}

.card--interactive .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card--outline { box-shadow: none; border-color: var(--border-default); }
.card--elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card--flush { border: 0; box-shadow: none; background: transparent; }

.card--dark {
  background-color: rgba(255, 255, 255, 0.055);
  border-color: var(--border-default);
  box-shadow: none;
}

.card--accent {
  border-inline-start: 4px solid var(--color-accent-500);
}

.card--highlight {
  background: linear-gradient(180deg, var(--color-accent-50), var(--surface-card) 55%);
  border-color: var(--color-accent-200);
}

.card--center { text-align: center; align-items: center; }
.card--center .card__icon { margin-inline: auto; }

/* --- Service card ------------------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background-color: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out);
}

.service-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-300));
  transform: scaleX(0);
  /* Was `inline-start`, which is not in this property's grammar — the whole
     declaration was dropped and the bar wiped outward from its centre in BOTH
     directions. RTL mirror lives with the other directional overrides. */
  transform-origin: left center;
  transition: transform var(--transition-base) var(--ease-out);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-200);
}

.service-card:hover::before,
.service-card:focus-within::before { transform: scaleX(1); }

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--color-primary-800), var(--color-primary-600));
  color: var(--color-accent-300);
  flex: 0 0 auto;
}

.service-card__icon svg { inline-size: 1.6rem; block-size: 1.6rem; }

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.service-card__text {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.service-card__list {
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.service-card__list li {
  padding-inline-start: var(--space-5);
  position: relative;
}

.service-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent-500);
}

.service-card__link {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-link);
  text-decoration: none;
}

.service-card__link:hover { text-decoration: underline; }
.service-card__link svg { inline-size: 1rem; block-size: 1rem; flex: 0 0 auto; }

/* --- Area card ----------------------------------------------------------------- */
.area-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card);
  background-image: linear-gradient(160deg, rgba(238, 244, 249, 0.9) 0%, rgba(255, 255, 255, 0) 55%);
  transition: transform var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out);
}

.area-card:hover,
.area-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-200);
}

.area-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.area-card__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent-100);
  color: var(--color-accent-800);
  flex: 0 0 auto;
}

.area-card__pin svg { inline-size: 1.1rem; block-size: 1.1rem; }

.area-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.area-card__count {
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.area-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- Feature card ---------------------------------------------------------------- */
.feature-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
}

/* The text column is an unclassed <div>, and a flex item's automatic minimum
   size is its min-content — the widest word — which on a 288px handset can be
   wider than the space left beside the icon. The icon keeps `flex: 0 0 auto`
   and an explicit size, so it is unaffected by the zero here. */
.feature-card > * { min-inline-size: 0; }

.feature-card--plain { border: 0; background: transparent; padding-inline: 0; }
.feature-card--stacked { flex-direction: column; }

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-100);
  color: var(--color-accent-800);
  flex: 0 0 auto;
}

.feature-card__icon svg { inline-size: 1.35rem; block-size: 1.35rem; }

.feature-card__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-block-end: var(--space-2);
  letter-spacing: normal;
}

.feature-card__text {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* --- Stat card ------------------------------------------------------------------- */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle);
  background-color: var(--surface-card);
  text-align: center;
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-primary-700);
  letter-spacing: var(--tracking-tight);
}

.stat-card--accent .stat-card__value { color: var(--color-accent-700); }

.stat-card__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* A sentence, not a micro-label — 14px floor. */
.stat-card__note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* --- Testimonial card ------------------------------------------------------------- */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle);
  background-color: var(--surface-card);
  position: relative;
  box-shadow: var(--shadow-xs);
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.1em;
  inset-inline-end: var(--space-5);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent-200);
  pointer-events: none;
}

.testimonial-card__stars {
  display: inline-flex;
  gap: 2px;
  /* The star row is the only rendering of the rating, so it is meaningful
     graphics: accent-500 measured 2.59:1 on the white card, accent-700 is
     5.32:1 (4.96:1 on the dashed placeholder's sunken background). */
  color: var(--color-accent-700);
}

.testimonial-card__stars svg { inline-size: 1rem; block-size: 1rem; }

.testimonial-card__quote {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width) solid var(--border-subtle);
}

/* Same reason as .feature-card: the name/meta column is an unclassed <div>. */
.testimonial-card__author > * { min-inline-size: 0; }

.testimonial-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-sm);
  flex: 0 0 auto;
}

.testimonial-card__name {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.testimonial-card__meta {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Makes it unmistakable that the copy is owner-replaceable sample text. */
.testimonial-card--placeholder {
  border-style: dashed;
  border-color: var(--border-strong);
  background-color: var(--surface-sunken);
}

/* --- Step card --------------------------------------------------------------------- */
.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  position: relative;
}

.step-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-circle);
  background: linear-gradient(150deg, var(--color-primary-800), var(--color-primary-600));
  color: var(--color-accent-300);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  flex: 0 0 auto;
}

.step-card__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: normal;
}

.step-card__text {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* --- Team card ---------------------------------------------------------------------- */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle);
  background-color: var(--surface-card);
  text-align: center;
}

.team-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--radius-circle);
  background: linear-gradient(150deg, var(--color-primary-700), var(--color-primary-500));
  color: var(--color-accent-300);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-accent-300);
}

.team-card__name {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.team-card__role {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}

.team-card__text {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin: 0;
}

/* --- Plan card (pricing-style package block) ------------------------------------------ */
.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-default);
  background-color: var(--surface-card);
  position: relative;
}

.plan-card--featured {
  border-color: var(--color-accent-500);
  border-width: var(--border-width-thick);
  box-shadow: var(--shadow-lg);
}

.plan-card__flag {
  position: absolute;
  inset-block-start: calc(var(--space-4) * -1);
  inset-inline-start: var(--space-6);
}

.plan-card__name {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.plan-card__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.15rem);
  font-weight: var(--weight-bold);
  color: var(--color-primary-700);
  line-height: 1.1;
}

.plan-card__meta {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.plan-card__features {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block: var(--border-width) solid var(--border-subtle);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.plan-card__features svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  color: var(--color-success);
  flex: 0 0 auto;
  margin-block-start: 0.2em;
}

.plan-card__cta { margin-block-start: auto; }

/* --- Icon tile ------------------------------------------------------------------------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  flex: 0 0 auto;
}

.icon-tile--accent { background-color: var(--color-accent-100); color: var(--color-accent-800); }
.icon-tile--dark { background-color: var(--color-primary-800); color: var(--color-accent-300); }
.icon-tile--lg { inline-size: 3.75rem; block-size: 3.75rem; border-radius: var(--radius-lg); }
.icon-tile--round { border-radius: var(--radius-circle); }
.icon-tile svg { inline-size: 1.5rem; block-size: 1.5rem; }

.icon { inline-size: var(--icon-size); block-size: var(--icon-size); flex: 0 0 auto; }
.icon--sm { inline-size: 1rem; block-size: 1rem; }
.icon--lg { inline-size: 1.75rem; block-size: 1.75rem; }
.icon-flip { display: inline-block; }

/* ==========================================================================
   14. LISTS
   ========================================================================== */

.checklist {
  display: grid;
  gap: var(--space-3);
}

.checklist--two-col { grid-template-columns: minmax(0, 1fr); }

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.checklist__item::before {
  content: "";
  inline-size: 1.35rem;
  block-size: 1.35rem;
  flex: 0 0 auto;
  margin-block-start: 0.22em;
  border-radius: var(--radius-circle);
  background-color: var(--color-success-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B4E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.85rem;
  background-position: center;
  background-repeat: no-repeat;
}

.checklist--accent .checklist__item::before {
  background-color: var(--color-accent-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6415' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.checklist--light .checklist__item { color: var(--text-secondary); }
.checklist--light .checklist__item::before {
  background-color: rgba(230, 203, 138, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6CB8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.bullet-list {
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.bullet-list li {
  position: relative;
  padding-inline-start: var(--space-5);
  line-height: var(--leading-relaxed);
}

.bullet-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent-500);
}

.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: kea-step;
}

.step {
  display: flex;
  gap: var(--space-4);
  position: relative;
  counter-increment: kea-step;
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-800);
  color: var(--color-accent-300);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-base);
  z-index: 1;
}

.step__number::before { content: counter(kea-step); }
.step__number--manual::before { content: none; }

/* Flex item beside a fixed 2.5rem number: without this its min-content (the
   widest word in the step) is its floor and it cannot narrow on a handset. */
.step__body { padding-block-start: var(--space-1); min-inline-size: 0; }

.step__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-block-end: var(--space-2);
  letter-spacing: normal;
}

.step__text {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Connector rail between steps. */
.steps--connected .step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.25rem;
  inset-block-start: 2.5rem;
  inset-block-end: calc(var(--space-6) * -1);
  inline-size: 2px;
  background: linear-gradient(180deg, var(--border-strong), var(--border-subtle));
}

.link-list { display: grid; gap: var(--space-2); }

.link-list__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  padding-block: var(--space-1);
  transition: var(--transition-colors);
}

.link-list__item::after {
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out);
}

.link-list__item:hover {
  color: var(--text-accent);
}

.link-list__item:hover::after { opacity: 1; transform: translateX(0); }

/* The arrow is opacity: 0 at rest, so :hover is the only state anyone ever
   sees it in — the RTL mirror therefore has to beat the :hover rule, which it
   does here on source order at the same (0,2,1). Both states compose the
   mirror with the slide-in offset instead of replacing it. */
[dir="rtl"] .link-list__item::after { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] .link-list__item:hover::after { transform: scaleX(-1) translateX(0); }

.definition-list {
  display: grid;
  gap: var(--space-4);
}

.definition-list__row {
  display: grid;
  gap: var(--space-1);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-width) solid var(--border-subtle);
}

.definition-list__row:last-child { border-block-end: 0; padding-block-end: 0; }

.definition-list dt {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.definition-list dd {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.area-list__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.area-list__item::before {
  content: "";
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent-500);
  flex: 0 0 auto;
}

a.area-list__item:hover {
  border-color: var(--color-accent-300);
  background-color: var(--color-accent-50);
  color: var(--color-accent-800);
}

/* ==========================================================================
   15. ACCORDION + TABS
   ========================================================================== */

.accordion {
  display: grid;
  gap: var(--space-3);
}

.accordion__item {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  overflow: hidden;
  transition: border-color var(--transition-fast) var(--ease-out),
              box-shadow var(--transition-fast) var(--ease-out);
}

.accordion__item.is-open {
  border-color: var(--color-accent-300);
  box-shadow: var(--shadow-sm);
}

.accordion__trigger {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  text-align: start;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease-out);
}

/* The question text is an unclassed <span> flex item next to the chevron; a
   long FAQ question would otherwise hold the trigger open at its min-content
   width. The chevron is `flex: 0 0 auto` with an explicit size, so it does not
   shrink. */
.accordion__trigger > * { min-inline-size: 0; }

.accordion__trigger:hover { background-color: var(--surface-sunken); }

.accordion__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: 0 0 auto;
  color: var(--color-accent-600);
  transition: transform var(--transition-base) var(--ease-out);
}

.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }

.accordion__panel {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.accordion__panel > * + * { margin-block-start: var(--space-4); }

/* With JS the panel is toggled with [hidden]; without JS everything is open. */
html:not([data-js="on"]) .accordion__panel { display: block !important; }
html:not([data-js="on"]) .accordion__icon { display: none; }

.tabs { display: grid; gap: var(--space-6); }

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1);
  background-color: var(--surface-muted);
  border-radius: var(--radius-md);
}

/* Tab labels are phrases ("Selling or renting out"), not single words, and
   `flex: 1 1 auto` means a nowrap label sets the tab's floor. Three of them on
   one 288px line cannot all hold their full width, so they wrap instead. */
.tabs__tab {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: normal;
  text-align: center;
  transition: var(--transition-colors);
}

.tabs__tab:hover { color: var(--color-primary-700); }

.tabs__tab.is-active,
.tabs__tab[aria-selected="true"] {
  background-color: var(--surface-card);
  color: var(--color-primary-800);
  box-shadow: var(--shadow-sm);
}

.tabs__panel:focus { outline: none; }
html:not([data-js="on"]) .tabs__panel { display: block !important; }
html:not([data-js="on"]) .tabs__list { display: none; }

/* ==========================================================================
   16. FORMS
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-6);
}

.form__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}

.field {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  /* Pack rows at the top. Without this, a field whose neighbour has a two-line
     label is stretched by the grid, and the input grows with it — which is why
     "Full name" rendered twice as tall as the phone box next to it. */
  align-content: start;
}

.field--full { grid-column: 1 / -1; }

.label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.4;
}

.label--required::after {
  content: "*";
  color: var(--color-danger);
  margin-inline-start: 0.25em;
}

.label--optional::after {
  content: attr(data-optional-text);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  margin-inline-start: 0.4em;
  text-transform: none;
  letter-spacing: normal;
}

/* `min-inline-size: 0` is not cosmetic. A form control is a replaced-ish
   element with an intrinsic min-content width of its own — an <input> defaults
   to roughly 20 characters, about 180px — and `inline-size: 100%` does not
   lower it. Inside a flex row (.input-group) or an `auto` grid track that
   intrinsic width becomes the track's floor and the field cannot narrow on a
   320px handset. Zeroing it lets `inline-size: 100%` actually mean "as wide as
   my container, no wider". */
.input,
.select,
.textarea {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--control-height);
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--surface-card);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast) var(--ease-out),
              box-shadow var(--transition-fast) var(--ease-out),
              background-color var(--transition-fast) var(--ease-out);
  text-align: start;
}

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--border-control-hover); }

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 1px;
}

.input[disabled],
.select[disabled],
.textarea[disabled] {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

.input[readonly] { background-color: var(--surface-sunken); }

.textarea {
  min-block-size: 8rem;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--space-9);
  cursor: pointer;
}

.select-wrap { position: relative; display: block; }

/* A chevron drawn from two borders and rotated. Two things were wrong here:
   the trailing `background: none` reset the background-color the mask needed,
   and the mask then clipped away most of the border chevron that was left; and
   `border-inline-start` became the RIGHT border under dir="rtl", which turned
   the same -45deg rotation into a chevron pointing sideways. A dropdown opens
   downward in both directions, so this glyph must NOT mirror — hence physical
   borders and no mask. */
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-4);
  inset-block-start: 50%;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: -0.35rem;
  pointer-events: none;
  border-left: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group__addon {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  background-color: var(--surface-muted);
  border: var(--border-width) solid var(--border-control);
  border-inline-end: 0;
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.input-group .input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.help-text {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.error-text {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-danger);
}

.error-text::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-danger);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  flex: 0 0 auto;
}

.field.has-error .error-text { display: flex; }

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: var(--color-danger);
  background-color: var(--color-danger-soft);
}

.field.has-error .input:focus,
.field.has-error .select:focus,
.field.has-error .textarea:focus {
  box-shadow: 0 0 0 3px rgba(163, 35, 35, 0.22);
}

.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea { border-color: var(--color-success); }

.fieldset {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--surface-sunken);
}

.fieldset--plain { border: 0; padding: 0; background: transparent; }

.legend {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  padding: 0;
  margin-block-end: var(--space-1);
}

/* --- Choice cards (radio / checkbox) --------------------------------------------- */
.choice-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}

.radio-card,
.checkbox-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--transition-fast) var(--ease-out),
              background-color var(--transition-fast) var(--ease-out),
              box-shadow var(--transition-fast) var(--ease-out);
}

.radio-card:hover,
.checkbox-card:hover { border-color: var(--color-primary-400); background-color: var(--color-primary-50); }

.radio-card input[type="radio"],
.checkbox-card input[type="checkbox"] {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin: 0;
  margin-block-start: 0.15em;
  flex: 0 0 auto;
  accent-color: var(--color-primary-600);
  cursor: pointer;
}

.radio-card__body,
.checkbox-card__body { display: grid; gap: var(--space-1); min-inline-size: 0; }

.radio-card__title,
.checkbox-card__title {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: 1.35;
}

.radio-card__text,
.checkbox-card__text {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.radio-card__icon,
.checkbox-card__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--color-accent-600);
  flex: 0 0 auto;
}

.radio-card:has(input:checked),
.checkbox-card:has(input:checked) {
  border-color: var(--color-accent-500);
  background-color: var(--color-accent-50);
  box-shadow: var(--shadow-sm);
}

.radio-card:focus-within,
.checkbox-card:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: 1.5rem;   /* 24px — WCAG 2.5.8 for the label hit area */
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin: 0;
  margin-block-start: 0.15em;
  flex: 0 0 auto;
  accent-color: var(--color-primary-600);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.form-note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.form__status { margin-block-start: var(--space-2); }

/* Anti-spam trap: never visible, never focusable in practice. */
.honeypot {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

/* --- Multi-step wizard -------------------------------------------------------------- */
.wizard {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-6);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card);
  box-shadow: var(--shadow-md);
}

.wizard__progress { display: grid; gap: var(--space-4); }

/* The filled/unfilled boundary carries the wizard's only progress
   information, so it has to clear 3:1 by itself. The old pair
   (#D9B45C on #EEF2F6) measured 1.76:1; #8C6415 on #D3DCE5 is 3.83:1. */
.progress {
  inline-size: 100%;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-200);
  overflow: hidden;
}

.progress__bar {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent-800), var(--color-accent-700));
  transition: inline-size var(--transition-slow) var(--ease-out);
}

.progress__label {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.wizard__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  counter-reset: kea-wizard;
}

.wizard__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  counter-increment: kea-wizard;
}

.wizard__step::before {
  content: counter(kea-wizard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: var(--radius-circle);
  border: var(--border-width) solid var(--border-default);
  background-color: var(--surface-card);
  font-size: var(--font-size-xs);
  flex: 0 0 auto;
}

.wizard__step.is-active { color: var(--color-primary-800); }
.wizard__step.is-active::before {
  border-color: var(--color-accent-500);
  background-color: var(--color-accent-100);
  color: var(--color-accent-800);
}

.wizard__step.is-done { color: var(--color-success); }
.wizard__step.is-done::before {
  content: "\2713";
  border-color: var(--color-success);
  background-color: var(--color-success-soft);
  color: var(--color-success);
}

.wizard__panel { display: grid; gap: var(--space-5); }

.wizard__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding-block-start: var(--space-5);
  border-block-start: var(--border-width) solid var(--border-subtle);
}

/* Without JS every step renders in sequence as one long form. */
html:not([data-js="on"]) .wizard__panel { display: grid !important; }
html:not([data-js="on"]) .wizard__progress,
html:not([data-js="on"]) .wizard__nav .btn[data-wizard-prev],
html:not([data-js="on"]) .wizard__nav .btn[data-wizard-next] { display: none; }

/* ==========================================================================
   17. ALERTS + NOTICES
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-default);
  border-inline-start: 4px solid var(--color-info);
  background-color: var(--color-info-soft);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
}

.alert__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: 0 0 auto;
  margin-block-start: 0.15em;
  color: var(--color-info);
}

.alert__body { min-inline-size: 0; }

.alert__title {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-base);
  margin-block-end: var(--space-1);
  letter-spacing: normal;
}

.alert--info    { border-inline-start-color: var(--color-info); background-color: var(--color-info-soft); }
.alert--info .alert__icon { color: var(--color-info); }
.alert--success { border-inline-start-color: var(--color-success); background-color: var(--color-success-soft); }
.alert--success .alert__icon { color: var(--color-success); }
.alert--warning { border-inline-start-color: var(--color-warning); background-color: var(--color-warning-soft); }
.alert--warning .alert__icon { color: var(--color-warning); }
.alert--danger  { border-inline-start-color: var(--color-danger); background-color: var(--color-danger-soft); }
.alert--danger .alert__icon { color: var(--color-danger); }

.notice {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}

/* Dashed = "owner must replace this content before launch". */
.notice--placeholder {
  border-style: dashed;
  border-color: var(--color-warning);
  background-color: var(--color-warning-soft);
  color: var(--color-warning);
  font-weight: var(--weight-medium);
}

/* ==========================================================================
   18. SPLIT MEDIA/TEXT, MEDIA FRAMES, ASPECT BOXES
   ========================================================================== */

.split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.split__content > * + * { margin-block-start: var(--space-5); }
.split__content { min-inline-size: 0; }
.split__media { min-inline-size: 0; }

.split--top { align-items: start; }

.media-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: var(--border-width) solid var(--border-subtle);
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(230, 203, 138, 0.22), rgba(230, 203, 138, 0) 60%),
    linear-gradient(155deg, var(--color-primary-800), var(--color-primary-600));
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}

.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.media-frame__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-7);
  display: grid;
  gap: var(--space-5);
}

.media-frame--tall { min-block-size: 26rem; }
.media-frame--flat { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }

/* RULE: never pair one of these ratios with `min-block-size` (or `min-height`)
   on the same box. The block-axis minimum transfers across the ratio into an
   inline-axis minimum of `minimum x ratio`, which stops the box shrinking and
   scrolls the whole page sideways on a small handset. See .map-embed,
   section 23, for the version of this bug that shipped. */
.aspect { position: relative; inline-size: 100%; }
.aspect--16x9 { aspect-ratio: 16 / 9; }
.aspect--4x3  { aspect-ratio: 4 / 3; }
.aspect--3x2  { aspect-ratio: 3 / 2; }
.aspect--square { aspect-ratio: 1 / 1; }

.aspect > * {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ==========================================================================
   19. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.75rem, 2.1rem + 3vw, 4.5rem);
  background-color: var(--color-primary-800);
  background-image:
    radial-gradient(100% 120% at 88% -20%, rgba(217, 180, 92, 0.26) 0%, rgba(217, 180, 92, 0) 58%),
    radial-gradient(90% 110% at 0% 120%, rgba(44, 96, 152, 0.45) 0%, rgba(44, 96, 152, 0) 60%),
    linear-gradient(140deg, #0A2440, #061A2E);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: linear-gradient(90deg, rgba(199, 154, 58, 0), var(--color-accent-500), rgba(199, 154, 58, 0));
}

.cta-band__inner {
  display: grid;
  gap: var(--space-6);
  text-align: center;
  justify-items: center;
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.cta-band__text {
  font-family: var(--font-sans);
  font-size: var(--step-lead);
  color: var(--text-secondary);
  max-inline-size: 48rem;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.cta-band--accent {
  background-color: var(--color-accent-500);
  background-image: linear-gradient(140deg, var(--color-accent-400), var(--color-accent-600));
}

.cta-band--accent { --text-primary: var(--color-primary-900); --text-secondary: #3B2B08; --focus-ring-color: var(--color-primary-900); }
.cta-band--accent .cta-band__title { color: var(--color-primary-900); }
.cta-band--accent .cta-band__text { color: #3B2B08; }
.cta-band--accent::before { background: rgba(6, 26, 46, 0.18); }

.cta-band--split .cta-band__inner {
  text-align: start;
  justify-items: start;
}

/* Replaces the old blanket `body { overflow-x: hidden }`. Only the elements
   that legitimately paint outside their box clip themselves, so the page is
   free to reveal a genuine horizontal overflow instead of swallowing it.
   `clip` rather than `hidden` because `hidden` makes a scroll container and
   would break `position: sticky` on anything inside; browsers without `clip`
   keep the `overflow: hidden` already declared on .hero and .cta-band.
   Declared here, after both of those rules, so it wins on source order. */
.hero,
.cta-band,
.section--pattern { overflow-x: clip; }

/* ==========================================================================
   20. STATS STRIP
   ========================================================================== */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

.stats-strip--bordered {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.stat { display: grid; gap: var(--space-1); }
.stat--center { justify-items: center; text-align: center; }

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-accent-600);
  letter-spacing: var(--tracking-tight);
}

.section--dark .stat__value,
.hero .stat__value,
.cta-band .stat__value,
.site-footer .stat__value { color: var(--color-accent-300); }

.stat__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  line-height: 1.35;
  /* A single long compound word must never set the grid track's minimum. */
  overflow-wrap: anywhere;
}

/* A sentence, not a micro-label — 14px floor. */
.stat__note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   21. TABLES
   ========================================================================== */

.table-wrap {
  inline-size: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--surface-card);
  -webkit-overflow-scrolling: touch;
}

.table {
  inline-size: 100%;
  min-inline-size: 34rem;
  font-size: var(--font-size-base);
  text-align: start;
}

.table__caption {
  caption-side: top;
  padding: var(--space-4) var(--space-5);
  text-align: start;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--border-width) solid var(--border-subtle);
}

.table thead th {
  background-color: var(--surface-sunken);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td { border-block-end: 0; }

.table td { color: var(--text-secondary); }
.table tbody th { color: var(--text-primary); font-weight: var(--weight-bold); }

.table--zebra tbody tr:nth-child(even) { background-color: var(--surface-sunken); }

.table--compare th:not(:first-child),
.table--compare td:not(:first-child) { text-align: center; }
.table--compare td svg { margin-inline: auto; inline-size: 1.15rem; block-size: 1.15rem; }

.table--compact th,
.table--compact td { padding: var(--space-3) var(--space-4); }

/* ==========================================================================
   22. DIVIDERS + ORNAMENTS
   ========================================================================== */

.divider {
  border: 0;
  block-size: 1px;
  background-color: var(--border-subtle);
  margin-block: var(--space-8);
}

.divider--accent {
  block-size: 2px;
  background: linear-gradient(90deg, rgba(199, 154, 58, 0), var(--color-accent-400), rgba(199, 154, 58, 0));
}

.divider--dotted {
  block-size: 0;
  background: none;
  border-block-start: 1px dashed var(--border-strong);
}

.divider--tight { margin-block: var(--space-5); }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-accent-500);
  margin-block: var(--space-6);
}

.ornament::before,
.ornament::after {
  content: "";
  block-size: 1px;
  inline-size: min(6rem, 18vw);
  background: linear-gradient(90deg, rgba(199, 154, 58, 0), var(--color-accent-400));
}

.ornament::after { transform: scaleX(-1); }

.corner-accent { position: relative; }

.corner-accent::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 3rem;
  block-size: 3rem;
  border-block-start: 3px solid var(--color-accent-500);
  border-inline-start: 3px solid var(--color-accent-500);
  border-start-start-radius: var(--radius-lg);
  pointer-events: none;
}

/* ==========================================================================
   23. CONTACT BLOCKS, HOURS, MAP PLACEHOLDER
   ========================================================================== */

.contact-list { display: grid; gap: var(--space-5); }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  flex: 0 0 auto;
}

.contact-item__icon svg { inline-size: 1.3rem; block-size: 1.3rem; }

.contact-item__body { min-inline-size: 0; display: grid; gap: var(--space-1); }

.contact-item__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-item__value {
  font-size: var(--font-size-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

a.contact-item__value { text-decoration: none; }
a.contact-item__value:hover { color: var(--text-accent); text-decoration: underline; }

.hours-list { display: grid; gap: var(--space-2); }

.hours-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: var(--border-width) dashed var(--border-subtle);
  font-size: var(--font-size-base);
}

.hours-list__row:last-child { border-block-end: 0; }
.hours-list__day { font-weight: var(--weight-semibold); color: var(--text-primary); }
.hours-list__time { color: var(--text-secondary); }

/* The iframe is absolutely positioned, so once the owner deletes the
   placeholder <p> there is no in-flow content left. `aspect-ratio` is what
   keeps the box a real height at every width: with no content and no explicit
   height, the ratio computes the height from the width, so the frame can never
   collapse.
   There is deliberately NO `min-block-size` alongside the ratio. A block-axis
   minimum does not stay in the block axis: it becomes a transferred size
   suggestion and imposes an inline-axis minimum of `min-block-size x ratio`.
   16rem x 4/3 = 341.33px, which is wider than a 320px viewport can offer, so
   the box could not shrink and contact.html scrolled sideways by 37px
   (measured scrollWidth 357 against clientWidth 320). The @supports block below
   restores the floor only for engines that do not implement aspect-ratio —
   where there is no ratio for it to transfer across. */
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-7);
  color: var(--text-secondary);
  background-color: var(--surface-sunken);
  background-image:
    linear-gradient(rgba(163, 190, 214, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163, 190, 214, 0.35) 1px, transparent 1px),
    radial-gradient(70% 60% at 50% 50%, rgba(230, 203, 138, 0.22), rgba(230, 203, 138, 0) 70%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
}

@supports not (aspect-ratio: 4 / 3) {
  .map-embed { min-block-size: 16rem; }
}

/* Once a real embed is in place the placeholder padding is dead space that
   only eats into the frame. */
.map-embed:has(iframe) { padding: 0; }

.map-embed iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* ==========================================================================
   24. SITE FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-primary-900);
  background-image:
    radial-gradient(90% 120% at 100% 0%, rgba(217, 180, 92, 0.10) 0%, rgba(217, 180, 92, 0) 55%),
    linear-gradient(180deg, #071D33, #061A2E);
  padding-block-start: var(--section-space);
  font-size: var(--font-size-base);
}

.footer__grid {
  display: grid;
  gap: var(--space-9);
  grid-template-columns: minmax(0, 1fr);
}

.footer__col { min-inline-size: 0; display: grid; gap: var(--space-4); align-content: start; }
.footer__col--wide { gap: var(--space-5); }

.footer__brand { display: grid; gap: var(--space-4); }

.footer__brand-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.footer__logo {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: 0 0 auto;
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1.15;
}

.footer__brand-since {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-400);
}

.footer__blurb {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-inline-size: 34rem;
  margin: 0;
}

.footer__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-white);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-width) solid var(--border-default);
  margin-block-end: var(--space-1);
}

.footer__list { display: grid; gap: var(--space-3); }

.footer__link {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: var(--transition-colors);
  overflow-wrap: anywhere;
}

.footer__link:hover { color: var(--color-accent-300); text-decoration: underline; }

.footer__nap { display: grid; gap: var(--space-4); font-style: normal; }

.footer__nap-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.footer__nap-row svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  flex: 0 0 auto;
  margin-block-start: 0.25em;
  color: var(--color-accent-400);
}

.footer__nap-row a { color: var(--text-secondary); text-decoration: none; overflow-wrap: anywhere; }
.footer__nap-row a:hover { color: var(--color-accent-300); text-decoration: underline; }

.footer__hours {
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.footer__hours-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.footer__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__area {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.footer__area:hover { color: var(--color-accent-300); }
.footer__area:not(:last-child)::after { content: " \00B7"; color: var(--border-strong); }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Icon-only, so there is no larger text hit area to fall back on and no
   affordance other than the box itself: it gets the 44px minimum and the
   1.4.11 control-boundary token, exactly like .nav-toggle and .lang-toggle.
   (--border-default remaps to rgba(255,255,255,0.16) on the footer's navy,
   which is a 1.6:1 edge; --border-control is 4.4:1 there.) */
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height-sm);
  block-size: var(--control-height-sm);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-control);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-colors), transform var(--transition-fast) var(--ease-out);
}

.social__link:hover {
  color: var(--color-primary-900);
  background-color: var(--color-accent-400);
  border-color: var(--color-accent-400);
  transform: translateY(-2px);
}

.social__link svg { inline-size: 1.15rem; block-size: 1.15rem; }

.footer__bottom {
  margin-block-start: var(--section-space-tight);
  padding-block: var(--space-6);
  border-block-start: var(--border-width) solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.footer__copyright { margin: 0; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: center;
}

.footer__legal a { color: var(--text-muted); text-decoration: none; }
.footer__legal a:hover { color: var(--color-accent-300); text-decoration: underline; }

/* ==========================================================================
   25. FLOATING ACTIONS + BACK TO TOP
   ========================================================================== */

.float-actions {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.float-actions > * { pointer-events: auto; }

.float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-700);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.22);
  transition: transform var(--transition-fast) var(--ease-out),
              background-color var(--transition-fast) var(--ease-out);
}

.float-btn:hover { transform: translateY(-2px) scale(1.04); color: var(--color-white); }
.float-btn svg { inline-size: 1.5rem; block-size: 1.5rem; }

.float-btn--whatsapp { background-color: var(--color-whatsapp); }
.float-btn--whatsapp:hover { background-color: var(--color-whatsapp-hover); }
.float-btn--call { background-color: var(--color-accent-600); color: var(--color-primary-900); }
.float-btn--call:hover { background-color: var(--color-accent-500); color: var(--color-primary-900); }

.back-to-top {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height-sm);
  block-size: var(--control-height-sm);
  border-radius: var(--radius-circle);
  background-color: var(--surface-card);
  /* Icon-only control on a white card: this border is its only boundary, so
     it needs the 1.4.11 token rather than the 1.39:1 decorative one. */
  border: var(--border-width) solid var(--border-control);
  color: var(--color-primary-700);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base) var(--ease-out),
              transform var(--transition-base) var(--ease-out),
              visibility 0s linear var(--transition-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition-base) var(--ease-out),
              transform var(--transition-base) var(--ease-out), visibility 0s;
}

.back-to-top svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* ==========================================================================
   26. TRUST STRIP
   ========================================================================== */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-6);
  border-block: var(--border-width) solid var(--border-subtle);
}

/* Same shape, same reason, as .hero__trust-item in section 10. */
.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  min-inline-size: 0;
}

.trust-strip__item svg {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  color: var(--color-accent-600);
  flex: 0 0 auto;
}

/* ==========================================================================
   27. UTILITIES
   ========================================================================== */

/* --- Spacing (block axis is direction-neutral; inline axis is logical) ------ */
.mt-0 { margin-block-start: var(--space-0) !important; }
.mt-1 { margin-block-start: var(--space-1) !important; }
.mt-2 { margin-block-start: var(--space-2) !important; }
.mt-3 { margin-block-start: var(--space-3) !important; }
.mt-4 { margin-block-start: var(--space-4) !important; }
.mt-5 { margin-block-start: var(--space-5) !important; }
.mt-6 { margin-block-start: var(--space-6) !important; }
.mt-7 { margin-block-start: var(--space-7) !important; }
.mt-8 { margin-block-start: var(--space-8) !important; }
.mt-9 { margin-block-start: var(--space-9) !important; }
.mt-10 { margin-block-start: var(--space-10) !important; }

.mb-0 { margin-block-end: var(--space-0) !important; }
.mb-1 { margin-block-end: var(--space-1) !important; }
.mb-2 { margin-block-end: var(--space-2) !important; }
.mb-3 { margin-block-end: var(--space-3) !important; }
.mb-4 { margin-block-end: var(--space-4) !important; }
.mb-5 { margin-block-end: var(--space-5) !important; }
.mb-6 { margin-block-end: var(--space-6) !important; }
.mb-7 { margin-block-end: var(--space-7) !important; }
.mb-8 { margin-block-end: var(--space-8) !important; }
.mb-9 { margin-block-end: var(--space-9) !important; }
.mb-10 { margin-block-end: var(--space-10) !important; }

.mis-auto { margin-inline-start: auto !important; }
.mie-auto { margin-inline-end: auto !important; }
.mx-auto { margin-inline: auto !important; }

.p-0 { padding: var(--space-0) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-7 { padding: var(--space-7) !important; }

.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

/* --- Text ------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.text-muted   { color: var(--text-muted) !important; }
.text-subtle  { color: var(--text-secondary) !important; }
.text-accent  { color: var(--text-accent) !important; }
.text-inverse { color: var(--color-white) !important; }
.text-primary-colour { color: var(--color-primary-700) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger  { color: var(--color-danger) !important; }

.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }

.font-display { font-family: var(--font-display) !important; }
.font-sans    { font-family: var(--font-sans) !important; }
.font-medium   { font-weight: var(--weight-medium) !important; }
.font-semibold { font-weight: var(--weight-semibold) !important; }
.font-bold     { font-weight: var(--weight-bold) !important; }

.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.nowrap { white-space: nowrap; }
.leading-relaxed { line-height: var(--leading-relaxed); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Numerals and Latin identifiers embedded in Urdu copy.
   `unicode-bidi: isolate` on its own is NOT enough. An isolate takes its base
   direction from the element's own inherited `direction`, which is rtl in Urdu
   mode. A string made only of digits, spaces and neutrals contains no
   strong-LTR character, so the bidi algorithm reorders it under that rtl base:
   every phone number on the site rendered as "0000000 300 92+". `direction:
   ltr` pins the base explicitly and is a no-op in English, where the inherited
   direction is already ltr. (`unicode-bidi: plaintext` is weaker here — it
   relies on first-strong detection, which a leading "+" defeats.)
   `overflow-wrap: anywhere` because this class is the site's wrapper for every
   phone number, email address and URL — exactly the tokens with no natural
   break opportunity. `anywhere` (not `break-word`) is what lowers the
   min-content size these runs contribute to a grid track or a flex item, so a
   28-character email cannot set the floor of the footer column or the contact
   card it sits in. Numbers keep their spaces, so they still break at a space
   first and only ever split mid-run when nothing else will fit. */
.latin { font-family: var(--font-sans); unicode-bidi: isolate; direction: ltr; overflow-wrap: anywhere; }
/* Same isolation, plus tabular figures for columns of numbers. */
.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; overflow-wrap: anywhere; }

/* --- Display / flex --------------------------------------------------------- */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }
.grid-display { display: grid !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.full-width { inline-size: 100% !important; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* --- Surface / decoration helpers -------------------------------------------- */
.bg-sunken { background-color: var(--surface-sunken); }
.bg-muted  { background-color: var(--surface-muted); }
.bg-accent-soft { background-color: var(--surface-accent-soft); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.bordered { border: var(--border-width) solid var(--border-subtle); }

/* --- Responsive visibility ------------------------------------------------------
   These two only ever declare the HIDDEN state. They must never declare a
   visible one: `display: revert` (and `unset`, and any literal such as `block`)
   throws away the component's own display and replaces it with the UA default.
   `.hide-desktop` is used on `.float-btn--call`, whose `display: inline-flex`
   was being reverted to plain `inline` on every phone — the tap-to-call button
   lost its size, its centring and its circle on all 10 pages, at exactly the
   viewport it exists for. Leaving the visible state undeclared keeps every
   component in charge of its own display. `.hide-mobile` therefore needs the
   one max-width query in this file: a hide cannot be expressed mobile-first. */
@media (max-width: 39.999em) {
  .hide-mobile { display: none !important; }
}

/* ==========================================================================
   28. SCROLL REVEAL + ANIMATION HOOKS
   Default state is VISIBLE. Only when JS is on does the element start
   hidden, so a JS-off visitor still reads every word.
   ========================================================================== */

.reveal { opacity: 1; transform: none; }

html[data-js="on"] .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow) var(--ease-out),
              transform var(--transition-slow) var(--ease-out);
  will-change: opacity, transform;
}

html[data-js="on"] .reveal--fade { transform: none; }
html[data-js="on"] .reveal--up { transform: translateY(28px); }
html[data-js="on"] .reveal--scale { transform: scale(0.96); }
html[data-js="on"] .reveal--start { transform: translateX(-24px); }

/* `dir` lives on <html> itself (the head bootstrap sets it there), so neither
   `[dir="rtl"] html …` — html is never a descendant of anything — nor
   `html … [dir="rtl"] .reveal--start`, which needs a SECOND rtl element below
   html, could ever match. Both attributes have to be read off the same element.
   At (0,3,1) this also outranks the (0,2,1) rule above it. */
html[data-js="on"][dir="rtl"] .reveal--start { transform: translateX(24px); }

html[data-js="on"] .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.delay-1 { transition-delay: 80ms !important; }
.delay-2 { transition-delay: 160ms !important; }
.delay-3 { transition-delay: 240ms !important; }
.delay-4 { transition-delay: 320ms !important; }

/* Stagger children automatically without per-child classes. */
html[data-js="on"] .reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transition-slow) var(--ease-out),
              transform var(--transition-slow) var(--ease-out);
}

html[data-js="on"] .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
html[data-js="on"] .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
html[data-js="on"] .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
html[data-js="on"] .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
html[data-js="on"] .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
html[data-js="on"] .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
html[data-js="on"] .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
html[data-js="on"] .reveal-stagger.is-visible > *:nth-child(n+7) { transition-delay: 420ms; }

.counter { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   29. RESPONSIVE REFINEMENTS (mobile-first, min-width only)
   ========================================================================== */

/* --- >= 480px (large phones) -------------------------------------------------- */
@media (min-width: 30em) {
  .checklist--two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-group--stretch > .btn { flex: 0 1 auto; }
}

/* --- HEADER-FIT BUDGET (measured in Chrome with the web fonts loaded) ----------
   The header is one flex line: .brand | .nav | .header__actions, 16px gap
   between each. Below 1024px .nav is a fixed-position drawer and costs the line
   nothing; from 1024px it is in flow and takes 489px plus a 24px margin.
   .brand carries `min-inline-size: 0`, so it is the item every shortfall is
   taken out of — and it clips its overflow, so the shortfall was invisible.

   What .brand asks for (English; Urdu is narrower at every one of these):
     mark 40/46 + gap 12 + name 163/181       = 215 / 239px   name only
     mark 40/46 + gap 12 + strapline 242      = 294 / 300px   with the strapline
   Room the line can actually give .brand, and what fits in it:
      480px   302px   strapline clears by 8px only — too thin to trust
      512px   331px   strapline clears by 37px          -> restored here
      768px   256px   the two CTAs arrive; 44px SHORT of the strapline
      768px   322px   with the WhatsApp CTA yielding (below) -> clears by 22px
      800px   351px   comfortable
     1023px   574px   comfortable
     1024px   194px   the horizontal nav arrives: not even the 239px name fits

   So the strapline gets ONE stable band — 512px to 1023px — instead of
   blinking in and out across four. Nothing is lost above it: the topbar states
   the same thing in full prose at every width, and the brand NAME is never
   abbreviated (it wraps instead of clipping; see section 09). --------------- */

/* --- >= 512px (the tagline fits from here) -------------------------------------- */
@media (min-width: 32em) {
  .brand__tagline { display: block; }
}

/* --- >= 640px (small tablets) --------------------------------------------------- */
@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--half { grid-column: span 1; }
  .stats-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: row; justify-content: space-between; text-align: start; }
  .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wizard { padding: var(--space-8) var(--space-7); }
  .topbar__links { display: flex; }
  .topbar__inner { justify-content: space-between; text-align: start; }
}

/* --- >= 768px (tablets) ---------------------------------------------------------- */
@media (min-width: 48em) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__content { order: 1; }
  .cta-band--split .cta-band__inner {
    /* minmax(0, …) so a long unbreakable word in the copy cannot push the text
       track past its share and overflow the band. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
  }
  .choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .header__cta { display: inline-flex; }
  .nav-toggle__text { display: inline; }
  .brand__mark { inline-size: 2.875rem; block-size: 2.875rem; }
  .brand__name { font-size: var(--font-size-xl); }

  /* The two header CTAs land on the line here and take .header__actions from
     124px to 435px, leaving .brand 256px — 44px short of the strapline. Rather
     than drop the strapline, drop the one control on the row that costs
     nothing to lose: .float-btn--whatsapp is a fixed, always-visible action at
     every width (only .float-btn--call carries .hide-desktop), so from here up
     the header WhatsApp button duplicates a button already on screen. Removing
     it takes .header__actions back to 369px and gives .brand 322px against the
     300px it wants. WhatsApp stays one tap away — the floating button here,
     and the drawer's own WhatsApp button until 1024px — while the phone CTA,
     the primary conversion control, keeps its place. */
  .header__cta.btn--whatsapp { display: none; }
  /* A 4:3 map is right on a phone; once there is width, a landscape map shows
     more of the surrounding streets. */
  .map-embed { aspect-ratio: 16 / 9; }
}

/* --- >= 1024px (laptops) — nav goes horizontal --------------------------------- */
@media (min-width: 64em) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .checklist--two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-10); }
  .hero--page .hero__inner,
  .hero--center .hero__inner { grid-template-columns: minmax(0, 1fr); }

  .sidebar-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .sidebar-layout--start { grid-template-columns: 20rem minmax(0, 1fr); }
  .sidebar-layout--start .sidebar-layout__aside { order: -1; }
  .sticky-aside { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); }

  /* minmax(0, …) on every track: the last column carries the address and the
     email address, and a bare `fr` would let that unbreakable token set the
     column's floor and widen the whole footer. */
  .footer__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-8);
  }

  .nav {
    position: static;
    inline-size: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
    margin-inline-start: var(--space-6);
  }

  .nav__list { flex-direction: row; align-items: center; gap: var(--space-1); }

  .nav__link {
    padding-inline: var(--space-3);
    padding-block: var(--space-2);
    border-inline-start: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    position: relative;
  }

  .nav__link::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: 0.15rem;
    block-size: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-accent-600), var(--color-accent-300));
    transform: scaleX(0);
    transition: transform var(--transition-fast) var(--ease-out);
  }

  .nav__link:hover { background-color: transparent; }
  .nav__link:hover::after { transform: scaleX(1); }

  .nav__link.is-current,
  .nav__link[aria-current="page"] { background-color: transparent; color: var(--color-primary-800); }
  .nav__link.is-current::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__footer { display: none; }
  .nav-toggle { display: none; }
  .nav-backdrop { display: none; }
  .hide-desktop { display: none !important; }

  /* The horizontal nav takes 489px plus a 24px margin off the header line here
     and the line is over-subscribed by roughly 190px even with the WhatsApp
     CTA already gone: .brand is left 194px for a 239px name. The strapline is
     the decorative half of the brand, so it is what yields — the name itself
     wraps rather than clips (section 09) and the topbar still states what the
     firm does. See the header-fit budget above. */
  .brand__tagline { display: none; }

  .float-actions { inset-block-end: var(--space-7); inset-inline-end: var(--space-7); }
  .back-to-top { inset-block-end: var(--space-7); inset-inline-start: var(--space-7); }
}

/* --- >= 1280px (desktops) ---------------------------------------------------------- */
@media (min-width: 80em) {
  .nav__list { gap: var(--space-2); }
  .nav__link { font-size: var(--font-size-base); padding-inline: var(--space-4); }
  .nav__link::after { inset-inline: var(--space-4); }
  .section--wide-pad { padding-block: var(--space-12); }
}

/* ==========================================================================
   30. PRINT
   ========================================================================== */

@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body { font-size: 11pt; line-height: 1.45; }

  .site-header,
  .topbar,
  .nav,
  .nav-toggle,
  .nav-backdrop,
  .lang-toggle,
  .skip-link,
  .float-actions,
  .back-to-top,
  .cta-band,
  .btn,
  .btn-group,
  .hero__actions,
  .tabs__list,
  .form__actions { display: none !important; }

  .hero,
  .section,
  .section--dark { padding-block: 1rem !important; }

  .hero::before,
  .hero::after,
  .hero__glow,
  .hero__edge,
  .media-frame::after { display: none !important; }

  .card,
  .service-card,
  .area-card,
  .stat-card,
  .plan-card,
  .testimonial-card,
  .step-card,
  .team-card,
  .accordion__item,
  .table-wrap { border: 1pt solid #999 !important; break-inside: avoid; }

  .accordion__panel { display: block !important; }
  .tabs__panel { display: block !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }

  a[href^="http"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  h1, h2, h3 { break-after: avoid; }
  .site-footer { border-block-start: 1pt solid #999; }
}

/* ==========================================================================
   31. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html[data-js="on"] .reveal,
  html[data-js="on"] .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:hover,
  .card--interactive:hover,
  .service-card:hover,
  .area-card:hover,
  .float-btn:hover,
  .social__link:hover { transform: none !important; }

  .btn.is-loading::after { animation: none !important; }
  .nav { transition: none !important; }
}