/* ============================================================
   URBANIS V2 - Base stylesheet (Phase 1.2)
   Brand tokens + mobile-first base + restored Header & Hero,
   re-authored cleanly in V2. No em dash anywhere.
   Token values copied from the bound Urbanis Design System.
   ============================================================ */

/* Self-hosted brand fonts. These are the exact Latin and Latin Extended
   WOFF2 binaries referenced by the former Google Fonts stylesheet. Keeping
   them first-party removes an unconditional third-party request while
   preserving the current family names, weights and font-display behavior. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/jost-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/jost-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Gold hierarchy (muted gold is the PRIMARY accent) ---- */
  --gold-700: #7E6539;
  --gold-600: #957748;   /* accent hover */
  --gold-500: #A8884E;   /* PRIMARY ACCENT */
  --gold-400: #B89C64;
  --gold-300: #C7B488;
  --gold-100: #EAE1CD;
  --gold-50:  #F5F0E5;
  --gold-soft: #C49820;
  --gold-logo: #C79615;  /* mark / rare highlight only */

  /* ---- Ink / warm near-blacks ---- */
  --ink-950: #0D0C0A;    /* dark anchor backdrop */
  --ink-900: #16140F;
  --ink-800: #221F18;
  --ink-500: #6B6555;    /* secondary text */
  --ink-450: #76695A;    /* muted text, light mode: 4.78:1 on --sand-100 (WCAG AA) */
  --ink-400: #8E8775;

  /* ---- Warm neutrals ---- */
  --sand-50:  #FBF9F4;
  --sand-100: #F6F2EA;   /* page background */
  --sand-200: #EFE9DD;
  --sand-300: #E5DECF;   /* hairline / divider */
  --sand-400: #D8CFBC;
  --plaster:  #FFFFFF;
  --espresso: #3B3127;
  --stone-500: #8B857B;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--sand-100);
  --surface-card:    var(--plaster);
  --surface-raised:  var(--sand-50);
  --surface-inverse: var(--ink-950);

  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-450);
  --text-on-dark:    #F4EFE4;
  --text-on-dark-dim:#B6AE9C;

  --border-subtle:  var(--sand-300);
  --border-default: var(--sand-400);
  --border-inverse: #2E2A20;

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-press:  var(--gold-700);
  --on-accent:     #1A1305;
  --focus-ring:    var(--gold-600); /* light mode: 3.75:1 on --sand-100, 4.19:1 on white (WCAG 1.4.11 non-text 3:1 min); --gold-400 was 2.36:1/2.63:1 */
  --overline-color: var(--gold-700); /* light mode: 4.94:1 on --sand-100 (WCAG AA); --accent alone is 2.99:1 */

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-hebrew:  "Heebo", "Jost", Arial, sans-serif;

  --fs-display: clamp(3rem, 6vw, 5.2rem);
  --fs-h2:      clamp(1.85rem, 4vw, 2.9rem); /* the section-title scale already shared by why/journey/people; eco/contact converge onto it too now */
  --fs-body:    clamp(1rem, 1.2vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.72rem;

  /* ---- Spacing (8pt grid) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --container-max: 1320px;

  /* ---- Radii / elevation / motion ---- */
  --radius-control: 3px;
  --radius-card: 8px;
  --shadow-card: 0 1px 2px rgba(33, 31, 24, 0.06), 0 8px 24px rgba(33, 31, 24, 0.05);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;

  --header-h: 76px;
  --topbar-h: 40px;
}

/* ============================================================ Reset */
*, *::before, *::after { box-sizing: border-box; }
/* Inline icons (replaced the Font Awesome CDN font — see icon-svg
   markup inline in the HTML). Sized off font-size like a glyph would be,
   nudged down slightly to sit on the text baseline. */
.icon-svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; flex: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body); line-height: 1.6;
  color: var(--text-primary); background: var(--surface-page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.08;
  letter-spacing: -0.01em; margin: 0 0 var(--space-2); color: var(--text-primary);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-2); text-wrap: pretty; }
a { color: var(--accent-press); text-decoration: none; transition: color var(--dur) var(--ease-out); }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
[dir="rtl"] body { font-family: var(--font-hebrew); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Accessibility foundation (Phase 5B) ===== */
.skip-link {
  position: absolute; left: 1rem; top: -64px; z-index: 2000;
  display: inline-flex; align-items: center;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-control);
  background: var(--ink-950); color: var(--text-on-dark);
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600;
  border: 1px solid var(--accent);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 1rem; outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.noscript-banner {
  display: block; padding: 0.85rem var(--gutter); text-align: center;
  background: var(--ink-950); color: var(--text-on-dark);
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500;
}
.noscript-banner a { color: var(--gold-300); text-decoration: underline; }

/* External-route affordance: Relocation + Property Management leave the
   site (still-live WordPress pages); every other route stays on-page.
   Targets .eco-card__title (not .eco-card__cta) because .eco-card__cta
   already ends in its own animated arrow-right SVG — stacking a second,
   static glyph there read as two redundant arrows on those two cards. */
.mega__item[target="_blank"] .mega__title::after,
.mobile-dd a[target="_blank"]::after,
.eco-card__link[target="_blank"] .eco-card__title::after {
  content: "\2197"; margin-left: 0.35em; font-weight: 400;
}
/* consistent keyboard focus ring across all interactive elements */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* programmatic focus target should not draw a full-bleed ring */
#top:focus, #top:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.u-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.u-overline {
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--overline-color);
  display: inline-flex; align-items: center; gap: 0.75rem;
}
.u-overline::before { content: ""; width: 30px; height: 1px; background: var(--accent); }
/* Portuguese/French/Spanish run meaningfully longer than the English this
   uppercase+wide-tracking eyebrow style was tuned for, so the same
   letter-spacing pushes translated overlines onto an extra wrapped line
   where English fits on two. Tightening tracking for those languages
   claims back the room the English version never needed. Shared by every
   section's overline (hero, ecosystem, why, journey, people, contact). */
html:lang(pt) .u-overline, html:lang(fr) .u-overline, html:lang(es) .u-overline {
  letter-spacing: 0.14em;
}

/* Shared buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  padding: 1rem 1.7rem; border-radius: var(--radius-control);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text-primary); border-color: rgba(13,12,10,0.28); }
/* accent-press for text, not accent: raw --accent is 2.99:1 on --sand-100 (the homepage hero's own ghost-CTA hover state), fails WCAG AA for text (found in pre-launch audit). Border keeps --accent - 3:1 is the correct threshold for a non-text UI border. */
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-press); background: rgba(168,136,78,0.06); }
.btn--ghost:active { transform: translateY(1px); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  background: var(--ink-950);
  color: var(--text-on-dark-dim);
  font-size: 0.78rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--topbar-h); gap: var(--space-3);
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 1.1rem; }
.topbar__item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--text-on-dark-dim); white-space: nowrap;
}
.topbar__item svg { color: var(--accent); font-size: 0.85rem; }
a.topbar__item:hover { color: var(--text-on-dark); }
.topbar__pill {
  display: inline-block; margin-left: 0.4rem; padding: 1px 7px;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; line-height: 1.5;
}
.topbar__divider { width: 1px; height: 14px; background: rgba(255,255,255,0.14); }
.topbar__social { display: flex; align-items: center; gap: 0.85rem; }
.topbar__social a { color: var(--text-on-dark-dim); font-size: 0.9rem; }
.topbar__social a:hover { color: var(--accent); }

/* Language dropdown (desktop) */
.lang { position: relative; }
.lang__current {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 1px solid rgba(255,255,255,0.16);
  color: var(--text-on-dark); border-radius: var(--radius-control);
  padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer;
}
.lang__current img { width: 18px; height: auto; border-radius: 1px; }
.lang__current svg { font-size: 0.65rem; transition: transform var(--dur) var(--ease-out); }
.lang.is-open .lang__current svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  min-width: 168px; padding: 0.35rem; display: none;
}
.lang.is-open .lang__menu { display: block; }
.lang__option {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 0.55rem 0.6rem; border-radius: var(--radius-control);
  font-size: 0.85rem; color: var(--text-primary); text-align: left;
}
.lang__option img { width: 20px; height: auto; border-radius: 1px; }
.lang__option:hover { background: rgba(168,136,78,0.08); }
.lang__option.is-active { color: var(--accent-press); font-weight: 600; }

/* Hide top bar contact text on small screens, keep it from overflowing */
@media (max-width: 720px) {
  .topbar__item--email, .topbar__item--hours, .topbar__divider { display: none; }
  .topbar__social { display: none; }
}

/* ============================================================
   MAIN HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background: #ffffff;
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 1px 0 rgba(13,12,10,0.04), 0 10px 30px rgba(13,12,10,0.07);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: var(--header-h);
}
.site-brand {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.32em;
  font-size: 1.2rem; color: var(--text-primary); padding-left: 0.32em;
}
.site-brand:hover { color: var(--text-primary); }
.site-brand__icon { width: 1.9em; height: auto; flex: none; }

/* Desktop nav */
.site-nav { display: none; }
@media (min-width: 1180px) {
  .site-nav { display: flex; align-items: center; gap: var(--space-4); }
  .site-nav__list { display: flex; align-items: center; gap: var(--space-4); }
  .nav-item { position: relative; }
  .site-nav__link {
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    font-family: var(--font-sans); font-size: 0.9rem; font-weight: 400;
    letter-spacing: 0.04em; color: var(--text-secondary); padding-block: 1.4rem;
  }
  .site-nav__link svg { font-size: 0.62rem; transition: transform var(--dur) var(--ease-out); }
  .site-nav__link:hover { color: var(--text-primary); }
  .nav-item:hover .site-nav__link svg { transform: rotate(180deg); }
}

/* Mega menu (compact navigation dropdown) */
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(620px, 84vw); z-index: 110;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 0.9rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.nav-item--mega:hover .mega,
.nav-item--mega:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border-subtle);
}
/* accent-press, not accent, on both rules below: raw --accent is 3.34:1 on white mega panels, fails WCAG AA for text (found in pre-launch audit) */
.mega__head-title { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-press); }
.mega__head-sub { font-size: 0.78rem; color: var(--text-secondary); margin: 0.15rem 0 0; }
.mega__cta { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-press); white-space: nowrap; display: inline-flex; gap: 0.4rem; align-items: center; }
.mega__cta:hover { color: var(--accent-press); }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; }
.mega__item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem; border-radius: var(--radius-control);
  border: 1px solid transparent; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.mega__item:hover { background: rgba(168,136,78,0.06); border-color: var(--border-subtle); }
.mega__icon {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--radius-control); background: rgba(168,136,78,0.10); color: var(--accent); font-size: 0.82rem;
}
.mega__item:hover .mega__icon { background: var(--accent); color: #fff; }
.mega__title { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; color: var(--text-primary); line-height: 1.2; }
.mega__desc { display: block; font-size: 0.7rem; color: var(--text-secondary); line-height: 1.35; margin-top: 1px; }
.mega__action { display: none; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-wa {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border-default); color: var(--accent-press);
  font-size: 1.05rem; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.header-wa:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.header-cta { display: none; }
@media (min-width: 1180px) { .header-cta { display: inline-flex; white-space: nowrap; flex-shrink: 0; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px; background: transparent; border: none; cursor: pointer;
}
.nav-toggle__bar { display: block; height: 1.5px; width: 100%; background: var(--text-primary); border-radius: 2px; }
@media (min-width: 1180px) { .nav-toggle { display: none; } }

/* ============================================================
   MOBILE MENU (Phase 1.3 polish)
   ============================================================ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--surface-page);
  display: flex; flex-direction: column; padding: clamp(1.1rem, 5vw, 1.75rem);
  overflow-y: auto; transform: translateX(100%); transition: transform 300ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu, .mobile-menu * { -webkit-user-select: none; user-select: none; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; margin-bottom: var(--space-3);
}
.mobile-menu__head .site-brand { font-size: 1.05rem; }
.nav-close {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer; color: var(--text-secondary);
  border-radius: 50%; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav-close:hover { background: rgba(13,12,10,0.05); color: var(--text-primary); }

.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link {
  font-family: var(--font-sans); font-size: 1.02rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-primary); line-height: 1.2;
  padding: 0.95rem 0.1rem; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.mobile-menu__link:hover { color: var(--accent-press); }
.mobile-menu__link svg { font-size: 0.72rem; color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.mobile-dd { display: none; flex-direction: column; padding: 0.2rem 0 0.5rem 0.1rem; }
.mobile-dd.is-open { display: flex; }
.mobile-dd__toggle.is-open svg { transform: rotate(180deg); }
.mobile-dd a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.52rem 0.2rem;
  font-family: var(--font-sans); font-size: 0.88rem; color: var(--text-secondary);
}
.mobile-dd a svg { width: 1.05rem; text-align: center; color: var(--accent); font-size: 0.82rem; }
.mobile-dd a:hover { color: var(--text-primary); }
.mobile-menu__cta {
  margin-top: var(--space-3); font-size: 0.72rem; padding-block: 0.85rem;
  align-self: stretch; letter-spacing: 0.12em;
}

.mobile-contact {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
}
.mobile-contact a, .mobile-contact span {
  display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--text-secondary);
  padding: 0.3rem 0;
}
.mobile-contact a:first-child { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); }
.mobile-contact svg { color: var(--accent); width: 1.05rem; text-align: center; font-size: 0.85rem; }
.mobile-contact .topbar__pill { margin-left: 0.15rem; }

.mobile-social { display: flex; gap: 0.9rem; margin-top: var(--space-3); }
.mobile-social a {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-subtle); font-size: 0.85rem; color: var(--text-secondary);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.mobile-social a:hover { color: var(--accent); border-color: var(--accent); }

.mobile-lang { margin-top: var(--space-4); }
.mobile-lang__label { display: block; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.mobile-lang__options { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mobile-lang__btn {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.65rem; min-height: 40px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: transparent; cursor: pointer; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text-secondary);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.mobile-lang__btn img { width: 16px; height: auto; border-radius: 1px; }
.mobile-lang__btn:hover { border-color: var(--accent); }
.mobile-lang__btn.is-active { border-color: var(--accent); background: rgba(168,136,78,0.08); color: var(--accent-press); font-weight: 600; }

/* ---- Mobile menu: display + accessibility preferences (Phase LEGAL-2.1) ---- */
.mobile-prefs { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 0.65rem; }
.mobile-prefs__label { display: block; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.mobile-prefs .uf-themesel { width: 100%; }
.mobile-prefs .uf-themesel__btn { flex: 1 1 0; justify-content: center; min-height: 40px; }
.mobile-prefs__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mobile-prefs__actions .uf-util-btn { min-height: 40px; }

/* ============================================================
   HERO - full-height split (restored)
   ============================================================ */
.hero {
  display: grid; grid-template-columns: 1fr; align-items: stretch;
  min-height: clamp(560px, 88vh, 920px); background: var(--surface-page); overflow: hidden;
}
@media (min-width: 1000px) { .hero { grid-template-columns: 1.05fr 0.95fr; } }

.hero__text {
  grid-column: 1; align-self: center; max-width: 620px; width: 100%;
  padding: clamp(2rem, 5vw, 5rem); order: 1;
}
.hero__overline { margin-bottom: 1.4rem; }
.hero__title { font-size: var(--fs-display); font-weight: 600; line-height: 1.02; letter-spacing: 0.02em; margin: 0 0 0.65rem; color: var(--text-primary); }
.hero__brandline {
  font-family: var(--font-sans); font-size: clamp(0.82rem, 1.05vw, 1rem); font-weight: 500;
  /* accent-press, not accent: raw --accent is 2.99:1 on --sand-100, fails WCAG AA for text (found in pre-launch audit) */
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-press); margin: 0 0 1.6rem;
}
.hero__subheadline {
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 400;
  line-height: 1.4; color: var(--text-primary); max-width: 40ch; margin: 0 0 2.2rem;
  text-wrap: pretty;
}
.hero__subheadline-key { color: var(--accent-press); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__actions .btn { flex: 1 1 240px; text-align: center; }

/* Visual side: full-bleed image */
.hero__visual { position: relative; order: 2; min-height: 42vh; }
@media (min-width: 1000px) { .hero__visual { min-height: auto; } }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-layer {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(0.94) saturate(0.97);
  opacity: 0; transform: scale(1.05); transition: opacity 900ms var(--ease-out), transform 7000ms linear;
}
.hero-layer.is-active { opacity: 1; transform: scale(1); }
/* soft sand blend on left edge (desktop) + bottom darken for caption legibility */
.hero__visual::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(13,12,10,0.5) 0%, rgba(13,12,10,0.16) 30%, rgba(13,12,10,0) 56%);
}
@media (min-width: 1000px) {
  .hero__visual::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, var(--surface-page) 0%, rgba(246,242,234,0) 16%);
  }
}
.hero-caption {
  position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: 34%;
  right: clamp(1.25rem, 3vw, 2.5rem); z-index: 4;
  display: flex; flex-direction: column; gap: 0.55rem; max-width: 30rem;
}
/* soft feathered readability scrim behind the caption (not a hard box) */
.hero-caption::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -0.9rem -2.4rem -1.1rem -1.1rem; border-radius: 14px;
  background: radial-gradient(115% 130% at 16% 52%, rgba(13,12,10,0.6) 0%, rgba(13,12,10,0.34) 46%, rgba(13,12,10,0) 80%);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
