/* =========================================================================
   HOME — section layouts for the Wedaways homepage.
   References tokens only. Media queries = layout flips.
   ========================================================================= */

/* --- page flow scrolls over the sticky hero (curtain reveal) ------------ */
.flow { position: relative; z-index: 1; background: var(--bg); }

/* --- footer reveal (Chiara 21 Jul): the beige footer scrolls in normal flow;
   only the white subfooter strip is pinned behind it and revealed as the beige
   slides up off it. Pure CSS — the strip always fits the viewport, so the old
   JS height-gate (Effect 9) is gone. */
main { position: relative; z-index: 1; background: var(--bg); }
.site-foot { position: relative; z-index: 0; }
.site-foot .footer { position: relative; z-index: 1; }   /* beige covers the strip below */
.subfooter-frame { position: sticky; bottom: 0; z-index: 0; }

/* =========================================================================
   1 · HERO — sticky curtain, full-bleed video, scrim + gradient
   ========================================================================= */
/* Lift structure: .lift is a 200svh track. The hero is absolute at its top and
   rides up with the scroll (the "curtain" being raised); .lift__under (trust +
   statement) is sticky beneath it, stationary, being revealed. When the hero
   has fully lifted, the under panel releases into normal flow. */
.lift { position: relative; height: 200svh; }
.hero {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  height: 100svh; min-height: 620px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.lift__under {
  position: sticky; top: 0; z-index: 1;
  height: 100svh; min-height: 620px;
  background: var(--bg);
  overflow: hidden;
  /* Reveal choreography (Chiara): panel is uncovered bottom-up, so the logo
     strip is anchored at the panel BOTTOM → logos appear first under the
     rising hero, statement (centered above) arrives as it lifts more. */
  display: flex; flex-direction: column;
}
.lift__under .trust { order: 2; }
.lift__under .statement { order: 1; flex: 1; display: grid; place-content: center; }
@media (prefers-reduced-motion: reduce) {
  .lift { height: auto; }
  .hero { position: relative; height: 100svh; }
  .lift__under { position: static; height: auto; }
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim-hero); mix-blend-mode: overlay; }
.hero__grad  { position: absolute; inset: 0; z-index: 1; background: var(--scrim-hero-grad); mix-blend-mode: multiply; }
.hero__copy {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: 38px;   /* nav offset + 10 — Chiara-calibrated */
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-2xl); color: var(--surface);
}
.hero__title { color: var(--surface); max-width: min(100%, clamp(383px, 270.03px + 26.2712vw, 724px)); } /* Figma: 724w @1920, 383w @430 */
.hero__aside { max-width: min(100%, clamp(375px, 304.77px + 16.3328vw, 587px)); display: grid; gap: var(--space-md); text-align: left; } /* Figma: 587w @1920, 375w @430 */
.hero__sub { font-family: var(--font-display); font-size: var(--type-h2); line-height: 1.2; color: var(--surface); }

/* =========================================================================
   2 · TRUST / PRESS LOGO BAR
   ========================================================================= */
.trust { padding-block: var(--space-lg); overflow: hidden; }
/* rule inset by the gutter, per Figma (6003:132: x50, w1820 @1920 — not full-bleed) */
.trust::after { content: ""; display: block; height: var(--hairline); background: color-mix(in srgb, var(--line) 70%, transparent); margin: var(--space-lg) var(--gutter) 0; }
/* Edge fade (Chiara): logos at full strength over the rule's span, dissolving
   to nothing beyond its ends (the gutter). Mask sits on a static wrapper so
   the moving strip fades in viewport space. */
