/* =====================================================================
   HajraMilano.com — design system (Brand Guide 2026, v1.0)
   Palette: cream leads, ink for text and the mark, gold as a hairline
   accent, terracotta for the primary call to action, lake sparingly for
   links, stone for captions. Type: Cormorant Garamond (display),
   Marcellus (tracked headings, nav, wordmark), Manrope (body/UI),
   Amiri (Arabic/Urdu), Noto Sans Devanagari (Hindi).
   ===================================================================== */

/* ---------- Fonts (self-hosted, subset) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-italic-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-italic-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/marcellus-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/marcellus-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/amiri-arabic.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/amiri-bold-arabic.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/noto-sans-devanagari.woff2") format("woff2");
  unicode-range:
    U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC,
    U+A830-A839, U+A8E0-A8FF;
}

/* ---------- Tokens ---------- */
:root {
  /* brand palette (Brand Guide p.7) */
  --hm-ink: #1f2a24;
  --hm-cream: #f6f1e7;
  --hm-gold: #c9a24c;
  --hm-terracotta: #b5573a;
  --hm-lake: #2f5d7c;
  --hm-stone: #7a6f5e;

  --cream: #f6f1e7; /* page ground */
  --paper: #fbf8f2; /* cards, forms */
  --sand: #ece5d6; /* pressed / hover surface */
  --ink: #1f2a24; /* text, the mark */
  --ink-2: #3a453e; /* secondary text */
  --stone: #7a6f5e; /* decorative grey (not for small text) */
  --stone-text: #6b6152; /* captions, AA on cream */
  --gold: #c9a24c; /* hairlines, star lines */
  --gold-text: #7e6427; /* gold as text on cream (AA 4.99:1) */
  --gold-2: #d9bc77; /* gold on ink */
  --terracotta: #b5573a; /* primary call to action only */
  --terracotta-2: #a24d33; /* hover / AA text pairing */
  --lake: #2f5d7c; /* links, info (sparingly) */
  --lake-2: #8fb6ce; /* lake on ink */
  --line: rgba(31, 42, 36, 0.14);
  --line-strong: rgba(31, 42, 36, 0.3);
  --line-gold: rgba(201, 162, 76, 0.45);
  --line-on-dark: rgba(246, 241, 231, 0.18);
  --glass: rgba(246, 241, 231, 0.78);
  --tint: rgba(31, 42, 36, 0.05);
  --tint-2: rgba(31, 42, 36, 0.11);
  --card-hover: #fffdf9;
  --dark: #1f2a24; /* "reversed" panels: ink in both themes */
  --dark-2: #182119;
  --accent-word: var(--ink);
  --ok: #2e6b4a;
  --err: #a23e2c;
  color-scheme: light;

  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --caps: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --arabic: "Amiri", "Noto Naskh Arabic", "Segoe UI", serif;
  --devanagari: "Noto Sans Devanagari", "Segoe UI", sans-serif;

  /* type scale on a 17px base */
  --t-1: 0.8rem;
  --t0: 1rem;
  --t1: 1.2rem;
  --t2: 1.55rem;
  --t3: 2rem;
  --t4: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
  --t5: clamp(2.6rem, 1.5rem + 3.6vw, 4.5rem);
  --t6: clamp(3.4rem, 1.4rem + 7.5vw, 8rem);
  --track: 0.18em; /* Marcellus tracking (+200 in the guide) */

  --ease-lux: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.55s;

  --r-s: 2px;
  --r-m: 4px;
  --r-l: 6px; /* the brand is square-cornered; radii stay tiny */
  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --measure: 64ch;
  --nav-h: 88px;
  --shadow-1:
    0 1px 2px rgba(31, 42, 36, 0.05), 0 8px 24px -12px rgba(31, 42, 36, 0.18);
  --shadow-2:
    0 2px 6px rgba(31, 42, 36, 0.05), 0 30px 50px -24px rgba(31, 42, 36, 0.32);
}

/* Dark theme: ink ground, cream text, gold brightens. Reversed panels go a shade deeper. */
:is([data-theme="dark"],[data-theme="black"]) {
  --cream: #1f2a24;
  --paper: #27332c;
  --sand: #303d35;
  --ink: #f6f1e7;
  --ink-2: #d8d3c8;
  --stone: #9e9484;
  --stone-text: #b3a996;
  --gold-text: #d9bc77;
  --line: rgba(246, 241, 231, 0.13);
  --line-strong: rgba(246, 241, 231, 0.28);
  --line-gold: rgba(217, 188, 119, 0.45);
  --glass: rgba(31, 42, 36, 0.78);
  --tint: rgba(246, 241, 231, 0.06);
  --tint-2: rgba(246, 241, 231, 0.13);
  --card-hover: #2c3931;
  --dark: #141c17;
  --dark-2: #0f1512;
  --lake: #8fb6ce;
  --terracotta-2: #c4643f;
  --shadow-1:
    0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-2:
    0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 50px -24px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}
:is([data-theme="dark"],[data-theme="black"]) .hero-media video,
:is([data-theme="dark"],[data-theme="black"]) .hero-media img {
  filter: saturate(0.85) brightness(0.9);
}
:is([data-theme="dark"],[data-theme="black"]) .hero-skyline {
  opacity: 0.4;
}
html.theme-switching * {
  transition: none !important;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 106.25%;
}
@media (max-width: 640px) {
  html {
    font-size: 100%;
  }
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t0);
  line-height: 1.62;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection {
  background: var(--gold-2);
  color: #1f2a24;
}
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--t5);
}
h2 {
  font-size: var(--t4);
}
h3 {
  font-size: var(--t2);
  line-height: 1.12;
}
h4 {
  font-size: var(--t1);
  line-height: 1.25;
}
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 400;
}
p {
  margin: 0;
}
.lede {
  font-size: var(--t1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
  font-weight: 400;
}
.measure {
  max-width: var(--measure);
  text-wrap: pretty;
}
.muted {
  color: var(--stone-text);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
  border-radius: var(--r-s);
  z-index: 400;
}
.skip:focus {
  top: 1rem;
}

.wrap {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.wrap-wide {
  width: min(1440px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
section {
  position: relative;
}
.section {
  padding-block: clamp(4rem, 9vw, 8rem);
}
.section-tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.on-dark {
  background: var(--dark);
  color: #F6F1E7;
}
.on-dark .lede,
.on-dark .muted {
  color: rgba(246, 241, 231, 0.74);
}
.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: #f6f1e7;
}
.on-paper {
  background: var(--paper);
}

/* Tracked label: Marcellus, uppercase, +200 tracking, with the brand hairline */
.caps {
  font-family: var(--caps);
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--gold-text);
  font-family: var(--caps);
  font-size: 0.78rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--gold);
}
.on-dark .kicker {
  color: var(--gold-2);
}
.on-dark .kicker::before {
  background: var(--gold-2);
}
.kicker.no-rule::before {
  display: none;
}
.head {
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2rem, 5vw, 3.6rem);
}
.head-row {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 5vw, 3.6rem);
}
@media (min-width: 900px) {
  .head-row {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
.head-row .lede {
  justify-self: start;
}
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.rule-gold {
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 0;
  opacity: 0.7;
}

/* ---------- Buttons (square-cornered, tracked caps) ---------- */
.btn {
  --bg: var(--ink);
  --fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--r-s);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--caps);
  font-size: 0.78rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.45s var(--ease-lux),
    background 0.3s,
    color 0.3s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120px 60px at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.16),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.btn:hover::after {
  opacity: 1;
}
.btn:active {
  transform: translateY(0) scale(0.985);
}
.btn-primary {
  --bg: var(--terracotta);
  --fg: #f6f1e7;
  font-weight: 400;
}
.btn-primary:hover {
  --bg: var(--terracotta-2);
}
.btn-gold {
  --bg: var(--gold);
  --fg: #1f2a24;
}
.btn-ghost {
  --bg: transparent;
  --fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn-ghost:hover {
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.on-dark .btn-ghost {
  --fg: #F6F1E7;
  box-shadow: inset 0 0 0 1px rgba(246, 241, 231, 0.4);
}
.on-dark .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px #f6f1e7;
}
.on-dark .btn:not(.btn-primary):not(.btn-ghost):not(.btn-gold) {
  --bg: #f6f1e7;
  --fg: #1f2a24;
}
.btn-cream {
  --bg: #f6f1e7;
  --fg: #1f2a24;
}
.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
.link {
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.4s var(--ease-lux);
}
.link:hover {
  background-size: 30% 1px;
}
.link-caps {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
}
.link-caps::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease-lux);
}
.link-caps:hover::after {
  width: 2.6rem;
}
.on-dark .link-caps {
  color: #F6F1E7;
}
a.lake {
  color: var(--lake);
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition:
    height 0.5s var(--ease-lux),
    background 0.4s,
    box-shadow 0.4s,
    transform 0.5s var(--ease-lux);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.3) blur(18px);
  backdrop-filter: saturate(1.3) blur(18px);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition:
    opacity 0.45s,
    border-color 0.45s;
}
.header.is-scrolled {
  height: 66px;
}
.header.is-scrolled::before {
  opacity: 1;
  border-color: var(--line);
}
.header.is-hidden {
  transform: translateY(-100%);
}
.header.menu-open {
  transform: none;
}
.header .wrap-wide {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  z-index: 3;
}
.brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
  transition: transform 0.5s var(--ease-lux);
  overflow: visible;
  color: var(--ink);
}
.brand-mark .star-a,
.brand-mark .star-b,
.brand-mark .mark-hm,
.brand-mark .mark-diamond {
  transform-origin: 80px 80px;
  transform-box: view-box;
}
.brand-mark .star-a,
.brand-mark .star-b {
  transition: transform 1.1s var(--ease-lux);
}
.brand-mark .mark-hm {
  transition: transform 0.9s var(--ease-spring);
}
.brand-mark .mark-diamond {
  transition: transform 1.1s var(--ease-lux);
  fill: currentColor;
}
.brand-mark .mark-hm path {
  fill: var(--cream);
}
.brand-mark .star-a,
.brand-mark .star-b {
  stroke-width: 3;
}
.brand:hover .brand-mark .star-b,
.brand:focus-visible .brand-mark .star-b,
.brand:hover .brand-mark .star-a,
.brand:focus-visible .brand-mark .star-a {
  transform: rotate(45deg);
}
.brand:hover .brand-mark .mark-hm {
  transform: translateY(-1.5px) scale(1.05);
}
.brand:hover .brand-mark .block-hm {
  transform: translateY(-2px);
}
.brand-mark .block-hm {
  transition: transform 0.6s var(--ease-spring);
}
.brand-mark.is-flipping {
  transition: none;
}
.header.is-scrolled .brand-mark {
  transform: scale(0.85);
}
.brand-name {
  font-family: var(--caps);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.brand-name.is-block {
  font-family: var(--sans);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 0.95;
}
.brand-name.is-block b {
  display: block;
  font-weight: 800;
}
html.preloading .brand-mark {
  opacity: 0;
}
.nav {
  order: 2;
}
.tools {
  order: 3;
  margin-left: 0.4rem;
}
.nav-toggle {
  order: 4;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
}
.nav > a,
.nav .has-menu > button {
  font-family: var(--caps);
  font-size: 0.76rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  position: relative;
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.nav > a::after,
.nav .has-menu > button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.1rem;
  height: 1px;
  background: var(--gold);
  transition: right 0.4s var(--ease-lux);
}
.nav > a:hover::after,
.nav > a[aria-current="page"]::after,
.nav .has-menu > button:hover::after,
.nav .has-menu > button[aria-expanded="true"]::after,
.nav .has-menu.is-current > button::after {
  right: 0;
}
.nav > a[aria-current="page"],
.nav .has-menu.is-current > button {
  color: var(--ink);
}
.nav .has-menu > button svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  transition: transform 0.4s var(--ease-lux);
}
.nav .has-menu > button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.nav a.btn {
  min-height: 2.6rem;
  padding: 0.6rem 1.15rem;
  color: var(--fg);
  font-size: 0.72rem;
}
.nav a.btn::after {
  display: none;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  place-items: center;
  position: relative;
  z-index: 3;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.4px;
  background: var(--ink);
  margin: 5px auto;
  transition:
    transform 0.4s var(--ease-lux),
    opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.4px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.4px) rotate(-45deg);
}

/* Mega-menu: one panel per category */
.has-menu {
  position: relative;
}
.mega {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translate(-50%, -6px);
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  border-radius: var(--r-m);
  padding: 1.4rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.4rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.28s,
    transform 0.5s var(--ease-lux),
    visibility 0s 0.3s;
  z-index: 5;
}
.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--gold);
}
.mega[data-tone="lake"]::before {
  background: var(--lake);
}
.mega[data-tone="terracotta"]::before {
  background: var(--terracotta);
}
.has-menu.is-open .mega {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.28s,
    transform 0.5s var(--ease-lux);
}
.mega-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-list a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 600;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.35s var(--ease-lux);
}
.mega-list a:hover,
.mega-list a:focus-visible {
  background: var(--tint);
  color: var(--ink);
  transform: translateX(2px);
}
.mega-list .ico {
  width: 34px;
  height: 34px;
  color: var(--gold-text);
}
.mega-list a[aria-current="page"] {
  background: var(--tint);
  color: var(--ink);
}
.mega-aside {
  border-left: 1px solid var(--line);
  padding-left: 1.4rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
.mega-aside h4 {
  font-family: var(--serif);
  font-size: var(--t2);
  font-weight: 500;
  line-height: 1.1;
}
.mega-aside p {
  font-size: var(--t-1);
  color: var(--stone-text);
  text-wrap: pretty;
}
.mega-aside .link-caps {
  margin-top: 0.3rem;
}
.mega-all {
  grid-column: 1/-1;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-1);
  color: var(--stone-text);
}

@media (max-width: 1020px) {
  .nav-toggle {
    display: grid;
  }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: calc(var(--nav-h) + 0.5rem) var(--gutter) 3rem;
    gap: 0.2rem;
    overflow: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.6s var(--ease-lux);
    visibility: hidden;
  }
  .nav.is-open {
    clip-path: inset(0);
    visibility: visible;
  }
  .nav > a,
  .nav .has-menu > button {
    font-family: var(--serif);
    font-size: var(--t3);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    width: 100%;
    justify-content: space-between;
  }
  .nav > a::after,
  .nav .has-menu > button::after {
    display: none;
  }
  .nav .has-menu > button svg {
    width: 16px;
    height: 16px;
  }
  .has-menu {
    width: 100%;
  }
  .mega {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0.4rem 0 1rem;
    grid-template-columns: 1fr;
    background: transparent;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mega::before {
    display: none;
  }
  .has-menu.is-open .mega {
    display: grid;
    transform: none;
  }
  .mega-list {
    grid-template-columns: 1fr;
  }
  .mega-list a {
    font-size: var(--t0);
    padding: 0.6rem 0.2rem;
  }
  .mega-aside {
    display: none;
  }
  .mega-all {
    border: 0;
    padding: 0.4rem 0.2rem 0;
    flex-direction: column;
    gap: 0.5rem;
  }
  .nav .btn {
    font-family: var(--caps);
    font-size: 0.78rem;
    margin-top: 1.4rem;
    min-height: 3.1rem;
    padding: 0.85rem 1.5rem;
    width: 100%;
  }
  .nav-langs {
    margin-top: auto;
    padding-top: 2rem;
  }
}
.nav-langs {
  font-size: var(--t-1);
  color: var(--stone-text);
}
@media (min-width: 1021px) {
  .nav-langs {
    display: none;
  }
}

