/* ==========================================================================
   ONLYONE LUXURY TRAVEL
   Mobile-first cinematic luxury travel experience.
   Design tokens are the single source of truth — do not hardcode brand colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type — Inter Variable, self-hosted.

   Self-hosted rather than linked from Google's CDN: a hotlink makes every
   visitor's IP reach a third party before the first headline paints, which is
   a real problem for a German operator, and it puts the brand's type behind a
   network that may be slow or blocked. One variable file per script covers
   every weight, and unicode-range means a German visitor never downloads the
   Cyrillic cut.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  /* Turkish place names — Kaş, Göcek, Ölüdeniz, Çıralı — live here. */
  font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* The script face carries the wordmark and the intro's "Journey". It used to
   rely on "Snell Roundhand", which exists only on Apple devices — on Android
   the brand silently became Georgia, i.e. not a script at all. Self-hosting
   one file makes the mark identical on every phone. Latin only: the wordmark
   never changes with the interface language. */
@font-face{
  /* Cyrillic too, now that the script carries a headline and not only the
     latin-only word "Journey": without it the Russian line silently dropped to
     Georgia, which is not a script at all. unicode-range keeps a German
     visitor from ever downloading it. */
  font-family:'Great Vibes';font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/great-vibes-cyrillic-400-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Great Vibes';font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/great-vibes-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* brand
     There is no navy anywhere any more, in the intro either. Every dark tone
     in the product is warm — brown-black, not blue-black — so the ivory
     platform and the cinematic intro belong to one colour world instead of
     two. These three keep their names so nothing downstream had to be renamed
     in the same change.

     The accent is rose gold, not champagne gold. Every accent tone in this
     file was moved by rotating hue and saturation while holding its WCAG
     relative luminance fixed, so every contrast ratio noted anywhere below is
     still the ratio that was measured — only the colour moved. Saturation
     falls away with darkness, which is what separates rose gold from copper:
     the shadow tones have to land on mauve-brown, and a straight hue rotation
     lands them on brick. --gold and --gold-light keep their names for the
     same reason --navy does. */
  --navy:          #241C14;
  --navy-deep:     #15100B;
  --navy-soft:     #33291D;
  --gold:          #D9B09C;
  --gold-light:    #F1D3C3;
  --white:         #FFFFFF;
  --turquoise:     #57C6D4;
  --blue-med:      #1E6E92;

  /* text */
  --ink:           #FFFFFF;
  --ink-soft:      rgba(255,255,255,.78);
  --ink-faint:     rgba(255,255,255,.55);

  /* type */
  --serif:  Georgia, "Times New Roman", serif;
  --sys:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --sans:   "Inter Variable", var(--sys);
  /* Display and text are the same family at different weights and tracking.
     A second display face was tried and dropped: the reference look is a
     single neo-grotesk carrying everything, and one file loads faster. */
  --display: var(--sans);
  --script: "Great Vibes", "Snell Roundhand", "Apple Chancery",
            "Segoe Script", "Brush Script MT", Georgia, serif;

  /* safe areas */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* motion */
  --ease: cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;              /* never a horizontal scrollbar */
  overscroll-behavior-x:none;     /* and never a sideways rubber-band drag */
  background:var(--navy-deep);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
  touch-action:pan-y;            /* a sideways drag on the page is not a gesture */
}

body{
  /* the app owns the viewport; only .main__scroll scrolls */
  height:100svh;
  min-height:100svh;
  overflow:hidden;
}

button{
  font:inherit; color:inherit; margin:0;
  background:none; border:none; padding:0;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}

img{ display:block; max-width:100%; }

svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Playfair Display used to set the country word. It is gone with it: the whole
   family was loaded for one word on one screen, and nothing else on the site
   asks for a serif. That is 35 KB off the first two screens. */

/* The logo, in one file, in whatever colour it lands on.

   It is the supplied artwork, not a rebuild: the letters came out of the PDF
   as outlines, so there is no font to match and no tracing. Every coordinate
   was shifted by a constant to tighten the box around the ink -- a pure
   translation, so the shapes are the originals to within the 0.01 rounding,
   about a thousandth of a percent of its width. 4.8 KB gzipped.

   Painted as a mask rather than placed as an <img>, because the same lockup
   has to be white over the intro film, espresso on the ivory bar, and warm
   ivory in the footer. background-color:currentColor means it simply inherits
   whatever the surrounding text is -- including the app bar's own switch from
   white to dark as it goes solid, which needs no rule of its own.

   aspect-ratio comes from the artwork: 470.26 x 135.76. Setting only a width
   everywhere keeps the proportions honest and leaves one number per place. */
/* The logo is a control now -- both of them scroll the page back up -- so it
   needs a button, and the button needs to leave no trace of itself. */
.brandLogoBtn{
  display:block;padding:0;border:0;background:none;color:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s var(--ease);
}
.brandLogoBtn:active{opacity:.62}
.brandLogoBtn:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:2px}

.brandLogo{
  display:block;
  position:relative;
  aspect-ratio:470.26/135.76;
}
/* The wordmark is painted on ::after rather than on the box itself, so the map
   behind it is not clipped away: a mask applies to everything the element
   renders, pseudo-elements included, and with the mask on .brandLogo the map
   would only have shown inside the letters. */
.brandLogo::after{
  content:"";
  position:absolute;
  inset:0;
  background-color:currentColor;
  -webkit-mask:url(../images/onlyone-logo.svg) center/contain no-repeat;
  mask:url(../images/onlyone-logo.svg) center/contain no-repeat;
}

/* The world map from the artwork, where there is room for it.

   Measured off the source rather than placed by eye: in the logo's own
   coordinate space the map is 100.4% of the wordmark's width and 234.2% of its
   height, its left edge flush to within 0.6%, sitting 71.3% of that height
   above it. So it needs no offset of its own -- width:100% and those two
   numbers put it exactly where the artwork does.

   Flattened to an alpha mask rather than kept as the two-tone picture. The
   white country borders are opaque like the landmass, so a mask loses them --
   but at the 172px this is ever drawn at they are already below a device pixel,
   and rendering both side by side at that size shows no difference. What it
   buys: one file serves white over the film and ivory in the footer, tinted
   through currentColor, and it is 35 KB instead of a 822 KB vector.

   Opacity is the artwork's own: the map measures #404040 against black there,
   a quarter of the ground's contrast.

   The footer only. It was tried on the intro too and taken back out: the
   artwork sets the map on flat black, and over a moving photograph the same
   shape reads as dirt on the picture rather than as a ground behind the
   words. It was also cut 17px short there -- the intro lockup sits 18px from
   the top and the map reaches 35px above it -- but the crop was the smaller
   half of the problem. */
.brandLogo--footer::before{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  top:-71.3%;
  height:234.2%;
  background-color:currentColor;
  opacity:.24;
  -webkit-mask:url(../images/onlyone-logo-map.webp) center/contain no-repeat;
  mask:url(../images/onlyone-logo-map.webp) center/contain no-repeat;
  pointer-events:none;
}
.brandLogo--intro{width:172px;margin:0 auto;
  /* the wordmark sits on a photograph, so it needs the lift the old text got
     from text-shadow -- which paints nothing on a masked box */
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.brandLogo--bar{width:112px}
.brandLogo--footer{width:154px}

/* ==========================================================================
   INTRO — cinematic hero, exactly one visible viewport height
   ========================================================================== */

.intro{
  /* The intro is the one screen that stays exactly as it was: Georgia display,
     the script "Journey", and the system UI face for the small tracked labels.
     Everything behind it moved to Inter. */
  --sans: var(--sys);
  position:fixed;
  inset:0;
  z-index:20;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  background:var(--navy);
  /* The hand-over to the platform is this fade and nothing else, so it is
     slower than a UI transition wants to be: the platform is already opaque
     underneath and the intro simply thins away over it. CROSSFADE_MS in
     app.js waits exactly this long before taking the intro out of the tree. */
  transition:opacity 1s var(--ease);
}
.intro.is-leaving{ opacity:0; pointer-events:none; }
.intro.is-hidden{ display:none; }

.intro__poster,
.intro__poster img,
.intro__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;            /* taps belong to the hero, not the player */
}
.intro__video{
  /* The responsive poster underneath remains visible before playback. */
  background:transparent;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:transform;
}

.intro__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(21,16,11,.42) 0%,
      rgba(21,16,11,.10) 26%,
      rgba(21,16,11,.10) 52%,
      rgba(21,16,11,.62) 100%);
}

/* --- brand ---------------------------------------------------------------- */
.intro__brand{
  position:absolute;
  z-index:5;
  left:50%;
  transform:translateX(-50%);
  top:calc(18px + var(--sat));
  text-align:center;
  color:var(--white);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}

/* --- sound toggle --------------------------------------------------------- */
.soundToggle{
  position:absolute;
  z-index:18;
  right:calc(16px + var(--sar));
  top:calc(22px + var(--sat));
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(21,16,11,.34);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  color:var(--white);
  opacity:.8;
  transition:opacity .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.soundToggle svg{ width:19px; height:19px; grid-area:1/1; }
.soundToggle.is-on{
  opacity:1;
  background:rgba(217,176,156,.24);
  border-color:rgba(241,211,195,.68);
  color:var(--gold-light);
}
/* muted state shows the crossed icon */
.soundToggle .soundToggle__on{ display:none; }
.soundToggle .soundToggle__off{ display:block; }
.soundToggle.is-on .soundToggle__on{ display:block; }
.soundToggle.is-on .soundToggle__off{ display:none; }

/* --- sound hint ----------------------------------------------------------
   The wording was removed: a text pill on the intro competed with the
   headline on the one screen that has to read as a single image. The button
   pulses instead — same job, no words on the picture. */
.soundToggle.is-hinting{
  animation:hintBreathe 2.4s ease-in-out .8s infinite;
}
@keyframes hintBreathe{
  0%, 100% { box-shadow:0 0 0 0 rgba(217,176,156,.55); }
  50%      { box-shadow:0 0 0 9px rgba(217,176,156,0); }
}
@media (prefers-reduced-motion:reduce){
  .soundToggle.is-hinting{animation:none;border-color:rgba(241,211,195,.8)}
}

/* --- skip ----------------------------------------------------------------- */
.skipIntro{
  position:absolute;
  z-index:18;
  left:50%;
  top:auto;
  bottom:calc(164px + var(--sab));
  transform:translateX(-50%);
  min-height:44px;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:12px 18px;
  transition:color .25s var(--ease);
}
.skipIntro:active{ color:var(--gold-light); }

/* --- headline ------------------------------------------------------------- */
.intro__copy{
  position:absolute;
  z-index:4;
  left:0; right:0;
  top:calc(112px + var(--sat));
  padding:0 24px;
  text-align:center;
  text-shadow:0 2px 22px rgba(0,0,0,.30);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.intro__copy.is-out{
  opacity:0;
  transform:translateY(-14px);
}
.kicker{
  margin:0;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
}
.headline{
  margin:14px 0 0;
  font-family:var(--serif);
  font-size:clamp(40px, 12.8vw, 54px);
  line-height:.94;
  font-weight:400;
  letter-spacing:.01em;
}
.headline__script{
  display:block;
  font-style:normal;
  font-family:var(--script);
  font-size:clamp(42px, 13.4vw, 58px);
  line-height:1.05;
  margin-top:6px;
  padding-bottom:.08em;              /* descenders never clip */
  color:var(--gold);
  background:linear-gradient(102deg, var(--gold) 0%, var(--gold-light) 46%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 14px rgba(217,176,156,.28));
}

/* --- end title ------------------------------------------------------------ */
.intro__end{
  position:absolute;
  z-index:6;
  left:0; right:0;
  /* Keep the closing headline above the bright horizon and water reflection. */
  top:clamp(calc(112px + var(--sat)),22svh,260px);
  padding:0 28px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .85s var(--ease);
}
.intro__end.is-in{ opacity:1; }
.intro__endEyebrow{
  margin:0 0 12px;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-light);
  text-shadow:0 2px 5px rgba(0,0,0,.65);
}
/* The closing moment of the intro. The first line stays a quiet setup in the
   serif; the second is the one the wordmark's script carries — since the mark
   became a signature, this is the line that should echo it. Bigger and with
   the tall line box the swashes need. */
.intro__endTitle{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 8.8vw, 39px);
  line-height:1.04;
  letter-spacing:.005em;
  text-shadow:0 2px 5px rgba(0,0,0,.65),0 8px 24px rgba(0,0,0,.34);
}
.intro__endTitle em{
  display:block;
  font-style:normal;
  font-family:var(--script);
  font-size:clamp(50px, 15.5vw, 66px);
  line-height:1.18;
  margin-top:2px;
  padding-bottom:.10em;
  color:var(--gold);
  background:linear-gradient(102deg, var(--gold) 0%, var(--gold-light) 46%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
/* the end title rises gently as it appears */
.intro__end .intro__endEyebrow,
.intro__end .intro__endTitle{
  transform:translateY(16px);
  transition:transform .9s var(--ease);
}
.intro__end.is-in .intro__endEyebrow,
.intro__end.is-in .intro__endTitle{ transform:none; }

/* ==========================================================================
   COUNTDOWN
   Positioning and animation are deliberately split across two elements:
   .countdown       owns translateX(-50%)  and is NEVER animated
   .countdown__*    own scale / opacity    and can never drop the centering
   ========================================================================== */

.countdown{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:calc(76px + var(--sab));
  transform:translateX(-50%);      /* never animated — no horizontal drift */
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s var(--ease);
}
.countdown.is-in{ opacity:1; }

.countdown__ring{
  grid-area:1/1;
  width:78px;
  height:78px;
  transform:rotate(-90deg);
  overflow:visible;
}
.countdown__ringTrack{
  fill:none;
  stroke:rgba(241,211,195,.26);
  stroke-width:1.4;
}
.countdown__ringProgress{
  fill:none;
  stroke:var(--gold-light);
  stroke-width:1.6;
  stroke-linecap:round;
  /* circumference of r=47 ≈ 295.3 */
  stroke-dasharray:295.3;
  stroke-dashoffset:295.3;
  filter:drop-shadow(0 0 6px rgba(217,176,156,.55));
}
.countdown.is-ticking .countdown__ringProgress{
  animation:ringSweep 1s linear both;
}
@keyframes ringSweep{
  from{ stroke-dashoffset:295.3; }
  to  { stroke-dashoffset:0; }
}

.countdown__value{
  grid-area:1/1;
  font-family:var(--serif);
  font-size:34px;
  line-height:1;
  font-weight:400;
  font-variant-numeric:tabular-nums;   /* 3 / 2 / 1 occupy identical width */
  color:var(--white);
  text-shadow:0 0 18px rgba(217,176,156,.55), 0 2px 10px rgba(0,0,0,.3);
  /* fixed box so the glyph can never nudge the layout */
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
}

/* Soft dark lens behind the ring so the white numeral stays readable even
   when the video is on a bright, sunlit frame. */
.countdown::before{
  content:"";
  grid-area:1/1;
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(21,16,11,.46) 0%,
    rgba(21,16,11,.26) 52%,
    rgba(21,16,11,0) 74%);
  box-shadow:0 0 34px rgba(217,176,156,.20);
  pointer-events:none;
}
.countdown.is-ticking .countdown__value{
  animation:countPulse 1s var(--ease) both;
}
@keyframes countPulse{
  0%   { transform:scale(.86); opacity:.55; }
  38%  { transform:scale(1.06); opacity:1; }
  100% { transform:scale(1);    opacity:1; }
}

/* iOS Safari: animated SVG filters over a hardware-decoded full-screen video
   can briefly freeze the video compositor. Keep the countdown cinematic but
   use a static ring and a cheap number pulse on WebKit touch devices. */
@supports (-webkit-touch-callout:none){
  .countdown{transform:translate3d(-50%,0,0);contain:layout paint;}
  .countdown__ringProgress{stroke-dashoffset:0;filter:none!important;animation:none!important;}
  .countdown::before{box-shadow:none;}
  .countdown.is-ticking .countdown__value{animation:countPulseIOS .42s ease-out both;}
  @keyframes countPulseIOS{
    from{transform:scale(.94);opacity:.72}
    to{transform:scale(1);opacity:1}
  }
}

/* --- autoplay fallback ---------------------------------------------------- */
.tapStart{
  position:absolute;
  z-index:15;
  left:50%;
  bottom:calc(180px + var(--sab));
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.tapStart.is-in{ opacity:1; pointer-events:auto; }
.tapStart button{
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(241,211,195,.82);
  background:rgba(21,16,11,.72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--white);
  border-radius:999px;
  padding:13px 22px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}
.tapStart svg{ width:15px; height:15px; fill:var(--gold-light); stroke:none; }

/* ==========================================================================
   PLATFORM

   Same world as the intro: deep navy ground, champagne gold accent, serif
   display type. The earlier light-card layout was product-list language —
   white cards, drop shadows, a coloured score badge — which reads as a
   booking portal no matter how good the photography is. Here the photograph
   sits on the ground and the type does the rest.
   ========================================================================== */

.main{
  position:fixed;
  inset:0;
  z-index:10;
  overflow:hidden;
  /* #app owns scrolling. Hidden still permits focus/scrollIntoView to move
     this outer container on a short viewport; clip prevents that second scroll. */
  overflow:clip;
  background:var(--ground);
  opacity:0;
  pointer-events:none;
  transition:opacity .7s var(--ease);
}
.main.is-active{opacity:1;pointer-events:auto}
/* Switched on behind the intro, where a fade would only be a fade to nothing.
   Removed one frame later so leaving the platform still animates. */
.main.is-instant{transition:none}

#app{
  height:100svh;
  overflow-y:auto;
  overflow-x:hidden;
  /* Sideways belongs to rails, galleries and chip rows — nowhere else. Without
     this a swipe that runs past the end of a rail chains out to the page and
     drags the whole layout, which is what made the site feel loose on some
     phones even though nothing actually overflowed. */
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:var(--ground);
  color:var(--txt);
}
#app::-webkit-scrollbar{display:none}
/* Let a pull at the top of the catalogue reach the native refresh control. */
html.onlyone-ios, html.onlyone-ios body, .onlyone-ios #app{overscroll-behavior-y:auto;}

.backToTop{
  position:fixed;right:calc(16px + var(--sar));
  bottom:max(var(--back-top-bottom,16px),calc(16px + var(--sab)));
  z-index:45;width:44px;height:44px;padding:0;
  display:grid;place-items:center;border:1px solid var(--hair);
  border-radius:50%;background:var(--ground);color:var(--txt-2);
  box-shadow:0 3px 12px var(--hair-soft);cursor:pointer;
}
.backToTop[hidden]{display:none}
.backToTop:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
@media(hover:hover){.backToTop:hover{background:var(--ground-2);color:var(--txt)}}

:root{
  /* Ivory white ground with a warm espresso ink. There is deliberately no
     blue anywhere in the platform: navy stayed behind in the intro, where a
     single cinematic moment can carry it, and browsing two dozen hotels in it
     read cold and heavy. Every dark tone here is warm — brown-black, not
     blue-black — so it sits with the ivory instead of against it.
     Contrast measured against #F7F3ED, not eyeballed. */
  --ground:      #F7F3ED;   /* page — elfenbein */
  --ground-2:    #FFFFFF;   /* raised */
  --ground-3:    #EFE8DC;   /* image placeholder */
  --hair:        rgba(42,33,25,.16);
  --hair-soft:   rgba(42,33,25,.10);
  --txt:         #2A2119;   /* 14.3:1 */
  --txt-2:       #6B5B49;   /* 5.9:1  — body copy, still passes small text */
  --txt-3:       #7A6957;   /* 4.6:1  — labels, dividers, counts */
  /* Filled buttons, chips and message bubbles. Was --navy. */
  --dark:        #2A2119;
  --dark-2:      #1A140E;
  /* The accent as text has to be much darker than the decorative one to stay
     legible on ivory. Measured: the brand rose gold #D9B09C reaches only
     1.8:1 here, and #B3684D only 3.8:1 — both short of the 4.5:1 small text
     needs. This tone measures 5.2:1. The lighter rose is kept for rules,
     borders and anything sitting over a photograph. */
  --gold-ink:    #935640;
  --turq:        #57C6D4;
  --ok:          #5FC79A;
  --warn:        #E0B860;
  --info:        #7FB6E0;
  --danger:      #E08878;
  --nav-h:       calc(68px + var(--sab));
}

/* A short rise with the fade. It was opacity-only for a long time because a
   transform here turns .view into the containing block for its fixed children
   and the tab bar rode along; render() now lifts that furniture out first, so
   the movement is safe. fill-mode is `backwards`, not `both` — the transform
   must not survive the animation, or .view stays a containing block forever. */
.view{animation:viewIn .34s var(--ease) backwards}
@keyframes viewIn{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .view{animation:viewFade .2s var(--ease) backwards}
  @keyframes viewFade{from{opacity:0}to{opacity:1}}
}
.pageBottom{height:calc(var(--nav-h) + 20px)}
.pageBottom--cta{height:calc(var(--nav-h) + 96px)}

.wrap{padding:0 20px}
.section{margin-top:40px}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
/* Inter needs the opposite treatment to the Georgia it replaced: more weight
   and negative tracking as the size grows, or large headings read loose and
   thin. Optical sizing does the rest. */
.h-xl{font-family:var(--display);font-size:31px;line-height:1.1;font-weight:600;letter-spacing:-.028em;margin:0}
.h-lg{font-family:var(--display);font-size:23px;line-height:1.18;font-weight:600;letter-spacing:-.022em;margin:0}
.h-md{font-family:var(--display);font-size:17px;line-height:1.25;font-weight:600;letter-spacing:-.014em;margin:0}
.muted{color:var(--txt-2)}
.tiny{font-size:12px}
.mini{font-size:11px}
.eyebrow{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;
}

/* --- appbar --------------------------------------------------------------- */
.appbar{
  position:sticky;top:0;z-index:40;
  height:calc(64px + var(--sat));
  padding:var(--sat) calc(18px + var(--sar)) 0 calc(18px + var(--sal));
  display:flex;align-items:center;gap:12px;
  background:rgba(247,243,237,.88);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hair-soft);
  color:var(--txt);
}
/* Over the hero the bar is transparent, but it stays sticky: an absolutely
   positioned bar inside the scroll container resolves against the initial
   containing block, so it neither scrolled away nor gained a backdrop — the
   brand mark and the menu button sat on top of whatever scrolled beneath.
   Sticky plus a class swap at the end of the hero fixes both halves. */
