/* Arkadia Apartments — the home page ('/' and '/en/', HomeV2Page, templates/pages/
   home-v2.php). Loaded on that page only, after site.css: a few rules here tie with
   site.css's on specificity and win by coming later. Every selector sits under
   <main class="hp2">, so the header, the footer and every other page keep site.css
   alone. Two rules reach outside main, both only where main.hp2 is: one hides the
   footer's .mobile-bar, whose place the dock at the end of main takes, and one keeps
   keyboard focus clear of that dock (scroll-padding).
   The tokens live on .hp2, never on :root: they share names with site.css's (--ink,
   --ink-2, --paper, --line) and would recolour the header and the footer there.

   site.css styles some of the same class names for the hub, the property pages and
   the previous home page, whose rules it still holds (.hero .section .eyebrow .btn
   .field .panel .reviews .guides .guide .faq): where one of its values reaches this
   markup, a declaration here takes it back, each one measured against the approved
   design in headless Chrome. The content keeps site.css's .wrap, so it lines up with
   the header and the footer. */

/* The type is the site's system stack, as on every other page: the design's Bricolage
   Grotesque and Inter are not served (owner, 2026-10-05, after Lighthouse: 94/90 with
   them, a desktop CLS of 0.117 from their swap, 98/98 without). The design's weights
   700 and 800 are 600 here and its 500 is 400, the site's rule since 2026-10-01 (the
   header of site.css): Segoe UI's bold is heavier than the design's. */

