/* ═══════════════════════════════════════════════════════════════════════════
   WEBBLOOM · v6 (white and walnut)
   Cinzel capitals for display, Montserrat for text. White pages, espresso
   text, walnut brown details; the opening film is Cascais from the air.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "WB Serif"; src: url(../fonts/wb-serif-300.woff) format("woff"); font-weight: 300; font-display: optional; }
@font-face { font-family: "WB Serif"; src: url(../fonts/wb-serif-400.woff) format("woff"); font-weight: 400 600; font-display: optional; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-400.woff) format("woff"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-500.woff) format("woff"); font-weight: 500 600; font-display: optional; }

:root {
  --display: "Cinzel", "Trajan Pro", "WB Serif", Georgia, serif;
  --sans: "Montserrat", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .61, .21, 1);
  --slow: cubic-bezier(.16, 1, .3, 1);
  --gutter: 20px;
  --hd: 72px;
}
/* ─── Colours: white and warm walnut brown ───────────────────────────────────
   Every colour on the site comes from these tokens. Pages are white with dark
   espresso text; walnut brown is for buttons, links and small details.
   The opening film, the film tiles, the reviews band, the Best value card and
   the footer sit on dark espresso and pick up the --dk-* tokens. */
:root {
  --bg: #ffffff; --bg-2: #f8f4ef; --card: #ffffff; --deep: #f1eae2;
  --text: #2b1f17; --text-2: #4d3e33; --muted: #6b5b50; --strong: #1c130d;
  --accent: #7a4a2b; --accent-2: #5c3720;
  --glow: #dccbbb; --icon-bg: #f6efe7;
  --glass-0: #fdfbf8; --glass: #ffffff; --glass-2: #ffffff; --glass-3: #f6f0e9;
  --btn-bg: #6b4026; --btn-ink: #ffffff; --btn-hover: #4f2e1a; --btn-shadow: rgba(107, 64, 38, .32);
  --badge-bg: #6b4026; --badge-ink: #ffffff;
  --best-bg: #2b1f17; --best-shadow: rgba(43, 31, 23, .42); --best-tint: rgba(122, 74, 43, .06);
  --header-bg: rgba(255, 255, 255, .9); --shadow-c: rgba(60, 40, 25, .26); --err: #b3261e; --ok: #2e9a66;
  --duo-1: #a3846e; --duo-2: #2b1f17;
  --mtn-deep: #23170f; --mtn-ink: #fffaf5; --mtn-ink-2: rgba(255, 248, 240, .9); --mtn-filter: none; --mtn-tint: rgba(12, 10, 8, .08); --mtn-beam: transparent; --mtn-veil: #0d0b09;
  --mapsec-bg: var(--bg);
  --map-sea: #e4ebee; --map-land: #fbf8f4; --map-road: rgba(43, 31, 23, .14); --map-road-2: rgba(43, 31, 23, .28); --map-coast: rgba(122, 74, 43, .55); --map-text: rgba(43, 31, 23, .7); --map-sea-text: rgba(55, 78, 92, .6); --map-pin: #6b4026; --map-label: rgba(255, 255, 255, .96); --map-ui: rgba(255, 255, 255, .94); --map-vignette: rgba(120, 95, 70, .12);
  --tile-filter: grayscale(1) sepia(.22) contrast(1.02) brightness(1.04);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a4a2b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --hair: rgba(43, 31, 23, .1); --line: rgba(43, 31, 23, .12); --line-2: rgba(43, 31, 23, .22);
  --dk-bg: #23170f; --dk-deep: #1a110b; --dk-card: #2f2219; --dk-text: #fbf6f0; --dk-text-2: #dccfc3; --dk-muted: #b8a798; --dk-accent: #e8d6c6; --dk-accent-2: #f4ebe2;
  color-scheme: light;
}
/* Parts that always sit on a dark film or a dark card: dark tokens there */
:is(.mtn, .wtile, .reviews, .phead-media, .plan-best, .pt-best, .ft, .hd.at-hero) {
  --bg: var(--dk-bg); --bg-2: var(--dk-card); --card: var(--dk-card); --deep: var(--dk-deep);
  --text: var(--dk-text); --text-2: var(--dk-text-2); --muted: var(--dk-muted); --strong: #ffffff;
  --accent: var(--dk-accent); --accent-2: var(--dk-accent-2);
  --glass-0: rgba(255, 255, 255, .02); --glass: rgba(255, 255, 255, .04); --glass-2: rgba(255, 255, 255, .06); --glass-3: rgba(255, 255, 255, .08);
  --btn-bg: #fbf6f0; --btn-ink: #2b1f17; --btn-hover: #ffffff; --btn-shadow: rgba(0, 0, 0, .4);
  --hair: rgba(251, 246, 240, .12); --line: rgba(232, 214, 198, .2); --line-2: rgba(232, 214, 198, .38);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e8d6c6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: var(--text);
}
.plan-best .plan-badge, .pt-best .plan-badge { --badge-bg: #fbf6f0; --badge-ink: #2b1f17; }
.hd.is-solid .menu-btn i { background: var(--text); }
.duo::after { mix-blend-mode: multiply; }
.sec-alt { background: var(--bg-2); }
.every li, .proc li, .way, .pq, .plan:not(.plan-best), .pt-i:not(.pt-best) { box-shadow: inset 0 0 0 1px var(--hair), 0 20px 40px -32px var(--shadow-c); }

/* The illustrated map follows the theme too */
.map svg > rect:first-of-type { fill: var(--map-sea); }
.map pattern path { stroke: color-mix(in srgb, var(--map-coast) 18%, transparent); }
.map .land { fill: var(--map-land); }
.map radialGradient stop { stop-color: var(--map-pin); }
.map .compass path, .map .pin circle[r="5"] { fill: var(--map-pin); }
.map .pin circle[r="10"] { stroke: var(--map-pin); }
.map .pin-label rect, .map .pin-label path { fill: var(--map-label); stroke: var(--line-2); }
.map path[stroke-width="3"] { stroke: color-mix(in srgb, var(--map-coast) 65%, transparent); }
.map path[stroke-width="1.2"] { stroke: var(--map-road); }
.map .lm rect { stroke: var(--map-coast); }


@media (min-width: 768px) { :root { --gutter: 40px; --hd: 84px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 12px); font-size: 106.25%; }
@media (min-width: 1440px) { html { font-size: 112.5%; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: var(--gutter); }
.dim { color: var(--muted); }
.fine { margin: 0; font-size: .82rem; color: var(--muted); }
.lead { font-size: clamp(1.06rem, 1.2vw, 1.18rem); line-height: 1.65; color: var(--text-2); max-width: 36em; }

/* Labels: a roman numeral in Cinzel, a hairline and small capitals (as in the hero) */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font: 500 .74rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--text-2); }
.eyebrow span { font: 400 1.05rem/1 var(--display); letter-spacing: .1em; color: var(--accent); }
.eyebrow span::after { content: ""; display: inline-block; width: 34px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--line-2); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent; font: 600 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-pri { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 14px 36px -16px var(--btn-shadow); }
.btn-pri:hover { background: var(--btn-hover); box-shadow: 0 18px 40px -14px var(--btn-shadow); }
.btn-pri:active { transform: translateY(1px); }
.btn-line { border-color: color-mix(in srgb, var(--text) 42%, transparent); color: var(--text); background: var(--glass-0); }
.btn-line:hover { border-color: var(--strong); background: var(--glass-3); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: .74rem; }
.btn-lg { min-height: 58px; padding: 0 34px; font-size: .84rem; }
.link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 .82rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--text); }
.link .arr { flex: none; padding: 5px; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.link:hover .arr { transform: translateX(5px); background: var(--btn-bg); color: var(--btn-ink); }
.linkish { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); cursor: pointer; }
.linkish:hover { text-decoration-color: currentColor; }

