/* AFY Stays · site.css · v5
   The night field: the Bucharest footage opens the page, everything sits on the brand's charcoal, the brand's
   gold is kept for the logo, actions and links. Two text faces: Gilda Display for the large lines and the
   figures (one weight, a generous x-height and a proper î/ș/ț, so it holds on a phone and on the dark
   ground), Jost for everything you read and press. The wordmark is the logo's own Roman letter (Marcellus),
   drawn as SVG. One radius (none), one button shape, one pair of margins, one vertical rhythm (--sp).
   The phone is its own composition (see the end of the file): the footage fills the first screen, the
   estimate follows, lists fold, photographs pair up. */

/* ---------- fonts (self-hosted, SIL Open Font License: see fonts/OFL-*.txt) ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --cream: #FAF6EC;  --cream2: #F1EBDD;  --cream3: #E6DECB;
  --char: #14120F;   --char2: #1E1B16;   --char3: #2A2620;
  --gold: #C9972E;   --gold-strong: #B8841F; --gold-deep: #85611A;

  /* page roles (the night field); .light remaps them for the one bright card */
  --bg: var(--char); --bg2: var(--char2); --bg3: var(--char3);
  --ink: var(--cream); --muted: #A89F90;
  --accent: var(--gold); --accent-strong: #DDAE45; --accent-ink: var(--char); --accent-text: var(--gold);
  --paper: var(--cream);

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --step-small: 0.9375rem;                               /* 15px */
  --step-body: 1.0625rem;                                /* 17px */
  --step-lead: 1.1875rem;                                /* 19px */
  --step-head: 1.375rem;                                 /* 22px: group names, card titles */
  --step-big: 1.5rem;                                    /* 24px: statements, quotations, places */
  --step-title: 1.875rem;                                /* 30px: section headings, figures */
  --step-display: clamp(2.5rem, 4.4vw, 4rem);            /* 40–64px, the hero */
  --step-display-inner: clamp(2.25rem, 3.9vw, 3.5rem);   /* 36–56px, inner heroes */

  --sp: clamp(4.5rem, 8vw, 7.5rem);   /* the one vertical rhythm between sections */
  --margin: 6vw;
  --gutter: 2vw;
  --col: calc((100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12);
  --radius: 0px;          /* surfaces and photographs */
  --radius-pill: 999px;   /* buttons, switches: round, as on afystays.net */
  --radius-field: 14px;   /* form fields */
  --bar: 4.5rem;          /* height of the top bar */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}