.trust__mask {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, black calc(var(--gutter) + 6%),
    black calc(100% - var(--gutter) - 6%), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, black calc(var(--gutter) + 6%),
    black calc(100% - var(--gutter) - 6%), transparent 100%);
}
/* Slow rolling marquee — MOTION-SPEC #10. Two identical rows; the pair slides -50%. */
.trust__marquee { display: flex; width: max-content; animation: trust-roll 42s linear infinite; }   /* Chiara 23 Jul: 55 read too slow */
.trust__row {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: var(--space-2xl);
  padding-inline-end: var(--space-2xl);   /* keeps the loop seam even */
}
@keyframes trust-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trust__marquee { animation: none; width: auto; flex-wrap: wrap; }
  .trust__row { flex-wrap: wrap; justify-content: center; }
  .trust__row[aria-hidden="true"] { display: none; }
}
/* Per-logo exact artwork heights — spec §8a. Width auto, never boxed. */
.trust__row img { width: auto; object-fit: contain; }
.trust__row img[src*="belmond"]      { height: clamp(23px, 14.72px + 1.9260vw, 48px); }
.trust__row img[src*="one_and_only"] { height: clamp(16px, 10.37px + 1.3097vw, 33px); }
.trust__row img[src*="ritz_carlton"] { height: clamp(26px, 16.39px + 2.2342vw, 55px); }
.trust__row img[src*="relais"]       { height: clamp(28px, 17.73px + 2.3883vw, 59px); }
.trust__row img[src*="virtuoso"]     { height: clamp(39px, 21.44px + 4.0832vw, 92px); }
.trust__row img[src*="four_seasons"] { height: clamp(26px, 18.71px + 1.6949vw, 48px); }
.trust__row img[src*="peninsula"]    { height: clamp(13px, 8.69px + 1.0015vw, 26px); }
.trust__row img[src*="auberge"]      { height: clamp(14px, 9.36px + 1.0786vw, 28px); }
.trust__row img[src*="como"]         { height: clamp(21px, 14.37px + 1.5408vw, 41px); }
.trust__row img[src*="st_regis"]     { height: clamp(19px, 12.37px + 1.5408vw, 39px); }
.trust__row img[src*="fairmont"]     { height: clamp(19px, 12.71px + 1.4638vw, 38px); }
.trust__row img[src*="bvlgari"]      { height: clamp(12px, 8.02px + 0.9245vw, 24px); }

/* =========================================================================
   3 · STATEMENT
   ========================================================================= */
.statement { text-align: center; padding-block: var(--space-2xl); }   /* Chiara: 3xl read too big (Figma drew 151) */
.statement__in { max-width: 900px; margin-inline: auto; display: grid; gap: var(--space-lg); }
.statement h2 { font-size: var(--type-h1); }
.statement p { max-width: 60ch; margin-inline: auto; }

/* =========================================================================
   4 · HOW IT WORKS — 3 steps
   ========================================================================= */
/* Figma: images 430×430 (not third-width), the trio centered on the page;
   number, 65px rule and 320px-wide desc all centered per column. */
.steps { padding-block: var(--space-xl) var(--space-3xl); }   /* Figma: 61 above / 130 below → xl/3xl */
.steps__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 320px));   /* Chiara: smaller, delicate (Figma 430) — matches 320px text col */
  justify-content: center; gap: var(--col-gap);
}
/* Figma column rhythm: image →41→ number →16→ rule →19→ copy */
.step { display: grid; gap: 0; justify-items: center; text-align: center; }
.step__num  { margin-top: var(--space-lg); }
.step__rule { margin-top: var(--space-sm); }
.step__desc { margin-top: var(--space-sm); }
.step__img { aspect-ratio: 1 / 1; overflow: hidden; width: 100%; }
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step__num { font-family: var(--font-display); font-size: var(--type-display); line-height: 1; color: var(--accent); }
.step__rule { height: var(--hairline); width: 65px; background: var(--line); }
.step__desc { max-width: min(100%, 300px); text-wrap: balance; }   /* Chiara: 300 (Figma 320) */

/* =========================================================================
   5 · WHERE TO BEGIN — 2 path cards
   ========================================================================= */
/* Chiara 17 Jul: section fills the viewport; cards sit inside it with a
   top/bottom margin equal to the side gutter, so the frame is even all round. */
.paths { height: 100svh; padding-block: var(--gutter); }
.paths__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap); height: 100%; }
.path {
  position: relative; overflow: hidden; height: 100%;
  display: flex; align-items: flex-end; color: var(--surface);
  isolation: isolate;
}
.path img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.path img[src*="portonovi"] { object-position: 50% 100%; }   /* bottom-pinned: the couple fills the lower frame; sky takes the crop */
.path__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim-card-grad); mix-blend-mode: multiply; }
.path__copy {
  position: relative; z-index: 2; padding: var(--space-xl);
  display: grid; gap: var(--space-md); width: 100%;
  /* Chiara 17 Jul: copy always visible, centered (was left-aligned, hover-revealed) */
  text-align: center; justify-items: center;
}
/* Copy block reserves 3 lines so both cards align: eyebrow, title and the top of
   the body sit at the same height across the pair, and shorter copy simply runs
   out with a blank line at the end. */
