/* ============================================================================
   FLAMENCA STUDIO — agency portfolio. Rebrand + rebuild of "The Coast Standard".
   One committed colour world: warm Mediterranean paper + espresso ink, ONE
   accent family — flamenca rose (the Laguna Rosa flamingos, not kitsch pink).
   Type: Marcellus (display) v Karla (body, 18px floor), Jost small labels.
   Radius system: surfaces 2px, interactive controls fully round.
   Spacing base 8px; desktop section rhythm ≈136px (17×8).
   Type scale ×1.2 from 18px: 18 · 22 · 26 · 31 · 38 · 45 · 54 · 65 · 78 (+wordmark).
   Motion: 9 durations + 4 authored easings (see :root); GSAP scrub layers on top
   (wordmark tide, flamingo line-draw, lagoon parallax) — all fail-open.
   Contrast: every text pair computed ≥4.5:1 (worst small-text pair 6.79:1;
   rosa #C22E4F is graphics/large-type only, 4.83:1 on paper).
   ========================================================================== */

@font-face { font-family: "Marcellus"; src: url("fonts/marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Karla"; src: url("fonts/karla-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* colour world — grounds + inks + one rose accent family */
  --paper: #F5EFE5;
  --paper-2: #EBE2D2;
  --cream: #FCF9F3;
  --blush: #F6E3DE;          /* the lagoon tint — brand band only */
  --ink: #201A12;
  --ink-2: #574A38;
  --sand: #B8A88F;           /* muted text on ink */
  --rosa: #C22E4F;           /* accent — graphics & large type on paper (4.83:1) */
  --rosa-deep: #8E1F39;      /* accent — small text on paper (7.63:1) */
  --rosa-lt: #F0919F;        /* accent on ink (7.60:1) */
  --line: rgba(32, 26, 18, 0.14);
  --line-lt: rgba(245, 239, 229, 0.18);

  --serif: "Marcellus", Georgia, serif;
  --body: "Karla", system-ui, sans-serif;
  --mono-label: "Jost", system-ui, sans-serif;

  /* motion — durations */
  --t-ack: 0.12s;      /* control acknowledgement */
  --t-hover: 0.18s;    /* hover/link feedback */
  --t-state: 0.24s;    /* ordinary state change */
  --t-shift: 0.32s;    /* small layout shift */
  --t-layout: 0.48s;   /* layout / card transitions */
  --t-word: 0.56s;     /* headline language swap */
  --t-focal: 0.72s;    /* focal reveals */
  --t-hero: 0.9s;      /* single hero entrance */
  --t-media: 1.2s;     /* video slot cross-fade */
  /* motion — authored easings */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --e-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --e-pop: cubic-bezier(0.19, 1, 0.22, 1);   /* fast-settle expo — chat bubbles only */

  --r-surface: 2px;    /* every surface */
  --r-pill: 999px;     /* every control */

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --sect: clamp(4.5rem, 9.4vw, 8.5rem);   /* ≈136px at 1440 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;              /* accessibility floor — never smaller */
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.05; letter-spacing: 0.002em; }
p { margin: 0; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: var(--r-surface); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: -4rem; left: 1rem; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 0.8rem 1.4rem;
  border-radius: var(--r-pill); text-decoration: none; font-weight: 700;
  transition: top var(--t-state) var(--e-out);
}
.skip:focus { top: 1rem; }

/* ---------------- type helpers ---------------- */
.eyebrow {
  font-family: var(--mono-label); font-size: 18px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--rosa-deep);
}
.eyebrow-lt { color: var(--rosa-lt); }
.h-big { font-size: clamp(2.5rem, 4.55vw, 4.05rem); text-wrap: balance; }
.h-big em { font-style: normal; color: var(--rosa); }
.note { max-width: 34rem; color: var(--ink-2); }
.note-lt { max-width: 34rem; color: var(--sand); }

/* ---------------- controls ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 56px; padding: 0.4rem 2rem; border-radius: var(--r-pill);
  font: 700 18px/1.2 var(--body); text-decoration: none; border: 2px solid transparent;
  transition: transform var(--t-ack) var(--e-out), background-color var(--t-hover) var(--e-soft),
              color var(--t-hover) var(--e-soft), border-color var(--t-hover) var(--e-soft),
              box-shadow var(--t-hover) var(--e-soft);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(32, 26, 18, 0.18); }
.btn:active { transform: translateY(1px); box-shadow: none; transition-duration: var(--t-ack); }
.btn-solid { background: var(--rosa-deep); color: var(--cream); }
.btn-solid:hover { background: var(--rosa); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--cream); }
.btn-line-lt { border-color: var(--cream); color: var(--cream); }
.btn-line-lt:hover { background: var(--cream); color: var(--ink); }

.txt-link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;
  color: var(--rosa-deep); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px; min-height: 48px;
  transition: border-color var(--t-hover) var(--e-soft), gap var(--t-hover) var(--e-out);
}
.txt-link:hover { border-color: var(--rosa-deep); gap: 0.8rem; }

.tag {
  display: inline-block; font-family: var(--mono-label); font-size: 18px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--rosa-deep);
}
.tag-live {
  color: var(--ink); background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-surface); padding: 0.35rem 1rem; font-size: 18px;
}

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 100; width: min(1280px, calc(100% - 24px));
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.55rem 0.65rem 0.55rem 1.6rem;
  border-radius: var(--r-pill);
  background: rgba(245, 239, 229, 0.6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(32, 26, 18, 0.08);
  transition: background-color var(--t-state) var(--e-soft), box-shadow var(--t-state) var(--e-soft);
}
.nav.scrolled { background: rgba(245, 239, 229, 0.85); box-shadow: 0 10px 34px rgba(32, 26, 18, 0.12); }
.brand {
  font-family: var(--serif); font-size: 1.45rem; text-decoration: none; letter-spacing: 0.01em;
  margin-right: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.55rem;
}
.brand span { color: var(--rosa-deep); }
.brand-mark { width: 26px; height: 33px; color: var(--rosa); flex: none; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 1rem; text-decoration: none; font-weight: 700; font-size: 18px; color: var(--ink);
  border-radius: var(--r-pill);
  transition: color var(--t-hover) var(--e-soft), background-color var(--t-hover) var(--e-soft);
}
.nav-links a::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 6px; height: 2px;
  background: var(--rosa); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-state) var(--e-out);
}
.nav-links a:hover { background: rgba(32, 26, 18, 0.06); }
.nav-links a.is-current { color: var(--rosa-deep); }
.nav-links a.is-current::after { transform: scaleX(1); }
.nav-cta { min-height: 48px; padding: 0.3rem 1.5rem; }
.menu-btn {
  display: none; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0 1.3rem;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: transparent;
  font: 700 18px var(--body); color: var(--ink); cursor: pointer;
}
.menu-ico { width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-ico::before, .menu-ico::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  transition: transform var(--t-state) var(--e-out);
}
.menu-ico::before { top: -6px; } .menu-ico::after { top: 6px; }
[aria-expanded="true"] .menu-ico { background: transparent; }
[aria-expanded="true"] .menu-ico::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-ico::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile sheet — expands from the trigger corner (origin-based overlay) */
.sheet {
  position: fixed; inset: 74px 12px auto 12px; z-index: 99;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: 1.5rem; display: grid; gap: 1rem;
  transform-origin: top right;
  box-shadow: 0 30px 60px rgba(32, 26, 18, 0.25);
}
.sheet nav { display: grid; }
.sheet a:not(.btn) {
  padding: 0.8rem 0.5rem; min-height: 48px; display: flex; align-items: center;
  text-decoration: none; font-family: var(--serif); font-size: 1.5rem;
  border-bottom: 1px solid var(--line);
}
html.js .sheet { opacity: 0; transform: scale(0.92); pointer-events: none; visibility: hidden;
  transition: opacity var(--t-state) var(--e-soft), transform var(--t-state) var(--e-out), visibility var(--t-state); }
html.js .sheet.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

/* ---------------- hero ---------------- */
.hero-bgv {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0;
  transition: opacity var(--t-media) var(--e-soft);
}
.hero.has-video .hero-bgv { opacity: 1; }
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 46%, color-mix(in srgb, var(--paper) 55%, transparent) 74%, color-mix(in srgb, var(--paper) 38%, transparent) 100%);
  transition: opacity var(--t-media) var(--e-soft);
}
.hero.has-video .hero-veil { opacity: 1; }
.hero > .hero-copy, .hero > .deck { position: relative; z-index: 2; }
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(7rem, 14svh, 9rem) var(--gutter) 3.5rem;
  max-width: 1440px; margin: 0 auto;
}
.hero-copy h1 { font-size: clamp(2.7rem, 4.9vw, 4.4rem); margin-top: 1.4rem; }
.swap { display: block; position: relative; color: var(--rosa); }
.swap-line { display: block; }
html.js .swap-line { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0;
  transform: translateY(0.45em); clip-path: inset(0 0 100% 0);
  transition: opacity var(--t-word) var(--e-io), transform var(--t-word) var(--e-out),
              clip-path var(--t-word) var(--e-io); }
