/* ============================================================================
   JK Travels and Holidays — Design System v2
   Light, editorial, gradient-accented. Every colour is a custom property, so a
   theme swap is a token swap. Themes declare their own scheme, which is why the
   same components read correctly on white and on near-black.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Aurora — the default. Deep navy ink, white paper, a sunrise gradient. */
  --ink:          #1A0B54;
  --ink-2:        #3B2A72;
  --muted:        #6C6287;
  --paper:        #FFFFFF;
  --paper-2:      #F7F6FB;
  --paper-3:      #EFECF8;
  --surface:      rgba(255, 255, 255, 0.72);
  --surface-2:    rgba(255, 255, 255, 0.92);
  --border:       #E8E4F3;
  --border-2:     #D8D1EC;

  --brand:        #1C4EFF;
  --brand-ink:    #FFFFFF;
  --accent:       #AC24FF;
  --warm:         #FE881B;
  --lav:          #BDAEE7;

  --grad-a: linear-gradient(90deg, #1C4EFF 0%, #AC24FF 50%, #FE881B 100%);
  /* The same sweep as --grad-a, but every stop dark enough to carry white
     text at 4.5:1. --grad-a is free to be bright because it decorates;
     this one has words on top of it. */
  --grad-cta: linear-gradient(90deg, #1C4EFF 0%, #AC24FF 50%, #B55701 100%);
  --grad-b: linear-gradient(90deg, #2BA7FF 0%, #CA45FF 50%, #FE881B 100%);
  --grad-soft: linear-gradient(135deg, rgba(28,78,255,.10), rgba(172,36,255,.10) 55%, rgba(254,136,27,.10));
  --grad-line: linear-gradient(180deg, rgba(28,78,255,0) 0%, #AC24FF 25%, #F79FFF 50%, #FFD600 66%, #FE881B 84%, rgba(254,136,27,0) 100%);

  --on-image:     #FFFFFF;
  --scrim:        rgba(14, 7, 38, 0.55);

  --ok:      #0E9F6E;
  --warning: #AB590A;
  --warning-bg: #FFF3E2;
  --danger:  #D92D3C;

  /* Type */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-arabic: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;

  --fs-xs:   clamp(0.74rem, 0.72rem + 0.09vw, 0.80rem);
  --fs-sm:   clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.92rem + 0.18vw, 1.04rem);
  --fs-md:   clamp(1.06rem, 1.01rem + 0.26vw, 1.20rem);
  --fs-lg:   clamp(1.26rem, 1.16rem + 0.48vw, 1.56rem);
  --fs-xl:   clamp(1.56rem, 1.36rem + 0.98vw, 2.20rem);
  --fs-2xl:  clamp(1.95rem, 1.55rem + 1.90vw, 3.10rem);
  --fs-3xl:  clamp(2.35rem, 1.70rem + 3.20vw, 4.40rem);
  --fs-hero: clamp(2.55rem, 1.65rem + 4.40vw, 5.60rem);

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y: clamp(3rem, 5.2vw, 5.5rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1320px;
  --maxw-text: 66ch;

  /* Shape & depth — the reference's soft, wide, low-opacity shadow */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(63,74,126,.06), 0 2px 8px rgba(63,74,126,.06);
  --shadow:    0 3px 9px rgba(63,74,126,.05), 0 1px 29px rgba(63,74,126,.10);
  --shadow-lg: 0 8px 20px rgba(63,74,126,.08), 0 24px 60px rgba(63,74,126,.16);
  --shadow-glow: 0 10px 40px rgba(28,78,255,.22);
  --ring: 0 0 0 3px rgba(28,78,255,.35);
  --blur: 36px;

  /* Motion */
  --e-out: cubic-bezier(.16,.84,.44,1);
  --e-in-out: cubic-bezier(.65,.05,.36,1);
  --t-fast: .18s var(--e-out);
  --t: .32s var(--e-out);
  --t-slow: .5s var(--e-out);

  --header-h: 76px;
  color-scheme: light;
}

/* --------------------------------------------------- 2. Alternative themes */
/* Ivory — warm, editorial, print-like. */
[data-theme="ivory"] {
  --ink:#231F20; --ink-2:#4A423F; --muted:#69615B;
  --paper:#FFFDF9; --paper-2:#F7F2E9; --paper-3:#EFE7D9;
  --border:#E9DFCE; --border-2:#DCCEB4;
  --brand:#7A1F3D; --accent:#C08A2E; --warm:#D4662B; --lav:#D9C7A8;
  --grad-a: linear-gradient(90deg,#7A1F3D,#C08A2E 55%,#D4662B);
  --grad-cta: linear-gradient(90deg,#7A1F3D,#956B24 55%,#BB5A26);
  --grad-b: linear-gradient(90deg,#9A2B4E,#D4AF69 55%,#E07B3C);
  --grad-soft: linear-gradient(135deg, rgba(122,31,61,.09), rgba(192,138,46,.10) 60%, rgba(212,102,43,.08));
  --shadow: 0 3px 9px rgba(90,70,40,.06), 0 1px 29px rgba(90,70,40,.10);
  --ring: 0 0 0 3px rgba(122,31,61,.3);
  color-scheme: light;
}
/* Luxury Ocean — the original dark scheme, kept. */
[data-theme="luxury-ocean"] {
  --ink:#F4F8FC; --ink-2:#D5E2ED; --muted:#93A7BC;
  --paper:#04121E; --paper-2:#071A2B; --paper-3:#0C2639;
  --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.13); --border-2: rgba(255,255,255,.24);
  --brand:#2F7BFF; --brand-ink:#04121E; --accent:#00C2D7; --warm:#E8C77B; --lav:#7F97AE;
  --grad-a: linear-gradient(90deg,#0B5ED7,#00C2D7 55%,#E8C77B);
  --grad-cta: linear-gradient(90deg,#0B5ED7,#007D8B 55%,#926D19);
  --grad-b: linear-gradient(90deg,#2F7BFF,#28D7E8 55%,#F0D79A);
  --grad-soft: linear-gradient(135deg, rgba(11,94,215,.22), rgba(0,194,215,.16) 60%, rgba(232,199,123,.12));
  --grad-line: linear-gradient(180deg, rgba(11,94,215,0), #00C2D7 30%, #E8C77B 70%, rgba(232,199,123,0));
  --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
  --shadow: 0 10px 30px rgba(0,0,0,.34);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.46);
  --shadow-glow: 0 10px 40px rgba(0,194,215,.26);
  --ring: 0 0 0 3px rgba(0,194,215,.45);
  --warning:#F0B429; --warning-bg: rgba(240,180,41,.14);
  color-scheme: dark;
}
[data-theme="dubai-sunset"] {
  --ink:#FFF9F0; --ink-2:#EADFF2; --muted:#A99CBC;
  --paper:#0B0F19; --paper-2:#101522; --paper-3:#191F31;
  --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.13); --border-2: rgba(255,255,255,.24);
  --brand:#6C3CE9; --brand-ink:#FFFFFF; --accent:#FF7A45; --warm:#F4C95D; --lav:#9E8FC4;
  --grad-a: linear-gradient(90deg,#6C3CE9,#FF7A45 55%,#F4C95D);
  --grad-cta: linear-gradient(90deg,#6C3CE9,#D13C00 55%,#976F0A);
  --grad-b: linear-gradient(90deg,#8A5BFF,#FF9563 55%,#FFDA84);
  --grad-soft: linear-gradient(135deg, rgba(108,60,233,.24), rgba(255,122,69,.16) 60%, rgba(244,201,93,.12));
  --grad-line: linear-gradient(180deg, rgba(108,60,233,0), #FF7A45 35%, #F4C95D 70%, rgba(244,201,93,0));
  --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
  --shadow: 0 10px 30px rgba(0,0,0,.34);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.46);
  --shadow-glow: 0 10px 40px rgba(255,122,69,.28);
  --ring: 0 0 0 3px rgba(255,122,69,.45);
  --warning:#F4C95D; --warning-bg: rgba(244,201,93,.14);
  color-scheme: dark;
}
[data-theme="tropical-escape"] {
  --ink:#F2FBF8; --ink-2:#D6EDE6; --muted:#98BCB3;
  --paper:#032726; --paper-2:#063B3B; --paper-3:#0A4D4C;
  --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.13); --border-2: rgba(255,255,255,.24);
  --brand:#0E9F6E; --brand-ink:#022220; --accent:#19C3B1; --warm:#FF6B6B; --lav:#7FAFA6;
  --grad-a: linear-gradient(90deg,#0E9F6E,#19C3B1 55%,#FF6B6B);
  --grad-cta: linear-gradient(90deg,#0C835B,#107F73 55%,#E80000);
  --grad-b: linear-gradient(90deg,#17BE85,#3FDACA 55%,#FF8C8C);
  --grad-soft: linear-gradient(135deg, rgba(14,159,110,.24), rgba(25,195,177,.16) 60%, rgba(255,107,107,.12));
  --grad-line: linear-gradient(180deg, rgba(14,159,110,0), #19C3B1 35%, #F5E6C8 70%, rgba(245,230,200,0));
  --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
  --shadow: 0 10px 30px rgba(0,0,0,.34);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.46);
  --shadow-glow: 0 10px 40px rgba(25,195,177,.28);
  --ring: 0 0 0 3px rgba(25,195,177,.45);
  --warning:#F5E6C8; --warning-bg: rgba(245,230,200,.14);
  color-scheme: dark;
}
[data-theme="european-luxury"] {
  --ink:#FAF7F0; --ink-2:#E3DCD0; --muted:#A79F93;
  --paper:#0D0D0D; --paper-2:#161616; --paper-3:#1F1D1C;
  --surface: rgba(255,255,255,.055); --surface-2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.13); --border-2: rgba(255,255,255,.24);
  --brand:#7A1F3D; --brand-ink:#FFFFFF; --accent:#D4AF69; --warm:#C08A5B; --lav:#9A8F80;
  --grad-a: linear-gradient(90deg,#7A1F3D,#D4AF69 55%,#C08A5B);
  --grad-cta: linear-gradient(90deg,#7A1F3D,#916D2A 55%,#9B683B);
  --grad-b: linear-gradient(90deg,#9C2A4F,#E3C689 55%,#D5A176);
  --grad-soft: linear-gradient(135deg, rgba(122,31,61,.26), rgba(212,175,105,.14) 60%, rgba(192,138,91,.12));
  --grad-line: linear-gradient(180deg, rgba(122,31,61,0), #D4AF69 35%, #C08A5B 70%, rgba(192,138,91,0));
  --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  --shadow: 0 10px 30px rgba(0,0,0,.38);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.5);
  --shadow-glow: 0 10px 40px rgba(212,175,105,.22);
  --ring: 0 0 0 3px rgba(212,175,105,.4);
  --warning:#D4AF69; --warning-bg: rgba(212,175,105,.14);
  color-scheme: dark;
}
[data-theme="vibrant-india"] {
  --ink:#FFF4DC; --ink-2:#EBDCF5; --muted:#AF9ED0;
  --paper:#170A3D; --paper-2:#24115E; --paper-3:#2F1878;
  --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.11);
  --border: rgba(255,255,255,.14); --border-2: rgba(255,255,255,.26);
  --brand:#D4145A; --brand-ink:#FFFFFF; --accent:#FF9933; --warm:#138A72; --lav:#A38FD0;
  --grad-a: linear-gradient(90deg,#D4145A,#FF9933 55%,#138A72);
  --grad-cta: linear-gradient(90deg,#D4145A,#B85C00 55%,#12836C);
  --grad-b: linear-gradient(90deg,#EE3070,#FFAE5C 55%,#1CA88C);
  --grad-soft: linear-gradient(135deg, rgba(212,20,90,.26), rgba(255,153,51,.16) 60%, rgba(19,138,114,.14));
  --grad-line: linear-gradient(180deg, rgba(212,20,90,0), #FF9933 35%, #138A72 70%, rgba(19,138,114,0));
  --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  --shadow: 0 10px 30px rgba(0,0,0,.36);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.48);
  --shadow-glow: 0 10px 40px rgba(255,153,51,.28);
  --ring: 0 0 0 3px rgba(255,153,51,.45);
  --warning:#FF9933; --warning-bg: rgba(255,153,51,.14);
  color-scheme: dark;
}

/* --------------------------------------------------------------- 3. Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { overflow-wrap: break-word; margin: 0 0 var(--sp-3); line-height: 1.12; font-weight: 600; letter-spacing: -.022em; }
h1 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 500; }
h2 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img, video, svg { max-width: 100%; display: block; }
img { height: auto; background: var(--paper-2); }
ul, ol { margin: 0 0 var(--sp-4); padding-inline-start: 1.25rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ 4. Utilities */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--paper-2); }
.section--edge { border-block: 1px solid var(--border); }
.stack > * + * { margin-top: var(--sp-4); }
.grid > *, .detail-layout > *, .stack > *, .toolbar > *, .footer__main > *,
.form-grid > *, .option-grid > *, .stats > *, .carousel > *, .bento > * { min-width: 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); top: -100px; z-index: 300;
  background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); font-weight: 600; transition: top var(--t);
}
.skip-link:focus { top: var(--sp-4); }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.mono-num { font-variant-numeric: tabular-nums; }
.lead { font-size: var(--fs-md); color: var(--muted); max-width: var(--maxw-text); }

/* The signature: a word or line painted with the brand gradient. */
.grad-text {
  background-image: var(--grad-b);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.grad-line {
  width: 2px; border-radius: 2px; background-image: var(--grad-line);
  align-self: stretch; min-height: 2.5rem; flex: none;
}
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .34rem .85rem .34rem .6rem; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--ink-2); margin-bottom: var(--sp-4); text-transform: none;
}
.eyebrow::before {
  content:""; width: 7px; height: 7px; border-radius: 50%;
  background-image: var(--grad-a); flex: none;
}
.eyebrow--on-image,
.hero:not(.hero--plain) .eyebrow,
.cta-band .eyebrow {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}

.glass {
  background: var(--surface);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.glass--strong { background: var(--surface-2); border-color: var(--border-2); }

/* --------------------------------------------------------------- 5. Buttons */
.btn {
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--border-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .8rem 1.45rem; min-height: 46px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  border-radius: var(--r-pill); border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  text-align: center; white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t),
              border-color var(--t), opacity var(--t), color var(--t);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--primary {
  --btn-fg: #fff; --btn-bd: transparent;
  background-image: var(--grad-cta); background-size: 160% 100%; background-position: 0% 50%;
  /* A background is positioned against the padding box but painted out to the
     border box, so with a transparent 1px border that strip sits outside the
     gradient and background-repeat fills it by wrapping to the gradient's far
     end — a sliver of the wrong colour, which a pill radius turns into a
     visible crescent. These two must follow any `background` shorthand: the
     shorthand resets them. */
  background-origin: border-box; background-repeat: no-repeat;
  box-shadow: var(--shadow-glow);
  transition: background-position .6s var(--e-out), transform var(--t-fast), box-shadow var(--t);
}
.btn--primary:hover { background-position: 100% 50%; }
.btn--secondary { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: transparent; }
.btn--ghost { --btn-bg: transparent; --btn-bd: var(--border-2); }
.btn--ghost:hover { --btn-bd: var(--ink); }
.btn--on-image { --btn-bg: rgba(255,255,255,.14); --btn-fg:#fff; --btn-bd: rgba(255,255,255,.34); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.btn--on-image:hover { --btn-bg: rgba(255,255,255,.24); }
/* Anywhere a ghost button lands on photography or the dark CTA band, it has to
   invert — otherwise it inherits the light theme's dark ink and disappears. */
.hero:not(.hero--plain) .btn--ghost,
.cta-band .btn--ghost,
.bento__item--dark .btn--ghost,
.bento__item--grad .btn--ghost {
  --btn-bg: rgba(255,255,255,.14); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hero:not(.hero--plain) .btn--ghost:hover,
.cta-band .btn--ghost:hover { --btn-bg: rgba(255,255,255,.26); --btn-bd: rgba(255,255,255,.5); }
.btn--sm { padding: .5rem 1rem; min-height: 38px; font-size: var(--fs-xs); }
.btn--lg { padding: 1.05rem 2rem; min-height: 56px; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: 44px; height: 44px; min-height: 0; border-radius: 50%; }
.icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.15em; }
.btn .icon { width: 1.15em; height: 1.15em; }
.card__meta .icon { width: 1em; height: 1em; opacity: .7; margin-inline-end: .15rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--brand); font-size: var(--fs-sm); }
.link-arrow svg { transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* ----------------------------------------------------------------- 6. Chips */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2);
}
.chip--accent {
  background: var(--grad-soft); color: var(--ink); border-color: var(--border-2);
  background-origin: border-box; background-repeat: no-repeat;
}
.chip--solid {
  background-image: var(--grad-cta); color: #fff; border-color: transparent; font-weight: 600;
  background-origin: border-box; background-repeat: no-repeat;
}
.chip--demo { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.chip--on-image { background: rgba(10,6,24,.56); color:#fff; border-color: rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------------------------------------------------------------- 7. Header */
.topbar { position: fixed; inset-inline: 0; top: 0; z-index: 100; }
.header {
  position: relative; padding: var(--sp-3) 0;
  transition: background var(--t), box-shadow var(--t), padding var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(var(--blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.header__inner { display: flex; align-items: center; gap: var(--sp-4); }

/* Over a full-bleed hero the header sits on photography, so it inverts until
   it gains its own background on scroll. */
body.has-hero .header:not(.is-scrolled) { color: #fff; }
body.has-hero .header:not(.is-scrolled) .nav__link { color: rgba(255,255,255,.82); }
body.has-hero .header:not(.is-scrolled) .nav__link:hover,
body.has-hero .header:not(.is-scrolled) .nav__link[aria-current="page"] { color: #fff; background: rgba(255,255,255,.14); }
body.has-hero .header:not(.is-scrolled) .brand__name { color: #fff; }
body.has-hero .header:not(.is-scrolled) .brand__sub { color: rgba(255,255,255,.66); }
/* The header sits straight on the hero photograph, and that photograph is now
   whichever one the rotation drew — a snowfield as readily as a night skyline.
   The hero's own scrim is strongest at the top left and fades to nothing at the
   right, which is exactly where the language, currency and theme controls are,
   so the header carries a scrim of its own. Measured against a near-white
   background the controls read 3.6:1 without this and 5.2:1 with it. */
body.has-hero .header:not(.is-scrolled)::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; z-index: -1;
  height: calc(100% + var(--sp-5));
  background: linear-gradient(180deg, rgba(10,6,24,.52), rgba(10,6,24,0));
  pointer-events: none;
}
body.has-hero .header:not(.is-scrolled) .selector__btn,
body.has-hero .header:not(.is-scrolled) .btn--ghost,
body.has-hero .header:not(.is-scrolled) .menu-toggle {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.has-hero .header:not(.is-scrolled) .selector__btn:hover,
body.has-hero .header:not(.is-scrolled) .btn--ghost:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.45); }
.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background-image: var(--grad-a);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  box-shadow: var(--shadow-glow);
}
/* The uploaded logo, in place of the lettermark. Height-constrained so any
   aspect ratio sits on the same baseline as the text beside it. */
.brand__logo {
  height: 40px; width: auto; max-width: 132px; flex: none;
  object-fit: contain; object-position: left center;
  /* img carries a placeholder background globally; on a transparent logo that
     is a visible box, and the inversion below would paint it solid white. */
  background: none;
}
/* The logo is a dark blue wordmark, so lift it off a dark background. */
[data-theme="luxury-ocean"] .brand__logo,
[data-theme="dubai-sunset"] .brand__logo,
[data-theme="tropical-escape"] .brand__logo,
[data-theme="european-luxury"] .brand__logo,
[data-theme="vibrant-india"] .brand__logo,
body.has-hero .header:not(.is-scrolled) .brand__logo { filter: brightness(0) invert(1); }
/* The footer gets no rule of its own. It is painted with --paper-2, which the
   theme already decides: dark themes are covered by the selectors above and
   light ones must be left alone. Inverting it here turned the logo white on a
   white footer. */

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.brand__sub { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; display: block; padding: .52rem .5rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  /* A two-word item such as "South India" was breaking across two lines, which
     pushed the whole row off its baseline. A nav label is never worth wrapping:
     if the row will not fit, the drawer takes over at the breakpoint below. */
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); background: var(--paper-2); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content:""; position: absolute; inset-inline: .72rem; bottom: .18rem; height: 2px;
  border-radius: 2px; background-image: var(--grad-a);
}
.header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; min-width: 0; }
.selector--language, .selector--currency, .selector--theme, .header__cta { display: none; }
@media (min-width: 430px) { .selector--currency { display: block; } }
@media (min-width: 580px) { .selector--language { display: block; } .header__cta { display: inline-flex; } }
@media (min-width: 900px) { .selector--theme { display: block; } }

.selector { position: relative; }
.selector__btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .48rem .68rem; min-height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2); background: var(--paper); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.selector__btn:hover { border-color: var(--ink); }
.selector__btn .caret { width: 12px; height: 12px; opacity: .55; transition: transform var(--t-fast); }
.selector__btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.selector__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 120;
  min-width: 220px; max-height: min(60vh, 420px); overflow-y: auto;
  padding: var(--sp-2); border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.selector.is-open .selector__menu { opacity: 1; transform: none; pointer-events: auto; }
.selector__option {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: .55rem .7rem; border-radius: var(--r-sm); text-align: start;
  font-size: var(--fs-sm); color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast);
}
.selector__option:hover { background: var(--paper-2); color: var(--ink); }
.selector__option[aria-selected="true"] { color: var(--ink); background: var(--grad-soft); font-weight: 600; }
.selector__option .flag { font-size: 1.05rem; }
.selector__option .native { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--muted); }
.selector__group-label { padding: .4rem .7rem; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.swatches { display: flex; gap: 3px; }
.swatches i { width: 11px; height: 11px; border-radius: 3px; display: block; border: 1px solid rgba(0,0,0,.12); }

.menu-toggle { display: inline-flex; }
.menu-toggle .bar { display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform var(--t), opacity var(--t-fast); }
.menu-toggle .bar + .bar { margin-top: 4px; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.drawer { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: 1fr min(88vw, 400px); visibility: hidden; overflow: hidden; }
[dir="rtl"] .drawer { grid-template-columns: min(88vw, 400px) 1fr; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { background: rgba(14,7,38,.42); opacity: 0; transition: opacity var(--t); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[dir="rtl"] .drawer__scrim { grid-column: 2; grid-row: 1; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  grid-column: 2; grid-row: 1; background: var(--paper);
  border-inline-start: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform var(--t);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
[dir="rtl"] .drawer__panel { grid-column: 1; border-inline-start: none; border-inline-end: 1px solid var(--border); transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.drawer__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem .9rem; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 500;
  transition: background var(--t-fast);
}
.drawer__nav a:hover { background: var(--paper-2); }
.drawer__nav a[aria-current="page"] { background: var(--grad-soft); font-weight: 600; }
.drawer__section-title { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }
.drawer__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px,1fr)); gap: var(--sp-2); }
.pill-option {
  padding: .5rem; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--paper); font-size: var(--fs-xs); font-weight: 600; text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pill-option[aria-selected="true"] {
  border-color: transparent; background: var(--grad-soft);
  background-origin: border-box; background-repeat: no-repeat;
}

/* --------------------------------------------------------------- 8. Notices */
.notice-bar {
  position: relative; z-index: 1;
  /* Inverted against the page, so it stays readable whether the active theme
     is light or dark — --ink and --paper swap together. */
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-xs);
}
.notice-bar__inner { display: flex; align-items: center; gap: var(--sp-3); padding-block: .55rem; }
.notice-bar p { margin: 0; }
.notice-bar button { margin-inline-start: auto; color: inherit; opacity: .75; padding: .2rem .5rem; border-radius: var(--r-sm); }
.notice-bar button:hover { opacity: 1; background: color-mix(in srgb, var(--paper) 18%, transparent); }

/* ------------------------------------------------------------------ 9. Hero */
.hero { position: relative; display: grid; align-items: end; isolation: isolate; overflow: hidden; min-height: min(100svh, 940px); color: var(--on-image); }
.hero--compact { min-height: clamp(400px, 56vh, 620px); align-items: center; }
.hero--plain { min-height: 0; color: var(--ink); background: none; }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--paper-3); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 26s var(--e-in-out) infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,7,38,.58) 0%, rgba(14,7,38,.14) 26%, rgba(14,7,38,.46) 64%, rgba(14,7,38,.72) 100%),
    linear-gradient(90deg, rgba(14,7,38,.74), rgba(14,7,38,.24) 58%, rgba(14,7,38,0) 100%);
}
[dir="rtl"] .hero__media::after { transform: scaleX(-1); }
.hero__inner { padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8); position: relative; z-index: 1; }
.hero--compact .hero__inner { padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-6); }
.hero__title { font-size: var(--fs-hero); max-width: 15ch; margin-bottom: var(--sp-4); text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.hero--compact .hero__title { font-size: var(--fs-3xl); max-width: 20ch; }
.hero__sub { font-size: var(--fs-md); color: rgba(255,255,255,.92); max-width: 50ch; margin-bottom: var(--sp-6); text-shadow: 0 1px 18px rgba(0,0,0,.5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.hero__scroll {
  display: none; position: absolute; inset-inline-start: 50%; bottom: var(--sp-5); translate: -50% 0;
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75);
  flex-direction: column; align-items: center; gap: .5rem;
}
.hero__scroll .line { width: 2px; height: 40px; border-radius: 2px; background-image: var(--grad-line); animation: scrollPulse 2.4s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { opacity:.35; transform: scaleY(.6); transform-origin: top; } 50% { opacity:1; transform: scaleY(1); } }

/* Trust strip sitting under the hero */
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; font-size: var(--fs-xs); color: rgba(255,255,255,.82); }
.hero__proof b { display: block; font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 600; color: #fff; line-height: 1.1; }

.searchbar {
  display: grid; gap: var(--sp-3); padding: var(--sp-4);
  border-radius: var(--r-2xl); max-width: 800px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(var(--blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border: 1px solid rgba(255,255,255,.26); box-shadow: var(--shadow-lg);
}
.searchbar__row { display: grid; gap: var(--sp-3); }
@media (min-width: 560px) { .searchbar__row { grid-template-columns: 1fr auto; align-items: center; } }
.searchbar__field { position: relative; }
.searchbar__field .icon { position: absolute; inset-inline-start: 1rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); pointer-events: none; z-index: 1; }
.searchbar input[type="search"], .searchbar input[type="text"] {
  width: 100%; padding-block: .95rem; padding-inline: 2.9rem 1rem; min-height: 54px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--paper); color: var(--ink);
}
.searchbar input::placeholder { color: var(--muted); }
.searchbar input:focus { outline: none; box-shadow: var(--ring); }
.searchbar input::-webkit-search-cancel-button { filter: grayscale(1); }
.suggestions {
  position: absolute; inset-inline: 0; top: calc(100% + .4rem); z-index: 30;
  max-height: 300px; overflow-y: auto; padding: var(--sp-2);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--paper); box-shadow: var(--shadow-lg);
}
.suggestions:empty { display: none; }
.suggestions button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: start; padding: .5rem .55rem; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-2); }
.suggestions button:hover, .suggestions button.is-active { background: var(--paper-2); color: var(--ink); }
.suggestions img { width: 46px; height: 34px; object-fit: cover; border-radius: 8px; flex: none; }
.suggestions .kind { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--muted); }
.quick-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.quick-links .label { font-size: var(--fs-xs); color: rgba(255,255,255,.72); letter-spacing: .08em; text-transform: uppercase; }
.quick-links a { padding: .32rem .8rem; border-radius: var(--r-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); font-size: var(--fs-xs); color: #fff; transition: all var(--t-fast); }
.quick-links a:hover { background: rgba(255,255,255,.28); }

/* -------------------------------------------------------- 10. Section heads */
.section-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.section-head__title { margin: 0; }
.section-head__sub { color: var(--muted); max-width: var(--maxw-text); margin: 0; font-size: var(--fs-md); }
.section-head__action { display: none; }

/* ------------------------------------------------------------ 11. Card grid */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 305px), 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%;
  border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card:hover { transform: translateY(-6px); border-color: var(--border-2); box-shadow: var(--shadow-lg); }
.card:focus-within { border-color: var(--brand); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card__media img { transform: scale(1.07); }
.card__badges { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem; max-width: calc(100% - 5rem); }
/* A badge is painted on top of the card's photograph, so it cannot rely on the
   theme's paper colour being behind it. A dark blurred plate under white text
   reads on any picture, which a translucent tint does not. */
.card__badges .chip {
  background: rgba(10, 6, 24, .62); background-image: none; color: #fff;
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  max-width: 100%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block;
}
.card__fav { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 3; }
.card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); flex: 1; }
.card__title { font-size: var(--fs-md); font-weight: 600; margin: 0; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: break-word; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: var(--fs-xs); color: var(--muted); }
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.card__text { font-size: var(--fs-sm); color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }
.card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.card__price { display: flex; flex-direction: column; line-height: 1.15; }
.card__price .from { font-size: var(--fs-xs); color: var(--muted); }
.card__price .value { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.card__price .unit { font-size: var(--fs-xs); color: var(--muted); }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Image-led destination card: caption rides on the photo, revealed on hover. */
.card--dest { border: none; box-shadow: var(--shadow); }
.card--dest .card__media { aspect-ratio: 3 / 4; }
.card--dest .card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 38%, rgba(14,7,38,.82) 100%); }
.card--dest .card__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; color: #fff; padding: var(--sp-4); gap: var(--sp-2); }
.card--dest .card__title { color: #fff; font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 500; }
.card--dest .card__meta { color: rgba(255,255,255,.78); }
.card--dest .card__text { color: rgba(255,255,255,.86); -webkit-line-clamp: 2; line-clamp: 2; max-height: 0; opacity: 0; transition: max-height var(--t-slow), opacity var(--t); }
.card--dest:hover .card__text, .card--dest:focus-within .card__text { max-height: 4em; opacity: 1; }
.card--dest .card__foot { border-top-color: rgba(255,255,255,.22); }
.card--dest .card__price .from, .card--dest .card__price .unit { color: rgba(255,255,255,.72); }
.card--dest .card__price .value { color: #fff; }
.card--dest .link-arrow { color: #fff; }
@media (min-width: 720px) { .card--dest .card__media { aspect-ratio: 4 / 5; } }

.feature {
  padding: var(--sp-5); border-radius: var(--r-lg); background: var(--paper);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
  display: block;
}
.feature:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: var(--shadow); }
.feature__icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: var(--sp-4); background: var(--grad-soft); color: var(--brand);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.feature p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* ------------------------------------------------------------- 12. Carousel */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 80vw, 300px);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block-end: var(--sp-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; min-width: 0; }
.carousel__track > .card, .carousel__track > .review { height: 100%; }
.carousel__nav { display: none; gap: var(--sp-2); }
.carousel__btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-2); background: var(--paper); color: var(--ink); transition: all var(--t-fast); }
.carousel__btn:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.carousel__btn[disabled] { opacity: .3; pointer-events: none; }
[dir="rtl"] .carousel__btn svg { transform: scaleX(-1); }

/* ----------------------------------------------------------- 13. Stats / CTA */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.stat { text-align: start; padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.stat__value {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 0;
  background-image: var(--grad-b); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.stat__label { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-2); }
.stat__note { font-size: var(--fs-xs); color: var(--warning); margin-top: var(--sp-1); }

.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-2xl);
  padding: clamp(2rem, 6vw, 4.5rem);
  background: var(--ink); color: #fff; text-align: center;
}
.cta-band::before {
  content:""; position: absolute; inset: -40% -10% auto; height: 80%;
  background-image: var(--grad-a); filter: blur(90px); opacity: .5; pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; color: #fff; }
.cta-band .lead { margin-inline: auto; text-align: center; color: rgba(255,255,255,.82); }
.cta-band .hero__actions { justify-content: center; margin-top: var(--sp-5); margin-bottom: 0; }

/* -------------------------------------------------------------- 14. Filters */
.toolbar { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.toolbar__count { font-size: var(--fs-sm); color: var(--muted); }
.filters-toggle { display: inline-flex; }
.filters { display: grid; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--border); }
.filters[hidden] { display: none; }
.field { display: grid; gap: .4rem; }
.field > label, .field > .field__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%; padding: .7rem .9rem; min-height: 46px;
  border-radius: var(--r-md); border: 1px solid var(--border-2);
  background: var(--paper); color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { min-height: 120px; resize: vertical; }
select {
  appearance: none; padding-inline-end: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383799E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px;
}
[dir="rtl"] select { background-position: left .8rem center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
input[type="range"] { width: 100%; min-height: 0; padding: 0; background: transparent; accent-color: var(--brand); border: none; }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; min-height: 0; flex: none; margin-top: .22rem; accent-color: var(--brand); padding: 0; }
.stepper { display: inline-flex; align-items: center; gap: var(--sp-3); }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-2); display: grid; place-items: center; font-size: 1.05rem; line-height: 1; transition: all var(--t-fast); }
.stepper button:hover { border-color: var(--ink); background: var(--paper-2); }
.stepper output { min-width: 2.2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.segmented { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border-radius: var(--r-pill); background: var(--paper-2); border: 1px solid var(--border); }
.segmented button { padding: .45rem .9rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); transition: all var(--t-fast); white-space: nowrap; }
.segmented button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }

.tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--paper); font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; transition: all var(--t-fast); }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: transparent; font-weight: 600; }

/* --------------------------------------------------------------- 15. States */
.empty-state, .error-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--muted); }
.empty-state h3, .error-state h3 { color: var(--ink); }
.error-state { border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.skeleton { position: relative; overflow: hidden; background: var(--paper-2); border-radius: var(--r-lg); border: 1px solid var(--border); }
.skeleton::after { content:""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton--card { aspect-ratio: 3/4; }

/* ---------------------------------------------------------- 16. Detail page */
.breadcrumbs { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-4); }
.breadcrumbs a:hover { color: var(--ink); }
.hero .breadcrumbs { color: rgba(255,255,255,.7); }
.hero .breadcrumbs a:hover { color: #fff; }
.breadcrumbs .sep { opacity: .45; }
[dir="rtl"] .breadcrumbs .sep { transform: scaleX(-1); display: inline-block; }

.detail-layout { display: grid; gap: var(--sp-6); align-items: start; }
.detail-aside { display: grid; gap: var(--sp-4); }
.panel { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.panel--tint { background: var(--paper-2); }
.panel--sticky { position: static; }
.panel h3 { font-size: var(--fs-md); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.fact { display: grid; gap: .2rem; }
.fact__label { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.fact__value { font-weight: 600; }

.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.list-check li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
.list-check li::before { content:""; flex: none; width: 18px; height: 18px; margin-top: .2rem; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9F6E' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.list-cross li::before { background: color-mix(in srgb, var(--danger) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D92D3C' stroke-width='3'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px no-repeat; }

.timeline { display: grid; gap: var(--sp-5); position: relative; padding-inline-start: var(--sp-6); }
.timeline::before { content:""; position: absolute; inset-block: .6rem; inset-inline-start: 5px; width: 2px; border-radius: 2px; background-image: var(--grad-line); }
.timeline__item { position: relative; }
.timeline__item::before {
  content:""; position: absolute; inset-inline-start: calc(var(--sp-6) * -1 + 1px); top: .5rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.timeline__day { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.timeline__title { font-size: var(--fs-md); font-weight: 600; margin: .15rem 0 .35rem; }
.timeline__text { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; }
th, td { padding: .85rem 1rem; text-align: start; border-bottom: 1px solid var(--border); }
th { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--paper-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper-2); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }

.accordion { display: grid; gap: var(--sp-2); }
.acc-item { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; transition: box-shadow var(--t), border-color var(--t); }
.acc-item:has(.acc-trigger[aria-expanded="true"]) { box-shadow: var(--shadow); border-color: var(--border-2); }
.acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; padding: var(--sp-4) var(--sp-5); text-align: start; font-weight: 600; font-size: var(--fs-base); transition: background var(--t-fast); }
.acc-trigger:hover { background: var(--paper-2); }
.acc-trigger .plus { flex: none; width: 22px; height: 22px; position: relative; border-radius: 50%; background: var(--paper-2); }
.acc-trigger .plus::before, .acc-trigger .plus::after { content:""; position: absolute; inset-inline: 6px; top: 10.2px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform var(--t); }
.acc-trigger .plus::after { transform: rotate(90deg); }
.acc-trigger[aria-expanded="true"] .plus { background: var(--grad-soft); }
.acc-trigger[aria-expanded="true"] .plus::after { transform: rotate(0); }
.acc-panel { padding: 0 var(--sp-5) var(--sp-5); color: var(--muted); font-size: var(--fs-sm); }
.acc-panel[hidden] { display: none; }

.estimator__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--border-2); font-weight: 600; }
.estimator__total .value { font-family: var(--font-display); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; background-image: var(--grad-b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.breakdown { display: grid; gap: .45rem; font-size: var(--fs-sm); }
.breakdown__row { display: flex; justify-content: space-between; gap: var(--sp-4); color: var(--muted); }
.breakdown__row .amt { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- 17. Reviews */
.review { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--border); box-shadow: var(--shadow-sm); height: 100%; }
.review__head { display: flex; align-items: center; gap: var(--sp-3); }
.review__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-3); }
.review__name { font-weight: 600; font-size: var(--fs-sm); margin: 0; }
.review__where { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.review__text { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.review__text::before { content: "\201C"; font-family: var(--font-display); font-size: 2.4rem; line-height: 0; color: var(--accent); margin-inline-end: .2rem; vertical-align: -.4rem; }
.stars { display: inline-flex; gap: 2px; color: var(--warm); }
.stars svg { width: 15px; height: 15px; }
.stars .off { opacity: .25; }

/* --------------------------------------------------------------- 18. Gallery */
.masonry { column-count: 1; column-gap: var(--sp-4); }
.masonry__item { break-inside: avoid; margin-bottom: var(--sp-4); border-radius: var(--r-lg); overflow: hidden; position: relative; display: block; width: 100%; background: var(--paper-3); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.masonry__item img { width: 100%; transition: transform var(--t-slow); }
.masonry__item:hover img { transform: scale(1.05); }
.masonry__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: var(--sp-5) var(--sp-3) var(--sp-3);
  background: linear-gradient(transparent, rgba(14,7,38,.82)); color: #fff;
  font-size: var(--fs-xs); opacity: 0; transform: translateY(100%); transition: all var(--t-slow);
  text-align: start;
}
.masonry__item:hover .masonry__cap, .masonry__item:focus-visible .masonry__cap { opacity: 1; transform: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-4); background: rgba(10,5,22,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: min(100%, 1400px); max-height: 80svh; object-fit: contain; border-radius: var(--r-lg); }
.lightbox__cap { position: absolute; inset-inline: 0; bottom: var(--sp-5); text-align: center; color: #fff; font-size: var(--fs-sm); padding-inline: var(--sp-6); }
.lightbox__cap .count { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.6); margin-top: .25rem; }
.lightbox__cap .credit { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.55); margin-top: .2rem; }
.lightbox__cap .credit a { text-decoration: underline; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(8px); transition: background var(--t-fast); }
.lightbox__btn:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: var(--sp-4); inset-inline-end: var(--sp-4); }
.lightbox__prev { inset-inline-start: var(--sp-3); top: 50%; translate: 0 -50%; }
.lightbox__next { inset-inline-end: var(--sp-3); top: 50%; translate: 0 -50%; }
[dir="rtl"] .lightbox__prev svg, [dir="rtl"] .lightbox__next svg { transform: scaleX(-1); }

/* ------------------------------------------------------------- 19. Builder */
.stepper-bar { display: flex; gap: .3rem; margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-2); }
.stepper-bar::-webkit-scrollbar { display: none; }
.stepper-bar__step { flex: 1 0 auto; min-width: 62px; display: grid; gap: .45rem; text-align: start; }
.stepper-bar__bar { height: 3px; border-radius: 2px; background: var(--border); transition: background var(--t); }
.stepper-bar__step.is-done .stepper-bar__bar { background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.stepper-bar__step.is-active .stepper-bar__bar { background-image: var(--grad-a); }
.stepper-bar__label { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper-bar__step.is-active .stepper-bar__label { color: var(--ink); font-weight: 600; }
.step-panel[hidden] { display: none; }
.step-panel { animation: fadeUp .4s var(--e-out) both; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,168px),1fr)); gap: var(--sp-3); }
.option { position: relative; display: grid; gap: .3rem; padding: var(--sp-4); text-align: start; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--paper); transition: all var(--t-fast); cursor: pointer; width: 100%; }
.option:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.option[aria-pressed="true"], .option.is-selected { border-color: var(--accent); background: var(--grad-soft); box-shadow: var(--shadow); }
.option__title { font-weight: 600; font-size: var(--fs-sm); }
.option__meta { font-size: var(--fs-xs); color: var(--muted); }
.option__price { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.option__thumb { aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; margin-bottom: .3rem; }
.option__thumb img { width: 100%; height: 100%; object-fit: cover; }
.builder-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.builder-actions .btn { flex: 1; }

/* ---------------------------------------------------------------- 20. Forms */
.form-grid { display: grid; gap: var(--sp-4); }
/* The availability clause above the submit button. Set as a quiet notice, not
   as fine print: it is a term of the quotation, so it has to be read. */
.form-note {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.form-actions > .btn { flex: 1 1 auto; max-width: 100%; }
.form-status { padding: var(--sp-5); border-radius: var(--r-lg); font-size: var(--fs-sm); }
.form-status--ok { background: color-mix(in srgb, var(--ok) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
.form-status--err { background: color-mix(in srgb, var(--danger) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); }
.form-status h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }

/* -------------------------------------------------------------- 21. Floating */
.fab-stack { position: fixed; inset-inline-end: var(--sp-4); bottom: var(--sp-4); z-index: 95; display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-end; }
.fab { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.2rem; min-height: 52px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow-lg); transition: transform var(--t-fast), box-shadow var(--t); border: 1px solid transparent; }
.fab:hover { transform: translateY(-3px) scale(1.02); }
.fab--wa { background: #25D366; color: #06331A; }
.fab--call { background: var(--paper); color: var(--ink); border-color: var(--border-2); }
.fab--enquire { background-image: var(--grad-a); color: #fff; }
.fab svg { width: 20px; height: 20px; flex: none; }
.fab .fab__label { display: none; }
.to-top { position: fixed; inset-inline-start: var(--sp-4); bottom: var(--sp-4); z-index: 94; opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t); transform: translateY(10px); background: var(--paper); box-shadow: var(--shadow); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* --------------------------------------------------------------- 22. Footer */
.footer { margin-top: var(--section-y); border-top: 1px solid var(--border); background: var(--paper-2); }
.footer__main { display: grid; gap: var(--sp-6); padding-block: var(--sp-8); }
.footer__brand { max-width: 36ch; }
.footer__brand p { font-size: var(--fs-sm); color: var(--muted); }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.footer__col h4 { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__col a { font-size: var(--fs-sm); color: var(--ink-2); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--ink); }
.newsletter { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.newsletter__form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.newsletter__form input { flex: 1 1 min(200px, 100%); min-width: 0; }
.social { display: flex; gap: var(--sp-2); }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-2); background: var(--paper); color: var(--ink-2); transition: all var(--t-fast); }
.social a:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }
.footer__bottom { display: grid; gap: var(--sp-3); padding-block: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__demo { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--warning-bg); border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent); color: var(--warning); }

/* ------------------------------------------------------- 23. Article / prose */
.prose { max-width: var(--maxw-text); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose p { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.8; }
.prose > :first-child { margin-top: 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-5); }

/* ============================================================================
   24. WIDGETS
   ========================================================================== */

/* ---- Bento grid: one asymmetric block that carries a whole section --------- */
.bento { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.bento__item {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--paper); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 200px; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.bento__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-2); }
.bento__item--media { padding: 0; min-height: 280px; color: #fff; justify-content: flex-end; border: none; }
.bento__item--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--t-slow); }
.bento__item--media:hover img { transform: scale(1.06); }
.bento__item--media::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,7,38,.1) 35%, rgba(14,7,38,.85)); z-index: 1; }
.bento__item--media > * { position: relative; z-index: 2; }
.bento__item--media .bento__body { padding: var(--sp-5); }
.bento__item--dark { background: var(--ink); color: #fff; border-color: transparent; }
.bento__item--dark .bento__text, .bento__item--dark .card__meta { color: rgba(255,255,255,.72); }
.bento__item--grad {
  background-image: var(--grad-a); color: #fff; border-color: transparent;
  background-origin: border-box; background-repeat: no-repeat;
}
.bento__item--grad .bento__text { color: rgba(255,255,255,.85); }
.bento__title { font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 500; margin: 0; letter-spacing: -.02em; }
.bento__text { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.bento__big { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; margin: 0; font-weight: 600; }

/* ---- Marquee: a continuously scrolling strip of destinations -------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-3); width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--paper); font-size: var(--fs-sm); white-space: nowrap; color: var(--ink-2); }
.marquee__item img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.marquee__item b { color: var(--ink); font-weight: 600; }
[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* ---- Seasonality: 12 months derived from best_time ----------------------- */
.season { display: grid; gap: var(--sp-3); }
.season__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.season__month { display: grid; gap: .3rem; justify-items: center; }
.season__bar { width: 100%; height: 42px; border-radius: 6px; background: var(--paper-3); position: relative; overflow: hidden; }
.season__bar span { position: absolute; inset-inline: 0; bottom: 0; border-radius: 6px; }
.season__bar[data-rating="best"] span { height: 100%; background-image: var(--grad-a); }
.season__bar[data-rating="good"] span { height: 62%; background: color-mix(in srgb, var(--accent) 45%, var(--paper-3)); }
.season__bar[data-rating="shoulder"] span { height: 30%; background: var(--border-2); }
.season__label { font-size: 9px; color: var(--muted); letter-spacing: .02em; }
.season__legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }
.season__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: .35rem; vertical-align: -1px; }
.season__legend .k-best { background-image: var(--grad-a); }
.season__legend .k-good { background: color-mix(in srgb, var(--accent) 45%, var(--paper-3)); }
.season__legend .k-shoulder { background: var(--border-2); }

