:root {
  --ink: #202421;
  --paper: #f2efe7;
  --warm: #e4d6c2;
  --sage: #b2bda9;
  --rust: #b76b52;
  --line: rgba(32, 36, 33, .25);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 24px 5vw;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.wordmark {
  font-size: 20px;
  letter-spacing: -.05em;
}

.issue,
.top-link,
.kicker,
.section-label,
figcaption,
.hero-note,
footer {
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}

.issue {
  justify-self: center;
  opacity: .6;
}

.top-link {
  justify-self: end;
}

.top-link span,
.under-link span {
  color: var(--rust);
  margin-left: 8px;
}

.rail {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left top;
  opacity: .5;
}

.rail span {
  font: 9px "DM Mono", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.concept-hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 7vw;
  align-items: center;
  padding: 8vw 9vw 9vw 12vw;
}

.hero-note {
  position: absolute;
  top: 112px;
  right: 5vw;
  color: var(--rust);
}

.hero-copy {
  max-width: 540px;
}

.kicker {
  color: var(--rust);
  margin: 0 0 24px;
}

h1,
h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .91;
}

h1 {
  font-size: clamp(58px, 8vw, 126px);
}

h2 {
  font-size: clamp(48px, 6.7vw, 104px);
}

h1 em,
h2 em {
  color: var(--rust);
  font-weight: 500;
}

.hero-lead {
  max-width: 330px;
  margin: 36px 0 42px;
  font-size: 17px;
  line-height: 1.55;
}