/* ---------- Header tools: theme + motion ---------- */
.tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}
.tool {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: transparent;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.45s var(--ease-spring);
}
.tool:hover {
  background: var(--tint);
  color: var(--ink);
}
.tool:active {
  transform: scale(0.92);
}
.tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool .sun,
.tool .moon {
  transition:
    transform 0.6s var(--ease-lux),
    opacity 0.3s;
  transform-origin: center;
}
.tool .moon {
  position: absolute;
  opacity: 0;
  transform: rotate(-40deg) scale(0.6);
}
:is([data-theme="dark"],[data-theme="black"]) .tool .sun {
  opacity: 0;
  transform: rotate(40deg) scale(0.6);
}
:is([data-theme="dark"],[data-theme="black"]) .tool .moon {
  opacity: 1;
  transform: none;
}
.tool-motion[aria-expanded="true"] {
  background: var(--tint-2);
  color: var(--ink);
}
.motion-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 15rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  padding: 0.5rem;
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.4s var(--ease-lux);
  z-index: 5;
}
.motion-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.motion-menu .mm-title {
  font-family: var(--caps);
  font-size: 0.66rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--stone-text);
  padding: 0.4rem 0.7rem 0.2rem;
}
.motion-menu button {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-s);
  width: 100%;
  color: var(--ink-2);
  transition: background 0.25s;
}
.motion-menu button:hover {
  background: var(--tint);
}
.motion-menu button b {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
.motion-menu button small {
  display: block;
  font-size: var(--t-1);
  color: var(--stone-text);
  line-height: 1.35;
}
.motion-menu button::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.motion-menu button[aria-checked="true"]::before {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--paper);
}
@media (max-width: 1020px) {
  .header .wrap-wide {
    gap: 0.4rem;
  }
  .tools {
    margin-left: auto;
    z-index: 3;
  }
  .motion-menu {
    right: -3rem;
  }
}

/* View-transition circular wipe for the theme change */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 3%));
  animation: themeWipe 0.9s var(--ease-lux) forwards;
}
@keyframes themeWipe {
  to {
    clip-path: circle(160vmax at var(--vt-x, 90%) var(--vt-y, 3%));
  }
}

/* ---------- Scroll-assembled logo particles (side gutters) ---------- */
.particles {
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(150px, 13vw, 240px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s;
}
.particles.left {
  left: 0;
}
.particles.right {
  right: 0;
}
.particles canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.particles.is-on {
  opacity: 1;
}
@media (max-width: 1279px) {
  .particles {
    display: none;
  }
}

/* ---------- Logo intro (once per session, Cinematic only): the star draws in the centre, then the
   mark travels to its seat in the header (left in LTR, right in RTL) while the veil clears ---------- */
.preloader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--cream);
  place-items: center;
  overflow: hidden;
}
html.has-preloader .preloader {
  display: grid;
}
html.has-preloader.preloading {
  overflow: hidden;
}
.preloader .veil {
  position: absolute;
  inset: 0;
  background: var(--cream);
}
.preloader .intro-mark {
  position: relative;
  z-index: 1;
  width: min(48vw, 240px);
  height: auto;
  overflow: visible;
  color: var(--ink);
}
.preloader .intro-mark .star-a,
.preloader .intro-mark .star-b {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}
.preloader .intro-mark .mark-diamond,
.preloader .intro-mark .mark-hm,
.preloader .intro-mark .block-bg,
.preloader .intro-mark .block-hm {
  opacity: 0;
}
.preloader .cap {
  position: absolute;
  left: 50%;
  top: calc(50% + min(24vw, 120px) + 1.8rem);
  transform: translateX(-50%);
  font-family: var(--caps);
  font-size: 0.95rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  z-index: 1;
}
.preloader .cap small {
  display: block;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--gold-text);
  margin-top: 0.5rem;
}

/* ---------- Wax-seal footer ---------- */
.seal {
  position: relative;
  display: inline-block;
  max-width: 200px;
}
.seal .lockup {
  max-width: none;
}
.seal-dust {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.seal-dust i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-2);
  opacity: 0;
  transform: translate(-50%, -50%);
}
.seal.is-stamped .lockup svg {
  filter: drop-shadow(0 0 18px rgba(217, 188, 119, 0.22));
}

/* ---------- Motion levels (html[data-motion]) ---------- */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
[data-motion="off"] .reveal,
[data-motion="calm"] .reveal {
  opacity: 1;
  transform: none;
}
[data-motion="off"] .card {
  transform: none !important;
}
[data-motion="off"] .hub-lines line {
  stroke-dashoffset: 0;
}
[data-motion="off"] .fab-btn::before,
[data-motion="off"] .fab-btn::after,
[data-motion="calm"] .fab-btn::after {
  display: none;
}
[data-motion="off"] .hero-skyline,
[data-motion="calm"] .hero-skyline {
  transform: none !important;
}
[data-motion="off"] .particles,
[data-motion="calm"] .particles {
  display: none;
}
[data-motion="off"] .hub-core::after {
  display: none;
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: clip;
  isolation: isolate;
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(2rem, 6vw, 5rem);
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--gold-text);
  font-family: var(--caps);
  font-size: 0.76rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.hero-eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--gold);
}
.hero h1 {
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.hero h1 .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.hero h1 .line > span {
  display: inline-block;
  will-change: transform;
}
.kinetic {
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-style: italic;
  font-weight: 400;
  color: var(--accent-word);
  height: 1em;
  position: relative;
}
.kinetic .word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  will-change: transform, opacity;
}
.kinetic .word[aria-hidden="true"] {
  opacity: 0;
}
.kinetic .dot {
  color: var(--gold);
}
.hero-sub {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 46ch;
  font-size: var(--t1);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
  font-weight: 400;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2.2rem;
  color: var(--stone-text);
  font-size: var(--t-1);
}
.hero-meta a {
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 700;
}
.hero-meta a:hover {
  color: var(--gold-text);
}

.hero-media {
  position: relative;
  z-index: 1;
  aspect-ratio: 16/10;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--dark);
  justify-self: end;
  width: 100%;
  align-self: end;
  outline: 1px solid var(--line-gold);
  outline-offset: 8px;
}
@media (min-width: 980px) {
  .hero-media {
    width: min(100%, 600px);
    margin-top: 18vh;
  }
}
.hero-media video,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.9) contrast(1.02);
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(31, 42, 36, 0) 40%,
    rgba(31, 42, 36, 0.66) 100%
  );
  pointer-events: none;
}
.hero-media-caption {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.3rem;
  color: #f6f1e7;
  font-size: var(--t-1);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  z-index: 2;
}
.hero-media-caption strong {
  display: block;
  font-family: var(--serif);
  font-size: var(--t1);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hero-media-caption .play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(246, 241, 231, 0.14);
  border: 1px solid rgba(246, 241, 231, 0.5);
  display: grid;
  place-items: center;
  color: #f6f1e7;
  flex: none;
  transition:
    background 0.3s,
    transform 0.4s var(--ease-spring);
}
.hero-media-caption .play:hover {
  background: var(--gold);
  color: #1f2a24;
  transform: scale(1.06);
}
.hero-media-caption .play svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

/* Milan/Como silhouettes: parallax hairline drawings behind the hero */
.hero-skyline {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--gold);
  opacity: 0.5;
  will-change: transform;
}
.hero-skyline.duomo {
  right: -4vw;
  top: 12vh;
  width: min(62vw, 880px);
}
.hero-skyline.como {
  left: -2vw;
  bottom: -1vh;
  width: min(120vw, 1500px);
  opacity: 0.65;
}
.hero-skyline svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.hero-skyline path,
.hero-skyline line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hero-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: auto auto -20% -10%;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 162, 76, 0.14),
    transparent 62%
  );
  filter: blur(20px);
}
@media (max-width: 980px) {
  .hero-skyline.duomo {
    right: -30vw;
    top: 4vh;
    width: 120vw;
    opacity: 0.16;
  }
  .hero-skyline.como {
    opacity: 0.4;
  }
}

/* ---------- Pillars (three areas of life) ---------- */
.pillars {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}
.pillar {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.6s var(--ease-lux);
}
.pillar[data-tone="lake"]::before {
  background: var(--lake);
}
.pillar[data-tone="terracotta"]::before {
  background: var(--terracotta);
}
.pillar:hover::before {
  width: 100%;
}
.pillar h3 {
  font-size: var(--t2);
}
.pillar p {
  color: var(--ink-2);
  max-width: 36ch;
  text-wrap: pretty;
}
.pillar .link-caps {
  justify-self: start;
  margin-top: 0.3rem;
}
.pillar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.pillar-list span {
  font-size: var(--t-1);
  color: var(--stone-text);
}
.pillar-list span:not(:last-child)::after {
  content: ",";
}
.pillar .pillar-num {
  font-family: var(--caps);
  font-size: 0.7rem;
  letter-spacing: var(--track);
  color: var(--gold-text);
}

/* ---------- Filter tabs ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: var(--r-m);
  background: var(--tint);
  width: max-content;
  max-width: 100%;
  position: relative;
}
.tabs [role="tab"] {
  position: relative;
  padding: 0.6rem 1rem;
  border-radius: var(--r-s);
  font-family: var(--caps);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s;
  z-index: 1;
  white-space: nowrap;
}
.tabs [role="tab"][aria-selected="true"] {
  color: var(--cream);
}
.tabs .tab-pill {
  position: absolute;
  top: 0.3rem;
  left: 0;
  height: calc(100% - 0.6rem);
  border-radius: var(--r-s);
  background: var(--ink);
  z-index: 0;
  transition:
    left 0.55s var(--ease-lux),
    width 0.55s var(--ease-lux);
}
.tabs [role="tab"] small {
  font-family: var(--sans);
  font-weight: 700;
  opacity: 0.7;
  margin-left: 0.35rem;
  font-size: 0.85em;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .tabs .tab-pill {
    display: none;
  }
  .tabs [role="tab"][aria-selected="true"] {
    background: var(--ink);
  }
}

/* ---------- Bento grid ---------- */
.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: minmax(190px, auto);
  margin-top: 2rem;
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}
@media (min-width: 1100px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    grid-auto-rows: minmax(220px, auto);
  }
}
.card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--paper);
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition:
    box-shadow 0.5s var(--ease-lux),
    border-color 0.5s,
    background 0.5s;
  will-change: transform;
  transform-style: preserve-3d;
}
.card[hidden] {
  display: none;
}
.card.is-wide {
  grid-column: span 2;
}
.card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--gold);
  background: var(--card-hover);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px 160px at var(--mx, 50%) var(--my, 50%),
    rgba(201, 162, 76, 0.12),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover::before {
  opacity: 1;
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
}
.card-cat {
  font-family: var(--caps);
  font-size: 0.66rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--stone-text);
}
.ico {
  width: 52px;
  height: 52px;
  color: var(--gold-text);
  flex: none;
  transform: translateZ(20px);
}
.ico svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ico [stroke] {
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.ico * {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.7s var(--ease-lux),
    opacity 0.5s;
}
.card h3 {
  font-size: var(--t2);
  font-weight: 500;
  line-height: 1.1;
  transform: translateZ(12px);
}
.card.is-wide h3 {
  font-size: var(--t3);
}
.card p {
  color: var(--ink-2);
  font-size: var(--t0);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 40ch;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--gold-text);
  font-family: var(--caps);
  font-size: 0.7rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.card-foot .go {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition:
    background 0.35s,
    color 0.35s,
    border-color 0.35s,
    transform 0.45s var(--ease-spring);
}
.card-foot .go svg {
  width: 14px;
  height: 14px;
}
.card:hover .card-foot .go {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: translateX(3px);
}
.card.on-dark {
  background: var(--dark);
  border-color: transparent;
  color: #f6f1e7;
}
.card.on-dark:hover {
  background: var(--dark-2);
  border-color: var(--gold);
}
.card.on-dark p,
.card.on-dark .card-cat {
  color: rgba(246, 241, 231, 0.72);
}
.card.on-dark .ico,
.card.on-dark .card-foot {
  color: var(--gold-2);
}
.card.on-dark .card-foot .go {
  color: #f6f1e7;
  border-color: var(--line-on-dark);
}
.card.on-dark:hover .card-foot .go {
  background: var(--gold);
  color: #1f2a24;
  border-color: var(--gold);
}
.card.on-gold {
  background: var(--gold);
  border-color: transparent;
  color: #1f2a24;
}
.card.on-gold:hover {
  background: #d0ab57;
}
.card.on-gold .ico,
.card.on-gold .card-cat,
.card.on-gold .card-foot,
.card.on-gold .card-foot .go {
  color: #1f2a24;
  border-color: rgba(31, 42, 36, 0.35);
}
.card.on-gold p {
  color: rgba(31, 42, 36, 0.8);
}
.card.on-gold:hover .card-foot .go {
  background: #1f2a24;
  color: var(--gold);
  border-color: #1f2a24;
}

/* icon micro-morphs (hover) */
.card:hover .ico .page-1,
.svc-hero:hover .ico .page-1 {
  transform: rotateY(-160deg);
  transform-origin: left center;
}
.card:hover .ico .page-2 {
  transform: rotateY(-150deg);
  transform-origin: left center;
  transition-delay: 0.08s;
}
.card:hover .ico .needle {
  transform: rotate(310deg);
}
.card:hover .ico .key {
  transform: translateY(-6px) rotate(-12deg);
}
.card:hover .ico .bld-win {
  opacity: 1;
}
.card:hover .ico .bld {
  transform: translateY(-3px);
}
.card:hover .ico .steam {
  transform: translateY(-5px);
  opacity: 0.25;
}
.card:hover .ico .wheel {
  transform: rotate(60deg);
}
.card:hover .ico .tassel {
  transform: rotate(-24deg);
  transform-origin: top center;
}
.card:hover .ico .plane {
  transform: translate(4px, -5px) rotate(-10deg);
}
.card:hover .ico .bubble-b {
  transform: translate(3px, -3px);
}
.card:hover .ico .bubble-a {
  transform: translate(-3px, 3px);
}
.card:hover .ico .glass-l {
  transform: rotate(-12deg);
  transform-origin: bottom center;
}
.card:hover .ico .glass-r {
  transform: rotate(12deg);
  transform-origin: bottom center;
}
.card:hover .ico .shutter {
  transform: scale(0.55);
}
.card:hover .ico .wave {
  opacity: 1;
  transform: scale(1.15);
}
.card:hover .ico .star {
  transform: rotate(72deg) scale(1.15);
}
.card:hover .ico .letter {
  transform: translateY(-3px);
}
.ico .bld-win {
  opacity: 0;
}
.ico .wave {
  opacity: 0.35;
}

/* ---------- Language hub ---------- */
.hub {
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .hub {
    grid-template-columns: 0.9fr 1.1fr;
  }
}
.hub-stage {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
}
.hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hub-lines line {
  stroke: var(--gold-2);
  stroke-width: 1;
  opacity: 0.55;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.hub-lines circle {
  fill: var(--gold-2);
}
.hub-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: #f6f1e7;
}
.hub-core svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hub-core::after {
  content: "";
  position: absolute;
  inset: -6%;
  border: 1px solid rgba(217, 188, 119, 0.35);
  transform: rotate(45deg);
  animation: hubRing 4s var(--ease-lux) infinite;
}
@keyframes hubRing {
  0% {
    transform: rotate(45deg) scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: rotate(45deg) scale(1.35);
    opacity: 0;
  }
}
.pill {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 0.05rem;
  justify-items: center;
  text-align: center;
  padding: 0.75rem 1.15rem;
  border-radius: var(--r-s);
  background: rgba(246, 241, 231, 0.05);
  border: 1px solid rgba(217, 188, 119, 0.4);
  color: #f6f1e7;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 0 rgba(217, 188, 119, 0);
  transition:
    box-shadow 0.6s var(--ease-lux),
    background 0.4s,
    border-color 0.4s;
  cursor: default;
  will-change: transform;
}
.pill:hover,
.pill:focus-visible {
  background: rgba(217, 188, 119, 0.14);
  border-color: var(--gold-2);
  box-shadow: 0 0 42px -6px rgba(217, 188, 119, 0.6);
}
.pill b {
  font-weight: 500;
  font-size: var(--t1);
  line-height: 1.2;
}
.pill small {
  font-family: var(--caps);
  font-size: 0.62rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold-2);
}
.pill.ar b {
  font-family: var(--arabic);
  font-size: 1.4rem;
}
.pill.ur b {
  font-family: var(--arabic);
  font-size: 1.4rem;
}
.pill.hi b {
  font-family: var(--devanagari);
}
.pill.it b,
.pill.en b {
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}
.hub-copy ul {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.hub-copy li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  color: rgba(246, 241, 231, 0.85);
}
.hub-copy li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gold-2);
  margin-top: 0.6em;
  transform: rotate(45deg);
}