/* ---- Quick facts strip --------------------------------------------------- */
.quickfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 620px) { .quickfacts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .quickfacts { grid-template-columns: repeat(6, 1fr); } }
.quickfact { background: var(--paper); padding: var(--sp-4); display: grid; gap: .25rem; }
.quickfact__label { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.quickfact__value { font-weight: 600; font-size: var(--fs-sm); }

/* ---- Countdown ----------------------------------------------------------- */
.countdown { display: flex; gap: var(--sp-2); }
.countdown__unit { min-width: 46px; padding: .4rem .3rem; border-radius: var(--r-md); background: var(--ink); color: #fff; text-align: center; }
.countdown__num { display: block; font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown__lab { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.countdown--ended { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Rating summary ------------------------------------------------------ */
.rating-summary { display: grid; gap: var(--sp-5); align-items: center; }
.rating-score { text-align: center; }
.rating-score__num { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; font-weight: 600; background-image: var(--grad-b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.rating-score__of { font-size: var(--fs-sm); color: var(--muted); }
.rating-bars { display: grid; gap: .4rem; }
.rating-bar { display: grid; grid-template-columns: 2.6rem 1fr 2.4rem; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.rating-bar__track { height: 8px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.rating-bar__fill { height: 100%; border-radius: 4px; background-image: var(--grad-a); }

/* ---- Wishlist ------------------------------------------------------------ */
.wish-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); border: 1px solid var(--border); color: var(--ink); transition: all var(--t-fast); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wish-btn:hover { transform: scale(1.08); }
.wish-btn svg { width: 17px; height: 17px; }
.wish-btn[aria-pressed="true"] { background: var(--danger); border-color: transparent; color: #fff; }
.wish-btn[aria-pressed="true"] svg { fill: currentColor; }
.btn[data-wish][aria-pressed="true"] { border-color: var(--danger); color: var(--danger); }
.btn[data-wish][aria-pressed="true"] svg { fill: currentColor; }
.wish-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background-image: var(--grad-a); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.wish-trigger { position: relative; }

/* ---- Compare tray -------------------------------------------------------- */
.compare-tray {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 96;
  background: var(--paper); border-top: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  transform: translateY(110%); transition: transform var(--t);
  padding-block: var(--sp-3);
}
.compare-tray.is-open { transform: none; }
.compare-tray__inner { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.compare-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem .35rem .35rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--paper-2); font-size: var(--fs-xs); }
.compare-item img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.compare-item button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.compare-item button:hover { background: var(--border); color: var(--ink); }
.compare-table th:first-child, .compare-table td:first-child { position: sticky; inset-inline-start: 0; background: var(--paper); z-index: 1; }
.compare-table tbody tr:hover td:first-child { background: var(--paper-2); }

/* ---- Tabbed showcase ----------------------------------------------------- */
.showcase { border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--paper); box-shadow: var(--shadow); }
.showcase__tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); background: var(--paper-2); }
.showcase__tabs::-webkit-scrollbar { display: none; }
.showcase__tab { position: relative; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; transition: color var(--t-fast); }
.showcase__tab:hover { color: var(--ink); }
.showcase__tab[aria-selected="true"] { color: var(--ink); background: var(--paper); }
.showcase__tab[aria-selected="true"]::after { content:""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background-image: var(--grad-a); }
.showcase__panel { display: grid; gap: var(--sp-5); padding: var(--sp-6); }
.showcase__panel[hidden] { display: none; }
.showcase__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10; background: var(--paper-3); }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- World map with pins ------------------------------------------------- */
.worldmap { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--paper-2); border: 1px solid var(--border); padding: var(--sp-4); }
.worldmap svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.worldmap__ocean { fill: var(--paper-2); }
/* Land sits a step off the ocean — enough to read as a coastline, not enough
   to compete with the pins, which are the only thing here you can click.
   Mixed from --ink rather than a fixed tone so every theme, light or dark,
   gets the same separation without a per-theme override. */
.worldmap .land {
  fill: color-mix(in srgb, var(--ink) 9%, var(--paper-2));
  stroke: color-mix(in srgb, var(--ink) 20%, transparent);
  stroke-width: .5;
}

/* One band of light drifting across the whole widget. A single element
   translating on the compositor: no layout, no paint, no per-pin cost. Kept
   under 8% so it never washes out a pin or the caption beneath. */
.worldmap__sweep {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg,
              transparent 38%,
              color-mix(in srgb, var(--brand) 7%, transparent) 50%,
              transparent 62%);
  background-size: 260% 100%;
  animation: mapSweep 26s linear infinite;
}
@keyframes mapSweep { from { background-position: 120% 0; } to { background-position: -60% 0; } }

/* Three routes, drawn once each cycle and faded out. --route-length comes from
   the template because the dash has to match the path's own length. */
.worldmap__route {
  fill: none; stroke: url(#maproute); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 26 calc(var(--route-length) * 1px);
  stroke-dashoffset: calc(var(--route-length) * 1px);
  opacity: .85;
  animation: mapRoute 9s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes mapRoute {
  0%        { stroke-dashoffset: calc(var(--route-length) * 1px); opacity: 0; }
  8%        { opacity: .85; }
  62%, 100% { stroke-dashoffset: calc(var(--route-length) * -0.15px); opacity: 0; }
}

/* Pins arrive once, staggered, when the map scrolls into view. */
.worldmap__pin {
  cursor: pointer; transition: transform var(--t-fast);
  transform-box: fill-box; transform-origin: center;
}
[data-reveal].is-revealed .worldmap__pin {
  animation: mapPin .5s var(--e-out) backwards;
}
@keyframes mapPin { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.worldmap__pin circle { fill: var(--accent); stroke: var(--paper); stroke-width: 1.4; }
.worldmap__pin:hover circle, .worldmap__pin:focus circle { fill: var(--brand); }
.worldmap__pin:hover { transform: scale(1.5); }

/* Motion is decoration here; the map reads identically without it. */
@media (prefers-reduced-motion: reduce) {
  .worldmap__sweep { animation: none; }
  .worldmap__route { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .5; }
  [data-reveal].is-revealed .worldmap__pin { animation: none; }
}
.worldmap__tip { position: absolute; pointer-events: none; padding: .35rem .7rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-xs); white-space: nowrap; transform: translate(-50%, -140%); opacity: 0; transition: opacity var(--t-fast); z-index: 3; }
.worldmap__tip.is-visible { opacity: 1; }

/* ---- Recently viewed ----------------------------------------------------- */
.recent-strip { display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-2); }
.recent-strip::-webkit-scrollbar { display: none; }
.recent-chip { display: flex; align-items: center; gap: .6rem; padding: .4rem .9rem .4rem .4rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--paper); font-size: var(--fs-sm); white-space: nowrap; transition: all var(--t-fast); }
.recent-chip:hover { border-color: var(--ink); transform: translateY(-2px); }
.recent-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---- Mini currency converter -------------------------------------------- */
.fx { display: grid; gap: var(--sp-3); }
.fx__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); align-items: end; }
.fx__swap { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-2); display: grid; place-items: center; background: var(--paper); }
.fx__out { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.fx__note { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Progress ring (used by the builder summary) ------------------------- */
.ring { display: grid; place-items: center; position: relative; width: 62px; height: 62px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .track { stroke: var(--paper-3); }
.ring .bar { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset var(--t-slow); }
.ring__label { position: absolute; font-size: var(--fs-xs); font-weight: 700; }

/* ---- Photo credit -------------------------------------------------------- */
.credit-line { font-size: var(--fs-xs); color: var(--muted); }
.credit-line a { text-decoration: underline; }

/* ------------------------------------------------------------- 25. Animation */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--e-out), transform .7s var(--e-out); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal-delay="2"] { transition-delay: .14s; }
[data-reveal-delay="3"] { transition-delay: .21s; }
[data-reveal-delay="4"] { transition-delay: .28s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- 26. RTL/i18n */
[dir="rtl"] { --font-body: var(--font-arabic); }
[dir="rtl"] h1, [dir="rtl"] h2 { font-family: var(--font-arabic); letter-spacing: 0; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .stat__value, [dir="rtl"] .card__price .value, [dir="rtl"] .rating-score__num { direction: ltr; }
.phone-number, [href^="tel:"], .card__meta a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .phone-number { text-align: right; }
[lang="ar"] .brand__sub { letter-spacing: 0; }

/* ------------------------------------------------------------ 27. Responsive */
@media (min-width: 560px) {
  .grid--2, .grid--cards { gap: var(--sp-5); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .masonry { column-count: 2; }
  .fab .fab__label { display: inline; }
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .hero__scroll { display: flex; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .rating-summary { grid-template-columns: auto 1fr; }
}
@media (min-width: 900px) {
  :root { --header-h: 88px; }
  .header { padding: var(--sp-4) 0; }
  .header.is-scrolled { padding: var(--sp-3) 0; }
  .section-head { grid-template-columns: 1fr auto; align-items: end; }
  .section-head__sub { grid-column: 1; }
  .section-head__action { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .carousel__nav { display: flex; }
  .carousel__track { grid-auto-columns: 320px; margin-inline: 0; padding-inline: 0; }
  .masonry { column-count: 3; }
  .detail-layout { grid-template-columns: minmax(0,1fr) minmax(320px, 390px); gap: var(--sp-7); }
  .panel--sticky { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  .filters { grid-template-columns: repeat(3, 1fr); }
  .footer__main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); }
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
  .toolbar { grid-template-columns: 1fr auto; align-items: center; }
  .builder-actions .btn { flex: 0 1 auto; }
  .builder-actions { justify-content: space-between; }
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); }
  .bento__item--wide { grid-column: span 2; }
  .bento__item--tall { grid-row: span 2; }
  .bento__item--half { grid-column: span 2; }
  .showcase__panel { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .showcase__panel--reverse .showcase__media { order: -1; }
}
/* The full nav only fits from here; below this the drawer handles it. Measured,
   not guessed: at 1180px the row is still 47px too wide even fully tightened. */
@media (min-width: 1280px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
}
/* Between fitting and comfortable, buy the room back from the spacing rather
   than letting a label wrap or the CTA slide off the edge. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .header__inner { gap: 12px; }
  .nav__link { padding-inline: .4rem; font-size: .845rem; }
}
@media (min-width: 1200px) {
  .masonry { column-count: 4; }
  .grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .carousel__track { grid-auto-columns: 340px; }
}
@media (min-width: 1700px) { :root { --maxw: 1500px; } }

@media print {
  .topbar, .drawer, .fab-stack, .to-top, .footer, .notice-bar, .carousel__nav, .compare-tray { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .panel, .glass { background: none; border-color: #ccc; box-shadow: none; backdrop-filter: none; }
}

/* ------------------------------------------------- 28. Reduced motion & a11y */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
  .marquee__track { animation: none; }
  .card:hover, .btn:hover, .feature:hover, .bento__item:hover { transform: none; }
  .card--dest .card__text { max-height: 4em; opacity: 1; }
}
@media (prefers-contrast: more) {
  :root { --border: #B9B2CE; --border-2: #8E86A6; --muted: #4A4263; }
}

/* ---------------------------------------------- 29. Server-rendered extras */
.toast-host {
  position: fixed; inset-inline: 0; bottom: 1rem; z-index: 220;
  display: grid; justify-items: center; gap: .5rem; pointer-events: none; padding-inline: 1rem;
}
.toast {
  padding: .7rem 1.1rem; font-size: var(--fs-sm); max-width: min(100%, 420px);
  border-radius: var(--r-md); background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-lg);
}
.btn.is-disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.suggestions .kind { text-transform: capitalize; }
/* Django renders selects and inputs into .field; keep them on the shared styling.
   Checkboxes and radios are excluded — stretching them to full width pushes
   their label off the side of the panel. */
.field select,
.field textarea,
.field input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
.check input[type="checkbox"], .check input[type="radio"] { width: 18px; }

/* ------------------------------------------- 30. South India & chauffeur services */
/* A quoted price is a phrase, not a number, so it is sized to read as text. */
.card__price .value--quote { font-size: var(--fs-md); letter-spacing: -.01em; }

/* The route line: "Kumarakom → Thekkady → Munnar" */
.route-line { line-height: 1.5; }
.route-arrow { color: var(--accent); font-weight: 600; margin-inline: .1rem; }
[dir="rtl"] .route-arrow { display: inline-block; transform: scaleX(-1); }

.customisable-note {
  display: flex; align-items: flex-start; gap: .4rem; margin: 0;
  padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted);
}
.customisable-note .icon { color: var(--accent); margin-top: .15em; }

/* Service cards lead with an icon over the photograph. */
.card--service .card__media { aspect-ratio: 16 / 9; }
.card--service .feature__icon { margin-top: calc(var(--sp-5) * -1); position: relative; z-index: 2; }

/* Filters on a collection page wrap to two rows on a phone, four on a desktop. */
@media (min-width: 900px) { .filters { grid-template-columns: repeat(5, 1fr); } }

/* =========================================================== event promo */
/* A floating card, bottom-left — the WhatsApp and call buttons own the other
   corner. It never covers the page content: on a phone it sits above the
   buttons and shrinks to a strip rather than blocking the screen. */
.promo {
  position: fixed; z-index: 60;
  inset-inline-start: var(--sp-4);
  /* Above the back-to-top button, which shares this corner. */
  inset-block-end: calc(var(--sp-4) + 56px);
  display: flex; gap: var(--sp-3); align-items: stretch;
  width: min(380px, calc(100vw - var(--sp-4) * 2));
  padding: var(--sp-3);
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  /* Starts down and out; .is-open brings it in. Transform and opacity only,
     so the slide never triggers layout. */
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.promo.is-open { opacity: 1; transform: none; }

.promo__close {
  position: absolute; inset-block-start: 6px; inset-inline-end: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--border);
}
.promo__close:hover { color: var(--ink); background: var(--paper-3); }

.promo__media { flex: none; width: 96px; border-radius: var(--r-md); overflow: hidden; }
.promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.promo__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo__kicker {
  margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 62%, var(--ink));
}
.promo__title {
  margin: 0; font-family: var(--font-display); font-size: 1.02rem;
  font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
}
.promo__sub { margin: 0 0 .3rem; font-size: var(--fs-xs); color: var(--muted); }

.promo__countdown { display: flex; gap: .3rem; margin: .15rem 0 .5rem; }
.promo__unit {
  flex: 1; min-width: 0; padding: .22rem .1rem;
  text-align: center; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px solid var(--border);
}
.promo__unit b {
  display: block; font-variant-numeric: tabular-nums;
  font-size: .9rem; font-weight: 700; line-height: 1.1; color: var(--ink);
}
.promo__unit i {
  display: block; font-style: normal; font-size: .52rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
/* One nudge per change. It has to stay legible throughout: the seconds
   change every second, so anything that fades to nothing leaves the digit
   invisible for a good part of every second — which is how the first version
   of this read as an empty box. */
.promo__unit b.is-ticking { animation: promoTick .22s var(--e-out); }
@keyframes promoTick {
  0%   { transform: translateY(-28%); opacity: .4; }
  100% { transform: none; opacity: 1; }
}
.promo__cta { align-self: flex-start; }

@media (max-width: 720px) {
  .promo {
    inset-inline: var(--sp-3); width: auto;
    /* Full width here, so it has to sit above the WhatsApp and call buttons
       rather than beside them — they stand 116px tall in the other corner. */
    inset-block-end: calc(var(--sp-3) + 136px);
    padding: var(--sp-2);
  }
  .promo__media { width: 68px; }
  .promo__title { font-size: .95rem; }
  .promo__sub { display: none; }        /* the poster already says it */
  .promo__unit--secs { display: none; }   /* four boxes is one too many here */
}

@media (prefers-reduced-motion: reduce) {
  .promo { transition: opacity .2s linear; transform: none; }
  .promo.is-open { transform: none; }
  .promo__unit b.is-ticking { animation: none; }
}