html.js .swap-line.is-on { position: relative; opacity: 1; transform: none; clip-path: inset(-0.2em 0 -0.25em 0); }
html.js .swap-line.is-off { opacity: 0; transform: translateY(-0.4em); clip-path: inset(100% 0 -0.25em 0); }
html:not(.js) .swap-line:not(.is-on) { display: none; }
.lede { margin-top: 1.6rem; max-width: 30rem; font-size: 22px; color: var(--ink-2); }
.cta-row { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-langs {
  margin-top: 3.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono-label); font-size: 18px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}
.hero-langs i { width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); }

/* layered photo deck — three trades, scroll-linked depth */
.deck { position: relative; height: min(72svh, 640px); min-height: 480px; }
.deck-card {
  position: absolute; overflow: hidden; border-radius: var(--r-surface);
  box-shadow: 0 30px 70px rgba(32, 26, 18, 0.28);
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; }
.deck-back  { right: 0; top: 0; width: 62%; aspect-ratio: 16/10; transform: rotate(2.2deg) translateY(calc(var(--sy, 0) * -18px)); }
.deck-mid   { left: 0; top: 18%; width: 52%; aspect-ratio: 4/3;  transform: rotate(-2.4deg) translateY(calc(var(--sy, 0) * -42px)); }
.deck-front { right: 8%; bottom: 4%; width: 46%; aspect-ratio: 3/4; transform: rotate(1.2deg) translateY(calc(var(--sy, 0) * -70px)); }
.deck-note {
  position: absolute; left: 0; bottom: 0; max-width: 38%; font-family: var(--mono-label);
  font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  line-height: 1.5;
}
.deck-note::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rosa); margin-right: 0.7rem; vertical-align: 2px;
}