.hero-caption__label {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500;
  color: #fff; line-height: 1.05; text-shadow: 0 1px 16px rgba(13,12,10,0.8), 0 1px 3px rgba(13,12,10,0.55);
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
.hero-caption__label.is-shown { opacity: 1; }
.hero-caption__label::before { content: ""; width: 22px; height: 1px; background: var(--accent); flex: none; }
.hero-caption__support {
  font-family: var(--font-sans); font-size: clamp(0.85rem, 1.1vw, 0.98rem); font-weight: 500;
  line-height: 1.5; color: #fff; text-shadow: 0 1px 12px rgba(13,12,10,0.85), 0 1px 2px rgba(13,12,10,0.6);
  padding-left: 1.95rem;
  opacity: 0; transition: opacity 420ms var(--ease-out) 70ms;
}
.hero-caption__support.is-shown { opacity: 1; }
.hero-bars {
  position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.2rem, 2vw, 1.6rem);
  z-index: 4; display: flex; gap: 6px;
}
.hero-bar {
  position: relative; width: 26px; height: 2px; padding: 0; border: none;
  background: rgba(255,255,255,0.35); border-radius: 2px; cursor: pointer; overflow: hidden;
}
.hero-bar::after { content: ""; position: absolute; inset: 0; width: 0; background: #fff; }
.hero-bar.is-active::after { width: 100%; transition: width 4.5s linear; }
.hero-bar:hover { background: rgba(255,255,255,0.55); }
.hero-pause {
  position: absolute; right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1rem, 1.8vw, 1.4rem);
  z-index: 4; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; background: rgba(13,12,10,0.34);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-size: 0.7rem; cursor: pointer; transition: background var(--dur) var(--ease-out);
}
.hero-pause:hover { background: rgba(13,12,10,0.55); }

/* Routes strip: all nine routes visible in the hero text column; the active
   route lights gold with an underline scaling in left->right, in step with
   the visual rotation. Static wrap (no marquee) so the sync is always seen. */
.routes-strip {
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem; max-width: 560px;
}
.routes-strip__label {
  display: block; text-align: left;
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600;
  /* accent-press, not accent: raw --accent is 2.99:1 on --sand-100, fails WCAG AA for text (found in pre-launch audit) */
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-press);
  margin-bottom: 0.8rem;
}
.routes-strip__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.routes-strip__track {
  display: flex; align-items: center; width: max-content; column-gap: 2rem;
  transition: transform 0.65s var(--ease-out);
}
.routes-strip__item {
  position: relative; padding-bottom: 5px;
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; opacity: 0.6;
  transition: color 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.routes-strip__icon {
  width: 1.05em; height: 1.05em; flex: none; opacity: 0.8;
  transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out);
}
.routes-strip__item::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 480ms var(--ease-out);
}
.routes-strip__item.is-active { color: var(--accent-press); opacity: 1; font-weight: 600; }
.routes-strip__item.is-active .routes-strip__icon { opacity: 1; transform: scale(1.15) rotate(-4deg); }
.routes-strip__item.is-active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .routes-strip__item.is-active .routes-strip__icon { transform: none; }
}
.hero__trust {
  margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--border-subtle);
  max-width: 560px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.hero__trust-sep { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .routes-strip__item, .routes-strip__item::after { transition: none; }
  .routes-strip__track { transition: none; }
}
@media (max-width: 640px) {
  .routes-strip { margin-top: 1.4rem; max-width: none; }
  /* Mobile reads the strip as one centered "now showing" module rather than
     a left-anchored ticker (David, 2026-07-23): the label centers, and the
     viewport mask fades both edges to match the JS centering the active
     item in translateStrip() (js/urbanis-hero.js). */
  .routes-strip__label { text-align: center; }
  .routes-strip__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .routes-strip__item { font-size: 0.68rem; }
  .routes-strip__track { column-gap: 1.4rem; justify-content: center; }
  .hero__trust { max-width: none; }
}

/* Mobile hero: text first, image banner below */
@media (max-width: 999px) {
  .hero { display: flex; flex-direction: column; min-height: auto; }
  .hero__text { order: 1; max-width: 100%; padding: clamp(1.5rem, 5vw, 2.25rem) var(--gutter) 1.4rem; }
  .hero__overline { margin-bottom: 1rem; }
  .hero__title { margin-bottom: 0.5rem; }
  .hero__brandline { margin-bottom: 1.1rem; }
  .hero__subheadline { margin-bottom: 1.7rem; font-size: 1.22rem; }
  .hero__visual { order: 2; width: 100%; height: 46vh; min-height: 320px; }
  /* soft warm sand blend at the TOP of the mobile image banner */
  .hero__visual::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom, var(--surface-page) 0%, rgba(246,242,234,0.55) 6%, rgba(246,242,234,0) 16%);
  }
  .hero__actions .btn { flex: 1 1 240px; }
  .hero-caption { bottom: 40%; }
  .hero-caption__label { font-size: 1.5rem; }
}
@media (max-width: 520px) { .hero__visual { height: 44vh; } .hero-caption__support { font-size: 0.85rem; } }

@media (prefers-reduced-motion: reduce) {
  .hero-layer { transition: opacity 200ms linear; transform: none; }
  .hero-layer.is-active { transform: none; }
  .hero-caption__label, .hero-caption__support { transition: opacity 200ms linear; }
  .hero-bar.is-active::after { transition: none; width: 100%; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   ABOUT BRIDGE (Phase 5D.1) - quiet editorial transition
   ============================================================ */
.bridge {
  background: var(--surface-page);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.bridge__inner {
  max-width: 800px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.bridge__overline { margin-bottom: 1.4rem; }
.bridge__overline::before { width: 30px; }
.bridge__lead {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--text-primary);
  margin: 0; text-wrap: pretty;
}
.bridge__support {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.6;
  color: var(--text-secondary); margin: 1.25rem 0 0;
  max-width: 560px; text-wrap: pretty;
}
.bridge__inner::after {
  content: ""; width: 48px; height: 1px;
  background: var(--accent); opacity: 0.5;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ============================================================
   SELECTED PARTNERS (added 2026-07-29) - continuous logo marquee,
   never pauses (same "always moving" preference as the hero rotation
   and ecosystem-card drift below). Track holds the logo set twice
   back-to-back and animates exactly -50%, so the loop point is
   invisible; the second copy is aria-hidden since the first already
   carries the real content for screen readers.
   ============================================================ */
.partners { background: var(--surface-page); padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow: hidden; }
.partners__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.partners__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.94rem, 1.3vw, 1.05rem); line-height: 1.6;
  color: var(--text-secondary); margin: 0; text-wrap: pretty;
}
/* margin: 0 auto here was a no-op (.u-overline is inline-flex; centering
   already comes from .partners__inner's text-align:center) - found in the
   2026-07-30 audit. The bottom margin moved here from .partners__lead
   above now that the label comes first in the DOM (heading-order fix,
   same audit). */
.partners__label { margin: 0 0 0.6rem; }
.partners__viewport {
  margin-top: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partners__track {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem);
  width: max-content; list-style: none; margin: 0; padding: 0 0.5rem;
  animation: partnersScroll 34s linear infinite;
}
.partners__logo {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 148px; height: 84px; padding: 0.6rem 1rem;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.partners__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  /* Every other card component on the site gets a dedicated mobile
     breakpoint (eco cards, journey, people carousel) - the marquee was
     missing one (2026-07-30 audit): shrink the tile so more logos are
     visible per screen instead of a slow, sparse trickle on phones. */
  .partners__logo { width: 112px; height: 64px; padding: 0.45rem 0.7rem; }
}
.partners__logo--pending {
  color: var(--text-secondary); font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center; border-style: dashed;
}
@keyframes partnersScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* .partners__track is width:max-content - it can never overflow itself,
     so overflow-x:auto there is a no-op (found in the 2026-07-30 audit).
     .partners__viewport is the element that actually clips the content. */
  .partners__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .partners__track { animation: none; }
  /* The duplicate half only exists for the seamless animation loop - with
     motion off, hide it so a manually-scrolled strip shows the real six
     logos once instead of the doubled set. */
  .partners__logo[aria-hidden="true"] { display: none; }
}

/* ============================================================
   ECOSYSTEM / DIVISIONS (Phase 2)
   ============================================================ */
.eco {
  background: var(--surface-page);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 8px);
}
.eco__intro { max-width: 760px; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.eco__intro--center {
  max-width: 880px; margin-left: auto; margin-right: auto; text-align: center;
}
.eco__intro--center .u-overline { justify-content: center; }
.eco__intro--center .u-overline::before { display: none; }
.eco__intro--center .eco__title {
  font-size: clamp(2.75rem, 6.2vw, 4.75rem); line-height: 1.02; margin: 0 0 1rem;
}
.eco__intro--center .eco__lead { margin-left: auto; margin-right: auto; max-width: 62ch; }
.eco__intro .u-overline { margin-bottom: 1.1rem; }
.eco__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 1.1rem;
}
.eco__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  color: var(--text-secondary); max-width: 60ch; margin: 0;
}

.eco__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem); margin: 0 0 clamp(2.25rem, 4vw, 3.5rem);
  list-style: none; padding: 0;
}
/* 4-up variant for the Companies showcase (added 2026-08-01) - the two
   responsive .eco__grid breakpoints below still apply as-is (2-col then
   1-col), since they target .eco__grid directly and come later in the
   cascade than this same-specificity override. */
.eco__grid--four { grid-template-columns: repeat(4, 1fr); }
.eco-card { display: flex; }
.eco-card__link {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.12;
  overflow: hidden; border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle); color: #fff;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.eco-card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: #fff; }
.eco-card__media {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(1) saturate(0.98); transform-origin: center;
  transition: filter var(--dur) var(--ease-out);
  animation: ecoDrift 16s var(--ease-out) infinite alternate;
}
/* staggered delays so the 9 cards don't pulse in unison */
.eco-card:nth-child(2) .eco-card__media { animation-delay: -2s; }
.eco-card:nth-child(3) .eco-card__media { animation-delay: -4s; }
.eco-card:nth-child(4) .eco-card__media { animation-delay: -6s; }
.eco-card:nth-child(5) .eco-card__media { animation-delay: -8s; }
.eco-card:nth-child(6) .eco-card__media { animation-delay: -10s; }
.eco-card:nth-child(7) .eco-card__media { animation-delay: -12s; }
.eco-card:nth-child(8) .eco-card__media { animation-delay: -1s; }
.eco-card:nth-child(9) .eco-card__media { animation-delay: -3s; }
@keyframes ecoDrift { from { transform: scale(1); } to { transform: scale(1.08); } }
.eco-card__link:hover .eco-card__media,
.eco-card__link:focus-visible .eco-card__media { filter: brightness(0.7); }
.eco-card__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(13,12,10,0.62) 0%, rgba(13,12,10,0.24) 42%, rgba(13,12,10,0) 70%);
  transition: background var(--dur) var(--ease-out);
}
.eco-card__link:hover .eco-card__scrim,
.eco-card__link:focus-visible .eco-card__scrim {
  background: linear-gradient(to top, rgba(13,12,10,0.84) 0%, rgba(13,12,10,0.54) 46%, rgba(13,12,10,0.3) 100%);
}
.eco-card__body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.25rem, 2vw, 1.6rem);
}
/* refined frosted-glass panel behind the text (all viewports) - keeps text
   readable while the image stays bright; strengthens slightly on hover */
.eco-card__body::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; z-index: 0;
  background: linear-gradient(to top, rgba(13,12,10,0.3) 0%, rgba(13,12,10,0.08) 62%, rgba(13,12,10,0) 100%);
  -webkit-backdrop-filter: blur(2px) saturate(1.04); backdrop-filter: blur(2px) saturate(1.04);
  -webkit-mask-image: linear-gradient(to top, #000 58%, transparent 100%);
  mask-image: linear-gradient(to top, #000 58%, transparent 100%);
  pointer-events: none;
  transition: background var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
}
.eco-card__link:hover .eco-card__body::before,
.eco-card__link:focus-visible .eco-card__body::before {
  background: linear-gradient(to top, rgba(13,12,10,0.46) 0%, rgba(13,12,10,0.16) 62%, rgba(13,12,10,0) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(1.08); backdrop-filter: blur(3px) saturate(1.08);
}
.eco-card__num, .eco-card__ami, .eco-card__icon, .eco-card__title, .eco-card__desc, .eco-card__cta { position: relative; z-index: 1; }
.eco-card__num {
  position: absolute; top: clamp(1rem, 1.6vw, 1.3rem); left: clamp(1.25rem, 2vw, 1.6rem);
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.82);
}
.eco-card__ami {
  position: absolute; top: clamp(0.9rem, 1.5vw, 1.2rem); right: clamp(0.9rem, 1.5vw, 1.2rem);
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.32rem 0.62rem; border-radius: 999px;
  border: 1px solid rgba(199,150,21,0.65); background: rgba(13,12,10,0.34);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold-300); white-space: nowrap;
}
.eco-card__icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 0.85rem;
  border-radius: var(--radius-control); background: var(--accent); color: #1A1305; font-size: 0.95rem;
}
.eco-card__title {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.55rem, 2.5vw, 2.05rem);
  letter-spacing: 0.005em; line-height: 1.06; color: #fff; margin: 0 0 0.55rem;
  text-shadow: 0 1px 14px rgba(13,12,10,0.6); text-wrap: balance;
}
.eco-card__desc {
  font-family: var(--font-sans); font-weight: 400; font-size: 0.85rem; line-height: 1.5;
  color: rgba(255,255,255,0.9); margin: 0 0 0.9rem; text-shadow: 0 1px 8px rgba(13,12,10,0.6);
}
.eco-card__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300);
}
.eco-card__cta svg { font-size: 0.64rem; transition: transform var(--dur) var(--ease-out); }
.eco-card__link:hover .eco-card__cta,
.eco-card__link:focus-visible .eco-card__cta { color: #fff; }
.eco-card__link:hover .eco-card__cta svg,
.eco-card__link:focus-visible .eco-card__cta svg { transform: translateX(4px); }

.eco__cta {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap; padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.75rem, 3.2vw, 3rem);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.eco__cta-text { max-width: 46ch; }
.eco__cta-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.1; color: var(--text-primary); margin: 0 0 0.45rem;
}
.eco__cta-text p {
  font-family: var(--font-sans); font-weight: 300; font-size: 1rem; line-height: 1.55;
  color: var(--text-secondary); margin: 0;
}
.eco__cta .btn { flex: none; }

