/* ==========================================================================
   شركة الوهيبي العقارية — Al Wahaibi Real Estate
   Design system stylesheet.
   Tokens are the authoritative palette from the Master Build Spec §2.1.
   No colour outside this token set appears anywhere in this file.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  /* Brand palette — spec §2.1, exact values */
  --gold:            #CFA151;
  --gold-light:      #D4A452;
  --gold-deep:       #B98A3C;
  --charcoal:        #424242;
  --charcoal-deep:   #333333;
  --olive-charcoal:  #2F302A;
  --cream:           #F3E7D3;
  --cream-soft:      #FAF4EA;
  --white:           #FFFFFF;
  --ink:             #1F1F1F;

  /* Derived alphas — all sourced from the tokens above */
  --gold-a08:  rgba(207, 161, 81, .08);
  --gold-a12:  rgba(207, 161, 81, .12);
  --gold-a18:  rgba(207, 161, 81, .18);
  --gold-a28:  rgba(207, 161, 81, .28);
  --gold-a45:  rgba(207, 161, 81, .45);
  --white-a06: rgba(255, 255, 255, .06);
  --white-a10: rgba(255, 255, 255, .10);
  --white-a55: rgba(255, 255, 255, .55);
  --white-a72: rgba(255, 255, 255, .72);
  --white-a86: rgba(255, 255, 255, .86);
  --ink-a62:   rgba(31, 31, 31, .62);
  --ink-a78:   rgba(31, 31, 31, .78);
  --ink-a86:   rgba(31, 31, 31, .86);
  --scrim:     rgba(51, 51, 51, .72);   /* spec §2.4 architectural scrim */

  /* Signature gradients — spec §2.1 */
  --grad-gold: linear-gradient(180deg, #D4A452 0%, #CFA151 55%, #B98A3C 100%);
  --grad-card: linear-gradient(160deg, #4A4A4A 0%, #3A3A3A 100%);

  /* Type */
  --font-display: 'IBM Plex Sans Arabic', 'Tahoma', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Tahoma', system-ui, sans-serif;
  --font-latin:   'Montserrat', 'Inter', system-ui, sans-serif;

  /* Space scale */
  --s-1: 8px;  --s-2: 12px; --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;

  --wrap: 1200px;
  --radius-card: 16px;
  --radius-chip: 8px;
  --radius-btn: 6px;

  --shadow-dark:  0 12px 30px rgba(0, 0, 0, .18);
  --shadow-light: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-lift:  0 22px 48px rgba(0, 0, 0, .28);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 76px;
}

/* ---------- 2. RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.9;
  color: var(--white-a86);
  background: var(--charcoal-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
table { border-collapse: collapse; width: 100%; }

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

/* Latin runs inside Arabic text (phones, emails, URLs, numerals) */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-family: var(--font-latin);
  font-feature-settings: 'tnum' 1;
}

.visually-hidden {
  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;
  inset-block-start: -100px;
  inset-inline-start: var(--s-3);
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: var(--s-3); }

/* ---------- 3. LAYOUT PRIMITIVES ---------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

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


/* Alternating surfaces — spec §2.5 */
.surface-dark   { background: var(--charcoal-deep); color: var(--white-a86); }
.surface-mid    { background: var(--charcoal);      color: var(--white-a86); }
.surface-olive  { background: var(--olive-charcoal);color: var(--white-a86); }
.surface-cream  { background: var(--cream-soft);    color: var(--ink-a86); }

.surface-white  { background: var(--white);         color: var(--ink-a86); }


/* Gold glow ground for the deepest dark sections */
.surface-dark--glow {
  background:
    radial-gradient(110% 70% at 82% -8%, var(--gold-a12) 0%, rgba(207,161,81,.03) 42%, transparent 70%),
    var(--charcoal-deep);
}

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 4. TYPOGRAPHY ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;      /* never letter-space Arabic — spec §3.7 */
}

h1 { font-size: clamp(1.75rem, 1.15rem + 2.9vw, 3.6rem); line-height: 1.28; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.55vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .58vw, 1.45rem); line-height: 1.5; }
h4 { font-size: 1.0625rem; line-height: 1.6; }

p { max-width: 68ch; }
.prose p { text-align: justify; text-justify: inter-word; }
.prose p + p { margin-block-start: var(--s-3); }

.lede { font-size: clamp(1.02rem, .97rem + .28vw, 1.2rem); }

.text-gold { color: var(--gold-light); }



/* Short gold divider rule — spec §2.4 motif 5 */
.rule {
  width: 60px; height: 6px;
  background: var(--gold);
  border-radius: 3px;
  margin-block: var(--s-3) var(--s-4);
}


/* Gold "chip" heading — spec §2.4 motif 1 / §6.5.
   Uses ink-on-gold (the accessible pairing sanctioned by spec §7). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  line-height: 1.2;
  padding: 10px 30px;
  border-radius: 999px;
  box-shadow: var(--shadow-dark);
}
.chip .icon { inline-size: 20px; block-size: 20px; stroke-width: 1.6; }

.section-head { margin-block-end: var(--s-6); }
.section-head--center { text-align: center; }
.section-head--center .rule { margin-inline: auto; }
.section-head p { margin-block-start: var(--s-3); }
.section-head--center p { margin-inline: auto; }

/* Eyebrow */


/* ---------- 5. ICONS ----------------------------------------------------- */
.icon {
  inline-size: 24px; block-size: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* Mirror directional glyphs in RTL — spec §3.4 */
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* ---------- 6. BUTTONS --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 48px;
  padding: 13px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.btn .icon { inline-size: 19px; block-size: 19px; }

.btn--primary { background: var(--gold); color: var(--ink); }
.btn--primary:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn--secondary { background: transparent; color: var(--gold-light); border-color: var(--gold); }
.btn--secondary:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }

.btn--on-gold { background: var(--charcoal); color: var(--white); }
.btn--on-gold:hover { background: var(--charcoal-deep); transform: translateY(-2px); }

.btn--ghost-light { background: transparent; color: var(--ink); border-color: var(--ink-a62); }
.btn--ghost-light:hover { background: var(--ink); color: var(--cream-soft); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Inline text link with gold underline */
.link-gold {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-light);
  font-weight: 700;
  border-block-end: 1px solid var(--gold-a45);
  padding-block-end: 3px;
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.link-gold:hover { color: var(--gold); border-color: var(--gold); gap: 12px; }
/* On a gold card the gold link would be gold-on-gold — use ink instead. */
.card--gold .link-gold { color: var(--ink); border-color: rgba(31, 31, 31, .38); }
.card--gold .link-gold:hover { color: var(--ink); border-color: var(--ink); }
.link-gold .icon { inline-size: 17px; block-size: 17px; }

/* ---------- 7. HEADER ---------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header::before {
  content: "";
  display: block;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold-light) 50%, var(--gold-deep) 82%, transparent);
}
.site-header.is-stuck {
  background: var(--charcoal);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* Premium utility strip — a quiet contact layer above the primary navigation.
   The three-column composition stays optically balanced in RTL without making
   the bar compete with the brand lockup below it. */
.utility {
  position: relative;
  background:
    linear-gradient(90deg, rgba(207, 161, 81, .035), transparent 28%, transparent 72%, rgba(207, 161, 81, .035)),
    var(--charcoal-deep);
  border-block-end: 1px solid var(--gold-a18);
  font-size: .76rem;
}
.utility__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  min-block-size: 34px;
}
.utility__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  inline-size: max-content;
  min-block-size: 28px;
  padding-inline: 8px;
  border-radius: 999px;
  color: var(--white-a72);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.utility__link:hover { color: var(--white); background: var(--gold-a08); }
.utility__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.utility__link .icon {
  inline-size: 14px;
  block-size: 14px;
  color: var(--gold-light);
  stroke-width: 1.6;
}
.utility__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--white-a55);
  white-space: nowrap;
}
.utility__dot {
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-a08);
}
.utility__end {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
}
.utility__sep {
  inline-size: 1px;
  block-size: 14px;
  margin-inline: 3px;
  background: var(--gold-a18);
}

/* Nav bar */
.navbar {
  background: rgba(51, 51, 51, .92);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--gold-a18);
}
.navbar .wrap {
  display: flex; align-items: center; gap: var(--s-3);
  min-block-size: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; min-block-size: 44px; }
.brand__mark {
  inline-size: 200px;
  block-size: auto;
  max-block-size: 64px;
  object-fit: contain;
}
/* The supplied official lockup already contains both names. */
.brand__text { display: none; }
.brand__ar {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; line-height: 1; color: var(--white);
}
.brand__en {
  font-family: var(--font-latin); font-weight: 600;
  font-size: .62rem; letter-spacing: .2em; line-height: 1;
  color: var(--gold-a45); color: var(--gold);
  opacity: .8;
}

.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
/* A nav item that wraps onto two lines makes the whole row look accidental —
   the row either fits on one line or the burger takes over. */
.nav a { white-space: nowrap; }
.nav a {
  position: relative;
  display: flex; align-items: center;
  min-block-size: 44px;
  padding-inline: 14px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  color: var(--white-a72);
  border-radius: var(--radius-btn);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute;
  inset-block-end: 6px; inset-inline: 14px;
  block-size: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: inline-end;
  transition: transform .25s var(--ease);
}
.nav a:hover { color: var(--white); background: var(--gold-a08); }
.nav a[aria-current="page"] { color: var(--gold-light); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { margin-inline-start: var(--s-2); flex: none; }
.nav-toggle {
  display: none;
  inline-size: 48px; block-size: 48px;
  align-items: center; justify-content: center;
  margin-inline-start: auto;
  background: transparent; border: 1px solid var(--gold-a28);
  border-radius: var(--radius-btn); color: var(--gold-light);
  cursor: pointer;
}

/* Mobile overlay */
.nav-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--charcoal-deep);
  display: flex; flex-direction: column;
  padding: var(--s-4);
  padding-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  /* Closed state is opacity-based, not an off-screen translate: if a transition is
     interrupted the panel can never be stranded outside the viewport. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transform: none; }
.nav-overlay__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s-5); }
.nav-overlay nav { display: flex; flex-direction: column; gap: 4px; }
.nav-overlay nav a {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; color: var(--white-a86);
  padding: 14px 4px;
  border-block-end: 1px solid var(--white-a06);
}
.nav-overlay nav a[aria-current="page"] { color: var(--gold-light); }
.nav-overlay__foot { margin-block-start: var(--s-5); display: grid; gap: var(--s-2); }

/* ---------- 8. HERO ------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--charcoal-deep);
  padding-block: clamp(var(--s-7), 9vw, 150px) clamp(var(--s-7), 8vw, 120px);
}
/* Matches .page-hero::after. The heavy triple-gradient this replaced was the
   pre-rewrite overlay and it sat on top of the photograph, which is why the same
   image read muddy here and vivid on the inner pages. The media's own scrim
   already shapes the picture; this only warms the top corner. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 110% at 78% -10%, var(--gold-a12) 0%, transparent 62%);
}

.hero h1 { color: var(--white); }
.hero h1 .text-gold { display: block; }
.hero__sub {
  font-size: clamp(1.05rem, .99rem + .32vw, 1.25rem);
  color: var(--white-a72);
  max-width: 56ch;
  margin-block-end: var(--s-5);
}
.hero .btn-row { margin-block-end: var(--s-6); }

/* Classification trust row */

.trust__label { font-size: .82rem; color: var(--white-a55); margin-inline-end: 4px; }
.trust__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--gold-a28);
  border-radius: 999px;
  font-size: .84rem; font-weight: 700;
  color: var(--gold-light);
  background: var(--gold-a08);
}
.trust__item .icon { inline-size: 15px; block-size: 15px; }

/* ---------- 8b. HOME HERO (split + proof panel) -------------------------- */
.hero {
  /* Subtract the sticky header so the hero fills the fold without pushing the
     scroll cue past the viewport edge. svh keeps it honest on mobile browsers
     whose chrome expands and collapses. */
  min-block-size: min(calc(100vh - 132px), 800px);
  min-block-size: min(calc(100svh - 132px), 800px);
  display: grid;
  align-content: center;
  padding-block: clamp(var(--s-6), 7vw, 110px) clamp(var(--s-7), 8vw, 120px);
}




.hero__eyebrow {
  display: inline-flex; align-items: center;
  font-size: .86rem; font-weight: 500;
  color: var(--gold-light);
  padding: 8px 18px;
  border: 1px solid var(--gold-a28);
  border-radius: 999px;
  background: var(--gold-a08);
  margin-block-end: var(--s-4);
}
.hero h1 { color: var(--white); margin-block-end: var(--s-3); }
.hero h1 .text-gold { display: block; color: var(--gold-light); }
.hero__sub {
  font-size: clamp(1.02rem, .96rem + .34vw, 1.22rem);
  color: var(--white-a86);
  max-width: 52ch;
  margin-block-end: var(--s-5);
}
.btn--lg { min-block-size: 56px; padding-inline: 38px; font-size: 1.04rem; }

/* Proof panel — the trust argument, in the fold */

/* No backdrop-filter (older Firefox): fall back to a more opaque panel. */














@media (max-width: 980px) {
  .hero { min-block-size: auto; }
}


@media (max-width: 700px) {
  /* A 999px radius only reads as a pill while the label is one short line.
     Wrapped, the end-caps turn it into a lozenge wrapped round a paragraph, so
     the frame stays and the shape becomes a tag. */
  .hero__eyebrow {
    font-size: .78rem; padding: 7px 14px;
    border-radius: var(--radius-chip);
    line-height: 1.65;
    /* Sampled against the real photograph, the gold sat at 4.25:1 over the
       brightest sky — under the 4.5 it needs at 12px. Its own dark backdrop
       takes it to 7:1 and makes it read as a badge on the picture. */
    background: rgba(31, 31, 31, .58);
    border-color: var(--gold-a45);
  }
  
}

/* Compact page hero for inner pages */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--charcoal-deep);
  padding-block: clamp(var(--s-6), 6vw, 92px);
  border-block-end: 1px solid var(--gold-a18);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 110% at 78% -10%, var(--gold-a12) 0%, transparent 62%);
}
.page-hero h1 { color: var(--white); }
.page-hero p { color: var(--white-a72); margin-block-start: var(--s-2); }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--white-a72); margin-block-end: var(--s-3); }
.crumbs a { transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--gold-light); }
.crumbs .icon { inline-size: 13px; block-size: 13px; opacity: .6; }
.crumbs [aria-current] { color: var(--gold-light); }

/* ---------- 9. STATISTICS ------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.stat {
  border: 1px solid var(--gold-a45);
  border-radius: var(--radius-chip);
  background: transparent;
  padding: var(--s-4) var(--s-3);
  text-align: center;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.stat:hover { border-color: var(--gold); background: var(--gold-a08); transform: translateY(-4px); }
.stat__num {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 800;
  font-size: clamp(2.1rem, 1.6rem + 2.1vw, 3rem);
  line-height: 1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat__label { display: block; margin-block-start: 10px; font-size: .98rem; font-weight: 500; color: var(--white); }

/* ---------- 10. CARDS ---------------------------------------------------- */
.card {
  border-radius: var(--radius-card);
  padding: var(--s-4);
  block-size: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card h3 { margin-block-end: 10px; }
.card p { font-size: .96rem; line-height: 1.8; max-width: none; }

.card--dark {
  background: var(--grad-card);
  border: 1px solid var(--white-a06);
  box-shadow: var(--shadow-dark);
  color: var(--white-a86);
}
.card--dark h3 { color: var(--gold-light); }
.card--dark:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gold-a28); }

