/* ==========================================================================
   SWK Properties — Design Tokens
   Warm light theme: cream canvas, deep navy ink, tan/gold accents. Navy is kept
   for call-to-action bands, the newsletter card, stats and the lightbox by
   re-scoping the semantic tokens (see ".on-dark" at the end of this file).
   Serif display type for editorial weight, General Sans for UI and body.
   All fonts are self-hosted.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Ink: deep navy (text, dark bands) ---- */
  --navy-950: #0f2244;
  --navy-900: #14305c;
  --navy-800: #1b3a6b;
  --navy-700: #2a4a7d;
  --navy-600: #44618f;

  /* ---- Paper: warm cream canvas ---- */
  --paper-0: #ffffff;
  --paper-50: #faf7f2;
  --paper-100: #f4efe6;
  --paper-200: #ebe3d5;

  /* ---- Tan / gold (accents) ---- */
  --gold-700: #94652c;
  --gold-600: #b07a38;
  --gold-500: #c99a63;
  --gold-400: #dcb888;
  --gold-100: #f6ead7;

  /* ---- Legacy aliases (kept so older rules still resolve) ---- */
  --ember-600: #7a5224;
  --ember-500: #94652c;
  --ember-400: #b07a38;
  --ember-100: #f6ead7;
  --cream-50: #faf7f2;
  --cream-100: #f4efe6;
  --sand-200: #ebe3d5;
  --slate-900: #0f2244;
  --slate-700: #33415c;
  --slate-500: #5f6a82;
  --slate-300: #4f5b70;
  --slate-100: #e6dfd2;

  --white: #ffffff;
  --success: #1f7a52;
  --danger: #b3261e;

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(90deg, var(--navy-800), var(--gold-500) 60%, var(--gold-400));
  --grad-cta: linear-gradient(135deg, #1b3a6b 0%, #0f2244 100%);
  --grad-gold: linear-gradient(135deg, #e2c295 0%, #c99a63 60%, #b07a38 100%);
  --grad-page: radial-gradient(1000px 520px at 100% -4%, rgba(201, 154, 99, 0.16), transparent 62%),
               radial-gradient(900px 520px at 0% 12%, rgba(27, 58, 107, 0.06), transparent 60%);

  /* ---- Semantic tokens ---- */
  --color-bg: var(--paper-50);
  --color-surface: var(--paper-0);
  --color-surface-alt: var(--paper-100);
  --color-text: var(--navy-950);
  --color-text-muted: #39455a;
  --color-text-subtle: #5f6a82;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #cdd6e6;
  --color-accent: var(--gold-700);
  --color-accent-hover: #7a5224;
  --color-border: #e6dfd2;
  --color-dark-surface: var(--navy-950);
  --color-dark-surface-alt: var(--navy-900);
  --on-accent: #ffffff;
  --tint-hover: rgba(15, 34, 68, 0.06);

  /* ---- Glass (frosted white over the hero; dark glass over photography) ---- */
  --glass-bg-dark: rgba(15, 34, 68, 0.62);
  --glass-bg-light: rgba(255, 255, 255, 0.82);
  --glass-border-dark: rgba(255, 255, 255, 0.18);
  --glass-border-light: rgba(255, 255, 255, 0.95);
  --glass-blur: 18px;

  /* ---- Typography ---- */
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-feature: var(--font-display);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;

  /* ---- Spacing scale (8px grid, generous by design) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ---- Shadow (soft, navy-tinted depth on a warm canvas) ---- */
  --shadow-sm: 0 2px 10px rgba(15, 34, 68, 0.08);
  --shadow-md: 0 14px 34px rgba(15, 34, 68, 0.12);
  --shadow-lg: 0 28px 64px rgba(15, 34, 68, 0.16);
  --shadow-accent-glow: 0 10px 28px rgba(15, 34, 68, 0.28);

  /* ---- Motion ---- */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  /* Clearance below the fixed top brand mark (small,
     overlaid elements now — there's no full-width navbar bar to size against). */
  --header-h: 88px;
  --header-h-scrolled: 88px;
}

/* The brand mark is enlarged on mobile (see .site-brand .brand-logo) —
   still taller than desktop's compact single row, so this needs bumping. */
@media (max-width: 767px) {
  :root {
    --header-h: 68px;
    --header-h-scrolled: 68px;
  }
}

/* Breakpoints (documented, used via raw px in media queries):
   sm: 480px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px */

/* ---- Dark islands: same components on a navy surface, light text ---- */
.on-dark,
.cta-band,
.section--dark,
.lightbox,
.footer-news {
  --color-text: #ffffff;
  --color-text-muted: #cdd6e6;
  --color-text-subtle: #a9b6cf;
  --color-accent: #e2c295;
  --color-accent-hover: #f0dcbc;
  --color-border: rgba(255, 255, 255, 0.18);
  --color-surface: rgba(255, 255, 255, 0.07);
  --color-surface-alt: rgba(255, 255, 255, 0.1);
  --tint-hover: rgba(255, 255, 255, 0.1);
  --glass-bg-light: rgba(255, 255, 255, 0.08);
  --glass-border-light: rgba(255, 255, 255, 0.18);
  --on-accent: #0f2244;
}

/* ==========================================================================
   SWK Properties — Reset & Base
   ========================================================================== */

/* All fonts are self-hosted (no third-party font requests). Instrument Serif is the
   display face for headlines and numerals; General Sans carries UI and body copy. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif/instrument-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif/instrument-serif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* General Sans — self-hosted. Stands in for "Mori" (PP Mori), a paid Pangram
   Pangram font; General Sans is the closest free release from the same foundry. */
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans/general-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans/general-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans/general-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans/general-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  font-kerning: normal;
  overflow-x: hidden;
  cursor: url('/assets/images/brand/swk-cursor-dark.png') 14 14, auto;
}

/* Links/buttons get their own explicit cursor rule since the browser's
   built-in pointer cursor for clickable elements isn't inherited from
   body — it's a direct value on the element itself, so it would otherwise
   win over the body-level custom cursor above. !important because the
   later button-reset rule below also sets cursor: pointer at equal
   specificity and would otherwise win by source order. */
a, button, [role='button'] {
  cursor: url('/assets/images/brand/swk-cursor-dark.png') 14 14, pointer !important;
}

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

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-wrap: balance;
}

/* Headlines set in the display serif; card-level headings stay in the sans. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

h1 { font-size: clamp(2.9rem, 5.2vw + 1rem, 6rem); }
h2 { font-size: clamp(2.3rem, 3vw + 1rem, 3.9rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
h4 { font-size: var(--fs-md); font-weight: 600; }

p { color: var(--color-text-muted); text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
}

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

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

ul, ol { list-style: none; }

/* ---- Accessibility ---- */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 1000;
  background: var(--color-accent);
  color: var(--navy-950);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-luxury);
}

.skip-link:focus {
  top: var(--space-3);
}

/* ---- Layout utilities ---- */

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

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

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

/* (The faint logo watermark behind sections was removed: it ghosted through headings and body copy.) */

.section > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-7); }
}

.section-header {
  max-width: 640px;
  margin-bottom: var(--space-7);
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

.text-muted { color: var(--color-text-muted); }

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

.visually-hidden-loading {
  opacity: 0;
}

/* ---- Scroll reveal (paired with js/scroll-reveal.js) ---- */

/* Gated on .js (set by an inline script in <head>) so content is never left
   invisible if scripts fail to load. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-luxury),
              transform var(--duration-slow) var(--ease-luxury);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Lazy image fade-in ---- */

.js img[loading='lazy'] {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-luxury);
}

.js img[loading='lazy'].is-loaded,
.js img[loading='lazy'].is-broken {
  opacity: 1;
}

/* An image that fails to load (missing file, offline) shows a quiet branded
   tile instead of the browser's broken-image icon. */
img.is-broken {
  object-fit: contain;
  background: linear-gradient(135deg, var(--color-surface-alt), var(--color-border));
  color: transparent;
}

/* ==========================================================================
   SWK Properties — Shared Components
   ========================================================================== */

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-luxury),
              box-shadow var(--duration-base) var(--ease-luxury),
              background-color var(--duration-base) var(--ease-luxury),
              color var(--duration-base) var(--ease-luxury),
              border-color var(--duration-base) var(--ease-luxury);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-cta);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 34, 68, 0.26);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #2a4a7d 0%, #14305c 100%);
  box-shadow: var(--shadow-accent-glow);
}

.btn-dark {
  background: var(--navy-950);
  color: #ffffff;
  border: 1px solid var(--navy-950);
}
.btn-dark:hover { background: var(--navy-800); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  color: currentColor;
  border: 1.5px solid currentColor;
}
.btn-outline:hover { background: var(--tint-hover); }

.btn-whatsapp {
  background: transparent;
  color: #0f7a43;
  border: 1.5px solid #0f7a43;
}
.btn-whatsapp:hover { background: rgba(15, 122, 67, 0.08); }

.btn-primary-outline {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}
.btn-primary-outline:hover { background: rgba(148, 101, 44, 0.1); }

.btn-outline-dark {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid #cdbfa8;
}
.btn-outline-dark:hover { border-color: var(--navy-950); background: var(--tint-hover); }

.btn-ghost {
  background: transparent;
  color: inherit;
  padding-inline: var(--space-3);
}
.btn-ghost:hover { color: var(--color-accent-hover); }

.btn-block { width: 100%; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-md); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
}

/* ---- Slide-arrow button (a colored circle that expands to fill the
   button on hover, with the label sliding left and flipping to white) ---- */

.btn-slide-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: #ffffff;
  padding: 10px;
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.btn-slide-arrow__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: var(--radius-full);
  background: var(--navy-900);
  transition: width var(--duration-base) var(--ease-luxury);
}

.btn-slide-arrow:hover .btn-slide-arrow__fill,
.btn-slide-arrow:focus-visible .btn-slide-arrow__fill {
  width: 100%;
}

.btn-slide-arrow__icon {
  display: flex;
  margin-right: var(--space-3);
  color: var(--white);
}

.btn-slide-arrow__icon svg { width: 20px; height: 20px; }

.btn-slide-arrow__text {
  position: relative;
  left: var(--space-4);
  z-index: 1;
  white-space: nowrap;
  padding-inline: var(--space-6);
  color: var(--navy-950);
  transition: left var(--duration-base) var(--ease-luxury), color var(--duration-base) var(--ease-luxury);
}

.btn-slide-arrow:hover .btn-slide-arrow__text,
.btn-slide-arrow:focus-visible .btn-slide-arrow__text {
  left: calc(-1 * var(--space-3));
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .btn-slide-arrow__fill,
  .btn-slide-arrow__text { transition: none; }
}

/* ---- Site brand ---- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.brand .brand-mark {
  color: var(--color-accent);
}

.brand-logo {
  height: 48px;
  width: auto;
  display: block;
}



/* ---- Preloader ---- */

/* Hidden by default — only revealed (via .is-visible) if the page hasn't
   finished loading within the delay armed by the inline script that sits
   next to this markup in <body>, so a fast connection never sees a flash
   of the loading screen. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-luxury),
              visibility var(--duration-slow) var(--ease-luxury);
}

.preloader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.preloader__logo {
  width: 64px;
  height: auto;
}

.preloader__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(15, 34, 68, 0.14);
  border-top-color: var(--navy-900);
  border-radius: var(--radius-full);
  animation: preloader-spin 800ms linear infinite;
}

.preloader__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

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

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader__spinner { animation-duration: 1.4s; }
}

.footer-col .brand-logo {
  height: 44px;
}

.site-brand { position: relative; display: flex; align-items: center; flex-shrink: 0; }
/* Corporate gold: a faint shadow separates the metal from the cream header, and a slow sheen crosses the letterforms. */
.site-brand .brand-logo, .footer-logo img { filter: drop-shadow(0 1px 0.5px rgba(88, 62, 12, 0.35)); }
.site-brand::after, .footer-logo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url('/assets/images/brand/swk-logo-dark.png') center / 100% 100% no-repeat;
  mask: url('/assets/images/brand/swk-logo-dark.png') center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 251, 232, 0.85) 50%, transparent 62%) -160% 0 / 220% 100% no-repeat;
  animation: swk-logo-sheen 8s ease-in-out 2.5s infinite;
}
@keyframes swk-logo-sheen { 0%, 62% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .site-brand::after, .footer-logo::after { animation: none; display: none; } }
.site-brand .brand-logo { height: 52px; width: auto; }

/* ---- Glass panels ---- */

.glass-panel {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.glass-panel--dark {
  background: var(--glass-bg-dark);
  border: 1px solid var(--glass-border-dark);
  color: var(--cream-50);
}

/* ---- Property search bar ---- */

.search-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .search-bar {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
    padding: var(--space-6);
  }
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
}

.search-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.search-field select,
.search-field input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  color: var(--color-text);
}

.search-field select option { color: var(--slate-900); }

/* ---- Cards: Property ---- */

.property-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-luxury),
              transform var(--duration-base) var(--ease-luxury);
}

.property-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.property-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.property-card__body {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ---- Themed glow/parallax cards (featured listings only) ----
   Each card carries a --theme-color custom property (an "H S% L%" HSL
   triple set inline per card) that drives its glow shadow, gradient
   overlay and "Explore Now" chip color — ported from a React destination-
   card component built the same way, just set via inline style instead of
   a styled-components/CSS-in-JS prop. */

.property-card--feature {
  aspect-ratio: 3 / 4;
  background: none;
  box-shadow: none;
}

.property-card--feature:hover {
  transform: none;
  box-shadow: none;
}

.property-card__feature-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0 40px -15px hsl(var(--theme-color) / 0.5);
  transition: transform var(--duration-slow) var(--ease-luxury),
              box-shadow var(--duration-slow) var(--ease-luxury);
}

.property-card--feature:hover .property-card__feature-link {
  transform: scale(1.03);
  box-shadow: 0 0 60px -15px hsl(var(--theme-color) / 0.6);
}

.property-card__feature-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--duration-slow) var(--ease-luxury);
}

.property-card--feature:hover .property-card__feature-bg {
  transform: scale(1.1);
}

.property-card__feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--theme-color) / 0.95), hsl(var(--theme-color) / 0.45) 20%, transparent 44%);
}

.property-card__badges--feature {
  z-index: 2;
}

.property-card__feature-content {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  padding: var(--space-4);
  color: var(--white);
  background: var(--glass-bg-dark);
  border: 1px solid var(--glass-border-dark);
  border-radius: var(--radius-md);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.property-card__feature-title {
  color: var(--white);
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-card__feature-location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-2);
}

.property-card__feature-price {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  margin-top: var(--space-2);
}

.property-card__feature-price .label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

.property-card__explore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: hsl(var(--theme-color) / 0.2);
  border: 1px solid hsl(var(--theme-color) / 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--duration-base) var(--ease-luxury), border-color var(--duration-base) var(--ease-luxury);
}

.property-card--feature:hover .property-card__explore {
  background: hsl(var(--theme-color) / 0.4);
  border-color: hsl(var(--theme-color) / 0.5);
}

.property-card__explore-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-luxury);
}

.property-card--feature:hover .property-card__explore-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .property-card__feature-link,
  .property-card__feature-bg,
  .property-card__explore,
  .property-card__explore-arrow {
    transition: none;
  }
}

.property-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-luxury);
}

.property-card:hover .property-card__media img {
  transform: scale(1.08);
}

.property-card__badges {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  display: flex; gap: var(--space-2);
  z-index: 2;
}

.property-card__fav {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--duration-base) var(--ease-luxury), transform var(--duration-base) var(--ease-luxury);
}

.property-card:hover .property-card__fav,
.property-card:focus-within .property-card__fav {
  opacity: 1;
  transform: translateY(0);
}

.property-card__body {
  padding: var(--space-5);
}

.property-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-text);
}

.property-card__price span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.property-card__title {
  font-size: var(--fs-md);
  margin-top: var(--space-1);
}

.property-card__location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.property-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.property-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.property-card__meta-item .label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}

.property-card__meta-item .value {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text);
}

/* ---- Badges / Tags ---- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-gold { background: var(--gold-100); color: var(--gold-700); }
.badge-navy { background: var(--navy-900); color: var(--cream-50); }
.badge-outline { background: rgba(255, 255, 255, 0.9); color: var(--navy-950); border: 1px solid var(--slate-100); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-luxury);
}

.chip.is-active,
.chip:hover {
  background: var(--color-accent);
  color: var(--on-accent);
  border-color: var(--color-accent);
}

/* ---- Cards: Developer / Community / Service / Benefit ---- */

.developer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury);
}

.developer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
}

/* ---- Trusted-partners logo marquee ---- */

.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 90px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.marquee__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity var(--duration-base) var(--ease-luxury);
}

.marquee__item:hover img {
  opacity: 1;
}

.community-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}

.community-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-luxury);
}

.community-card:hover img { transform: scale(1.06); }

.community-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 27, 34, 0.88) 0%, rgba(22, 27, 34, 0.15) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  color: var(--cream-50);
}

.service-card, .benefit-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury), border-color var(--duration-base);
}

.service-card:hover, .benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.icon-tile {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(220, 35, 56, 0.14);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}

.benefit-card .stat {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* ---- Themed service cards (homepage "How We Help" teaser) ----
   Each card carries a --theme-color custom property (an "H S% L%" HSL
   triple) that tints its background, border, hover glow and the giant
   decorative icon bleeding off its bottom-right corner — ported from a
   React/CVA/Framer-Motion service-card component onto plain CSS custom
   properties + :hover, the same pattern used for the featured-listing
   glow cards. */

.service-card--themed {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  background: var(--cream-50);
  border-color: hsl(var(--theme-color) / 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform var(--duration-base) var(--ease-luxury),
              box-shadow var(--duration-base) var(--ease-luxury),
              border-color var(--duration-base) var(--ease-luxury);
}

.service-card--themed:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 36px hsl(var(--theme-color) / 0.35);
  border-color: hsl(var(--theme-color) / 0.6);
}

.service-card--themed .service-card__body h3 {
  color: var(--navy-950);
}

.service-card--themed .service-card__body p {
  color: var(--slate-700);
  font-size: var(--fs-sm);
}

.service-card--detailed {
  min-height: 0;
}

.service-card--detailed .service-card__body {
  justify-content: flex-start;
  gap: var(--space-3);
}

.service-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

.service-card__body h3 {
  font-size: var(--fs-lg);
  max-width: 16ch;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Padding (offset by a matching negative margin) enlarges the tap target
     on touch devices without shifting where the text visually sits. */
  padding-block: var(--space-3);
  margin-block: calc(var(--space-3) * -1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-950);
}

.service-card--themed:hover .service-card__link {
  text-decoration: underline;
}

.service-card__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@keyframes service-arrow-bounce {
  from { transform: translateX(0); }
  to { transform: translateX(5px); }
}

.service-card--themed:hover .service-card__arrow {
  animation: service-arrow-bounce 0.6s ease-in-out infinite alternate;
}

.service-card__decor {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 140px;
  height: 140px;
  color: hsl(var(--theme-color));
  opacity: 0.9;
  transition: transform var(--duration-slow) var(--ease-luxury), opacity var(--duration-slow) var(--ease-luxury);
}

.service-card__decor svg {
  width: 100%;
  height: 100%;
}

.service-card--themed:hover .service-card__decor {
  transform: scale(1.1) rotate(3deg) translateX(6px);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .service-card--themed,
  .service-card__decor,
  .service-card__arrow {
    transition: none;
    animation: none;
  }
}

/* ---- Testimonials (animated photo-stack carousel) ---- */

.testimonials-carousel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 64rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .testimonials-carousel {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: center;
  }
}

.testimonials-carousel__media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  width: 100%;
  touch-action: pan-y;
}

.tc-photo {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  opacity: 0.7;
  transform: scale(0.92) rotate(var(--tc-rot, 0deg));
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tc-photo img { width: 100%; height: 100%; object-fit: cover; }

.tc-photo.is-active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.testimonials-carousel__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}

.tc-name {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-text);
  padding: var(--space-2) var(--space-5);
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.tc-designation {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.tc-stars {
  color: var(--color-accent);
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  margin-top: var(--space-2);
}

.tc-quote {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.tc-quote .tc-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(4px);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.tc-quote .tc-word.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.tc-nav {
  display: flex;
  gap: var(--space-3);
}

.tc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-luxury), border-color var(--duration-fast) var(--ease-luxury);
}

.tc-arrow:hover { color: var(--color-accent); border-color: var(--color-accent); }
.tc-arrow svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .tc-photo, .tc-quote .tc-word { transition: none; }
}

/* ---- Blog ---- */

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury);
}

.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-luxury); }
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.blog-card__date { font-size: var(--fs-xs); color: var(--color-text-subtle); }

/* ---- Accordion (FAQ) ---- */

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
}

.accordion-trigger .icon-plus {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
  transition: transform var(--duration-base) var(--ease-luxury);
}

.accordion-trigger .icon-plus::before,
.accordion-trigger .icon-plus::after {
  content: '';
  position: absolute;
  background: var(--navy-950);
  border-radius: 2px;
}
.accordion-trigger .icon-plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.accordion-trigger .icon-plus::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); transition: opacity var(--duration-base) var(--ease-luxury); }

.accordion-item.is-open .icon-plus::after { opacity: 0; }
.accordion-item.is-open .icon-plus { transform: rotate(180deg); }

.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) var(--ease-luxury);
}

.accordion-panel p { padding-bottom: var(--space-5); max-width: 640px; }

/* ---- Calculator (glassmorphic, metallic-gold-accented) ---- */

.calculator {
  --calc-c-pi: #94652c;
  --calc-c-pi-hover: #c99a63;
  --calc-c-svc: #dcb888;
  --calc-c-ins: #1b3a6b;
  --calc-glass-bg: rgba(255, 255, 255, 0.92);
  --calc-glass-border: rgba(148, 101, 44, 0.28);

  display: grid;
  gap: var(--space-6);
  padding: 0;
  border-radius: var(--radius-lg);
  background: none;
  box-shadow: none;
}

@media (min-width: 900px) {
  .calculator { grid-template-columns: 1.1fr 0.9fr; }
}

.calc-card {
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--calc-glass-bg);
  border: 1px solid var(--calc-glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.calc-card__title {
  margin-bottom: var(--space-6);
}

.calc-field { margin-bottom: var(--space-5); }

.calc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.calc-field label,
.calc-field__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--slate-300);
  margin-bottom: var(--space-2);
}

.calc-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--calc-glass-border);
  border-radius: var(--radius-sm);
  background: var(--paper-50);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-luxury);
}

.calc-input:focus { border-color: var(--calc-c-pi); }

.calc-input-group {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.calc-input-group .calc-input { flex: 1; min-width: 0; }

.calc-toggle {
  display: flex;
  border: 1px solid var(--calc-glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.calc-toggle__btn {
  padding: 0 var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--slate-300);
  background: transparent;
}

.calc-toggle__btn.is-active {
  background: var(--calc-c-pi);
  color: var(--white);
}

.calc-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.calc-pill {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--calc-glass-border);
  background: var(--paper-50);
  color: var(--slate-300);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--duration-fast) var(--ease-luxury), color var(--duration-fast) var(--ease-luxury);
}

.calc-pill.is-active {
  background: var(--calc-c-pi);
  border-color: var(--calc-c-pi);
  color: var(--white);
}

.btn-calc {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #ffffff;
  text-shadow: none;
  background: linear-gradient(135deg, #b07a38, #94652c 55%, #6f4a1d);
  box-shadow: 0 10px 26px rgba(148, 101, 44, 0.35);
  transition: transform var(--duration-base) var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury);
}

.btn-calc:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(148, 101, 44, 0.45); }
.btn-calc--block { width: 100%; margin-top: var(--space-2); }

/* Golden shine sweep — a bright highlight band drifts across the button on
   a loop, then pauses off-screen before repeating, like light catching
   brushed gold. */
.btn-calc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, 0.26) 50%, transparent 56%);
  background-size: 250% 100%;
  background-position: -100% 0;
  animation: btn-calc-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-calc-shine {
  0% { background-position: -100% 0; }
  35%, 100% { background-position: 130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-calc::after { animation: none; }
}

.calc-donut-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
}

.calc-donut {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

.calc-donut__svg { width: 100%; height: 100%; }

.calc-donut__ring { transform: rotate(-90deg); transform-origin: 60px 60px; }

.calc-donut__seg {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s var(--ease-luxury), stroke-dashoffset 0.6s var(--ease-luxury);
}

.calc-donut__seg--pi { stroke: var(--calc-c-pi); }
.calc-donut__seg--svc { stroke: var(--calc-c-svc); }
.calc-donut__seg--ins { stroke: var(--calc-c-ins); }

.calc-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
}

.calc-donut__amount {
  display: inline-block;
  max-width: 84px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  background: linear-gradient(135deg, #0f2244 0%, #2a4a7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

.calc-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-width: 180px;
}

.calc-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--slate-300);
}

.calc-legend li b {
  margin-left: auto;
  color: var(--cream-50);
  font-weight: 700;
}

.calc-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.calc-legend__dot--pi { background: var(--calc-c-pi); }
.calc-legend__dot--svc { background: var(--calc-c-svc); }
.calc-legend__dot--ins { background: var(--calc-c-ins); }

.calc-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-3);
  padding-block: var(--space-4);
  margin-top: var(--space-5);
  border-top: 1px solid var(--calc-glass-border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--calc-c-pi-hover);
}

.calc-disclosure__chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-luxury);
}

.calc-disclosure.is-open .calc-disclosure__chevron { transform: rotate(180deg); }

.calc-disclosure__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-5);
}

.calc-disclosure__panel .row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--slate-300);
  padding-block: var(--space-2);
  border-bottom: 1px solid rgba(15, 34, 68, 0.1);
}

.calc-disclosure__panel .row span:last-child { color: var(--cream-50); font-weight: 600; }

/* ---- Forms ---- */

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

@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }

.form-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-luxury);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}

.form-field textarea { resize: vertical; min-height: 120px; }

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

.form-error {
  font-size: var(--fs-xs);
  color: var(--danger);
  min-height: 1em;
}

.form-success {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: rgba(31, 122, 82, 0.1);
  border: 1px solid rgba(31, 122, 82, 0.3);
  color: var(--success);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---- Stat strip ---- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }

.stat-strip .stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--color-accent);
}

.stat-strip .stat-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- Breadcrumbs / pagination ---- */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

.breadcrumbs a:hover { color: var(--color-accent-hover); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.pagination button {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-weight: 600;
}

.pagination button.is-active {
  background: var(--color-accent);
  color: var(--navy-950);
  border-color: var(--color-accent);
}

/* ---- WhatsApp float ---- */

.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: var(--radius-full);
  background: #25d366;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-base) var(--ease-luxury);
}

.whatsapp-float svg { width: 22px; height: 22px; }

.whatsapp-float:hover { transform: scale(1.08); }

/* ---- Footer ---- */

.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(900px 420px at 92% 0%, rgba(201, 154, 99, 0.16), transparent 60%),
    linear-gradient(180deg, var(--paper-100) 0%, #efe7d8 100%);
  color: var(--color-text-muted);
  padding-block: var(--space-8) var(--space-6);
}

/* Brand-colour hairline along the top edge. */
.site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--grad-brand);
  z-index: 2;
}

.footer-glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.footer-glow__blob { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(100px); }
.footer-glow__blob--a { top: -160px; left: 6%; background: hsl(32 60% 62% / 0.2); }
.footer-glow__blob--b { bottom: -180px; right: 8%; background: hsl(215 60% 45% / 0.1); }

.footer-inner { position: relative; }

/* Newsletter band */
.footer-news {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #14305c 0%, #0f2244 70%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 900px) {
  .footer-news { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); padding: var(--space-7) var(--space-8); }
}

.footer-news__title {
  font-size: clamp(1.9rem, 2.2vw + 1rem, 2.75rem);
  color: #ffffff;
  margin-bottom: var(--space-2);
}

.footer-news__copy p { max-width: 42ch; }

.footer-newsletter { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }

.footer-newsletter__row { display: flex; gap: var(--space-2); }

.footer-newsletter__row input {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1.2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border-dark);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
}

.footer-newsletter__row input::placeholder { color: var(--color-text-subtle); }
.footer-newsletter__row input:focus-visible { outline-offset: 1px; }
.footer-newsletter__row .btn { flex: 0 0 auto; }

.footer-newsletter .form-check { align-items: flex-start; }
.footer-newsletter .form-check input { flex: 0 0 16px; margin-top: 3px; }
.footer-newsletter .form-status { margin-top: 0; }

/* Link grid */
.footer-grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
  grid-template-columns: 1fr 1fr;
}

.footer-col--brand, .footer-col:last-child { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--space-7); }
  .footer-col--brand, .footer-col:last-child { grid-column: auto; }
}

.footer-logo { position: relative; display: inline-block; margin-bottom: var(--space-4); }
.footer-logo img { height: 58px; width: auto; }
.footer-col--brand p { max-width: 34ch; font-size: var(--fs-sm); }

.footer-col .footer-title {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-sm); }
.footer-col ul a { transition: color var(--duration-fast) var(--ease-luxury), transform var(--duration-fast) var(--ease-luxury); display: inline-block; }
.footer-col ul a:hover { color: var(--color-accent); transform: translateX(3px); }

.footer-contact li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.45; }
.footer-contact svg { flex: 0 0 18px; margin-top: 2px; color: var(--gold-600); }

.social-row { display: flex; gap: var(--space-3); margin-top: var(--space-5); }

.social-row a {
  width: 42px; height: 42px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast) var(--ease-luxury), transform var(--duration-fast) var(--ease-luxury), border-color var(--duration-fast) var(--ease-luxury);
}

.social-row a:hover { background: var(--navy-950); border-color: var(--navy-950); color: #ffffff; transform: translateY(-3px); }

/* Bottom bar */
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

@media (min-width: 760px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

.footer-legal { display: flex; gap: var(--space-5); }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--color-accent); }

/* ---- Filter bar (Properties page) ---- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-7);
}

.filter-bar select {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.results-count { font-size: var(--fs-sm); color: var(--color-text-muted); margin-left: auto; }

/* ==========================================================================
   SWK Properties — Section Layouts (arc gallery, page-specific blocks)
   Hero layout lives in cinematic.css (WebGL stage); the typewriter,
   colourful-text and cascade-text effects stay here unchanged.
   ========================================================================== */

/* ---- Typewriter reveal (hero headline) ---- */

.tw-word {
  display: inline-block;
}

.tw-char {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.05s linear;
}

.is-typing .tw-char {
  opacity: 1;
}

/* ---- Cascade text (hover letter-reveal) ---- */

.cascade-text {
  display: inline-block;
  color: var(--cascade-color, inherit);
  cursor: pointer;
  transition: color 0.35s ease;
}

.cascade-text__word {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  vertical-align: top;
}

.cascade-text__char {
  display: inline-block;
  position: relative;
  will-change: transform;
  text-shadow: 0 var(--cascade-shadow-y, 1em) currentColor;
  transition: transform var(--cascade-duration, 250ms) ease-in-out;
}

.cascade-text:hover {
  color: var(--cascade-hover-color, var(--color-accent));
}

.cascade-text:hover .cascade-text__char {
  transform: translateY(calc(-1 * var(--cascade-shadow-y, 1em)));
}

@media (prefers-reduced-motion: reduce) {
  .cascade-text,
  .cascade-text__char {
    transition: none;
  }
}

/* ---- Featured listings / general grid sections ---- */

.listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) { .listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .listings-grid { grid-template-columns: repeat(3, 1fr); } }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

/* ---- Dark section wrapper (developer showcase, benefits, calculator band) ---- */

.section--dark {
  background: linear-gradient(135deg, #14305c 0%, #0f2244 100%);
  color: var(--color-text);
}

.section--dark p { color: var(--color-text-muted); }
.section--dark h2, .section--dark h3 { color: var(--color-text); }

/* A gradient, not a flat fill: blends in from the surrounding (transparent,
   body-navy) sections at the top and bottom edges instead of snapping to a
   visibly different shade right at the section boundary. */
.section--alt {
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0,
    var(--color-surface-alt) 80px,
    var(--color-surface-alt) calc(100% - 80px),
    var(--color-bg) 100%
  );
}

/* ---- Lightbox ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(22, 27, 34, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  /* Hide only after the fade-out ends; on open, visibility flips immediately
     so the dialog is focusable in the same frame. */
  transition: opacity var(--duration-base) var(--ease-luxury), visibility 0s linear var(--duration-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-luxury), visibility 0s;
}

.lightbox__frame {
  position: relative;
  max-width: 900px;
  width: 100%;
  /* Let vertical page-scroll gestures pass through untouched; a horizontal
     drag is claimed by the swipe handler instead of the browser's default. */
  touch-action: pan-y;
}

.lightbox__frame img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast) var(--ease-luxury);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255, 255, 255, 0.25); }

.lightbox__close { top: -60px; right: 0; }
.lightbox__prev { left: -60px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: -60px; top: 50%; transform: translateY(-50%); }

.lightbox__counter {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--space-3);
}