@media (max-width: 900px) {
  .eco__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Compact, tight stack: about 3 inactive cards readable per scroll view.
     Heights animate; the centered card opens, neighbours stay compact.
     Expand above / collapse below stay balanced so scroll position holds. */
  .eco { padding: 2.5rem 0 2.75rem; }
  .eco__intro { margin-bottom: 1.5rem; }
  .eco__grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 1.75rem; }
  .eco-card { display: block; }
  .eco-card__link {
    aspect-ratio: auto; height: 168px; width: 100%; opacity: 0.92;
    transition: height 380ms var(--ease-out), opacity 320ms var(--ease-out), box-shadow 380ms var(--ease-out);
  }
  .eco-card.is-active .eco-card__link {
    height: 340px; opacity: 1; box-shadow: 0 18px 46px rgba(13,12,10,0.26);
  }
  /* soft glass behind the mobile text so it is readable without hover */
  .eco-card__body::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
    background: linear-gradient(to top, rgba(13,12,10,0.7) 0%, rgba(13,12,10,0.3) 55%, rgba(13,12,10,0) 100%);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
    mask-image: linear-gradient(to top, #000 60%, transparent 100%);
    opacity: 0.78; transition: opacity 320ms var(--ease-out); pointer-events: none;
  }
  .eco-card.is-active .eco-card__body::before { opacity: 1; }
  .eco-card__num, .eco-card__ami, .eco-card__icon, .eco-card__title, .eco-card__desc, .eco-card__cta { position: relative; z-index: 1; }
  .eco-card__ami { position: absolute; }
  .eco-card__desc { color: #fff; }
  /* compact card shows the title; description + CTA reveal when active/open */
  .eco-card__icon { margin-bottom: 0.7rem; }
  .eco-card__desc, .eco-card__cta {
    opacity: 0; max-height: 0; overflow: hidden; margin-bottom: 0;
    transition: opacity 260ms var(--ease-out), max-height 380ms var(--ease-out), margin 380ms var(--ease-out);
  }
  .eco-card.is-active .eco-card__desc { opacity: 1; max-height: 8rem; margin-bottom: 0.9rem; }
  .eco-card.is-active .eco-card__cta { opacity: 1; max-height: 2.5rem; }
  .eco__cta { flex-direction: column; align-items: flex-start; }
  .eco__cta .btn { align-self: stretch; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  /* static, fully-open fallback: no motion, everything readable */
  .eco-card { height: auto; display: block; }
  .eco-card__link { height: auto; aspect-ratio: 4 / 3.2; opacity: 1; transition: none; }
  .eco-card__body::before { opacity: 1; }
  .eco-card__desc, .eco-card__cta { opacity: 1; max-height: none; overflow: visible; transition: none; }
  .eco-card.is-active .eco-card__desc { margin-bottom: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-card__media { animation: none; }
}

/* ============================================================
   ECOSYSTEM ROUTE MODAL (Phase 2.5)
   ============================================================ */
.eco-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); }
.eco-modal[hidden] { display: none; }
.eco-modal__backdrop {
  position: absolute; inset: 0; background: rgba(13,12,10,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 240ms var(--ease-out);
}
.eco-modal.is-open .eco-modal__backdrop { opacity: 1; }
.eco-modal__panel {
  position: relative; z-index: 1; width: min(440px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(251,249,244,0.94));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: 0 24px 70px rgba(13,12,10,0.28);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.eco-modal.is-open .eco-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.eco-modal__close {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 40px; height: 40px;
  display: grid; place-items: center; background: transparent; border: none; cursor: pointer;
  color: var(--text-secondary); border-radius: 50%; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.eco-modal__close:hover { background: rgba(13,12,10,0.05); color: var(--text-primary); }
.eco-modal__panel .u-overline { margin-bottom: 1rem; }
.eco-modal__title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.05; color: var(--text-primary); margin: 0 0 0.6rem; padding-right: 2rem;
}
.eco-modal__line {
  font-family: var(--font-sans); font-weight: 500; font-size: 0.98rem; line-height: 1.5;
  color: var(--accent-press); margin: 0 0 0.7rem;
}
.eco-modal__line:empty { display: none; }
.eco-modal__text {
  font-family: var(--font-sans); font-weight: 300; font-size: 0.96rem; line-height: 1.6;
  color: var(--text-secondary); margin: 0 0 1.6rem;
}
.eco-modal__actions { display: flex; flex-direction: column; gap: 0.7rem; }
.eco-modal__actions .btn { width: 100%; }
@media (min-width: 480px) {
  .eco-modal__actions { flex-direction: row; }
  .eco-modal__actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-modal__backdrop, .eco-modal__panel { transition: none; }
  .eco-modal__panel { transform: none; }
}

/* Site-wide exit-intent popup (added 2026-08-01) - same overlay/panel
   pattern as .eco-modal above, one z-index higher since it can in
   principle stack above other page chrome. */
.exit-popup { position: fixed; inset: 0; z-index: 410; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); }
.exit-popup[hidden] { display: none; }
.exit-popup__backdrop {
  position: absolute; inset: 0; background: rgba(13,12,10,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 240ms var(--ease-out);
}
.exit-popup.is-open .exit-popup__backdrop { opacity: 1; }
.exit-popup__panel {
  position: relative; z-index: 1; width: min(440px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(251,249,244,0.95));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: 0 24px 70px rgba(13,12,10,0.28);
  padding: clamp(1.75rem, 4vw, 2.25rem);
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.exit-popup.is-open .exit-popup__panel { opacity: 1; transform: translateY(0) scale(1); }
/* 44px close target (WCAG/Apple/Google tap-target minimum) - deliberately
   larger than .eco-modal__close's 40px, per the 2026-08-01 CRO research's
   specific finding that a hard-to-hit exit-popup close reads as a dark
   pattern in itself. */
.exit-popup__close {
  position: absolute; top: 0.7rem; right: 0.7rem; width: 44px; height: 44px;
  display: grid; place-items: center; background: transparent; border: none; cursor: pointer;
  color: var(--text-secondary); border-radius: 50%; font-size: 1.3rem; line-height: 1;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.exit-popup__close:hover { background: rgba(13,12,10,0.05); color: var(--text-primary); }
.exit-popup__title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1.15; color: var(--text-primary); margin: 0 0 0.6rem; padding-right: 2rem;
}
.exit-popup__body {
  font-family: var(--font-sans); font-weight: 300; font-size: 0.96rem; line-height: 1.55;
  color: var(--text-secondary); margin: 0 0 1.4rem;
}
.exit-popup__form { display: flex; flex-direction: column; gap: 1rem; }
.exit-popup__submit { width: 100%; margin-top: 0.2rem; font-size: 0.78rem; padding-block: 1rem; }
.exit-popup__whatsapp { font-size: 0.84rem; color: var(--text-secondary); margin: 0.3rem 0 0; text-align: center; }
.exit-popup__whatsapp a { color: var(--accent-press); font-weight: 600; }
.exit-popup__fine { font-size: 0.76rem; color: var(--text-muted); margin: 0; text-align: center; }
.exit-popup__success { text-align: center; padding: 0.5rem 0 0.25rem; }
.exit-popup__success p {
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--text-primary); margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .exit-popup__backdrop, .exit-popup__panel { transition: none; }
  .exit-popup__panel { transform: none; }
}

/* ============================================================
   WHY URBANIS (Phase 3)
   ============================================================ */
.why {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(168,136,78,0.07), rgba(168,136,78,0) 60%),
    linear-gradient(180deg, #FBF7EF 0%, #F4EEE1 100%);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 8px);
}
/* very soft system line-grid (the light tech texture). The pseudo is bounded
   by inset:0 + isolation:isolate, so NO overflow:hidden is needed on .why
   (overflow:hidden on this ancestor would break the mobile deck's sticky pin). */
.why::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(168,136,78,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168,136,78,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 75%);
}
.why__intro { max-width: 860px; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.why__intro .u-overline { margin-bottom: 1.1rem; }
.why__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 1.1rem; max-width: 24ch;
}
.why__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  color: var(--text-secondary); max-width: 66ch; margin: 0;
}
.why__lead--second { margin-top: 1rem; color: var(--text-primary); font-weight: 400; }
.why__lead-mob { display: none; } /* mobile-only shorter intro; shown at <=640px */

.why__mrows { display: none; } /* desktop: hidden; shown only in the <=640px mobile row-deck media query below */

/* ============================================================
   WHY URBANIS - desktop two-panel comparison (Phase WHY-DESKTOP-REDESIGN)
   Desktop/tablet only; mobile card deck (<=640px) is untouched.
   ============================================================ */
.why__panels { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Bridge line between the headline and the comparison (panels on desktop,
   card deck on mobile) — lives in .why__intro so it shows on both, not just
   desktop (David, 2026-07-23: mobile was missing any transition into the
   card deck, making the abstract headline feel disconnected from it). */
.why__panels-lead {
  text-align: center; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.3; color: var(--accent-press);
}

.why-cmp {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

/* Panels */
.why-panel {
  position: relative; border-radius: var(--radius-card);
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.35rem, 2vw, 2rem);
  overflow: hidden;
}
.why-panel--without {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.why-panel--urbanis {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(199,150,21,0.14), rgba(199,150,21,0) 55%),
    linear-gradient(158deg, #33271A 0%, #241A10 100%);
  border: 1px solid rgba(199,170,110,0.28);
  box-shadow: 0 1px 0 rgba(241,234,217,0.06) inset, 0 18px 44px rgba(80,55,20,0.20);
}
/* Panel heading: label + name, aligned horizontally across both panels */
.why-panel__head {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-bottom: clamp(1.1rem, 1.9vw, 1.6rem);
  padding-bottom: clamp(0.9rem, 1.6vw, 1.25rem);
  border-bottom: 1px solid var(--border-subtle);
}
.why-panel__label {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-press);
}
.why-panel__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.1; color: var(--text-primary);
}
.why-panel--urbanis .why-panel__head { border-bottom-color: rgba(199,170,110,0.22); }
.why-panel--urbanis .why-panel__label { color: #D8BF89; }
.why-panel--urbanis .why-panel__name { color: var(--text-on-dark); }

.why-panel__rows { list-style: none; margin: 0; padding: 0; }
.why-row {
  display: flex; align-items: flex-start; gap: clamp(0.85rem, 1.4vw, 1.15rem);
  padding: clamp(0.9rem, 1.5vw, 1.15rem) 0;
  border-top: 1px solid var(--border-subtle);
  transition: background var(--dur) var(--ease-out);
}
.why-row:first-child { border-top: none; }
.why-panel--urbanis .why-row { border-top-color: rgba(199,170,110,0.16); }

.why-row__icon {
  display: grid; place-items: center; flex: none;
  width: clamp(42px, 4vw, 52px); height: clamp(42px, 4vw, 52px); border-radius: 50%;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.why-panel--without .why-row__icon {
  background: rgba(139,133,123,0.14); color: var(--text-secondary);
}
.why-panel--urbanis .why-row__icon {
  background: linear-gradient(150deg, #C6A45A, #9E7E42); color: #241A0E;
}
.why-row__body { display: flex; flex-direction: column; gap: 0.2rem; }
.why-row__title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.25;
}
.why-row__desc {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.88rem, 1.1vw, 0.96rem); line-height: 1.5;
}
.why-panel--without .why-row__title { color: var(--text-primary); }
.why-panel--without .why-row__desc { color: var(--text-muted); }
.why-panel--urbanis .why-row__title { color: var(--text-on-dark); }
.why-panel--urbanis .why-row__desc { color: var(--text-on-dark-dim); }

/* Hover: lift the icon and cross-highlight the paired row on the opposite side */
.why-row:hover .why-row__icon { transform: scale(1.06); }
.why-panel--urbanis .why-row:hover .why-row__icon,
.why-panel--urbanis .why-row.is-linked .why-row__icon { box-shadow: 0 0 0 5px rgba(199,150,21,0.16); }
.why-panel--without .why-row.is-linked { background: rgba(168,136,78,0.06); }
.why-panel--urbanis .why-row.is-linked { background: rgba(199,150,21,0.08); }

/* Active row (scroll-driven on desktop): make the solution side feel earned */
.why-panel--without .why-row.is-active { background: rgba(168,136,78,0.06); }
.why-panel--without .why-row.is-active .why-row__icon {
  background: rgba(168,136,78,0.18); color: var(--text-primary);
}
.why-panel--urbanis .why-row.is-active {
  background: rgba(199,150,21,0.11); border-top-color: rgba(199,170,110,0.34);
}
.why-panel--urbanis .why-row.is-active .why-row__icon { box-shadow: 0 0 0 6px rgba(199,150,21,0.20); }
.why-panel--urbanis .why-row.is-active .why-row__title { color: #FBF3DF; }
.why-panel--urbanis .why-row.is-active .why-row__desc { color: #E7DDC6; }

/* Final emphasis: when the last pair is reached, the right side feels complete */
.why__panels.is-complete .why-panel--urbanis {
  border-color: rgba(214,190,140,0.5);
  box-shadow: 0 0 0 1px rgba(199,170,110,0.22), 0 1px 0 rgba(241,234,217,0.06) inset, 0 22px 50px rgba(80,55,20,0.24), 0 0 46px rgba(199,150,21,0.14);
}
.why__panels.is-complete .why-panel--urbanis .why-panel__name { color: #FBF3DF; }
.why__panels.is-complete .why-bottom { box-shadow: var(--shadow-card), 0 0 30px rgba(199,150,21,0.10); border-color: rgba(199,170,110,0.35); }

/* Center transform arrow */
.why-transform { display: grid; place-items: center; }
.why-transform__track { display: grid; place-items: center; }
.why-transform__arrow {
  display: grid; place-items: center; width: clamp(46px, 4vw, 58px); height: clamp(46px, 4vw, 58px);
  border-radius: 50%; background: linear-gradient(150deg, #C6A45A, #9E7E42); color: #241A0E;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  box-shadow: 0 8px 22px rgba(120,90,30,0.28);
}
/* From tablet up: the arrow rides a track that JS moves to the active row pair */
@media (min-width: 641px) {
  .why-transform { position: relative; align-self: stretch; }
  .why-transform__track {
    position: absolute; left: 50%; top: var(--why-arrow-top, 50%);
    transform: translate(-50%, -50%);
    transition: top 0.5s var(--ease-out);
  }
  html[data-a11y-motion="on"] .why-transform__track { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .why-transform__track { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-motion="on"]) .why-transform__arrow { animation: whyArrowPulse 3.2s var(--ease-out) infinite; }
}
@keyframes whyArrowPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(120,90,30,0.28), 0 0 0 0 rgba(199,150,21,0.28); }
  50% { box-shadow: 0 8px 22px rgba(120,90,30,0.28), 0 0 0 8px rgba(199,150,21,0); }
}

/* Bottom statement bar */
.why-bottom {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.3rem, 2.2vw, 2rem);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.why-bottom__mark {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  color: var(--accent); font-size: 1.3rem;
}
.why-bottom__text {
  flex: 1; margin: 0; font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.35; color: var(--text-primary);
  text-wrap: pretty;
}
.why-bottom__cta {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent-press); text-decoration: none; white-space: nowrap;
  padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--border-subtle);
  transition: color var(--dur) var(--ease-out);
}
.why-bottom__cta svg { transition: transform var(--dur) var(--ease-out); }
.why-bottom__cta:hover { color: var(--accent-hover); }
.why-bottom__cta:hover svg { transform: translateX(3px); }

/* Scroll-reveal (added by JS only when motion is allowed) */
.why__panels--animate .why-panel__head,
.why__panels--animate .why-row,
.why__panels--animate .why-transform__arrow,
.why__panels--animate .why-bottom {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.why__panels--animate .why-transform__arrow { transform: scale(0.7); }
.why__panels--animate.is-revealed .why-panel__head,
.why__panels--animate.is-revealed .why-row,
.why__panels--animate.is-revealed .why-transform__arrow,
.why__panels--animate.is-revealed .why-bottom {
  opacity: 1; transform: none;
}
.why__panels--animate.is-revealed .why-panel--without .why-row:nth-child(1) { transition-delay: 0.10s; }
.why__panels--animate.is-revealed .why-panel--without .why-row:nth-child(2) { transition-delay: 0.18s; }
.why__panels--animate.is-revealed .why-panel--without .why-row:nth-child(3) { transition-delay: 0.26s; }
.why__panels--animate.is-revealed .why-panel--without .why-row:nth-child(4) { transition-delay: 0.34s; }
.why__panels--animate.is-revealed .why-panel--without .why-row:nth-child(5) { transition-delay: 0.42s; }
.why__panels--animate.is-revealed .why-panel--urbanis .why-row:nth-child(1) { transition-delay: 0.22s; }
.why__panels--animate.is-revealed .why-panel--urbanis .why-row:nth-child(2) { transition-delay: 0.30s; }
.why__panels--animate.is-revealed .why-panel--urbanis .why-row:nth-child(3) { transition-delay: 0.38s; }
.why__panels--animate.is-revealed .why-panel--urbanis .why-row:nth-child(4) { transition-delay: 0.46s; }
.why__panels--animate.is-revealed .why-panel--urbanis .why-row:nth-child(5) { transition-delay: 0.54s; }
.why__panels--animate.is-revealed .why-transform__arrow { transition-delay: 0.40s; }
.why__panels--animate.is-revealed .why-bottom { transition-delay: 0.60s; }

/* Tablet / iPad (641-1199px): keep the row-by-row problem -> solution comparison
   side by side (compact), NOT two full panels stacked. The gold arrow rides
   between the row pairs here too (same scroll-driven track as desktop). */
@media (min-width: 641px) and (max-width: 1199px) {
  .why-cmp { gap: clamp(0.4rem, 1.2vw, 0.9rem); }
  .why-transform__arrow { width: 44px; height: 44px; font-size: 1rem; }
  .why-panel { padding: clamp(1.1rem, 2vw, 1.6rem) clamp(0.9rem, 1.6vw, 1.3rem); }
  .why-panel__name { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
  .why-row { gap: 0.7rem; padding: clamp(0.7rem, 1.4vw, 0.95rem) 0; }
  .why-row__icon { width: 38px; height: 38px; font-size: 0.95rem; }
  .why-row__title { font-size: 0.98rem; }
  .why-row__desc { font-size: 0.85rem; line-height: 1.4; }
  .why-bottom { flex-wrap: wrap; }
  .why-bottom__cta { padding-left: 0; border-left: none; }
}

/* Mobile: hide the desktop panels; the comparison rows below take over */
@media (max-width: 640px) {
  .why__panels { display: none; }
}

/* Respect the accessibility panel's Reduce Motion regardless of JS timing */
html[data-a11y-motion="on"] .why__panels .why-panel__head,
html[data-a11y-motion="on"] .why__panels .why-row,
html[data-a11y-motion="on"] .why__panels .why-transform__arrow,
html[data-a11y-motion="on"] .why__panels .why-bottom {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

.why__micro--mdeck { display: none; } /* in-pin copy: shown on mobile only */
.why__micro {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; max-width: 70ch;
  font-family: var(--font-sans); font-weight: 300; font-size: 0.98rem; line-height: 1.6;
  color: var(--text-secondary);
}
.why__micro a {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--accent-press); margin-left: 0.3rem;
}
.why__micro a svg { font-size: 0.7rem; transition: transform var(--dur) var(--ease-out); }
.why__micro a:hover svg { transform: translateX(3px); }

/* ============================================================
   CLIENT JOURNEY (Phase 3)
   ============================================================ */
.journey {
  background: var(--surface-page);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 8px);
}
.journey__intro { max-width: 760px; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.journey__intro .u-overline { margin-bottom: 1.1rem; }
.journey__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 1.1rem;
}
.journey__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  color: var(--text-secondary); max-width: 60ch; margin: 0;
}
.journey__steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0 0 clamp(2.5rem, 4.5vw, 4rem); padding: 0;
  list-style: none;
}
.journey-step { display: flex; flex-direction: column; padding-top: 1.4rem; border-top: 1px solid var(--border-default); }
.journey-step__num {
  font-family: var(--font-display); font-weight: 500; font-size: 2.6rem; line-height: 1;
  color: var(--accent); margin-bottom: 0.9rem;
}
.journey-step__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.28rem;
  line-height: 1.16; color: var(--text-primary); margin: 0 0 0.5rem;
}
.journey-step__desc {
  font-family: var(--font-sans); font-weight: 400; font-size: 0.9rem; line-height: 1.55;
  color: var(--text-secondary); margin: 0;
}
.journey__cta {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap; padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.75rem, 3.2vw, 3rem);
  background: var(--plaster); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
}
.journey__cta-text { max-width: 52ch; }
.journey__cta-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.12; color: var(--text-primary); margin: 0 0 0.45rem;
}
.journey__cta-text p {
  font-family: var(--font-sans); font-weight: 300; font-size: 1rem; line-height: 1.55;
  color: var(--text-secondary); margin: 0;
}
.journey__cta .btn { flex: none; }