/* ---------- Film + process ---------- */
.film {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) {
  .film {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
}
.film-frame {
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--dark-2);
  aspect-ratio: 16/9;
  box-shadow: var(--shadow-2);
  outline: 1px solid var(--line-gold);
  outline-offset: 8px;
}
.film-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-frame .film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f6f1e7;
  background: linear-gradient(
    180deg,
    rgba(31, 42, 36, 0.1),
    rgba(31, 42, 36, 0.45)
  );
  transition: opacity 0.4s;
}
.film-frame .film-play span {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(246, 241, 231, 0.12);
  border: 1px solid rgba(246, 241, 231, 0.6);
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 0.5s var(--ease-spring),
    background 0.3s;
}
.film-frame .film-play:hover span {
  transform: scale(1.08);
  background: var(--gold);
  color: #1f2a24;
  border-color: var(--gold);
}
.film-frame .film-play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}
.film-frame.is-playing .film-play {
  opacity: 0;
  pointer-events: none;
}
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  gap: 0;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child {
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: var(--t2);
  color: var(--gold-text);
  line-height: 1.1;
}
.steps h4 {
  font-size: var(--t1);
  font-family: var(--sans);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.steps p {
  color: var(--ink-2);
  max-width: 44ch;
}
.on-dark .steps li {
  border-color: var(--line-on-dark);
}
.on-dark .steps p {
  color: rgba(246, 241, 231, 0.74);
}
.on-dark .steps li::before {
  color: var(--gold-2);
}

/* ---------- About ---------- */
.about {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) {
  .about {
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
  }
}
.about-mark {
  position: relative;
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
.about-mark svg {
  width: 64%;
  height: auto;
}
.about-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line-gold);
  pointer-events: none;
}
.about h2 {
  font-size: var(--t4);
}
.about .stack {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.4rem;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
.facts {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .facts {
    grid-template-columns: repeat(4, 1fr);
  }
}
.fact {
  border-top: 1px solid var(--line-strong);
  padding-top: 0.8rem;
}
.fact b {
  display: block;
  font-family: var(--serif);
  font-size: var(--t3);
  font-weight: 500;
  line-height: 1;
}
.fact span {
  font-family: var(--caps);
  font-size: 0.66rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--stone-text);
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .contact {
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 6vw, 6rem);
  }
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  gap: 1.2rem;
}
.contact-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  align-items: start;
}
.contact-list .ic {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-on-dark);
  display: grid;
  place-items: center;
  color: var(--gold-2);
}
.contact-list .ic svg {
  width: 18px;
  height: 18px;
}
.contact-list b {
  display: block;
  font-weight: 700;
  color: #f6f1e7;
}
.contact-list a {
  color: rgba(246, 241, 231, 0.85);
  text-decoration: none;
}
.contact-list a:hover {
  color: var(--gold-2);
}
.contact-list span {
  color: rgba(246, 241, 231, 0.66);
  font-size: var(--t-1);
}

/* Social profiles (footer column and contact block) */
.footer-follow {
  margin-top: 1.4rem;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  border: 1px solid rgba(201, 162, 76, 0.4);
  font-family: var(--caps);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.25s, color 0.25s, transform 0.25s;
}
.footer-social-link svg {
  width: 16px;
  height: 16px;
  color: var(--gold-2);
}
.footer-social-link:hover {
  border-color: var(--gold-2);
  transform: translateY(-2px);
}
.contact-social {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(246, 241, 231, 0.85);
  font-size: inherit;
}
.contact-social-link svg {
  width: 15px;
  height: 15px;
  color: var(--gold-2);
}

/* Forms: floating labels, tactile focus */
.form {
  display: grid;
  gap: 1.1rem;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.form-row {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  position: relative;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 1.45rem 0 0.55rem;
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A6F5E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
}
.field label {
  position: absolute;
  left: 0;
  top: 1.25rem;
  color: var(--stone-text);
  pointer-events: none;
  transition:
    transform 0.35s var(--ease-lux),
    color 0.3s;
  transform-origin: left top;
}
.field input:focus ~ label,
.field textarea:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field select ~ label,
.field.is-filled label {
  transform: translateY(-1.15rem) scale(0.78);
  color: var(--gold-text);
}
.field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-lux);
}
.field:focus-within::after {
  transform: scaleX(1);
}
.field .hint {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-1);
  color: var(--err);
  min-height: 1.2em;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.field.is-invalid .hint {
  opacity: 1;
  transform: none;
}
.field.is-invalid input,
.field.is-invalid textarea {
  border-color: var(--err);
}
.field.is-invalid label {
  color: var(--err);
}
.field.is-valid::before {
  content: "";
  position: absolute;
  right: 0;
  top: 1.35rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E")
    center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E")
    center/70% no-repeat;
  animation: pop 0.5s var(--ease-spring) both;
}
@keyframes pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--t-1);
  color: var(--ink-2);
}
.consent input {
  margin-top: 0.3rem;
  accent-color: var(--gold-text);
  width: 16px;
  height: 16px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.form-actions .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.form-note {
  font-size: var(--t-1);
  color: var(--stone-text);
}
.form-status {
  font-size: var(--t-1);
  min-height: 1.4em;
}
.form-status.is-err {
  color: var(--err);
}
.honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* success overlay with drawn checkmark */
.success {
  position: absolute;
  inset: 0;
  background: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  z-index: 2;
}
.success.is-on {
  opacity: 1;
  pointer-events: auto;
}
.success .check {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.2rem;
}
.success .check circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.success .check path {
  fill: none;
  stroke: var(--ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.success.is-on .check circle {
  animation: draw 0.9s var(--ease-lux) forwards;
}
.success.is-on .check path {
  animation: draw 0.6s 0.5s var(--ease-lux) forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.success h3 {
  font-size: var(--t3);
  margin-bottom: 0.6rem;
}
.success p {
  color: var(--ink-2);
  max-width: 38ch;
  margin-inline: auto;
}
.success .btn {
  margin-top: 1.4rem;
}

/* ---------- Email subscription band ---------- */
.subscribe {
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  background: var(--paper);
}
.subscribe .wrap {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .subscribe .wrap {
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 6vw, 5rem);
  }
}
.subscribe h2 {
  font-size: var(--t3);
}
.subscribe h2 em {
  display: block;
}
.subscribe p {
  color: var(--ink-2);
  max-width: 46ch;
  margin-top: 0.6rem;
  text-wrap: pretty;
}
.sub-form {
  position: relative;
  display: grid;
  gap: 0.8rem;
}
.sub-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.sub-row .field {
  flex: 1 1 220px;
  margin: 0;
}
.sub-row .field input {
  padding: 1.3rem 0 0.5rem;
}
.sub-row .btn {
  align-self: end;
  min-height: 3rem;
}
.sub-form .fine {
  font-size: var(--t-1);
  color: var(--stone-text);
}
.sub-form .success {
  border-radius: var(--r-s);
}
.sub-form .form-status {
  min-height: 0;
}
.on-dark .subscribe {
  background: transparent;
  border-color: var(--line-on-dark);
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--cream);
  padding: 0.8rem 1.2rem;
  border-radius: var(--r-s);
  box-shadow: var(--shadow-2);
  font-size: var(--t-1);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-lux);
  z-index: 250;
  max-width: min(92vw, 40ch);
  text-align: center;
  border-left: 3px solid var(--gold);
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Booking modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1rem;
  visibility: hidden;
}
.modal.is-open {
  visibility: visible;
}
.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(24, 33, 25, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.45s;
}
.modal.is-open .modal-bg {
  opacity: 1;
}
.modal-card {
  position: relative;
  width: min(960px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.6s var(--ease-spring),
    opacity 0.35s;
}
.modal.is-open .modal-card {
  transform: none;
  opacity: 1;
}
.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  z-index: 2;
  transition:
    background 0.3s,
    transform 0.4s var(--ease-spring);
}
.modal-close:hover {
  background: var(--tint-2);
  transform: rotate(90deg);
}
.modal-close svg {
  width: 16px;
  height: 16px;
}
.book {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .book {
    grid-template-columns: 1fr 1fr;
  }
}
.book-cal {
  padding: clamp(1.3rem, 3vw, 2.2rem);
  background: var(--dark);
  color: #f6f1e7;
}
.book-cal h3 {
  font-size: var(--t3);
  color: #f6f1e7;
}
.book-cal .lede {
  font-size: var(--t0);
  color: rgba(246, 241, 231, 0.75);
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.6rem 0 0.8rem;
}
.cal-head b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t1);
  letter-spacing: 0.02em;
}
.cal-nav {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-on-dark);
  display: grid;
  place-items: center;
  color: #f6f1e7;
  transition: background 0.3s;
}
.cal-nav:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cal-nav svg {
  width: 14px;
  height: 14px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  text-align: center;
}
.cal-grid .dow {
  font-family: var(--caps);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.55);
  padding: 0.4rem 0;
}
.cal-grid button {
  aspect-ratio: 1;
  border-radius: 50%;
  font-weight: 600;
  color: #f6f1e7;
  position: relative;
  transition:
    background 0.3s,
    transform 0.4s var(--ease-spring);
}
.cal-grid button:hover:not(:disabled) {
  background: rgba(217, 188, 119, 0.18);
  transform: scale(1.06);
}
.cal-grid button:disabled {
  color: rgba(246, 241, 231, 0.28);
  cursor: not-allowed;
}
.cal-grid button.is-today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-2);
  transform: translateX(-50%);
}
.cal-grid button[aria-pressed="true"] {
  background: var(--gold-2);
  color: #1f2a24;
}
.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.slots button {
  padding: 0.55rem 0.2rem;
  border: 1px solid var(--line-on-dark);
  font-size: var(--t-1);
  font-weight: 700;
  color: #f6f1e7;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.35s var(--ease-spring);
}
.slots button:hover {
  border-color: var(--gold-2);
  transform: translateY(-1px);
}
.slots button[aria-pressed="true"] {
  background: var(--gold-2);
  border-color: var(--gold-2);
  color: #1f2a24;
}
.slots-note {
  font-size: var(--t-1);
  color: rgba(246, 241, 231, 0.6);
  margin-top: 0.8rem;
}
.book-form {
  padding: clamp(1.3rem, 3vw, 2.2rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  position: relative;
}
.book-form .form {
  box-shadow: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.book-form h3 {
  font-size: var(--t2);
}
.book-summary {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--t-1);
  color: var(--stone-text);
  min-height: 1.5em;
}
.book-summary b {
  color: var(--ink);
  font-weight: 700;
  background: var(--sand);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-s);
}

/* ---------- Floating WhatsApp ---------- */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: #F6F1E7;
}
.fab-btn {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--dark);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-2);
  transition:
    transform 0.45s var(--ease-spring),
    background 0.3s;
  isolation: isolate;
  border: 1px solid rgba(217, 188, 119, 0.4);
}
.fab-btn svg {
  width: 26px;
  height: 26px;
  color: #f6f1e7;
  position: relative;
  z-index: 2;
}
.fab:hover .fab-btn {
  transform: scale(1.06);
  background: var(--dark-2);
}
.fab-btn::before,
.fab-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-2);
  animation: ripple 2.8s var(--ease-lux) infinite;
  z-index: 1;
}
.fab-btn::after {
  animation-delay: 1.4s;
}
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
.fab-label {
  background: var(--paper);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-s);
  font-size: var(--t-1);
  font-weight: 700;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity 0.4s,
    transform 0.5s var(--ease-lux);
  pointer-events: none;
}
.fab:hover .fab-label,
.fab:focus-visible .fab-label,
.fab.is-teasing .fab-label {
  opacity: 1;
  transform: none;
}
@media (max-width: 640px) {
  .fab {
    bottom: 1rem;
    right: 1rem;
  }
  .fab-label {
    display: none;
  }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--dark);
  color: rgba(246, 241, 231, 0.78);
  padding: clamp(3rem, 7vw, 5.5rem) 0 2rem;
  border-top: 1px solid rgba(201, 162, 76, 0.35);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}
.footer .lockup {
  max-width: 200px;
  color: #f6f1e7;
}
.footer .lockup svg {
  width: 100%;
  height: auto;
}
.footer h4 {
  font-family: var(--caps);
  font-size: 0.68rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 1rem;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.footer a {
  text-decoration: none;
  color: rgba(246, 241, 231, 0.78);
}
.footer a:hover {
  color: #f6f1e7;
}
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--t-1);
  color: rgba(246, 241, 231, 0.55);
}
.footer-bar a {
  color: inherit;
}
.footer-bar .domain {
  font-family: var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--gold-2);
}

/* ---------- Inner pages ---------- */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 7rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: clip;
}
.page-hero .wrap {
  display: grid;
  gap: 1.4rem;
}
.page-hero h1 {
  font-size: var(--t5);
  max-width: 20ch;
}
.page-hero .lede {
  max-width: 52ch;
}
.page-hero .hero-skyline {
  opacity: 0.35;
}
.page-hero .hero-skyline.duomo {
  top: -4vh;
  right: -8vw;
  width: min(56vw, 760px);
}
.breadcrumb {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: var(--caps);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-text);
}
.breadcrumb a {
  text-decoration: none;
  color: var(--stone-text);
}
.breadcrumb a:hover {
  color: var(--ink);
}
.breadcrumb span::before {
  content: "/";
  margin-right: 0.6rem;
  opacity: 0.5;
}
.on-dark .breadcrumb,
.on-dark .breadcrumb a {
  color: rgba(246, 241, 231, 0.6);
}
.on-dark .breadcrumb a:hover {
  color: #f6f1e7;
}