.path__copy > p:not(.eyebrow) {
  max-width: 625px;   /* Figma body col ~625w */
  min-height: calc(3 * var(--lh-body) * 1em);
}
.path__eyebrow { color: var(--surface); }
.path__title { color: var(--surface); font-size: var(--type-h1); }
/* RULE (Chiara 27 Jul): copy anchors to a fixed line — WHERE TO BEGIN sits at
   the same height on every card, copy grows DOWN from it. Bottom-anchoring
   let the longer wedding copy push its eyebrow higher than Honeymoons'. */
@media (min-width: 769px) {
  .path__copy { position: absolute; left: 0; right: 0; top: 55%; }
}

/* --- hover (MOTION-SPEC: card reveal) ------------------------------------
   Three movements, none of them large, none arriving together:
   1. the whole copy block lifts 10px          — content leads
   2. the CTA fades up one beat behind it      — --stagger
   3. the image breathes to 1.04 over 1.1s     — reads as depth, not motion
   Restraint is the point: no single step should be noticeable on its own. */
.path__copy { transition: transform var(--dur-slow) var(--ease); }
.path:hover .path__copy,
.path:focus-within .path__copy { transform: translateY(-10px); }

.path img { transition: transform var(--dur-xslow) var(--ease); }
.path:hover img,
.path:focus-within img { transform: scale(1.04); }

.path__reveal {
  display: grid; gap: var(--space-md);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.path:hover .path__reveal,
.path:focus-within .path__reveal {
  opacity: 1; transform: none;
  transition-delay: var(--stagger);   /* arrives just behind the lift */
}

@media (prefers-reduced-motion: reduce) {
  .path__copy, .path img, .path__reveal { transition: none; }
  .path:hover .path__copy, .path:focus-within .path__copy { transform: none; }
  .path:hover img, .path:focus-within img { transform: none; }
}

/* =========================================================================
   6 · PORTFOLIO — Limestone band
   ========================================================================= */
/* Chiara 17 Jul (rev 2): natural height, Figma image sizes (cards 433×332,
   featured 895×815), generous padding around the band. */
.portfolio { background: var(--surface); padding-block: var(--space-3xl); }
.portfolio__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-lg); margin-bottom: var(--space-lg);
}
.portfolio__head-text { display: grid; gap: var(--space-sm); }
.portfolio__head h2 { font-size: var(--type-h1); white-space: nowrap; }   /* Chiara: one line (mobile wraps) */
.portfolio__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }   /* Figma: 895 + 30 + 895 = 1820 */
.portfolio__featured { position: relative; overflow: hidden; }
.portfolio__featured .p-card__media { aspect-ratio: 895 / 815; }
.portfolio__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap); align-content: start; }

/* Desktop (client 31 Jul): the featured image's bottom must sit on the same
   line as the second row of card images. A fixed aspect-ratio only matches the
   right column at the Figma width — the meta rows are type, not proportion, so
   the two columns drift apart as the viewport scales. Shared row tracks make
   the alignment structural: one 6-row grid (media/meta/chips × 2), cards
   subgrid into it, featured media spans rows 1–4 and therefore ends exactly
   where the second-row images end. Vertical rhythm stays on the existing
   margins (sm above meta, xs above chips), so row-gap is 0 and the between-row
   col-gap moves to a margin on the second-row media. */
@media (min-width: 1101px) {
  .portfolio__layout { grid-template-columns: repeat(4, 1fr); gap: 0 var(--col-gap); }
  .portfolio__cards { display: contents; }
  .portfolio__cards .p-card { grid-template-rows: subgrid; }
  .portfolio__cards .p-card:nth-child(1) { grid-column: 3; grid-row: 1 / 4; }
  .portfolio__cards .p-card:nth-child(2) { grid-column: 4; grid-row: 1 / 4; }
  .portfolio__cards .p-card:nth-child(3) { grid-column: 3; grid-row: 4 / 7; }
  .portfolio__cards .p-card:nth-child(4) { grid-column: 4; grid-row: 4 / 7; }
  .portfolio__cards .p-card:nth-child(n+3) .p-card__media { margin-top: var(--col-gap); }
  .portfolio__featured { grid-column: 1 / 3; grid-row: 1 / 7; grid-template-rows: subgrid; }
  .portfolio__featured .p-card__media { grid-row: 1 / 5; aspect-ratio: auto; }
}