/* Reading progress */
.progress { position: fixed; inset: 0 0 auto; z-index: 120; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--strong)); }

/* ─── Header ─── */
.hd { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease); border-bottom: 1px solid transparent; }
.hd.is-solid { background: var(--header-bg); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom-color: var(--hair); }
.hd.is-away { transform: translateY(-100%); }
.hd-in { display: flex; align-items: center; gap: 24px; height: var(--hd); width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: var(--gutter); }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font: 500 .9rem/1 var(--display); letter-spacing: .32em; color: var(--text); transition: opacity .4s var(--ease); }
.logo .mark { color: var(--strong); }
.logo i { font-style: normal; font-weight: 400; font-size: .86em; text-transform: uppercase; letter-spacing: .3em; color: var(--muted); }
.nav { display: none; gap: clamp(26px, 2.6vw, 44px); margin-left: auto; }
.nav a { position: relative; padding: 12px 0; font: 500 .84rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--text-2); transition: color .25s; }
.nav a::after { content: ""; position: absolute; left: 0; right: .22em; bottom: 4px; height: 1px; background: var(--strong); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--strong); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.hd-act { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.hd-cta { white-space: nowrap; }
.lang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: 600 .76rem/1 var(--sans); letter-spacing: .18em; text-decoration: none; color: var(--muted); }
.lang span.on { color: var(--strong); }
.lang i { width: 1px; height: 14px; background: var(--line-2); }
.lang:hover span { color: var(--strong); }
.menu-btn { display: grid; place-content: center; gap: 6px; width: 46px; height: 46px; border: 1px solid var(--hair); border-radius: 50%; background: color-mix(in srgb, var(--bg) 45%, transparent); }
.menu-btn i { display: block; width: 18px; height: 1px; background: var(--text); transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mmenu { display: grid; gap: 2px; padding: 8px var(--gutter) 26px; background: color-mix(in srgb, var(--bg) 97%, transparent); border-bottom: 1px solid var(--hair); }
.mmenu > a { padding: 16px 0; border-bottom: 1px solid var(--hair); font: 400 1.5rem/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.mmenu > a[aria-current="page"] { color: var(--accent); }
.mm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.lang-lg { font-size: .9rem; }
@media (max-width: 899px) { .hd-act .lang { display: none; } }
@media (max-width: 400px) { .hd-cta { display: none; } }
@media (min-width: 900px) {
  .nav { display: flex; }
  .hd-act { margin-left: 22px; }
  .menu-btn, .mmenu { display: none !important; }
}
/* Header while the opening film is on screen: nav on the left, no logo (the wordmark is in the hero) */
.hd.at-hero .logo { opacity: 0; pointer-events: none; visibility: hidden; }
@media (min-width: 900px) {
  .hd.at-hero .logo { position: absolute; }
  .hd.at-hero .nav { margin-left: 0; margin-right: auto; }
}

/* ─── Sections ─── */
.sec { position: relative; padding-block: clamp(84px, 10vw, 140px); }
.sec-alt { background: linear-gradient(180deg, var(--bg-2), var(--bg) 85%); border-top: 1px solid var(--hair); }
.sec-head { display: grid; gap: 4px; margin-bottom: clamp(40px, 5vw, 70px); }
.sec-head h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); margin-bottom: 18px; }
@media (min-width: 1000px) {
  .sec-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; column-gap: 64px; }
  .sec-head .eyebrow { grid-column: 1 / -1; }
  .sec-head h2 { margin-bottom: 0; }
}
.eyebrow:has(span:empty) span { display: none; }