/* category badge with colour thread */
.badge {
  display: inline-flex;
  justify-self: start;
  width: max-content;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--caps);
  font-size: 0.66rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold-text);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-gold);
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
.badge[data-tone="lake"] {
  color: var(--lake);
  border-color: rgba(47, 93, 124, 0.4);
}
.badge[data-tone="lake"]::before {
  background: var(--lake);
}
.badge[data-tone="terracotta"] {
  color: var(--terracotta-2);
  border-color: rgba(181, 87, 58, 0.4);
}
.badge[data-tone="terracotta"]::before {
  background: var(--terracotta);
}
.on-dark .badge {
  color: var(--gold-2);
  border-color: rgba(217, 188, 119, 0.4);
}
.on-dark .badge[data-tone="lake"] {
  color: var(--lake-2);
}
.on-dark .badge[data-tone="terracotta"] {
  color: #e3906f;
}

/* Service page hero: copy left, branded panel (or owner photograph) right */
.svc-hero {
  padding-top: var(--nav-h);
  position: relative;
  overflow: clip;
}
.svc-hero .wrap-wide {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 980px) {
  .svc-hero .wrap-wide {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.svc-copy {
  display: grid;
  gap: 1.3rem;
  align-content: center;
  position: relative;
  z-index: 2;
}
.svc-copy h1 {
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.6rem);
  max-width: 14ch;
}
.svc-promise {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  line-height: 1.25;
  color: var(--ink-2);
  max-width: 30ch;
  text-wrap: pretty;
}
.svc-promise em {
  display: block;
  font-style: italic;
  color: var(--ink);
}
.svc-panel {
  position: relative;
  min-height: min(60vh, 520px);
  background: var(--dark);
  color: #f6f1e7;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-m);
  outline: 1px solid var(--line-gold);
  outline-offset: 8px;
}
.svc-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--gold);
}
.svc-panel[data-tone="lake"]::before {
  background: var(--lake);
}
.svc-panel[data-tone="terracotta"]::before {
  background: var(--terracotta);
}
.svc-panel .panel-mark {
  width: min(46%, 240px);
  height: auto;
  overflow: visible;
  position: relative;
  z-index: 1;
  color: #f6f1e7;
}
.svc-panel .panel-ico {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 64px;
  height: 64px;
  color: var(--gold-2);
  opacity: 0.9;
}
.svc-panel .panel-ico [stroke] {
  stroke: currentColor;
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc-panel .panel-cap {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  font-family: var(--caps);
  font-size: 0.62rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold-2);
}
.svc-panel .panel-lines {
  position: absolute;
  inset: 0;
  color: var(--gold);
  opacity: 0.22;
}
.svc-panel .panel-lines svg {
  width: 100%;
  height: 100%;
}
.svc-panel .panel-lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.svc-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-panel.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(31, 42, 36, 0) 50%,
    rgba(31, 42, 36, 0.55)
  );
  pointer-events: none;
}

.svc-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .svc-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  }
}
.svc-main {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.svc-block {
  display: grid;
  gap: 1.2rem;
}
.svc-block h2 {
  font-size: var(--t3);
}
.svc-block .prose {
  max-width: var(--measure);
}
.svc-included {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .svc-included {
    grid-template-columns: 1fr 1fr;
  }
}
.svc-included li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
}
.svc-included li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-top: 0.55em;
}
.svc-aside {
  display: grid;
  gap: 1.2rem;
  align-content: start;
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
}
.aside-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 1.4rem;
  display: grid;
  gap: 0.9rem;
}
.aside-card h3 {
  font-size: var(--t2);
}
.aside-card p {
  color: var(--ink-2);
  font-size: var(--t-1);
}
.aside-card .btn {
  width: 100%;
}
.aside-card.on-dark {
  border-color: transparent;
}
.aside-card.on-dark p {
  color: rgba(246, 241, 231, 0.74);
}
.aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.1rem;
}
.aside-list a {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.4rem;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-1);
  font-weight: 600;
  transition:
    color 0.25s,
    padding-left 0.35s var(--ease-lux);
}
.aside-list a:hover {
  color: var(--ink);
  padding-left: 0.7rem;
}
.aside-list .ico {
  width: 30px;
  height: 30px;
  color: var(--gold-text);
}
.aside-list svg.go {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pricing {
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

.detail-list {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .detail-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.detail {
  display: grid;
  gap: 1rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
  position: relative;
}
.detail:target {
  border-color: var(--gold);
}
.detail .ico {
  width: 52px;
  height: 52px;
}
.detail h3 {
  font-size: var(--t2);
}
.detail h3 a {
  text-decoration: none;
}
.detail p {
  color: var(--ink-2);
  text-wrap: pretty;
}
.detail ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-2);
  display: grid;
  gap: 0.35rem;
}
.detail .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
  align-items: center;
}
.detail-for {
  font-size: var(--t-1);
  color: var(--stone-text);
}
.detail-for b {
  color: var(--ink-2);
  font-weight: 700;
}

.faq {
  display: grid;
  gap: 0;
  margin-top: 2rem;
  max-width: 760px;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t2);
  line-height: 1.15;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 1px solid var(--gold-text);
  border-bottom: 1px solid var(--gold-text);
  transform: rotate(45deg);
  transition: transform 0.45s var(--ease-lux);
  margin-right: 0.4rem;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq .faq-body {
  padding: 0 0 1.4rem;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

.cta-band {
  background: var(--dark);
  color: #f6f1e7;
  border-top: 1px solid rgba(201, 162, 76, 0.35);
}
.cta-band h2 {
  color: #f6f1e7;
}
.cta-band .btn-ghost {
  --fg: #f6f1e7;
  box-shadow: inset 0 0 0 1px rgba(246, 241, 231, 0.4);
}
.cta-band .wrap {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cta-band .wrap {
    grid-template-columns: 1.3fr auto;
  }
}
.cta-band h2 {
  font-size: var(--t4);
}
.cta-band .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.cta-band p {
  color: rgba(246, 241, 231, 0.74);
  max-width: 48ch;
  margin-top: 0.6rem;
}

.prose {
  max-width: var(--measure);
  display: grid;
  gap: 1rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose h2 {
  font-size: var(--t3);
  color: var(--ink);
  margin-top: 1.4rem;
}
.prose h3 {
  font-size: var(--t1);
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.6rem;
}
.prose ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
}
.prose a {
  color: var(--lake);
}

.notfound {
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--nav-h);
}
.notfound h1 {
  font-size: var(--t6);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-word);
}

/* ---------- Reveal system (JS adds .reveal; GSAP animates) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
}
.no-js .reveal,
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- RTL hooks (for the future Arabic/Urdu editions) ---------- */
[dir="rtl"] .brand {
  margin-right: 0;
  margin-left: auto;
}
[dir="rtl"] .kicker::before {
  order: 2;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero h1 .line > span {
    transform: none !important;
  }
  .card {
    transform: none !important;
  }
  .hub-lines line {
    stroke-dashoffset: 0;
  }
  .fab-btn::before,
  .fab-btn::after {
    display: none;
  }
}
@media print {
  .header,
  .fab,
  .modal,
  .hero-media,
  .hero-skyline,
  .particles,
  .preloader,
  .toast {
    display: none !important;
  }
  body {
    background: #fff;
  }
}

/* =====================================================================
   v1.1 — dark green theme, labelled header tools, wide Services menu,
   galleries, packages, sub-services, arabesque ornament
   ===================================================================== */
:is([data-theme="dark"],[data-theme="black"]){--cream:#13302A;--paper:#1A3A33;--sand:#22463D;--ink:#FFFFFF;--ink-2:#E6ECE8;--stone:#9FB3AA;--stone-text:#BFCCC5;--gold-text:#E3C77F;--gold-2:#E3C77F;--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.32);--line-gold:rgba(227,199,127,.45);--glass:rgba(19,48,42,.82);--tint:rgba(255,255,255,.06);--tint-2:rgba(255,255,255,.14);--card-hover:#214A41;--dark:#0C231D;--dark-2:#071811;--lake:#9FC6DD;--terracotta-2:#C4643F}
:is([data-theme="dark"],[data-theme="black"]) .brand-mark .mark-hm path{fill:#13302A}
:is([data-theme="dark"],[data-theme="black"]) .card.on-gold{color:#1F2A24}

/* header: brand · nav · labelled tools · CTA */
.header .wrap-wide{gap:.8rem}
.brand{order:1}
.nav{order:2}
.tools{order:3;margin-left:.2rem;padding-left:.8rem;border-left:1px solid var(--line);gap:.35rem}
.header-cta{order:4;min-height:2.6rem;padding:.6rem 1.15rem;font-size:.72rem}
.nav-toggle{order:5}
.nav a.nav-cta-mobile{display:none}
.tool{width:auto;height:36px;border-radius:999px;padding:0 .8rem 0 .6rem;gap:.45rem;border:1px solid var(--line);display:inline-flex;align-items:center}
.tool:hover{border-color:var(--line-strong)}
.tool svg{width:16px;height:16px;flex:none}
.tool .sun,.tool .moon{position:static;opacity:1;transform:none;transition:none}
.tool .moon{display:none}
:is([data-theme="dark"],[data-theme="black"]) .tool .sun{display:none;opacity:0}
:is([data-theme="dark"],[data-theme="black"]) .tool .moon{display:block;opacity:1}
.tool-label{font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);line-height:1}
.tool:hover .tool-label{color:var(--ink)}
.motion-menu{min-width:19rem;right:auto;left:0}
.motion-menu button b{font-family:var(--caps);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
@media (max-width:1020px){
  .header-cta{display:none}
  .nav a.nav-cta-mobile{display:inline-flex}
  .tools{border:0;padding:0;margin-left:auto}
  .motion-menu{left:auto;right:0}
}
@media (max-width:640px){.tool-label{display:none} .tool{padding:0;width:36px;justify-content:center}}

/* wide Services menu: six areas in columns */
.has-menu.is-wide{position:static}
.mega-wide{width:min(1180px,calc(100vw - 2*var(--gutter)));padding:1.6rem 1.6rem 1.1rem;grid-template-columns:1fr;gap:1.1rem}
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem 1.4rem}
@media (max-width:1240px){.mega-cols{grid-template-columns:repeat(3,1fr)}}
.mega-col{border-top:2px solid var(--gold);padding-top:.8rem;display:grid;gap:.3rem;align-content:start}
.mega-col[data-tone="lake"]{border-color:var(--lake)} .mega-col[data-tone="terracotta"]{border-color:var(--terracotta)}
.mega-head{display:flex;gap:.6rem;align-items:baseline;font-family:var(--serif);font-size:1.22rem;font-weight:500;text-decoration:none;color:var(--ink);line-height:1.15}
.mega-head:hover{color:var(--gold-text)} .mega-head[aria-current="page"]{color:var(--gold-text)}
.mega-num{font-family:var(--caps);font-size:.6rem;letter-spacing:.18em;color:var(--gold-text)}
.mega-wide .mega-list{grid-template-columns:1fr;gap:.1rem}
.mega-wide .mega-list a{padding:.42rem .5rem;font-size:.88rem}
.mega-wide .mega-list .ico{width:30px;height:30px}
@media (max-width:1020px){
  .mega-cols{grid-template-columns:1fr;gap:1rem}
  .mega-wide{padding:.4rem 0 1rem}
  .mega-head{font-size:1.15rem}
}

/* arabesque ornament (replaces the Duomo drawing) */
.hero-skyline.arabesque{right:-2vw;top:7vh;width:min(56vw,800px);opacity:.6}
.hero-skyline.arabesque .art rect,.hero-skyline.arabesque .art path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.hero-skyline.arabesque .art circle{fill:currentColor;stroke:none}
.hero-skyline.arabesque mask rect{fill:url(#arFade);stroke:none}
.page-hero .hero-skyline.arabesque{top:-8vh;right:-8vw;width:min(50vw,700px);opacity:.34}
@media (max-width:980px){.hero-skyline.arabesque{right:-30vw;top:3vh;width:120vw;opacity:.16}}
:is([data-theme="dark"],[data-theme="black"]) .hero-skyline{opacity:.45}

/* six areas grid */
.pillars-6{gap:2.2rem clamp(1.5rem,3vw,3rem)}
.detail-list.is-single{grid-template-columns:1fr;max-width:820px}

/* footer lockup a touch larger */
.footer .lockup{max-width:240px}
.seal{max-width:240px}

/* scrolling photo galleries */
.gallery-section{overflow:clip}
.gallery-nav{display:flex;gap:.5rem;justify-self:end;align-self:end}
.gal-btn{width:46px;height:46px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease-spring)}
.gal-btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)} .gal-btn:active{transform:scale(.94)}
.gal-btn svg{width:16px;height:16px}
.gallery{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:max(var(--gutter),calc((100vw - 1240px)/2));cursor:grab;outline-offset:-2px}
.gallery::-webkit-scrollbar{display:none}
.gallery.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.gallery-track{display:flex;gap:1.25rem;width:max-content;padding:.25rem 0 .6rem}
.gal-card{flex:0 0 min(440px,82vw);scroll-snap-align:start;margin:0;display:grid;gap:.9rem;align-content:start}
.gal-img{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-m);background:var(--sand);outline:1px solid var(--line-gold);outline-offset:6px}
.gal-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-lux);will-change:transform;-webkit-user-drag:none}
.gal-card:hover .gal-img img{transform:scale(1.05)}
.gal-num{position:absolute;left:.8rem;top:.8rem;font-family:var(--caps);font-size:.64rem;letter-spacing:.18em;color:#F6F1E7;background:rgba(31,42,36,.6);padding:.35rem .6rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gal-area{font-family:var(--caps);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.gal-card h3{font-size:var(--t2);margin-top:.15rem} .gal-card figcaption p{color:var(--ink-2);font-size:var(--t-1);max-width:42ch;margin-top:.35rem;text-wrap:pretty}
.credits{margin-top:1.4rem;font-size:.74rem;color:var(--stone-text)}
.credits summary{cursor:pointer;font-family:var(--caps);letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;list-style:none;display:inline-flex;gap:.5rem;align-items:center}
.credits summary::before{content:"+";color:var(--gold-text)} .credits[open] summary::before{content:"–"}
.credits p{margin-top:.6rem;line-height:1.6} .credits a{color:var(--lake)}
:is([data-theme="dark"],[data-theme="black"]) .gal-num{background:rgba(7,24,17,.6)}

/* tour packages */
.packages{background:var(--paper);border-top:1px solid var(--line-gold)}
.pkg-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:760px){.pkg-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.pkg-grid{grid-template-columns:repeat(4,1fr);gap:1rem}}
.pkg{display:grid;gap:.85rem;align-content:start;padding:1.5rem 1.4rem;background:var(--cream);border:1px solid var(--line);position:relative;transition:border-color .4s,box-shadow .5s var(--ease-lux)}
.pkg:hover{border-color:var(--gold);box-shadow:var(--shadow-1)}
.pkg-top{display:flex;justify-content:space-between;align-items:flex-start}
.pkg-num{font-family:var(--serif);font-size:3.4rem;line-height:.8;color:var(--gold);font-weight:400}
.pkg h3{font-size:var(--t2)}
.pkg-tag{color:var(--ink-2);font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.3;text-wrap:pretty}
.pkg-plan{margin:0;display:grid;gap:.6rem;border-top:1px solid var(--line);padding-top:.9rem}
.pkg-plan div{display:grid;grid-template-columns:5rem 1fr;gap:.6rem}
.pkg-plan dt{font-family:var(--caps);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);padding-top:.3rem}
.pkg-plan dd{margin:0;font-size:var(--t-1);color:var(--ink-2);line-height:1.5}
.pkg h4{font-family:var(--caps);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-text);margin-top:.5rem;font-weight:400}
.pkg ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem;font-size:var(--t-1);color:var(--ink-2)}
.pkg-inc li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start}
.pkg-inc li::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);margin-top:.5em}
.pkg-opt li{color:var(--stone-text);display:grid;grid-template-columns:auto 1fr;gap:.5rem}
.pkg-opt li::before{content:"+";color:var(--gold-text);font-weight:700}
.pkg-foot{display:grid;gap:.7rem;margin-top:auto;padding-top:.6rem;justify-items:start} .pkg-foot .btn{width:100%}

