/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4
 * genre: editorial-warm · macrostructure: Video-first home (explorers → businesses → download) / Long Document (about) / Letter (contact) · design-system: design.md
 * theme: custom (vibe: "Portugal in full sun: sunflower, river-navy, terracotta") · sun #F8D336 · navy #14485B · terracotta #DC834E · Poppins 600/700 + Outfit
 * enrichment: real 9:16 clips cut from Starget footage, one media treatment (18px radius, grain, warmth) · nav: N6 masthead · footer: Ft1
 * motion: GSAP (ScrollTrigger · SplitText · DrawSVG) in js/motion.js, gsap.matchMedia, reduced-motion = fades only
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-md); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  min-width: 0;
}
h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.label {
  font: 600 var(--text-xs)/1.3 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.shell { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
mark, .mark {
  color: inherit;
  background-image: linear-gradient(var(--color-accent-band) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 0.36em;
  background-position: 0 88%;
  background-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── links + buttons ── */
.link {
  font-weight: 500; text-decoration: none; white-space: nowrap;
  background-image: linear-gradient(var(--color-accent-band) 0 0);
  background-repeat: no-repeat; background-size: 100% 0.32em; background-position: 0 90%;
  transition: background-size var(--dur-fast) var(--ease-out);
}
.link:hover, .link:focus-visible { background-size: 100% 0.9em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0.75rem 1.5rem;
  border: 0; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 600 var(--text-md)/1 var(--font-body);
  background: var(--color-navy); color: var(--color-on-navy);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { box-shadow: inset 0 -4px 0 var(--color-sun); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-pill); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow, .link:hover .btn__arrow { transform: translateX(3px); }
.stores { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.stores a { display: block; border-radius: 8px; transition: transform var(--dur-fast) var(--ease-out); }
.stores a:hover { transform: translateY(-2px); }
.stores img { height: 46px; width: auto; }
.round {
  width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer;
  font: 600 var(--text-lg)/1 var(--font-body); color: var(--color-navy); background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-rule-strong);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.round:hover { background: var(--color-sun); box-shadow: inset 0 0 0 1.5px var(--color-navy); }
.round:active { transform: translateY(1px); }
.round[disabled] { opacity: 0.4; cursor: default; background: var(--color-paper); }

/* tags + chips: always solid fills, so text over video passes AA */
.tag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill);
  font: 600 var(--text-xs)/1.2 var(--font-body); letter-spacing: 0.02em; white-space: nowrap;
  background: var(--color-scrim); color: var(--color-on-navy);
}
.tag--sun { background: var(--color-sun); color: var(--color-navy); }

/* ── masthead (N6) ── */
.masthead { background: var(--color-sun); border-bottom: 1px solid var(--color-rule-strong); }
.masthead__issue {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-rule);
}
.masthead .label { color: var(--color-navy); }
.masthead__brand { display: flex; justify-content: center; padding-block: var(--space-md) var(--space-sm); }
/* the logo: traced from the official artwork (src/partials/logo*.svg), never redrawn */
.brand { display: inline-flex; height: clamp(40px, 5vw, 56px); border-radius: 4px; }
.brand .logo { height: 100%; width: auto; overflow: visible; }
.logo__fill { fill: var(--color-sun); }
.logo__ink { fill: var(--color-navy); }
.masthead__nav {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md);
  padding-bottom: var(--space-sm);
}
.masthead__nav a { font-weight: 500; text-decoration: none; padding: 0.35rem 0.1rem; white-space: nowrap; }
.masthead__nav a:hover, .masthead__nav a[aria-current="page"] {
  background-image: linear-gradient(var(--color-navy) 0 0); background-repeat: no-repeat;
  background-size: 100% 2px; background-position: 0 92%;
}
@media (max-width: 40rem) {
  .masthead__tagline { display: none; }
  .masthead__nav { gap: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); }
}

/* ── one media treatment: 9:16, 18px radius, a little grain, a little warmth ── */
.clip { position: relative; margin: 0; display: grid; gap: var(--space-xs); }
.clip .media {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-media);
  background: var(--color-media-bg);
}
.clip::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 9 / 16; border-radius: var(--radius-media); pointer-events: none;
  background:
    linear-gradient(var(--color-warmth) 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: 0.55;
  box-shadow: inset 0 0 0 1px var(--color-rule);
}
.clip__cap { font-size: var(--text-sm); color: var(--color-ink-3); max-width: 36ch; }
.clip__chip { position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: 1; }
.clip__toggle {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm); z-index: 1;
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-scrim); color: var(--color-on-navy);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.clip__toggle:hover { background: var(--color-navy); }
.clip__toggle svg { fill: currentColor; }
.clip__toggle .i-play, .clip__toggle[aria-pressed="true"] .i-pause { display: none; }
.clip__toggle[aria-pressed="true"] .i-play { display: block; }