.card--gold {
  background: var(--grad-gold);
  border: 1px solid var(--gold-deep);
  color: var(--ink-a86);
  box-shadow: var(--shadow-dark);
}
.card--gold h3 { color: var(--ink); }
.card--gold:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.card--cream {
  background: var(--cream);
  border: 1px solid rgba(31, 31, 31, .08);
  color: var(--ink-a86);
}
.card--cream:hover { transform: translateY(-6px); box-shadow: var(--shadow-dark); }

.card--white {
  background: var(--white);
  border: 1px solid rgba(31, 31, 31, .07);
  box-shadow: var(--shadow-light);
  color: var(--ink-a86);
}
.card--white:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }

/* Numbered service card — spec §6.3 */
.svc {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-2);
  overflow: hidden;
}
.svc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.svc__num {
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.card--dark .svc__num { color: var(--gold); }
.card--gold .svc__num { color: var(--ink); opacity: .55; }
.svc__icon { inline-size: 28px; block-size: 28px; stroke-width: 1.4; }
.card--dark .svc__icon { color: var(--white-a72); }
.card--gold .svc__icon { color: var(--ink); opacity: .7; }

/* Gold underlined title (legal + preservation cards) */
.titled__t {
  font-family: var(--font-display); font-weight: 800;
  color: var(--gold-deep);
  border-block-end: 2px solid var(--gold-a45);
  padding-block-end: 4px;
  display: inline;
  line-height: 2.2;
}
.card--cream .titled__t, .card--white .titled__t { color: var(--gold-deep); }
.titled p { margin-block-start: 12px; }

.numbered-badge {
  /* Block-level, so it takes its own line. As inline-flex it shared the line box
     with the underlined title and collided with it once the title wrapped. */
  display: flex; align-items: center; justify-content: center;
  margin-block-end: 12px;
  inline-size: 40px; block-size: 40px;
  border-radius: 50%;
  background: var(--gold-a12);
  border: 1px solid var(--gold-a45);
  color: var(--gold-deep);
  font-family: var(--font-latin); font-weight: 800; font-size: .95rem;
  flex: none;
}
.card--dark .numbered-badge { color: var(--gold-light); }

/* Pillar card (4 core services) */
.pillar { display: flex; flex-direction: column; gap: var(--s-3); }
.pillar__head { display: flex; align-items: center; gap: var(--s-2); }
.pillar__icon {
  inline-size: 54px; block-size: 54px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-chip);
  background: var(--gold-a12);
  border: 1px solid var(--gold-a28);
  color: var(--gold-light);
}
.pillar__icon .icon { inline-size: 26px; block-size: 26px; }
.card--gold .pillar__icon { background: rgba(31,31,31,.10); border-color: rgba(31,31,31,.18); color: var(--ink); }
.pillar__n { font-family: var(--font-latin); font-weight: 800; font-size: 1.1rem; color: var(--gold); }
.card--gold .pillar__n { color: var(--ink); opacity: .6; }
.pillar__foot { margin-block-start: auto; padding-block-start: var(--s-2); }

/* Feature (why us) card */

.feature__icon {
  inline-size: 48px; block-size: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
}
.feature__icon .icon { inline-size: 23px; block-size: 23px; stroke-width: 1.8; }

/* ---------- 11. QUOTE / STATEMENT --------------------------------------- */
.quote {
  position: relative;
  max-inline-size: 54rem;
  margin-inline: auto;
  padding: clamp(var(--s-6), 6.5vw, var(--s-8)) clamp(var(--s-5), 6vw, var(--s-7));
  border: 2px solid var(--gold);
  border-radius: var(--radius-card);
  background: none;
  color: var(--white-a86);
  text-align: center;
  box-shadow: none;
  overflow: visible;
}

/* The marks sit ON the border and carry the section's own background, so the
   frame line reads as interrupted behind them. SVG rather than a font glyph:
   quote glyphs sit high and unevenly in the em box, which makes straddling a
   border by text metrics unreliable. */
.quote::before, .quote::after {
  content: "";
  position: absolute;
  inline-size: 104px;
  block-size: 46px;
  background-color: var(--quote-ground, var(--olive-charcoal));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46px auto;
  pointer-events: none;
}
.quote::before {
  inset-block-start: 0;
  inset-inline-start: 11%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2042%2030%22%20fill%3D%22%23CFA151%22%3E%3Cg%20transform%3D%22rotate%28180%2021%2015%29%22%3E%3Cpath%20d%3D%22M0%200h17v17l-7.5%2013H2l5.5-13H0z%22%2F%3E%3Cpath%20d%3D%22M25%200h17v17l-7.5%2013h-7.5l5.5-13h-7.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.quote::after {
  inset-block-end: 0;
  inset-inline-end: 11%;
  transform: translateY(50%);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2042%2030%22%20fill%3D%22%23CFA151%22%3E%3Cpath%20d%3D%22M0%200h17v17l-7.5%2013H2l5.5-13H0z%22%2F%3E%3Cpath%20d%3D%22M25%200h17v17l-7.5%2013h-7.5l5.5-13h-7.5z%22%2F%3E%3C%2Fsvg%3E");
}

.quote__mark { display: none; }

.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, .98rem + .72vw, 1.55rem);
  font-weight: 700;
  line-height: 1.85;
  color: var(--white);
  max-width: 46ch;
  margin-inline: auto;
}
.quote__by {
  margin-block-start: var(--s-5);
  display: block;
  text-align: center;
}
.quote__by .rule { display: none; }
.quote__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; color: var(--gold-light);
  display: block;
}
/* Arabic is never letter-spaced (it breaks the joins), so the hierarchy the
   reference gets from tracked-out caps comes from size and weight here. */
.quote__role { font-size: .92rem; font-weight: 500; color: var(--white-a72);
  margin-block-start: 4px; display: block; }

/* Definition panel */
.panel {
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: clamp(var(--s-4), 4vw, var(--s-6));
  color: var(--ink-a86);
  border-inline-start: 6px solid var(--gold);
}
.panel h2, .panel h3 { color: var(--ink); }

/* ---------- 12. LISTS ---------------------------------------------------- */
.goals { display: grid; gap: var(--s-2); }
.goals li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-chip);
  background: var(--white-a06);
  border: 1px solid var(--white-a10);
  font-size: 1.02rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.goals li:hover { border-color: var(--gold-a45); background: var(--gold-a08); transform: translateX(-4px); }
.goals .dot {
  inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--gold); flex: none; margin-block-start: 11px;
}

/* Sub-service chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 9px 18px;
  border: 1px solid var(--gold-a28);
  border-radius: 999px;
  font-size: .9rem; font-weight: 500;
  background: var(--white-a06);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.chips li:hover { border-color: var(--gold); background: var(--gold-a12); color: var(--white); }

/* ---------- 13. CLIENTS -------------------------------------------------- */
.clients { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.clients li {
  display: grid; place-items: center; text-align: center;
  min-block-size: 122px;
  padding: var(--s-3);
  border: 1px solid rgba(31, 31, 31, .10);
  border-radius: var(--radius-chip);
  background: var(--white);
  font-family: var(--font-display);
  font-weight: 700; font-size: .95rem;
  color: var(--ink-a78);
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.clients li > .client__logo,
.clients li > .client__name { grid-area: 1 / 1; }
.clients li:hover {
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: var(--shadow-light);
}
/* Grayscale wall, full colour on hover — spec §4.15. */
.client__logo {
  /* Per-logo height, set inline from the file's real aspect ratio so every mark
     covers roughly the same area. A single flat cap balances bounding boxes, not
     optical weight — it starved the square marks and let the wide ones dominate
     (measured spread 3.09x). 74px stays the fallback for a logo with no ratio. */
  max-block-size: var(--logo-h, 74px);
  max-inline-size: 100%;
  inline-size: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .8;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.js .client__logo { opacity: 0; }
.js .client__logo.is-loaded { opacity: .8; }
.clients li:hover .client__logo.is-loaded { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .client__logo { transition: none; } }

/* ---------- PROFILE DATA IMPORT ---------------------------------------- */
.source-note{margin:-.65rem auto var(--s-5);max-width:70ch;text-align:center;color:var(--ink-a68)}
.surface-dark .source-note,.surface-dark--glow .source-note{color:rgba(255,255,255,.68)}
.performance-card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.performance-card__head h3{margin:0}.performance-card__head>strong{font-family:var(--font-latin);font-size:2rem;color:var(--gold-deep);direction:ltr;font-variant-numeric:tabular-nums}
.performance-card>ul{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}
.performance-card>ul li{display:grid;gap:.25rem;text-align:center;padding:.7rem .3rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream-soft)}
.performance-card>ul span{font-family:var(--font-latin);font-size:.76rem;color:var(--ink-a68);direction:ltr;font-variant-numeric:tabular-nums}
.performance-card>ul strong{font-family:var(--font-latin);font-variant-numeric:tabular-nums;direction:ltr}
.sector-features{margin:1rem 0 0;padding-inline-start:1.15rem;display:grid;gap:.45rem;color:var(--ink-a78)}
.registration-list{list-style:none;padding:0;margin-top:var(--s-5)}
.registration-card{display:grid;gap:.65rem;text-align:center}
.registration-card span{color:var(--ink-a68);font-weight:700}
.registration-card strong{font-size:clamp(1.25rem,3vw,2rem);color:var(--gold-deep);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.table-wrap table{width:100%;border-collapse:collapse;min-width:620px}
.table-wrap th,.table-wrap td{padding:1rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap th{background:var(--cream);color:var(--ink)}
@media(max-width:640px){.performance-card>ul{grid-template-columns:repeat(2,minmax(0,1fr))}.performance-card>ul li:last-child{grid-column:1/-1}}

/* Logo attribution — CC BY-SA 4.0 requires a visible credit. */









/* ---------- 14. PROCESS / TIMELINE -------------------------------------- */







/* ---------- 15. CERTIFICATES TABLE -------------------------------------- */
.cert-table { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-light); background: var(--white); }
.cert-table table { min-inline-size: 640px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cert-table thead th {
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  text-align: start;
  padding: 16px var(--s-3);
  white-space: nowrap;
}
.cert-table td {
  padding: 16px var(--s-3);
  border-block-start: 1px solid rgba(31, 31, 31, .08);
  font-size: .95rem;
  color: var(--ink-a78);
  vertical-align: top;
}
.cert-table tbody tr:nth-child(odd) { background: var(--cream-soft); }
.cert-table td:first-child { font-weight: 700; color: var(--ink); }

.reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.reg {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--gold-a28);
  border-radius: var(--radius-chip);
  background: var(--white-a06);
}
.reg dt { font-size: .88rem; color: var(--white-a55); margin-block-end: 6px; }
.reg dd { font-family: var(--font-latin); font-weight: 700; font-size: 1.15rem; color: var(--gold-light); }

/* ---------- 16. CONTACT -------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }

.contact-list { display: grid; gap: var(--s-3); }
.contact-item { display: flex; align-items: center; gap: var(--s-3); }
.contact-item__badge {
  inline-size: 54px; block-size: 54px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
}
.contact-item__badge .icon { inline-size: 24px; block-size: 24px; stroke-width: 1.8; }
.contact-item a { display: flex; flex-direction: column; gap: 3px; min-block-size: 44px;
  justify-content: center; transition: color .2s var(--ease); }
.contact-item__label { font-size: .84rem; color: var(--white-a55); }
.contact-item__value { font-size: 1.08rem; font-weight: 700; color: var(--white);
  transition: color .2s var(--ease); }
.contact-item a:hover .contact-item__value { color: var(--gold-light); }

/* Form */
.form { display: grid; gap: var(--s-4); }
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: start;
}
.field { display: grid; gap: 9px; align-content: start; }

/* Label and hint share one row. When the hint had a row of its own, the email
   column stood one line taller than the select beside it and the two controls
   no longer lined up. */
.field__label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; min-block-size: 21px;
}
.field label { font-size: .9rem; font-weight: 700; color: var(--white); }
.field .req { color: var(--gold-light); }
.field__hint { font-size: .78rem; font-weight: 500; color: var(--white-a72); }

.field input:not([type="checkbox"]), .field select, .field textarea {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 14px 16px;
  /* Sunk into the surface rather than floated on it — a translucent white fill
     on this ground gave the field almost no edge to read. */
  background-color: rgba(0, 0, 0, .18);
  border: 1px solid var(--white-a10);
  border-radius: var(--radius-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: var(--white);
  font-size: 1rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.field textarea { min-block-size: 148px; resize: vertical; line-height: 1.8; }

/* The caret is painted into the select, so it cannot mirror in RTL and cannot
   drift when an error message appears beneath the control. */
.field select {
  appearance: none; cursor: pointer;
  padding-inline-end: 46px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23E0BB7A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 18px center;
  background-size: 13px 13px;
}
.field select option { background: var(--charcoal); color: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: var(--white-a55); }

/* Consent is a compact control, not a text field. Keeping it outside the
   shared input geometry prevents the browser's native checkbox from becoming
   a full-width 52px white block on the dark form surface. */
.field input[type="checkbox"] {
  appearance: none;
  inline-size: 22px;
  block-size: 22px;
  min-block-size: 22px;
  padding: 0;
  margin: 0 0 0 10px;
  display: inline-grid;
  place-content: center;
  vertical-align: -5px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.field input[type="checkbox"]::before {
  content: "";
  inline-size: 10px;
  block-size: 6px;
  /* Physical borders keep the checkmark identical in RTL and LTR layouts. */
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .16s var(--ease);
}
.field input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px var(--gold-a12);
}
.field input[type="checkbox"]:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.field input[type="checkbox"]:hover { border-color: var(--gold-light); }
.field input[type="checkbox"]:focus:not(:checked) { background: rgba(0, 0, 0, .22); }
.field input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: none;
}

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold-a45); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background-color: rgba(0, 0, 0, .26);
  box-shadow: 0 0 0 3px var(--gold-a18), inset 0 1px 0 rgba(255, 255, 255, .04);
  outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

/* Gold is the page's decorative colour — every chip, rule and link uses it — so
   an error in gold does not read as a problem. */
.field__err { font-size: .85rem; font-weight: 700; color: #E8A0A0; display: none; }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea {
  border-color: #C25B5B;
  background-color: rgba(194, 91, 91, .10);
}

.form__status {
  padding: 14px 18px; border-radius: var(--radius-btn);
  font-weight: 700; font-size: .95rem;
  display: none;
}
.form__status.is-ok { display: block; background: var(--gold-a12); border: 1px solid var(--gold); color: var(--white); }

/* ---------- 17. CTA BAND ------------------------------------------------- */
.cta-band { background: var(--grad-gold); color: var(--ink); padding-block: var(--s-7); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink-a78); margin-block-start: 8px; }