.dark { background: var(--char2); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--char); font-synthesis: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--char); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, dt { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; background: var(--bg2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: calc(var(--bar) + 1.5rem); }
::selection { background: var(--gold); color: var(--char); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 220ms; }
::view-transition-new(root) { animation-duration: 320ms; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; hyphens: none; }
/* two families: Montserrat (semibold, slightly tightened) for headings, names and figures; Inter for reading */
.head { font-size: var(--step-head); line-height: 1.1; }
.lead { font-size: var(--step-lead); line-height: 1.4; max-width: 36ch; text-wrap: pretty; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 60ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums { font-variant-numeric: lining-nums tabular-nums; }
/* figures in the display face line up with the capitals */
.hero-facts dt, .facts dt, .hotel-facts dt, .reasons dt, .estimate-result, .contact-big a, .foot-places a { font-variant-numeric: lining-nums tabular-nums; }
.hero-facts dt, .facts dt, .hotel-facts dt, .estimate-result { font-weight: 600; letter-spacing: -0.02em; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.cover { width: 100%; height: 100%; object-fit: cover; }
.c1 { grid-column-start: 1 } .c2 { grid-column-start: 2 } .c3 { grid-column-start: 3 } .c4 { grid-column-start: 4 } .c5 { grid-column-start: 5 } .c6 { grid-column-start: 6 } .c7 { grid-column-start: 7 } .c8 { grid-column-start: 8 } .c9 { grid-column-start: 9 } .c10 { grid-column-start: 10 } .c11 { grid-column-start: 11 }
.s2 { grid-column-end: span 2 } .s3 { grid-column-end: span 3 } .s4 { grid-column-end: span 4 } .s5 { grid-column-end: span 5 } .s6 { grid-column-end: span 6 } .s7 { grid-column-end: span 7 } .s8 { grid-column-end: span 8 } .s9 { grid-column-end: span 9 } .s10 { grid-column-end: span 10 } .s12 { grid-column-end: span 12 }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; padding: 0 1.4rem; background: var(--gold); color: var(--char); border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; font-weight: 500; font-size: var(--step-body); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
.btn--quiet { background: var(--bg3); color: var(--ink); }
.btn--paper { background: var(--cream); color: var(--char); }
.link { color: var(--accent-text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: var(--gold-strong); }
  .btn--quiet:hover { background-color: var(--bg3); color: var(--accent-text); }
  .btn--paper:hover { background-color: var(--cream2); }
  .link:hover { text-decoration-color: currentColor; }
}
a[href^="tel:"], a[href*="wa.me"] { white-space: nowrap; }
.field { width: 100%; min-height: 3rem; padding: 0.75rem 1rem; background: var(--bg2); border: 2px solid var(--bg2); border-radius: var(--radius-field); font-size: max(1rem, var(--step-body)); color: var(--ink); transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.field:focus { outline: none; border-color: var(--gold); }
.field::placeholder { color: var(--muted); opacity: 1; }
select.field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23C9972E' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
textarea.field { resize: vertical; min-height: 7rem; }

/* ---------- top bar: the afystays.net bar (logo stacked on the left, links, RO/EN switch, gold button) ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar); display: grid; grid-template-columns: auto 1fr auto; column-gap: clamp(1.5rem, 4.5vw, 5rem); align-items: center; padding-inline: var(--margin); color: var(--cream); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.top.is-solid { background: var(--char); color: var(--cream); }
.top a, .top button { color: inherit; text-decoration: none; font-size: var(--step-small); }
.top .btn { color: var(--char); }
.top .btn--quiet { background: rgba(250, 246, 236, 0.14); color: inherit; }
.top.is-solid .btn--quiet { background: var(--char3); }
.top-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; justify-self: start; }
.top-brand img { height: 1.9rem; width: auto; background: none; }
.wordmark { display: block; width: auto; background: none; }
.top-brand .wordmark { height: 0.5rem; }
.top-nav { justify-self: start; display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3.25rem); }
.top-nav a, .nav-drop-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; font-size: 0.9375rem; color: rgba(250, 246, 236, 0.86); transition: color var(--t-hover) ease; }
.top-nav a.is-here, .nav-drop-btn.is-here { color: var(--gold); }
.nav-drop { position: relative; }
.nav-drop-btn svg { transition: transform var(--t-ui) var(--ease-out); }
.nav-drop-panel { position: absolute; top: calc(100% + 0.5rem); left: -1rem; min-width: 12rem; display: grid; padding: 0.5rem; background: var(--char2); border-radius: 1rem; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); /* taste-skill-ignore: a floating menu */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -0.75rem; height: 0.75rem; }  /* keeps the hover alive between the link and the panel */
.nav-drop-panel a { min-height: 2.75rem; padding: 0 0.9rem; border-radius: 0.65rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear 0s; }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .top-nav a:hover, .nav-drop-btn:hover { color: var(--gold); }
  .nav-drop:hover .nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear 0s; }
  .nav-drop:hover .nav-drop-btn svg { transform: rotate(180deg); }
  .nav-drop-panel a:hover { background: var(--char3); color: var(--gold); }
}
.top-right { justify-self: end; display: flex; align-items: center; gap: 0.9rem; }
/* RO | EN: one round switch, the chosen language filled in gold */
.lang-pill { display: inline-flex; gap: 0; padding: 3px; border-radius: var(--radius-pill); background: rgba(20, 18, 15, 0.35); border: 1px solid rgba(250, 246, 236, 0.22); }
.top .lang-pill .lang-btn { min-height: 1.9rem; min-width: 2.5rem; padding: 0 0.65rem; border-radius: var(--radius-pill); background: transparent; color: var(--cream); font-size: 0.8125rem; font-weight: 500; }
.top .lang-pill .lang-btn.active { background: var(--gold); color: var(--char); }
/* the gold button with its soft glow, as on afystays.net (the client's own bar) */
.top .top-book { min-height: 2.5rem; padding: 0 1.3rem; font-size: 0.9rem; box-shadow: 0 0 22px rgba(201, 151, 46, 0.38); /* taste-skill-ignore: the glow of the client's own bar (afystays.net) */ transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, box-shadow var(--t-ui) ease; }
@media (hover: hover) and (pointer: fine) { .top .top-book:hover { box-shadow: 0 0 30px rgba(201, 151, 46, 0.55); } /* taste-skill-ignore */ }
.top-menu { display: none; }
.top-right .top-menu { min-height: 2.4rem; padding: 0 1rem; font-size: 0.875rem; }
.top-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .top-progress { animation: grow-x linear both; animation-timeline: scroll(root); }
  }
}
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- menu (full field, opens from the button) ---------- */
.menu { position: fixed; inset: 0; z-index: 50; background: var(--char); color: var(--cream); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 5.5rem var(--margin) 2.5rem; align-content: start; overflow: auto; transform-origin: top right; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear 0s; }
.menu[hidden] { display: grid; opacity: 0; transform: scale(0.97) translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
.menu-close { position: absolute; top: 1.1rem; right: var(--margin); font-size: var(--step-small); color: var(--cream); min-height: 2.6rem; padding: 0 1.1rem; background: var(--char3); border-radius: var(--radius-pill); }
.menu-list { grid-column: 1 / 8; }
.menu-list a { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.15; text-decoration: none; color: var(--cream); transition: color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
.menu-list a.is-here, .menu-list a:hover { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .menu-list a:hover { transform: translateX(0.3em); } }
.menu-side { grid-column: 9 / 13; align-self: end; display: grid; gap: 1.5rem; justify-items: start; }
.menu-side .menu-cta { color: var(--char); }
.menu-side p { max-width: none; }
.menu-side a { color: var(--gold); }
.menu-side .muted { color: #A89F90; }
.menu-photo { grid-column: 9 / 13; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 1.5rem; }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; }
.lang { display: inline-flex; gap: 0.25rem; }
.lang-btn { min-height: 2.5rem; padding: 0 0.9rem; background: var(--char2); color: #A89F90; font-size: var(--step-small); border-radius: var(--radius-pill); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.lang-btn.active { background: var(--gold); color: var(--char); }

/* ---------- hero: the footage, full screen, with the stepped title over it ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); grid-template-rows: 1fr auto auto auto auto; padding: calc(var(--bar) + 2.5rem) var(--margin) 2.5rem; overflow: hidden; background: var(--char); color: var(--cream); isolation: isolate; }
.hero-media { position: absolute; inset: -8% 0; z-index: -1; }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
@media (prefers-reduced-motion: no-preference) {
  .hero-media video, .hero-media img { animation: slow-zoom 28s var(--ease-soft) infinite alternate; }
  @supports (animation-timeline: scroll()) {
    .hero-media { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  }
}
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(14%); } }
.hero-stage { display: contents; }  /* wide screens: its children are placed straight into the hero grid */
.hero-title { grid-column: 1 / 9; grid-row: 2; font-size: var(--step-display); line-height: 1.06; letter-spacing: -0.015em; color: var(--cream); will-change: transform; }
.hero-title .line:nth-child(2) { margin-left: calc(1 * (100% + var(--gutter)) / 8); }
.hero-lead { grid-column: 1 / 7; grid-row: 3; margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.45; max-width: 40ch; color: var(--cream); }
.hero-act { grid-column: 1 / 8; grid-row: 4; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-card { grid-column: 9 / 13; grid-row: 2 / 5; align-self: end; }
.hero-act .link { color: var(--cream); }
.hero-facts { grid-column: 1 / 13; grid-row: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(3rem, 8svh, 6rem); padding-top: 1.5rem; }
.hero-facts div { display: grid; gap: 0.2rem; }
.hero-facts dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-title); line-height: 1; font-variant-numeric: tabular-nums; color: var(--cream); }
.hero--inner .hero-title { grid-column: 1 / 10; }
.hero--inner .hero-lead { grid-column: 1 / 7; }
.hero-facts dd { font-size: var(--step-small); color: rgba(250, 246, 236, 0.78); max-width: 22ch; line-height: 1.35; }
.hero--inner { min-height: 78svh; grid-template-rows: 1fr auto auto auto; }
.hero--inner .hero-title { font-size: var(--step-display-inner); }
.hero--inner .hero-media video, .hero--inner .hero-media img { filter: brightness(0.45); animation: none; }
.hero--inner .hero-media { inset: -10% 0; }
.hero--inner .hero-facts { display: none; }

/* ---------- intro: the statement and the estimate ---------- */
.intro { padding-block: var(--sp); row-gap: 4.5rem; }
.intro-text { grid-column: 1 / 7; align-self: start; }
.intro-text .statement { max-width: 30ch; }
.intro-text p + p { margin-top: 1.25rem; }
.intro-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: 1.75rem; }
.intro-photo { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 1 / 1; overflow: hidden; align-self: start; }
.reasons { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--gutter); }
.reasons dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-title); line-height: 1; color: var(--ink); }
.reasons dd { color: var(--muted); margin-top: 0.6rem; max-width: 30ch; }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; }
/* the intro animation: the owner's flat at work, drawn in the gold line of the logo; one notification at a time,
   the same six things the text beside it lists, while the income below builds up */
/* side by side with the text it takes exactly the text's height (size containment): the drawing starts level with the
   statement, the income line ends level with the links; the drawing scales to whatever room is left */
.intro-anim { grid-column: 8 / 13; grid-row: 1; align-self: stretch; position: relative; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; min-height: 19rem; contain: size; color: var(--cream); container-type: size; }
.intro-anim .room { display: block; flex: 1 1 0; min-height: 0; width: 100%; height: auto; overflow: visible; margin-top: 0.35rem; }
.room .ln, .room .fx path, .room .fx circle { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.room .fx .bubble, .room .fx .paper { fill: var(--char); }
.room .fx .dot { fill: var(--gold); }
.room .fx-glow circle { fill: url(#lampglow); stroke: none; }
.js .intro-anim .room .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.js .intro-anim.is-in .room .ln { stroke-dashoffset: 0; }
.room .fx { opacity: 0; transition: opacity 500ms ease; }
.intro-anim[data-step="0"] .fx-photo, .intro-anim[data-step="1"] .fx-price, .intro-anim[data-step="2"] .fx-msg, .intro-anim[data-step="3"] .fx-clean,
.intro-anim[data-step="4"] .fx-fix, .intro-anim[data-step="5"] .fx-report, .intro-anim[data-step="6"] .fx-glow { opacity: 1; }
.fx-clean .sp { transform-box: fill-box; transform-origin: center; animation: twinkle 1.2s ease-in-out infinite; }
.fx-clean .sp2 { animation-delay: 0.3s; } .fx-clean .sp3 { animation-delay: 0.6s; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }
.fx-fix path { transform-box: fill-box; transform-origin: 20% 80%; animation: turn 1.4s var(--ease-in-out) infinite alternate; }
@keyframes turn { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.fx-photo path { animation: rays 1.3s ease-in-out infinite; }
@keyframes rays { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.intro-anim .feed { position: relative; height: 3.6rem; }
.intro-anim .ev { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; padding: 0; background: none; opacity: 0; transform: translateY(25%); transition: opacity 450ms ease, transform 600ms var(--ease-out); }
.intro-anim .ev.is-on { opacity: 1; transform: none; transition-delay: 260ms; }
.intro-anim .ev.is-past { opacity: 0; transform: translateY(-12%); transition: opacity 220ms ease, transform 260ms ease; }
.intro-anim .ev svg { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro-anim .ev p { display: grid; gap: 0.4cqi; max-width: none; }
.intro-anim .ev b { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.15; color: var(--cream); }
.intro-anim .ev small { font-size: var(--step-small); line-height: 1.3; color: var(--muted); }
.intro-anim .anim-dots { display: flex; gap: 0.5rem; }
.intro-anim .anim-dots i { flex: 1; height: 3px; background: var(--char3); transition: background-color 400ms ease; }
.intro-anim .anim-dots i.is-on { background: var(--gold); }
.intro-anim .anim-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.intro-anim .anim-foot span { font-size: var(--step-body); color: var(--cream); }
.intro-anim .anim-foot strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-title); line-height: 1; color: var(--accent-text); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; transition: color 400ms ease; }
.intro-anim[data-step="6"] .anim-foot strong { color: var(--accent-strong); }
@media (prefers-reduced-motion: reduce) {
  .intro-anim .ev, .intro-anim .ev.is-past { transform: none; }
  .js .intro-anim .room .ln { transition: none; stroke-dashoffset: 0; }
  .fx-clean .sp, .fx-fix path, .fx-photo path { animation: none; }
}
.estimate { padding: 1.75rem 1.75rem 1.6rem; background: rgba(20, 18, 15, 0.84); }
.intro .estimate { grid-column: 8 / 13; grid-row: 1 / 3; align-self: start; }
.estimate h2 { font-size: var(--step-head); line-height: 1.1; margin-bottom: 1.25rem; max-width: 22ch; }
.estimate-result { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; margin-bottom: 1.25rem; }
.estimate-result small { display: block; font-family: var(--font-text); font-size: var(--step-small); color: var(--muted); margin-top: 0.4rem; line-height: 1.4; }
.estimate label { display: block; color: var(--ink); font-size: var(--step-small); line-height: 1.45; }
.estimate label output { color: var(--accent-text); font-variant-numeric: tabular-nums; font-weight: 500; }
.estimate input[type="range"] { width: 100%; margin: 0.5rem 0 0.75rem; accent-color: var(--accent-text); height: 2rem; cursor: pointer; }
.estimate-note { margin-top: 0.25rem; font-size: var(--step-small); color: var(--muted); max-width: 36ch; }
.estimate .btn { margin-top: 1.1rem; min-height: 2.6rem; font-size: var(--step-small); background: var(--char3); color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .estimate .btn:hover { background: var(--char3); color: var(--gold); } }

/* ---------- features: a pinned side (heading, one line, the photo of the group in view) and the lists ---------- */
.features { padding-block: var(--sp); background: var(--char2); align-items: start; }
.feat-side { grid-column: 1 / 6; position: sticky; top: calc(var(--bar) + 1.5rem); }
.features-head { font-size: var(--step-title); margin-bottom: 0.9rem; }
.feat-lead { color: var(--muted); max-width: 34ch; margin-bottom: 2rem; }
.feat-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--char3); }
.feat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 600ms ease, transform 1400ms var(--ease-soft); }
.feat-photo img.is-on { opacity: 1; transform: none; }
.feat-main { grid-column: 7 / 13; display: grid; gap: 4.5rem; }
.feat-col h3 { font-size: var(--step-head); color: var(--ink); margin-bottom: 1.5rem; }
.feat-col ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem var(--gutter); }
.feat-col li { display: grid; gap: 0.25rem; align-content: start; transition: transform var(--t-ui) var(--ease-out); }
.feat-col li .fn { color: var(--ink); font-weight: 500; font-size: var(--step-body); line-height: 1.3; transition: color var(--t-hover) ease; }
.feat-col li .fd { color: var(--muted); font-size: var(--step-small); line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .feat-col li:hover { transform: translateX(0.3rem); } .feat-col li:hover .fn { color: var(--accent-text); } }
/* on a phone site.js turns each group name into a button that folds its list (first group open) */
.feat-col ul[hidden] { display: none; }
.feat-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.7rem 1rem; background: var(--char3); color: var(--ink); text-align: left; font: inherit; line-height: 1.15; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.feat-toggle svg { flex: none; width: 14px; height: 14px; color: var(--gold); transition: transform var(--t-ui) var(--ease-out); }
.feat-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.feat-toggle:active { transform: scale(0.99); }

/* ---------- showcase: band of unequal panels + the addresses running past ---------- */
.show { padding-block: var(--sp) calc(var(--sp) * 0.6); }
.show-head { padding-left: calc(2 * (var(--col) + var(--gutter))); font-size: var(--step-title); margin-bottom: 48px; }
.band { display: flex; width: 100%; height: 72svh; min-height: 440px; }
.band a { position: relative; display: block; flex: 1 1 0; overflow: hidden; transition: flex-grow 600ms var(--ease-in-out); }
.band a:nth-child(1) { flex-grow: 5; } .band a:nth-child(2) { flex-grow: 2; } .band a:nth-child(3) { flex-grow: 3; } .band a:nth-child(4) { flex-grow: 2; }
.band img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-soft); }
.band .band-title { position: absolute; top: 0; left: 0; padding: 20px; background: rgba(20, 18, 15, 0.6); color: var(--cream); font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.15; max-width: calc(16ch + 40px); }
.band .band-name { position: absolute; left: 0; bottom: 0; padding: 14px 18px; background: rgba(20, 18, 15, 0.6); color: var(--cream); font-size: var(--step-small); opacity: 0; transform: translateY(6px); transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .band:hover a { flex-grow: 1.4; }
  .band a:hover { flex-grow: 6 !important; }
  .band a:hover .band-name { opacity: 1; transform: none; }
  .band a:hover img { transform: scale(1.04); }
}
.show-cap { padding: 16px var(--margin) 0; font-size: var(--step-body); color: var(--muted); max-width: none; }
.show-cap a { color: var(--accent-text); }
/* where we manage: one line for owners, then the streets running past */
.areas { padding-block: calc(var(--sp) * 0.6) 0; }
.areas + .cta { padding-top: calc(var(--sp) * 0.5); }
.areas-head { font-size: var(--step-title); margin-bottom: 0.75rem; }
.areas-text p { color: var(--muted); max-width: 52ch; }
.hotel-link { display: inline-block; margin-top: 1.75rem; }
.marquee { overflow: hidden; white-space: nowrap; padding-block: 2.5rem 1rem; }
.marquee-track { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; will-change: transform; }
.marquee span { font-family: var(--font-display); font-weight: 500; font-size: var(--step-head); line-height: 1; color: var(--ink); }
.marquee i { display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--gold); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .marquee-track { animation: marquee 60s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- hotel: a split on the night field ---------- */
.hotel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding: 0 var(--margin) 0 0; min-height: 86svh; }
.hotel-photo { grid-column: 1 / 7; align-self: stretch; overflow: hidden; min-height: 60svh; }
.hotel-photo img { width: 100%; height: 100%; object-fit: cover; }
.hotel-text { grid-column: 8 / 13; padding-block: 8vh; }
.hotel-text h2 { font-size: var(--step-title); line-height: 1.05; margin-bottom: 1.25rem; }
.hotel-text p { color: var(--muted); }
.hotel-text p strong { color: var(--ink); font-weight: 500; }
.hotel-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem var(--gutter); margin-top: 2rem; }
.hotel-facts dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-title); line-height: 1; color: var(--ink); }
.hotel.dark { background: var(--char2); }
.hotel-facts dd { color: var(--muted); font-size: var(--step-small); margin-top: 0.3rem; max-width: 22ch; }
.hotel-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: 2.5rem; }
.hotel-strip figure { aspect-ratio: 4 / 5; overflow: hidden; }
.hotel-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .hotel-strip figure:hover img { transform: scale(1.05); } }
.hotel-text .btn { margin-top: 2rem; }