/* ============================================================
   FAQ (Phase CONV-2) - dark editorial band
   ============================================================ */
.faq {
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(199,150,21,0.08), rgba(199,150,21,0) 55%),
    linear-gradient(165deg, #17120D 0%, #0D0C0A 100%);
  padding: clamp(4rem, 9vw, 8rem) 0;
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 8px);
}
.faq__grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(2.25rem, 5vw, 4.5rem); align-items: start;
}
.faq__intro { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 2rem); }
.faq__overline { margin-bottom: 1.2rem; color: #D8BF89; }
.faq__overline::before { background: #D8BF89; }
.faq__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em;
  color: #F1EAD9; margin: 0 0 1rem;
}
.faq__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem); line-height: 1.6;
  color: #B6AE9C; margin: 0 0 1.7rem; max-width: 34ch;
}
.faq__more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.03em;
  color: #D8BF89; text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.faq__more svg { font-size: 0.7rem; transition: transform var(--dur) var(--ease-out); }
.faq__more:hover { color: #E9D6A8; }
.faq__more:hover svg { transform: translateX(3px); }
.faq-item { border-top: 1px solid var(--border-inverse); }
.faq-item:last-child { border-bottom: 1px solid var(--border-inverse); }
.faq-item__q {
  display: flex; align-items: baseline; gap: clamp(0.9rem, 1.6vw, 1.4rem);
  list-style: none; cursor: pointer; padding: clamp(1.15rem, 2vw, 1.5rem) 0.15rem;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }
.faq-item__num {
  flex: none; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.22em; color: #C49820;
}
.faq-item__text {
  flex: 1; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.18; color: #F1EAD9;
  transition: color var(--dur) var(--ease-out);
}
.faq-item__q svg {
  flex: none; align-self: center; font-size: 0.72rem; color: #C49820;
  transition: transform var(--dur) var(--ease-out);
}
.faq-item[open] .faq-item__q svg { transform: rotate(45deg); }
.faq-item__q:hover .faq-item__text, .faq-item[open] .faq-item__text { color: #E9D6A8; }
.faq-item__a {
  font-family: var(--font-sans); font-weight: 300; font-size: 0.97rem; line-height: 1.65;
  color: #B6AE9C; margin: 0;
  padding: 0 0.15rem 1.45rem clamp(2rem, 3.4vw, 2.85rem); max-width: 62ch;
}
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
  .faq-item__a { padding-left: 0.15rem; }
}

@media (max-width: 640px) {
  /* Slightly lighter headline weight on mobile — the same abstract line
     reads well beside the desktop two-panel comparison, but felt heavy as
     an opener right above the swipeable card deck (David, 2026-07-23). */
  .why__title { font-size: 1.7rem; max-width: 22ch; }
  .why__panels-lead { font-size: 1.05rem; margin-bottom: 1.5rem; }
  /* Mobile: hide the desktop matrix entirely, show the comparison rows instead.
     Replaces the earlier swipeable card deck (David, 2026-07-23): stacking one
     problem+solution pair per card, one at a time behind a swipe, buried the
     contrast in typography size alone (small sans "problem" vs. big serif
     "result") with no color distinction — it didn't read as before/after at a
     glance, and swiping to see all 5 took more effort than scrolling. Rows
     show all 5 comparisons at once, each split into a muted "without" half
     (✕, grey) and a warm "with Urbanis" half (✓, gold) for instant contrast. */
  .why__mrows { display: block; margin-top: clamp(28px, 5vw, 40px); }
  .why-mrow-head {
    display: flex; margin-bottom: 0.6rem; padding: 0 0.9rem;
    font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .why-mrow-head__without { flex: 1 1 0; color: var(--stone-500); }
  .why-mrow-head__with { flex: 1 1 0; color: var(--accent-press); }
  .why-mrow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  .why-mrow {
    display: flex; border: 1px solid rgba(168,136,78,0.22); border-radius: 12px; overflow: hidden;
    position: relative;
  }
  .why-mrow__without, .why-mrow__with {
    flex: 1 1 0; display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.75rem 0.8rem; font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.3;
  }
  .why-mrow__without {
    background: rgba(139,133,123,0.08); color: var(--text-secondary);
  }
  .why-mrow__with {
    background: linear-gradient(135deg, rgba(199,150,21,0.14), rgba(199,150,21,0.05));
    color: var(--text-primary); font-weight: 500;
  }
  .why-mrow__icon {
    flex: none; width: 18px; height: 18px; margin-top: 0.05rem;
    display: grid; place-items: center; border-radius: 50%;
  }
  .why-mrow__icon--without { background: rgba(139,133,123,0.18); color: var(--stone-500); }
  .why-mrow__icon--with { background: var(--accent); color: #1A1305; }
  .why-mrow__icon-svg { width: 9px; height: 9px; }
  /* Small glowing dot that travels from the ✕ to the ✓ once the row lands —
     traces the row's own "problem becomes solution" story instead of
     just fading the whole row in (David, 2026-07-24: wanted something
     with motion, "eye-catching and special"). Positioned to roughly match
     each icon's center; a few px off is invisible at this scale. */
  .why-mrow__spark {
    position: absolute; top: 1.3rem; left: 1.3rem;
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 8px 2px rgba(199,150,21,0.65);
    opacity: 0; pointer-events: none; z-index: 2;
  }

  /* Micro line lives right after the rows, so it reads as their closing CTA */
  .why__micro--desk { display: none; }
  .why__micro--mdeck {
    display: block; margin: 22px auto 0; max-width: 100%;
    text-align: center; text-wrap: pretty;
  }

  .why__lead-desk { display: none; } /* mobile: shorter intro */
  .why__lead-mob { display: inline; }

  /* The two halves slide in from opposite sides and meet in the middle —
     more "eye movement" than a flat fade, and reads as the two sides
     converging (matches "Urbanis connects the steps"). Once they land,
     a small glowing dot travels ✕ -> ✓ along the seam, per row. */
  .why-mrow-list--animate .why-mrow__without {
    opacity: 0; transform: translateX(-26px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .why-mrow-list--animate .why-mrow__with {
    opacity: 0; transform: translateX(26px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .why-mrow-list--animate.is-revealed .why-mrow__without,
  .why-mrow-list--animate.is-revealed .why-mrow__with {
    opacity: 1; transform: none;
  }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(1) .why-mrow__without,
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(1) .why-mrow__with { transition-delay: 0.03s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(2) .why-mrow__without,
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(2) .why-mrow__with { transition-delay: 0.09s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(3) .why-mrow__without,
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(3) .why-mrow__with { transition-delay: 0.15s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(4) .why-mrow__without,
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(4) .why-mrow__with { transition-delay: 0.21s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(5) .why-mrow__without,
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(5) .why-mrow__with { transition-delay: 0.27s; }

  .why-mrow-list--animate.is-revealed .why-mrow__spark {
    animation: why-mrow-spark-travel 0.9s var(--ease-out) forwards;
  }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(1) .why-mrow__spark { animation-delay: 0.35s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(2) .why-mrow__spark { animation-delay: 0.41s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(3) .why-mrow__spark { animation-delay: 0.47s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(4) .why-mrow__spark { animation-delay: 0.53s; }
  .why-mrow-list--animate.is-revealed .why-mrow:nth-child(5) .why-mrow__spark { animation-delay: 0.59s; }
}
@keyframes why-mrow-spark-travel {
  0% { left: 1.3rem; opacity: 0; transform: scale(0.6); }
  15% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { left: calc(50% + 1.3rem); opacity: 0; transform: scale(0.6); }
}
html[data-a11y-motion="on"] .why-mrow-list .why-mrow__without,
html[data-a11y-motion="on"] .why-mrow-list .why-mrow__with {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html[data-a11y-motion="on"] .why-mrow-list .why-mrow__spark { animation: none !important; opacity: 0 !important;
}
@media (max-width: 600px) {
  /* Connected vertical timeline instead of a flat bordered list — the plain
     01/02/03 stack read as a static checklist rather than a journey
     (David, 2026-07-23). A running line + numbered nodes make the
     "Urbanis connects the steps" idea visible, not just stated, and each
     step eases into view as it's scrolled to (respects reduced motion). */
  .journey__steps {
    grid-template-columns: 1fr; gap: 2.25rem; margin-left: 0.2rem;
    position: relative;
  }
  .journey__steps::before {
    content: ""; position: absolute; top: 22px; bottom: 22px; left: 19px; width: 1px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(168,136,78,0.25) 100%);
  }
  .journey-step {
    border-top: none; padding-top: 0; padding-left: 3.1rem; position: relative;
  }
  .journey-step__num {
    position: absolute; left: 0; top: -0.15rem;
    width: 40px; height: 40px; margin-bottom: 0; font-size: 1rem; font-weight: 600;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-page); border: 1px solid var(--accent); color: var(--accent);
  }
  .journey-step__title { font-size: 1.15rem; }
  .journey__cta { flex-direction: column; align-items: flex-start; }
  .journey__cta .btn { align-self: stretch; }

  .journey__steps--animate .journey-step {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  }
  .journey__steps--animate.is-revealed .journey-step { opacity: 1; transform: none; }
  .journey__steps--animate.is-revealed .journey-step:nth-child(1) { transition-delay: 0.05s; }
  .journey__steps--animate.is-revealed .journey-step:nth-child(2) { transition-delay: 0.20s; }
  .journey__steps--animate.is-revealed .journey-step:nth-child(3) { transition-delay: 0.35s; }
}
html[data-a11y-motion="on"] .journey__steps .journey-step {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ============================================================
   PEOPLE BEHIND URBANIS (Phase 4) - trust carousel
   ============================================================ */
.people {
  position: relative;
  background: linear-gradient(180deg, var(--sand-50) 0%, var(--sand-100) 100%);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 8px);
  overflow: hidden;
}
.people__intro { max-width: 760px; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.people__intro .u-overline { margin-bottom: 1.1rem; }
.people__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 1.1rem; max-width: 22ch;
}
.people__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  color: var(--text-secondary); max-width: 60ch; margin: 0;
}

.people__carousel { position: relative; }
.people__stage {
  position: relative; height: 510px; perspective: 1400px;
}
.person-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(260px, 28vw, 320px);
  transform: translate(-50%, -50%) scale(0.7); opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,246,238,0.72));
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden; cursor: pointer;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out),
              box-shadow 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.person-card.is-active {
  transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 30; cursor: default;
  border-color: rgba(168,136,78,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 26px 60px rgba(56,49,42,0.2);
}
.person-card.is-prev { transform: translate(calc(-50% - 80%), -50%) scale(0.82); opacity: 0.55; z-index: 20; filter: saturate(0.55); }
.person-card.is-next { transform: translate(calc(-50% + 80%), -50%) scale(0.82); opacity: 0.55; z-index: 20; filter: saturate(0.55); }
.person-card.is-hidden { transform: translate(-50%, -50%) scale(0.7); opacity: 0; z-index: 10; pointer-events: none; }

.person-card__photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-200); }
.person-card__photo--initials {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(168,136,78,0.16), rgba(168,136,78,0) 62%),
    linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
}
.person-card__initials {
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  font-size: clamp(3rem, 6vw, 4.25rem); letter-spacing: 0.04em; color: var(--accent);
}
.person-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(0.4); transition: filter 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
.person-card.is-active .person-card__photo img { filter: grayscale(0); }
.person-card.is-active:hover .person-card__photo img { transform: scale(1.04); }
.person-card__body { padding: 1.1rem 1.25rem 1.4rem; text-align: center; }
.person-card__name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.1;
  color: var(--text-primary); margin: 0 0 0.4rem;
}
.person-card__role {
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-press); margin: 0 0 0.7rem;
}
.person-card__net {
  display: block; font-family: var(--font-sans); font-size: 0.74rem; line-height: 1.4;
  color: var(--text-muted); letter-spacing: 0.01em;
}

.people__controls {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.people__arrow {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-default); background: var(--surface-card);
  color: var(--text-primary); font-size: 0.85rem; cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.people__arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Compact progress indicator (counter + bar) - quieter than a dots row for larger teams */
.people__progress {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  width: clamp(120px, 26vw, 200px);
}
.people__count {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.people__count b { color: var(--accent-press); font-weight: 700; }
.people__bar {
  position: relative; width: 100%; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(168,136,78,0.22);
}
.people__bar-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 9%; border-radius: 2px;
  background: var(--accent); transition: width 0.5s var(--ease-out);
}

@media (max-width: 768px) {
  .people__stage { height: 500px; }
  .person-card { width: clamp(244px, 66vw, 300px); }
  /* At this card width relative to the viewport, a 62%-offset "peek" card
     is only a sliver at the very edge of the screen — in practice
     invisible, so the transition just reads as the active card fading/
     shrinking in place rather than sliding (David, 2026-07-23). Mobile
     drops the 3-up peek entirely: prev/next slide fully off-screen for a
     clean, unambiguous single-card carousel motion; desktop keeps the peek. */
  .person-card.is-prev { transform: translate(calc(-150% - 24px), -50%) scale(0.92); opacity: 0; }
  .person-card.is-next { transform: translate(calc(50% + 24px), -50%) scale(0.92); opacity: 0; }
}
@media (max-width: 480px) {
  .people__stage { height: 470px; }
  .person-card { width: clamp(220px, 74vw, 270px); }
  .person-card__name { font-size: 1.35rem; }
  .person-card.is-prev { transform: translate(calc(-150% - 24px), -50%) scale(0.92); opacity: 0; }
  .person-card.is-next { transform: translate(calc(50% + 24px), -50%) scale(0.92); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .person-card { transition: none; }
  .person-card__photo img { transition: none; }
}

/* Contact micro-journey (How it starts) - compact 3-step */
.contact-steps-wrap { margin: 0 0 1.85rem; }
.contact-steps__title {
  display: block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  /* accent-press, not accent: raw --accent is 2.99:1 on --sand-100, fails WCAG AA for text (found in pre-launch audit) */
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-press); margin-bottom: 0.9rem;
}
.contact-steps { display: flex; flex-direction: column; gap: 0.15rem; }
.contact-step { display: flex; align-items: center; gap: 0.85rem; padding: 0.4rem 0; }
.contact-step__num {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(168,136,78,0.12); color: var(--accent-press);
  font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem;
}
.contact-step__text { font-family: var(--font-sans); font-size: 0.96rem; color: var(--text-primary); }

/* ============================================================
   CONTACT / LEAD CAPTURE (Phase 4)
   ============================================================ */
.contact {
  background: var(--surface-page);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 8px);
}
.contact__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (min-width: 940px) {
  .contact__grid { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 4vw, 4.5rem); }
}
.contact__intro { max-width: 540px; }
.contact__intro .u-overline { margin-bottom: 1.1rem; }
.contact__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 1.1rem;
}
.contact__lead {
  font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.6; color: var(--text-secondary); margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.contact__cards { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 1.75rem; }
.contact-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.05rem 1.15rem; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
}
.contact-card__icon {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius-control); background: rgba(168,136,78,0.10);
  color: var(--accent); font-size: 1.05rem;
}
.contact-card__body { display: flex; flex-direction: column; gap: 0.15rem; }
.contact-card__label {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  /* accent-press, not accent: raw --accent is 3.34:1 on white contact cards, fails WCAG AA for text (found in pre-launch audit) */
  text-transform: uppercase; color: var(--accent-press);
}
.contact-card__text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.45; }
.contact-card__value {
  font-family: var(--font-sans); font-size: 0.96rem; font-weight: 500; color: var(--text-primary);
  margin-top: 0.1rem;
}
.contact-card__value:hover { color: var(--accent-press); }
.contact__wa { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.contact__wa-label { font-size: 0.85rem; color: var(--text-secondary); }
.contact__wa .btn { gap: 0.55rem; }

/* Form panel */
.contact__formwrap {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form__hint {
  font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.5;
  color: var(--text-secondary); margin: 0 0 0.25rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field__label {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-primary);
}
.field__req { color: var(--accent); font-weight: 700; }
.field__select:disabled {
  color: var(--text-muted); background: var(--sand-200); cursor: not-allowed; opacity: 0.85;
}
.field__optional {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; color: var(--text-muted);
}
.field__input {
  font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary);
  background: var(--surface-page); border: 1px solid var(--border-default);
  border-radius: var(--radius-control); padding: 0.8rem 0.9rem; width: 100%;
  min-height: 48px; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: var(--text-muted); }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168,136,78,0.18); }