/* ---------- 18. FOOTER --------------------------------------------------- */
.site-footer { background: var(--charcoal-deep); border-block-start: 1px solid var(--gold-a18); padding-block-start: var(--s-7); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--s-5); }
.footer-col h2, .footer-col h3 {
  font-size: 1rem; color: var(--white); margin-block-end: var(--s-3);
  padding-block-end: 10px; border-block-end: 1px solid var(--gold-a28);
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: .94rem; color: var(--white-a72); transition: color .2s var(--ease), padding-inline-start .2s var(--ease); }
.footer-col a:hover { color: var(--gold-light); padding-inline-start: 5px; }
.footer-col p { font-size: .94rem; color: var(--white-a72); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-block-end: var(--s-3); }

.socials { display: flex; gap: 10px; margin-block-start: var(--s-3); }
.socials a {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-a45);
  color: var(--gold-light);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); }

.footer-credit {
  /* The global `p { max-width: 68ch }` capped this at ~470px, so text-align:center
     centred it inside a narrow box parked at the inline start. Full width first. */
  max-width: none;
  margin-inline: auto;
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--white-a06);
  text-align: center;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--white-a55);
}
.footer-credit a { color: var(--white-a72); border-block-end: 1px solid var(--gold-a45); }
.footer-credit a:hover { color: var(--gold-light); border-block-end-color: var(--gold); }

.footer-bottom {
  max-width: none;
  margin-inline: auto;
  padding-block-end: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  margin-block-start: var(--s-6);
  border-block-start: 1px solid var(--white-a06);
  padding-block: var(--s-3);
  text-align: center;
  font-size: .81rem;
  color: var(--white-a55);
}
.footer-bottom span { display: inline-block; padding-inline: 8px; }

/* ---------- 19. WHATSAPP FAB -------------------------------------------- */
.fab {
  position: fixed;
  inset-inline-end: 24px;
  inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  inline-size: 56px; block-size: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.fab:hover { background: var(--gold-deep); transform: scale(1.08); }
.fab .icon { inline-size: 28px; block-size: 28px; stroke-width: 1.8; }

/* Call button — the opposite bottom corner. In RTL inset-inline-start resolves
   to the physical right, which is where it was asked to sit. */
.fab--call {
  inset-inline-end: auto;
  inset-inline-start: 24px;
  background: var(--charcoal);
  color: var(--gold-light);
  border: 1px solid var(--gold);
}
.fab--call:hover { background: var(--gold); color: var(--ink); }

.disclosure { inline-size: 100%; margin-block-start: var(--s-3); display: none; }
.scroll-hint { display: none; font-size: .85rem; color: var(--white-a55); margin-block-start: 10px; }

/* ---------- 20. MOTION --------------------------------------------------- */
/* Progressive enhancement: content is visible by default. It is only hidden for
   animation once the inline head script has confirmed JS is running, so a script
   failure can never leave the page blank. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 21. RESPONSIVE ---------------------------------------------- */
/* Re-measured after «تواصل معنا» left the row: nav 514px + call-to-action 186px
   + brand lockup 304px = 1004px of content, down from 1108. The wrap offers that
   from a 1100px viewport (1100 - 48px of padding = 1052), so the burger now takes
   over at 1099 rather than 1199 and the full row survives on more screens. */
@media (max-width: 1099px) {
  :root { --header-h: 68px; }
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; margin-inline-start: auto; }
  .utility .u-hide { display: none; }
  .utility__inner { display: flex; justify-content: center; }
  .utility__end { justify-self: auto; }
}

@media (max-width: 1100px) {
  .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }

}

@media (max-width: 900px) {
  body { font-size: 16px; }
  .section { padding-block: var(--s-6); }
  
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  
  
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  .brand__en { display: none; }
  .brand__ar { font-size: 1.05rem; }
  /* The breakpoint — not JS — decides whether the long grids collapse, so a
     missed matchMedia event can never leave desktop showing a truncated list. */
  .disclosure { display: inline-flex; }
  #pm-services-grid.is-collapsed > li:nth-child(n+7) { display: none; }
  #preservation-grid.is-collapsed > li:nth-child(n+5) { display: none; }
}

@media (max-width: 700px) {
  /* Phone and WhatsApp remain available through the menu and floating actions. */
  .utility { display: none; }
  .card { padding: 18px; }
  .card p { font-size: .92rem; line-height: 1.75; }
  .svc__num { font-size: 1.6rem; }
  .scroll-hint { display: block; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .reg-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .prose p { text-align: start; }   /* justify creates rivers in narrow columns */
  /* Give the classification label its own line so the chips wrap evenly
     instead of staircasing around it. */
  .trust__label { flex-basis: 100%; margin-inline-end: 0; }
  /* A 4-column footer stacked to one column ran 1.7 screens on its own. */
  .footer-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--s-3); }
  .clients li { min-block-size: 96px; font-size: .9rem; }
  /* Scale the per-logo heights proportionally rather than flattening them to a
     single cap — a flat cap here would undo the optical balance on mobile.
     Scaling every height by the same factor keeps areas equal (they scale by
     the square of it); 92px * .67 = 62px, the tallest the 96px cell allows. */
  .client__logo { max-block-size: calc(var(--logo-h, 74px) * .67); }
  .hero { padding-block: var(--s-7) var(--s-6); }
  .fab { inset-inline-end: 16px; inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fab--call { inset-inline-end: auto; inset-inline-start: 16px; }
}



@media (max-width: 420px) {
  .wrap { padding-inline: var(--s-3); }
  .btn { inline-size: 100%; }
  .btn-row { gap: 10px; }
}

/* Touch devices get the full 44px minimum on inline text links; pointer devices
   keep the tighter typographic rhythm. */
@media (pointer: coarse) {
  .utility__link { min-block-size: 32px; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: flex; align-items: center; min-block-size: 44px; }
  .link-gold { min-block-size: 44px; }
  .crumbs a { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* ---------- 22. PRINT --------------------------------------------------- */
@media print {
  .fab, .nav-toggle, .nav-overlay, .utility, .cta-band, .site-header { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .surface-dark, .surface-mid, .surface-olive, .surface-dark--glow { background: #fff !important; color: #000 !important; }
  .card, .quote, .panel { border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   24. REFINEMENT PASS — craft details, all within the §2.1 token set
   ========================================================================== */

/* ---- 1. Foil-stamped gold -------------------------------------------------
   A gold fill alone looks like paint. Real foil has a bright top edge and a
   darker base, so every gold surface gets an inset highlight + shadow pair. */
.chip,
.btn--primary,
.card--gold,
.cta-band,
.feature__icon,
.contact-item__badge {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(31, 31, 31, .16),
    0 12px 30px rgba(0, 0, 0, .18);
}
.cta-band { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(31,31,31,.14); }
.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    inset 0 -1px 0 rgba(31, 31, 31, .2),
    0 18px 34px rgba(0, 0, 0, .3);
}

/* ---- 2. Hairline craft on dark surfaces ---------------------------------- */
.card--dark, .quote {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 14px 34px rgba(0, 0, 0, .22);
}
.card--dark:hover {
  border-color: var(--gold-a45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 22px 48px rgba(0, 0, 0, .34);
}
/* Cream and white cards get the same treatment inverted — a soft top light. */
.card--cream, .card--white {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 24px rgba(0, 0, 0, .07);
}
.card--cream:hover, .card--white:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 40px rgba(0, 0, 0, .12);
}

/* ---- 3. Corner brackets on the statement quote ---------------------------
   Lifted from the printed profile, where long quotes sit inside a hairline
   gold frame. Brackets rather than a full box: lighter, more deliberate. */
/* No corner brackets: the hairline frame (spec §4.2) is the framing device.
   A second frame on top of it read as clutter and did not mirror in RTL. */
/* ---- 4. Section seams ----------------------------------------------------
   A hairline of gold where a dark section meets a light one, instead of a
   hard butt join. */
.surface-dark, .surface-mid, .surface-olive, .surface-dark--glow { position: relative; }
.surface-dark::before, .surface-mid::before,
.surface-olive::before, .surface-dark--glow::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-a45) 22%,
                              var(--gold-a45) 78%, transparent);
  opacity: .55;
}

/* ---- 5. Quieter, longer motion -------------------------------------------
   Luxury reads as unhurried. Reveals travel further over more time, and the
   easing settles rather than snaps. */
:root { --ease: cubic-bezier(.16, .84, .28, 1); }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transform: translateY(30px);
    transition: opacity .78s var(--ease), transform .78s var(--ease);
  }
  .card, .btn, .stat, .clients li, .goals li, .chips li {
    transition-duration: .38s;
  }
}

/* ---- 6. Optical typography ----------------------------------------------- */
h1, h2, .chip { font-feature-settings: "kern" 1; }
 .stat__num, .svc__num, .pillar__n, .reg dd, .ltr {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .01em;          /* Latin numerals only — never Arabic text */
}
 .brand__en { font-feature-settings: "kern" 1, "liga" 0; }

/* Gold rule gains a soft taper rather than a blunt bar */
.rule {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light) 55%, var(--gold-deep));
  box-shadow: 0 1px 0 rgba(31, 31, 31, .18);
}

/* Focus ring: designed, not default */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Selection uses the brand, not the browser default */
::selection { background: var(--gold); color: var(--ink); }

/* Custom scrollbar on dark ground (WebKit + Firefox) */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { inline-size: 12px; }
  ::-webkit-scrollbar-track { background: var(--charcoal-deep); }
  ::-webkit-scrollbar-thumb {
    background: var(--gold-deep);
    border: 3px solid var(--charcoal-deep);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
}
html { scrollbar-color: var(--gold-deep) var(--charcoal-deep); scrollbar-width: thin; }

/* Numbered service cards: a faint gold watermark of the numeral behind the card,
   so the 20-card grid has depth instead of reading as a spreadsheet. */
.svc { position: relative; overflow: hidden; }
.svc::after {
  content: "";
  position: absolute;
  inset-block-start: -30px; inset-inline-start: -30px;
  inline-size: 120px; block-size: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-a12) 0%, transparent 70%);
  pointer-events: none;
}
.card--gold.svc::after { background: radial-gradient(circle, rgba(255,255,255,.22) 0%, transparent 70%); }

/* ==========================================================================
   25. CONTRAST CORRECTIONS  (audit of all 7 pages)
   Spec §7: gold text on light backgrounds is decorative only. Gold stays as
   the rule/border; the text itself moves to ink so it passes AA.
   ========================================================================== */

/* 1. Inline gold link in light prose — was 2.08:1 */
.surface-cream .prose .link-gold,
.surface-white .prose .link-gold{
  color: var(--ink);
  border-block-end-color: var(--gold);
}
.surface-cream .prose .link-gold:hover,
.surface-white .prose .link-gold:hover{
  color: var(--ink);
  border-block-end-color: var(--gold-deep);
  border-block-end-width: 2px;
}

/* 2. Attribution links — were 3.1:1 at 13px */




/* 3. Underlined card titles (legal + preservation) — were 2.54:1.
      The gold underline is the print signature; the word itself goes ink. */
.card--cream .titled__t,
.card--white .titled__t {
  color: var(--ink);
  border-block-end-color: var(--gold);
}

/* 4. Numbered badge on light cards — was 3.1:1 */
.numbered-badge { color: var(--ink); border-color: var(--gold); }
.card--dark .numbered-badge { color: var(--gold-light); border-color: var(--gold-a45); }

/* 5. Secondary button.
      White on charcoal/photo; ink on cream — the mobile "show all" disclosure
      sits on a cream section and was unreadable at gold-on-cream. */
.btn--secondary { color: var(--white); }
.btn--secondary:hover { color: var(--ink); }
.surface-cream .btn--secondary,
.surface-white .btn--secondary{
  color: var(--ink);
  border-color: var(--gold-deep);
}
.surface-cream .btn--secondary:hover,
.surface-white .btn--secondary:hover{
  background: var(--gold);
  color: var(--ink);
}

/* 6. Required-field marker on --charcoal — was 4.42:1 */
.field .req { color: var(--white); }

/* ---- White pillar cards --------------------------------------------------
   A dark card's palette does not survive a white background: the gold numeral,
   the gold icon and the gold link all drop below AA. Each gets a light-surface
   value, with gold retained as the frame and the underline. */
.card--white.pillar h3 { color: var(--ink); }
.card--white.pillar p { color: var(--ink-a78); }
.card--white .pillar__n { color: var(--ink-a78); }
.card--white .pillar__icon {
  background: var(--gold-a12);
  border-color: var(--gold);
  color: var(--gold-deep);
}
.card--white .link-gold { color: var(--ink); border-block-end-color: var(--gold); }
.card--white .link-gold:hover { color: var(--ink); border-block-end-color: var(--gold-deep); }
/* A white card on the cream section needs an edge, or it dissolves into it. */
.surface-cream .card--white { border-color: rgba(31, 31, 31, .12); }

/* ==========================================================================
   26. HOME HERO — reference composition, brand palette
   Placement is PHYSICAL on purpose: copy right, photograph left, following the
   RTL reading order — the eye starts at the right and meets the copy there.
   ========================================================================== */

/* Stable hero entrance: only composited opacity/transform properties animate.
   The hero geometry, clipping and Arabic text nodes remain untouched. */
.hero-intro-pending .hero-copy > *,
.hero-intro-running .hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
}
.hero-intro-playing .hero-media img { animation: hero-photo-settle 1.6s cubic-bezier(.16,1,.3,1) both; }
.hero-intro-playing .hero-copy .hero__eyebrow { animation: hero-copy-in .5s .15s var(--ease) forwards; }
.hero-intro-playing .hero-copy h1 { animation: hero-copy-in .65s .35s var(--ease) forwards; }
.hero-intro-running .hero-copy h1 .text-gold { position: relative; overflow: hidden; }
.hero-intro-running .hero-copy h1 .text-gold::after {
  content: "";
  position: absolute;
  inset-block: -10%;
  left: -45%;
  width: 28%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
}
.hero-intro-playing .hero-copy h1 .text-gold::after { animation: hero-type-sheen .62s .88s ease-out forwards; }
.hero-intro-playing .hero-copy .rule { animation: hero-rule-in .5s .72s var(--ease) forwards; }
.hero-intro-playing .hero-copy .hero__sub { animation: hero-copy-in .55s .82s var(--ease) forwards; }
.hero-intro-playing .hero-copy .btn-row { animation: hero-copy-in .55s 1.04s var(--ease) forwards; }
.hero-intro-playing .hero-copy .btn--primary { animation: hero-cta-pulse .72s 1.48s ease-out; }