/* Blue duotone for background films (keeps every film in the night palette) */
.duo { isolation: isolate; }
.duo video, .duo img { filter: grayscale(1) contrast(1.08) brightness(.82); }
.duo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, var(--duo-1), var(--duo-2) 70%); mix-blend-mode: multiply; }
.bgv { width: 100%; height: 100%; object-fit: cover; }

/* ─── Page head ─── */
.phead { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--hd) + clamp(70px, 10vw, 140px)) 0 clamp(60px, 7vw, 100px); background: radial-gradient(70% 90% at 80% 0%, color-mix(in srgb, var(--glow) 35%, transparent), transparent 60%), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 60%), var(--bg); border-bottom: 1px solid var(--hair); }
.phead h1 { font-size: clamp(2.3rem, 6vw, 5.2rem); line-height: 1.06; max-width: 13em; margin-bottom: 26px; }
.phead-media { min-height: clamp(480px, 72vh, 740px); display: grid; align-items: end; }
.phead-bg { position: absolute; inset: -6% 0; z-index: -2; }
.phead-bg video { width: 100%; height: 100%; object-fit: cover; }
.phead-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 65%, transparent) 0%, color-mix(in srgb, var(--bg) 25%, transparent) 45%, var(--bg) 100%); }
.avail { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 18px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); font-size: .88rem; color: var(--text-2); }
.avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.avail.is-on i { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }

/* ─── Home: the work ─── */
.wsec { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.wgrid { display: grid; gap: 18px; }
@media (min-width: 760px) { .wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.wtile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); isolation: isolate; }
@media (min-width: 760px) and (max-width: 1099px) { .wtile { aspect-ratio: 3 / 5; } }
.wtile-media { position: absolute; inset: 0; z-index: -1; }
.wtile-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--slow); }
.wtile:hover .wtile-media video { transform: scale(1.08); }
.wtile-media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--bg) 60%, transparent) 60%, color-mix(in srgb, var(--deep) 96%, transparent) 100%); }
.wtile-info { position: absolute; inset: auto 0 0; padding: 24px 24px 18px; }
.wtile-n { display: block; margin-bottom: 14px; font: 400 1.2rem/1 var(--display); color: var(--accent); }
.wtile-cat { margin: 0 0 8px; font: 500 .7rem/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2); }
.wtile h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); margin-bottom: 8px; }
.wtile-feat { margin: 0 0 8px; font-size: .86rem; color: var(--text-2); }
.wtile .link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.wtile .link:focus-visible { outline: none; }
.wtile .link:focus-visible::before { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 20px; }
.wtile:hover .link .arr { transform: translateX(5px); background: var(--btn-bg); color: var(--btn-ink); }
.wmore { margin-top: 30px; }