/* ---------- how it works: drag row of moments ---------- */
.moments { padding-block: var(--sp); }
.moments-top { display: flex; justify-content: space-between; align-items: flex-end; padding-inline: var(--margin); gap: 2rem; }
.moments-top h2 { font-size: var(--step-title); }
.row-nav { display: flex; gap: 8px; }
.row-nav button { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--bg3); color: var(--ink); display: grid; place-items: center; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.row-nav button:active { transform: scale(0.95); }
.row-nav button:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .row-nav button:not(:disabled):hover { background: var(--gold); color: var(--char); } }
.row-bar { height: 4px; background: var(--bg3); margin: 20px var(--margin) 40px; overflow: hidden; }
.row-bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0.2); transition: transform 120ms linear; }
ul.row { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--margin); scroll-padding-inline: var(--margin); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.row.is-drag { cursor: grabbing; scroll-snap-type: none; }
.row::-webkit-scrollbar { display: none; }
.row > li { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
.row h3 { font-family: var(--font-text); font-weight: 600; font-size: var(--step-body); color: var(--ink); line-height: 1.3; }
.row p { color: var(--muted); font-size: var(--step-body); line-height: 1.5; margin-top: 0.5rem; }
.row figure { aspect-ratio: 4 / 5; overflow: hidden; margin: 0 0 1.1rem; }
.row figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .row li:hover figure img { transform: scale(1.04); } }

/* ---------- testimonial: quotation over a photograph, two more beside it ---------- */
.quote { position: relative; height: 88svh; min-height: 520px; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--margin) 64px; align-content: end; align-items: baseline; background: var(--char); }
.quote video, .quote > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(0.5); z-index: 0; }
.quote blockquote { grid-column: 1 / 10; position: relative; z-index: 1; font-family: var(--font-display); font-weight: 500; font-size: var(--step-big); line-height: 1.3; color: var(--cream); max-width: 42ch; }
.quote cite { grid-column: 10 / 13; position: relative; z-index: 1; font-style: normal; font-size: var(--step-small); color: var(--cream); text-align: right; align-self: end; }
.quotes { padding-block: var(--sp) calc(var(--sp) * 0.4); row-gap: 3rem; }
.quotes-head { grid-column: 1 / 5; font-size: var(--step-head); }
.quotes figure { display: grid; gap: 1rem; }
.quotes blockquote { font-family: var(--font-display); font-weight: 500; font-size: var(--step-head); line-height: 1.35; color: var(--ink); max-width: 30ch; }
.quotes figcaption { color: var(--muted); font-size: var(--step-small); }

/* ---------- cta: a plain sentence, one action, the phone for those who would rather call ---------- */
.cta { padding: var(--sp) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.cta-text { grid-column: 1 / 7; }
.cta-text > p:first-child { font-family: var(--font-display); font-weight: 500; font-size: var(--step-big); line-height: 1.3; max-width: 26ch; color: var(--ink); }
.cta-act { display: flex; align-items: center; gap: 1.25rem; margin-top: 24px; flex-wrap: wrap; }
.cta-act .btn { min-height: 2.75rem; padding: 0 18px; }
.cta-text .cta-phone { margin-top: 1.5rem; font-size: var(--step-small); color: var(--muted); }
.cta-phone a { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cta-phone a:hover { color: var(--gold); } }
.cta-photo { grid-column: 8 / 13; aspect-ratio: 4 / 5; overflow: hidden; }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- footer: name first, places under it, on the night field ---------- */
.foot { padding: 3rem var(--margin) 1.25rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; background: var(--char2); }
.foot-name { grid-column: 1 / 13; display: flex; align-items: center; gap: 1rem; color: var(--ink); }
.foot-name img { height: 2rem; width: auto; background: none; }
.foot-name .wordmark { height: 0.75rem; }
.foot-places { grid-column: 1 / 6; display: grid; gap: 0.2em; align-self: start; }
.foot-places a { font-family: var(--font-display); font-weight: 500; font-size: var(--step-body); line-height: 1.3; color: var(--gold); text-decoration: none; transition: color var(--t-hover) ease; }
.foot-places span { font-family: var(--font-display); font-weight: 500; font-size: var(--step-body); line-height: 1.3; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .foot-places a:hover { color: var(--ink); } }
.foot-cols { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; align-self: start; }
.foot-cols h4 { font-weight: 500; font-size: var(--step-small); margin-bottom: 0.4rem; }
.foot-cols a { display: block; font-size: var(--step-small); color: var(--muted); text-decoration: none; line-height: 1.7; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .foot-cols a:hover { color: var(--gold); } }
.foot-legal { grid-column: 1 / 13; display: flex; justify-content: space-between; margin-top: 1rem; font-size: 0.8125rem; color: var(--muted); gap: 1rem; flex-wrap: wrap; }
.foot-legal a { color: var(--muted); }


/* ---------- inner-page sections ---------- */
.sec { padding-block: var(--sp); }
/* two sections on the same ground share one gap, not two */
.sec:not(.dark) + .sec:not(.dark), .sec:not(.dark) + .cta { padding-top: 0; }
.sec-head { font-size: var(--step-title); margin-bottom: 2.5rem; }
.two { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; column-gap: 2rem; row-gap: 2rem; align-items: baseline; align-content: start; }
.two dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.1; color: var(--ink); }
.two dd { color: var(--ink); max-width: 44ch; }
.two dd strong { color: var(--ink); font-weight: 500; }
.two--stack { grid-template-columns: 1fr; row-gap: 0.4rem; }
.two--stack dd { margin-bottom: 1.25rem; }
.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--34 { aspect-ratio: 3 / 4; } .ph--45 { aspect-ratio: 4 / 5; } .ph--11 { aspect-ratio: 1 / 1; } .ph--1610 { aspect-ratio: 16 / 10; } .ph--219 { aspect-ratio: 21 / 9; }
.ph figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--muted); }
.hotel-copy { align-self: center; }
.hotel-face img { object-position: 50% 25%; }
/* a row of photographs: column widths follow each picture's shape, so all share one height and line up */
.photo-row { display: grid; grid-template-columns: var(--cols, 1fr 1fr 1fr); gap: var(--gutter); align-items: start; margin-top: 1.5rem; }
.photo-row .ph img { transition: transform 900ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .photo-row .ph:hover img { transform: scale(1.03); } }