/* ── hero: yellow, video-first ── */
.hero { background: var(--color-sun); padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-xl); align-items: center; }
.hero__copy { display: grid; gap: var(--space-md); justify-items: start; }
.hero__label { color: var(--color-navy); }
.hero h1 { font-size: var(--text-display); max-width: 12ch; line-height: 1; }
.hero__lede { font-size: var(--text-xl); line-height: 1.45; max-width: 32ch; }
.clip--hero { width: min(360px, 100%); justify-self: end; }
.clip--hero .media { box-shadow: 0 0 0 6px var(--color-navy); }
.clip--hero::after { box-shadow: none; }
@media (max-width: 52rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .clip--hero { justify-self: center; width: min(320px, 82%); }
}

/* ── the route line between sections (terracotta, drawn on scroll) ── */
.route { height: clamp(56px, 8vw, 110px); max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.route svg { width: 100%; height: 100%; overflow: visible; }
.route path { fill: none; stroke: var(--color-terracotta); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; }
.route.is-solid path { stroke-dasharray: none; }

/* ── how it works: pinned card, steps light up ── */
.how { padding-block: var(--space-xl); }
.how__grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-2xl); align-items: center; }
.how__clip { width: min(330px, 100%); justify-self: center; }
.how__copy { display: grid; gap: var(--space-md); }
.how h2 { font-size: var(--text-3xl); max-width: 16ch; }
.how__p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; }
.steps { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-xs); max-width: 34rem; }
.step {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-sm); align-items: center;
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); border-radius: var(--radius-card);
  background: var(--color-paper-2);
  transition: background-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.step b { font: 600 var(--text-lg)/1.25 var(--font-display); }
.step > span:last-child { grid-column: 2; color: var(--color-ink-2); }
.step__icon {
  grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-paper); color: var(--color-navy);
}
.step__icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.step.is-on { background: var(--color-sun); }
.step.is-on .step__icon { background: var(--color-navy); color: var(--color-sun); }
.step.is-on > span:last-child { color: var(--color-navy); }
@media (max-width: 52rem) {
  .how__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .how__clip { width: min(300px, 78%); order: 2; }
}

/* ── discover places: copy beside the cards; only places with a real video ── */
.places { padding-block: var(--space-xl); }
.places__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-xl); align-items: center; }
.places__head { display: grid; gap: var(--space-sm); justify-items: start; }
.places__head h2 { font-size: var(--text-3xl); max-width: 14ch; }
.places__head p { max-width: 46ch; color: var(--color-ink-2); }
.places__head .row { margin-top: var(--space-xs); }
.strip {
  list-style: none; margin: 0; padding: var(--space-3xs) 0 var(--space-sm); display: flex; gap: var(--space-sm);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.card { flex: 1 0 clamp(180px, 30%, 250px); scroll-snap-align: start; min-width: 0; }
.clip--card { gap: 0; }
.card__cap {
  position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); z-index: 1;
  display: grid; gap: 2px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-card);
  background: var(--color-scrim); color: var(--color-on-navy);
}
.card__name { font: 600 var(--text-md)/1.2 var(--font-display); letter-spacing: -0.01em; }
.card__kind { font-size: var(--text-sm); color: var(--color-on-navy-2); }
@media (max-width: 52rem) {
  .places__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .strip { margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter); }
  .card { flex: 0 0 min(62vw, 240px); }
}

