/* ============ Fonts ============ */
/* Lubidow: the high-contrast display serif */
@font-face {
  font-family: "Lubidow";
  src: url("../fonts/lubidow-regular.otf") format("opentype"),
       url("../fonts/lubidow-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lubidow";
  src: url("../fonts/lubidow-italic.otf") format("opentype"),
       url("../fonts/lubidow-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* Salina (trial cuts): classic serif, used for the letter-spaced eyebrow */
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-Black-BF64b607e21d227.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-BlackItalic-BF64b607e2f28be.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-Bold-BF64b607e27d416.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-BoldItalic-BF64b607e3018ae.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-Book-BF64b607e29dd58.otf") format("opentype"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-BookItalic-BF64b607e2dc77d.otf") format("opentype"); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-ExtraLight-BF64b607e2354fd.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-ExtraLightItalic-BF64b607e2c7775.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-Light-BF64b607e2a98d5.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-LightItalic-BF64b607e2f3814.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-Medium-BF64b607e29dac2.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-MediumItalic-BF64b607e30a326.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-Regular-BF64b607e2aa94e.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Salina"; src: url("../fonts/Salina-Trial-RegularItalic-BF64b607e308841.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

/* ============ Tokens ============ */
:root {
  /* 1 design px (prototype frame was ~1378px wide) */
  --vw: 100vw; /* overwritten by JS with the width minus the scrollbar */
  --u: calc(var(--vw) / 1378);
  --brown: #682d17;
  --brown-2: #c4552a;
  --sand: #c79d61;
  --gray: #f0f0f0;
  --gray-2: #f5f5f5;
  --line: #e4e4e4;
  --white: #fff;
  --serif: "Lubidow", "Cormorant Garamond", "Didot", Georgia, serif;
  --sans: "Lexend Exa", "Arial", sans-serif; /* stand-in: the wide sans in the design is not Salina or Lubidow */
  --serif-2: "Salina", Georgia, serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--brown);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }
h1, h2, p { margin: 0; font-weight: 400; }
b { font-weight: 700; }

/* ============ Reveal on enter ============ */
.reveal {
  opacity: 0;
  transform: translateY(calc(40 * var(--u)));
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.up { transform: translateY(calc(70 * var(--u))); }
.reveal.fade { transform: none; }
.reveal.line { transform: scaleX(0); transform-origin: left; }
.reveal.img { transform: translateY(calc(90 * var(--u))); clip-path: inset(18% 0 0 0); transition-property: opacity, transform, clip-path; }
.reveal.img img { transform: scale(1.15); transition: transform 1.6s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.reveal.in.img img { transform: none; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); letter-spacing: .04em;
  border-radius: 999px; transition: background .3s, color .3s, transform .3s var(--ease);
}
.btn--light {
  background: #fff; color: #3a2a1f;
  height: calc(48 * var(--u)); padding: 0 calc(42 * var(--u));
  font-size: calc(16 * var(--u));
}
.btn--light:hover { background: var(--brown); color: #fff; }
.btn--ghost {
  border: 1px solid rgba(255,255,255,.8); color: #fff;
  height: calc(48 * var(--u)); padding: 0 calc(32 * var(--u));
  font-size: calc(16 * var(--u));
}
.btn--ghost:hover { background: #fff; color: var(--brown); }

/* ============ Nav ============ */
.nav {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  height: calc(98 * var(--u));
  display: flex; align-items: center;
  padding: 0 calc(30 * var(--u));
  background: linear-gradient(rgba(70,45,20,.35), rgba(70,45,20,0));
}
.nav__burger {
  width: calc(44 * var(--u)); height: calc(16 * var(--u));
  background: none; border: 0; padding: 0; cursor: pointer; position: relative;
}
.nav__burger span { position: absolute; left: 0; height: 1px; background: #fff; transition: width .3s; }
.nav__burger span:first-child { top: 0; width: 100%; }
.nav__burger span:last-child { bottom: 0; width: 70%; }
.nav__burger:hover span:last-child { width: 100%; }
.nav__links {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: calc(495 * var(--u));
  display: flex; gap: calc(31 * var(--u));
}
.nav__links a {
  color: #fff; font-size: calc(17 * var(--u)); letter-spacing: .03em; position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-left: auto; }

/* ============ Hero ============ */
.hero {
  position: relative; height: 100vh; min-height: calc(640 * var(--u));
  overflow: hidden; background: #c49a5e;
}
/* the stage covers the viewport while keeping the 1378x926 frame proportions */
.hero__stage {
  --s: max(var(--vw) / 1378, 100vh / 926);
  position: absolute; left: 50%; top: 50%;
  width: calc(1378 * var(--s)); height: calc(926 * var(--s));
  transform: translate(-50%, -50%);
}
.pc {
  position: absolute; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s)); max-width: none; height: auto;
  will-change: transform; pointer-events: none; user-select: none;
}
.pc.blur { filter: blur(calc(6 * var(--s))); }
.pc.arch-back { transform-origin: 0 0; }

/* Copy */
.hero__copy { position: absolute; z-index: 5; will-change: transform; left: calc(92 * var(--u)); top: 0; right: auto; bottom: 0; width: calc(600 * var(--u)); display: flex; flex-direction: column; justify-content: center; padding-top: calc(60 * var(--u)); color: #fff; }
.hero__kicker { font-size: calc(30 * var(--u)); letter-spacing: .02em; }
.hero__title {
  font-family: var(--serif); font-size: calc(132 * var(--u)); line-height: .85;
  margin: calc(34 * var(--u)) 0 calc(28 * var(--u)) calc(-4 * var(--u)); letter-spacing: -.01em;
}
.hero__lead { font-size: calc(17 * var(--u)); line-height: 1.32; letter-spacing: .02em; max-width: calc(350 * var(--u)); }
.hero__copy .btn { align-self: flex-start; margin-top: calc(28 * var(--u)); }
.hero__copy, .hero__kicker, .hero__title, .hero__lead { text-shadow: 0 2px 20px rgba(80,45,10,.15); }

.hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 10; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55) 45%, rgba(255,255,255,.92) 78%, #fff);
}
.hero__arrow {
  position: absolute; z-index: 12; left: calc(var(--vw) * .51 - 7 * var(--u)); bottom: calc(40 * var(--u));
  width: calc(14 * var(--u)); color: #fff; will-change: transform;
}
.hero__arrow svg { width: 100%; display: block; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(10px) } }

/* ============ 01 ============ */
.s1 {
  display: grid;
  grid-template-columns: calc(729 * var(--u)) calc(357 * var(--u)) 1fr;
  grid-template-rows: calc(185 * var(--u)) calc(413 * var(--u)) calc(328 * var(--u));
  column-gap: calc(4 * var(--u));
}
.s1__head { grid-column: 1; grid-row: 1; display: flex; align-items: center; padding-left: calc(62 * var(--u)); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eyebrow { font-family: var(--serif-2); font-weight: 350; font-size: calc(28 * var(--u)); letter-spacing: .14em; }
.s1__num { grid-column: 2 / 4; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: calc(40 * var(--u)); }
.num { font-family: var(--serif); font-size: calc(76 * var(--u)); letter-spacing: .04em; line-height: 1; }
.s1__text { grid-column: 1; grid-row: 2; display: flex; align-items: center; padding: 0 calc(40 * var(--u)) 0 calc(63 * var(--u)); border-bottom: 1px solid var(--line); overflow: hidden; }
.s1__lead { font-size: calc(44 * var(--u)); line-height: 1.32; letter-spacing: .015em; }
.s1__cta { grid-column: 1; grid-row: 3; display: flex; align-items: center; padding-left: calc(68 * var(--u)); padding-bottom: calc(40 * var(--u)); overflow: hidden; }
.discover { font-family: var(--serif); font-size: calc(62 * var(--u)); letter-spacing: -.01em; display: inline-flex; gap: calc(14 * var(--u)); align-items: baseline; }
.discover__arrow { font-family: var(--sans); font-size: .75em; transition: transform .4s var(--ease); }
.discover:hover .discover__arrow { transform: translateY(8px); }
.s1__img { overflow: hidden; }
.s1__img img { width: 100%; height: 100%; object-fit: cover; }
.s1__img--beach { grid-column: 2; grid-row: 2 / 4; }
.s1__img--pool { grid-column: 3; grid-row: 2; height: calc(305 * var(--u)); }
.s1__img--dhow { grid-column: 3; grid-row: 2 / 4; margin-top: calc(309 * var(--u)); }

/* ============ 02 ============ */
.s2 { padding: calc(17 * var(--u)) 0 0 calc(8 * var(--u)); }
.s2__grid {
  display: grid;
  grid-template-columns: calc(712 * var(--u)) calc(357 * var(--u)) 1fr;
  grid-template-rows: calc(430 * var(--u)) calc(298 * var(--u));
  gap: calc(10 * var(--u)) calc(9 * var(--u));
  height: calc(738 * var(--u));
}
.card { position: relative; overflow: hidden; color: #fff; display: block; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover img { transform: scale(1.06) !important; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.25), transparent 40%); pointer-events: none; }
.card > span { position: absolute; z-index: 2; }
.card--unesco { grid-row: 1 / 3; }
.card--beach { grid-row: 1 / 3; grid-column: 2; }
.card--dhow { grid-column: 3; grid-row: 1; }
.card--jet { grid-column: 3; grid-row: 2; }
.card__label { font-size: calc(26 * var(--u)); font-weight: 700; letter-spacing: .06em; line-height: 1.2; white-space: nowrap; }
.card__label--lg { font-size: calc(38 * var(--u)); left: calc(55 * var(--u)); bottom: calc(26 * var(--u)); }
.card__label--sm { font-size: calc(19 * var(--u)); }
.swap { display: grid; overflow: hidden; }
.swap > span { grid-area: 1 / 1; transition: transform .6s var(--ease), opacity .6s; }
.swap > span + span { transform: translateY(100%); opacity: 0; }
.card:hover .swap > span:first-child { transform: translateY(-100%); opacity: 0; }
.card:hover .swap > span + span { transform: none; opacity: 1; }
.card__center { inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(190 * var(--u)); gap: calc(26 * var(--u)); }
.card__top { left: calc(26 * var(--u)); right: calc(-10 * var(--u)); top: calc(30 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
.card__bottom { left: calc(22 * var(--u)); right: calc(14 * var(--u)); bottom: calc(30 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
.circle {
  width: calc(46 * var(--u)); height: calc(46 * var(--u)); border: 1.5px solid #fff; border-radius: 50%;
  display: grid; place-items: center; transition: background .4s, transform .5s var(--ease);
}
.circle svg { width: 45%; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease); }
.circle--lg { width: calc(88 * var(--u)); height: calc(88 * var(--u)); left: calc(507 * var(--u)); bottom: calc(30 * var(--u)); }
.circle--lg svg { width: 30%; }
.circle--sm { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.card:hover .circle { background: #fff; color: var(--brown); }
.card:hover .circle svg { transform: rotate(-45deg); }
.s2__title { display: flex; align-items: center; gap: calc(40 * var(--u)); padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u)) calc(40 * var(--u)); }
.display { font-family: var(--serif); font-size: calc(80 * var(--u)); letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.rule { flex: 1; height: 1px; background: var(--line); }

/* ============ 01 -> 02 pinned scene (desktop) ============ */
.story { position: relative; height: calc((926 + 909) * var(--u)); }
.story__pin { position: sticky; top: 0; height: calc(926 * var(--u)); overflow: hidden; background: #fff; }
.story__stage { position: relative; width: 100%; height: 100%; }
.mv {
  position: absolute;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.mv > .card, .mv > .st-img { width: 100%; height: 100%; }
.st-img { overflow: hidden; }
.st-img img { width: 100%; height: 100%; object-fit: cover; }
.st-text > div { position: absolute; display: flex; align-items: center; }
.st-head { left: 0; top: 0; width: calc(729 * var(--u)); height: calc(185 * var(--u)); padding-left: calc(62 * var(--u)); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-num { right: calc(40 * var(--u)); top: 0; height: calc(185 * var(--u)); }
.st-lead { left: 0; top: calc(185 * var(--u)); width: calc(729 * var(--u)); height: calc(413 * var(--u)); padding: 0 calc(40 * var(--u)) 0 calc(63 * var(--u)); border-bottom: 1px solid var(--line); }
.st-cta { left: 0; top: calc(598 * var(--u)); width: calc(729 * var(--u)); height: calc(328 * var(--u)); padding: 0 0 calc(40 * var(--u)) calc(68 * var(--u)); }
/* the 02 labels on the two photos that travel from 01 fade in during the move */
.story .lab-fade > span { opacity: var(--lab, 0); transition: none; }
.story .card--unesco, .story .card--jet { grid-row: auto; grid-column: auto; }
.flow-m { display: none; }

/* ============ 03 ============ */
.s3 { position: relative; padding: calc(110 * var(--u)) calc(14 * var(--u)) calc(60 * var(--u)) calc(75 * var(--u)); overflow: hidden; }
.s3__watermark {
  position: absolute; left: 0; right: 0; top: calc(60 * var(--u));
  text-align: center; font-family: var(--sans); font-size: calc(400 * var(--u)); line-height: 1;
  letter-spacing: .12em; padding-left: .12em; color: #f4f4f4; pointer-events: none; user-select: none;
}
.tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); margin-top: calc(250 * var(--u)); }
.tile {
  height: calc(203 * var(--u)); border-radius: calc(26 * var(--u)); display: grid; place-items: center;
  font-family: var(--serif); font-size: calc(62 * var(--u)); letter-spacing: -.01em;
  background-size: cover; background-position: center; overflow: hidden; position: relative;
  transition: transform 1.2s var(--ease), box-shadow .4s;
}
.tile span { position: relative; transition: transform .5s var(--ease); }
.tile--book { background: var(--gray); color: var(--brown); }
.tile--img { color: #fff; }
.tile--img::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.08); transition: background .4s; }
.tile--arrow { background: var(--brown); color: #fff; }
.tile--arrow svg { width: calc(96 * var(--u)); transition: transform .5s var(--ease); }
.tile:hover span { transform: scale(1.06); }
.tile--img:hover::before { background: rgba(0,0,0,.25); }
.tile--arrow:hover svg { transform: translateX(14px); }
/* stacked → spread (set from JS via --i) */
.tiles .tile { transform: translateX(calc(var(--i) * -78%)); z-index: calc(4 - var(--i)); }
.tiles .tile:nth-child(1) { --i: 0; }
.tiles .tile:nth-child(2) { --i: 1; transition-delay: .05s; }
.tiles .tile:nth-child(3) { --i: 2; transition-delay: .1s; }
.tiles .tile:nth-child(4) { --i: 3; transition-delay: .15s; }
.tiles.in .tile { transform: none; }

.quotes { margin-top: calc(42 * var(--u)); }
.quotes__viewport { overflow: hidden; margin-right: calc(-14 * var(--u)); }
.quotes__track { display: flex; gap: calc(22 * var(--u)); transition: transform .9s var(--ease); }
.quote {
  position: relative; flex: 0 0 calc(413 * var(--u)); height: calc(244 * var(--u));
  margin-top: calc(32 * var(--u)); padding: calc(34 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u));
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transform: translateX(calc(80 * var(--u))); transition: opacity .8s var(--ease), transform 1s var(--ease);
}
.quotes.in .quote { opacity: 1; transform: none; }
.quotes.in .quote:nth-child(2) { transition-delay: .1s; }
.quotes.in .quote:nth-child(3) { transition-delay: .2s; }
.quote__mark {
  position: absolute; top: calc(-34 * var(--u)); left: calc(16 * var(--u));
  width: calc(62 * var(--u)); color: var(--brown);
}
.quote__mark svg { width: 100%; display: block; fill: currentColor; }
.quote blockquote { margin: 0; font-family: var(--serif-2); font-size: calc(21 * var(--u)); line-height: 1.3; letter-spacing: .01em; }
.quote figcaption { display: flex; align-items: center; justify-content: space-between; font-family: var(--serif-2); font-style: italic; font-size: calc(21 * var(--u)); padding-right: calc(20 * var(--u)); }
.quote figcaption img { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; object-fit: cover; }
.quote--gray { background: var(--gray-2); color: #222; }
.quote--brown { background: var(--brown); color: #fff; }
.quote--brown .quote__mark { color: var(--brown-2); }
.quote--line { background: #fff; color: #222; border: 1px solid #d8d8d8; }
.quotes__dots { display: flex; justify-content: center; gap: calc(11 * var(--u)); margin-top: calc(18 * var(--u)); padding-right: calc(60 * var(--u)); }
.quotes__dots button { width: calc(48 * var(--u)); height: 3px; border: 0; padding: 0; background: #e2e2e2; cursor: pointer; transition: width .4s var(--ease), background .4s; }
.quotes__dots button[aria-selected="true"] { width: calc(66 * var(--u)); background: var(--brown); }

/* ============ Mobile ============ */
@media (max-width: 760px) {
  .story { display: none; }
  .flow-m { display: block; }
  :root { --u: calc(var(--vw) / 600); }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(60,35,12,.6), rgba(60,35,12,.35) 45%, rgba(60,35,12,0) 70%); }
  .nav__links { display: none; }
  .hero__copy { width: auto; right: calc(40 * var(--u)); justify-content: flex-start; padding-top: 16vh; }
  .hero__title { font-size: calc(150 * var(--u)); }
  .hero__lead, .nav__links a, .btn--light, .btn--ghost { font-size: calc(22 * var(--u)); }
  .s1 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: calc(6 * var(--u)); }
  .s1__head { grid-column: 1; padding: calc(40 * var(--u)) calc(30 * var(--u)); border-right: 0; }
  .s1__num { grid-column: 2; padding-right: calc(30 * var(--u)); border-bottom: 1px solid var(--line); }
  .s1__text { grid-column: 1 / 3; grid-row: 2; padding: calc(50 * var(--u)) calc(30 * var(--u)); }
  .s1__cta { grid-column: 1 / 3; grid-row: 3; padding: calc(40 * var(--u)) calc(30 * var(--u)); }
  .s1__img--beach { grid-column: 1; grid-row: 4 / 6; height: calc(700 * var(--u)); }
  .s1__img--pool { grid-column: 2; grid-row: 4; height: calc(300 * var(--u)); }
  .s1__img--dhow { grid-column: 2; grid-row: 5; margin-top: calc(6 * var(--u)); height: calc(394 * var(--u)); }
  .s2 { padding: calc(20 * var(--u)) calc(10 * var(--u)) 0; }
  .s2__grid { grid-template-columns: 1fr 1fr; grid-template-rows: calc(600 * var(--u)) calc(380 * var(--u)) calc(380 * var(--u)); height: auto; }
  .card--unesco { grid-column: 1 / 3; grid-row: 1; }
  .card--beach { grid-column: 1; grid-row: 2 / 4; }
  .card--dhow { grid-column: 2; grid-row: 2; }
  .card--jet { grid-column: 2; grid-row: 3; }
  .circle--lg { left: auto; right: calc(30 * var(--u)); }
  .s2__title .display { font-size: calc(64 * var(--u)); }
  .s3 { padding-left: calc(20 * var(--u)); padding-right: calc(20 * var(--u)); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { height: calc(220 * var(--u)); }
  .tiles .tile { transform: translateY(calc(var(--i) * -40%)); }
  .quote { flex-basis: calc(520 * var(--u)); height: auto; min-height: calc(300 * var(--u)); }
  .quote blockquote, .quote figcaption { font-size: calc(26 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.img img, .tiles .tile, .quote { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__arrow svg { animation: none; }
}