/* video slots — the photo always stands; video fades over it when the file exists */
.slot-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--t-media) var(--e-soft); pointer-events: none; }
.has-video > .slot-video { opacity: 1; }

/* ---------------- brand band (wordmark object · flamingo moment) ---------------- */
.brandband {
  background: var(--blush); overflow: hidden;
  padding: var(--sect) var(--gutter) calc(var(--sect) * 0.9);
}
.wm-meta {
  max-width: 1280px; margin: 0 auto;
  font-family: var(--mono-label); font-size: 18px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--rosa-deep);
}
.wm-row { position: relative; max-width: 1280px; margin: 1.5rem auto 0; }
.wm {
  font-family: var(--serif); font-size: clamp(3.4rem, 12.2vw, 10.6rem);
  line-height: 0.95; letter-spacing: 0.015em; color: var(--ink);
  display: flex; justify-content: space-between; user-select: none;
}
.wm-l { display: inline-block; }
.wm-l:nth-child(7), .wm-l:nth-child(8) { color: var(--rosa); }
.wm-tag {
  position: relative; max-width: 1280px; margin: 2.2rem auto 0;
  font-family: var(--mono-label); font-size: 18px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2);
  border-top: 1px solid rgba(142, 31, 57, 0.25); padding-top: 1.2rem;
}
.wm-bird {
  /* the namesake — hangs in the empty right half of the tag row, under the rule */
  position: absolute; right: 0.4rem; top: 0.9rem;
  width: clamp(56px, 6vw, 84px); color: var(--rosa-deep);
}
.wm-story {
  max-width: 1280px; margin: 3.5rem auto 0;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.wm-story > p { font-size: 22px; color: var(--ink-2); max-width: 26rem; }
.wm-photo { position: relative; }
.wm-photo img { border-radius: var(--r-surface); box-shadow: 0 30px 70px rgba(142, 31, 57, 0.18); }
.wm-video {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1600 / 1067;
  object-fit: cover; border-radius: var(--r-surface); z-index: 1; opacity: 0;
  transition: opacity var(--t-media) var(--e-soft);
}
.brandband.has-video .wm-video { opacity: 1; }
.wm-photo figcaption {
  margin-top: 0.9rem; font-family: var(--mono-label); font-size: 18px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rosa-deep);
}

/* ---------------- story (rail + field, asymmetric) ---------------- */
.story {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
  padding: var(--sect) var(--gutter); max-width: 1440px; margin: 0 auto;
}
.portrait { max-width: 21rem; }
.portrait img { border-radius: var(--r-surface); }
.portrait figcaption {
  margin-top: 1rem; font-family: var(--mono-label); font-size: 18px;
  letter-spacing: 0.06em; color: var(--ink-2); line-height: 1.5;
}
.portrait strong { display: block; font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0; color: var(--ink); }
.story-field p { margin-top: 1.6rem; max-width: 36rem; font-size: 22px; color: var(--ink-2); }

