/* =========================================================
   ReWeb — Business Website
   Direction: bright, minimal tech-startup (Framer / Sierra / Squarespace
   feel) with a Synthesia-inspired palette that matches the ReWeb logo:
   deep ink navy, royal blue, soft periwinkle, a touch of pastel pink.
   Headings/text: Geist. Accent word: Instrument Serif italic.
   ========================================================= */

:root {
  /* Colours */
  --bg: #fbfcff;
  --surface: #ffffff;
  --ink: #090b22;
  --muted: #5d6378;
  --blue: #3e57da;
  --sky: #5cc8f5;
  --peri: #e8eeff;
  --peri-2: #c6d7fe;
  --pink: #ffd7f9;
  --green: #22a06b;
  --line: rgba(9, 11, 34, 0.08);
  --line-2: rgba(9, 11, 34, 0.14);
  --shadow: 0 1px 2px rgba(9, 11, 34, 0.04), 0 24px 60px -24px rgba(40, 60, 160, 0.22);

  /* Type */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  /* Spacing */
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 9vw, 128px);
  --width: 1160px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }

.wrap {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Lenis smooth scroll (recommended base styles) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Shared type ---------- */
em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  /* gradient taken from the logo: navy → blue → sky */
  background: linear-gradient(100deg, var(--blue) 10%, #4a8fe8 55%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em; /* stops the italic's last letter being clipped */
}
.h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.04em;
  max-width: 22ch;
}
.lead {
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--muted);
  max-width: 42ch;
}
.footnote {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.8;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 999px;
  font: 500 0.95rem/1 var(--font);
  border: 0;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s ease;
}
.btn--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(9, 11, 34, 0.5);
}
.btn--dark:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(9, 11, 34, 0.5); }
.btn--light {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn--light:hover { transform: translateY(-2px); }

/* ---------- Nav (floating glass pill) ---------- */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(980px, calc(100% - 2 * var(--gutter)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  /* brighter and more solid, so it stands out over the cover film and people know they're on the site */
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(9, 11, 34, 0.06), 0 14px 40px -12px rgba(40, 60, 160, 0.38), 0 0 0 6px rgba(255, 255, 255, 0.18);
  /* no backdrop blur: the bar is nearly solid, and blurring a moving full-screen film every frame is expensive */
  transition: box-shadow 0.4s ease, opacity 1.2s ease, transform 1.2s var(--ease);
}
.nav.is-scrolled { box-shadow: 0 1px 2px rgba(9, 11, 34, 0.06), 0 14px 40px -12px rgba(40, 60, 160, 0.38); }
.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.nav__logo img { height: 22px; width: auto; }
.nav__links { display: flex; gap: 28px; font-size: 0.9rem; color: var(--muted); }
.nav__links a { transition: color 0.2s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
}
/* language globe + small dropdown (no pop-up) */
.lang { position: relative; margin-left: auto; margin-right: -8px; }
.lang__btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: 500 0.82rem var(--font); letter-spacing: 0.03em; cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.lang__btn:hover, .lang.is-open .lang__btn { color: var(--ink); background: var(--peri); }
.lang__btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 170px; margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 40px -18px rgba(40, 60, 160, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.3s var(--ease), visibility 0.25s;
}
.lang.is-open .lang__list { opacity: 1; visibility: visible; transform: none; }
.lang__list button {
  width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left;
  font: 400 0.92rem var(--font); color: var(--ink); cursor: pointer;
}
.lang__list button:hover { background: var(--peri); }
.lang__list button[aria-current="true"] { color: var(--blue); font-weight: 500; }
.nav__links { margin: 0 auto; }
.nav__links + .lang { margin-left: 0; }

@media (max-width: 760px) {
  .nav__links { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 0 var(--gutter) clamp(72px, 10vw, 120px);
  text-align: center;
  overflow: hidden;
}
/* soft pastel light at the top + faint dot grid at the sides (Sierra-like) */
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 22% 18%, rgba(198, 215, 254, 0.9), transparent 70%),
    radial-gradient(36% 30% at 80% 22%, rgba(255, 215, 249, 0.75), transparent 70%),
    radial-gradient(40% 30% at 52% 60%, rgba(92, 200, 245, 0.18), transparent 70%);
}
.hero__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(9, 11, 34, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  opacity: 0.6;
}
.hero__text {
  position: relative;
  /* the first screen is only the headline: it fills the whole screen */
  min-height: min(100svh, 1000px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px 0 72px;
}
/* a thin line pulsing at the bottom that says "scroll" without words */
.hero__cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--blue);
}
/* a thicker track with a blue dot gliding down it, and a small arrow */
.hero__cue::before {
  content: "";
  width: 2px;
  height: 56px;
  border-radius: 2px;
  background: rgba(62, 87, 218, 0.2);
  grid-area: 1 / 1;
}
.hero__cue i {
  grid-area: 1 / 1;
  align-self: start;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(var(--blue), var(--sky));
  animation: cue 1.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
.hero__cue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: cueArrow 1.8s ease-in-out infinite; }
@keyframes cue {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  75%, 100% { transform: translateY(40px); opacity: 0; }
}
@keyframes cueArrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

