/* Brand layer (Mohamed 2026-10-05): gradient shifted to purple with an orange touch, warm nebula background,
   lighter image-background hero. Loaded LAST on every theme view, so it overrides etlaala.css / editorial.css tokens. */
:root{
	--gradient:linear-gradient(90deg,#1335ae 0%,#4a2fb0 32%,#7a2ca6 64%,#b23d8f 86%,#f39a62 100%);
	--gradient-diag:linear-gradient(-225deg,#1335ae 0%,#5a2eae 40%,#8b2a9c 74%,#f39a62 100%);
	--grad:linear-gradient(135deg,#1d2fae 0%,#4a2fb0 30%,#7a2ca6 62%,#a83a92 84%,#ee9465 100%);
	--lux-text:linear-gradient(90deg,#c9b6ff 0%,#efa9dc 55%,#ffc58f 100%); /* light: readable on the dark hero */
	--warm:#fbf7f3;
}

/* Warm base + soft nebula of brand light (fixed layer, no repaint on scroll, no images). */
html body{background-color:var(--warm)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
	background:
		radial-gradient(60vw 55vh at 88% 8%,rgba(122,44,166,.13),transparent 70%),
		radial-gradient(50vw 50vh at 8% 32%,rgba(79,107,244,.12),transparent 70%),
		radial-gradient(55vw 55vh at 72% 88%,rgba(243,154,98,.16),transparent 70%),
		radial-gradient(40vw 40vh at 18% 96%,rgba(178,61,143,.09),transparent 70%)}
.section.soft{background:rgba(255,255,255,.42)}
.ed-calc-sec,.ed-reviews{background:rgba(255,255,255,.55)}

/* Header: the brand gradient, deep blue under the logo, orange touch at the far end. */
.ed-nav{background:linear-gradient(270deg,rgba(19,53,174,.97) 0%,rgba(74,47,176,.96) 38%,rgba(122,44,166,.95) 72%,rgba(178,61,143,.95) 90%,rgba(233,135,95,.95) 100%)}

/* Calculator result panel follows the gradient family. */
.lc-out{background:linear-gradient(160deg,#1335ae 0%,#4a2fb0 55%,#7a2ca6 100%)}

/* Gradient-highlighted phrase (hero only, one or two words). */
.lux-grad-text{color:#efa9dc}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.lux-grad-text{background:var(--lux-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}}

/* Homepage hero: photo is the full section background; smaller, calmer headline. */
/* Photo in full HD colour: no tint or gradient overlay (Mohamed 2026-10-05). Readability comes from a soft text shadow. */
.home-hero--brand .hero-overlay{display:none!important}
.home-hero--brand{background:#0c1752}
/* Dark outline around hero text so it reads on the bright, un-tinted photo. */
.lux-hero-content .kicker,.lux-hero-content h1,.lux-hero-content p,
.dp-hero-copy .dp-pill,.dp-hero-copy h1,.dp-hero-copy p,.tk-hero-copy .tk-pill,.tk-hero-copy h1,.tk-hero-copy p{text-shadow:0 0 1px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.9),0 3px 14px rgba(0,0,0,.55)}
.lux-grad-text{text-shadow:none!important;filter:drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.service-page-hero .lux-grad-text{filter:none}
.lux-hero-content .kicker{background:rgba(10,12,40,.35)}
.lux-hero-content h1{font-size:clamp(28px,3.4vw,46px)!important;line-height:1.5!important;letter-spacing:0!important;max-width:18ch}
.lux-hero-content p{max-width:44ch}
.lux-hero-price{margin-top:22px;display:inline-block;padding:8px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(10,12,40,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:15px}
.lux-hero-price strong{color:#ffc58f;font-weight:800}

/* Price chip on first-version destination cards. */
.destination-card .lux-chip{position:absolute;top:14px;inset-inline-start:14px;z-index:3;display:grid;padding:6px 12px;background:#fea760;color:#0a0500;border-radius:12px;font-weight:800;font-size:15px;line-height:1.5}
.destination-card .lux-chip small{font-size:11px;font-weight:600;color:#0a0500}

/* First-version muted text: darken just enough for WCAG AA on the warm/white surfaces. */
.section-heading>span{color:#1335ae}
.reviews-heading p{color:#555c7a}
.review-name span{color:#5f6580}

/* Homepage header: clear over the hero photo, brand gradient again once the page scrolls (.is-solid via editorial.js). */
.etl-home-view .ed-nav{position:fixed;inset-inline:0;top:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .35s ease,box-shadow .35s ease}
.etl-home-view .ed-nav.is-solid{background:linear-gradient(270deg,rgba(19,53,174,.97) 0%,rgba(74,47,176,.96) 38%,rgba(122,44,166,.95) 72%,rgba(178,61,143,.95) 90%,rgba(233,135,95,.95) 100%);box-shadow:0 8px 24px -12px rgba(10,10,40,.45)}
.etl-home-view .ed-nav:not(.is-solid) a,.etl-home-view .ed-nav:not(.is-solid) summary{text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* Mobile hero: photo fills the whole section, text sits directly on it (no card). */
@media (max-width:760px){
	.home-hero--brand{min-height:min(720px,100svh)!important}
	.home-hero--brand .home-final-picture{position:absolute!important;inset:0!important;height:100%!important;z-index:-3}
	.home-hero--brand .home-final-picture .hero-photo{height:100%!important;object-fit:cover!important}
	.home-hero--brand .lux-hero-content{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin-top:0!important;padding:110px 0 40px!important;min-height:min(720px,100svh)!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
	/* CTAs + honeymoon price line sit in the open sea area right under the copy (Mohamed 2026-10-06). */
	.home-hero--brand .lux-hero-content .hero-actions{margin-top:clamp(40px,9vh,84px)!important;width:100%}
	.home-hero--brand .lux-hero-content p.lux-hero-price{margin:20px 0 0!important;font-size:13px!important;padding:7px 14px;align-self:flex-start}
}

/* Destination pages: same luxury layer as the homepage hero — full-colour photo, calmer headline, price line. */
.dp-hero-overlay,.tk-hero-overlay{display:none!important}
.dp-hero h1,.tk-hero h1,.service-page-hero h1{font-size:clamp(28px,3.6vw,48px)!important;line-height:1.5!important;letter-spacing:0!important}
.dp-hero .dp-pill,.tk-hero .tk-pill{background:rgba(10,12,40,.38)!important;border-color:rgba(255,255,255,.3)!important}
.dp-hero .ghost-btn,.tk-hero .ghost-btn,.lux-hero-content .ghost-btn{background:rgba(10,12,40,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dp-hero .lux-hero-price,.tk-hero .lux-hero-price{color:#fff;margin-top:18px}
.lux-hero-price a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){
	/* Destination heroes on phones: photo fills the section, copy sits on it (no dark card) — same as the homepage.
	   High specificity on purpose: the .net mobile rules use !important with two-class selectors. */
	#main .dp-hero,#main .tk-hero{min-height:min(720px,100svh)!important;display:flex!important;flex-direction:column!important;isolation:isolate;background:#0c1752!important}
	#main .dp-hero>img,#main .tk-hero>img,#main .dp-hero>.lux-hero-picture,#main .tk-hero>.lux-hero-picture{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;z-index:0!important;border-radius:0!important}
	#main .dp-hero .dp-hero-wrap,#main .tk-hero .tk-hero-wrap{position:relative!important;z-index:1!important;width:auto!important;margin:0 14px!important;padding:88px 0 40px!important;flex:1;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
	#main .dp-hero .dp-hero-copy,#main .tk-hero .tk-hero-copy,#main .dp-hero .dp-hero-wrap,#main .tk-hero .tk-hero-wrap{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
	#main .dp-hero .dp-hero-copy,#main .tk-hero .tk-hero-copy{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
}


/* WEBP hero <picture> (tools/build_heroes.py) sits where the .net <img> was: give it the old img geometry. */
.dp-hero>.lux-hero-picture,.tk-hero>.lux-hero-picture{position:absolute;inset:0;display:block}
.lux-hero-picture>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* Destination heroes: headline block sits high in the photo (Mohamed 2026-10-06), not vertically centred. */
@media (min-width:761px){
	#main .dp-hero,#main .tk-hero{align-items:flex-start!important}
	#main .dp-hero .dp-hero-wrap,#main .tk-hero .tk-hero-wrap{align-items:start!important;align-content:start!important;padding-top:clamp(36px,6vh,72px)!important;padding-bottom:clamp(48px,8vh,96px)!important;margin-top:0!important}
	#main .dp-hero .dp-hero-copy,#main .tk-hero .tk-hero-copy{margin-top:0!important;align-self:start!important}
}

/* Homepage grid has 11 cards: the last one (honeymoon) spans two columns so every row is full (4, 3 and 2 column layouts). */
.destination-grid>.destination-card:last-child:nth-child(odd),.destination-grid>.destination-card:nth-child(11):last-child{grid-column:span 2}

/* Russia page: every experience card has a photo on top (Mohamed 2026-10-06). */
.dp-russia .dp-places-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.dp-russia .dp-place,.dp-russia .dp-place-1{display:flex!important;flex-direction:column!important;padding:0!important;min-height:0!important;overflow:hidden;background:#fff!important;border-radius:18px;grid-column:auto!important;grid-row:auto!important}
.dp-russia .dp-place-1:before,.dp-russia .dp-place:before{display:none!important;content:none!important}
.dp-russia .dp-place .dp-place-image{position:static!important;inset:auto!important;width:100%!important;height:190px!important;object-fit:cover!important;display:block!important;flex:none}
.dp-russia .dp-place>*:not(.dp-place-image){margin-inline:20px!important;position:relative!important;z-index:1!important}
.dp-russia .dp-place>span{margin-top:16px!important}
.dp-russia .dp-place>p{margin-bottom:20px!important}
.dp-russia .dp-place-1 h3{color:#19357f!important;font-size:1.08rem!important}
.dp-russia .dp-place-1 p{color:#68728a!important}

/* Polar adventures section: night-sky panel, photo cards. */
.dp-polar{background:linear-gradient(160deg,#081233 0%,#122a5c 55%,#1d3f6e 100%)!important;color:#fff}
.dp-polar .dp-heading h2{color:#fff!important}
.dp-polar .dp-heading p{color:rgba(255,255,255,.82)!important}
.dp-polar .dp-kicker{color:#7fe3c4!important}
.dp-polar .dp-polar-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.dp-polar .dp-polar-card{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important}
.dp-polar .dp-polar-card h3{color:#fff!important}
.dp-polar .dp-polar-card p{color:rgba(255,255,255,.78)!important}
.dp-polar .dp-polar-card span{color:#7fe3c4!important}
.dp-polar-note{margin:22px 0 0;text-align:center;color:rgba(255,255,255,.8);font-size:.95rem}
.dp-polar-cta{display:flex;justify-content:center;margin-top:16px}
@media (max-width:1000px){.dp-russia .dp-places-grid,.dp-polar .dp-polar-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.dp-russia .dp-places-grid,.dp-polar .dp-polar-grid{grid-template-columns:1fr!important}.dp-russia .dp-place .dp-place-image{height:200px!important}}
.dp-russia .dp-place-1 span{color:#4963c8!important}

/* Phones: destination intro = ONE card — wide photo on top, text directly below (Mohamed 2026-10-06). */
@media (max-width:760px){
	#main .legacy-destination-intro .legacy-intro-grid{display:flex!important;flex-direction:column!important;gap:0!important;background:#fff;border:1px solid #e7eaf6;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(19,53,174,.35)}
	#main .legacy-destination-intro .legacy-intro-visual{order:1!important;width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;border-radius:0!important;padding:0!important}
	#main .legacy-destination-intro .legacy-intro-visual:before{display:none!important}
	#main .legacy-destination-intro .legacy-intro-visual img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:16/10!important;object-fit:cover!important;object-position:center 40%!important;border-radius:0!important}
	#main .legacy-destination-intro .legacy-intro-content{order:2!important;padding:20px 18px 24px!important}
}

/* Speed pass: slimmed, cache-busted assets (Cloudflare keeps old files under old names). */
html body .compact-footer{--compact-footer-bg:url('../media/footer-bg-v2.webp')!important}
/* PageSpeed 2026-10-12: 49KB footer photo waits until the footer is within ~800px (editorial.js adds .is-near). */
html body.etl-home-view .compact-footer:not(.is-near),html.etl-home-view body .compact-footer:not(.is-near){--compact-footer-bg:none!important}
html body .legal-hero:before,html body .service-page-hero:before{background-image:url(../media/service-hero-v2.webp)!important}

/* Homepage cover (Mohamed 2026-10-11): winter banner fills the WHOLE hero on phones too — portrait 2:3 crop
   (hero-home-aurora-m720, right panel), same full-bleed rules as any photo hero. Replaces the 2026-10-08 banner-above-text layout. */

/* Floating buttons step aside while a lead form is on screen (phones) — same treatment as the calculator. */
.etl-form-in-view .floating-contact .float-btn{opacity:0!important;transform:translateY(16px)!important;pointer-events:none!important;visibility:hidden!important}

/* Visually hidden, still read by search engines + screen readers (fallback H1 on builder pages). */
.etl-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* FIX 2026-10-11: honeypot sat at left:-10000px — on RTL pages that widened the document to 10390px, so phones zoomed
   destination pages out to a blank view. Keep it 1px + clipped, but on-screen. Triple class beats the .x .hp-field rules. */
:is(html) .hp-field.hp-field.hp-field{left:0!important;right:auto!important;top:0!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important}

/* Home form: destination/budget row sits in its own grid above the original one (2026-10-11). */
#quote .form-grid + .form-grid{margin-top:14px}

/* /articles/ hub: intro, topic chips, FAQ (A7 audit v2 — page was thin). */
.etl-art-intro{max-width:820px;margin:0 auto 26px;color:#5d6780;font-size:.95rem;line-height:2;text-align:center}
.etl-art-h2{margin:30px 0 14px;color:#172760;font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:800}
.etl-art-topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.etl-art-topics a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #e1e6f0;border-radius:999px;background:#fff;color:#1c317d;font-size:.82rem;font-weight:800}
.etl-art-topics a:hover{border-color:#4f6bf4;background:#f5f7ff}
.etl-art-topics small{color:#7c859a;font-weight:600}
.etl-art-faq{margin-top:20px}
.etl-art-faq details{margin-bottom:10px;padding:0 18px;border:1px solid #e1e6f0;border-radius:15px;background:#fff}
.etl-art-faq summary{padding:15px 0;cursor:pointer;color:#1c317d;font-weight:800;font-size:.9rem}
.etl-art-faq details p{margin:0;padding:0 0 15px;color:#66718a;font-size:.85rem;line-height:1.9}

/* PageSpeed 2026-10-11: homepage below-the-fold sections + footer skip style/layout until near the viewport
   (same treatment destination pages already had). "auto" remembers the real height once rendered. */
.etl-home-view main > section:not(.home-hero):not(.trust-ribbon),.etl-home-view .compact-footer{content-visibility:auto;contain-intrinsic-size:auto 800px}