/* ---- 1. Tokens ---- */
.hp2{
  --ink:#0e1f2b;          /* main text, from the brand navy */
  --ink-2:#36495b;        /* secondary text */
  --mute:#5d6f7d;         /* tertiary text, microcopy */
  --pine:#0f7a58;         /* Arkadia green, actions */
  --pine-deep:#0a5c42;    /* hover, pressed */
  --pine-ink:#0b6b4d;     /* green for small text (AA contrast) */
  --mist:#edf4f0;         /* section background, green mist */
  --sand:#f8f7f4;         /* warm neutral background */
  --paper:#ffffff;
  --line:#e2e8e4;
  --gold:#c3912f;         /* stars and rating highlights only */
  --navy:#0d1d29;         /* dark boxes */
  --navy-2:#13293a;
  --mint:#a9dcc6;         /* accents on dark */
  --shadow-s:0 1px 2px rgba(14,31,43,.06),0 4px 14px -6px rgba(14,31,43,.08);
  --shadow-m:0 2px 4px rgba(14,31,43,.05),0 18px 44px -18px rgba(14,31,43,.22);
  --r-s:12px; --r-m:18px; --r-l:26px;
  --wrap:1180px;
  --font-display:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---- 2. Base, scoped ----
   site.css already sets box-sizing on every element, the page's smooth scrolling,
   img and font:inherit on the controls, and b, strong and h1-h6 at 600, which this
   page keeps. It also takes the links' colour and underline away, which the design
   does not: links come back green and underlined wherever a rule below does not say
   otherwise. */
.hp2 *::before,.hp2 *::after{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){
  .hp2 *,.hp2 *::before,.hp2 *::after{animation:none!important;transition:none!important}
}
.hp2{
  font-family:var(--font-body);color:var(--ink);background:var(--paper);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.hp2 img{max-width:100%;display:block}
.hp2 a{color:var(--pine-ink);text-decoration:underline}
.hp2 h1,.hp2 h2,.hp2 h3,.hp2 h4{font-family:var(--font-display);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.015em;text-wrap:balance}
.hp2 p{margin:0}
.hp2 ul{margin:0;padding:0;list-style:none}
/* The trust band is a ul.wrap: the reset above would take its centring away. */
.hp2 ul.wrap{margin-inline:auto}
.hp2 button,.hp2 input,.hp2 select{font:inherit;color:inherit}
/* Before the components, so .btn and the others keep their own radius. site.css
   draws the ring light green inside .hero (the old dark hero); this one stays green. */
.hp2 :focus-visible{outline:3px solid var(--pine);outline-offset:2px;border-radius:4px}
.hp2 .hero :focus-visible{outline-color:var(--pine)}

/* Sections. site.css lays out the sections of main from the third on only when they
   come near the screen (content-visibility, with a 900px placeholder); these are laid
   out at once, so the page's in-page links land where they point. Outranking that
   rule takes the id. */
#main.hp2>section{content-visibility:visible;contain-intrinsic-size:none}
.hp2 .section{padding-block:clamp(64px,8.5vw,106px)}
.hp2 .section[id],.hp2 .bookbar-zone{scroll-margin-top:96px}
.hp2 .section--mist{background:var(--mist)}
.hp2 .section--sand{background:var(--sand)}

/* Section titles. site.css's .eyebrow (light green, 14px below) and .section h2 (up
   to 4rem, 800px wide) reach these, so each of their values is set here. The
   eyebrow's ::before dash sets no display: it stays an empty inline box and does not
   show, as in the approved design. */
.hp2 .eyebrow{
  align-items:center;gap:.55rem;margin:0;
  font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--pine-ink);
}
.hp2 .eyebrow::before{content:"";width:22px;height:2px;background:var(--pine);border-radius:2px}
.hp2 .section h2{max-width:none}
.hp2 .sec-head{display:grid;gap:.9rem;max-width:760px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.hp2 .sec-head h2{font-size:clamp(1.8rem,3.3vw,2.55rem);font-weight:600}
.hp2 .sec-head .lead{color:var(--ink-2);font-size:1.0625rem;max-width:62ch}
.hp2 .sec-head--split{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;max-width:none}
.hp2 .sec-head--split>div{display:grid;gap:.9rem;max-width:720px}
.hp2 .link-more{font-weight:600;white-space:nowrap;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.hp2 .link-more:hover{color:var(--pine-deep)}

/* ---- 3. Buttons ----
   Every value of site.css's .btn is set again here; its variants (.btn-primary,
   .btn-light ...) have other names. */
.hp2 .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;font-size:1rem;line-height:1;text-decoration:none;cursor:pointer;
  border:none;border-radius:999px;padding:1rem 1.6rem;min-height:52px;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.hp2 .btn svg{flex:none}
.hp2 .btn--primary{background:var(--pine);color:#fff;box-shadow:0 10px 24px -10px rgba(15,122,88,.55)}
.hp2 .btn--primary:hover{background:var(--pine-deep);transform:translateY(-1px)}
.hp2 .btn--primary:active{transform:translateY(0)}
.hp2 .btn--ghost{background:rgba(255,255,255,.92);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.hp2 .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink-2);transform:translateY(-1px)}
/* The ghost button's icon draws in currentColor: green on the ink label. */
.hp2 .btn--ghost svg{color:var(--pine-ink)}
.hp2 .btn--sm{padding:.7rem 1.15rem;min-height:42px;font-size:.92rem}
.hp2 .btn .arr{transition:transform .18s ease}
.hp2 .btn:hover .arr{transform:translateX(3px)}

/* ---- 4. Hero and the booking bar ---- */
.hp2 .hero{position:relative;background:linear-gradient(180deg,#fcfcfa 0%,#f3f7f4 62%,var(--mist) 100%);overflow:hidden}
/* site.css's .hero is the old dark hero: a grid at least 720px tall (680px on phones)
   that bottom-aligns its content, in white. */
.hp2 .hero{display:block;min-height:0;align-items:normal;color:inherit}
.hp2 .hero::before{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(15,122,88,.13),transparent 66%)}
.hp2 .hero::after{content:"";position:absolute;width:460px;height:460px;left:-200px;bottom:-160px;border-radius:50%;background:radial-gradient(circle,rgba(15,122,88,.09),transparent 66%)}
/* site.css's .hero::after covers the whole hero (inset:0): its top would win over the
   bottom above and paint this glow in the top corner. */
.hp2 .hero::after{top:auto;right:auto}
.hp2 .hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);gap:clamp(2rem,4.5vw,4rem);align-items:center;
  padding-top:clamp(3.2rem,6.5vw,5.2rem);padding-bottom:clamp(6.6rem,9vw,8rem)}
.hp2 .hero h1{color:var(--ink);font-size:clamp(2.5rem,5.3vw,4.15rem);font-weight:600;letter-spacing:-.022em}
.hp2 .hero__sub{margin-top:1.15rem;font-size:clamp(1.02rem,1.5vw,1.17rem);line-height:1.62;color:var(--ink-2);max-width:54ch}
.hp2 .hero__sub strong{color:var(--ink)}
.hp2 .hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hp2 .hero__chips{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.5rem}
.hp2 .chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:400;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.42rem .85rem;box-shadow:var(--shadow-s)}
.hp2 .chip svg{color:var(--pine-ink)}

/* The photo collage: the hero shows the flats, not a backdrop. Every frame keeps the
   photos' landscape orientation, 16:10 for the large one and 4:3 for the small ones.
   (<picture> is display:contents in site.css, so the img is the figure's child box.) */
.hp2 .collage{position:relative;display:grid;grid-template-columns:1.08fr 1fr;gap:1rem}
.hp2 .collage figure{position:relative;margin:0;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-m);background:var(--navy-2)}
.hp2 .collage img{width:100%;height:100%;object-fit:cover;display:block}
.hp2 .collage__chip{position:absolute;left:.7rem;bottom:.7rem;background:rgba(13,29,41,.72);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .7rem;border-radius:999px;backdrop-filter:blur(4px);white-space:nowrap;z-index:1;max-width:calc(100% - 1.4rem);overflow:hidden;text-overflow:ellipsis}
.hp2 .collage__main{grid-column:1/-1;aspect-ratio:16/10;border-radius:var(--r-l);z-index:1}
.hp2 .collage__main .collage__chip{bottom:auto;top:.8rem}
/* Each photo leads to its flat's page: the link fills the frame, the img inside it as before. */
.hp2 .collage__link{display:block;height:100%}
.hp2 .collage__link:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.hp2 .collage__a{aspect-ratio:4/3;align-self:start;margin-top:-3.2rem;margin-left:1.2rem;z-index:2;outline:6px solid #fff}
.hp2 .collage__b{aspect-ratio:4/3;align-self:start;z-index:2;outline:6px solid #fff}
.hp2 .collage__badge{
  position:absolute;right:.85rem;bottom:.85rem;z-index:3;display:flex;align-items:center;gap:.85rem;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-m);
  padding:.85rem 1.1rem;text-decoration:none;color:var(--ink);transition:transform .2s ease;
}
.hp2 .collage__badge:hover{transform:translateY(-2px)}
.hp2 .collage__badge .b-score{font-family:var(--font-display);font-weight:600;font-size:1.7rem;letter-spacing:-.02em}
.hp2 .collage__badge .b-txt{display:grid;line-height:1.3}
.hp2 .collage__badge .b-stars{color:var(--gold);font-size:.72rem;letter-spacing:.14em}
.hp2 .collage__badge b{font-size:.9rem}
.hp2 .collage__badge small{color:var(--mute);font-size:.73rem}

/* The booking bar, the bridge between the hero and the content. */
.hp2 .bookbar-zone{position:relative;z-index:5;margin-top:-64px}
.hp2 .bookbar{
  background:var(--paper);border-radius:var(--r-l);box-shadow:var(--shadow-m);
  padding:1.1rem 1.1rem 1rem;border:1px solid var(--line);
}
.hp2 .bookbar form{display:grid;grid-template-columns:1.1fr 1.1fr .7fr 1fr auto;gap:.4rem;align-items:stretch}
.hp2 .field{display:grid;gap:.18rem;padding:.55rem .9rem;border-radius:14px;position:relative;min-width:0}
.hp2 .field:hover{background:var(--sand)}
.hp2 .field label{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hp2 .field input,.hp2 .field select{border:none;background:transparent;padding:0;font-size:1rem;font-weight:600;color:var(--ink);width:100%;min-width:0;min-height:28px}
.hp2 .field input:focus,.hp2 .field select:focus{outline:none}
/* site.css's .field (the hub's search card, and the previous home page's) reaches here
   too. Its controls get outline:0, and a 4px offset and a 6px radius when focused:
   the design's values come back (the outline itself stays off, as in the design).
   Its ring around the field of a focused control stays, in this page's green: the
   design has no focus cue there. */
.hp2 .field input,.hp2 .field select{outline:none}
.hp2 .field input:focus-visible,.hp2 .field select:focus-visible{outline-offset:2px;border-radius:4px}
.hp2 .field:has(:focus-visible),.hp2 .field:has(input[type=date]:focus-within){box-shadow:inset 0 0 0 2px var(--pine)}
@supports not selector(:has(*)){.hp2 .field input:focus-visible,.hp2 .field select:focus-visible{outline:2px solid var(--pine)}}
.hp2 .field:not(:first-child)::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line)}
.hp2 .bookbar__submit{align-self:center}
.hp2 .bookbar__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.4rem;margin-top:.8rem;padding:0 .9rem .2rem}
.hp2 .bookbar__note{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:.84rem;color:var(--mute)}
.hp2 .bookbar__note span{display:inline-flex;align-items:center;gap:.4rem}
.hp2 .bookbar__note svg{color:var(--pine-ink)}
.hp2 .bookbar__wa{font-size:.9rem;font-weight:600;color:var(--pine-ink);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px;white-space:nowrap}
.hp2 .bookbar__wa:hover{color:var(--pine-deep)}

