/* ==========================================================================
   v2 design layer: "A day in Dubai, told by the clock" (see DESIGN.md)
   ========================================================================== */
:root {
  --navy: #0f1724; --navy-2: #16233a; --navy-3: #0e5e63;
  --gold: #c84d0c; --gold-2: #f26b1d; --gold-soft: #ffb37a;
  --sand: #f6f2ea; --sand-2: #ece4d6;
  --ink: #0f1724; --muted: #5a6474; --line: #e3dccf; --gulf: #0e5e63;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "DM Sans", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --glow: 1;
}
body { font-size: 17px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.03em; font-weight: 700; }
h1 { font-weight: 800; letter-spacing: -0.032em; line-height: 1.04; }
h3 { letter-spacing: -0.015em; }
.hero h1 { font-size: clamp(3rem, 8vw, 6.4rem); }
.page-hero h1 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); max-width: 18ch; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 28px; }
.logo-text strong { letter-spacing: -0.02em; }

/* ---------- Sky: four time-of-day layers; the driver sets --t-* (0..1) and the sun position ---------- */
.sky { isolation: isolate; background: var(--navy) !important; }
.page-hero.sky::before, .hero.sky::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 19, 34, var(--t-night, 0)), rgba(22, 35, 58, var(--t-night, 0))),
    linear-gradient(180deg, rgba(58, 37, 84, var(--t-dusk, 0)) 0%, rgba(214, 88, 52, var(--t-dusk, 0)) 70%, rgba(255, 170, 90, var(--t-dusk, 0)) 100%),
    linear-gradient(180deg, rgba(36, 108, 160, var(--t-noon, 0)), rgba(120, 186, 214, var(--t-noon, 0))),
    linear-gradient(180deg, rgba(30, 52, 92, var(--t-morning, 0)) 0%, rgba(238, 154, 106, var(--t-morning, 0)) 78%, rgba(255, 214, 160, var(--t-morning, 0)) 100%),
    var(--hero-photo, none) center / cover; }