@keyframes hero-photo-settle {
  from { opacity: .72; transform: translate3d(-10px, 0, 0) scale(1.06); }
  to { opacity: 1; transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1.015); }
}
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-type-sheen { to { left: 118%; } }
@keyframes hero-rule-in { from { opacity: 0; transform: scaleX(0); transform-origin: right; } to { opacity: 1; transform: scaleX(1); transform-origin: right; } }
@keyframes hero-cta-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 30px rgba(0,0,0,.18); }
  48% { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 7px var(--gold-a18), 0 0 34px var(--gold-a45); }
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--charcoal-deep);
  /* Reserve the lower part of the first screen for the overlapping proof
     panel, so the hero and credentials read as one viewport composition. */
  min-block-size: min(calc(100vh - 240px), 680px);
  min-block-size: min(calc(100svh - 240px), 680px);
  min-block-size: min(calc(100dvh - 240px), 680px);
  padding-block: 0 var(--s-6);
  display: flex;
  align-items: center;
}

/* Photograph: physically left, diagonal inner edge (the mirror of the original
   polygon — every x became 100-x). */
.hero-media {
  position: absolute;
  top: 0; left: 0;
  /* The diagonal begins at 74% of this box, so the width sets where the dark
     wedge starts. 54% puts it at x=571 (top) to 772 (bottom) on a 1430 viewport. */
  width: 54%;
  height: 100%;
  z-index: -3;
  clip-path: polygon(0 0, 74% 0, 100% 100%, 0 100%);
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1.015);
  transition: transform .45s var(--ease);
  will-change: transform;
}
/* Dissolve into the charcoal along the slant; desaturated per spec §2.4. */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to left, var(--charcoal-deep) 0%, rgba(51,51,51,.90) 14%,
                    rgba(51,51,51,.60) 34%, rgba(51,51,51,.22) 60%, rgba(51,51,51,.10) 100%),
    linear-gradient(0deg, var(--charcoal-deep) 0%, rgba(51,51,51,.35) 22%, transparent 46%);
}
.hero-media img { filter: grayscale(.34) contrast(1.06); }

/* Architectural linework across the transition. */
.hero-pattern {
  position: absolute;
  /* Centred in the hero so neither end is cut by the section. */
  top: 50%;
  transform: translateY(-50%);
  /* Anchored to the right edge, inside the charcoal. At 520px wide its left edge
     stays clear of the diagonal's widest point (54vw) right across the desktop
     range — 910 vs 772 at 1430, 670 vs 643 at 1200. Centred on the transition,
     as it was before, half of it lay over the photograph. */
  inset-inline: auto 0;
  left: auto; right: 0;
  width: 520px; height: 520px;
  z-index: -2;
  opacity: .32;
  pointer-events: none;
  /* Fades out on all four sides, so the artwork never ends in a hard line
     wherever the section clips it — which the 340px inner header always will. */
  -webkit-mask-image: radial-gradient(62% 62% at 50% 50%, #000 28%, transparent 78%);
  mask-image: radial-gradient(62% 62% at 50% 50%, #000 28%, transparent 78%);
}

/* The hero copy shares its right edge with the credentials panel below, which
   is already wider than the 1200px content wrap. Pinning the copy to the wrap
   instead left a 91px step between the two, and meant every request to move the
   text right had to be paid for by narrowing it — the right edge was fixed, so
   shifting right shrank the column and forced the headline smaller. */
.hero-inner {
  position: relative; z-index: 1;
  inline-size: calc(100% - 96px);
  max-inline-size: 1360px;
  margin-inline: auto;
  /* .wrap's 24px gutter would leave the copy's right edge inside the panel's;
     the box already carries its own 48px margin either side. */
  padding-inline: 0;
}
.hero-copy {
  /* Bounded by the room that actually exists right of the photograph, not by a
     fixed width: the wrap stops growing at 1200px while the media stays a
     percentage of the viewport, so a fixed column crossed the diagonal between
     1200 and 1300. 46vw is the strip beside the 54% media. */
  max-inline-size: min(640px, calc(46vw - 40px));
  margin-left: auto;           /* physical right */
  text-align: right;           /* flush edge on the right, with the reading order */
  padding-block: var(--s-6) var(--s-6);
}
.hero-copy .hero__eyebrow { margin-inline: 0 auto; }
.hero-copy h1 {
  color: var(--white);
  /* Capped at 2.75rem, not 3.15: the longer line needs 42.1px to fit the 640px
     column, so the headline broke to three lines and orphaned the
     last word. Balance is the safety net at widths in between. */
  font-size: clamp(1.85rem, 1.05rem + 2.6vw, 2.55rem);
  text-wrap: balance;
  margin-block-end: var(--s-3);
}
.hero-copy h1 .text-gold { display: block; color: var(--gold-light); }
.hero-copy .rule { margin-left: auto; margin-right: 0; }
.hero-copy .hero__sub {
  color: var(--white-a86);
  max-width: 50ch;
  margin-left: auto; margin-right: 0;
  margin-block-end: var(--s-5);
}
.hero-copy .btn-row { direction: rtl; justify-content: flex-start; }
.hero-copy .btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-copy .btn--primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle 76px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,.48), transparent 72%);
  transition: opacity .2s ease;
}
.hero-copy .btn--primary:hover::before { opacity: 1; }

/* ---------- Credentials panel --------------------------------------------- */
.credentials {
  position: relative;
  z-index: 2;
  margin-block-start: calc(var(--s-7) * -1);
  margin-inline: auto;
  inline-size: calc(100% - 96px);
  max-inline-size: 1360px;
  background: linear-gradient(160deg, rgba(66,66,66,.96), rgba(51,51,51,.96));
  border: 1px solid var(--gold-a28);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px rgba(0,0,0,.34);
  overflow: hidden;
}
.credentials__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  direction: ltr;              /* 84 first on the left, matching the reference */
}
.cred {
  direction: rtl;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--s-5) var(--s-4);
  text-align: center;
  border-left: 1px solid var(--white-a06);
}
.cred:first-child { border-left: 0; }
.cred__icon { inline-size: 28px; block-size: 28px; color: var(--gold); stroke-width: 1.35; }
.cred__value {
  font-family: 'Montserrat', 'Inter', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.85rem); line-height: 1;
  color: var(--gold-light);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining-nums;
}
.cred__label { font-size: .95rem; color: var(--white); }

.credentials__class {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 22px clamp(20px, 3vw, 42px);
  border-block-start: 1px solid var(--white-a06);
  background:
    radial-gradient(circle at 92% 50%, var(--gold-a08), transparent 27%),
    linear-gradient(135deg, rgba(24,24,24,.64), rgba(38,38,38,.4));
}
.credentials__class::after {
  content: "";
  position: absolute;
  inset-inline: clamp(20px, 3vw, 42px);
  inset-block-start: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-a45), transparent);
}
.credentials__class-head {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.credentials__seal {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  flex: 0 0 46px;
  color: var(--gold-light);
  border: 1px solid var(--gold-a45);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-a18), var(--gold-a08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 22px rgba(0,0,0,.2);
}
.credentials__seal .icon { inline-size: 22px; block-size: 22px; stroke-width: 1.6; }
.credentials__class .trust__label {
  margin: 0;
  color: var(--white);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.credentials__badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-inline-size: 0;
}
.credentials__class .trust__item {
  justify-content: center;
  min-block-size: 46px;
  padding: 9px 14px;
  border-color: var(--gold-a28);
  border-radius: 13px;
  color: var(--gold-light);
  background: linear-gradient(145deg, rgba(197,154,62,.12), rgba(197,154,62,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 5px 14px rgba(0,0,0,.12);
  font-size: .84rem;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.credentials__class .trust__item .icon {
  inline-size: 19px;
  block-size: 19px;
  padding: 3px;
  color: var(--charcoal);
  border-radius: 50%;
  background: var(--gold-light);
  stroke-width: 2.4;
}
@media (hover: hover) {
  .credentials__class .trust__item:hover {
    transform: translateY(-2px);
    border-color: var(--gold-a45);
    background: linear-gradient(145deg, rgba(197,154,62,.18), rgba(197,154,62,.07));
  }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-media { width: 52%; }
  .hero-pattern { width: 440px; height: 440px; }
  .credentials { inline-size: calc(100% - 64px); }
}

@media (max-width: 900px) {
  .hero {
    min-block-size: 88vh;
    min-block-size: 88svh;
    /* Measured 146px of empty photograph below the buttons while the copy sat
       flush against the header. Centring splits that space above and below. */
    justify-content: center;
    display: flex; flex-direction: column;
    padding-block-end: var(--s-7);
  }
  .hero-inner { order: 1; }
  /* The photograph is a full-bleed layer behind the copy, as on the inner
     headers — not a band stacked under it. */
  .hero-media {
    order: 0;
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    clip-path: none;
    margin: 0;
  }
  /* This scrim is load-bearing: it is the only thing holding white type legible
     over a bright sunset sky. Heaviest at top and bottom, where the eyebrow and
     the buttons sit; lifted through the middle so the skyline still reads. */
  .hero-media::after {
    background:
      linear-gradient(180deg,
        rgba(51,51,51,.90) 0%,
        rgba(51,51,51,.82) 26%,
        rgba(51,51,51,.75) 48%,
        rgba(51,51,51,.80) 74%,
        var(--charcoal-deep) 100%);
  }
  .hero-media img { object-position: 50% 52%; }
  /* The photograph now carries the texture here; the grid on top of it was two
     competing patterns in the same space. */
  .hero-pattern { display: none; }
  .hero-inner, .page-hero > .wrap { inline-size: calc(100% - 32px); }
  .hero-copy { max-inline-size: none; padding-block: var(--s-7) var(--s-7); }
  .credentials { inline-size: calc(100% - 32px); margin-block-start: var(--s-6); }
  .credentials__stats { grid-template-columns: repeat(2, 1fr); }
  .cred { border-left: 0; border-top: 1px solid var(--white-a06); }
  .cred:nth-child(-n+2) { border-top: 0; }
  .cred:nth-child(odd) { border-right: 1px solid var(--white-a06); }
  .credentials__class { grid-template-columns: 1fr; gap: 16px; }
  .credentials__class-head { justify-content: center; }
  .credentials__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .credentials__class { padding: 20px 16px; }
  .credentials__class-head { justify-content: flex-start; }
  .credentials__badges { grid-template-columns: minmax(0, 1fr); }
  .credentials__class .trust__item { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro-running .hero-media img,
  .hero-intro-running .hero-copy > *,
  .hero-intro-running .hero-copy .btn--primary {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero-media img { transition: none; }
}

/* ==========================================================================
   27. INNER-PAGE HEADER — the home hero's composition, compact
   ========================================================================== */
.page-hero {
  display: flex;
  align-items: center;
  min-block-size: 340px;
  padding-block: clamp(var(--s-7), 6vw, 104px);
}
.page-hero > .wrap {
  position: relative; z-index: 1;
  inline-size: calc(100% - 96px);
  max-inline-size: 1360px;
  margin-inline: auto;
  padding-inline: 0;
}

.page-hero__copy {
  /* Matches the home hero — bounded by the strip beside the photograph. */
  max-inline-size: min(640px, calc(46vw - 40px));
  margin-left: auto;           /* physical right, as on the home hero */
  text-align: right;
}
/* flex-start resolves to the physical right in RTL, so the crumbs share the
   headline's flush edge. */
.page-hero .crumbs { justify-content: flex-start; }
.page-hero .rule { margin-left: auto; margin-right: 0; }
.page-hero .lede {
  margin-left: auto; margin-right: 0;
  max-width: 52ch;
}
.page-hero .hero-pattern { top: 50%; opacity: .27; }

@media (max-width: 1100px) {
  .page-hero .hero-media { width: 54%; }
  .page-hero .hero-pattern { width: 440px; height: 440px; }
}

@media (max-width: 900px) {
  /* An inner header that grew by a stacked 340px photo would push the page's
     actual content off the first screen — so here the photograph stays a
     background layer instead. */
  .page-hero { min-block-size: 260px; }
  .page-hero .hero-media {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    clip-path: none;
    margin: 0;
    order: 0;
  }
  .page-hero .hero-media::after {
    background:
      linear-gradient(180deg, rgba(51,51,51,.86) 0%, rgba(51,51,51,.58) 44%,
                      rgba(51,51,51,.80) 78%, var(--charcoal-deep) 100%);
  }
  .page-hero .hero-media img { object-position: 50% 58%; }
  .page-hero .hero-pattern { opacity: .14; width: 340px; height: 340px; right: -60px; }
  .page-hero__copy { max-inline-size: none; }
}

/* ---- Contact page: white-a55 clears 4.5:1 on --charcoal-deep but only
   reaches 4.32:1 on --charcoal, which is the contact section's surface. ---- */
.contact-item__label { color: var(--white-a72); }
.field__hint { color: var(--white-a72); }

/* ---- Error summary — the keyboard/screen-reader route to each bad field --- */
.form__summary {
  margin-block-end: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid #E5A5A5;
  border-inline-start: 4px solid #C25B5B;
  border-radius: var(--radius-chip);
  background: rgba(194, 91, 91, .10);
}
.form__summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.form__summary-t { margin: 0 0 8px; font-weight: 700; color: var(--white); max-width: none; }
.form__summary ul { margin: 0; padding-inline-start: 1.1em; }
.form__summary li + li { margin-block-start: 6px; }
.form__summary a { color: var(--white); text-underline-offset: 3px; }
.form__summary a:hover { color: var(--gold-light); }
.form__status a { color: var(--white); text-underline-offset: 3px; }
.form__status a:hover { color: var(--gold-light); }

/* ---- Home rhythm: hero charcoal / cream / hero charcoal / ... ------------
   The quote's frame is interrupted by two marks that must carry the section's
   own ground, or they read as coloured blocks sitting on the frame rather than
   as gaps in it. Each surface therefore hands the quote its background. */
.surface-dark  .quote { --quote-ground: var(--charcoal-deep); }
.surface-mid   .quote { --quote-ground: var(--charcoal); }
.surface-olive .quote { --quote-ground: var(--olive-charcoal); }
.surface-cream .quote { --quote-ground: var(--cream-soft); }
.surface-white .quote { --quote-ground: var(--white); }

/* On a light ground the quote's white type has to become ink. */
.surface-cream .quote, .surface-white .quote { color: var(--ink-a86); }
.surface-cream .quote p, .surface-white .quote p { color: var(--ink); }
.surface-cream .quote__name, .surface-white .quote__name { color: var(--gold-deep); }
.surface-cream .quote__role, .surface-white .quote__role { color: var(--ink-a78); }

/* The logo wall now sits on cream at home. Giving the cells white keeps the
   marks on the clean ground a logo wall expects, and reads as cards. */
.surface-cream .clients li { background: var(--white); }

/* The white pillar cards sit on the hero's charcoal at home, where the light
   sections' cream reads warmer than a flat white. Scoped to that surface: the
   same card class is used on cream grounds elsewhere, and cream on cream would
   erase the card entirely. */
.surface-dark .card--white { background: var(--cream-soft); }

/* Core-service cards use one calm cream state, then reveal the brand gold on
   interaction. A pseudo-element owns the colour fade so the card's independent
   scroll-reveal transition cannot override or interrupt the hover animation. */
.card.pillar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream-soft);
  border-color: rgba(31, 31, 31, .08);
  color: var(--ink-a86);
}
.card.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 58%, var(--gold-deep) 100%);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  pointer-events: none;
  transition: clip-path .68s cubic-bezier(.2, .75, .2, 1);
  will-change: clip-path;
}
.card.pillar::after {
  content: "";
  position: absolute;
  inset: -45% -30%;
  z-index: 1;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.08) 53%, transparent 58%);
  transform: translateX(85%) rotate(-8deg);
  opacity: 0;
  pointer-events: none;
  transition: transform .82s .12s var(--ease), opacity .18s .12s ease;
  will-change: transform, opacity;
}
.card.pillar > * { position: relative; z-index: 2; }
.card.pillar h2,
.card.pillar h3 { color: var(--ink); }
.card.pillar p { color: var(--ink-a78); }
.card.pillar .pillar__n {
  color: var(--ink-a78);
  opacity: 1;
  transition: color .38s var(--ease), opacity .38s var(--ease);
}
.card.pillar .pillar__icon {
  color: var(--gold-deep);
  background: var(--gold-a12);
  border-color: var(--gold-a45);
  transition: color .38s var(--ease), background-color .38s var(--ease),
              border-color .38s var(--ease), transform .48s var(--ease), box-shadow .48s var(--ease);
}
.card.pillar .link-gold {
  color: var(--ink);
  border-block-end-color: var(--gold-deep);
  transition: color .38s var(--ease), border-color .38s var(--ease), gap .2s var(--ease);
}
.card.pillar:hover::before,
.card.pillar:focus-within::before {
  clip-path: polygon(-35% 50%, 50% -120%, 135% 50%, 50% 220%);
}
.card.pillar:hover::after,
.card.pillar:focus-within::after {
  transform: translateX(-85%) rotate(-8deg);
  opacity: 1;
}
.card.pillar:hover .pillar__n,
.card.pillar:focus-within .pillar__n { color: var(--ink); opacity: .62; }
.card.pillar:hover .pillar__icon,
.card.pillar:focus-within .pillar__icon {
  color: var(--ink);
  background-color: rgba(31, 31, 31, .10);
  border-color: rgba(31, 31, 31, .18);
  transform: translateY(-3px) rotate(-7deg) scale(1.06);
  box-shadow: 0 10px 22px rgba(31, 31, 31, .16);
}