/* ---- 5. Trust band ---- */
.hp2 .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 2rem;padding-block:clamp(2.6rem,5vw,3.6rem)}
.hp2 .trust li{display:flex;gap:.9rem;align-items:flex-start}
.hp2 .trust .t-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--mist);color:var(--pine-ink);display:grid;place-items:center}
.hp2 .trust b{display:block;font-size:.98rem;font-weight:600}
.hp2 .trust span{font-size:.875rem;color:var(--mute);line-height:1.5;display:block;margin-top:.1rem}

/* ---- 6. Flat cards ---- */
.hp2 .props{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.hp2 .prop{
  position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease;box-shadow:var(--shadow-s);
}
.hp2 .prop:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.hp2 .prop__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-2);margin:0}
.hp2 .prop__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hp2 .prop:hover .prop__media img{transform:scale(1.035)}
.hp2 .prop__zone{position:absolute;left:.85rem;top:.85rem;background:rgba(13,29,41,.72);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.35rem .75rem;backdrop-filter:blur(4px)}
.hp2 .prop__flag{position:absolute;right:.85rem;bottom:.85rem;background:var(--paper);color:var(--ink);font-size:.74rem;font-weight:600;border-radius:999px;padding:.35rem .75rem;box-shadow:var(--shadow-s)}
.hp2 .prop__body{display:flex;flex-direction:column;gap:.55rem;padding:1.15rem 1.25rem 1.3rem;flex:1}
.hp2 .prop__top{display:flex;align-items:start;justify-content:space-between;gap:.8rem}
.hp2 .prop h3{font-size:1.22rem;font-weight:600}
.hp2 .prop h3 a{color:inherit;text-decoration:none}
.hp2 .prop h3 a::after{content:"";position:absolute;inset:0}
.hp2 .prop__rate{flex:none;display:inline-flex;align-items:center;gap:.3rem;font-weight:600;font-size:.95rem}
.hp2 .prop__rate .st{color:var(--gold)}
.hp2 .prop__rate small{font-weight:400;color:var(--mute)}
.hp2 .prop__specs{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.875rem;color:var(--ink-2)}
.hp2 .prop__specs span{display:inline-flex;align-items:center;gap:.4rem}
.hp2 .prop__specs svg{color:var(--mute)}
.hp2 .prop__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.1rem}
.hp2 .prop__tags span{font-size:.76rem;font-weight:600;color:var(--pine-ink);background:var(--mist);border-radius:999px;padding:.3rem .7rem}
.hp2 .prop__foot{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.hp2 .prop__price small{display:block;font-size:.76rem;color:var(--mute);font-weight:400}
.hp2 .prop__price b{font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
.hp2 .prop__price b em{font-style:normal;font-size:.85rem;font-weight:600;color:var(--mute)}
.hp2 .prop__go{position:relative;z-index:2;font-size:.92rem;font-weight:600;color:var(--pine-ink);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.hp2 .prop__go:hover{color:var(--pine-deep)}
.hp2 .props>.prop:nth-child(4),.hp2 .props>.prop:nth-child(5){grid-column:span 1}
/* The last card asks the undecided to write: navy, its text in white and mint. */
.hp2 .prop--invite{background:var(--navy);border-color:var(--navy);color:#fff;justify-content:center;padding:1.8rem 1.6rem;gap:1rem}
.hp2 .prop--invite .eyebrow{color:var(--mint)}
.hp2 .prop--invite h3{font-size:1.45rem;color:#fff}
.hp2 .prop--invite p:not(.eyebrow){color:rgba(255,255,255,.8);font-size:.95rem}
.hp2 .prop--invite .btn{position:relative;z-index:2}

/* ---- 7. Direct booking, compared ---- */
.hp2 .direct{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hp2 .direct__copy h2{font-size:clamp(1.8rem,3.3vw,2.55rem);font-weight:600;margin-top:.9rem}
.hp2 .direct__copy .lead{color:var(--ink-2);margin-top:1rem;font-size:1.0625rem;max-width:56ch}
.hp2 .direct__copy .btn{margin-top:1.7rem}
.hp2 .ledger{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-s);overflow:hidden}
.hp2 .ledger__head{display:grid;grid-template-columns:1.25fr 1fr;border-bottom:1px solid var(--line)}
.hp2 .ledger__head div{padding:1rem 1.3rem;font-weight:600;font-size:.95rem}
.hp2 .ledger__head div:first-child{color:var(--pine-ink);background:var(--mist)}
.hp2 .ledger__head div:last-child{color:var(--mute)}
.hp2 .ledger__row{display:grid;grid-template-columns:1.25fr 1fr;border-bottom:1px solid var(--line)}
.hp2 .ledger__row:last-child{border-bottom:none}
.hp2 .ledger__row div{padding:.9rem 1.3rem;font-size:.93rem;display:flex;align-items:center;gap:.6rem}
.hp2 .ledger__row div:first-child{font-weight:600;background:linear-gradient(to right,rgba(237,244,240,.55),transparent)}
.hp2 .ledger__row div:last-child{color:var(--mute)}
.hp2 .ledger .ok{flex:none;width:21px;height:21px;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center}
.hp2 .ledger .no{flex:none;width:21px;height:21px;border-radius:50%;background:#e8e3d9;color:var(--mute);display:grid;place-items:center}

/* ---- 8. Areas ---- */
.hp2 .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.hp2 .zone{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow-s);
  transition:transform .22s ease,box-shadow .22s ease;position:relative;
}
.hp2 .zone:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.hp2 .zone__ic{width:46px;height:46px;border-radius:14px;background:var(--mist);color:var(--pine-ink);display:grid;place-items:center;margin-bottom:.3rem}
.hp2 .zone h3{font-size:1.25rem;font-weight:600}
.hp2 .zone p{color:var(--ink-2);font-size:.95rem;flex:1}
.hp2 .zone__facts{display:flex;flex-wrap:wrap;gap:.4rem}
.hp2 .zone__facts span{font-size:.78rem;font-weight:600;color:var(--ink-2);background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem}
.hp2 .zone a{font-weight:600;font-size:.94rem;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem}
.hp2 .zone a::after{content:"";position:absolute;inset:0}

/* ---- 9. Business and medical ---- */
.hp2 .duo{display:grid;grid-template-columns:1.05fr .95fr;gap:1.4rem}
.hp2 .panel{border-radius:var(--r-l);padding:clamp(1.8rem,3.4vw,2.8rem);display:flex;flex-direction:column;gap:1rem}
/* site.css's .panel has a 1px light frame; .panel--mist below sets its own. */
.hp2 .panel{border:0}
.hp2 .panel .eyebrow{color:inherit}
.hp2 .panel h2{font-size:clamp(1.55rem,2.6vw,2.05rem);font-weight:600}
.hp2 .panel p{font-size:1rem;line-height:1.65}
.hp2 .panel ul{display:grid;gap:.55rem;margin-top:.2rem}
.hp2 .panel li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.hp2 .panel li svg{flex:none;margin-top:.22rem}
.hp2 .panel .btn{align-self:flex-start;margin-top:.7rem}
.hp2 .panel--navy{background:var(--navy);color:#fff}
.hp2 .panel--navy .eyebrow{color:var(--mint)}
.hp2 .panel--navy .eyebrow::before{background:var(--mint)}
.hp2 .panel--navy p{color:rgba(255,255,255,.85)}
.hp2 .panel--navy li svg{color:var(--mint)}
.hp2 .panel--mist{background:var(--mist);border:1px solid #dfeae4}
.hp2 .panel--mist p{color:var(--ink-2)}
.hp2 .panel--mist li svg{color:var(--pine-ink)}
.hp2 .panel__note{font-size:.82rem;color:var(--mute);margin-top:auto;padding-top:.6rem}
.hp2 .panel--navy .panel__note{color:rgba(255,255,255,.55)}

/* ---- 10. Reviews ----
   The owner's brief of 2026-10-11, in the section's full width: the heading split like
   the flats' and the guides' (the title, then the operator paragraph at ~50 characters
   to a line), the host's rating in a bar, the quotes, where they come from, and the
   two actions. section--reviews names the section in both languages (its id is
   despre or about). */
.hp2 .section--reviews .sec-head--split{align-items:start;gap:1rem clamp(2rem,4vw,3.5rem)}
.hp2 .section--reviews .sec-head--split>div{flex:1 1 440px}
.hp2 .section--reviews .sec-head--split .lead{flex:1 1 380px;max-width:46ch}
/* site.css's .reviews is the property page's review box: no frame, padding or tint. */
.hp2 .reviews{display:grid;gap:clamp(1.5rem,3vw,2.25rem);border:0;border-radius:0;padding:0;background:none}
/* The rating bar and the cards are site.css's, the same on every page; here only their
   place: three across, two to 641px, then a row swiped with snap (the 640px block). */
.hp2 .rev-grid{grid-template-columns:repeat(3,1fr)}

/* ---- 11. How to book ---- */
.hp2 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:step}
.hp2 .step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:1.6rem 1.5rem;box-shadow:var(--shadow-s)}
.hp2 .step::before{
  counter-increment:step;content:counter(step);
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:1rem;
}
.hp2 .step h3{font-size:1.12rem;font-weight:600;margin-bottom:.4rem}
.hp2 .step p{font-size:.94rem;color:var(--ink-2)}
.hp2 .step .btn{margin-top:1rem}
.hp2 .step--active{border-color:var(--pine);box-shadow:0 0 0 1px var(--pine),var(--shadow-s)}

/* ---- 12. Local guides ----
   site.css's .guides is the previous home page's list of guides: its list-style:none
   would pass down to the cards, and its .guide:hover turns the border green. */
/* Six guides since the Pipera guide: three by two. One row of six left each card ~180px
   wide, and auto-fit broke into five and one between 1060 and ~1180px. */
.hp2 .guides{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;list-style:inherit}
.hp2 .guide{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:var(--shadow-s);transition:transform .22s ease,box-shadow .22s ease}
.hp2 .guide:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--line)}
.hp2 .guide .g-topic{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pine-ink);flex:none}
.hp2 .guide h3{font-size:1.05rem;font-weight:600;line-height:1.35}
.hp2 .guide h3 a{color:inherit;text-decoration:none}
.hp2 .guide h3 a::after{content:"";position:absolute;inset:0}
.hp2 .guide p{font-size:.88rem;color:var(--mute);flex:1}
.hp2 .guide .g-cta{font-size:.88rem;font-weight:600;color:var(--pine-ink)}

/* ---- 13. Questions ----
   site.css's .faq is a grid with an 8px gap: on a <details> it would add a row, and
   the gap, under every question. */
.hp2 .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.4rem;align-items:start}
.hp2 .faq{display:block;gap:normal;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow-s)}
.hp2 .faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;font-weight:600;font-size:.98rem;
}
.hp2 .faq summary::-webkit-details-marker{display:none}
.hp2 .faq summary .pm{flex:none;width:26px;height:26px;border-radius:50%;background:var(--mist);color:var(--pine-ink);display:grid;place-items:center;transition:transform .2s ease}
.hp2 .faq[open] summary .pm{transform:rotate(45deg)}
.hp2 .faq div{padding:0 1.25rem 1.2rem;font-size:.93rem;color:var(--ink-2);line-height:1.65}