.page-hero.sky::after, .hero.sky::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(95deg, rgba(15, 23, 36, .84) 0%, rgba(15, 23, 36, .5) 55%, rgba(15, 23, 36, .05) 100%); }
.sky[data-sky="morning"] { --t-morning: 1; --sun-x: 74%; --sun-y: 72%; }
.sky[data-sky="noon"]    { --t-noon: 1;    --sun-x: 72%; --sun-y: 24%; }
.sky[data-sky="dusk"]    { --t-dusk: 1;    --sun-x: 78%; --sun-y: 64%; }
.sky[data-sky="night"]   { --t-night: 1;   --sun-x: 80%; --sun-y: 26%; }
.sky-sun { position: absolute; z-index: 0; left: var(--sun-x); top: var(--sun-y); width: clamp(130px, 17vw, 240px); aspect-ratio: 1; translate: -50% -50%; scale: var(--glow); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff3dc 0 32%, #ffc27a 44%, rgba(242, 107, 29, .55) 56%, rgba(242, 107, 29, 0) 71%); }
.sky[data-sky="night"] .sky-sun, .sky.is-night .sky-sun { background: radial-gradient(circle, #f4f1e8 0 28%, rgba(244, 241, 232, .22) 40%, rgba(244, 241, 232, 0) 62%); }
.sky .skyline { color: rgba(8, 13, 24, .6); z-index: 1; }
.sky .container { position: relative; z-index: 2; }
.hero.sky { padding-bottom: 180px; }
.hero .eyebrow { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hero-sub { color: #d5dbe4; }
.breadcrumb, .breadcrumb a { color: #e6e9ee; }

/* Day clock: tells the visitor what time of the Dubai day the page is showing */
.day-clock { display: none; margin: 0 auto 0 18px; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--sand); border: 1px solid var(--line); font-size: .8rem; line-height: 1; white-space: nowrap; }
.has-sky-driver .day-clock { display: inline-flex; }
.day-clock-time { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--ink); color: #fff; padding: 6px 9px; border-radius: 999px; }
.day-clock-label { color: var(--ink); }
@media (max-width: 1540px) { .has-sky-driver .day-clock { display: none; } }

/* Desktop nav: the logo is the home link */
@media (min-width: 1025px) { .main-nav .nav-home { display: none; } }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; background: var(--gold-2); transform-origin: left; scale: 0 1; transition: scale .5s var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after { scale: 1 1; }
.main-nav a.active { background: transparent; }
.main-nav a:hover { color: var(--ink); }

/* ---------- Inline keyword links ---------- */
a.inline-link { color: inherit; text-decoration: underline; text-decoration-color: var(--gold-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-thickness .35s var(--ease), color .35s var(--ease); }
a.inline-link:hover { color: var(--gold); text-decoration-thickness: 3px; }
.hero a.inline-link, .page-hero a.inline-link, .section-navy a.inline-link, .closing-block a.inline-link { color: #fff; }
.hero a.inline-link:hover, .section-navy a.inline-link:hover, .closing-block a.inline-link:hover { color: var(--gold-soft); }

/* ---------- Buttons: the fill rises like heat ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill, rgba(255, 255, 255, .2)); clip-path: inset(100% 0 0 0); transition: clip-path .55s var(--ease); }
.btn:hover::after { clip-path: inset(0 0 0 0); }
.btn:active { transform: scale(.97); }
.btn-primary { --btn-fill: var(--gold-2); }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-gold { background: var(--gold-2); color: #fff; --btn-fill: #fff; }
.btn-gold:hover { color: var(--ink); box-shadow: none; }
.btn-wa { --btn-fill: var(--wa-dark); }
.btn-wa:hover { background: var(--wa); }
.btn-outline-light { --btn-fill: #fff; }

/* ---------- Cards ---------- */
.service-media, .post-card-media, .post-feature-media { transition: transform .9s var(--ease); }
.service-card:hover .service-media { transform: scale(1.04); }
.service-body { position: relative; z-index: 1; background: #fff; }
.service-body h3 { font-size: 1.35rem; }
.why-icon { background: var(--sand-2); color: var(--gold); }
.why-card:hover .why-icon { background: var(--gold-2); color: #fff; }
.why-icon { transition: background .5s var(--ease), color .5s var(--ease); }
.section-navy { background: var(--navy); }
.cta-band { background: var(--gold-2); }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band .btn-outline-light { border-color: #fff; color: #fff; }
.cta-band .btn-outline-light:hover { color: var(--ink); }
.site-footer { background: #0b111c; }
.price-table .price { color: var(--gold); }
.note { background: #fff4ea; border-color: #f6d3b8; }

/* ---------- Reveal (only when JS + motion are on) ---------- */
.js-motion [data-reveal] { opacity: 0; translate: 0 40px; }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
[data-split] .w > span { display: inline-block; }
.js-motion [data-split] .w > span { translate: 0 105%; }

/* ---------- Blog ---------- */
.section-guides { background: var(--sand); }
.guides-head { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 32px; align-items: end; margin-bottom: 40px; }
.guides-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.guides-head p { margin: 0; color: var(--muted); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.post-card { display: flex; flex-direction: column; }
.post-card-media, .post-feature-media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.post-card-media span, .post-feature-media span { position: absolute; left: 14px; bottom: 14px; background: rgba(15, 23, 36, .72); color: #fff; font-size: .78rem; padding: 5px 12px; border-radius: 999px; }
.post-card:hover .post-card-media { transform: translateY(-6px); }
.post-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.post-card h3 a, .post-feature h2 a { color: var(--ink); background: linear-gradient(var(--gold-2), var(--gold-2)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); }
.post-card h3 a:hover, .post-feature h2 a:hover { background-size: 100% 2px; color: var(--ink); }
.post-card p { color: var(--muted); font-size: .95rem; margin: 0; }
.post-meta { font-size: .82rem; color: var(--muted); margin: 0 0 6px; }
.post-meta-light { color: #e6e9ee; margin-top: 18px; }
.theme-morning { background: radial-gradient(circle at 72% 70%, #fff1d6 0 9%, rgba(255, 194, 122, .7) 16%, transparent 30%), linear-gradient(180deg, #1e345c 0%, #ee9a6a 75%, #ffd6a0 100%); }
.theme-noon    { background: radial-gradient(circle at 70% 24%, #fffbea 0 8%, rgba(255, 240, 200, .6) 14%, transparent 26%), linear-gradient(180deg, #246ca0 0%, #78bad6 100%); }
.theme-dusk    { background: radial-gradient(circle at 76% 64%, #fff3dc 0 9%, rgba(242, 107, 29, .7) 17%, transparent 32%), linear-gradient(180deg, #3a2554 0%, #d65834 70%, #ffaa5a 100%); }
.theme-night   { background: radial-gradient(circle at 80% 24%, #f4f1e8 0 6%, transparent 12%), linear-gradient(180deg, #0b1322 0%, #16233a 100%); }
.post-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.post-feature-media { aspect-ratio: 16 / 10; margin: 0; }
.post-feature h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }

/* ---------- Article ---------- */
.prose .content-block p { font-size: 1.06rem; line-height: 1.65; }
.toc { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 40px; }
.toc-title { font-family: var(--font-display); font-weight: 700; margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.toc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.toc a:hover { text-decoration-color: var(--gold-2); }
.checklist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { color: var(--gulf); margin-top: 5px; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; background: #fff; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--gold-2); transition: rotate .4s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: 0 0 16px; color: var(--muted); }
.related-links { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.related-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .4s var(--ease), translate .4s var(--ease); }
.related-links a:hover { background: rgba(255, 255, 255, .16); color: #fff; translate: 6px 0; }
.footer-sub { margin-top: 28px; }

@media (max-width: 1024px) {
  .guides-head, .post-feature { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .sky-sun { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal], .js-motion [data-split] .w > span { opacity: 1 !important; translate: none !important; }
}

.tip, .contact-tip { margin-top: 20px; padding: 16px 20px; border-radius: var(--radius); background: var(--sand); border-left: 4px solid var(--gulf); color: var(--ink) !important; }
.contact-tip { margin: 22px 0 0; }

/* Lenis smooth scroll: native smooth scrolling must be off or the two fight */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }