/* ============================================================================
   WTT — main.css · v2 "boutique însorit"
   The entire front-end, one file. Bright, friendly, premium-but-approachable:
   rounded photography (V1), pill buttons and sunny accents (V2), Newsreader +
   Archivo kept from the 2027 system. Read docs/context/design-system.md.

   THE FEELING THIS SELLS: a small agency run by real people who pick holidays
   by hand and answer on WhatsApp. Warm, colorful, zero pressure. Premium comes
   from type and spacing; friendly comes from color and rounding — never from
   discount theatrics.

   RULES THAT SURVIVE EVERY REDESIGN:
   - No red. No strikethrough prices, no countdowns, no "ultimele locuri!".
   - Body text never below 17px on mobile.
   - Every photo gets the fixed ratio + soft grade so mixed sources read as one.
   - Everything works with JavaScript off; every animation collapses under
     prefers-reduced-motion.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS - */
:root{
  /* Canvas + ink (unchanged — warm, printed, premium) */
  --paper:   #ffffff;
  --paper-2: #faf6ef;   /* warm near-white section band */
  --ink-900: #1b160f;
  --ink-700: #3b352c;
  --ink-500: #6e6559;
  --ink-200: #e5ddd0;   /* hairlines only */

  /* The sunny primary: mandarin — energetic, appetising, reads "holiday" and
     "affordable-friendly" without ever reading "discount red". */
  --sun:      #ee7b1d;
  --sun-deep: #c2590a;  /* hover / text-on-light 4.5:1 */
  --sun-wash: #fdeeda;  /* soft tint for chips, day pills, highlights */

  /* Support tints — one per section, never more than one at a time. */
  --sky:      #e9f3f2;  /* calm teal-tinted section background */
  --sky-deep: #2f6b63;  /* accents on sky, AA on white */
  --leaf-wash:#eef4e4;  /* fresh, used sparingly (itinerary, ticks) */
  --leaf-deep:#4a6b1f;

  /* WhatsApp gets its own recognisable green — it converts better than an
     on-brand button precisely because everyone knows it. */
  --wa:      #1fa855;
  --wa-deep: #158043;

  --focus:  #c2590a;
  --img-bg: #f3ecdf;

  /* Type — unchanged families. Newsreader carries feeling, Archivo carries
     information. */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --t-display: clamp(2.50rem, 9.4vw, 6.20rem);
  --t-h1:      clamp(2.10rem, 6.60vw, 4.00rem);
  --t-h2:      clamp(1.60rem, 4.00vw, 2.60rem);
  --t-h3:      clamp(1.30rem, 2.20vw, 1.60rem);
  --t-lead:    clamp(1.25rem, 2.40vw, 1.55rem);
  --t-body:    clamp(1.0625rem, 1.15vw, 1.125rem); /* 17→18px hard floor */
  --t-label:   0.9375rem;
  --t-price:   clamp(1.90rem, 5.00vw, 2.80rem);

  --lh-display: .96;  --tr-display: -.03em;
  --lh-h1: 1.0;       --tr-h1: -.025em;
  --lh-h2: 1.06;      --tr-h2: -.02em;
  --lh-lead: 1.42;    --tr-lead: -.012em;
  --lh-body: 1.62;
  --tr-label: .12em;

  /* Space */
  --gutter: clamp(20px, 5.2vw, 64px);
  --band:   clamp(52px, 8vw, 108px);
  --max:    1312px;
  --measure: 36rem;

  /* Rounding — the friendliness dial. Committed values, not accidents:
     big media 24, cards 18, chips/inputs 12, buttons full pill. */
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --hair: 1px solid var(--ink-200);
  --e1: 0 1px 2px rgba(27,22,15,.05), 0 8px 24px rgba(27,22,15,.08);   /* cards, docked chrome */
  --e2: 0 24px 64px rgba(27,22,15,.24);                                /* overlays */

  /* Motion */
  --d-tap: 120ms; --d-ui: 240ms; --d-enter: 560ms; --d-slow: 800ms;
  --ease-out: cubic-bezier(.16,1,.30,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);

  /* Imagery: fixed ratios + one soft warm grade = mixed operator photos read
     as one collection. Plain gradient, no blend mode. */
  --ratio-card: 4/5;
  --grade: linear-gradient(180deg, rgba(238,123,29,.06), rgba(27,22,15,.10));
}

/* ------------------------------------------------------------ @FONT-FACE - */
/* Romanian spans two subsets: â î in latin, ă ș ț in latin-ext. BOTH blocks
   per family are required — see CLAUDE.md §5 before touching this. */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/newsreader-400-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+20AC,U+2039-203A,U+2190,U+2192,U+25BE,U+2605,U+2715;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/newsreader-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-017F,U+0218-021B;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/archivo-400-600-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+20AC,U+2039-203A,U+2190,U+2192,U+25BE,U+2605,U+2715;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/archivo-400-600-latinext.woff2') format('woff2');
  unicode-range:U+0100-017F,U+0218-021B;
}

/* ---------------------------------------------------------------- RESET  - */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink-700);
  font-family:var(--font-text); font-size:var(--t-body); font-weight:400;
  line-height:var(--lh-body);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,blockquote,figure{ margin:0; }
p,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; display:block; background:var(--img-bg); }
a{ color:var(--sun-deep); text-decoration-thickness:1px; text-underline-offset:.22em; }
a:hover{ color:var(--ink-900); }
input,select,button,textarea{ font:inherit; color:inherit; }
/* iOS zooms the page when a focused control is under 16px — every text
   control on this site is therefore at least 17px, everywhere, always. */
input,select,textarea{ font-size:17px; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
::selection{ background:var(--sun-wash); color:var(--ink-900); }
[hidden]{ display:none !important; }
summary{ cursor:pointer; }
summary::-webkit-details-marker{ display:none; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:400; background:var(--ink-900); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0; }
.skip-link:focus{ left:0; color:#fff; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ------------------------------------------------------------- PRIMITIVES */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

.t-display,.t-h1,.t-h2,.t-h3{ font-family:var(--font-display); font-weight:400; color:var(--ink-900); }
.t-display{ font-size:var(--t-display); line-height:var(--lh-display); letter-spacing:var(--tr-display); }
.t-h1{ font-size:var(--t-h1); line-height:var(--lh-h1); letter-spacing:var(--tr-h1); }
.t-h2{ font-size:var(--t-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); }
.t-h3{ font-size:var(--t-h3); line-height:1.2; letter-spacing:-.01em; }
.lede{ font-size:var(--t-lead); line-height:var(--lh-lead); letter-spacing:var(--tr-lead); color:var(--ink-900); }
.lbl,.eyebrow{
  font-size:var(--t-label); line-height:1.3; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--ink-500);
}
.eyebrow--sun{ color:var(--sun-deep); }
.muted{ color:var(--ink-500); }

.band{ background:var(--paper-2); padding-block:var(--band); }
.band--sky{ background:var(--sky); }
.band--tight{ padding-block:clamp(40px,6vw,80px); }

/* Hairline rows — quieter than cards, used for dense lists. */
.rows{ display:grid; gap:1px; background:var(--ink-200); border-top:var(--hair); border-bottom:var(--hair); }
.rows > *{ background:var(--paper); }
.band .rows > *{ background:var(--paper-2); }
.band--sky .rows > *{ background:var(--sky); }
.row-link{ text-decoration:none; color:var(--ink-900); transition:background var(--d-ui) var(--ease-out); }
.row-link:hover{ background:var(--sun-wash) !important; color:var(--ink-900); }

.numlist > li{ padding:14px 0; display:grid; grid-template-columns:auto 1fr; gap:16px; color:var(--ink-700); }
.numlist .num{ font-family:var(--font-display); color:var(--sun); min-width:1.6em; }

.sec-head{ display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; justify-content:space-between; }
.lbl-link{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }

/* --------------------------------------------------------------- BUTTONS - */
/* Pills. Primary = sunny; quiet = outlined; wa = WhatsApp green. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px; border-radius:999px;
  background:var(--sun); color:#fff; border:0; cursor:pointer;
  text-decoration:none; text-align:center; font-weight:500;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
  transition:background var(--d-ui) var(--ease-out), transform var(--d-tap) var(--ease-out);
}
.btn:hover{ background:var(--sun-deep); color:#fff; }
.btn:active{ transform:scale(.97); }
.btn--ink{ background:var(--ink-900); }
.btn--ink:hover{ background:var(--sun-deep); }
.btn--line{ background:var(--paper); color:var(--ink-900); border:1px solid var(--ink-900); }
.btn--line:hover{ background:var(--sun-wash); color:var(--ink-900); }
.btn--wa{ background:var(--wa); }
.btn--wa:hover{ background:var(--wa-deep); }
.btn--sm{ min-height:46px; padding:0 20px; }
.btn--block{ display:flex; width:100%; }
.btn--ghost-w{ background:rgba(255,255,255,.94); color:var(--ink-900); }
.btn--ghost-w:hover{ background:#fff; color:var(--ink-900); }

/* ---------------------------------------------------------------- HEADER - */
/* NON-sticky by request (Remus 2026-07-29): the header scrolls away with the
   page. Kept positioned so the dropdowns stack above the hero. */
.site-header{ position:relative; z-index:60; background:var(--paper); border-bottom:var(--hair); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; }
.brand{ text-decoration:none; color:var(--ink-900); display:block; padding:10px 0; }
.brand__name{ display:block; font-family:var(--font-display); font-size:22px; line-height:.92; letter-spacing:-.03em; }
.brand__from{ display:block; font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--sun-deep); }

.nav-desktop{ display:none; align-items:center; gap:26px; }
.nav-desktop > a{ color:var(--ink-700); text-decoration:none; }
.nav-desktop > a:hover{ color:var(--ink-900); }
.nav-desktop > a[aria-current="page"]{ color:var(--ink-900); border-bottom:2px solid var(--sun); padding-bottom:2px; }

.nav-drop{ position:relative; }
.nav-drop > button{ background:none; border:0; padding:8px 0; cursor:pointer; color:var(--ink-700); display:flex; align-items:center; gap:8px; }
.nav-drop > button:hover{ color:var(--ink-900); }
.nav-drop .caret{ font-size:12px; color:var(--sun); }
.nav-drop__menu{
  position:absolute; top:calc(100% + 8px); left:-16px; min-width:280px; z-index:70;
  background:var(--paper); box-shadow:var(--e2); padding:8px 0; border-radius:var(--r-sm);
  animation:sheetIn var(--d-ui) var(--ease-out) both;
}
.nav-drop__menu a{ display:flex; justify-content:space-between; gap:16px; padding:10px 18px; color:var(--ink-700); text-decoration:none; }
.nav-drop__menu a:hover{ background:var(--sun-wash); color:var(--ink-900); }
.nav-drop__menu .n{ color:var(--ink-500); }

/* The search trigger: an icon-ish pill, present on all sizes. */
.nav-search{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border-radius:999px; border:1px solid var(--ink-200); background:var(--paper);
  color:var(--ink-700); text-decoration:none; cursor:pointer; font-size:var(--t-label);
  letter-spacing:var(--tr-label); text-transform:uppercase;
}
.nav-search:hover{ border-color:var(--ink-900); color:var(--ink-900); }
.nav-search .ic{ font-size:17px; line-height:1; }

.nav-wa{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 18px;
  background:var(--wa); color:#fff !important; text-decoration:none; border-radius:999px;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; font-weight:500;
  transition:background var(--d-ui) var(--ease-out);
}
.nav-wa:hover{ background:var(--wa-deep); }
.nav-wa .ico-wa{ flex:none; }
/* Mobile header variant: icon only, round. */
.nav-wa--ico{ width:44px; padding:0; justify-content:center; }

.nav-mobile{ display:flex; align-items:center; gap:8px; }
.nav-mobile .menu-btn{
  min-height:44px; min-width:44px; padding:0 16px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; border-radius:999px;
  background:var(--ink-900); color:#fff; border:0;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
}

@media (min-width:1080px){
  .nav-desktop{ display:flex; }
  /* The WHOLE mobile cluster goes away — hiding only the menu button left a
     duplicate search + WhatsApp pair next to the desktop nav. */
  .nav-mobile{ display:none; }
}
/* V2 header: the search trigger is an icon circle. */
.nav-search{ min-width:44px; justify-content:center; padding:0 12px; }
.nav-search .txt{ display:none; }

/* Sheets (mobile menu / filters) — white, full-screen, :target fallback. */
.menu-sheet{ position:fixed; inset:0; z-index:200; background:var(--paper); overflow-y:auto; display:none; animation:sheetIn var(--d-ui) var(--ease-out) both; }
.menu-sheet:target,.menu-sheet.open{ display:block; }
.sheet-top{ display:flex; align-items:center; justify-content:space-between; padding:14px var(--gutter); border-bottom:var(--hair); }
.sheet-top .t{ font-family:var(--font-display); font-size:22px; letter-spacing:-.03em; color:var(--ink-900); }
.sheet-close{
  min-height:44px; background:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--sun-deep);
}
.menu-sheet__body{ padding:clamp(24px,6vw,48px) var(--gutter) 48px; }
.menu-big a{ display:block; padding:12px 0; text-decoration:none; color:var(--ink-900); font-family:var(--font-display); font-size:clamp(1.9rem,9vw,2.6rem); line-height:1.1; letter-spacing:-.025em; }
.menu-months-title{ margin:clamp(24px,5vw,40px) 0 12px; }
.menu-months a{ display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:8px 0; color:var(--ink-700); text-decoration:none; }
.menu-months a:hover{ color:var(--ink-900); }
.menu-months .n{ color:var(--ink-500); font-size:15px; }
.menu-cta{ display:grid; gap:10px; margin-top:clamp(24px,5vw,40px); }
.menu-hours{ margin-top:20px; color:var(--ink-500); }

/* ---------------------------------------------------------- SEARCH POPUP - */
.search-pop{
  position:fixed; inset:0; z-index:250; display:none; flex-direction:column;
  background:var(--paper); animation:sheetIn var(--d-ui) var(--ease-out) both;
}
.search-pop:target,.search-pop.open{ display:flex; }
.search-pop__body{ flex:1 1 auto; overflow-y:auto; padding:clamp(24px,5vw,56px) var(--gutter) 64px; max-width:880px; margin-inline:auto; width:100%; }
.search-pop__form{ display:flex; gap:10px; align-items:end; }
.search-pop__form label{ flex:1 1 auto; display:grid; gap:8px; }
.search-pop__form input{
  width:100%; min-height:60px; padding:0 0 10px;
  background:none; border:0; border-bottom:2px solid var(--ink-900); border-radius:0;
  font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.2rem); letter-spacing:-.02em; color:var(--ink-900);
  -webkit-appearance:none; appearance:none;
}
/* No focus box here: the popup opens WITH focus in this field, and the ring
   read as a stray orange frame. The 2px ink underline is the focus state. */
.search-pop__form input:focus-visible{ outline:none; }
.search-pop__hint{ margin-top:10px; }
.search-quick{ margin-top:clamp(28px,4vw,40px); }
.search-quick h3{ margin-bottom:12px; }
.search-live{ margin-top:clamp(24px,3vw,32px); display:grid; gap:8px; }
.search-live a{
  display:flex; gap:14px; align-items:center;
  padding:12px 16px 12px 12px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink-900);
  background:var(--paper-2);
}
.search-live a:hover{ background:var(--sun-wash); }
.search-live .sr-main{ flex:1 1 auto; min-width:0; }
.search-live .t{ font-family:var(--font-display); font-size:1.25rem; letter-spacing:-.015em; }
.search-live .p{ font-family:var(--font-display); white-space:nowrap; margin-left:auto; }
/* The offer's main photo, as a round thumb on the left of each result. */
.ph-round{ flex:none; width:52px; height:52px; border-radius:999px; object-fit:cover; display:block; background:var(--img-bg); }
.ph-round--empty{ background:var(--sun-wash); }

/* ---------------------------------------------------------------- PHOTOS - */
/* display:block is load-bearing: .ph is often a <span> inside an <a> or
   <button>, and aspect-ratio does NOTHING on an inline box — the frame
   collapses to zero height (bug found on the home feature card). */
.ph{ display:block; position:relative; overflow:hidden; background:var(--img-bg); aspect-ratio:var(--ratio-card); border-radius:var(--r-md); }
.ph__in{ display:block; }
.ph--sq{ aspect-ratio:1/1; }
.ph--wide{ aspect-ratio:3/2; }
.ph__in{ position:absolute; inset:0; transition:transform 700ms var(--ease-out); }
.ph__in img{ width:100%; height:100%; object-fit:cover; }
.ph::after{ content:""; position:absolute; inset:0; background:var(--grade); pointer-events:none; }

/* No-photo plate: friendly, zero requests. */
.plate{ display:block; position:relative; overflow:hidden; aspect-ratio:var(--ratio-card); border-radius:var(--r-md); background:var(--sun-wash); }
.plate > *{ display:block; }
.plate__country{ position:absolute; left:20px; top:20px; color:var(--sun-deep); }
.plate__big{ position:absolute; left:16px; right:16px; bottom:12px; font-family:var(--font-display); font-size:clamp(3rem,8vw,4rem); line-height:.88; letter-spacing:-.04em; color:#fff; }
.plate__line{ position:absolute; left:20px; bottom:calc(50% - 8px); max-width:16ch; font-family:var(--font-display); font-size:clamp(1.4rem,3vw,1.8rem); line-height:1.15; letter-spacing:-.02em; color:var(--ink-900); }

/* ------------------------------------------------------------------ CARD - */
/* V2 "explore" card, 1:1: a white rounded panel with the photo inset, price
   line first, then title, meta, and a full-width outlined "Vezi detalii"
   pill. The whole panel is one <a>; the button is presentational. */
.card{
  display:grid; gap:12px; align-content:start; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--ink-200); border-radius:var(--r-md);
  padding:12px; transition:transform var(--d-tap) var(--ease-out), box-shadow var(--d-ui) var(--ease-out);
}
a.card:hover{ color:inherit; box-shadow:var(--e1); }
a.card:active{ transform:scale(.985); }
a.card:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.card .ph,.card .plate{ border-radius:var(--r-sm); aspect-ratio:4/3; }
.card:hover .ph__in{ transform:scale(1.04); }
.card__body{ display:grid; gap:6px; padding:2px 6px 6px; }
.card__dest{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--sun-deep); }
.card__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.2; letter-spacing:-.01em; color:var(--ink-900); text-wrap:pretty; }
.card__facts{ color:var(--ink-500); font-size:15px; }
.card__price{ font-family:var(--font-display); font-size:clamp(1.5rem,3.4vw,1.8rem); line-height:1; letter-spacing:-.015em; color:var(--ink-900); }
.card__price .u{ font-family:var(--font-text); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); }
.card__price--ask{ font-size:clamp(1.3rem,2.8vw,1.5rem); line-height:1.1; }
.card__deps{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--sky-deep); }
.card__btn{
  margin-top:8px; display:flex; align-items:center; justify-content:center;
  min-height:46px; border-radius:999px; border:1px solid var(--ink-900);
  color:var(--ink-900); font-size:var(--t-label); letter-spacing:var(--tr-label);
  text-transform:uppercase; transition:all var(--d-ui) var(--ease-out);
}
.card:hover .card__btn{ background:var(--sun); border-color:var(--sun); color:#fff; }
/* Rail contexts keep the panel look but tighter. */
.rail--cards .card{ padding:10px; }

.grid-offers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:clamp(32px,4vw,52px) clamp(20px,2.6vw,32px); }

.skel{ display:grid; gap:14px; }
.skel__img{ aspect-ratio:var(--ratio-card); border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--paper-2) 20%,var(--img-bg) 40%,var(--paper-2) 60%);
  background-size:240% 100%; animation:shimmer 1.4s linear infinite; }
.skel__l{ height:15px; width:40%; background:var(--paper-2); border-radius:6px; }
.skel__t{ height:26px; width:88%; background:var(--paper-2); border-radius:6px; }
.skel__f{ height:17px; width:64%; background:var(--paper-2); border-radius:6px; }
.skel__p{ height:32px; width:34%; background:var(--paper-2); border-radius:6px; }

/* ----------------------------------------------------------------- RAILS - */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:clamp(12px,2vw,20px); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-inline:var(--gutter);
}
.rail::-webkit-scrollbar{ display:none; }
.rail > li{ flex:0 0 auto; scroll-snap-align:start; }
.rail > .rail-pad{ width:calc(var(--gutter) - 12px); flex:0 0 auto; }
.rail--hint{ animation:railHint 1.6s var(--ease-inout) .8s 1 both; }
.rail-fade{ position:absolute; top:0; right:0; bottom:0; width:56px; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--paper)); }
.band .rail-fade{ background:linear-gradient(90deg,rgba(250,246,239,0),var(--paper-2)); }
.band--sky .rail-fade{ background:linear-gradient(90deg,rgba(233,243,242,0),var(--sky)); }

/* Month cells — rounded, sunny when active. */
.mcell{
  display:grid; gap:8px; align-content:start; width:min(62vw,196px);
  padding:18px 20px 22px; text-decoration:none; color:var(--ink-900);
  background:var(--paper-2); border-radius:var(--r-md);
  transition:background var(--d-ui) var(--ease-out), transform var(--d-tap) var(--ease-out);
}
.mcell:hover{ background:var(--sun-wash); color:var(--ink-900); transform:translateY(-2px); }
.mcell .season{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-500); }
.mcell .name{ font-family:var(--font-display); font-size:clamp(1.7rem,4.4vw,2rem); line-height:1; letter-spacing:-.025em; }
.mcell .meta{ color:var(--ink-500); }
.mcell.is-on{ background:var(--sun-wash); box-shadow:inset 0 0 0 2px var(--sun); }
.mcell.is-on .season{ color:var(--sun-deep); }
.band .mcell{ background:var(--paper); }
.band .mcell.is-on{ background:var(--sun-wash); }

.rail--cards > li{ width:min(74vw,340px); }
/* A rail living INSIDE .wrap: aligns with the content column ("centered"),
   scrolls as a carousel only when it overflows. */
.rail--inwrap{ padding-inline:0; }
.rail--inwrap ~ .rail-fade{ display:none; }
/* Generic round carousel arrows (same look as the picks pair). */
.rail-arrows{ display:flex; gap:8px; }
.rail-arrows button{ width:48px; height:48px; border-radius:999px; border:1px solid var(--ink-200);
  background:var(--paper); cursor:pointer; font-size:18px; color:var(--ink-900);
  transition:all var(--d-ui) var(--ease-out); }
.rail-arrows button:hover{ background:var(--ink-900); color:#fff; border-color:var(--ink-900); }
.rail--photos > li{ width:min(78vw,420px); }
.rail--photos button{ display:block; width:100%; padding:0; border:0; cursor:pointer; background:none; }
/* B-style playful tilt on the photo preview rail. */
.rail--tilt > li:nth-child(odd) .ph{ transform:rotate(-1.6deg); }
.rail--tilt > li:nth-child(even) .ph{ transform:rotate(1.4deg); }
.rail--tilt{ padding-block:10px; }

/* ------------------------------------------------------------------ HOME - */
/* V1 hero: the banner takes the ENTIRE viewport width with a slim margin —
   it does not sit inside the content column. */
.hero-banner{ padding:clamp(10px,1.4vw,20px) 0 0; }
.hero-wide{ padding-inline:clamp(12px,1.6vw,24px); }
.hero-banner__box{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  min-height:min(150vw,640px); display:flex; align-items:flex-end;
  background:var(--img-bg);
}
@media (min-width:720px){ .hero-banner__box{ min-height:min(78vh,700px); } }
.hero-banner__box .bg{ position:absolute; inset:0; }
.hero-banner__box .bg img{ width:100%; height:100%; object-fit:cover; }
.hero-banner__box::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(27,22,15,0) 30%, rgba(27,22,15,.62) 100%);
}
/* The text column sits at ~40% of the banner width on desktop (Remus 2026-07-27). */
.hero-banner__in{ position:relative; z-index:2; padding:clamp(24px,5vw,64px) clamp(24px,6vw,88px); max-width:58rem; }
/* V1's little capsule above the headline: "Nou | alege-ți destinația →". */
.hero-chip{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(14px,2.5vw,22px);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(4px); border-radius:999px; padding:6px 14px 6px 6px;
  color:#fff; text-decoration:none; font-size:15px;
}
.hero-chip:hover{ background:rgba(255,255,255,.28); color:#fff; }
.hero-chip .tag{ background:#fff; color:var(--ink-900); border-radius:999px; padding:4px 12px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.hero-banner__in .eyebrow{ color:#fff; opacity:.92; }
.hero-banner__in h1{ color:#fff; margin:10px 0 12px; max-width:20ch; }
.hero-banner__in .sub{ color:#fff; opacity:.94; max-width:40rem; font-size:var(--t-lead); line-height:var(--lh-lead); }
.hero-banner__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px,3vw,28px); }
/* The chip IS the hero CTA now (Remus 2026-07-29) — a touch larger, no
   top-position margin. */
.hero-banner__cta .hero-chip{ margin-bottom:0; font-size:16px; padding:8px 18px 8px 8px; }

/* Trust minis under the hero, centred. Social proof without bragging. */
.trust-row{ display:flex; flex-wrap:wrap; justify-content:center; text-align:center;
  gap:10px 28px; padding:clamp(16px,2.5vw,22px) 0; color:var(--ink-500); }
.trust-row .dot{ color:var(--sun); }

/* Picks of the month — "Alegerile lunii": the tilted photo rail from the
   offer page ("Hotelul, în N fotografii"), promoted to the homepage. Cards
   are whole offers, chosen in VGS Settings → Homepage & imagini, with the
   details sitting ON the photo so the card stays a photo. */
.picks{ padding:clamp(48px,7vw,96px) 0 clamp(32px,5vw,56px); }
.picks__head{ margin-bottom:clamp(16px,2.5vw,24px); }
.picks__head .headline{
  font-family:var(--font-display); font-weight:400; color:var(--ink-900);
  font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.04; letter-spacing:-.02em;
  margin-top:10px;
}
.picks__head .muted{ margin-top:12px; max-width:36rem; }
.rail--picks > li{ width:min(78vw,420px); }
.pick-card{ display:block; text-decoration:none; color:inherit; }
.pick-card:hover .ph__in{ transform:scale(1.04); }
/* The caption lives INSIDE .ph so it tilts and zooms with the photo. */
.pick-card .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:grid; gap:5px; justify-items:start;
  padding:clamp(64px,10vw,104px) clamp(18px,3vw,26px) clamp(18px,3vw,26px);
  color:#fff;
  /* Deep, soft scrim: the caption must read on ANY photo. */
  background:linear-gradient(180deg, rgba(27,22,15,0) 0%, rgba(27,22,15,.38) 40%, rgba(27,22,15,.8) 100%);
}
.pick-card .cap .d{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; opacity:.92; }
.pick-card .cap .t{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,1.9rem); line-height:1.06; letter-spacing:-.015em; }
.pick-card .cap .p{ font-size:14px; opacity:.94; }
.pick-card__btn{
  margin-top:10px; display:inline-flex; align-items:center; min-height:40px; padding:0 20px;
  background:#fff; color:var(--ink-900); border-radius:999px; font-weight:500;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  transition:background var(--d-ui) var(--ease-out), color var(--d-ui) var(--ease-out);
}
.pick-card:hover .pick-card__btn{ background:var(--sun); color:#fff; }
/* 3 or fewer picks: centre the row. "safe" falls back to start-alignment the
   moment the rail overflows (mobile), so nothing gets clipped off-screen. */
.rail--few{ justify-content:safe center; }
.rail--few > .rail-pad{ display:none; }
.rail--few ~ .rail-fade{ display:none; }

/* Services — V2 "What Services We Provide", 1:1: centred heading, then a
   split — the stacked service items with an orange CTA on the left, and a
   photo with floating mini offer cards on the right. */
.services{ padding-block:var(--band); }
.services .svc-head{ text-align:center; margin-bottom:clamp(28px,4.5vw,48px); }
.services .svc-head .muted{ margin-top:10px; }
.svc-split{ display:grid; gap:clamp(28px,5vw,64px); align-items:center; }
@media (min-width:900px){ .svc-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.svc-list{ display:grid; gap:clamp(18px,3vw,28px); max-width:34rem; }
.svc{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.svc .num{ font-family:var(--font-display); font-size:1.5rem; color:var(--sun); line-height:1;
  width:44px; height:44px; border-radius:999px; background:var(--sun-wash);
  display:grid; place-items:center; }
.svc h3{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; letter-spacing:-.015em; color:var(--ink-900); margin-bottom:4px; }
.svc p{ color:var(--ink-700); }
.svc-cta{ margin-top:clamp(8px,1.5vw,12px); }
/* Right: the photo + floating chips. */
.svc-visual{ position:relative; max-width:520px; margin-inline:auto; width:100%; }
.svc-visual .ph{ aspect-ratio:4/5; border-radius:var(--r-lg); }
.svc-float{
  position:absolute; z-index:2; display:flex; gap:10px; align-items:center;
  background:var(--paper); border-radius:var(--r-sm); box-shadow:var(--e2);
  padding:8px 14px 8px 8px; text-decoration:none; color:var(--ink-900); max-width:75%;
}
.svc-float .thumb{ width:44px; height:44px; border-radius:10px; overflow:hidden; flex:0 0 auto; background:var(--img-bg); }
.svc-float .thumb img{ width:100%; height:100%; object-fit:cover; }
.svc-float .t{ font-size:16px; line-height:1.25; font-weight:500; padding:6px 4px; }
.svc-float .m{ display:block; font-size:13px; color:var(--sun-deep); font-weight:400; margin-top:2px; }
.svc-float:hover{ transform:translateY(-2px); transition:transform var(--d-tap) var(--ease-out); }
.svc-float--1{ top:9%; right:-4%; }
.svc-float--2{ bottom:12%; left:-4%; }
@media (max-width:899.98px){ .svc-float--1{ right:2%; } .svc-float--2{ left:2%; } }

/* Explore band — V2 explore best travel places: type chips + grid. */
.explore{ padding-block:var(--band); }
.explore .sec-head{ margin-bottom:clamp(16px,2.5vw,24px); }
.type-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3.5vw,36px); justify-content:center; }
.type-chips a,.type-chips .on{
  display:inline-flex; align-items:center; min-height:46px; padding:0 20px;
  border-radius:999px; text-decoration:none; font-size:var(--t-label);
  letter-spacing:var(--tr-label); text-transform:uppercase;
  background:var(--paper); color:var(--ink-700); border:1px solid var(--ink-200);
  transition:all var(--d-ui) var(--ease-out);
}
.type-chips a:hover{ border-color:var(--ink-900); color:var(--ink-900); }
.type-chips .on{ background:var(--ink-900); color:#fff; border-color:var(--ink-900); }

/* Testimonials — V1/V2 1:1: ONE big quote at a time, photo on one side,
   round arrows to page through. */
.quotes{ padding-block:var(--band); }
.quotes .sec-head{ margin-bottom:clamp(24px,3.5vw,40px); }
.quote-stage{ display:grid; gap:clamp(24px,4vw,48px); align-items:center; }
@media (min-width:900px){ .quote-stage{ grid-template-columns:minmax(0,420px) minmax(0,1fr); } }
.quote-stage .photo .ph{ aspect-ratio:4/5; border-radius:var(--r-lg); max-width:420px; }
.quote{ display:grid; gap:16px; align-content:start; max-width:38rem; }
.quote .mark{ font-family:var(--font-display); font-size:2.6rem; line-height:.5; color:var(--sun); }
.quote blockquote{ font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.8rem); line-height:1.4; letter-spacing:-.012em; color:var(--ink-900); min-height:5.6em; transition:opacity 160ms linear; }
.quote .who{ display:flex; align-items:center; gap:10px; color:var(--ink-500); font-size:15px; flex-wrap:wrap; }
.quote .who b{ font-weight:500; color:var(--ink-900); }
.quote .stars{ color:var(--sun); letter-spacing:2px; }
.quote-nav{ display:flex; gap:8px; align-items:center; margin-top:4px; }
.quote-nav button{ width:48px; height:48px; border-radius:999px; border:1px solid var(--ink-200);
  background:var(--paper); cursor:pointer; font-size:18px; color:var(--ink-900); transition:all var(--d-ui) var(--ease-out); }
.quote-nav button:hover{ background:var(--ink-900); color:#fff; border-color:var(--ink-900); }
.quote-nav .idx{ color:var(--ink-500); font-size:15px; margin-left:6px; }
html:not(.js) .quote-nav{ display:none; }
html:not(.js) .quote[data-i]:not([data-i="0"]){ display:none; }

/* FAQs — V2 1:1: two columns, heading + support note left, numbered
   accordion right. */
.faqs{ padding-block:var(--band); }
.faqs__split{ display:grid; gap:clamp(24px,4vw,56px); align-items:start; }
@media (min-width:900px){ .faqs__split{ grid-template-columns:minmax(0,380px) minmax(0,1fr); } }
.faq-grid{ display:grid; gap:12px; max-width:52rem; }
.faq .qn{ color:var(--sun-deep); font-family:var(--font-display); margin-right:6px; }
.faq{
  border-radius:var(--r-md); background:var(--paper-2); padding:0; overflow:hidden;
}
.faq summary{
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px clamp(18px,3vw,24px); font-family:var(--font-display);
  font-size:clamp(1.15rem,2vw,1.35rem); letter-spacing:-.01em; color:var(--ink-900);
}
.faq summary .tw{ color:var(--sun-deep); transition:transform var(--d-ui) var(--ease-out); font-size:14px; }
.faq[open] summary .tw{ transform:rotate(180deg); }
.faq .a{ padding:0 clamp(18px,3vw,24px) 20px; max-width:var(--measure); }

/* Ready CTA banner — rounded photo band. */
.cta-banner{ padding-block:clamp(40px,6vw,80px); }
.cta-banner__box{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  min-height:320px; display:grid; place-items:center; text-align:center;
  background:var(--img-bg);
}
.cta-banner__box .bg{ position:absolute; inset:0; }
.cta-banner__box .bg img{ width:100%; height:100%; object-fit:cover; }
.cta-banner__box::after{ content:""; position:absolute; inset:0; background:rgba(27,22,15,.5); }
/* V2 1:1: content LEFT-aligned, white pill button. */
.cta-banner__box{ place-items:stretch; text-align:left; display:flex; align-items:center; }
.cta-banner__in{ position:relative; z-index:2; padding:clamp(28px,5vw,56px); display:grid; gap:14px; justify-items:start; max-width:44rem; }
.cta-banner__in h2{ color:#fff; font-family:var(--font-display); font-weight:400; font-size:clamp(1.8rem,5vw,3rem); line-height:1.08; letter-spacing:-.02em; max-width:22ch; }
.cta-banner__in p{ color:#fff; opacity:.92; max-width:34rem; }
.cta-banner__in .ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

/* --------------------------------------------------------------- LISTING - */
.listing-intro{ padding:clamp(28px,5vw,56px) 0 clamp(16px,2.5vw,24px); }
.listing-intro .crumbs{ margin-bottom:clamp(18px,3vw,26px); }
.listing-intro h1{ max-width:20ch; }
.listing-intro .lede{ margin-top:clamp(14px,2vw,20px); max-width:36rem; }
.listing-intro--band{ background:var(--paper-2); padding-bottom:clamp(24px,4vw,40px); margin-bottom:clamp(16px,2.5vw,24px); border-radius:0 0 var(--r-lg) var(--r-lg); }
.intro-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(16px,3vw,48px); align-items:end; }
.intro-grid .lede{ margin:0 0 12px; }
.intro-month,.intro-big{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.5rem,8.5vw,5rem); line-height:.94; letter-spacing:-.03em; color:var(--ink-900); }
.intro-month .yr{ color:var(--ink-500); }
.month-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,3vw,32px);
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
.month-chips a,.month-chips .on{
  display:inline-flex; min-height:44px; align-items:center; padding:0 16px; border-radius:999px;
  background:var(--paper); color:var(--ink-700); text-decoration:none; border:1px solid var(--ink-200);
}
.month-chips a:hover{ border-color:var(--ink-900); color:var(--ink-900); }
.month-chips .on{ background:var(--sun-wash); color:var(--ink-900); border-color:var(--sun); }
.intro-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:16px clamp(16px,3vw,40px); margin-top:clamp(20px,3vw,28px); }
.intro-facts dd{ margin-top:2px; color:var(--ink-900); }
.intro-hair{ border-bottom:var(--hair); padding-bottom:clamp(20px,3vw,32px); }

/* The months top rail: V2 pills on one scrollable line + round arrows. */
/* THE month picker: one centred pill rail with round arrows, sitting in the
   intro band on the listing pages. Active pill = sun-wash + sun ring, like
   the reference; full "Lună An" labels, Sentence case. */
.month-rail{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:clamp(22px,3.5vw,34px); }
.month-rail > button{
  flex:none; width:48px; height:48px; border-radius:999px; border:1px solid var(--ink-200);
  background:var(--paper); cursor:pointer; font-size:18px; color:var(--ink-900);
  transition:all var(--d-ui) var(--ease-out);
}
.month-rail > button:hover{ background:var(--ink-900); color:#fff; border-color:var(--ink-900); }
.month-rail__wrap{ min-width:0; max-width:100%; }
.month-rail .rail{ padding-inline:4px; padding-block:4px; gap:8px; justify-content:safe center; }
.month-rail .rail a,.month-rail .rail .on{
  display:inline-flex; align-items:center; min-height:46px; padding:0 20px; white-space:nowrap;
  border-radius:999px; background:var(--paper); border:1px solid var(--ink-200);
  color:var(--ink-700); text-decoration:none; font-size:16px;
  transition:all var(--d-ui) var(--ease-out);
}
.month-rail .rail a:hover{ background:var(--sun-wash); border-color:var(--sun); color:var(--ink-900); }
.month-rail .rail .on{ background:var(--sun-wash); border-color:var(--sun); color:var(--ink-900); font-weight:500; }
.month-under{ margin-bottom:clamp(18px,3vw,28px); }
@media (max-width:719.98px){ .month-rail > button{ display:none; } }

/* The custom sort dropdown (filter.js builds it over the native select). */
.sort-block select{
  width:100%; min-height:52px; padding:12px 16px; border-radius:999px;
  background:var(--paper-2); border:1px solid transparent;
  -webkit-appearance:none; appearance:none;
}
html.js .sort-block select{ display:none; }
.sortdrop{ position:relative; }
.sortdrop__btn{
  width:100%; min-height:52px; padding:0 18px; border-radius:999px; cursor:pointer;
  background:var(--paper-2); border:1px solid transparent; color:var(--ink-900);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:17px; text-align:left; transition:all var(--d-ui) var(--ease-out);
}
.sortdrop__btn:hover{ background:var(--sun-wash); }
.sortdrop__btn .caret{ color:var(--sun-deep); font-size:12px; }
.sortdrop__menu{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80;
  background:var(--paper); border-radius:var(--r-sm); box-shadow:var(--e2);
  padding:6px; display:grid; gap:2px; animation:sheetIn var(--d-ui) var(--ease-out) both;
}
.sortdrop__menu button{
  min-height:46px; padding:0 14px; border:0; border-radius:9px; cursor:pointer;
  background:none; color:var(--ink-700); text-align:left; font-size:17px;
}
.sortdrop__menu button:hover{ background:var(--sun-wash); color:var(--ink-900); }
.sortdrop__menu button[aria-current="true"]{ background:var(--sun-wash); color:var(--ink-900); font-weight:500; }

.listing-cols{ padding-bottom:clamp(40px,6vw,72px); }
@media (min-width:1080px){
  .listing-cols > .wrap{ display:grid; grid-template-columns:280px 1fr; gap:clamp(24px,4vw,48px); align-items:start; }
}

/* Filter chips */
.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px;
  border-radius:999px; background:var(--paper-2); color:var(--ink-700); cursor:pointer;
  text-decoration:none; font-size:15px; white-space:nowrap; border:1px solid transparent;
  transition:all var(--d-ui) var(--ease-out);
}
.chip:hover{ background:var(--sun-wash); color:var(--ink-900); }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip.is-on{ background:var(--sun-wash); border-color:var(--sun); color:var(--ink-900); }
.chip.is-on::after{ content:"✕"; color:var(--sun-deep); }
.chip--all.is-on::after{ content:none; }
.chip:focus-within{ outline:2px solid var(--focus); outline-offset:3px; }
.chip-set{ display:flex; flex-wrap:wrap; gap:8px; }

.filters{ display:grid; gap:24px; align-content:start; }
.filters fieldset{ border:0; padding:0; margin:0; min-width:0; }
.filters legend,.filters .f-lbl{ display:block; width:100%; padding:0; margin-bottom:10px;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-500); }
.filters .f-lbl .val{ float:right; color:var(--ink-900); }
.filters input[type="search"]{
  width:100%; min-height:48px; padding:0 16px;
  background:var(--paper-2); border:0; border-radius:999px; font-size:17px;
  -webkit-appearance:none; appearance:none;
}
/* The price slider, in-system: sun-wash track, sunny fill (via --fill from
   app.js), big white-ringed thumb. Falls back to accent-color if unstyled. */
.filters input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:32px; margin:0;
  background:transparent; accent-color:var(--sun); cursor:pointer;
}
.filters input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--sun) var(--fill,100%), var(--sun-wash) var(--fill,100%));
}
.filters input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:999px;
  background:var(--sun); border:4px solid #fff; box-shadow:0 2px 10px rgba(27,22,15,.28);
}
.filters input[type="range"]::-moz-range-track{ height:6px; border-radius:999px; background:var(--sun-wash); }
.filters input[type="range"]::-moz-range-progress{ height:6px; border-radius:999px; background:var(--sun); }
.filters input[type="range"]::-moz-range-thumb{
  width:26px; height:26px; border-radius:999px;
  background:var(--sun); border:4px solid #fff; box-shadow:0 2px 10px rgba(27,22,15,.28);
}
.filters__actions{ display:grid; gap:10px; border-top:var(--hair); padding-top:20px; margin-top:24px; }
/* With JS the form applies itself on change — the button is no-JS only. */
html.js #wtt-apply{ display:none; }
.filters__reset{ min-height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--sun-deep); text-decoration:none; font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
.filters__reset:hover{ color:var(--ink-900); }

.sheet-head{ display:none; }
@media (min-width:1080px){
  .filters-col{ position:sticky; top:24px; }
  .filters-topbar{ display:none; }
}
@media (max-width:1079.98px){
  .filters-col{ position:fixed; inset:0; z-index:200; background:var(--paper); display:none; flex-direction:column; }
  .filters-col:target,.filters-col.open{ display:flex; animation:sheetUp var(--d-ui) var(--ease-out) both; }
  .sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px var(--gutter); border-bottom:var(--hair); }
  .sheet-head .t{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:-.02em; color:var(--ink-900); }
  .filters-col .filters{ flex:1 1 auto; overflow-y:auto; padding:clamp(20px,4vw,32px) var(--gutter) 24px; }
  .filters-col .chip{ min-height:48px; font-size:17px; }
  .filters__actions{ grid-template-columns:auto 1fr; border-top:var(--hair);
    padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background:var(--paper); margin:0; box-shadow:0 -8px 24px rgba(27,22,15,.08); }

  .filters-topbar{ position:sticky; top:0; z-index:40;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
    background:var(--paper); border-bottom:var(--hair); }
  .filters-topbar__row{ display:flex; align-items:center; gap:10px; min-height:56px; }
  .filters-open{
    flex:1 1 auto; min-height:44px; display:flex; align-items:center;
    justify-content:space-between; gap:10px; padding:0 18px; cursor:pointer;
    background:var(--sun-wash); border:1px solid var(--sun); border-radius:999px;
    font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
    color:var(--ink-900); text-decoration:none;
  }
  .filters-open .n{ color:var(--sun-deep); }
  .chip-rail{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:10px;
    font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
  .chip-rail::-webkit-scrollbar{ display:none; }
  .chip-rail .chip{ min-height:38px; font-size:var(--t-label); }
  .chip-rail .clear{ display:inline-flex; align-items:center; min-height:38px; padding:0 12px;
    color:var(--sun-deep); text-decoration:none; white-space:nowrap; }
}

.listing-head{ display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline;
  justify-content:space-between; padding:clamp(14px,2vw,20px) 0; border-bottom:var(--hair); }
.listing-count{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-900); }
.sortform{ display:flex; align-items:center; gap:10px; }
.sortform label{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-500); }
.sortform select{ min-height:40px; max-width:210px; background:var(--paper); border:0; border-bottom:1px solid var(--ink-900); border-radius:0;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-900);
  -webkit-appearance:none; appearance:none; padding-right:4px; }
.sortform .go{ min-height:40px; padding:0 10px; background:none; border:0; cursor:pointer;
  color:var(--sun-deep); font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
html.js .sortform .go{ display:none; }

.results{ padding-top:clamp(24px,3.5vw,40px); }
.results.is-loading .grid-offers{ opacity:.35; transition:opacity 160ms linear; }

/* Load more — the JS path; classic pagination stays for no-JS. */
.load-more-wrap{ display:grid; justify-content:center; padding:clamp(28px,4vw,40px) 0 0; }
html.js .pagination{ display:none; }

.empty-state{ padding:clamp(32px,6vw,72px) 0 clamp(24px,4vw,40px); animation:fade var(--d-ui) var(--ease-out) both; }
.empty-state h2{ max-width:24ch; font-family:var(--font-display); font-weight:400; color:var(--ink-900);
  font-size:clamp(2rem,6vw,3.2rem); line-height:1; letter-spacing:-.025em; margin:12px 0 clamp(16px,2.5vw,24px); }
.empty-state .lede{ max-width:34rem; margin-bottom:clamp(22px,3vw,36px); }
.empty-state .rows{ max-width:44rem; border:0; background:none; gap:10px; }
.empty-state .rows a{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:4px 20px; align-items:baseline; padding:16px 18px; border-radius:var(--r-sm); background:var(--paper-2); }
.empty-state .rows .t{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:-.02em; }
.empty-state .rows .d{ color:var(--ink-700); }
.empty-state .reset{ margin-top:clamp(20px,3vw,28px); }

.pagination{ display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border-top:var(--hair); padding-top:clamp(18px,3vw,26px); margin-top:clamp(24px,4vw,40px); }
.pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center;
  min-width:48px; min-height:48px; padding:0 10px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-700); text-decoration:none;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
.pagination a.page-numbers:hover{ background:var(--sun-wash); color:var(--ink-900); }
.pagination .page-numbers.current{ background:var(--sun-wash); border:1px solid var(--sun); color:var(--ink-900); }
.pagination .page-numbers.next,.pagination .page-numbers.prev{ background:var(--ink-900); color:#fff; padding:0 20px; }
.pagination .page-numbers.next:hover,.pagination .page-numbers.prev:hover{ background:var(--sun-deep); }

/* ----------------------------------------------------------- SINGLE OFFER */
/* A-style gallery grid at the top: rounded, 1 large + stack. */
.o-gal{ padding:clamp(12px,2vw,24px) 0 0; }
.o-gal__grid{ display:grid; gap:10px; }
@media (min-width:720px){
  .o-gal__grid{ grid-template-columns:1.6fr 1fr; }
  .o-gal__grid .side{ display:grid; gap:10px; grid-template-rows:1fr 1fr; }
}
.o-gal__grid .main .ph{ aspect-ratio:4/3; height:100%; border-radius:var(--r-lg); }
.o-gal__grid .side .ph{ aspect-ratio:16/10; border-radius:var(--r-md); height:100%; }
.o-gal__grid button{ padding:0; border:0; background:none; cursor:pointer; display:block; width:100%; height:100%; }
.o-gal__grid .more-tag{ position:absolute; right:12px; bottom:12px; z-index:2;
  background:rgba(255,255,255,.94); color:var(--ink-900); border-radius:999px; padding:8px 14px;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
@media (max-width:719.98px){ .o-gal__grid .side{ display:none; } }

/* Video hero keeps full-bleed-ish but rounded. */
.o-hero--video .o-hero__box{ position:relative; overflow:hidden; border-radius:var(--r-lg);
  height:min(125vw,72vh); background:var(--img-bg); }
.o-hero--video{ padding-top:clamp(12px,2vw,24px); }
.o-hero__box::after{ content:""; position:absolute; inset:0; background:var(--grade); pointer-events:none; z-index:1; }
.o-hero__box .yt{ position:absolute; top:50%; left:50%;
  width:max(100%, calc(min(125vw,72vh) * 1.7778)); height:max(min(125vw,72vh), 56.25vw);
  /* The 1.35 overscale crops YouTube's own chrome (title bar, controls)
     outside the box — the only way to hide it on an embed. */
  transform:translate(-50%,-50%) scale(1.35); border:0; }
.hero-pan{ position:absolute; inset:0; }
.hero-pan img{ width:100%; height:100%; object-fit:cover; }
.o-hero__tags{ position:absolute; left:clamp(16px,3vw,28px); bottom:16px; display:flex; gap:8px; z-index:2; }
.o-hero__tags .tag{ min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink-500); border:0;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
.o-hero__tags button.tag{ background:#fff; color:var(--ink-900); cursor:pointer; }
.o-hero__note{ padding-top:10px; }

/* D — typographic, now on the sunny wash. */
.o-hero--type{ position:relative; overflow:hidden; margin-top:clamp(12px,2vw,24px); }
.o-hero--type .in{ position:relative; background:var(--sun-wash); border-radius:var(--r-lg);
  padding:clamp(40px,8vw,96px) clamp(20px,4vw,48px) clamp(32px,5vw,56px); overflow:hidden; }
.o-hero--type .wm{ position:absolute; right:-2vw; top:-1vw; margin:0;
  font-family:var(--font-display); font-size:clamp(7rem,24vw,18rem); line-height:.8;
  letter-spacing:-.05em; color:#fff; opacity:.75; pointer-events:none; user-select:none; white-space:nowrap; }
.o-hero--type h1{ position:relative; max-width:22ch; }
.o-hero--type .facts4{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:10px; max-width:56rem; margin-top:clamp(24px,4vw,40px); }
.o-hero--type .facts4 > li{ background:var(--paper); border-radius:var(--r-sm); padding:12px 16px; }
.o-hero--type .facts4 .v{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink-900); display:block; }
.o-hero--type .aside{ position:relative; margin-top:clamp(18px,3vw,26px); max-width:34rem; color:var(--ink-700); }

.o-crumbs{ padding-top:clamp(14px,2vw,22px); }
.crumbs{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-500); }
.crumbs a{ color:var(--ink-500); text-decoration:none; }
.crumbs a:hover{ color:var(--ink-900); }
.crumbs .sep{ color:var(--ink-200); }
.crumbs [aria-current]{ color:var(--ink-900); }

/* Title + price + A-style sticky enquiry card. The layout wraps EVERYTHING in
   the main column so the card can follow the whole read on desktop. */
.o-head{ padding:clamp(18px,2.5vw,28px) 0 clamp(32px,5vw,56px); }
@media (min-width:1080px){
  .o-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(28px,4vw,56px); align-items:start; }
}
.o-main{ min-width:0; }
.o-head h1{ max-width:24ch; margin-top:clamp(14px,2vw,20px); }
/* The dockbar's scroll anchor — the price itself lives in the sidebar now. */
.o-anchor{ display:block; height:0; margin-top:clamp(14px,2vw,20px); }

/* A-style Trip Info: icon grid, 1:1 with the reference — tinted rounded
   square, small normal-case label sitting TIGHT on the semibold value,
   icon vertically centred on the pair. */
.o-info{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.5vw,24px) clamp(14px,2.5vw,32px); margin-top:clamp(22px,3.5vw,34px); }
@media (min-width:1200px){ .o-info{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Phones: still two per row — smaller icons, tighter type, values wrap. */
@media (max-width:559.98px){
  .o-info__i{ gap:10px; align-items:start; }
  .o-info__i .ic{ width:36px; height:36px; border-radius:10px; }
  .o-info__i .ic svg{ width:18px; height:18px; }
  .o-info__i dt{ font-size:13px; }
  .o-info__i dd{ font-size:15px; }
}
.o-info__i{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:center; min-width:0; }
.o-info__i .ic{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; border-radius:11px; background:var(--sun-wash); color:var(--sun-deep);
}
.o-info__i dt{ font-size:14.5px; letter-spacing:0; text-transform:none; color:var(--ink-500); line-height:1.25; }
.o-info__i dd{ color:var(--ink-900); font-weight:600; margin-top:1px; line-height:1.3; overflow-wrap:break-word; }

/* Sticky enquiry card (desktop) — price + discount live ONLY here. */
.o-card{
  position:sticky; top:24px; border-radius:var(--r-md); background:var(--paper);
  box-shadow:var(--e1); padding:clamp(20px,2.5vw,28px); display:grid; gap:14px;
}
.o-card .from{ color:var(--ink-500); font-size:15px; }
.o-card .p{ font-family:var(--font-display); font-size:2.1rem; line-height:1; letter-spacing:-.02em; color:var(--ink-900); }
.o-card .p--ask{ font-size:1.5rem; }
.o-card .note{ font-size:15px; color:var(--ink-500); }
.o-card .off{ margin-bottom:-6px; }
.off-badge{
  display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:999px;
  background:var(--sun); color:#fff; font-weight:600; font-size:14px; letter-spacing:.02em;
}
.off-badge--sm{ min-height:22px; padding:0 9px; font-size:12.5px; vertical-align:2px; }
.p-old{ color:var(--ink-500); text-decoration-color:var(--sun-deep); text-decoration-thickness:2px; font-weight:500; }
.dep-old{ color:var(--ink-500); font-size:.72em; font-family:var(--font-text); text-decoration-color:var(--sun-deep); text-decoration-thickness:2px; margin-right:2px; }
@media (max-width:1079.98px){
  /* On phones/tablets the card sits under the trip info as a plain block —
     the price must stay reachable, it exists nowhere else on the page. */
  .o-card{ position:static; margin-top:clamp(22px,3.5vw,34px); }
}

/* Highlights + description */
.o-two{ padding:clamp(28px,4.5vw,56px) 0; }
.o-two__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(24px,4vw,64px); align-items:start; }
.o-two h2{ margin-bottom:clamp(14px,2vw,22px); }
.o-desc{ max-width:var(--measure); }
.o-desc p{ margin-bottom:18px; }
.o-desc p:last-child{ margin-bottom:0; }
/* A-style "Trip Highlights": colored circled-check bullets, airy lines. */
.hi-list{ display:grid; gap:clamp(12px,2vw,18px); }
.hi-list li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  color:var(--ink-900); font-weight:500; max-width:var(--measure); }
.hi-list .m{ color:var(--sun); display:flex; margin-top:1px; }

/* B-style day-by-day: full-width tinted "Ziua N" band, serif title, text
   with a hairline lead, then the day's photos. */
.o-days{ padding:clamp(28px,4.5vw,56px) 0; }
.o-days h2{ margin-bottom:clamp(20px,3vw,32px); }
.dayb{ display:grid; gap:clamp(12px,2vw,16px); padding:0 0 clamp(28px,4.5vw,44px); }
.dayb__band{
  background:var(--sun-wash); color:var(--sun-deep); border-radius:12px;
  padding:10px 18px; font-size:var(--t-label); letter-spacing:var(--tr-label);
  text-transform:uppercase; font-weight:600;
}
.dayb__body{ padding-left:clamp(14px,2vw,20px); border-left:2px solid var(--ink-200); display:grid; gap:8px; }
.dayb__t{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-.015em; color:var(--ink-900); }
.dayb__d{ max-width:var(--measure); color:var(--ink-700); }
.dayb__ph{ display:grid; gap:clamp(10px,1.6vw,16px); grid-template-columns:1fr; }
@media (min-width:560px){
  .dayb__ph--n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dayb__ph--n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.dayb__ph .ph{ border-radius:var(--r-sm); }

/* Include / exclude — ticks. */
.incl-band .cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(24px,4vw,64px); }
.incl-band h2{ margin-bottom:clamp(14px,2vw,22px); font-size:clamp(1.5rem,3.6vw,2rem); line-height:1.08; }
.incl-band .no h2{ color:var(--ink-500); }
.pluslist{ display:grid; gap:12px; color:var(--ink-900); }
.pluslist li{ display:grid; grid-template-columns:auto 1fr; gap:12px; }
.pluslist .m{ color:var(--leaf-deep); font-weight:600; }
.pluslist--no{ color:var(--ink-500); }
.pluslist--no .m{ color:var(--ink-200); }

/* Departures */
.deps{ padding:clamp(36px,5.5vw,72px) 0 clamp(28px,4vw,48px); }
.deps h2{ margin-bottom:clamp(18px,3vw,28px); }
.deps .drows{ display:grid; gap:10px; }
.deps .drows > div{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:8px clamp(16px,3vw,32px); align-items:center; padding:16px 18px;
  background:var(--paper-2); border-radius:var(--r-md);
}
.dep-when{ display:block; font-family:var(--font-display); font-size:clamp(1.25rem,2.4vw,1.5rem); line-height:1.15; letter-spacing:-.015em; color:var(--ink-900); }
.dep-price{ font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,1.9rem); line-height:1; letter-spacing:-.02em; color:var(--ink-900); }
.dep-price--ask{ font-size:clamp(1.25rem,2.4vw,1.5rem); }
.dep-past{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-500); }
.deps__note{ margin-top:clamp(14px,2vw,20px); color:var(--ink-500); }

/* Strip + gallery grid */
.o-strip{ padding:clamp(36px,5.5vw,72px) 0 clamp(28px,4vw,48px); }
.o-strip .sec-head{ margin-bottom:clamp(18px,3vw,28px); }
.o-gallery{ padding:clamp(36px,5.5vw,72px) 0 clamp(28px,4vw,48px); }
.o-gallery .sec-head{ margin-bottom:clamp(18px,3vw,28px); }
.g-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:720px){ .g-grid{ grid-template-columns:repeat(4,1fr); } }
.g-grid button{ position:relative; padding:0; border:0; cursor:pointer; background:none; display:block; }
.g-grid .more{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; border-radius:var(--r-md);
  background:rgba(27,22,15,.55); color:#fff; font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; }
.lb-open-note{ background:none; border:0; padding:0; cursor:pointer; color:var(--sun-deep);
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
  text-decoration:underline; text-underline-offset:.22em; }
.lb-open-note:hover{ color:var(--ink-900); }

/* B-style "make it yours": FULL-BLEED photo band, centred serif over a dark
   scrim, a circular CTA, and the photo bleeding out through a sunny glow
   into the next section. Edge to edge on purpose — no rounding, no wrap. */
.o-bleed{
  position:relative; overflow:hidden; margin-top:clamp(36px,5.5vw,72px);
  min-height:min(88vh,680px); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:clamp(56px,9vw,120px) var(--gutter) clamp(96px,14vw,180px);
  background:var(--ink-900);
}
.o-bleed .bg{ position:absolute; inset:0; }
.o-bleed .bg img{ width:100%; height:100%; object-fit:cover; }
.o-bleed::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,22,15,.55) 0%, rgba(27,22,15,.18) 45%, rgba(27,22,15,0) 70%); }
/* The bleed itself: the photo melts through a sun glow into the page. */
.o-bleed::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, rgba(238,123,29,0) 0%, rgba(238,123,29,.38) 55%, rgba(250,246,239,.92) 88%, var(--paper) 100%); }
.o-bleed__in{ position:relative; z-index:2; max-width:44rem; }
.o-bleed__in h2{ font-family:var(--font-display); font-weight:400; color:#fff;
  font-size:clamp(2.2rem,6vw,4rem); line-height:1.02; letter-spacing:-.025em; }
.o-bleed__in p{ color:#fff; opacity:.94; margin:14px auto clamp(24px,4vw,40px); max-width:34rem;
  font-size:var(--t-lead); line-height:var(--lh-lead); }
.btn-circle{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  width:clamp(140px,18vw,172px); height:clamp(140px,18vw,172px); border-radius:999px;
  background:var(--sun); color:#fff; text-decoration:none; font-weight:600;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; line-height:1.5;
  box-shadow:0 14px 40px rgba(238,123,29,.4);
  transition:transform var(--d-ui) var(--ease-out), background var(--d-ui) var(--ease-out);
}
.btn-circle:hover{ background:var(--sun-deep); color:#fff; transform:scale(1.05); }

/* The enquiry POPUP. #formular:target keeps it working with JS off; app.js
   adds .open + focus + Escape. Full-screen sheet on phones, centred card up. */
.modal{ position:fixed; inset:0; z-index:220; display:none; }
.modal:target,.modal.open{ display:block; }
.modal__veil{ position:absolute; inset:0; background:rgba(27,22,15,.55); backdrop-filter:blur(3px); cursor:default; }
.modal__card{
  position:absolute; inset:0; background:var(--paper); overflow-y:auto;
  padding:clamp(20px,3vw,36px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
@media (min-width:720px){
  .modal__card{
    inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(880px, calc(100vw - 48px)); max-height:min(90vh, 820px);
    border-radius:var(--r-md); box-shadow:0 24px 80px rgba(27,22,15,.3);
    padding:clamp(24px,3vw,36px);
  }
  /* Two columns on desktop so the whole form fits without scrolling. */
  .modal .form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; align-items:start; }
  .modal .form > *{ grid-column:1 / -1; min-width:0; }
  .modal .form .form__field--half{ grid-column:span 1; }
}
.modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:clamp(16px,2.5vw,24px); }
.modal__head h2{ font-family:var(--font-display); font-weight:400; color:var(--ink-900);
  font-size:clamp(1.7rem,4vw,2.2rem); line-height:1.05; letter-spacing:-.02em; }
.modal__head .muted{ margin-top:6px; }
.modal__close{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--ink-200);
  color:var(--ink-900); text-decoration:none; font-size:17px;
  transition:all var(--d-ui) var(--ease-out);
}
.modal__close:hover{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
/* Form selects, dressed by app.js into the same styled dropdown as the
   listing sort (desktop pointers only). Sized like the sibling inputs. */
.form__field select.is-dressed{ display:none; }
.form__field .sortdrop--field .sortdrop__btn{ border-radius:var(--r-sm); min-height:52px; padding:12px 16px; }
.form__field .sortdrop--field .sortdrop__btn .car{ color:var(--sun-deep); font-size:13px; }
.form__field .sortdrop--field .sortdrop__menu{ max-height:280px; overflow-y:auto; }

/* The GDPR consent row, above the submit. */
.form__consent{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  font-size:15px; color:var(--ink-700); cursor:pointer; }
.form__consent input{ width:20px; height:20px; margin-top:2px; accent-color:var(--sun); cursor:pointer; }
.form__consent a{ color:var(--sun-deep); }

.o-related{ padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,104px); }
.o-related .rail{ margin-top:clamp(18px,3vw,28px); }

.expired-bar{ background:var(--sun-wash); }
.expired-bar__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(16px,3vw,40px); align-items:center; padding-block:clamp(22px,3.5vw,36px); }
.expired-bar .eyebrow{ color:var(--sun-deep); }
.expired-bar h2{ font-family:var(--font-display); font-weight:400; color:var(--ink-900);
  font-size:clamp(1.5rem,3.6vw,2rem); line-height:1.08; letter-spacing:-.02em; margin:8px 0; }
.expired-bar p{ max-width:34rem; }
.expired-bar .ctas{ display:flex; flex-wrap:wrap; gap:10px; }

/* Docked CTA bar (mobile) */
.dockbar{ position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--paper);
  box-shadow:0 -8px 24px rgba(27,22,15,.12); padding-bottom:env(safe-area-inset-bottom);
  animation:dockIn var(--d-ui) var(--ease-out) both; }
.dockbar__in{ max-width:var(--max); margin-inline:auto; padding:10px var(--gutter);
  display:flex; align-items:center; gap:16px; justify-content:space-between; }
.dockbar .p{ display:block; font-family:var(--font-display); font-size:1.5rem; line-height:1; letter-spacing:-.02em; color:var(--ink-900); white-space:nowrap; }
.dockbar .s{ font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-500); }
.dockbar .ctas{ display:flex; gap:8px; }
@media (min-width:1080px){ .dockbar{ display:none !important; } }

/* ----------------------------------------------------------------- FORMS - */
.form{ display:grid; gap:18px; background:var(--paper); padding:clamp(20px,3vw,32px); border-radius:var(--r-md); box-shadow:var(--e1); }
/* Grid items refuse to shrink below their content by default — a SELECT with
   one long option would push the whole form past the viewport on phones. */
.form > *{ min-width:0; }
.band .form{ box-shadow:none; }
.form__field label{ display:block; margin-bottom:6px;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-500); }
.form__field label .opt{ text-transform:none; letter-spacing:0; }
.form__field input,.form__field select,.form__field textarea{
  width:100%; min-height:52px; padding:12px 16px;
  background:var(--paper-2); border:1px solid transparent; border-radius:var(--r-sm);
  font-size:17px; color:var(--ink-900); -webkit-appearance:none; appearance:none;
}
.form__field textarea{ resize:vertical; }
/* Selects lose the OS arrow to appearance:none — give them our own chevron
   so they read as pickers, in the same tone as every other input. */
.form__field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6559' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:16px;
  padding-right:46px; cursor:pointer;
}
.form__field :focus{ outline:2px solid var(--focus); outline-offset:2px; }
.form__dep{ font-size:15px; color:var(--ink-500); }
.form__dep strong{ font-weight:500; color:var(--ink-900); }
.form__note{ font-size:15px; color:var(--ink-500); }
.form__hp{ position:absolute; left:-9999px; top:-9999px; }
.form .btn{ min-height:56px; }

.form-sent{ background:var(--paper); border-radius:var(--r-md); box-shadow:var(--e1);
  border-top:4px solid var(--sun); padding:clamp(24px,3vw,36px); animation:rise 420ms var(--ease-out) both; }
.form-sent .eyebrow{ color:var(--sun-deep); }
.form-sent h3{ font-family:var(--font-display); font-weight:400; color:var(--ink-900);
  font-size:clamp(1.5rem,3.6vw,2rem); line-height:1.1; letter-spacing:-.02em; margin:10px 0 12px; }
.form-sent p{ margin-bottom:18px; }
.form-err{ border-left:4px solid var(--sun); background:var(--sun-wash); border-radius:var(--r-sm); padding:14px 16px; color:var(--ink-900); }

/* --------------------------------------------------------------- LIGHTBOX */
.lb{ position:fixed; inset:0; z-index:300; background:var(--paper); display:flex; flex-direction:column; animation:lbIn var(--d-ui) var(--ease-out) both; }
.lb__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px var(--gutter); border-bottom:var(--hair); }
.lb__fig{ margin:0; flex:1 1 auto; min-height:0; padding:clamp(12px,3vw,40px); display:flex; touch-action:none; cursor:grab; }
.lb__fig img{ margin:auto; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:none; border-radius:var(--r-sm); animation:lbImg var(--d-slow) var(--ease-out) both; }
.lb__bot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); border-top:var(--hair); }
.lb__bot .hint{ font-size:15px; color:var(--ink-500); text-align:center; }
.lb__nav{ min-height:48px; padding:0 18px; background:var(--paper-2); border:0; border-radius:999px; cursor:pointer;
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-900); }
.lb__nav:hover{ background:var(--sun-wash); }
body.no-scroll{ overflow:hidden; }

/* ------------------------------------------------------- SMALL TEMPLATES - */
.page-hero{ padding:clamp(28px,5vw,56px) 0 0; }
.prose{ max-width:var(--measure); display:grid; gap:22px; padding-block:clamp(24px,4vw,48px); }
.prose h2,.prose h3{ font-family:var(--font-display); font-weight:400; color:var(--ink-900); }
.prose h2{ font-size:var(--t-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); }
.prose h3{ font-size:1.4rem; line-height:1.2; letter-spacing:-.015em; }
.prose ul{ display:grid; gap:8px; }
.prose ul li{ display:grid; grid-template-columns:auto 1fr; gap:12px; }
.prose ul li::before{ content:"—"; color:var(--sun); }

.contact-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(28px,4vw,64px); margin-top:clamp(24px,4vw,48px); align-items:start; padding-bottom:clamp(40px,6vw,80px); }
.contact-dl{ border:0; background:none; gap:10px; }
.contact-dl > div{ padding:16px 18px; background:var(--paper-2); border-radius:var(--r-sm); }
.contact-dl dd{ margin-top:4px; color:var(--ink-900); }
.contact-dl .sub{ color:var(--ink-500); }
.contact-dl .big-val a{ font-family:var(--font-display); font-size:clamp(1.5rem,3.6vw,2rem); letter-spacing:-.02em; color:var(--ink-900); text-decoration:none; }
.contact-dl .big-val a:hover{ color:var(--sun-deep); }
.contact-aside-note{ margin-top:clamp(18px,3vw,26px); max-width:32rem; }

.sr-rows{ border:0; background:none; gap:10px; }
.sr-rows a{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:8px clamp(16px,3vw,40px); align-items:center; padding:16px 18px; color:inherit;
  background:var(--paper-2); border-radius:var(--r-md); }
.sr-rows .who{ display:flex; gap:16px; align-items:center; }
.sr-rows .thumb{ width:88px; height:110px; flex:0 0 auto; overflow:hidden; border-radius:var(--r-sm); background:var(--img-bg); position:relative; }
.sr-rows .thumb img{ width:100%; height:100%; object-fit:cover; }
.sr-rows .thumb--plate{ background:var(--sun-wash); display:grid; align-content:end; }
.sr-rows .thumb--plate span{ font-family:var(--font-display); font-size:1.3rem; line-height:.9; letter-spacing:-.03em; color:#fff; padding:0 6px 4px; overflow:hidden; }
.sr-rows .t{ font-family:var(--font-display); font-size:1.4rem; line-height:1.2; letter-spacing:-.015em; color:var(--ink-900); margin-top:4px; }
.sr-rows .ctx{ color:var(--ink-500); }
.sr-rows .p{ font-family:var(--font-display); font-size:1.9rem; line-height:1; letter-spacing:-.02em; color:var(--ink-900); }
.sr-rows .p--ask{ font-size:1.5rem; line-height:1.1; }
.search-again{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; max-width:36rem; margin-bottom:clamp(22px,3vw,36px); }
.search-again label{ flex:1 1 200px; display:grid; gap:6px; }
.search-again input{ width:100%; min-height:52px; padding:12px 16px; background:var(--paper-2); border:0;
  border-radius:999px; font-size:17px; -webkit-appearance:none; appearance:none; }

/* ---------------------------------------------------------------- FOOTER - */
.site-footer{ background:var(--ink-900); color:#cbc3b6; padding:clamp(48px,7vw,88px) 0 calc(clamp(28px,4vw,48px) + env(safe-area-inset-bottom)); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(28px,4vw,48px); }
.footer-brand{ font-family:var(--font-display); font-size:28px; line-height:.94; letter-spacing:-.03em; color:#fff; }
.footer-pitch{ margin-top:14px; max-width:30ch; }
.footer-cta{ margin-top:18px; }
.footer-grid .addr{ margin-top:14px; color:#a79d8d; }
.footer-grid h4{ margin:0 0 12px; font-weight:400; font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:#a79d8d; }
.footer-grid ul{ display:grid; gap:8px; }
.footer-grid ul a{ color:#e8e2d8; text-decoration:none; }
.footer-grid ul a:hover{ color:#fff; }
.footer-legal{ margin-top:clamp(32px,4vw,56px); padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:15px; color:#a79d8d; }
.footer-legal a{ color:#a79d8d; }
.footer-legal a:hover{ color:#fff; }

/* Floating WhatsApp — icon-only green circle (Remus 2026-07-29). */
.wa-float{ position:fixed; right:clamp(16px,3vw,28px); bottom:calc(clamp(16px,3vw,28px) + env(safe-area-inset-bottom));
  z-index:110; display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:999px;
  background:var(--wa); color:#fff; text-decoration:none;
  box-shadow:0 8px 24px rgba(21,128,67,.35); transition:background var(--d-ui) var(--ease-out); }
.wa-float .ico-wa{ display:block; }
.wa-float:hover{ background:var(--wa-deep); color:#fff; }
body.has-dock .wa-float{ display:none; }

/* ---------------------------------------------------------------- MOTION - */
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroPan{ from{ transform:scale(1); } to{ transform:scale(1.06) translateY(-2%); } }
@keyframes railHint{ 0%,100%{ transform:translateX(0); } 40%{ transform:translateX(-6px); } }
@keyframes sheetIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes sheetUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes dockIn{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes lbImg{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@keyframes shimmer{ from{ background-position:-140% 0; } to{ background-position:240% 0; } }

@supports (animation-timeline: view()) {
  .rise{ animation:rise var(--d-enter) var(--ease-out) both;
    animation-timeline:view(); animation-range:entry 0% cover 26%; }
  .hero-pan{ animation:heroPan linear both; animation-timeline:scroll(); animation-range:0 68vh; }
}
html.io .rise{ opacity:0; transform:translateY(22px);
  transition:opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
html.io .rise.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important; transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  html.io .rise{ opacity:1; transform:none; transition:none; }
  .rail--tilt > li .ph{ transform:none; }
}

/* ----------------------------------------------------------------- PRINT - */
@media print{
  .site-header,.site-footer,.wa-float,.dockbar,.filters-col,.filters-topbar,
  .modal,.o-related,.menu-sheet,.search-pop,.o-bleed{ display:none !important; }
  body{ background:#fff; color:#000; }
  .band,.band--sky{ background:#fff; }
  a{ color:#000; text-decoration:none; }
}