.under-link {
  display: inline-block;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  font: 11px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-image {
  margin: 0;
  transform: rotate(2deg);
}

.hero-image img {
  display: block;
  width: 100%;
  height: 570px;
  object-fit: cover;
  filter: saturate(.85);
}

figcaption {
  display: flex;
  gap: 16px;
  margin-top: 15px;
  line-height: 1.5;
}

figcaption span {
  color: var(--rust);
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: 4vw;
  padding: 9vw 9vw 10vw 12vw;
  border-top: 1px solid var(--line);
}

.section-label {
  padding-top: 8px;
  color: var(--rust);
}

.evidence {
  background: var(--warm);
}

.evidence-title h2,
.audience-statement h2 {
  font-size: clamp(54px, 6vw, 94px);
}

.stats {
  align-self: end;
  display: grid;
  gap: 34px;
}

.stats > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.stats strong {
  font: 500 clamp(42px, 5vw, 78px) "Playfair Display", serif;
  line-height: .9;
}

.stats span {
  max-width: 150px;
  font: 11px/1.45 "DM Sans", sans-serif;
  text-transform: uppercase;
}

.audience-concept {
  position: relative;
  overflow-x: clip;
  grid-template-areas: "label title words" ". copy words";
  background: var(--paper);
}

.audience-concept .section-label {
  grid-area: label;
}

.audience-statement {
  grid-area: title;
}

.traveller-words {
  grid-area: words;
  font: italic 39px/1.1 "Playfair Display", serif;
  opacity: .42;
}

.traveller-track {
  display: block;
}

.traveller-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.traveller-copy:nth-child(2) {
  display: none;
}

.traveller-copy span:nth-child(2n) {
  color: var(--rust);
}

.side-copy {
  grid-area: copy;
  max-width: 350px;
  margin: 50px 0 0;
  font-size: 15px;
  line-height: 1.65;
}

.process-concept {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  gap: 4vw;
  padding: 9vw 9vw 10vw 12vw;
  background: var(--ink);
  color: var(--paper);
}

.process-concept .section-label {
  color: #d98b70;
}

.process-intro h2 {
  font-size: clamp(56px, 7vw, 108px);
}

.process-list {
  grid-column: 3;
  padding-top: 12px;
}

.process-list article {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;
  padding: 23px 0;
  border-top: 1px solid rgba(242, 239, 231, .3);
}

.process-list article > span {
  color: #d98b70;
  font: 11px "DM Mono", monospace;
}

.process-list h3 {
  margin: 0 0 10px;
  font: 500 33px "Playfair Display", serif;
}

.process-list p {
  max-width: 300px;
  margin: 0;
  color: rgba(242, 239, 231, .7);
  font-size: 14px;
  line-height: 1.55;
}

.contact-concept {
  padding: 12vw 12vw 13vw;
  background: var(--sage);
}

.contact-concept h2 {
  max-width: 900px;
  margin-bottom: 50px;
  font-size: clamp(58px, 9vw, 140px);
}

.services-concept {
  background: var(--paper);
}

.honeymoon-offer {
  background: var(--warm);
  color: var(--ink);
}

.honeymoon-offer .section-label,
.honeymoon-offer .kicker {
  color: #d98b70;
}

.offer-title {
  grid-column: 1;
}

.offer-list {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-self: end;
}

.offer-list article {
  min-height: 250px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.offer-list article > span {
  font: 10px "DM Mono", monospace;
  text-transform: uppercase;
  color: #d98b70;
}

.offer-list h3 {
  margin: 52px 0 15px;
  font: 500 clamp(28px, 3vw, 46px) "Playfair Display", serif;
}

.offer-list p {
  max-width: 230px;
  color: rgba(32, 36, 33, .78);
  line-height: 1.55;
}

.services-lead h2,
.experiences-title h2,
.trust-title h2 {
  font-size: clamp(54px, 6vw, 94px);
}

.service-list {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: start;
  gap: 2vw;
}

.service-list article {
  min-height: 250px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.service-list article > span,
.experience-list span {
  display: block;
  color: var(--rust);
  font: 10px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.service-list h3 {
  margin: 32px 0 15px;
  font: 500 clamp(28px, 3vw, 46px) "Playfair Display", serif;
}

.service-list p {
  max-width: 240px;
  line-height: 1.55;
  font-size: 14px;
}

.service-main {
  background: var(--warm);
  padding: 15px 22px 24px !important;
}

.service-main .under-link {
  margin-top: 28px;
}

.image-band {
  position: relative;
  min-height: 230px;
  display: flex;
  align-items: end;
  padding: 22px 9vw 22px 12vw;
  overflow: hidden;
  color: var(--paper);
  background: linear-gradient(100deg, #5d655b, #b4916f 53%, #273f42);
}

.image-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.55) brightness(.62);
}

.image-band div {
  position: relative;
  z-index: 1;
  font: 10px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.experiences-concept {
  position: relative;
  background: var(--ink);
  color: var(--paper);
}

.experiences-concept .section-label,
.experiences-concept .kicker {
  color: #d98b70;
}

.experiences-concept .experience-list span {
  color: #fffdf7;
  text-shadow: 0 1px 8px rgba(20, 24, 22, .45);
}

.experience-list {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: end;
}

.experience-list article {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 18px;
  background: #3a403b;
}

.experience-list article img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  filter: saturate(.8);
}

.experience-list article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 25%, rgba(20, 24, 22, .1));
}

.experience-list article > *:not(img) {
  position: relative;
  z-index: 1;
}

.experience-list article:nth-child(2) {
  min-height: 350px;
  background: #435d5d;
  transform: translateY(-35px);
}

.experience-list article:nth-child(3) {
  background: #78684f;
}

.drift-image {
  position: absolute;
  z-index: 3;
  width: min(280px, 30vw);
  top: calc(100% - 155px);
  border: 12px solid var(--paper);
  padding-bottom: 38px;
  background: var(--paper);
  box-shadow: 0 18px 36px rgba(32, 36, 33, .14);
  transform: rotate(-4deg);
}

.drift-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(32, 36, 33, .55);
  filter: saturate(.7);
}

.drift-image-one {
  left: 4vw;
  width: min(360px, 38vw);
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
}

.process-drift-image {
  display: none;
}

.experience-list h3 {
  margin: 0;
  font: 500 30px/1 "Playfair Display", serif;
}

.experience-list small {
  font: 9px "DM Mono", monospace;
  text-transform: uppercase;
  opacity: .7;
}

.ilaria-concept {
  align-items: center;
  background: var(--warm);
}

.ilaria-image {
  grid-column: 2;
  transform: rotate(-2deg);
}

.ilaria-image img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  filter: saturate(.7);
}

.ilaria-image span {
  display: block;
  margin-top: 12px;
  font: 10px "DM Mono", monospace;
  text-transform: uppercase;
}

.ilaria-copy {
  grid-column: 3;
}

.ilaria-copy h2 {
  font-size: clamp(40px, 4.8vw, 72px);
}

.ilaria-copy > p:not(.kicker) {
  max-width: 310px;
  margin: 30px 0 35px;
  line-height: 1.6;
}

.ilaria-fact {
  color: var(--rust);
  font: 11px "DM Mono", monospace;
  text-transform: uppercase;
}