/* the short closing line each section ends on */
.close-line { font: 600 var(--text-lg)/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink) !important; }

/* ── browse + chips ── */
.browse { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.browse__copy { display: grid; gap: var(--space-md); }
.browse h2 { font-size: var(--text-3xl); max-width: 15ch; }
.browse__copy > p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); max-width: 36rem; }
.chips li {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill); font-weight: 500; white-space: nowrap;
  background: var(--color-paper-2); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong);
}
.chips li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-sun); transform: scaleX(0); transform-origin: left; }
.chips li.is-lit::before { transform: scaleX(1); }
.clip--side { width: min(300px, 100%); justify-self: center; }
@media (max-width: 52rem) {
  .browse { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); }
  .clip--side { width: min(280px, 74%); }
}

/* ── film ── */
.film { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-xl) var(--space-2xl); border-top: var(--rule-hair); }
.film h2 { font-size: var(--text-2xl); }
.film__copy { display: grid; gap: var(--space-sm); }
.film__copy p { color: var(--color-ink-2); max-width: 40ch; }
.film__box { margin: 0; display: grid; gap: var(--space-xs); }
.film__video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-media); background: var(--color-media-bg); }
@media (max-width: 52rem) { .film { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }

/* ── download band (end of the explorer path) ── */
.get { background: var(--color-sun); }
.get__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-2xl); }
.get__copy { display: grid; gap: var(--space-xs); }
.get h2, .get__h { font: 700 var(--text-3xl)/1.05 var(--font-display); letter-spacing: -0.025em; max-width: 18ch; text-wrap: balance; }
.get__copy p { font-size: var(--text-lg); }
.get__copy .get__sign { font-weight: 600; font-size: var(--text-md); }

/* ── businesses ── */
.biz { background: var(--color-paper-2); }
.biz__grid { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.biz__clip { width: min(260px, 100%); }
.biz__body { display: grid; gap: var(--space-md); justify-items: start; }
.biz h2 { font-size: var(--text-3xl); max-width: 14ch; }
.biz__lede { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 46ch; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); max-width: 40rem; }
.perks li {
  display: grid; gap: 2px; padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 14px); position: relative;
  border-radius: var(--radius-card); background: var(--color-paper);
}
.perks li::before { content: ""; position: absolute; left: var(--space-md); top: calc(var(--space-sm) + 0.5em); width: 8px; height: 8px; border-radius: 50%; background: var(--color-terracotta); transform: translateX(-14px); }
.perks b { font: 600 var(--text-md)/1.3 var(--font-display); }
.perks span { color: var(--color-ink-2); }
.biz__join { font-weight: 500; max-width: 46ch; }
.biz__body .row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
@media (max-width: 52rem) {
  .biz__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); }
  .biz__clip { width: min(240px, 66%); justify-self: center; order: 2; }
}

/* ── footer (Ft1) ── */
.foot { border-top: 1px solid var(--color-rule-strong); padding-block: var(--space-xl); }
.foot__band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.foot__brand { display: grid; gap: var(--space-2xs); justify-items: start; }
.brand--foot { height: 34px; margin-bottom: var(--space-2xs); }
.foot__tag { font: 600 var(--text-lg)/1.3 var(--font-display); }
.foot__about { color: var(--color-ink-2); font-size: var(--text-sm); }
.foot__links { display: grid; gap: var(--space-2xs); justify-items: start; }
.foot__links a { text-decoration: none; font-weight: 500; white-space: nowrap; }
.foot__links a:hover { text-decoration: underline; text-decoration-color: var(--color-sun-deep); text-decoration-thickness: 3px; }
.foot__reach { display: grid; gap: var(--space-sm); justify-items: start; }
.foot__reach .stores img { height: 40px; }
.foot__legal { margin-top: var(--space-xl); padding-top: var(--space-sm); border-top: var(--rule-hair); font-size: var(--text-sm); color: var(--color-ink-3); }
@media (max-width: 52rem) { .foot__band { grid-template-columns: minmax(0, 1fr); } }