/* ---------------- route (ink band, scroll-linked spine) ---------------- */
.route { position: relative; background: var(--ink); color: var(--paper); padding: var(--sect) var(--gutter); overflow: hidden; }
.route-bg { opacity: 0; }
.route.has-video .route-bg { opacity: 0.26; }
.route-inner { position: relative; z-index: 2; }
.route-head { max-width: 1280px; margin: 0 auto; }
.route-head .h-big { margin-top: 1rem; }
.route-head .h-big em { color: var(--rosa-lt); }
.route-body {
  /* narrower than the head on purpose — an editorial column bounded by the ink field */
  position: relative; max-width: 58rem; margin: 4.5rem auto 0;
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
}
.spine {
  grid-column: 1; position: relative; width: 2px; margin-left: 20px;
  background: var(--line-lt); border-radius: var(--r-pill);
}
.spine-fill {
  position: absolute; inset: 0; background: var(--rosa-lt);
  transform-origin: top; transform: scaleY(var(--route-p, 1));
  border-radius: var(--r-pill);
}
.stations { grid-column: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 4rem; }
.station {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.5rem; align-items: start; max-width: 52rem;
  transition: opacity var(--t-layout) var(--e-soft), transform var(--t-layout) var(--e-out);
}
.station::before {
  content: ""; position: absolute; left: -49px; top: 12px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--rosa-lt); border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px var(--rosa-lt);
  transition: background-color var(--t-state) var(--e-soft), box-shadow var(--t-state) var(--e-soft);
}
.st-no { font-family: var(--mono-label); font-weight: 300; font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 1; color: var(--rosa-lt); }
.st-era { font-family: var(--mono-label); font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); }
.station h3 { font-size: clamp(1.55rem, 2.1vw, 2rem); margin-top: 0.5rem; color: var(--paper); }
.st-txt > p:last-child { margin-top: 0.8rem; color: var(--sand); max-width: 38rem; }
html.js .station:not(.is-active) { opacity: 0.38; transform: translateX(-6px); }
html.js .station:not(.is-active)::before { background: var(--ink); box-shadow: 0 0 0 2px var(--line-lt); }

/* ---------------- offer ---------------- */
.offer { background: var(--paper-2); padding: var(--sect) var(--gutter); }
.offer > .h-big { max-width: 1280px; margin: 0 auto; }
.offer-grid {
  max-width: 1280px; margin: 3.5rem auto 0;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem;
  align-items: stretch;
}
.offer-main {
  background: var(--cream); border-radius: var(--r-surface); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.offer-photo { position: relative; min-height: 100%; }
.offer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-body { padding: clamp(1.8rem, 3vw, 3rem); }
.offer-side { background: var(--ink); color: var(--paper); border-radius: var(--r-surface); padding: clamp(1.8rem, 3vw, 3rem); }
.offer-grid h3 { font-size: clamp(1.7rem, 2.3vw, 2.2rem); margin-top: 1rem; }
.offer-body > p, .offer-side > p { margin-top: 1rem; color: var(--ink-2); }
.offer-side > p { color: var(--sand); }
.offer-side .tag { color: var(--rosa-lt); }
.offer-side .txt-link { color: var(--rosa-lt); }
.offer-side .txt-link:hover { border-color: var(--rosa-lt); }
.ticks { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.ticks li { position: relative; padding-left: 1.9rem; font-weight: 700; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 1em; height: 0.75em;
  background: var(--rosa);
  clip-path: polygon(8% 55%, 20% 42%, 38% 58%, 82% 8%, 96% 20%, 40% 84%);
}
.offer-side .ticks li::before { background: var(--rosa-lt); }

/* ---------------- assistant (signature module) ---------------- */
.assist {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
  padding: var(--sect) var(--gutter); max-width: 1440px; margin: 0 auto;
}
.assist-copy > p { margin-top: 1.4rem; max-width: 32rem; font-size: 22px; color: var(--ink-2); }
.assist-copy .h-big { margin-top: 1rem; }
.demo-note {
  font-size: 18px !important; color: var(--ink-2);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: 0.9rem 1.2rem; max-width: 30rem;
}
.lang-chips { margin-top: 2rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.chip {
  min-height: 52px; padding: 0.4rem 1.6rem; border-radius: var(--r-pill);
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font: 700 18px var(--body); cursor: pointer;
  transition: background-color var(--t-hover) var(--e-soft), color var(--t-hover) var(--e-soft),
              transform var(--t-ack) var(--e-out), opacity var(--t-hover) var(--e-soft);
}
.chip:hover { background: rgba(32, 26, 18, 0.08); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--rosa-deep); border-color: var(--rosa-deep); color: var(--cream); }
.chip[disabled] { opacity: 0.45; cursor: wait; }

.phone {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-surface);
  max-width: 27rem; width: 100%; justify-self: end;
  box-shadow: 0 34px 80px rgba(32, 26, 18, 0.16);
}
.phone-top {
  display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.phone-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rosa); flex: none; }