/* services: a 3 × 3 field of names with their sentence */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem var(--gutter); }
.svc dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.1; color: var(--ink); }
.svc dd { color: var(--ink); margin-top: 0.45rem; max-width: 34ch; }
/* figures in a row */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem var(--gutter); margin-top: 2.5rem; }
.facts dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-title); line-height: 1; color: var(--ink); }
.facts dd { color: var(--muted); font-size: var(--step-small); margin-top: 0.3rem; max-width: 22ch; }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote-block { display: grid; gap: 1.25rem; align-content: start; }
.quote-block cite { font-style: normal; color: var(--muted); font-size: var(--step-small); }
/* values: four statements on the night field */
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem calc(2 * var(--gutter)); }
.values dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-title); line-height: 1.05; color: var(--ink); }
.values dd { color: var(--ink); margin-top: 0.6rem; max-width: 36ch; font-size: var(--step-lead); line-height: 1.4; }
/* packages: three plain columns */
.packs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.pack { grid-column-end: span 3; }
.pack:nth-child(1) { grid-column-start: 1; } .pack:nth-child(2) { grid-column-start: 5; } .pack:nth-child(3) { grid-column-start: 9; }
.pack h3 { font-size: var(--step-title); line-height: 1; }
.pack .pack-sub { color: var(--ink); font-weight: 500; margin-top: 0.75rem; }
.pack p { color: var(--muted); margin-top: 0.75rem; }
.pack ul { margin-top: 1.25rem; padding: 0; list-style: none; color: var(--ink); line-height: 1.6; }
.pack li + li { margin-top: 0.3rem; }
.pack ul li::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; background: var(--gold); margin-right: 0.6em; vertical-align: 0.05em; }

/* statements */
.statement { font-family: var(--font-display); font-weight: 500; font-size: var(--step-big); line-height: 1.3; max-width: 34ch; color: var(--ink); }
.statement + cite { display: block; margin-top: 1.25rem; font-style: normal; color: var(--muted); font-size: var(--step-small); }