/* ── motion gates: only when JS + GSAP are running (html.has-motion), never under reduced motion ── */
.has-motion [data-split] { visibility: hidden; }
.has-motion .logo__reveal { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation: none !important; }
  .chips li::before { display: none; }
}

/* ── long document (about) ── */
.doc { max-width: calc(var(--measure) + 2 * var(--page-gutter)); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); }
.doc h1 { font-size: var(--text-3xl); max-width: 14ch; }
.doc .lede { margin-top: var(--space-lg); font-size: var(--text-xl); line-height: 1.45; }
.doc p + p, .doc p + h2, .doc figure + p, .doc ul + p { margin-top: var(--space-sm); }
.doc h2 { margin-top: var(--space-xl); margin-bottom: var(--space-xs); font-size: var(--text-xl); letter-spacing: 0; }
.doc p, .doc li { color: var(--color-ink-2); }
.doc ul { margin: var(--space-xs) 0 0; padding-left: 1.1em; }
.doc li + li { margin-top: var(--space-3xs); }
.doc li::marker { color: var(--color-accent-deep); }
.doc figure { margin: var(--space-lg) 0; display: grid; justify-items: start; gap: var(--space-2xs); }
.doc figure img { width: 7rem; }
.doc figcaption { font-size: var(--text-sm); color: var(--color-ink-3); }
.doc .ornament { text-align: center; color: var(--color-ink-3); letter-spacing: 0.6em; margin: var(--space-xl) 0; }

/* ── contact lines ── */
.contacts { margin: var(--space-lg) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair); }
.contacts li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--rule-hair); }
.contacts .value { font: 600 var(--text-xl)/1.2 var(--font-display); text-decoration: none; overflow-wrap: anywhere; }
.contacts .value:hover { text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-decoration-thickness: 3px; }
.copy { font: 500 var(--text-sm)/1 var(--font-body); padding: 0.5rem 0.9rem; min-height: 36px; border-radius: var(--radius-pill); border: 0; cursor: pointer; background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong); transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.copy:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.copy:active { background: var(--color-paper-2); }
.copy[data-state="done"] { background: var(--color-accent); box-shadow: none; }