/* ---- 14. The phones' action dock ----
   The last child of main, never inside a section. It shows at the width where
   site.css hides its round WhatsApp button (680px); home-v2.js slides it in (.is-on).
   The footer's own .mobile-bar stays printed but hidden on this page. */
.hp2 .mobile-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:1fr 1fr 1.3fr;gap:.5rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(102%);transition:transform .3s ease,visibility 0s linear .3s;
  /* Parked off screen it is also hidden, so its links take no Tab stop (as site.css
     does for .mobile-bar.is-hidden); it turns hidden once the slide out is over. */
  visibility:hidden;
}
.hp2 .mobile-dock.is-on{transform:translateY(0);visibility:visible;transition:transform .3s ease,visibility 0s}
.hp2 .mobile-dock a{display:flex;align-items:center;justify-content:center;gap:.45rem;font-size:.9rem;font-weight:600;text-decoration:none;border-radius:999px;min-height:48px}
.hp2 .mobile-dock .d-tel,.hp2 .mobile-dock .d-wa{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.hp2 .mobile-dock .d-go{background:var(--pine);color:#fff}
main.hp2~.mobile-bar{display:none}
@media (max-width:680px){html:has(main.hp2){scroll-padding-bottom:84px}}

/* ---- 15. Reveal on scroll ----
   Hidden only where scripting runs, with no inline script: home-v2.js adds rv-on to
   main when it starts and .in to each block as it comes into view. If the script
   never starts, the blocks show after 2.5s; without scripting they are never hidden. */
.hp2 .rv{transition:opacity .55s ease,translate .55s ease}
@media screen and (scripting:enabled){
  .hp2 .rv:not(.in){opacity:0;translate:0 16px}
  .hp2:not(.rv-on) .rv:not(.in){animation:hp2-rv-show 0s 2.5s forwards}
}
@keyframes hp2-rv-show{to{opacity:1;translate:none}}
.hp2 .rv-d1{transition-delay:.08s}.hp2 .rv-d2{transition-delay:.16s}.hp2 .rv-d3{transition-delay:.24s}.hp2 .rv-d4{transition-delay:.32s}
/* The cards that lift on hover: the reveal's two transitions, then the hover's, which
   the stagger never delays. */
.hp2 :is(.prop,.zone,.guide).rv{transition:opacity .55s ease,translate .55s ease,transform .22s ease,box-shadow .22s ease}
.hp2 :is(.prop,.zone,.guide).rv-d1{transition-delay:.08s,.08s,0s,0s}
.hp2 :is(.prop,.zone,.guide).rv-d2{transition-delay:.16s,.16s,0s,0s}
.hp2 :is(.prop,.zone,.guide).rv-d3{transition-delay:.24s,.24s,0s,0s}
.hp2 :is(.prop,.zone,.guide).rv-d4{transition-delay:.32s,.32s,0s,0s}
@media (prefers-reduced-motion:reduce){.hp2 .rv:not(.in){opacity:1;translate:none}}

/* ---- 16. Narrower screens ---- */
@media (max-width:1120px){
  /* The booking bar goes to two columns before the menu does, so the button is not
     squeezed between 1060 and 1120px. */
  .hp2 .bookbar form{grid-template-columns:1fr 1fr;gap:.6rem}
  .hp2 .field:not(:first-child)::before{display:none}
  .hp2 .field{background:var(--sand)}
  .hp2 .bookbar__submit{grid-column:1/-1}
  .hp2 .bookbar__submit .btn{width:100%}
}
@media (max-width:1060px){
  .hp2 .props{grid-template-columns:repeat(2,1fr)}
  .hp2 .guides{grid-template-columns:repeat(2,1fr)}
  .hp2 .guides>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:900px){
  .hp2 .rev-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hp2 .hero__in{grid-template-columns:1fr;align-items:start}
  .hp2 .collage{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.4rem}
  .hp2 .collage__main{border-radius:var(--r-m)}
  .hp2 .collage__a,.hp2 .collage__b{margin:0;outline:none}
  .hp2 .trust{grid-template-columns:repeat(2,1fr)}
  .hp2 .direct{grid-template-columns:1fr}
  .hp2 .duo{grid-template-columns:1fr}
  .hp2 .zones{grid-template-columns:1fr}
  .hp2 .steps{grid-template-columns:1fr}
  .hp2 .faq-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .hp2 .mobile-dock{display:grid}
}
@media (max-width:640px){
  .hp2 .props{grid-template-columns:1fr}
  .hp2 .guides{grid-template-columns:1fr}
  .hp2 .trust{grid-template-columns:1fr}
  .hp2 .hero__actions .btn{width:100%}
  /* The quotes side by side, 80% of the width each, swiped with snap, instead of
     three screens of scrolling; the next card shows at the edge. overflow-y is
     hidden so that a card still rising into place (.rv) adds no vertical scroll. */
  .hp2 .rev-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(80%,1fr);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:thin}
  .hp2 .rev{scroll-snap-align:start}
  .hp2 .rev-cta .btn{flex:1 1 100%}
}
@media (max-width:480px){
  /* A smaller rating badge, so it fits on the large photo. */
  .hp2 .collage__badge{right:.6rem;bottom:.6rem;gap:.6rem;padding:.55rem .8rem;border-radius:12px}
  .hp2 .collage__badge .b-score{font-size:1.3rem}
  .hp2 .collage__badge b{font-size:.78rem}
  .hp2 .collage__badge small{display:none}
}
@media (max-width:480px){
  /* The booking bar's WhatsApp link needs 246px on one line in Romanian and 279px in
     English (Segoe UI; a wider system font takes more): on phones it may wrap, instead
     of widening the page (by 2px at 320px; 8px in the design). Where it fits, it stays
     on one line, as above 480px. */
  .hp2 .bookbar__wa{white-space:normal}
}
/* On paper every block shows (the reveal hides on screens only) and the dock stays off (last, so it beats the 680px rule). */
@media print{.hp2 .rv,.hp2 :is(.prop,.zone,.guide).rv{opacity:1;translate:none;animation:none;transition:none}.hp2 .mobile-dock{display:none}}