/* forms */
.form-head { font-size: var(--step-title); line-height: 1.12; margin-bottom: 0.75rem; }
.form-intro { color: var(--muted); margin-bottom: 2rem; max-width: 46ch; }
.form-group { display: grid; gap: 0.4rem; margin-bottom: 1.25rem; }
.form-group label { font-size: var(--step-small); color: var(--ink); font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-success { display: none; background: var(--bg2); color: var(--ink); padding: 1rem 1.1rem; margin-bottom: 1.25rem; border-left: 4px solid var(--gold); max-width: none; }
.form-success.visible { display: block; animation: ad-rise 500ms var(--ease-out) both; }
form .btn { min-height: 3.25rem; padding: 0 1.75rem; font-size: var(--step-body); }

/* ---------- the owner form: the one bright card on the night field, like a letter on the table ---------- */
.light { --bg: var(--cream); --bg2: var(--cream2); --bg3: var(--cream3); --ink: var(--char); --muted: #665C4D; --accent-text: var(--gold-deep); background: var(--cream); color: var(--ink); }
.light ::selection { background: var(--gold); color: var(--char); }
.light :focus-visible { outline-color: var(--gold-deep); }
.light .field { background: var(--cream2); border-color: var(--cream2); color: var(--char); }
.light .field::placeholder { color: #7A705F; }
.light .field:focus { background: #FFFDF8; border-color: var(--gold-deep); }
.light .field[aria-invalid="true"] { border-color: #A3361F; }
.light .btn--quiet { background: var(--char); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .light .field:hover:not(:focus) { background-color: var(--cream3); border-color: var(--cream3); }
  .light .btn--quiet:hover { background-color: var(--char3); color: var(--cream); }
}
.welcome { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.welcome-card { grid-column: 6 / 13; grid-row: 1; padding: clamp(2rem, 3.4vw, 3.25rem); scroll-margin-top: calc(var(--bar) + 1rem); }
.welcome-side { grid-column: 1 / 6; grid-row: 1; display: grid; gap: 2.25rem; align-content: start; padding-right: clamp(0rem, 2vw, 2rem); }
.welcome-photo { aspect-ratio: 1.4; }
.welcome-card .form-intro { margin-bottom: 2.5rem; }
/* the two parts of the form, each named, with its number (the form is filled in this order) */
.form-part { border: 0; padding: 0; margin: 0 0 1.75rem; min-inline-size: 0; }
.form-part > legend { display: flex; align-items: baseline; gap: 0.7rem; padding: 0; margin-bottom: 1.4rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.2; }
.part-n { font-weight: 500; color: var(--gold-deep); font-variant-numeric: lining-nums tabular-nums; }
.form-part + .form-part { margin-top: 2.5rem; }
/* one question, answered with one tap */
.q { border: 0; padding: 0; margin: 0 0 1.4rem; min-inline-size: 0; }
.q > legend { padding: 0; margin-bottom: 0.55rem; font-size: var(--step-small); font-weight: 500; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.15rem; border-radius: var(--radius-pill); background: var(--bg2); color: var(--ink); font-size: var(--step-small); font-weight: 500; line-height: 1.2; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.chip input:checked + span { background: var(--char); color: var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.chip:active span { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .chip:hover input:not(:checked) + span { background: var(--bg3); } }
.opt { color: var(--muted); font-weight: 400; }
.field-hint { font-size: var(--step-small); color: var(--muted); margin-top: -0.2rem; }
.field-unit { position: relative; max-width: 15rem; }
.field-unit .field { padding-right: 3.5rem; font-variant-numeric: lining-nums tabular-nums; }
.field-unit .unit { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rent-out { margin-top: 0.35rem; font-size: var(--step-small); color: var(--ink); animation: ad-rise 400ms var(--ease-out) both; }
.rent-out b { font-weight: 500; font-size: var(--step-lead); color: var(--gold-deep); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.field-msg { font-size: var(--step-small); line-height: 1.4; color: #A3361F; animation: ad-rise 300ms var(--ease-out) both; }
.form-send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.25rem; }
.form-send p { color: var(--muted); font-size: var(--step-small); line-height: 1.45; max-width: 30ch; }
/* sent: the card says thank you by name, in place of the form */
[data-form-card].is-sent form, [data-form-card].is-sent > .form-head, [data-form-card].is-sent > .form-intro { display: none; }
.welcome-card .form-success { background: none; border: 0; padding: 0; margin: 0; max-width: 38rem; outline: none; }
.welcome-card .form-success > p { max-width: 46ch; }
.recap { display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 0.55rem 1.25rem; margin-top: 1.75rem; padding: 1.25rem 1.4rem; background: var(--cream2); font-size: var(--step-small); line-height: 1.4; }
.recap dt { color: var(--muted); }
.recap dd { color: var(--ink); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.next-head { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.2; margin: 2.25rem 0 1.1rem; }
.next { list-style: none; padding: 0; margin: 0; counter-reset: next; display: grid; gap: 1.1rem; }
.next li { counter-increment: next; display: grid; grid-template-columns: 1.75rem 1fr; column-gap: 0.6rem; row-gap: 0.15rem; }
.next li::before { content: counter(next); grid-row: span 2; font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.1; color: var(--gold-deep); font-variant-numeric: lining-nums; }
.next b { font-weight: 500; }
.next span { color: var(--muted); max-width: 48ch; }
.welcome-card .form-success h3 { font-size: var(--step-title); line-height: 1.12; margin-bottom: 1rem; }
.welcome-card .form-success [data-pref] { display: none; }
.welcome-card .form-success [data-pref].is-on { display: block; }
.success-now { margin-top: 1.75rem; }
.welcome-card .form-success .btn { margin-top: 1.75rem; }
/* beside the card: why it costs nothing to ask, a word from an owner, and the three ways to talk now */
.promise dt { font-size: var(--step-head); }
.promise dd { color: var(--muted); }
.direct { display: grid; gap: 0.15rem; padding: 1.5rem 1.6rem 1.4rem; background: var(--char2); }
.direct-q { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.2; margin-bottom: 0.6rem; }
.direct a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding-block: 0.55rem; color: var(--cream); text-decoration: none; transition: color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
.direct a span { font-size: var(--step-lead); font-variant-numeric: lining-nums tabular-nums; word-break: break-word; }
.direct a small { color: var(--muted); font-size: var(--step-small); white-space: nowrap; }
.direct-hours { margin-top: 0.6rem; color: var(--muted); font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) { .direct a:hover { color: var(--accent-strong); transform: translateX(0.25rem); } }
.welcome-side.contact-big .welcome-photo { margin-top: 0.5rem; }

/* contact details */
.contact-big { display: grid; gap: 2rem; align-content: start; }
.contact-big a { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--step-big); line-height: 1.1; color: var(--accent-text); text-decoration: none; transition: color var(--t-hover) ease; word-break: break-word; }
.contact-big > div > span { font-family: var(--font-display); font-weight: 500; font-size: var(--step-big); line-height: 1.1; color: var(--ink); display: block; }
.contact-big p { font-size: var(--step-body); color: var(--muted); max-width: 34ch; margin-top: 0.35rem; }
@media (hover: hover) and (pointer: fine) { .contact-big a:hover { color: var(--ink); } }

/* property wall */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-bottom: 4rem; }
.filters button { color: var(--muted); font-size: var(--step-body); min-height: 2.5rem; transition: color var(--t-hover) ease; }
.filters button[aria-pressed="true"], .filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.5rem var(--gutter); align-items: start; }
.apt { display: block; text-decoration: none; color: inherit; }
.apt figure { overflow: hidden; aspect-ratio: 1 / 1; }
.apt figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .apt:hover img { transform: scale(1.04); } .apt:hover h3 { color: var(--accent-text); } }
.apt h3 { font-size: var(--step-head); line-height: 1.1; margin-top: 0.9rem; transition: color var(--t-hover) ease; }
.apt .apt-meta { color: var(--muted); font-size: var(--step-body); margin-top: 0.3rem; max-width: none; }
.apt .apt-tags { color: var(--muted); font-size: var(--step-small); margin-top: 0.25rem; max-width: none; }
.apt .apt-cta { display: inline-block; margin-top: 0.6rem; color: var(--accent-text); font-size: var(--step-body); }
.apt.is-hidden { display: none; }
.wall-empty { grid-column: 1 / -1; color: var(--muted); display: none; }
.wall-empty.is-on { display: block; }

/* ---------- motion helpers (content is visible without JavaScript) ---------- */
.lines .line { display: block; overflow: hidden; padding: 0.14em 0 0.1em; margin: -0.14em 0 -0.1em; }
.lines [data-line] { display: block; }
.shutter { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: ad-rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .lines [data-line] { transform: translateY(125%); animation: ad-line 1000ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 120ms + 200ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 0; transform: none; transition: opacity 600ms var(--ease-out); transition-delay: calc(var(--d, 0) * 60ms); }
  .js .shutter[data-reveal] img { transform: scale(1.1); transition: transform 1400ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in { opacity: 1; }
  .js .shutter[data-reveal].is-in img { transform: none; }
}
@keyframes ad-rise { to { opacity: 1; transform: none; } }
@keyframes ad-line { to { transform: none; } }

/* ---------- tablet and phone ---------- */
@media (max-width: 1024px) {
  .top-nav { display: none; }
  .top { grid-template-columns: auto 1fr; }
  .top-menu { display: inline-flex; }
}
@media (max-width: 1100px) {
  .feat-side { position: static; grid-column: 1 / 13; }
  .feat-photo { display: none; }
  .feat-main { grid-column: 1 / 13; margin-top: 1.5rem; gap: 3rem; }
  /* touch screens cannot hover: the names of the addresses stay on the pictures */
  .band .band-name { opacity: 1; transform: none; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --margin: 20px; --gutter: 16px; --step-big: 1.375rem; --step-title: 1.625rem; --step-head: 1.25rem; }
  .top-right { gap: 0.6rem; }
  .menu { padding-top: 5rem; }
  .menu-list, .menu-side { grid-column: 1 / 13; }
  .menu-photo { display: none; }
  .menu-side { margin-top: 2.5rem; align-self: start; }

  /* on a phone the text sits over the brightest part of the picture: a deeper shade keeps it readable */
  .hero-media video, .hero-media img, .hero--inner .hero-media video, .hero--inner .hero-media img { filter: brightness(0.42); }
  .hero { padding-top: calc(var(--bar) + 1.5rem); padding-bottom: 1.5rem; grid-template-rows: 1fr auto auto auto auto auto; }
  /* the second line must never wrap: in Montserrat semibold it is about 11em wide, plus the step of 0.45em */
  .hero-title { grid-column: 1 / 13; font-size: clamp(1.5rem, calc((100vw - 2 * var(--margin)) / 11.7), 3.75rem); }
  .hero-title .line:nth-child(2) { margin-left: 0.45em; }
  .hero-card { grid-column: 1 / 13; grid-row: 5; margin-top: 2rem; max-width: 32rem; }
  .hero-facts { grid-row: 6; }
  .hero-lead, .hero--inner .hero-lead { grid-column: 1 / 13; font-size: var(--step-body); margin-top: 1.1rem; max-width: 38ch; }
  .hero-act { grid-column: 1 / 13; margin-top: 1.4rem; }
  .hero-facts { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; margin-top: 3rem; }
  .hero-facts dt { font-size: var(--step-title); }
  .hero--inner { min-height: 70svh; }
  .hero--inner .hero-title { grid-column: 1 / 13; font-size: clamp(2.25rem, 9.6vw, 3.5rem); }

  .intro { row-gap: 2.5rem; }
  .intro-text, .intro-photo, .intro-anim, .intro .estimate { grid-column: 1 / 13; grid-row: auto; }
  .intro-anim { contain: none; container-type: inline-size; min-height: 0; align-self: start; }
  .intro-anim .room { flex: none; }
  .reasons { grid-template-columns: 1fr; gap: 1.5rem; }
  .estimate { padding: 1.25rem; }

  .show-head { padding-left: var(--margin); margin-bottom: 24px; }
  .band { flex-wrap: wrap; height: 84svh; min-height: 520px; }
  .band a { flex: 0 0 auto; height: 50%; }
  .band a:nth-child(1) { width: 64%; } .band a:nth-child(2) { width: 36%; } .band a:nth-child(3) { width: 36%; } .band a:nth-child(4) { width: 64%; }
  .band .band-title { padding: 16px; max-width: calc(16ch + 32px); }
  .band .band-name { white-space: normal; padding: 10px 12px; max-width: 100%; }
  .marquee { padding-block: 1.75rem 0.5rem; }

  .hotel { grid-template-columns: 1fr; padding: 0; min-height: 0; }
  .hotel-photo { grid-column: 1; min-height: 0; aspect-ratio: 4 / 5; }
  .hotel-text { grid-column: 1; padding: 2.5rem var(--margin) 3rem; }
  .hotel-strip { gap: 8px; }

  .row-nav { display: none; }
  .row-bar { margin-bottom: 28px; }
  .row { gap: 16px; }
  .row > li { flex-basis: 72vw; }

  .quote { height: 78svh; padding-bottom: 48px; }
  .quote blockquote { grid-column: 1 / 13; max-width: none; font-size: var(--step-big); }
  .quote cite { grid-column: 1 / 13; text-align: left; margin-top: 1rem; }
  .quotes { row-gap: 2rem; }
  .quotes-head, .quotes figure { grid-column: 1 / 13 !important; }
  .statement { font-size: var(--step-big); }
  .estimate-result { font-size: 2.25rem; }

  .cta { row-gap: 2rem; }
  .cta-text, .cta-photo { grid-column: 1 / 13; }
  .cta-photo { grid-row: 1; width: 64%; justify-self: end; }
  .cta-act .btn { min-height: 2.75rem; }

  .foot { padding-top: 2.5rem; row-gap: 1.25rem; }
  .foot-places { grid-column: 1 / 13; }
  .foot-cols { grid-column: 1 / 13; grid-template-columns: 1fr 1fr; margin-top: 1rem; gap: 1.25rem; }
  .foot-legal { margin-top: 1rem; }

  /* one column; the desktop's staggered offsets (inline margins) give way to one even gap */
  .sec.grid > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .sec.grid { row-gap: 1.5rem; }
  .two { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .two dd { margin-bottom: 0.5rem; }
  .pack { grid-column: 1 / 13 !important; }
  .svc { grid-template-columns: 1fr; gap: 1.75rem; }
  .values { grid-template-columns: 1fr; gap: 2rem; }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .facts dt { font-size: var(--step-title); }
  .form-grid { grid-template-columns: 1fr; }
  .welcome { row-gap: 2.5rem; }
  .welcome-card, .welcome-side { grid-column: 1 / -1; grid-row: auto; }
  .welcome-side { padding-right: 0; }
  .welcome .form-grid { grid-template-columns: 1fr 1fr; }
  .filters { gap: 0.25rem 1.25rem; margin-bottom: 2.5rem; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 600px) {
  :root { --sp: 3.75rem; --step-lead: 1.125rem; --step-head: 1.25rem; --step-big: 1.3125rem; --step-title: 1.5rem; --muted: #B5AC9C; }

  /* top bar: the mark on the left, language and menu on the right, all thumb-sized */
  :root { --bar: 3.75rem; }
  .top-brand { gap: 0.3rem; }
  .top-brand img { height: 1.5rem; }
  .top-brand .wordmark { height: 0.4375rem; }
  .top-right { gap: 0.4rem; }
  .top .top-book { display: none; }
  .top .lang-pill .lang-btn { min-height: 2.5rem; min-width: 2.6rem; padding: 0 0.65rem; }
  .menu { padding-top: 4.75rem; }
  .menu-list a { font-size: 1.875rem; line-height: 1.3; }
  .menu-side { margin-top: 2rem; gap: 1.25rem; justify-items: stretch; }

  /* hero: the footage fills the first screen and carries only the title, the sentence and the action;
     the estimate and the figures follow on the charcoal */
  .hero { display: block; min-height: 0; padding: 0; }
  .hero-stage { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - 3rem); padding: calc(var(--bar) + 1.25rem) var(--margin) 2.25rem; }
  .hero--inner .hero-stage { min-height: 74svh; }
  .hero-media { inset: 0 0 auto 0; height: calc(100svh - 3rem); overflow: hidden; animation: none !important; }
  .hero--inner .hero-media { inset: 0 0 auto 0; height: 100%; }
  .hero-lead, .hero--inner .hero-lead { font-size: var(--step-body); line-height: 1.5; margin-top: 1rem; max-width: none; }
  .hero-act { flex-direction: column; align-items: stretch; gap: 0.25rem; margin-top: 1.5rem; }
  .hero-act .btn { width: 100%; min-height: 3.25rem; }
  .hero-act .link { display: flex; justify-content: center; align-items: center; min-height: 2.75rem; }
  .hero-card { margin: 0; padding: 0 var(--margin); max-width: none; }
  .hero-card .estimate { background: var(--char2); padding: 1.5rem 1.25rem 1.4rem; }
  .estimate h2 { font-size: var(--step-head); margin-bottom: 1rem; }
  .estimate .btn { width: 100%; min-height: 3rem; }
  .estimate-result { font-size: 2rem; }
  .hero-facts { margin: 0; padding: 3.75rem var(--margin) 0; gap: 1.75rem 1rem; }
  .hero-facts dt { font-size: 2rem; }
  .hero-facts dd { font-size: var(--step-small); color: var(--muted); }

  /* intro: the statement runs the full measure, the photograph runs edge to edge */
  .intro { row-gap: 2rem; }
  .intro-text .statement { max-width: none; font-size: 1.5rem; line-height: 1.25; }
  .intro-text p + p { margin-top: 1rem; }
  .intro-links { flex-direction: column; gap: 0; margin-top: 1rem; }
  .intro-links a { display: flex; align-items: center; min-height: 2.75rem; }
  .intro-photo { margin-inline: calc(-1 * var(--margin)); aspect-ratio: 1 / 1; }
  .intro-anim { gap: 1.1rem; }
  .reasons { gap: 1.6rem; }
  .reasons dt { font-size: var(--step-big); }
  .reasons dd { margin-top: 0.4rem; max-width: none; }

  /* what we do: three folding groups, the first one open */
  .features-head { font-size: var(--step-title); margin-bottom: 0.6rem; }
  .feat-lead { margin-bottom: 0; }
  .feat-main { gap: 0.5rem; margin-top: 1.75rem; }
  .feat-col h3 { margin: 0; font-size: var(--step-head); }
  .feat-col ul { grid-template-columns: 1fr; gap: 1.15rem; padding: 0; }
  .feat-col li .fd { font-size: 0.9375rem; }

  /* the moments: picture first, so every card lines up */
  .moments-top h2 { font-size: var(--step-title); }
  .row-bar { margin: 1rem var(--margin) 1.5rem; }
  .row > li { flex-basis: 80vw; }
  .row figure { margin: 0 0 1rem; aspect-ratio: 4 / 3; }
  .row p { font-size: var(--step-body); }

  .quote { height: 72svh; min-height: 460px; padding-bottom: 40px; }
  .quote blockquote { font-size: var(--step-big); line-height: 1.25; }
  .quotes { row-gap: 2rem; }
  .quotes-head { font-size: var(--step-title); }
  .quotes blockquote { font-size: var(--step-big); line-height: 1.3; }

  /* a few addresses: one wide picture, two side by side, one wide; each one named */
  .show-head { font-size: var(--step-title); margin-bottom: 1.25rem; }
  .band { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; min-height: 0; padding-inline: var(--margin); }
  .band a, .band a:nth-child(n) { width: auto; height: auto; aspect-ratio: 4 / 5; }
  .band a:nth-child(1), .band a:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .band .band-title { font-size: var(--step-head); padding: 12px 14px; }
  .band .band-name { font-size: var(--step-small); line-height: 1.3; padding: 8px 10px; }
  .show-cap { padding-top: 1rem; font-size: var(--step-small); }
  .marquee { padding-block: 1.5rem 0.25rem; }
  .marquee span { font-size: 1.25rem; }

  .hotel-photo { aspect-ratio: 4 / 5; }
  .hotel-photo img { object-position: 50% 30%; }
  .hotel-text { padding: 2rem var(--margin) var(--sp); }
  .hotel-text h2 { font-size: var(--step-title); }
  .hotel-facts dt, .facts dt { font-size: 2rem; }
  .hotel-strip { margin-top: 1.75rem; }
  .hotel-text .btn { width: 100%; min-height: 3rem; }

  /* closing line: no picture (the section before it already carries several), one full-width action */
  .cta { padding: var(--sp) var(--margin); row-gap: 0; }
  .cta-photo { display: none; }
  .cta-text { text-align: center; }
  .cta-text > p:first-child { max-width: 24ch; margin-inline: auto; }
  .cta-act { flex-direction: column; align-items: stretch; gap: 0.25rem; margin-top: 1.25rem; }
  .cta-act .btn { width: 100%; min-height: 3.25rem; }
  .cta-act .link { display: flex; justify-content: center; align-items: center; min-height: 2.75rem; }
  .cta-text .cta-phone { margin-top: 0.75rem; text-align: center; }
  .cta-phone a { display: inline-flex; align-items: center; min-height: 2.75rem; }

  .foot { padding: 2.25rem var(--margin) 1rem; row-gap: 1.25rem; }
  .foot-name img { height: 1.75rem; }
  .foot-name .wordmark { height: 0.625rem; }
  .foot-places a, .foot-places span { font-size: var(--step-body); }
  .foot-places a { display: inline-flex; min-height: 2.5rem; align-items: center; }
  .foot-cols { margin-top: 0.5rem; gap: 1.5rem 1rem; }
  .foot-cols h4 { margin-bottom: 0.25rem; }
  .foot-cols a { padding-block: 0.55rem; line-height: 1.4; }
  .foot-legal { align-items: center; }

  /* inner pages: tighter rhythm, photographs in pairs, nothing staggered */
  .sec-head, .form-head { font-size: var(--step-title); margin-bottom: 1.25rem; }
  .form-intro { margin-bottom: 1.5rem; }
  .sec.grid { row-gap: 1.25rem; grid-auto-flow: row dense; }
  .sec.grid > .sec-head { margin-bottom: 0; }
  .sec .btn { width: 100%; min-height: 3rem; }
  /* the notes beside a form (why us, the contacts) get their own ground under the form */
  .sec.grid > .side { margin-top: 1.25rem !important; padding: 1.5rem 1.25rem 1.6rem; background: var(--char2); }
  .side .quote-block { margin-top: 1.75rem !important; }
  .sec.grid > .ph--34, .sec.grid > .ph--45 { aspect-ratio: 1 / 1; }
  .sec.grid > .wide-phone { aspect-ratio: 16 / 10 !important; }
  .no-phone { display: none !important; }
  /* a photo row on a phone: two even columns; with an odd count the first picture runs full width */
  .photo-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; }
  .photo-row .ph { aspect-ratio: 4 / 5 !important; }
  .photo-row .ph:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10 !important; }
  .photo-row .ph[data-shape="square"] { aspect-ratio: 1 / 1 !important; }
  .svc { gap: 1.5rem; }
  .svc dt, .two dt { font-size: var(--step-head); }
  .svc dd, .two dd { max-width: none; }
  .two { row-gap: 0.4rem; }
  .two dd { margin-bottom: 1.1rem; }
  .packs { row-gap: 2.5rem; }
  .pack h3 { font-size: var(--step-title); }
  .values { gap: 1.75rem; }
  .values dt { font-size: var(--step-title); }
  .values dd { font-size: var(--step-body); line-height: 1.5; max-width: none; }
  .facts { gap: 0.75rem; }
  .facts dd { font-size: var(--step-small); }
  .facts--2 { grid-template-columns: repeat(2, 1fr); }
  .quote-block .statement { font-size: var(--step-big); }
  form .btn { width: 100%; min-height: 3.25rem; }
  .welcome-card { margin-inline: calc(-1 * var(--margin)); padding: 2.25rem var(--margin) 2.5rem; }
  .welcome .form-grid { grid-template-columns: 1fr; }
  .welcome-card .form-intro { margin-bottom: 2rem; }
  .form-part > legend { margin-bottom: 1.1rem; }
  .chip span { min-height: 2.875rem; padding: 0 1rem; font-size: var(--step-body); }
  .field-unit { max-width: none; }
  .form-send { gap: 0.75rem; }
  .form-send p { max-width: none; text-align: center; width: 100%; }
  .welcome-side { gap: 1.75rem; }
  .welcome-photo { aspect-ratio: 16 / 10; }
  .direct { padding: 1.4rem 1.25rem 1.2rem; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .welcome-card .form-success .btn { width: 100%; }
  .recap { grid-template-columns: minmax(0, 8.5rem) 1fr; padding: 1.1rem 1.1rem; gap: 0.5rem 0.9rem; }
  .contact-big { gap: 1.5rem; }
  .contact-big a, .contact-big > div > span { font-size: var(--step-big); }
  .contact-big p { font-size: var(--step-small); }

  /* the apartments: zones as tappable chips (wrapping, never sideways), then two columns of cards */
  .filters { gap: 0.5rem; margin-bottom: 1.75rem; }
  .filters button { min-height: 2.5rem; padding: 0 0.9rem; background: var(--char2); color: var(--ink); font-size: var(--step-small); text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
  .filters button:active { transform: scale(0.96); }
  .filters button[aria-pressed="true"] { background: var(--gold); color: var(--char); text-decoration: none; }
  .wall { column-gap: 12px; row-gap: 2rem; }
  .apt h3 { font-size: 1.0625rem; line-height: 1.2; margin-top: 0.6rem; }
  .apt .apt-meta { font-size: var(--step-small); line-height: 1.4; }
  .apt .apt-tags { display: none; }
  .apt .apt-cta { font-size: 0.9375rem; margin-top: 0.4rem; }
  .wall-empty { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .row > li { flex-basis: 44vw; }
  .hero-facts { grid-template-columns: repeat(4, 1fr); }
  .intro-photo { width: 72%; }
  .intro-anim { max-width: 34rem; }
  /* tablet: two-up instead of one giant column */
  .reasons { grid-template-columns: repeat(3, 1fr); }
  .svc { grid-template-columns: 1fr 1fr; gap: 2rem var(--gutter); }
  .sec.grid > .ph { grid-column: span 6 !important; }
  .pack { grid-column: span 4 !important; }
  .values { grid-template-columns: 1fr 1fr; }
  /* tablet: the notes under the form sit two by two */
  .welcome-side { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .band a, .band img, .apt figure img, .row-bar i, .feat-photo img, .feat-toggle svg { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}