.ilaria-fact strong {
  display: block;
  color: var(--ink);
  font: 500 42px/.9 "Playfair Display", serif;
  margin-bottom: 8px;
}

.reviews-concept {
  background: var(--sage);
}

.honeymoon-contact {
  background: var(--paper);
}

.honeymoon-proof {
  background: var(--paper);
}

.proof-title {
  grid-column: 1;
}

.proof-stats {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-self: end;
}

.proof-stats div {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.proof-stats strong {
  display: block;
  font: 500 clamp(42px, 5vw, 78px)/.9 "Playfair Display", serif;
}

.proof-stats span {
  display: block;
  margin-top: 12px;
  font: 10px/1.45 "DM Mono", monospace;
  text-transform: uppercase;
}

.reviews-title {
  grid-column: 1;
}

.review-rotator {
  grid-column: 2 / 4;
  position: relative;
  min-height: 170px;
  align-self: end;
}

.review-rotator blockquote {
  position: absolute;
  inset: 0;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateX(14%);
  animation: review-slide 9s infinite;
  animation-fill-mode: both;
}

.review-rotator blockquote:nth-child(2) {
  animation-delay: 2.8s;
}

.review-rotator blockquote:nth-child(3) {
  animation-delay: 5.6s;
}

.review-rotator blockquote p {
  margin: 0;
  font: 500 20px/1.25 "Playfair Display", serif;
}

.review-rotator cite {
  display: block;
  margin-top: 22px;
  font: 10px/1.4 "DM Mono", monospace;
  text-transform: uppercase;
}

.contact-note {
  max-width: 280px;
  margin: 30px 0 34px;
  font-size: 15px;
  line-height: 1.55;
}

@keyframes review-slide {
  0%, 7% { opacity: 0; transform: translateX(14%); }
  14%, 40% { opacity: 1; transform: translateX(0); }
  48% { opacity: 0; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

.trust-concept {
  background: var(--paper);
}

.trust-list {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-self: end;
}

.trust-list p {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.trust-list strong {
  display: block;
  font: 500 35px "Playfair Display", serif;
}

.trust-list span {
  display: block;
  max-width: 130px;
  margin-top: 12px;
  font: 10px/1.45 "DM Mono", monospace;
  text-transform: uppercase;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 22px 5vw;
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 800px) {
  .topbar {
    min-height: 58px;
    padding: 16px 6vw;
    font-size: 10px;
  }

  .wordmark {
    font-size: 15px;
  }

  .top-link,
  .issue,
  .kicker,
  .section-label,
  figcaption,
  .hero-note,
  footer {
    font-size: 8px;
  }

  .topbar {
    grid-template-columns: 1fr auto;
  }

  .issue,
  .rail {
    display: none;
  }

  .concept-hero,
  .section-grid,
  .process-concept {
    display: block;
    padding: 54px 7vw 64px;
  }

  .process-concept {
    position: relative;
    min-height: 980px;
  }

  h1 {
    font-size: clamp(48px, 14vw, 68px);
    line-height: .9;
  }

  h2,
  .evidence-title h2,
  .audience-statement h2,
  .services-lead h2,
  .experiences-title h2,
  .trust-title h2 {
    font-size: clamp(42px, 12vw, 62px);
    line-height: .92;
  }

  .hero-lead {
    max-width: 290px;
    margin: 26px 0 32px;
    font-size: 14px;
    line-height: 1.5;
  }

  .hero-note {
    display: none;
  }

  .hero-image {
    margin: 46px 0 0;
  }

  .hero-image img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .review-rotator {
    min-height: 150px;
    margin-top: 38px;
  }

  .contact-concept {
    padding-top: 48px;
    padding-bottom: 54px;
  }

  .contact-concept h2 {
    margin-bottom: 28px;
  }

  .proof-stats {
    display: block;
    margin-top: 38px;
  }

  .offer-list {
    display: block;
    margin-top: 38px;
  }

  .offer-list article {
    min-height: 0;
    margin-bottom: 34px;
  }

  .offer-list h3 {
    margin: 24px 0 12px;
  }

  .proof-stats div {
    margin-bottom: 26px;
  }

  figcaption {
    gap: 10px;
    margin-top: 10px;
    line-height: 1.4;
  }

  .section-label {
    margin-bottom: 28px;
  }

  .stats,
  .traveller-words,
  .process-list {
    margin-top: 42px;
  }

  .stats {
    gap: 24px;
  }

  .stats > div {
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    min-height: 52px;
  }

  .stats strong {
    flex: 0 0 64px;
    font-size: 50px;
  }

  .stats span {
    flex: 1 1 auto;
    max-width: 180px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .02em;
  }

  .audience-concept {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, .72fr);
    grid-template-areas:
      "label label"
      "title words"
      "copy words";
    column-gap: 18px;
    padding-right: 5vw;
    min-height: 690px;
  }

  .audience-concept > * {
    min-width: 0;
  }

  .traveller-words {
    grid-area: words;
    align-self: start;
    margin-top: 30px;
    gap: 2px;
    font-size: clamp(24px, 7vw, 36px);
    opacity: .42;
    position: relative;
    z-index: 0;
  }

  .audience-statement {
    grid-area: title;
    position: relative;
    z-index: 2;
  }

  .audience-statement h2 {
    font-size: clamp(40px, 11vw, 58px);
  }

  .side-copy {
    grid-area: copy;
    position: relative;
    z-index: 2;
    max-width: 180px;
    margin: 34px 0 0;
    font-size: 14px;
    line-height: 1.55;
    padding-right: 18px;
  }

  .process-list {
    padding-top: 0;
  }

  .service-list,
  .trust-list {
    display: block;
    margin-top: 36px;
  }

  .experience-list {
    display: flex;
    gap: 14px;
    width: calc(100% + 7vw);
    margin-top: 36px;
    margin-right: -7vw;
    padding-right: 7vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .experiences-link {
    display: inline-block;
    margin-top: 28px;
  }

  .experience-list::-webkit-scrollbar {
    display: none;
  }

  .service-list article,
  .trust-list p {
    margin-bottom: 14px;
  }

  .service-list article {
    min-height: 0;
    padding: 16px 0 22px;
  }

  .service-list h3 {
    margin: 22px 0 12px;
    font-size: 32px;
  }

  .service-list p {
    font-size: 13px;
  }

  .experience-list article:nth-child(2) {
    transform: none;
  }

  .experience-list article,
  .experience-list article:nth-child(2) {
    flex: 0 0 78vw;
    min-height: 390px;
    padding: 16px;
    margin: 0;
    scroll-snap-align: start;
  }

  .experience-list h3 {
    font-size: 28px;
  }
  .drift-image {
    width: min(210px, 62vw);
    top: calc(100% - 72px);
    padding-bottom: 32px;
  }

  .drift-image-one {
    left: auto;
    right: -15vw;
    width: min(230px, 56vw);
    top: calc(100% - 10px);
  }

  .ilaria-image, .ilaria-copy { grid-column: auto; }
  .ilaria-image img { height: auto; aspect-ratio: 4 / 5; }
  .ilaria-copy { margin-top: 42px; }
  .ilaria-copy > p:not(.kicker) { margin: 22px 0 28px; font-size: 14px; }
  footer { display: block; line-height: 2; }
}

@media (max-width: 600px) {
  .audience-concept {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "copy"
      "words";
    min-height: 700px;
    padding-right: 7vw;
  }

  .audience-statement h2 {
    max-width: 330px;
  }

  .traveller-words {
    overflow: hidden;
    padding: .12em 0 .2em;
    width: calc(100% + 7vw);
    margin-left: -7vw;
    margin-top: 34px;
    max-width: none;
    font-size: clamp(25px, 7.5vw, 36px);
    opacity: .42;
    white-space: nowrap;
    pointer-events: none;
  }

  .traveller-track {
    display: flex;
    width: max-content;
    will-change: transform;
  }

  .traveller-copy,
  .traveller-copy:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    padding-right: 0;
  }

  .traveller-copy span {
    margin-inline: .16em;
  }

  .side-copy {
    max-width: 245px;
    padding-right: 0; 
    margin-top: 28px;
    font-size: 14px;
  }

  .drift-image-one {
    right: 4vw;
    top: calc(100% - 88px);
    width: min(205px, 56vw);
  }

  .process-drift-image {
    display: block;
    right: -10vw;
    top: 70px;
    width: min(190px, 50vw);
  }

  .audience-drift-image {
    display: none;
  }
}

@media (min-width: 601px) and (max-width: 1000px) {
  .audience-concept .side-copy {
    max-width: 290px;
    padding-right: 0;
  }

  .audience-concept .drift-image-one {
    right: 2vw;
    width: min(300px, 32vw);
    top: calc(100% - 92px);
  }
}