.phone-top strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.phone-top span { font-size: 18px; color: var(--ink-2); }
.thread { padding: 1.4rem; display: grid; gap: 0.9rem; min-height: 17.5rem; align-content: start; }
.msg {
  max-width: 85%; padding: 0.8rem 1.1rem; border-radius: var(--r-surface); line-height: 1.5;
}
.msg-in { background: var(--paper-2); justify-self: start; }
.msg-out { background: var(--rosa-deep); color: var(--cream); justify-self: end; }
html.js .msg { opacity: 0; transform: translateY(10px) scale(0.98); transform-origin: bottom; }
html.js .msg.is-in { opacity: 1; transform: none;
  transition: opacity var(--t-state) var(--e-soft), transform var(--t-state) var(--e-pop); }
.typing { display: inline-flex; gap: 5px; padding: 1rem 1.1rem; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2);
  animation: tick 1.2s var(--e-io) infinite;
}
.msg-out .typing i, .typing.msg-out i { background: var(--cream); }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tick { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------------- process (paper, hairline ledger) ---------------- */
.process { background: var(--cream); padding: var(--sect) var(--gutter); }
.proc-head {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2rem; align-items: end;
}
.proc-head .h-big { margin-top: 1rem; }
.steps {
  max-width: 1280px; margin: 3.5rem auto 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
}
.step { border-top: 2px solid var(--ink); padding-top: 1.4rem; }
.step-no {
  font-family: var(--mono-label); font-weight: 300; font-size: clamp(2.6rem, 3.6vw, 3.6rem);
  line-height: 1; color: var(--rosa);
}
.step h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); margin-top: 0.9rem; }
.step p { margin-top: 0.8rem; color: var(--ink-2); max-width: 24rem; }
.proc-cta {
  max-width: 1280px; margin: 3.5rem auto 0;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.proc-meta {
  font-family: var(--mono-label); font-size: 18px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}

/* ---------------- showcase ---------------- */
.show { background: var(--paper); padding: var(--sect) var(--gutter); }
.show-head { max-width: 1280px; margin: 0 auto 1rem; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: end; }
.case {
  max-width: 1280px; margin: 4rem auto 0;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem;
  align-items: stretch;
}
.case-main { position: relative; overflow: hidden; border-radius: var(--r-surface); }
.case-main img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  transition: transform var(--t-focal) var(--e-out); }
.case:hover .case-main img { transform: scale(1.03); }
.case-flip .case-main { order: 2; }
.case-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0; }
.case-body h3 { font-size: clamp(1.8rem, 2.5vw, 2.4rem); }
.case-body > p { color: var(--ink-2); max-width: 30rem; }
.case-body .tag-live { align-self: start; }
.case-img-link { display: block; border-radius: var(--r-surface); }
.case-open { align-self: flex-start; }
.case-body .ticks { margin-top: auto; }
.case-thumbs { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case-thumbs img { border-radius: var(--r-surface); aspect-ratio: 1/1; object-fit: cover; width: 100%; object-position: center 28%; }

/* ---------------- the standard (ink mosaic, 12 frames) ---------------- */
.std { background: var(--ink); color: var(--paper); padding: var(--sect) var(--gutter); }
.std-head {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2rem; align-items: end;
}
.std-head .h-big { margin-top: 1rem; }
.std-head .h-big em { color: var(--rosa-lt); }
.mosaic {
  max-width: 1280px; margin: 3.5rem auto 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "a a a b b b"
    "a a a c c d"
    "e e f c c d"
    "e e f g g g"
    "h h k k j j"
    "i i k k l l"
    "m m m n n n";
}
.mosaic { counter-reset: mo; }
.mo { position: relative; overflow: hidden; border-radius: var(--r-surface); counter-increment: mo;
  /* mosaic depth — GSAP scrubs --mz on .mosaic (app.js); each tile carries its own
     depth rate. Individual translate property: composes with the .rv reveal's
     transform and never touches the hover scale. No JS / reduced motion → 0. */
  translate: 0 calc(var(--mz, 0) * var(--mdepth, 0px)); }
.mo:nth-child(3n+1) { --mdepth: 12px; }
.mo:nth-child(3n+2) { --mdepth: -9px; }
.mo:nth-child(3n)   { --mdepth: 16px; }
.mo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-focal) var(--e-out); }
.mo:hover img { transform: scale(1.04); }
.mo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.1rem 0.9rem;
  font-family: var(--mono-label); font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); background: linear-gradient(transparent, rgba(32, 26, 18, 0.82));
  transition: transform var(--t-state) var(--e-out);
}
.mo figcaption::before { content: counter(mo, decimal-leading-zero) " · "; color: var(--rosa-lt); }
.mo:hover figcaption { transform: translateY(-3px); }
.mo-a { grid-area: a; min-height: 340px; }
.mo-b { grid-area: b; min-height: 200px; }
.mo-c { grid-area: c; }
.mo-d { grid-area: d; }
.mo-e { grid-area: e; }
.mo-f { grid-area: f; }
.mo-g { grid-area: g; min-height: 220px; }
.mo-h { grid-area: h; min-height: 260px; }
.mo-i { grid-area: i; }
.mo-j { grid-area: j; }
.mo-k { grid-area: k; }
.mo-l { grid-area: l; }
.mo-m { grid-area: m; min-height: 250px; }
.mo-n { grid-area: n; }