@media (max-width: 720px) {
  .lightbox__prev { left: var(--space-2); }
  .lightbox__next { right: var(--space-2); }
  .lightbox__close { top: -48px; right: 0; }
}

/* ---- Featured listings slider ---- */

.feature-slider__viewport {
  overflow: hidden;
  /* room for the card glow and the 3D tilt so neither is clipped */
  padding: var(--space-4) var(--space-3);
  margin: calc(var(--space-4) * -1) calc(var(--space-3) * -1);
}

.feature-slider__track {
  --slides-per-view: 1;
  display: flex;
  gap: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-luxury);
  will-change: transform;
  touch-action: pan-y;
}

@media (min-width: 700px) { .feature-slider__track { --slides-per-view: 2; } }
@media (min-width: 1100px) { .feature-slider__track { --slides-per-view: 4; } }

.feature-slider__track > .property-card--feature {
  flex: 0 0 calc((100% - (var(--slides-per-view) - 1) * var(--space-6)) / var(--slides-per-view));
}

.feature-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.feature-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-luxury), border-color var(--duration-fast) var(--ease-luxury), opacity var(--duration-fast) var(--ease-luxury);
}

.feature-slider__arrow:hover:not(:disabled) { color: var(--color-accent); border-color: var(--color-accent); }
.feature-slider__arrow svg { width: 18px; height: 18px; }
.feature-slider__arrow:disabled { opacity: 0.35; cursor: default; }

.feature-slider__dots {
  display: flex;
  gap: 6px;
}

/* The dot itself stays visually small; the button's hit area is enlarged
   via a centered pseudo-element so it's still comfortably tappable on
   touch devices. */
.feature-slider__dot {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-slider__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background var(--duration-base) var(--ease-luxury), transform var(--duration-base) var(--ease-luxury);
}

.feature-slider__dot.is-active::after {
  background: var(--color-accent);
  transform: scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
  .feature-slider__track { transition: none; }
}

/* ---- Featured section custom display font ---- */

.featured-section .section-header h2,
.featured-section .property-card__feature-title {
  font-family: var(--font-feature);
}

/* ---- Display-serif headings (selected homepage section titles) ----
   !important is deliberate: this is a utility class meant to force the
   font on a heading regardless of which section-scoped font rule (e.g.
   .featured-section serif override) would otherwise win by
   specificity. */

.font-clash {
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---- Investment benefits band ---- */

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 700px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Community grid ---- */

.communities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (min-width: 768px) { .communities-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Testimonials / blog rows ---- */

.testimonials-grid, .blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) { .testimonials-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .testimonials-grid, .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Page hero (interior pages, non full-screen) ---- */

.page-hero {
  background: linear-gradient(180deg, #efe5d3 0%, var(--paper-50) 100%);
  color: var(--color-text);
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: calc(var(--space-8) + 110px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Colour washes plus a layered Dubai skyline that drifts with scroll. */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 92% 6%, rgba(201, 154, 99, 0.42), transparent 46%),
    radial-gradient(circle at 4% 0%, rgba(27, 58, 107, 0.1), transparent 48%);
  pointer-events: none;
}

.page-hero::before {
  content: '';
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  height: 130px;
  z-index: -1;
  background:
    url('/assets/images/brand/skyline-front.svg') repeat-x center bottom / auto 100%,
    url('/assets/images/brand/skyline-back.svg') repeat-x 30% bottom / auto 150%;
  transform: translate3d(0, calc(var(--hp, 0) * 18px), 0);
  pointer-events: none;
}

@media (max-width: 767px) {
  .page-hero { padding-bottom: calc(var(--space-7) + 90px); }
  .page-hero::before { height: 100px; }
}

.page-hero__title { position: relative; }
.page-hero p { position: relative; max-width: 60ch; }

/* ---- Two-column content block (About page etc.) ---- */

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

@media (min-width: 900px) { .split-block { grid-template-columns: 1fr 1fr; } }

.split-block img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ---- Values / process step list ---- */

.step-list {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .step-list { grid-template-columns: repeat(2, 1fr); } }

.step-item {
  display: flex;
  gap: var(--space-4);
}

.step-item .num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent-hover);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
}

/* ==========================================================================
   SWK Properties — Keyframe Animations
   ========================================================================== */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes soft-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s var(--ease-luxury) both;
}

.animate-fade-in {
  animation: fade-in 0.8s var(--ease-luxury) both;
}

.float { animation: soft-float 5s ease-in-out infinite; }

.whatsapp-float { animation: pulse-ring 2.4s ease-out infinite; }

/* ---- Ambient background glow (every section except the hero) ---- */

/* Straight diagonal legs with a direction change at each stop (rather than
   one smooth back-and-forth sway) so it reads as a slowly bouncing ball
   rather than gentle drifting — linear timing keeps each leg at a constant
   speed, like a ball coasting between bounces. */
@keyframes ambient-glow-bounce {
  0%   { transform: translate(0%, 0%); }
  14%  { transform: translate(45%, 32%); }
  28%  { transform: translate(72%, -12%); }
  42%  { transform: translate(22%, -52%); }
  56%  { transform: translate(-36%, -28%); }
  70%  { transform: translate(-58%, 18%); }
  84%  { transform: translate(-12%, 48%); }
  100% { transform: translate(0%, 0%); }
}

/* isolation:isolate gives the glow's negative z-index its own local
   stacking context, so it tucks in behind this section's own content
   without needing to touch (or risk breaking) that content's own
   positioning/z-index — see js/ambient-glow.js for why. */
.ambient-glow-host {
  position: relative;
  isolation: isolate;
}

/* mask-image fades this layer to nothing well before its own overflow:hidden
   edge is reached — without it, a blob sitting near that edge gets hard-
   clipped rather than fading out, showing up as a visible seam line right
   at the boundary with the next section. */
.ambient-glow {
  position: absolute;
  inset: -15%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.ambient-glow__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: ambient-glow-bounce 38s linear infinite;
}

/* Same size/opacity/blur as the footer's own (already-tuned) glow — two
   corner blobs read as a soft accent rather than washing the whole section
   the way three larger, more opaque, overlapping blobs did. */
.ambient-glow__blob--a {
  top: -10%;
  left: 4%;
  width: 320px;
  height: 320px;
  background: hsl(32 62% 62% / 0.24);
}

.ambient-glow__blob--b {
  bottom: -12%;
  right: 6%;
  width: 300px;
  height: 300px;
  background: hsl(215 60% 48% / 0.1);
  animation-delay: -19s;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-glow__blob { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up, .animate-fade-in, .float, .whatsapp-float {
    animation: none !important;
  }
}

/* ---- Logo marquee (developer showcase) ---- */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-8);
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   SWK Properties — Page-specific responsive layouts & utilities
   ========================================================================== */

/* .hide-mobile used `display: initial` at desktop widths, which knocked the
   hero "Status" field out of its flex-column layout (label sat beside the
   select). Scope the override to the field and restore its real display. */
.hide-mobile { display: none; }
@media (min-width: 1024px) { .hide-mobile { display: initial; } }
.search-field.hide-mobile { display: none; }
@media (min-width: 1024px) { .search-field.hide-mobile { display: flex; } }

.hide-desktop { display: initial; }
@media (min-width: 1024px) { .hide-desktop { display: none; } }

/* ---- Properties listing page ---- */

.properties-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

/* ---- Property details page ---- */

/* Bento-style grid: an asymmetric size rhythm (repeating every 6 tiles via
   grid-auto-flow:dense, so it still packs cleanly whether a listing has 2
   photos or 16) rather than a uniform grid of same-size thumbnails. Each
   tile reveals a caption on hover and opens the shared lightbox on click. */
.pd-bento-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
  gap: var(--space-3);
}

.pd-bento-gallery__item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.pd-bento-gallery__item:nth-child(6n+4) { grid-row: span 2; }
.pd-bento-gallery__item:nth-child(6n+6) { grid-column: span 2; }

@media (max-width: 767px) {
  .pd-bento-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .pd-bento-gallery__item:nth-child(6n+4) { grid-row: span 1; }
  .pd-bento-gallery__item:nth-child(6n+6) { grid-column: span 1; }
}

.pd-bento-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.pd-bento-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-luxury);
}

.pd-bento-gallery__item:hover img,
.pd-bento-gallery__item:focus-visible img {
  transform: scale(1.06);
}

.pd-bento-gallery__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(22, 27, 34, 0.85) 0%, rgba(22, 27, 34, 0.15) 55%, transparent 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-luxury);
}

.pd-bento-gallery__item:hover .pd-bento-gallery__overlay,
.pd-bento-gallery__item:focus-visible .pd-bento-gallery__overlay {
  opacity: 1;
}

.pd-bento-gallery__caption {
  color: var(--white);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.pd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .pd-layout { grid-template-columns: 1.7fr 1fr; }
}

.pd-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  margin-block: var(--space-6);
}

@media (min-width: 560px) { .pd-facts { grid-template-columns: repeat(4, 1fr); } }

.pd-facts .fact .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
.pd-facts .fact .value { font-family: var(--font-display); font-size: var(--fs-lg); margin-top: 4px; }

.pd-sidebar {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--space-5));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pd-agent-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.pd-agent-card img { width: 84px; height: 84px; border-radius: var(--radius-full); margin-inline: auto; object-fit: cover; }

.amenity-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 560px) { .amenity-list { grid-template-columns: repeat(3, 1fr); } }

.amenity-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

/* ---- Contact page ---- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 960px) {
  .contact-layout { grid-template-columns: 1fr 1fr; }
}

.contact-info-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.map-embed {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---- Services page ---- */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Mobile: swipeable 2-row card grid ----
   Below the breakpoint where these sections normally go 2-up, arrange
   cards (How We Help and the About page's consultant cards) into an
   explicit 2-row grid and let the container scroll horizontally instead
   of stacking everything into one long column — two full rows (4 cards)
   stay visible at once, and a finger swipe reveals any more. */
@media (max-width: 699px) {
  .services-grid,
  .testimonials-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc((100% - var(--space-5)) / 2);
    gap: var(--space-5);
    overflow-x: auto;
    /* Setting only overflow-x leaves overflow-y computed as "auto" too
       (per spec, since it isn't "visible" on both axes), which was enough
       of a rounding-error's worth of vertical overflow to add its own
       scrollbar inside the section — pin it down explicitly. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .services-grid::-webkit-scrollbar,
  .testimonials-grid::-webkit-scrollbar {
    display: none;
  }

  .services-grid > *,
  .testimonials-grid > * {
    scroll-snap-align: start;
  }

  /* The blog teaser only ever has 3 cards, so a 2-row grid would split
     unevenly (2 stacked in one column, a lone 3rd in the next) — a single
     scrollable row showing 2 cards with the 3rd a swipe away reads much
     more clearly. */
  .blog-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-5)) / 2);
    gap: var(--space-5);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .blog-grid::-webkit-scrollbar {
    display: none;
  }

  .blog-grid > * {
    scroll-snap-align: start;
  }

  .blog-card .badge {
    padding: 3px 8px;
    font-size: 0.625rem;
  }

  .blog-card__body h3 {
    font-size: var(--fs-sm);
  }

  /* Cards show just the image, category and heading — the excerpt only
     appears once the reader actually opens the full article. */
  .blog-card__body p {
    display: none;
  }
}

/* ---- Mobile: smaller "How We Help" cards ---- */
@media (max-width: 699px) {
  .service-card--themed {
    padding: var(--space-4);
    min-height: 0;
  }

  .service-card--themed .service-card__body {
    gap: var(--space-4);
  }

  .service-card--themed .service-card__body h3 {
    font-size: var(--fs-md);
  }

  .service-card--themed .service-card__decor {
    width: 90px;
    height: 90px;
    right: -12px;
    bottom: -12px;
  }
}

/* ---- Mobile: smaller hero CTA + search box ---- */
@media (max-width: 640px) {
  .hero__ctas .btn-slide-arrow {
    padding: 6px;
    font-size: var(--fs-sm);
  }

  .hero__ctas .btn-slide-arrow__fill {
    width: 34px;
  }

  .hero__ctas .btn-slide-arrow__icon svg {
    width: 16px;
    height: 16px;
  }

  .hero__ctas .btn-slide-arrow__text {
    padding-inline: var(--space-4);
  }

  .hero__search-wrap .search-bar {
    padding: var(--space-4);
    gap: var(--space-2);
  }

  .hero__search-wrap .search-field select,
  .hero__search-wrap .search-field input {
    padding: var(--space-2) var(--space-3);
  }

  .hero__search-wrap .search-field label {
    font-size: 0.6875rem;
  }
}

/* ---- Mobile: smaller, rounder "Featured listings" card ---- */
@media (max-width: 699px) {
  .property-card--feature {
    aspect-ratio: 1 / 1;
  }

  .property-card__feature-link {
    border-radius: var(--radius-lg);
  }

  .property-card__feature-content {
    padding: var(--space-3);
  }

  .property-card__feature-title,
  .property-card__feature-price {
    font-size: var(--fs-sm);
  }
}

/* ---- Mobile: tighter, smaller-type mortgage calculator ---- */
@media (max-width: 699px) {
  .calc-card {
    padding: var(--space-4);
  }

  .calc-card__title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-4);
  }

  .calc-field {
    margin-bottom: var(--space-3);
  }

  .calc-field label,
  .calc-field__label {
    font-size: 0.6875rem;
  }

  .calc-input {
    padding: var(--space-2);
    font-size: var(--fs-sm);
  }

  .calc-field-row {
    gap: var(--space-2);
  }

  .calc-toggle__btn {
    padding: 0 var(--space-2);
    font-size: 0.6875rem;
  }

  .calc-pill {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
  }

  .btn-calc {
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-xs);
  }

  .calc-donut-row {
    gap: var(--space-4);
  }

  .calc-donut {
    width: 120px;
    height: 120px;
  }

  .calc-donut__amount {
    max-width: 62px;
    font-size: 0.75rem;
  }

  .calc-legend {
    min-width: 0;
    gap: var(--space-2);
  }

  .calc-legend li {
    font-size: var(--fs-xs);
  }

  .mortgage-layout {
    gap: var(--space-5);
  }
}

/* ---- Blog post ---- */

.prose {
  max-width: 72ch;
  margin-inline: auto;
}

.prose h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.prose p { margin-bottom: var(--space-5); }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-6); }

/* ---- Mortgage page ---- */

.mortgage-layout {
  display: grid;
  gap: var(--space-8);
}

/* ---- Print ---- */

@media print {
  .site-brand, .whatsapp-float, .hero__scroll-cue, .hero__video, .scroll-progress { display: none !important; }
}

/* ==========================================================================
   SWK Properties — Cinematic layer
   WebGL hero stage, scroll-scrubbed fly-through, film overlays, 3D tilt,
   perspective reveals. Everything here is additive:
   with JS disabled or prefers-reduced-motion, the original static look stays.
   ========================================================================== */

/* ---- Scroll progress ---- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 97;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-p, 0));
  background: var(--grad-brand);
  pointer-events: none;
}

/* ---- Hero stage ---- */

.hero-cine { position: relative; }

.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #f1ddc0 0%, #f7ecdc 100%);
  color: var(--color-text);
  touch-action: pan-y;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0f1a2e;
}

/* One looping, muted clip that fills the hero edge to edge. */
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__content {
  position: relative;
  z-index: 4;
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8);
}

/* Clears the mobile brand mark plus a bit of breathing room. */
@media (max-width: 767px) {
  .hero__content { padding-top: 120px; padding-block-end: var(--space-9); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.hero__eyebrow::before {
  content: '';
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
}

.hero__title {
  max-width: 15ch;
  color: var(--navy-950);
  font-size: clamp(3rem, 5.2vw + 0.6rem, 5.9rem);
  line-height: 1;
  letter-spacing: -0.012em;
  word-spacing: 0.06em;
  text-shadow: 0 2px 28px rgba(255, 250, 240, 0.85);
}

.hero__title em { font-style: italic; color: var(--gold-700); }

.hero__subtitle {
  max-width: 46ch;
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero__search-wrap { margin-top: var(--space-7); perspective: 1200px; }

.hero__search-wrap .search-bar {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-luxury);
  transform-style: preserve-3d;
}

.hero__search-wrap .search-bar.is-tilting { transition: transform 0.08s linear; }

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  pointer-events: none;
}

.hero__scroll-cue .line {
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  transform-origin: 50% 0;
  animation: cue-line 2.2s var(--ease-luxury) infinite;
}

@keyframes cue-line {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Mobile: the search form must fit inside the one-screen hero. */
@media (max-width: 767px) {
  .hero__title { font-size: 3.1rem; }
  .hero__eyebrow { font-size: var(--fs-xs); }
  .hero__ctas { margin-top: var(--space-5); }
  .hero__search-wrap { margin-top: var(--space-6); }
  .search-bar { grid-template-columns: 1fr 1fr; }
  .search-bar .btn { grid-column: 1 / -1; }
  .search-field.hide-mobile { display: flex; }
  .hero__scroll-cue { display: none; }
}

@media (max-width: 767px) and (max-height: 700px) {
  .hero__title { font-size: 2.5rem; }
  .hero__content { padding-top: 96px; padding-block-end: var(--space-8); }
}

/* ---- Reduced motion: hold the poster frame, no cue animation ---- */

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue .line { animation: none; }
}

/* ---- 3D tilt ---- */

[data-tilt] { transform-style: flat; }

.property-card--feature .property-card__feature-link,
.property-card--feature:hover .property-card__feature-link {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ts, 1));
  transition: transform 0.55s var(--ease-luxury), box-shadow var(--duration-slow) var(--ease-luxury);
}
.property-card--feature:hover .property-card__feature-link { --ts: 1.03; }
.property-card--feature.is-tilting .property-card__feature-link { transition: transform 0.09s linear, box-shadow var(--duration-slow) var(--ease-luxury); }

.property-card--feature .property-card__feature-bg {
  transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -16px), 0) scale(1.14);
  transition: transform 0.6s var(--ease-luxury);
}
.property-card--feature:hover .property-card__feature-bg {
  transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -16px), 0) scale(1.2);
}

.property-card__feature-link::after,
.service-card--themed::after,
.property-card:not(.property-card--feature) > a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--go, 0);
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.18), transparent 46%);
  transition: opacity 0.35s ease;
}
.property-card:not(.property-card--feature) > a { display: block; position: relative; border-radius: inherit; }

.property-card:not(.property-card--feature) {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform 0.55s var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury);
}
.property-card:not(.property-card--feature):hover { --ty: -6px; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.property-card:not(.property-card--feature).is-tilting { transition: transform 0.09s linear, box-shadow var(--duration-base) var(--ease-luxury); }

.service-card--themed {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ts, 1));
  transition: transform 0.55s var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury), border-color var(--duration-base) var(--ease-luxury);
}
.service-card--themed:hover { --ts: 1.02; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02); }
.service-card--themed.is-tilting { transition: transform 0.09s linear, box-shadow var(--duration-base) var(--ease-luxury); }

/* ---- Perspective reveals ---- */

.js [data-reveal] {
  transform: translate3d(0, 28px, 0) perspective(900px) rotateX(6deg);
  transform-origin: 50% 100%;
}
.js [data-reveal].is-visible { transform: translate3d(0, 0, 0) perspective(900px) rotateX(0deg); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; }
  .property-card--feature .property-card__feature-link,
  .property-card:not(.property-card--feature),
  .service-card--themed { transform: none; }
  .scroll-progress { display: none; }
}

/* ---- Cards: shared extras ---- */

.property-card__feature-link { display: block; }
.property-card__feature-title { font-size: var(--fs-md); }

.property-card--feature .badge-gold { background: var(--ember-100); color: var(--ember-600); }

.listing-note {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  max-width: 70ch;
}

.community-card__count { font-size: var(--fs-xs); color: var(--slate-300); }

/* ---- Pagination (listings) ---- */

.pagination button:focus-visible { outline-offset: 2px; }
.empty-state {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.empty-state[hidden] { display: none; }
.empty-state a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.property-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .property-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .property-grid { grid-template-columns: repeat(3, 1fr); } }
.property-grid .property-card[hidden] { display: none; }

.filter-bar label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-1); }
.filter-bar .btn { align-self: flex-end; }

/* ---- Property detail extras ---- */

.pd-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.pd-price { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--color-text); }
.pd-price small { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 500; }
.pd-cta { display: grid; gap: var(--space-3); }
.pd-agent-card .avatar-placeholder { width: 84px; height: 84px; border-radius: 999px; margin-inline: auto; }
.pd-agent-card h4 { margin-top: var(--space-3); }
.pd-agent-card p { font-size: var(--fs-xs); }
.pd-note { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-top: var(--space-5); }
.pd-section-title { margin: var(--space-7) 0 var(--space-4); font-size: var(--fs-xl); }
.amenity-list li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ---- Forms / contact ---- */

.form-status { margin-top: var(--space-4); }
.form-status[hidden] { display: none; }
.form-status.is-error { color: var(--danger); background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); border: 1px solid; font-size: var(--fs-sm); font-weight: 600; }
.form-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-xs); color: var(--color-text-muted); }
.form-check input { margin-top: 3px; accent-color: var(--ember-500); width: 16px; height: 16px; flex-shrink: 0; }
.form-check a { text-decoration: underline; text-underline-offset: 2px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.form-field .form-error { margin-top: 2px; }
.contact-cards { display: grid; gap: var(--space-4); }
.contact-info-card h4 { margin-bottom: 2px; }
.contact-info-card a:hover { color: var(--color-accent); }
.contact-info-card svg { flex-shrink: 0; color: var(--color-accent); margin-top: 3px; }

/* ---- Legal / prose pages ---- */

.legal h2 { margin-top: var(--space-7); font-size: var(--fs-xl); }
.legal p { margin-top: var(--space-3); }
.legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Misc ---- */

.stat-strip .stat-num { font-variant-numeric: tabular-nums; }
.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.post-meta { color: var(--color-text-muted); font-size: var(--fs-xs); margin-bottom: var(--space-5); }
.noscript-note { padding: var(--space-4); text-align: center; background: var(--color-surface-alt); font-size: var(--fs-sm); }

/* ---- Hero fallbacks / headline effects ---- */

/* Hide the headline's plain text only while JS is about to split it. */
.js [data-typewriter]:not([data-tw-init]) { visibility: hidden; }

/* ---- Calculator extras ---- */

.calc-hint { display: block; min-height: 2.75em; line-height: 1.35; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--slate-500); }
.calc-hint.is-warning { color: var(--color-accent); }
.calc-card .calc-input[readonly] { opacity: 0.85; }
.calc-toggle__btn[aria-pressed='true'], .calc-pill[aria-pressed='true'] { color: var(--white); }
.calc-sublabel { display: block; margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--slate-300); }
.calc-disclosure__panel[hidden] { display: none; }
.calc-card__actions { margin-top: var(--space-5); }

/* ---- Marquee: second copy is decorative ---- */
.marquee__item img { width: auto; height: auto; }

/* ---- Overflow + heading-level adjustments (markup uses h3/h2 for correct outline order) ---- */

/* The decorative glow layers extend 15% past their section; clip them there
   (clip, unlike hidden, keeps position:sticky working) so the page never
   gets a horizontal scroll area, including on iOS where body overflow-x is ignored. */
.ambient-glow-host { overflow-x: clip; }

.community-card__overlay h3 { font-size: var(--fs-md); font-weight: 600; color: var(--cream-50); }
.developer-card h3 { font-size: var(--fs-md); }
.contact-info-card h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.pd-agent-name { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; color: var(--color-text); margin-top: var(--space-3); }
.pd-price { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--color-text); line-height: 1.15; }
.pd-price small { display: block; font-family: var(--font-body); font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 500; }

.ambient-glow.is-off { visibility: hidden; }
.ambient-glow.is-off .ambient-glow__blob { animation-play-state: paused; }

/* ---- Layout polish ---- */

/* Selects have an intrinsic width from their longest option; without min-width:0
   the 1fr grid columns refuse to shrink and the form overflows on phones. */
.search-field { min-width: 0; }
.search-field select, .search-field input { width: 100%; min-width: 0; text-overflow: ellipsis; }

/* Section headings: the animated heading is a block so the eyebrow never sits
   beside a short title, and the letter clip is tall enough for descenders (g, y, j). */
.section-header .cascade-text, .section-head-row .cascade-text { display: block; width: fit-content; }
.section-header.center .cascade-text { margin-inline: auto; }
.cascade-text__word { height: 1.28em; line-height: 1.28; }


/* ==========================================================================
   SWK Properties — Polish layer (loaded last)
   Ambient colour, loading states, page transitions and scroll-driven 3D depth.
   Everything degrades gracefully: with JS off, or prefers-reduced-motion, the
   page is the plain, fully visible layout.
   ========================================================================== */

/* ---- Smooth page-to-page transitions (cross-document View Transitions) ---- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.22s ease both; }
::view-transition-new(root) { animation: vt-in 0.45s var(--ease-luxury) both; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- Canvas: midnight blue lit with colour, never flat black ---- */

body { background: var(--grad-page), var(--color-bg); background-repeat: no-repeat; }

@media (hover: hover) and (min-width: 900px) {
  body { background-attachment: fixed, scroll; }
}

::selection { background: var(--gold-400); color: var(--navy-950); }


.eyebrow { color: var(--color-accent); }
.eyebrow::before { height: 2px; width: 30px; border-radius: 2px; background: var(--grad-gold); }

.section--alt {
  background: linear-gradient(to bottom, var(--color-bg) 0, var(--paper-100) 90px, var(--paper-100) calc(100% - 90px), var(--color-bg) 100%);
}

/* ---- Type details ---- */

.section-header h2, .section-head-row h2 { font-size: clamp(2.4rem, 3.2vw + 1rem, 4rem); }
.page-hero__title { font-size: clamp(2.8rem, 4.6vw + 1rem, 5.2rem); letter-spacing: -0.025em; line-height: 1.02; }
.property-card__price, .pd-price, .stat-strip .stat-num, .benefit-card .stat { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.property-card__price { font-size: var(--fs-2xl); line-height: 1.1; }
.property-card__feature-price { font-size: var(--fs-xl); font-weight: 400; line-height: 1.1; }
.property-card__title, .property-card__body h3 { font-weight: 600; }
.stat-strip .stat-num { font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1; }
.tc-quote { font-family: var(--font-display); font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); line-height: 1.4; }
.hero__subtitle { font-size: var(--fs-md); }

/* ---- Loading: skeleton shimmer behind images, then a soft fade-in ---- */

.property-card__media,
.community-card,
.blog-card__media,
.pd-bento-gallery__item,
.fan-card,
.tc-photo,
.split-block > img,
.marquee__item {
  background-color: rgba(15, 34, 68, 0.06);
  background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: skeleton 1.5s ease-in-out infinite;
}

@keyframes skeleton {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

.property-card__media:has(img.is-loaded),
.community-card:has(img.is-loaded),
.blog-card__media:has(img.is-loaded),
.pd-bento-gallery__item:has(img.is-loaded),
.fan-card:has(img.is-loaded),
.tc-photo:has(img.is-loaded),
.marquee__item:has(img.is-loaded) { animation: none; background-image: none; }

.js img[loading='lazy'] { transform: scale(1.02); transition: opacity 0.6s var(--ease-luxury), transform 0.9s var(--ease-luxury); }
.js img[loading='lazy'].is-loaded, .js img[loading='lazy'].is-broken { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .property-card__media, .community-card, .blog-card__media, .pd-bento-gallery__item, .fan-card, .tc-photo, .split-block > img, .marquee__item { animation: none; background-image: none; }
}

/* ---- Scroll-scrubbed 3D depth (set up by js/35-scroll3d.js) ---- */

.js .scrub {
  --dp: 0;
  transform: perspective(1100px) translate3d(0, calc((1 - var(--dp)) * 54px), calc((1 - var(--dp)) * -80px)) rotateX(calc((1 - var(--dp)) * 11deg));
  transform-origin: 50% 100%;
  opacity: calc(0.12 + var(--dp) * 0.88);
  will-change: transform, opacity;
}

.js .scrub.scrub-done { transform: none; opacity: 1; will-change: auto; }

/* The existing reveal gets deeper perspective and a gentle depth push. */
.js [data-reveal] {
  transform: translate3d(0, 34px, 0) perspective(900px) rotateX(11deg) translateZ(-40px);
  transition-duration: 0.9s;
}
.js [data-reveal].is-visible { transform: translate3d(0, 0, 0) perspective(900px) rotateX(0deg) translateZ(0); }

@media (prefers-reduced-motion: reduce) {
  .js .scrub { transform: none; opacity: 1; }
  .js [data-reveal] { transform: none; }
}

/* ---- Cards: lighter, colourful depth ---- */

.property-card { border: 1px solid var(--color-border); background: var(--color-surface); }
.property-card:hover { box-shadow: 0 26px 56px rgba(15, 34, 68, 0.18); }
.blog-card, .developer-card, .service-card, .benefit-card { border: 1px solid var(--color-border); }
.blog-card { background: var(--color-surface); }
.marquee__item { border-color: var(--color-border); }

/* ---- Interior page headers ---- */

.page-hero .breadcrumbs a { color: var(--color-accent); }
.page-hero .breadcrumbs a:hover { color: var(--navy-950); }
.page-hero p { color: var(--color-text-muted); }

/* Location pin etc. sit inline with the text, not above it. */
.page-hero p svg { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin-right: 4px; color: var(--gold-600); }

/* Decorative service icons stay behind the copy. */
.service-card__decor { opacity: 0.22; }
.service-card--themed:hover .service-card__decor { opacity: 0.5; }

/* ---- Focus ---- */

:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 3px; }
.footer-news :focus-visible, .section--dark :focus-visible { outline-color: var(--gold-400); }

/* Section heading rows stack on phones so the title keeps its full width. */
@media (max-width: 767px) {
  .section-head-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ==========================================================================
   Header, hero search, and home sections
   ========================================================================== */

/* ---- Top navigation bar ---- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 96;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Pure white so the gold logo and navigation read clearly over any hero frame. */
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 34, 68, 0.06), 0 10px 30px rgba(15, 34, 68, 0.06);
  transition: background var(--duration-base) var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury), height var(--duration-base) var(--ease-luxury);
}

.site-header.is-scrolled {
  background: #ffffff;
  box-shadow: 0 1px 0 var(--color-border), 0 8px 24px rgba(15, 34, 68, 0.08);
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }

.site-nav { display: none; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.4rem); }
@media (min-width: 1024px) { .site-nav { display: flex; } }

.site-nav a {
  position: relative;
  padding: 0.5rem 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duration-base) var(--ease-luxury);
}

.site-nav a:hover::after,
.site-nav a[aria-current='page']::after { transform: scaleX(1); }

.site-header__cta { flex-shrink: 0; }
@media (max-width: 639px) { .site-header__cta { display: none; } }

/* ---- Buttons ---- */

.btn-gold { background: var(--grad-gold); color: var(--navy-950); box-shadow: 0 8px 22px rgba(176, 122, 56, 0.35); }
.btn-gold:hover { box-shadow: 0 12px 30px rgba(176, 122, 56, 0.5); }

/* ---- Hero search: one white pill ---- */

.hero__search-wrap { max-width: 1060px; }

.hero__search-wrap .search-bar {
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: var(--radius-full);
  padding: 10px 10px 10px 14px;
  gap: 0;
  align-items: center;
  grid-template-columns: repeat(4, 1fr) auto;
  box-shadow: 0 22px 54px rgba(15, 34, 68, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero__search-wrap .search-field { padding: 4px 22px; border-right: 1px solid var(--color-border); gap: 2px; }
.hero__search-wrap .search-field:nth-child(4) { border-right: 0; }

.hero__search-wrap .search-field label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-text-subtle);
}

.hero__search-wrap .search-field select {
  padding: 2px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.hero__search-wrap .search-bar .btn { border-radius: var(--radius-full); padding: 1rem 2.1rem; }

@media (max-width: 899px) {
  .hero__search-wrap .search-bar { border-radius: 26px; padding: 16px; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .hero__search-wrap .search-field { border-right: 0; padding: 4px 6px; }
  .hero__search-wrap .search-field select { border-bottom: 1px solid var(--color-border); border-radius: 0; }
}

/* ---- Values strip (under the hero) ---- */

.value-strip { background: var(--paper-100); border-block: 1px solid var(--color-border); padding-block: var(--space-7); position: relative; z-index: 5; }

.value-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); }
@media (min-width: 900px) { .value-strip__grid { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.value-item { text-align: center; padding-inline: var(--space-4); }
@media (min-width: 900px) { .value-item + .value-item { border-left: 1px solid var(--color-border); } }

.value-item__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: #f1e3cb;
  color: var(--navy-950);
}

.value-item__icon svg { width: 28px; height: 28px; }
.value-item h3 { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--space-1); }
.value-item p { font-size: var(--fs-sm); max-width: 24ch; margin-inline: auto; }

/* ---- Story + stats ---- */

.story__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .story__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-9); } }

.story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.story__copy h2 { margin-bottom: var(--space-4); }
.story__copy > p { max-width: 52ch; }