/* A single core service needs a deliberate feature composition rather than a
   stranded half-width card left over from the former four-service grid. */
.home-service {
  overflow: hidden;
  padding-block: clamp(var(--s-6), 6vw, var(--s-7));
}
.home-service .wrap { max-inline-size: 1040px; }
.home-service .section-head {
  justify-content: center;
  text-align: center;
  margin-block-end: var(--s-6);
}
.home-service__grid {
  display: block;
  max-inline-size: 980px;
  margin-inline: auto;
}
.home-service .pillar {
  min-block-size: 260px;
  block-size: auto;
  padding: clamp(var(--s-4), 3.4vw, var(--s-6));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  grid-template-areas:
    "copy head";
  align-items: center;
  gap: var(--s-4) clamp(var(--s-5), 5vw, var(--s-7));
  direction: ltr;
  border-color: rgba(207, 161, 81, .42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 8%, rgba(224,187,122,.13), transparent 28%),
    linear-gradient(145deg, #fffdf8 0%, var(--cream-soft) 72%, #f2e7d4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(207,161,81,.16),
    0 18px 48px rgba(0,0,0,.20);
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1),
    border-color .32s ease-out;
}
.home-service .card.pillar::before {
  clip-path: inset(0);
  opacity: 0;
  background:
    linear-gradient(112deg, transparent 8%, rgba(224,187,122,.04) 38%, rgba(224,187,122,.17) 52%, rgba(255,255,255,.08) 63%, transparent 88%);
  transition: opacity .46s cubic-bezier(.22, 1, .36, 1);
}
.home-service .card.pillar::after { display: none; }
.home-service .card.pillar:hover::before,
.home-service .card.pillar:focus-within::before {
  clip-path: inset(0);
  opacity: 1;
}
.home-service .card.pillar:hover,
.home-service .card.pillar:focus-within {
  transform: translateY(-3px);
  border-color: rgba(207,161,81,.64);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 1px 0 rgba(207,161,81,.22),
    0 24px 58px rgba(0,0,0,.24);
}
.home-service .pillar__head {
  grid-area: head;
  direction: rtl;
  align-self: stretch;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding-inline-start: clamp(var(--s-4), 4vw, var(--s-6));
  border-inline-start: 1px solid rgba(31,31,31,.12);
}
.home-service .card.pillar .pillar__icon {
  inline-size: 68px;
  block-size: 68px;
  border-radius: 50%;
  margin-block-end: var(--s-2);
  position: relative;
  transition:
    color .32s ease-out,
    background-color .32s ease-out,
    border-color .32s ease-out,
    transform .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1);
}
.home-service .pillar__icon::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px dashed var(--gold-deep);
  border-radius: 50%;
  opacity: .48;
  transition: transform .46s cubic-bezier(.22, 1, .36, 1), border-color .32s ease-out, opacity .32s ease-out;
}
.home-service .pillar__icon .icon {
  inline-size: 30px;
  block-size: 30px;
}
.home-service .pillar__n {
  display: block;
  margin-block-end: 4px;
  font-size: .9rem;
  letter-spacing: .12em;
}
.home-service .pillar h3 {
  margin: 0;
  font-size: clamp(1.4rem, 1.15rem + .8vw, 1.9rem);
  line-height: 1.45;
}
.home-service__copy {
  grid-area: copy;
  direction: rtl;
  align-self: center;
  position: relative;
  z-index: 2;
}
.home-service__copy > p:first-child {
  margin: 0;
  font-size: clamp(.94rem, .91rem + .18vw, 1.04rem);
  line-height: 1.85;
}
.home-service .pillar__foot {
  margin: var(--s-3) 0 0;
  padding: 0;
}
.home-service .pillar__foot .link-gold {
  font-size: .94rem;
  font-weight: 800;
}
.home-service__sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-block-start: var(--s-3);
}
.home-service__sectors li {
  padding: 5px 11px;
  border: 1px solid var(--gold-a45);
  border-radius: 999px;
  color: var(--ink-a78);
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.5;
  transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out;
}
.home-service .home-service__blueprint {
  position: absolute;
  inset-inline-start: 1%;
  inset-block-end: 0;
  inline-size: 61%;
  block-size: 76%;
  z-index: 1;
  color: var(--gold-deep);
  opacity: .12;
  pointer-events: none;
}
.home-service__blueprint path {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .72s cubic-bezier(.22, 1, .36, 1), color .36s ease-out, opacity .36s ease-out;
}
.home-service__blueprint path:nth-child(2) { transition-delay: .1s; }
.home-service__blueprint path:nth-child(3) { transition-delay: .2s; }
.home-service .pillar:hover .home-service__blueprint,
.home-service .pillar:focus-within .home-service__blueprint {
  color: var(--ink);
  opacity: .16;
}
.home-service .pillar:hover .home-service__blueprint path,
.home-service .pillar:focus-within .home-service__blueprint path { stroke-dashoffset: 0; }
.home-service .pillar:hover .pillar__icon::after,
.home-service .pillar:focus-within .pillar__icon::after {
  transform: scale(1.035);
  border-color: var(--gold-deep);
  opacity: .72;
}
.home-service .pillar:hover .pillar__icon,
.home-service .pillar:focus-within .pillar__icon {
  transform: translateY(-1px) scale(1.025);
  color: var(--gold-deep);
  background-color: rgba(207,161,81,.16);
  border-color: rgba(207,161,81,.62);
  box-shadow: 0 8px 20px rgba(94,69,30,.12);
}
.home-service .pillar:hover .home-service__sectors li,
.home-service .pillar:focus-within .home-service__sectors li {
  transform: none;
  background: rgba(255,255,255,.64);
  border-color: rgba(207,161,81,.68);
}
.home-service .pillar:hover .home-service__sectors li:nth-child(2),
.home-service .pillar:focus-within .home-service__sectors li:nth-child(2) { transition-delay: .06s; }
.home-service .pillar:hover .home-service__sectors li:nth-child(3),
.home-service .pillar:focus-within .home-service__sectors li:nth-child(3) { transition-delay: .12s; }

/* Formal entrance choreography: the card settles first, followed by its
   title, description, scope and action. Motion is one-shot and restrained. */
@media (prefers-reduced-motion: no-preference) {
  .js .home-service .pillar.reveal {
    transform: translateY(14px);
    transition:
      opacity .46s ease-out,
      transform .58s cubic-bezier(.22, 1, .36, 1),
      box-shadow .42s cubic-bezier(.22, 1, .36, 1),
      border-color .32s ease-out;
  }
  .js .home-service .pillar.reveal.is-in { transform: none; }
  .js .home-service .pillar.reveal .pillar__head,
  .js .home-service .pillar.reveal .home-service__copy > p:first-child,
  .js .home-service .pillar.reveal .home-service__sectors,
  .js .home-service .pillar.reveal .pillar__foot {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .46s ease-out, transform .52s cubic-bezier(.22, 1, .36, 1);
  }
  .js .home-service .pillar.reveal.is-in .pillar__head,
  .js .home-service .pillar.reveal.is-in .home-service__copy > p:first-child,
  .js .home-service .pillar.reveal.is-in .home-service__sectors,
  .js .home-service .pillar.reveal.is-in .pillar__foot {
    opacity: 1;
    transform: none;
  }
  .js .home-service .pillar.reveal.is-in .pillar__head { transition-delay: .10s; }
  .js .home-service .pillar.reveal.is-in .home-service__copy > p:first-child { transition-delay: .17s; }
  .js .home-service .pillar.reveal.is-in .home-service__sectors { transition-delay: .24s; }
  .js .home-service .pillar.reveal.is-in .pillar__foot { transition-delay: .31s; }
}

@media (max-width: 760px) {
  .home-service { padding-block: var(--s-5); }
  .home-service .section-head { margin-block-end: var(--s-4); }
  .home-service .pillar {
    min-block-size: 0;
    block-size: auto;
    padding: 24px 22px 26px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "copy";
    gap: 20px;
  }
  .home-service .pillar__head {
    align-self: auto;
    flex-direction: row;
    justify-content: flex-start;
    text-align: start;
    padding: 0 0 18px;
    border-inline-start: 0;
    border-block-end: 1px solid rgba(31,31,31,.12);
  }
  .home-service .card.pillar .pillar__icon {
    inline-size: 52px;
    block-size: 52px;
    margin: 0;
  }
  .home-service .pillar__icon .icon {
    inline-size: 24px;
    block-size: 24px;
  }
  .home-service .pillar h3 { font-size: clamp(1.3rem, 6vw, 1.55rem); }
  .home-service__copy > p:first-child { font-size: .92rem; line-height: 1.8; }
  .home-service__sectors { gap: 7px; margin-block-start: 15px; }
  .home-service__sectors li { padding: 4px 9px; font-size: .74rem; }
  .home-service .pillar__foot { margin-block-start: 17px; }
  .home-service__blueprint {
    inset-inline-start: -18%;
    inline-size: 118%;
    block-size: 52%;
    opacity: .08;
  }
}

/* ---------- 23. SINGLE-PAGE ADDITIONS ----------------------------------- */
.surface-cream h2, .surface-cream h3, .surface-cream h4,
.surface-white h2, .surface-white h3 { color: var(--ink); }

.surface-cream .text-gold, .surface-white .text-gold { color: var(--gold-deep); }
.surface-cream .lede, .surface-white .lede { color: var(--ink-a78); }

.goals--light li { background: rgba(31,31,31,.035); border-color: rgba(31,31,31,.10); color: var(--ink-a86); }
.goals--light li:hover { border-color: var(--gold-deep); background: var(--gold-a12); }




/* Two-column intro block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
.split--aside { grid-template-columns: .8fr 1.2fr; }
.split .section-head { margin-block-end: 0; }
@media (max-width: 900px) { .split--aside { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0,1fr); gap: var(--s-5); } }

/* Sub-heading inside a long section */
.subhead { margin-block: var(--s-7) var(--s-5); }
.subhead:first-child { margin-block-start: 0; }

/* Why-us: title-only cards (no body text exists in the sources) */
.why { display: flex; align-items: center; gap: var(--s-3); min-block-size: 112px; }
/* These three read as statements rather than card titles, so they take plain
   white rather than .card--dark's gold heading colour. */
.why h3 { margin: 0; font-size: 1.08rem; line-height: 1.55; color: var(--white); }

/* Registration figures */
.reg dd { word-break: break-word; }

/* Premium motion layer: optional, scoped, one-shot and layout-stable. */
@media (prefers-reduced-motion: no-preference) {
  .has-premium-motion {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-interaction: .28s;
  }
  /* Children own the entrance translation: don't stack it with a parent lift. */
  .has-premium-motion .section-head.reveal,
  .has-premium-motion .quote.reveal { transform: none; }
  .has-premium-motion .section-head.reveal,
  .has-premium-motion .quote.reveal {
    transition: opacity .36s var(--motion-ease);
    transition-delay: min(var(--d, 0ms), 240ms);
  }
  .has-premium-motion .site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
    transform: scaleX(var(--motion-progress, 0));
    transform-origin: left center;
    opacity: .8;
  }
  [dir="rtl"].has-premium-motion .site-header::after { transform-origin: right center; }

  /* Move the arrow, not the link's layout or neighboring text. */
  .has-premium-motion .link-gold,
  .has-premium-motion .link-gold:hover { gap: 8px; }
  .has-premium-motion .link-gold .icon {
    transition: transform var(--motion-interaction) var(--motion-ease);
  }
  .has-premium-motion .link-gold:focus-visible .icon { transform: translateX(-3px); }
  .has-premium-motion .nav a::after {
    transform-origin: right center;
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  }
  .has-premium-motion .nav a:focus-visible::after { transform: scaleX(1); }

  .has-premium-motion .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
  .has-premium-motion .btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.17) 50%, transparent 75%);
    transform: translateX(120%);
  }
  .has-premium-motion .btn--primary:focus-visible::after { animation: premium-foil .65s ease-out; }
  .has-premium-motion .btn:active:not(:disabled) { transform: translateY(1px); }

  /* Only the open mobile menu animates; the default state remains readable. */
  .has-premium-motion .nav-overlay.is-open nav a {
    animation: premium-nav-in .34s var(--motion-ease) backwards;
  }
  .has-premium-motion .nav-overlay.is-open nav a:nth-child(2) { animation-delay: .035s; }
  .has-premium-motion .nav-overlay.is-open nav a:nth-child(3) { animation-delay: .07s; }
  .has-premium-motion .nav-overlay.is-open nav a:nth-child(4) { animation-delay: .105s; }
  .has-premium-motion .nav-overlay.is-open nav a:nth-child(5) { animation-delay: .14s; }

  @media (hover: hover) and (pointer: fine) {
    .has-premium-motion .btn--primary:hover:not(:disabled)::after { animation: premium-foil .65s ease-out; }
    .has-premium-motion .nav a:hover::after { transform: scaleX(1); }
    .has-premium-motion .link-gold:hover .icon { transform: translateX(-3px); }
    .has-premium-motion .contact-item {
      transition: transform .36s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
    }
    .has-premium-motion .contact-item:hover { transform: translateY(-3px); }
  }
  @media (pointer: coarse) {
    .has-premium-motion .nav-overlay.is-open nav a { animation-duration: .28s; }
    .has-premium-motion .btn--primary::after { display: none; }
  }
}
@keyframes premium-foil {
  from { transform: translateX(120%); }
  to { transform: translateX(-120%); }
}
@keyframes premium-nav-in {
  from { opacity: .45; transform: translateX(9px); }
  to { opacity: 1; transform: translateX(0); }
}
@media print {
  .has-premium-motion .site-header::after { display: none; }
}