/* ---------------- why ---------------- */
.why { background: var(--paper-2); padding: var(--sect) var(--gutter); }
.why blockquote { max-width: 52rem; margin: 0 auto; text-align: center; }
.why p { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.25; }
.why em { font-style: normal; color: var(--rosa-deep); }
.why cite { display: block; margin-top: 1.8rem; font-style: normal; font-family: var(--mono-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }

/* ---------------- contact ---------------- */
.contact { position: relative; overflow: hidden; min-height: 34rem; display: grid; align-items: center; }
.contact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.contact-bgv { z-index: 1; }
.contact.has-video .contact-bgv { opacity: 1; }
.contact::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(32, 26, 18, 0.92) 30%, rgba(32, 26, 18, 0.55) 62%, rgba(32, 26, 18, 0.25));
}
.contact-inner { position: relative; z-index: 2; padding: 5rem var(--gutter); max-width: 1440px; margin: 0 auto; width: 100%; color: var(--cream); }
.contact .h-big em { color: var(--rosa-lt); }
.contact-inner > p { margin-top: 1.5rem; max-width: 28rem; font-size: 22px; color: var(--paper-2); }

/* ---------------- footer (wordmark bookend) ---------------- */
.foot {
  background: var(--ink); color: var(--sand); padding: 3rem 0 0;
  border-top: 1px solid var(--line-lt); overflow: hidden;
}
.foot-wm {
  font-family: var(--serif); font-size: clamp(3rem, 11.4vw, 9.8rem); line-height: 0.9;
  color: var(--paper); text-align: center; letter-spacing: 0.02em; user-select: none;
  opacity: 0.92; transform: translateY(0.08em);
}
.foot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line-lt); margin-top: 2.2rem;
  padding: 2rem 15rem 2rem var(--gutter);
}
.foot-brand { font-family: var(--serif); font-size: 1.3rem; color: var(--paper); }
.foot-brand span { color: var(--rosa-lt); }
.foot-dim { font-family: var(--mono-label); letter-spacing: 0.12em; text-transform: uppercase; font-size: 18px; }

/* ---------------- floating WhatsApp (branded, own palette) ---------------- */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 56px; padding: 0.4rem 1.6rem; border-radius: var(--r-pill);
  background: var(--rosa-deep); color: var(--cream); text-decoration: none; font-weight: 700;
  box-shadow: 0 16px 40px rgba(32, 26, 18, 0.35);
  transition: transform var(--t-state) var(--e-out), opacity var(--t-state) var(--e-soft),
              background-color var(--t-hover) var(--e-soft);
}
.fab:hover { background: var(--rosa); transform: translateY(-2px); }
.fab svg { width: 22px; height: 22px; }
.fab[hidden] { display: none; }

/* ---------------- language switcher (flag button + dropdown; JS-only UI) ----------------
   The control is progressive enhancement: without JS the page is the English
   original and the switcher simply isn't shown. Flags are tiny hand-authored
   inline SVGs (stripes/crosses) — no images, no emoji. */
html:not(.js) .lang, html:not(.js) .sheet-langs { display: none; }
.lang { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 48px; min-width: 48px; padding: 0 0.85rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; cursor: pointer; color: var(--ink);
  transition: background-color var(--t-hover) var(--e-soft), border-color var(--t-hover) var(--e-soft);
}
.lang-btn:hover { background: rgba(32, 26, 18, 0.06); border-color: rgba(32, 26, 18, 0.3); }
.lang-flag { display: inline-flex; }
.lang-flag svg { display: block; width: 27px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.lang-chev { width: 12px; height: 8px; color: var(--ink-2); transition: transform var(--t-state) var(--e-out); }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 13.5rem;
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(32, 26, 18, 0.22); padding: 0.4rem; z-index: 120;
  display: grid; gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-item {
  display: flex; align-items: center; gap: 0.8rem; width: 100%;
  min-height: 48px; padding: 0 0.9rem; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; text-align: left;
  font: 700 18px var(--body); color: var(--ink);
  transition: background-color var(--t-hover) var(--e-soft);
}
.lang-item:hover { background: rgba(32, 26, 18, 0.06); }
.lang-item svg { display: block; width: 27px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.lang-item[aria-checked="true"] { background: var(--paper-2); }
.lang-item[aria-checked="true"]::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rosa); flex: none;
}
/* the same control inside the mobile sheet — a plain row of flag buttons */
.sheet-langs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sheet-langs .lang-item {
  width: auto; min-width: 48px; justify-content: center; padding: 0 0.7rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
}
.sheet-langs .lang-item[aria-checked="true"] { border-color: var(--rosa-deep); background: var(--paper-2); }
.sheet-langs .lang-item[aria-checked="true"]::after { display: none; }