/* digital marketing sub-services */
.subsvc{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:.4rem}
@media (min-width:640px){.subsvc{grid-template-columns:1fr 1fr}}
.subsvc-item{padding:1.2rem 1.3rem 1.3rem;border:1px solid var(--line);background:var(--paper);display:grid;gap:.5rem;position:relative;transition:border-color .4s}
.subsvc-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold)}
.subsvc-item:hover{border-color:var(--gold)}
.subsvc-num{font-family:var(--caps);font-size:.6rem;letter-spacing:.18em;color:var(--gold-text)}
.subsvc-item h3{font-size:var(--t1);font-family:var(--sans);font-weight:700;line-height:1.3}
.subsvc-item p{color:var(--ink-2);font-size:var(--t-1);line-height:1.55;text-wrap:pretty}

/* =====================================================================
   v1.2 — fixed header, robust form fields, hero contact line, living
   logos (header + footer), services mind map, gallery auto-scroll
   ===================================================================== */
.header.is-hidden{transform:none}

/* form fields: explicit fill colour, autofill and dropdown colours in both themes */
.field input,.field textarea,.field select{-webkit-text-fill-color:var(--ink);caret-color:var(--gold)}
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus,.field textarea:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--paper) inset;box-shadow:0 0 0 1000px var(--paper) inset;transition:background-color 9999s ease-out}
.field select option{color:#1F2A24;background:#FBF8F2}
:is([data-theme="dark"],[data-theme="black"]) .field select option{color:#fff;background:#1A3A33}
:is([data-theme="dark"],[data-theme="black"]) .field input,:is([data-theme="dark"],[data-theme="black"]) .field textarea,:is([data-theme="dark"],[data-theme="black"]) .field select{background:rgba(255,255,255,.04)}
:is([data-theme="dark"],[data-theme="black"]) .field input::placeholder,:is([data-theme="dark"],[data-theme="black"]) .field textarea::placeholder{color:rgba(255,255,255,.5)}

/* hero contact line, above the eyebrow */
.hero-contact{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-bottom:1.5rem;font-size:1.02rem;font-weight:700}
.hero-contact a{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);padding:.5rem .95rem;border:1px solid var(--line-gold);background:var(--paper);border-radius:var(--r-s);transition:border-color .3s,color .3s,transform .4s var(--ease-spring),box-shadow .4s}
.hero-contact a:hover{border-color:var(--gold);color:var(--gold-text);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.hero-contact svg{width:18px;height:18px;flex:none;color:var(--gold-text)}
@media (max-width:640px){.hero-contact{font-size:.95rem} .hero-contact a{padding:.45rem .75rem}}

/* living logos: squares turn slowly, the diamond glows; click = spin */
@keyframes hmSpin{to{transform:rotate(360deg)}}
@keyframes hmGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(201,162,76,0))}50%{filter:drop-shadow(0 0 5px rgba(201,162,76,.95))}}
@keyframes hmGlowBig{0%,100%{filter:drop-shadow(0 0 2px rgba(227,199,127,.35))}50%{filter:drop-shadow(0 0 16px rgba(227,199,127,1))}}
@keyframes hmShine{0%,100%{fill:#1F2A24}50%{fill:#8F6F2C}}
@keyframes cityShine{0%,100%{filter:drop-shadow(0 0 1px rgba(255,255,255,.4))}50%{filter:drop-shadow(0 0 7px rgba(255,255,255,1))}}
@keyframes hmClick{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.18);filter:drop-shadow(0 0 12px rgba(227,199,127,.95))}100%{transform:rotate(360deg) scale(1)}}
.brand-mark .star-a,.brand-mark .star-b{transform-box:fill-box;transform-origin:center;animation:hmSpin 40s linear infinite;transition:none}
.brand-mark .star-b{animation-direction:reverse}
.brand:hover .brand-mark .star-a,.brand:hover .brand-mark .star-b,.brand:focus-visible .brand-mark .star-a,.brand:focus-visible .brand-mark .star-b{animation-duration:6s;transform:none}
.brand-mark .mark-diamond{animation:hmGlow 4.5s ease-in-out infinite}
svg.is-spinning{animation:hmClick .75s cubic-bezier(.34,1.56,.64,1) both;transform-origin:50% 50%}
.footer .lockup,.seal{max-width:330px}
.footer .lockup .star-a,.footer .lockup .star-b{transform-box:fill-box;transform-origin:center;animation:hmSpin 30s linear infinite}
.footer .lockup .star-b{animation-direction:reverse}
.footer .lockup .mark-diamond{animation:hmGlowBig 3.4s ease-in-out infinite}
.footer .lockup .mark-hm path{animation:hmShine 3.4s ease-in-out infinite}
.footer .lockup .lockup-city{fill:#FFFFFF;animation:cityShine 3.4s ease-in-out infinite}
[data-motion="off"] .brand-mark .star-a,[data-motion="off"] .brand-mark .star-b,[data-motion="off"] .brand-mark .mark-diamond,[data-motion="off"] .footer .lockup *{animation:none!important}

/* services mind map (home hero, desktop) */
.hero-map{position:absolute;right:2vw;top:calc(var(--nav-h) + 0.5vh);width:min(47vw,700px);z-index:1}
.hero-map svg{width:100%;height:auto;overflow:visible;font-family:var(--caps)}
.mm-link{stroke:var(--gold);stroke-width:1;fill:none;opacity:.45;transition:opacity .45s,stroke-width .45s}
.mm-link.is-active{opacity:1;stroke-width:1.6}
.mm-dot{fill:var(--gold);opacity:0}
.mm-core-bg{fill:var(--paper);stroke:var(--line-gold);stroke-width:1}
.mm-area{cursor:pointer;text-decoration:none;outline:none}
.mm-halo{fill:var(--gold);opacity:0;transition:opacity .5s}
.mm-area.is-active .mm-halo,.mm-area:hover .mm-halo{opacity:.16}
.mm-ring{fill:var(--cream);stroke:var(--gold);stroke-width:1.3;transition:fill .45s,stroke .45s}
.mm-area[data-tone="lake"] .mm-ring{stroke:var(--lake)} .mm-area[data-tone="terracotta"] .mm-ring{stroke:var(--terracotta)}
.mm-area.is-active .mm-ring,.mm-area:hover .mm-ring{fill:var(--ink)}
.mm-num{font-family:var(--serif);font-size:17px;fill:var(--ink);text-anchor:middle;transition:fill .45s}
.mm-area.is-active .mm-num,.mm-area:hover .mm-num{fill:var(--gold-2)}
.mm-label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink)}
.mm-leaf{text-decoration:none}
.mm-leaf circle{fill:var(--gold);opacity:.75;transition:r .3s,opacity .3s}
.mm-leaf text{font-family:var(--sans);font-size:12.5px;font-weight:600;fill:var(--ink-2);opacity:.5;transition:opacity .45s,fill .45s}
.mm-leaf.is-active text,.mm-leaf:hover text{opacity:1;fill:var(--ink)} .mm-leaf:hover circle{opacity:1}
:is([data-theme="dark"],[data-theme="black"]) .mm-ring{fill:var(--paper)} :is([data-theme="dark"],[data-theme="black"]) .mm-area.is-active .mm-ring,:is([data-theme="dark"],[data-theme="black"]) .mm-area:hover .mm-ring{fill:var(--gold-2)} :is([data-theme="dark"],[data-theme="black"]) .mm-area.is-active .mm-num,:is([data-theme="dark"],[data-theme="black"]) .mm-area:hover .mm-num{fill:#13302A}
@media (max-width:979px){.hero-map{display:none}}
@media (min-width:980px){.hero-media{align-self:start;margin-top:calc(var(--nav-h) + 0.5vh + min(47vw,700px) * 0.667 + 22px)}} /* film card always starts below the mind map (map height = width x 600/900), whatever the text column height */
@media (max-width:640px){.header .wrap-wide{gap:.3rem} .brand{gap:.55rem} .brand-name{font-size:.8rem;letter-spacing:.2em} .tools{gap:.15rem}}

/* =====================================================================
   v1.2 — language switcher, right-to-left (Arabic) and script fonts
   ===================================================================== */
.lang{display:inline-flex;align-items:center;gap:.15rem;margin-inline-start:.3rem;padding-inline-start:.7rem;border-inline-start:1px solid var(--line)}
.lang a{font-family:var(--caps);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--stone-text);padding:.35rem .4rem;border-radius:var(--r-s);transition:color .25s,background .25s}
.lang a:hover{color:var(--ink);background:var(--tint)}
.lang a[aria-current="true"]{color:var(--ink);background:var(--tint-2)}
@media (max-width:1020px){.lang{border:0;padding:0;margin:1rem 0 0;gap:.5rem} .lang a{font-size:.85rem;padding:.5rem .8rem;border:1px solid var(--line)}}

/* Arabic and Hindi: their own typefaces, no tracking or capitals */
html[lang="ar"] body,html[lang="ar"] .btn,html[lang="ar"] .caps,html[lang="ar"] .kicker,html[lang="ar"] .nav > a,html[lang="ar"] .nav .has-menu > button,html[lang="ar"] .tool-label,html[lang="ar"] .badge,html[lang="ar"] .breadcrumb,html[lang="ar"] .card-cat,html[lang="ar"] .card-foot,html[lang="ar"] .link-caps,html[lang="ar"] .tabs [role="tab"],html[lang="ar"] .footer h4,html[lang="ar"] .pillar-num,html[lang="ar"] .mm-label,html[lang="ar"] .gal-area,html[lang="ar"] .hero-eyebrow,html[lang="ar"] .pkg h4,html[lang="ar"] .pkg-plan dt,html[lang="ar"] .subsvc-num,html[lang="ar"] .motion-menu .mm-title,html[lang="ar"] .motion-menu button b,html[lang="ar"] .brand-name,html[lang="ar"] .cal-grid .dow,html[lang="ar"] .credits summary,html[lang="ar"] .fact span,html[lang="ar"] .mega-num{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] .svc-promise,html[lang="ar"] .kinetic,html[lang="ar"] .pkg-tag,html[lang="ar"] .mega-head,html[lang="ar"] .faq summary,html[lang="ar"] .pkg-num,html[lang="ar"] .steps li::before,html[lang="ar"] .fact b,html[lang="ar"] .mm-num{font-family:var(--arabic);letter-spacing:0;font-weight:700}
html[lang="ar"] .btn,html[lang="ar"] .nav > a,html[lang="ar"] .nav .has-menu > button,html[lang="ar"] .kicker,html[lang="ar"] .badge,html[lang="ar"] .link-caps{font-size:.98rem;font-weight:700}
html[lang="ar"] .tool-label,html[lang="ar"] .breadcrumb,html[lang="ar"] .card-cat,html[lang="ar"] .footer h4{font-size:.86rem}
html[lang="ar"] h1{line-height:1.25} html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.3}
html[lang="ar"] .hero h1{font-size:clamp(2.2rem,1.2rem + 3vw,3.9rem);max-width:20ch}
html[lang="ar"] .brand-name{font-family:var(--caps);letter-spacing:.3em;text-transform:uppercase}
html[lang="hi"] body,html[lang="hi"] .btn,html[lang="hi"] .caps,html[lang="hi"] .kicker,html[lang="hi"] .nav > a,html[lang="hi"] .nav .has-menu > button,html[lang="hi"] .tool-label,html[lang="hi"] .badge,html[lang="hi"] .breadcrumb,html[lang="hi"] .card-cat,html[lang="hi"] .card-foot,html[lang="hi"] .link-caps,html[lang="hi"] .tabs [role="tab"],html[lang="hi"] .footer h4,html[lang="hi"] .mm-label,html[lang="hi"] .gal-area,html[lang="hi"] .hero-eyebrow,html[lang="hi"] .pkg h4,html[lang="hi"] .pkg-plan dt,html[lang="hi"] .motion-menu .mm-title,html[lang="hi"] .motion-menu button b,html[lang="hi"] .cal-grid .dow,html[lang="hi"] .credits summary,html[lang="hi"] .fact span{font-family:var(--devanagari);letter-spacing:.02em;text-transform:none}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="hi"] h4,html[lang="hi"] .svc-promise,html[lang="hi"] .kinetic,html[lang="hi"] .pkg-tag,html[lang="hi"] .mega-head,html[lang="hi"] .faq summary,html[lang="hi"] .fact b{font-family:var(--devanagari);letter-spacing:0;font-weight:600}
html[lang="hi"] h1{line-height:1.2} html[lang="hi"] h2,html[lang="hi"] h3{line-height:1.3}
html[lang="hi"] .hero h1{font-size:clamp(2.1rem,1.2rem + 2.8vw,3.6rem);max-width:22ch}
html[lang="hi"] .btn,html[lang="hi"] .nav > a,html[lang="hi"] .nav .has-menu > button,html[lang="hi"] .kicker,html[lang="hi"] .badge,html[lang="hi"] .link-caps{font-size:.9rem;font-weight:600}
html[lang="hi"] .kinetic,html[lang="ar"] .kinetic{font-style:normal}
html[lang="hi"] .brand-name{font-family:var(--caps);letter-spacing:.3em;text-transform:uppercase}