.hero__title {
  margin: 22px auto 0;
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.05em;
  max-width: 13ch;
}
.hero__sub {
  margin: 22px auto 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--muted);
  max-width: 34ch;
}
.hero__actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__note {
  margin: 16px auto 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Stage: the site that builds itself ---------- */
.stage {
  position: relative;
  max-width: 1080px;
  margin: clamp(24px, 4vw, 48px) auto 0;
  perspective: 1600px;
}
.stage__inner { z-index: 1; }
.mesh.stage__mesh { inset: -8% -6% -14%; opacity: 0.75; }
.stage__inner {
  position: relative;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  /* --p goes 0 → 1 as you scroll; the window starts slightly tilted and settles flat */
  --p: 0;
  transform: rotateX(calc((1 - var(--p)) * 9deg)) scale(calc(0.95 + var(--p) * 0.05));
  transform-origin: 50% 0%;
  will-change: transform;
}

.win {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 8px;
  box-shadow: var(--shadow), 0 60px 120px -60px rgba(62, 87, 218, 0.35);
  opacity: 0;
  transform: perspective(1400px) translateY(30px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.s0 .win { opacity: 1; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.s4 .win { transition: opacity 1s var(--ease), transform 0.35s ease-out; }

.win__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 12px;
}
.win__dots { display: flex; gap: 6px; flex: 1; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.win__url {
  padding: 5px 14px;
  border-radius: 8px;
  background: var(--peri);
  font-size: 0.78rem;
  color: var(--muted);
}
.win__spacer { flex: 1; }

.win__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
  overflow: hidden;
  background: #f3f5fc;
  text-align: left;
}

/* skeleton wireframe */
.skel {
  position: absolute;
  inset: 0;
  padding: 4% 5%;
  display: flex;
  flex-direction: column;
  gap: 6%;
  transition: opacity 0.6s ease;
}
.skel b {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #e6eaf6 0%, #f4f6fc 50%, #e6eaf6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skel__nav { display: flex; justify-content: space-between; }
.skel__nav > b { width: 14%; height: 12px; }
.skel__nav span { display: flex; gap: 10px; }
.skel__nav span b { width: 44px; height: 12px; }
.skel__hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.skel__hero b:first-child { width: 46%; height: 34px; }
.skel__hero b:last-child { width: 30%; height: 14px; }
.skel__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skel__row b { height: 44px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.s1 .skel { opacity: 0; }

/* the built site */
.site { position: absolute; inset: 0; color: #fff; }
.site__photo {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 100% 0 round 13px);
  transition: clip-path 1.2s var(--ease);
}
.site__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.8s var(--ease);
}
.site__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 11, 34, 0.35) 0%, transparent 30%, transparent 50%, rgba(9, 11, 34, 0.55) 100%);
}
.site__photo.is-on { z-index: 2; clip-path: inset(0 0 0 0 round 13px); }
.site__photo.is-on img { transform: scale(1); }
.site__photo.was-on { z-index: 1; clip-path: inset(0 0 0 0 round 13px); }
.site__photo img[width="837"] { object-position: 50% 45%; }
.site__nav, .site__title { z-index: 3; }
.site__book { z-index: 5; }

/* text that changes with each demo fades out and back in */
[data-f] { transition: opacity 0.45s ease, transform 0.5s var(--ease); }
.is-swapping [data-f] { opacity: 0 !important; transform: translateY(6px) !important; }
.site__book b { font-weight: 500; }

/* each demo has its own type style, like a real client site would */
.site[data-look="villa"] .site__title { font-style: italic; }
.site[data-look="surf"] .site__title,
.site[data-look="surf"] .site__brand {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.04em;
}
.site[data-look="surf"] .site__brand { font-size: 1.2em; }

/* ---- surf demo: mirrors the real Areia front page ---- */
.areia {
  position: absolute; inset: 0; z-index: 4; color: #fffaf1;
  font-family: "DM Sans", var(--font);
  opacity: 0; transition: opacity 0.5s ease;
  pointer-events: none;
}
#stage[data-look="surf"] .areia { opacity: 1; }
#stage[data-look="surf"] .site__nav,
#stage[data-look="surf"] .site__title,
#stage[data-look="villa"] .site__nav,
#stage[data-look="villa"] .site__title { opacity: 0 !important; }
#stage[data-look="surf"] .site__photo.is-on::after {
  /* same shading as the demo: soft centre wash, fade to sand at the bottom */
  background:
    linear-gradient(180deg, transparent 70%, rgba(246, 240, 228, 0.55) 88%, #f6f0e4 100%),
    linear-gradient(180deg, rgba(18, 30, 30, 0.34) 0%, transparent 20%),
    radial-gradient(60% 45% at 50% 52%, rgba(18, 30, 30, 0.34), transparent 75%);
}
.areia__nav {
  position: absolute; top: 4.5%; left: 4%; right: 3%;
  display: flex; align-items: center; justify-content: space-between;
  font-size: clamp(0.42rem, 0.95vw, 0.72rem);
}
.areia__logo { display: flex; align-items: center; gap: 0.5em; font-family: "Bricolage Grotesque", var(--font); font-weight: 500; font-size: 1.25em; letter-spacing: -0.02em; }
.areia__logo svg { width: 2em; height: 0.55em; overflow: visible; }
.areia__logo path, .areia-phone path { fill: none; stroke: #e8894d; stroke-width: 8; stroke-linecap: round; }
.areia__links { display: flex; gap: 2.2em; }
.areia__links .on { box-shadow: 0 2px 0 #e8894d; padding-bottom: 2px; }
.areia__right { display: flex; align-items: center; gap: 1.2em; }
.areia__lang { opacity: 0.9; letter-spacing: 0.04em; }
.areia__book { padding: 0.75em 1.35em; border-radius: 999px; background: #e8894d; color: #123b3a; font-weight: 500; }
.areia__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.areia__title {
  font-family: "Bricolage Grotesque", var(--font); font-weight: 500;
  font-size: clamp(1.8rem, 5.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.032em;
  text-shadow: 0 2px 40px rgba(18, 30, 30, 0.3);
}
.areia__place { margin-top: 1.1em; font-size: clamp(0.45rem, 0.9vw, 0.72rem); letter-spacing: 0.12em; opacity: 0.92; }
.areia__cue { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; color: #123b3a; opacity: 0.85; }
.areia__cue > span { position: relative; width: 1px; height: clamp(16px, 2.6vw, 30px); overflow: hidden; background: rgba(18, 59, 58, 0.22); }
.areia__cue i { position: absolute; left: 0; top: -8px; width: 100%; height: 8px; background: #d9763a; animation: areiaDrip 1.8s cubic-bezier(0.55, 0, 0.45, 1) infinite; }
@keyframes areiaDrip { 0% { top: -8px; } 70%, 100% { top: 100%; } }
.areia__cue svg { width: clamp(9px, 1.2vw, 14px); height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .areia__links, .areia__lang { display: none; } }

/* phone in the surf state */
.areia-phone {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #fffaf1;
  opacity: 0; transition: opacity 0.5s ease;
}
.phone .areia-phone p { position: static; font-family: "Bricolage Grotesque", var(--font); left: auto; bottom: auto; z-index: auto; font-family: "Bricolage Grotesque", var(--font); font-weight: 500; font-size: 1.35rem; line-height: 1; letter-spacing: -0.03em; }
.phone .areia-phone small { position: static; margin-top: 8px; font-size: 0.5rem; letter-spacing: 0.12em; }
#stage[data-look="surf"] .areia-phone { opacity: 1; }
#stage[data-look="surf"] .phone__screen > p,
#stage[data-look="villa"] .phone__screen > p { opacity: 0; }
.phone__screen > p, .phone__screen > span { transition: opacity 0.4s ease; }

/* ---- booking bar + phone button, styled like each real demo ---- */
/* surf: Areia's cream card, rounded fields, orange pill button */
#stage[data-look="surf"] .site__book {
  border-radius: 18px; background: #fffaf1; color: #123b3a;
  font-family: "DM Sans", var(--font);
  box-shadow: 0 18px 40px -16px rgba(18, 30, 30, 0.45);
}
#stage[data-look="surf"] .site__book small { color: rgba(18, 59, 58, 0.62); }
#stage[data-look="surf"] .site__book > span + span:not(.site__book-btn) { border-color: rgba(18, 59, 58, 0.14); }
#stage[data-look="surf"] .site__book-btn { border-radius: 999px; background: #e8894d; color: #123b3a; padding-inline: 1.5em; }
#stage[data-look="surf"] .phone__screen > span { border-radius: 999px; background: #e8894d; color: #123b3a; font-family: "DM Sans", var(--font); }

/* villa: Casa's limestone panel, rounded corners (booking bars are always rounded), spaced capitals, shutter-blue button */
#stage[data-look="villa"] .site__book {
  border-radius: 14px; padding: 5px; gap: 0; background: rgba(255, 255, 255, 0.95); color: #1d2733;
  font-family: "Jost", var(--font); font-weight: 300;
  box-shadow: 0 18px 40px -16px rgba(20, 28, 38, 0.45);
}
#stage[data-look="villa"] .site__book > span { padding: 0.55em 1.4em; }
#stage[data-look="villa"] .site__book small { font-size: 0.66em; letter-spacing: 0.2em; text-transform: uppercase; color: #5b6470; }
#stage[data-look="villa"] .site__book b { font-weight: 400; }
#stage[data-look="villa"] .site__book > span + span:not(.site__book-btn) { border-color: rgba(29, 39, 51, 0.12); }
#stage[data-look="villa"] .site__book-btn { border-radius: 10px; background: #1f3b5c; color: #ffffff; font-weight: 400; font-size: 0.78em; letter-spacing: 0.2em; text-transform: uppercase; padding-inline: 1.8em; }
#stage[data-look="villa"] .phone__screen > span { border-radius: 8px; background: #1f3b5c; color: #ffffff; font-family: "Jost", var(--font); font-weight: 400; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---- villa demo: mirrors the real Casa Bellavista front page ---- */
.casa {
  position: absolute; inset: 0; z-index: 4; color: #ffffff;
  font-family: "Jost", var(--font); font-weight: 300;
  opacity: 0; transition: opacity 0.5s ease;
  pointer-events: none;
}
#stage[data-look="villa"] .casa { opacity: 1; }
#stage[data-look="villa"] .site__photo.is-on::after {
  /* same shading as the demo: soft centre wash, fade to limestone at the bottom */
  background:
    linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, 0.5) 88%, #ffffff 100%),
    linear-gradient(180deg, rgba(20, 28, 38, 0.38) 0%, transparent 22%),
    radial-gradient(60% 34% at 50% 50%, rgba(20, 28, 38, 0.42), transparent 78%);
}
.casa__nav {
  position: absolute; top: 4.5%; left: 4%; right: 3.5%;
  display: flex; align-items: center; justify-content: space-between;
  font-size: clamp(0.4rem, 0.85vw, 0.66rem);
}
.casa__brand { display: flex; align-items: center; gap: 0.8em; font-family: "Cormorant Garamond", var(--serif); font-size: 1.55em; letter-spacing: 0.04em; }
.casa__mono { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 1px solid currentColor; font-size: 0.7em; }
.casa__links { display: flex; gap: 2.8em; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; }
.casa__links .on { box-shadow: 0 1px 0 currentColor; padding-bottom: 0.4em; }
.casa__right { display: flex; align-items: center; gap: 1.4em; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; }
.casa__book { padding: 0.9em 1.5em; border: 1px solid currentColor; }
.casa__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding-bottom: 6%;
}
.casa__title {
  font-family: "Cormorant Garamond", var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(20, 28, 38, 0.45);
}
.casa__place { margin-top: 1.4em; font-size: clamp(0.42rem, 0.85vw, 0.66rem); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(20, 28, 38, 0.55); }
.casa__cue { position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; color: #1f3b5c; }
.casa__cue > span { position: relative; width: 1px; height: clamp(12px, 2vw, 22px); overflow: hidden; background: rgba(31, 59, 92, 0.2); }
.casa__cue i { position: absolute; left: 0; top: -8px; width: 100%; height: 8px; background: #1f3b5c; animation: areiaDrip 2.2s cubic-bezier(0.45, 0, 0.15, 1) infinite; }
.casa__cue svg { width: clamp(9px, 1.1vw, 13px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .casa__links, .casa__lang { display: none; } }

/* phone in the villa state */
.casa-phone {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #ffffff;
  padding: 0 10px 20%;
  opacity: 0; transition: opacity 0.5s ease;
}
.phone .casa-phone p { position: static; font-family: "Cormorant Garamond", var(--serif); font-size: 1.35rem; line-height: 1.02; text-shadow: 0 2px 16px rgba(20, 28, 38, 0.5); }
.phone .casa-phone small { position: static; margin-top: 8px; font-family: "Jost", var(--font); font-weight: 500; font-size: 0.42rem; letter-spacing: 0.24em; text-transform: uppercase; }
#stage[data-look="villa"] .casa-phone { opacity: 1; }

/* dots under the window showing which demo is on */
.stage__dots {
  position: absolute;
  left: 50%;
  bottom: -34px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
}
/* progress: the active pill fills up while that demo is showing, then the next one starts */
.stage__dots i { position: relative; overflow: hidden; width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); transition: width 0.5s var(--ease); }
.stage__dots i.is-on { width: 36px; }
.stage__dots b { position: absolute; inset: 0; width: 0; border-radius: inherit; background: var(--blue); }
.stage__dots i:not(.is-on) b { width: 0 !important; }
.s4 .stage__dots { opacity: 1; }

.site__nav, .site__title, .site__book {
  position: absolute;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.site__nav {
  top: 5%;
  left: 5%;
  right: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.6rem, 1.2vw, 0.85rem);
}
.site__brand { font-family: var(--serif); font-size: 1.5em; letter-spacing: 0.01em; }
.site__links { display: flex; gap: 1.6em; opacity: 0.9; }
.site__title {
  left: 5%;
  bottom: 28%;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(9, 11, 34, 0.3);
}
.site__book {
  left: 5%;
  bottom: 7%;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: clamp(0.58rem, 1.1vw, 0.82rem);
  box-shadow: 0 10px 30px -10px rgba(9, 11, 34, 0.35);
}
.site__book > span { padding: 0.5em 1.2em; display: flex; flex-direction: column; justify-content: center; }
.site__book small { font-size: 0.78em; color: var(--muted); }
.site__book > span + span:not(.site__book-btn) { border-left: 1px solid var(--line); }
/* every demo's booking bar is exactly the same size; only its styling changes */
.site__book { box-sizing: border-box; width: 30em; height: 4.6em; display: grid; grid-template-columns: 1.35fr 1fr 1.2fr; }
.site__book > span { white-space: nowrap; }
.site__book-btn { align-items: center; text-align: center; }
@media (max-width: 560px) {
  .site__book { width: 21em; grid-template-columns: 1.3fr 1fr; }
}
.site__book-btn {
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-weight: 500;
}
.s2 .site__nav, .s2 .site__title { opacity: 1; transform: none; }
.s2 .site__title { transition-delay: 0.12s; }
.s3 .site__book { opacity: 1; transform: none; }

/* floating cards */
.float, .phone {
  position: absolute;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.float {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: left;
}
.float--booking { left: -48px; top: 30%; }
.float__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(34, 160, 107, 0.15);
}
.float__title { font-size: 0.9rem; font-weight: 500; }
.float__meta { font-size: 0.78rem; color: var(--muted); }

.phone {
  right: -24px;
  bottom: -48px;
  width: clamp(120px, 15vw, 160px);
  aspect-ratio: 9 / 19;
  padding: 6px;
  border-radius: 28px;
  background: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(9, 11, 34, 0.45);
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  color: #fff;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(9, 11, 34, 0.6));
}
.phone__screen p {
  position: absolute;
  left: 12px;
  bottom: 44px;
  z-index: 1;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}
.phone__screen span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 7px 0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 500;
  text-align: center;
}

.s4 .float, .s4 .phone { opacity: 1; transform: none; }
.s4 .phone { transition-delay: 0.3s; }

@media (max-width: 900px) {
  .float--booking { left: -8px; top: auto; bottom: -34px; padding: 10px 14px; }
  .phone { display: none; }
}
@media (max-width: 560px) {
  .win { padding: 5px; border-radius: 14px; }
  .win__bar { padding: 3px 6px 8px; }
  .win__url { font-size: 0.66rem; }
  .win__dots i { width: 7px; height: 7px; }
  .site__links, .skel__row { display: none; }
  .site__book > span:nth-child(2) { display: none; }
  .float--booking { display: none; }
}

/* ---------- The math ---------- */
.math { padding: var(--section) 0 calc(var(--section) * 0.6); }
.math__row {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
}
.math__cell { padding: 28px 24px 0 0; }
.math__cell + .math__cell { padding-left: 24px; border-left: 1px solid var(--line); }
.math__num {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #8a90a6;
}
.math__cell--good .math__num {
  background: linear-gradient(100deg, var(--blue), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.math__label { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 700px) {
  .math__row { grid-template-columns: 1fr; }
  .math__cell, .math__cell + .math__cell { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Work: the three demo cards (back from the first version) ---------- */
.work { padding: calc(var(--section) * 0.6) 0 var(--section); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head__note { color: var(--muted); max-width: 30ch; }

.cases {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.case {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  padding: clamp(48px, 7vw, 88px) 0;
}
.case + .case { border-top: 1px solid var(--line); }
.case--reverse { grid-template-columns: 1fr 1.35fr; }
.case--reverse .case__visual { order: 2; }

.case__visual { position: relative; }

/* slowly drifting colour glow behind each window */
.mesh {
  position: absolute;
  inset: -10% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 30%, var(--m1, rgba(62, 87, 218, 0.55)), transparent 55%),
    radial-gradient(circle at 75% 65%, var(--m2, rgba(92, 200, 245, 0.5)), transparent 55%),
    radial-gradient(circle at 50% 100%, var(--m3, rgba(255, 180, 240, 0.45)), transparent 60%);
  filter: blur(48px);
  opacity: 0.55;
  animation: mesh-drift 16s ease-in-out infinite alternate;
  transition: opacity 0.8s ease;
}
.mesh--villa   { --m1: rgba(92, 200, 245, 0.55); --m2: rgba(255, 190, 235, 0.6); --m3: rgba(62, 87, 218, 0.35); }
.mesh--sailing { --m1: rgba(62, 87, 218, 0.6);  --m2: rgba(92, 200, 245, 0.5); --m3: rgba(198, 215, 254, 0.7); }
.mesh--forest  { --m1: rgba(92, 200, 245, 0.5); --m2: rgba(62, 87, 218, 0.45); --m3: rgba(255, 190, 235, 0.55); }
.mesh--surf    { --m1: rgba(255, 190, 235, 0.6); --m2: rgba(62, 87, 218, 0.45); --m3: rgba(92, 200, 245, 0.45); }
.case:hover .mesh { opacity: 0.9; }
@keyframes mesh-drift {
  0%   { transform: translate(-4%, -3%) rotate(0deg) scale(1); }
  50%  { transform: translate(3%, 4%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-2%, 5%) rotate(-6deg) scale(1.04); }
}

/* the browser window: tilts towards the mouse (script.js sets --rx / --ry) */
.frame {
  position: relative;
  z-index: 1;
  padding: 7px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -40px rgba(9, 11, 34, 0.35);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.35s ease-out, box-shadow 0.5s ease;
  will-change: transform;
}
.case:hover .frame { box-shadow: 0 50px 90px -40px rgba(40, 60, 160, 0.45); }
.frame__bar { display: flex; align-items: center; gap: 12px; padding: 4px 8px 10px; }
.frame__bar .win__url { font-size: 0.72rem; }

/* the demo site inside the window */
.mock {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
}
.mock img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.mock--villa img { object-position: 50% 45%; }
.case:hover .mock img { transform: scale(1.04); }
.mock::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 11, 34, 0.35), transparent 30%, transparent 50%, rgba(9, 11, 34, 0.55));
}
.mock__nav, .mock__title, .mock__btn { position: absolute; z-index: 1; }
.mock__nav {
  top: 6%;
  left: 6%;
  right: 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.55rem, 1vw, 0.78rem);
}
.mock__links { display: flex; gap: 1.4em; opacity: 0.9; }
.mock__brand { font-family: var(--serif); font-size: 1.4em; }
.mock__title {
  left: 6%;
  bottom: 24%;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2.8rem);
  line-height: 1;
  text-shadow: 0 2px 24px rgba(9, 11, 34, 0.3);
}
.mock__btn {
  left: 6%;
  bottom: 8%;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(0.55rem, 1vw, 0.78rem);
  font-weight: 500;
}
.mock--villa .mock__title { font-style: italic; }
.mock--sailing .mock__brand { font-family: var(--font); font-weight: 600; letter-spacing: 0.2em; font-size: 1em; }
.mock--sailing .mock__btn { border-radius: 6px; background: var(--ink); color: #fff; }
.mock--surf .mock__title, .mock--surf .mock__brand { font-family: var(--font); font-weight: 600; letter-spacing: -0.04em; }
.mock--surf .mock__brand { font-size: 1.15em; }
.mock--surf .mock__btn { background: #f2a36b; color: var(--ink); }

.case__info h3 {
  margin-top: 10px;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.case__index { font-size: 0.85rem; color: var(--blue); font-weight: 500; }
.case__info > p:not(.case__index) { margin-top: 12px; color: var(--muted); max-width: 30ch; }
.case__badge {
  display: inline-block;
  margin-top: 22px;
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 820px) {
  .case, .case--reverse { grid-template-columns: 1fr; gap: 28px; }
  .case--reverse .case__visual { order: 0; }
}

/* live demo: a real screenshot, and a link to open it */
.shot { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.case:hover .shot img { transform: scale(1.04); }
/* a full-page screenshot that scrolls through the site. It starts on the first screen the moment
   most of the window is on screen (script.js adds .is-playing), glides down to the footer, pauses, glides back */
.shot--scroll img { height: auto; object-fit: fill; transform-origin: 50% 0; }
.shot--scroll.is-playing img { animation: shotScroll 40s cubic-bezier(0.3, 0.05, 0.45, 1) infinite; }
/* --shift (set on each card) = image height minus one window height, e.g. 82.67% for a 1200×4329 image in a 16:10 window */
@keyframes shotScroll {
  0%, 2.5% { translate: 0 0; }
  40%, 46% { translate: 0 calc(var(--shift) * -1); }
  97%, 100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .shot--scroll.is-playing img { animation: none; } }
a.case__visual { display: block; cursor: pointer; }
.case__live {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 11px 20px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 0.9rem; font-weight: 500;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.case__live:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(9, 11, 34, 0.5); }
.case__live span { transition: transform 0.3s var(--ease); }
.case__live:hover span { transform: translateX(3px); }
/* coming soon: slightly quieter, no tilt */
.case--soon .frame { filter: saturate(0.75); opacity: 0.9; }
.case--soon .case__badge { background: var(--peri); border-color: transparent; color: var(--blue); }

/* ---------- What you get: bento ---------- */
.what { padding: var(--section) 0; background: linear-gradient(180deg, var(--bg), var(--peri) 60%, var(--bg)); }
.bento {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(250px, auto);
  gap: 16px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(9, 11, 34, 0.03);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tile--wide { grid-column: span 2; flex-direction: row; align-items: center; }
.tile--tall { grid-row: span 2; }
.tile h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }
.tile p { margin-top: 6px; color: var(--muted); font-size: 0.95rem; max-width: 30ch; }

/* mini calendar */
.mini-cal {
  flex-shrink: 0;
  width: min(300px, 100%);
  padding: 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
}
.mini-cal__head { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 10px; }
.mini-cal__arrows { color: var(--muted); letter-spacing: 0.3em; }
.mini-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; text-align: center; }
.mini-cal__grid span { color: var(--muted); font-size: 0.7rem; padding-bottom: 4px; }
.mini-cal__grid i { font-style: normal; padding: 6px 0; }
.mini-cal__grid i.on { background: var(--peri); }
.mini-cal__grid i.start, .mini-cal__grid i.end { background: var(--blue); color: #fff; }
.mini-cal__grid i.start { border-radius: 8px 0 0 8px; }
.mini-cal__grid i.end { border-radius: 0 8px 8px 0; }
.mini-cal__btn {
  display: block;
  margin-top: 12px;
  padding: 9px 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-weight: 500;
}

/* phone in the tall tile */
.tile--tall { background: linear-gradient(180deg, var(--surface) 40%, #f1f4ff); }
/* a whole phone, rounded at every corner, with a small camera island */
.tile__phone {
  position: relative;
  align-self: center;
  width: min(176px, 62%);
  aspect-ratio: 9 / 19.5;
  margin-bottom: 28px;
  padding: 6px;
  border-radius: 32px;
  background: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(9, 11, 34, 0.4);
}
.tile__phone::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 34%;
  height: 14px;
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(-50%);
  z-index: 1;
}
.tile__phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }

/* speed bar: fills when the bento scrolls into view */
.speed__bar { height: 10px; border-radius: 999px; background: var(--peri); overflow: hidden; }
.speed__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transition: width 1.6s var(--ease) 0.4s;
}
.bento.is-visible .speed__bar span { width: 72%; }
.speed__labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.8rem; color: var(--muted); }
.speed__mark { color: var(--blue); font-weight: 500; }

/* languages */
.langs { display: flex; flex-wrap: wrap; gap: 8px; }
.langs span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 0.82rem;
  color: var(--muted);
}
.langs span.on { background: var(--ink); border-color: var(--ink); color: #fff; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--wide { grid-column: span 2; }
  .tile--tall { grid-row: span 1; grid-column: span 2; flex-direction: row; align-items: center; padding-bottom: 28px; }
  .tile--tall .tile__phone { width: 150px; margin-bottom: 0; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .tile--wide, .tile--tall { grid-column: auto; flex-direction: column; align-items: stretch; }
  .tile--tall { align-items: center; }
  .tile--tall .tile__text { align-self: stretch; }
}

/* ---------- About ---------- */
.about { padding: calc(var(--section) * 0.5) 0 var(--section); }
.about__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.about__photo {
  aspect-ratio: 1;
  border-radius: 24px;
  border: 1px dashed var(--line-2);
  background: linear-gradient(135deg, var(--peri), #fdf2fc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { width: 160px; }
}

/* ---------- Contact: the colour shift ----------
   Like Squarespace: instead of a hard edge, the background fades from the
   bright page into deep navy (the dark blue of the logo) over --fade,
   and everything after it sits on navy. */
.contact {
  --fade: clamp(220px, 28vw, 380px);
  padding: var(--fade) 0 clamp(64px, 9vw, 120px);
  background: linear-gradient(180deg,
    var(--bg) 0,
    #e3e8fb calc(var(--fade) * 0.2),
    #6b78c4 calc(var(--fade) * 0.5),
    #1c2358 calc(var(--fade) * 0.78),
    var(--ink) var(--fade));
  color: #fff;
}
.contact__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 0% 0%, rgba(62, 87, 218, 0.45), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(255, 180, 240, 0.18), transparent 70%),
    radial-gradient(40% 50% at 70% 10%, rgba(92, 200, 245, 0.18), transparent 70%);
}
.contact__text, .form { position: relative; }
.contact__text { display: flex; flex-direction: column; }
.contact__ask { margin-top: auto; padding-top: 40px; }
.contact__ask p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }
.contact__ask .contact__email { margin-top: 8px; }
.contact em { background-image: linear-gradient(100deg, #8098f9 10%, var(--sky) 100%); }
.contact .lead { color: rgba(255, 255, 255, 0.7); }
.contact__email {
  display: inline-block;
  margin-top: 28px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.2s ease;
}
.contact__email:hover { border-color: #fff; }

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.form__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.form input, .form textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.form input, .form textarea {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 400 0.95rem var(--font);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: #8098f9;
  box-shadow: 0 0 0 4px rgba(128, 152, 249, 0.2);
}
.form .btn { align-self: flex-start; margin-top: 4px; }
.form { min-width: 0; }
.form [data-form-next] { gap: 8px; }
.form .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.form__status { min-height: 1.2em; font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); }
.form__head { display: flex; align-items: baseline; gap: 12px; }
.form__count { font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.form__title { font-weight: 500; color: #fff; }
.form__page { display: flex; flex-direction: column; gap: 14px; animation: formIn 0.6s var(--ease) both; }
.form__page[hidden] { display: none; }
@keyframes formIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form__hint { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.form__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.form__nav .btn { margin-top: 0; }
.form__back {
  padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font: 500 0.9rem var(--font); color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease;
}
.form__back:hover { color: #fff; }

/* call time picker: week strip, then times grouped by part of the day */
.slots__week { display: flex; align-items: center; justify-content: space-between; font-size: 0.92rem; color: #fff; }
.slots__arrow {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06);
  color: #fff; font: 400 1.2rem/1 var(--font); transition: border-color 0.2s ease, opacity 0.2s ease;
}
.slots__arrow:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.4); }
.slots__arrow:disabled { opacity: 0.25; cursor: default; }
.slots__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.slot-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #fff;
  font: 400 0.72rem var(--font); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.slot-day span { opacity: 0.65; text-transform: capitalize; }
.slot-day b { font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums; }
.slot-day:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.35); }
.slot-day[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.slot-day:disabled { opacity: 0.25; cursor: default; }
.slots__times { display: flex; flex-direction: column; gap: 12px; }
.slots__label { margin: 0 0 6px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.slot {
  padding: 9px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06);
  color: #fff; font: 400 0.88rem var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.slot:hover { border-color: rgba(255, 255, 255, 0.35); }
.slot[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .form__page { animation: none; } }
.form__status.is-ok { color: #9be7b4; }
.form__status.is-err { color: #ffb4b4; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { transform: translateY(-2px); }
@media (max-width: 800px) {
  .contact__card { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form__pair { grid-template-columns: 1fr; }
}

/* ---------- Footer (stays on navy) ---------- */
.footer { padding: 28px 0 40px; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__links a:hover { color: #fff; }
/* privacy line under the contact form */
.form__legal { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.form__legal a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 3px; }
.footer__brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; }
/* transparent logo; brightened so the navy part of the R stays visible on navy */
.footer__brand img { height: 20px; width: auto; filter: brightness(1.9) saturate(0.9); }

/* ---------- Legal pages (privacy.html, terms.html) ---------- */
.legal { padding: clamp(40px, 7vw, 88px) 0 var(--section); }
.legal__inner { max-width: 720px; }
.legal__back { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: clamp(36px, 6vw, 64px); }
.legal__back img { height: 22px; width: auto; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500; }
.legal__date { margin-top: 12px; color: var(--muted); font-size: 0.9rem; }
.legal h2 { margin: 44px 0 10px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.legal p, .legal li { color: #2b3048; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0; padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal a:not(.legal__back) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reveal on scroll (gentle fade + small rise) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion: show everything, move nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .stage__inner { transform: none; }
  .mesh { animation: none; }
}

/* ---------- Loading screen ---------- */
body.is-loading { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.7s ease, transform 0.9s var(--ease);
}
.loader.is-done { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.loader__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 30% 35%, rgba(198, 215, 254, 0.9), transparent 70%),
    radial-gradient(36% 30% at 70% 60%, rgba(255, 215, 249, 0.7), transparent 70%);
}
.loader__inner { position: relative; display: grid; justify-items: center; gap: 14px; }
.loader__logo { width: 88px; height: auto; opacity: 0; transform: translateY(8px) scale(0.96); animation: loaderIn 0.8s var(--ease) 0.1s forwards; }
.loader__name { margin: 0; font-weight: 600; font-size: 1.35rem; letter-spacing: -0.03em; opacity: 0; animation: loaderIn 0.8s var(--ease) 0.25s forwards; }
.loader__bar { width: 140px; height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(62, 87, 218, 0.12); overflow: hidden; opacity: 0; animation: loaderIn 0.6s ease 0.4s forwards; }
.loader__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--sky)); transition: width 0.4s ease; }
@keyframes loaderIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loader__logo, .loader__name, .loader__bar { animation: none; opacity: 1; transform: none; } }

/* =========================================================
   DEMO: scroll moments (test-reweb-scroll)
   ========================================================= */

/* ---------- Film moment: scrolling in opens the film to full screen (script.js "Film moment") ---------- */
.how--pin { padding: 0; position: relative; }
.how__track { position: relative; height: 220vh; } /* 100vh screen + 120vh of scroll that opens the film */
.how__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
/* soft brand glow behind the closed film */
.how__sticky::before {
  content: ""; position: absolute; inset: 20% 10% 0; pointer-events: none;
  background:
    radial-gradient(40% 45% at 35% 55%, rgba(198, 215, 254, 0.9), transparent 70%),
    radial-gradient(35% 40% at 70% 70%, rgba(255, 215, 249, 0.7), transparent 70%),
    radial-gradient(35% 35% at 55% 60%, rgba(92, 200, 245, 0.25), transparent 70%);
  filter: blur(30px);
  opacity: var(--glow, 1);
}

.how__title {
  position: absolute; z-index: 0; left: 0; right: 0;
  top: clamp(100px, 14vh, 150px);
  margin: 0 auto; padding: 0 var(--gutter);
  max-width: 22ch; text-align: center;
  will-change: opacity, filter;
}

/* the film fills the pinned screen; a clip (set from script.js) shows only the card-sized part */
.film {
  position: absolute; inset: 0; z-index: 1;
  background: #eef1fb;
  will-change: clip-path, transform;
}
.film__video {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* soft shadow under the card while it's still closed (a clip can't cast one itself) */
.film__shadow {
  position: absolute; z-index: 1; pointer-events: none;
  box-shadow: 0 2px 4px rgba(9, 11, 34, 0.04), 0 30px 60px -24px rgba(40, 60, 160, 0.35), 0 80px 140px -60px rgba(62, 87, 218, 0.45);
  will-change: transform, opacity;
}
/* darkens the bottom a touch so the steps panel reads on any frame */
.film__shade {
  position: absolute; inset: auto 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 11, 34, 0.28), transparent);
  opacity: 0;
  display: none; /* not needed now the panel sits on the film's light background */
}

/* ---------- The four steps panel over the open film ---------- */
/* sits in the film's empty bottom-right corner, styled like the film's own floating white cards */
.chapters {
  position: absolute; z-index: 2;
  right: max(16px, 7.8vw); bottom: clamp(16px, 3.5vh, 36px);
  width: max(340px, 37.3vw); /* lines up under the browser window in the film */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(10px, 1.4vw, 18px);
  padding: 14px 18px 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(9, 11, 34, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(9, 11, 34, 0.04), 0 18px 40px -18px rgba(40, 60, 160, 0.28);
  opacity: 0;
  will-change: opacity, filter;
}
.chapters li { position: static; }
.chapters button {
  all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  padding-top: 14px; width: 100%;
  font-size: 0.88rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
  opacity: 0.42; transition: opacity 0.6s ease;
}
.chapters button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.chapters li.is-now button, .chapters button:hover { opacity: 1; }
.chapters__n { font-size: 0.75rem; color: var(--blue); }
/* thin bar above each step, fills as you scroll through it */
.chapters__fill { display: block; order: -1; position: relative; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.chapters li { display: flex; flex-direction: column; }
.chapters__fill b { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--sky)); }
/* the active step's sentence sits in one shared line under the row and fades softly from blur */
.chapters p {
  position: absolute; left: 18px; right: 18px; top: 52px;
  color: var(--muted); font-size: 0.84rem; line-height: 1.4;
  opacity: 0; filter: blur(6px);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.chapters li.is-now p { opacity: 1; filter: none; transition: opacity 0.8s ease 0.25s, filter 1s ease 0.25s; }

/* phones: the film is full width, so the panel sits centred below it */
@media (max-width: 760px), (orientation: portrait) {
  .chapters { right: auto; left: 50%; translate: -50% 0; width: calc(100% - 2 * var(--gutter)); padding-bottom: 100px; }
  /* the active title can wrap to two lines in its narrow column, so the sentence sits lower */
  .chapters p { top: 80px; }
  .chapters__t { display: none; }
  .chapters li.is-now .chapters__t { display: inline; }
  .chapters li { grid-column: auto; }
}

/* ---------- Work cards: each window stands up as it scrolls in (script.js sets --srx / --ss / --my) ---------- */
.case__visual {
  transform: perspective(1400px) rotateX(var(--srx, 0deg)) scale(var(--ss, 1));
  transform-origin: 50% 100%;
}
.case .mesh { translate: 0 var(--my, 0px); }

/* ---------- Reduced motion: no pinning, the film is a normal card with controls ---------- */
@media (prefers-reduced-motion: reduce) {
  .how--pin { padding: var(--section) 0; }
  .how__track { height: auto; }
  .how__sticky { position: relative; height: auto; overflow: visible; padding: 0 var(--gutter); max-width: 1100px; margin: 0 auto; }
  .how__sticky::before, .film__shadow, .film__shade { display: none; }
  .how__title { position: static; padding: 0; }
  .film { position: relative; inset: auto; margin-top: 40px; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; clip-path: none !important; transform: none !important; }
  .film__video { left: 0; top: 0; transform: none !important; width: 100% !important; height: 100% !important; }
  .chapters { position: relative; left: auto; bottom: auto; translate: none; width: 100%; margin-top: 20px; opacity: 1 !important; padding-bottom: 18px; }
  .chapters p { position: static; opacity: 1; filter: none; white-space: normal; margin-top: 4px; }
  .chapters button { opacity: 1; }
  .chapters__t { display: inline !important; }
  .case__visual { transform: none; }
}

/* =========================================================
   Intro film on the front page (live since 2026-10-04)
   ========================================================= */
/* the film holds still (pinned) for most of a screen of scrolling while it closes into a card */
.intro { position: relative; height: 240vh; height: 240svh; background: var(--bg); } /* test: longer, so the cover holds for a while before it scrolls away */
.intro__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* the film never takes the mouse or finger, so scrolling over it always scrolls the page */
.intro__film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; z-index: 2; transform-origin: 50% 50%; will-change: clip-path, transform; clip-path: inset(50%); }
/* opening headline with a window inside the sentence (the film shows through it) */
.pre { position: absolute; z-index: 1; inset: 0; margin: 0; display: grid; place-content: center; text-align: center;
  font-size: min(8.4vw, 15vh); font-weight: 500; line-height: 1.06; letter-spacing: -0.05em; color: var(--ink);
  opacity: 0; filter: blur(12px); transition: opacity 1.4s ease, filter 1.4s ease; pointer-events: none; }
.pre.is-in { opacity: 1; filter: blur(0); }
.pre__line { display: block; white-space: nowrap; }
.pre__direct { display: inline-block; }
/* the full stop is a real little dot, so it can grow into the phone */
.pre__dot { display: inline-block; width: 0.13em; height: 0.13em; margin-left: 0.02em; border-radius: 50%; background: var(--sky); vertical-align: baseline; }
.pre__seed { position: absolute; z-index: 2; left: 0; top: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(170deg, #4a8fe8, var(--sky)); will-change: transform, width, height; }
/* the gap the phone settles into: it opens and pushes "direct." along (its width is set in script to fit the phone) */
.pre__gap { display: inline-block; width: 0; height: 0.86em; margin: 0; vertical-align: -0.1em;
  transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1), margin 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.pre__gap.is-open { width: var(--gap, 0.7em); margin: 0 0 0 0.12em; }
/* while the film plays the smooth-scroll is paused; it must not hide the page's overflow, or the film would come un-pinned */
html.lenis.lenis-stopped { overflow: visible; }
/* once the film has ended its lower edge fades out, so it scrolls away into the page without a hard line */
.intro__film.is-ended { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.intro__film { opacity: 0; }
/* the scroll cue appears once the opening has played */
.intro__cue { z-index: 3; opacity: 0; transition: opacity 1.4s ease; }
body.intro-done .intro__cue { opacity: 1; }
/* the prompt: a small pill of words above the line, so visitors know to scroll */
.intro__cue { bottom: 28px; gap: 12px; }
.intro__cue::before, .intro__cue i { grid-area: 2 / 1; }
.intro__cue svg { grid-row: 3; }
.intro__cue-text { grid-row: 1; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font: 500 0.78rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line);
  box-shadow: 0 10px 30px -14px rgba(40, 60, 160, 0.35); }
/* the menu waits until the film has finished (it fades in as "ReWeb" appears) */
body:not(.film-done) .nav { opacity: 0; transform: translate(-50%, -10px); pointer-events: none; }
/* after the film, the headline section follows straight on (not a full screen of its own) */
.intro + .hero .hero__text { min-height: 0; padding: 40px 0 72px; }
/* the headline after the film is about the free demo; it's set on two lines, so it may run wider */
.intro + .hero .hero__title { max-width: 16ch; font-size: clamp(2.4rem, 5.6vw, 4.8rem); } /* test: longer headline, a touch smaller */
.intro + .hero .hero__sub { max-width: 52ch; }
/* …and it starts rising into view while the end screen fades, instead of a full screen of empty glow first */
/* test: the headline section waits right behind the cover film, so it's revealed mid-screen as the cover fades */
.intro + .hero { margin-top: -85vh; margin-top: -85svh; z-index: 0; }
.intro__pin { z-index: 2; pointer-events: none; background: var(--bg); } /* hides the headline waiting behind it */
/* the headline section's pastel light fades in softly, so there's no hard edge */
.intro + .hero .hero__glow { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
@media (prefers-reduced-motion: reduce) {
  .intro { height: auto; }
  .intro__pin { position: relative; height: auto; padding: 120px var(--gutter) 0; display: grid; justify-items: center; gap: 28px; }
  .intro__film { position: relative; inset: auto; width: min(100%, 980px); aspect-ratio: 16 / 9; height: auto; border-radius: 18px; }
  .intro__cue, .pre, .pre__seed { display: none; }
  .intro__pin .intro__film { opacity: 1; }
}

/* ---------- Pricing (added 2026-10-06) ---------- */
.price { padding: var(--section) 0 calc(var(--section) * 0.4); }
.price__grid {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(9, 11, 34, 0.03);
}
/* both cards: white with a soft outline in the logo colours; on hover they lift a little and the outline brightens */
.pcard, .wcard {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(62, 87, 218, 0.4), rgba(92, 200, 245, 0.4), rgba(255, 215, 249, 0.55)) border-box;
  box-shadow: var(--shadow);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.pcard::after, .wcard::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, var(--blue), var(--sky), #f3a6e8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.6s var(--ease);
}
@media (hover: hover) {
  .pcard:hover, .wcard:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(9, 11, 34, 0.04), 0 34px 70px -30px rgba(40, 60, 160, 0.38); }
  .pcard:hover::after, .wcard:hover::after { opacity: 1; }
}
.pcard h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; color: var(--muted); }
.pcard__price { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; }
.pcard__price b { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.pcard__price span { color: var(--muted); font-size: 1rem; }
.pcard__desc { margin-top: 12px; color: var(--muted); max-width: 36ch; }
.pcard__list { margin: 22px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.pcard__list li { position: relative; padding-left: 28px; font-size: 0.97rem; }
.pcard__list li::before {
  content: ""; position: absolute; left: 0; top: 0.2em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--peri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%233e57da' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pcard__btn { width: 100%; }
.pcard__small { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.price__more { margin-top: 24px; padding: 18px 22px; border-radius: 18px; background: rgba(232, 238, 255, 0.5); border: 1px solid var(--line); }
.price__more p:first-child { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.95rem; }
.price__more p:first-child span { color: var(--muted); }
.price__more .footnote { margin-top: 8px; }
@media (max-width: 760px) {
  .price__grid { grid-template-columns: 1fr; }
}

/* ---------- What your own website does for you (2026-10-06) ---------- */
.why { padding: calc(var(--section) * 0.6) 0 var(--section); }
.why__grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wcard { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 30px); border-radius: 24px; }
.wcard h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.wcard p { color: var(--muted); font-size: 0.95rem; }
.wcard__n { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; color: var(--blue); }
.wcard__src { margin-top: auto; padding-top: 6px; font-size: 0.75rem; color: var(--muted); opacity: 0.7; }
a.wcard__src { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); }
a.wcard__src:hover { opacity: 1; color: var(--ink); }

/* the big number on each card */
.wcard__stat { display: grid; gap: 4px; margin: 6px 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wcard__stat b { font-size: clamp(2.2rem, 3.6vw, 2.9rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1;
  background: linear-gradient(100deg, var(--blue), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; padding-right: 0.04em; }
.wcard__stat span { font-size: 0.85rem; color: var(--muted); }

/* small pieces of UI at the top of each card */
.wcard__art { position: relative; height: 128px; margin-bottom: 8px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, #e8eeff, #f4f7ff 55%, #fdf3fc); display: grid; align-content: center; gap: 10px; padding: 16px; }
.art-search__bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.82rem; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(40, 60, 160, 0.4); }
.art-search__bar svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; }
.art-search__ai { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); font-size: 0.76rem; color: var(--muted); }
.art-search__ai em { grid-row: span 2; font-style: normal; color: var(--blue); }
.art-search__ai b { color: var(--ink); font-weight: 500; }
.art-search__ai small { color: var(--blue); }
.art-flow { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 8px 5px; }
.art-flow .chip { padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.72rem; white-space: nowrap; }
.art-flow .chip--site { border-color: rgba(62, 87, 218, 0.4); color: var(--blue); }
.art-flow .chip--done { background: var(--green); border-color: var(--green); color: #fff; }
.art-flow i { width: 8px; height: 1px; background: rgba(9, 11, 34, 0.25); }
.art-guest { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.art-guest { padding: 16px 18px; }
.art-guest__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 500; background: linear-gradient(135deg, var(--blue), var(--sky)); }
.art-guest__who { display: grid; font-size: 0.85rem; }
.art-guest__who small { color: var(--muted); font-size: 0.7rem; }
.art-guest__btn { padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.74rem; white-space: nowrap; }

/* hover: each little scene does one small, calm thing */
@media (hover: hover) {
  .art-search__ai, .art-flow .chip, .art-guest__btn { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), background 0.6s ease; }
  .wcard:hover .art-search__ai { transform: translateY(-3px); box-shadow: 0 12px 24px -16px rgba(40, 60, 160, 0.5); }
  .wcard:hover .art-flow .chip--done { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(34, 160, 107, 0.15); }
  .wcard:hover .art-guest__btn { background: var(--blue); }
}

/* card 01: the commission as bars */
.wcard--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.wcard__text { display: flex; flex-direction: column; gap: 10px; }
.wcard__text p { max-width: 40ch; }
.bars { display: grid; gap: 16px; }
.bar { display: grid; grid-template-columns: 11.5em 1fr 4.6em; align-items: center; gap: 14px; }
.bar__label { font-size: 0.88rem; color: var(--muted); }
.bar__track { height: 10px; border-radius: 99px; background: rgba(9, 11, 34, 0.06); overflow: hidden; }
.bar__track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #b8bdcc; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease); }
.bar b { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.03em; text-align: right; color: #8a90a6; white-space: nowrap; }
.bar--good .bar__track i { background: linear-gradient(90deg, var(--blue), var(--sky)); }
.bar--good b { background: linear-gradient(100deg, var(--blue), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bar--good .bar__label { color: var(--ink); }
/* the bars grow in once the card has appeared */
.why__grid.is-visible .bar__track i { transform: scaleX(1); }
.why__grid.is-visible .bar:nth-child(2) .bar__track i { transition-delay: 0.15s; }
.why__grid.is-visible .bar:nth-child(3) .bar__track i { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .bar__track i { transform: none; } }

@media (max-width: 900px) {
  .why__grid { grid-template-columns: 1fr; }
  .wcard--wide { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .bar { grid-template-columns: 1fr 4.2em; }
  .bar__label { grid-column: 1 / -1; }
}

/* ---------- Recent work heading (2026-10-09) ----------
   Calm, no movement: "Recent" comes slowly into focus, then "work." is drawn in
   from left to right with a soft edge, and the note fades in last. */
.section-head--draw[data-reveal] { opacity: 1; transform: none; }
.section-head--draw .h2 {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.4s var(--ease), filter 1.6s var(--ease);
}
.section-head--draw .h2 em {
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 1.8s var(--ease) 0.6s, mask-position 1.8s var(--ease) 0.6s;
}
.section-head--draw .section-head__note {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 1.4s;
}
.section-head--draw.is-visible .h2 { opacity: 1; filter: blur(0); }
.section-head--draw.is-visible .h2 em { -webkit-mask-position: 0 0; mask-position: 0 0; }
.section-head--draw.is-visible .section-head__note { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .section-head--draw .h2, .section-head--draw .section-head__note { opacity: 1; filter: none; }
  .section-head--draw .h2 em { -webkit-mask-image: none; mask-image: none; }
}

/* Line up the three small cards row by row (picture, big number, heading, text, source),
   so the dividers and headings sit at the same height even when a caption wraps. */
@supports (grid-template-rows: subgrid) {
  .wcard:not(.wcard--wide) { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
  .wcard:not(.wcard--wide) .wcard__src { align-self: end; }
}

/* Meltemi (sailing) slide: thin, high-contrast luxury display type (Italiana), headline set higher
   on the left with the location under it, like the Casa and Areia slides (2026-10-09) */
.site__place, .phone__place { display: none; }
.site[data-look="meltemi"] .site__title {
  top: 30%; bottom: auto; left: 9%;
  text-shadow: 0 2px 24px rgba(9, 11, 34, 0.55), 0 1px 3px rgba(9, 11, 34, 0.35);
  font-family: "Italiana", var(--serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.site[data-look="meltemi"] .site__place {
  display: block; position: absolute; z-index: 3; left: 9.3%;
  top: calc(30% + clamp(1.6rem, 5.4vw, 4.2rem) * 1.35);
  font-family: "Jost", var(--font); font-weight: 500;
  font-size: clamp(0.5rem, 0.95vw, 0.74rem); letter-spacing: 0.3em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 10px rgba(9, 11, 34, 0.7), 0 0 2px rgba(9, 11, 34, 0.5);
  opacity: 0; transition: opacity 0.8s var(--ease) 0.2s;
}
.s2 .site[data-look="meltemi"] .site__place { opacity: 1; }
/* soft dark wash behind the headline area so the white text stands out on the bright sea */
#stage[data-look="meltemi"] .site__photo.is-on::after {
  background:
    radial-gradient(55% 45% at 22% 40%, rgba(9, 11, 34, 0.42), transparent 75%),
    linear-gradient(180deg, rgba(9, 11, 34, 0.35) 0%, transparent 30%, transparent 50%, rgba(9, 11, 34, 0.55) 100%);
}
#stage[data-look="meltemi"] .phone__screen p { text-shadow: 0 2px 14px rgba(9, 11, 34, 0.6); }
.site[data-look="meltemi"] .site__brand {
  font-family: "Italiana", var(--serif);
  font-size: 1.15em;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
#stage[data-look="meltemi"] .phone__screen p {
  top: 38%; bottom: auto;
  font-family: "Italiana", var(--serif); font-size: 1.3rem;
}
#stage[data-look="meltemi"] .phone__place {
  display: block; position: absolute; z-index: 1; left: 12px; top: calc(38% + 1.75rem);
  font-family: "Jost", var(--font); font-weight: 500; font-size: 0.44rem; letter-spacing: 0.24em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(9, 11, 34, 0.7);
}
/* the copied Casa/Areia first screens only appear once the site has been "built" (step s2) */
#stage:not(.s2) .casa, #stage:not(.s2) .areia { opacity: 0 !important; }

/* ---- Treeline (ropes) and Grachtje (canal boats) slides, 2026-10-09 ----
   Their photos already show the site's menu and headline, so only the booking bar,
   the booking card and the phone are added on top, styled like each brand. */
#stage[data-look="treeline"] .site__nav, #stage[data-look="treeline"] .site__title, #stage[data-look="treeline"] .site__place,
#stage[data-look="grachtje"] .site__nav, #stage[data-look="grachtje"] .site__title, #stage[data-look="grachtje"] .site__place { opacity: 0 !important; }
#stage[data-look="treeline"] .site__photo.is-on::after,
#stage[data-look="grachtje"] .site__photo.is-on::after { background: linear-gradient(180deg, transparent 70%, rgba(9, 11, 34, 0.25)); }

/* treeline: white card, bold sans, amber-orange pill */
#stage[data-look="treeline"] .site__book {
  border-radius: 999px; padding: 5px 5px 5px 10px; background: rgba(255, 255, 255, 0.96); color: #1f2a1c;
  font-family: "Geist", var(--font); box-shadow: 0 18px 40px -16px rgba(20, 35, 20, 0.5);
}
#stage[data-look="treeline"] .site__book small { color: rgba(31, 42, 28, 0.6); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7em; }
#stage[data-look="treeline"] .site__book b { font-weight: 600; }
#stage[data-look="treeline"] .site__book > span + span:not(.site__book-btn) { border-color: rgba(31, 42, 28, 0.12); }
#stage[data-look="treeline"] .site__book-btn { border-radius: 999px; background: #e8893a; color: #1f2a1c; font-weight: 600; padding-inline: 1.6em; }
#stage[data-look="treeline"] .phone__screen > span { border-radius: 999px; background: #e8893a; color: #1f2a1c; font-family: "Geist", var(--font); font-weight: 600; }

/* grachtje: deep navy glass bar, light type, amber button with slightly rounded corners */
#stage[data-look="grachtje"] .site__book {
  border-radius: 14px; background: rgba(14, 22, 48, 0.82); color: #fff;
  font-family: "Geist", var(--font); font-weight: 300;
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(5, 10, 30, 0.6);
}
#stage[data-look="grachtje"] .site__book small { color: rgba(255, 255, 255, 0.6); }
#stage[data-look="grachtje"] .site__book b { font-weight: 400; }
#stage[data-look="grachtje"] .site__book > span + span:not(.site__book-btn) { border-color: rgba(255, 255, 255, 0.14); }
#stage[data-look="grachtje"] .site__book-btn { border-radius: 8px; background: #f2b45a; color: #0e1630; font-weight: 500; padding-inline: 1.6em; }
#stage[data-look="grachtje"] .phone__screen > span { border-radius: 6px; background: #f2b45a; color: #0e1630; font-family: "Geist", var(--font); font-weight: 500; }

/* phone: a part of the photo without the baked-in text, with the headline and place set in each brand's type */
/* treeline uses its own portrait photo (ladder up to a platform); grachtje zooms in on the boat so the menu in the photo stays out of view */
#stage[data-look="treeline"] .phone__screen img { object-position: 50% 30%; }
#stage[data-look="grachtje"] .phone__screen img { object-position: 84% 100%; transform: scale(1.25); transform-origin: 84% 100%; }
#stage[data-look="treeline"] .phone__screen > p,
#stage[data-look="grachtje"] .phone__screen > p { top: auto; bottom: 64px; right: 12px; text-shadow: 0 2px 14px rgba(9, 11, 34, 0.55); }
#stage[data-look="treeline"] .phone__screen > p {
  font-family: "Archivo", var(--font); font-stretch: 125%; font-weight: 800; font-size: 1.05rem;
  line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em;
}
#stage[data-look="grachtje"] .phone__screen > p { font-family: "Geist", var(--font); font-weight: 300; font-size: 1.1rem; line-height: 1.02; letter-spacing: -0.03em; }
#stage[data-look="treeline"] .phone__place,
#stage[data-look="grachtje"] .phone__place {
  display: block; position: absolute; z-index: 1; left: 12px; bottom: 46px;
  font-family: "Geist", var(--font); font-weight: 500; font-size: 0.44rem; color: #fff;
  text-shadow: 0 1px 8px rgba(9, 11, 34, 0.7);
}
#stage[data-look="treeline"] .phone__place { text-transform: uppercase; letter-spacing: 0.24em; }
#stage[data-look="grachtje"] .phone__place { letter-spacing: 0.04em; }
/* treeline's headline is centred on the desktop photo, so centre it on the phone too */
#stage[data-look="treeline"] .phone__screen > p,
#stage[data-look="treeline"] .phone__place { left: 12px; right: 12px; text-align: center; }
/* grachtje's headline is left-aligned on the desktop photo, so the phone matches */
#stage[data-look="grachtje"] .phone__screen > p,
#stage[data-look="grachtje"] .phone__place { left: 12px; right: 12px; text-align: left; }
/* meltemi phone: the headline wraps to two lines on the narrow screen, so the place sits under both lines */
#stage[data-look="meltemi"] .phone__screen > p { top: 34%; right: 12px; text-align: left; }
#stage[data-look="meltemi"] .phone__place { top: calc(34% + 2.95rem); }

/* Process section: the same scroll cue as the intro, shown only while the film is still small (script.js sets the opacity) */
.how__cue { z-index: 4; bottom: 26px; gap: 12px; opacity: 0; pointer-events: none; }
.how__cue::before, .how__cue i { grid-area: 2 / 1; }
.how__cue svg { grid-row: 3; }
.how__cue-text { grid-row: 1; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font: 500 0.78rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line);
  box-shadow: 0 10px 30px -14px rgba(40, 60, 160, 0.35); }

/* ---------- Skip (2026-10-21) ----------
   A small, quiet pill bottom-right while the opening film plays (fades in softly, fades out by itself when the film ends).
   Skipping hides the intro and shows the page from the top, menu and logo already in place. */
.intro__skip { position: fixed; right: max(16px, var(--gutter)); bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60;
  font: 500 0.78rem/1 var(--font); letter-spacing: 0.01em; color: var(--muted);
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 1.2s ease, color 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.intro__skip.is-on { opacity: 0.75; pointer-events: auto; }
.intro__skip.is-on:hover, .intro__skip.is-on:focus-visible { opacity: 1; color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, 0.85); outline: none; }
body.intro-skipped .intro { display: none; }
body.intro-skipped .intro + .hero { margin-top: 0; padding-top: clamp(104px, 14vh, 140px); }
@media (prefers-reduced-motion: reduce) { .intro__skip { display: none; } }