/* Al-Wahaibi architectural identity. Public presentation only; CMS :root
   overrides load afterwards. The fin rhythm echoes the official logo's bars. */
@media screen {
  :root {
    --gold: #cfa151; --gold-light: #dbb671; --gold-deep: #846026;
    --charcoal-deep: #202123; --charcoal: #2b2c2e; --olive-charcoal: #262729;
    --cream-soft: #f6f3ed; --cream: #ede7dc; --ink: #252629;
    --radius-card: 16px; --radius-btn: 2px; --radius-chip: 2px;
    --grad-gold: linear-gradient(90deg, #cfa151, #d8ae66);
    --grad-card: linear-gradient(115deg, #303133, #292a2c);
    --shadow-light: 0 8px 24px rgba(0,0,0,.04);
    --shadow-dark: 0 8px 24px rgba(0,0,0,.09);
    --shadow-lift: 0 12px 26px rgba(0,0,0,.12);
  }
  .modern-site { font-size: 16px; line-height: 1.95; }
  .modern-site h1, .modern-site h2, .modern-site h3 { font-weight: 600; }
  .modern-site h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.5; }
  .modern-site .section { padding-block: clamp(64px, 8vw, 116px); }
  .modern-site .prose p { text-align: start; }
  .modern-site .rule { width: 52px; height: 2px; border-radius: 0; background: var(--gold); box-shadow: none; }
  .modern-site .chip { background: none; color: inherit; padding: 0; border: 0; border-radius: 0; box-shadow: none; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 600; line-height: 1.5; }
  .modern-site .chip > .icon { display: none; }
  .modern-site .section-head { margin-block-end: 40px; }
  .modern-site .section-head::before {
    content: '';
    display: block;
    width: 44px;
    height: 52px;
    margin-block-end: 20px;
    background: url('../img/al-wahaibi-logo-hq.png') right center / auto 52px no-repeat;
  }
  .modern-site .section-head--center::before { margin-inline: auto; }
  .modern-site .surface-dark--glow { background: var(--charcoal-deep); }
  .modern-site .surface-dark::before, .modern-site .surface-mid::before,
  .modern-site .surface-olive::before, .modern-site .surface-dark--glow::before { display: none; }
  .modern-site .site-header::before { display: none; }
  .modern-site .site-header.is-stuck { background: var(--charcoal-deep); box-shadow: 0 2px 16px rgba(0,0,0,.1); }
  .modern-site .utility { background: var(--charcoal-deep); border-color: rgba(255,255,255,.07); }
  .modern-site .utility__inner { min-block-size: 28px; }
  .modern-site .utility__badge { color: #bfc0c0; }
  .modern-site .navbar { background: var(--charcoal-deep); border-color: rgba(255,255,255,.12); backdrop-filter: none; }
  .modern-site .navbar .wrap { min-block-size: 86px; }
  .modern-site .nav { gap: 8px; }
  .modern-site .nav a { font-weight: 500; border-radius: 0; }
  .modern-site .nav a::after { height: 1px; }
  .modern-site .btn { font-weight: 600; border-radius: 2px; padding-inline: 26px; box-shadow: none; }
  .modern-site .btn--primary { background: var(--gold); color: var(--ink); box-shadow: none; }
  .modern-site .btn--primary:hover { background: var(--gold-light); box-shadow: none; }
  .modern-site .btn--secondary { border-color: rgba(255,255,255,.3); color: #f6f3ed; }
  .modern-site .btn--secondary:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .modern-site .surface-cream .btn--secondary,
  .modern-site .surface-white .btn--secondary { color: var(--ink); border-color: #a7a29a; }
  .modern-site .hero-copy .btn--primary::before,
  .modern-site .hero-copy h1 .text-gold::after { display: none; }
  .modern-site .hero-copy .btn--primary { animation: none; }

  /* A stepped photographic plane and seven fins use the logo's facade rhythm. */
  .modern-site .hero { min-block-size: 690px; padding-block: 52px 64px; background: var(--charcoal-deep); overflow: hidden; }
  .modern-site .hero::after, .modern-site .hero-pattern { display: none; }
  .modern-site .hero > .hero-media {
    inset: 36px auto 0 0; width: 55%; height: auto; border-radius: 0; overflow: hidden;
    clip-path: polygon(0 9%, 78% 9%, 78% 0, 100% 0, 100% 100%, 0 100%);
  }
  .modern-site .hero > .hero-media img { object-position: 58% 50%; filter: saturate(.8) contrast(1.06); }
  .modern-site .hero > .hero-media::after {
    background: linear-gradient(270deg, var(--charcoal-deep), rgba(32,33,35,.48) 16%, transparent 42%), linear-gradient(0deg, rgba(32,33,35,.38), transparent 60%);
  }
  .modern-site .hero-signature { position: absolute; inset: 0 auto 0 47%; width: 8%; display: flex; align-items: flex-end; gap: 10px; z-index: 0; pointer-events: none; direction: ltr; }
  .modern-site .hero-signature span { flex: 1; height: 68%; border-inline-start: 1px solid var(--gold); opacity: .27; }
  .modern-site .hero-signature span:nth-child(2) { height: 74%; }
  .modern-site .hero-signature span:nth-child(3) { height: 80%; }
  .modern-site .hero-signature span:nth-child(4) { height: 89%; opacity: .7; border-width: 3px; }
  .modern-site .hero-signature span:nth-child(5) { height: 100%; }
  .modern-site .hero-signature span:nth-child(6) { height: 82%; }
  .modern-site .hero-signature span:nth-child(7) { height: 72%; }
  .modern-site .hero-copy { max-inline-size: min(640px, calc(48vw - 40px)); padding-block: 16px; }
  .modern-site .hero-copy h1 { font-size: clamp(2.4rem, 3.9vw, 4rem); line-height: 1.36; margin-block-end: 28px; }
  .modern-site .hero-copy .hero__title-main { font-weight: 700; }
  .modern-site .hero-copy h1 .text-gold { color: var(--gold-light); font-weight: 400; margin-block-start: 12px; }
  .modern-site .hero__eyebrow { padding: 0 16px 0 0; border: 0; border-inline-start: 2px solid var(--gold); border-radius: 0; background: none; box-shadow: none; color: #d2cec5; font-size: .78rem; font-weight: 400; }
  .modern-site .hero-copy .rule { display: none; }
  .modern-site .hero-copy .hero__sub { color: #d2cec5; font-size: 1rem; line-height: 1.95; margin-block-end: 30px; max-width: 44ch; }
  .modern-site .hero .btn-row { margin-block-end: 0; gap: 12px; }
  .modern-site .hero .btn { min-block-size: 54px; font-size: .9rem; padding-inline: 24px; }
  .modern-site .page-hero { background: var(--charcoal-deep); border-block-end: 1px solid var(--gold-a28); }

  .modern-site .credentials { margin-block-start: 0; max-inline-size: none; inline-size: 100%; border: 0; border-radius: 0; background: var(--charcoal-deep); color: #eee8dd; box-shadow: none; padding: 26px max(24px, calc((100vw - 1200px) / 2)) 0; }
  .modern-site .credentials__stats { border-block: 1px solid rgba(255,255,255,.16); }
  .modern-site .cred { border-color: rgba(255,255,255,.12); padding: 26px 16px; gap: 10px; }
  .modern-site .cred__icon { display: none; }
  .modern-site .cred__value { color: var(--gold-light); font-size: clamp(2.2rem, 3.7vw, 3.6rem); font-weight: 400; }
  .modern-site .cred__label { color: #ded9cf; font-size: .85rem; }
  .modern-site .credentials__class { background: none; border: 0; padding: 24px 0; gap: 28px; }
  .modern-site .credentials__class::after { display: none; }
  .modern-site .credentials__seal { width: 30px; height: 30px; flex-basis: 30px; color: var(--gold); border: 0; background: none; box-shadow: none; }
  .modern-site .credentials__class .trust__label { color: #ded9cf; font-size: .8rem; font-weight: 500; }
  .modern-site .credentials__class .trust__item { min-block-size: 32px; padding: 4px 8px; border: 0; background: none; color: #ded9cf; font-size: .8rem; font-weight: 400; box-shadow: none; }
  .modern-site .credentials__class .trust__item .icon { color: var(--gold); background: none; }
  .modern-site #who-we-are { background: var(--cream-soft); }
  .modern-site #who-we-are .chip { font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 700; }
  .modern-site #who-we-are .prose > p:first-child { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 2.05; color: #4d4943; }

  /* The single service becomes an open composition, not a floating card. */
  .modern-site .home-service { background: #eeebe4; color: var(--ink); }
  .modern-site .home-service .wrap { max-inline-size: 1200px; }
  .modern-site .home-service .section-head { text-align: start; justify-content: flex-start; }
  .modern-site .home-service__grid { max-inline-size: none; }
  .modern-site .home-service .pillar { background: none; border: 0; border-block: 1px solid #bdb6a7; border-radius: 0; box-shadow: none; min-block-size: 280px; padding: 42px 0; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); grid-template-areas: 'head copy'; direction: rtl; }
  .modern-site .home-service .pillar:hover,
  .modern-site .home-service .pillar:focus-within { transform: none; border-color: #8c7750; box-shadow: none; }
  .modern-site .home-service .card.pillar::before,
  .modern-site .home-service .card.pillar::after,
  .modern-site .home-service .home-service__blueprint,
  .modern-site .home-service .pillar__icon { display: none; }
  .modern-site .home-service .pillar__head { align-items: flex-start; justify-content: flex-start; text-align: start; border: 0; padding: 0; }
  .modern-site .home-service .pillar__n { color: var(--gold-deep); font-size: 3.5rem; font-weight: 400; line-height: 1; letter-spacing: 0; margin-block-end: 20px; }
  .modern-site .home-service .pillar h3 { font-size: clamp(1.6rem,2.2vw,2.25rem); font-weight: 600; }
  .modern-site .home-service .home-service__sectors { gap: 0; margin-block: 25px; }
  .modern-site .home-service .home-service__sectors li { border: 0; border-inline-end: 1px solid #bfb5a2; background: none; color: #514a40; border-radius: 0; box-shadow: none; font-weight: 400; padding: 0 14px; }
  .modern-site .home-service .home-service__sectors li:first-child { padding-inline-start: 0; }
  .modern-site .home-service .home-service__sectors li:last-child { border: 0; }
  .modern-site .card, .modern-site .panel { box-shadow: none; border-radius: var(--radius-card); }
  .modern-site .home-service .pillar { border-radius: var(--radius-card); }
  .modern-site .card--white, .modern-site .card--cream { border-color: #ded8cc; }
  .modern-site .card--dark { background: #2b2c2e; border-color: rgba(255,255,255,.12); }
  .modern-site .card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.06); }
  .modern-site .surface-cream .why { background: none; border: 0; border-inline-start: 1px solid #b7ab94; padding: 8px 26px; align-items: flex-start; flex-direction: column; gap: 24px; }
  .modern-site .surface-cream .why h3 { color: var(--ink); font-size: 1.22rem; font-weight: 500; line-height: 1.8; }
  .modern-site .surface-cream .why .feature__icon { background: none; color: var(--gold-deep); border: 0; border-radius: 0; box-shadow: none; width: 30px; height: 30px; padding: 0; }
  .modern-site .svc::after { display: none; }
  .modern-site .panel { border-inline-start-width: 2px; }
  .modern-site .quote { max-inline-size: 950px; padding: 12px 48px; border: 0; border-inline-start: 3px solid var(--gold); border-radius: 0; text-align: start; box-shadow: none; }
  .modern-site .quote::before, .modern-site .quote::after { display: none; }
  .modern-site .quote p { max-width: none; font-size: clamp(1.35rem,2.4vw,2.15rem); font-weight: 400; line-height: 1.85; }
  .modern-site .quote__by { text-align: start; margin-block-start: 32px; }
  .modern-site .quote__by br { display: none; }
  .modern-site .quote__name { font-size: 1.1rem; font-weight: 500; }
  .modern-site .quote__role { font-size: .85rem; margin-block-start: 0; }
  .modern-site .quote--framed {
    max-inline-size: 54rem;
    margin-inline: auto;
    padding: clamp(var(--s-6), 6.5vw, var(--s-8)) clamp(var(--s-5), 6vw, var(--s-7));
    border: 2px solid var(--gold);
    border-radius: var(--radius-card);
    text-align: center;
    overflow: visible;
  }
  .modern-site .quote--framed::before,
  .modern-site .quote--framed::after { display: block; }
  .modern-site .quote--framed p {
    max-width: 46ch;
    margin-inline: auto;
    font-size: clamp(1.12rem, .98rem + .72vw, 1.55rem);
    font-weight: 700;
    line-height: 1.85;
  }
  .modern-site .quote--framed .quote__by {
    margin-block-start: var(--s-5);
    text-align: center;
  }
  .modern-site .quote--framed .quote__by br { display: initial; }
  .modern-site .quote--framed .quote__name { font-size: 1.15rem; font-weight: 800; }
  .modern-site .quote--framed .quote__role { font-size: .92rem; margin-block-start: 4px; }
  .modern-site .clients { gap: 0; border-block: 1px solid #d4cabb; }
  .modern-site .clients li { border: 0; border-radius: 0; background: transparent; min-block-size: 132px; padding: 28px; box-shadow: none; }
  .modern-site .clients li:hover { background: rgba(255,255,255,.65); box-shadow: none; }
  .modern-site .clients .client__logo { max-block-size: min(var(--logo-h,64px),64px); }
  .modern-site .cta-band { position: relative; overflow: hidden; background: var(--cream); color: var(--ink); box-shadow: none; padding-block: 76px; border-block-end: 5px solid var(--gold); }
  .modern-site .cta-band::before { content: ''; position: absolute; inset: 0 auto 0 2%; width: 90px; pointer-events: none; opacity: .12; background: repeating-linear-gradient(90deg,var(--gold-deep) 0 1px,transparent 1px 12px); }
  .modern-site .cta-band h2 { color: var(--ink); }
  .modern-site .cta-band p { color: #514a40; }
  .modern-site .cta-band .btn--on-gold { background: var(--charcoal-deep); color: #fff; }
  .modern-site .footer-col h2, .modern-site .footer-col h3 {
    border: 0;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 500;
    line-height: 1.55;
  }
  .modern-site .socials a { border-color: rgba(255,255,255,.22); border-radius: 2px; }
  .modern-site .fab { border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
  @media (max-width:1100px) and (min-width:901px) {
    .modern-site .nav { gap: 0; }
    .modern-site .nav a { padding-inline: 10px; }
    .modern-site .hero-copy h1 { font-size: 2.75rem; }
  }
  @media (max-width:900px) {
    .modern-site .navbar .wrap { min-block-size: 72px; }
    .modern-site .hero { display: flex; min-block-size: 0; padding: 0 0 34px; }
    .modern-site .hero > .hero-media { position: relative; inset: auto; width: 100%; height: 290px; margin: 0; flex: none; z-index: 0; clip-path: polygon(0 7%,80% 7%,80% 0,100% 0,100% 100%,0 100%); }
    .modern-site .hero > .hero-media img { object-position: 50% 50%; }
    .modern-site .hero > .hero-media::after { background: linear-gradient(0deg,rgba(32,33,35,.36),transparent 60%); }
    .modern-site .hero-signature { inset: 0 0 auto auto; height: 290px; width: 17%; gap: 6px; z-index: 1; }
    .modern-site .hero-copy { max-inline-size: 680px; padding: 32px 8px 0; margin-inline: auto; }
    .modern-site .hero-copy h1 { font-size: clamp(2rem,5.6vw,3rem); }
    .modern-site .hero__eyebrow { font-size: .72rem; }
    .modern-site .hero .btn-row { gap: 10px; }
    .modern-site .credentials { padding: 12px 24px 0; }
    .modern-site .credentials__class { gap: 12px; }
    .modern-site .credentials__class-head { justify-content: flex-start; }
    .modern-site .credentials__badges { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .modern-site .cred { padding: 20px 12px; }
    .modern-site .home-service .section-head { margin-block-end: 26px; }
    .modern-site .home-service .pillar { min-block-size: 0; padding: 30px 0; grid-template-columns: 1fr; grid-template-areas: 'head' 'copy'; gap: 28px; }
    .modern-site .home-service .pillar__head { border: 0; padding: 0; }
    .modern-site .home-service .pillar__n { font-size: 2.8rem; margin-block-end: 16px; }
    .modern-site .home-service .home-service__sectors li { padding-inline: 8px; font-size: .75rem; }
    .modern-site .quote:not(.quote--framed) { padding-inline: 24px 0; }
    .modern-site .clients li { padding: 20px; min-block-size: 112px; }
  }
  @media (max-width:520px) {
    .modern-site .hero > .hero-media, .modern-site .hero-signature { height: 230px; }
    .modern-site .hero .btn-row .btn { min-block-size: 50px; }
    .modern-site .section { padding-block: 60px; }
    .modern-site .clients li { padding: 16px; }
    .modern-site .credentials__class .trust__item { font-size: .74rem; }
  }
}

/* Premium inner-page presentation module.
   Scope: .inner-site only. Removing this file returns About, Property
   Management, Clients, Contact and Privacy to the shared base theme without
   changing their content, APIs or page templates. */

@media screen {
  .inner-site {
    --inner-rule: rgba(132, 96, 38, .26);
    --inner-muted: #6d675e;
    background: var(--cream-soft);
  }

  .inner-site main { overflow: clip; }
  .inner-site .section > .wrap { max-inline-size: 1180px; }

  /* A quieter architectural header shared by every non-home page. */
  .inner-site .page-hero {
    min-block-size: 410px;
    padding-block: 72px;
    isolation: isolate;
    border-block-end: 1px solid rgba(207, 161, 81, .35);
  }
  .inner-site .page-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    inline-size: min(54vw, 760px);
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent 0 74%, rgba(207,161,81,.08) 74% 74.15%, transparent 74.15%),
      linear-gradient(180deg, transparent 0 72%, rgba(207,161,81,.08) 72% 72.2%, transparent 72.2%);
  }
  .inner-site .page-hero .hero-media {
    width: 54%;
    opacity: .74;
    clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%);
  }
  .inner-site .page-hero .hero-media::after {
    background:
      linear-gradient(270deg, var(--charcoal-deep) 0%, rgba(32,33,35,.76) 18%, transparent 52%),
      linear-gradient(0deg, rgba(32,33,35,.34), transparent 68%);
  }
  .inner-site .page-hero .hero-media img {
    filter: saturate(.62) contrast(1.04) sepia(.1);
    transform: scale(1.025);
  }
  .inner-site .page-hero .hero-pattern {
    display: block;
    inset: 50% 52px auto auto;
    width: 440px;
    height: 440px;
    opacity: .16;
    transform: translateY(-50%);
  }
  .inner-site .page-hero__copy {
    max-inline-size: min(650px, calc(48vw - 24px));
    padding-inline-start: 48px;
  }
  .inner-site .page-hero .crumbs {
    margin-block-end: 24px;
    color: #c5beb2;
    font-size: .78rem;
  }
  .inner-site .page-hero h1 {
    max-inline-size: 13ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.7rem, 5vw, 5rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.035em;
  }
  .inner-site .page-hero .rule {
    width: 64px;
    margin-block: 24px 20px;
  }
  .inner-site .page-hero .lede {
    color: #d8d3ca;
    font-size: 1.02rem;
    line-height: 2;
  }

  /* Formal initial movement: short, directional and fully optional. */
  @media (prefers-reduced-motion: no-preference) {
    .js .inner-site .page-hero .hero-media img {
      animation: innerHeroImage 1.35s cubic-bezier(.22,1,.36,1) both;
    }
    .js .inner-site .page-hero .hero-pattern {
      animation: innerHeroLines 1.1s cubic-bezier(.22,1,.36,1) .08s both;
    }
    .js .inner-site .page-hero__copy > * {
      animation: innerHeroCopy .72s cubic-bezier(.22,1,.36,1) both;
    }
    .js .inner-site .page-hero__copy > :nth-child(2) { animation-delay: .08s; }
    .js .inner-site .page-hero__copy > :nth-child(3) { animation-delay: .15s; }
    .js .inner-site .page-hero__copy > :nth-child(4) { animation-delay: .22s; }
    @keyframes innerHeroImage {
      from { opacity: .55; transform: scale(1.09); }
      to { opacity: 1; transform: scale(1.025); }
    }
    @keyframes innerHeroLines {
      from { opacity: 0; transform: translateY(-50%) translateX(28px); }
      to { opacity: .16; transform: translateY(-50%) translateX(0); }
    }
    @keyframes innerHeroCopy {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }

  /* Shared editorial rhythm. */
  .inner-site .section { position: relative; }
  .inner-site .section + .section { border-block-start: 1px solid rgba(37,38,41,.07); }
  .inner-site .section-head { max-inline-size: 760px; }
  .inner-site .section-head--center { margin-inline: auto; }
  .inner-site .surface-cream .section-head .lede,
  .inner-site .surface-white .section-head .lede { color: var(--inner-muted); }
  .inner-site .surface-dark .section-head .lede,
  .inner-site .surface-dark--glow .section-head .lede,
  .inner-site .surface-mid .section-head .lede,
  .inner-site .surface-olive .section-head .lede { color: #cbc5bb; }
  .inner-site .card {
    transition: border-color .28s var(--ease), background-color .28s var(--ease),
                transform .28s var(--ease), box-shadow .28s var(--ease);
  }
  .inner-site .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

  /* About: the founding year becomes the visual anchor, not another card. */
  .page-about .about-intro { background: #f7f3ec; }
  .page-about .about-intro__grid {
    display: grid;
    grid-template-columns: minmax(220px,.62fr) minmax(0,1.38fr);
    gap: clamp(44px, 7vw, 100px);
    align-items: center;
  }
  .page-about .about-intro__year {
    display: grid;
    gap: 6px;
    padding-inline-start: 30px;
    border-inline-start: 2px solid var(--gold);
  }
  .page-about .about-intro__year strong {
    color: var(--gold-deep);
    font-family: var(--font-latin);
    font-size: clamp(4.5rem, 9vw, 8rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.055em;
  }
  .page-about .about-intro__year span {
    color: var(--inner-muted);
    font-size: .82rem;
    letter-spacing: .08em;
  }
  .page-about .about-intro .prose p {
    color: #403d38;
    font-size: clamp(1.05rem, 1.45vw, 1.22rem);
    line-height: 2.15;
  }
  .page-about .surface-dark .stats,
  .page-about .surface-dark--glow .stats {
    border-block: 1px solid rgba(255,255,255,.16);
  }
  .page-about .surface-dark .stat,
  .page-about .surface-dark--glow .stat {
    min-block-size: 148px;
    border: 0;
    border-inline-start: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    background: transparent;
  }
  .page-about .surface-dark .stat:last-child,
  .page-about .surface-dark--glow .stat:last-child { border-inline-start: 0; }
  .page-about .registration-card {
    min-block-size: 170px;
    justify-content: center;
    border: 0;
    border-block: 1px solid #cfc5b4;
    background: transparent;
  }
  .page-about .registration-card strong { font-weight: 500; letter-spacing: .035em; }
  .page-about .surface-olive { background: #262729; }
  .page-about .surface-olive .split { align-items: center; }
  .page-about .surface-olive .prose { color: #d8d3ca; }
  .page-about .goals { gap: 14px; }
  .page-about .goals li { border-radius: 0; border-inline-start: 2px solid var(--gold); }
  .page-about .performance-card {
    padding: 34px;
    border: 1px solid #d7cfc2;
    background: rgba(255,255,255,.62);
  }

  /* Property management: keep the long reference page calm and scannable. */
  .page-property-management #property-management .split { align-items: stretch; }
  .page-property-management #property-management .panel {
    display: grid;
    align-content: center;
    min-block-size: 280px;
    padding: 40px;
    border: 1px solid rgba(207,161,81,.34);
    border-inline-start-width: 3px;
    background: rgba(255,255,255,.035);
  }
  .page-property-management #property-management .panel h2 { color: #fff; }
  .page-property-management #property-management .panel p { color: #d8d3ca; }
  .page-property-management .subhead {
    padding-block-start: 12px;
    border-block-start: 1px solid rgba(255,255,255,.12);
  }
  .page-property-management .surface-cream .subhead,
  .page-property-management .surface-white .subhead {
    border-block-start-color: rgba(37,38,41,.12);
  }
  .page-property-management #pm-services-grid { gap: 12px; }
  .page-property-management #pm-services-grid .card { border-color: rgba(255,255,255,.1); }

  /* Clients: a gallery wall with restrained dividers and generous scale. */
  .page-clients .clients-page-section { background: #f7f4ee; }
  .page-clients .clients-page-section .wrap { max-inline-size: 1240px; }
  .page-clients .clients {
    grid-template-columns: repeat(5,minmax(0,1fr));
    border: 1px solid #d7d0c5;
    background: rgba(255,255,255,.38);
  }
  .page-clients .clients li {
    position: relative;
    min-block-size: 170px;
    padding: 30px;
    border-inline-start: 1px solid #ddd6ca;
    border-block-end: 1px solid #ddd6ca;
  }
  .page-clients .clients li:nth-child(5n) { border-inline-start: 0; }
  .page-clients .clients li:nth-last-child(-n+4) { border-block-end: 0; }
  .page-clients .clients li:hover {
    z-index: 1;
    background: #fff;
    box-shadow: inset 0 -3px 0 var(--gold);
  }
  .page-clients .clients .client__logo {
    max-block-size: min(var(--logo-h,74px),74px);
    transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
  }
  .page-clients .clients li:hover .client__logo { transform: scale(1.035); }

  /* Contact: a warm, high-trust form instead of one unbroken dark field. */
  .page-contact .contact-page-section {
    background: #ede8df;
    color: var(--ink);
  }
  .page-contact .contact-grid {
    grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
    gap: clamp(28px,5vw,72px);
  }
  .page-contact .contact-list {
    padding: 32px;
    border-block: 1px solid #c9bfaf;
    background: rgba(255,255,255,.28);
  }
  .page-contact .contact-item {
    padding-block: 18px;
    border-block-end: 1px solid rgba(37,38,41,.1);
  }
  .page-contact .contact-item:last-child { border-block-end: 0; }
  .page-contact .contact-item__badge {
    width: 44px;
    height: 44px;
    border: 1px solid var(--gold);
    border-radius: 2px;
    background: transparent;
    color: var(--gold-deep);
  }
  .page-contact .contact-item__label,
  .page-contact .field__hint { color: #625c53; }
  .page-contact .contact-item__value,
  .page-contact .field label { color: var(--ink); }
  .page-contact .form {
    padding: clamp(26px,4vw,48px);
    border: 1px solid #d2c9ba;
    border-block-start: 3px solid var(--gold);
    background: #f8f6f1;
    box-shadow: 0 18px 48px rgba(45,40,32,.08);
  }
  .page-contact .field input:not([type="checkbox"]),
  .page-contact .field select,
  .page-contact .field textarea {
    color: var(--ink);
    border-color: #cfc7ba;
    background: #fff;
  }
  .page-contact .field input:not([type="checkbox"]):focus,
  .page-contact .field select:focus,
  .page-contact .field textarea:focus {
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 3px rgba(207,161,81,.14);
  }
  .page-contact .form .btn--secondary {
    color: var(--ink);
    border-color: #8d8578;
  }
  .page-contact .form .req,
  .page-contact .form .link-gold { color: #76531e; }
  .page-contact .form__summary-t { color: var(--ink); }

  /* Privacy: a true reading layout with local navigation. */
  .page-privacy .privacy-page-section { background: #f7f3ec; }
  .page-privacy .privacy-layout {
    display: grid;
    grid-template-columns: minmax(220px,.38fr) minmax(0,1fr);
    gap: clamp(42px,7vw,100px);
    align-items: start;
  }
  .page-privacy .privacy-nav {
    position: sticky;
    top: 132px;
    display: grid;
    border-block-start: 2px solid var(--gold);
  }
  .page-privacy .privacy-nav__label {
    padding: 18px 0 12px;
    color: var(--gold-deep);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
  }
  .page-privacy .privacy-nav a {
    padding: 12px 0;
    border-block-end: 1px solid rgba(37,38,41,.1);
    color: #5f5951;
    font-size: .88rem;
    transition: color .2s var(--ease), padding-inline-start .2s var(--ease);
  }
  .page-privacy .privacy-nav a:hover,
  .page-privacy .privacy-nav a:focus-visible {
    color: var(--gold-deep);
    padding-inline-start: 8px;
  }
  .page-privacy .privacy-document { max-inline-size: 760px; }
  .page-privacy .privacy-document h2 {
    scroll-margin-top: 150px;
    margin-block: 52px 14px;
    padding-block-start: 28px;
    border-block-start: 1px solid #d7cebf;
    color: var(--ink);
    font-size: clamp(1.45rem,2.6vw,2.15rem);
  }
  .page-privacy .privacy-document h2:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border: 0;
  }
  .page-privacy .privacy-document p { color: #5b554d; line-height: 2.05; }
  .page-privacy .privacy-document__updated {
    margin-block-start: 52px;
    padding: 18px 22px;
    border-inline-start: 3px solid var(--gold);
    background: #eee8dd;
  }

  /* One rounded-card language across every inner-page component. */
  .inner-site .card,
  .inner-site .panel,
  .inner-site .stat,
  .inner-site .quote,
  .inner-site .performance-card > ul li,
  .inner-site .table-wrap,
  .page-contact .contact-list,
  .page-contact .form,
  .page-privacy .privacy-document__updated {
    border-radius: var(--radius-card);
  }
  .page-about .goals li { border-radius: 12px; }
  .page-about .surface-dark .stats,
  .page-about .surface-dark--glow .stats {
    gap: 12px;
    border: 0;
  }
  .page-about .surface-dark .stat,
  .page-about .surface-dark--glow .stat {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.025);
  }
  .page-about .surface-dark .stat:last-child,
  .page-about .surface-dark--glow .stat:last-child { border: 1px solid rgba(255,255,255,.12); }
  .page-clients .clients {
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .page-clients .clients li,
  .page-clients .clients li:nth-child(5n),
  .page-clients .clients li:nth-last-child(-n+4) {
    border: 1px solid #ddd6ca;
    border-radius: var(--radius-card);
    background: rgba(255,255,255,.5);
  }

  @media (max-width: 900px) {
    .inner-site .page-hero { min-block-size: 330px; padding-block: 52px; }
    .inner-site .page-hero .hero-media { width: 100%; opacity: .5; clip-path: none; }
    .inner-site .page-hero .hero-media::after {
      background: linear-gradient(90deg,rgba(32,33,35,.9),rgba(32,33,35,.58)),
                  linear-gradient(0deg,rgba(32,33,35,.7),transparent);
    }
    .inner-site .page-hero .hero-pattern { inset-inline-end: -80px; opacity: .1; }
    .inner-site .page-hero__copy { max-inline-size: 680px; padding-inline-start: 0; }
    .inner-site .page-hero h1 { font-size: clamp(2.45rem,8vw,4.25rem); }
    .page-about .about-intro__grid,
    .page-contact .contact-grid,
    .page-privacy .privacy-layout { grid-template-columns: 1fr; }
    .page-about .about-intro__year { max-inline-size: 320px; }
    .page-clients .clients { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .page-clients .clients li:nth-child(5n) { border-inline-start: 1px solid #ddd6ca; }
    .page-clients .clients li:nth-child(3n) { border-inline-start: 0; }
    .page-clients .clients li:nth-last-child(-n+4) { border-block-end: 1px solid #ddd6ca; }
    .page-clients .clients li:nth-last-child(-n+1) { border-block-end: 0; }
    .page-privacy .privacy-nav { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
    .page-privacy .privacy-nav__label { grid-column: 1 / -1; }
  }

  @media (max-width: 600px) {
    .inner-site .page-hero { min-block-size: 300px; padding-block: 42px; }
    .inner-site .page-hero > .wrap { inline-size: calc(100% - 40px); }
    .inner-site .page-hero h1 { font-size: clamp(2.1rem,10vw,3.15rem); }
    .inner-site .page-hero .lede { font-size: .92rem; }
    .page-about .about-intro__year strong { font-size: 4.7rem; }
    .page-about .surface-dark .stats,
    .page-about .surface-dark--glow .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .page-about .surface-dark .stat:nth-child(2),
    .page-about .surface-dark--glow .stat:nth-child(2),
    .page-about .surface-dark .stat:nth-child(4),
    .page-about .surface-dark--glow .stat:nth-child(4) { border-inline-start: 0; }
    .page-clients .clients { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .page-clients .clients li { min-block-size: 132px; padding: 18px; }
    .page-clients .clients li:nth-child(3n) { border-inline-start: 1px solid #ddd6ca; }
    .page-clients .clients li:nth-child(2n) { border-inline-start: 0; }
    .page-contact .contact-list,
    .page-contact .form { padding: 22px; }
    .page-contact .form__row { grid-template-columns: 1fr; }
    .page-contact .form .btn-row { display: grid; }
    .page-contact .form .btn { width: 100%; }
    .page-privacy .privacy-nav { grid-template-columns: 1fr; }
  }
}

/* Property-management card interaction module.
   Scope: .pm-card-motion hooks emitted only by the property-management page.
   Removing this file restores static cards without affecting content or APIs. */

.pm-card-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-self: start;
  block-size: auto;
  cursor: default;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1),
              border-color .32s ease,
              box-shadow .42s cubic-bezier(.22, 1, .36, 1);
}

/* A separate surface layer makes every original card palette interpolate to
   the exact same brand-gold expansion state. */
.pm-card-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--grad-gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s ease;
}
.pm-card-motion::after { z-index: 0; }
.pm-card-motion > * { position: relative; z-index: 1; }
.pm-card-motion h3,
.pm-card-motion .titled__t,
.pm-card-motion .feature__icon,
.pm-card-motion .numbered-badge {
  transition: color .28s ease, border-color .28s ease,
              background-color .28s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
}

/* Natural-height disclosure: 0fr -> 1fr works for a paragraph or a paragraph
   plus a feature list, without hard-coded Arabic line heights. */
.pm-card__details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-8px);
  margin-block-start: -8px;
  transition: grid-template-rows .46s cubic-bezier(.22, 1, .36, 1),
              opacity .24s ease,
              transform .4s cubic-bezier(.22, 1, .36, 1),
              margin-block-start .4s cubic-bezier(.22, 1, .36, 1);
}
.pm-card__details-inner {
  min-block-size: 0;
  overflow: hidden;
}
.pm-card__details-inner > :first-child { margin-block-start: 0; }
.pm-card__details-inner > :last-child { margin-block-end: 0; }

.pm-card-motion:is(:hover, :focus-visible) {
  z-index: 2;
  transform: translateY(-7px);
  border-color: var(--gold-light);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .24), 0 0 0 1px var(--gold-a18);
  color: var(--ink-a86);
  outline: none;
}
.pm-card-motion:is(:hover, :focus-visible)::before { opacity: 1; }
.pm-card-motion:is(:hover, :focus-visible) h3,
.pm-card-motion:is(:hover, :focus-visible) .titled__t {
  color: var(--ink);
  border-block-end-color: rgba(31, 31, 31, .38);
}
.pm-card-motion:is(:hover, :focus-visible) .feature__icon,
.pm-card-motion:is(:hover, :focus-visible) .numbered-badge {
  color: var(--ink);
  border-color: rgba(31, 31, 31, .38);
  transform: translateY(-2px);
}
.pm-card-motion:is(:hover, :focus-visible) .pm-card__details {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  margin-block-start: 12px;
}
.pm-card-motion:is(:hover, :focus-visible) .pm-card__details p,
.pm-card-motion:is(:hover, :focus-visible) .pm-card__details li { color: var(--ink-a86); }

/* The 20 numbered service cards share one calm dark resting state, then use
   the common gold state above. */
#pm-services-grid .svc--expandable {
  min-block-size: 142px;
  background: var(--grad-card);
  border-color: var(--white-a06);
  color: var(--white-a86);
}
#pm-services-grid .svc--expandable h3 {
  margin-block-end: 0;
  color: var(--gold-light);
}
#pm-services-grid .svc--expandable .svc__num {
  color: var(--gold);
  opacity: 1;
  transition: color .28s ease, opacity .28s ease;
}
#pm-services-grid .svc--expandable .svc__icon {
  color: var(--white-a72);
  opacity: 1;
  transition: color .28s ease, opacity .28s ease,
              transform .42s cubic-bezier(.22, 1, .36, 1);
}
#pm-services-grid .svc--expandable:is(:hover, :focus-visible) .svc__num {
  color: var(--ink);
  opacity: .58;
}
#pm-services-grid .svc--expandable:is(:hover, :focus-visible) .svc__icon {
  color: var(--ink);
  opacity: .72;
  transform: translateY(-2px) scale(1.06);
}

/* Cards without secondary copy still receive the same formal gold response. */
.pm-card-motion--summary:is(:hover, :focus-visible) { min-block-size: inherit; }

/* Touch users cannot hover, so no information is hidden from them. */
@media (hover: none), (pointer: coarse) {
  .pm-card-motion { min-block-size: 0; }
  .pm-card__details {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    margin-block-start: 12px;
  }
  #pm-services-grid .pm-card__details p { color: var(--white-a86); }
}

@media (prefers-reduced-motion: reduce) {
  .pm-card-motion,
  .pm-card-motion::before,
  .pm-card-motion h3,
  .pm-card-motion .titled__t,
  .pm-card-motion .feature__icon,
  .pm-card-motion .numbered-badge,
  .pm-card-motion .svc__num,
  .pm-card-motion .svc__icon,
  .pm-card__details { transition: none; }
}

/* Static hero and independent six-second brand introduction. */
.estate-hero {
  --estate-black: var(--olive-charcoal, #2f302a);
  --estate-gold: var(--gold, #cfa151);
  --estate-gutter: clamp(24px, 5vw, 96px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  height: clamp(650px, calc(100svh - 110px), 800px);
  background: var(--estate-black);
  color: var(--cream-soft, #faf4ea);
  text-align: right;
}
.estate-hero--splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  max-height: none;
}
.estate-hero:not(.estate-hero--splash) .estate-hero__brand { display: none; }
html.estate-intro-active,
html.estate-intro-active body { overflow: hidden; }
.estate-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  block-size: 84px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(243, 231, 211, .11));
  border-block-end: 1px solid var(--gold-a28, rgba(207, 161, 81, .28));
}
.estate-hero__scene, .estate-hero__shade, .estate-hero__photo, .estate-hero__architecture {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.estate-hero__scene { z-index: -3; transform-origin: 70% 65%; }
.estate-hero__photo {
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
  filter: grayscale(.28) sepia(.14) saturate(.68) brightness(.8) contrast(1.04);
}
.estate-hero__architecture { transform: scaleX(-1); }
.estate-hero__architecture { opacity: 0; color: var(--estate-gold); }
.estate-hero__architecture path { vector-effect: non-scaling-stroke; }
.estate-hero__shade {
  z-index: -2;
  background:
    linear-gradient(270deg, rgba(47,48,42,.88) 0%, rgba(47,48,42,.6) 35%, rgba(47,48,42,.12) 72%),
    linear-gradient(0deg, rgba(47,48,42,.64), transparent 34%);
}
.estate-hero__brand {
  position: absolute; right: var(--estate-gutter); top: 30px;
  width: clamp(176px, 15vw, 220px); display: block;
  transform-origin: center; z-index: 2;
}
.estate-hero__logo { width: 100%; overflow: visible; }
.estate-hero__logo image { max-width: none; }
.estate-hero__logo-construction path { vector-effect: non-scaling-stroke; }
.estate-hero__logo-guide { opacity: .34; }
.estate-hero__sheen { opacity: 0; }
.estate-hero__signature {
  display: block; width: 86%; height: 1px; margin: 9px auto 0;
  background: linear-gradient(270deg, transparent, var(--estate-gold) 15%, var(--estate-gold) 85%, transparent);
  transform-origin: center;
}
.estate-hero__draft {
  position: absolute; width: min(760px, 94%); left: 50%; top: 50%;
  transform: translate(-50%, -50%); opacity: 0; color: var(--estate-gold); pointer-events: none;
}
.estate-hero__draft svg { width: 100%; }
.estate-hero__copy {
  position: absolute;
  right: var(--estate-gutter);
  top: 28%;
  width: min(680px, 58%);
  padding-inline-start: 26px;
  border-inline-start: 1px solid var(--gold-a45, rgba(207, 161, 81, .45));
  direction: rtl;
}
.estate-hero__eyebrow {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 5px 12px;
  border: 1px solid var(--gold-a28, rgba(207, 161, 81, .28));
  border-radius: var(--radius-chip, 8px);
  background: var(--gold-a08, rgba(207, 161, 81, .08));
  color: var(--estate-gold);
  font: 600 12px/1.7 var(--font-body, sans-serif);
  letter-spacing: 0;
}
.estate-hero__copy h1 {
  font-family: var(--font-display, sans-serif); font-size: clamp(36px, 3.35vw, 54px);
  font-weight: 700; line-height: 1.34; letter-spacing: -.025em; color: var(--cream-soft, #faf4ea); margin: 0;
}
.estate-hero__copy h1 span { display: block; }
.estate-hero__headline-two { color: var(--gold-light, #d4a452); font-weight: 600; }
.estate-hero__support { max-width: 590px; margin-top: 18px; color: var(--white-a86, rgba(255,255,255,.86)); font: 400 15px/1.9 var(--font-body, sans-serif); }
.estate-hero__cta {
  gap: 16px;
  margin-top: 22px;
  min-block-size: 48px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn, 6px);
  background: var(--gold, #cfa151);
  color: var(--ink, #1f1f1f);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  font: 700 .95rem/1.2 var(--font-display, sans-serif);
  letter-spacing: 0;
}
.estate-hero__cta span { font-size: 22px; line-height: 1; transition: transform .3s; }
.estate-hero__cta:hover { background: var(--gold-deep, #b98a3c); color: var(--ink, #1f1f1f); }
.estate-hero__cta:hover span { transform: translateX(-5px); }
.estate-hero a:focus-visible, .estate-hero button:focus-visible { outline: 2px solid var(--estate-gold); outline-offset: 6px; }
/* Prevent the final composition flashing before the optional controller starts. */
.estate-intro-pending .estate-hero__photo,
.estate-intro-pending .estate-hero__brand,
.estate-intro-pending .estate-hero__copy { opacity: 0; }
html.estate-intro-active .site-header { background: var(--olive-charcoal, #2f302a); box-shadow: none; }
html.estate-intro-landing .site-header { z-index: 220; }
html.estate-intro-active .fab,
html.estate-intro-active .fab--call { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .estate-hero { min-height: 640px; height: calc(100svh - 90px); max-height: 820px; }
  .estate-hero__brand { width: 172px; top: 22px; }
  .estate-hero__copy { top: auto; bottom: 130px; width: calc(100% - 48px); padding-inline-start: 18px; }
  .estate-hero__copy h1 { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.3; }
  .estate-hero__support { max-width: 330px; font-size: 14px; margin-top: 18px; }
  .estate-hero__eyebrow { font-size: 10px; margin-bottom: 18px; }
  .estate-hero__shade { background: linear-gradient(270deg, rgba(47,48,42,.72), rgba(47,48,42,.18)), linear-gradient(0deg, rgba(47,48,42,.96), transparent 86%); }
}
@media (prefers-reduced-motion: reduce) {
  .estate-hero *, .estate-hero *::before { animation: none !important; transition: none !important; }
  .estate-intro-pending .estate-hero__photo, .estate-intro-pending .estate-hero__brand, .estate-intro-pending .estate-hero__copy { opacity: 1; }
}
.estate-splash { position:fixed; inset:0; z-index:1000; background:#333333; }
.estate-splash__lockup { position:absolute; display:block; aspect-ratio:486/173; transform-origin:0 0; }
.estate-splash__lockup .estate-hero__logo { display:block; width:100%; height:100%; }
.estate-splash__lockup .estate-hero__signature { display:none; }
.estate-splash__line { position:absolute; left:calc(50% - 60px); top:calc(50% + 45px); width:120px; height:1px; background:#cfa151; }