/* ── privacy policy (Long Document, legal) ── */
.policy { max-width: calc(68ch + 2 * var(--page-gutter)); }
.policy__note { margin-top: var(--space-sm); color: var(--color-ink-3); font-size: var(--text-sm); }
.policy__meta { margin: var(--space-lg) 0 0; display: grid; gap: var(--space-3xs); padding: var(--space-sm) 0; border-top: var(--rule-hair); border-bottom: var(--rule-hair); font-size: var(--text-sm); }
.policy__meta div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-xs); }
.policy__meta dt { color: var(--color-ink-3); }
.policy__meta dd { margin: 0; color: var(--color-ink); }
.policy__toc { margin: var(--space-lg) 0 var(--space-xl); }
.policy__toc ol { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: var(--space-lg); }
.policy__toc li { break-inside: avoid; margin: 0; }
.policy__toc a { display: flex; gap: var(--space-2xs); padding: 0.3rem 0; text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); }
.policy__toc a:hover { color: var(--color-ink); }
.policy__toc a span { min-width: 2.6em; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.policy h2 { scroll-margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair); font-size: var(--text-xl); letter-spacing: 0; }
.policy__num { color: var(--color-ink-3); margin-right: 0.2em; }
.policy h3 { margin-top: var(--space-lg); margin-bottom: var(--space-2xs); font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); line-height: 1.3; }
.policy h4 { margin: var(--space-md) 0 var(--space-3xs); font: 600 var(--text-md)/1.3 var(--font-body); color: var(--color-ink); }
.policy p, .policy li, .policy td, .policy th { font-size: var(--text-md); }
.policy h3 + p, .policy h4 + p, .policy h3 + h4, .policy h2 + p, .policy h2 + h3 { margin-top: 0; }
.policy ul + p, .policy p + ul, .policy .policy__table + p, .policy address + p { margin-top: var(--space-sm); }
.policy li strong, .policy p strong { color: var(--color-ink); font-weight: 600; }
.policy__basis { padding-left: var(--space-sm); border-left: 3px solid var(--color-accent); font-size: var(--text-sm) !important; }
.policy__entity { margin-top: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); font-style: normal; line-height: 1.7; color: var(--color-ink); }
.policy__table { margin-top: var(--space-sm); overflow-x: auto; }
.policy table { width: 100%; border-collapse: collapse; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; border-bottom: var(--rule-hair); }
.policy thead th, .policy tr:first-child th[scope="col"] { font-weight: 600; color: var(--color-ink); border-bottom: var(--rule-strong); }
.policy th[scope="row"] { font-weight: 500; color: var(--color-ink); width: 50%; }
.policy td { color: var(--color-ink-2); }
.policy .link { white-space: normal; overflow-wrap: anywhere; }
.policy__legal { margin-top: var(--space-xl) !important; padding-top: var(--space-sm); border-top: var(--rule-hair); font-size: var(--text-sm) !important; color: var(--color-ink-3) !important; }
@media (max-width: 36rem) { .policy__meta div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ── language switcher: text codes in the masthead's issue line ── */
.masthead__issue { align-items: center; }
.lang { display: flex; gap: 2px; margin-left: auto; }
.masthead__tagline + .lang { margin-left: var(--space-sm); }
.lang a {
  min-width: 2.2rem; min-height: 28px; display: inline-grid; place-items: center; padding: 0 0.35rem;
  font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: 0.08em; text-decoration: none;
  color: var(--color-ink-2); border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.lang a[aria-current="true"] { color: var(--color-ink); background: var(--color-accent); }

/* ── social links in the footer ── */
.social { display: flex; gap: var(--space-2xs); }
.social a {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 36px; padding: 0 0.85rem 0 0.7rem;
  border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
  font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-rule-strong);
  transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.social a:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink); background: var(--color-accent); }
.social a:active { background: var(--color-accent-deep); }
.social svg { flex: none; }

/* the switcher sits on the yellow masthead: current language in navy */
.lang a { color: var(--color-navy); }
.lang a:hover { background: var(--color-sun-soft); }
.lang a[aria-current="true"] { color: var(--color-on-navy); background: var(--color-navy); }

/* the strip's pause control shares the hero toggle's icon swap */
.round svg { fill: currentColor; }
.round .i-play, .round[aria-pressed="true"] .i-pause { display: none; }
.round[aria-pressed="true"] .i-play { display: block; }
.chips li::before { transition: transform 0.5s var(--ease-out); }

.biz h2 { max-width: 16ch; }
.biz__clip { justify-self: start; }
@media (max-width: 52rem) { .biz__clip { justify-self: center; } }
@media (max-width: 36rem) { .biz h2 { max-width: none; } }

/* ── the strip, multi-city: each card carries its city ── */
.card__city { font-weight: 600; color: var(--color-on-navy); }
.clip .media--empty {
  display: grid; place-items: center; padding: var(--space-md); text-align: center;
  background: var(--color-paper-2); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong);
  font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink-3); overflow-wrap: anywhere;
}
.tag--soon, .tag--draft { position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: 1; }
.tag--draft { background: var(--color-paper); color: var(--color-navy); box-shadow: inset 0 0 0 1.5px var(--color-terracotta); }
.city .tag--draft { position: static; justify-self: start; }