/* ---------------- hover micro-interactions (pointer-only enhancement layer) ----------------
   One family: warm light + a gentle lift in the rose family. Every effect is
   decoration on top of an already-usable control — touch devices and keyboards
   never need it. Individual translate/rotate/scale properties compose with the
   GSAP scrub layer's inline transforms (wordmark tide, deck depth) instead of
   fighting them. Transform / filter / colour only — no layout properties. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* 1 · warm light — showcase and mosaic photographs take a touch of sun */
  .case-main img, .mo img {
    transition: transform var(--t-focal) var(--e-out), filter var(--t-focal) var(--e-soft);
  }
  .case:hover .case-main img { filter: saturate(1.12) brightness(1.05); }
  .mo:hover img { filter: saturate(1.12) brightness(1.06); }
  .case-thumbs img { transition: scale var(--t-focal) var(--e-out), filter var(--t-focal) var(--e-soft); }
  .case-thumbs img:hover { scale: 1.05; filter: saturate(1.12) brightness(1.05); }

  /* 2 · wordmark tide-touch — the letters lift and blush as the pointer crosses */
  .wm-l { transition: translate var(--t-state) var(--e-out), color var(--t-state) var(--e-soft); }
  .wm-l:hover { translate: 0 -0.07em; color: var(--rosa); }

  /* 3 · the flamingo bows when greeted — nav mark and brand-band namesake */
  .brand-mark { transform-origin: 50% 88%; transition: rotate var(--t-state) var(--e-out), color var(--t-hover) var(--e-soft); }
  .brand:hover .brand-mark { rotate: -9deg; }
  .wm-bird { transform-origin: 50% 90%; transition: rotate var(--t-state) var(--e-out), color var(--t-state) var(--e-soft); }
  .wm-tag:hover .wm-bird { rotate: -8deg; color: var(--rosa); }

  /* 4 · hero deck fans — the three trades spread a few degrees apart */
  .deck-card { transition: rotate var(--t-layout) var(--e-out), scale var(--t-layout) var(--e-out); }
  .deck:hover .deck-back  { rotate: 1.6deg; }
  .deck:hover .deck-mid   { rotate: -1.8deg; }
  .deck:hover .deck-front { rotate: 1.2deg; scale: 1.02; }

  /* 5 · process ledger — the step's rule and number warm to rose */
  .step { transition: border-color var(--t-state) var(--e-soft); }
  .step-no { display: inline-block; transition: translate var(--t-state) var(--e-out), color var(--t-state) var(--e-soft); }
  .step:hover { border-color: var(--rosa); }
  .step:hover .step-no { translate: 0 -4px; color: var(--rosa-deep); }

  /* 6 · route stations — hovering a dimmed era previews it at full strength */
  html.js .station:not(.is-active):hover { opacity: 1; transform: none; }
  html.js .station:not(.is-active):hover::before { background: var(--rosa-lt); box-shadow: 0 0 0 2px var(--rosa-lt); }

  /* 7 · language chips — the coming choice tilts forward */
  .chip:not([aria-pressed="true"]):hover { translate: 0 -2px; }
  .chip { transition: background-color var(--t-hover) var(--e-soft), color var(--t-hover) var(--e-soft),
              transform var(--t-ack) var(--e-out), translate var(--t-hover) var(--e-out),
              opacity var(--t-hover) var(--e-soft); }

  /* 8 · showcase depth — the linked demo card turns a whisper in 3D and lifts,
     signalling "this opens". Individual rotate/translate compose with the warm-
     hover filter and the existing inner-image scale; transform-family only. */
  .case { perspective: 1100px; }
  .case-main { transition: rotate var(--t-layout) var(--e-out), translate var(--t-layout) var(--e-out); }
  .case:hover .case-main { rotate: y 1.4deg; translate: 0 -4px; }
  .case-flip:hover .case-main { rotate: y -1.4deg; }
}

/* ---------------- reveals (secondary, gated on .js; base state is visible) ---------------- */
html.js .rv { opacity: 0; transform: translateY(22px); }
html.js .rv.in { opacity: 1; transform: none;
  transition: opacity var(--t-focal) var(--e-soft), transform var(--t-focal) var(--e-out); }