.appbar--over{
  /* Sticky keeps it in flow, which pushed the hero down by its own height —
     measured 64px of ivory above a hero that has to start at the very top.
     A negative bottom margin of exactly that height gives the space back
     without giving up the sticking. */
  margin-bottom:calc(-64px - var(--sat));
  background:transparent;border-bottom:none;
  color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.42);
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease);
}
.appbar--over.is-solid{
  background:rgba(247,243,237,.88);
  border-bottom:1px solid var(--hair-soft);
  color:var(--txt);text-shadow:none;
}
.appbar--over.is-solid .iconBtn{
  background:var(--ground-2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.appbar__brand{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
/* .appbar__name still sets a page title on subpages; only the brand state
   became the logo. */
.appbar__name{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.22em}
.iconBtn{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  display:grid;place-items:center;color:inherit;
  background:var(--ground-2);border:1px solid var(--hair-soft);
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.appbar--over .iconBtn{
  background:rgba(20,15,10,.36);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.iconBtn:active{transform:scale(.93)}
.iconBtn svg{width:19px;height:19px}
.iconBtn.is-fav{color:var(--gold-ink);border-color:rgba(147,86,64,.42)}
.iconBtn.is-fav svg{fill:currentColor}

/* --- platform hero -------------------------------------------------------- */
.pHero{
  position:relative;min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  /* hero-06 is a permanent photographic floor. Even during a failed/slow image
     request there can never be a white frame behind the slideshow. */
  background:#15100B url("../images/hero/hero-06.webp") center center/cover no-repeat;
}
.pHero__slides{position:absolute;inset:0;z-index:0;isolation:isolate;background:transparent}
.pHero__img{
  position:absolute;inset:-1.5%;width:103%;height:103%;object-fit:cover;
  opacity:0;z-index:0;
  transition:opacity 1.45s ease-in-out;
  animation:heroFloat 30s ease-in-out infinite alternate;
  animation-delay:var(--hero-delay,0s);
  transform-origin:50% 50%;
  will-change:opacity,transform;
}
/* Incoming image is always above the outgoing fully-opaque frame. */
.pHero__img.is-active{opacity:1;z-index:2}
.pHero__img.is-prev{opacity:1;z-index:1}
@keyframes heroFloat{
  from{transform:scale(1.018) translate3d(-.45%, .22%, 0)}
  to{transform:scale(1.055) translate3d(.48%, -.28%, 0)}
}
.pHero__glassLayer{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,10,7,.14) 0%,
    rgba(14,10,7,.06) 30%,
    rgba(14,10,7,.16) 64%,
    rgba(14,10,7,.30) 100%);
}
.pHero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,15,10,.20) 0%, rgba(20,15,10,.01) 30%,
    rgba(20,15,10,.14) 62%, rgba(20,15,10,.60) 100%);
}
@media (prefers-reduced-motion:reduce){
  .pHero__img{animation:none;transform:none;transition-duration:.35s}
}
/* The copy sits on a frosted slab. Over a bright, busy photograph a text
   shadow alone was not enough — the eyebrow and the sub-line disappeared into
   the water. Blurring what is behind the words separates them from the image
   without hiding it, which a flat overlay would.

   backdrop-filter is not universal, so the slab also carries a translucent
   background of its own: where the blur is unsupported the panel still darkens
   the photograph and the text still reads. */
.pHero__body{
  position:relative;z-index:2;
  /* Sits higher than the very bottom so the picture keeps a foot of its own.
     The frost is down to almost nothing: the video is the reason anyone stops
     on this screen, and every point of tint is a point of it hidden. What
     keeps the words readable is now mostly their own shadow, which costs the
     image nothing because it only darkens the pixels right behind the glyphs
     instead of the whole panel. */
  margin:0 calc(14px + var(--sal)) 13svh calc(14px + var(--sar));
  padding:20px 20px 22px;
  /* No panel at all any more. Every version of the frost hid some of the
     video, and the video is the reason anyone stops on this screen. What holds
     the words is their own shadow plus the hero's existing bottom scrim, which
     darkens the photograph where the type sits without covering it. */
  background:none;
  border:none;
}
/* The country line. It sits outside the frosted panel on purpose — a headline
   this size behind glass looked like it was under water, and the whole point of
   thinning the panel was to let the video through. Gold as a gradient clipped
   to the glyphs, so it reads as metal rather than yellow text; the drop shadow
   is what keeps it legible over a bright frame now that nothing is behind it. */
.pHero__script{
  position:relative;z-index:2;
  display:block;
  margin:0 calc(20px + var(--sal)) 2px calc(20px + var(--sar));
  /* Modern rather than classical, and the same form in every alphabet. The
     italic Playfair was a beautiful Latin word and a merely adequate Cyrillic
     one — a high-contrast didone italic leans on serif shapes that Тургция does
     not share, so ТУРЦИЯ came out looking like a different brand.

     A hairline weight set in caps with generous tracking is the contemporary
     wordmark idiom, it is identical in construction across Latin and Cyrillic,
     and it costs nothing: Inter is already loaded for the headline, so this
     screen — the first one anyone sees — gains no request and no byte. The gold
     gradient and the shadow stay; they were doing the decorative work anyway. */
  font-family:var(--sans);
  font-style:normal;
  font-weight:250;
  font-size:clamp(34px,10.2vw,48px);
  text-transform:uppercase;
  line-height:1.24;
  /* tracking adds a gap after the last letter; take it back so the word stays
     optically flush with the headline below it */
  letter-spacing:.20em;
  padding-right:.20em;
  padding-bottom:.02em;
  color:var(--gold);
  background:linear-gradient(102deg,var(--gold) 0%,var(--gold-light) 44%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 3px 20px rgba(0,0,0,.45));
}
.pHero__title{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.032em;
  font-size:clamp(33px,9.8vw,43px);
  line-height:1.06;
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.55);
}
.pHero__sub{margin:15px 0 0;font-size:15.5px;line-height:1.55;max-width:32ch;text-shadow:0 1px 3px rgba(0,0,0,.55),0 1px 14px rgba(0,0,0,.5)}
.pHero__cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:20px;padding:0 0 8px;border:0;border-bottom:1px solid rgba(221,180,160,.9);
  background:none;color:var(--gold-light);
  font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.pHero__cta svg{width:16px;height:16px;transform:translateY(-.5px)}
.pHero__cta:active{opacity:.74}

/* Short phones: keep the hero hierarchy clear without crowding the bottom nav. */
@media (max-height:720px){
  .pHero__script{font-size:clamp(28px,8.4vw,38px);margin-bottom:0}
  .pHero__body{margin-bottom:8svh;padding-top:12px;padding-bottom:14px}
  .pHero__title{font-size:clamp(29px,8.6vw,37px)}
  .pHero__sub{font-size:13.5px;line-height:1.45;margin-top:11px}
  .pHero__cta{font-size:10.5px;margin-top:14px}
}

/* ========================================================================== 
   Home editorial structure — one visual language, distinct chapters.
   ========================================================================== */
.homeEditorialHead{padding:32px calc(20px + var(--sar)) 18px calc(20px + var(--sal))}
.homeEditorialHead h2{margin:6px 0 0;font-family:var(--display);font-size:28px;line-height:1.06;letter-spacing:-.025em;font-weight:600}
.homeEditorialHead--row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.homeTextLink{border:0;background:none;padding:7px 0;color:var(--gold-ink);font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}

.travelWorlds{background:#15100c;color:#fff;padding:6px 0 42px;border-top:1px solid rgba(255,255,255,.05)}
.travelWorlds .eyebrow{color:var(--gold-light)}
.travelWorlds__rail{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 calc(20px + var(--sar)) 5px calc(20px + var(--sal))}
.travelWorlds__rail::-webkit-scrollbar{display:none}
.travelWorld{position:relative;flex:0 0 min(82vw,340px);aspect-ratio:4/5;border:0;padding:0;border-radius:5px;overflow:hidden;background:#251d17;text-align:left;scroll-snap-align:start;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.travelWorld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.015);transition:transform .8s var(--ease)}
.travelWorld:active img{transform:scale(1.045)}
.travelWorld__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.03) 34%,rgba(10,8,6,.26) 58%,rgba(10,8,6,.92) 100%)}
.travelWorld__copy{position:absolute;left:18px;right:18px;bottom:18px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:5px 12px}
.travelWorld__copy b{grid-column:1/2;font-family:var(--display);font-size:27px;line-height:1;font-weight:600;color:#fff;letter-spacing:-.02em}
.travelWorld__copy i{grid-column:1/2;font-style:normal;color:var(--gold-light);font-size:11px;line-height:1.35;letter-spacing:.07em;text-transform:uppercase}
.travelWorld__copy>span{grid-column:2;grid-row:1/3;align-self:center;color:var(--gold-light)}
.travelWorld__copy svg{width:18px;height:18px}

.destinationIndex{padding:18px 0 42px;background:var(--ground-2)}
.destinationIndex__intro{padding:18px calc(20px + var(--sar)) 24px calc(20px + var(--sal))}
.destinationIndex__intro h1{font-family:var(--display);font-size:34px;line-height:1.02;margin:8px 0 0;font-weight:600;letter-spacing:-.03em}
.destinationIndex__intro p{margin:12px 0 0;max-width:34ch;font-size:13px;line-height:1.55;color:var(--txt-2)}
.destinationIndex__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 calc(16px + var(--sar)) 0 calc(16px + var(--sal))}
.destinationIndex__card{position:relative;display:block;aspect-ratio:4/5;border:0;border-radius:4px;overflow:hidden;padding:0;text-align:left;background:var(--ground-3);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
/* an offer's name on its card is the link to its address (app.js offerLink): it looks like the name it is */
.ownAddress{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.destinationIndex__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .75s var(--ease)}
.destinationIndex__card:active img{transform:scale(1.04)}
.destinationIndex__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(12,9,7,.82) 100%)}
.destinationIndex__copy{position:absolute;left:12px;right:12px;bottom:11px;color:#fff}
.destinationIndex__copy b{display:block;font-family:var(--display);font-size:18px;font-weight:600;line-height:1.05}
.destinationIndex__copy i{display:block;margin-top:4px;font-style:normal;color:rgba(255,255,255,.8);font-size:9.5px;line-height:1.25}

/* Category and destination detail pages. */
.storyHero{position:relative;height:min(68svh,650px);min-height:440px;overflow:hidden;background:var(--ground-3);color:#fff}
.storyHero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.storyHero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,7,.10),rgba(12,9,7,.14) 38%,rgba(12,9,7,.78) 100%)}
.storyHero__copy{position:absolute;left:calc(22px + var(--sal));right:calc(22px + var(--sar));bottom:26px}
.storyHero__copy .eyebrow{color:var(--gold-light)}
.storyHero__copy h1{font-family:var(--display);font-size:clamp(38px,11vw,52px);line-height:.98;font-weight:600;margin:8px 0 0;letter-spacing:-.035em}
.storyHero__copy p{margin:10px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.storyIntro{padding:30px calc(22px + var(--sar)) 34px calc(22px + var(--sal));background:var(--ground-2);border-bottom:1px solid var(--hair-soft)}
.storyIntro>p{font-family:var(--display);font-size:20px;line-height:1.45;margin:0;color:var(--txt)}
.storyIntro .storyIntro__muted{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--txt-2);margin-top:12px}
.storyActions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px}
.storyRelated{padding-top:32px;padding-bottom:40px}
.storyTiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px calc(18px + var(--sar)) 42px calc(18px + var(--sal));background:var(--ground-2)}
.storyTile{position:relative;aspect-ratio:4/5;border:0;border-radius:4px;overflow:hidden;padding:0;text-align:left;background:var(--ground-3)}
.storyTile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.storyTile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,9,7,.78))}
.storyTile span{position:absolute;z-index:1;left:12px;right:12px;bottom:11px;color:#fff}
.storyTile b{display:block;font-family:var(--display);font-size:16px;line-height:1.08}
.storyTile i{display:block;font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);margin-top:4px}
.eventPromise{padding:42px calc(22px + var(--sar)) 48px calc(22px + var(--sal));background:#15100c;color:#fff}
.eventPromise .eyebrow{color:var(--gold-light)}
.eventPromise h2{font-family:var(--display);font-size:28px;line-height:1.08;margin:9px 0 0;font-weight:600}
.eventPromise p{margin:14px 0 22px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.6}

@media (prefers-reduced-motion:reduce){.travelWorld img{transition:none}
}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 22px;border-radius:2px;width:100%;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .18s var(--ease),background .25s var(--ease);
}
.btn:active{transform:scale(.985)}
.btn--primary{
  background:var(--dark);
  color:#fff;
}
.btn--gold{background:linear-gradient(100deg,var(--gold),#CA9E8A);color:var(--dark-2)}
.btn--ghost{background:var(--ground-2);color:var(--txt);border:1px solid var(--hair)}
.btn--dark{background:var(--dark);color:#fff;border:1px solid var(--dark)}
.btn--sm{min-height:44px;font-size:10.5px;padding:0 16px;width:auto}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:16px;height:16px}
.btnRow{display:flex;gap:10px}
.btnRow .btn{width:auto;flex:1 1 0;min-width:0}
/* Long German/Turkish payment labels need a full-width action on the
   narrowest phones. Stacking keeps both actions readable and prevents a
   button's long word from creating horizontal page scroll. */
@media (max-width:360px){
  .sheet__foot .btnRow{flex-direction:column;gap:8px}
  .sheet__foot .btnRow .btn{width:100%;flex:0 0 auto}
}

/* --- hotel entry ---------------------------------------------------------
   No card container, no shadow, no button. The photograph sits on the
   ground and the whole entry is the tap target. */
.card{
  display:block;width:100%;text-align:left;
  background:none;border:none;padding:0;
  transition:opacity .25s var(--ease);
}
.card:active{opacity:.72}
.card__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:3px;background:var(--ground-3);
}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,15,10,0) 62%,rgba(20,15,10,.32) 100%);
}
.card__fav{
  position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(20,15,10,.42);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.card__fav.is-on{color:var(--gold-light);border-color:rgba(241,211,195,.7)}
.card__fav.is-on svg{fill:currentColor}
.card__fav svg{width:19px;height:19px}
.card__body{padding:16px 2px 0}
.stars{color:var(--gold-ink);font-size:10px;letter-spacing:.30em}
.card__name{
  margin:9px 0 0;font-family:var(--display);font-weight:600;letter-spacing:-.022em;font-size:21px;
  font-weight:400;line-height:1.2;letter-spacing:-.005em;color:var(--txt);
}
.card__loc{
  margin-top:7px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);
}
/* the score, stated once and quietly */
.score{margin-top:11px;font-size:11px;letter-spacing:.10em;color:var(--gold-ink)}
.score b{font-weight:600;font-variant-numeric:tabular-nums}
.score span{color:var(--txt-3);letter-spacing:.14em;text-transform:uppercase;margin-left:8px}
/* amenities as one quiet line, never coloured pills */
.traits{
  margin-top:11px;font-size:10.5px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--txt-2);line-height:1.7;
}
.traits i{font-style:normal;color:var(--gold-ink);margin:0 8px;opacity:.55}
.card__desc{margin:12px 0 0;font-size:13px;line-height:1.65;color:var(--txt-2)}
.cardList{display:flex;flex-direction:column;gap:44px}