/* gap: 0 + explicit margins so the two gaps differ — image sits away from the
   copy (sm), but name/View and the chips read as one block (xs). */
.p-card { display: grid; gap: 0; }
.p-card__meta { margin-top: var(--space-sm); }
.p-card__chips { margin-top: var(--space-xs); }
.p-card__media { position: relative; overflow: hidden; aspect-ratio: 433 / 332; }   /* Figma card size */
.p-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hover swap: the second image crossfades in over the first — a slow, soft
   dissolve (not a cut), matching the site's floaty register. */
.p-card__media img.p-card__b { opacity: 0; transition: opacity var(--dur-xslow) var(--ease-float); }
.p-card:hover .p-card__b, .p-card:focus-within .p-card__b { opacity: 1; }
.p-card__save { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2; }
.p-card__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.p-card__loc { font-family: var(--font-body); font-weight: 400; font-size: var(--type-eyebrow); color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.p-card__name { font-family: var(--font-body); font-weight: 400; font-size: var(--type-sub); color: var(--ink); margin-top: 2px; }
/* View sits on the chips row, pushed right — its underline aligns with the
   pill row rather than floating up beside the property name. */
/* baseline, not center: View's box includes its hanging underline, so centering
   pushes the label up relative to the chip text. Baseline puts the two texts
   on the same line and lets the rule hang. */
.p-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; }
.p-card__view { margin-left: auto; }

/* =========================================================================
   7 · STATS
   ========================================================================= */
.stats { padding-block: var(--space-2xl); }
.stats__row { display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { text-align: center; padding-inline: var(--space-md); position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 56px; background: var(--line);
}
.stat__num { font-family: var(--font-display); font-size: var(--type-stat); line-height: 1; color: var(--accent); }
.stat__label { margin-top: var(--space-sm); font-weight: 300; font-size: var(--type-body); color: var(--ink); }

/* =========================================================================
   8 · JOURNAL — full-bleed image band + scrim
   ========================================================================= */
/* Scroll-driven story track (Chiara): the journal pins for 4 stories' worth of
   scroll — each segment flicks to the next story — then releases. */
.journal-track { position: relative; height: 400svh; }
@media (prefers-reduced-motion: reduce) { .journal-track { height: auto; } }
.journal {
  position: sticky; top: 0;
  height: 100svh; min-height: 620px;
  overflow: hidden; color: var(--surface); isolation: isolate;
  display: flex; flex-direction: column;
}
/* sections after the journal must paint above it as they slide over */
.featured, .insta { position: relative; z-index: 1; background: var(--bg); }
.journal__bg { position: absolute; inset: 0; z-index: 0; }
.journal__bg img[src*="los-cabos-fam"] { object-position: 50% 70%; }   /* keep the pool lounge group in frame; crop sky instead */
.journal__bg img,
.journal__bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.journal__bg img.is-active,
.journal__bg video.is-active { opacity: 1; }
.journal__scrim {   /* Chiara 22 Jul: bottom-loaded — story text sits on the darkest band, fades lighter up the image */
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.60) 72%,
    rgba(0,0,0,0.78) 88%,
    rgba(0,0,0,0.85) 100%);
}
/* Figma screenshot 22.53: left col = eyebrow+H2+pill top, FEATURED STORIES ledger
   bottom; right col = story block (LEFT-aligned text) bottom-anchored, 665px,
   ending at the burger gutter line. */