.field__textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.field__selectwrap { position: relative; }
.field__select { padding-right: 2.4rem; cursor: pointer; }
.field__selecticon {
  position: absolute; right: 0.95rem; top: 50%; transform: translateY(-50%);
  font-size: 0.72rem; color: var(--text-muted); pointer-events: none;
}
.field__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.field__consent {
  display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer;
  font-size: 0.84rem; line-height: 1.5; color: var(--text-secondary);
}
.field__consent input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.field__privacy-link { color: var(--accent-press); font-weight: 650; text-decoration: underline; text-underline-offset: 0.16em; }
.field__privacy-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.contact-form__submit { margin-top: 0.3rem; align-self: stretch; font-size: 0.78rem; padding-block: 1rem; }
.contact-form__privacy { font-size: 0.78rem; color: var(--text-muted); margin: 0; text-align: center; }
.contact-form__status {
  font-size: 0.88rem; line-height: 1.5; margin: 0; padding: 0.8rem 1rem;
  border-radius: var(--radius-control); background: rgba(168,136,78,0.10);
  border: 1px solid var(--border-subtle); color: var(--text-primary);
}
.contact-form__status[hidden] { display: none; }
.contact-form__status--ok { background: rgba(112,122,102,0.14); border-color: rgba(112,122,102,0.45); color: var(--espresso); }
.contact-form__status--warn { background: rgba(168,136,78,0.12); border-color: rgba(168,136,78,0.42); color: var(--text-primary); }
.contact-form__status--error { background: rgba(180,69,47,0.10); border-color: rgba(180,69,47,0.42); color: #7D2F1F; }
.contact-form__status a { color: var(--accent-press); font-weight: 600; }
.field__input.invalid { border-color: #B4452F; box-shadow: 0 0 0 3px rgba(180,69,47,0.14); }
.field__error {
  font-family: var(--font-sans); font-size: 0.76rem; line-height: 1.4; color: #B4452F; margin: 0;
}
.field__error[hidden] { display: none; }
.contact-form__submit[disabled] { opacity: 0.7; cursor: progress; }
.contact-form__recaptcha {
  font-size: 0.72rem; line-height: 1.5; color: var(--text-muted); margin: 0; text-align: center;
}
/* underline, not color alone: the link color vs. surrounding text was ~1.09:1 (effectively identical), making the links undiscoverable without hovering (WCAG 1.4.1, found in pre-launch audit) */
.contact-form__recaptcha a { color: var(--text-secondary); text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

/* Calm in-panel success state (no overlay, no confetti) */
.contact-success {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.9rem; padding: clamp(1.75rem, 5vw, 3rem) 0.5rem;
}
.contact-success[hidden] { display: none; }
.contact-success__mark {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(168,136,78,0.14); color: var(--accent-press); font-size: 1.35rem;
}
.contact-success__title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 1.85rem);
  color: var(--text-primary); margin: 0;
}
.contact-success__text {
  font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.6;
  color: var(--text-secondary); margin: 0; max-width: 40ch;
}
.contact-success .btn { margin-top: 0.4rem; }

/* ============================================================
   TEMPORARY placeholder anchors (replaced in later phases)
   ============================================================ */
.phase1-placeholder {
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 8px);
  min-height: 30vh; display: grid; place-items: center;
  border-top: 1px dashed var(--border-default); color: var(--text-muted);
  font-size: var(--fs-small); letter-spacing: 0.04em; padding: var(--space-6) var(--gutter);
}
.phase1-placeholder span { opacity: 0.7; }

/* ============================================================
   FOOTER + FEEDBACK SYSTEM (Phase 5)
   ============================================================ */
.site-footer {
  position: relative; background: var(--ink-950); color: var(--text-on-dark);
  font-family: var(--font-sans);
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 22%, var(--accent) 78%, transparent 100%);
  opacity: 0.55;
}
.site-footer__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.75rem) var(--gutter) clamp(2.25rem, 4vw, 3rem);
}
.site-footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: clamp(1.75rem, 3vw, 3rem);
}
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

.uf-col__title {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-inverse);
}
.uf-brand__mark {
  font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.22em;
  color: var(--text-on-dark); margin: 0 0 0.85rem;
}
.uf-brand__tagline {
  font-size: 0.92rem; line-height: 1.6; color: var(--text-on-dark-dim); margin: 0 0 1.4rem; max-width: 30ch;
}
.uf-social { display: flex; gap: 0.6rem; }
.uf-social__link {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-inverse);
  color: var(--text-on-dark-dim); font-size: 0.95rem;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.uf-social__link:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-2px); }

.uf-links { display: flex; flex-direction: column; gap: 0.7rem; }
.uf-links a {
  color: var(--text-on-dark-dim); font-size: 0.92rem; font-weight: 400;
  display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.uf-links a::before {
  content: ""; width: 12px; height: 1px; background: var(--accent); opacity: 0; transition: opacity var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}
.uf-links a:hover { color: var(--text-on-dark); transform: translateX(2px); }
.uf-links a:hover::before { opacity: 0.8; width: 18px; }

.uf-contact { display: flex; flex-direction: column; gap: 1rem; }
.uf-citem { display: flex; align-items: flex-start; gap: 0.7rem; }
.uf-citem__icon {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-control);
  background: rgba(168,136,78,0.12); border: 1px solid rgba(168,136,78,0.24); color: var(--accent); font-size: 0.8rem;
}
.uf-citem__body { display: flex; flex-direction: column; gap: 0.1rem; }
.uf-citem__label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-dark-dim); }
.uf-citem__value { font-size: 0.92rem; color: var(--text-on-dark); width: fit-content; }
a.uf-citem__value:hover { color: var(--accent); }
.uf-hours { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.uf-status { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 999px; }
.uf-status.is-open { background: rgba(112,122,102,0.26); color: #B7C2A6; }
.uf-status.is-closed { background: rgba(180,69,47,0.22); color: #E0A493; }
.uf-citem__note { font-size: 0.8rem; color: var(--text-on-dark-dim); }

.uf-feedback-btn {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.4rem; align-self: flex-start;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-control); cursor: pointer;
  background: transparent; border: 1px solid rgba(168,136,78,0.45); color: var(--accent);
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.uf-feedback-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.uf-company { display: flex; flex-direction: column; gap: 0.5rem; }
.uf-company__line { font-size: 0.88rem; color: var(--text-on-dark-dim); line-height: 1.5; margin: 0; }
.uf-company__line strong { color: var(--text-on-dark); font-weight: 600; }
.uf-company__ami {
  display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; margin-top: 0.3rem;
  padding: 0.35rem 0.7rem; border-radius: var(--radius-control);
  background: rgba(168,136,78,0.12); border: 1px solid rgba(168,136,78,0.28);
}
.uf-company__ami b { font-size: 0.6rem; letter-spacing: 0.16em; color: var(--accent); }
.uf-company__ami span { font-size: 0.78rem; font-weight: 600; color: var(--text-on-dark); letter-spacing: 0.06em; }
a.uf-company__line:hover { color: var(--accent); }

/* footer branch / location cards */
.uf-locations { display: flex; flex-direction: column; gap: 0.75rem; }
.uf-loc {
  padding: 0.85rem 0.95rem; border: 1px solid var(--border-inverse); border-radius: var(--radius-control);
  background: rgba(255,255,255,0.03);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.uf-loc:hover { border-color: rgba(168,136,78,0.4); background: rgba(168,136,78,0.06); }
.uf-loc__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; }
.uf-loc__name { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark); }
.uf-loc__status { font-size: 0.54rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.uf-loc__status.is-open { background: rgba(112,122,102,0.26); color: #B7C2A6; }
.uf-loc__status.is-soon { background: rgba(168,136,78,0.2); color: var(--gold-300); }
.uf-loc__addr { font-style: normal; font-size: 0.82rem; line-height: 1.5; color: var(--text-on-dark-dim); margin: 0 0 0.5rem; }
.uf-loc__map { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.uf-loc__map:hover { color: var(--gold-300); }
.uf-bottom-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* bottom bar */
.site-footer__bottom { border-top: 1px solid var(--border-inverse); background: rgba(0,0,0,0.25); }
.site-footer__bottom-inner {
  max-width: var(--container-max); margin-inline: auto; padding: 1.1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.uf-copyright { font-size: 0.74rem; color: var(--text-on-dark-dim); margin: 0; }
.uf-legal { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.uf-legal__link {
  background: none; border: none; padding: 0.4rem 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.74rem; color: var(--text-on-dark-dim);
  transition: color var(--dur) var(--ease-out);
}
.uf-legal__link:hover { color: var(--accent); }
.uf-legal__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-inverse); }
@media (max-width: 560px) {
  .site-footer__bottom-inner { flex-direction: column; text-align: center; gap: 0.85rem; }
  .uf-legal { justify-content: center; }
  .uf-legal__sep { display: none; }
}

/* ---------------- feedback overlays / modals ---------------- */
.ufb-overlay, .ufb-modal {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(13,12,10,0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity 0.32s var(--ease-out), visibility 0s linear 0.32s;
}
.ufb-overlay.is-open, .ufb-modal.is-open { opacity: 1; visibility: visible; transition: opacity 0.32s var(--ease-out), visibility 0s; }
.ufb-card {
  position: relative; width: 100%; background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(13,12,10,0.35); max-height: 90vh; overflow-y: auto;
  transform: translateY(18px) scale(0.98); transition: transform 0.32s var(--ease-out);
}
.ufb-overlay.is-open .ufb-card, .ufb-modal.is-open .ufb-card { transform: translateY(0) scale(1); }
.ufb-card--popup { max-width: 560px; }
.ufb-card--form { max-width: 560px; }
.ufb-card--success { max-width: 420px; text-align: center; }
.ufb-card--legal { max-width: 560px; }
.ufb-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary);
  font-size: 0.95rem; cursor: pointer; z-index: 2;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.ufb-close:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.ufb-popup-body { padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
/* accent-press, not accent: raw --accent is 3.34:1 on white feedback-modal cards, fails WCAG AA for text (found in pre-launch audit) */
.ufb-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-press); margin-bottom: 1rem; }
.ufb-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.5vw, 2.1rem); line-height: 1.1; color: var(--text-primary); margin: 0 0 0.6rem; }
.ufb-subtitle { font-size: 0.96rem; line-height: 1.55; color: var(--text-secondary); margin: 0 auto 1.6rem; max-width: 42ch; }
.ufb-rating { display: flex; justify-content: center; gap: clamp(0.4rem, 1.5vw, 0.8rem); margin-bottom: 1.2rem; flex-wrap: wrap; }
.ufb-emoji {
  width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  background: var(--surface-page); border: 1.5px solid var(--border-default); border-radius: 12px; cursor: pointer;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.ufb-emoji:hover { transform: translateY(-4px); border-color: var(--accent); background: rgba(168,136,78,0.08); }
.ufb-emoji.is-selected { transform: translateY(-4px); border-color: var(--accent); background: rgba(168,136,78,0.14); box-shadow: 0 10px 26px rgba(168,136,78,0.18); }
.ufb-emoji__face { font-size: 1.6rem; line-height: 1; }
.ufb-emoji__label { font-size: 0.5rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ufb-emoji.is-selected .ufb-emoji__label, .ufb-emoji:hover .ufb-emoji__label { color: var(--accent-press); }
.ufb-message { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.ufb-message.is-visible { opacity: 1; transform: translateY(0); }
.ufb-msg-text { font-size: 0.96rem; color: var(--text-primary); margin: 0; }
.ufb-msg-text.is-positive { color: var(--espresso); }
.ufb-google-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-control); background: var(--ink-900); color: var(--text-on-dark); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; transition: transform var(--dur) var(--ease-out); }
.ufb-google-btn:hover { transform: translateY(-2px); color: #fff; }
.ufb-private-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: var(--radius-control); background: transparent; border: 1.5px solid var(--accent); color: var(--accent-press); font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.ufb-private-btn:hover { background: var(--accent); color: var(--on-accent); }
.ufb-quicklinks { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--border-subtle); }
.ufb-quicklink { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); transition: color var(--dur) var(--ease-out); }
.ufb-quicklink:hover { color: var(--accent-press); }

/* private feedback form */
.ufb-form-head { padding: clamp(1.75rem, 3.5vw, 2.4rem) clamp(1.5rem, 3vw, 2.2rem) 1rem; }
.ufb-form-head .ufb-title { font-size: clamp(1.4rem, 3vw, 1.7rem); }
.ufb-form { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem clamp(1.5rem, 3vw, 2.2rem) clamp(1.75rem, 3.5vw, 2.4rem); }
.ufb-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 480px) { .ufb-row { grid-template-columns: 1fr 1fr; } }
.ufb-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ufb-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.ufb-input, .ufb-select, .ufb-textarea {
  font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary);
  background: var(--surface-page); border: 1px solid var(--border-default); border-radius: var(--radius-control);
  padding: 0.7rem 0.85rem; width: 100%; min-height: 46px; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ufb-input:focus, .ufb-select:focus, .ufb-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168,136,78,0.18); }