/* legacy badge styles kept for staff chips only */
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.badge{
  font-size:10px;font-weight:500;padding:5px 10px;border-radius:2px;
  background:rgba(255,255,255,.06);border:1px solid var(--hair-soft);
  color:var(--txt-2);letter-spacing:.10em;text-transform:uppercase;white-space:nowrap;
}
.badge--gold{background:rgba(217,176,156,.14);border-color:var(--hair);color:var(--gold-light)}
.badge--soft{background:rgba(255,255,255,.04)}

/* --- rails / chips -------------------------------------------------------- */
/* scroll-padding matters here: without it the snap algorithm targets the
   first child's edge and scrolls the rail by exactly the inline padding, so
   the first card ends up flush against the screen instead of lining up with
   the headings. */

/* --------------------------------------------------------------------------
   Dark glass

   One recipe, used everywhere the treatment appears, so the pieces match
   instead of each drifting to its own tint. Two layers of defence: the blur
   is the effect, but a translucent background carries it on browsers without
   backdrop-filter, where a blur-only panel would be plain glass and the white
   text on it would vanish.
   -------------------------------------------------------------------------- */

/* --- Home destination / excursion showcases ----------------------------- */

.chips{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-padding-inline:20px;margin-inline:-20px;padding-inline:20px;padding-bottom:4px}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:10px 16px;border-radius:2px;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ground-2);border:1px solid var(--hair-soft);color:var(--txt-2);
  min-height:42px;display:flex;align-items:center;transition:all .2s var(--ease);
}
.chip.is-on{background:var(--dark);border-color:var(--dark);color:#fff}
.chip:active{transform:scale(.96)}

/* --- charter listings (yachts & VIP transport) ---------------------------
   The grammar of a broker's rate card, set in the platform's own type: the
   photograph, the name, two quiet spec lines, and the entry rate under a
   hairline. No badges, no buttons — the whole card opens the sheet. */
.fleetIntro{padding:26px 20px 0}
.fleetIntro .h-xl{margin-top:8px}
.fleetIntro__note{margin:14px 0 0;max-width:46ch;font-size:13px;line-height:1.65;color:var(--txt-2)}
.fleetChips{margin-top:22px;margin-bottom:32px}
.charterCard__name{
  margin:14px 0 0;font-family:var(--display);
  font-size:20px;font-weight:600;letter-spacing:.06em;line-height:1.2;color:var(--txt);
  /* vessel names arrive as caps; localised vehicle names get the same set */
  text-transform:uppercase;
}
.charterCard__line{margin-top:9px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2)}
.charterCard__line--soft{margin-top:6px;color:var(--txt-3)}
.charterCard__desc{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--txt-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.charterCard__rate{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--hair-soft);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
.charterCard__rateVal{flex:1 1 auto;min-width:0}
.charterCard__rate span{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.charterCard__rate b{
  display:block;margin-top:4px;font-family:var(--display);
  font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--txt);
  font-variant-numeric:tabular-nums;
}
/* The stated door into the sheet, right of the rate. It carries no handler —
   the card underneath is the target; the button only makes it visible. */
.charterCard__more{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:0 16px;border-radius:2px;border:0;
  background:var(--dark);color:#fff;
  font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
}
.charterCard__more svg{width:13px;height:13px}
/* The short way: book the printed from-rate and pay at once. */
.charterCard__book{margin-top:12px;min-height:48px;font-size:11px}
.fleetEmpty p{margin:0 0 16px;font-size:13.5px;line-height:1.65;color:var(--txt-2)}
.fleetSection{margin:0 0 22px}
.cardList+.fleetSection{margin-top:54px}
/* A wired photograph that does not exist yet: the card keeps its shape and
   says so quietly, instead of showing the browser's broken-image glyph. */
.charterCard__media--pending{
  aspect-ratio:16/10;border-radius:3px;background:var(--ground-3);
  display:grid;place-content:center;justify-items:center;gap:10px;
}
.charterCard__media--pending svg{width:42px;height:42px;color:var(--gold-ink);opacity:.4}
.charterCard__media--pending span{font-size:9px;letter-spacing:.20em;text-transform:uppercase;color:var(--txt-3)}
.fleetAsk{margin-top:46px;padding:22px}
.blockFleetCta{margin-top:22px}

/* --- search --------------------------------------------------------------- */
.searchCard{background:var(--ground-2);border:1px solid var(--hair-soft);border-radius:3px}
.searchRow{display:flex;align-items:center;gap:14px;padding:17px 16px;min-height:66px;width:100%;text-align:left;background:none;border:none}
.searchRow+.searchRow{border-top:1px solid var(--hair-soft)}
.searchRow:active{background:var(--ground)}
.searchRow>svg{width:19px;height:19px;flex:0 0 19px;color:var(--gold-ink)}
.searchRow__l{flex:1 1 auto;min-width:0}
.searchRow__k{display:block;font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--txt-3)}
.searchRow__v{display:block;font-family:var(--display);font-size:15px;font-weight:550;letter-spacing:-.012em;margin-top:4px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- bottom nav ----------------------------------------------------------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:25px calc(4px + var(--sar)) calc(9px + var(--sab)) calc(4px + var(--sal));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-top:1px solid var(--hair-soft);
}
.tabbar--staff{background:rgba(8,41,60,.97)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:4px 1px;color:var(--txt-3);transition:color .25s;min-width:0}
.tab__ic{display:grid;place-items:center;width:29px;height:29px}
.tab svg{width:22px;height:22px}

/* The concierge tab. Raised out of the bar and filled, because the offering is
   a named person handling the trip — that is the product, not a fifth
   destination. The bar gains matching top padding so the disc lifts clear of
   the bar's edge without hanging over the content behind it. */
.tab--hero .tab__ic{
  width:44px;height:44px;border-radius:50%;
  margin-top:-16px;
  background:var(--dark);
  border:1.5px solid var(--gold);
  color:#fff;
  box-shadow:0 6px 16px rgba(42,33,25,.30);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tab--hero svg{width:21px;height:21px;stroke-width:1.7}
.tab--hero:active .tab__ic{transform:scale(.94);box-shadow:0 3px 10px rgba(42,33,25,.28)}
/* It is filled in every state, so the active tint would do nothing — the label
   carries the selected state instead. */
.tab--hero.is-on .tab__ic{border-color:var(--gold-light)}
.tab--hero.is-on svg{stroke-width:1.7}
/* The unread dot has to clear the disc, not sit inside it. */
.tab--hero .tab__dot{top:-14px;right:calc(50% - 22px);border:2px solid var(--ground-2);width:10px;height:10px}
/* Not uppercased: Russian labels like "Мои поездки" are far wider in caps
   and broke out of the bar. */
.tab span{font-size:10px;font-weight:520;letter-spacing:.01em;line-height:1.12;text-align:center}
.tab.is-on{color:var(--dark)}
.tab.is-on svg{stroke-width:1.9}
.tab__dot{position:absolute;top:1px;right:calc(50% - 16px);width:6px;height:6px;border-radius:50%;background:var(--gold-ink)}

/* --- bottom sheet --------------------------------------------------------- */
.sheetWrap{position:fixed;inset:0;z-index:80;display:none}
.sheetWrap.is-open{display:block}
.sheetBackdrop{position:absolute;inset:0;background:rgba(8,41,60,.42);opacity:0;transition:opacity .3s var(--ease)}
.sheetWrap.is-in .sheetBackdrop{opacity:1}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:90svh;
  display:flex;flex-direction:column;
  background:var(--ground-2);
  /* The sheet lives outside #app, so it inherits body's white ink — the ink of
     the intro, not of the platform. Everything styled explicitly looked right,
     which hid the problem: the heading and the close icon inherit, and were
     being drawn white on a white sheet. The X was there and worked; it was
     simply invisible, so the sheet looked like it could not be closed. */
  color:var(--txt);
  border-top:1px solid var(--hair-soft);
  border-radius:4px 4px 0 0;padding-bottom:var(--sab);
  transform:translateY(100%);transition:transform .36s var(--ease);
}
.sheetWrap.is-in .sheet{transform:none}
.sheet__grip{width:36px;height:3px;border-radius:2px;background:var(--hair);margin:12px auto 0;flex:0 0 auto}
#sheetInner{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 10px;flex:0 0 auto}
.sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 20px 20px;-webkit-overflow-scrolling:touch}
.sheet__foot{flex:0 0 auto;padding:14px 20px 16px;border-top:1px solid var(--hair-soft);background:var(--ground-2);overflow-x:hidden}

/* --- forms ---------------------------------------------------------------- */
.field{margin-top:18px}
.label{display:block;font-size:9.5px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;color:var(--txt-3);margin-bottom:9px}
.input{
  width:100%;min-height:54px;padding:15px 14px;border-radius:2px;
  background:var(--ground);border:1px solid var(--hair-soft);
  font-size:15px;color:var(--txt);
  -webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s;
}
.input::placeholder{color:var(--txt-3)}
.input:focus{outline:none;border-color:var(--dark);background:var(--ground-2)}
textarea.input{min-height:100px;resize:vertical;line-height:1.6}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F611B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:44px;
}
select.input option{background:#fff;color:var(--txt)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.check{
  display:flex;align-items:center;gap:13px;padding:15px 14px;border-radius:2px;
  background:var(--ground);border:1px solid transparent;
  margin-top:9px;min-height:54px;width:100%;text-align:left;transition:all .2s;
}
/* a country with its stays, once the search has several (app.js sheetRegion): closed, a tap shows its regions */
.sheetCountry{margin-top:9px}
.sheetCountry summary{display:flex;align-items:center;gap:13px;min-height:54px;padding:12px 14px;border:1px solid var(--hair);border-radius:2px;background:var(--ground-2);cursor:pointer;list-style:none}
.sheetCountry summary::-webkit-details-marker{display:none}
.sheetCountry summary:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.sheetCountry__l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.sheetCountry__l b{font-size:15px;font-weight:600;color:var(--txt);overflow-wrap:break-word}
.sheetCountry__l .muted{color:var(--txt-3)}
.sheetCountry summary svg{flex:0 0 auto;width:15px;height:15px;transition:transform .2s}
.sheetCountry[open] summary svg{transform:rotate(90deg)}
.sheetCountry>.check{margin-left:12px;width:calc(100% - 12px)}
.check.is-on{background:rgba(217,176,156,.18);border-color:rgba(147,86,64,.34)}
.check__box{
  width:20px;height:20px;flex:0 0 20px;border-radius:2px;
  border:1px solid var(--hair);background:var(--ground-2);
  display:grid;place-items:center;transition:all .2s;
}
.check.is-on .check__box{background:var(--dark);border-color:var(--dark);color:#fff}
.check__box svg{width:12px;height:12px;stroke-width:3.2;opacity:0}
.check.is-on .check__box svg{opacity:1}
.check span{font-size:14px;color:var(--txt)}
.check .muted{color:var(--txt-3)}
.stepper{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
.stepper__c{display:flex;align-items:center;gap:16px}
.rnd{width:42px;height:42px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;background:var(--ground-2);color:var(--txt);transition:transform .18s}
.rnd:active{transform:scale(.9)}
.rnd[disabled]{opacity:.3}
.rnd svg{width:16px;height:16px;stroke-width:2}
.stepper__n{font-family:var(--display);font-weight:600;font-size:18px;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}

/* --- progress / status ---------------------------------------------------- */
.steps{display:flex;gap:6px;margin:18px 0 6px}
.steps i{flex:1 1 0;height:1.5px;background:var(--hair-soft);transition:background .3s}
.steps i.is-on{background:var(--dark)}
.timeline{margin-top:6px}
.tl{display:flex;gap:15px;padding:10px 0;position:relative}
.tl::before{content:"";position:absolute;left:7.5px;top:28px;bottom:-10px;width:1px;background:var(--hair-soft)}
.tl:last-child::before{display:none}
.tl__dot{width:16px;height:16px;flex:0 0 16px;border-radius:50%;border:1px solid var(--hair);background:var(--ground-2);margin-top:3px;z-index:1;display:grid;place-items:center}
.tl.is-done .tl__dot{background:var(--dark);border-color:var(--dark)}
.tl.is-done .tl__dot::after{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.tl.is-now .tl__dot{border-color:var(--dark);box-shadow:0 0 0 4px rgba(42,33,25,.12)}
.tl__t{font-size:13.5px;color:var(--txt)}
.tl.is-pending .tl__t{color:var(--txt-3)}
.tl__d{font-size:10.5px;color:var(--txt-3);margin-top:2px;letter-spacing:.04em}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:2px;
  font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid currentColor;
}
.pill--new{color:#2E6E9E}
.pill--work{color:#A4563A}
.pill--offer{color:var(--gold-ink)}
.pill--ok{color:#1E7A55}
.pill--pay{color:#B34A38}
.pill--done{color:#1E7A55}

/* --- sticky cta ----------------------------------------------------------- */
.stickyCta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:14px calc(20px + var(--sar)) calc(14px + var(--sab)) calc(20px + var(--sal));
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border-top:1px solid var(--hair-soft);
  display:flex;align-items:center;gap:14px;
}
.stickyCta__t{flex:1 1 auto;min-width:0}
.stickyCta__t b{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.014em;font-size:14.5px;color:var(--txt)}
.stickyCta__t span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.stickyCta .btn{width:auto;flex:0 0 auto;padding:0 22px}

/* --- gallery -------------------------------------------------------------- */
.gal{position:relative;aspect-ratio:4/3;background:var(--ground-3);overflow:hidden}
.gal__track{display:flex;height:100%;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:auto}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:center}
.gal__slide img{width:100%;height:100%;object-fit:cover}.gal__slide>.hotelImageEmpty{width:100%;height:100%}
.gal__counter{position:absolute;left:18px;top:calc(18px + var(--sat));z-index:4;max-width:calc(100% - 100px);padding:6px 10px;border-radius:16px;background:rgba(20,15,10,.7);color:#fff;font-size:12px;line-height:1.3;pointer-events:none}
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(20,15,10,.72);color:#fff;cursor:pointer}
.gal__nav svg{width:22px;height:22px}.gal__prev{left:12px}.gal__next{right:12px}.gal__nav:disabled{opacity:.35;cursor:default}
.gal__track:focus-visible,.gal__nav:focus-visible,.gal__thumbs button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.gal__thumbs{position:relative;display:flex;gap:8px;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:10px var(--page-gutter,16px);scrollbar-width:thin;background:var(--ground-2)}
.gal__thumbs button{position:relative;flex:0 0 88px;width:88px;height:64px;padding:3px;border:2px solid transparent;border-radius:6px;background:var(--ground-3);cursor:pointer;overflow:hidden}
.gal__thumbs button[aria-current=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--txt)}
.gal__thumbs img{width:100%;height:100%;object-fit:cover;border-radius:2px}.gal__thumbEmpty{display:grid;place-items:center;height:100%;color:var(--txt-2)}.gal__thumbEmpty[hidden]{display:none}.gal__thumbEmpty svg{width:24px;height:24px}
.gal__thumbNumber{position:absolute;right:4px;bottom:4px;padding:1px 4px;border-radius:3px;background:#18120ed9;color:#fff;font-size:10px;line-height:1.4}
[data-gallery-picture][hidden]{display:none}
.card[data-hotel]{display:flex;flex-direction:column;height:100%}.card[data-hotel] .card__body{flex:1;min-width:0}.card[data-hotel] .card__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3;min-height:2.6em}
.card[data-hotel] .card__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.6;min-height:4.8em;overflow-wrap:anywhere}
.hotelDescription{font-size:14px;line-height:1.7;color:var(--txt-2);overflow-wrap:anywhere}.hotelDescription p{margin:9px 0 0}.hotelDescription p+p{margin-top:16px}
.hotelImageEmpty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:18px;background:var(--ground-3);color:var(--txt-2);font-size:13px;text-align:center}.hotelImageEmpty svg{width:32px;height:32px}.hotelImageEmpty[hidden],img[data-hotel-picture][hidden]{display:none}
.gal__bar{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(12px + var(--sat)) 18px 12px;background:linear-gradient(180deg,rgba(20,15,10,.5),transparent);color:#fff}
.gal__bar .iconBtn{background:rgba(20,15,10,.42);border-color:rgba(255,255,255,.24);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* --- detail --------------------------------------------------------------- */
.detailSec{padding:32px 20px;border-top:1px solid var(--hair-soft)}
.kv{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair-soft);font-size:13.5px;color:var(--txt-2)}
.kv:last-child{border-bottom:none}
.kv b{font-weight:400;text-align:right;color:var(--txt)}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.amen div{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--txt-2)}
.amen svg{width:14px;height:14px;flex:0 0 14px;color:var(--gold-ink);stroke-width:2}
.roomCard{border:1px solid var(--hair-soft);border-radius:2px;padding:18px;margin-top:14px}
.roomCard h4{margin:0;font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.014em;color:var(--txt)}
.empty{text-align:center;padding:70px 26px;color:var(--txt-3)}
.empty svg{width:40px;height:40px;margin:0 auto 16px;color:var(--hair);stroke-width:1.2}
.empty b{font-family:var(--display);font-weight:600;letter-spacing:-.014em;font-size:17px;color:var(--txt-2)}
.empty p{font-size:13px;margin:8px 0 0}

.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%) translateY(12px);
  z-index:95;background:var(--dark);border:1px solid var(--dark);color:#fff;
  padding:13px 20px;border-radius:2px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:all .28s var(--ease);
  max-width:calc(100vw - 40px);
}
.toast.is-in{opacity:1;transform:translateX(-50%) translateY(0)}

.statBox{background:var(--ground-2);border:1px solid var(--hair-soft);border-radius:2px;padding:18px}
.statBox b{display:block;font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--dark)}
.statBox span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-top:9px}
.grid2s{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3s{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.listCard{background:var(--ground-2);border:1px solid var(--hair-soft);border-radius:2px;padding:18px;margin-top:12px}
.listCard__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.listCard b{color:var(--txt)}

.priceBox{
  /* the offer stays dark on purpose — it is the one moment that should feel
     like an envelope being opened */
  background:linear-gradient(150deg, var(--dark) 0%, var(--dark-2) 100%);
  border:1px solid var(--dark);border-radius:2px;padding:24px;margin-top:16px;color:#fff;
}
.priceBox .amt{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--gold-light)}
.priceBox .lbl{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

.staffTop{background:var(--ground-2);border-bottom:1px solid var(--hair);padding:calc(var(--sat) + 20px) 20px 22px}
.noteBox{
  background:rgba(217,176,156,.18);border:1px solid rgba(147,86,64,.30);border-radius:2px;
  padding:15px;font-size:12.5px;line-height:1.6;color:#6D4031;margin-top:14px;
}

.mapWrap{touch-action:none;position:relative;background:var(--dark-2);overflow:hidden;height:calc(100svh - var(--nav-h) - 64px - var(--sat))}
.mapSvg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-100%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;padding:0}
.pin__b{
  background:rgba(20,15,10,.72);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--txt);padding:8px 13px;border-radius:2px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.pin__b b{color:var(--gold-light);margin-left:8px;font-weight:500}
.pin__n{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(217,176,156,.20)}

.langRow{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.langRow .chip{flex:1 1 30%;min-width:96px;justify-content:center;white-space:nowrap}
.menuItem{color:inherit;text-decoration:none;display:flex;align-items:center;gap:15px;padding:18px 2px;border-bottom:1px solid var(--hair-soft);width:100%;text-align:left;min-height:58px;background:none;border-left:none;border-right:none;border-top:none}
.menuItem>svg{width:17px;height:17px;color:var(--gold-ink);flex:0 0 17px}
/* the label only — .chev is a span too, and a bare `.menuItem span` gave it
   flex:1 1 auto while the icon inside had no size of its own, so the chevrons
   stretched into one long zigzag down the sheet */
.menuItem > span{flex:1 1 auto;font-size:13px;letter-spacing:.10em;text-transform:uppercase;color:var(--txt)}
.menuItem .chev{flex:0 0 15px;width:15px;height:15px;color:var(--txt-3);display:block}
.menuItem .chev svg{width:15px;height:15px;display:block}

.cmp{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--txt-2)}
.cmp th,.cmp td{padding:11px 9px;text-align:left;border-bottom:1px solid var(--hair-soft);vertical-align:top}
.cmp th{font-weight:500;color:var(--txt-3);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em}
.cmpScroll{overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;margin-inline:-20px;padding-inline:20px}

/* --------------------------------------------------------------------------
   Scroll reveal

   Content rises into place as it enters the screen instead of every card on
   the page animating at once the moment a view renders — which is what the old
   .fade-up did, so most of it played to nobody.

   Only opacity and transform, both of which the compositor can carry on its
   own thread; nothing here touches layout. The end state is `transform:none`,
   not a zero translate, so a revealed element stops being a containing block
   and cannot capture the fixed tab bar the way an earlier animation did.
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:var(--rd,0s);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;will-change:auto}
/* Rail cards are rounded clips over a photograph whose own slow scale
   animation never stops. Moving such a layer -- by a swipe, by the drift, by
   anything -- makes the browser re-resolve the rounded mask against the pixel
   grid, and the edge pixels shimmer. Promoting each card to its own layer and
   taking it off the back face lets the mask rasterise once and only
   recomposite after that.

   Honest note: this could not be reproduced here. Measured over twelve frames,
   the edge pixels reverse direction on 3.5% of frame changes with the
   sub-pixel drift and 3.2% without it, peaking at 6.4% either way -- so the
   sub-pixel carry is not the cause and removing it would not help. Headless
   Chromium on a desktop GPU is also not a phone's compositor, and it cannot
   decode the site's H.264 clips at all, so the video case is untested. This is
   the standard remedy for the symptom, not a verified fix for this one. */
.travelWorld,.homePromoCard,.vipServiceCard{
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}

/* Rails scroll sideways, so their cards arrive from the side instead. */
/* Rail cards fade only. A horizontal slide inside a horizontally snapping
   scroller means two things moving the same axis at the same time, which is
   the other half of what made this rail feel restless. */

@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
}
.fade-up{}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.26)}100%{transform:scale(1)}}
.pop{animation:pop .42s var(--ease)}

