/* Lento hotels page. Desktop first: base is 1440, then 1200 / 1024 / 768 overrides.
   Design source: Figma Landing Pages (Hotels V1) and the WTM slides. Smooth scroll via Lenis, motion via GSAP. */

/* Each font is split (tools/split_fonts.py): Latin here, and an -ext file that only downloads when a page shows ā, ł, ő and the like */
@font-face { font-family: "Aeonik"; src: url("../assets/fonts/aeonik-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193, U+2197, U+2713; }
@font-face { font-family: "Aeonik"; src: url("../assets/fonts/aeonik-400-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-017F; }
@font-face { font-family: "Aeonik"; src: url("../assets/fonts/aeonik-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193, U+2197, U+2713; }
@font-face { font-family: "Aeonik"; src: url("../assets/fonts/aeonik-500-ext.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-017F; }
@font-face { font-family: "Conforto"; src: url("../assets/fonts/conforto-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193, U+2197, U+2713; }
@font-face { font-family: "Conforto"; src: url("../assets/fonts/conforto-500-ext.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-017F; }
@font-face { font-family: "Conforto"; src: url("../assets/fonts/conforto-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193, U+2197, U+2713; }
@font-face { font-family: "Conforto"; src: url("../assets/fonts/conforto-700-ext.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-017F; }
@font-face { font-family: "Editorial"; src: url("../assets/fonts/editorial-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190-2193, U+2197, U+2713; }
@font-face { font-family: "Editorial"; src: url("../assets/fonts/editorial-italic-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-017F; }

:root {
  --cream: #FFFBF5;
  --peach: #FFF5E7;
  --firefly: #092929;
  --firefly-2: #0f3434;
  --deep: #046253;
  --mist: #C7D993;
  --mist-2: #E9EFD2;
  --coral: #F58369;
  --ink: var(--firefly);
  --ink-2: #33494a;
  --ink-3: #617272;
  --line: rgba(9, 41, 41, .12);
  --line-d: rgba(255, 251, 245, .14);
  --display: "Conforto", "Aeonik", system-ui, sans-serif;
  --body: "Aeonik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Editorial", Georgia, serif;
  --gutter: 64px;
  --max: 1440px;
  /* where .wrap content starts, for rows that bleed off the right edge */
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --space: 168px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 82px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.intro :focus-visible, .travel :focus-visible, .wcard :focus-visible, .footer :focus-visible, .nav :focus-visible, .madlib :focus-visible, .partners :focus-visible, .dock :focus-visible { outline-color: var(--mist); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--firefly); color: var(--cream); padding: 10px 16px; border-radius: 99px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
mark.gap { background: #fff1c2; color: var(--ink); padding: 2px 8px; border-radius: 4px; font-size: 13px; }

/* ---------- Type ---------- */
/* 1.06, not 1: the italic's tall ascenders need the room, and its own .96 keeps two italic lines on the same step */
.title { font: 700 clamp(3rem, 6vw, 5.5rem)/1.06 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.title em, .hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--deep); }
.title em { line-height: .96; }
.title--l { font-size: clamp(3rem, 5.6vw, 5.4rem); } /* capped so "your free hotel" stays on one line in the offer column */
.title--s { font-size: clamp(2rem, 3.2vw, 3.2rem); }
.title--light { color: var(--cream); }
.title--light em { color: var(--mist); }
.label { font: 500 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.label--mist { color: var(--mist); }

.split { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 64px; }
.split > p { color: var(--ink-2); max-width: 40ch; font-size: 18px; }
.link { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Buttons (Figma: Conforto Bold 18, caps, -2%, deep sea on Green Mist) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 99px; cursor: pointer; overflow: hidden; isolation: isolate; background: var(--mist); color: var(--deep); text-decoration: none; white-space: nowrap; font: 500 19px/1 var(--display); letter-spacing: -.01em; text-transform: lowercase; transition: transform .4s var(--ease), color .4s, box-shadow .4s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cream); transform: translateY(101%); border-radius: inherit; transition: transform .55s var(--ease); }
.btn i { font-style: normal; transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn:hover i { transform: translate(3px, -3px); }
.btn:active { transform: scale(.98); }
.btn--big { min-height: 64px; padding: 0 34px; }
.btn--cream { background: var(--cream); }
.btn--cream::before { background: var(--mist); }
.btn--line { background: transparent; color: var(--firefly); box-shadow: inset 0 0 0 1.5px var(--firefly); }
.btn--line::before { background: var(--mist); }
.btn--line:hover { color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--mist); }
.btn--ghost { min-height: 48px; padding: 0 22px; background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(255, 251, 245, .75); }
.btn--ghost::before { background: var(--mist); }
.btn--ghost:hover { color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--mist); }
/* On cream sections a cream fill would vanish, so hover fills with the main green and cream letters */
.hero .btn::before, .studio .btn::before, .work .btn::before { background: var(--deep); }
.hero .btn:hover, .studio .btn:hover, .work .btn:hover { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--deep); }
.hero .btn, .studio .btn, .work .btn { transition: color .35s; }
.btn--watch { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* Tape, as in the Figma: the textured masking tape from the hero, across the top edge */
.tape { position: absolute; z-index: 3; top: 0; left: 50%; width: 48%; max-width: 172px; aspect-ratio: 344 / 180; transform: translate(-50%, -40%); background: url(../assets/img/tape-hero.webp) center / contain no-repeat; pointer-events: none; }

/* ---------- Floating dock ---------- */
.dock { position: fixed; z-index: 60; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 16px; padding: 7px 7px 7px 10px; border-radius: 99px; background: var(--firefly); color: var(--cream); box-shadow: 0 24px 50px -20px rgba(9, 41, 41, .6); transform: translate(-50%, 160%); transition: transform .8s var(--ease); }
.dock.is-on { transform: translate(-50%, 0); }
/* off-screen dock leaves the tab order too */
.dock:not(.is-on) { visibility: hidden; transition: transform .6s var(--ease), visibility 0s linear .6s; }
.dock__mark { width: 40px; height: 40px; border-radius: 50%; background: var(--deep); display: grid; place-items: center; color: var(--cream); flex: none; }
.dock__mark svg { width: 26px; height: auto; }
.dock__text { display: grid; gap: 1px; line-height: 1.2; }
.dock__text b { font: 500 14px/1.2 var(--body); }
.dock__places { font-size: 12.5px; color: var(--mist); }
.btn--dock { min-height: 44px; padding: 0 18px; font-size: 15px; margin-left: 10px; }

/* ---------- Nav (Figma: 1350 × 62 pill; links Aeonik Medium 16 caps, centred) ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 20px 45px 0; pointer-events: none; }
.nav__pill { pointer-events: auto; max-width: 1350px; height: 62px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 7px 0 26px; border-radius: 999px; background: var(--firefly); color: var(--cream); box-shadow: 0 20px 40px -28px rgba(9, 41, 41, .6); }
.nav__logo { width: 104px; color: var(--cream); justify-self: start; }
.nav__logo svg { width: 100%; height: auto; display: block; }
.nav__links { display: flex; gap: 34px; font: 500 19px/1 var(--body); letter-spacing: -.005em; }
.nav__links a { text-decoration: none; color: var(--cream); transition: color .25s; }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--mist); transform: scale(0); transition: transform .4s var(--ease); }
.nav__links a:hover, .nav__links a.is-on { color: var(--mist); }
.nav__links a.is-on::after { transform: none; }
.btn--nav { justify-self: end; min-height: 48px; padding: 0 24px; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + 56px); overflow: hidden; }
.hero__head { position: relative; text-align: center; display: grid; justify-items: center; }
.hero__title { font: 700 clamp(4.6rem, min(8.6vw, 14.2vh), 9.6rem)/.92 var(--display); letter-spacing: -.05em; }
.hero__title .ln { display: block; overflow: hidden; padding: 0 .04em .06em; }
.hero__title .ln > span { display: inline-flex; align-items: center; gap: .16em; white-space: nowrap; }
.hero__title em { position: relative; top: .075em; font-size: 1.08em; letter-spacing: -.02em; } /* the italic sits high in its line: drop it to midway between the lines either side */
/* The reel (Figma: a small photo before "the reason"): hotel moments that cross-fade and settle */
.reel { position: relative; display: inline-block; flex: none; width: 1.72em; height: .9em; border-radius: 6px; overflow: hidden; background: var(--peach); transform: translateY(.075em); }
.reel__slide { position: absolute; inset: 0; opacity: 0; }
.reel__slide.is-prev { opacity: 1; z-index: 1; }
.reel__slide.is-on { opacity: 1; z-index: 2; transition: opacity 1.4s ease; }
.reel__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 6s cubic-bezier(.25, .6, .3, 1); }
.reel__slide.is-on img, .reel__slide.is-prev img { transform: none; }
.hero__sub { max-width: 46ch; margin-top: 30px; color: var(--ink-2); font-size: 21px; line-height: 1.45; }
.hero__act { display: grid; justify-items: center; gap: 34px; margin-top: 36px; }
.hero__note { font-size: 15px; line-height: 1.4; color: var(--ink-3); }
.hero__print { position: relative; margin-top: 96px; }
.tape--hero { width: 200px; max-width: none; transform: none; translate: -50% -46%; rotate: 10deg; } /* centred with its own properties, levelled to a slight tilt and half on the cream, so it reads as centred over the dark pergola too */
.hero__frame { overflow: hidden; height: 82vh; max-height: 900px; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; will-change: transform; }

/* ---------- Trust: logo marquee ---------- */
.trust { background: var(--firefly); color: var(--cream); }
.trust__in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; padding: 30px 0 30px var(--gutter); max-width: var(--max); margin: 0 auto; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; width: max-content; gap: 72px; padding-right: 72px; animation: marquee var(--dur, 40s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li { flex: none; }
.marquee__track img { width: auto; max-width: none; opacity: .92; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Who we are, then the numbers ---------- */
.intro { background: var(--deep); color: var(--cream); padding: 170px 0 150px; }
.intro__in { display: grid; justify-items: center; text-align: center; }
.intro__text { font: 500 clamp(2.4rem, 4.2vw, 3.75rem)/1.1 var(--display); letter-spacing: -.015em; max-width: 24ch; text-wrap: balance; }
/* four numbers, each under its own rule that draws in */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 120px; }
.stat { position: relative; padding-top: 40px; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 251, 245, .28); transform-origin: left; }
.js .stat::before { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.js .stats.is-in .stat::before { transform: none; }
.js .stats.is-in .stat:nth-child(2)::before { transition-delay: .12s; }
.js .stats.is-in .stat:nth-child(3)::before { transition-delay: .24s; }
.js .stats.is-in .stat:nth-child(4)::before { transition-delay: .36s; }
.stat__n { font: 700 clamp(4.25rem, 6.4vw, 5.75rem)/.9 var(--display); letter-spacing: -.035em; }
.stat__mask { display: inline-flex; overflow: hidden; padding: .06em .06em .04em 0; }
.stat__ch { display: inline-block; }
.stat__acc { color: var(--mist); margin-left: .02em; }
.stat__label { margin-top: 24px; font: 500 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.stat__sub { margin-top: 10px; font-size: 16px; color: rgba(255, 251, 245, .78); max-width: 26ch; }

/* ---------- You're always launching something ---------- */
.launching { background: var(--firefly); color: var(--cream); padding: var(--space) 0; }
.launching__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 96px; align-items: center; }
.launching__copy p { margin-top: 32px; padding-left: 22px; border-left: 2px solid var(--mist); color: rgba(255, 251, 245, .82); font-size: 18px; max-width: 42ch; }
.launching__cards { display: grid; gap: 14px; }
.pain { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; background: var(--cream); color: var(--ink); border-radius: 10px; padding: 12px 24px 12px 12px; }
.pain__img { overflow: hidden; border-radius: 6px; aspect-ratio: 1 / 1; }
.pain__img img { width: 100%; height: 100%; object-fit: cover; }
.pain h3 { font: 700 21px/1.1 var(--display); letter-spacing: -.015em; color: var(--deep); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mist); width: fit-content; }
.pain p { font-size: 15px; color: var(--ink-2); }

/* audience toggle (destinations): tourism boards | DMCs, the pill slides */
.aud { position: relative; display: inline-flex; padding: 5px; margin-bottom: 64px; border-radius: 99px; background: rgba(255, 251, 245, .06); box-shadow: inset 0 0 0 1px var(--line-d); }
.aud button { position: relative; z-index: 1; padding: 13px 22px; border: 0; border-radius: 99px; background: none; cursor: pointer; font: 500 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 251, 245, .72); transition: color .4s; }
.aud button[aria-selected="true"] { color: var(--firefly); }
.aud i { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; width: var(--tw, 0); transform: translateX(var(--tx, 0)); border-radius: 99px; background: var(--mist); transition: transform .55s var(--ease), width .55s var(--ease); }
.aud__panel[hidden] { display: none; }
.aud__panel { animation: audIn .8s var(--ease); }
@keyframes audIn { from { opacity: 0; transform: translateY(18px); } }

/* ---------- What we do: rows line up across the three columns ---------- */
.how { background: var(--cream); padding: var(--space) 0; }
.how__head { display: grid; justify-items: center; text-align: center; gap: 24px; }
.how__kicker { font-size: 14px; }
.how__head .title { max-width: 16ch; }
.how__head > p:not(.label) { max-width: 52ch; color: var(--ink-2); font-size: 18px; }
.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 14px 40px; margin-top: 88px; }
.place { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
.place__visual { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 4.6; margin-bottom: 18px; }
.place__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1.6s var(--ease); }
.place:hover .place__visual img { transform: scale(1.05); }
.place__word { font: 700 clamp(2.8rem, 4vw, 4.4rem)/.94 var(--display); letter-spacing: -.03em; color: var(--deep); }
.place__word span { display: inline-block; font: 500 12px/1 var(--body); letter-spacing: .06em; vertical-align: top; margin: .7em .6em 0 0; }
.place h3 { font: 700 24px/1.15 var(--display); letter-spacing: -.01em; }
.place__body { color: var(--ink-2); font-size: 16.5px; }
.place__makes { margin-top: 10px; border-top: 1px solid var(--line); }
.place__makes li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.place__makes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mist); flex: none; }

/* ---------- Campaigns end, big ideas don't (destinations, Figma 46:82) ---------- */
.title--stack em { display: block; }
.platform { background: var(--firefly); color: var(--cream); padding: var(--space) 0; }
.platform__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 88px; align-items: start; }
.platform__copy > p { margin-top: 30px; max-width: 44ch; color: rgba(255, 251, 245, .82); font-size: 18px; }
.platform__bars { display: grid; gap: 22px; max-width: 540px; margin-top: 48px; }
.platform__bar span { display: block; margin-bottom: 10px; font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.platform__bar--campaign span { color: rgba(255, 251, 245, .5); }
.platform__bar i { position: relative; display: block; height: 6px; border-radius: 6px; background: var(--mist); transform-origin: left; }
.platform__bar--campaign i { width: 16%; background: rgba(255, 251, 245, .3); }
.platform__bar b { position: absolute; top: 50%; left: calc(var(--n) * 16.66%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--firefly); box-shadow: 0 0 0 2.5px var(--mist); }
.js .platform__bar i { transform: scaleX(0); transition: transform 1.8s var(--ease); }
.js .platform__bar--campaign i { transition-duration: .9s; }
.js .platform__bars.is-in i { transform: none; }
.js .platform__bar b { scale: 0; transition: scale .6s var(--ease); transition-delay: calc(.5s + var(--n) * .22s); }
.js .platform__bars.is-in b { scale: 1; }
.platform__cards { display: grid; gap: 16px; }
.platform__cards li { padding: 34px 34px 36px; border-radius: 6px; background: var(--deep); }
.platform__cards h3 { font: 700 26px/1.12 var(--display); letter-spacing: -.01em; }
.platform__cards p { margin-top: 12px; color: rgba(255, 251, 245, .8); font-size: 16px; }
.platform__get { margin-top: 96px; padding-top: 34px; border-top: 1px solid var(--line-d); }
.platform__get-intro { margin-top: 16px; max-width: 34ch; font: 500 clamp(1.45rem, 2.1vw, 1.9rem)/1.22 var(--display); letter-spacing: -.01em; text-wrap: balance; }
/* the platform bar, opened up: four stages on one line, each adding to the last; the line fades on, because it keeps going */
.pstages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; }
.pstage { position: relative; padding: 30px 32px 0 0; border-top: 2px solid rgba(199, 217, 147, .4); }
.pstage:last-child { border-image: linear-gradient(90deg, rgba(199, 217, 147, .4), rgba(199, 217, 147, 0)) 1; }
.pstage::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--firefly); box-shadow: 0 0 0 2.5px var(--mist); }
.pstage__when { font: 500 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.pstage h3 { margin-top: 12px; font: 700 26px/1.1 var(--display); letter-spacing: -.01em; }
.pstage ul { display: grid; gap: 10px; margin-top: 18px; }
.pstage li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.45; color: rgba(255, 251, 245, .82); }
.pstage li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--mist); }
.platform__note { margin-top: 20px; font-size: 13px; color: rgba(255, 251, 245, .55); }

/* ---------- AI: live mock-ups on hotel photography, along the guest's journey ---------- */
.ai { background: var(--peach); padding: var(--space) 0; }
.ai__head { display: grid; justify-items: center; text-align: center; gap: 24px; }
.ai__head p { max-width: 50ch; color: var(--ink-2); font-size: 18px; }

.airows { display: grid; gap: 128px; margin-top: 104px; }
.airow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 96px; align-items: center; }
.airow--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.airow--flip .airow__copy { order: 2; }
.airow__n { font: italic 400 40px/1 var(--serif); color: var(--deep); margin-bottom: 20px; }
.airow__copy h3 { font: 700 clamp(2rem, 3vw, 3rem)/1.04 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.airow__copy > p:not(.airow__n) { margin-top: 20px; color: var(--ink-2); font-size: 18px; max-width: 40ch; }
.airow .ticks { margin-top: 26px; }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23092929' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat; }
.stage { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 5 / 4; display: grid; place-items: center; isolation: isolate; }
.stage__bg { position: absolute; inset: -4%; z-index: -2; width: 108%; max-width: none; height: 108%; object-fit: cover; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(255, 251, 245, .1), rgba(9, 41, 41, .18)); }
.ui { width: 80%; background: rgba(255, 255, 255, .97); border-radius: 18px; padding: 20px 20px 18px; box-shadow: 0 40px 80px -40px rgba(9, 41, 41, .55), 0 0 0 1px rgba(9, 41, 41, .06); font-family: var(--body); color: var(--ink); }
.ui__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #efece6; font-size: 14px; }
.ui__head b { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.ui__head b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 3px rgba(4, 98, 83, .15); }
.ui__head span { color: var(--ink-3); font-size: 13px; }
.ui__count { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--deep); font-weight: 500; }
/* the guest's journey: each stage fills as the mock-up works through it */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.journey li { display: grid; gap: 8px; font: 500 11.5px/1 var(--body); color: #aaa498; transition: color .4s; }
.journey i { position: relative; display: block; height: 4px; border-radius: 4px; background: #efece6; overflow: hidden; }
.journey i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--deep); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease), background-color .4s; }
.journey li.is-set { color: var(--ink-2); }
.journey li.is-set i::after { transform: none; }
.journey li.is-now { color: var(--deep); }
.journey li[data-kind="no"] i::after { background: var(--coral); }
.journey li[data-kind="mid"] i::after { background: #e8b65a; }
.journey li[data-kind="wait"] i::after { background: repeating-linear-gradient(90deg, var(--deep) 0 5px, transparent 5px 9px); opacity: .45; }
/* questions */
.ui__q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fbf9f5; box-shadow: 0 0 0 1px #efece6; margin-bottom: 9px; }
.ui__q > p:first-child { grid-column: 1 / -1; font-size: 14px; line-height: 1.4; }
.ui__tags { grid-row: 2; display: flex; gap: 6px; margin-top: 9px; }
.ui__tags i { font-style: normal; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: #eef3e0; color: var(--deep); }
.ui__stage { grid-row: 2; grid-column: 2; font-size: 11.5px; color: var(--ink-3); padding-bottom: 3px; }
.ui__foot { display: flex; gap: 8px; margin-top: 6px; }
.ui__foot span { font-size: 12.5px; padding: 7px 12px; border-radius: 9px; background: #f3f0ea; }
/* gaps */
.ui__engines { display: grid; gap: 8px; margin-bottom: 16px; }
.ui__engines p { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: #fbf9f5; box-shadow: 0 0 0 1px #efece6; font-size: 14px; }
.ui__engines b { font-weight: 500; }
.ui__pill { font-size: 12px; padding: 4px 10px; border-radius: 99px; }
.ui__pill--no { background: #fde7e1; color: #b44a35; }
.ui__pill--mid { background: #f8eed8; color: #8a6420; }
.ui__src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 16px; font-size: 12px; color: var(--ink-3); }
.ui__src span { margin-right: 4px; }
.ui__src i { font-style: normal; padding: 3px 9px; border-radius: 99px; background: #f3f0ea; color: var(--ink-2); }
.js .ui__src { opacity: 0; transition: opacity .6s; }
.js .ui__src.is-in { opacity: 1; }
.ui__checks { display: grid; gap: 9px; }
.ui__checks li { position: relative; padding-left: 28px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.ui__checks li::before { content: ""; position: absolute; left: 0; top: .1em; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #d9d4ca; }
.ui__checks li.is-done::before, .ui__checks li.is-on::before { background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat; box-shadow: none; }
.ui__checks li.is-wait { color: #b6b0a5; }
.ui__checks li.is-wait::before { animation: spin 1s linear infinite; box-shadow: inset 0 0 0 1.5px #e3ded4; border-top: 1.5px solid var(--deep); width: 14px; height: 14px; top: .2em; }
@keyframes spin { to { transform: rotate(360deg); } }
.ui__checks--fix li { display: flex; justify-content: space-between; gap: 14px; }
.ui__checks--fix em { font-style: normal; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; padding-top: .15em; }
.ui__bar { display: block; height: 6px; border-radius: 6px; background: #efece6; overflow: hidden; margin-bottom: 18px; }
.ui__bar i { display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; background: var(--deep); transition: width 1.2s var(--ease); }
/* entrance states, only when the script runs */
.js .ui__q, .js .ui__engines p, .js .ui__checks li { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease), box-shadow .4s, background-color .4s; }
.js .ui__q.is-in, .js .ui__engines p.is-in, .js .ui__checks li.is-in { opacity: 1; transform: none; }
.ui__q.is-hot { background: #fff; box-shadow: 0 0 0 1.5px var(--deep), 0 14px 30px -18px rgba(9, 41, 41, .4); }
.google { max-width: 1000px; margin: 128px auto 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 48px; align-items: center; padding: 40px 44px; border-radius: 20px; background: var(--firefly); color: var(--cream); }
.google__line { font: 700 clamp(1.6rem, 2.4vw, 2.3rem)/1.12 var(--display); letter-spacing: -.02em; max-width: 22ch; }
.google__sub { grid-row: 2; color: rgba(255, 251, 245, .72); font-size: 15.5px; }
.google .btn { grid-row: 1 / span 2; grid-column: 2; }

/* ---------- Work: Luce di Salina leads, full width ---------- */
.work { background: var(--cream); padding: var(--space) 0 150px; }
.salina-full { margin-top: 80px; overflow: hidden; }
.salina-full__img { width: 100%; will-change: transform; object-position: var(--focus, 50% 50%); }
.salina-lead { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 104px; align-items: start; padding-top: 84px; }
.salina-lead__copy { display: grid; gap: 18px; justify-items: start; }
.salina-lead__copy > p:not(.label) { color: var(--ink-2); font-size: 18px; max-width: 42ch; }
.salina-lead__copy .btn { margin-top: 12px; }
.salina-lead__quote blockquote { font: italic 400 clamp(1.8rem, 2.5vw, 2.45rem)/1.22 var(--serif); letter-spacing: -.005em; text-indent: -.4em; }
.salina-lead__quote figcaption { position: relative; display: grid; gap: 4px; margin-top: 30px; padding-left: 58px; }
.salina-lead__quote figcaption::before { content: ""; position: absolute; left: 0; top: .72em; width: 40px; height: 1.5px; background: var(--deep); }
.salina-lead__quote b { font: 500 16px/1.3 var(--body); }
.salina-lead__quote span { font-size: 14.5px; color: var(--ink-3); }
.salina-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 96px; }
.salina-apps li { overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 2; }
.salina-apps img { width: 100%; height: 100%; object-fit: cover; }

/* the platform case (destinations): play on the full shot, the pieces on the right */
.salina-full { position: relative; }

.pieces ol { margin-top: 18px; border-top: 1px solid var(--line); }
.pieces li { display: grid; grid-template-columns: 52px 150px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pieces li span { font: 500 12px/1 var(--body); letter-spacing: .06em; color: var(--deep); }
.pieces li b { font: 700 34px/1 var(--display); letter-spacing: -.03em; color: var(--deep); }
.pieces li p { font-size: 17px; color: var(--ink-2); }

/* the platform case (destinations, Figma 45:53): the line, the hero still, found / felt / chosen */

.pcase__status { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 99px; background: rgba(9, 41, 41, .72); color: var(--cream); font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.pcase__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

.salina-lead__quote.vlines blockquote { text-indent: 0; font-style: italic; line-height: 1.1; display: grid; gap: .1em; font-size: clamp(2rem, 3vw, 2.9rem); }
.salina-lead__quote.vlines blockquote span { font-size: inherit; color: var(--ink); }
.salina-lead__quote.vlines blockquote span:nth-child(odd) { color: var(--deep); }
.frow__status { justify-self: end; padding: 8px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-d); font: 500 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
/* AI answers by source market (destinations) */
.ui__markets { display: grid; gap: 8px; margin-bottom: 16px; }
.ui__mk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fbf9f5; box-shadow: 0 0 0 1px #efece6; }
.ui__mk p { font-size: 13.5px; line-height: 1.35; }
.ui__flag { min-width: 44px; padding: 5px 8px; border-radius: 6px; background: var(--firefly); color: var(--cream); font: 500 11px/1 var(--body); letter-spacing: .06em; text-align: center; }
.ui__mk .ui__pill { white-space: nowrap; }
.js .ui__mk { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease); }
.js .ui__mk.is-in { opacity: 1; transform: none; }

/* a featured film that can't get lost (destinations: Discover South America) */
.ffeat { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 64px; }
.ffeat__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: radial-gradient(120% 100% at 20% 0%, #1d4a47, var(--firefly-2) 70%); box-shadow: 0 0 0 1px var(--line-d); color: inherit; cursor: pointer; }
div.ffeat__media { cursor: default; align-content: center; gap: 18px; }
.ffeat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.ffeat__media:hover img { transform: scale(1.04); }
.ffeat__play { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; background: var(--mist); color: var(--firefly); transition: transform .5s var(--ease); }
button.ffeat__media:hover .ffeat__play { transform: scale(1.08); }
.ffeat__play.is-off { opacity: .35; }

.ffeat__copy { display: grid; gap: 14px; justify-items: start; }
.ffeat__copy h3 { font: 700 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--display); letter-spacing: -.02em; }
.ffeat__line { margin-top: -4px; font: italic 400 26px/1.2 var(--serif); color: var(--mist); }
.ffeat__copy > p:not(.label):not(.ffeat__line) { max-width: 40ch; color: rgba(255, 251, 245, .78); }
.ffeat__copy .btn { margin-top: 10px; }
.ffeat + .flist { margin-top: 88px; }

/* ---------- Made for the love of travel (Figma hover list) ---------- */
.travel { background: var(--firefly); color: var(--cream); padding: var(--space) 0; }
.flist { position: relative; margin-top: 64px; }
.flist ul { border-top: 1px solid var(--line-d); }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) 330px auto; align-items: center; gap: 32px; min-height: 124px; padding: 18px 26px; border-bottom: 1px solid var(--line-d); border-radius: 4px; transition: background-color .5s var(--ease); }
.frow.is-on { background: var(--firefly-2); }
.frow__place { font: 700 clamp(2rem, 3.1vw, 2.9rem)/1 var(--display); letter-spacing: -.02em; color: rgba(255, 251, 245, .3); transition: color .5s var(--ease); }
.frow__info { display: grid; gap: 7px; color: rgba(255, 251, 245, .32); transition: color .5s var(--ease); }
.frow__info b { font: 500 21px/1.2 var(--body); }
.frow__info span { font: 500 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.frow.is-on .frow__place { color: var(--mist); }
.frow.is-on .frow__info { color: var(--cream); }
.frow.is-on .frow__info span { color: var(--mist); }
.frow .btn--watch { justify-self: end; opacity: 0; transition: opacity .4s, transform .4s var(--ease); }
.frow.is-on .btn--watch, .frow .btn--watch:focus-visible { opacity: 1; }
.flist__still { position: absolute; left: 0; top: 0; z-index: 2; width: 300px; aspect-ratio: 3 / 2; margin: -100px 0 0 -150px; pointer-events: none; opacity: 0; transition: opacity .5s, scale .6s var(--ease); }
.flist__still.is-ready { opacity: 1; }
.flist__still.is-empty { opacity: 0; scale: .9; }
.flist__frame { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75); opacity: 0; transition: opacity .5s; }
.flist__frame.is-on { opacity: 1; }
.flist__frame img { width: 100%; height: 100%; object-fit: cover; }
.flist__vid { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .6s; }
.flist__vid.is-playing { opacity: 1; }
.flist__vid iframe { position: absolute; left: 50%; top: 50%; width: 178%; height: 178%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }

/* ---------- Beyond travel: the Figma scroll-through cards ---------- */
.beyond { background: var(--cream); padding: var(--space) 0 150px; overflow: hidden; }
.carousel { margin-top: 72px; }
.carousel__track { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 0 var(--edge); scrollbar-width: none; cursor: grab; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__track img { -webkit-user-drag: none; user-select: none; }
.wcard { flex: none; width: min(920px, 80vw); height: 560px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding: 32px; border-radius: 12px; background: var(--firefly); color: var(--cream); scroll-snap-align: start; }
.wcard__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 8px 0 0 8px; }
.wcard__text h3 { font: 700 clamp(2.2rem, 3.1vw, 3rem)/1 var(--display); letter-spacing: -.02em; }
.wcard__text > p:not(.label) { color: rgba(255, 251, 245, .78); font-size: 16.5px; }
.wcard__text .btn { margin-top: auto; }
.wcard__media { position: relative; display: block; overflow: hidden; border: 0; padding: 0; border-radius: 6px; background: #2c4a48; cursor: pointer; }
.wcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1.4s var(--ease); }
.wcard:hover .wcard__media img { transform: scale(1.05); }
.wcard__play { position: absolute; left: 22px; bottom: 22px; width: 62px; height: 62px; border-radius: 50%; background: var(--cream); color: var(--deep); display: grid; place-items: center; padding-left: 3px; transition: transform .5s var(--ease); }
.wcard__media:hover .wcard__play { transform: scale(1.1); }
.wcard__time { position: absolute; right: 22px; bottom: 22px; padding: 6px 10px; border-radius: 99px; background: rgba(9, 41, 41, .75); color: var(--cream); font: 500 12px/1 var(--body); }
.carousel__nav { display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.carousel__bar { position: relative; flex: 1; height: 2px; margin-right: 40px; background: rgba(9, 41, 41, .14); overflow: hidden; }
.carousel__bar i { position: absolute; left: 0; top: 0; height: 100%; width: 25%; background: var(--firefly); }
.carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--mist-2); color: var(--deep); display: grid; place-items: center; cursor: pointer; transition: background-color .3s, opacity .3s; }
.carousel__btn--next { background: var(--mist); }
.carousel__btn:hover:not(:disabled) { background: var(--deep); color: var(--cream); }
.carousel__btn:disabled { opacity: .45; cursor: default; }
.beyond__more { margin-top: 44px; }
.beyond__more a { font: 500 14px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.beyond__more a:hover { color: var(--firefly); }

/* ---------- Studio (Figma) ---------- */
.studio { background: var(--peach); }
.studio__band { position: relative; height: 92vh; max-height: 960px; overflow: hidden; display: grid; align-items: end; isolation: isolate; }
.studio__photo { position: absolute; inset: -6% 0; z-index: -2; width: 100%; height: 112%; object-fit: cover; }
.studio__band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 41, 41, 0) 45%, rgba(9, 41, 41, .55)); }
.studio__title { padding-bottom: 72px; display: grid; gap: 14px; }
.studio__title .label { color: var(--cream); }
.studio__body { padding-top: 120px; padding-bottom: 140px; }
.studio__lead { font: 500 clamp(2rem, 3.4vw, 3.15rem)/1.1 var(--display); letter-spacing: -.015em; max-width: 27ch; }
.studio__ai { margin-top: 28px; max-width: 54ch; color: var(--ink-2); font-size: 18px; text-wrap: pretty; }
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 80px; }
.promises li { display: grid; gap: 8px; align-content: start; }
.promises__img { overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; margin-bottom: 8px; }
.promises__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.promises li:hover .promises__img img { transform: scale(1.05); }
.promises h3 { font: 500 18px/1.3 var(--body); padding-top: 18px; border-top: 1px solid var(--line); }
.promises p { font-size: 16px; color: var(--ink-2); }
/* One shoot: sticky stacked rows (Ovlay "selected approaches") */
.studio .shoot { padding: 0 0 var(--space); }
.shoot__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; padding-top: 120px; border-top: 1px solid var(--line); }
.shoot__side { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 26px; justify-items: start; }
.shoot__side p { color: var(--ink-2); font-size: 18px; max-width: 40ch; }
.stackrows { display: grid; padding-bottom: 24vh; }
.srow { position: sticky; top: calc(var(--nav-h) + 40px + var(--i) * 74px); background: var(--peach); border: 1px solid rgba(9, 41, 41, .22); border-radius: 4px; margin-bottom: 18px; min-height: 250px; display: grid; grid-template-rows: auto 1fr; }
.srow__head { display: flex; align-items: baseline; gap: 20px; padding: 20px 28px; font: 700 clamp(1.9rem, 2.6vw, 2.6rem)/1 var(--display); letter-spacing: -.02em; text-transform: lowercase; }
.srow__head span { font: italic 400 1em/1 var(--serif); letter-spacing: -.01em; color: var(--deep); min-width: 1ch; }
/* text, what's included, then "You get" on the foot of the card: no dead space, and a shorter card */
.srow__body { display: grid; grid-template-rows: auto auto 1fr; gap: 16px; padding: 0 28px 24px 78px; }
.srow__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.srow__tags li { padding: 6px 12px; border-radius: 99px; background: rgba(4, 98, 83, .08); color: var(--deep); font: 500 13.5px/1.2 var(--body); }
.srow__out { align-self: end; }
.srow__body p { color: var(--ink-2); font-size: 17px; max-width: 48ch; }
.srow__out { padding-top: 16px; border-top: 1px solid var(--line); font-size: 15.5px !important; }
.srow__out b { color: var(--deep); font-weight: 500; margin-right: 6px; }
.shoot__lib-label { display: flex; align-items: baseline; gap: 14px; margin-top: 180px; padding-top: 44px; border-top: 1px solid var(--line); color: var(--deep); } /* its own section, clear of the steps and their button */
.shoot__lib-label span { font: 400 13px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.library { display: grid; grid-template-columns: 2.2fr .9fr 1.3fr .9fr 1.3fr; gap: 16px; align-items: end; margin-top: 24px; }
.lib { display: grid; gap: 10px; }
.lib__frame { position: relative; overflow: hidden; border-radius: 10px; }
.lib--wide .lib__frame { aspect-ratio: 16 / 9; }
.lib--tall .lib__frame { aspect-ratio: 9 / 16; }
.lib--square .lib__frame { aspect-ratio: 1 / 1; }
.lib__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.lib:hover .lib__frame img { transform: scale(1.06); }
.lib__fmt { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 99px; background: rgba(9, 41, 41, .72); color: var(--cream); font: 500 10.5px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.lib p { font-size: 14px; color: var(--ink-2); }

/* ---------- Proof ---------- */
.partners { position: relative; isolation: isolate; overflow: hidden; color: var(--cream); padding: 150px 0 140px; }
.partners__bg { position: absolute; inset: -6% 0; z-index: -2; width: 100%; height: 112%; object-fit: cover; }
.partners::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 41, 41, .82) 0%, rgba(9, 41, 41, .45) 55%, rgba(9, 41, 41, .75) 100%); }
.partners__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr); gap: 72px; align-items: end; }
.partners__title { font-size: clamp(3rem, 5.4vw, 5.8rem); }
.pslider { margin-top: 48px; }
.pslider__stage { display: grid; }
.pcard { grid-area: 1 / 1; position: relative; background: var(--deep); border-radius: 14px; padding: 52px 56px 44px; opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity .6s, transform .8s var(--ease), visibility .6s; }
.pcard.is-on { opacity: 1; visibility: visible; transform: none; }
.pcard blockquote { font: 500 clamp(1.5rem, 2.3vw, 2.2rem)/1.36 var(--display); letter-spacing: -.015em; max-width: 30ch; }
.pcard figcaption { margin-top: 30px; display: grid; gap: 4px; font-size: 14px; }
.pcard figcaption b { font-weight: 500; font-size: 16px; }
.pcard figcaption span { color: var(--mist); }

.pslider__nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.pslider__count { font: 500 12px/1 var(--body); letter-spacing: .1em; color: rgba(255, 251, 245, .7); }
.pslider__count b { color: var(--cream); font-weight: 500; }
.pslider__bar { flex: 1; height: 2px; background: rgba(255, 251, 245, .25); position: relative; margin: 0 12px; }
.pslider__bar i { position: absolute; left: 0; top: 0; height: 100%; background: var(--cream); transition: transform .7s var(--ease); }
.pslider__nav button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 251, 245, .2); color: var(--cream); cursor: pointer; font-size: 16px; transition: background-color .3s, color .3s; }
.pslider__nav button[data-dir="1"] { background: var(--cream); color: var(--firefly); }
.pslider__nav button:hover { background: var(--mist); color: var(--firefly); }
.creds { display: grid; gap: 14px; }
.creds li { padding: 24px 26px; border-radius: 14px; background: rgba(9, 41, 41, .72); box-shadow: 0 0 0 1px var(--line-d); }
.creds b { display: block; font: 700 30px/1.12 var(--display); letter-spacing: -.01em; color: var(--mist); margin-bottom: 8px; }
.creds p { font-size: 15px; color: rgba(255, 251, 245, .82); }

/* ---------- Team (Figma + deck specialists card) ---------- */
.team { padding: var(--space) 0; background: var(--cream); }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr) .82fr; gap: 20px; margin-top: 72px; align-items: start; }
.person__photo { overflow: hidden; border-radius: 6px; aspect-ratio: 290 / 363; background: var(--mist); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.person:hover .person__photo img { transform: scale(1.03); }
.person h3 { font: 500 28px/1.18 var(--display); letter-spacing: -.01em; margin-top: 20px; }
.person__role { font: 500 12.5px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); margin-top: 8px; }
.person__bio { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); max-width: 32ch; }
.person--plus { background: #f4f7f1; border-radius: 12px; padding: 26px 22px; box-shadow: 0 0 0 1px #dfe6d8; }
.person--plus h3 { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 2px solid var(--mist); font: 700 19px/1.2 var(--display); color: var(--deep); }
.person--plus p { font-size: 15.5px; color: var(--ink-2); }

/* ---------- Your free review ---------- */
.offer { position: relative; z-index: 2; background: var(--peach); border-radius: 44px 44px 0 0; margin-top: -48px; padding: var(--space) 0; }
.offer__top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 88px; align-items: center; }
.offer__intro { margin-top: 24px; color: var(--ink-2); font-size: 18px; max-width: 46ch; }
.gets { margin-top: 36px; border-top: 1px solid var(--line); }
.gets li { display: grid; grid-template-columns: 52px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); }
.gets span { font: italic 400 26px/1 var(--serif); color: var(--deep); }
.gets h3 { font: 700 20px/1.15 var(--display); letter-spacing: -.01em; }
.gets p { color: var(--ink-2); font-size: 16px; margin-top: 4px; }
.terms { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.terms li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; }
.terms li::before { content: "✓"; color: var(--deep); font-weight: 500; }
/* The review, as a document */
.doc { position: relative; height: 580px; }
.doc__page { position: absolute; width: 380px; height: 500px; border-radius: 6px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 40px 70px -40px rgba(9, 41, 41, .45); padding: 34px 32px; display: grid; align-content: start; gap: 14px; transition: transform 1s var(--ease); }
.doc__page--1 { left: 0; top: 50px; transform: rotate(-4deg); background: var(--deep); color: var(--cream); align-content: space-between; z-index: 3; }
.doc__page--2 { left: 120px; top: 20px; transform: rotate(2deg); z-index: 2; justify-items: end; text-align: right; }
.doc__page--3 { left: 230px; top: 64px; transform: rotate(7deg); z-index: 1; justify-items: end; text-align: right; }
.doc:hover .doc__page--1 { transform: rotate(-7deg) translateX(-20px); }
.doc:hover .doc__page--3 { transform: rotate(10deg) translateX(20px); }
.doc__logo { width: 64px; color: var(--cream); }
.doc__logo svg { width: 100%; height: auto; }
/* the Lento turtle isotype (outlined lockup, brand playbook p.25), top right of the review cover, opposite the logo */
.doc__turtle { position: absolute; top: 30px; right: 30px; width: 84px; height: auto; pointer-events: none; }
.doc__k { font: 500 10.5px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--deep); }
.doc__page--1 .doc__k { color: var(--mist); }
.doc__title { font: 700 40px/1 var(--display); letter-spacing: -.03em; }
.doc__title em { display: block; font: italic 400 1.08em/1.05 var(--serif); color: var(--mist); }
.doc__meta { font-size: 13px; color: rgba(255, 251, 245, .7); }
.doc__n { font: italic 400 54px/1 var(--serif); color: var(--deep); }
.doc__page--2 .doc__lines, .doc__page--3 .doc__lines { width: 92px; justify-items: end; }
.doc__page--2 .doc__k, .doc__page--3 .doc__k { max-width: 90px; }
.doc__lines { display: grid; gap: 9px; margin-top: 6px; }
.doc__lines i { height: 8px; border-radius: 4px; background: #eee8de; }
.doc__lines i:nth-child(2) { width: 88%; }
.doc__lines i:nth-child(3) { width: 72%; }
.doc__lines i:nth-child(4) { width: 80%; }
.goals { margin-top: 140px; }
.prints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 52px; }
.print > a { position: relative; display: grid; gap: 6px; padding: 10px 10px 18px; background: #fff; text-decoration: none; transform: rotate(var(--r)); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 22px 36px -24px rgba(9, 41, 41, .42); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.print > a:hover { transform: rotate(0deg) translateY(-8px); }
.print__photo { overflow: hidden; aspect-ratio: 4 / 4.2; margin-bottom: 10px; }
.print__photo img { width: 100%; height: 100%; object-fit: cover; }
.print__title { font: 700 18px/1.15 var(--display); letter-spacing: -.01em; padding: 0 4px; }
.print__pick { font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); padding: 6px 4px 0; }
.print.is-picked > a { transform: rotate(0deg) translateY(-8px); box-shadow: 0 0 0 3px var(--mist), 0 34px 46px -26px rgba(9, 41, 41, .5); }
/* Book it: Cal.com calendar first, a written request as the alternative */
/* Cal.com only keeps its one-screen desktop layout when the embed is at least ~770px wide, so the calendar column is a fixed 800px */
.book { display: grid; grid-template-columns: minmax(0, 1fr) 800px; gap: 80px; align-items: start; margin-top: 120px; padding-top: 96px; border-top: 1px solid var(--line); }
.book__side { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: 24px; justify-items: start; }
.book__side > p:not(.book__places) { color: var(--ink-2); font-size: 18px; max-width: 36ch; }
.book__places { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px 9px 13px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; color: var(--ink-2); }
.book__places { animation: placesFlash 2.6s ease-in-out infinite; }
.book__places::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(245, 131, 105, .55); animation: wtmPulse 2s ease-out infinite; }
@keyframes placesFlash { 0%, 100% { background: #fff; color: var(--ink-2); } 50% { background: var(--mist); color: var(--firefly); } }
.book__done { display: grid; gap: 6px; padding: 20px 22px 20px 58px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); position: relative; font-size: 15.5px; color: var(--ink-2); }
.book__done::before { content: ""; position: absolute; left: 20px; top: 22px; width: 24px; height: 24px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23092929' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat; }
.book__done-h { font: 700 20px/1.2 var(--display); letter-spacing: -.01em; color: var(--firefly); }
.book__when { font: 500 17px/1.4 var(--body); color: var(--firefly); }
.book__add { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.book__add a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--cream); box-shadow: 0 0 0 1px var(--line); font: 500 14.5px/1 var(--body); color: var(--firefly); text-decoration: none; transition: background .3s; }
.book__add a:hover { background: var(--mist-2); }
.book__add[hidden], .book__when[hidden] { display: none; }
.book__bring-h { margin-top: 10px; font: 500 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.book__bring { display: grid; gap: 6px; }
.book__bring li { position: relative; padding-left: 16px; }
.book__bring li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--deep); }
/* once booked, the confirmation takes the place of the pitch */
.book.is-booked .book__side > p:not(.book__places), .book.is-booked .ticks, .book.is-booked .book__places, .book.is-booked .book__tabs { display: none; }
.book__done[hidden], .book__places[hidden] { display: none; }
.book__main { min-width: 0; }
.book__tabs { position: relative; display: inline-flex; padding: 5px; margin-bottom: 20px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.book__tabs button { position: relative; z-index: 1; padding: 13px 22px; border: 0; border-radius: 99px; background: none; cursor: pointer; font: 500 15px/1 var(--body); color: var(--ink-2); transition: color .4s; }
.book__tabs button[aria-selected="true"] { color: var(--cream); }
.book__tabs i { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; width: var(--tw, 0); transform: translateX(var(--tx, 0)); border-radius: 99px; background: var(--firefly); transition: transform .55s var(--ease), width .55s var(--ease); }
.no-js .book__tabs button[aria-selected="true"] { background: var(--firefly); }
.book__panel[hidden] { display: none; }
.cal { position: relative; min-height: 560px; max-width: 1040px; } /* Cal stops widening at 1040px and centres itself; capping it keeps it in line with the tabs */
.cal.is-ready { min-height: 0; }
.cal__frame { position: relative; z-index: 1; }
.cal__state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink-3); font-size: 15px; transition: opacity .5s; }
.cal.is-ready .cal__state { opacity: 0; pointer-events: none; }
.cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--deep); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.cal__fail { position: absolute; z-index: 2; left: 0; right: 0; top: 56%; text-align: center; color: var(--ink-2); font-size: 15px; }
.cal__fail .link { color: var(--deep); font-weight: 500; }
.cal--empty { display: grid; place-items: center; align-content: center; gap: 16px; padding: 48px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: center; color: var(--ink-2); }
.madlib { position: relative; background: var(--deep); color: var(--cream); border-radius: 18px; padding: 56px 60px 48px; }
.madlib__sentence { font: 500 clamp(1.8rem, 2.6vw, 2.7rem)/1.6 var(--display); letter-spacing: -.015em; }
.field { display: inline-block; }
.field input { width: 8em; max-width: 100%; border: 0; border-bottom: 2px solid var(--mist); border-radius: 0; background: transparent; color: var(--cream); font: 500 1em/1.2 var(--display); letter-spacing: -.015em; padding: 0 2px 2px; transition: border-color .3s; }
.field--wide input { width: 11em; }
.field input::placeholder { color: rgba(255, 251, 245, .4); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.field input:focus { outline: none; border-bottom-color: var(--cream); }
.field input[aria-invalid="true"] { border-bottom-color: var(--coral); }
.madlib__site { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 18px; font-size: 14px; color: rgba(255, 251, 245, .7); }
.madlib__site input { flex: 1; min-width: 180px; max-width: 320px; border: 0; border-bottom: 1px solid rgba(255, 251, 245, .35); background: transparent; color: var(--cream); padding: 6px 2px; }
.madlib__site input:focus { outline: none; border-bottom-color: var(--mist); }
.madlib__errors { margin-top: 12px; display: grid; gap: 4px; }
.madlib__errors li { color: #ffd2c6; font-size: 14px; }
.madlib__foot { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.madlib__note { font-size: 14px; color: rgba(255, 251, 245, .72); max-width: 36ch; }
.madlib__done { outline: none; }
.madlib__done-h { font: 700 clamp(2rem, 3.6vw, 3.4rem)/1.02 var(--display); letter-spacing: -.025em; color: var(--mist); }
.madlib__done-body { margin-top: 12px; color: rgba(255, 251, 245, .85); font-size: 17px; }
.madlib.is-done .madlib__sentence, .madlib.is-done .madlib__site, .madlib.is-done .madlib__errors, .madlib.is-done .madlib__foot { display: none; }

/* ---------- FAQ ---------- */

/* ---------- Footer (Figma 1440 × 1008: links, live clocks, contact, legal, giant wordmark) ---------- */
.footer { background: var(--firefly); color: var(--cream); overflow: hidden; padding-top: 160px; }
.footer__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.footer__grid { display: grid; grid-template-columns: 1.15fr 1.7fr 1fr; gap: 32px; }
.footer__label { font: 500 14px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.footer a { text-decoration: none; transition: color .25s; }
.footer a:hover { color: var(--mist); }
.footer__links { display: grid; gap: 12px; margin-top: 24px; font: 400 22px/1.45 var(--body); justify-items: start; }
.clocks { display: grid; gap: 30px; max-width: 275px; margin-top: 30px; font: 400 22px/1.2 var(--body); }
.clocks li { display: flex; justify-content: space-between; }
.clocks time { color: var(--mist); font-variant-numeric: tabular-nums; }
.footer__contact { display: grid; gap: 10px; justify-items: start; margin-top: 26px; font: 500 30px/1.25 var(--display); letter-spacing: -.01em; }
.footer__social { margin-top: 28px; font-size: 18px; color: rgba(255, 251, 245, .7); }
.footer__base { display: flex; justify-content: space-between; gap: 12px; margin-top: 110px; padding-top: 34px; border-top: 1px solid rgba(255, 251, 245, .2); font: 500 14px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.footer__mark { max-width: var(--max); margin: 150px auto 0; padding: 0 calc(var(--gutter) + 24px); color: var(--cream); }
.footer__mark svg { display: block; width: 100%; height: auto; margin-bottom: -8.2%; }

/* ---------- Video lightbox ---------- */
.vbox { width: min(1200px, 92vw); max-width: none; padding: 0; border: 0; border-radius: 14px; background: #000; overflow: visible; }
.vbox::backdrop { background: rgba(9, 41, 41, .88); }
.vbox__frame { aspect-ratio: 16 / 9; }
.vbox__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; display: block; }
.vbox__close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--cream); color: var(--firefly); font-size: 22px; cursor: pointer; }

/* =================== Smaller screens =================== */
@media (max-width: 1200px) {
  :root { --gutter: 44px; --space: 136px; }
  .nav { padding-inline: 24px; }
  .nav__links { gap: 22px; font-size: 15px; }
  .team__grid { grid-template-columns: repeat(3, 1fr); }
  .doc__page { width: 330px; height: 440px; }
  .doc__page--2 { left: 90px; }
  .doc__page--3 { left: 170px; }
  .library { grid-template-columns: repeat(3, 1fr); }
  .frow { grid-template-columns: minmax(0, 1fr) 300px auto; }
}

@media (max-width: 1024px) {
  :root { --gutter: 32px; --space: 112px; }
  .nav__pill { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .split, .offer__top { grid-template-columns: 1fr; gap: 24px; }
  .trust__in { grid-template-columns: 1fr; gap: 18px; padding-right: var(--gutter); }
  .stats { grid-template-columns: 1fr 1fr; gap: 56px 32px; margin-top: 88px; }
  .launching__grid { grid-template-columns: 1fr; gap: 56px; }
  .places { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 72px; max-width: 560px; margin-inline: auto; }
  .place { grid-row: auto; grid-template-rows: none; gap: 12px; }
  .airow, .airow--flip { grid-template-columns: 1fr; gap: 48px; }
  .airow--flip .airow__copy { order: 0; }
  .google { grid-template-columns: 1fr; }
  .google .btn { grid-row: auto; grid-column: auto; justify-self: start; margin-top: 16px; }
  .salina-lead { grid-template-columns: 1fr; gap: 48px; }
  .frow { grid-template-columns: minmax(0, 1fr) 260px auto; gap: 20px; }
  .platform__grid, .ffeat { grid-template-columns: 1fr; gap: 48px; }
  .pieces li { grid-template-columns: 40px 110px minmax(0, 1fr); }
  .wcard { grid-template-columns: 1fr; height: auto; width: 84vw; }
  .wcard__media { aspect-ratio: 16 / 10; order: -1; }
  .partners__grid { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr 1fr; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .shoot__grid { grid-template-columns: 1fr; gap: 48px; }
  .shoot__side { position: static; }
  .stackrows { padding-bottom: 0; }
  .prints { grid-template-columns: repeat(2, 1fr); gap: 36px 22px; }
  .doc { height: 520px; max-width: 560px; }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 56px; }
}

@media (max-width: 1439px) {
  .book { gap: 56px; }
}
@media (max-width: 1279px) {
  /* too narrow for copy beside an 800px calendar: the calendar runs full width under the copy */
  .book { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .book__side { position: static; }
}
@media (min-width: 769px) and (max-width: 1279px) {
  .book__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
  .book__side > .ticks { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .book__side > .book__places { grid-column: 2; }
  .book__side > .book__done { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --space: 96px; --nav-h: 74px; }
  body { font-size: 16px; }
  .nav { padding: 10px 12px 0; }
  .nav__pill { height: 56px; padding-left: 18px; }
  .nav__logo { width: 72px; }
  .btn { font-size: 16px; }
  .btn--nav { min-height: 42px; padding: 0 14px; font-size: 13px; }
  .hero { padding-top: calc(var(--nav-h) + 34px); }
  .hero__title { font-size: var(--h1-phone, clamp(2.9rem, 13vw, 6rem)); }
  .hero__sub { font-size: 16px; margin-top: 18px; }
  .hero__act .btn { width: 100%; }
  .hero__print { margin-top: 56px; }
  .hero__frame { height: 60vh; }
  .marquee__track { gap: 48px; padding-right: 48px; }
  .intro { padding: 112px 0 96px; }
  .intro__text { font-size: clamp(1.8rem, 7.4vw, 3rem); }
  .stats { grid-template-columns: 1fr; gap: 44px; }
  .pain { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding-right: 16px; }
  .pain h3 { font-size: 18px; }
  .google { padding: 30px 24px; }
  .salina-apps { grid-template-columns: 1fr; }
  .studio__band { height: 70vh; }
  .studio__body { padding-top: 72px; }
  .partners { padding: 100px 0 88px; }
  .pcard { padding: 56px 24px 30px; }
  
  .person h3 { font-size: 20px; }
  .person__role { font-size: 10.5px; }
  .library { grid-template-columns: 1fr 1fr; }
  .lib--wide { grid-column: 1 / -1; }
  .srow { top: calc(var(--nav-h) + 16px + var(--i) * 58px); min-height: 230px; }
  .srow__head { padding: 16px 18px; font-size: 1.7rem; }
  .srow__body { padding: 0 18px 20px; gap: 14px; }
  .offer { border-radius: 30px 30px 0 0; }
  .doc { height: 420px; }
  .doc__page { width: 250px; height: 340px; padding: 22px; }
  .doc__page--2 { left: 50px; }
  .doc__page--3 { left: 96px; }
  .doc__title { font-size: 30px; }
  .goals { margin-top: 96px; }
  .print__title { font-size: 15.5px; }
  .book { margin-top: 96px; padding-top: 72px; }
  .madlib { padding: 34px 22px 30px; }
  .madlib__sentence { font-size: clamp(1.45rem, 6vw, 2rem); }
  .madlib__foot .btn { width: 100%; }
  .footer { padding-top: 96px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__contact { font-size: 24px; }
  .footer__base { flex-direction: column; margin-top: 64px; }
  .footer__mark { margin-top: 72px; padding: 0 var(--gutter); }
  .dock { left: 12px; right: 12px; bottom: 12px; transform: translateY(160%); gap: 10px; }
  .dock.is-on { transform: none; }
  .dock__mark { display: none; }
  .dock__text { margin-left: 10px; }
  .dock__text b { font-size: 13px; }
  .btn--dock { margin-left: auto; }
}

/* =================== Phones: the card-scan visit (QR on a business card lands here) =================== */
@media (max-width: 768px) {
  /* one call to action at a time: the dock takes over from the nav button */
  .btn--nav { transition: opacity .4s; }
  .dock-on .btn--nav { opacity: 0; pointer-events: none; }
  .frow { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .frow__place, .frow__info { color: var(--cream); }
  .frow .btn--watch { opacity: 1; justify-self: start; }
  .flist__still { display: none; }
  .aud { margin-bottom: 40px; }
  .aud button { padding: 11px 14px; font-size: 11.5px; }
  .platform__get { margin-top: 64px; }
  .platform__cards li { padding: 26px 24px 28px; }
  
  
  .pieces li { grid-template-columns: 34px minmax(0, 1fr); }
  
  
  
  
  
  .ui__mk { grid-template-columns: auto minmax(0, 1fr); }
  .ui__mk .ui__pill { grid-column: 2; justify-self: start; }
  .pieces li p { grid-column: 2; }
  .pieces li b { font-size: 28px; }
  .ffeat__play { width: 68px; height: 68px; }
  .dock { padding: 6px 6px 6px 16px; }
  .dock__text b { display: none; }
  .dock__places { font-size: 13.5px; }
  /* numbers as a 2 × 2 */
  .stats { grid-template-columns: 1fr 1fr; gap: 40px 20px; margin-top: 72px; }
  .stat, .stat:first-child { padding: 28px 0 0; }
  .stat__n { font-size: clamp(3.2rem, 15vw, 4.4rem); }
  .stat__label { margin-top: 16px; }
  .stat__sub { font-size: 14.5px; }
  /* found / felt / chosen: swipe between them, deliverables as chips */
  .places { display: flex; gap: 14px; max-width: none; margin: 56px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .places::-webkit-scrollbar { display: none; }
  .place { flex: 0 0 84%; scroll-snap-align: start; }
  .place__visual { aspect-ratio: 4 / 3; margin-bottom: 10px; }
  .place__visual img { object-position: var(--focus-m, var(--focus, 50% 50%)); }
  .place__word { font-size: 2.6rem; }
  .place__makes { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin-top: 6px; }
  .place__makes li { padding: 6px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: 13.5px; }
  .place__makes li::before { display: none; }
  /* AI mock-ups: full width, no squeeze */
  .airows { gap: 80px; margin-top: 64px; }
  .airow, .airow--flip { gap: 28px; }
  .stage { aspect-ratio: auto; padding: 28px 12px; border-radius: 20px; }
  .ui { width: 100%; padding: 16px 14px 14px; border-radius: 14px; }
  .ui__head { flex-wrap: wrap; row-gap: 2px; }
  .journey li { font-size: 10.5px; }
  .ui__q > p:first-child { font-size: 13.5px; }
  
  .google { margin-top: 80px; }
  /* work and studio */
  .salina-lead { padding-top: 48px; }
  .salina-apps { gap: 12px; margin-top: 48px; }
  .frow { min-height: 0; }
  .frow__place { font-size: 1.9rem; }
  .promises { gap: 28px 16px; margin-top: 56px; }
  .promises__img { aspect-ratio: 1; }
  .studio__ai { font-size: 16px; }
  .shoot__grid { padding-top: 72px; }
  .srow { position: static; min-height: 0; margin-bottom: 10px; }
  .srow__body { gap: 18px; }
  /* the shoot library swipes too */
  .library { display: flex; align-items: flex-end; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .library::-webkit-scrollbar { display: none; }
  .lib { flex: 0 0 44%; scroll-snap-align: start; }
  .lib--wide { flex-basis: 78%; grid-column: auto; }
  .shoot__lib-label { flex-wrap: wrap; row-gap: 4px; margin-top: 56px; padding-top: 28px; }
  /* proof, team, offer */
  .person--plus { grid-column: 1 / -1; }
  .gets li { grid-template-columns: 40px 1fr; }
}

/* =================== Front page: scanned from Tom's business card. Who you met, your page, his details. =================== */
.home-root, .home { background: var(--cream); }
.home { min-height: 100vh; min-height: 100svh; }
.home__in { width: 100%; max-width: 460px; min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; }
.home__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home__logo { display: block; width: 84px; color: var(--deep); }
.home__logo svg { display: block; width: 100%; height: auto; }
.home__event { font-size: 13px; color: var(--ink-3); }
.home__me { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.home__face { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--mist); }
.home__me p { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.2; }
.home__me b { font: 700 15px/1.2 var(--display); }
.home__me span { font-size: 13.5px; color: var(--ink-3); }
.home__h1 { margin-top: 44px; font: 700 clamp(1.9rem, 8.4vw, 2.4rem)/1.06 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.home__sub { margin-top: 12px; font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.home__paths { display: grid; gap: 10px; margin-top: 30px; }
.home__prompt { margin-bottom: 2px; font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.home__path { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 80px; padding: 14px 14px 14px 22px; border-radius: 16px; background: var(--deep); color: var(--cream); text-decoration: none; transition: background-color .25s, transform .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.home__path span { display: grid; gap: 5px; }
.home__path b { font: 700 21px/1.1 var(--display); letter-spacing: -.015em; }
.home__path small { font-size: 14px; color: rgba(255, 251, 245, .75); }
.home__path i { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--firefly); transition: transform .4s var(--ease); }
.home__path:hover { background: var(--firefly); }
.home__path:hover i { transform: translateX(3px); }
.home__path:active { transform: scale(.985); }
.home__path:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.home__save { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; font-weight: 500; color: var(--firefly) !important; transition: box-shadow .25s; }
.home__save:hover { box-shadow: inset 0 0 0 1.5px var(--deep); }
/* With a mouse and no touch screen, a contact card is less use, so the button copies the link instead */
.home__copy { display: none; border: 0; background: none; font-family: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .js .home__me .home__save[download] { display: none; }
  .js .home__copy { display: inline-flex; }
}
.home__gallery { display: none; }
@media (min-width: 1024px) {
  /* desktop: the card keeps its place on the left half, the work fills the right */
  .home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home__in { grid-column: 1; grid-row: 1; justify-content: center; margin: 0 clamp(56px, 5.5vw, 110px) 0 auto; }
  .home__logo { width: 116px; }
  .home__gallery { display: block; position: sticky; top: 0; grid-column: 2; grid-row: 1; height: 100vh; height: 100svh; padding: 20px 20px 20px 0; }
  .home__gallery::before { content: ""; position: absolute; inset: 20px 20px 20px 0; border-radius: 24px; background: var(--peach); }
  .home__shot { position: absolute; inset: 20px 20px 20px 0; margin: 0; overflow: hidden; border-radius: 24px; opacity: 0; transition: opacity 1.6s ease; }
  .home__shot.is-on { opacity: 1; }
  .home__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s cubic-bezier(.25, .6, .3, 1); }
  .home__shot.is-on img { transform: none; }
  .home__shot figcaption { position: absolute; left: 22px; bottom: 22px; padding: 9px 15px; border-radius: 99px; background: rgba(9, 41, 41, .72); color: var(--cream); font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
  .js .home__gallery { animation: homeIn .9s var(--ease) .2s both; }
}
@keyframes homeIn { from { opacity: 0; transform: translateY(12px); } }
.js .home__in > * { animation: homeIn .6s var(--ease) both; }
.js .home__in > :nth-child(2) { animation-delay: .04s; }
.js .home__in > :nth-child(3) { animation-delay: .08s; }
.js .home__in > :nth-child(4) { animation-delay: .12s; }
.js .home__in > :nth-child(5) { animation-delay: .16s; }

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

/* AI search alerts: dated headlines as a stack of phone notifications, newest on top */
.alerts { width: 100%; max-width: 560px; margin-top: 18px; text-align: left; }
.alerts__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 10px; font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.alerts__live { display: inline-flex; align-items: center; gap: 8px; }
.alerts__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(245, 131, 105, .55); animation: wtmPulse 2s ease-out infinite; }
/* every card sits in the same grid cell and stretches to the tallest, so the stack never changes size */
.alerts__list { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; }
.alert { grid-area: 1 / 1; display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px 14px 13px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(9, 41, 41, .06), 0 14px 30px -18px rgba(9, 41, 41, .35); transform-origin: 50% 100%; transition: transform .6s var(--ease), opacity .45s ease; }
.alert[data-pos="0"] { z-index: 3; }
.alert[data-pos="1"] { z-index: 2; transform: translateY(12px) scale(.95); opacity: .75; }
.alert[data-pos="2"] { z-index: 1; transform: translateY(23px) scale(.9); opacity: .45; }
.alert[data-pos="off"] { z-index: 0; transform: translateY(23px) scale(.9); opacity: 0; }
.alert[data-pos="out"] { z-index: 4; transform: translateY(-26px) scale(1.02); opacity: 0; }
.alert:not([data-pos="0"]) > * { visibility: hidden; }
.alert__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--firefly); color: var(--mist); font: 700 17px/1 var(--display); }
.alert__body { flex: 1; min-width: 0; }
.alert__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.2; color: var(--ink-3); }
.alert__top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.alert__top time { flex: none; }
.alert__text { margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.alert__text a { color: var(--deep); font-size: 13px; text-underline-offset: 3px; white-space: nowrap; }
@keyframes wtmPulse { 70%, 100% { box-shadow: 0 0 0 8px rgba(245, 131, 105, 0); } }
@media (max-width: 768px) { .alerts__head { padding: 0 4px 10px; } .alert { padding: 12px 14px 13px 12px; } .alert__text { font-size: 14px; } }

.ffeat__copy > p.ffeat__credit { font-size: 12px; color: rgba(255, 251, 245, .5); }

/* form fields keep a visible focus ring (the underline alone is too faint) */
.madlib input:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; border-radius: 2px; }
.madlib__privacy { margin-top: 8px; font-size: 13px; color: var(--ink-3); max-width: 52ch; }

/* iOS ignores overflow-x on body for touch panning; clip stops the page sliding sideways without making a scroll container */
html { overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }

@media (max-width: 768px) {
  /* case studies read like the feature film: one framed shot, no extra frames */
  .salina-full { margin: 48px var(--gutter) 0; border-radius: 10px; aspect-ratio: 4 / 3; }
  .salina-full__img { height: 100%; object-fit: cover; }
  .salina-apps { display: none; }
  /* work cards: shorter, smaller type */
  .wcard { gap: 18px; padding: 18px; }
  .wcard__text { gap: 12px; padding: 0; }
  .wcard__text h3 { font-size: 1.75rem; }
  .wcard__text > p:not(.label) { font-size: 15px; }
  .wcard__text .btn { min-height: 46px; }
  /* how we work: the steps swipe sideways instead of stacking down the page */
  .stackrows { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .stackrows::-webkit-scrollbar { display: none; }
  .srow { flex: 0 0 84%; position: static; margin: 0; min-height: 0; scroll-snap-align: start; }
  .srow__out { align-self: start; } /* swipe cards share the tallest card's height: keep "You get" with its tags, not floating at the foot */
}

/* ---------- Mobile pass: a shorter, clearer page that gets to the offer sooner ---------- */
@media (max-width: 768px) {
  :root { --space: 80px; }
  /* hero: left-aligned and direct, one full-width call to action with its note centred beneath,
     then the photo opens out from a taped print as you scroll (as on desktop) */
  .hero__head { text-align: left; justify-items: start; }
  .hero__title .reel { display: none; }
  .hero__title .ln > span { gap: 0; }
  .hero__sub { margin-top: 16px; font-size: 17px; line-height: 1.5; }
  .hero__act { justify-self: stretch; justify-items: stretch; gap: 14px; margin-top: 30px; }
  .hero__act .btn { min-height: 58px; }
  .hero__note { justify-self: center; max-width: 34ch; font-size: 13.5px; text-align: center; }
  .hero__print { margin-top: 52px; }
  .hero__frame { height: 62vh; max-height: 560px; }
  .tape--hero { width: 150px; }
  .intro { padding: 88px 0 80px; }
  .intro__text { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.18; }
  /* long stacks become swipe rows, like the process steps */
  .prints, .promises, .creds { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 8px var(--gutter) 20px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .prints { margin-top: 22px; margin-bottom: -26px; padding-top: 30px; padding-bottom: 48px; }
  .print > a { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 26px -20px rgba(9, 41, 41, .42); }
  .prints::-webkit-scrollbar, .promises::-webkit-scrollbar, .creds::-webkit-scrollbar { display: none; }
  .prints > li, .promises > li { flex: 0 0 64%; scroll-snap-align: start; }
  .creds > li { flex: 0 0 80%; scroll-snap-align: start; }
  .promises__img { aspect-ratio: 4 / 3; }
  .airows { gap: 56px; }
}

/* ---------- Mobile round 2: hero, AI, quote card, film cards, nav ---------- */
.fcards { display: none; }
@media (max-width: 768px) {
  /* AI search: no alerts ticker on phones; every step shows its mock-up first */
  .ai .alerts { display: none; }
  .airow .stage { order: -1; }
  /* the Salina testimonial matches the page's other quotes */
  .salina-lead__quote:not(.vlines) { padding: 28px 24px 26px; border-radius: 14px; background: var(--deep); color: var(--cream); }
  .salina-lead__quote:not(.vlines) blockquote { font: 500 1.2rem/1.42 var(--display); letter-spacing: -.01em; text-indent: 0; }
  .salina-lead__quote:not(.vlines) figcaption { margin-top: 22px; padding-left: 0; }
  .salina-lead__quote:not(.vlines) figcaption::before { display: none; }
  .salina-lead__quote:not(.vlines) b { color: var(--cream); font-size: 15px; }
  .salina-lead__quote:not(.vlines) span { color: var(--mist); font-size: 13.5px; }
  /* films: the Discover South America card, repeated for every film, in one swipe row */
  .ffeat, .flist { display: none; }
  .fcards { display: flex; gap: 16px; margin: 40px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .fcards::-webkit-scrollbar { display: none; }
  .fcard { flex: 0 0 86%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; scroll-snap-align: start; }
  .fcard__media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 10px; overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: #1d4a47; cursor: pointer; }
  div.fcard__media { cursor: default; }
  .fcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .fcard h3 { font: 700 2rem/1.02 var(--display); letter-spacing: -.02em; }
  .fcard .ffeat__line { margin-top: -4px; font-size: 22px; }
  .fcard__body { color: rgba(255, 251, 245, .78); font-size: 15.5px; }
  .fcard .btn { margin-top: 6px; min-height: 48px; padding: 0 22px; font-size: 17px; }
  /* the top bar steps aside while you read (the dock has the button) and comes back when you scroll up */
  .nav { transition: transform .45s var(--ease); }
  .nav-away .nav { transform: translateY(-130%); }
  .nav-away .nav:focus-within { transform: none; }
}

/* ---------- Mobile final clean-up: one alignment for every section opener, calmer statements ---------- */
@media (max-width: 768px) {
  .intro__in, .how__head, .ai__head { justify-items: start; text-align: left; }
  .how__head .title { max-width: none; }
  .intro__text { max-width: none; text-wrap: pretty; }
  .studio__band { height: 56vh; }
  .studio__lead { font-size: 1.5rem; line-height: 1.2; }
  .doc { display: none; }
  .book { margin-top: 56px; padding-top: 48px; }
}

@media (max-width: 1024px) {
  .pstages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .pstage:nth-child(2) { border-image: none; }
}
@media (max-width: 768px) {
  /* platform stages swipe, the same as the other rows on phones */
  .platform__get-intro { font-size: 1.35rem; }
  .pstages { display: flex; margin: 30px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .pstages::-webkit-scrollbar { display: none; }
  .pstage { flex: 0 0 80%; padding-right: 26px; scroll-snap-align: start; }
  .pstage h3 { font-size: 22px; }
  .pstage li { font-size: 15px; }
}

/* ---------- Hero intro ----------
   CSS rather than the scripts, so it starts with the first paint: a slow phone never shows the hero and then
   replays it once the scripts arrive. The print rises without fading, so the photo counts as painted the moment
   it lands. Same timings and easing as the motion system (expo out). The frame and photo also start where the
   scroll effect picks them up, so nothing jumps when the scripts take over. */
@media (prefers-reduced-motion: no-preference) {
  .js .nav__pill { animation: introDrop .9s var(--ease) backwards; }
  .js .hero__title .ln > span { animation: introLine 1.1s var(--ease) .05s backwards; }
  .js .hero__title .ln:nth-child(2) > span { animation-delay: .13s; }
  .js .hero__title .ln:nth-child(3) > span { animation-delay: .21s; }
  .js .reel { animation: introReel 1.2s var(--ease) .3s backwards; }
  .js .hero__sub { animation: introRise .9s var(--ease) .4s backwards; }
  .js .hero__act > * { animation: introRise .9s var(--ease) .47s backwards; }
  .js .hero__act > :nth-child(2) { animation-delay: .54s; }
  .js .hero__print { animation: introPrint 1.2s var(--ease) .55s backwards; }
  .js .hero__frame { clip-path: inset(0% 25% 0% 25% round 8px); transform: rotate(-1.5deg); }
  .js .hero__photo { transform: scale(1.1); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
  .js .hero__frame { clip-path: inset(0% 5% 0% 5% round 12px); transform: rotate(-1deg); }
}
@keyframes introDrop { from { transform: translateY(-24px); opacity: 0; } }
@keyframes introLine { from { transform: translateY(115%); } }
@keyframes introReel { from { width: 0; } }
@keyframes introRise { from { transform: translateY(16px); opacity: 0; } }
@keyframes introPrint { from { transform: translateY(60px); } }

/* ---------- Tap targets: at least 44px on phones, without changing how anything looks ---------- */
.beyond__more a, .footer__social a, .footer__base a { position: relative; }
.beyond__more a::after, .footer__social a::after, .footer__base a::after { content: ""; position: absolute; inset: -16px -6px; }
@media (max-width: 768px) {
  .nav__logo { display: flex; align-items: center; min-height: 44px; }
  .btn--nav { min-height: 44px; }
  .book__tabs button { padding-block: 14.5px; }
  .aud button { padding-block: 16.5px; }
  /* the sentence fields: the tap area grows upwards, the text and its underline stay where they are */
  .field input { padding-top: 14px; margin-top: -12px; }
  .madlib__site input { padding-block: 11px; }
  .footer__links, .footer__contact { gap: 0; }
  .footer__links a, .footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Private case studies: the password in a quiet square box, so the green button stays the one thing to press ---------- */
.case-pass { display: grid; gap: 8px; justify-items: start; margin-top: 2px; }
.case-pass__key { display: inline-flex; align-items: center; gap: 16px; min-height: 50px; padding: 8px 18px; border-radius: 6px; background: rgba(9, 41, 41, .04); box-shadow: inset 0 0 0 1px var(--line); color: var(--firefly); }
.case-pass__key span { font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.case-pass__key code { font: 700 19px/1 var(--display); letter-spacing: -.01em; color: var(--deep); user-select: all; }
.case-pass__copy { position: relative; padding: 0; border: 0; background: none; color: var(--deep); font: 500 14.5px/1 var(--body); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.case-pass__copy::after { content: ""; position: absolute; inset: -14px -10px; } /* 44px to tap */
.case-pass__copy:hover { color: var(--firefly); }
.case-pass__note { font-size: 14px; color: var(--ink-3); }