.ufb-input.is-invalid, .ufb-select.is-invalid, .ufb-textarea.is-invalid { border-color: #B4452F; box-shadow: 0 0 0 3px rgba(180,69,47,0.14); }
.ufb-selectwrap { position: relative; }
.ufb-selectwrap .ufb-select { padding-right: 2.2rem; cursor: pointer; }
.ufb-selectwrap::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--text-muted); pointer-events: none; }
.ufb-textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.ufb-field--counter { position: relative; }
.ufb-counter { position: absolute; bottom: 0.5rem; right: 0.7rem; font-size: 0.66rem; color: var(--text-muted); pointer-events: none; }
.ufb-counter.is-warn { color: #B8860B; }
.ufb-counter.is-limit { color: #B4452F; }
.ufb-urgency { display: flex; gap: 0.5rem; }
.ufb-urgency__opt { flex: 1; padding: 0.6rem 0.4rem; text-align: center; border-radius: var(--radius-control); background: var(--surface-page); border: 1px solid var(--border-default); cursor: pointer; transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.ufb-urgency__opt:hover { border-color: var(--border-default); background: rgba(168,136,78,0.06); }
.ufb-urgency__opt.is-selected { border-color: var(--accent); background: rgba(168,136,78,0.12); }
.ufb-urgency__dot { display: block; width: 9px; height: 9px; border-radius: 50%; margin: 0 auto 0.3rem; }
.ufb-urgency__opt[data-urgency="low"] .ufb-urgency__dot { background: #707A66; }
.ufb-urgency__opt[data-urgency="medium"] .ufb-urgency__dot { background: var(--gold-soft); }
.ufb-urgency__opt[data-urgency="high"] .ufb-urgency__dot { background: #B4452F; }
.ufb-urgency__text { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.ufb-callback { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); cursor: pointer; font-size: 0.86rem; color: var(--text-secondary); }
.ufb-callback input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.ufb-privacy { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.7rem 0.85rem; background: rgba(168,136,78,0.07); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.ufb-privacy svg { color: var(--accent); font-size: 0.8rem; margin-top: 0.15rem; }
.ufb-privacy p { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.ufb-privacy { flex-wrap: wrap; }
.ufb-privacy-ack { display: flex; align-items: flex-start; gap: 0.55rem; flex: 1 1 16rem; cursor: pointer; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.ufb-privacy-ack input { width: 18px; height: 18px; margin-top: 0.12rem; accent-color: var(--accent); flex: none; }
.ufb-privacy-ack input.is-invalid { outline: 2px solid #B4452F; outline-offset: 2px; }
.ufb-privacy-ack a { color: var(--accent-press); font-weight: 650; text-decoration: underline; text-underline-offset: 0.16em; }
.ufb-privacy-error { flex: 1 0 100%; color: #7D2F1F !important; font-weight: 600; margin-left: 1.35rem !important; }
.ufb-privacy-error[hidden] { display: none; }
.ufb-review-choices { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0.65rem; }
.ufb-review-choices > * { flex: 1 1 12rem; justify-content: center; }
.ufb-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.2rem; }
.ufb-form-status { font-size: 0.86rem; line-height: 1.5; margin: 0; padding: 0.7rem 0.9rem; border-radius: var(--radius-control); border: 1px solid var(--border-subtle); }
.ufb-form-status[hidden] { display: none; }
.ufb-form-status--warn { background: rgba(168,136,78,0.12); border-color: rgba(168,136,78,0.42); color: var(--text-primary); }
.ufb-form-status--error { background: rgba(180,69,47,0.10); border-color: rgba(180,69,47,0.42); color: #7D2F1F; }
.ufb-form-status a { color: var(--accent-press); font-weight: 600; }

/* success + legal */
.ufb-success-body { padding: clamp(2rem, 4vw, 2.75rem); }
.ufb-success-mark { width: 64px; height: 64px; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: 50%; background: rgba(112,122,102,0.18); color: #6F7A63; font-size: 1.5rem; }
.ufb-success-title { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; color: var(--text-primary); margin: 0 0 0.7rem; }
.ufb-success-text { font-size: 0.94rem; line-height: 1.6; color: var(--text-secondary); margin: 0 auto 1.5rem; max-width: 34ch; }
.ufb-legal-body { padding: 1.25rem clamp(1.5rem, 3vw, 2.2rem) clamp(1.75rem, 3.5vw, 2.4rem); }
.ufb-legal-body .ufb-title { font-size: 1.4rem; }
.ufb-legal-text { font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary); margin: 0.8rem 0 0; }
.ufb-legal-text a { color: var(--accent-press); font-weight: 600; }

/* ============================================================
   THEME SYSTEM (Phase 5C automatic dark + Phase 5G manual selector)
   ------------------------------------------------------------
   Dark styling is keyed on html[data-theme="dark"], which the early
   inline theme script in <head> resolves from the user's saved
   preference (System / Light / Dark): System resolves to the OS
   preference via matchMedia. A no-JS fallback below still honours the
   OS dark preference for core colours when no attribute is present.
   Palette stays warm espresso/ivory with a lifted muted gold; never
   pure black, neon, or harsh. No visible "demo" toggle.
   ============================================================ */

/* ---- Dark token set (shared by resolved dark + no-JS OS fallback) ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Warm neutrals re-mapped to dark equivalents. These feed the
     semantic aliases AND are used directly by a few components
     (person photo, disabled select, people band, journey CTA). */
  --sand-50:  #2A2318;
  --sand-100: #14110C;
  --sand-200: #2A2419;
  --sand-300: #2E2820;
  --sand-400: #3A3328;
  --plaster:  #221C14;
  --ink-950: #1C1710;
  --ink-900: #2C2519;
  --text-primary:    #F1EAD9;
  --text-secondary:  #C7BEAA;
  --text-muted:      #9E9480;
  --text-on-dark:    #F4EFE4;
  --text-on-dark-dim: #B6AE9C;
  --border-subtle:  #2E2820;
  --border-default: #3A3328;
  --border-inverse: #352E24;
  --accent:        #C7AA6E;
  --accent-hover:  #D6BA82;
  --accent-press:  #D8BF89;
  --focus-ring:    #DCC28D;
  --overline-color: #C7AA6E; /* dark mode: same as --accent (~7.6-8.4:1 on dark surfaces) — gold-700 (light-mode value) fails contrast here */
  --espresso:  #BFC9B0;
  --stone-500: #ABA494;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.42);
}
/* No-JS fallback: honour OS dark only when no explicit theme is set. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --sand-50:  #2A2318;
    --sand-100: #14110C;
    --sand-200: #2A2419;
    --sand-300: #2E2820;
    --sand-400: #3A3328;
    --plaster:  #221C14;
    --ink-950: #1C1710;
    --ink-900: #2C2519;
    --text-primary:    #F1EAD9;
    --text-secondary:  #C7BEAA;
    --text-muted:      #9E9480;
    --text-on-dark:    #F4EFE4;
    --text-on-dark-dim: #B6AE9C;
    --border-subtle:  #2E2820;
    --border-default: #3A3328;
    --border-inverse: #352E24;
    --accent:        #C7AA6E;
    --accent-hover:  #D6BA82;
    --accent-press:  #D8BF89;
    --focus-ring:    #DCC28D;
    --overline-color: #C7AA6E;
    --espresso:  #BFC9B0;
    --stone-500: #ABA494;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.42);
  }
}

/* ---- Component overrides (resolved dark only; no-JS keeps light glass) ---- */
html[data-theme="dark"] .btn--ghost { border-color: rgba(241,234,217,0.24); }
html[data-theme="dark"] .btn--ghost:hover { background: rgba(199,170,110,0.10); }

html[data-theme="dark"] .site-header { background: rgba(20,17,12,0.72); }
html[data-theme="dark"] .site-header.is-scrolled {
  background: #181410;
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .nav-close:hover,
html[data-theme="dark"] .eco-modal__close:hover { background: rgba(241,234,217,0.08); }

html[data-theme="dark"] .eco-modal__panel {
  background: linear-gradient(180deg, rgba(40,33,23,0.96), rgba(30,24,16,0.95));
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

html[data-theme="dark"] .exit-popup__close:hover { background: rgba(241,234,217,0.08); }
html[data-theme="dark"] .exit-popup__panel {
  background: linear-gradient(180deg, rgba(40,33,23,0.96), rgba(30,24,16,0.95));
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

html[data-theme="dark"] .why {
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(199,170,110,0.12), rgba(199,170,110,0) 60%),
    linear-gradient(180deg, #241D14 0%, #1C160E 100%);
}

/* Two-panel comparison (Phase WHY-DESKTOP-REDESIGN) dark mode - lighter, warmer glass */
html[data-theme="dark"] .why-panel--without {
  background: rgba(74,62,44,0.34);
  border-color: rgba(214,190,140,0.20);
  box-shadow: 0 1px 0 rgba(241,234,217,0.05) inset, 0 16px 38px rgba(0,0,0,0.30);
}
html[data-theme="dark"] .why-panel--without .why-row { border-top-color: rgba(214,190,140,0.14); }
html[data-theme="dark"] .why-panel__head { border-bottom-color: rgba(214,190,140,0.16); }
html[data-theme="dark"] .why-panel--without .why-row__icon {
  background: rgba(241,234,217,0.10); color: var(--text-secondary);
}
html[data-theme="dark"] .why-panel--urbanis {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(199,150,21,0.16), rgba(199,150,21,0) 55%),
    linear-gradient(158deg, #3A2D1D 0%, #2A2013 100%);
  border-color: rgba(214,190,140,0.36);
  box-shadow: 0 0 0 1px rgba(199,170,110,0.10), 0 1px 0 rgba(241,234,217,0.06) inset, 0 20px 46px rgba(0,0,0,0.42), 0 0 40px rgba(199,150,21,0.08);
}
html[data-theme="dark"] .why-bottom {
  background: var(--surface-card); border-color: var(--border-subtle);
}
html[data-theme="dark"] .why-bottom__cta { border-left-color: var(--border-subtle); }

html[data-theme="dark"] .why-mrow { border-color: rgba(199,170,110,0.28); }
html[data-theme="dark"] .why-mrow__without { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .why-mrow__with { background: linear-gradient(135deg, rgba(199,150,21,0.22), rgba(199,150,21,0.08)); }

html[data-theme="dark"] .person-card {
  background: linear-gradient(180deg, rgba(46,39,28,0.94), rgba(32,26,18,0.82));
}
html[data-theme="dark"] .person-card.is-active {
  border-color: rgba(199,170,110,0.45);
  box-shadow: 0 1px 0 rgba(241,234,217,0.06) inset, 0 26px 60px rgba(0,0,0,0.55);
}

html[data-theme="dark"] .hero-layer { filter: brightness(0.8) saturate(0.95); }
@media (max-width: 999px) {
  html[data-theme="dark"] .hero__visual::after {
    background: linear-gradient(to bottom, var(--surface-page) 0%, rgba(20,17,12,0.55) 6%, rgba(20,17,12,0) 16%);
  }
}

html[data-theme="dark"] .contact-form__status--error,
html[data-theme="dark"] .ufb-form-status--error { color: #ECA994; }
html[data-theme="dark"] .field__error { color: #ECA994; }

html[data-theme="dark"] .ufb-google-btn { background: var(--ink-900); }
html[data-theme="dark"] .ufb-success-mark { color: #A4B58D; }

html[data-theme="dark"] .btn--primary:hover { color: var(--on-accent); }

html[data-theme="dark"] .ufb-counter.is-warn { color: #D8B36A; }

/* ---- AI chat assistant (v1, added 2026-07-24) ---- */
html[data-theme="dark"] .uc-msg--assistant .uc-msg__bubble { background: var(--sand-200); }
html[data-theme="dark"] .uc-msg--user .uc-msg__bubble { color: var(--on-accent); }
html[data-theme="dark"] .uc-note--success { background: var(--sand-200); color: var(--text-primary); }
html[data-theme="dark"] .uc-note--error { color: #ECA994; }

/* ============================================================
   PHASE 5G - USER PREFERENCES UI
   Footer utility bar (theme selector / accessibility / cookie
   settings / back to top), cookie consent banner + preferences
   modal, accessibility preferences panel, and the accessibility
   effect rules. All token-based so dark mode flips automatically.
   ============================================================ */

/* ---- Footer utility bar ---- */
.uf-utilbar {
  border-top: 1px solid var(--border-subtle);
  padding: 1rem var(--gutter);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.uf-util-theme { display: flex; align-items: center; gap: 0.7rem; }
.uf-util-label {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-on-dark-dim);
}
.uf-themesel {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.uf-themesel__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500;
  color: var(--text-secondary); background: transparent;
  border: 0; border-radius: 999px; padding: 0.4rem 0.85rem; cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.uf-themesel__btn svg { font-size: 0.85em; opacity: 0.85; }
.uf-themesel__btn:hover { color: var(--text-primary); }
.uf-themesel__btn[aria-checked="true"] {
  background: var(--surface-card); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.uf-util-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.uf-util-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500;
  color: var(--text-on-dark-dim); background: transparent;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 0.45rem 0.95rem; cursor: pointer; text-decoration: none;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.uf-util-btn svg { font-size: 0.9em; color: var(--accent); }
.uf-util-btn:hover { color: var(--text-on-dark); border-color: var(--accent); }

/* ---- Shared accessible switch (consent + accessibility toggles) ---- */
.uc-switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 24px; }
.uc-switch__input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.uc-switch__track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--border-default);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.uc-switch__track::after {
  content: ""; position: absolute; top: 50%; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; transform: translateY(-50%);
  background: var(--text-muted);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.uc-switch__input:checked + .uc-switch__track { background: var(--accent); border-color: var(--accent); }
.uc-switch__input:checked + .uc-switch__track::after { transform: translate(20px, -50%); background: var(--on-accent); }
.uc-switch__input:focus-visible + .uc-switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.uc-switch__input:disabled { cursor: default; }
.uc-switch__input:disabled + .uc-switch__track { opacity: 0.55; }

/* ---- Shared buttons (equal weight; no dark patterns) ---- */
.uc-btn {
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600;
  border-radius: var(--radius-control); padding: 0.65rem 1.25rem; cursor: pointer;
  border: 1px solid transparent; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.uc-btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.uc-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.uc-btn--neutral { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); }
.uc-btn--neutral:hover { border-color: var(--accent); }
.uc-btn--text { background: transparent; color: var(--text-secondary); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.uc-btn--text:hover { color: var(--text-primary); }
.uc-inline-link {
  font: inherit; color: var(--accent-press); background: transparent; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Cookie consent banner ---- */
.uc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--surface-card); border-top: 1px solid var(--border-default);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
.uc-banner[hidden] { display: none; }
.uc-banner__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: 1.1rem var(--gutter); display: flex; flex-wrap: wrap;
  gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.uc-banner__text { max-width: 720px; }
.uc-banner__title {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem;
  color: var(--text-primary); margin: 0 0 0.3rem;
}
.uc-banner__body {
  font-family: var(--font-sans); font-weight: 300; font-size: 0.9rem; line-height: 1.55;
  color: var(--text-secondary); margin: 0;
}
.uc-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* ---- Modals: cookie preferences + accessibility ---- */
.uc-modal, .ua-modal {
  position: fixed; inset: 0; z-index: 1300; display: none;
  align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(13,12,10,0.55);
}
.uc-modal.is-open, .ua-modal.is-open { display: flex; }
.uc-modal__card, .ua-modal__card {
  position: relative; width: 100%; max-width: 480px;
  max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.uc-modal__close, .ua-modal__close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--text-muted); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.uc-modal__close:hover, .ua-modal__close:hover { background: var(--surface-raised); color: var(--text-primary); }
.uc-modal__title, .ua-modal__title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--text-primary); margin: 0 0 0.6rem; padding-right: 2rem;
}
.uc-modal__intro, .ua-modal__intro {
  font-family: var(--font-sans); font-weight: 300; font-size: 0.9rem; line-height: 1.6;
  color: var(--text-secondary); margin: 0 0 1.4rem;
}
.uc-strong { color: var(--text-primary); font-weight: 600; }

.uc-cat { border-top: 1px solid var(--border-subtle); padding: 1rem 0; }
.uc-cat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 0.35rem; cursor: pointer;
}
.uc-cat__name { font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem; color: var(--text-primary); }
/* accent-press, not accent: raw --accent is 3.34:1 on the white Cookie Preferences modal card, fails WCAG AA for text (found in pre-launch audit) */
.uc-cat__always { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-press); }
.uc-cat__desc { font-family: var(--font-sans); font-weight: 300; font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }

.uc-modal__actions, .ua-modal__actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle);
}
.uc-modal__actions .uc-btn { flex: 1 1 auto; min-width: 8rem; }

/* ---- Accessibility panel controls ---- */
.ua-ctrl { padding: 0.9rem 0; border-top: 1px solid var(--border-subtle); }
.ua-ctrl--toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.ua-ctrl__label { font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; color: var(--text-primary); }
.ua-seg { display: inline-flex; margin-top: 0.6rem; padding: 3px; gap: 2px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 999px; }
.ua-seg__btn {
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500;
  color: var(--text-secondary); background: transparent; border: 0; border-radius: 999px;
  padding: 0.4rem 0.95rem; cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ua-seg__btn:hover { color: var(--text-primary); }
.ua-seg__btn[aria-checked="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* ---- Responsive: stack utility bar + banner actions on small screens ---- */
@media (max-width: 720px) {
  .uf-utilbar { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .uf-util-actions { width: 100%; }
  .uc-banner__inner { flex-direction: column; align-items: stretch; }
  .uc-banner__actions { justify-content: stretch; }
  .uc-banner__actions .uc-btn { flex: 1 1 auto; }
  .uc-modal__actions, .ua-modal__actions { justify-content: stretch; }
}
@media (max-width: 460px) {
  .uf-util-theme { width: 100%; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .uf-themesel { width: 100%; }
  .uf-themesel__btn { min-width: 0; flex: 1 1 0; justify-content: center; padding-inline: 0.55rem; }
}
@media (max-width: 360px) {
  .header-actions { gap: 0.5rem; }
}

/* ============================================================
   ACCESSIBILITY EFFECT RULES (applied via html[data-a11y-*])
   ============================================================ */
html[data-a11y-textsize="large"]  { font-size: 112.5%; }
html[data-a11y-textsize="larger"] { font-size: 125%; }

html[data-a11y-contrast="on"] {
  --text-secondary: var(--text-primary);
  --text-muted: var(--text-primary);
  --border-subtle: var(--border-default);
}
html[data-a11y-contrast="on"] :focus-visible { outline-width: 3px; }

html[data-a11y-links="on"] :is(main, footer) a:not(.btn):not([class*="btn--"]):not(.uf-util-btn) {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

html[data-a11y-font="on"] {
  --font-display: Verdana, "Segoe UI", system-ui, Arial, sans-serif;
  --font-sans: Verdana, "Segoe UI", system-ui, Arial, sans-serif;
}

html[data-a11y-motion="on"] *,
html[data-a11y-motion="on"] *::before,
html[data-a11y-motion="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ============================================================
   AI CHAT ASSISTANT (v1, real estate inquiries only, added 2026-07-24)
   Floating action button + slide-up panel. Follows the same visual
   language as the feedback widget (.ufb-*) but is a lighter-weight,
   non-modal panel (page stays interactive behind it) rather than a
   full-screen overlay, since a chat is meant to stay open alongside
   browsing rather than block the page.
   ============================================================ */
/* Persistent accessibility widget (added 2026-07-30) - mirrors .uc-fab's
   visual language but sits on the opposite side of the screen so the two
   floating buttons never collide, and is icon-only/circular (no label)
   since it's a universally-recognized icon and two labeled pills at the
   bottom of the screen would compete for attention. */
.a11y-fab {
  position: fixed;
  inset-inline-start: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.a11y-fab:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-1px); }
.a11y-fab .icon-svg { width: 1.3em; height: 1.3em; }
@media (max-width: 480px) {
  .a11y-fab { width: 42px; height: 42px; inset-inline-start: 0.8rem; bottom: 0.8rem; }
}

.uc-fab {
  position: fixed;
  /* Logical property (not "right") so the whole widget can flip to the
     other side of the screen for an RTL (Hebrew) conversation just by
     toggling dir="rtl" on this element in JS - matches Intercom's own
     confirmed live behavior for RTL locales, found via 2026-07-26
     competitive research. No separate [dir=rtl] override rule needed:
     inset-inline-end resolves to "left" automatically under dir="rtl". */
  inset-inline-end: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.uc-fab:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-1px); }
.uc-fab .icon-svg { width: 1.15em; height: 1.15em; }
.uc-fab[aria-expanded="true"] { display: none; }

/* Proactive engagement nudge (added 2026-07-31, competitive audit proposal D -
   Intercom/Zendesk time-on-page and Drift's exit-intent patterns). A small,
   easily dismissed invitation shown at MOST ONCE per visitor (localStorage-
   gated in JS, Crisp's documented "fired-once, remembered per-visitor"
   pattern) - deliberately does not auto-open the full panel, only invites. */
.uc-nudge {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 5rem;
  z-index: 59;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  width: min(260px, calc(100vw - 2.5rem));
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  animation: uc-nudge-in 0.25s ease-out;
}
@keyframes uc-nudge-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
html[data-a11y-motion="on"] .uc-nudge { animation: none; }
@media (prefers-reduced-motion: reduce) { .uc-nudge { animation: none; } }
.uc-nudge__text {
  flex: 1 1 auto;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
  text-align: start;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
}
.uc-nudge__text:hover { color: var(--accent-press); }
.uc-nudge__close {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
}
.uc-nudge__close:hover { color: var(--text-primary); }
html[data-theme="dark"] .uc-nudge { background: var(--sand-200); }

.uc-panel {
  position: fixed;
  inset-inline-end: 1.25rem; /* see .uc-fab comment - flips automatically under dir="rtl" */
  bottom: 1.25rem;
  z-index: 61;
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 2.5rem));
  /* dvh accounts for the mobile browser UI/keyboard actually showing, unlike
     vh which is the "as if the address bar were hidden" layout viewport -
     added 2026-07-31 (competitive audit finding: iOS Safari resizes the
     visual viewport on keyboard-open but not 100vh, so a fixed-height panel
     computed from vh alone can hide the input/last message behind the
     keyboard). A browser that doesn't understand dvh treats this whole
     declaration as invalid and keeps the vh line above - same progressive-
     enhancement trick already used for the image-set() background images. */
  height: min(560px, calc(100dvh - 2.5rem));
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out), visibility 0s linear 0.24s;
}
.uc-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out), visibility 0s;
}

.uc-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-subtle);
}
/* min-width: 0 is the standard flexbox fix for a text-containing flex item
   that won't shrink below its own content's intrinsic width otherwise -
   without it, a long subtitle can force this box wider than the space
   actually available next to the close button, overflowing underneath it.
   Same overflow existed in both directions, but only became visually
   obvious in RTL (found 2026-07-26 testing the RTL panel mirror) because
   of where the overflow happened to land relative to the short title text. */
.uc-panel__headertext { min-width: 0; flex: 1 1 auto; }
/* The real root cause of the RTL overlap (found 2026-07-26): .ufb-close is
   shared with the feedback widget and uses position:absolute + a PHYSICAL
   `right` offset there - that offset never flips under dir="rtl", so it
   stayed pinned to the panel's own right edge while the header's flex
   content correctly mirrored to the right-becomes-start side, and the two
   collided. Overriding back to position:static here (scoped to this
   header only, the shared feedback-widget usage is untouched) makes the
   close button a normal flex item instead, so justify-content:space-between
   places and mirrors it correctly like every other header child. */
.uc-panel__header .ufb-close { position: static; flex-shrink: 0; }
.uc-panel__title { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.uc-panel__subtitle { font-size: 0.8rem; color: var(--text-secondary); margin: 0.15rem 0 0; }

/* EU AI Act Art. 50(1) disclosure, redesigned AGAIN 2026-07-26 after
   competitive research (Intercom/Zendesk/Crisp/Tidio/Salesloft, all
   checked live) found that no vendor puts AI-disclosure text bolted onto
   the header name itself - the earlier "(AI agent)" header label (itself
   a fix for an even earlier full-sentence banner) is removed. Disclosure
   is now two layers instead of three: (1) the subtitle names "AI" in
   plain language (see chatbot.subtitle translations), and (2) Aura's own
   first reply explicitly self-discloses, in the visitor's language. Both
   together satisfy Art.50's "clear and distinguishable, at the very
   beginning" requirement without a dedicated header badge - matching
   Intercom's own default pattern exactly.

   The one-time inline system notice (.uc-system-notice) is new: shown
   once, above the very first exchange only (never repeated), matching
   Zendesk's live "this chat is recorded..." pattern - this is the
   "easy to spot at the very beginning" moment, distinct from the
   persistent footer consent line below. */
.uc-system-notice {
  flex-shrink: 0;
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-control);
  background: var(--surface-page);
  font-size: 0.74rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
}
.uc-system-notice a { color: var(--accent-press); font-weight: 600; }

/* Persistent footer consent line, redesigned 2026-07-26: a full sentence
   with only "Privacy Policy" hyperlinked ("By chatting with Aura, you
   agree to our Privacy Policy.") rather than a bare standalone link -
   matches Intercom's own live footer exactly; a bare link with no
   sentence around it was David's "looks bad" complaint. */
.uc-panel__footnote {
  flex-shrink: 0;
  margin: 0;
  padding: 0.4rem 1.1rem;
  font-size: 0.7rem;
  text-align: center;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}
.uc-panel__footnote a { color: var(--accent-press); font-weight: 600; }
/* Persistent WhatsApp off-ramp (added 2026-07-29) - always visible during
   the conversation, not just on error/success, so a hesitant visitor has
   a low-commitment way out other than closing the panel entirely. */
.uc-panel__whatsapp {
  flex-shrink: 0;
  margin: 0;
  padding: 0.4rem 1.1rem 0;
  font-size: 0.7rem;
  text-align: center;
  color: var(--text-muted);
}
/* display:inline-block + negative margin enlarges the tap target to a
   reasonable mobile touch size without changing the visible line height
   (found undersized, ~16px tall, in the 2026-07-30 audit). */
.uc-panel__whatsapp a { color: var(--accent-press); font-weight: 600; display: inline-block; padding: 0.5rem 0; margin: -0.5rem 0; }

.uc-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Conversation history (Stage 2, added 2026-07-29) - occupies the same
   flex slot as .uc-panel__messages, toggled via [hidden] so only one of
   the two shows at a time. */
.uc-history { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
/* An author-stylesheet display:flex always beats the UA default
   [hidden]{display:none} rule regardless of specificity - without this,
   toggling the `hidden` attribute (js/urbanis-chatbot.js) does nothing and
   the message thread, input form, and history list can render stacked on
   top of each other. Found in the 2026-07-30 overnight audit - every other
   hidden-toggled component in this file already has this same companion
   rule (.mobile-menu[hidden], .eco-modal[hidden], etc.), this was a missed
   instance on the newest feature. */
.uc-panel__messages[hidden], .uc-panel__form[hidden], .uc-history[hidden] { display: none; }
.uc-history__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; }
.uc-history__title { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.uc-history__new {
  flex-shrink: 0; padding: 0.4rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border-default); background: var(--surface-page);
  color: var(--accent-press); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.uc-history__new:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.uc-history__empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 1.5rem 0.5rem; }
.uc-history__item {
  display: block; width: 100%; text-align: start; cursor: pointer;
  padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--border-subtle);
  background: var(--surface-page); font-family: var(--font-sans);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.uc-history__item:hover { background: var(--sand-100); border-color: var(--border-default); }
.uc-history__item-date { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem; }
.uc-history__item-preview { display: block; font-size: 0.85rem; color: var(--text-primary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-history__item-badge { display: inline-block; margin-inline-start: 0.4rem; font-size: 0.65rem; font-weight: 700; color: var(--accent-press); vertical-align: middle; }

.uc-msg { display: flex; }
.uc-msg--user { justify-content: flex-end; }
.uc-msg--assistant { justify-content: flex-start; }
.uc-msg__bubble {
  max-width: 84%;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.uc-msg--assistant .uc-msg__bubble { background: var(--sand-100); color: var(--text-primary); border-bottom-left-radius: 4px; }
.uc-msg--user .uc-msg__bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
/* Animated 3-dot typing indicator, replacing a plain "Thinking..." text
   label 2026-07-26 (David pointed to this pattern from a Zendesk bot demo -
   "gives a good feeling"). aria-label carries the accessible text instead. */
.uc-typing-dots { display: flex; align-items: center; gap: 4px; padding: 0.15rem 0; }
.uc-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: uc-typing-bounce 1.2s infinite ease-in-out;
}
.uc-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.uc-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes uc-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
  40% { transform: scale(1); opacity: 0.9; }
}
html[data-a11y-motion="on"] .uc-typing-dots span { animation: none; opacity: 0.7; }

/* Quick-reply chips shown once, under the opening greeting - a fast tap
   path into the same triage the model already does conversationally; the
   text input stays fully usable for anyone who prefers to type instead.
   Added 2026-07-26 per David's request, modeled on the common "buttons +
   free text" chat-widget hybrid pattern. */
.uc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.1rem 0 0.4rem; }
.uc-chip {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.uc-chip:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.uc-note { font-size: 0.82rem; line-height: 1.5; padding: 0.6rem 0.8rem; border-radius: var(--radius-control); border: 1px solid var(--border-subtle); }
.uc-note p { margin: 0; }
.uc-note a { color: var(--accent-press); font-weight: 600; }
.uc-note--error { background: rgba(180,69,47,0.10); border-color: rgba(180,69,47,0.42); color: #7D2F1F; }
/* Success note reads as a normal Aura reply, not a distinct alert box
   (David, 2026-07-29: it should look like the rest of the conversation) -
   matches .uc-msg--assistant .uc-msg__bubble exactly instead of the
   bordered/tinted .uc-note treatment above. */
.uc-note--success {
  background: var(--sand-100); border: none; color: var(--text-primary);
  font-size: 0.88rem; padding: 0.55rem 0.8rem;
  border-radius: 14px; border-bottom-left-radius: 4px;
  max-width: 84%; width: fit-content;
}

/* Property lookup result card (proposal B, added 2026-07-31) - a compact
   spec card rendered alongside Aura's own (now shorter) reply when
   lookup_property finds an unambiguous match, instead of relying only on
   prose. Deliberately shows no price and no photo - see the JS comment in
   renderPropertyCards() for why. */
.uc-property-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  padding: 0.65rem 0.8rem;
  margin: 0.2rem 0;
  max-width: 84%;
  font-family: var(--font-sans);
}
.uc-property-card__title { margin: 0 0 0.15rem; font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
.uc-property-card__address { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--text-muted); }
.uc-property-card__spec { margin: 0.1rem 0; font-size: 0.82rem; color: var(--text-primary); }
.uc-property-card__available { margin: 0.3rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--accent-press); }
html[data-theme="dark"] .uc-property-card { background: var(--sand-200); }

.uc-panel__form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.uc-panel__input {
  flex: 1;
  resize: none;
  max-height: 6.5em;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
}
.uc-panel__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.uc-panel__input:disabled { opacity: 0.6; }

.uc-send {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}
.uc-send .icon-svg { width: 1.05em; height: 1.05em; }
.uc-send:hover { background: var(--accent-hover); }
.uc-send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
  .uc-fab__label { display: none; }
  .uc-fab { padding: 0.75rem; border-radius: 50%; }
  .uc-panel {
    inset-inline: 0.6rem;
    bottom: 0.6rem;
    width: auto;
    height: min(72vh, calc(100vh - 1.5rem));
    height: min(72dvh, calc(100dvh - 1.5rem)); /* see .uc-panel comment above */
  }
}

/* ============================================================
   RELOCATION SUB-PAGE (added 2026-08-01) - /en/relocation/ + root
   twin. Reuses the shared header/footer chrome and existing section
   classes (.bridge, .eco + .eco__intro, .journey + .journey-step,
   .journey__cta, .faq) as-is. Only two new components below: the
   static page banner (the rotating .hero is homepage/hero.js-only,
   not reusable here) and the service pillar cards (no existing
   component fits a text-only, image-free service list).
   ============================================================ */
.relo-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(420px, 58vw, 620px);
  display: flex; align-items: flex-end;
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  background-size: cover; background-position: center;
  color: #fff;
}
.relo-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(28,23,16,0.48) 0%, rgba(28,23,16,0.18) 46%, rgba(196,152,32,0.06) 100%);
}
.relo-hero__inner { position: relative; z-index: 1; max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; }
.relo-hero .u-overline { color: #E7DDC6; text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.relo-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.01em;
  color: #fff; margin: 0.9rem 0 1.1rem; text-wrap: pretty;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5);
}
.relo-hero__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6;
  color: #EDE6D6; max-width: 56ch; margin: 0 0 1.75rem; text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(0,0,0,0.6);
}
.relo-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.75rem; }
.relo-hero__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.relo-hero__actions .btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.08); }
.relo-hero__trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; list-style: none; margin: 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(241,234,217,0.22);
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 400; color: #D8CFBC;
}

.pillar-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem); list-style: none; margin: 0; padding: 0;
}
@media (max-width: 860px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
.pillar {
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(168,136,78,0.35);
  border-color: var(--gold-500);
}
.pillar:hover .pillar__icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 10px 24px -8px rgba(168,136,78,0.55); }
.pillar__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(150deg, #C6A45A, #9E7E42); color: #241A0E;
  margin-bottom: 1.1rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .pillar, .pillar__icon { transition: none; }
  .pillar:hover { transform: none; }
  .pillar:hover .pillar__icon { transform: none; }
}
.pillar__icon .icon-svg { width: 1.2rem; height: 1.2rem; }
.pillar__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.15;
  color: var(--text-primary); margin: 0 0 0.85rem;
}
.pillar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.pillar__list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-family: var(--font-sans); font-weight: 300; font-size: 0.94rem; line-height: 1.5;
  color: var(--text-secondary);
}
.pillar__list li::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-top: 0.55rem;
}