.story__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin: var(--space-6) 0;
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-border);
}
@media (min-width: 560px) { .story__stats { grid-template-columns: repeat(4, 1fr); } }

.story__num { font-family: var(--font-display); font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
.story__label { margin-top: var(--space-1); font-size: var(--fs-xs); font-weight: 500; color: var(--color-text-muted); }

/* ---- CTA band ---- */

.cta-section { padding-block: var(--space-8); }

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #0f2244 0%, #14305c 58%, #1b3a6b 100%);
  padding: clamp(2rem, 5vw, 4.5rem);
  box-shadow: var(--shadow-lg);
}

.cta-band__art {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: -1;
  background:
    linear-gradient(90deg, #0f2244 0%, rgba(15, 34, 68, 0.55) 40%, rgba(15, 34, 68, 0) 100%),
    url('/assets/images/hero/dubai-skyline-hero.webp') center / cover;
}

@media (max-width: 767px) { .cta-band__art { inset: 0; opacity: 0.28; } }

.cta-band__copy { position: relative; max-width: 34rem; }
.cta-band .eyebrow { color: var(--gold-400); }
.cta-band .eyebrow::before { background: var(--gold-400); }
.cta-band h2 { color: #ffffff; font-size: clamp(2.2rem, 3vw + 1rem, 3.5rem); margin-bottom: var(--space-3); }
.cta-band p { color: #d5deee; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* ---- Cards on the light canvas ---- */

.service-card--themed {
  background: linear-gradient(160deg, #ffffff 0%, hsl(var(--theme-color) / 0.07) 100%);
  box-shadow: 0 10px 26px hsl(var(--theme-color) / 0.13);
}

.property-card { box-shadow: 0 2px 6px rgba(15, 34, 68, 0.05), 0 12px 30px rgba(15, 34, 68, 0.07); }
.testimonials-carousel .tc-name { background: rgba(255, 255, 255, 0.9); }

/* Icons inside buttons stay icon-sized. */
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Hero secondary button reads over the scene. */
.hero__ctas .btn-outline-dark { background: rgba(255, 255, 255, 0.78); border-color: rgba(15, 34, 68, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero__ctas .btn-outline-dark:hover { background: #ffffff; border-color: var(--navy-950); }

/* ---- Colour: richer accents inside the cream / navy / tan palette ---- */
.service-card--themed { border-top: 3px solid hsl(var(--theme-color)); }
.service-card--themed .service-card__decor { color: hsl(var(--theme-color)); }
.service-card--themed .service-card__link { color: hsl(var(--theme-color)); }
.stat-strip { background: linear-gradient(120deg, #fff4df 0%, #ffe9d6 40%, #e8f3f1 100%); }
.stat-strip .stat-num { background: linear-gradient(120deg, #1a3a6e, #14766e 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section--alt { background: linear-gradient(to bottom, var(--color-bg) 0, #fbf1e1 90px, #f6ead6 calc(100% - 90px), var(--color-bg) 100%); }
.value-strip { background: linear-gradient(100deg, #fff7e8, #fdeede 50%, #eaf4f2); }
.eyebrow::before { background: linear-gradient(90deg, #c99a3d, #14766e); }
.property-card__badge, .badge { box-shadow: 0 4px 12px rgba(179, 84, 31, 0.18); }

/* ==========================================================================
   Site-wide UI systems: announcement bar, cookie consent, dialogs, toasts,
   back-to-top, print
   ========================================================================== */

:root { --ann-h: 0px; }
.has-ann { --ann-h: 40px; }
.ann-off { --ann-h: 0px; }

.announce {
  position: absolute; top: 0; left: 0; right: 0; z-index: 97;
  min-height: 40px; padding: 0.45rem 3rem 0.45rem 1rem;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
  background: linear-gradient(95deg, #0f2244 0%, #1d3f75 55%, #14766e 130%);
  color: #fff; font-size: var(--fs-sm); text-align: center;
}
.announce a { color: #ffd58a; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: #fff; }
.announce__close {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px; color: #fff; font-size: 1.3rem; line-height: 1;
}
.announce__close:hover { background: rgba(255, 255, 255, 0.16); }
.ann-off .announce { display: none; }
.has-ann:not(.ann-off) .site-header:not(.is-scrolled) { top: var(--ann-h); }
@media (max-width: 640px) { .has-ann { --ann-h: 64px; } .announce { padding-right: 2.6rem; font-size: var(--fs-xs); } }

/* ---- Dialogs ---- */
.dialog {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(15, 34, 68, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.25s var(--ease-luxury);
}
.dialog[hidden] { display: none; }
.dialog.is-open { opacity: 1; }
.dialog__panel {
  position: relative; width: min(100%, 30rem); max-height: 92vh; overflow: auto;
  background: var(--paper-0, #fff); border-radius: 24px; padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 30px 80px rgba(15, 34, 68, 0.35); border-top: 4px solid #14766e;
  transform: translateY(16px) scale(0.98); transition: transform 0.3s var(--ease-luxury);
}
.dialog.is-open .dialog__panel { transform: none; }
.dialog__panel h2 { font-size: var(--fs-2xl); margin: 0 0 0.5rem; line-height: 1.1; }
.dialog__panel p { color: var(--color-text-muted); }
.dialog__close {
  position: absolute; top: 0.7rem; right: 0.7rem; width: 36px; height: 36px; border-radius: 999px;
  font-size: 1.5rem; line-height: 1; color: var(--color-text); background: rgba(15, 34, 68, 0.06);
}
.dialog__close:hover { background: rgba(15, 34, 68, 0.14); }
.dialog form { margin-top: 1rem; display: grid; gap: 0.8rem; }
.dialog .form-field label { display: block; font-size: var(--fs-xs); font-weight: 600; margin-bottom: 0.25rem; }
.has-dialog { overflow: hidden; }

.toggle-row { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: 0.8rem 0; border-top: 1px solid var(--color-border); }
.toggle-row h3 { font-size: var(--fs-base); margin: 0 0 0.15rem; }
.toggle-row p { font-size: var(--fs-sm); margin: 0; }
.switch { position: relative; flex: none; width: 46px; height: 26px; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #c9cfdb; transition: background 0.2s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.switch input:checked + span { background: #1d3f75; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: 0.6; }
.switch input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* ---- Cookie banner ---- */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 150; max-width: 46rem; margin-inline: auto;
  display: grid; gap: 0.9rem; padding: 1.1rem 1.25rem; border-radius: 20px;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border); box-shadow: 0 20px 60px rgba(15, 34, 68, 0.22);
  transform: translateY(140%); transition: transform 0.45s var(--ease-luxury);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner.is-in { transform: none; }
.cookie-banner h2 { font-size: var(--fs-lg); margin: 0 0 0.2rem; }
.cookie-banner p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-banner .btn { padding: 0.65rem 1.2rem; font-size: var(--fs-sm); }
@media (min-width: 720px) { .cookie-banner { grid-template-columns: 1fr auto; align-items: center; left: 1.5rem; right: auto; margin: 0; max-width: 54rem; } }

/* ---- Toasts ---- */
.toasts { position: fixed; z-index: 210; right: 1rem; bottom: 1rem; display: grid; gap: 0.6rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem;
  border-radius: 14px; background: #0f2244; color: #fff; font-size: var(--fs-sm);
  box-shadow: 0 14px 40px rgba(15, 34, 68, 0.3); border-left: 4px solid #5b8ee6;
  transform: translateX(120%); opacity: 0; transition: transform 0.35s var(--ease-luxury), opacity 0.3s;
}
.toast.is-in { transform: none; opacity: 1; }
.toast p { margin: 0; flex: 1; color: inherit; }
.toast--success { border-left-color: #2fb585; }
.toast--error { border-left-color: #e5484d; background: #3b1a14; }
.toast__close { color: #fff; opacity: 0.7; font-size: 1.2rem; line-height: 1; }
.toast__close:hover { opacity: 1; }

/* ---- Back to top ---- */
.back-top {
  position: fixed; right: 1.1rem; bottom: 5.4rem; z-index: 90; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; background: #fff; color: #0f2244; border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(15, 34, 68, 0.18); opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, background 0.2s;
}
.back-top.is-in { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { background: #0f2244; color: #fff; }
.back-top svg { width: 20px; height: 20px; }
@media (max-width: 1023px) { .back-top { bottom: 6.2rem; } }

.link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* ---- Property page extras ---- */
.pd-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-4); }
.pd-actions .btn { padding: 0.6rem 1.1rem; font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) {
  .dialog, .dialog__panel, .cookie-banner, .toast, .back-top { transition: none; }
}

/* ---- Print ---- */
@media print {
  .site-header, .announce, .cookie-banner, .toasts, .back-top, .whatsapp-float, .preloader, .footer-news, .scroll-progress, .dialog { display: none !important; }
  body { background: #fff !important; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ---- Hero: clear the announcement bar and keep the scroll cue off the search pill on short screens ---- */
.has-ann:not(.ann-off) .hero__content { padding-top: calc(var(--header-h) + var(--ann-h) + var(--space-6)); }
@media (max-height: 760px) { .hero__scroll-cue { display: none; } }
@media (min-width: 768px) and (max-height: 860px) {
  .hero__title { font-size: clamp(2.4rem, min(5.2vw + 0.6rem, 10.5vh), 5.9rem); }
  .hero__subtitle { margin-top: var(--space-3); font-size: var(--fs-base); }
  .hero__eyebrow { margin-bottom: var(--space-3); }
  .has-ann:not(.ann-off) .hero__content, .hero__content { padding-top: calc(var(--header-h) + var(--ann-h) + var(--space-5)); padding-bottom: var(--space-6); }
}

/* ==========================================================================
   Bold, glossy, fully legible type; cinematic interior heroes; mobile polish
   ========================================================================== */

/* ---- Glossy navy display type (gradient fill + soft top highlight + hairline stroke) ---- */
.hero__title [data-typewriter]:not(:has(.tw-char)), .hero__title .tw-char,
.page-hero__title {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #1f4690 0%, #0c1f45 58%, #14336b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1.1px #0c1f45;
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 10px rgba(255, 248, 236, 0.9));
}
.hero__title em:not(:has(.tw-char)), .hero__title em .tw-char {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #f0c164 0%, #1f9a8c 55%, #0f5f58 100%);
  -webkit-text-stroke: 1px #0f5f58;
  color: transparent;
}
/* a gradient parent must not double-paint children that have their own gradient */
.hero__title [data-typewriter] .tw-char { filter: none; }
.hero__title .tw-word { display: inline-block; }
.page-hero__title { margin-bottom: var(--space-4); padding-bottom: 0.06em; }

/* Section headings: heavier, deeper navy */
h1, h2, h3, .section-header h2, .section-head-row h2 { -webkit-text-stroke: 0.5px currentColor; }
.cta-band h2, .footer-news__title, .on-dark h1, .on-dark h2, .on-dark h3, .section--dark h2, .section--dark h3 { -webkit-text-stroke: 0.4px currentColor; }
.hero__subtitle, .page-hero p { font-weight: 500; color: #263249; text-shadow: 0 1px 14px rgba(255, 248, 236, 0.95); }
.hero__eyebrow { font-weight: 700; color: #0f5f58; text-shadow: 0 1px 12px rgba(255, 248, 236, 0.95); }
p, li { text-rendering: optimizeLegibility; }

/* ---- Cinematic interior heroes: sunset sky, drifting light, skyline silhouettes, film vignette ---- */
.page-hero {
  background: linear-gradient(180deg, #cfdcec 0%, #e3ebf4 38%, #f3e4c6 78%, #eacb92 100%);
  background-size: 100% 140%;
  animation: hero-sky 18s ease-in-out infinite alternate;
}
@keyframes hero-sky { from { background-position: 50% 0; } to { background-position: 50% 100%; } }
.page-hero::after {
  background:
    radial-gradient(ellipse 38% 55% at 82% 62%, rgba(255, 238, 200, 0.95), rgba(236, 196, 120, 0.4) 45%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(120, 90, 40, 0.14) 100%);
}
.page-hero .breadcrumbs, .page-hero .breadcrumbs a { color: #3a2410; font-weight: 600; }
.page-hero .breadcrumbs a:hover { color: #0c1f45; }
.page-hero .badge { box-shadow: 0 4px 14px rgba(15, 34, 68, 0.2); }
@media (prefers-reduced-motion: reduce) { .page-hero { animation: none; } }

/* ---- Mobile ---- */
@media (max-width: 767px) {
  /* compact one-line announcement */
  .has-ann { --ann-h: 38px; }
  .announce { min-height: 38px; height: 38px; padding: 0 2.6rem 0 0.75rem; flex-wrap: nowrap; justify-content: flex-start; gap: 0.4rem; font-size: 0.78rem; white-space: nowrap; overflow: hidden; }
  .announce span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .announce a { flex: none; }

  .site-header { height: 64px; }
  .site-header__inner img, .site-brand img { max-height: 46px; width: auto; }

  .hero__content { padding-top: calc(64px + var(--ann-h) + var(--space-5)); padding-bottom: var(--space-8); }
  .has-ann:not(.ann-off) .hero__content { padding-top: calc(64px + var(--ann-h) + var(--space-5)); }
  .hero__title { font-size: clamp(2.5rem, 11.5vw, 3.2rem); line-height: 1.02; }
  .hero__subtitle { font-size: var(--fs-base); }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .page-hero { padding-top: calc(64px + var(--ann-h) + var(--space-6)); padding-bottom: calc(var(--space-6) + 90px); }
  .page-hero__title { font-size: clamp(2.3rem, 10vw, 3rem); }

  .whatsapp-float { bottom: 6.6rem; right: 0.8rem; width: 46px; height: 46px; }
  .back-top { bottom: 11.4rem; right: 0.9rem; width: 40px; height: 40px; }
  .toasts { bottom: 6.4rem; }
  .cookie-banner { bottom: 5.9rem; padding: 0.9rem 1rem; }
  .cookie-banner__actions .btn { flex: 1 1 auto; justify-content: center; }
  .dialog__panel { padding: 1.3rem 1.1rem; }
  .btn { white-space: normal; }
  .form-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Photo heroes on interior pages: cinematic slow push-in, light-to-clear overlay
   ========================================================================== */
.page-hero--photo { background: #dfe7f1; min-height: clamp(360px, 52vh, 560px); display: flex; align-items: flex-end; animation: none; }
.page-hero--photo > .container { width: 100%; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 70% 40%; animation: hero-push 26s ease-in-out infinite alternate;
  filter: saturate(1.08) contrast(1.04);
}
@keyframes hero-push { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2%, -1.5%, 0); } }
.page-hero--photo::after {
  background:
    linear-gradient(90deg, rgba(250, 247, 242, 0.95) 0%, rgba(250, 247, 242, 0.82) 34%, rgba(250, 247, 242, 0.34) 68%, rgba(250, 247, 242, 0.06) 100%),
    linear-gradient(0deg, rgba(250, 247, 242, 0.9) 0%, rgba(250, 247, 242, 0) 34%),
    radial-gradient(ellipse 40% 55% at 85% 20%, rgba(255, 226, 160, 0.38), transparent 70%);
}
.page-hero--photo::before { display: none; }
.page-hero--photo .photo-credit {
  position: absolute; right: 1rem; bottom: 0.7rem; z-index: 2; font-size: 0.7rem; font-weight: 600;
  color: #263249; background: rgba(255, 255, 255, 0.7); padding: 0.15rem 0.55rem; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.page-hero--photo .photo-credit:hover { background: #fff; }
.page-hero--photo { padding-bottom: calc(var(--space-7) + 20px); }
@media (max-width: 767px) {
  .page-hero--photo { min-height: 0; padding-bottom: var(--space-7); }
  .page-hero--photo::after { background: linear-gradient(180deg, rgba(250, 247, 242, 0.88) 0%, rgba(250, 247, 242, 0.78) 55%, rgba(250, 247, 242, 0.5) 100%); }
}
@media (prefers-reduced-motion: reduce) { .page-hero__bg img { animation: none; } }

/* ---- Hero type: colour shifts navy -> royal blue -> gold as the page scrolls ---- */
.hero__title .tw-char, .hero__title [data-typewriter]:not(:has(.tw-char)) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #0b1d44 0%, #1b4aa0 38%, #c98a2b 70%, #0f5f58 100%);
  background-size: 100% 100%, 100% 260%;
  background-position: 0 0, 0 calc(var(--p, 0) * 160%);
}
.hero__title em:not(:has(.tw-char)), .hero__title em .tw-char {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #f6cf72 0%, #c99a3d 40%, #1b4aa0 100%);
  background-size: 100% 100%, 100% 260%;
  background-position: 0 0, 0 calc(var(--p, 0) * 160%);
}

/* ---- Toast actions ---- */
.toast__actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.toast__actions a, .toast__actions button { font-weight: 700; font-size: var(--fs-xs); padding: 0.35rem 0.8rem; border-radius: 999px; background: #ffd58a; color: #0f2244; }
.toast__actions a:hover, .toast__actions button:hover { background: #fff; }
.toast__body { flex: 1; }
.toast--promo { border-left-color: #ffd58a; }

/* ---- Save listing ---- */
.btn.is-saved { background: #0f2244; color: #fff; border-color: #0f2244; }

/* ---- Team cards: same card language as the home featured / property cards ---- */
.team-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg, 24px);
  background: linear-gradient(160deg, #ffffff 0%, hsl(var(--theme-color) / 0.07) 100%);
  border: 1px solid var(--color-border); border-top: 3px solid hsl(var(--theme-color));
  box-shadow: 0 10px 26px hsl(var(--theme-color) / 0.13);
  transition: transform var(--duration-base) var(--ease-luxury), box-shadow var(--duration-base) var(--ease-luxury);
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px hsl(var(--theme-color) / 0.22); }
.team-card__photo { aspect-ratio: 4 / 4.2; overflow: hidden; background: #e9edf3; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.8s var(--ease-luxury); }
.team-card:hover .team-card__photo img { transform: scale(1.05); }
.team-card__body { padding: var(--space-5); }
.team-card__body h3 { font-size: var(--fs-xl); margin: 0 0 0.2rem; }
.team-card__role { color: hsl(var(--theme-color)); font-weight: 700; font-size: var(--fs-sm); margin: 0 0 var(--space-3); }
.team-card__bio { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Dark bands: stats and CTA read correctly ---- */
.section--dark .stat-strip { background: transparent; }
.section--dark .stat-strip .stat-num { background: linear-gradient(180deg, #ffe9b8, #e8b45a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; }
.section--dark .stat-strip .stat-label { color: #d5deee; font-weight: 600; }
.cta-band .btn-outline, .cta-band .btn-outline-dark { color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); }
.cta-band .btn-outline:hover, .cta-band .btn-outline-dark:hover { background: #fff; color: #0f2244; }

/* ---- Calculator uses the same navy / gold language as the rest of the site ---- */
.calculator { --calc-c-pi: #1b3a6b; --calc-c-pi-hover: #2a5599; --calc-c-svc: #c99a3d; --calc-c-ins: #2a8a8a; }
.btn-calc { background: linear-gradient(135deg, #1f4690, #0f2244 70%); box-shadow: 0 10px 26px rgba(15, 34, 68, 0.3); }
.btn-calc:hover { box-shadow: 0 14px 32px rgba(15, 34, 68, 0.4); }
.calc-legend li { color: #263249; font-weight: 500; }
.calc-legend li b { color: #0f2244; }
.calc-donut__amount { color: #0f2244; }
.calc-disclosure__trigger, .calc-disclosure button { color: #0f2244; }
.calc-card__title { color: #0f2244; }

/* ---- Property / blog cards share the home card language: coloured top edge, tinted gradient, lift ---- */
.property-grid > .property-card:not(.property-card--feature), .blog-grid > .blog-card { --tc: 215 70% 34%; border-top: 3px solid hsl(var(--tc)); background: linear-gradient(165deg, #ffffff 0%, hsl(var(--tc) / 0.06) 100%); box-shadow: 0 10px 26px hsl(var(--tc) / 0.12); }
.property-grid > :nth-child(5n+2), .blog-grid > :nth-child(5n+2) { --tc: 16 72% 46%; }
.property-grid > :nth-child(5n+3), .blog-grid > :nth-child(5n+3) { --tc: 180 62% 31%; }
.property-grid > :nth-child(5n+4), .blog-grid > :nth-child(5n+4) { --tc: 38 86% 44%; }
.property-grid > :nth-child(5n+5), .blog-grid > :nth-child(5n+5) { --tc: 276 40% 40%; }
.property-grid > .property-card:hover, .blog-grid > .blog-card:hover { box-shadow: 0 18px 40px hsl(var(--tc) / 0.22); }
.pagination button.is-active { background: #0f2244; color: #fff; border-color: #0f2244; }

/* ==========================================================================
   Display type: Clash Display (bold) for hero titles, Instrument Serif italic accent
   ========================================================================== */
@font-face { font-family: 'Clash Display'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/clash-display/clash-display-600.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/clash-display/clash-display-700.woff2') format('woff2'); }
.hero__title, .page-hero__title { font-family: 'Clash Display', 'General Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.028em; }
.hero__title { font-size: clamp(2.7rem, 4.6vw + 0.5rem, 5.4rem); line-height: 1.02; max-width: 14ch; }
.hero__title .tw-char, .page-hero__title { -webkit-text-stroke: 0.35px #0c1f45; }
.page-hero__title { font-size: clamp(2.2rem, 3.6vw + 1rem, 4.4rem); line-height: 1.06; max-width: 22ch; }
.hero__title em, .hero__title em .tw-char { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: 0; -webkit-text-stroke: 0.9px #0f5f58; }
.hero__title em { font-size: 1.16em; display: inline-block; line-height: 0.95; }
@media (max-width: 767px) {
  .hero__title { font-size: clamp(2.35rem, 10.5vw, 3rem); }
  .page-hero__title { font-size: clamp(2rem, 8.6vw, 2.6rem); }
}
/* stronger, richer fill (less highlight wash) */
.hero__title .tw-char, .hero__title [data-typewriter]:not(:has(.tw-char)) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #0a1b40 0%, #12306b 45%, #1c4a9a 70%, #0a1b40 100%);
  filter: drop-shadow(0 2px 14px rgba(255, 250, 240, 0.95)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
  -webkit-text-stroke: 0.5px #0a1b40;
}
.hero__title em:not(:has(.tw-char)), .hero__title em .tw-char {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #e7a928 0%, #1f9a8c 55%, #0b4a45 100%);
  -webkit-text-stroke: 0.8px #0b4a45;
}
/* text-shadow bleeds over background-clip:text fills; the glow comes from drop-shadow instead */
.hero__title, .hero__title *, .page-hero__title { text-shadow: none !important; }
.hero__title [data-typewriter] .tw-char { filter: drop-shadow(0 2px 14px rgba(255, 250, 240, 0.9)); }

/* ==========================================================================
   shadcn-style primitives (Card, Badge, Chip/Toggle, Input ring) in the SWK palette
   ========================================================================== */
.ui-card { background: #fff; border: 1px solid var(--color-border); border-radius: 22px; box-shadow: 0 1px 2px rgba(15,34,68,.05), 0 14px 36px rgba(15,34,68,.08); overflow: hidden; }
.ui-card__head { padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2rem) 0; }
.ui-card__head h2 { font-size: clamp(1.7rem, 2.2vw + 1rem, 2.4rem); margin: .4rem 0 .5rem; }
.ui-card__head p { margin: 0; color: var(--color-text-muted); }
.ui-card__body { padding: clamp(1.3rem, 3vw, 2rem); }
.ui-card--note { background: linear-gradient(160deg, #0f2244, #1b3a6b); color: #fff; border: 0; padding: clamp(1.3rem, 3vw, 1.8rem); }
.ui-card--note h3 { color: #fff; margin: 0 0 var(--space-3); -webkit-text-stroke: 0; }
.next-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .8rem; }
.next-steps li { counter-increment: s; position: relative; padding-left: 2.6rem; color: #d5deee; font-size: var(--fs-sm); }
.next-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: #ffd58a; color: #0f2244; font-weight: 800; font-size: .8rem; }
.next-steps b { color: #fff; }

.contact-page .form-field input, .contact-page .form-field select, .contact-page .form-field textarea { border-radius: 12px; border: 1px solid #cfd6e3; background: #fff; padding: .8rem 1rem; transition: border-color .2s, box-shadow .2s; }
.contact-page .form-field input:focus, .contact-page .form-field select:focus, .contact-page .form-field textarea:focus { outline: none; border-color: #1b3a6b; box-shadow: 0 0 0 4px rgba(27,58,107,.15); }
.contact-page textarea { min-height: 130px; }

.quick-tiles { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-7); }
@media (min-width: 700px) { .quick-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .quick-tiles { grid-template-columns: repeat(4, 1fr); } }
.quick-tile { --qc: 215 70% 34%; display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem; border-radius: 18px; background: linear-gradient(160deg, #fff, hsl(var(--qc) / .07)); border: 1px solid var(--color-border); border-top: 3px solid hsl(var(--qc)); box-shadow: 0 10px 26px hsl(var(--qc) / .12); text-align: left; color: var(--color-text); transition: transform .3s var(--ease-luxury), box-shadow .3s; width: 100%; font: inherit; cursor: pointer; }
.quick-tile--wa { --qc: 150 55% 33%; } .quick-tile--mail { --qc: 16 72% 46%; } .quick-tile--cb { --qc: 38 86% 40%; }
.quick-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px hsl(var(--qc) / .24); }
.quick-tile__icon { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: hsl(var(--qc)); color: #fff; }
.quick-tile__icon svg { width: 22px; height: 22px; }
.quick-tile__txt { display: grid; min-width: 0; flex: 1; }
.quick-tile__txt small { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.quick-tile__txt strong { font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; }
.quick-tile__go { color: hsl(var(--qc)); font-weight: 800; transition: transform .25s; }
.quick-tile:hover .quick-tile__go { transform: translateX(4px); }

.contact-page .contact-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .contact-page .contact-layout { grid-template-columns: 1.15fr .85fr; } }
.contact-side { display: grid; gap: var(--space-5); }
.ui-card--map .map-embed { aspect-ratio: 16 / 9; border-radius: 0; margin: 0; }
.ui-card--map .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.office-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.office-head h3 { margin: 0; }
.office-addr { display: flex; gap: .4rem; align-items: flex-start; color: var(--color-text-muted); margin: .6rem 0; }
.status-pill { font-size: .72rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; background: #eceff5; color: #39455a; }
.status-pill.is-open { background: #d9f2e6; color: #12643f; }
.status-pill.is-open::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22a06b; margin-right: .4rem; animation: pulse-dot 1.6s infinite; }
@keyframes pulse-dot { 50% { opacity: .35; } }
.hours { margin: .6rem 0 1rem; display: grid; gap: .1rem; }
.hours div { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px dashed var(--color-border); font-size: var(--fs-sm); }
.hours dt { color: var(--color-text-muted); } .hours dd { margin: 0; font-weight: 700; }
.office-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Journal */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: var(--space-6); }
.chip { padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid #cfd6e3; background: #fff; font-weight: 700; font-size: var(--fs-sm); color: #263249; transition: all .2s; cursor: pointer; }
.chip:hover { border-color: #1b3a6b; }
.chip.is-active { background: #0f2244; color: #fff; border-color: #0f2244; }
.chip:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.chip-count { margin-left: auto; color: var(--color-text-muted); font-size: var(--fs-sm); }
[data-category][hidden] { display: none !important; }
.blog-feature { margin-bottom: var(--space-7); border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #fff, #eef3fa); border: 1px solid var(--color-border); box-shadow: 0 18px 50px rgba(15,34,68,.12); }
.blog-feature > a { display: grid; grid-template-columns: 1fr; color: inherit; }
@media (min-width: 900px) { .blog-feature > a { grid-template-columns: 1.1fr .9fr; } }
.blog-feature__media { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-luxury); }
.blog-feature:hover .blog-feature__media img { transform: scale(1.05); }
.blog-feature__body { padding: clamp(1.4rem, 3.4vw, 2.6rem); display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; align-items: flex-start; }
.blog-feature__body h2 { font-size: clamp(1.8rem, 2.4vw + 1rem, 2.8rem); margin: 0; }
.blog-feature__body p { color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   Section rhythm: every block change is a visible tone change
   ========================================================================== */
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(even) { background: linear-gradient(180deg, #f5ecdc 0%, #f9f3e8 14%, #f9f3e8 86%, #f5ecdc 100%); }
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(odd) { background: linear-gradient(180deg, #ffffff 0%, #fbf8f2 100%); }
/* a gold-to-navy hairline marks the step from hero to the first block */
.page-hero + section, .hero-cine + section { position: relative; box-shadow: 0 -18px 40px rgba(15, 34, 68, 0.12); }
.page-hero + section::before, .hero-cine + section::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #0f2244, #1b4aa0 35%, #c99a3d 70%, #0f2244); z-index: 2; }
.page-hero::after { z-index: -1; }

/* ---- Full-bleed section tones (container sections keep their inner width) ---- */
main > section.container { max-width: none; padding-inline: max(var(--space-5), calc((100% - var(--container-max)) / 2 + var(--space-6))); }
.nl-inline { max-width: 520px; margin: 0 auto; display: grid; gap: .8rem; text-align: left; }
.nl-inline__row { display: flex; gap: .5rem; padding: .4rem; border: 1px solid #cfd6e3; border-radius: 999px; background: #fff; box-shadow: 0 10px 28px rgba(15,34,68,.08); }
.nl-inline__row input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .6rem 1rem; font: inherit; border-radius: 999px; }
.nl-inline__row input:focus { outline: none; }
.nl-inline__row:focus-within { border-color: #1b3a6b; box-shadow: 0 0 0 4px rgba(27,58,107,.15); }

/* ---- Hero / page-hero title spacing with the bold display face ---- */
.page-hero__title { font-weight: 600; letter-spacing: -0.012em; word-spacing: 0.1em; -webkit-text-stroke: 0.25px #0a1b40; }
.hero__title { letter-spacing: -0.018em; word-spacing: 0.06em; }

/* ---- Mobile overflow fixes ---- */
.footer-news { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .footer-news { grid-template-columns: 1fr 1.1fr; } }
.footer-news > *, .footer-newsletter, .footer-newsletter__row input { min-width: 0; }
.nl-inline { width: 100%; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-feature__body .btn { width: 100%; justify-content: center; }
  .chip-row { gap: .4rem; }
  .chip-count { width: 100%; margin: 0; }
  .nl-inline__row { flex-direction: column; border-radius: 22px; }
  .nl-inline__row .btn { width: 100%; justify-content: center; }
}
@media (max-width: 767px) {
  .hero__content, .has-ann:not(.ann-off) .hero__content { padding-top: calc(var(--ann-h) + 64px + 34px); }
  .hero__eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; }
}

/* Pearl, aubergine and brushed champagne complement the existing navy. */
:root { --swk-pearl:#fbfaf7; --swk-plum:#564456; --swk-champagne:#ba9970; }
.hero__title { font-family:'Clash Display','General Sans',sans-serif; font-weight:600; letter-spacing:-.055em; line-height:1.02; text-wrap:balance; }
.hero__title em { font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-.025em; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/clash-display/clash-display-400.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/clash-display/clash-display-500.woff2') format('woff2'); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/clash-display/clash-display-600.woff2') format('woff2'); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/clash-display/clash-display-700.woff2') format('woff2'); font-style:normal; font-weight:700; font-display:swap; }
.section--alt { background:linear-gradient(125deg,#fbfaf7 0%,#f4f1ed 65%,#f0eaf0 100%); }
.fan-pagination { margin-top:0; transform:translateY(-12px); }
.fan-card img { transform:scale(1.07) translate(var(--image-x,0px),var(--image-y,0px)); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.team-card__bio { display:block; overflow:visible; }
.team-card__body h3 { font-size:1.2rem; }
.team-card__role { color:#564456; }
@media(min-width:1100px) { .team-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; } .team-card__body { padding:18px; } .team-card__bio { font-size:.83rem; line-height:1.7; } }
@media(min-width:700px) and (max-width:1099px) { .team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@keyframes swk-hero-drift { from { transform:scale(1.02) translateY(0); } to { transform:scale(1.09) translateY(-1%); } }
.page-hero__bg img { animation:swk-hero-drift 22s ease-in-out infinite alternate; }
.page-hero .container { position:relative; z-index:1; }
.swk-chat { position:fixed; right:24px; bottom:28px; z-index:85; font-family:'General Sans',sans-serif; }
.swk-chat__launcher { position:relative; display:flex; align-items:center; gap:0; margin-left:auto; border:1.5px solid #c9a24a; background:radial-gradient(circle at 32% 24%, #2a3a5c 0%, #17243c 62%, #101a2e 100%); color:#f3dfa2; border-radius:40px; padding:0; height:68px; min-width:68px; box-shadow:0 10px 30px #17243c55, inset 0 1px 0 #ffffff1f; cursor:pointer; overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; }
.swk-chat__launcher:hover, .swk-chat__launcher:focus-visible { transform:translateY(-2px); box-shadow:0 14px 36px #17243c66, 0 0 0 3px #c9a24a40, inset 0 1px 0 #ffffff1f; }
.swk-chat__launcher img { flex:none; width:42px; height:auto; padding:0 13px; box-sizing:content-box; filter:drop-shadow(0 1px 1px #00000066); }
.swk-chat__launcher span { max-width:0; opacity:0; white-space:nowrap; font-weight:600; font-size:.85rem; letter-spacing:.02em; transition:max-width .3s ease, opacity .2s ease, padding .3s ease; }
.swk-chat__launcher:hover span, .swk-chat__launcher:focus-visible span { max-width:150px; opacity:1; padding-right:20px; }
.swk-chat__panel { position:absolute; right:0; bottom:84px; width:min(390px,calc(100vw - 32px)); max-height:min(650px,calc(100dvh - 180px)); overflow:auto; border:1px solid #d6c8b4; background:#fbfaf7; color:#17243c; border-radius:24px; box-shadow:0 24px 80px #17243c30; }
.swk-chat__panel[hidden] { display:none; }
.swk-chat header { display:flex; justify-content:space-between; align-items:center; padding:20px; background:linear-gradient(120deg,#17243c,#564456); color:white; }
.swk-chat header small { display:block; font-size:.68rem; margin-top:5px; color:#eee3d3; }
.swk-chat header button { background:transparent; color:white; border:0; font-size:28px; min-width:44px; min-height:44px; cursor:pointer; }
.swk-chat__messages { padding:16px; max-height:260px; overflow:auto; }
.swk-chat__message { background:#eeeae5; border-radius:14px 14px 14px 2px; padding:13px; font-size:.85rem; line-height:1.6; margin:0 0 10px; overflow-wrap:anywhere; }
.swk-chat__message--user { background:#e4e9f0; margin-left:30px; border-radius:14px 14px 2px 14px; }
.swk-chat__topics { display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 14px; }
.swk-chat__topics button { border:1px solid #c9b89f; border-radius:24px; background:white; color:#17243c; padding:10px 12px; font-size:.75rem; cursor:pointer; min-height:44px; }
.swk-chat form { display:flex; padding:0 16px 12px; gap:8px; }
.swk-chat input { min-width:0; flex:1; padding:12px; border:1px solid #ccc4bb; border-radius:12px; background:white; color:#17243c; font-size:16px; }
.swk-chat form button { min-width:44px; border:0; background:#17243c; color:white; border-radius:12px; cursor:pointer; }
.swk-chat__handoff { display:block; margin:0 16px 12px; padding:12px; text-align:center; background:#564456; color:white; border-radius:12px; font-size:.83rem; }
.swk-chat__privacy { display:block; padding:0 16px 16px; font-size:.65rem; line-height:1.5; color:#575969; }
@media(max-width:899px) { .swk-chat { bottom:calc(102px + env(safe-area-inset-bottom)); right:16px; } .swk-chat__launcher { height:58px; min-width:58px; } .swk-chat__launcher img { width:36px; padding:0 11px; } .swk-chat__launcher span { display:none; } .swk-chat__panel { max-height:calc(100dvh - 240px); bottom:64px; } }
@media(prefers-reduced-motion:reduce) { .page-hero__bg img { animation:none; } .fan-card img { transition:none; transform:none; } }
/* One floating contact entry; WhatsApp remains available inside Concierge. */
body:has(.swk-chat) .whatsapp-float { display:none; }
.back-top { bottom:100px; }
@media(max-width:1023px) { .swk-chat { bottom:calc(102px + env(safe-area-inset-bottom)); } .back-top { bottom:calc(168px + env(safe-area-inset-bottom)); } }
@media print { .swk-chat { display:none; } }
.article-answer { font-size:1.2rem; border-left:3px solid #ba9970; padding-left:20px; }
.swk-chat__tabs { display:flex; padding:12px 16px; gap:8px; border-bottom:1px solid #d8cfc2; }
.swk-chat__tabs button { flex:1; min-height:44px; background:transparent; border:1px solid #b7a58e; border-radius:12px; color:#17243c; cursor:pointer; font-size:.75rem; }
.swk-chat__tabs button[aria-pressed=true] { background:#17243c; color:white; }
.swk-live__status { padding:12px 16px 0; font-size:.8rem; }
.swk-chat .swk-live__form { display:block; }
.swk-live__form label { display:block; font-size:.8rem; margin-bottom:8px; }
.swk-live__form input:not([type=checkbox]) { width:100%; }
.swk-live__consent { display:flex!important; align-items:flex-start; gap:8px; margin-top:12px; line-height:1.5; font-size:.7rem!important; }
.swk-live__consent input { flex:0; width:18px; min-width:18px; min-height:18px; }
.swk-live__compose { display:flex; gap:8px; }
.swk-live__restart { padding:12px; margin:0 16px 16px; background:white; border:1px solid #b7a58e; border-radius:10px; cursor:pointer; }
[data-live-view][hidden],[data-assistant-view][hidden],[data-inbox-workspace][hidden],[data-inbox-login][hidden],[data-inbox-reply][hidden] { display:none!important; }
body:has(.inbox-shell) .swk-chat { display:none; }
.inbox-shell { padding-top:calc(var(--header-h) + var(--ann-h) + 50px); }
.inbox-shell h1 { font-size:clamp(2.5rem,5vw,4rem); }
.inbox-login { max-width:420px; padding:24px; display:grid; gap:16px; }
.inbox-login input,.inbox-conversation textarea { width:100%; padding:14px; background:white; color:#17243c; border:1px solid #b7a58e; border-radius:10px; font-size:16px; }
.inbox-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.inbox-layout { display:grid; grid-template-columns:300px minmax(0,1fr); border:1px solid #d8cfc2; border-radius:20px; overflow:hidden; background:white; min-height:500px; }
.inbox-threads { border-right:1px solid #d8cfc2; padding:16px; max-height:650px; overflow:auto; }
.inbox-thread { display:block; width:100%; text-align:left; border:1px solid #d8cfc2; border-radius:10px; padding:14px; margin-bottom:10px; background:#fbfaf7; color:#17243c; cursor:pointer; overflow-wrap:anywhere; }
.inbox-thread span { display:block; font-size:.8rem; margin-top:6px; }
.inbox-thread[aria-pressed=true] { border-color:#564456; background:#eee8ed; }
.inbox-conversation { padding:24px; min-width:0; }
[data-inbox-messages] { min-height:240px; max-height:420px; overflow:auto; }
.inbox-conversation textarea { min-height:90px; margin:16px 0; }
@media(max-width:700px) { .inbox-layout { grid-template-columns:1fr; } .inbox-threads { max-height:240px; border-right:0; border-bottom:1px solid #d8cfc2; } .inbox-conversation { padding:16px; } }
.research-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px; margin-bottom:48px; border-radius:24px; background:linear-gradient(130deg,#eee6d9,#eee8ee); border:1px solid #d6c5ad; }
.research-banner p { max-width:62ch; }
.research-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:24px 0 48px; }
.research-card { border:1px solid #d7ccbe; border-radius:20px; background:linear-gradient(145deg,#fff,#f3efea); overflow:hidden; transition:transform .3s,box-shadow .3s; }
.research-card:hover { transform:translateY(-5px); box-shadow:0 16px 35px #17243c15; }
.research-card a { display:block; padding:28px; height:100%; color:#17243c; text-decoration:none; }
.research-card h3 { font-family:'Clash Display','General Sans',sans-serif; font-size:1.4rem; line-height:1.25; margin:24px 0; }
.research-card__top { display:flex; justify-content:space-between; gap:12px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.research-card__top span:first-child { color:#69506a; font-weight:700; }
.research-card__value { display:block; font-size:1.6rem; font-weight:600; font-variant-numeric:tabular-nums; }
.research-card__value small { display:block; font-size:.8rem; font-weight:400; }
.research-card p { font-size:.8rem; margin-top:12px; }
.research-card__link { display:block; margin-top:28px; font-size:.8rem; color:#69506a; }
.research-years { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0 64px; }
.research-year { display:block; padding:24px; border:1px solid #d7ccbe; border-radius:16px; text-decoration:none; background:#fbfaf7; }
.research-year strong { display:block; font-size:2rem; color:#17243c; }
.research-year span { font-size:.8rem; }
.research-year-nav { display:flex; flex-wrap:wrap; gap:8px; }
.research-year-nav a { padding:10px 16px; border:1px solid #d7ccbe; border-radius:24px; }
.research-year-nav a[aria-current=page] { background:#17243c; color:white; }
.research-search { margin-bottom:48px; }
.research-search label { display:block; margin-bottom:12px; font-weight:600; }
.research-search input { width:100%; max-width:600px; border:1px solid #a58c6c; border-radius:12px; padding:16px; background:white; color:#17243c; font-size:16px; }
.research-method { padding:28px; margin:36px 0; border:1px solid #d7ccbe; border-radius:16px; background:#f4f0eb; }
.research-method p { max-width:85ch; font-size:.9rem; line-height:1.8; }
.research-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0 0 64px; }
.research-metrics div { padding:24px; border:1px solid #d7ccbe; border-radius:16px; background:linear-gradient(130deg,white,#f4eff3); }
.research-metrics dt { font-size:.75rem; margin-bottom:12px; }
.research-metrics dd { margin:0; font-size:1.4rem; font-weight:700; line-height:1.3; font-variant-numeric:tabular-nums; }
.research-table { overflow:auto; margin:24px 0; }
.research-table table { width:100%; border-collapse:collapse; font-size:.85rem; font-variant-numeric:tabular-nums; }
.research-table caption { text-align:left; font-weight:700; margin-bottom:12px; }
.research-table td,.research-table th { padding:12px 10px; text-align:left; border-bottom:1px solid #d7ccbe; white-space:nowrap; }
.research-table th { color:#17243c; }
@media(max-width:900px) { .research-grid,.research-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .research-years { grid-template-columns:repeat(2,minmax(0,1fr)); } .research-banner { align-items:flex-start; flex-direction:column; } }
@media(max-width:540px) { .research-grid { grid-template-columns:1fr; } .research-metrics { gap:12px; } .research-metrics div { padding:16px; } .research-metrics dd { font-size:1.1rem; } .research-method { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .research-card { transition:none; } .research-card:hover { transform:none; } }
body:has(.inbox-shell) .footer-news { display:none; }
@media(max-width:767px) { .hero { height:auto; min-height:100svh; } .hero__content { padding-bottom:120px; } }
/* Keep the headline readable immediately and the mobile contact control clear of form fields. */
.hero__title .tw-char { opacity:1; transition:none; }
@media(max-width:1023px) { .swk-chat { top:calc(var(--ann-h,0px) + 12px); bottom:auto; z-index:98; } .swk-chat__panel { top:64px; bottom:auto; max-height:calc(100dvh - var(--ann-h,0px) - 176px); } }

/* ==========================================================================
   Colour system v2: beige stays the canvas, each block gets its own quiet hue.
   Hues (HSL, no alpha) are reused for nav items, section eyebrows and icons.
   ========================================================================== */
:root { --hue-navy: 215 70% 38%; --hue-teal: 180 62% 30%; --hue-terra: 16 72% 46%; --hue-gold: 38 86% 40%; --hue-plum: 276 40% 42%; --hue-green: 150 48% 31%; }

/* ---- Header: white bar, coloured pill navigation, gold-ringed actions ---- */
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #14305c 0%, #0f766e 22%, #c99a3d 48%, #14766e 74%, #6b3f7a 100%); opacity: .9; }
.site-nav { gap: .25rem; }
.site-nav a { --c: var(--hue-navy); padding: .55rem 1rem; border-radius: 999px; font-weight: 600; letter-spacing: .005em; color: #1c2b46; transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.site-nav a:nth-child(2) { --c: var(--hue-teal); } .site-nav a:nth-child(3) { --c: var(--hue-terra); } .site-nav a:nth-child(4) { --c: var(--hue-gold); }
.site-nav a:nth-child(5) { --c: var(--hue-plum); } .site-nav a:nth-child(6) { --c: var(--hue-green); } .site-nav a:nth-child(7) { --c: var(--hue-navy); }
.site-nav a::after { content: none; }
.site-nav a:hover { background: hsl(var(--c) / .12); color: hsl(var(--c)); transform: translateY(-1px); }
.site-nav a[aria-current='page'] { background: hsl(var(--c) / .14); color: hsl(var(--c)); box-shadow: inset 0 0 0 1.5px hsl(var(--c) / .35); }
.site-nav a[aria-current='page']::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; vertical-align: .12em; border-radius: 50%; background: hsl(var(--c)); }
.site-header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.site-header__wa { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #0f7a43; background: #e6f5ec; box-shadow: inset 0 0 0 1.5px #9ad3b3; transition: transform .25s ease, background .25s ease, color .25s ease; }
.site-header__wa svg { width: 22px; height: 22px; }
.site-header__wa:hover { background: #0f7a43; color: #fff; transform: translateY(-2px) rotate(-6deg); }
.site-header__cta { gap: .6rem; padding: .62rem .6rem .62rem 1.15rem; background: linear-gradient(135deg, #1d4ba0 0%, #14305c 55%, #0f2244 100%); box-shadow: 0 8px 22px rgba(29, 75, 160, .3), 0 0 0 1.5px #d9b15a, inset 0 1px 0 rgba(255, 255, 255, .22); }
.site-header__go { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #f0d28a, #c99a3d); color: #14305c; transition: transform .25s ease; }
.site-header__go svg { width: 15px; height: 15px; }
.site-header__cta:hover { background: linear-gradient(135deg, #0f766e 0%, #14305c 100%); box-shadow: 0 10px 26px rgba(15, 118, 110, .35), 0 0 0 1.5px #d9b15a, inset 0 1px 0 rgba(255, 255, 255, .22); }
.site-header__cta:hover .site-header__go { transform: translateX(3px); }
@media (max-width: 1023px) { .site-header__wa { display: none; } }

/* ---- Buttons everywhere ---- */
.btn-primary { background: linear-gradient(135deg, #1d4ba0 0%, #14305c 60%, #0f2244 100%); box-shadow: 0 8px 22px rgba(29, 75, 160, .28), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-primary:hover { background: linear-gradient(135deg, #0f766e 0%, #14305c 100%); box-shadow: 0 10px 26px rgba(15, 118, 110, .34), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-outline-dark { border-color: #d3a94f; background: rgba(255, 255, 255, .7); color: #14305c; box-shadow: 0 4px 14px rgba(201, 154, 61, .14); }
.btn-outline-dark:hover { border-color: #b8892b; background: linear-gradient(135deg, #fbefd2, #f3d9a0); color: #0f2244; box-shadow: 0 8px 20px rgba(201, 154, 61, .3); }

/* ---- Section rhythm: six quiet tints on the beige base, each with its own eyebrow hue ---- */
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+1) { --sec: var(--hue-gold); background: linear-gradient(180deg, #fbf4e6 0%, #f8eedb 100%); }
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+2) { --sec: var(--hue-navy); background: linear-gradient(180deg, #f4f8fc 0%, #e8f0f8 14%, #e8f0f8 86%, #f4f8fc 100%); }
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+3) { --sec: var(--hue-terra); background: linear-gradient(180deg, #fdf6f0 0%, #f9e9dd 14%, #f9e9dd 86%, #fdf6f0 100%); }
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+4) { --sec: var(--hue-teal); background: linear-gradient(180deg, #f3faf7 0%, #e4f1ec 14%, #e4f1ec 86%, #f3faf7 100%); }
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+5) { --sec: var(--hue-plum); background: linear-gradient(180deg, #faf7fc 0%, #efe9f6 14%, #efe9f6 86%, #faf7fc 100%); }
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n) { --sec: var(--hue-green); background: linear-gradient(180deg, #f6faf2 0%, #e8f2df 14%, #e8f2df 86%, #f6faf2 100%); }
main > section .eyebrow { color: hsl(var(--sec, var(--hue-gold))); }
main > section .eyebrow::before { background: hsl(var(--sec, var(--hue-gold))); }
main > section .section-header h2, main > section .section-head-row h2 { background: none; }

/* Value strip under the hero: four coloured badges */
.value-strip { background: linear-gradient(100deg, #fff6e4, #fdeede 50%, #e8f3ef) !important; }
.value-item__icon { box-shadow: inset 0 0 0 1.5px hsl(var(--vc) / .35); background: hsl(var(--vc) / .14); color: hsl(var(--vc)); }
.value-item:nth-child(1) { --vc: var(--hue-navy); } .value-item:nth-child(2) { --vc: var(--hue-teal); } .value-item:nth-child(3) { --vc: var(--hue-terra); } .value-item:nth-child(4) { --vc: var(--hue-plum); }
.value-item h3 { color: hsl(var(--vc) / 1); }

/* Hero headline: premium scale, two balanced lines. */
.hero__title { font-size:clamp(1.9rem, 1.1rem + 2.1vw, 3.3rem); line-height:1.1; letter-spacing:-.035em; max-width:24ch; }
.hero__title em { font-size:1.06em; letter-spacing:-.02em; }
@media(max-width:767px) { .hero__title { font-size:clamp(1.8rem, 7.4vw, 2.2rem); max-width:18ch; } }
@media(min-width:768px) and (max-height:860px) { .hero__title { font-size:clamp(1.9rem, 1.1rem + 2.1vw, 3rem); } }

/* Interior page headers share the home headline scale and type so every page reads as one system. */
.page-hero__title { font-family:'Clash Display','General Sans',sans-serif; font-weight:600; font-size:clamp(1.9rem, 1.1rem + 2.1vw, 3.3rem); line-height:1.1; letter-spacing:-.035em; max-width:24ch; text-wrap:balance; }
@media(max-width:767px) { .page-hero__title { font-size:clamp(1.8rem, 7.4vw, 2.2rem); } }

/* ---- Developers & projects ---- */
.dev-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.dev-card { --dc:215 70% 38%; display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:22px; background:#fff; border:1px solid hsl(var(--dc) / .18); border-top:4px solid hsl(var(--dc)); box-shadow:0 12px 30px hsl(var(--dc) / .1); color:inherit; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; }
.dev-card:hover, .dev-card:focus-visible { transform:translateY(-5px); box-shadow:0 20px 42px hsl(var(--dc) / .2); }
.dev-card__media { margin:-24px -24px 8px; aspect-ratio:16 / 9; overflow:hidden; border-radius:18px 18px 0 0; background:hsl(var(--dc) / .08); position:relative; }
.dev-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.dev-card:hover .dev-card__media img { transform:scale(1.05); }
.dev-card__brand { display:flex; align-items:center; min-height:44px; margin-top:4px; }
.dev-card__mono { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; font-weight:700; letter-spacing:.04em; color:#fff; background:linear-gradient(135deg, hsl(var(--dc)), hsl(var(--dc) / .72)); }
.dev-card h3 { margin:6px 0 0; font-size:1.3rem; }
.dev-card__tag { margin:0; font-size:.88rem; color:#4a566d; }
.dev-card ul { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:4px; font-size:.82rem; color:#33415c; }
.dev-card li::before { content:''; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:hsl(var(--dc)); vertical-align:.1em; }
.dev-card__count { margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:hsl(var(--dc)); }
.dev-card__count svg { width:15px; height:15px; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:22px; }
.project-card { --dc:215 70% 38%; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:#fff; border:1px solid hsl(var(--dc) / .16); box-shadow:0 12px 30px hsl(var(--dc) / .1); transition:transform .3s ease, box-shadow .3s ease; }
.project-card[hidden] { display:none; }
.project-card:hover { transform:translateY(-5px); box-shadow:0 20px 42px hsl(var(--dc) / .2); }
.project-card__media { position:relative; display:block; aspect-ratio:800 / 520; overflow:hidden; }
.project-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.project-card:hover .project-card__media img { transform:scale(1.05); }
.project-card__dev { position:absolute; left:14px; top:14px; padding:5px 12px; border-radius:999px; font-size:.74rem; font-weight:700; color:#fff; background:hsl(var(--dc) / .92); backdrop-filter:blur(6px); }
.project-card__body { display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1; }
.project-card__collection { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--dc)); }
.project-card h3 { margin:0; font-size:1.25rem; line-height:1.2; }
.project-card h3 a { color:inherit; text-decoration:none; }
.project-card__loc { margin:0; display:flex; align-items:center; gap:6px; font-size:.84rem; color:#4a566d; }
.project-card__loc svg { width:15px; height:15px; flex:none; }
.project-card__blurb { margin:0; font-size:.9rem; line-height:1.55; color:#33415c; }
.project-card__more { margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:700; color:hsl(var(--dc)); text-decoration:none; }
.project-card__more svg { width:15px; height:15px; }
.dev-intro { display:grid; gap:28px; align-items:start; }
@media(min-width:900px) { .dev-intro { grid-template-columns:1.6fr 1fr; gap:48px; } }
.dev-intro h2 { font-size:clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); }
.dev-intro__card { display:grid; gap:6px; padding:24px; border-radius:22px; background:#fff; border:1px solid hsl(var(--dc) / .2); border-top:4px solid hsl(var(--dc)); box-shadow:0 12px 30px hsl(var(--dc) / .1); }
.dev-intro__card span { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--dc)); }
.dev-intro__card strong { font-size:1.1rem; margin-bottom:10px; }
.dev-jump { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.dev-jump a { padding:8px 16px; border-radius:999px; font-size:.84rem; font-weight:600; color:hsl(var(--dc)); background:hsl(var(--dc) / .1); text-decoration:none; transition:background .25s ease, color .25s ease; }
.dev-jump a:hover { background:hsl(var(--dc)); color:#fff; }
.project-features { display:grid; gap:clamp(36px, 5vw, 64px); }
.project-feature { --dc:215 70% 38%; display:grid; gap:24px; align-items:center; scroll-margin-top:110px; }
@media(min-width:900px) { .project-feature { grid-template-columns:1.1fr 1fr; gap:48px; } .project-feature--flip .project-feature__media { order:2; } }
.project-feature__media { position:relative; border-radius:24px; overflow:hidden; box-shadow:0 22px 50px hsl(var(--dc) / .22); aspect-ratio:800 / 520; }
.project-feature__media img { width:100%; height:100%; object-fit:cover; }
.project-feature__note { position:absolute; left:14px; bottom:14px; padding:5px 12px; border-radius:999px; font-size:.7rem; font-weight:600; color:#14213a; background:rgba(255,255,255,.88); backdrop-filter:blur(6px); }
.project-feature__copy { display:grid; gap:12px; }
.project-feature__copy .eyebrow { color:hsl(var(--dc)); }
.project-feature__copy .eyebrow::before { background:hsl(var(--dc)); }
.project-feature__copy h3 { margin:0; font-size:clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height:1.12; }
.project-feature__loc { margin:0; display:flex; align-items:center; gap:6px; font-weight:600; color:#4a566d; }
.project-feature__loc svg { width:16px; height:16px; }
.project-feature__tags { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.project-feature__tags li { padding:6px 14px; border-radius:999px; font-size:.8rem; font-weight:600; color:hsl(var(--dc)); background:hsl(var(--dc) / .1); }
.project-feature__actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:8px; }
.project-feature__film { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:700; color:hsl(var(--dc)); text-decoration:none; }
.project-feature__film span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font-size:.7rem; color:#fff; background:hsl(var(--dc)); }
.hero__search-wrap .search-bar { grid-template-columns:repeat(3, 1fr) auto; }
@media(max-width:767px) { .hero__search-wrap .search-bar { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .dev-card, .project-card, .project-card__media img { transition:none; } .dev-card:hover, .project-card:hover { transform:none; } }

.dev-logo { display:block; max-width:150px; max-height:48px; width:auto; height:auto; object-fit:contain; }
.dev-logo { display:block; max-width:150px; max-height:48px; width:auto; height:auto; object-fit:contain; }
.dev-logo--lg { max-width:210px; max-height:70px; margin-bottom:18px; }
.marquee__logo { display:block; max-width:160px; max-height:44px; width:auto; height:auto; object-fit:contain; }

/* ---- Mobile / tablet header menu (replaces the floating bottom dock) ---- */
.nav-toggle, .mobile-menu, .menu-scrim { display: none; }
.mobile-menu[hidden], .menu-scrim[hidden] { display: none !important; }
@media (max-width: 1023px) {
  .site-header__actions { gap: .5rem; }
  .site-header__wa { display: grid; width: 42px; height: 42px; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1.5px solid rgba(15, 34, 68, .16); background: #fff; color: #0f2244; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
  .nav-toggle:hover, .nav-toggle[aria-expanded='true'] { background: #f3efe6; border-color: #c9a24a; }
  .nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; }
  .nav-toggle__bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
  .nav-toggle__bars i:nth-child(1) { top: 0; }
  .nav-toggle__bars i:nth-child(2) { top: 6px; }
  .nav-toggle__bars i:nth-child(3) { top: 12px; }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .menu-scrim { display: block; position: absolute; left: 0; right: 0; top: 100%; height: 100dvh; background: rgba(15, 34, 68, .5); }
  .mobile-menu { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--color-border); box-shadow: 0 28px 48px rgba(15, 34, 68, .22);
    max-height: calc(100dvh - var(--header-h) - var(--ann-h, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px calc(20px + env(safe-area-inset-bottom)); }
  .mobile-menu__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 4px; font-size: 1.08rem; font-weight: 600; color: #14233f; border-bottom: 1px solid rgba(15, 34, 68, .08); }
  .mobile-menu__nav a svg { width: 18px; height: 18px; color: #9aa6bd; }
  .mobile-menu__nav a[aria-current='page'] { color: #1d4ba0; }
  .mobile-menu__nav a[aria-current='page'] svg { color: #c9a24a; }
  .mobile-menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; }
  .mobile-menu__actions .btn { min-height: 48px; justify-content: center; gap: .5rem; }
  .mobile-menu__actions .btn svg { width: 18px; height: 18px; flex: none; }
  .mobile-menu__cta, .mobile-menu__chat { grid-column: 1 / -1; }
  html.menu-open { overflow: hidden; }
  html.menu-open .site-header { z-index: 160; } /* above the cookie banner while the menu is open */

  /* No floating buttons at the bottom of the screen: WhatsApp and chat are in the header menu. */
  .whatsapp-float, .back-top { display: none !important; }
  .swk-chat__launcher { position: absolute; visibility: hidden; pointer-events: none; }
}
@media (min-width: 1024px) { .nav-toggle, .mobile-menu, .menu-scrim { display: none !important; } }

/* ---- Single-row carousels (Home: developers, spotlight) ---- */
.row-carousel { position: relative; }
.row-carousel__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 10px 4px 30px; margin-inline: -4px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.row-carousel__track::-webkit-scrollbar { display: none; }
.row-carousel__track > * { flex: 0 0 clamp(250px, 78vw, 300px); scroll-snap-align: start; }
.row-carousel__track > .project-card { flex-basis: clamp(280px, 84vw, 360px); }
@media (min-width: 768px) {
  .row-carousel__track > * { flex-basis: calc((100% - 40px) / 3); }
  .row-carousel__track > .project-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (min-width: 1100px) {
  .row-carousel__track > * { flex-basis: calc((100% - 60px) / 4); }
  .row-carousel__track > .project-card { flex-basis: calc((100% - 40px) / 3); }
}
.row-carousel__btn { position: absolute; top: calc(50% - 15px); z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--color-border);
  background: #fff; color: #0f2244; box-shadow: 0 8px 24px rgba(15, 34, 68, .18); cursor: pointer; transition: opacity .2s ease, background .2s ease, color .2s ease; }
.row-carousel__btn svg { width: 20px; height: 20px; }
.row-carousel__btn:hover { background: #0f2244; color: #fff; }
.row-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.row-carousel__btn--prev { left: -12px; }
.row-carousel__btn--next { right: -12px; }
@media (max-width: 767px) { .row-carousel__btn { display: none; } }
@media (min-width: 1360px) { .row-carousel__btn--prev { left: -24px; } .row-carousel__btn--next { right: -24px; } }
@media (prefers-reduced-motion: reduce) { .row-carousel__track { scroll-behavior: auto; } }

/* ==========================================================================
   UHD Optical Clarity, Extended 3-Act Aerial Video & Pinterest Luxury Redesign
   ========================================================================== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Never hide lazy images behind an opacity-0 skeleton when scrolling fast */
.js img[loading='lazy'] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Sleek Floating Architectural Glass Header (No rainbow stripe or rainbow pills) ---- */
.site-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(15, 26, 46, 0.08);
  box-shadow: 0 10px 36px rgba(8, 16, 30, 0.06) !important;
}

.site-header::after {
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 162, 74, 0.65) 50%, transparent 100%) !important;
  opacity: 1 !important;
}

.site-nav a {
  --c: 215 65% 18% !important;
  color: #0f1d36 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 0.5rem 0.95rem !important;
}

.site-nav a:hover {
  background: rgba(15, 29, 54, 0.06) !important;
  color: #0b1528 !important;
  transform: translateY(-1px);
}

.site-nav a[aria-current='page'] {
  background: #0b1528 !important;
  color: #f6d48a !important;
  box-shadow: 0 4px 14px rgba(11, 21, 40, 0.18) !important;
}

.site-nav a[aria-current='page']::before {
  background: #f6d48a !important;
}

.site-header__cta {
  background: linear-gradient(135deg, #0d1b33 0%, #071020 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(217, 177, 90, 0.55) !important;
  box-shadow: 0 10px 26px rgba(8, 16, 30, 0.22) !important;
}

.site-header__cta:hover {
  background: linear-gradient(135deg, #162b4d 0%, #0b162c 100%) !important;
  border-color: #f6d48a !important;
}

/* ==========================================================================
   PINTEREST-INSPIRED WORLD-CLASS UAE LUXURY REAL ESTATE DESIGN SYSTEM
   (Omniyat / Sobha / Ellington / Architectural Digest Editorial Aesthetic)
   ========================================================================== */

/* 1. Replace Pastel Rainbow Section Tints with Curated Luxury Gallery Palette */
body {
  background: #f7f5f0 !important;
  color: #0c1729 !important;
}

main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+1),
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+3),
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+5) {
  --sec: 38 72% 42%;
  background: #f7f4ee;
}

main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+2),
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n+4),
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):nth-of-type(6n) {
  --sec: 38 72% 42%;
  background: #ffffff;
}

/* Refined Section Headings (Remove heavy artificial stroke, add editorial poise) */
h1, h2, h3, .section-header h2, .section-head-row h2 {
  -webkit-text-stroke: 0 !important;
  letter-spacing: -0.03em !important;
  color: #0b1629;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: #9e7425 !important;
}

.eyebrow::before {
  width: 28px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, #c89838, #e8c468) !important;
}

/* 2. Value Strip Under Hero -> Dark Obsidian Institutional Proof Bar */
.value-strip {
  background: linear-gradient(90deg, #070f1e 0%, #0c1a32 50%, #070f1e 100%) !important;
  border-block: 1px solid rgba(217, 177, 90, 0.35) !important;
  padding-block: clamp(2.4rem, 4.2vw, 3.6rem) !important;
  box-shadow: 0 24px 60px rgba(5, 11, 22, 0.18);
}

.value-item {
  position: relative;
  padding: 0.75rem 1.5rem !important;
  text-align: left !important;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0.25rem 1rem;
  align-items: start;
}

@media (min-width: 900px) {
  .value-item + .value-item {
    border-left: 1px solid rgba(217, 177, 90, 0.22) !important;
  }
}

.value-item__icon {
  grid-row: 1 / 3;
  margin: 0 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: rgba(217, 177, 90, 0.12) !important;
  border: 1px solid rgba(217, 177, 90, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #f6d48a !important;
}

.value-item h3 {
  color: #ffffff !important;
  font-family: 'Clash Display', var(--font-display), sans-serif !important;
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem !important;
}

.value-item p {
  color: rgba(220, 230, 244, 0.80) !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 28ch !important;
}

/* 3. Pinterest Editorial Developer & Project Cards (Zero Rainbow Borders) */
.dev-card,
.project-card {
  border-radius: 26px !important;
  background: #ffffff !important;
  border: 1px solid rgba(12, 23, 41, 0.09) !important;
  border-top: 1px solid rgba(12, 23, 41, 0.09) !important;
  box-shadow: 0 18px 46px rgba(10, 20, 38, 0.07) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important;
  overflow: hidden;
}

.dev-card:hover,
.project-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(200, 152, 56, 0.55) !important;
  box-shadow: 0 28px 64px rgba(10, 20, 38, 0.15) !important;
}

.dev-card__media,
.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
  border-radius: 22px 22px 0 0 !important;
  background: #0d1b33 !important;
}

.dev-card__media::after,
.project-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 28, 0.14) 0%, transparent 40%, rgba(7, 14, 28, 0.44) 100%);
  pointer-events: none;
}

.dev-card__media img,
.project-card__media img {
  filter: contrast(1.07) saturate(1.10);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dev-card:hover .dev-card__media img,
.project-card:hover .project-card__media img {
  transform: scale(1.08) !important;
}

.dev-card li::before {
  background: #c89838 !important;
}

.project-card__dev {
  z-index: 2;
  left: 16px !important;
  top: 16px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #f6d48a !important;
  background: rgba(8, 16, 30, 0.82) !important;
  border: 1px solid rgba(217, 177, 90, 0.48) !important;
  backdrop-filter: blur(10px) !important;
}

.project-card__body {
  padding: 24px 26px 26px !important;
  gap: 10px !important;
}

.project-card__collection {
  color: #9e7425 !important;
  letter-spacing: 0.14em !important;
  font-size: 0.70rem !important;
}

.project-card h3,
.dev-card h3 {
  font-family: 'Clash Display', var(--font-display), sans-serif !important;
  font-size: 1.38rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #0b1528 !important;
}

.project-card__more,
.dev-card__count {
  margin-top: auto;
  padding-top: 14px !important;
  border-top: 1px solid rgba(12, 23, 41, 0.08);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #0b1528 !important;
  letter-spacing: 0.02em;
}

.project-card__more svg,
.dev-card__count svg {
  width: 30px !important;
  height: 30px !important;
  padding: 6px;
  border-radius: 50%;
  background: rgba(200, 152, 56, 0.14);
  color: #8f6519;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.project-card:hover .project-card__more svg,
.dev-card:hover .dev-card__count svg {
  background: #0b1528;
  color: #f6d48a;
  transform: translateX(4px);
}

/* 5. Editorial Story Block & Architectural Stat Tiles */
.story__media {
  position: relative;
}

.story__media::before {
  content: '';
  position: absolute;
  inset: -12px 12px 12px -12px;
  border-radius: 28px;
  border: 1.5px solid rgba(200, 152, 56, 0.45);
  pointer-events: none;
  z-index: 0;
}

.story__media img {
  position: relative;
  z-index: 1;
  border-radius: 26px !important;
  box-shadow: 0 28px 68px rgba(10, 20, 38, 0.18) !important;
  filter: contrast(1.06) saturate(1.08);
}

.story__stats {
  border-block: 0 !important;
  gap: 14px !important;
}

.story__stats > div {
  padding: 18px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(12, 23, 41, 0.08);
  box-shadow: 0 12px 32px rgba(10, 20, 38, 0.05);
}

.story__num {
  font-family: 'Clash Display', var(--font-display), sans-serif !important;
  font-weight: 600 !important;
  color: #0b1528 !important;
}

/* 6. Developer Partner Marquee Pills */
.marquee__item {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(12, 23, 41, 0.08) !important;
  box-shadow: 0 10px 28px rgba(10, 20, 38, 0.05) !important;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.marquee__item:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 152, 56, 0.55) !important;
}

/* 7. Services Advisory Cards & Journal Cards */
.blog-card {
  border-radius: 26px !important;
  overflow: hidden;
  border: 1px solid rgba(12, 23, 41, 0.08) !important;
  box-shadow: 0 16px 44px rgba(10, 20, 38, 0.07) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

.blog-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(200, 152, 56, 0.52) !important;
  box-shadow: 0 28px 62px rgba(10, 20, 38, 0.14) !important;
}

/* 9. CTA Band: Architectural Gold & Obsidian Finish */
.cta-band {
  border-radius: 30px !important;
  background: linear-gradient(135deg, #07101f 0%, #0f2242 55%, #09152b 100%) !important;
  border: 1.5px solid rgba(217, 177, 90, 0.48) !important;
  box-shadow: 0 32px 80px rgba(6, 12, 24, 0.28) !important;
}

/* ==========================================================================
   SWK design system layer. Loaded last: one source of truth for the hero, section cards and shared
   tokens, so every page uses the same radius, border, shadow, gold accent and type scale.
   ========================================================================== */

:root {
  --sys-radius: 22px;
  --sys-radius-sm: 14px;
  --sys-border: 1px solid rgba(15, 29, 54, 0.1);
  --sys-border-gold: 1px solid rgba(201, 154, 61, 0.45);
  --sys-shadow: 0 1px 2px rgba(11, 21, 40, 0.05), 0 12px 32px rgba(11, 21, 40, 0.08);
  --sys-shadow-lift: 0 2px 4px rgba(11, 21, 40, 0.06), 0 26px 56px rgba(11, 21, 40, 0.16);
  --sys-ink: #0b1528;
  --sys-ink-soft: #4a5468;
  --sys-gold: #c99a3d;
  --sys-gold-light: #f6d48a;
  --sys-surface: #ffffff;
  --sys-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- Hero: Interactive Scroll-Animated Stage */

.js .hero-cine:not(.is-flat) {
  position: relative;
  height: 380vh;
  height: 380svh;
}
@media (max-width: 767px) {
  .js .hero-cine:not(.is-flat) {
    height: 340vh;
    height: 340svh;
  }
}
.js .hero-cine:not(.is-flat) .hero {
  position: sticky;
  top: 0;
}

.hero__bg {
  background: #0b1528;
}
/* Lossless poster from the exact corrected opening frame. */
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/assets/images/hero/hero-swk-poster-hq.webp') center / cover no-repeat;
  opacity: clamp(0, calc(1 - var(--p, 0) * 28), 1);
  pointer-events: none;
  will-change: opacity;
}
/* Optical framing veil: gives center typography crisp cinema contrast while keeping the skyline vivid. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 64% 48% at 50% 43%, rgba(5, 12, 24, 0.44) 0%, rgba(5, 12, 24, 0.18) 56%, rgba(5, 12, 24, 0) 84%),
    linear-gradient(180deg, rgba(4, 10, 20, 0.26) 0%, rgba(4, 10, 20, 0.04) 38%, rgba(4, 10, 20, 0.14) 72%, rgba(4, 10, 20, 0.52) 100%);
  pointer-events: none;
}

/* Keep the decoded frame on its native plane: pointer zoom resampled fine detail. */
.hero__video { transform: none; }


.hero__content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); text-align: center; }

/* Hook beats: stacked in one grid cell, one visible at a time, continuously scrubbed by scroll. */
.hero__stage { display: grid; place-items: center; width: 100%; min-height: clamp(160px, 25vh, 250px); perspective: 1100px; }
.hero__beat {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  max-width: min(100%, 920px); opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity 0.9s var(--sys-ease), transform 0.9s var(--sys-ease), filter 0.9s var(--sys-ease);
  pointer-events: none;
}
.hero[data-phase='b1'] [data-beat='b1'],
.hero[data-phase='b2'] [data-beat='b2'],
.hero[data-phase='b3'] [data-beat='b3'] { opacity: 1; transform: none; filter: none; pointer-events: auto; }

.hero.is-scroll-ready .hero__beat {
  opacity: var(--beat-o, 0);
  transform: translate3d(calc(var(--cam-x, 0px) * -0.35), var(--beat-y, 22px), 0) scale(var(--beat-s, 0.96));
  filter: blur(var(--beat-blur, 0px));
  transition: none;
  will-change: opacity, transform, filter;
}

/* Glossy obsidian-glass kicker badge with live glowing dot */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 26, 48, 0.84) 0%, rgba(7, 13, 26, 0.9) 100%);
  border: 1px solid rgba(246, 212, 138, 0.55);
  box-shadow: 0 8px 24px rgba(4, 10, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff6df;
  font-family: 'General Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform 0.35s var(--sys-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.hero__kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sys-gold-light);
  box-shadow: 0 0 10px var(--sys-gold-light);
}

/* Bold, glossy, interactive hero headline with liquid-pearl & champagne specular sheen */
.hero__hook:not(#_) {
  margin: 0;
  font-family: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.45rem, 5.4vw, 4.7rem);
  line-height: 1.04;
  letter-spacing: -0.03em !important;
  word-spacing: 0.02em !important;
  color: #ffffff;
  background-image: linear-gradient(
    115deg,
    #ffffff 0%,
    #f7fbff 22%,
    #ffe9b3 46%,
    #ffffff 54%,
    #e8f1fc 78%,
    #ffffff 100%
  );
  background-size: 240% 100%;
  background-position: var(--gloss-x, 12%) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 4px rgba(4, 10, 22, 0.92))
    drop-shadow(0 12px 32px rgba(4, 10, 22, 0.78));
  cursor: pointer;
  transition:
    transform 0.45s var(--sys-ease),
    background-position 0.65s var(--sys-ease),
    filter 0.45s var(--sys-ease);
}

.hero__beat:hover .hero__hook:not(#_),
.hero__hook:not(#_):hover {
  transform: translateY(-4px) scale(1.028);
  background-position: 92% 50%;
  filter:
    drop-shadow(0 3px 6px rgba(4, 10, 22, 0.95))
    drop-shadow(0 16px 38px rgba(4, 10, 22, 0.85))
    drop-shadow(0 0 26px rgba(246, 212, 138, 0.52));
}
.hero__beat:hover .hero__kicker {
  transform: translateY(-2px);
  border-color: rgba(246, 212, 138, 0.92);
  box-shadow: 0 10px 28px rgba(4, 10, 22, 0.55), 0 0 18px rgba(246, 212, 138, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hero__lead {
  margin: 0;
  color: #ffffff;
  font-family: 'General Sans', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.05rem, 1.32vw, 1.24rem);
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 6px rgba(4, 10, 22, 0.94), 0 6px 24px rgba(4, 10, 22, 0.85);
  transition: transform 0.35s var(--sys-ease), color 0.35s ease;
}
.hero__beat:hover .hero__lead {
  color: #fff9eb;
  transform: translateY(-1px);
}

.hero__dock { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; transition: opacity 0.8s var(--sys-ease), transform 0.8s var(--sys-ease); }
.hero.is-scroll-ready .hero__dock {
  opacity: var(--dock-o, 1);
  transform: translate3d(0, var(--dock-y, 0px), 0) scale(var(--dock-s, 1));
  transition: none;
  will-change: opacity, transform;
}
.hero.is-leaving .hero__dock { pointer-events: none; }
.hero__ctas { justify-content: center; margin: 0; }
.hero__ctas .btn {
  font-family: 'General Sans', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.35s var(--sys-ease), box-shadow 0.35s var(--sys-ease), background 0.35s ease, border-color 0.35s ease;
}
.hero__ctas .btn-primary {
  background: linear-gradient(180deg, #1b3158 0%, #0d1a32 52%, #081122 100%);
  border: 1px solid rgba(246, 212, 138, 0.48);
  box-shadow: 0 12px 30px rgba(4, 10, 22, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.hero__ctas .btn-primary:hover,
.hero__ctas .btn-primary:focus-visible {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(246, 212, 138, 0.9);
  box-shadow: 0 16px 36px rgba(4, 10, 22, 0.6), 0 0 22px rgba(246, 212, 138, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.hero__ctas .btn-outline-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 245, 252, 0.9) 100%);
  color: #0b1528 !important;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(4, 10, 22, 0.38), inset 0 1px 0 #ffffff;
}
.hero__ctas .btn-outline-dark:hover,
.hero__ctas .btn-outline-dark:focus-visible {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(180deg, #ffffff 0%, #fff6df 100%);
  border-color: var(--sys-gold-light);
  box-shadow: 0 16px 36px rgba(4, 10, 22, 0.5), 0 0 22px rgba(246, 212, 138, 0.38);
}

.hero__search-wrap { width: min(100%, 960px); margin: 0 auto; }

/* Closing logo reveal: a neutral dip, then mark, rule, name, tagline and actions resolve with scroll. */
.hero__reveal {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(5, 9, 18, 0.64) 0%, rgba(5, 9, 18, 0.48) 55%, rgba(5, 9, 18, 0.62) 100%);
  transition: opacity 1.2s ease;
}
.hero__reveal-inner { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 0 var(--space-5); text-align: center; }
.hero__reveal-logo {
  width: clamp(140px, 17vw, 230px); height: auto; opacity: 0; transform: scale(0.88); filter: blur(16px) brightness(1.7);
  transition: opacity 1.4s ease 0.35s, transform 1.8s var(--sys-ease) 0.35s, filter 1.6s ease 0.35s;
}
.hero__reveal-rule { display: block; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sys-gold-light), transparent); transition: width 1.4s var(--sys-ease) 1.1s; }
.hero__reveal-name {
  color: #fff; font-family: 'General Sans', 'Clash Display', sans-serif; font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 2rem);
  letter-spacing: 0.7em; margin-right: -0.7em; opacity: 0;
  background: linear-gradient(115deg, #ffffff 0%, #ffe9b3 48%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.65));
  transition: opacity 1.2s ease 1.3s, letter-spacing 2.2s var(--sys-ease) 1.3s;
}
.hero__reveal-tag {
  color: var(--sys-gold-light); font-size: clamp(0.68rem, 0.92vw, 0.8rem); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity 1s ease 1.9s, transform 1s var(--sys-ease) 1.9s;
}
.hero__reveal-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3);
  opacity: 0; transform: translateY(12px); transition: opacity 0.9s ease 2.1s, transform 0.9s var(--sys-ease) 2.1s;
}

.hero[data-phase='logo'] .hero__reveal { opacity: 1; }
.hero[data-phase='logo'] .hero__reveal-logo { opacity: 1; transform: none; filter: drop-shadow(0 6px 28px rgba(201, 154, 61, 0.35)); }
.hero[data-phase='logo'] .hero__reveal-rule { width: clamp(120px, 14vw, 200px); }
.hero[data-phase='logo'] .hero__reveal-name { opacity: 1; letter-spacing: 0.34em; margin-right: -0.34em; }
.hero[data-phase='logo'] .hero__reveal-tag { opacity: 1; transform: none; }
.hero[data-phase='logo'] .hero__reveal-actions { opacity: 1; transform: none; pointer-events: auto; }
.hero[data-phase='logo'] .hero__dock,
.hero[data-phase='logo'] .hero__scroll-cue { opacity: 0; transform: translateY(14px); pointer-events: none; }

.hero.is-scroll-ready .hero__reveal { opacity: var(--rv, 0); transition: none; }
.hero.is-scroll-ready .hero__reveal-logo {
  opacity: clamp(0, calc(var(--rv, 0) * 1.35), 1);
  transform: scale(calc(0.86 + var(--rv, 0) * 0.14)) translateY(calc((1 - var(--rv, 0)) * 16px));
  filter: blur(calc((1 - var(--rv, 0)) * 12px)) drop-shadow(0 6px 28px rgba(201, 154, 61, 0.35));
  transition: none;
}
.hero.is-scroll-ready .hero__reveal-rule {
  width: calc(var(--rv, 0) * clamp(120px, 14vw, 200px));
  transition: none;
}
.hero.is-scroll-ready .hero__reveal-name {
  opacity: clamp(0, calc((var(--rv, 0) - 0.16) * 1.4), 1);
  letter-spacing: calc(0.68em - var(--rv, 0) * 0.34em);
  margin-right: calc(-0.68em + var(--rv, 0) * 0.34em);
  transition: none;
}
.hero.is-scroll-ready .hero__reveal-tag {
  opacity: clamp(0, calc((var(--rv, 0) - 0.30) * 1.5), 1);
  transform: translateY(calc((1 - var(--rv, 0)) * 10px));
  transition: none;
}
.hero.is-scroll-ready .hero__reveal-actions {
  opacity: clamp(0, calc((var(--rv, 0) - 0.44) * 1.8), 1);
  transform: translateY(calc((1 - var(--rv, 0)) * 12px));
  pointer-events: none;
  transition: none;
}
.hero.is-scroll-ready[data-phase='logo'] .hero__reveal-actions { pointer-events: auto; }

.hero .hero__scroll-cue {
  color: #fff;
  text-shadow: 0 1px 10px rgba(8, 18, 36, 0.6);
  opacity: clamp(0, calc(1 - var(--p, 0) * 8), 1);
  transition: opacity 0.4s ease;
}
.hero .hero__scroll-cue .line { background: linear-gradient(to bottom, var(--sys-gold-light), transparent); }
.hero-art-credit { position: absolute; left: 28px; bottom: 24px; z-index: 6; font-size: 0.62rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 8px rgba(8, 18, 36, 0.7); pointer-events: none; }

@media (max-width: 767px) {
  .hero-art-credit { left: 16px; bottom: 16px; }
  .hero__stage { min-height: 150px; }
  .hero__hook:not(#_) { font-size: clamp(1.95rem, 8.2vw, 2.55rem); }
  .hero__content { gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-cine { height: auto !important; }
  .js .hero-cine .hero { position: relative !important; }
  .hero__beat, .hero__reveal, .hero__reveal-logo, .hero__reveal-name, .hero__reveal-tag, .hero__dock { transition: none; }
}

/* ---------------------------------------------------------------- Obsidian sections (dark rhythm: communities, testimonials, CTA) */

main > section.section--obsidian {
  background: linear-gradient(165deg, #080d18 0%, #0f1829 52%, #090e1a 100%) !important;
  color: #fff !important;
  padding-block: clamp(4.5rem, 8vw, 7rem) !important;
}
main > section.section--obsidian .eyebrow { color: var(--sys-gold-light) !important; }
main > section.section--obsidian .eyebrow::before { background: var(--sys-gold-light) !important; }
main > section.section--obsidian h2,
main > section.section--obsidian .cascade-text,
main > section.section--obsidian .cascade-text__char {
  --cascade-color: #fff !important; --cascade-hover-color: var(--sys-gold-light) !important;
  color: #fff !important; -webkit-text-stroke: 0 !important;
}
main > section.section--obsidian .section-header p { color: rgba(232, 238, 248, 0.82) !important; }

/* ---------------------------------------------------------------- Where to live: 8 tiles, always two rows */

.place-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.place-card {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--sys-radius); overflow: hidden; isolation: isolate;
  background: #0a101c; border: 1px solid rgba(246, 212, 138, 0.26); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
  color: #fff; text-decoration: none;
  transition: transform 0.6s var(--sys-ease), border-color 0.4s ease, box-shadow 0.6s var(--sys-ease);
}
.place-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sys-ease); }
.place-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0) 36%, rgba(5, 8, 15, 0.5) 66%, rgba(5, 8, 15, 0.9) 100%);
}
.place-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 20px 22px; }
.place-card h3 { margin: 0; color: #fff; font-family: 'Clash Display', 'General Sans', sans-serif; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.place-card__count {
  padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sys-gold-light);
  background: rgba(8, 12, 22, 0.66); border: 1px solid rgba(246, 212, 138, 0.4);
}
.place-card__num {
  position: absolute; top: 16px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.place-card__num::after { content: ''; width: 22px; height: 1px; background: var(--sys-gold-light); }
.place-card__go {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: #fff; background: rgba(8, 12, 22, 0.45); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px);
  transition: background 0.4s ease, color 0.4s ease, transform 0.5s var(--sys-ease), border-color 0.4s ease;
}
.place-card__go svg { width: 16px; height: 16px; transform: rotate(-45deg); transition: transform 0.5s var(--sys-ease); }
.place-card:hover, .place-card:focus-visible { transform: translateY(-6px); border-color: rgba(246, 212, 138, 0.7); box-shadow: 0 30px 64px rgba(0, 0, 0, 0.5); }
.place-card:hover img, .place-card:focus-visible img { transform: scale(1.07); }
.place-card:hover .place-card__go, .place-card:focus-visible .place-card__go { background: var(--sys-gold-light); color: var(--sys-ink); border-color: var(--sys-gold-light); }
.place-card:hover .place-card__go svg { transform: rotate(0); }

/* Below 900px the same two rows scroll sideways instead of stacking into one long column. */
@media (max-width: 899px) {
  .place-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: min(54vw, 240px);
    gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 6px var(--space-5) 16px; margin-inline: calc(var(--space-5) * -1);
  }
  .place-grid::-webkit-scrollbar { display: none; }
  .place-grid { scroll-padding-inline: var(--space-5); }
  .place-card { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- How we help: hairline bento */

.svc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden;
  background: rgba(11, 21, 40, 0.1); border: var(--sys-border); border-radius: 26px; box-shadow: var(--sys-shadow);
}
.svc-card {
  position: relative; display: flex; flex-direction: column; gap: 0.7rem; min-height: 270px; isolation: isolate;
  padding: clamp(1.5rem, 2.4vw, 2.2rem); background: var(--sys-surface); color: inherit; text-decoration: none;
}
.svc-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.45s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 154, 61, 0.16), transparent 62%);
}
.svc-card:hover::before, .svc-card:focus-visible::before { opacity: 1; }
.svc-card__num { position: absolute; top: 1.5rem; right: 1.7rem; color: #b4a584; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; }
.svc-card__icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 0.6rem; border-radius: 16px; color: #8a6420;
  background: linear-gradient(145deg, #fbf3df, #f3e3b8); border: var(--sys-border-gold);
  transition: transform 0.6s var(--sys-ease), background 0.4s ease, color 0.4s ease;
}
.svc-card__icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.svc-card h3 { margin: 0; color: var(--sys-ink); font-family: 'Clash Display', 'General Sans', sans-serif; font-size: 1.22rem; font-weight: 600; letter-spacing: -0.02em; }
.svc-card p { margin: 0; color: var(--sys-ink-soft); font-size: 0.95rem; line-height: 1.6; }
.svc-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 0.6rem; color: #8a6420; font-size: 0.86rem; font-weight: 700; }
.svc-card__more svg { width: 15px; height: 15px; transition: transform 0.45s var(--sys-ease); }
a.svc-card:hover .svc-card__icon { transform: translateY(-4px) rotate(-6deg); background: var(--sys-ink); color: var(--sys-gold-light); }
a.svc-card:hover .svc-card__more svg { transform: translateX(5px); }
@media (max-width: 999px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .svc-grid { grid-template-columns: 1fr; border-radius: 22px; } .svc-card { min-height: 0; } }

/* ---------------------------------------------------------------- Testimonials: opposing marquee rows */

.voices { display: grid; gap: 20px; margin-top: var(--space-7); }
.voices__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 6vw, 4.5rem); margin: 0 0 var(--space-4); padding: 0; list-style: none; text-align: center; }
.voices__stats strong { display: block; color: var(--sys-gold-light); font-family: 'Clash Display', 'General Sans', sans-serif; font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 600; line-height: 1; }
.voices__stats span { display: block; margin-top: 6px; color: rgba(232, 238, 248, 0.7); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

.voices__row {
  overflow-x: auto; scrollbar-width: none; outline-offset: -2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.voices__row::-webkit-scrollbar { display: none; }
.voices.is-marquee .voices__row { overflow: hidden; }
.voices__track { display: flex; width: max-content; padding-block: 6px; }
.voices.is-marquee .voices__track { animation: voices-left var(--voices-dur, 60s) linear infinite; will-change: transform; }
.voices.is-marquee .voices__row[data-dir='right'] .voices__track { animation-name: voices-right; }
.voices.is-marquee .voices__row:hover .voices__track,
.voices.is-marquee .voices__row:focus-within .voices__track,
.voices.is-paused .voices__track { animation-play-state: paused; }
@keyframes voices-left { to { transform: translateX(-50%); } }
@keyframes voices-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.voice {
  flex: 0 0 min(390px, 82vw); display: flex; flex-direction: column; gap: 18px; margin: 0 20px 0 0; padding: 26px 26px 22px;
  border-radius: var(--sys-radius); color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(246, 212, 138, 0.22); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.voice__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.voice__stars { color: var(--sys-gold-light); font-size: 0.95rem; letter-spacing: 0.14em; }
.voice__country { margin-left: auto; padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: rgba(232, 238, 248, 0.86); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); }
.voice blockquote { flex: 1; margin: 0; color: #fff; font-family: 'Instrument Serif', Georgia, serif; font-size: 1.32rem; line-height: 1.42; }
.voice figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.voice__avatar { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; color: var(--sys-ink); font-size: 0.82rem; font-weight: 700; background: linear-gradient(145deg, #f8dc95, #c99a3d); }
.voice figcaption strong { display: block; color: #fff; font-size: 0.95rem; }
.voice figcaption small { display: block; color: rgba(232, 238, 248, 0.68); font-size: 0.8rem; line-height: 1.4; }
.voices__pause { justify-self: center; margin-top: var(--space-2); padding: 8px 20px; border-radius: 999px; color: var(--sys-gold-light); font-size: 0.8rem; font-weight: 700; background: transparent; border: 1px solid rgba(246, 212, 138, 0.5); cursor: pointer; }
.voices__pause:hover { background: rgba(246, 212, 138, 0.14); }
@media (prefers-reduced-motion: reduce) { .voices__track { animation: none !important; } }

/* ==========================================================================
   Site-wide consistency
   One accent family (ink + champagne gold), one heading system, one card radius, one page-header look.
   ========================================================================== */

/* Accent hues: the legacy rainbow (blue / teal / terracotta / plum / green) collapses to ink and gold. */
:root {
  --hue-navy: 222 55% 14%; --hue-teal: 38 78% 40%; --hue-terra: 222 55% 14%;
  --hue-gold: 38 78% 40%; --hue-plum: 222 55% 14%; --hue-green: 38 78% 40%;
  --sys-radius: 26px;
}
.quick-tile { --qc: 222 55% 14%; }
.quick-tile--wa, .quick-tile--cb { --qc: 38 78% 40%; }
.quick-tile--mail { --qc: 222 55% 14%; }
.quick-tile { border-radius: var(--sys-radius-sm); }

/* ---- Type scale. Clash Display for h1 and h3, Instrument Serif for section titles (h2).
   ":not(#_)" raises specificity so the scale beats older per-component sizes. ---- */
:root {
  --t-h1: clamp(2.1rem, 3.6vw + 0.8rem, 4rem);
  --t-h2: clamp(2.1rem, 3.1vw + 0.6rem, 3.5rem);
  --t-h2-sm: clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
  --t-h3: 1.3rem;
  --t-h3-lg: 1.85rem;
}
h1:not(#_), .page-hero__title:not(#_) {
  font-family: 'Clash Display', 'General Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.015em !important; word-spacing: 0.08em;
}
main h2:not(#_) {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.03em; line-height: 1.06; font-size: var(--t-h2);
}
main :is(.prose, .legal, .ui-card__head, .dev-intro) h2:not(#_) { font-size: var(--t-h2-sm); line-height: 1.15; }
main h3:not(#_) {
  font-family: 'Clash Display', 'General Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-size: var(--t-h3);
}
main .project-feature__copy h3:not(#_) { font-size: var(--t-h3-lg); }
.not-found h1:not(#_) { font-size: var(--t-h1); }

/* ---- Cards and panels share one radius. ---- */
.dev-card, .project-card, .blog-card, .team-card, .cta-band, .place-card, .voice, .step-item, .calc, .story__stats > div, .marquee__item {
  border-radius: var(--sys-radius) !important;
}
.svc-grid { border-radius: var(--sys-radius); }
.glass-panel, .search-bar { border-radius: 999px; }
@media (max-width: 767px) { .search-bar.glass-panel { border-radius: 26px; } }

/* ---- Page headers: the same dark photo treatment as the home hero ---- */
.page-hero, .page-hero--photo {
  background: #0a101c !important; color: #fff; animation: none !important;
  min-height: clamp(300px, 44vh, 460px); display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--ann-h, 0px) + var(--space-7)) !important;
  padding-bottom: calc(var(--space-7) + 12px) !important;
}
.page-hero > .container { width: 100%; }
.page-hero::before { display: none !important; }
.page-hero::after,
.page-hero--photo::after {
  background:
    linear-gradient(90deg, rgba(5, 8, 15, 0.78) 0%, rgba(5, 8, 15, 0.52) 42%, rgba(5, 8, 15, 0.1) 100%),
    linear-gradient(0deg, rgba(5, 8, 15, 0.5) 0%, rgba(5, 8, 15, 0) 42%) !important;
}
.page-hero__bg img { filter: none !important; animation: none !important; }
.page-hero__title {
  color: #fff !important; -webkit-text-fill-color: #fff !important; -webkit-text-stroke: 0 !important; background: none !important; filter: none !important;
  font-size: clamp(2.1rem, 3.6vw + 0.8rem, 4rem) !important; line-height: 1.08 !important; max-width: 22ch;
  text-shadow: 0 1px 3px rgba(5, 10, 20, 0.5), 0 2px 26px rgba(5, 10, 20, 0.6) !important;
}
.page-hero p { color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 1px 14px rgba(5, 10, 20, 0.6) !important; font-weight: 500; }
.page-hero p svg { color: var(--sys-gold-light) !important; }
.page-hero .breadcrumbs, .page-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.86) !important; font-weight: 600; text-shadow: 0 1px 8px rgba(5, 10, 20, 0.6); }
.page-hero .breadcrumbs a:hover { color: var(--sys-gold-light) !important; }
.page-hero .badge-gold, .page-hero .badge { box-shadow: none; }
.page-hero--photo .photo-credit { color: rgba(255, 255, 255, 0.9); background: rgba(8, 12, 22, 0.6); border: 1px solid rgba(255, 255, 255, 0.18); }
.page-hero--photo .photo-credit:hover { background: rgba(8, 12, 22, 0.85); }
@media (max-width: 767px) {
  .page-hero, .page-hero--photo { min-height: 0; padding-top: calc(64px + var(--ann-h, 0px) + var(--space-6)) !important; padding-bottom: var(--space-7) !important; }
  .page-hero::after, .page-hero--photo::after { background: linear-gradient(180deg, rgba(5, 8, 15, 0.6) 0%, rgba(5, 8, 15, 0.55) 100%) !important; }
}

/* The strip between a hero and the first block: a single gold hairline, no navy shadow. */
.page-hero + section, .hero-cine + section { box-shadow: none !important; }
.page-hero + section::before, .hero-cine + section::before { height: 2px !important; background: linear-gradient(90deg, transparent, var(--sys-gold), transparent) !important; }

/* ---- Leftover blue / multicolour surfaces from the previous palette ---- */
.property-grid > .property-card:not(.property-card--feature),
.blog-grid > .blog-card { --tc: 38 78% 40% !important; border-top: 1px solid rgba(12, 23, 41, 0.08) !important; background: #fff !important; }
.footer-news { background: linear-gradient(135deg, #0f1829 0%, #080d18 100%); border: 1px solid rgba(246, 212, 138, 0.28); border-radius: var(--sys-radius); }
.scroll-progress { background: linear-gradient(90deg, var(--sys-gold), var(--sys-gold-light)); }

/* ---- Value strip: columns may shrink; one column on phones and tablets (it overflowed the viewport at 390px). ---- */
.value-strip__grid > * { min-width: 0; }
@media (max-width: 899px) {
  .value-strip__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .value-item { padding-inline: 0 !important; }
}

/* ---- Per-developer / per-person accent hues inlined by the build collapse to the one gold accent. ---- */
[style*='--dc'] { --dc: 38 78% 40% !important; }
[style*='--theme-color'] { --theme-color: 38 78% 40% !important; }

/* SWK floating navigation. Original vanilla implementation inspired by the
   floating-island treatments on 21st.dev; no React runtime or UI dependency. */
:root { --header-h: 76px; --header-h-scrolled: 68px; }
.has-ann { --ann-h: 32px; }
.has-ann.ann-off { --ann-h: 0px; }
.announce { min-height: 32px; padding-block: 5px; font-size: 11px; letter-spacing: .025em; background: #0d192b; }
.announce a { color: #e8cc92; text-decoration: none; border-bottom: 1px solid #9c8355; }
.announce__close { width: 26px; height: 26px; font-size: 18px; }
.site-header[data-site-header] {
  top: 14px; left: 0; right: 0; width: min(1180px, calc(100% - 40px));
  margin-inline: auto; height: 76px; border-radius: 24px;
  background: rgba(253, 252, 248, .98) !important;
  border: 1px solid rgba(217, 183, 120, .48);
  box-shadow: 0 16px 44px #07102026, 0 2px 5px #0710200b, inset 0 1px 0 #fff !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: top .35s ease, height .35s ease, box-shadow .35s ease;
}
.has-ann:not(.ann-off) .site-header[data-site-header]:not(.is-scrolled) { top: calc(var(--ann-h) + 14px); }
.site-header[data-site-header].is-scrolled { top: 12px; height: 68px; }
.site-header[data-site-header]::after { display: none; }
.site-header .site-header__inner { width: 100%; max-width: none; padding: 0 18px; gap: 18px; }
.site-header .site-brand { gap: 10px; padding: 0 22px 0 5px; border-right: 1px solid #d9b77840; }
.site-header .site-brand::after { display: none; }
.site-header .site-brand .brand-logo { height: 58px; max-height: 58px; width: auto; filter: drop-shadow(0 2px 3px #75532135) brightness(1.02); }
.site-header .site-nav { position: relative; gap: 1px; padding: 4px; border-radius: 14px; isolation: isolate; }
.site-header .site-nav a {
  white-space: nowrap; padding: 10px 11px !important; border-radius: 10px;
  font-size: 12px; line-height: 20px; letter-spacing: 0 !important;
  color: #263246 !important; background: transparent !important;
  box-shadow: none !important; transform: none; font-weight: 700 !important;
  transition: color .2s ease, background .2s ease;
}
.site-header .site-nav a::before, .site-header .site-nav a::after { display: none; }
.site-header .site-nav a[aria-current='page'], .site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible { color: #59401e !important; background: #d8bb8130 !important; }
.site-header .site-nav.is-tracked a { background: transparent !important; }
.site-nav__track {
  position: absolute; top: 4px; bottom: 4px; left: 0; z-index: -1;
  border-radius: 10px; background: linear-gradient(145deg, #fffdf8, #eee5d5);
  border: 1px solid #d9b77870; box-shadow: 0 2px 5px #120d190a, inset 0 1px 0 #fff;
  opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.22,1,.36,1), width .32s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.site-nav.is-tracked .site-nav__track { opacity: 1; }
.site-header .site-header__actions { gap: 10px; }
.site-header .site-header__wa { width: 36px; height: 36px; color: #536047; background: transparent; box-shadow: none; border: 1px solid #d9b77850; }
.site-header .site-header__wa:hover { color: #fff; background: #1c3d37; transform: none; }
.site-header .site-header__wa svg { width: 18px; height: 18px; }
.site-header .site-header__cta {
  padding: 7px 7px 7px 18px; min-height: 42px; gap: 18px;
  border-radius: 13px; font-size: 12px; font-weight: 750;
  background: #d9b778 !important; border-color: #d9b778 !important; color: #281e2d !important;
  box-shadow: 0 3px 8px #0710201a !important;
}
.site-header .site-header__go { width: 28px; height: 28px; border-radius: 8px; background: #342737; color: #f4d9a4; }
.site-header .site-header__cta:hover { background: #f2d5a0 !important; }
.site-header .site-nav a { overflow: hidden; }
.site-header .site-nav a:hover { box-shadow: inset 0 -2px 0 #e9cb8f !important; }
.site-header .site-header__cta { position: relative; overflow: hidden; transition: transform .25s ease, background .25s ease; }
.site-header .site-header__cta:hover { transform: translateY(-2px); }
.site-header .site-header__cta::before { content: ''; position: absolute; inset: -50%; background: linear-gradient(110deg, transparent 35%, #fff6 48%, transparent 60%); transform: translateX(-100%); transition: transform .6s ease; }
.site-header .site-header__cta:hover::before { transform: translateX(100%); }
.site-header .nav-toggle { width: 38px; height: 38px; border-radius: 11px; border: 1px solid #d9b77860; background: transparent; color: #29364a; }
.site-header .nav-toggle:hover, .site-header .nav-toggle[aria-expanded="true"] { background: #ece3d4; color: #29364a; border-color: #d9b778; }
.site-header .mobile-menu { top: calc(100% + 10px); border: 1px solid #e5ddce; border-radius: 20px; background: #fcfaf5; max-height: calc(100dvh - var(--ann-h) - 112px); }
.site-header .menu-scrim { position: fixed; inset: -100px -100vw; height: 150vh; z-index: -1; background: #07102070; }
.site-header .mobile-menu__nav a { font-size: 16px; font-weight: 500; }
.site-header .mobile-menu__nav a[aria-current='page'] { color: #85632e; }

.hero__logo-cinema { position: relative; display: block; width: clamp(170px, 18vw, 260px); isolation: isolate; }
.hero .hero__logo-cinema .hero__reveal-logo { width: 100%; display: block; }
.hero__logo-cinema::before { content: ''; position: absolute; inset: -30%; z-index: -1; opacity: var(--rv, 0); background: radial-gradient(ellipse, #e5bc5c40 0%, #d7ae5420 35%, transparent 68%); }
.hero__logo-sheen { position: absolute; inset: 0; pointer-events: none; opacity: var(--rv, 0); -webkit-mask: url('/assets/images/brand/swk-logo-white.png') center / contain no-repeat; mask: url('/assets/images/brand/swk-logo-white.png') center / contain no-repeat; background: linear-gradient(110deg, transparent 35%, #fff8de 48%, #fff 50%, transparent 62%) 120% 0 / 300% 100%; }
.hero[data-phase='logo'] .hero__logo-sheen { animation: swk-logo-sheen 4.5s ease-in-out infinite; }
.hero[data-phase='logo'] .hero__logo-cinema::before { animation: swk-logo-halo 5s ease-in-out infinite; }
.hero[data-phase='logo'] .hero__reveal-name { background-size: 220% 100%; animation: swk-logo-type 6s ease-in-out infinite; }
@keyframes swk-logo-sheen { 0%,20% { background-position: 120% 0; } 70%,100% { background-position: -40% 0; } }
@keyframes swk-logo-halo { 0%,100% { transform: scale(.94); } 50% { transform: scale(1.08); } }
@keyframes swk-logo-type { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
/* Search and office card occupy separate vertical bands, including shorter laptops. */
@media (min-width: 1024px) {
  .hero .hero__content { height: 100%; padding: calc(var(--header-h) + var(--ann-h) + 24px) 24px 180px !important; gap: 16px; transform: translateY(-18px); }
  .hero__stage { min-height: clamp(110px, 16vh, 170px); }
  .hero__dock { gap: 12px; }
  .hero__search-wrap { width: min(100%, 730px); }
  .hero .hero__search-wrap .search-bar { padding: 5px 6px 5px 10px; min-height: 56px; }
  .hero .hero__search-wrap .search-field { padding: 2px 14px; min-width: 0; }
  .hero .hero__search-wrap .search-field label { font-size: 8px; letter-spacing: .08em; }
  .hero .hero__search-wrap .search-field select { font-size: 11px; padding: 1px 18px 1px 0; min-height: 26px; }
  .hero .hero__search-wrap .search-bar .btn { min-height: 42px; padding: 9px 20px; font-size: 12px; }
  .hero__ctas .btn { min-height: 40px; padding: 9px 24px; font-size: 12px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero .hero__content { padding: calc(var(--header-h) + var(--ann-h) + 16px) 24px 150px !important; gap: 10px; }
  .hero__stage { min-height: 120px; }
  .hero .hero__hook:not(#_) { font-size: clamp(32px, 4vw, 54px); }
  .hero__dock { gap: 10px; }
}
@media (max-width: 1100px) and (min-width: 1024px) {
  .site-brand__type { display: none; }
  .site-header .site-brand { padding-right: 14px; }
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; --header-h-scrolled: 64px; }
  .site-header[data-site-header], .site-header[data-site-header].is-scrolled { height: 64px; width: calc(100% - 24px); border-radius: 18px; top: 10px; }
  .has-ann:not(.ann-off) .site-header[data-site-header]:not(.is-scrolled) { top: calc(var(--ann-h) + 10px); }
  .site-header .site-header__inner { padding-inline: 12px; }
  .site-header .site-brand { border: 0; padding: 0; }
  .site-header .site-brand .brand-logo { height: 48px; max-height: 48px; }
  .site-brand__type strong { font-size: 17px; }
  .site-brand__type small { font-size: 6px; }
  .site-header .site-header__cta { display: inline-flex; gap: 10px; padding-left: 13px; }
  .site-header .site-header__wa { display: none; }
  .hero .hero__content { height: 100%; padding: calc(var(--ann-h) + 96px) 18px 144px !important; gap: 14px; transform: translateY(-8px); }
  .hero__stage { min-height: 110px; }
  .hero__dock { gap: 12px; }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { min-height: 40px; padding: 10px 20px; font-size: 12px; }
  .hero .hero__search-wrap { width: min(100%, 700px); }
  .hero .hero__search-wrap .search-bar { padding: 10px; }
  .hero .hero__search-wrap .search-field { padding: 3px 8px; }
  .hero .hero__search-wrap .search-field label { font-size: 9px; }
  .hero .hero__search-wrap .search-field select { font-size: 12px; min-height: 30px; }
  .hero .hero__search-wrap .search-bar .btn { min-height: 40px; padding: 9px 18px; font-size: 12px; }
}
@media (max-width: 767px) and (orientation: portrait) {
  .hero .hero__content { padding-bottom: 36px !important; }
  .hero__beat { gap: 8px; }
  .hero__kicker { font-size: 9px; padding: 6px 10px; letter-spacing: .12em; }
  .hero .hero__hook:not(#_) { font-size: clamp(28px, 8vw, 38px); }
  .hero__lead { font-size: 13px; }
  .hero .hero__search-wrap .search-bar { gap: 4px; border-radius: 20px; }
}
@media (max-width: 380px) {
  .site-header .site-header__cta { gap: 8px; padding: 7px 10px; }
  .site-header .site-header__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header[data-site-header], .site-nav__track { transition: none; }
  .hero[data-phase='logo'] .hero__logo-sheen, .hero[data-phase='logo'] .hero__logo-cinema::before, .hero[data-phase='logo'] .hero__reveal-name { animation: none; }
}


/* ==========================================================================
   Hero v2 — idle clip, display typography, floating dock, header type
   ========================================================================== */

.hero, .site-header, .hero-cine { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* --- Idle layer: the 4s road clip, cross-faded loop, hands over to the scroll film --- */
.hero__bg::before { display: none; }
.hero__idle { position: absolute; inset: 0; z-index: 1; background: #14243a url('/assets/images/hero/hero-idle-poster.webp') center / cover no-repeat; opacity: 0; transition: opacity .75s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.hero.is-idle .hero__idle { opacity: 1; }
.hero__idle-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .9s linear; }
.hero__idle-video.is-front { opacity: 1; }
.hero.is-idle .hero__idle-video:first-child { opacity: 1; }
.hero.is-idle .hero__idle-video:first-child:not(.is-front) ~ .hero__idle-video.is-front { opacity: 1; }
.hero.is-idle .hero__idle-video.is-front { z-index: 2; }

/* --- Layout: headline owns the middle of the frame, the dock sits low and breathes --- */
@media (min-width: 768px) {
  .hero .hero__content {
    height: 100%; transform: none; justify-content: flex-end; gap: 0;
    padding: calc(var(--header-h) + var(--ann-h, 0px) + 40px) 32px clamp(36px, 7vh, 72px) !important;
  }
  .hero .hero__stage { flex: 1 1 auto; min-height: 0; align-content: center; padding-bottom: clamp(8px, 3vh, 36px); }
  .hero .hero__dock { gap: clamp(18px, 2.8vh, 28px); }
}
@media (max-width: 767px) {
  .hero .hero__content { padding: calc(var(--ann-h, 0px) + 92px) 18px 28px !important; justify-content: flex-end; gap: 0; }
  .hero .hero__stage { flex: 1 1 auto; min-height: 0; align-content: center; }
}

/* --- Display type: glossy champagne-white gradient fill, gold sheen on hover --- */
.hero .hero__kicker {
  font-family: 'Clash Display', 'General Sans', system-ui, sans-serif; font-size: clamp(.82rem, .95vw, .98rem); font-weight: 600; letter-spacing: .24em;
  padding: 10px 24px; gap: 12px;
}
.hero .hero__hook:not(#_) {
  font-family: 'Clash Display', 'General Sans', system-ui, sans-serif !important; font-weight: 600 !important;
  font-size: clamp(2.9rem, 6.9vw, 6.6rem); line-height: 1.01; letter-spacing: -.035em !important; word-spacing: .1em !important; max-width: 14ch; margin-inline: auto; text-wrap: balance;
  color: #fff;
  background-image: linear-gradient(105deg, #fffdf8 0%, #eef4ff 30%, #fff1dc 52%, #f3f7ff 76%, #fffdf8 100%);
  background-size: 260% 100%; background-position: 8% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(4, 10, 22, .55)) drop-shadow(0 14px 34px rgba(4, 10, 22, .5));
  transition: transform .5s var(--sys-ease), background-position 1.1s var(--sys-ease), filter .5s var(--sys-ease);
}
.hero__beat:hover .hero__hook:not(#_), .hero__hook:not(#_):hover {
  transform: translateY(-4px) scale(1.015); background-position: 92% 50%;
  background-image: linear-gradient(105deg, #fffdf8 0%, #fff4e2 40%, #ffe9c8 60%, #fffdf8 100%);
  filter: drop-shadow(0 2px 3px rgba(4, 10, 22, .6)) drop-shadow(0 16px 38px rgba(4, 10, 22, .55)) drop-shadow(0 0 22px rgba(246, 212, 138, .5));
}
.hero .hero__lead {
  font-family: 'General Sans', system-ui, sans-serif; font-size: clamp(1.15rem, 1.75vw, 1.6rem); font-weight: 500; line-height: 1.45; letter-spacing: 0; max-width: 34ch; margin-inline: auto;
  text-shadow: 0 1px 0 rgba(4, 10, 22, .3), 0 3px 18px rgba(4, 10, 22, .7), 0 10px 40px rgba(4, 10, 22, .5);
}
.hero__beat { will-change: opacity, transform; }

/* --- Entrance choreography (first paint + every return to the top) --- */
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-sheen { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@keyframes hero-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero.is-idle[data-phase='b1'] .hero__kicker { animation: hero-rise .9s var(--sys-ease) .15s backwards; }
.hero.is-idle[data-phase='b1'] .hero__hook { animation: hero-rise 1.1s var(--sys-ease) .3s backwards; }
.hero.is-idle[data-phase='b1'] .hero__lead { animation: hero-rise 1.1s var(--sys-ease) .5s backwards; }
.hero.is-idle .hero__ctas { animation: hero-rise 1s var(--sys-ease) .75s backwards; }
.hero.is-idle .hero__search-wrap { animation: hero-rise 1.1s var(--sys-ease) .95s backwards; }
.hero__lead { position: relative; }
.hero__lead::after {
  content: ''; display: block; width: 72px; height: 2px; margin: 18px auto 0; transform-origin: center;
  background: linear-gradient(90deg, transparent, #f6d48a, transparent);
}
.hero.is-idle[data-phase='b1'] .hero__lead::after { animation: hero-line 1.2s var(--sys-ease) 1s backwards; }

/* --- Buttons: larger, cleaner, white secondary --- */
.hero .hero__ctas { gap: 14px; margin: 0; }
.hero .hero__ctas .btn, .hero .hero__reveal-actions .btn {
  min-height: 58px; padding: 0 34px; font-size: 1rem; font-weight: 600; letter-spacing: .005em; border-radius: 999px;
  font-family: 'General Sans', system-ui, sans-serif;
}
.hero .hero__ctas .btn-primary { background: linear-gradient(180deg, #1d3560 0%, #0c1830 100%); border: 1px solid rgba(246, 212, 138, .55); color: #fff; }
.hero .hero__ctas .btn-outline-dark, .btn-white {
  background: #fff !important; color: #0b1528 !important; border: 1px solid #fff !important;
  box-shadow: 0 14px 34px rgba(4, 10, 22, .32), inset 0 -2px 0 rgba(11, 21, 40, .06);
}
.hero .hero__ctas .btn-outline-dark:hover, .btn-white:hover, .btn-white:focus-visible { background: #fff6e2 !important; border-color: #f6d48a !important; transform: translateY(-3px); }
.hero .hero__reveal-actions .btn-white { box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }

/* --- Search bar: floating glass pill --- */
.hero .hero__search-wrap { width: min(100%, 980px); max-width: 980px; margin-top: 0; }
.hero .hero__search-wrap .search-bar {
  min-height: 84px; padding: 10px 10px 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 30px 80px rgba(4, 10, 22, .42), 0 2px 0 rgba(255, 255, 255, .6) inset;
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: box-shadow .4s ease, transform .5s var(--ease-luxury);
}
.hero .hero__search-wrap .search-bar:focus-within { box-shadow: 0 34px 90px rgba(4, 10, 22, .5), 0 0 0 3px rgba(217, 183, 120, .55); }
.hero .hero__search-wrap .search-field { padding: 4px 24px; text-align: left; position: relative; transition: background .25s ease; border-radius: 18px; }
.hero .hero__search-wrap .search-field:hover { background: rgba(217, 183, 120, .12); }
.hero .hero__search-wrap .search-field label { font-family: 'Clash Display', 'General Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; color: #8a6a2f; }
.hero .hero__search-wrap .search-field select { font-size: 16px; font-weight: 600; min-height: 30px; color: #0b1528; }
.hero .hero__search-wrap .search-bar .btn { min-height: 64px; padding: 0 38px; font-size: 1rem; font-weight: 600; border-radius: 999px; background: linear-gradient(180deg, #1d3560 0%, #0c1830 100%); color: #fff; border: 1px solid rgba(246, 212, 138, .5); }
@media (max-width: 899px) {
  .hero .hero__search-wrap .search-bar { border-radius: 28px; min-height: 0; padding: 14px; }
  .hero .hero__search-wrap .search-field select { font-size: 15px; }
  .hero .hero__search-wrap .search-bar .btn { min-height: 54px; }
}
@media (max-width: 767px) {
  .hero .hero__ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .hero .hero__ctas .btn { min-height: 50px; padding: 0 22px; font-size: .95rem; width: auto; }
}

/* --- Header: Clash Display, a notch larger --- */
.site-header[data-site-header] { width: min(1260px, calc(100% - 40px)); }
.site-header .site-nav a { font-family: 'Clash Display', 'General Sans', sans-serif; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em !important; padding: 10px 14px !important; }
.site-header .site-header__cta { font-family: 'Clash Display', 'General Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.site-header .mobile-menu__nav a { font-family: 'Clash Display', 'General Sans', sans-serif; font-size: 19px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .hero.is-idle .hero__kicker, .hero.is-idle .hero__hook, .hero.is-idle .hero__lead, .hero.is-idle .hero__ctas, .hero.is-idle .hero__search-wrap, .hero__lead::after { animation: none !important; }
  .hero__idle, .hero__idle-video { transition: none; }
}
.hero .hero__scroll-cue { display: none; }

/* --- Hand-over: idle clip dissolves with a soft push-in so the film opens as one continuous move --- */
.hero__idle {
  transition: opacity 1s cubic-bezier(.4, 0, .2, 1), transform 1.4s cubic-bezier(.16, 1, .3, 1), filter 1s ease, visibility 0s linear 1s;
  transform: scale(1); will-change: opacity, transform; visibility: hidden;
}
.hero.is-idle .hero__idle { visibility: visible; transition-delay: 0s; }
.hero:not(.is-idle) .hero__idle { transform: scale(1.05); filter: blur(6px); }
/* Vignette lightens as the film takes over, so the real footage reads cleaner. */
.hero__bg::after { opacity: clamp(.35, calc(1 - var(--p, 0) * 3), 1); }
.hero__video, .hero__idle-video { image-rendering: high-quality; backface-visibility: hidden; transform: translateZ(0); }
@media (prefers-reduced-motion: reduce) { .hero:not(.is-idle) .hero__idle { transform: none; filter: none; } }

/* --- Custom SWK icon set: square-cut line work with a gold accent stroke --- */
.ic-a { stroke: var(--ic-accent, #c99a3d); }
.btn-primary .ic-a, .site-header__go .ic-a, .hero .ic-a, .footer .ic-a, .search-bar .btn .ic-a, .section--dark .ic-a { stroke: var(--ic-accent, #f2cf86); }
.hero .btn-white .ic-a, .hero .btn-outline-dark .ic-a { stroke: #0f766e; }

/* --- Headline highlight: jade-to-aqua accent, glossy and animated --- */
.hero .hero__hook em {
  font-style: normal; display: inline;
  background-image: linear-gradient(100deg, #9ff3d6 0%, #3fd3b6 32%, #6ec9ff 62%, #b4f6e0 82%, #9ff3d6 100%);
  background-size: 240% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: hero-sunrise 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 18px rgba(63, 211, 182, .4));
}
.hero__beat:hover .hero__hook em, .hero__hook:hover em { animation-duration: 2.4s; filter: drop-shadow(0 0 26px rgba(63, 211, 182, .7)); }
@keyframes hero-sunrise { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .hero .hero__hook em { animation: none; } }

/* Hero supporting text: soft pearl-champagne instead of flat white */
.hero .hero__lead { color: #f3e9d2; }
.hero .hero__kicker { color: #f6ead0; }
/* WhatsApp: real brand-colour mark, no tinted wrapper */
.site-header .site-header__wa, .site-header__wa { background: transparent !important; box-shadow: none !important; border: 0 !important; color: inherit; }
.site-header .site-header__wa:hover, .site-header__wa:hover { background: transparent !important; transform: translateY(-2px) scale(1.08); }
.site-header .site-header__wa svg, .site-header__wa svg { width: 34px; height: 34px; }
.whatsapp-float { background: transparent !important; box-shadow: 0 8px 22px rgba(37, 211, 102, .45); border-radius: 50%; }
.whatsapp-float svg { width: 100%; height: 100%; }

/* Hero headline: Dubai wordmark replaces the word */
.hero__dubai { display: inline-block; white-space: nowrap; }
.hero__dubai img { display: inline-block; height: 1.02em; width: auto; vertical-align: -.02em; margin-right: .06em; }

/* ==========================================================================
   Hero headline: bold Clash Display in glossy, shiny beige (one style for every beat)
   ========================================================================== */
.hero .hero__hook:not(#_) {
  font-family: 'Clash Display', 'General Sans', system-ui, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(2.9rem, 6.9vw, 6.6rem); line-height: 1.02; letter-spacing: -.035em !important; word-spacing: .1em !important; max-width: 14ch;
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%),
    linear-gradient(180deg, #fffdf6 0%, #f6ead2 28%, #dcc59d 50%, #bfa57a 54%, #e9d6b3 68%, #fff8e6 88%, #d8c19a 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 0; filter: drop-shadow(0 2px 3px rgba(4, 10, 22, .55)) drop-shadow(0 14px 34px rgba(4, 10, 22, .5));
  animation: hero-gloss 5.5s ease-in-out 1.2s infinite;
}
@keyframes hero-gloss { 0% { background-position: 160% 0, 0 0; } 55%, 100% { background-position: -60% 0, 0 0; } }
.hero__beat:hover .hero__hook:not(#_), .hero__hook:not(#_):hover {
  transform: translateY(-4px) scale(1.015);
  filter: drop-shadow(0 2px 3px rgba(4, 10, 22, .6)) drop-shadow(0 16px 38px rgba(4, 10, 22, .55)) drop-shadow(0 0 22px rgba(255, 244, 214, .5));
}
.hero .hero__hook em { background: none; -webkit-text-fill-color: inherit; color: inherit; animation: none; filter: none; font-style: normal; }
.hero .hero__kicker, .hero .hero__lead { color: #f1e5cc; }
.hero__dubai { display: inline-block; white-space: nowrap; }
.hero__dubai img { display: inline-block; height: 1.0em; width: auto; vertical-align: -.02em; margin-right: .08em; }
@media (prefers-reduced-motion: reduce) { .hero .hero__hook:not(#_) { animation: none; background-position: -60% 0, 0 0; } }

/* Headline is fully static: no shine sweep, entrance, hover or transition effects. */
.hero .hero__hook:not(#_), .hero .hero__hook:not(#_):hover, .hero__beat:hover .hero__hook:not(#_),
.hero.is-idle[data-phase='b1'] .hero__hook:not(#_) {
  animation: none !important; transition: none !important; transform: none !important;
  background-position: 62% 0, 0 0;
  filter: drop-shadow(0 2px 3px rgba(4, 10, 22, .55)) drop-shadow(0 14px 34px rgba(4, 10, 22, .5));
}

/* ==========================================================================
   Mobile (<= 767px): portrait film, tuned layout, chatbot launcher over the source watermark corner
   ========================================================================== */
@media (max-width: 767px) {
  .hero__idle.is-mobile { background-image: url('/assets/images/hero/hero-mobile-poster.webp'); }
  .hero__video, .hero__idle-video { object-position: center center; }
  /* The launcher sits where the film's corner watermark would be: centre 9.26% up from the bottom, 18.67svh left of centre. */
  .swk-chat { width: 58px; height: 58px; top: auto !important; bottom: max(14px, calc(9.26svh - 29px)); right: max(8px, calc(50vw - 18.67svh - 29px)); }
  .swk-chat__panel { top: auto !important; bottom: 70px; max-height: calc(100dvh - var(--ann-h, 0px) - 150px); }
  .back-top { bottom: calc(max(14px, 9.26svh - 29px) + 72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) { .swk-chat__launcher { margin: 0; } .swk-chat__panel { right: 0; left: auto; width: min(calc(100vw - 24px), 380px); } }
@media (max-width: 767px) { .swk-chat__launcher { position: relative !important; visibility: visible !important; pointer-events: auto !important; width: 58px; height: 58px; border-radius: 50%; justify-content: center; box-shadow: 0 8px 26px rgba(7, 14, 28, .45), inset 0 1px 0 #ffffff1f; } .swk-chat__launcher img { width: 36px; padding: 0; } }

/* --- Mobile layout: everything fits one screen from 360x640 up; compact dock, steady scrim --- */
@media (max-width: 767px) {
  .hero .hero__content { padding: calc(var(--ann-h, 0px) + 88px) 16px calc(16px + env(safe-area-inset-bottom)) !important; }
  .hero .hero__kicker { font-size: .66rem; letter-spacing: .13em; padding: 8px 14px; gap: 8px; white-space: nowrap; max-width: 100%; }
  .hero .hero__hook:not(#_) { font-size: clamp(2.2rem, 10.2vw, 3.2rem); max-width: 11.5ch; line-height: 1.04; }
  .hero .hero__lead { font-size: clamp(.98rem, 4.2vw, 1.2rem); max-width: 26ch; }
  .hero .hero__lead::after { margin-top: 12px; }
  .hero .hero__stage { min-height: 0; }
  .hero .hero__dock { gap: 12px; }
  .hero .hero__ctas { gap: 8px; }
  .hero .hero__ctas .btn { min-height: 46px; padding: 0 22px; font-size: .92rem; }
  .hero .hero__search-wrap .search-bar { padding: 10px 12px; gap: 2px; border-radius: 22px; }
  .hero .hero__search-wrap .search-field { padding: 2px 6px; }
  .hero .hero__search-wrap .search-field label { font-size: 9.5px; letter-spacing: .12em; }
  .hero .hero__search-wrap .search-field select { font-size: 14px; min-height: 26px; padding: 0 20px 0 0; }
  .hero .hero__search-wrap .search-bar .btn { min-height: 46px; margin-top: 4px; }
  /* Keep the dark reading scrim for the whole film so beige type stays legible over the bright lobby. */
  .hero__bg::after { opacity: 1; background: radial-gradient(ellipse 90% 55% at 50% 38%, rgba(5, 12, 24, .38) 0%, rgba(5, 12, 24, .14) 60%, rgba(5, 12, 24, 0) 90%), linear-gradient(180deg, rgba(4, 10, 20, .32) 0%, rgba(4, 10, 20, .06) 40%, rgba(4, 10, 20, .14) 75%, rgba(4, 10, 20, .42) 100%); }
  .hero-art-credit { bottom: 6px; left: 12px; }
}
@media (max-width: 767px) and (max-height: 640px) {
  .hero .hero__content { padding-top: calc(var(--ann-h, 0px) + 80px) !important; padding-bottom: 10px !important; }
  .hero .hero__hook:not(#_) { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .hero .hero__lead::after, .hero .hero__kicker::before { display: none; }
  .hero .hero__dock { gap: 8px; }
  .hero .hero__ctas .btn { min-height: 42px; }
  .hero .hero__search-wrap .search-field select { min-height: 22px; }
  .hero .hero__search-wrap .search-bar .btn { min-height: 42px; }
}

/* The chatbot launcher owns the bottom-right corner (it covers the film's corner watermark), so the dock ends above it. */
@media (max-width: 767px) {
  .hero .hero__content { padding-bottom: calc(max(14px, 9.26svh - 29px) + 66px) !important; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .hero .hero__content { padding-bottom: calc(max(12px, 9.26svh - 29px) + 64px) !important; padding-top: calc(var(--ann-h, 0px) + 78px) !important; }
  .hero .hero__ctas { flex-wrap: nowrap; }
  .hero .hero__ctas .btn { min-height: 40px; padding: 0 12px; font-size: .8rem; flex: 1 1 0; white-space: nowrap; justify-content: center; }
  .hero .hero__ctas .btn svg { width: 14px; height: 14px; }
  .hero .hero__search-wrap .search-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 10px; }
  .hero .hero__search-wrap .search-bar .btn { grid-column: 1 / -1; min-height: 40px; }
  .hero .hero__search-wrap .search-field select { font-size: 12.5px; text-overflow: ellipsis; }
  .hero .hero__search-wrap .search-field label { font-size: 8.5px; letter-spacing: .08em; }
}
@media (max-width: 340px) {
  .hero .hero__ctas .btn { font-size: .72rem; padding: 0 8px; }
  .hero .hero__ctas .btn svg { display: none; }
  .hero .hero__content { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ==========================================================================
   Site-wide polish (review pass)
   ========================================================================== */
.hero-art-credit { font-size: .72rem; }
.footer-legal { flex-wrap: wrap; row-gap: var(--space-2); column-gap: var(--space-5); }
.footer-newsletter__row input { min-width: 0; text-overflow: ellipsis; }
@media (max-width: 767px) {
  /* Cookie consent: compact, and always clear of the chatbot launcher. */
  .cookie-banner { left: 12px; right: 12px; bottom: calc(max(14px, 9.26svh - 29px) + 58px + 12px); padding: 12px 14px; gap: 10px; border-radius: 18px; }
  .cookie-banner h2 { font-size: 1.05rem; }
  .cookie-banner p { font-size: .8rem; line-height: 1.4; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie-banner__actions .btn { padding: .55rem .6rem; font-size: .82rem; min-height: 40px; }
  .cookie-banner__actions .btn:first-child { grid-column: 1 / -1; }
  .footer-bottom { gap: var(--space-3); }
  .footer-legal { gap: .35rem 1.1rem; }
}
@media (min-width: 1024px) { .hero .hero__search-wrap { max-width: min(980px, calc(100vw - 210px)); } }
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .hero .hero__hook:not(#_) { font-size: clamp(3.4rem, 9.4vw, 5rem); max-width: 12ch; }
  .hero .hero__lead { font-size: clamp(1.25rem, 2.9vw, 1.6rem); }
  .hero .hero__kicker { font-size: .9rem; }
}

/* Touch targets: comfortable hit areas without changing the visual rhythm. */
@media (pointer: coarse) {
  .announce__close { width: 40px; height: 40px; font-size: 22px; display: inline-grid; place-items: center; }
  .footer-col a, .footer-bottom a, .footer-contact a { display: inline-block; padding-block: .5rem; }
  .footer-col li { margin: 0; }
  .breadcrumbs a { display: inline-block; padding-block: .6rem; }
  a.photo-credit, .photo-credit a { display: inline-block; padding-block: .5rem; }
  .form-check input, .footer-newsletter input[type='checkbox'] { width: 20px; height: 20px; }
}
@media (max-width: 767px) and (min-height: 800px) {
  .hero .hero__search-wrap .search-field select { min-height: 32px; }
}

/* Journal cards on phones: readable 1-up width. Teasers (home, article footer) scroll sideways; the index stacks. */
@media (max-width: 767px) {
  .blog-grid { grid-auto-columns: min(82vw, 330px); gap: 16px; padding: 4px var(--space-5) 18px; margin-inline: calc(var(--space-5) * -1); scroll-padding-inline: var(--space-5); }
  .blog-grid[data-blog-grid] { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; padding: 0; margin-inline: 0; }
  .blog-card__body h3 { font-size: 1.1rem; line-height: 1.25; }
}

/* Phones, lobby and window chapters: the film's own sign sits mid-frame, so the copy drops to the clear marble area below it. */
@media (max-width: 767px) {
  .hero__beat[data-beat='b2'], .hero__beat[data-beat='b3'] { translate: 0 38svh; }
  .hero .hero__beat[data-beat='b2'] .hero__hook:not(#_), .hero .hero__beat[data-beat='b3'] .hero__hook:not(#_) { font-size: clamp(1.7rem, 7.6vw, 2.3rem); max-width: 14ch; }
  .hero .hero__beat[data-beat='b2'] .hero__lead, .hero .hero__beat[data-beat='b3'] .hero__lead { font-size: clamp(.92rem, 3.8vw, 1.05rem); max-width: 28ch; }
  .hero__beat[data-beat='b2'] .hero__lead::after, .hero__beat[data-beat='b3'] .hero__lead::after { display: none; }
}

/* ==========================================================================
   SWK twilight layer. Loaded last. One cinematic blue-hour theme for every page:
   midnight navy, charcoal, champagne gold, warm taupe, stone beige and soft ivory.
   Thin geometric sans (Montserrat / Raleway), uppercase tracked headlines, a Bodoni monogram
   and numerals, fine champagne hairlines. Re-scopes the semantic tokens, then fixes the
   components that hard-code light surfaces.
   ========================================================================== */

@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/raleway-200.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/raleway-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/raleway-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/raleway-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/raleway-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat/montserrat-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat/montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat/montserrat-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-moda/bodoni-moda-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-moda/bodoni-moda-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/assets/fonts/bodoni-moda/bodoni-moda-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* Re-point the older families at the new faces so every legacy rule resolves to the twilight type system. */
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/raleway/raleway-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/raleway/raleway-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/raleway/raleway-500.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/raleway/raleway-600.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/montserrat/montserrat-300.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/montserrat/montserrat-400.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/montserrat/montserrat-400.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/montserrat/montserrat-500.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/bodoni-moda/bodoni-moda-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/bodoni-moda/bodoni-moda-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;

  /* Palette */
  --tw-midnight: #0a1322;
  --tw-midnight-deep: #070d18;
  --tw-navy: #101b2f;
  --tw-navy-lift: #152239;
  --tw-charcoal: #181d27;
  --tw-taupe: #8c7d6c;
  --tw-stone: #cfc3b0;
  --tw-ivory: #f3eee3;
  --tw-ivory-soft: rgba(243, 238, 227, 0.74);
  --tw-ivory-faint: rgba(243, 238, 227, 0.52);
  --tw-gold: #cdb27e;           /* muted champagne, never vivid */
  --tw-gold-bright: #e3cfa3;
  --tw-gold-deep: #a68a58;
  --tw-amber: #c98f58;          /* horizon amber, used only as a faint wash */
  --tw-line: rgba(205, 178, 126, 0.22);
  --tw-line-soft: rgba(243, 238, 227, 0.1);

  /* Type */
  --tw-head: 'Raleway', 'Montserrat', system-ui, sans-serif;
  --tw-body: 'Montserrat', 'Raleway', system-ui, sans-serif;
  --tw-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  --tw-track: 0.16em;

  /* Re-scope the semantic tokens used across the older layers */
  --font-display: var(--tw-head);
  --font-body: var(--tw-body);
  --font-feature: var(--tw-serif);
  --color-bg: var(--tw-midnight);
  --color-surface: var(--tw-navy);
  --color-surface-alt: var(--tw-navy-lift);
  --color-text: var(--tw-ivory);
  --color-text-muted: var(--tw-ivory-soft);
  --color-text-subtle: var(--tw-ivory-faint);
  --color-text-on-dark: var(--tw-ivory);
  --color-text-on-dark-muted: var(--tw-ivory-soft);
  --color-accent: var(--tw-gold);
  --color-accent-hover: var(--tw-gold-bright);
  --color-border: var(--tw-line-soft);
  --color-dark-surface: var(--tw-midnight-deep);
  --color-dark-surface-alt: var(--tw-navy);
  --on-accent: var(--tw-midnight);
  --tint-hover: rgba(243, 238, 227, 0.06);
  --glass-bg-light: rgba(16, 27, 47, 0.62);
  --glass-bg-dark: rgba(10, 19, 34, 0.6);
  --glass-border-light: var(--tw-line);
  --glass-border-dark: var(--tw-line);
  --paper-0: var(--tw-navy);
  --paper-50: var(--tw-midnight);
  --paper-100: var(--tw-navy);
  --paper-200: var(--tw-navy-lift);
  --cream-50: var(--tw-midnight);
  --cream-100: var(--tw-navy);
  --sand-200: var(--tw-navy-lift);
  --gold-700: var(--tw-gold);
  --gold-600: var(--tw-gold);
  --gold-500: var(--tw-gold);
  --gold-400: var(--tw-gold-bright);
  --gold-100: rgba(205, 178, 126, 0.12);
  --slate-900: var(--tw-ivory);
  --slate-700: var(--tw-ivory-soft);
  --slate-500: var(--tw-ivory-faint);
  --slate-300: var(--tw-ivory-faint);
  --slate-100: var(--tw-line-soft);
  --grad-gold: linear-gradient(135deg, var(--tw-gold-bright), var(--tw-gold) 60%, var(--tw-gold-deep));
  --grad-brand: linear-gradient(90deg, transparent, var(--tw-gold), transparent);
  --grad-page: none;
  --sys-radius: 4px;
  --sys-radius-sm: 3px;
  --sys-border: 1px solid var(--tw-line-soft);
  --sys-border-gold: 1px solid var(--tw-line);
  --sys-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 18px 44px rgba(0, 0, 0, 0.32);
  --sys-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 64px rgba(0, 0, 0, 0.42);
  --sys-ink: var(--tw-ivory);
  --sys-ink-soft: var(--tw-ivory-soft);
  --sys-gold: var(--tw-gold);
  --sys-gold-light: var(--tw-gold-bright);
  --sys-surface: var(--tw-navy);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.4);
}

html, body { background: var(--tw-midnight); color: var(--tw-ivory); }
body {
  font-family: var(--tw-body);
  font-weight: 300;
  letter-spacing: 0.01em;
  background:
    radial-gradient(1200px 640px at 50% -8%, rgba(201, 143, 88, 0.07), transparent 70%),
    linear-gradient(180deg, #0b1526 0%, #0a1322 40%, #090f1c 100%);
  background-attachment: fixed;
}
::selection { background: rgba(205, 178, 126, 0.32); color: var(--tw-ivory); }
p, li, dd, label, input, select, textarea, small { font-family: var(--tw-body); font-weight: 300; }
p { color: var(--tw-ivory-soft); }
a { color: inherit; }
strong, b { font-weight: 500; color: var(--tw-ivory); }

/* ---------------------------------------------------------------- Type */
body h1:not(#_):not(#_), body h2:not(#_):not(#_), body h3:not(#_):not(#_), body h4:not(#_):not(#_) {
  font-family: var(--tw-head);
  color: var(--tw-ivory);
  text-transform: uppercase !important;
  font-weight: 300;
  letter-spacing: 0.14em !important;
  line-height: 1.28;
}
body h1:not(#_):not(#_) { font-weight: 200; letter-spacing: 0.16em; font-size: clamp(2rem, 4.4vw, 3.7rem); }
body h2:not(#_):not(#_) { font-size: clamp(1.55rem, 2.9vw, 2.55rem); }
body h3:not(#_):not(#_) { font-size: clamp(0.95rem, 1.2vw, 1.12rem); font-weight: 400; letter-spacing: 0.13em; }
body h4:not(#_):not(#_) { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.2em; color: var(--tw-gold); }
body :is(h1, h2, h3) em, body .hero__hook em { font-style: normal; color: var(--tw-gold); font-family: inherit; }
body .font-clash, body [class*='font-clash'] { font-family: var(--tw-head) !important; }

/* Eyebrow: tracked caps with a fine champagne rule */
body .eyebrow:not(#_) {
  font-family: var(--tw-body); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--tw-gold); display: inline-flex; align-items: center; gap: 14px;
}
body .eyebrow::before, body .eyebrow::after { background: var(--tw-gold) !important; opacity: 0.55; height: 1px !important; }

/* Numerals and monogram use the Bodoni serif */
body :is(.story__num, .stat-num, .place-card__num, .svc-card__num, .counter, [data-count], .stat-strip strong, .story__stats strong, .voice__quote-mark) {
  font-family: var(--tw-serif) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--tw-gold-bright);
}

/* ---------------------------------------------------------------- Sections */
body .section, body section.section { background: transparent; color: var(--tw-ivory); }
body .section--alt { background: linear-gradient(180deg, rgba(17, 28, 47, 0.78), rgba(12, 21, 37, 0.86)); }
body .section--obsidian, body .section--dark { background: linear-gradient(180deg, #080f1c, #0a1424); }
body .value-strip { background: linear-gradient(180deg, #0c1627, #09111f); border-top: 1px solid var(--tw-line); border-bottom: 1px solid var(--tw-line); }
body .stat-strip { background: linear-gradient(180deg, #0c1627, #09111f); border-block: 1px solid var(--tw-line); }
body .cta-band { background: linear-gradient(120deg, rgba(10, 19, 34, 0.94), rgba(21, 34, 57, 0.9)); border: 1px solid var(--tw-line); }
body hr, body .divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tw-line), transparent); }
body .ambient-glow__blob { opacity: 0.18; filter: blur(90px) saturate(0.6); }

/* ---------------------------------------------------------------- Surfaces (cards, panels) */
body :is(.property-card, .developer-card, .service-card, .benefit-card, .service-card--themed, .blog-card, .community-card, .fan-card,
  .team-card, .ui-card, .quick-tile, .dev-card, .project-card, .dev-intro__card, .pd-facts, .pd-agent-card, .contact-info-card,
  .research-card, .blog-feature, .story__stats > div, .dialog__panel, .research-method, .research-metrics div, .research-year,
  .inbox-layout, .inbox-thread, .project-feature__note, .voice, .svc-card, .place-card__body, .calc-panel, .calc-card, .tc-card, .testimonial) {
  background: linear-gradient(180deg, rgba(21, 34, 57, 0.74), rgba(13, 22, 38, 0.82)) !important;
  border: 1px solid var(--tw-line-soft) !important;
  border-radius: var(--radius-md) !important;
  color: var(--tw-ivory);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 48px rgba(0, 0, 0, 0.28) !important;
}
body :is(.property-card, .dev-card, .project-card, .blog-card, .community-card, .svc-card, .team-card, .fan-card):hover {
  border-color: var(--tw-line) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 34px 70px rgba(0, 0, 0, 0.4) !important;
}
body :is(.dev-card, .project-card, .property-card, .blog-card, .team-card) :is(h3, h4, strong) { color: var(--tw-ivory); }
body :is(.dev-card, .project-card, .property-card, .blog-card, .team-card, .svc-card, .voice) :is(p, li, span, small) { color: var(--tw-ivory-soft); }
body :is(.dev-card__tag, .badge-outline, .chip) {
  background: rgba(10, 19, 34, 0.7) !important; color: var(--tw-gold) !important; border: 1px solid var(--tw-line) !important; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px;
}
body :is(.place-card__go, .row-carousel__btn, .feature-slider__arrow, .tc-arrow, .btn-slide-arrow, .back-top) {
  background: rgba(10, 19, 34, 0.72) !important; color: var(--tw-gold) !important; border: 1px solid var(--tw-line) !important; box-shadow: none !important;
}
body :is(.row-carousel__btn, .feature-slider__arrow, .tc-arrow, .back-top):hover { background: var(--tw-gold) !important; color: var(--tw-midnight) !important; }
body .dev-logo, body .marquee__logo { filter: grayscale(1) brightness(0) invert(1) sepia(0.25) opacity(0.82); }
body .marquee__item { background: rgba(21, 34, 57, 0.5) !important; border: 1px solid var(--tw-line-soft) !important; }
body .value-item__icon, body .svc-card__icon, body .quick-tile__icon { background: rgba(205, 178, 126, 0.08) !important; color: var(--tw-gold) !important; border: 1px solid var(--tw-line) !important; border-radius: 3px; }
body .voice__avatar { background: rgba(205, 178, 126, 0.12) !important; color: var(--tw-gold) !important; border: 1px solid var(--tw-line); }
body .voice__stars { color: var(--tw-gold); }

/* ---------------------------------------------------------------- Forms */
body :is(.form-field input, .form-field select, .form-field textarea, .calc-input, .calc-pill, .filter-bar, .filter-bar select,
  .contact-page .form-field input, .contact-page .form-field select, .contact-page .form-field textarea,
  .nl-inline__row, .swk-chat input, .inbox-login input, .inbox-conversation textarea, .research-search input, input, select, textarea) {
  background: rgba(7, 13, 24, 0.55) !important; color: var(--tw-ivory) !important;
  border: 1px solid var(--tw-line) !important; border-radius: 3px !important; box-shadow: none !important;
  font-family: var(--tw-body); font-weight: 300; letter-spacing: 0.02em;
}
body :is(input, textarea)::placeholder { color: var(--tw-ivory-faint) !important; }
body :is(input, select, textarea):focus { outline: none; border-color: var(--tw-gold) !important; box-shadow: 0 0 0 3px rgba(205, 178, 126, 0.14) !important; }
body label, body .form-field > span, body .calc-field > span { color: var(--tw-ivory-soft); letter-spacing: 0.1em; font-size: 0.74rem; text-transform: uppercase; font-weight: 400; }
body option { background: #0f1a2d; color: var(--tw-ivory); }

/* ---------------------------------------------------------------- Buttons: fine hairline, tracked caps */
body .btn:not(#_) {
  font-family: var(--tw-head); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 2px; padding-inline: 1.7em; box-shadow: none; text-shadow: none;
}
body .btn-lg:not(#_) { font-size: 0.74rem; padding: 1.1em 2.1em; }
body .btn-primary:not(#_), body .btn-gold:not(#_), body .btn-dark:not(#_) {
  background: linear-gradient(180deg, #e6d4ab, #cdb27e) !important; color: #0a1322 !important; border: 1px solid #d9c18f !important;
}
body .btn-primary:not(#_):hover, body .btn-gold:not(#_):hover, body .btn-dark:not(#_):hover { background: linear-gradient(180deg, #f1e3c0, #dcc592) !important; transform: translateY(-1px); }
body :is(.btn-outline-dark, .btn-outline, .btn-white, .btn-ghost):not(#_) {
  background: rgba(10, 19, 34, 0.28) !important; color: var(--tw-ivory) !important; border: 1px solid rgba(243, 238, 227, 0.42) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body :is(.btn-outline-dark, .btn-outline, .btn-white, .btn-ghost):not(#_):hover { background: rgba(243, 238, 227, 0.1) !important; border-color: var(--tw-gold) !important; color: var(--tw-gold-bright) !important; }
body .btn::before, body .btn::after { opacity: 0.5; }

/* ---------------------------------------------------------------- Header: transparent, editorial caps */
body .site-header[data-site-header] {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body .site-header[data-site-header]::before { display: none !important; }
body .site-header[data-site-header].is-scrolled {
  background: linear-gradient(180deg, rgba(8, 15, 28, 0.62), rgba(8, 15, 28, 0.38)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--tw-line-soft) !important; border-radius: 0 0 6px 6px !important;
}
body .site-header .site-brand { border-right: 1px solid var(--tw-line) !important; }
body .site-header .site-brand .brand-logo { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)) !important; }
body .site-header .site-nav a:not(#_) {
  font-family: var(--tw-head) !important; font-weight: 400 !important; font-size: 0.7rem !important; letter-spacing: 0.26em !important;
  text-transform: uppercase; color: rgba(243, 238, 227, 0.86) !important; background: transparent !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
body .site-header .site-nav a:hover, body .site-header .site-nav a:focus-visible, body .site-header .site-nav a[aria-current='page'] {
  color: var(--tw-gold-bright) !important; background: transparent !important; box-shadow: inset 0 -1px 0 var(--tw-gold) !important;
}
body .site-header .site-nav a[aria-current='page']::before { background: transparent !important; }
body .site-header .site-nav__track { background: transparent !important; box-shadow: none !important; }
body .site-header .site-header__cta:not(#_) {
  background: rgba(10, 19, 34, 0.3) !important; color: var(--tw-ivory) !important; border: 1px solid rgba(205, 178, 126, 0.65) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body .site-header .site-header__cta:hover { background: var(--tw-gold) !important; color: var(--tw-midnight) !important; }
body .site-header .site-header__go { background: transparent !important; color: var(--tw-gold) !important; border: 0; }
body .site-header .site-header__cta:hover .site-header__go { color: var(--tw-midnight) !important; }
body .site-header .site-header__wa { color: #e8dfc9 !important; }
body .site-header .nav-toggle { background: rgba(10, 19, 34, 0.35) !important; color: var(--tw-ivory) !important; border: 1px solid var(--tw-line) !important; }
body .site-header .mobile-menu, body .mobile-menu {
  background: rgba(8, 15, 28, 0.92) !important; border: 1px solid var(--tw-line) !important; border-radius: 6px !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
body .site-header .mobile-menu__nav a { font-family: var(--tw-head) !important; font-weight: 300 !important; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.86rem !important; color: var(--tw-ivory) !important; }
body .site-header .mobile-menu__nav a[aria-current='page'] { color: var(--tw-gold) !important; }
body .announce, body .announcement, body [class*='announce'] { background: #070d18 !important; color: var(--tw-ivory-soft) !important; border-bottom: 1px solid var(--tw-line-soft); letter-spacing: 0.06em; }
body [class*='announce'] a { color: var(--tw-gold) !important; border-color: var(--tw-line) !important; }

/* ---------------------------------------------------------------- Footer */
body .site-footer { background: linear-gradient(180deg, #080f1c, #060b15) !important; color: var(--tw-ivory-soft); border-top: 1px solid var(--tw-line); }
body .site-footer :is(h3, h4) { color: var(--tw-gold) !important; font-size: 0.74rem; letter-spacing: 0.28em; }
body .site-footer a { color: var(--tw-ivory-soft); transition: color 0.2s; }
body .site-footer a:hover { color: var(--tw-gold-bright); }
body .social-row a { background: transparent !important; border: 1px solid var(--tw-line) !important; color: var(--tw-gold) !important; }
body .footer-news { background: rgba(21, 34, 57, 0.6) !important; border: 1px solid var(--tw-line) !important; }

/* ---------------------------------------------------------------- Interior page headers share the hero's twilight grade */
body .page-hero { background-color: var(--tw-midnight-deep); border-bottom: 1px solid var(--tw-line); }
body .page-hero::before, body .page-hero::after { background: linear-gradient(180deg, rgba(7, 13, 24, 0.7) 0%, rgba(10, 19, 34, 0.42) 45%, rgba(201, 143, 88, 0.1) 82%, rgba(7, 13, 24, 0.86) 100%) !important; }
body .page-hero p { color: var(--tw-ivory-soft); }
body .breadcrumb, body .breadcrumbs, body [class*='breadcrumb'] a { color: var(--tw-ivory-faint); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; }

/* ---------------------------------------------------------------- Cinematic grade for photography and film */
body :is(.dev-card__media, .project-card__media, .property-card__media, .blog-card__media, .place-card, .pd-bento-gallery__item, .split-block, .story__media, .tc-photo, .team-card) img {
  filter: saturate(0.86) contrast(1.04) brightness(0.94);
}
body :is(.dev-card__media, .project-card__media, .property-card__media, .blog-card__media, .story__media, .place-card)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 22, 44, 0.2), rgba(10, 19, 34, 0) 40%, rgba(201, 143, 88, 0.12) 100%);
  mix-blend-mode: soft-light;
}
.hero__video, .hero__idle-video { filter: saturate(0.82) contrast(1.05) brightness(0.9) sepia(0.06); }
.hero__bg::after {
  background:
    radial-gradient(ellipse 64% 48% at 50% 43%, rgba(6, 12, 24, 0.5) 0%, rgba(6, 12, 24, 0.22) 56%, rgba(6, 12, 24, 0) 84%),
    linear-gradient(180deg, rgba(8, 17, 38, 0.66) 0%, rgba(11, 24, 50, 0.22) 36%, rgba(120, 82, 58, 0.14) 74%, rgba(6, 11, 22, 0.78) 100%) !important;
}
.hero__bg { background: #070d18; }

/* ---------------------------------------------------------------- Hero type */
body .hero .hero__hook:not(#_):not(#_) {
  font-family: var(--tw-head); font-weight: 200; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.22;
  font-size: clamp(2.05rem, 5.2vw, 4.7rem); color: var(--tw-ivory); text-shadow: 0 2px 40px rgba(4, 9, 20, 0.55);
  background: none; -webkit-text-fill-color: currentColor;
}
body .hero .hero__hook em { color: var(--tw-gold-bright); -webkit-text-fill-color: var(--tw-gold-bright); }
body .hero .hero__lead:not(#_) { font-family: var(--tw-body); font-weight: 300; letter-spacing: 0.1em; font-size: clamp(0.82rem, 1.2vw, 1rem); color: rgba(243, 238, 227, 0.86) !important; text-transform: none; }
body .hero .hero__kicker:not(#_) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: var(--tw-body); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--tw-gold-bright) !important; padding: 0;
}
body .hero .hero__lead::after { background: var(--tw-gold) !important; opacity: 0.6; }
body .hero__reveal-name { font-family: var(--tw-head) !important; font-weight: 300 !important; }
body .hero__reveal-tag { font-family: var(--tw-body) !important; font-weight: 300 !important; letter-spacing: 0.3em !important; text-transform: uppercase; color: var(--tw-gold-bright) !important; font-size: 0.66rem !important; }
body .hero__reveal-rule { background: linear-gradient(90deg, transparent, var(--tw-gold), transparent) !important; }
body .search-bar, body .glass-panel { background: rgba(8, 15, 28, 0.55) !important; border: 1px solid var(--tw-line) !important; -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); border-radius: 4px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4) !important; }
body .hero-art-credit { color: rgba(243, 238, 227, 0.62); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.6rem; }
body .photo-credit { color: rgba(243, 238, 227, 0.62) !important; background: rgba(7, 13, 24, 0.55) !important; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- Chat, cookies, toasts, dialogs */
body :is(.cookie-banner, .swk-chat__panel, .toast__actions a, .toast__actions button, .dialog__panel, .swk-chat__topics button) {
  background: rgba(10, 19, 34, 0.94) !important; color: var(--tw-ivory) !important; border: 1px solid var(--tw-line) !important; border-radius: 4px !important;
}
body .swk-chat__launcher { background: #0a1322 !important; border: 1px solid var(--tw-gold) !important; }

/* ---------------------------------------------------------------- Section rhythm: two close midnight tones, hairline seams */
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):not(.section--obsidian) {
  background: linear-gradient(180deg, #0a1322 0%, #0b1526 100%) !important;
  color: var(--tw-ivory);
}
main > section:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):not(.section--obsidian):nth-of-type(even) {
  background: linear-gradient(180deg, rgba(17, 28, 47, 0.9) 0%, #0e182b 14%, #0e182b 86%, rgba(17, 28, 47, 0.9) 100%) !important;
}
main > section + section:not(.hero-cine) { border-top: 1px solid rgba(205, 178, 126, 0.08); }
main > section.section--obsidian { background: linear-gradient(165deg, #070c17 0%, #0d1626 52%, #080d18 100%) !important; }
main > section .eyebrow, main > section .eyebrow::before { color: var(--tw-gold); }
main > section .eyebrow::before { background: var(--tw-gold); }
main > section .section-header p, main > section .section-head-row p { color: var(--tw-ivory-soft); }

/* Stragglers with hard-coded dark ink */
body main a:not([class]), body main li, body .listing-note, body .status-pill { color: inherit; }
body :is(.dev-card__count, .calc-donut__amount, .quick-tile__go, .status-pill, .swk-chat__privacy, .team-card__role, .team-card h3) { color: var(--tw-ivory-soft) !important; }
body .quick-tile__go { color: var(--tw-gold) !important; }
body :is(.blog-grid > .blog-card, .property-grid > .property-card:not(.property-card--feature), .team-card, .team-card__body) {
  background: linear-gradient(180deg, rgba(21, 34, 57, 0.74), rgba(13, 22, 38, 0.82)) !important;
}
body .team-card__photo { background: linear-gradient(180deg, #2a2f3a, #1a1f29) !important; }
body .team-card__photo img { filter: saturate(0.85) contrast(1.02) brightness(0.96); }
body .calc-donut { filter: saturate(0.8); }
body table, body th, body td { border-color: var(--tw-line-soft) !important; color: var(--tw-ivory-soft); }
body th { color: var(--tw-gold) !important; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; }
body a:hover { color: var(--tw-gold-bright); }
body .btn:hover { color: inherit; }
body .skip-link { background: var(--tw-gold); color: var(--tw-midnight); }

main > section.cta-section, main > section.section--dark, main > .stat-section, main > section.stats {
  background: linear-gradient(180deg, #0c1627, #08101d) !important; border-block: 1px solid var(--tw-line);
}
body .cookie-banner :is(h2, h3, h4, strong) { font-size: 0.95rem !important; letter-spacing: 0.16em; color: var(--tw-gold-bright) !important; font-weight: 400; }
body .cta-band h2, body .cta-section h2 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }

/* Text links inside cards: plain champagne caps, no boxes */
body :is(.dev-card__more, .project-card__more, .svc-card__more, .project-card__collection, .project-card__loc, .project-card__dev) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--tw-gold) !important;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; font-weight: 400; padding-inline: 0 !important;
}
body :is(.project-card__more, .dev-card__more, .svc-card__more) { border-top: 1px solid var(--tw-line-soft) !important; }
body .voice p, body .voice blockquote, body .voice__text { font-family: var(--tw-serif); font-weight: 400; font-size: 1.02rem; line-height: 1.6; color: var(--tw-ivory) !important; }

/* Gradient-clipped numerals: make them solid champagne */
body :is(.stat-num, .story__num, .story__stats strong, .story__stats b, .counter, [data-count], .stat-strip .stat-num) {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: var(--tw-gold-bright) !important; color: var(--tw-gold-bright) !important; text-shadow: none !important;
}
body .story__label, body .stat-label { color: var(--tw-ivory-soft) !important; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.66rem; }

/* Calculator, charts, links */
body :is(.calc-submit, .calc-form .btn, form .btn-block, .btn-block) { background: linear-gradient(180deg, #e6d4ab, #cdb27e) !important; color: #0a1322 !important; border: 1px solid #d9c18f !important; }
body :is(.calc-legend, .calc-legend *, .calc-donut__label, .calc-donut__amount, .calc-note, .calc-help, .calc-hint, .calc-result *) { color: var(--tw-ivory-soft) !important; }
body :is(.calc-pill.is-active, .calc-pill[aria-pressed='true'], .calc-unit button.is-active, .calc-unit .is-active) { background: var(--tw-gold) !important; color: var(--tw-midnight) !important; }
body a:not(.btn):not([class*='site-']):not([class*='nav']):not(.skip-link)[style*='color'], body .link, body .text-link { color: var(--tw-gold) !important; }
body details summary, body .accordion-trigger { color: var(--tw-ivory) !important; font-family: var(--tw-head); letter-spacing: 0.08em; }
body .accordion-item, body details { background: rgba(21, 34, 57, 0.5) !important; border: 1px solid var(--tw-line-soft) !important; border-radius: 3px; }

/* Photography grade for every content image */
body main img:not([src*='/brand/']):not([src*='/developers/']):not(.dev-logo):not(.marquee__logo):not(.team-card__photo img) { filter: saturate(0.84) contrast(1.04) brightness(0.93); }
body .place-card { position: relative; }
body .place-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 22, 44, 0.22), rgba(10, 19, 34, 0) 38%, rgba(10, 19, 34, 0.55) 100%), linear-gradient(0deg, rgba(201, 143, 88, 0.1), transparent 45%); mix-blend-mode: normal; z-index: 1; border-radius: inherit; }
body .place-card > * { position: relative; z-index: 2; }

body .dev-card :is(h3, a, li) { color: var(--tw-ivory) !important; }
body .dev-card li, body .dev-card li a { color: var(--tw-ivory-soft) !important; }
body :is(.calc-disclosure, .calc-disclosure span, .calc-breakdown .row span, .row > span) { color: var(--tw-ivory-soft) !important; }
body .calc-disclosure { color: var(--tw-gold) !important; }
body .search-field label { color: var(--tw-gold) !important; }
body .swk-chat__tabs button { color: var(--tw-ivory-soft) !important; }
body .swk-chat__tabs button[aria-selected='true'], body .swk-chat__tabs button.is-active { color: var(--tw-midnight) !important; }
body .value-item h3 { color: var(--tw-ivory) !important; }

/* Refinements after review */
body h1:not(#_):not(#_) { font-weight: 300; letter-spacing: 0.13em; }
body .page-hero h1:not(#_):not(#_) { text-shadow: 0 2px 30px rgba(4, 9, 20, 0.6); }
body .page-hero::before, body .page-hero::after {
  background: linear-gradient(180deg, rgba(6, 12, 24, 0.82) 0%, rgba(8, 17, 36, 0.6) 48%, rgba(60, 44, 40, 0.28) 84%, rgba(6, 11, 22, 0.92) 100%) !important;
}
body .page-hero { background-blend-mode: normal; }
body .site-footer :is(h2, h3, h4, h5):not(#_):not(#_) { font-size: 0.72rem !important; letter-spacing: 0.3em !important; color: var(--tw-gold) !important; font-weight: 400 !important; }
body .dev-card__tag:not(#_) {
  background: transparent !important; border: 0 !important; padding: 0 !important; text-transform: none; letter-spacing: 0.02em;
  font-size: 0.86rem; font-weight: 300; color: var(--tw-ivory-soft) !important; line-height: 1.55; border-radius: 0;
}
body .dev-card h3:not(#_):not(#_) { font-size: 0.92rem; letter-spacing: 0.18em; }
body .status-pill { background: rgba(205, 178, 126, 0.14) !important; color: var(--tw-gold-bright) !important; border: 1px solid var(--tw-line); }
body .next-steps li::before, body .step-num { background: transparent !important; color: var(--tw-gold) !important; border: 1px solid var(--tw-gold); font-family: var(--tw-serif); }
body .map-embed iframe { filter: invert(0.92) hue-rotate(185deg) saturate(0.45) brightness(0.82) contrast(0.95); }

body .hero .hero__hook:not(#_):not(#_):not(#_) { font-weight: 200 !important; letter-spacing: 0.2em !important; font-size: clamp(1.9rem, 4.6vw, 4.2rem); }
body .hero .hero__kicker::before { background: var(--tw-gold) !important; box-shadow: none !important; width: 28px !important; height: 1px !important; border-radius: 0 !important; }
body svg [fill='#25D366'] { fill: #6f9d78; }

body .btn-calc { background: linear-gradient(180deg, #e6d4ab, #cdb27e) !important; color: #0a1322 !important; border: 1px solid #d9c18f !important; border-radius: 2px !important; font-family: var(--tw-head); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; font-weight: 500; box-shadow: none !important; }
body .calc-donut__seg--pi { stroke: #cdb27e !important; }
body .calc-donut__seg--svc { stroke: #8c7d6c !important; }
body .calc-donut__seg--ins { stroke: #cfc3b0 !important; }
body .calc-donut__center, body .calc-donut__amount, body .calc-donut__center * { color: var(--tw-ivory) !important; font-family: var(--tw-serif); }
body [class*='calc'] i[class*='dot'], body .calc-legend__dot { box-shadow: none; }

/* Article pages and other non-<main > section> wrappers */
main > article.section, main > article, body article.section { background: linear-gradient(180deg, #0a1322, #0b1526) !important; color: var(--tw-ivory); }
body article :is(p, li) { color: var(--tw-ivory-soft); font-size: 1rem; line-height: 1.85; }
body article :is(h2, h3) { margin-top: 2.2em; }
body article blockquote, body .article-lead, body article .lead { border-left: 1px solid var(--tw-gold) !important; color: var(--tw-ivory) !important; font-family: var(--tw-serif); font-weight: 400; background: transparent !important; }
body article a:not(.btn) { color: var(--tw-gold-bright); text-decoration-color: var(--tw-line); text-underline-offset: 3px; }
body article :is(ul, ol) li::marker { color: var(--tw-gold); }
body article table { background: rgba(21, 34, 57, 0.5); }

/* Project features: neutral depth, no amber glow */
body .project-feature__media { border-radius: 4px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important; border: 1px solid var(--tw-line-soft); }
body .project-feature__tags span, body .project-feature__tags li { background: transparent !important; color: var(--tw-stone) !important; border: 1px solid var(--tw-line-soft) !important; border-radius: 2px !important; letter-spacing: 0.06em; font-size: 0.74rem; }
body .project-feature__film, body .project-feature__film * { color: var(--tw-gold) !important; }
body .project-feature__film svg, body .project-feature__film i, body .project-feature__film span:first-child { background: transparent !important; border: 1px solid var(--tw-gold) !important; color: var(--tw-gold) !important; fill: var(--tw-gold); }
body .project-feature__loc { color: var(--tw-taupe) !important; }
body .project-feature__media figcaption, body .project-feature__media .caption, body .media-tag { background: rgba(7, 13, 24, 0.7) !important; color: var(--tw-ivory-soft) !important; border-radius: 2px !important; letter-spacing: 0.08em; }
body .ambient-glow__blob { background: radial-gradient(circle, rgba(205, 178, 126, 0.4), rgba(138, 110, 78, 0) 70%) !important; opacity: 0.14 !important; }
body :is(.property-card, .dev-card, .project-card)::after { box-shadow: none; }
main > article.section.container { max-width: none; padding-inline: max(var(--space-5), calc((100% - var(--container-max)) / 2 + var(--space-6))); }
main { background: transparent; }

@media (max-width: 767px) {
  body .hero .hero__kicker:not(#_) { font-size: 0.58rem; letter-spacing: 0.24em; white-space: normal !important; text-align: center; max-width: 92%; line-height: 1.7; }
  body .hero .hero__kicker::before { display: none !important; }
  body .hero .hero__hook:not(#_):not(#_):not(#_) { letter-spacing: 0.14em !important; }
  body .hero__reveal-tag { letter-spacing: 0.2em !important; }
}

/* ======================================================================
   Hero text: two rows, always legible
   ====================================================================== */
body .hero__hook .hl { display: block; white-space: nowrap; }
body .hero .hero__hook:not(#_):not(#_):not(#_) {
  font-weight: 300 !important; letter-spacing: 0.12em !important; line-height: 1.3 !important;
  font-size: clamp(0.98rem, 4.05vw, 3.4rem); text-align: center;
  color: #fbf7ee !important; -webkit-text-fill-color: #fbf7ee;
  text-shadow: 0 1px 2px rgba(2, 6, 14, 0.7), 0 4px 22px rgba(2, 6, 14, 0.7), 0 10px 60px rgba(2, 6, 14, 0.55);
}
body .hero .hero__hook em { color: #ecd7a6 !important; -webkit-text-fill-color: #ecd7a6 !important; }
body .hero .hero__lead:not(#_) {
  font-weight: 400; font-size: clamp(0.84rem, 1.25vw, 1.02rem); letter-spacing: 0.07em; line-height: 1.6;
  color: #f6f0e3 !important; max-width: min(92vw, 760px); text-align: center;
  text-shadow: 0 1px 2px rgba(2, 6, 14, 0.75), 0 3px 18px rgba(2, 6, 14, 0.75);
}
body .hero .hero__kicker:not(#_) { color: #ecd7a6 !important; font-weight: 500; text-shadow: 0 1px 2px rgba(2, 6, 14, 0.8), 0 3px 16px rgba(2, 6, 14, 0.7); }
body .hero__stage { min-height: clamp(190px, 28vh, 280px); }
body .hero__reveal-name, body .hero__reveal-tag { text-shadow: 0 1px 2px rgba(2, 6, 14, 0.8), 0 3px 18px rgba(2, 6, 14, 0.7); }
body .hero__reveal-tag { color: #ecd7a6 !important; font-weight: 500 !important; }
/* A deeper veil and vignette behind the copy keeps bright interiors readable */
body .hero__bg::after {
  background:
    radial-gradient(ellipse 78% 58% at 50% 46%, rgba(4, 9, 20, 0.7) 0%, rgba(4, 9, 20, 0.42) 52%, rgba(4, 9, 20, 0.08) 86%, rgba(4, 9, 20, 0) 100%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(2, 6, 14, 0.5) 100%),
    linear-gradient(180deg, rgba(8, 17, 38, 0.6) 0%, rgba(11, 24, 50, 0.2) 34%, rgba(120, 82, 58, 0.12) 72%, rgba(6, 11, 22, 0.78) 100%) !important;
}
@media (max-width: 767px) {
  body .hero .hero__hook:not(#_):not(#_):not(#_) { letter-spacing: 0.09em !important; font-size: clamp(0.92rem, 4.4vw, 1.5rem); }
  body .hero .hero__lead:not(#_) { font-size: 0.86rem; }
}

/* ======================================================================
   Light bands: warm ivory with a soft vignette, navy ink
   ====================================================================== */
.tw-light {
  --tw-ivory: #14203a;
  --tw-ivory-soft: rgba(20, 32, 58, 0.82);
  --tw-ivory-faint: rgba(20, 32, 58, 0.68);
  --tw-gold: #7d6030;
  --tw-gold-bright: #6c5124;
  --tw-line: rgba(125, 96, 48, 0.38);
  --tw-line-soft: rgba(20, 32, 58, 0.14);
  --color-text: #14203a;
  --color-text-muted: rgba(20, 32, 58, 0.82);
  --color-text-subtle: rgba(20, 32, 58, 0.68);
  --color-border: rgba(20, 32, 58, 0.14);
  --color-accent: #7d6030;
  color: #14203a;
}
main > section.tw-light:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):not(.section--obsidian):nth-of-type(n), main > article.tw-light.section.section.section {
  background:
    radial-gradient(ellipse 110% 85% at 50% 38%, #faf6ec 0%, #f3ecdf 58%, #e7ddca 100%) !important;
  color: #14203a;
  box-shadow: inset 0 0 120px rgba(90, 68, 36, 0.1);
}
main > section.tw-dark:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):not(.section--obsidian):nth-of-type(n) {
  background: radial-gradient(ellipse 100% 80% at 50% 40%, #11203a 0%, #0b1527 70%, #080f1d 100%) !important;
}
main > section.tw-light + section.tw-dark, main > section.tw-dark + section.tw-light, main > section.tw-light + article, main > article.tw-light + section {
  border-top: 1px solid rgba(205, 178, 126, 0.45);
}
.tw-light :is(h1, h2, h3, h4):not(#_):not(#_) { color: #14203a; }
.tw-light h4:not(#_):not(#_) { color: #7d6030; }
.tw-light :is(p, li, dd, span, small, figcaption) { color: inherit; }
.tw-light p { color: rgba(20, 32, 58, 0.82); }
.tw-light strong, .tw-light b { color: #14203a; }
.tw-light :is(h1, h2, h3) em { color: #7d6030; }
.tw-light .eyebrow:not(#_), main > section.tw-light .eyebrow { color: #7d6030; }
.tw-light .eyebrow::before, .tw-light .eyebrow::after, main > section.tw-light .eyebrow::before { background: #7d6030 !important; }
.tw-light .section-header p, .tw-light .section-head-row p { color: rgba(20, 32, 58, 0.8); }

/* Cards on light bands */
body .tw-light :is(.property-card, .developer-card, .service-card, .benefit-card, .service-card--themed, .blog-card, .community-card, .fan-card,
  .team-card, .ui-card, .quick-tile, .dev-card, .project-card, .dev-intro__card, .pd-facts, .pd-agent-card, .contact-info-card,
  .research-card, .blog-feature, .story__stats > div, .research-method, .research-metrics div, .research-year,
  .project-feature__note, .voice, .svc-card, .calc-panel, .calc-card, .tc-card, .testimonial,
  .blog-grid > .blog-card, .property-grid > .property-card:not(.property-card--feature), .team-card__body) {
  background: linear-gradient(180deg, #fffdf8, #faf5ea) !important;
  border: 1px solid rgba(20, 32, 58, 0.12) !important;
  color: #14203a;
  box-shadow: 0 1px 2px rgba(60, 45, 25, 0.08), 0 20px 44px rgba(60, 45, 25, 0.12) !important;
}
body .tw-light :is(.property-card, .dev-card, .project-card, .blog-card, .community-card, .svc-card, .team-card, .fan-card):hover { border-color: rgba(125, 96, 48, 0.5) !important; box-shadow: 0 2px 4px rgba(60, 45, 25, 0.1), 0 28px 56px rgba(60, 45, 25, 0.18) !important; }
body .tw-light :is(.dev-card, .project-card, .property-card, .blog-card, .team-card) :is(h3, h4, strong) { color: #14203a; }
body .tw-light :is(.dev-card, .project-card, .property-card, .blog-card, .team-card, .svc-card, .voice) :is(p, li, span, small) { color: rgba(20, 32, 58, 0.8); }
body .tw-light .dev-card :is(h3, a, li) { color: #14203a !important; }
body .tw-light .dev-card li, body .tw-light .dev-card li a { color: rgba(20, 32, 58, 0.8) !important; }
body .tw-light .dev-card__tag:not(#_) { color: rgba(20, 32, 58, 0.8) !important; }
body .tw-light :is(.dev-card__more, .project-card__more, .svc-card__more, .project-card__collection, .project-card__loc, .project-card__dev) { color: #7d6030 !important; }
body .tw-light :is(.dev-card__count, .status-pill) { color: #14203a !important; }
body .tw-light :is(.badge-outline, .chip) { background: rgba(255, 253, 248, 0.9) !important; color: #6c5124 !important; border: 1px solid rgba(125, 96, 48, 0.45) !important; }
body .tw-light :is(.place-card__go, .row-carousel__btn, .feature-slider__arrow, .tc-arrow, .btn-slide-arrow) { background: #fffdf8 !important; color: #7d6030 !important; border: 1px solid rgba(125, 96, 48, 0.45) !important; }
body .tw-light :is(.row-carousel__btn, .feature-slider__arrow, .tc-arrow):hover { background: #7d6030 !important; color: #fffdf8 !important; }
body .tw-light .marquee__item { background: #fffdf8 !important; border: 1px solid rgba(20, 32, 58, 0.1) !important; }
body .tw-light :is(.dev-logo, .marquee__logo) { filter: none; }
body .tw-light :is(.value-item__icon, .svc-card__icon, .quick-tile__icon) { background: rgba(125, 96, 48, 0.09) !important; color: #7d6030 !important; border: 1px solid rgba(125, 96, 48, 0.4) !important; }
body .tw-light .voice p, body .tw-light .voice blockquote, body .tw-light .voice__text { color: #14203a !important; }
body .tw-light .voice__avatar { background: rgba(125, 96, 48, 0.12) !important; color: #6c5124 !important; }
body .tw-light .voice__stars { color: #9a7432; }
body .tw-light :is(.stat-num, .story__num, .story__stats strong, .story__stats b, .counter, [data-count]) { -webkit-text-fill-color: #7d6030 !important; color: #7d6030 !important; }
body .tw-light .story__label, body .tw-light .stat-label { color: rgba(20, 32, 58, 0.78) !important; }
body .tw-light :is(.team-card__role, .team-card h3, .quick-tile__go) { color: #14203a !important; }
body .tw-light .quick-tile__go { color: #7d6030 !important; }
body .tw-light .team-card__photo { background: linear-gradient(180deg, #e9e1d1, #d9cfba) !important; }
body .tw-light .team-card__photo img { filter: none; }

/* Forms on light bands */
body .tw-light :is(.form-field input, .form-field select, .form-field textarea, .calc-input, .calc-pill, .filter-bar, .filter-bar select, input, select, textarea) {
  background: #fffdf8 !important; color: #14203a !important; border: 1px solid rgba(20, 32, 58, 0.28) !important;
}
body .tw-light :is(input, textarea)::placeholder { color: rgba(20, 32, 58, 0.6) !important; }
body .tw-light :is(input, select, textarea):focus { border-color: #7d6030 !important; box-shadow: 0 0 0 3px rgba(125, 96, 48, 0.18) !important; }
body .tw-light label, body .tw-light .form-field > span, body .tw-light .calc-field > span { color: rgba(20, 32, 58, 0.85); }
body .tw-light option { background: #fffdf8; color: #14203a; }
body .tw-light .calc-pill.is-active { background: #7d6030 !important; color: #fffdf8 !important; }
body .tw-light :is(.calc-legend, .calc-legend *, .calc-donut__label, .calc-note, .calc-help, .calc-hint, .calc-disclosure, .row > span) { color: rgba(20, 32, 58, 0.82) !important; }
body .tw-light .calc-donut__center, body .tw-light .calc-donut__amount, body .tw-light .calc-donut__center * { color: #14203a !important; }
body .tw-light .calc-donut__seg--pi { stroke: #a8843f !important; }
body .tw-light .calc-donut__seg--svc { stroke: #6f6455 !important; }
body .tw-light .calc-donut__seg--ins { stroke: #b9ad97 !important; }
body .tw-light .calc-donut circle:first-child { stroke: rgba(20, 32, 58, 0.1); }
body .tw-light :is(.accordion-item, details) { background: #fffdf8 !important; border: 1px solid rgba(20, 32, 58, 0.14) !important; }
body .tw-light :is(details summary, .accordion-trigger) { color: #14203a !important; }
body .tw-light .accordion-panel, body .tw-light .accordion-panel p { color: rgba(20, 32, 58, 0.82); }
body .tw-light .listing-note { color: rgba(20, 32, 58, 0.72); }
body .tw-light table, body .tw-light th, body .tw-light td { color: rgba(20, 32, 58, 0.85); border-color: rgba(20, 32, 58, 0.14) !important; }
body .tw-light th { color: #7d6030 !important; }
body .tw-light .map-embed iframe { filter: sepia(0.15) saturate(0.8) contrast(0.95); }

/* Buttons on light bands */
body .tw-light :is(.btn-outline-dark, .btn-outline, .btn-ghost):not(#_) {
  background: transparent !important; color: #14203a !important; border: 1px solid rgba(20, 32, 58, 0.55) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body .tw-light :is(.btn-outline-dark, .btn-outline, .btn-ghost):not(#_):hover { background: #14203a !important; color: #fbf7ee !important; border-color: #14203a !important; }
body .tw-light .btn-primary:not(#_), body .tw-light .btn-gold:not(#_), body .tw-light .btn-dark:not(#_) { background: #14203a !important; color: #fbf7ee !important; border: 1px solid #14203a !important; }
body .tw-light .btn-primary:not(#_):hover, body .tw-light .btn-gold:not(#_):hover, body .tw-light .btn-dark:not(#_):hover { background: #7d6030 !important; border-color: #7d6030 !important; }
body .tw-light .btn-calc { background: #14203a !important; color: #fbf7ee !important; border-color: #14203a !important; }

/* Article body on a light band */
body article.tw-light :is(p, li) { color: rgba(20, 32, 58, 0.86); }
body article.tw-light a:not(.btn) { color: #6c5124; text-decoration-color: rgba(125, 96, 48, 0.5); }
body article.tw-light blockquote, body article.tw-light .article-lead, body article.tw-light .lead { color: #14203a !important; border-left-color: #7d6030 !important; }
body .tw-light a:hover:not(.btn) { color: #6c5124; }

/* Contact and misc blocks inside light bands */
body .tw-light .contact-info-card, body .tw-light .ui-card { color: #14203a; }
body .tw-light :is(.contact-info-card, .ui-card) :is(p, span, li, dd, dt, small) { color: rgba(20, 32, 58, 0.84); }
body .tw-light :is(.next-steps li::before) { color: #7d6030 !important; border-color: #7d6030; }
body .tw-light .project-feature__media { box-shadow: 0 24px 56px rgba(60, 45, 25, 0.28) !important; border-color: rgba(20, 32, 58, 0.12); }
body .tw-light .project-feature__tags span, body .tw-light .project-feature__tags li { color: #6c5124 !important; border: 1px solid rgba(125, 96, 48, 0.45) !important; }
body .tw-light .project-feature__film, body .tw-light .project-feature__film * { color: #6c5124 !important; }
body .tw-light .project-feature__loc { color: rgba(20, 32, 58, 0.72) !important; }
body .tw-light .ambient-glow__blob { opacity: 0.18 !important; }

/* Legibility: regular weight for running text on both tones */
body :is(p, li, dd, dt, label, input, select, textarea, small, figcaption, td, .listing-note) { font-weight: 400; }
body { font-weight: 400; }
body .hero .hero__lead:not(#_) { font-weight: 500; }

/* Contrast fixes from the audit */
body main .tw-dark .eyebrow:not(#_), body main section.tw-dark .eyebrow, body main .section--obsidian .eyebrow, body main .cta-section .eyebrow { color: #dcc794 !important; }
body main .tw-light .eyebrow:not(#_), body main section.tw-light .eyebrow, body main article.tw-light .eyebrow { color: #6c5124 !important; }
body .tw-light .calc-toggle__btn { color: #14203a !important; }
body .tw-light .calc-toggle__btn.is-active, body .tw-light .calc-toggle__btn[aria-pressed='true'] { background: #14203a !important; color: #fbf7ee !important; }
body .calc-donut__center { background: transparent !important; }
body .site-header[data-site-header].is-scrolled {
  background: linear-gradient(180deg, rgba(8, 15, 28, 0.9), rgba(8, 15, 28, 0.8)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}

/* Scrim behind the beat copy: bright interiors can no longer wash the words out */
body .hero__stage { position: relative; isolation: isolate; }
body .hero__stage::before {
  content: ''; position: absolute; inset: -22% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(3, 8, 18, 0.78) 0%, rgba(3, 8, 18, 0.58) 45%, rgba(3, 8, 18, 0.22) 72%, rgba(3, 8, 18, 0) 100%);
  filter: blur(14px); transition: opacity 0.4s;
}
body .hero[data-phase='logo'] .hero__stage::before { opacity: 0; }
body .hero .hero__hook:not(#_):not(#_):not(#_) { font-weight: 400 !important; letter-spacing: 0.1em !important; }
body .hero .hero__kicker:not(#_) { color: #f3e3b6 !important; font-weight: 600; }
body .hero .hero__lead:not(#_) { color: #fffaf0 !important; font-weight: 500; }
body .hero.is-scroll-ready .hero__beat { filter: none; }
body .hero__beat { width: max-content; max-width: 96vw; margin-inline: auto; }
body .hero__beat .hero__hook, body .hero__beat .hero__lead { text-align: center; }
body .hero__beat .hero__hook .hl { text-align: center; }

/* ======================================================================
   Hero: copy on the true centre line, lighter shade
   ====================================================================== */
body .hero__content { position: absolute; inset: 0; justify-content: flex-end; padding-bottom: clamp(20px, 6.5svh, 64px); padding-top: 0; }
body .hero__stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 96vw; min-height: 0;
  display: grid; place-items: center; z-index: 3;
}
body .hero[data-phase='b1'] .hero__stage { top: 44%; }
body .hero__beat { grid-area: 1 / 1; align-items: center; justify-content: center; text-align: center; gap: clamp(0.55rem, 1.4svh, 1rem); }
body .hero__beat .hero__kicker { justify-content: center; }
body .hero .hero__hook:not(#_):not(#_):not(#_) { font-weight: 500 !important; color: #fffaf0 !important; -webkit-text-fill-color: #fffaf0; }
body .hero .hero__hook em { -webkit-text-fill-color: #f3dfae !important; color: #f3dfae !important; }
body .hero__stage::before { inset: -14% -8%; filter: blur(22px); background: radial-gradient(ellipse 60% 56% at 50% 50%, rgba(3, 8, 18, 0.5) 0%, rgba(3, 8, 18, 0.34) 48%, rgba(3, 8, 18, 0.1) 74%, rgba(3, 8, 18, 0) 100%); }
body .hero__bg::after {
  background:
    radial-gradient(ellipse 74% 54% at 50% 48%, rgba(4, 9, 20, 0.36) 0%, rgba(4, 9, 20, 0.2) 55%, rgba(4, 9, 20, 0) 88%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(2, 6, 14, 0.34) 100%),
    linear-gradient(180deg, rgba(8, 17, 38, 0.4) 0%, rgba(11, 24, 50, 0.1) 34%, rgba(120, 82, 58, 0.08) 72%, rgba(6, 11, 22, 0.6) 100%) !important;
}
body .hero .hero__hook:not(#_):not(#_):not(#_), body .hero .hero__lead:not(#_), body .hero .hero__kicker:not(#_) {
  text-shadow: 0 1px 2px rgba(2, 6, 14, 0.85), 0 2px 14px rgba(2, 6, 14, 0.75), 0 6px 34px rgba(2, 6, 14, 0.55);
}

/* ======================================================================
   Brand seal over the repaired corner of the film
   ====================================================================== */
.hero__seal {
  position: absolute; z-index: 3; left: var(--seal-x, 90%); top: var(--seal-y, 83%); width: var(--seal-d, 120px); height: var(--seal-d, 120px);
  transform: translate(-50%, -50%); pointer-events: none; display: grid; place-items: center;
  filter: drop-shadow(0 6px 20px rgba(2, 6, 14, 0.5));
}
.hero__seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-turn 46s linear infinite; overflow: visible; }
.hero__seal-disc { fill: rgba(8, 15, 28, 0.94); stroke: none; }
.hero__seal-line { fill: none; stroke: rgba(227, 207, 163, 0.85); stroke-width: 0.8; }
.hero__seal-line--in { stroke: rgba(227, 207, 163, 0.35); stroke-width: 0.5; }
.hero__seal-text { font: 500 7.2px/1 'Raleway', 'Montserrat', sans-serif; letter-spacing: 0.2em; fill: #ecd7a6; text-transform: uppercase; }
.hero__seal-mark { position: relative; width: 46%; height: auto; opacity: 0.98; }
@keyframes seal-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__seal-ring { animation: none; } }
@media (max-width: 767px) { .hero__seal { display: none; } }

/* ======================================================================
   Chat: solid panel above everything, clear of the header and the scroll cue
   ====================================================================== */
body .swk-chat { z-index: 130; }
body .swk-chat__panel {
  z-index: 131; background: #0b1527 !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  max-height: min(640px, calc(100dvh - var(--ann-h, 0px) - 190px)) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(205, 178, 126, 0.3) !important;
  color: #f3eee3;
}
body .swk-chat__panel :is(h2, h3, strong, header) { color: #f3eee3; }
body .swk-chat__panel :is(p, span, small, li, a, label) { color: rgba(243, 238, 227, 0.86); }
body .swk-chat__messages { background: #0b1527 !important; }
body .swk-chat__message { background: #14233b !important; color: #f3eee3 !important; border: 1px solid rgba(205, 178, 126, 0.22) !important; border-radius: 4px !important; }
body .swk-chat__message :is(p, span, a) { color: #f3eee3 !important; }
body .swk-chat__message[class*='user'], body .swk-chat__message.is-user, body .swk-chat__message--user { background: #cdb27e !important; color: #0a1322 !important; }
body .swk-chat__message[class*='user'] :is(p, span, a), body .swk-chat__message.is-user :is(p, span, a) { color: #0a1322 !important; }
body .swk-chat__tabs button { background: transparent !important; color: rgba(243, 238, 227, 0.85) !important; border: 1px solid rgba(205, 178, 126, 0.4) !important; }
body .swk-chat__tabs button[aria-selected='true'], body .swk-chat__tabs button.is-active { background: #cdb27e !important; color: #0a1322 !important; }
body .swk-chat__topics button { background: #101c31 !important; color: #f3eee3 !important; border: 1px solid rgba(205, 178, 126, 0.35) !important; }
body .swk-chat__privacy, body .swk-chat__privacy a { color: rgba(243, 238, 227, 0.72) !important; }
body:has(.swk-chat__panel:not([hidden])) .back-top { opacity: 0 !important; pointer-events: none !important; }
body:has(.swk-chat__panel:not([hidden])) .cookie-banner { z-index: 60; }
@media (max-width: 1023px) { body .swk-chat__panel { max-height: calc(100dvh - var(--ann-h, 0px) - 96px) !important; } }
body .hero__beat .hero__hook:not(#_):not(#_):not(#_) { max-width: none !important; width: max-content; margin-inline: auto; }
body .hero__beat .hero__lead:not(#_) { width: max-content; max-width: min(92vw, 760px); margin-inline: auto; }
body .hero__beat { justify-self: center; }
body .hero .hero__kicker:not(#_) { font-size: 0.72rem; text-shadow: 0 1px 2px rgba(2, 6, 14, 0.95), 0 2px 12px rgba(2, 6, 14, 0.9), 0 4px 26px rgba(2, 6, 14, 0.7); }
body:has(.swk-chat__panel:not([hidden])) .cookie-banner { opacity: 0; pointer-events: none; }

/* ======================================================================
   Card rhythm: every card of a kind has the same rows, the same highlighted label,
   the same footer position. Longer copy is clamped, never allowed to stretch a card.
   ====================================================================== */
:root { --clamp-bg: transparent; }
body :is(.team-grid, .dev-grid, .project-grid, .svc-grid, .blog-grid, .property-grid) { align-items: stretch; }
body :is(.team-card, .dev-card, .project-card, .svc-card, .blog-card) { display: flex; flex-direction: column; height: 100%; }

/* Team: name (2 rows), highlighted position (2 rows), bio (9 rows) */
body .team-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 20px 24px; }
body .team-card h3:not(#_):not(#_) { min-height: 2lh; display: flex; align-items: flex-end; font-size: 0.98rem; line-height: 1.35; letter-spacing: 0.14em; margin: 0; }
body .team-card__role:not(#_) {
  display: flex; align-items: center; min-height: 2.6lh; margin: 0; padding: 8px 12px; border-radius: 2px;
  font-family: var(--tw-head); font-size: 0.66rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase;
  color: #ecd7a6 !important; background: rgba(205, 178, 126, 0.12); border: 1px solid rgba(205, 178, 126, 0.55); border-left: 3px solid #cdb27e;
}
body .tw-light .team-card__role:not(#_) { color: #5f4720 !important; background: rgba(125, 96, 48, 0.1); border-color: rgba(125, 96, 48, 0.5); border-left-color: #7d6030; }
body .team-card__bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden; min-height: 9lh; margin: 0; font-size: 0.88rem; line-height: 1.6; }

/* Developer cards: logo, name (2), tagline (2), three single-line projects, count */
body .dev-card h3:not(#_):not(#_) { min-height: 2lh; display: flex; align-items: flex-start; margin: 0; line-height: 1.35; }
body .dev-card__tag:not(#_) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2lh; margin: 0; }
body .dev-card ul { min-height: 3lh; margin-bottom: auto; }
body .dev-card li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .dev-card__count { margin-top: auto; }

/* Project cards */
body .project-card__body { display: flex; flex-direction: column; flex: 1; }
body .project-card__collection { min-height: 1lh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .project-card h3:not(#_):not(#_) { min-height: 2lh; display: flex; align-items: flex-start; }
body .project-card__loc { min-height: 1lh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
body .project-card__blurb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; min-height: 4lh; }
body .project-card__more { margin-top: auto; }

/* Services */
body .svc-card h3:not(#_):not(#_) { min-height: 1lh; }
body .svc-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 3lh; }
body .svc-card__more { margin-top: auto; }

/* Journal */
body .blog-card h3:not(#_):not(#_) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 3lh; }
body .blog-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; min-height: 4lh; }

/* Value items and community tiles */
body .value-item h3:not(#_):not(#_) { min-height: 3lh; display: flex; align-items: flex-start; }
body .place-card h3:not(#_):not(#_) { min-height: 2lh; display: flex; align-items: flex-end; }
body .svc-grid { grid-auto-rows: 1fr; }
body .team-card__role:not(#_) { font-size: 0.62rem; letter-spacing: 0.1em; min-height: calc(2lh + 18px); height: calc(2lh + 18px); overflow: hidden; }
body .dev-card__brand { height: 64px; min-height: 64px; display: flex; align-items: center; justify-content: flex-start; }
body .dev-card__brand img { max-height: 52px; width: auto; max-width: 70%; object-fit: contain; object-position: left center; }
body .project-card__media .project-card__dev, body .dev-card__media .project-card__dev {
  background: rgba(7, 13, 24, 0.82) !important; color: #ecd7a6 !important; border: 1px solid rgba(205, 178, 126, 0.5) !important;
  padding: 5px 10px !important; border-radius: 2px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
body .calc-donut__center, body .calc-donut__center * { opacity: 1 !important; font-family: var(--tw-body) !important; font-weight: 500 !important; }
body .tw-dark .calc-donut__center, body .tw-dark .calc-donut__center * { color: #f3eee3 !important; }

/* Team: two-row names, position as plain semi-bold text */
body .team-card h3 .tn { display: block; }
body .team-card h3:not(#_):not(#_) { align-items: flex-start; flex-direction: column; justify-content: flex-start; }
body .team-card__role:not(#_), body .tw-light .team-card__role:not(#_) {
  background: none !important; border: 0 !important; padding: 0 !important; height: auto; min-height: 2.6lh; overflow: visible;
  font-family: var(--tw-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase;
  color: #6c5124 !important; align-items: flex-start;
}
body .tw-dark .team-card__role:not(#_) { color: #e3cf9f !important; }

/* ======================================================================
   Phones and tablets: lighter paint work, honest layout
   ====================================================================== */
body { background-attachment: scroll; }
@media (max-width: 1023px) {
  /* No backdrop blurs, big filters, mix-blends or glow blobs while scrolling */
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .ambient-glow, .ambient-glow__blob { display: none !important; }
  .hero__video, .hero__idle-video { filter: none !important; }
  .hero__idle:not(.is-idle) { filter: none !important; transform: none !important; }
  .hero__stage::before { display: none !important; }
  .hero__beat, .hero.is-scroll-ready .hero__beat { filter: none !important; will-change: opacity, transform; }
  body :is(.dev-card__media, .project-card__media, .property-card__media, .blog-card__media, .story__media, .place-card)::after { mix-blend-mode: normal; }
  body main img:not([src*='/brand/']):not([src*='/developers/']) { filter: none !important; }
  .js .scrub, .js [data-reveal] { filter: none !important; }
  body .site-header[data-site-header].is-scrolled { background: rgba(8, 15, 28, 0.96) !important; }
  body .site-header .mobile-menu, body .mobile-menu { background: #0a1322 !important; }
  body :is(.btn-outline-dark, .btn-outline, .btn-white, .btn-ghost):not(#_) { background: rgba(10, 19, 34, 0.55) !important; }
  body .search-bar, body .glass-panel { background: rgba(8, 15, 28, 0.82) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important; }
  body :is(.property-card, .dev-card, .project-card, .blog-card, .svc-card, .team-card, .voice, .ui-card) { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important; }
  body .tw-light :is(.property-card, .dev-card, .project-card, .blog-card, .svc-card, .team-card, .voice, .ui-card) { box-shadow: 0 6px 16px rgba(60, 45, 25, 0.12) !important; }
  main > section.tw-light:not(.page-hero):not(.hero-cine):not(.section--dark):not(.cta-section):not(.section--obsidian):nth-of-type(n) { box-shadow: none; }
  body .hero .hero__hook:not(#_):not(#_):not(#_), body .hero .hero__lead:not(#_), body .hero .hero__kicker:not(#_), body .hero__reveal-name, body .hero__reveal-tag {
    text-shadow: 0 1px 2px rgba(2, 6, 14, 0.9), 0 2px 10px rgba(2, 6, 14, 0.7);
  }
  body .hero__reveal-logo, body .hero[data-phase='logo'] .hero__reveal-logo { filter: none !important; }
}

@media (max-width: 767px) {
  /* Hero copy flows in the document again: copy, then buttons, then search. Nothing overlaps. */
  body .hero__content { position: relative; inset: auto; justify-content: center; padding-bottom: 0; height: 100%; }
  body .hero__stage { position: relative; left: auto; top: auto !important; transform: none; width: 100%; max-width: 100%; }
  body .hero__beat { width: 100%; max-width: 100%; }
  body .hero__beat .hero__hook:not(#_):not(#_):not(#_), body .hero__beat .hero__lead:not(#_) { width: auto; max-width: 100%; }
  /* Compact consent bar: it never takes more than a quarter of the screen */
  body .cookie-banner { left: 10px !important; right: 10px !important; bottom: 10px !important; width: auto !important; max-width: none !important; padding: 12px 14px !important; gap: 10px !important; }
  body .cookie-banner p, body .cookie-banner__text { font-size: 0.76rem !important; line-height: 1.45 !important; margin: 0 !important; }
  body .cookie-banner :is(h2, h3, h4, strong) { font-size: 0.74rem !important; letter-spacing: 0.14em; margin-bottom: 4px !important; }
  body .cookie-banner__actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  body .cookie-banner__actions .btn { padding: 0.8em 0.6em !important; font-size: 0.64rem !important; min-height: 40px; }
  body .cookie-banner__actions .btn-primary { grid-column: 1 / -1; }
  /* Controls stay on screen */
  body .btn, body button { max-width: 100%; }
  body .btn:not(#_) { white-space: normal; text-align: center; letter-spacing: 0.16em; padding-inline: 1.2em; }
  body :is(.hero__ctas, .cta-band__actions, .office-actions, .pd-actions, .form-actions) { flex-wrap: wrap; justify-content: center; gap: 10px; }
  body :is(.hero__ctas, .cta-band__actions) .btn { flex: 1 1 100%; max-width: 360px; }
  body .swk-chat { right: 12px; }
  body .swk-chat__panel { right: 0; left: auto; width: min(calc(100vw - 24px), 380px); max-height: calc(100dvh - var(--ann-h, 0px) - 150px) !important; }
  body .row-carousel__btn, body .feature-slider__arrow, body .tc-arrow { width: 38px; height: 38px; }
  body .row-carousel__btn--next { right: 6px; } body .row-carousel__btn--prev { left: 6px; }
  body .back-top { right: 14px; }
  body :is(input, select, textarea) { font-size: 16px !important; }
}
@media (max-width: 767px) {
  body .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(6, 12, 26, 0.5) 0%, rgba(6, 12, 26, 0.12) 30%, rgba(5, 10, 20, 0.34) 56%, rgba(5, 10, 20, 0.78) 100%) !important;
  }
}
body .calc-donut__amount { font-size: 0.8rem !important; white-space: nowrap; letter-spacing: 0; }

[data-offscreen] { animation-play-state: paused !important; }
@media (max-width: 1023px) {
  .page-hero__bg img, .btn-calc, .btn-calc::before, .btn-calc::after, .site-header__cta::before { animation: none !important; }
  .hero[data-phase='logo'] .hero__logo-sheen, .hero[data-phase='logo'] .hero__logo-cinema::before { animation: none !important; }
  .hero[data-phase='logo'] .hero__reveal-name { animation: none !important; }
  .marquee__track { animation-duration: 48s; }
}

/* The chat button must always be reachable: above the consent bar, lifted clear of it while it is showing */
body .swk-chat { z-index: 160; }
body .swk-chat__panel { z-index: 161; }
@media (max-width: 1023px) {
  body:has(.cookie-banner.is-in:not([hidden])) .swk-chat:not(:has(.swk-chat__panel:not([hidden]))) { transform: translateY(-200px); transition: transform 0.3s; }
  body:has([data-mobile-menu]:not([hidden])) .swk-chat, body:has([data-mobile-menu]:not([hidden])) .back-top { opacity: 0; pointer-events: none; }
  body:has(.cookie-banner.is-in:not([hidden])) .back-top { transform: translateY(-200px); }
}
body aside.swk-chat section.swk-chat__panel:not(#_) { background: #0b1527 !important; }
body .cookie-banner:not(#_):not(#_) { background: #0b1527 !important; }

body .voices__stats strong.voices__word {
  font-family: var(--tw-head) !important; font-weight: 400 !important; font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important; letter-spacing: 0.2em !important;
  text-transform: uppercase !important; line-height: 1.6; padding-block: 0.55rem;
}