html.js .rv.d1.in { transition-delay: 0.08s; }
html.js .rv.d2.in { transition-delay: 0.16s; }
html.js .rv.d3.in { transition-delay: 0.24s; }
html.js .rv.d4.in { transition-delay: 0.32s; }

/* ============================ 1024px ============================ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding-top: 7.5rem; }
  .deck { height: 460px; min-height: 0; max-width: 640px; }
  .story { grid-template-columns: 1fr; }
  .portrait { max-width: 17rem; }
  .assist { grid-template-columns: 1fr; }
  .phone { justify-self: start; }
  .show-head, .proc-head { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; }
  .offer-main { grid-template-columns: 1fr; }
  .offer-photo { aspect-ratio: 16/9; }
  .offer-photo img { position: static; }
  .case { grid-template-columns: 1fr; }
  .case-flip .case-main { order: 0; }
  .steps { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; }
  .wm-story { grid-template-columns: 1fr; }
  .wm-story > p { max-width: 34rem; }
}

/* ============================ 768px — mobile recomposition ============================ */
@media (max-width: 768px) {
  :root { --sect: 4rem; }
  .nav { top: 10px; padding: 0.45rem 0.55rem 0.45rem 1rem; gap: 0.55rem; }
  .nav-links, .nav-cta { display: none; }         /* menu + sheet take over */
  .menu-btn { display: inline-flex; padding: 0 1rem; }
  .brand { font-size: 1.22rem; gap: 0.45rem; }
  .brand-mark { width: 20px; height: 26px; }
  /* the nav flag button slims down; the sheet carries the full labelled list */
  .lang-btn { padding: 0 0.6rem; gap: 0.3rem; }
  .lang-chev { display: none; }

  /* hero recomposes: copy leads, deck becomes a compact overlapping strip */
  .hero { min-height: 0; padding-top: 6.5rem; gap: 3rem; }
  .hero-copy h1 { font-size: clamp(2.35rem, 9.5vw, 2.9rem); }
  .lede { font-size: 20px; }
  .deck { height: 300px; }
  .deck-back { width: 58%; top: 0; right: 0; }
  .deck-mid { width: 48%; top: 26%; }
  .deck-front { width: 40%; bottom: 10%; right: 4%; }
  .deck-note { display: none; }                    /* strip is decoration on mobile */

  /* brand band recomposes: shorter meta, photo leads the story */
  .brandband { padding-bottom: 4.5rem; }
  .wm { letter-spacing: 0.01em; }
  .wm-geo { display: none; }
  .wm-bird { position: static; display: block; margin: 0.6rem 0 0; width: 52px; }
  .wm-tag { letter-spacing: 0.2em; margin-top: 1.6rem; }
  .wm-story { display: flex; flex-direction: column-reverse; gap: 1.5rem; margin-top: 2.5rem; }

  /* the WhatsApp offer leads on a phone — order swap, not just stacking */
  .offer-grid { display: flex; flex-direction: column; }
  .offer-side { order: -1; }

  .route-body { grid-template-columns: 28px minmax(0, 1fr); }
  .spine { margin-left: 6px; }
  .station { grid-template-columns: 1fr; gap: 0.6rem; }
  .station::before { left: -27px; }
  .st-no { font-size: 1.6rem; }
  .stations { gap: 3rem; }

  .case-thumbs { grid-template-columns: 1fr 1fr; }
  /* faces never sit under a caption: face-carrying tiles go full width */
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a a" "b b" "c c" "d f" "e e" "g g" "h h" "i i" "j k" "l l" "m m" "n n";
  }
  .mo { min-height: 200px; }
  .contact::after { background: linear-gradient(180deg, rgba(32,26,18,0.74), rgba(32,26,18,0.94) 55%); }
  .contact-inner { padding: 4rem var(--gutter); }
  .why p { font-size: 1.6rem; }
  .proc-cta { flex-direction: column; align-items: flex-start; }
  .foot-row { justify-content: center; text-align: center; padding: 1.6rem var(--gutter) 6rem; }
  .std-head { grid-template-columns: 1fr; align-items: start; }
}

/* ============================ reduced motion — everything settles ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv, html.js .rv.in { opacity: 1; transform: none; transition: none; }
  html.js .swap-line { transition: none; }
  html.js .station, html.js .station:not(.is-active) { opacity: 1; transform: none; transition: none; }
  html.js .station:not(.is-active)::before { background: var(--rosa-lt); box-shadow: 0 0 0 2px var(--rosa-lt); }
  .spine-fill { transform: none; }
  .deck-back, .deck-mid, .deck-front { transform: none; }
  html.js .msg { opacity: 1; transform: none; transition: none; }
  .typing i { animation: none; }
  .btn, .chip, .fab, .case-main img, .mo img, .slot-video { transition: none; }
  .case:hover .case-main img, .mo:hover img { transform: none; }
}