/* right-to-left mirroring */
[dir="rtl"] .brand{margin-right:0;margin-left:auto}
[dir="rtl"] .tools{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:.8rem;margin-left:0;margin-right:.2rem}
[dir="rtl"] .lang{border-inline-start:1px solid var(--line)}
[dir="rtl"] .nav > a::after,[dir="rtl"] .nav .has-menu > button::after{left:100%;right:0}
[dir="rtl"] .nav > a:hover::after,[dir="rtl"] .nav > a[aria-current="page"]::after,[dir="rtl"] .nav .has-menu > button:hover::after,[dir="rtl"] .nav .has-menu > button[aria-expanded="true"]::after,[dir="rtl"] .nav .has-menu.is-current > button::after{left:0}
[dir="rtl"] .motion-menu{left:auto;right:0}
[dir="rtl"] .mega-wide{left:auto;right:50%;transform:translate(50%,-6px)} [dir="rtl"] .has-menu.is-open .mega{transform:translate(50%,0)}
[dir="rtl"] .mega-list a:hover{transform:translateX(-2px)}
[dir="rtl"] .hero-map{right:auto;left:2vw}
[dir="rtl"] .hero-skyline.como{left:auto;right:-2vw}
[dir="rtl"] .hero-media{justify-self:start}
[dir="rtl"] .field label{left:auto;right:0;transform-origin:right top}
[dir="rtl"] .field select{background-position:left .2rem center;padding-left:1.4rem}
[dir="rtl"] .field.is-valid::before{right:auto;left:0}
[dir="rtl"] .field::after{transform-origin:right}
[dir="rtl"] .pillar::before,[dir="rtl"] .subsvc-item::before{left:auto;right:0}
[dir="rtl"] .pricing{border-left:0;border-right:2px solid var(--gold);padding-left:0;padding-right:1.2rem}
[dir="rtl"] .breadcrumb span::before{margin-right:0;margin-left:.6rem}
[dir="rtl"] .faq summary::after{margin-right:0;margin-left:.4rem;transform:rotate(45deg)}
[dir="rtl"] .fab{right:auto;left:clamp(1rem,3vw,2rem)}
[dir="rtl"] .fab-label{transform:translateX(-8px)} [dir="rtl"] .fab:hover .fab-label,[dir="rtl"] .fab.is-teasing .fab-label{transform:none}
[dir="rtl"] .gal-num{left:auto;right:.8rem}
[dir="rtl"] .gallery-nav{justify-self:start}
[dir="rtl"] .gal-btn svg,[dir="rtl"] .card-foot .go svg,[dir="rtl"] .aside-list svg.go,[dir="rtl"] .icon-arrow{transform:scaleX(-1)}
[dir="rtl"] .card:hover .card-foot .go{transform:translateX(-3px)}
[dir="rtl"] .aside-list a:hover{padding-left:.4rem;padding-right:.7rem}
[dir="rtl"] .toast{border-left:0;border-right:3px solid var(--gold)}
[dir="rtl"] .modal-close{right:auto;left:.9rem}
[dir="rtl"] .svc-panel .panel-cap{left:auto;right:1.4rem} [dir="rtl"] .svc-panel .panel-ico{right:auto;left:1.4rem}
[dir="rtl"] .hero-skyline.arabesque{right:auto;left:-2vw}
[dir="rtl"] .mm{direction:ltr} /* keeps SVG text-anchor start/end meaning left/right; Arabic runs still shape right-to-left */
[dir="rtl"] .skip{left:auto;right:1rem}
[dir="rtl"] .book-cal{border-radius:0}
[dir="rtl"] .hero h1 .line > span{transform-origin:right bottom}
@media (max-width:1020px){[dir="rtl"] .tools{margin-left:0;margin-right:auto;border:0;padding:0} [dir="rtl"] .nav{align-items:stretch;text-align:right}}

/* v1.2 fixes: honeypot must not create horizontal overflow in RTL; the root never scrolls sideways */
.honey{position:absolute;left:auto;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}
html{overflow-x:hidden}
@media (max-width:1020px){.nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}.nav-toggle span{margin:2.5px 0}}
html[lang="ar"] .mm-leaf text{font-size:14.5px;font-weight:700} html[lang="ar"] .mm-label{font-size:13.5px} html[lang="hi"] .mm-leaf text{font-size:13px}

/* v1.3 black theme: true near-black ground, same white text and brightened gold as the green theme.
   Every dark rule above applies to both themes via :is(); only the tokens and the few fixed greens change here. */
[data-theme="black"]{--cream:#0B0B0C;--paper:#141416;--sand:#1C1C1F;--ink:#FFFFFF;--ink-2:#E8E6E1;--stone:#A6A39C;--stone-text:#C2BEB5;--gold-text:#E3C77F;--gold-2:#E3C77F;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.3);--line-gold:rgba(227,199,127,.45);--glass:rgba(11,11,12,.84);--tint:rgba(255,255,255,.06);--tint-2:rgba(255,255,255,.13);--card-hover:#1F1F23;--dark:#050506;--dark-2:#000000;--lake:#9FC6DD;--terracotta-2:#C4643F}
[data-theme="black"] .brand-mark .mark-hm path{fill:#0B0B0C}
[data-theme="black"] .field select option{background:#141416}
[data-theme="black"] .gal-num{background:rgba(0,0,0,.6)}
[data-theme="black"] .mm-area.is-active .mm-num,[data-theme="black"] .mm-area:hover .mm-num{fill:#0B0B0C}
[data-theme="black"] .hero-media video,[data-theme="black"] .hero-media img{filter:saturate(.8) brightness(.85)}
/* theme pill: sun in light, moon in green, filled orb in black; the label always names the next theme */
.tool .orb{position:absolute;opacity:0;transform:scale(.5)}
[data-theme="black"] .tool .moon{opacity:0;transform:rotate(40deg) scale(.6)}
[data-theme="black"] .tool .orb{opacity:1;transform:none}

/* ===================== v1.4 ===================== */
/* Contact form: the topic dropdown's group headings (optgroup) were unstyled and rendered white on the light popup in the dark themes */
:is([data-theme="dark"],[data-theme="black"]) .field select{background:#1A3A33;color:#fff}
[data-theme="black"] .field select{background:#141416}
:is([data-theme="dark"],[data-theme="black"]) .field select optgroup{color:#E3C77F;background:#1A3A33;font-weight:600;font-style:normal}
[data-theme="black"] .field select optgroup{background:#141416}
:is([data-theme="dark"],[data-theme="black"]) .field select option{color:#fff;background:#1A3A33}
[data-theme="black"] .field select option{background:#141416}

/* Header lockup: bigger mark, wordmark in letter spans, three looping animations cycled by main.js via data-anim */
.brand-mark{width:54px;height:54px}
.header.is-scrolled .brand-mark{transform:scale(.82)}
.brand{gap:1rem;position:relative}
.brand-name{font-size:1.12rem;letter-spacing:.32em;display:inline-flex;white-space:nowrap}
.brand-name b{font-weight:400;display:inline-block;transform-origin:50% 100%;transition:color .5s}
.brand-name i{display:inline-block;width:.45em}
@media (max-width:640px){.brand-mark{width:44px;height:44px}.brand-name{font-size:.8rem;letter-spacing:.2em}}
/* 1 · glow: the mark's diamond breathes gold light and the wordmark glows with it */
@keyframes brandGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(201,162,76,0))}50%{filter:drop-shadow(0 0 10px rgba(227,199,127,.95)) drop-shadow(0 0 22px rgba(201,162,76,.5))}}
@keyframes wordGlow{0%,100%{text-shadow:0 0 0 rgba(201,162,76,0);color:var(--ink)}50%{text-shadow:0 0 12px rgba(227,199,127,.85),0 0 28px rgba(201,162,76,.45);color:var(--gold-text)}}
.brand[data-anim="glow"] .brand-mark{animation:brandGlow 2.6s ease-in-out infinite}
.brand[data-anim="glow"] .brand-name b{animation:wordGlow 2.6s ease-in-out infinite}
/* 2 · wave: letters rise one after another in gold, the squares tilt in opposite directions */
@keyframes letterWave{0%,60%,100%{transform:translateY(0);color:var(--ink)}30%{transform:translateY(-.32em);color:var(--gold-text);text-shadow:0 0 10px rgba(227,199,127,.7)}}
@keyframes squareRock{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg)}}
@keyframes squareRockB{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg)}}
.brand[data-anim="wave"] .brand-name b{animation:letterWave 2.4s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * .09s)}
.brand[data-anim="wave"] .brand-mark .star-a{animation:squareRock 2.4s ease-in-out infinite}
.brand[data-anim="wave"] .brand-mark .star-b{animation:squareRockB 2.4s ease-in-out infinite}
/* 3 · shimmer: a light sweeps across the wordmark while a spark orbits the mark */
@keyframes wordShimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
.brand[data-anim="shimmer"] .brand-name{background:linear-gradient(100deg,var(--ink) 0 38%,#E3C77F 48%,#fff 52%,#E3C77F 56%,var(--ink) 66% 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:wordShimmer 2.6s linear infinite}
.brand[data-anim="shimmer"] .brand-name b{color:inherit}
.brand-spark{position:absolute;left:0;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#E3C77F;box-shadow:0 0 8px 2px rgba(227,199,127,.9);opacity:0;pointer-events:none;offset-path:path("M27 0 L54 27 L27 54 L0 27 Z");offset-rotate:0deg;offset-distance:0%}
.brand[data-anim="shimmer"] .brand-spark{opacity:1;animation:sparkOrbit 2.6s linear infinite}
@keyframes sparkOrbit{to{offset-distance:100%}}
@media (max-width:640px){.brand-spark{offset-path:path("M22 0 L44 22 L22 44 L0 22 Z")}}
[data-motion="off"] .brand[data-anim] *,[data-motion="off"] .brand-spark{animation:none!important}
[data-motion="off"] .brand[data-anim="shimmer"] .brand-name{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
html.preloading .brand-spark{opacity:0!important}

/* Kids Area page */
.kids-games{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2rem}
.kids-game{position:relative;display:flex;flex-direction:column;gap:.7rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:1.5rem 1.4rem 1.4rem;box-shadow:var(--shadow-1);transition:transform .5s var(--ease-lux),box-shadow .5s}
.kids-game::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:100%;border-radius:var(--r-m) var(--r-m) 0 0;background:var(--gold)}
.kids-game[data-tone="lake"]::before{background:var(--lake)} .kids-game[data-tone="terracotta"]::before{background:var(--terracotta)}
.kids-game:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.kids-game .ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--tint);color:var(--gold-text)}
.kids-game .ico svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kids-game h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin:0}
.kids-game p{margin:0;color:var(--stone-text);font-size:.95rem;line-height:1.55;flex:1}
.kids-game-foot{display:flex;justify-content:space-between;align-items:center;font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-text)}
.kids-stars i,.kids-badge-row i{display:inline-block;width:14px;height:14px;margin-inline-end:3px;background:var(--line-strong);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.kids-stars i.on,.kids-badge-row i.on{background:var(--gold);filter:drop-shadow(0 0 4px rgba(227,199,127,.8))}
.kids-game .btn{align-self:flex-start;margin-top:.2rem}
.kids-badge{margin-top:2.4rem;padding:1.6rem 1.8rem;border:1px solid var(--line-gold);border-radius:var(--r-m);display:grid;gap:.4rem;background:linear-gradient(135deg,var(--paper),var(--sand))}
.kids-badge h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:0}
.kids-badge-row{margin:.3rem 0 0}.kids-badge-row i{width:22px;height:22px;margin-inline-end:6px;transition:background .4s,transform .5s var(--ease-spring)}
.kids-badge-text{margin:0;color:var(--stone-text)}
.kids-stories{display:grid;gap:1rem;margin-top:2rem}
.kids-story{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.kids-story summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.2rem;padding:1rem 1.4rem 1rem 1rem}
.kids-story summary::-webkit-details-marker{display:none}
.kids-story summary > svg{width:18px;height:18px;margin-inline-start:auto;transition:transform .4s var(--ease-lux);flex:none}
.kids-story[open] summary > svg{transform:rotate(180deg)}
.kids-scene{width:150px;flex:none;border-radius:12px;overflow:hidden;background:var(--sand)}
.kids-scene svg{display:block;width:100%;height:auto}
.kids-scene .sky{fill:var(--sand)} .kids-scene .line{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85} .kids-scene .gold{fill:var(--gold)}
.kids-story-title h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:.1rem 0 0}
.kids-story-body{padding:0 1.4rem 1.4rem;display:grid;gap:1rem}
.kids-story-body .prose p{font-size:1.06rem;line-height:1.75}
.kids-story-body .btn{justify-self:start}
.kids-two{display:grid;gap:2rem;grid-template-columns:1fr 1fr}
.kids-word,.kids-colour{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:1.8rem;display:flex;flex-direction:column;gap:.7rem}
.kids-word h2,.kids-colour h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;margin:0}
.kids-word p,.kids-colour p{margin:0;color:var(--stone-text)}
.kids-word-list{display:grid;gap:.5rem;margin:.6rem 0 0;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.kids-word-list div{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.kids-word-list dt{font-family:var(--caps);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.kids-word-list dd{margin:.2rem 0 0;font-family:var(--serif);font-size:1.7rem;line-height:1.15}
.kids-word-list dd[lang="ar"],.kids-word-list dd[lang="ur"]{font-family:"Amiri",var(--serif)} .kids-word-list dd[lang="hi"]{font-family:"Noto Sans Devanagari",var(--sans);font-size:1.4rem}
.kids-colour-thumbs{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0}
.kids-colour-thumbs span{display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);padding:.4rem}
.kids-colour .btn{align-self:flex-start;margin-top:auto}
.kids-parents .prose{max-width:70ch}
@media (max-width:820px){.kids-two{grid-template-columns:1fr}.kids-scene{width:96px}.kids-story summary{gap:.9rem;padding:.8rem}}

/* Live Quran reader */
.quran-reader{--q-scale:1}
.q-controls{display:grid;gap:1rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end;padding:1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.q-controls label{display:grid;gap:.35rem;font-family:var(--caps);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-text)}
.q-controls select,.q-controls input[type="range"]{width:100%;font:500 .95rem/1.3 var(--sans);color:var(--ink);background:var(--cream);border:1px solid var(--line-strong);border-radius:10px;padding:.65rem .7rem;letter-spacing:0;text-transform:none}
.q-controls input[type="range"]{padding:0;height:36px;accent-color:var(--gold)}
.q-buttons{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.q-buttons .btn svg{width:14px;height:14px}
.q-check{display:flex!important;align-items:center;gap:.5rem;text-transform:none!important;letter-spacing:0!important;font:500 .9rem var(--sans)!important;color:var(--ink)!important;margin-inline-start:auto}
.q-check input{accent-color:var(--gold);width:18px;height:18px}
.q-status{min-height:1.4em;margin:.8rem 0 0;color:var(--stone-text);font-size:.9rem}.q-status.is-error{color:var(--terracotta)}
.q-head{text-align:center;margin:2rem 0 1rem}
.q-name{font-family:"Amiri",serif;font-size:calc(2.6rem * var(--q-scale));font-weight:400;margin:.2rem 0 0;color:var(--ink)}
.q-tr{margin:.3rem 0 0;color:var(--stone-text);font-family:var(--serif);font-size:1.15rem}.q-tr span{color:var(--gold)}
.q-bismillah{font-family:"Amiri",serif;font-size:calc(2rem * var(--q-scale));color:var(--gold-text);margin:1rem 0 0}
.q-ayahs{display:grid;gap:.6rem}
.q-ayah{padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:14px;background:var(--paper);transition:background .4s,border-color .4s,box-shadow .4s;scroll-margin-top:110px}
.q-ayah.is-playing{border-color:var(--gold);background:linear-gradient(135deg,var(--paper),var(--sand));box-shadow:0 0 0 3px var(--line-gold)}
.q-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.q-play{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--gold-text);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s}
.q-play svg{width:14px;height:14px}.q-play:hover,.q-ayah.is-playing .q-play{background:var(--gold);color:#1F2A24;border-color:var(--gold)}
.q-num{font-family:var(--caps);font-size:.66rem;letter-spacing:.16em;color:var(--stone-text)}
.q-sajda{font-family:var(--caps);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);border:1px solid currentColor;border-radius:999px;padding:.15rem .5rem}
.q-arabic{font-family:"Amiri",serif;font-size:calc(1.9rem * var(--q-scale));line-height:2.05;margin:0;color:var(--ink);text-align:right}
.q-end{color:var(--gold-text);font-size:.8em}
.q-trans{margin:.6rem 0 0;font-size:calc(1.02rem * var(--q-scale));line-height:1.7;color:var(--ink-2)}
.q-trans[lang="ur"]{font-family:"Amiri",serif;font-size:calc(1.25rem * var(--q-scale));text-align:right} .q-trans[lang="hi"]{font-family:"Noto Sans Devanagari",var(--sans)}
.q-ref{margin:.5rem 0 0;font-family:var(--caps);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-text)}
.q-sources{margin:1.6rem 0 0;font-size:.82rem;color:var(--stone-text);max-width:70ch}
.quran-live{display:grid;gap:2.4rem;grid-template-columns:1.3fr .9fr;align-items:start}
.checks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.5rem}
.checks li{padding-inline-start:1.6rem;position:relative;line-height:1.5}
.checks li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:10px;height:10px;background:var(--gold);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.q-schedule{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:1.6rem}
.q-schedule dl{margin:1rem 0 0;display:grid;gap:.6rem}.q-schedule div{display:grid;gap:.15rem;padding:.6rem 0;border-top:1px solid var(--line)}
.q-schedule dt{font-family:var(--caps);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}.q-schedule dd{margin:0;font-size:1rem}
[dir="rtl"] .q-arabic{text-align:right}
@media (max-width:820px){.quran-live{grid-template-columns:1fr}.q-arabic{font-size:calc(1.6rem * var(--q-scale))}.q-check{margin-inline-start:0}}