/* ── where STARGET is: Porto today, beside the copy; still reads with more cities later ── */
.where { padding-block: var(--space-xl) var(--space-2xl); background: var(--color-paper-2); }
.where__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: center; }
.where__head { display: grid; gap: var(--space-sm); }
.where__head h2 { font-size: var(--text-3xl); }
.where__head p { max-width: 48ch; color: var(--color-ink-2); }
.cities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-xl) 0;
}
.cities[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.city { position: relative; display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-media); background: var(--color-paper); min-width: 0; }
.city__line { position: absolute; left: var(--space-lg); right: var(--space-lg); top: calc(var(--space-lg) + 21px); border-top: 2px dotted var(--color-terracotta); transform-origin: left center; }
.city__mark { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-paper); margin-left: -6px; }
.city__mark .pin { height: 36px; width: auto; overflow: visible; }
.city__name { font-size: var(--text-3xl); margin-top: var(--space-2xs); }
.city__note { color: var(--color-ink-2); }
.city__in { margin-top: var(--space-xs); font: 600 var(--text-xs)/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-2); }
.city__places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); color: var(--color-ink); }
.city__places li { position: relative; padding-left: 0.9em; }
.city__places li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-sun-deep); }
.city.is-placeholder .city__name { color: var(--color-ink-3); }
@media (max-width: 52rem) { .where__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .city { padding: var(--space-md); } .city__line { left: var(--space-md); right: var(--space-md); top: calc(var(--space-md) + 21px); } }

/* ── hero: subheadline + the two calls to action ── */
.hero__sub { font: 600 var(--text-xl)/1.3 var(--font-display); letter-spacing: -0.01em; }
.hero__lede { font-size: var(--text-lg) !important; max-width: 44ch !important; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.hero .stores img { height: 42px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.btn--sun { background: var(--color-sun); color: var(--color-navy); }
.btn--sun:hover { box-shadow: inset 0 -4px 0 var(--color-paper); }
.how__copy .close-line { margin-top: var(--space-2xs); }
.browse__copy .close-line { margin-top: var(--space-2xs); }
.film__copy .row { margin-top: var(--space-xs); }
.film h2 { font-size: var(--text-3xl); }

/* ── businesses: three short paragraphs, three benefits, then the closing call ── */
.biz__lede { display: grid; gap: var(--space-xs); }
.biz__lede p { font-size: var(--text-md); }
.biz__lede p:first-child { font-size: var(--text-lg); color: var(--color-ink); }
.biz__close { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-strong); width: 100%; max-width: 40rem; }
.biz__close h3 { font-size: var(--text-xl); }
.biz__close p { color: var(--color-ink-2); }
.biz__close .row { margin-top: var(--space-xs); }
.biz h2 { max-width: 18ch; }

/* ── cities & communities: a quiet navy band, vision only ── */
.comm { background: var(--color-navy); color: var(--color-on-navy); }
.comm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); align-items: start; }
.comm .label { color: var(--color-sun); }
.comm__head { display: grid; gap: var(--space-sm); }
.comm h2 { font-size: var(--text-2xl); max-width: 20ch; }
.comm__body { display: grid; gap: var(--space-sm); justify-items: start; }
.comm__body p { color: var(--color-on-navy-2); max-width: 52ch; }
.comm__body .close-line { color: var(--color-on-navy) !important; }
.comm .link { color: var(--color-on-navy); white-space: normal; }
@media (max-width: 52rem) { .comm__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xl); } }