@media (max-width: 720px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   URBANIS SUB-BRAND SYSTEM (added 2026-08-01) - shared component
   vocabulary for standalone "company" pages (Relocation, DREAM,
   Home Design, Home Furniture...). These pages reuse ONLY the
   site's header/footer chrome + design tokens; every component
   below is intentionally NEW and unused by the homepage itself,
   so each page reads as its own distinct product, not a homepage
   clone. Consistency back to Urbanis comes from: the shared
   header/footer, the same two typefaces, the same gold accent used
   only as accent, the same .btn/.u-overline primitives, and the
   .sb-badge tag below - not from shared layout. Per-page
   distinctiveness comes from --sb-accent/--sb-surface set per page,
   plus free layout/imagery/copy/section order.
   ============================================================ */
.sb-page { --sb-accent: var(--gold-500); }

.sb-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  border: 1px solid currentColor; opacity: 0.85;
}
.sb-badge svg { width: 0.85em; height: 0.85em; }

.sb-display {
  font-family: var(--font-display); font-weight: 400; color: inherit;
  font-size: clamp(3.2rem, 7.5vw, 6.5rem); line-height: 0.98; letter-spacing: -0.015em;
  text-wrap: pretty; margin: 0;
}

.sb-hero { display: grid; grid-template-columns: 1fr; min-height: 100svh; }
.sb-hero__media { position: relative; min-height: 46vh; background-size: cover; background-position: center; overflow: hidden; }
.sb-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,12,10,0.05) 0%, rgba(13,12,10,0.55) 100%);
}
.sb-hero__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  background: var(--sb-surface, var(--ink-950)); color: var(--sb-on-surface, #fff);
}
.sb-hero__eyebrow { color: var(--sb-accent); margin-bottom: 1.25rem; }
.sb-hero__eyebrow::before { background: var(--sb-accent); }
.sb-hero__lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65;
  max-width: 46ch; margin: 1.4rem 0 2rem; opacity: 0.86;
}
.sb-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.sb-hero .sb-badge { align-self: flex-start; }
@media (min-width: 900px) {
  .sb-hero { grid-template-columns: 1fr 1fr; min-height: 92vh; }
  .sb-hero__media { min-height: auto; }
  .sb-hero--reverse { direction: rtl; }
  .sb-hero--reverse > * { direction: ltr; }
}