/* New motion styles (v1.4): Editorial (letters), Immersive, Kinetic */
[data-motion="letters"] .head h2 .w,[data-motion="letters"] .hero h1 .w{display:inline-block;will-change:transform}
.gold-rule{display:block;height:1px;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);margin:.6rem 0 0;width:64px}
[dir="rtl"] .gold-rule{transform-origin:100% 50%}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
.cursor-dot{width:8px;height:8px;background:#E3C77F;box-shadow:0 0 10px 2px rgba(227,199,127,.8);mix-blend-mode:screen}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(201,162,76,.7);transition:width .25s,height .25s,border-color .25s}
.cursor-ring.is-hot{width:52px;height:52px;border-color:#E3C77F}
[data-motion="kinetic"] .cursor-dot,[data-motion="kinetic"] .cursor-ring{opacity:1}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}
[data-motion="kinetic"] .btn,[data-motion="kinetic"] .tool{will-change:transform}
[data-motion="immersive"] .card,[data-motion="immersive"] .gal-item,[data-motion="immersive"] .kids-game{will-change:clip-path,transform}
/* Header density: five navigation items + languages + two pills + CTA must fit between 1021 and ~1500 px */
@media (min-width:1021px) and (max-width:1560px){
  .nav{gap:1.15rem}
  .nav > a,.nav .has-menu > button{font-size:.68rem;letter-spacing:.13em}
  .brand-name{font-size:.98rem;letter-spacing:.24em}
  .header-cta{padding:.6rem .9rem;font-size:.66rem}
  .lang a{padding:.3rem .32rem}
}
@media (min-width:1021px) and (max-width:1320px){
  .tool-label{display:none} .tool{padding:0;width:38px;justify-content:center}
  .nav{gap:.9rem} .brand{gap:.7rem} .brand-mark{width:46px;height:46px}
  .nav-langs{display:none}
}
/* shimmer: keep every letter visible on cream (no pure white band) */
.brand[data-anim="shimmer"] .brand-name{background:linear-gradient(100deg,var(--ink) 0 36%,#C9A24C 46%,#F3DFA6 52%,#C9A24C 58%,var(--ink) 68% 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.brand-name{direction:ltr;unicode-bidi:isolate} /* the wordmark is Latin letter spans; keep their order on right-to-left pages */
@media (min-width:1021px) and (max-width:1240px){
  .nav{gap:.7rem} .nav > a,.nav .has-menu > button{font-size:.62rem;letter-spacing:.1em}
  .brand-name{font-size:.86rem;letter-spacing:.18em} .header-cta{padding:.55rem .7rem;font-size:.6rem} .lang a{padding:.3rem .22rem;font-size:.6rem} .tools{margin-left:0}
}

/* ===================== v1.4.1 ===================== */
/* galleries: snap only when the visitor drives; while auto-scrolling the snap would pull the strip back every frame */
.gallery.is-auto{scroll-snap-type:none}
/* home hero: video back beside the copy (the services map moved to the Services page) */
@media (min-width:980px){.hero-media{align-self:center;margin-top:0;width:min(100%,640px)}}
.hero-map{display:none}
/* services reel under the hero */
.reel-section{padding:clamp(1rem,3vw,2.5rem) 0 clamp(2.5rem,5vw,4rem);position:relative}
.reel-head{display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.4rem}
.reel-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0}
.reel .gallery-track{align-items:stretch;gap:1rem}
.reel-card{flex:0 0 min(340px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:.7rem;padding:1.4rem 1.4rem 1.2rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1);position:relative;overflow:hidden;transition:transform .5s var(--ease-lux),box-shadow .5s,border-color .5s}
.reel-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gold)}
.reel-card[data-tone="lake"]::before{background:var(--lake)} .reel-card[data-tone="terracotta"]::before{background:var(--terracotta)}
.reel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-gold)}
.reel-top{display:flex;justify-content:space-between;align-items:center}
.reel-num{font-family:var(--caps);font-size:.66rem;letter-spacing:.2em;color:var(--gold-text)}
.reel-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--tint);color:var(--gold-text)}
.reel-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reel-card[data-tone="lake"] .reel-ico{color:var(--lake)} .reel-card[data-tone="terracotta"] .reel-ico{color:var(--terracotta)}
.reel-card h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0;line-height:1.15}
.reel-card h3 a{color:var(--ink);text-decoration:none}.reel-card h3 a:hover{color:var(--gold-text)}
.reel-card p{margin:0;color:var(--stone-text);font-size:.92rem;line-height:1.5}
.reel-list{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;flex:1;align-content:start}
.reel-list a{display:inline-block;font-size:.78rem;padding:.3rem .6rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);text-decoration:none;transition:border-color .3s,color .3s,background .3s}
.reel-list a:hover{border-color:var(--gold);color:var(--gold-text);background:var(--tint)}
.reel-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem;padding-top:.8rem;border-top:1px solid var(--line);font-family:var(--caps);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-text)}
/* services page map */
.svc-map-section{padding-bottom:0}
.svc-map{max-width:960px;margin:1rem auto 0}
.svc-map svg{width:100%;height:auto;overflow:visible;font-family:var(--caps)}
@media (max-width:640px){.svc-map .mm-leaf text{font-size:17px}.svc-map .mm-label{font-size:15px}}
/* kids page: games straight after the hero */
.page-kids .page-hero{padding-top:calc(var(--nav-h) + clamp(2rem,5vw,4rem));padding-bottom:clamp(1.2rem,3vw,2rem)}
.kids-games-section{padding:0 0 clamp(2rem,5vw,4rem)}
.kids-games-section > .wrap > .kicker{margin-bottom:.4rem}
.kids-games-section .kids-games{margin-top:1rem}
.kids-games-lede{margin:1.2rem 0 0;color:var(--stone-text);max-width:60ch}
/* v1.4.2: the header mark is the brand's icon and must read at a glance: 78 px (60 px once scrolled, 56 px on phones), overflowing the bar edges slightly */
.brand-mark{width:78px;height:78px;margin-block:-6px}
.brand-mark .star-a,.brand-mark .star-b{stroke-width:2.2}
.header.is-scrolled .brand-mark{transform:scale(.78)}
.brand{gap:.8rem}
.brand-spark{offset-path:path("M39 0 L78 39 L39 78 L0 39 Z")}
@media (min-width:1021px) and (max-width:1320px){.brand-mark{width:62px;height:62px}.brand-spark{offset-path:path("M31 0 L62 31 L31 62 L0 31 Z")}}
@media (max-width:640px){.brand-mark{width:56px;height:56px;margin-block:-4px}.brand-spark{offset-path:path("M28 0 L56 28 L28 56 L0 28 Z")}}
/* ===================== v1.4.3 ===================== */
/* Kickers and eyebrows ("MILAN · LAKE COMO · FIVE LANGUAGES", section labels): bold and about the size of the text beside them */
.kicker,.hero-eyebrow,.link-caps{font-family:var(--sans);font-weight:800;font-size:1.02rem;letter-spacing:.12em}
.hero-eyebrow{font-size:1.08rem;margin-bottom:1.4rem}
.kicker::before{width:2.2rem;height:2px} .link-caps::after{height:2px}
.mega-num,.reel-num,.pillar-num{font-family:var(--sans);font-weight:800;font-size:.8rem}
@media (max-width:640px){.kicker,.hero-eyebrow,.link-caps{font-size:.92rem;letter-spacing:.1em}}
/* Header mark at the footer's scale: a taller bar (112 px, 84 px once scrolled) holding a 108 px mark, glowing like the footer lockup */
@media (min-width:641px){:root{--nav-h:112px}.header.is-scrolled{height:84px}}
.brand-mark{width:108px;height:108px;margin-block:-10px}
.header.is-scrolled .brand-mark{transform:scale(.72)}
.brand-mark .star-a,.brand-mark .star-b{stroke-width:2}
@keyframes hmShineHead{0%,100%{fill:var(--cream)}50%{fill:var(--gold)}}
.brand-mark .mark-diamond{animation:hmGlowBig 3.4s ease-in-out infinite}
.brand-mark .mark-hm path{animation:hmShineHead 3.4s ease-in-out infinite}
.brand-spark{offset-path:path("M54 0 L108 54 L54 108 L0 54 Z")}
@media (min-width:1021px) and (max-width:1320px){.brand-mark{width:84px;height:84px}.brand-spark{offset-path:path("M42 0 L84 42 L42 84 L0 42 Z")}}
@media (max-width:640px){.brand-mark{width:64px;height:64px;margin-block:-6px}.brand-spark{offset-path:path("M32 0 L64 32 L32 64 L0 32 Z")}}
[data-motion="off"] .brand-mark .mark-diamond,[data-motion="off"] .brand-mark .mark-hm path{animation:none}
/* ===================== v1.5.0 ===================== */
/* touch targets: 44 px minimum for the header pills, language links and gallery arrows on touch screens */
@media (hover:none),(pointer:coarse){
  .tool{min-width:44px;height:44px}
  .lang a{min-height:44px;display:inline-flex;align-items:center;padding-inline:.6rem}
  .gal-btn{width:44px;height:44px}
  .nav-toggle{width:48px;height:48px}
  .q-play{width:44px;height:44px}
}
.footer-bar .ver{font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--stone-text);margin-inline-start:.5rem;opacity:.8}
/* contrast: white text on the terracotta primary button reaches 4.56:1 (cream reached 4.25:1) */
.btn-primary{--fg:#FFFFFF}
/* inline links in breadcrumbs, footer bar and credits: at least 24 px tall targets */
.breadcrumb a,.footer-bar a,.credits a{display:inline-block;padding-block:.3rem}

/* ===================== v1.6.0: Urdu edition + language dropdown ===================== */
/* Urdu shares the Arabic typography rules (Amiri, right-to-left) */
html[lang="ur"] body,html[lang="ur"] .btn,html[lang="ur"] .caps,html[lang="ur"] .kicker,html[lang="ur"] .nav > a,html[lang="ur"] .nav .has-menu > button,html[lang="ur"] .tool-label,html[lang="ur"] .badge,html[lang="ur"] .breadcrumb,html[lang="ur"] .card-cat,html[lang="ur"] .card-foot,html[lang="ur"] .link-caps,html[lang="ur"] .tabs [role="tab"],html[lang="ur"] .footer h4,html[lang="ur"] .pillar-num,html[lang="ur"] .mm-label,html[lang="ur"] .gal-area,html[lang="ur"] .hero-eyebrow,html[lang="ur"] .pkg h4,html[lang="ur"] .pkg-plan dt,html[lang="ur"] .subsvc-num,html[lang="ur"] .motion-menu .mm-title,html[lang="ur"] .motion-menu button b,html[lang="ur"] .brand-name,html[lang="ur"] .cal-grid .dow,html[lang="ur"] .credits summary,html[lang="ur"] .fact span,html[lang="ur"] .mega-num{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3,html[lang="ur"] h4,html[lang="ur"] .svc-promise,html[lang="ur"] .kinetic,html[lang="ur"] .pkg-tag,html[lang="ur"] .mega-head,html[lang="ur"] .faq summary,html[lang="ur"] .pkg-num,html[lang="ur"] .steps li::before,html[lang="ur"] .fact b,html[lang="ur"] .mm-num{font-family:var(--arabic);letter-spacing:0;font-weight:700}
html[lang="ur"] .btn,html[lang="ur"] .nav > a,html[lang="ur"] .nav .has-menu > button,html[lang="ur"] .kicker,html[lang="ur"] .badge,html[lang="ur"] .link-caps{font-size:.98rem;font-weight:700}
html[lang="ur"] .tool-label,html[lang="ur"] .breadcrumb,html[lang="ur"] .card-cat,html[lang="ur"] .footer h4{font-size:.86rem}
html[lang="ur"] h1{line-height:1.25}
html[lang="ur"] .hero h1{font-size:clamp(2.2rem,1.2rem + 3vw,3.9rem);max-width:20ch}
html[lang="ur"] .brand-name{font-family:var(--caps);letter-spacing:.3em;text-transform:uppercase}
html[lang="hi"] .kinetic,html[lang="ur"] .kinetic{font-style:normal}
html[lang="ur"] .mm-leaf text{font-size:14.5px;font-weight:700}

/* language dropdown (replaces the EN·IT·HI·AR pills): native names, current one on the button */
.lang{position:relative;display:inline-flex;align-items:center;margin-inline-start:.3rem;padding-inline-start:.7rem;border-inline-start:1px solid var(--line);gap:0}
.lang-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:0 .7rem;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink-2);font:600 .8rem/1 var(--sans);cursor:pointer;transition:border-color .3s,color .3s,background .3s;white-space:nowrap}
.lang-btn svg{width:12px;height:12px;transition:transform .3s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--gold);color:var(--ink);background:var(--tint)}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-cur[lang="ar"],.lang-cur[lang="ur"]{font-family:"Amiri",var(--sans);font-size:.95rem}
.lang-cur[lang="hi"]{font-family:"Noto Sans Devanagari",var(--sans)}
.lang-list{position:absolute;top:calc(100% + .5rem);inset-inline-end:0;min-width:200px;margin:0;padding:.4rem;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility 0s .25s;z-index:60}
.lang[data-open="true"] .lang-list{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.lang-list a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .8rem;border-radius:10px;text-decoration:none;color:var(--ink);font:500 .95rem/1.2 var(--sans)}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--tint)}
.lang-list li[aria-selected="true"] a{background:var(--tint-2);font-weight:700}
.lang-list a[lang="ar"] .lang-name,.lang-list a[lang="ur"] .lang-name{font-family:"Amiri",var(--sans);font-size:1.1rem}
.lang-list a[lang="hi"] .lang-name{font-family:"Noto Sans Devanagari",var(--sans)}
.lang-code{font-family:var(--caps);font-size:.6rem;letter-spacing:.16em;color:var(--stone-text)}
.lang-list li[aria-selected="true"] .lang-code{color:var(--gold-text)}
@media (max-width:1020px){
  .lang{border:0;padding:0;margin:1rem 0 0;display:block}
  .lang-btn{display:none}
  .lang-list{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.25rem;transition:none}
}
@media (min-width:1021px) and (max-width:1560px){.lang-btn{font-size:.74rem;padding:0 .55rem}}
@media (min-width:1021px) and (max-width:1240px){.lang-btn{font-size:.7rem;padding:0 .5rem;min-height:34px}}
[dir="rtl"] .lang-list{inset-inline-end:auto;inset-inline-start:0}
.lang a{padding:0}
.lang-list a{text-transform:none;letter-spacing:0}
/* phone numbers are isolated left-to-right runs in every edition */
bdi.tel{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
/* ===================== v1.6.2: self-measuring header ===================== */
/* main.js adds is-tight / is-tighter / is-tightest to .header when the row would overflow (long labels, large fonts, zoom).
   Each level removes a little: labels on the pills, then size and the wordmark, then the header CTA (every page has CTAs). */
.header.is-tight .tool-label{display:none} .header.is-tight .tool{padding:0;min-width:38px;width:38px;justify-content:center}
.header.is-tight .nav{gap:.75rem} .header.is-tight .nav > a,.header.is-tight .nav .has-menu > button{font-size:.66rem;letter-spacing:.1em}
.header.is-tight .brand-name{font-size:.9rem;letter-spacing:.18em} .header.is-tight .brand-mark{width:84px;height:84px}
.header.is-tight .header-cta{padding:.55rem .75rem;font-size:.62rem} .header.is-tight .lang-btn{font-size:.72rem;padding:0 .5rem} .header.is-tight .nav-langs{display:none}
.header.is-tighter .nav{gap:.55rem} .header.is-tighter .nav > a,.header.is-tighter .nav .has-menu > button{font-size:.6rem;letter-spacing:.06em}
.header.is-tighter .brand-name{display:none} .header.is-tighter .brand{gap:.4rem} .header.is-tighter .brand-mark{width:72px;height:72px}
.header.is-tighter .lang-btn{font-size:.68rem;min-height:32px} .header.is-tighter .tools{margin-left:0}
.header.is-tightest .header-cta{display:none}
.header .wrap-wide{min-width:0} .header .wrap-wide > *{min-width:0}
/* v1.7.0: slots already taken in the owner's Google Calendar */
.slots button.is-taken{opacity:.35;text-decoration:line-through;cursor:not-allowed}

/* v1.7.2: service hero panel with a looping film (driving services): the film fills the square, the mark sits at the top */
/* hero panel with a looping clip: the mark sits above the video, the video is letterboxed (never cropped) */
.svc-panel.has-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;min-height:0;padding:1.6rem 1.2rem 3.8rem}
.svc-panel.has-video video{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:calc(var(--r-m) - 8px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.svc-panel.has-video .panel-mark{order:-1;position:static;transform:none;width:min(24%,116px);z-index:2;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.svc-panel.has-video .panel-cap,.svc-panel.has-video .panel-ico{z-index:2}
.svc-panel.has-video .panel-lines{display:none}
@media (max-width:640px){.svc-panel.has-video{padding:1.2rem 1rem 3.4rem}.svc-panel.has-video .panel-mark{width:92px}}
/* service clips: shared 16:9 frame (home journey scenes) */
.film-pair{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:800px){.film-pair{grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2rem)}}
.film-frame.svc-film{outline-offset:6px;background:#0b1410}
.film-frame.svc-film video{object-fit:contain;background:#0b1410}
.film-frame.svc-film .film-play span{width:68px;height:68px}
.film-frame.svc-film .film-play svg{width:24px;height:24px}
.film-frame.svc-film .film-tag{position:absolute;left:1rem;top:1rem;z-index:2;font-family:var(--caps);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#f6f1e7;background:rgba(12,20,16,.55);padding:.38rem .65rem;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;transition:opacity .3s}
[dir="rtl"] .film-frame.svc-film .film-tag{left:auto;right:1rem;direction:ltr}
.film-frame.svc-film.is-playing .film-tag{opacity:0}
.film-frame.svc-film .film-play{background:linear-gradient(180deg,rgba(31,42,36,0) 40%,rgba(31,42,36,.35));align-content:end;padding-bottom:1.1rem}
.film-frame.svc-film .film-play span{width:52px;height:52px}
.film-frame.svc-film .film-play svg{width:20px;height:20px}
.film-frame.svc-film .film-play::after{content:attr(title);position:absolute;left:50%;bottom:.55rem;transform:translateX(-50%);font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#f6f1e7;opacity:.85;white-space:nowrap}
.film-frame.svc-film .film-play span{margin-bottom:1.2rem}
.film-frame .film-sound{position:absolute;right:1rem;bottom:1rem;z-index:3;display:none;align-items:center;gap:.45rem;padding:.45rem .8rem;border-radius:999px;background:rgba(12,20,16,.6);color:#f6f1e7;font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(246,241,231,.35);cursor:pointer}
.film-frame .film-sound svg{width:18px;height:18px;fill:currentColor}
.film-frame.is-playing .film-sound{display:inline-flex}
[dir="rtl"] .film-frame .film-sound{right:auto;left:1rem}
@media (max-width:640px){.film-frame.svc-film .film-play::after{font-size:.56rem}}
/* service hero panel with two stacked clips (same frame as the driving video) */
.svc-panel.has-films{gap:.9rem;padding:1.3rem 1.2rem 3.6rem}
.svc-panel.has-films .panel-mark{width:min(20%,96px)}
.svc-panel.has-films .panel-films{display:grid;gap:.9rem;width:100%}
/* home journey: pinned stage, scroll moves through one scene per education service */
.journey{padding-bottom:0;overflow:clip}
.journey-head{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.journey-head .lede{margin-top:1rem;max-width:62ch}
.journey-track{height:calc(var(--scenes) * 85vh);position:relative}
.journey-stage{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden;background:var(--dark)}
.journey-progress{position:absolute;inset-inline:0;top:0;height:3px;background:rgba(246,241,231,.12);z-index:5}
.journey-progress span{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left center;transform:scaleX(0)}
[dir="rtl"] .journey-progress span{transform-origin:right center}
.journey-rail{list-style:none;margin:0;padding:0;position:absolute;top:1.5rem;inset-inline-end:max(clamp(1rem,5vw,5rem),calc((100% - 1320px) / 2 + 5rem));inset-inline-start:auto;z-index:5;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.1rem 1.1rem;max-width:min(66%,860px)}
.journey-rail button{position:relative;display:flex;align-items:center;gap:.45rem;font-family:var(--caps);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,231,.5);padding:.35rem 0 .5rem;transition:color .3s;white-space:nowrap;cursor:pointer;background:none;border:0}
.journey-rail button small{font-family:var(--serif);font-size:.85rem;letter-spacing:0;color:var(--gold);opacity:.6;transition:opacity .3s}
.journey-rail button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-lux)}
[dir="rtl"] .journey-rail button::after{transform-origin:right center}
.journey-rail button[aria-current="true"]{color:#f6f1e7}
.journey-rail button[aria-current="true"]::after{transform:scaleX(1)}
.journey-rail button[aria-current="true"] small{opacity:1}
.journey-scene{position:absolute;inset:0;max-width:1320px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:5rem 3rem;padding-inline:clamp(1rem,5vw,5rem);opacity:0;transform:scale(.9);pointer-events:none;will-change:transform,opacity}
.journey-scene.is-active{pointer-events:auto}
.journey-films{display:grid;gap:.9rem;align-content:center;justify-items:center}
.journey-films .film-frame{width:min(100%,calc((100vh - var(--nav-h) - 9.5rem) / 2 * 16 / 9));aspect-ratio:16/9;outline-offset:4px}
.journey-cap{display:grid;gap:1rem;align-content:center}
.journey-num{font-family:var(--caps);font-size:.66rem;letter-spacing:.2em;color:var(--gold);direction:ltr;unicode-bidi:isolate;justify-self:start}
.journey-cap h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.05;margin:0}
.journey-cap p{margin:0;font-size:1.05rem;color:rgba(246,241,231,.74);max-width:38ch}
.journey-cap .btn{justify-self:start}
.journey-hint{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);margin:0;font-family:var(--caps);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,241,231,.45);display:flex;gap:.5rem;align-items:center;z-index:5;white-space:nowrap}
.journey-hint span{animation:jhint 1.6s ease-in-out infinite}
@keyframes jhint{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.journey-static .journey-track{height:auto}
.journey-static .journey-stage{position:static;height:auto;overflow:visible}
.journey-static .journey-scene{position:relative;opacity:1;transform:none;pointer-events:auto;padding-inline:clamp(1rem,5vw,5rem)}
.journey-static .journey-rail,.journey-static .journey-progress,.journey-static .journey-hint{display:none}
@media (max-width:980px){.journey-rail{display:none}.journey-scene{grid-template-columns:1fr;padding:1.4rem clamp(1rem,4vw,2rem) 2.6rem;align-content:center;gap:1.1rem}.journey-films .film-frame{width:min(100%,calc((100vh - var(--nav-h) - 17rem) / 2 * 16 / 9))}.journey-cap{gap:.6rem}.journey-cap h3{font-size:1.5rem}.journey-cap p{font-size:.95rem}.journey-cap .btn{margin-top:.2rem}}

/* Kids Area · hall of stars (top 10 per game) */
.kids-top{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.8rem}
.kids-top-game{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:.2rem 1.1rem;box-shadow:var(--shadow-1)}
.kids-top-game summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.75rem 0;font-family:var(--serif);font-size:1.15rem;list-style:none}
.kids-top-game summary::-webkit-details-marker{display:none}
.kids-top-game summary span{flex:1}.kids-top-game summary b{font-family:var(--sans);font-weight:800;color:var(--gold-text)}.kids-top-game summary svg{width:16px;height:16px;transition:transform .3s}
.kids-top-game[open] summary svg{transform:rotate(180deg)}
.kids-top-game ol{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.15rem}
.kids-top-game li{display:grid;grid-template-columns:1.7rem 1fr auto;gap:.5rem;align-items:center;font-size:.92rem;padding:.3rem .5rem;border-radius:8px}
.kids-top-game li:nth-child(odd){background:var(--sand)}
.kids-top-game li span{color:var(--gold-text);font-family:var(--caps);font-size:.7rem}.kids-top-game li b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kids-top-game li em{font-style:normal;font-weight:800;color:var(--gold-text)}
.kids-top-game li.empty{display:block;color:var(--stone);background:none}

/* Kids Area · game rows: preview picture beside the copy, how-to, glowing play button */
.kids-rows{display:grid;gap:clamp(1.2rem,3vw,2.2rem);margin-top:1.6rem}
.kids-row{position:relative;display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l,22px);padding:1rem;box-shadow:var(--shadow-1);overflow:hidden}
.kids-row::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:100%;background:var(--gold)}
.kids-row[data-tone="lake"]::before{background:var(--lake)}.kids-row[data-tone="terracotta"]::before{background:var(--terracotta)}
@media (min-width:860px){.kids-row{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.4rem,3vw,3rem);padding:1.2rem}.kids-row:nth-child(even) .kids-preview{order:2}}
.kids-preview{position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--dark);outline:1px solid var(--line-gold);outline-offset:4px}
.kids-preview img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 60%;transition:transform .8s var(--ease-lux)}
.kids-row:hover .kids-preview img{transform:scale(1.06)}
.kids-preview-ico{position:absolute;left:.9rem;top:.9rem;width:46px;height:46px;border-radius:12px;background:rgba(246,241,231,.92);color:var(--gold-text);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.kids-preview-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kids-preview-num{position:absolute;right:.9rem;top:.9rem;font-family:var(--caps);font-size:.66rem;letter-spacing:.18em;color:#F6F1E7;background:rgba(12,20,16,.55);padding:.35rem .6rem;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[dir="rtl"] .kids-preview-ico{left:auto;right:.9rem}[dir="rtl"] .kids-preview-num{right:auto;left:.9rem}
.kids-spark{position:absolute;width:8px;height:8px;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;pointer-events:none;filter:drop-shadow(0 0 6px rgba(227,199,127,.9))}
.kids-spark.s1{left:18%;top:22%;animation:ksp 3.2s ease-in-out infinite}.kids-spark.s2{left:72%;top:35%;animation:ksp 3.2s ease-in-out 1.1s infinite;width:11px;height:11px}.kids-spark.s3{left:46%;top:74%;animation:ksp 3.2s ease-in-out 2.1s infinite}
@keyframes ksp{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
@media (prefers-reduced-motion:no-preference){.kids-preview img{animation:kburns 14s ease-in-out infinite alternate}@keyframes kburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1%)}}.kids-row:hover .kids-preview img{animation-play-state:paused}}
.kids-row-copy{display:grid;gap:.6rem;align-content:center;padding:.4rem .2rem}
.kids-row-meta{display:flex;align-items:center;gap:1rem;margin:0;font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-text)}
.kids-row h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;margin:0}
.kids-row-text{margin:0;color:var(--stone-text);font-size:1rem;line-height:1.6;max-width:52ch}
.kids-how{border:1px solid var(--line);border-radius:12px;padding:.1rem .9rem;background:var(--tint)}
.kids-how summary{cursor:pointer;padding:.55rem 0;font-family:var(--caps);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);list-style:none;display:flex;align-items:center;gap:.5rem}
.kids-how summary::-webkit-details-marker{display:none}
.kids-how summary::before{content:"?";width:1.4rem;height:1.4rem;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-size:.7rem}
.kids-how ol{margin:0 0 .8rem;padding-inline-start:1.3rem;display:grid;gap:.3rem;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.btn-glow{position:relative;justify-self:start;margin-top:.3rem;display:inline-flex;align-items:center;gap:.6rem;overflow:hidden;box-shadow:0 0 0 0 rgba(181,87,58,.55)}
.btn-glow svg{width:14px;height:14px;fill:currentColor}
.btn-glow::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
@media (prefers-reduced-motion:no-preference){.btn-glow{animation:kglow 2.6s ease-in-out infinite}.btn-glow::after{animation:kshine 2.6s ease-in-out infinite}@keyframes kglow{0%,100%{box-shadow:0 0 0 0 rgba(181,87,58,.55)}50%{box-shadow:0 0 0 10px rgba(181,87,58,0),0 0 24px rgba(181,87,58,.55)}}@keyframes kshine{0%,35%{left:-60%}70%,100%{left:120%}}}
.btn-glow:hover{transform:translateY(-2px)}
@media (max-width:640px){.kids-row{padding:.8rem}.kids-row-copy{padding:.2rem .3rem .4rem}}