@media (min-width:820px) and (min-height:720px){
  .main{
    left:50%;top:50%;right:auto;bottom:auto;
    width:430px;height:min(94svh,932px);
    transform:translate(-50%,-50%);
    border-radius:38px;overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(217,176,156,.14);
  }
  #app{height:100%}
  .tabbar,.stickyCta{position:absolute}
  .sheetWrap{position:absolute}
}

/* ==========================================================================
   BACKGROUND VIDEO
   Loaded only once on screen (see armBgVideos). Every clip is encoded
   without an audio track, so nothing here can carry sound past the intro.
   ========================================================================== */
.bgVideo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;
  background:var(--ground-2);
}

/* section header with moving footage */
.bandHero{
  position:relative;
  height:44svh;min-height:280px;max-height:420px;
  overflow:hidden;background:var(--ground-2);
}
.bandHero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,15,10,.52) 0%, rgba(20,15,10,.12) 40%, rgba(20,15,10,.94) 100%);
}
.bandHero__txt{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 calc(20px + var(--sal)) 24px calc(20px + var(--sar));
}

/* full-bleed calm behind the confirmation */
.confirmBg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.confirmBg__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,15,10,.80) 0%, rgba(20,15,10,.88) 45%, rgba(20,15,10,.96) 100%);
}

/* ==========================================================================
   CONCIERGE — the direct line to the person handling the trip
   ========================================================================== */
.person{
  display:flex;align-items:center;gap:15px;
  margin-top:24px;padding:18px;
  background:var(--ground-2);border:1px solid var(--hair-soft);border-radius:2px;
}
.person__mark{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  border:1px solid var(--gold-ink);color:var(--gold-ink);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.06em;
}
.person > div b{display:block;font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-.018em;color:var(--txt)}
/* scoped to the text column on purpose — the monogram is a span too, and a
   bare `.person span` outranked .person__mark and knocked it out of its circle */
.person > div span{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin-top:5px}

.doList{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.doList li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--txt-2);line-height:1.5}
.doList svg{width:14px;height:14px;flex:0 0 14px;margin-top:3px;color:var(--gold-ink);stroke-width:2.4}

.threadHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-bottom:12px;border-bottom:1px solid var(--hair-soft)}
.thread{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.msg{max-width:84%;align-self:flex-start}
.msg.is-mine{align-self:flex-end;text-align:right}
.msg__b{
  padding:13px 15px;border-radius:2px;font-size:13.5px;line-height:1.55;
  background:var(--ground-2);border:1px solid var(--hair-soft);color:var(--txt);
}
.msg.is-mine .msg__b{background:var(--dark);border-color:var(--dark);color:#fff}
.msg__m{font-size:9.5px;letter-spacing:.10em;color:var(--txt-3);margin-top:6px}
.composer{margin-top:20px}

/* The concierge page reads as two screens: the person and the options fill the
   first one completely, the bands begin on the next. Without this the bands
   peeked over the fold and the page looked like it had been cut off. */
.concScreen{
  min-height:calc(100svh - var(--nav-h) - 64px - var(--sat));
  display:flex;flex-direction:column;
  padding-bottom:28px;
}

/* --------------------------------------------------------------------------
   VIP service points

   Three lines that say what the house does, in the manner of the reference:
   a gold line icon at the left, a small tracked title, and one quiet sentence
   under it. Centred heading over a short gold rule.

   Deliberately not cards. Cards would put a box around each promise and turn
   three sentences into a product grid; the point here is that they read as one
   short paragraph about the house.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Edge light

   A warm hairline down each edge, lit from top to bottom the whole time, with
   a slow shimmer travelling down it. The line is the point; the shimmer only
   proves it is alive.

   An earlier version was a bright travelling blob on a 3px column with a 38px
   halo. Two things were wrong with it. The halo made the light read as roughly
   forty pixels wide — a smear along the edge rather than a line — and between
   passes the edge went dark, so it was a marker sweeping past rather than
   something the room is trimmed with. Now the column is a single pixel, the
   glow is clipped to it (overflow:hidden), and the base gradient never drops
   to nothing: what moves is a brightening of a line that is always there.

   It stays cheap: two elements, transform only, no repaint, pointer-events off
   so it can never swallow a tap at the edge. It sits above the content but
   below the tab bar and the sheets, and it belongs to the platform only — the
   intro is a photograph and wants nothing drawn over it.

   The travel is expressed in the shimmer's own height: it is 40% of the
   column, so running from -100% to 250% of itself carries it from just above
   the top to just past the bottom.
   -------------------------------------------------------------------------- */
.edgeLed{
  position:fixed;
  top:0;bottom:0;
  width:1px;z-index:45;
  pointer-events:none;overflow:hidden;
  /* the constant line — faded at both ends so it does not butt into the
     corners, strongest through the middle of the screen. Turned up a step: the
     character stays a one-pixel hairline, only the brightness changes, because
     widening it or giving the glow back is what made the first version read as
     a smear along the edge. */
  background:linear-gradient(180deg,
    rgba(222,181,161,0)   0%,
    rgba(225,184,164,.46) 6%,
    rgba(238,205,188,.66) 50%,
    rgba(225,184,164,.46) 94%,
    rgba(222,181,161,0)  100%);
}
.edgeLed--l{left:var(--sal)}
.edgeLed--r{right:var(--sar)}
.edgeLed i{
  position:absolute;left:0;right:0;
  height:40%;
  /* summer light, not a status LED: amber through warm white and back. No box
     shadow — on a one pixel line a bloom is all anyone would see. */
  background:linear-gradient(180deg,
    rgba(250,222,206,0)   0%,
    rgba(251,228,213,.58) 24%,
    rgba(255,248,224,1)   50%,
    rgba(251,228,213,.58) 76%,
    rgba(250,222,206,0)  100%);
  animation:edgeLed 14s linear infinite;
  will-change:transform;
}
/* The two run half a cycle apart, so the pair reads as a room being lit rather
   than two synchronised bars. */
.edgeLed--r i{animation-delay:-7s}
@keyframes edgeLed{
  from{transform:translate3d(0,-100%,0)}
  to  {transform:translate3d(0,250%,0)}
}
@media (prefers-reduced-motion:reduce){
  /* the line stays, the shimmer stops — it is the motion that is the problem */
  .edgeLed i{animation:none;opacity:0}
}

/* ==========================================================================
   EXPERIENCE BANDS

   Four full-bleed photographs stacked edge to edge, each one a way into the
   catalogue that isn't a search field. They deliberately break out of the
   20px .wrap gutter: the whole point is that the image runs to both edges of
   the phone, so the type sits in the photograph rather than on a card.
   ========================================================================== */
/* The type sits on its own dark pane rather than on the gradient alone: this
   is moving image, so whatever is behind a given word changes from frame to
   frame, and a gradient tuned to one frame fails on the next. */

.expBands{margin-top:44px}
.expBand{
  display:block;position:relative;width:100%;
  aspect-ratio:16/10;overflow:hidden;
  background:var(--ground-3);
  border-bottom:2px solid var(--ground-2);
  text-align:center;
}
/* Three nested elements, three transforms, because a second transform on the
   same element replaces the first instead of adding to it:
     __zoom  the arrival — a hair of extra scale that settles as the band
             comes into view
     __ph    the scroll parallax, rewritten every frame from --s
     img     its own slow ambient drift
   The arrival needs a transition, and a transition on the element that carries
   --s would smear the parallax a second behind the finger. Hence the extra
   wrapper rather than one more term in an existing transform. */
.expBand__zoom{
  position:absolute;inset:0;
  transform:scale(1.085);
  transition:transform 1.5s cubic-bezier(.16,.7,.24,1);
}
.expBand.is-in .expBand__zoom{transform:none}
.expBand__ph{
  position:absolute;inset:0;overflow:hidden;
  transform:translate3d(0, calc(var(--s,0) * 13px), 0) scale(1.09);
}
.expBand__ph > img,
.expBand__ph > video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
/* A still photograph that never moves reads as a screenshot next to the
   moving parts of the page. A slow drift and a hair of zoom give it life
   without becoming a slideshow; `alternate` means it eases back instead of
   snapping at the end of the cycle. The scale is what buys the travel — pan a
   1.0 image and you expose its edges. */
.expBand__ph > img{
  animation:driftPhoto 34s ease-in-out infinite alternate;
  animation-delay:var(--pd,0s);
  transform-origin:50% 50%;
}
@keyframes driftPhoto{
  from{transform:scale(1.02) translate3d(-1.1%, 0.7%, 0)}
  to  {transform:scale(1.10) translate3d( 1.2%,-0.9%, 0)}
}
/* Where a clip is supplied it plays over the still, which stays behind it as
   the poster until the video has decoded a frame. */
.expBand__ph > video{z-index:1}
.expBand__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,15,10,.16) 0%,
    rgba(20,15,10,.30) 46%,
    rgba(20,15,10,.62) 100%);
}
.expBand__txt{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 22px 22px;
  display:flex;flex-direction:column;gap:9px;
}
.expBand__txt b{
  font-family:var(--display);
  font-size:clamp(20px,5.6vw,25px);font-weight:600;
  letter-spacing:.045em;text-transform:uppercase;
  color:#fff;line-height:1.14;
  text-shadow:0 2px 20px rgba(0,0,0,.42);
}
.expBand__txt i{
  font-style:normal;font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.90);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce){
  .expBand__ph{transform:none}
  .expBand__ph > img{animation:none;transform:none}
  .expBand__zoom{transform:none;transition:none}
}

/* ==========================================================================
   ARRIVAL BAND — the scroll-linked aircraft

   Three layers in a fixed order: headline (1), airframe (2), card (3). The
   airframe passes between the type and the card as you scroll, which only
   reads as depth because they are separate elements — a background image
   cannot go in front of one thing and behind another.

   Every scroll-driven change is a transform on a single element. No width,
   top or margin is touched, so the phone composites the move instead of
   re-laying out the page on every frame.
   ========================================================================== */

/* Two nested transforms, because they answer to different clocks: the wrapper
   follows the scroll (--p), the image inside flies on its own — a slow figure
   of drift, sway and breathing scale that runs whether or not the finger
   moves. One element cannot carry both without them overwriting each other. */

@keyframes flyDrift{
  0%,100%{transform:translate3d(0,0,0)}
  30%    {transform:translate3d(-2px,-4px,0)}
  70%    {transform:translate3d(2px,2px,0)}
}

/* --------------------------------------------------------------------------
   The sky

   Six cloud sprites, raymarched offline (scripts/render-clouds/clouds.py) and
   moved here with nothing but a transform, so the phone composites them and
   never repaints. Six rather than four because eleven clouds are on the band
   now, and with four sprites the eye starts recognising them.

   Direction is the whole illusion: the aircraft's nose points up the screen, so
   the clouds have to travel DOWN past it. Depth is carried entirely by the
   inline numbers — far cloud is small, pale, blurred and slow; near cloud is
   large, quick, blurrier still, and grows as it passes, because something close
   to the camera changes size visibly while something far below does not.
   -------------------------------------------------------------------------- */
.flySky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.flySky--far{z-index:0}
/* In front of the aircraft, but kept off the type at both ends. A wisp over the
   aircraft is atmosphere; the same wisp over the headline is a grey wash across
   the words, which is exactly what the first pass did. So the layer stops above
   the ticker and is masked out over the headline — cloud fades in as it comes
   down past the title, which is also how it would look. */