/* ── About + Contact: wide page head, then full-width content (no narrow column) ── */
.page-head { background: var(--color-sun); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.page-head__copy { display: grid; gap: var(--space-sm); justify-items: start; }
.page-head h1 { font-size: var(--text-display); line-height: 1; max-width: 12ch; }
.page-head__copy p { font-size: var(--text-lg); max-width: 52ch; }
.page-head__copy .page-head__lede { font: 600 var(--text-xl)/1.35 var(--font-display); letter-spacing: -0.01em; max-width: 30ch; margin-top: var(--space-xs); }
.page-head__pin { width: min(220px, 100%); justify-self: center; height: auto; }
.page-head__grid--contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; }
.page-head .contacts { margin: 0; border-top-color: var(--color-rule-strong); }
.page-head .contacts li { border-bottom-color: var(--color-rule-strong); }
.page-head .copy { box-shadow: inset 0 0 0 1.5px var(--color-navy); }
@media (max-width: 52rem) {
  .page-head__grid, .page-head__grid--contact { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); }
  .page-head__pin { width: 120px; justify-self: start; order: -1; }
}

.milestones { padding-block: var(--space-xl) var(--space-lg); }
.milestones ol { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.milestones li { display: grid; gap: var(--space-3xs); align-content: start; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); border-top: 4px solid var(--color-sun); }
.milestones b { font: 700 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.02em; }
.milestones span { color: var(--color-ink-2); }
@media (max-width: 52rem) { .milestones ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .milestones ol { grid-template-columns: minmax(0, 1fr); } }

.chapters { padding-block: var(--space-lg) var(--space-2xl); display: grid; }
.chapter { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); padding-block: var(--space-xl); border-top: var(--rule-hair); }
.chapter h2 { font-size: var(--text-2xl); }
.chapter__body { display: grid; gap: var(--space-sm); }
.chapter__body p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 60ch; }
.chapter__body p:first-child { color: var(--color-ink); font-weight: 500; }
@media (max-width: 52rem) { .chapter { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-lg); } }

.talks { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); align-items: start; padding-block: var(--space-2xl) var(--space-lg); }
.talks__intro { display: grid; gap: var(--space-xl); }
.talks__intro section { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-strong); scroll-margin-top: var(--space-md); }
.talks__intro h2 { font-size: var(--text-2xl); max-width: 18ch; }
.talks__intro p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 40ch; }
.form { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-media); background: var(--color-paper-2); scroll-margin-top: var(--space-md); }
.form__title { font-size: var(--text-2xl); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.form__topics legend { margin-bottom: var(--space-xs); padding: 0; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic span { display: inline-flex; align-items: center; min-height: 40px; padding: 0.5rem 1rem; border-radius: var(--radius-pill); font-weight: 500; white-space: nowrap; background: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.topic:hover span { box-shadow: inset 0 0 0 1.5px var(--color-navy); }
.topic input:checked + span { background: var(--color-sun); box-shadow: inset 0 0 0 1.5px var(--color-navy); }
.topic input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-ink-3); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border: 0; border-radius: var(--radius-card);
  font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-rule-strong); transition: box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink-3); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-navy), 0 0 0 4px var(--color-sun-soft); }
.field input:user-invalid, .field textarea:user-invalid { box-shadow: inset 0 0 0 2px var(--color-terracotta); }
.form__note { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.form__status { font-weight: 500; }
.form__status[data-state="ok"] { padding: 0.5rem 0.9rem; border-radius: var(--radius-card); background: var(--color-sun); }
.form__status[data-state="error"] { padding: 0.5rem 0.9rem; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: inset 0 0 0 2px var(--color-terracotta); }
@media (max-width: 52rem) {
  .talks { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-md); }
  .form { padding: var(--space-lg) var(--space-md); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
}
.signoff { padding-block: var(--space-md) var(--space-2xl); font: 600 var(--text-xl)/1.4 var(--font-display); }
.signoff span { font: 400 var(--text-md)/1.6 var(--font-body); color: var(--color-ink-2); }
.page-head__copy p.label { font-size: var(--text-xs); }
.get__copy .get__h { font: 700 var(--text-2xl)/1.1 var(--font-display); max-width: 24ch; }