.journal__in {
  position: relative; z-index: 2;
  width: 100%; flex: 1;
  padding-block: var(--gutter);
  display: grid; grid-template-columns: 1fr minmax(0, 665px); gap: var(--space-2xl);
  align-items: stretch;
}
.journal__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.journal__intro .cta { margin-top: var(--space-sm); }
.journal__list-label { margin-top: auto; }   /* ledger sits at the bottom of the column */
.journal__intro h2 { color: var(--surface); font-size: var(--type-h1); max-width: min(100%, 664px); }   /* Figma: 664w */
/* Story list per Figma screenshot: two-column ledger (kicker | title), no rules,
   active = bold kicker + underlined title. */
.journal__list-label { color: var(--surface); }   /* margin-top: auto set above — bottom-pins the ledger */
.journal__list { margin-top: var(--space-sm); display: grid; gap: 6px; }
.journal__item {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 2px 0; color: var(--surface);
  display: grid; grid-template-columns: minmax(0, 293px) 1fr; gap: var(--space-sm);
  align-items: baseline;
  transition: opacity var(--dur) var(--ease);
}
.journal__item .j-kicker { font-family: var(--font-body); font-weight: 400; font-size: var(--type-sub); }
.journal__item .j-title  { font-family: var(--font-body); font-weight: 300; font-size: var(--type-sub); }
.journal__item[aria-selected="true"] .j-kicker { font-weight: 700; }
.journal__item[aria-selected="true"] .j-title  { text-decoration: underline; text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--hairline); }   /* matched to .text-cta::after (hero) */
.journal__item[aria-selected="false"] { opacity: 0.55; }
.journal__item[aria-selected="false"]:hover { opacity: 0.85; }

.journal__active { align-self: end; display: grid; gap: var(--space-md); }
/* Title / copy / CTA spacing inside the visible panel — same --space-md rhythm
   as .path__copy and .hero__aside. The [hidden] line is load-bearing: display
   on the panel beats the browser's weak [hidden] rule, so without it all four
   panels render stacked (the earlier breakage). */
.journal__active [data-journal-panel] { display: grid; justify-items: start; gap: var(--space-md); }
.journal__active [data-journal-panel][hidden] { display: none; }
.journal__active h3 { color: var(--surface); font-size: var(--type-h1); max-width: min(100%, 606px); }   /* Figma: 606w, Kudryashev h1, left-aligned */
.journal__active p { color: var(--surface); line-height: var(--lh-body-tight); max-width: min(100%, 665px); }   /* Figma: 665w */
.journal__pager { display: none; font-size: var(--type-meta); letter-spacing: 0.1em; }

/* =========================================================================
   9 · AS FEATURED IN
   ========================================================================= */
.featured { text-align: center; padding-block: var(--space-2xl); overflow: hidden; }   /* clip the marquee row like .trust does — its max-content width was stretching the document sideways */
.featured .eyebrow { color: var(--accent); margin-bottom: var(--space-lg); }
/* press wordmarks ride the trust marquee structure. They had NO height rule
   (only partner logos are sized per-logo) so they rendered at intrinsic SVG
   size — huge. One uniform wordmark height; press marks read fine matched. */
.featured .trust__row img { height: clamp(18px, 14.68px + 0.77vw, 28px); width: auto; }
.featured .trust__marquee { animation-duration: 25s; }   /* smaller row = fewer px per loop; keeps pace with the top bar */

/* =========================================================================
   10 · INSTAGRAM
   ========================================================================= */
.insta { padding-block: var(--space-2xl); }
.insta__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--hairline) solid var(--line); }
.insta__head .eyebrow { color: var(--ink); }
.insta__grid { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--col-gap); }
.insta__grid a { display: block; overflow: hidden; aspect-ratio: 283 / 355; }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.insta__grid a:hover img { transform: scale(1.04); }

/* --- placeholder block -------------------------------------------------- */
.ph { background: var(--surface); width: 100%; height: 100%; display: block; }
img.ph-img { background: var(--surface); }

/* =========================================================================
   RESPONSIVE — LAYOUT FLIPS ONLY
   ========================================================================= */

/* journal below 1360 = the approved mobile pattern, wider (Chiara 27 Jul:
   tablet was never designed; the stacked ledger hybrid doubled the story
   title and stranded FEATURED STORIES mid-image). Cutover raised 1100 → 1359
   (client 31 Jul): the desktop ledger's fixed columns (665px story block,
   293px kicker) leave the title column one word wide at ~1160 — the desktop
   layout only breathes from ~1360 up. */