.flySky--near{
  z-index:2;bottom:34%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 20%,#000 34%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 20%,#000 34%);
}
.flySky img{
  position:absolute;
  left:var(--l,0);top:0;
  width:var(--w,30%);height:auto;
  opacity:0;
  filter:blur(var(--b,1px));
  animation:flyCloud var(--d,26s) linear var(--dl,0s) infinite;
  will-change:transform,opacity;
}
@keyframes flyCloud{
  0%  {transform:translate3d(0,-38svh,0) scale(var(--s0,1));opacity:0}
  9%  {opacity:var(--o,.45)}
  88% {opacity:var(--o,.45)}
  100%{transform:translate3d(var(--x,0),102svh,0) scale(var(--s1,1.1));opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .flySky{display:none}
}

/* Slipstream behind the wings. Sits under the aircraft, so the lines appear to
   leave from beneath the trailing edge rather than being drawn on top of it.
   Each line is a gradient that fades at both ends — a hard-ended bar reads as
   a scratch on the screen, a fading one reads as air. Motion is a transform
   and an opacity only, so it composites. */
.flyTrail{position:absolute;inset:0;z-index:0;pointer-events:none}
.flyTrail i{
  position:absolute;
  width:1.5px;height:var(--h,20%);
  background:linear-gradient(180deg,
    rgba(42,33,25,0) 0%,
    rgba(42,33,25,.34) 38%,
    rgba(42,33,25,.34) 62%,
    rgba(42,33,25,0) 100%);
  opacity:0;
  animation:slipstream var(--t,2.8s) linear var(--d,0s) infinite;
}
@keyframes slipstream{
  0%   { transform:translate3d(0,-40%,0) scaleY(.5); opacity:0 }
  18%  { opacity:.85 }
  66%  { opacity:.85 }
  100% { transform:translate3d(0,165%,0) scaleY(1);  opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .flyTrail{display:none}
}

/* Transfer band. The saloon that used to cross this section is gone — the
   lettering is the object now. A rendered car is a picture of one particular
   car, and it was always going to be a compromise: 24 MB of model reduced to a
   still, and then a still that had to be given air on both sides so it did not
   read as cut off. A word costs nothing, scales to any screen, and says the
   thing outright.

   The band still runs dark. It is the rhythm the reference uses — light
   section, dark section, light again — and the flight band below deliberately
   stays light so the two do not merge into one long dark stretch. */

/* On a dark ground the card no longer needs to be a separate slab — a hair
   lighter than the band is enough to read as a pane of glass on it. */

/* The lettering. Three things happen to it, on three different clocks:

   1. arrival — each glyph rises and fades in, one after the next, once the
      band comes into view. The hidden start state is scoped to .reveal, so if
      the reveal system is off (reduced motion, or no IntersectionObserver) the
      word is simply there rather than invisible for ever.
   2. light — a warm glow travels along the word and repeats. Per glyph rather
      than a gradient clipped to the text, because a clipped background cannot
      survive the individual transforms of step 1.
   3. scroll — the whole word grows a few per cent across the band's pass,
      which is what is left of the object crossing the layers. */

/* One group per word, and a group never breaks: a flat row of single glyphs
   wraps between any two of them, which put a lone Р on the second line. */

/* The running line under the flight — destinations pass beneath the aircraft.
   The row holds its content twice and travels exactly half its own width, so
   the wrap point lands on an identical pixel and the loop has no seam (same
   trick as the video crossfade, done in layout). */

/* Two identical halves and a shift of exactly -50%: the wrap lands on the
   same pixel. A single row with flex gaps was off by half a gap and jumped. */

/* On the dark card the ivory-ground tones invert. These have to come after the
   rules above, not before — same specificity, so the later one wins, and the
   first attempt at this sat above them and did nothing. */

/* CC BY 4.0 requires the credit to travel with the work, so it lives in the
   menu rather than only in the README. */

/* ==========================================================================
   TEXT OVER IMAGERY

   The platform ground is light, so the default type colour is navy. Anything
   sitting on a photograph or a dark scrim has to opt out of that explicitly —
   otherwise a theme change quietly turns a headline into navy-on-daylight,
   which is what happened to the platform hero.
   ========================================================================== */
.pHero__body,
.bandHero__txt,
.confirmOver{
  color:#fff;
}
.pHero__title,
.bandHero__txt .h-xl,
.bandHero__txt .h-lg,
.confirmOver .h-xl{
  color:#fff;
}
.pHero__sub,
.confirmOver .muted{
  color:rgba(255,255,255,.86);
}
.pHero__body .eyebrow,
.bandHero__txt .eyebrow,
.confirmOver .eyebrow{
  color:var(--gold-light);
}
.confirmOver .listCard{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.confirmOver .listCard b,
.confirmOver .kv b{color:#fff}
.confirmOver .kv{color:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.14)}
.confirmOver .muted,
.confirmOver .tl__t,
.confirmOver .tl__d{color:rgba(255,255,255,.72)}
.confirmOver .tl.is-pending .tl__t{color:rgba(255,255,255,.45)}
.confirmOver .tl__dot{background:transparent;border-color:rgba(255,255,255,.35)}
.confirmOver .tl.is-done .tl__dot{background:var(--gold);border-color:var(--gold)}
.confirmOver .tl.is-done .tl__dot::after{background:var(--dark-2)}
.confirmOver .tl.is-now .tl__dot{border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,176,156,.22)}
.confirmOver .tl::before{background:rgba(255,255,255,.18)}

.blockHero{
  position:relative;width:100%;
  aspect-ratio:4/5;overflow:hidden;background:#100D0A;
  display:flex;align-items:flex-end;
}
.blockHero--plane{aspect-ratio:1/1;background:var(--ground-2)}
.blockHero--word{aspect-ratio:16/9;
  background:radial-gradient(120% 90% at 50% 45%,rgba(58,48,36,.55),transparent 70%),
             linear-gradient(180deg,#171310 0%,#100D0A 55%,#171310 100%);
  align-items:center;justify-content:center;
}
.blockHero__img,.blockHero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blockHero__img{z-index:0}
.blockHero__video{z-index:1;background:#100D0A}
.blockHero--plane .blockHero__img{
  object-fit:contain;padding:8% 22% 14%;
  /* the aircraft is a cut-out with its own shadow — cover would crop the wings */
}
.blockHero__word{
  position:relative;z-index:2;
  font-weight:250;font-size:clamp(28px,8.6vw,40px);
  letter-spacing:.2em;color:rgba(255,255,255,.94);
}
.blockHero__scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(16,12,8,.30) 0%,rgba(16,12,8,0) 34%,
    rgba(16,12,8,.42) 68%,rgba(16,12,8,.88) 100%);
}
.blockHero--plane .blockHero__scrim{background:none}
.blockHero__txt{position:relative;z-index:3;padding:0 20px 22px;width:100%}
.blockHero--plane .blockHero__txt .eyebrow,
.blockHero--plane .blockHero__title{color:var(--txt)}
.blockHero--plane .blockHero__txt .eyebrow{color:var(--gold-ink)}
.blockHero__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,8.6vw,38px);line-height:1.08;letter-spacing:-.03em;
  margin:8px 0 0;color:#fff;
}
.blockLede{
  margin:26px 0 0;font-size:16px;line-height:1.62;color:var(--txt);
}
.blockSpec{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:20px;padding:13px 0;
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--gold-ink);
}
.blockHow{
  margin:34px 0 0;
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--txt);
}
.blockSteps{list-style:none;margin:16px 0 0;padding:0}
.blockSteps li{display:flex;gap:14px;padding:0 0 18px}
.blockSteps b{
  flex:0 0 26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(147,86,64,.42);
  font-size:11px;font-weight:700;color:var(--gold-ink);
}
.blockSteps span{font-size:14.5px;line-height:1.6;color:var(--txt-2);padding-top:3px}
.blockAsk{margin-top:14px}
.blockAsk p{margin:0 0 15px;font-size:14px;line-height:1.62;color:var(--txt-2)}
/* Where the hero is an object rather than a photograph, the words sit under it */
.blockHead{margin:24px 0 0}
.blockHead .blockHero__title{color:var(--txt);margin-top:8px}
.blockHead .eyebrow{color:var(--gold-ink)}
.blockHero--plane,.blockHero--word{align-items:center;justify-content:center}
.blockHero--plane{aspect-ratio:5/4}
.blockHero--plane .blockHero__img{padding:6% 20%}

/* The picture keeps its shape. When the window is the binding constraint the
   frame narrows rather than cropping, so the photograph is always whole — which
   is the point: these were composed for 9:16 and a crop takes the composition
   apart. What appears beside it is the section's own ivory, so the narrow case
   reads as a card rather than as a mistake. */

/* ==========================================================================
   Slim home — categories, excursions and VIP assistance first
   ========================================================================== */

.homeEditorialHead__sub{
  margin:8px 0 0;max-width:33ch;font-size:12.5px;line-height:1.55;color:var(--muted);
}
.homeEditorialHead--dark{color:#fff}
.homeEditorialHead--dark .homeEditorialHead__sub{color:rgba(255,255,255,.68)}

/* Five curated offers: one feature card, four supporting cards. */
.homeOffers{padding:34px 0 40px;background:var(--ground)}
.homeOffers .homeEditorialHead{padding-bottom:20px}
.homeOfferCard{position:relative;border:0;padding:0;background:none;text-align:left;border-radius:4px;overflow:hidden}
.homeOfferCard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ground-3)}
.homeOfferCard__media>img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.homeOfferCard:active .homeOfferCard__media>img{transform:scale(1.025)}
.homeOfferCard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,8,.02) 38%,rgba(15,11,8,.82) 100%)}
.homeOfferCard__fav{
  position:absolute;z-index:3;right:10px;top:10px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);
  background:rgba(15,11,8,.32);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.homeOfferCard__fav svg{width:16px;height:16px}