.sb-feature {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center; padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.sb-feature__media { aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: var(--radius-card); }
.sb-feature__eyebrow { color: var(--sb-accent); margin-bottom: 1.1rem; }
.sb-feature__eyebrow::before { background: var(--sb-accent); }
.sb-feature__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 1.1rem; text-wrap: pretty;
}
.sb-feature__body { font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); max-width: 52ch; }
.sb-feature__list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.sb-feature__list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-family: var(--font-sans); font-weight: 400; font-size: 0.98rem; line-height: 1.5; color: var(--text-primary);
}
.sb-feature__list li::before { content: ""; flex: none; width: 22px; height: 1px; margin-top: 0.75rem; background: var(--sb-accent); }
@media (min-width: 900px) {
  .sb-feature { grid-template-columns: 1fr 1fr; }
  .sb-feature--reverse .sb-feature__media { order: 2; }
}

.sb-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); overflow: hidden;
}
.sb-strip__cell { background: var(--surface-raised); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem); }
.sb-strip__num { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--sb-accent); margin-bottom: 0.4rem; }
.sb-strip__label { font-family: var(--font-sans); font-weight: 400; font-size: 0.88rem; line-height: 1.4; color: var(--text-secondary); }

.sb-ctaband { background: var(--sb-surface, var(--ink-950)); color: var(--sb-on-surface, #fff); padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center; }
.sb-ctaband__eyebrow { color: var(--sb-accent); justify-content: center; }
.sb-ctaband__eyebrow::before { background: var(--sb-accent); }
.sb-ctaband__title {
  font-family: var(--font-display); font-weight: 400; color: inherit;
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em;
  margin: 1rem auto 1.2rem; max-width: 22ch; text-wrap: pretty;
}
.sb-ctaband__lead { font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; line-height: 1.6; opacity: 0.82; max-width: 50ch; margin: 0 auto 2rem; }
.sb-ctaband__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.sb-ctaband .btn--ghost { color: inherit; border-color: rgba(255,255,255,0.35); }
.sb-ctaband .btn--ghost:hover { border-color: var(--sb-accent); color: var(--sb-accent); background: rgba(255,255,255,0.06); }
/* Bright gold variant (Relocation's closing band - brighter/livelier by request) */
.sb-ctaband--bright .btn--ghost { border-color: rgba(28,23,16,0.35); }
.sb-ctaband--bright .btn--ghost:hover { border-color: #1C1710; color: #1C1710; background: rgba(28,23,16,0.08); }
.sb-ctaband--bright .btn--primary { background: #1C1710; color: #F6EFDE; }
.sb-ctaband--bright .btn--primary:hover { background: #100D08; }

.sb-section-head { max-width: 640px; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.sb-section-head--center { max-width: 720px; margin-inline: auto; text-align: center; }
.sb-section-head .u-overline { color: var(--sb-accent); }
.sb-section-head .u-overline::before { background: var(--sb-accent); }
.sb-section-head__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 1rem 0 0; text-wrap: pretty;
}
.sb-section-head__lead {
  font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; line-height: 1.65;
  color: var(--text-secondary); margin: 1rem 0 0; max-width: 58ch;
}
.sb-section-head--center .sb-section-head__lead { margin-inline: auto; }

/* Lightweight scroll-reveal utility (added 2026-08-02) - opt-in via
   [data-reveal], toggled by js/urbanis-scroll-reveal.js. Static (no
   motion) until JS adds .is-inview, so content is never hidden if JS
   fails to load; respects prefers-reduced-motion by doing nothing. */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-reveal].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Package pricing cards (Relocation "Curated Journeys") */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (max-width: 1024px) { .pkg-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.pkg-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: clamp(1.75rem, 2.5vw, 2.25rem);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pkg-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -22px rgba(168,136,78,0.4); border-color: var(--gold-500); }
.pkg-card--featured { border-color: var(--gold-500); background: linear-gradient(165deg, var(--surface-raised) 0%, rgba(196,152,32,0.08) 100%); }
.pkg-card__badge {
  align-self: flex-start; font-family: var(--font-sans); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #241A0E;
  background: linear-gradient(150deg, #E8C563, #C49820); padding: 0.35rem 0.75rem; border-radius: 999px;
  margin-bottom: 1.1rem;
}
.pkg-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--text-primary); margin: 0 0 0.4rem; }
.pkg-card__tagline { font-family: var(--font-sans); font-weight: 300; font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 1.1rem; }
.pkg-card__price { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; color: var(--gold-500); line-height: 1; margin-bottom: 0.3rem; }
.pkg-card__priceNote { font-family: var(--font-sans); font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 1.4rem; }
.pkg-card__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.pkg-card__list li { display: flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-sans); font-weight: 300; font-size: 0.88rem; line-height: 1.45; color: var(--text-secondary); }
.pkg-card__list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); margin-top: 0.5rem; }
.pkg-card .btn { width: 100%; justify-content: center; }

/* Professional Network strip */
.network-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; }
@media (max-width: 900px) { .network-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .network-grid { grid-template-columns: 1fr; } }
.network-cell { background: var(--surface-raised); padding: clamp(1.5rem, 2.5vw, 1.9rem); transition: background var(--dur) var(--ease-out); }
.network-cell:hover { background: rgba(168,136,78,0.06); }
.network-cell__title { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--text-primary); margin: 0 0 0.4rem; }
.network-cell__desc { font-family: var(--font-sans); font-weight: 300; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); margin: 0 0 0.5rem; }
.network-cell__names { font-family: var(--font-sans); font-weight: 500; font-size: 0.78rem; color: var(--gold-600); }

/* Team cards (compact "Meet Our Team" - distinct from the homepage's carousel .person-card) */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); max-width: 680px; margin-inline: auto; }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { text-align: center; }
.team-card__photo { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.1rem; border: 3px solid var(--sand-100); box-shadow: 0 12px 28px -14px rgba(22,20,15,0.35); transition: transform var(--dur) var(--ease-out); }
.team-card:hover .team-card__photo { transform: scale(1.05); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--text-primary); margin: 0 0 0.3rem; }
.team-card__role { font-family: var(--font-sans); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--gold-600); }

/* URBANIS Standard strip */
.standard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 900px) { .standard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .standard-grid { grid-template-columns: 1fr; } }
.standard-cell { text-align: center; padding: clamp(1rem, 1.5vw, 1.25rem); }
.standard-cell__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(168,136,78,0.12); color: var(--gold-500); margin: 0 auto 0.85rem;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.standard-cell__icon .icon-svg { width: 1.25rem; height: 1.25rem; }
.standard-cell:hover .standard-cell__icon { transform: scale(1.1); background: rgba(168,136,78,0.2); }
.standard-cell__title { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.standard-cell__desc { font-family: var(--font-sans); font-weight: 300; font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); }

/* Countries-served marquee (Relocation hero) - infinite CSS scroll, real
   flags only, pauses under prefers-reduced-motion instead of animating. */
.relo-hero__countries-label {
  display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #C9BFA6; margin: 0 0 0.65rem;
}
.relo-hero__countries {
  overflow: hidden; width: 100%; max-width: 56ch; margin: 0 0 1.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.relo-hero__countries-track { display: flex; gap: 2.25rem; width: max-content; animation: relo-marquee 24s linear infinite; }
.relo-hero__country { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-sans); font-weight: 400; font-size: 0.85rem; color: #EDE6D6; white-space: nowrap; }
.relo-hero__country img { display: block; width: 24px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
@keyframes relo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .relo-hero__countries-track { animation: none; } }

/* ============================================================
   INSIGHTS / BLOG (added 2026-08-02) - content hub template.
   Index grid + article prose, distinct from marketing sections,
   built for long-form readability and clean schema.org/Article
   structured data (SEO/AEO/GEO).
   ============================================================ */
.blog-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); background: linear-gradient(180deg, var(--sand-100) 0%, rgba(196,152,32,0.06) 100%); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  display: flex; flex-direction: column; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(168,136,78,0.38); border-color: var(--gold-500); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.blog-card__media { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.blog-card__body { padding: clamp(1.25rem, 2vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.blog-card__tag { font-family: var(--font-sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 0.6rem; }
.blog-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: var(--text-primary); margin: 0 0 0.6rem; }
.blog-card__excerpt { font-family: var(--font-sans); font-weight: 300; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); flex: 1; margin: 0 0 1rem; }
.blog-card__meta { font-family: var(--font-sans); font-size: 0.76rem; color: var(--text-tertiary, var(--text-secondary)); display: flex; gap: 0.6rem; align-items: center; }

/* Article body - readable measure, distinct from marketing type scale */
.article { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem); }
.article__container { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.article__tag { font-family: var(--font-sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.article__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; color: var(--text-primary); margin: 0.8rem 0 1rem; text-wrap: pretty; }
.article__meta { font-family: var(--font-sans); font-size: 0.84rem; color: var(--text-secondary); margin: 0 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.article__hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-card); margin: 0 0 2.5rem; }
.article__body { font-family: var(--font-sans); font-weight: 300; font-size: 1.08rem; line-height: 1.75; color: var(--text-primary); }
.article__body p { margin: 0 0 1.4rem; }
.article__body h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--text-primary); margin: 2.2rem 0 1rem; }
.article__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--text-primary); margin: 1.8rem 0 0.8rem; }
.article__body ul, .article__body ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.article__body li { margin-bottom: 0.5rem; line-height: 1.6; }
.article__body strong { font-weight: 600; color: var(--text-primary); }
.article__source {
  margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: rgba(168,136,78,0.07);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  font-family: var(--font-sans); font-size: 0.88rem; color: var(--text-secondary);
}
.article__source a { color: var(--gold-600); text-decoration: underline; }
.article__disclaimer { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-tertiary, var(--text-secondary)); margin-top: 1rem; font-style: italic; }
.article__cta { margin-top: 3rem; padding: 2rem; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); text-align: center; }

/* ============================================================
   INTERIOR DESIGN PAGE - merged single-page redesign (2026-08-03)
   Replaces the old 3-card link-out hub: DREAM / Home Design / Home
   Furniture now live as one page, selected via .id-box tabs into
   .id-detail below. Header/footer/contact form are the real, unchanged
   site components - only this page's own body content is new.
   ============================================================ */

/* -- Full-bleed hero with a JS scroll-parallax layer (id-hero.js) -- */
.id-hero { position: relative; min-height: min(94vh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink-950); }
.id-hero__media { position: absolute; inset: -14% 0; overflow: hidden; }
.id-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: brightness(1.18) saturate(1.05); will-change: transform; }
.id-hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,12,10,0.6) 0%, rgba(13,12,10,0.2) 45%, rgba(13,12,10,0.02) 68%, transparent 82%); }
.id-hero__inner { position: relative; z-index: 1; width: 100%; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.id-hero__card {
  display: inline-block; max-width: 640px; padding: clamp(1.6rem, 3.4vw, 2.6rem);
  background: rgba(13,12,10,0.3); -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1);
  border: 1px solid rgba(244,239,228,0.14); border-radius: var(--radius-card);
}
.id-hero__lead { font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65; max-width: 46ch; margin: 1.3rem 0 1.8rem; color: rgba(244,239,228,0.82); }
.id-hero__trust { list-style: none; margin: 0; padding-top: 1.4rem; border-top: 1px solid rgba(241,234,217,0.22); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-family: var(--font-sans); font-size: 0.82rem; color: #D8CFBC; }
@media (prefers-reduced-motion: reduce) { .id-hero__media img { transform: none !important; } }

/* -- Services intro reuses .sb-section-head; 3-box tab grid reuses .eco-card, as <button>s -- */
.id-boxgrid { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.eco-card__link.id-box { background: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left; -webkit-appearance: none; appearance: none; }
.eco-card__link.id-box.is-active { box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }
.id-box__cue {
  position: absolute; z-index: 1; top: clamp(0.9rem, 1.5vw, 1.2rem); right: clamp(0.9rem, 1.5vw, 1.2rem);
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem;
  opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.eco-card__link.id-box:hover .id-box__cue, .eco-card__link.id-box.is-active .id-box__cue { opacity: 1; transform: none; }
.eco-card__link.id-box.is-active .id-box__cue { background: var(--accent); border-color: var(--accent); color: var(--ink-950); }
@media (max-width: 820px) { .id-boxgrid { grid-template-columns: 1fr; } }

/* -- Detail panel: swaps content per tab via JS; .is-dark inverts to ink surface for DREAM -- */
.id-detail { margin-top: clamp(1rem, 2.4vw, 1.8rem); border: 1px solid var(--border-subtle); background: var(--surface-raised); border-radius: var(--radius-card); padding: clamp(2rem, 4.6vw, 3.4rem); transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease; color: var(--text-primary); }
.id-detail.is-dark { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.id-detail__eyebrow { display: block; margin-bottom: 0.6rem; }
.id-detail__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 2.8vw, 2.3rem); color: inherit; margin: 0 0 1.3rem; }
.id-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.id-detail__block + .id-detail__block { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.id-detail__block h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.8vw, 1.55rem); color: inherit; margin: 0 0 0.8rem; }
.id-detail__block p { font-family: var(--font-sans); font-weight: 300; font-size: 1rem; line-height: 1.7; color: inherit; opacity: 0.82; max-width: 54ch; margin: 0; }
.id-detail__list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.id-detail__list li { font-family: var(--font-sans); font-size: 0.94rem; line-height: 1.4; color: inherit; display: flex; align-items: baseline; gap: 0.8rem; }
.id-detail__list li::before { content: ""; flex: none; width: 20px; height: 1px; margin-top: 0.7rem; background: currentColor; opacity: 0.5; }
.id-detail__meta { list-style: none; margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid currentColor; border-top-color: rgba(128,128,128,0.25); display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.82rem; color: inherit; opacity: 0.75; }
.id-detail__actions { margin-top: 1.8rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.id-detail.is-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.id-detail.is-dark .btn--ghost:hover { border-color: var(--gold-soft, var(--accent)); color: var(--gold-soft, var(--accent)); background: rgba(255,255,255,0.06); }
@media (max-width: 860px) { .id-detail__grid { grid-template-columns: 1fr; } }

/* -- Why Choose Us: three real differentiators -- */
.id-why { background: var(--surface-raised); padding: clamp(4.5rem, 9vw, 7rem) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.id-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3rem); }
.id-why__item { text-align: left; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); }
.id-why__num { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--accent); display: block; margin-bottom: 0.75rem; }
.id-why__item h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--text-primary); margin: 0 0 0.55rem; }
.id-why__item p { font-family: var(--font-sans); font-weight: 300; font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
@media (max-width: 820px) { .id-why__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* -- Motion section: slow Ken Burns pan on a real self-hosted photo, standing in for a future
      real DREAM video loop (flagged to David, not presented as real footage) -- */
.id-motion { position: relative; height: min(70vh, 620px); overflow: hidden; background: var(--ink-950); }
.id-motion__media { position: absolute; inset: 0; overflow: hidden; }
.id-motion__media img { width: 112%; height: 112%; object-fit: cover; margin: -6%; animation: idKenburns 24s ease-in-out infinite alternate; }
@keyframes idKenburns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-2%,-2%); } }
.id-motion__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,12,10,0.78) 0%, rgba(13,12,10,0.28) 55%, rgba(13,12,10,0.55) 100%); }
.id-motion__body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 520px; color: #fff; }
.id-motion__body .u-overline { color: var(--gold-soft, var(--accent)); }
.id-motion__body .u-overline::before { background: var(--gold-soft, var(--accent)); }
.id-motion__body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; color: #fff; margin: 1.1rem 0 0; }
.id-motion__body p { font-family: var(--font-sans); font-weight: 300; font-size: 0.98rem; line-height: 1.65; color: rgba(244,239,228,0.75); max-width: 38ch; margin: 1.1rem 0 0; }
@media (prefers-reduced-motion: reduce) { .id-motion__media img { animation: none; } }
.article__cta p { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-primary); margin: 0 0 1.1rem; }