@media (max-width: 1359px) {
  .journal { height: 100dvh; }
  .journal__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--space-xl); padding-block: var(--space-2xl); }
  .journal__list, .journal__list-label { display: none; }
  .journal__intro { position: relative; gap: var(--space-sm); }
  .journal__pager { display: block; position: absolute; top: 0; right: 0; }
  .journal__active { align-self: end; }
  .journal__active [data-journal-panel] { gap: var(--space-sm); }
}

/* tablet (769–1100): steps stay 3-up, portfolio featured full-width */
@media (max-width: 1100px) {
  .portfolio__layout { grid-template-columns: 1fr; }
  .portfolio__featured .p-card__media { aspect-ratio: 16 / 9; }
  .insta__grid { grid-template-columns: repeat(3, 1fr); }
}

/* mobile (≤768) — matched to Figma Mobile Mockup 6271:1642 */
@media (max-width: 768px) {
  .hero__copy { flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg);
    padding-bottom: var(--space-3xl); }   /* Chiara: copy fully centered, block rides higher (deviates from Figma left-set) */
  .hero__aside { max-width: 100%; width: 100%; text-align: center; justify-items: center; }
  .hero__aside .text-cta { margin-inline: auto; }

  /* no curtain choreography on mobile (Figma: normal flow) — the 100svh sticky
     panel strands the statement in empty space on tall screens */
  .lift { height: auto; }
  .hero { position: relative; height: 100svh; }
  .lift__under { position: static; height: auto; min-height: 0; display: block; }   /* block kills the order-flip: DOM order = trust, then statement; min-height 620 (curtain panel) would strand a void after the statement */

  /* trust row under the hero — logos get breathing room above AND below,
     before the rule (Chiara 23 Jul: was sm/16, read cramped) */
  .trust { padding-block: var(--space-md); }
  .trust::after { margin-top: var(--space-md); }
  .trust .trust__row img { transform: scale(1.28); }   /* hero partner bar only: +5%, +10%, +10% (Chiara 23 Jul) — NOT the featured-in press strip */

  .statement { padding-block: var(--space-xl); padding-inline: var(--space-xs); }   /* Chiara 23 Jul: narrower side frame (gutter 20 → 8) — for the TITLE */
  .statement p { padding-inline: var(--space-xl); }   /* Chiara 24 Jul: body copy inset xl (8 frame + 40 = 48 from edge; 20 → 32 → 48 across rounds) */
  .statement__in { gap: var(--space-sm); }   /* Chiara 23 Jul: H2→body matches the portfolio-head rhythm (was the one wide outlier) */
  .steps { padding-block: var(--space-md) var(--space-2xl); }   /* Chiara 23 Jul: 24 above 01 — below-para (40+24) mirrors above-title (24+40) */
  .steps__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .step__img { max-width: 276px; }   /* Figma: 276×275 */
  .step__desc { max-width: 200px; }  /* Chiara 23 Jul: all three descs wrap to matching 2-line blocks (step 3 ran one long line) */

  /* Where to Begin → stacked deck (Chiara 23 Jul): wedding-travel card pins
     centered, Honeymoons slides up OVER it as you scroll. CSS sticky only —
     normal scroll speed, no drive JS. Card 2 paints above by DOM order. */
  .paths { height: auto; padding-block: 0; }
  .paths.wrap { padding-inline: 0; }
  .paths__grid { display: block; height: auto; padding-bottom: 0; }
  .path {
    aspect-ratio: auto; height: 100dvh;   /* Chiara 23 Jul: each card is the full viewport */
    position: sticky; top: 0;
  }
  .path + .path {
    box-shadow: var(--shadow-panel);   /* lip of depth as it rides over */
    margin-top: 75dvh;   /* Chiara 23 Jul: dwell — card 1 pins and holds ~¾ screen of scroll before Honeymoons arrives (gap hides behind the pinned card) */
  }
  /* copy always visible on mobile — no hover to reveal it */
  .path__reveal { opacity: 1; transform: none; }
  .path:hover .path__copy, .path:focus-within .path__copy { transform: none; }
  .path:hover img, .path:focus-within img { transform: none; }

  .portfolio__head h2 { white-space: normal; }
  .portfolio { padding-block: var(--space-2xl); }
  .portfolio__head { flex-direction: column; align-items: flex-start; }
  .portfolio__head .cta { height: var(--cta-h-sm); font-size: var(--cta-size-mobile); }   /* Figma: compact pill */
  .portfolio__layout { gap: var(--space-lg); }   /* Chiara 22 Jul: featured (Belmond) → grid matches the 24px row rhythm, was col-gap 10 */
  .portfolio__cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) 10px; }   /* Chiara 22 Jul: air between card rows (chips → next image) */
  .portfolio__featured .p-card__media { aspect-ratio: 390 / 355; }
  .p-card__view { font-size: var(--type-eyebrow); }   /* Chiara 22 Jul: View reads chip-size, was too big */
  .p-card__chips { align-items: flex-end; }   /* Chiara 23 Jul: View's underline sits level with the pill bottoms (desktop keeps baseline) */
  .chip { font-size: calc(var(--type-eyebrow) + 1px);   /* Chiara 23 Jul: tag copy +1 (View stays eyebrow, a hair under) */
    padding: 4px 10px; line-height: 1; }                /* Chiara 23 Jul: true vertical centering (1.6 leading floated the word high) + narrower pill */
  .p-card__save { top: var(--space-xs); right: var(--space-xs); }   /* Chiara 23 Jul: tucked into the corner (was sm/16) */

  /* stats 3 + 2 (Figma): second row centered as a group; hairlines flank
     every stat, outer edges included */
  .stats__row { grid-template-columns: repeat(6, 1fr); row-gap: var(--space-lg); }
  .stat { padding-inline: var(--space-xs); }        /* Chiara 22 Jul: slimmer inset so each stat centers true in its cell */
  .stat__num { font-size: var(--type-display); }    /* Chiara 22 Jul: numbers one scale step down (45 → 33 mobile) */
  .stat__label { margin-top: var(--space-xxs); font-size: calc(var(--type-body) - 1px); }   /* Chiara 23 Jul: labels hug the numbers (16 → 8 → 4) and read 1px under body */
  .stat { grid-column: span 2; }
  .stat:nth-child(4) { grid-column: 2 / span 2; }
  .stat:nth-child(5) { grid-column: 4 / span 2; }
  .stat::before, .stat:nth-child(3)::after, .stat:nth-child(5)::after {
    content: ""; position: absolute; left: 0; top: 0;
    width: 1px; height: 100%; background: var(--line);   /* Chiara 23 Jul: full stat height — the floating 40px dash sat awkwardly at the number/label seam */
  }
  .stat:nth-child(3)::after, .stat:nth-child(5)::after { left: auto; right: 0; }

  /* journal (Figma 14.56): no ledger — pager rides top-right of the eyebrow
     line; intro (eyebrow/H2/pill) at top; the whole story block (kicker, title,
     copy, Step Inside) anchors together at the bottom of the image */
  .journal { height: 100dvh; }   /* Chiara 22 Jul: true full-viewport on phones — svh left a gap when Safari's bar collapses */
  .journal__in { padding-block: var(--space-2xl); }   /* Chiara 23 Jul: air above the eyebrow AND below Step Inside — symmetric; xl still read tight → 2xl (56) */
  .journal__list, .journal__list-label { display: none; }
  .journal__intro { position: relative; gap: var(--space-sm); }   /* tighter eyebrow/H2/pill cluster (Chiara: pill sat too far from the copy) */
  .journal__pager { display: block; position: absolute; top: 0; right: 0; }
  .journal__intro .cta { height: var(--cta-h-sm); font-size: var(--cta-size-mobile); }
  .journal__in { grid-template-rows: auto 1fr; }
  .journal__active { align-self: end; }
  .journal__active [data-journal-panel] { gap: var(--space-sm); }
  .j-kicker-m { display: block; color: var(--surface); margin-bottom: var(--space-xs); }

  .insta__grid { grid-template-columns: repeat(3, 1fr); }
  .featured .trust__row img { height: 20px; }   /* Chiara 23 Jul: matches the top bar's optical logo size (16 read small beside it) */
}
/* journal kickers exist in every panel; only true desktop uses the ledger */
@media (min-width: 1101px) {
  .j-kicker-m { display: none; }
}