.homeOfferCard__fav.is-on{color:var(--gold-light);border-color:rgba(221,180,160,.8)}
.homeOfferCard__copy{position:absolute;left:16px;right:16px;bottom:15px;z-index:2;color:#fff}
.homeOfferCard__copy .stars{display:block;color:var(--gold-light);font-size:10px;letter-spacing:.14em;margin-bottom:6px}
.homeOfferCard__copy b{display:block;font-family:var(--display);font-size:20px;line-height:1.08;font-weight:600;text-shadow:0 2px 14px rgba(0,0,0,.46)}
.homeOfferCard__copy i{display:block;margin-top:7px;font-style:normal;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.homeOfferCard__badge{
  position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;align-items:center;padding:7px 10px;
  border-radius:999px;background:rgba(12,9,6,.55);color:var(--gold-light);border:1px solid rgba(224,187,168,.48);
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.homeOfferCard--featured{margin:0 calc(20px + var(--sar)) 14px calc(20px + var(--sal));display:block}
.homeOfferCard--featured .homeOfferCard__media{aspect-ratio:16/10}
.homeOfferCard--featured .homeOfferCard__copy b{font-size:28px;max-width:90%}
.homeOfferCard--featured .homeOfferCard__copy i{font-size:10.5px}
.homeOfferGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 calc(20px + var(--sar)) 4px calc(20px + var(--sal))}
.homeOfferCard--small .homeOfferCard__media{aspect-ratio:4/5}
.homeOfferCard--small .homeOfferCard__copy b{font-size:17px;line-height:1.1}
.homeOfferCard--small .homeOfferCard__copy i{font-size:9px}
.homeOfferCard--small .homeOfferCard__fav{width:32px;height:32px}

@media (prefers-reduced-motion:reduce){
  .blockHero__video{display:none}
}

/* ========================================================================== 
   FINAL PREMIUM PASS · 2026-08-17
   One consolidated layer for the homepage instead of chained patch blocks.
   ========================================================================== */

/* Hero — slower, quieter editorial movement and a softer crossfade. */
.pHero__img{
  inset:-1.1%;width:102.2%;height:102.2%;
  transition:opacity 1.8s cubic-bezier(.22,.61,.36,1);
  animation:heroFloat 38s ease-in-out infinite alternate;
}
.pHero__img:nth-child(1){object-position:50% 50%}
.pHero__img:nth-child(2){object-position:48% 50%}
.pHero__img:nth-child(3){object-position:53% 50%}
@keyframes heroFloat{
  from{transform:scale(1.014) translate3d(-.20%, .10%, 0)}
  to{transform:scale(1.042) translate3d(.22%, -.14%, 0)}
}
.pHero__glassLayer{
  background:linear-gradient(180deg,rgba(14,10,7,.11) 0%,rgba(14,10,7,.04) 34%,rgba(14,10,7,.13) 66%,rgba(14,10,7,.27) 100%);
}
.pHero__scrim{
  background:linear-gradient(180deg,rgba(20,15,10,.16) 0%,rgba(20,15,10,0) 32%,rgba(20,15,10,.11) 62%,rgba(20,15,10,.58) 100%);
}
.pHero__body{margin-bottom:12svh;max-width:390px}
.pHero__cta{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pHero__cta:active{transform:translateX(2px)}

/* Chapter separators — subtle, not decorative clutter. */
.travelWorlds,.homeOffers{position:relative}.homeOffers::before{
  content:"";position:absolute;left:20px;right:20px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(187,134,111,.24) 18%,rgba(187,134,111,.24) 82%,transparent);
}

/* VIP focus — slightly more breathing room, calm typography. */

/* ONLYONE in motion — actual 9:16 video, equal cards, seamless poster handoff. */

/* Selected offers — one editorial lead image, four calm supporting choices. */
.homeOffers{padding:38px 0 44px;background:linear-gradient(180deg,#fcfaf6 0%,#f7f1e8 100%)}
.homeOffers .homeEditorialHead{padding-bottom:22px}
.homeOfferCard--featured{margin:0 calc(20px + var(--sar)) 16px calc(20px + var(--sal));border-radius:5px;box-shadow:0 16px 38px rgba(39,29,18,.13)}
.homeOfferCard--featured .homeOfferCard__media{aspect-ratio:16/10}
.homeOfferCard--featured .homeOfferCard__shade{background:linear-gradient(180deg,rgba(15,11,8,.02) 34%,rgba(15,11,8,.18) 54%,rgba(15,11,8,.88) 100%)}
.homeOfferCard__badge{
  left:14px;top:14px;padding:7px 11px;border-radius:2px;
  background:rgba(18,13,9,.62);border-color:rgba(231,195,177,.55);color:#F1D6C7;
  letter-spacing:.18em;font-size:9px;
}
.homeOfferCard--featured .homeOfferCard__copy{left:18px;right:18px;bottom:18px}
.homeOfferCard--featured .homeOfferCard__copy b{font-size:30px;letter-spacing:-.02em}
.homeOfferCard--featured .homeOfferCard__copy em{
  display:block;margin-top:9px;font-style:normal;font-size:10px;line-height:1.35;
  letter-spacing:.13em;text-transform:uppercase;color:#EAC9B8;
}
.homeOfferGrid{gap:12px;padding-bottom:3px}
.homeOfferCard--small{border-radius:4px;box-shadow:0 10px 24px rgba(42,31,18,.09)}
.homeOfferCard--small .homeOfferCard__media{aspect-ratio:4/5}
.homeOfferCard--small .homeOfferCard__copy{left:13px;right:13px;bottom:13px}
.homeOfferCard--small .homeOfferCard__copy b{font-size:17px}
.homeOfferCard--small .homeOfferCard__copy .stars{font-size:8.5px}

/* VIP services — same materials, same rose gold, edge-to-edge service language. */

/* Flight card must truly bleed to the viewport edges despite flyBand padding. */

/* Premium secondary navigation — edge-to-edge cards, but not form buttons. */

/* Closing invitation — the page ends with the service, not with navigation. */

/* Guest navigation: only the current destination receives the filled icon. */
.tabbar:not(.tabbar--staff){
  padding:8px calc(5px + var(--sar)) calc(8px + var(--sab)) calc(5px + var(--sal));
  background:rgba(252,250,246,.97);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  border-top:1px solid rgba(187,134,111,.18);box-shadow:0 -5px 20px rgba(37,28,18,.05);
}
.tabbar:not(.tabbar--staff) .tab{min-height:48px;gap:5px;padding:0 1px;color:#6b5b49}
.tabbar:not(.tabbar--staff) .tab__ic{width:38px;height:30px;border-radius:10px}
.tabbar:not(.tabbar--staff) .tab svg{width:21px;height:21px;stroke-width:1.65}
.tabbar:not(.tabbar--staff) .tab>span:last-of-type{font-size:10.5px;line-height:1.2;letter-spacing:0;color:inherit;overflow-wrap:anywhere}
.tabbar:not(.tabbar--staff) .tab.is-on{color:#2a2119}
.tabbar:not(.tabbar--staff) .tab.is-on .tab__ic{background:#2a2119;color:#fffdf9}
.tabbar:not(.tabbar--staff) .tab.is-on>span:last-of-type{font-weight:650}
.tabbar:not(.tabbar--staff) .tab:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px;border-radius:8px}

/* Reveal feels expensive only when it is restrained. */
.reveal{transition-duration:.62s}.homeOfferCard.reveal{transform:translate3d(0,10px,0)}.homeOfferCard.reveal.is-in{transform:none}

@media (hover:hover){
  .homeOfferCard:hover .homeOfferCard__media>img{transform:scale(1.025)}
}
@media (prefers-reduced-motion:reduce){
  .pHero__img{animation:none;transition-duration:.35s}.homeOfferCard.reveal{transform:none}
}

/* ========================================================================== 
   HERO MOTION STABLE · r9
   Visible but restrained Ken Burns movement. Animation begins only when a
   slide becomes active, so the full motion is visible during its 8.8 s hold.
   The outgoing slide is frozen at its current frame during the crossfade.
   ========================================================================== */
.pHero__img{
  animation:none !important;
  transform:scale(1.015) translate3d(0,0,0);
  transform-origin:50% 50%;
  will-change:opacity,transform;
}
.pHero__img.is-active,
.pHero__img.is-prev{
  animation-duration:9.6s !important;
  animation-timing-function:cubic-bezier(.22,.61,.36,1) !important;
  animation-fill-mode:both !important;
  animation-iteration-count:1 !important;
}
.pHero__img:nth-child(1).is-active,
.pHero__img:nth-child(1).is-prev{animation-name:heroMotionR9A !important}
.pHero__img:nth-child(2).is-active,
.pHero__img:nth-child(2).is-prev{animation-name:heroMotionR9B !important}
.pHero__img:nth-child(3).is-active,
.pHero__img:nth-child(3).is-prev{animation-name:heroMotionR9C !important}
.pHero__img.is-active{animation-play-state:running !important}
.pHero__img.is-prev{animation-play-state:paused !important}
@keyframes heroMotionR9A{
  from{transform:scale(1.015) translate3d(-.25%, .10%,0)}
  to{transform:scale(1.065) translate3d(.55%,-.32%,0)}
}
@keyframes heroMotionR9B{
  from{transform:scale(1.018) translate3d(.38%,-.12%,0)}
  to{transform:scale(1.062) translate3d(-.48%,.28%,0)}
}
@keyframes heroMotionR9C{
  from{transform:scale(1.016) translate3d(-.18%,-.18%,0)}
  to{transform:scale(1.068) translate3d(.38%,.24%,0)}
}
@media (prefers-reduced-motion:reduce){
  .pHero__img,.pHero__img.is-active,.pHero__img.is-prev{
    animation:none !important;
    transform:scale(1.02) !important;
  }
}

/* ========================================================================== 
   LIVING IMAGE MOTION · r9
   Quiet Ken-Burns movement for editorial stills. Only cards currently near the
   viewport receive .is-alive, so off-screen images do not keep the compositor
   busy on iOS. Transform-only animation keeps layout and paint untouched.
   ========================================================================== */
.travelWorld img,.homeOfferCard__media>img{
  transform-origin:50% 50%;
  backface-visibility:hidden;
}.travelWorld.is-alive img,.homeOfferCard.is-alive .homeOfferCard__media>img{
  will-change:transform;
  animation:livingImageA 14.5s cubic-bezier(.22,.61,.36,1) infinite alternate both;
}.travelWorld:nth-child(3n+2).is-alive img,.homeOfferCard:nth-child(3n+2).is-alive .homeOfferCard__media>img{
  animation-name:livingImageB;
  animation-duration:15.8s;
}.travelWorld:nth-child(3n).is-alive img,.homeOfferCard:nth-child(3n).is-alive .homeOfferCard__media>img{
  animation-name:livingImageC;
  animation-duration:16.6s;
}

@keyframes livingImageA{
  from{transform:scale(1.018) translate3d(-.35%, .16%, 0)}
  to{transform:scale(1.074) translate3d(.72%, -.38%, 0)}
}
@keyframes livingImageB{
  from{transform:scale(1.022) translate3d(.42%, -.18%, 0)}
  to{transform:scale(1.071) translate3d(-.68%, .34%, 0)}
}
@keyframes livingImageC{
  from{transform:scale(1.020) translate3d(-.18%, -.24%, 0)}
  to{transform:scale(1.068) translate3d(.34%, .58%, 0)}
}

/* Hero gets one extra step of movement compared with r8: still elegant, but
   visible immediately on a phone rather than only after staring at the frame. */
@keyframes heroMotionR9A{
  from{transform:scale(1.018) translate3d(-.38%, .14%,0)}
  to{transform:scale(1.086) translate3d(.88%,-.48%,0)}
}
@keyframes heroMotionR9B{
  from{transform:scale(1.020) translate3d(.52%,-.16%,0)}
  to{transform:scale(1.082) translate3d(-.82%,.42%,0)}
}
@keyframes heroMotionR9C{
  from{transform:scale(1.019) translate3d(-.28%,-.22%,0)}
  to{transform:scale(1.088) translate3d(.66%,.38%,0)}
}

@media (prefers-reduced-motion:reduce){.travelWorld.is-alive img,.homeOfferCard.is-alive .homeOfferCard__media>img{
    animation:none !important;
    transform:scale(1.02) !important;
    will-change:auto;
  }
}

/* CUSTOMER HOMEPAGE RESTRUCTURE · r12 · 2026-08-18 */

/* The four main areas, directly under the hero.

   Everything else on this page is a photograph asking to be looked at, and a
   fifth row of pictures here would have been read as a fifth offer rather
   than as the way in. So this block is typographic and beige: it is the one
   place that answers "what is actually here" instead of selling something,
   and the quiet ground is what lets it say so.

   Beige is --ground-3, the warm sand already in the palette; the gold is
   --gold-ink rather than the decorative gold, because on this ground the
   bright one measures 1.8:1 and cannot carry a label. */
/* The page closes on the contact details.

   Dark, and the last full-bleed band: the tile above it sits on ivory with
   ivory below it, so the two dark blocks do not touch. The gold hairline along
   the top is the same rule that separates every chapter on this page.

   Two states for a contact, not one. Something with a url is a link; something
   without one is text, and an icon without a url is dimmed rather than dead —
   a circle that responds to a tap by doing nothing reads as broken, a dimmed
   one reads as not yet there. Filling in CONTACT in app.js turns the second
   state into the first with no change here. */
/* The closing page, and it should read as one: full height, edge to edge,
   with nothing of the page above carried into it.

   Three things were breaking it, all measured rather than guessed. The
   section above ended in 36px of ivory. This element carried a gold
   hairline on top -- the break, drawn. And .pageBottom after it is 88px
   of nothing, so the ivory of #app showed between the dark and the tab
   bar. It was also only 509px tall in an 844px window.

   Now it stands 100svh -- the small viewport unit, so a phone that hides
   its address bar on scroll does not leave a gap at the bottom -- with
   the tab bar's height added to the padding so the dark runs behind it
   and the legal line still clears it. The block centres in that height
   and the legal line sits at the foot of it. */
.siteFooter{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;
  min-height:100vh;min-height:100svh;
  /* The app bar is sticky at 64px plus the notch and content scrolls beneath
     it, so a full-height page has to start below it or its own logo goes
     under the bar. The tab bar at the foot is cleared the same way. */
  padding:calc(110px + var(--sat)) calc(22px + var(--sar)) calc(30px + var(--nav-h)) calc(22px + var(--sal));
  background:linear-gradient(180deg,#1A140E 0%,#110C08 100%);
  color:#F2EDE4;
}
/* the 88px spacer exists to clear the fixed tab bar; the footer's own
   padding does that now, and leaving it would put ivory back under the
   dark */
.siteFooter + .pageBottom{display:none}
/* The logo is centred over the block it heads. */
.siteFooter__brand{display:flex;align-items:center;justify-content:center}
/* The heading takes the key the app already carries in all five languages
   rather than a sixth translation of the same word; the caps are the
   stylesheet's, so İLETİŞİM keeps its dotted I. */
/* CONTACT moved below the rule and now introduces the three rows directly,
   so it is sized as their label rather than as the block's heading: 10px
   against the 9px dt beside it, close enough to belong to them and just
   clear enough to lead. The old 22px top margin belonged above the rule. */
/* Everything on one centre line. The three contact rows are centred as a
   block rather than each on its own, so the icons form a column and the values
   start together -- centring each row on its own text would leave the icons
   staggered down the page. width:max-content with auto margins does that: the
   list is only as wide as its longest row and that box is what centres. */
.siteFooter__head{margin:0 0 18px;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;line-height:1.1;color:#F2EDE4}
/* fades out to both sides now that it sits under a centred block */
.siteFooter__rule{height:1px;margin:22px auto 20px;width:min(100%,320px);background:linear-gradient(90deg,transparent,rgba(224,187,168,.34),transparent)}
.siteFooter__rows{margin:0 auto;padding:0;list-style:none;display:grid;gap:14px;width:max-content;max-width:100%;text-align:left}
.siteFooter__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
.siteFooter__row svg{width:17px;height:17px;color:#C8A392}
.siteFooter__row a,.siteFooter__row span:not(.srOnly){font-size:13.5px;line-height:1.35;color:#F2EDE4;overflow-wrap:anywhere}
.siteFooter__row a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid rgba(224,187,168,.38)}
.siteFooter__social{display:flex;justify-content:center;gap:14px;margin-top:26px}
.siteFooter__ic{width:58px;height:58px;flex:0 0 auto;display:grid;place-items:center;border:1px solid rgba(224,187,168,.32);border-radius:50%;color:#E0BBA8;text-decoration:none;transition:border-color .25s var(--ease),color .25s var(--ease)}
.siteFooter__ic svg{width:25px;height:25px}
a.siteFooter__ic:active{border-color:rgba(224,187,168,.72);color:#F1D3C3}
/* All three read as one set. Instagram and Facebook have no account yet, so
   they stay spans rather than links — but a placeholder that is half-erased
   looks like a fault, not a placeholder, so they carry the same gold as the
   mail icon and simply do not travel anywhere. */
span.siteFooter__ic{cursor:default}
/* The address is a placeholder like the numbers above it, so it is text and
   not a map link — a pin dropped on a street that is not the office is a
   wrong answer delivered confidently. */
.siteFooter__addr{margin-top:0}
.siteFooter__addrLabel{display:block;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C8A392}
.siteFooter__addr address{margin:9px auto 0;max-width:26ch;font-style:normal;font-size:13.5px;line-height:1.5;color:#F2EDE4}
.siteFooter__legal{margin:26px 0 0;font-size:9.5px;line-height:1.65;letter-spacing:.07em;color:rgba(242,237,228,.40)}
@media(min-width:760px){
  .siteFooter{padding-left:calc(40px + var(--sal));padding-right:calc(40px + var(--sar))}
  .siteFooter>*{max-width:980px;margin-left:auto;margin-right:auto}
}

/* Read by a screen reader, never seen. clip-path rather than display:none,
   which would take it out of the accessibility tree along with everything
   else. */
.srOnly{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.homeGateway{position:relative;padding:18px calc(20px + var(--sar)) 0 calc(20px + var(--sal));background:#fbfaf7;scroll-margin-top:64px}
.homeGateway__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.homeGatewayTile{
  position:relative;display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;
  border:1px solid rgba(131,87,70,.16);border-radius:10px;
  background:#fffdf9;box-shadow:0 3px 12px rgba(74,50,34,.05);
  color:var(--txt);text-align:left;transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.homeGatewayTile:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(74,50,34,.10)}
.homeGatewayTile:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.homeGatewayTile__media{display:block;aspect-ratio:1.65;overflow:hidden;background:#e9e0d0}
.homeGatewayTile__media img{display:block;width:100%;height:100%;object-fit:cover}
.homeGatewayTile__copy{display:flex;flex:1;flex-direction:column;padding:12px 12px 14px}
.homeGatewayTile__copy b{display:block;min-height:2.4em;font-family:var(--display);font-size:17px;line-height:1.2;font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.homeGatewayTile__copy i{display:block;margin-top:6px;padding-right:15px;font-style:normal;font-size:12px;line-height:1.4;letter-spacing:0;text-transform:none;color:#6b5b49}
.homeGatewayTile__go{position:absolute;right:10px;bottom:15px;display:flex;color:var(--gold-ink)}
.homeGatewayTile__go svg{width:15px;height:15px}
@media(max-width:350px){
  .homeGateway{padding-left:calc(16px + var(--sal));padding-right:calc(16px + var(--sar))}
  .homeGateway__grid{gap:10px}
  .homeGatewayTile__copy{padding:10px 10px 12px}
  .homeGatewayTile__copy b{font-size:16px}
}
.homePromos{position:relative;padding:24px 0 32px;background:linear-gradient(180deg,#fbfaf7 0%,#f6f0e7 100%)}
.homePromos .homeEditorialHead{padding-top:0;padding-bottom:14px}
.homePromos .homeEditorialHead--row{display:block}
.homePromos .homeEditorialHead h2{max-width:22ch;font-size:26px;line-height:1.12;text-wrap:balance}
.homePromos .homeEditorialHead__sub{max-width:34ch;font-size:14px;line-height:1.5;color:#6b5b49}
.homePromos .homeTextLink{display:inline-flex;align-items:center;gap:5px;min-height:44px;margin-top:3px;padding:8px 0;font-size:13px;letter-spacing:0;text-transform:none}
.homePromos .homeTextLink svg{width:16px;height:16px}
.homePromos::before{display:none}

/* The bar under a rail: the plainest statement that something scrolls
   sideways and there is more of it than fits. The thumb is as wide a share of
   the track as the visible cards are of the whole row, so its width is the
   answer to "how much am I seeing" and its position the answer to "where am
   I" — both without a number and without a word in five languages.

   It is drawn and it tracks a hand even under prefers-reduced-motion, because
   it is information rather than decoration; only the drift stops there.

   Snapping goes off while a rail drifts: proximity snapping and a continuous
   programmatic scroll pull against each other, and the moment a finger lands
   the class comes off and the browser snaps again. */
.railBar{height:2px;margin:16px calc(20px + var(--sar)) 0 calc(20px + var(--sal));border-radius:2px;background:rgba(131,87,70,.15);overflow:hidden}
.railBar i{display:block;height:100%;width:32%;border-radius:2px;background:#B67860;transition:width .2s var(--ease)}
.travelWorlds--customer .railBar,.homeVipServices .railBar{background:rgba(231,195,177,.16)}
.travelWorlds--customer .railBar i,.homeVipServices .railBar i{background:#E0BBA8}
.homePromos__rail.is-drifting,.travelWorlds__rail.is-drifting,.homeVipServices__rail.is-drifting{scroll-snap-type:none}

.homePromos__rail{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:0 calc(20px + var(--sar)) 5px calc(20px + var(--sal))}
.homePromos__rail::-webkit-scrollbar{display:none}
.homePromoCard{position:relative;flex:0 0 min(79vw,322px);aspect-ratio:4/5;border:0;border-radius:5px;overflow:hidden;padding:0;background:#17110c;text-align:left;scroll-snap-align:start;box-shadow:0 14px 34px rgba(36,27,18,.12)}
.homePromoCard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.homePromoCard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,7,.02) 28%,rgba(12,9,7,.14) 52%,rgba(12,9,7,.88) 100%)}
.homePromoCard__copy{position:absolute;left:18px;right:18px;bottom:17px;color:#fff}.homePromoCard__copy i,.homePromoCard__copy em{display:block;font-style:normal}
.homePromoCard__copy i{font-size:9px;font-weight:750;letter-spacing:.18em;color:#E8C5B3;text-transform:uppercase}.homePromoCard__copy b{display:block;margin-top:7px;font-family:var(--display);font-size:24px;line-height:1.06}
.homePromoCard__copy em{margin-top:8px;max-width:27ch;font-size:10px;line-height:1.45;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.76)}.homePromoCard__copy>span{position:absolute;right:0;bottom:0;color:#E8C5B3}.homePromoCard__copy>span svg{width:16px;height:16px}

.homeSuperDeal{position:relative;padding:10px 0 48px;background:linear-gradient(180deg,#f8f3ea 0%,#f3ecdf 100%)}
.homeSuperDeal::before,.homeBestHotels::before,.homePromos::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(187,134,111,.24),transparent)}
.homeSuperDeal .homeEditorialHead{padding:0 calc(20px + var(--sar)) 18px calc(20px + var(--sal))}
.homeSuperDealCard{position:relative;display:flex;align-items:flex-end;width:100%;min-height:360px;border:0;border-radius:0;overflow:hidden;background:#18110c;text-align:left;box-shadow:0 24px 55px rgba(34,23,12,.12)}
.homeSuperDealCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.homeSuperDealCard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,15,10,.08) 0%,rgba(22,15,10,.24) 28%,rgba(22,15,10,.74) 100%)}
.homeSuperDealCard__copy{position:relative;width:100%;padding:28px 20px;display:flex;flex-direction:column;gap:9px;color:#fff;z-index:1;overflow-wrap:anywhere}
/* the top offer of each area below the package (app.js topOffers): the travel ideas' cards in a grid */
.homeTopOffers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px;padding:24px calc(20px + var(--sar)) 0 calc(20px + var(--sal))}
.homeTopOffers .homeTopOfferCard{width:100%;min-width:0;flex:none;aspect-ratio:4/5;cursor:pointer}
.homeSuperDeal__details{padding:20px calc(20px + var(--sar)) 0 calc(20px + var(--sal));margin:0;white-space:pre-line;overflow-wrap:anywhere}
.homeSuperDealCard__copy i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E8C5B3}
.homeSuperDealCard__copy b{font-family:var(--display);font-size:34px;line-height:1.02;font-weight:600;max-width:12ch}
.homeSuperDealCard__copy em{font-style:normal;font-size:13px;line-height:1.52;color:rgba(255,255,255,.78);max-width:30ch}
.homeSuperDealCard__copy span{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#E8C5B3}
.homeSuperDealCard__copy span svg{width:14px;height:14px}
.homeVipCallback{position:relative;padding:34px calc(22px + var(--sar)) 38px calc(22px + var(--sal));color:#fff;background:radial-gradient(circle at 82% 13%,rgba(224,187,168,.13),transparent 35%),linear-gradient(145deg,#18110c 0%,#0d0907 78%);border-top:1px solid rgba(224,187,168,.20);border-bottom:1px solid rgba(224,187,168,.20)}
.homeVipCallback__icon{width:54px;height:54px;border:1px solid rgba(224,187,168,.62);border-radius:50%;display:grid;place-items:center;color:#E7C3B1;margin-bottom:16px}.homeVipCallback__icon svg{width:24px;height:24px}
.homeVipCallback__head .eyebrow{color:#E7C3B1}.homeVipCallback__head h2{margin:6px 0 0;font-family:var(--display);font-size:30px;line-height:1.04}.homeVipCallback__head p{margin:11px 0 0;max-width:35ch;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.73)}
.homeVipCallback__form{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:24px}.homeVipCallback__form label span{display:block;margin-bottom:6px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#E8C5B3}
.homeVipCallback__form input{width:100%;min-height:47px;padding:0 13px;border:1px solid rgba(231,195,177,.26);border-radius:2px;background:rgba(255,255,255,.055);color:#fff;font:inherit;font-size:13px;outline:0}.homeVipCallback__form input:focus{border-color:rgba(231,195,177,.70);background:rgba(255,255,255,.075)}
.homeVipCallback__form button{grid-column:1/-1;min-height:48px;padding:0 15px;border:1px solid rgba(231,195,177,.60);border-radius:2px;display:flex;align-items:center;justify-content:space-between;background:#E0BBA8;color:#18110c;font-size:10.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}.homeVipCallback__form button svg{width:14px;height:14px}.homeVipCallback__form small{grid-column:1/-1;font-size:9.5px;line-height:1.45;color:rgba(255,255,255,.46)}.homeVipCallback,.travelWorlds--customer,.homeVipServices,.homeAviationFinal,.homeTransferRequest{margin-top:26px}
.homeBestHotels{margin-top:26px}
.homeSuperDeal{margin-top:24px}

.travelWorlds--customer{position:relative;padding-top:38px;padding-bottom:42px;color:#fff;background:linear-gradient(180deg,#120d09 0%,#0d0907 100%);border-bottom:1px solid rgba(224,187,168,.17)}.travelWorlds--customer .homeEditorialHead{padding-bottom:22px}.travelWorlds--customer .travelWorld{border-color:rgba(231,195,177,.14);box-shadow:0 16px 38px rgba(0,0,0,.18)}
.homeBestHotels{position:relative}

.homeVipServices{position:relative;padding:40px 0 44px;background:linear-gradient(180deg,#17100b 0%,#0c0907 100%);color:#fff;border-top:1px solid rgba(224,187,168,.18)}.homeVipServices .homeEditorialHead{padding-bottom:22px}
.homeVipServices__rail{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:0 calc(20px + var(--sar)) 5px calc(20px + var(--sal))}.homeVipServices__rail::-webkit-scrollbar{display:none}
/* Direct doors out of the dark chapter: the rail tells the story, these two
   rows open the rate cards behind it. Hairline in the section's rose so they
   read as part of it, not as ivory buttons that fell onto a dark ground. */
.homeVipServices__links{display:flex;flex-direction:column;gap:10px;padding:22px calc(20px + var(--sar)) 0 calc(20px + var(--sal))}
.homeVipServices__links button{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:2px;
  background:rgba(255,255,255,.05);border:1px solid rgba(231,195,177,.30);color:#fff;text-align:left;
  font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  transition:transform .18s var(--ease),background .25s var(--ease);
}
.homeVipServices__links button:active{transform:scale(.985);background:rgba(255,255,255,.09)}
.homeVipServices__links button svg:first-child{width:17px;height:17px;flex:0 0 auto;color:#E0BBA8}
.homeVipServices__links button span{flex:1 1 auto;min-width:0}
.homeVipServices__links button svg:last-child{width:13px;height:13px;flex:0 0 auto;color:rgba(255,255,255,.55)}
@media(min-width:760px){.homeVipServices__links{flex-direction:row}.homeVipServices__links button{flex:1 1 0}}
.vipServiceCard{position:relative;flex:0 0 min(80vw,326px);aspect-ratio:4/5;border:1px solid rgba(231,195,177,.14);border-radius:5px;overflow:hidden;padding:0;background:#120d09;text-align:left;scroll-snap-align:start;color:#fff}.vipServiceCard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vipServiceCard--featured{flex-basis:min(88vw,356px);aspect-ratio:4/5;border-color:rgba(231,195,177,.38);box-shadow:0 18px 42px rgba(0,0,0,.28)}
.vipServiceCard--featured .vipServiceCard__shade{background:linear-gradient(180deg,rgba(10,8,6,.04) 24%,rgba(10,8,6,.16) 44%,rgba(10,8,6,.90) 100%)}
.vipServiceCard--featured .vipServiceCard__copy b{font-size:31px}
.vipServiceCard--featured .vipServiceCard__copy p{font-size:12.5px;line-height:1.56;max-width:28ch}.vipServiceCard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.04) 30%,rgba(10,8,6,.17) 50%,rgba(10,8,6,.92) 100%)}
.vipServiceCard__copy{position:absolute;left:19px;right:19px;bottom:18px}.vipServiceCard__copy i,.vipServiceCard__copy em{display:flex;align-items:center;gap:5px;font-style:normal}.vipServiceCard__copy i{font-size:9px;letter-spacing:.19em;color:#E8C5B3}.vipServiceCard__copy b{display:block;margin-top:7px;font-family:var(--display);font-size:25px;line-height:1.06}.vipServiceCard__copy p{margin:8px 0 0;max-width:29ch;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.72)}.vipServiceCard__copy em{margin-top:11px;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E8C5B3}.vipServiceCard__copy em svg{width:13px;height:13px}

.homeTransferRequest{position:relative;min-height:330px;padding:36px calc(24px + var(--sar)) 38px calc(24px + var(--sal));overflow:hidden;color:#fff;background:linear-gradient(90deg,rgba(13,9,7,.96),rgba(13,9,7,.74)),url("../images/home-experiences/transfer.webp") center/cover no-repeat;border-top:1px solid rgba(231,195,177,.22);border-bottom:1px solid rgba(231,195,177,.22)}.homeTransferRequest__copy{position:absolute;left:24px;right:24px;bottom:32px}.homeTransferRequest__copy .eyebrow{color:#E8C5B3}.homeTransferRequest__copy h2{margin:7px 0 0;max-width:11ch;font-family:var(--display);font-size:34px;line-height:1.02}.homeTransferRequest__copy p{margin:11px 0 0;max-width:31ch;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}.homeTransferRequest__copy button{margin-top:18px;padding:0 0 8px;border:0;border-bottom:1px solid rgba(231,195,177,.72);background:none;color:#E8C5B3;display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:750;letter-spacing:.15em;text-transform:uppercase}.homeTransferRequest__copy button svg{width:14px;height:14px}
.homePromoCard>img,.vipServiceCard>img{transform-origin:50% 50%;backface-visibility:hidden}.homePromoCard.is-alive>img,.vipServiceCard.is-alive>img{will-change:transform;animation:livingImageA 14.5s cubic-bezier(.22,.61,.36,1) infinite alternate both}.homePromoCard:nth-child(3n+2).is-alive>img,.vipServiceCard:nth-child(3n+2).is-alive>img{animation-name:livingImageB;animation-duration:15.8s}.homePromoCard:nth-child(3n).is-alive>img,.vipServiceCard:nth-child(3n).is-alive>img{animation-name:livingImageC;animation-duration:16.6s}
@media(max-width:360px){.homeVipCallback__form{grid-template-columns:1fr}.homeVipCallback__form button,.homeVipCallback__form small{grid-column:1}.homeSuperDealCard{min-height:330px}.homeSuperDealCard__copy b{font-size:30px}}
@media(prefers-reduced-motion:reduce){.homePromoCard.is-alive>img,.vipServiceCard.is-alive>img{animation:none!important}}

/* CUSTOMER HOMEPAGE POLISH · r13 · 2026-08-18 */
/* More separation between the dark travel-world chapter and Best Hotels. */
.travelWorlds--customer{padding-bottom:72px}
.homeBestHotels{padding-top:62px;padding-bottom:24px}

/* ONLYONE CHOICE is deliberately taller than the supporting hotel cards. */
.homeOfferCard--featured .homeOfferCard__media{aspect-ratio:4/5}
.homeOfferCard--featured .homeOfferCard__copy{bottom:22px}
.homeOfferCard--featured .homeOfferCard__copy b{font-size:32px}


/* Two cards in this rail carry a video — VIP Welcome and the yacht. The
   rest stay stills, which is what keeps the rail affordable on mobile data. */
.vipServiceCard__video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:#120d09}
.vipServiceCard--video>img{z-index:0}
.vipServiceCard--video .vipServiceCard__shade{z-index:2}
.vipServiceCard--video .vipServiceCard__copy{z-index:3}

/* Transfer becomes a compact inline request instead of another intermediary click. */
.homeTransferRequest{min-height:610px;background:linear-gradient(90deg,rgba(13,9,7,.97),rgba(13,9,7,.73)),url("../images/home-experiences/transfer.webp") 58% center/cover no-repeat}
.homeTransferRequest__copy{bottom:30px}
.homeTransferRequest__copy h2{font-size:36px}
.homeTransferRequest__copy p{max-width:34ch}
.homeTransferQuick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;max-width:520px}
.homeTransferQuick label{display:block}
.homeTransferQuick label span{display:block;margin-bottom:6px;font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E8C5B3}
.homeTransferQuick input{width:100%;min-height:45px;padding:0 12px;border:1px solid rgba(231,195,177,.27);border-radius:2px;background:rgba(255,255,255,.065);color:#fff;font:inherit;font-size:12px;outline:none;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.homeTransferQuick input::placeholder{color:rgba(255,255,255,.43)}
.homeTransferQuick input:focus{border-color:rgba(231,195,177,.72);background:rgba(255,255,255,.09)}
.homeTransferQuick button{grid-column:1/-1;min-height:48px;margin-top:4px!important;padding:0 14px!important;border:1px solid rgba(231,195,177,.66)!important;border-radius:2px!important;background:#E0BBA8!important;color:#18110c!important;display:flex!important;align-items:center;justify-content:space-between;width:100%;font-size:10px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase}
.homeTransferQuick button svg{width:14px;height:14px}

/* VIP transfer hero with restored aircraft movement, animated clouds and visible slipstream. */
/* This band is sky now, not ivory. The one blue in the product — and it is
   allowed to be blue because it is a depicted thing rather than a surface: an
   aircraft over cream was an object on paper, over sky it is in flight. Every
   dark tone on top of it stays warm, so the rule that there is no blue-black
   anywhere still holds.
   The sun sits top-left, which is where LIGHT_DIR points in clouds.py, so the
   lit side of every sprite faces the glow instead of contradicting it. */
/* The bottom padding is what keeps the copy off the aircraft: the plane is
   absolutely positioned at bottom:10px, the copy is in normal flow at the
   top, so the section has to reserve the plane's own height beneath the
   text. It was three hand-set numbers -- 300px under 360, 250 over 760 and
   72 in between -- and that gap in the middle is every phone made in the
   last few years. Measured, the button crossed the nose by 56px at 390 and
   95px at 430, while 320 was almost clear.

   So it is derived instead of guessed. The plane is min(78vw,360px) wide
   and the render is 900x1111, so it is 1.2344 times that tall, which is
   min(96.3vw,444px); plus its own 10px offset and 20px of air. One rule
   now covers every width, and the wide layout gets the same formula
   against its own min(38vw,360px). */
.homeAviationFinal{position:relative;min-height:620px;padding:58px calc(22px + var(--sar)) calc(min(96.3vw,444px) + 30px) calc(22px + var(--sal));overflow:hidden;background:radial-gradient(circle at 16% 6%,rgba(255,252,238,.80),transparent 44%),linear-gradient(180deg,#B2D6EC 0%,#C6E1F1 42%,#DFEDF6 76%,#EFF6FA 100%);border-top:1px solid rgba(187,134,111,.18);color:#21180f}
/* The only form this section is ever rendered in, and so the rule that
   actually decides the space under the copy -- two classes beat the base
   rule, which is why setting it there changed nothing at 390 and 430. */
.homeAviationFinal--transferHero{padding-top:62px;padding-bottom:calc(min(96.3vw,444px) + 30px)}
.homeAviationFinal>.flySky--far{z-index:0;opacity:.64}
/* Unlike the original flight band, this section has no ticker to clear.
   Let the foreground clouds reach the bottom instead of clipping them mid-sky. */
.homeAviationFinal>.flySky--near{z-index:2;opacity:.88;bottom:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 14%,#000 26%);mask-image:linear-gradient(180deg,transparent 0,transparent 14%,#000 26%)}
.homeAviationFinal__copy{position:relative;z-index:3;max-width:370px}
/* Both measured against the darkest part of the sky, #B2D6EC, not against
   the pale bottom: 4.90:1 and 6.22:1. The gold that worked on ivory reached
   only 2.69:1 here. */
.homeAviationFinal__copy .eyebrow{color:#7C4736}
.homeAviationFinal__copy h2{margin:9px 0 0;max-width:10.5ch;font-family:var(--display);font-size:clamp(40px,11vw,56px);line-height:.97;letter-spacing:-.04em;font-weight:600}
.homeAviationFinal__copy p{margin:15px 0 0;max-width:31ch;font-size:14px;line-height:1.64;color:#4E4438}
.homeAviationFinal__copy button{margin-top:24px;min-height:48px;padding:0 15px;border:1px solid rgba(171,99,72,.55);border-radius:2px;background:rgba(255,255,255,.80);color:#9f5c44;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.homeAviationFinal__copy button svg{width:14px;height:14px}
.homeAviationFinal__plane{position:absolute;z-index:2;left:50%;bottom:10px;width:min(78vw,360px);transform:translateX(-50%);pointer-events:none}
.homeAviationFinal__plane::before{content:"";position:absolute;left:12%;right:12%;bottom:7%;height:19%;background:radial-gradient(ellipse,rgba(40,62,82,.18),transparent 70%);filter:blur(14px)}
.homeAviationFinal__plane img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 22px 18px rgba(34,56,76,.16));animation:flyDrift 8s ease-in-out infinite}
.homeAviationFinal__trail{inset:-6% 2% 8% 2%;opacity:.92}
.homeAviationFinal__trail i{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.52) 35%,rgba(255,255,255,.50) 65%,rgba(255,255,255,0) 100%)}

@media(max-width:360px){
  .homeTransferQuick{grid-template-columns:1fr}
  .homeTransferQuick button{grid-column:1}
  .homeTransferRequest{min-height:720px}
  .homeAviationFinal{min-height:650px}
}
@media(prefers-reduced-motion:reduce){
  .homeAviationFinal__plane img{animation:none}
  .homeAviationFinal__trail,.homeAviationFinal>.flySky{display:none}
}


@media (min-width:760px){
  .homeAviationFinal,.homeAviationFinal--transferHero{padding-bottom:calc(min(46.9vw,444px) + 30px)}
  .homeAviationFinal__plane{width:min(38vw,360px)}
  .homeSuperDealCard{min-height:420px;border-radius:0}
  .homeSuperDealCard__copy b{font-size:42px}
  .vipServiceCard--featured{flex-basis:min(42vw,420px)}
}

/* r24 · VIP arrival simplification */
.homeVipServices{padding-top:46px;padding-bottom:54px}
.homeVipServices__rail{gap:16px}
.vipServiceCard--featured{flex-basis:min(90vw,370px)}
.vipServiceCard--featured .vipServiceCard__copy b{font-size:33px}
@media(min-width:760px){.homeVipServices__rail{justify-content:center}.vipServiceCard{flex-basis:min(28vw,310px)}.vipServiceCard--featured{flex-basis:min(36vw,390px)}}

/* r25 · VIP Welcome rail restored + stronger flight atmosphere */
.homeVipServices__rail{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 calc(20px + var(--sar)) 8px calc(20px + var(--sal))}
.homeVipServices__rail::-webkit-scrollbar{display:none}
.homeVipServices__rail .vipServiceCard{flex:0 0 min(76vw,310px);scroll-snap-align:start}
.homeVipServices__rail .vipServiceCard--featured{flex-basis:min(88vw,370px);border-color:rgba(231,195,177,.44);box-shadow:0 20px 48px rgba(0,0,0,.32)}
.homeVipServices__rail .vipServiceCard--featured .vipServiceCard__copy b{font-size:34px}
.homeAviationFinal>.flySky--far{opacity:.82}
.homeAviationFinal>.flySky--near{opacity:1}
.homeAviationFinal__trail{opacity:1;filter:blur(.15px)}
/* A contrail is condensed water, so it is white — the beige it used to be was
   chosen to sit on ivory and turns muddy against sky. */
.homeAviationFinal__trail i{width:2px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 18%,rgba(255,255,255,.76) 46%,rgba(255,255,255,.66) 72%,rgba(255,255,255,0) 100%)}
.homeAviationFinal__plane img{animation:flyDriftR25 6.8s ease-in-out infinite}
/* This r25 rule is unconditional and comes after the reduced-motion stop
   further up, so without repeating the stop here the aircraft keeps drifting
   for readers who asked it not to. */
@media(prefers-reduced-motion:reduce){.homeAviationFinal__plane img{animation:none}}
@keyframes flyDriftR25{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-3px,-7px,0)}55%{transform:translate3d(2px,-2px,0)}78%{transform:translate3d(4px,4px,0)}}
@media(min-width:760px){.homeVipServices__rail{justify-content:flex-start}.homeVipServices__rail .vipServiceCard{flex-basis:min(27vw,310px)}.homeVipServices__rail .vipServiceCard--featured{flex-basis:min(34vw,390px)}}

/* r27 · compact transfer lead: only name + phone, original banner height preserved. */
.homeTransferRequest{min-height:610px}
.homeTransferQuick{align-items:end}
@media(max-width:360px){.homeTransferRequest{min-height:720px}}

/* CUSTOMER HOMEPAGE · r28 · 2026-08-18
   Transfer banner moved to a bright daytime Mediterranean scene.
   Height and the compact Name + Phone form stay unchanged. */
.homeTransferRequest{
  min-height:610px;
  background:
    linear-gradient(180deg,rgba(13,9,7,.02) 0%,rgba(13,9,7,.08) 35%,rgba(13,9,7,.58) 60%,rgba(13,9,7,.94) 100%),
    linear-gradient(90deg,rgba(13,9,7,.08),rgba(13,9,7,.02)),
    url("../images/r28/transfer-day-9x16.webp") center 22%/cover no-repeat;
}
@media(max-width:360px){
  .homeTransferRequest{min-height:720px;background-position:center 18%}
}


.vipLeadForm{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:18px}
.vipLeadForm label{display:block;text-align:left}
.vipLeadForm label span{display:block;margin:0 0 6px;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E8C5B3}
.vipLeadForm input{width:100%;min-width:0;min-height:48px;padding:0 13px;border:1px solid rgba(232,197,179,.34);border-radius:2px;background:rgba(15,12,10,.56);color:#fff;font:inherit;font-size:13px;outline:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vipLeadForm input::placeholder{color:rgba(255,255,255,.54)}
.vipLeadForm input:focus{border-color:rgba(232,197,179,.85);background:rgba(15,12,10,.68)}
.vipLeadForm button{grid-column:1/-1;width:100%;min-height:50px;margin-top:2px!important;padding:0 15px!important;border:1px solid rgba(232,197,179,.75)!important;border-radius:2px;display:flex;align-items:center;justify-content:space-between;background:#E0BBA8!important;color:#17110c!important;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.vipLeadForm button svg{width:14px;height:14px}
.homeVipCallback__form.vipLeadForm{margin-top:24px}
.homeVipCallback__form.vipLeadForm small{grid-column:1/-1}
.concQuickLead{margin-top:20px;padding:18px;border:1px solid rgba(217,173,153,.24);background:linear-gradient(145deg,rgba(35,25,17,.96),rgba(15,11,8,.98));color:#fff}
.concQuickLead h2{margin:0;font-family:var(--display);font-size:24px;line-height:1.05}
.concQuickLead p{margin:9px 0 0;color:rgba(255,255,255,.70);font-size:12.5px;line-height:1.55}
.vipLeadForm--concierge{margin-top:16px}
@media(max-width:360px){
  .vipLeadForm{grid-template-columns:1fr}
  .vipLeadForm button,.homeVipCallback__form.vipLeadForm small{grid-column:1}
}

/* CUSTOMER HOMEPAGE · r30 · 2026-08-18
   VIP transfer: black premium car + chauffeur, Turkish plate 07-OO-01. */
.homeTransferRequest{
  min-height:610px;
  background:
    linear-gradient(180deg,rgba(8,10,11,.00) 0%,rgba(8,10,11,.08) 34%,rgba(8,10,11,.54) 56%,rgba(7,8,8,.97) 100%),
    url("../images/r30/transfer-vip-07oo01-9x16.webp") center 19%/cover no-repeat;
}
@media(max-width:360px){
  .homeTransferRequest{min-height:720px;background-position:center 17%}
}

/* CUSTOMER HOMEPAGE · r32 · 2026-08-18 */

.homeTransferRequest .vipLeadForm input,
.homeTransferRequest .vipLeadForm button{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}


/* CUSTOMER HOMEPAGE · r34 · 2026-08-18
   Transfer redesigned as a pure premium UI tile: no photo, no black-glass blur. */


/* Transfer: solid premium tile, explicitly no image and no backdrop blur. */
.homeTransferRequest.homeTransferRequest--tile{
  position:relative!important;
  min-height:0!important;
  padding:48px calc(18px + var(--sar)) 54px calc(18px + var(--sal))!important;
  background:#f5f0e8!important;
  color:#fff;
  overflow:visible!important;
  border-top:1px solid rgba(165,103,80,.14);
  border-bottom:1px solid rgba(165,103,80,.16);
;padding-bottom:0}
.homeTransferTile{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto;
  /* The eyebrow used to sit under a dotted route line with a 24/7 mark, and
     that row's margin-bottom was what held the copy off the top edge. With the
     row gone the padding has to carry it, or the eyebrow ends up 13px inside
     the decorative inner border while the bottom keeps 20. */
  padding:30px 18px 20px;
  border:1px solid #3c3427;
  border-radius:14px;
  background:#0d0d0b;
  box-shadow:0 18px 48px rgba(43,31,16,.13);
  overflow:hidden;
}
.homeTransferTile::after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(229,193,174,.10);border-radius:9px;pointer-events:none
}
.homeTransferRequest--tile .homeTransferRequest__copy{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:2
}
.homeTransferRequest--tile .homeTransferRequest__copy .eyebrow{color:#e5c1ae;font-size:8.5px;letter-spacing:.17em}
.homeTransferRequest--tile .homeTransferRequest__copy h2{margin:10px 0 0;max-width:11ch;font-size:34px;line-height:1.01;color:#fff;text-shadow:none}
.homeTransferRequest--tile .homeTransferRequest__copy p{margin:12px 0 0;max-width:34ch;color:#bdb9b0;font-size:12.5px;line-height:1.5}
.homeTransferTile__perks{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.homeTransferTile__perks span{padding:7px 9px;border:1px solid #302b22;border-radius:999px;background:#151410;color:#d8d2c5;font-size:8.5px;letter-spacing:.04em;white-space:nowrap}
.homeTransferRequest--tile .homeTransferQuick{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none;margin-top:22px;align-items:end}
.homeTransferRequest--tile .homeTransferQuick label span{color:#e5c1ae}
.homeTransferRequest--tile .homeTransferQuick input{
  min-height:46px;border:1px solid #48402f!important;border-radius:2px;background:#151513!important;color:#fff!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
}
.homeTransferRequest--tile .homeTransferQuick input::placeholder{color:#74716b}
.homeTransferRequest--tile .homeTransferQuick input:focus{border-color:#dbb4a2!important;background:#181713!important}
.homeTransferRequest--tile .homeTransferQuick button{
  min-height:49px!important;margin-top:2px!important;border:1px solid #e5c1ae!important;background:#e5c1ae!important;color:#15110a!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
}
.homeTransferRequest--tile .homeTransferQuick button:active{transform:translateY(1px);background:#dab3a1!important}
/* The quiet way out of the tile: whoever wants to see the cars before asking
   finds the fleet page one line under the form. */
.homeTransferTile__fleet{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:0;border:0;background:none;
  color:#e5c1ae;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(229,193,174,.45);
}
.homeTransferTile__fleet svg{width:13px;height:13px}
.homeTransferTile__fleet:active{color:#f1d3c3}
@media(max-width:360px){
  .homeTransferRequest.homeTransferRequest--tile{padding-left:14px!important;padding-right:14px!important}
  .homeTransferTile{padding:20px 15px 18px;border-radius:12px}
  .homeTransferRequest--tile .homeTransferRequest__copy h2{font-size:31px}
  .homeTransferRequest--tile .homeTransferQuick{grid-template-columns:1fr}
  .homeTransferRequest--tile .homeTransferQuick button{grid-column:1}
}


/* CUSTOMER HOMEPAGE · r35 · 2026-08-18
   VIP Transfer tile is edge-to-edge on smartphones. */
@media(max-width:759px){
  .homeTransferRequest.homeTransferRequest--tile{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:30px 0 36px!important;
  }
  .homeTransferRequest--tile .homeTransferTile{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:24px calc(20px + var(--sar)) 22px calc(20px + var(--sal))!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .homeTransferRequest--tile .homeTransferTile::after{
    left:12px!important;
    right:12px!important;
    border-radius:8px!important;
  }
}
@media(min-width:760px){
  .homeTransferRequest.homeTransferRequest--tile{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .homeTransferRequest--tile .homeTransferTile{
    max-width:980px!important;
  }
}

/* CUSTOMER HOMEPAGE · r36 · 2026-08-18
   - New daytime villa + private-beach imagery is supplied through the existing asset paths. */


/* CUSTOMER HOMEPAGE · r40 · 2026-08-18
   Keep the VIP transfer tile truly edge-to-edge inside the app shell.
   This intentionally does not depend on the browser viewport width, because
   the mobile site is also previewed inside a narrow app frame on desktop. */
.homeTransferRequest.homeTransferRequest--tile{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
.homeTransferRequest.homeTransferRequest--tile > .homeTransferTile{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding-left:calc(20px + var(--sal))!important;
  padding-right:calc(20px + var(--sar))!important;
}
.homeTransferRequest.homeTransferRequest--tile > .homeTransferTile::after{
  left:12px!important;
  right:12px!important;
  border-radius:8px!important;
}


/* ========================================================================== 
   SCROLL MOTION · r42 · 2026-08-18
   Images gently zoom as they travel through the viewport. Section/card copy
   rises and sharpens as it enters. Everything is transform/opacity only for
   smooth iOS + Android scrolling.
   ========================================================================== */
.scrollZoomImg{
  --scroll-scale:1.02;
  --scroll-y:0%;
  animation:none!important;
  transform:translate3d(0,var(--scroll-y),0) scale(var(--scroll-scale))!important;
  transform-origin:50% 50%!important;
  backface-visibility:hidden;
  will-change:transform;
}
.scrollTextFx{
  --scroll-text-y:18px;
  --scroll-text-opacity:.55;
  --scroll-text-scale:.985;
  opacity:var(--scroll-text-opacity)!important;
  transform:translate3d(0,var(--scroll-text-y),0) scale(var(--scroll-text-scale))!important;
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
/* Do not let the one-time reveal transition fight the continuous scroll effect. */
.scrollTextFx.reveal,
.scrollTextFx.reveal.is-in{
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  .scrollZoomImg{
    animation:none!important;
    transform:none!important;
    will-change:auto!important;
  }
  .scrollTextFx,
  .scrollTextFx.reveal,
  .scrollTextFx.reveal.is-in{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    will-change:auto!important;
  }
}

/* The last thing above the closing page ended in 54px of ivory, which read as
   a seam between two dark blocks. The tile inside keeps its own bottom
   padding, so the card does not touch the footer -- only the light band
   between them goes. !important because the rule it overrides carries it. */
.homeTransferRequest.homeTransferRequest--tile{padding-bottom:0!important}


/* Shared mobile entry points for independent accommodation and experience requests. */
.serviceSearch{padding:18px calc(20px + var(--sar)) 0 calc(20px + var(--sal));background:var(--ground)}
.serviceSearch h2{font-size:20px;line-height:1.25;letter-spacing:-.02em;margin:0 0 12px}
.serviceSearch__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.serviceSearch__choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:70px;padding:10px 5px;border:1px solid var(--hair);border-radius:9px;background:#fffdf9;color:#6b5b49}
.serviceSearch__choice svg{width:22px;height:22px;flex:none}
.serviceSearch__choice span{font-size:12px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.serviceSearch__choice.is-on{background:#2a2119;border-color:#2a2119;color:#fffdf9}
.serviceSearch__choice:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.serviceSearch + .bandHero{margin-top:18px}
.excCard__action{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;color:var(--gold-ink);font-size:14px;font-weight:600;line-height:1.4}
.excCard__action svg{width:18px;height:18px;flex:none}
.excursionActions{display:grid;gap:8px}

/* Landscape service media retains its subject instead of magnifying a portrait crop. */
.blockHero:not(.blockHero--plane):not(.blockHero--word){
  aspect-ratio:16/10;min-height:300px;max-height:min(72svh,800px);
}
@media (max-width:699px){
  .storyHero{height:56svh;min-height:340px;max-height:460px}
}

/* Own pages from the editor (vPage): heading or picture, then blocks. */
.pageHead{padding-top:28px;padding-bottom:6px}
.pageHead p{font-family:var(--display);font-size:19px;line-height:1.45;color:var(--txt-2);margin:14px 0 0;max-width:46rem}
.pageBlocks{padding-top:12px;padding-bottom:36px;max-width:860px}
.pageBlock{margin:26px 0 0}
.pageBlock--text h2{margin-bottom:10px}
.pageBlock--text p{font-size:15.5px;line-height:1.7;color:var(--txt);margin:0 0 12px}
.pageBlock--image{margin-left:0;margin-right:0}
.pageBlock--image img{display:block;width:100%;height:auto;border-radius:18px;background:var(--ground-3)}
.pageBlock--image figcaption{font-size:12.5px;color:var(--txt-3);margin-top:8px}
.pageBlock--quote{margin-left:0;margin-right:0;padding:4px 0 4px 18px;border-left:2px solid var(--gold)}
.pageBlock--quote p{font-family:var(--display);font-size:21px;line-height:1.4;margin:0 0 8px;color:var(--txt)}
.pageBlock--quote cite{font-style:normal;font-size:12.5px;letter-spacing:.08em;color:var(--txt-3)}
.pageBlock--button .btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
/* An optional list price (js/pricing.js) on a card, a room or a sheet: a quiet from-price, never a button. */
.priceTag{margin-top:8px;font-size:13px;line-height:1.35;font-weight:650;letter-spacing:.01em;color:var(--gold-ink,#8a5a3c)}
.card__body .priceTag+.excCard__action{margin-top:8px}
/* The seasons of a room (js/pricing.js): period, optional name, price per night; the other dates last. */
.seasonList{margin-top:10px;font-size:13px;line-height:1.35}
.seasonList__head{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.seasonList ul{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--hair-soft)}
.seasonList li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair-soft)}
.seasonList li span{min-width:0;overflow-wrap:anywhere}
.seasonList li small{display:block;margin-top:2px;font-size:12px;color:var(--txt-3)}
.seasonList li b{flex:none;font-weight:650;color:var(--gold-ink,#8a5a3c);white-space:nowrap}
.tourFacts .childPrice b{font-weight:650}
/* The positions of a staff offer inside the offer box. */
.priceBox .offerLines{margin:14px 0 6px}.priceBox .offerLines ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.priceBox .offerLines li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.14);font-size:13.5px}
.priceBox .offerLines li small{display:block;opacity:.72;font-size:11.5px;margin-top:2px}.priceBox .offerLines b{white-space:nowrap;font-weight:600}
/* The address reads like the rest of the footer (white, underlined like the contact rows), not as a blue browser link. */
.siteFooter__addr address a{color:#F2EDE4;text-decoration:none;padding-bottom:2px;border-bottom:1px solid rgba(224,187,168,.38)}
.siteFooter__addr address a:hover,.siteFooter__addr address a:focus-visible{color:#fff;border-bottom-color:rgba(224,187,168,.8)}
/* KVKK, privacy policy, cookie notice (and cookie settings when optional cookies exist). */
.siteFooter__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:24px auto 0;max-width:640px}
.siteFooter__links button{background:none;border:0;padding:6px 2px;min-height:36px;font:inherit;font-size:12px;letter-spacing:.03em;color:rgba(242,237,228,.78);text-decoration:underline;text-decoration-color:rgba(224,187,168,.45);text-underline-offset:4px;cursor:pointer}
.siteFooter__links button:hover,.siteFooter__links button:focus-visible{color:#fff}
/* Cookie consent (consent.js) — only shown when an optional service is registered. Reject is as easy as accept. */
.consentBox{position:fixed;z-index:9000;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 24px));background:#1f1914;color:#F2EDE4;border:1px solid rgba(224,187,168,.35);border-radius:16px;padding:18px 20px;box-shadow:0 18px 50px rgba(0,0,0,.35);font-size:14px;line-height:1.5}
.consentBox h2{margin:0 0 6px;font-family:var(--display);font-size:17px;font-weight:600}.consentBox p{margin:0 0 8px;color:rgba(242,237,228,.85)}
.consentBox ul{list-style:none;margin:0 0 12px;padding:0}.consentBox li label{display:flex;align-items:center;gap:8px;min-height:36px}
.consentBox__actions{display:flex;flex-wrap:wrap;gap:8px}.consentBox__actions button{flex:1 1 140px;min-height:44px;border-radius:10px;border:1px solid rgba(224,187,168,.55);background:transparent;color:#F2EDE4;font:inherit;font-weight:600;cursor:pointer}
.consentBox__actions [data-consent=accept],.consentBox__actions [data-consent=reject]{background:#F2EDE4;color:#1f1914;border-color:#F2EDE4}
.consentBox__more{margin-top:8px;background:none;border:0;padding:4px 0;color:rgba(242,237,228,.8);text-decoration:underline;font:inherit;font-size:12.5px;cursor:pointer}
/* Optional details of excursions and tours (programme, included), the tour's facts and from-price. */
.detailBlock{margin-top:14px}.detailBlock h4{margin:0 0 6px;font-family:var(--display);font-size:15px;font-weight:600}
.detailBlock p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink2,#4a3c31)}
.tourFacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:14px 0 4px;font-size:14px}
.storyIntro .detailBlock{max-width:680px;margin-left:auto;margin-right:auto;text-align:left}
.destinationIndex__price{display:block;margin-top:4px;font-style:normal;font-size:12px;letter-spacing:.04em;opacity:.92}

/* Availability ("Website-Angebote"): two months (one on a phone) of the days the staff keep for an offer.
   Each state has its own pattern besides its colour – solid green ring, dashed (on request), struck through
   (not available), filled dark (booked) – and the chosen days a rose-gold fill. */
.avCal{margin-top:16px;padding:14px;border:1px solid var(--hair);border-radius:2px;background:var(--ground-2)}
.avHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.avTitle{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.avNav{display:inline-flex;gap:6px}
.avStep{width:40px;height:40px;border:1px solid var(--hair);border-radius:50%;background:transparent;color:var(--txt);font-size:20px;line-height:1;cursor:pointer}
.avStep:disabled{opacity:.35;cursor:default}
.avHint{margin:6px 0 10px;font-size:12px;color:var(--txt-2)}
.avMonths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px 22px}
.avMonth__name{margin:0 0 6px;font-size:13px;font-weight:600;text-transform:capitalize;color:var(--txt)}
.avGrid{display:grid;gap:3px}.avRow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.avWd{font-size:10.5px;color:var(--txt-3);text-align:center;text-transform:capitalize}
.avDay{display:grid;place-items:center;height:38px;min-width:0;padding:0;border-radius:2px;font:500 13px/1 var(--sans,system-ui);font-variant-numeric:tabular-nums;cursor:pointer;
  border:1px dashed rgba(42,33,25,.32);background:transparent;color:var(--txt)}
.avDay--blank{border:0;cursor:default}
/* only a few rooms left that night: a small dot at the top (the label says how many) */
.avDay{position:relative}.avDay[data-left]::after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--gold-ink)}
.avDay[data-state=open],.avLegend [data-state=open]::before{border:2px solid #4c9a6f;background:rgba(95,199,154,.14)}
.avDay[data-state=closed],.avLegend [data-state=closed]::before{border:1px solid rgba(179,72,52,.45);background:rgba(224,136,120,.16);color:#8a3524;text-decoration:line-through}
.avDay[data-state=taken],.avLegend [data-state=taken]::before{border:1px solid var(--dark);background:var(--dark);color:#fff;text-decoration:line-through}
.avDay[aria-selected=true]{background:var(--gold);border-color:var(--gold-ink);color:var(--dark-2);text-decoration:none}
.avDay[aria-current=date]{box-shadow:inset 0 -3px 0 var(--gold-ink)}
.avDay:disabled{opacity:.35;cursor:default}
.avDay:focus-visible,.avStep:focus-visible{outline:3px solid var(--gold-ink);outline-offset:2px}
.avLegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;font-size:11.5px;color:var(--txt-2)}
.avLegend span{display:inline-flex;align-items:center;gap:6px}
.avLegend span::before{content:"";width:13px;height:13px;border-radius:2px;box-sizing:border-box;border:1px dashed rgba(42,33,25,.32)}
.avNote{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--txt-2)}
.avNote--bad{color:#8a3524;font-weight:600}.avNote--few{color:var(--gold-ink);font-weight:600}
.check:disabled{opacity:.6;cursor:not-allowed}
@media (max-width:620px){.avMonth+.avMonth{display:none}}
.homeCustom{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,64px);max-width:1440px;margin:40px auto;padding:24px clamp(18px,4vw,64px)}.homeCustom__image{display:block;width:100%;max-height:600px;aspect-ratio:4/3;object-fit:cover;border-radius:14px}.homeCustom__copy{min-width:0}.homeCustom h2{font-size:clamp(28px,3vw,48px);line-height:1.15;overflow-wrap:anywhere}.homeCustom p{font-size:18px;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere}.homeCustom__button{display:inline-block;padding:14px 24px;border:1px solid currentColor;border-radius:30px;color:inherit;text-decoration:none;max-width:100%;overflow-wrap:anywhere}.homeCustom--text{display:block;max-width:960px}.homeCustom--offer{padding:24px;background:#f3ece4;border-radius:18px}@media(max-width:700px){.homeCustom{grid-template-columns:1fr;margin:24px auto;padding:18px}.homeCustom__image{max-height:420px}}
.catalogSearch{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:18px 0}.catalogSearch label{display:grid;gap:6px;font-size:13px;max-width:100%}.catalogSearch__query{flex:1;min-width:min(100%,260px)}.catalogSearch input,.catalogSearch select{width:100%;min-height:44px;padding:11px 12px;border:1px solid var(--hair);border-radius:6px;background:var(--ground-2);color:var(--txt);font:inherit}.catalogSearch button{min-height:44px}.catalogSearch [hidden]{display:none}@media(max-width:500px){.catalogSearch__query{flex-basis:100%}.catalogSearch label:has(select){flex:1}.catalogSearch .btn{padding:10px 12px}}
.homePromoCard:disabled{opacity:.65;cursor:default}.homePromoCard__copy small{display:block;margin-top:8px;font-size:12px;line-height:1.4}
.catalogSearch .btn{width:auto;flex:0 0 auto}@media(max-width:500px){.catalogSearch .btn[type=button]{flex-basis:100%}}