/* ─── Steps ─── */
.steps { background: var(--bg-2); border-block: 1px solid var(--hair); }
.steps-in { display: grid; margin: 0 auto; padding-block: clamp(56px, 6vw, 84px); list-style: none; }
.steps-in li { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.steps-in li:last-child { border-bottom: 0; }
.step-n { grid-row: 1 / span 2; font: 400 1.9rem/1 var(--display); color: var(--accent); }
.steps-in h3 { font-size: 1.25rem; margin: 4px 0 8px; }
.steps-in p { margin: 0; font-size: .95rem; color: var(--text-2); max-width: 26em; }
@media (min-width: 900px) {
  .steps-in { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(30px, 4vw, 70px); }
  .steps-in li { border-bottom: 0; padding: 0; }
  .steps-in li + li::before { content: ""; position: absolute; left: calc(clamp(30px, 4vw, 70px) / -2); top: 6px; bottom: 6px; width: 1px; background: var(--line); }
}

/* ─── Home: price teaser ─── */
.pt-row { display: grid; gap: 16px; }
@media (min-width: 900px) { .pt-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } }
.pt-i { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 34px 30px 28px; border-radius: 22px; text-decoration: none; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease); }
.pt-i:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--glass-2); }
.pt-best { background: var(--best-bg); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -50px var(--best-shadow); }
.pt-n { font: 400 1.2rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.pt-i b { font: 400 clamp(2.8rem, 4vw, 3.4rem)/1 var(--display); letter-spacing: .02em; color: var(--strong); margin-top: 6px; }
.pt-pages { font: 600 .78rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.pt-l { font-size: .95rem; color: var(--text-2); }
.pt-go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font: 600 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.pt-go .arr { transition: transform .3s var(--ease); }
.pt-i:hover .pt-go .arr { transform: translateX(5px); }
.pt-every { margin: 30px 0 0; padding: 18px 22px; border-radius: 16px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); font-size: .95rem; color: var(--text-2); }
.pt-every b { display: block; margin-bottom: 4px; font: 600 .74rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

/* Badge */
.plan-badge { position: absolute; top: -13px; left: 28px; margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-ink); font: 700 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 10px 24px -10px var(--btn-shadow); }

/* ─── CTA band ─── */
.cta-band { padding-block: clamp(76px, 8vw, 120px); background: radial-gradient(60% 120% at 100% 50%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 60%), var(--bg-2); border-top: 1px solid var(--hair); }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.cta-in h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); margin-bottom: 14px; }
.cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* ─── Work page ─── */
.flags { display: grid; gap: clamp(70px, 9vw, 130px); }
.flag { display: grid; gap: 34px; align-items: center; }
@media (min-width: 1000px) { .flag { grid-template-columns: 1.05fr 1fr; gap: 76px; } .flag:nth-child(even) .flag-media { order: 2; } }
.flag-media { display: block; position: relative; padding: 0 6% 9% 0; text-decoration: none; }
.bframe { border-radius: 14px; overflow: hidden; background: var(--deep); box-shadow: 0 0 0 1px var(--line-2), 0 50px 100px -50px var(--shadow-c); transition: transform .8s var(--slow); }
.bbar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--card); border-bottom: 1px solid var(--hair); }
.bbar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--text) 20%, transparent); }
.bbar span { margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: var(--glass-3); font-size: .68rem; letter-spacing: .04em; color: var(--muted); }
.bframe img { width: 100%; height: auto; }
.pframe { position: absolute; right: 0; bottom: 0; width: 24%; padding: 5px; border-radius: 22px; background: var(--deep); box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -20px var(--shadow-c); transition: transform .8s var(--slow); }
.pframe img { width: 100%; height: auto; border-radius: 17px; }
.flag-media:hover .bframe { transform: translateY(-6px); }
.flag-media:hover .pframe { transform: translateY(-12px) rotate(-1.5deg); }
.flag-media:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 14px; }
.flag h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 16px; }
.ticks { list-style: none; display: grid; gap: 12px; margin: 26px 0; padding: 0; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; color: var(--text-2); }
.ticks svg { flex: none; margin-top: 5px; color: var(--accent); }
.flag-plan { margin: 0 0 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--text-2); }
.flag-plan b { color: var(--strong); font-weight: 600; }
.flag-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Included in every website / every plan */
.every { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
@media (min-width: 640px) { .every { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .every { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.every li { padding: 28px 26px; border-radius: 20px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); }
.every-i { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 50%; color: var(--strong); background: var(--icon-bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.every h3 { font-size: 1.08rem; letter-spacing: .08em; margin-bottom: 10px; }
.every p { margin: 0; font-size: .92rem; color: var(--text-2); }
.every-note { margin-top: 22px; max-width: 60em; }

/* ─── Prices page ─── */
.prices { padding-top: clamp(70px, 8vw, 110px); }
.plans { display: grid; gap: 30px; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 40px 32px 32px; border-radius: 24px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); }
.plan-best { background: var(--best-bg); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 110px -60px var(--best-shadow); }
@media (min-width: 960px) { .plan-best { transform: translateY(-14px); } }
.plan h3 { font-size: 1.5rem; letter-spacing: .14em; }
.plan-price { display: flex; align-items: center; gap: 16px; margin: 20px 0 0; }
.plan-price b { font: 400 clamp(3.2rem, 5vw, 4.2rem)/1 var(--display); letter-spacing: .01em; color: var(--strong); }
.plan-price span { font: 500 .72rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.plan-pages { margin: 22px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--glass-3); box-shadow: inset 0 0 0 1px var(--line); font: 600 .9rem/1.3 var(--sans); letter-spacing: .04em; color: var(--strong); }
.plan-for { margin: 16px 0 0; min-height: 3.4em; font-size: .98rem; color: var(--text-2); }
.plan ul { display: grid; gap: 12px; margin: 22px 0 30px; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .95rem; color: var(--text-2); }
.plan li { display: flex; gap: 12px; align-items: flex-start; }
.plan li svg { flex: none; margin-top: 4px; color: var(--accent); }
.plan .btn { margin-top: auto; }
.plan.is-match { box-shadow: inset 0 0 0 2px var(--strong), 0 50px 110px -60px var(--best-shadow); }
.vat { margin: 34px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.cmp-w { overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair); background: var(--glass-0); }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; font-size: .95rem; }
.cmp th, .cmp td { padding: 17px 20px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: middle; }
.cmp thead th:first-child, .cmp tbody th { width: 38%; }
.cmp thead th { font: 400 1.15rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text); background: var(--glass-0); vertical-align: bottom; }
.cmp thead th small { display: block; margin-top: 8px; font: 400 1.4rem/1 var(--display); letter-spacing: .02em; color: var(--strong); }
.cmp thead th em { display: inline-block; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-ink); font: 700 .6rem/1 var(--sans); letter-spacing: .16em; font-style: normal; }
.cmp tbody th { font-weight: 400; color: var(--text-2); }
.cmp td { color: var(--text); }
.cmp .cmp-best { background: var(--best-tint); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .yes { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--strong); }
.cmp .no { color: var(--muted); }
.pq-in, .ho-in, .faq-in { display: grid; gap: 24px; }
@media (min-width: 1000px) {
  .pq-in { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .ho-in { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
  .faq-in { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
}
.pq-in .sec-head, .ho-in .sec-head, .faq-in .sec-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.pq-in .sec-head h2, .ho-in .sec-head h2, .faq-in .sec-head h2 { margin-bottom: 16px; }
@media (min-width: 1000px) { .pq-in .sec-head, .ho-in .sec-head, .faq-in .sec-head { position: sticky; top: calc(var(--hd) + 30px); } }
.pq { display: grid; gap: 28px; padding: clamp(24px, 4vw, 42px); border-radius: 24px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); }
.pq fieldset { margin: 0; padding: 0; border: 0; }
.pq legend { margin-bottom: 14px; font: 400 1.05rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pq-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pq-opts label { position: relative; }
.pq-opts input { position: absolute; opacity: 0; }
.pq-opts span { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .92rem; color: var(--text-2); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.pq-opts span:hover { color: var(--strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--strong) 60%, transparent); }
.pq-opts input:checked + span { background: var(--btn-bg); color: var(--btn-ink); box-shadow: none; font-weight: 600; }
.pq-opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.pq-out { display: grid; gap: 8px; justify-items: start; padding-top: 24px; border-top: 1px solid var(--line); }
.pq-plan { margin: 0; font: 400 2.2rem/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pq-plan span { color: var(--accent); margin-left: 12px; }
.pq-why { margin: 0; color: var(--text-2); }
.pq-out .btn { margin-top: 12px; }
.ho-list { list-style: none; display: grid; margin: 0; padding: 0; }
.ho-list li { display: grid; grid-template-columns: 58px 1fr; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--hair); font-size: 1.02rem; color: var(--text-2); }
.ho-list li span { font: 400 1.15rem/1 var(--display); color: var(--accent); }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 20px 0; cursor: pointer; list-style: none; font: 500 1.08rem/1.4 var(--sans); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--strong) 0 0) center/14px 1px no-repeat, linear-gradient(var(--strong) 0 0) center/1px 14px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; color: var(--text-2); font-size: 1rem; max-width: 42em; }

/* ─── Studio page ─── */
.about-in { display: grid; gap: 44px; }
@media (min-width: 1000px) { .about-in { grid-template-columns: 1.1fr .9fr; gap: 84px; align-items: start; } }
.about-copy h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); margin-bottom: 20px; }
.about-copy p + p { margin-top: 16px; color: var(--text-2); max-width: 36em; }
.vals { list-style: none; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.vals li { padding: 24px 0; border-bottom: 1px solid var(--hair); }
.vals h3 { font-size: 1.15rem; letter-spacing: .1em; margin-bottom: 8px; }
.vals p { margin: 0; font-size: .96rem; color: var(--text-2); }
.proc { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
@media (min-width: 760px) { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .proc { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.proc li { padding: 28px 24px; border-radius: 20px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); }
.proc-w { display: block; margin-bottom: 18px; font: 600 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.proc h3 { font-size: 1.1rem; letter-spacing: .08em; margin-bottom: 10px; }
.proc p { margin: 0; font-size: .92rem; color: var(--text-2); }
.reviews { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 10vw, 150px); background: var(--deep); }
.rv-media { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.rv-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 25%, color-mix(in srgb, var(--bg) 50%, transparent) 72%, var(--bg) 100%); }
.rv-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.rv { position: relative; display: flex; flex-direction: column; margin: 0; padding: 32px 28px 26px; border-radius: 22px; background: color-mix(in srgb, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 0 0 1px var(--hair); }
.rv-q { position: absolute; top: 14px; right: 24px; font: 400 4rem/1 var(--display); color: color-mix(in srgb, var(--accent) 30%, transparent); }
.rv blockquote { margin: 0 0 26px; font-size: 1.12rem; line-height: 1.55; color: var(--text); }
.rv.is-placeholder blockquote { color: var(--text-2); }
.rv figcaption { display: grid; gap: 2px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.rv figcaption b { font-weight: 600; font-size: .95rem; }
.rv figcaption span { font-size: .84rem; color: var(--muted); }
.rv-tag { margin: 14px 0 0; font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.find-in { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .find-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 6vw, 100px); } }
.find-copy h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); margin-bottom: 22px; }
.st-list { display: grid; margin: 30px 0 32px; border-top: 1px solid var(--line); }
.st-list div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.st-list dt { font: 600 .68rem/2.1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.st-list dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.st-list a { text-decoration: none; }
.st-list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.st-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.area-list { list-style: none; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .area-list { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; } }
.area-list li { display: grid; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) { .area-list li { padding: 0 20px; border-bottom: 0; border-left: 1px solid var(--hair); } }
.area-list b { font: 400 1.3rem/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.area-list span { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* The illustrated map (also the fallback inside the interactive one) */
.map { margin: 0; }
.map svg { width: 100%; height: auto; }
.map .streets path { stroke: var(--map-road); stroke-width: 1.4; }
.map .streets .st-main { stroke: var(--map-road-2); stroke-width: 2.4; }
.map .coast { stroke: var(--map-coast); stroke-width: 1.6; }
.map .lm circle { fill: var(--text-2); }
.map .lm text, .map .scale text, .map .compass text { font: 500 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--map-text); }
.map .lm .lm-small { font-size: 8px; fill: var(--map-text); opacity: .85; }
.map .lm .lm-park { fill: rgba(170, 210, 190, .65); }
.map .sea { font: 400 20px/1 var(--display); letter-spacing: .1em; fill: var(--map-sea-text); }
.map .sea-sm { font-size: 13px; fill: var(--map-sea-text); opacity: .8; }
.map .pl-1 { font: 600 9px/1 var(--sans); letter-spacing: .2em; fill: var(--strong); }
.map .pl-2 { font: 500 8.5px/1 var(--sans); letter-spacing: .06em; fill: var(--text-2); }
.pin-ring { transform-origin: 0 0; animation: ring 2.6s var(--ease) infinite; }
.pin-glow { animation: glow 2.6s ease-in-out infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes glow { 50% { opacity: .55; } }

/* ─── Contact page ─── */
.contact-in { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1100px) { .contact-in { grid-template-columns: 1.35fr .65fr; gap: 64px; } }
.finder { max-width: 1100px; }
.finder-line { margin: 0 0 24px; font: 400 clamp(1.3rem, 2.3vw, 2rem)/1.75 var(--sans); font-weight: 300; color: var(--text); }
.pick { display: inline; }
.pick select, .pick input {
  appearance: none; -webkit-appearance: none; max-width: 100%; margin: 0 .14em; padding: 0 1.1em 2px .12em; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--strong); font: 600 1em/1.3 var(--sans); cursor: pointer; transition: border-color .25s, background-color .25s;
  field-sizing: content;
}
.pick select { background: var(--chev) no-repeat right .1em center / .5em; }
.pick select option { background: var(--card); color: var(--text); font: 400 1rem var(--sans); }
.pick-in input { min-width: 9em; padding-right: .2em; cursor: text; }
.pick-in input::placeholder { color: var(--muted); font-weight: 400; }
.pick select:hover, .pick select:focus-visible, .pick input:hover, .pick input:focus-visible { border-bottom-color: var(--strong); outline: none; background-color: color-mix(in srgb, var(--accent) 8%, transparent); }
.pick input[aria-invalid="true"] { border-bottom-color: var(--err); }
.field-err { margin: -6px 0 16px; font-size: .9rem; color: var(--err); }
.consent { display: flex; gap: 12px; align-items: flex-start; max-width: 46em; margin-bottom: 26px; font-size: .9rem; color: var(--text-2); cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--btn-bg); cursor: pointer; }
.consent.is-error span { color: var(--err); }
.finder-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.finder-act .fine { max-width: 28em; }
.form-note { margin: 22px 0 0; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: .95rem; color: var(--text); }
.ways { display: grid; gap: 12px; }
.way { display: grid; gap: 6px; padding: 22px 24px; border-radius: 20px; text-decoration: none; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.way:hover { box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.way-k { font: 600 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.way b { font: 500 1.12rem/1.35 var(--sans); color: var(--text); overflow-wrap: anywhere; }

/* ─── Footer ─── */
.ft { padding: 60px 0 36px; background: var(--deep); border-top: 1px solid var(--hair); }
.ft-in { display: grid; gap: 26px; }
.ft-line { margin: 12px 0 0; max-width: 30em; font-size: .92rem; color: var(--text-2); }
.ft-nav, .ft-contact { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.ft-nav a, .ft-contact a { min-height: 44px; display: inline-flex; align-items: center; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); text-decoration: none; }
.ft-contact a { text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }
.ft-nav a:hover, .ft-contact a:hover { color: var(--strong); }
.ft-small { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); font-size: .8rem; color: var(--muted); }
.ft-small a { color: var(--text-2); }
.ft-small .linkish { color: var(--text-2); text-decoration: underline; }
.lang-ft { display: inline-flex; min-height: 0; padding: 0; vertical-align: middle; }
@media (min-width: 1000px) { .ft-in { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; column-gap: 40px; } .ft-small { grid-column: 1 / -1; } .ft-contact { flex-direction: column; } }

/* Privacy dialog */
.privacy { max-width: min(580px, calc(100vw - 32px)); padding: 32px 30px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--card); color: var(--text); }
.privacy::backdrop { background: color-mix(in srgb, var(--deep) 75%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.privacy h2 { font-size: 1.4rem; margin-bottom: 18px; }
.privacy p { font-size: .95rem; color: var(--text-2); }
.privacy a { color: var(--accent); }

/* ─── Motion ─── */
.js .rise { opacity: 0; transform: translateY(22px); animation: rise 1.1s var(--slow) forwards; animation-delay: calc(.25s + var(--d, 0s)); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .up { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--slow), transform .9s var(--slow); transition-delay: var(--d, 0s); }
.js .up.is-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   The opening film: Cascais from the air (scroll-scrubbed)
   ═══════════════════════════════════════════════════════════════════════════ */
.mtn.hero { position: relative; display: block; background: var(--mtn-deep); color: var(--mtn-ink); }
.mtn-pin { position: relative; min-height: max(620px, 100svh); overflow: hidden; isolation: isolate; }
.mtn-media { position: absolute; inset: 0; z-index: -1; background: var(--mtn-deep) url(../media/cascais.webp) center / cover no-repeat; filter: var(--mtn-filter, none); }
.mtn-video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) and (orientation: portrait) { .mtn-media { background-image: url(../media/cascais-m.webp); } }
.mtn-beam { position: absolute; inset: 0; background: radial-gradient(28% 70% at 52% -8%, var(--mtn-beam), transparent 70%); mix-blend-mode: screen; pointer-events: none; }
.mtn-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--mtn-veil) 30%, transparent) 0%, transparent 16%, transparent 62%, color-mix(in srgb, var(--mtn-veil) 46%, transparent) 100%), var(--mtn-tint); pointer-events: none; }
/* the side shade sits behind the chapter text and only appears with it */
.mtn-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--mtn-veil) 62%, transparent) 0%, color-mix(in srgb, var(--mtn-veil) 36%, transparent) 42%, transparent 68%); opacity: var(--ch-o, 1); }
.mtn-live .mtn-shade::after { opacity: var(--ch-o, 0); }
.mtn-brand { position: absolute; left: 0; right: 0; top: 54%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; padding-inline: var(--gutter); text-align: center; }
.mtn-brand::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: max(1700px, 190%); height: 380%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--mtn-veil) 54%, transparent), color-mix(in srgb, var(--mtn-veil) 26%, transparent) 62%, transparent); pointer-events: none; }
.mtn-word { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); margin: 0; font: 400 clamp(1.8rem, 3.5vw, 3.6rem)/1 var(--display); letter-spacing: .32em; color: var(--mtn-ink); text-shadow: 0 2px 30px color-mix(in srgb, var(--mtn-veil) 50%, transparent), 0 1px 3px color-mix(in srgb, var(--mtn-veil) 40%, transparent); }
.mtn-word > span:last-child { margin-right: -.32em; }
/* "WEBBLOOM" with "STUDIO" set small and wide underneath */
.mtn-name { display: grid; justify-items: center; gap: .42em; }
.mtn-name-2 { font-size: .4em; letter-spacing: .85em; margin-right: -.85em; text-transform: uppercase; color: var(--mtn-ink-2); }
.mtn-mark { display: grid; color: var(--mtn-ink); }
.mtn-mark svg { width: clamp(34px, 3.4vw, 54px); height: auto; }
.mtn-div { width: 1px; height: 1.9em; background: color-mix(in srgb, var(--mtn-ink) 55%, transparent); }
.mtn-sub { margin: clamp(18px, 1.8vw, 26px) -.34em 0 0; font: 500 .72rem/1.4 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--mtn-ink-2); text-shadow: 0 1px 14px color-mix(in srgb, var(--mtn-veil) 80%, transparent), 0 0 3px color-mix(in srgb, var(--mtn-veil) 50%, transparent); }
.mtn-sub i { font-style: normal; margin: 0 .5em; }
.mtn-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom)); }
.mtn-cue { display: flex; align-items: center; gap: 14px; margin: 0; font: 500 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mtn-ink-2); }
.mtn-mouse { position: relative; width: 18px; height: 28px; border: 1px solid color-mix(in srgb, var(--mtn-ink) 60%, transparent); border-radius: 10px; }
.mtn-mouse i { position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: var(--mtn-ink); animation: mtnWheel 1.8s var(--ease) infinite; }
@keyframes mtnWheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(8px); } }
.mtn-ring { position: relative; display: grid; place-items: center; width: 56px; height: 56px; color: var(--mtn-ink); text-decoration: none; }
.mtn-ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mtn-ring circle { fill: none; stroke-width: 1; }
.mtn-ring-bg { stroke: color-mix(in srgb, var(--mtn-ink) 30%, transparent); }
.mtn-ring-fg { stroke: var(--mtn-ink); stroke-dasharray: 138.2; stroke-dashoffset: 138.2; }
.mtn-ring:hover .mtn-arrow { transform: translateY(2px); }
.mtn-arrow { transition: transform .3s var(--ease); }
.mtn-chs { position: relative; display: grid; gap: 1px; background: color-mix(in srgb, var(--mtn-ink) 12%, transparent); }
@media (min-width: 900px) { .mtn-chs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mtn-ch { display: grid; gap: 14px; align-content: start; padding: clamp(40px, 5vw, 64px) var(--gutter); background: var(--mtn-deep); }
.mtn-k { display: flex; align-items: center; gap: 14px; margin: 0; font: 500 .72rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mtn-ink-2); }
.mtn-k span { font: 400 .95rem/1 var(--display); letter-spacing: .1em; color: var(--mtn-ink); }
.mtn-k span::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 14px; vertical-align: middle; background: color-mix(in srgb, var(--mtn-ink) 40%, transparent); }
.mtn-ch h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.5rem); letter-spacing: .08em; color: var(--mtn-ink); }
.mtn-ch p { margin: 0; max-width: 34em; font-size: 1rem; color: var(--mtn-ink-2); }
.mtn-ch .link { justify-self: start; font-size: .86rem; }
.mtn-prices { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.mtn-prices span { display: grid; gap: 6px; font: 600 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.mtn-prices b { font: 400 2rem/1 var(--display); letter-spacing: .02em; color: var(--mtn-ink); }
/* Live layout: the section is tall, the stage is pinned and the film follows the scroll */
.mtn.hero.mtn-live { height: 420vh; }
.mtn-live .mtn-pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
.mtn-live .mtn-media { background-image: none; transform: scale(1.06); transform-origin: 48% 47%; will-change: transform; }
.mtn-live .mtn-brand { opacity: var(--b-o, 1); transform: translateY(calc(-50% + var(--b-y, 0px))) scale(var(--b-s, 1)); will-change: opacity, transform; }
.mtn-live .mtn-chs { position: absolute; inset: 0; display: block; background: none; pointer-events: none; }
.mtn-live .mtn-ch { position: absolute; left: 0; right: 0; top: 50%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); background: none; opacity: var(--c-o, 0); transform: translateY(calc(-50% + var(--c-y, 24px))); }
.mtn-live .mtn-ch > * { max-width: 580px; }
.mtn-live .mtn-ch.is-on { pointer-events: auto; }
.mtn-live .mtn-ch h2 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); text-shadow: 0 2px 30px color-mix(in srgb, var(--mtn-veil) 55%, transparent), 0 1px 3px color-mix(in srgb, var(--mtn-veil) 40%, transparent); }
.mtn-live .mtn-ch p { font-size: 1.05rem; text-shadow: 0 1px 18px color-mix(in srgb, var(--mtn-veil) 65%, transparent), 0 1px 2px color-mix(in srgb, var(--mtn-veil) 45%, transparent); }
@media (max-width: 760px) {
  .mtn-brand { top: 63%; }
  .mtn-word { letter-spacing: .2em; font-size: clamp(1.5rem, 7.4vw, 2.2rem); gap: 14px; }
  .mtn-word > span:last-child { margin-right: -.2em; }
  .mtn-name-2 { font-size: .44em; letter-spacing: .7em; margin-right: -.7em; }
  .mtn-sub { letter-spacing: .24em; font-size: .64rem; margin-right: -.24em; }
  .mtn-sub i { display: none; }
  .mtn-shade::after { display: none; }
  .mtn-sub span { display: block; }
  .mtn-live .mtn-ch { top: auto; bottom: 120px; transform: translateY(var(--c-y, 24px)); }
  .mtn-live .mtn-shade { background: linear-gradient(180deg, color-mix(in srgb, var(--mtn-veil) 30%, transparent) 0%, transparent 20%, transparent 42%, color-mix(in srgb, var(--mtn-veil) 45%, transparent) 66%, color-mix(in srgb, var(--mtn-veil) 82%, transparent) 100%), var(--mtn-tint); }
}
@media (max-width: 400px) {
  .mtn-live .mtn-ch h2 { font-size: 1.5rem; }
  .mtn-prices { gap: 8px 18px; }
  .mtn-prices b { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The interactive map
   ═══════════════════════════════════════════════════════════════════════════ */
.mapsec { padding-block: clamp(84px, 9vw, 130px); background: var(--mapsec-bg); }
.imap { position: relative; height: clamp(420px, 62vh, 640px); border-radius: 24px; overflow: hidden; background: var(--map-sea); box-shadow: 0 0 0 1px var(--line-2), 0 50px 100px -60px var(--shadow-c); isolation: isolate; }
.st-map .imap { height: clamp(380px, 52vh, 540px); }
.imap::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 95% at 50% 45%, transparent 55%, var(--map-vignette)); }
.imap-live { position: absolute; inset: 0; z-index: 0; background: var(--map-sea); }
.imap-live.leaflet-container { background: var(--map-sea); font: 400 12px/1.4 var(--sans); outline-offset: -3px; }
.imap-live[hidden] { display: none; }
/* OpenStreetMap tiles turned royal blue: land blue, roads lighter, water deeper */
.imap-live .leaflet-tile-pane { filter: var(--tile-filter); }
.imap-live .leaflet-control-attribution { background: var(--map-ui) !important; color: var(--muted) !important; font: 400 10px/1.4 var(--sans); }
.imap-live .leaflet-control-attribution a { color: var(--text-2) !important; }
.imap-fb { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--map-sea); cursor: grab; touch-action: none; }
.imap-fb.is-drag { cursor: grabbing; }
.imap-fb:not(.is-on) { touch-action: pan-y; cursor: default; }
.imap-pan { position: absolute; left: 0; top: 0; width: 900px; aspect-ratio: 600 / 420; transform-origin: 0 0; will-change: transform; }
.imap-pan.map svg { width: 100%; height: 100%; display: block; }
.imap-note { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--map-ui); font-size: .74rem; color: var(--text-2); }
@media (max-width: 600px) { .imap-note { top: 14px; bottom: auto; right: 72px; border-radius: 12px; font-size: .7rem; line-height: 1.45; } }
.imap-pin { position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.imap-pin i, .leaflet-marker-icon.imap-marker i { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--map-pin); box-shadow: 0 0 0 4px color-mix(in srgb, var(--map-pin) 30%, transparent), 0 6px 20px rgba(0, 0, 0, .35); }
.imap-pin i::after, .leaflet-marker-icon.imap-marker i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--map-pin); animation: imapPing 2.4s var(--ease) infinite; }
@keyframes imapPing { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.6); } }
.leaflet-marker-icon.imap-marker { display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.imap-go { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--map-ui); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background-color .25s; }
.imap-go:hover { background: var(--card); }
.imap-go::before { content: ""; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--map-ui), inset 0 0 0 10px currentColor; }
.imap.is-active .imap-go { display: none; }
.imap-ui { position: absolute; z-index: 3; right: 14px; top: 14px; display: grid; gap: 6px; }
.imap-ui button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--map-ui); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--hair); color: var(--text); font: 300 1.4rem/1 var(--sans); display: grid; place-items: center; cursor: pointer; }
.imap-ui button:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.imap-ui .imap-done { width: auto; padding: 0 16px; font: 700 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--btn-ink); background: var(--btn-bg); }
.imap-card { position: absolute; z-index: 4; left: 18px; top: 18px; width: min(330px, calc(100% - 36px)); padding: 24px 24px 22px; border-radius: 20px; background: color-mix(in srgb, var(--card) 96%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -20px var(--shadow-c); animation: imapCard .35s var(--slow); }
@keyframes imapCard { from { opacity: 0; transform: translateY(8px); } }
.imap-card h3 { margin: 4px 0 10px; font-size: 1.3rem; letter-spacing: .24em; }
.imap-card p { margin: 0 0 8px; font-size: .92rem; color: var(--text-2); }
.imap-k { font: 600 .66rem/1 var(--sans) !important; letter-spacing: .26em; text-transform: uppercase; color: var(--accent) !important; }
.imap-hours { font-size: .82rem !important; color: var(--muted) !important; }
.imap-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.imap-x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font-size: 1.5rem; cursor: pointer; }
.imap-x:hover { color: var(--strong); }
.st-map { position: relative; }
@media (max-width: 600px) { .imap-card { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .rise, .js .up { opacity: 1 !important; transform: none !important; }
  .pin-ring { display: none; }
  .mtn-mouse i, .imap-pin i::after, .leaflet-marker-icon.imap-marker i::after { animation: none; }
}
@media print { .hd, .progress, .rv-media, .phead-bg, .mtn-media video { display: none !important; } }

/* Narrow phones */
.plans > *, .pt-row > *, .every > *, .proc > *, .rv-grid > *, .wgrid > * { min-width: 0; }
.plan-price { flex-wrap: wrap; row-gap: 8px; }
.pick select, .pick input { max-width: min(100%, calc(100vw - 2 * var(--gutter) - 8px)); text-overflow: ellipsis; }
@media (max-width: 400px) { .plan { padding: 36px 22px 26px; } .plan-badge { left: 22px; } h1, h2 { overflow-wrap: anywhere; hyphens: auto; } }
.contact-in > *, .find-in > *, .flag > *, .about-in > *, .pq-in > *, .ho-in > *, .faq-in > * { min-width: 0; }