/* Domovita: stylesheet of the English home (index.html). Every other page uses site.css.

     1. FONTS         Jost, self-hosted, variable weight 100-900
     2. FOUNDATIONS   layout, navigation, hero, sections, footer, responsive
     3. PACKAGES      compact package cards and the help box below them
     4. HOME          rounded cards, reviews, how it works, contact, FAQ
     5. COLOURS       palette tokens and final colours
*/

/* ============================================================================
   1. FONTS
   ========================================================================= */
@font-face {
  font-family: Jost;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Jost;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Jost;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arial reshaped to Jost's proportions (size and line metrics measured from the font
   files), so text does not jump when Jost arrives a moment after the page. */
@font-face {
  font-family: "Jost fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 95.9%;
  ascent-override: 111.5%;
  descent-override: 39.1%;
  line-gap-override: 0%;
}

/* ============================================================================
   2. FOUNDATIONS
   ========================================================================= */

:root {
  --ink: #26382e;
  --pink: #f3bed0;
  --line: #d7dbd2;
  --gutter: clamp(24px, 5vw, 88px);
}

* {
  box-sizing: border-box;
}

/* finishes: selection, native controls, balanced short texts */
::selection {
  background: #ffdc60;
  color: #16182d;
}
h1,
h2,
h3,
.package-quote,
summary {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: Jost, "Jost fallback", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

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

button {
  font: inherit;
  cursor: pointer;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #b75177;
  outline-offset: 6px;
}

img {
  width: 100%;
  display: block;
  object-fit: cover;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -.055em;
}

h2 {
  font-size: clamp(42px, 4.7vw, 72px);
  line-height: 1.08;
}

h3 {
  line-height: 1.2;
}

em {
  font-weight: 450;
}

p {
  max-width: 65ch;
}

.section {
  padding: 100px var(--gutter);
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .13em;
  font-weight: 550;
  margin-bottom: 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 17px 27px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  transition: background .2s, transform .2s;
  white-space: nowrap;
}

.button:hover {
  transform: translateY(-3px);
}

.button span {
  font-size: 22px;
  line-height: 1;
}

.dark:hover {
  background: #3b5243;
}

.text-link {
  display: inline-flex;
  gap: 30px;
  align-items: center;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

.text-link:hover {
  opacity: .7;
}

.skip {
  position: fixed;
  top: -70px;
  left: 20px;
  padding: 15px;
  z-index: 10;
}

.skip:focus {
  top: 10px;
}

.navigation {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: white;
}

/* The logo: the name set in Jost, then the asterisk drawn in SVG. Jost has no ✳, so a
   typed one was drawn by whatever system font was at hand, and by a colour emoji on
   many phones. The same markup and the same measures are used on every page. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .15em;
  font: 650 35px/1 Jost, "Jost fallback", Arial, sans-serif;
  letter-spacing: -.08em;
}
.brand-mark {
  flex: none;
  width: .7em;
  height: .7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 500;
}

.nav-links>a:not(.button):hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nav-cta {
  font-size: 14px;
  padding: 13px 22px;
  gap: 20px;
}

.language {
  margin-left: 16px;
  white-space: nowrap;
}

.language span {
  opacity: .7;
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 720px;
  height: 94svh;
  max-height: 1100px;
  color: white;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.hero-video,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-shade {
  z-index: -1;
}

.hero-content {
  width: 100%;
  padding: 165px var(--gutter) 135px;
}

.hero .eyebrow {
  font-size: 12px;
  margin-bottom: 32px;
}

.hero h1 {
  font-size: clamp(68px, 8.2vw, 132px);
  line-height: .99;
  letter-spacing: -.055em;
  font-weight: 500;
}

.hero h1 em {
  white-space: nowrap;
}

.hero-bottom {
  border-top: 1px solid #ffffff65;
  margin-top: 48px;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.hero-bottom p {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  letter-spacing: -.02em;
}

.hero-caption {
  position: absolute;
  bottom: 26px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  letter-spacing: .1em;
}

.hero-caption>span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.location-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.scroll-cue {
  font-size: 32px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}

.video-toggle {
  color: white;
  border: 1px solid #ffffff70;
  border-radius: 40px;
  padding: 8px 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}

.video-toggle[hidden] {
  display: none;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 48px;
}

.section-heading>p {
  font-size: 17px;
  max-width: 340px;
  padding-bottom: 4px;
}

.circle-arrow {
  bottom: 20px;
  right: 20px;
  z-index: 1;
  border-radius: 50%;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.how {
  grid-template-columns: 1fr 1fr;
  gap: 13%;
  padding-top: 85px;
  padding-bottom: 85px;
}

.how-intro {
  position: relative;
}

.how .button {
  margin-top: 35px;
}

.steps article {
  gap: 25px;
}

.steps article>span {
  font-size: 13px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
}

.steps h3 {
  letter-spacing: -.035em;
  margin-bottom: 10px;
}

.steps p {
  line-height: 1.6;
}

.personal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: 110px;
  padding-bottom: 110px;
}

.personal-image {
  position: relative;
}

.personal-image>img {
  object-position: 65% center;
}

.personal-copy h2 {
  margin-bottom: 25px;
}

.personal-copy>p:not(.eyebrow) {
  font-size: 16px;
  margin-top: 20px;
}

.personal-facts {
  display: flex;
  gap: 44px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: 32px;
}

.personal-facts strong {
  display: block;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.04em;
}

.personal-facts span {
  font-size: 12px;
}

.packages {
  padding-top: 90px;
  padding-bottom: 75px;
}

.package-grid {
  display: grid;
}

.package {
  display: flex;
  flex-direction: column;
}

.price {
  font-weight: 450;
  letter-spacing: -.06em;
  line-height: 1.2;
}

.package-note {
  font-size: 12px;
  margin-top: 28px;
  max-width: none;
  text-align: center;
}

.package-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 9%;
  padding-top: 100px;
  padding-bottom: 100px;
}

.faq h2 {
  font-size: clamp(39px, 3.7vw, 60px);
  margin-bottom: 28px;
}

.faq .text-link {
  font-size: 14px;
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.faq-list summary {
  padding: 23px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 17px;
  font-weight: 450;
  letter-spacing: -.015em;
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list details p {
  font-size: 15px;
  padding: 0 35px 25px 0;
  line-height: 1.65;
}

.start {
  position: relative;
}

.start h2 {
  line-height: 1.02;
  position: relative;
}

.start-bottom {
  border-top: 1px solid #26382e55;
  margin-top: 40px;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.start-bottom p {
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -.025em;
}

.start-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.start-actions .text-link {
  font-size: 14px;
}

.footer {
  padding-top: 50px;
  padding-bottom: 30px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.footer-top p {
  font-size: 13px;
}

.footer-top>a:last-child {
  font-size: 16px;
}

.footer-bottom {
  border-top: 1px solid #ffffff30;
  padding-top: 25px;
  margin-top: 45px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
}

.footer-bottom>div {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.credits {
  font-size: 10px;
  max-width: 950px;
  margin-top: 23px;
}

.credits summary {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.credits p {
  max-width: none;
  line-height: 1.7;
  margin-top: 15px;
}

.credits a {
  text-decoration: underline;
}

@media (min-width: 1700px) {
  .section {
    padding-left: max(var(--gutter), calc((100vw - 1520px)/2));
    padding-right: max(var(--gutter), calc((100vw - 1520px)/2));
  }
}

@media (max-width: 1150px) {
  .nav-links {
    gap: 20px;
    font-size: 12px;
  }

  .nav-cta {
    font-size: 12px;
    padding: 12px 18px;
    gap: 12px;
  }

  .language {
    margin-left: 0;
  }

  .start-actions {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .hero {
    min-height: 670px;
  }
}

@media (max-width: 900px) {
  .navigation {
    padding-top: 25px;
  }

  .nav-links {
    gap: 17px;
  }

  .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .hero {
    min-height: 640px;
  }

  .hero h1 {
    font-size: clamp(64px, 9.5vw, 90px);
  }

  .section-heading {
    align-items: flex-start;
  }

  .section-heading h2 {
    font-size: 45px;
  }

  .section-heading>p {
    font-size: 14px;
    max-width: 230px;
  }

  .how {
    gap: 6%;
  }

  .steps article {
    gap: 17px;
  }

  .personal-facts {
    gap: 22px;
  }

  .personal-facts strong {
    font-size: 23px;
  }

  .faq {
    gap: 6%;
  }

  .faq h2 {
    font-size: 40px;
  }

  .faq-list summary {
    font-size: 16px;
  }

  .start-bottom p {
    font-size: 18px;
  }

  .footer-top {
    align-items: flex-start;
  }

  .footer-top p {
    max-width: 250px;
  }

  .footer-bottom>div {
    gap: 15px;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 25px;
  }

  .navigation {
    padding: 24px;
  }

  .brand {
    font-size: 32px;
  }

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .hero {
    height: 90svh;
    min-height: 660px;
    max-height: 850px;
    align-items: center;
  }

  .hero-content {
    padding: 130px 24px 110px;
  }

  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: .12em;
    margin-bottom: 28px;
  }

  .hero h1 {
    font-size: clamp(49px, 10.5vw, 68px);
    line-height: 1.07;
  }

  .hero h1 em {
    white-space: normal;
  }

  .hero-video {
    object-position: 60% center;
  }

  .hero-bottom {
    margin-top: 35px;
    padding-top: 23px;
    display: block;
  }

  .hero-bottom p {
    font-size: 20px;
    max-width: 290px;
  }

  .desktop-break {
    display: none;
  }

  .hero-bottom .button {
    margin-top: 25px;
    font-size: 15px;
    padding: 16px 23px;
    gap: 36px;
  }

  .hero-caption {
    bottom: 24px;
    font-size: 8px;
  }

  .scroll-cue {
    display: none;
  }

  .video-toggle {
    font-size: 10px;
  }

  .section {
    padding: 60px 24px;
  }

  .eyebrow {
    font-size: 10px;
    margin-bottom: 20px;
  }

  .section-heading {
    display: block;
    margin-bottom: 30px;
  }

  .section-heading h2 {
    font-size: 43px;
  }

  .section-heading>p {
    margin-top: 20px;
    font-size: 15px;
    max-width: none;
  }

  .steps {
    margin-top: 45px;
  }

  .steps article {
    gap: 20px;
  }

  .personal {
    display: block;
  }

  .personal-image {
    margin-right: 15px;
    margin-bottom: 45px;
  }

  .personal-image>img {
    object-position: center;
  }

  .personal-copy>p:not(.eyebrow) {
    font-size: 15px;
  }

  .personal-facts {
    gap: 40px;
  }

  .personal-facts strong {
    font-size: 25px;
  }

  .package-grid {
    display: grid;
  }

  .package-note {
    font-size: 12px;
    text-align: left;
    line-height: 1.7;
  }

  .faq {
    display: block;
  }

  .faq h2 {
    font-size: 44px;
  }

  .faq-list {
    margin-top: 35px;
  }

  .faq-list summary {
    font-size: 17px;
  }

  .faq-list details p {
    font-size: 15px;
  }

  .start h2 {
    line-height: 1.05;
  }

  .start-bottom {
    display: block;
    margin-top: 30px;
    padding-top: 25px;
  }

  .start-bottom p {
    font-size: 20px;
  }

  .start-actions {
    margin-top: 28px;
    gap: 20px;
  }

  .start-actions .button {
    font-size: 15px;
  }

  .footer {
    padding-top: 40px;
    padding-bottom: 25px;
  }

  .footer-top {
    display: flex;
    flex-direction: column;
    gap: 23px;
  }

  .footer-top p {
    font-size: 14px;
    max-width: none;
  }

  .footer-top>a:last-child {
    font-size: 15px;
  }

  .footer-bottom {
    margin-top: 30px;
    flex-direction: column;
    gap: 20px;
  }

  .footer-bottom>div {
    gap: 18px;
    font-size: 12px;
  }

  .credits {
    margin-top: 25px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   3. PACKAGES
   ========================================================================= */
.compact-package:hover {
  transform: translateY(-5px);
}
.compact-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.compact-bottom .price {
  margin: 0;
}
.compact-bottom .circle-arrow {
  position: static;
  flex: none;
}

/* Help choosing a package, directly below the home prices. */
.packages .package-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.packages .package-help h3 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.packages .package-help p {
  margin: 0;
  line-height: 1.5;
}
.packages .package-help .button {
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .packages .package-help {
    flex-direction: column;
    align-items: flex-start;
  }
  .packages .package-help .button {
    max-width: 100%;
    white-space: normal;
  }
}

/* ============================================================================
   4. HOME
   ========================================================================= */
.page-home *,
.page-home *::before,
.page-home *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}
.page-home .section {
  padding-block: 100px;
}
.page-home .button,
.page-home .nav-cta {
  border-radius: 999px;
}
.page-home :is(h1,h2,h3) {
  overflow-wrap: normal;
}
.page-home .hero {
  overflow: hidden;
  background: var(--navy);
}
.page-home .personal {
  gap: 8%;
  background: var(--white);
}
.page-home .personal-image {
  overflow: hidden;
}
.page-home .personal-image>img {
  height: 540px;
}
.page-home .personal-copy h2 {
  font-size: clamp(40px,4.5vw,68px);
}
.page-home .package-grid {
  grid-template-columns: minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);
  align-items: center;
  gap: 22px;
  padding-block: 22px;
}
.page-home :is(.package,.package-card) {
  position: relative;
  border: 0;
  border-radius: 26px;
  padding: 34px;
  min-height: 0;
  background: var(--plan-yellow);
  color: var(--ink);
  transform: none;
  transition: background-color .2s;
}
.page-home :is(.package,.package-card).featured {
  min-height: 0;
  padding: 42px 38px;
  margin-top: 0;
  background: var(--azure);
  color: #fff;
}
.page-home :is(.package,.package-card):last-child {
  background: var(--plan-red);
  color: #fff;
}
.page-home :is(.package,.package-card):hover {
  transform: none;
  background: #ffd332;
}
.page-home :is(.package,.package-card):last-child:hover {
  background: #be2832;
}
.page-home :is(.package,.package-card).featured:hover {
  background: #075fbe;
}
.page-home .package-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-height: 48px;
}
.page-home :is(.package,.package-card) .package-name-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.025em;
}
.page-home .popular-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .01em;
  color: var(--yellow);
}
.page-home .popular-label>span {
  font-size: 14px;
}
.page-home :is(.package,.package-card) .package-quote {
  margin-top: 24px;
  margin-bottom: 18px;
  max-width: none;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: inherit;
}
.page-home :is(.package,.package-card).featured .package-quote {
  font-size: 34px;
}
.page-home :is(.package,.package-card) .price {
  color: inherit;
  font-size: 68px;
}
.page-home :is(.package,.package-card).featured .price {
  font-size: 78px;
}
.page-home :is(.package,.package-card) :is(.circle-arrow,.home-package-arrow) {
  border: 0;
}
.page-home .compact-bottom {
  margin-top: 0;
  border-top: 1px solid #142d5540;
  padding-top: 18px;
}
.page-home .featured .compact-bottom,
.page-home [data-plan=concierge] .compact-bottom {
  border-color: #ffffff70;
}
.page-home .package-help {
  border: 0;
}
.page-home .reviews {
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}
.page-home .reviews-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}
.page-home .reviews h2 {
  font-size: clamp(40px,4.7vw,72px);
  line-height: 1.08;
  letter-spacing: -.055em;
  color: #fff;
}
.page-home .review-disclaimer {
  max-width: 680px;
  font-size: 14px;
  margin: 0 0 28px;
  color: #ffffffa6;
}
.page-home .review-controls {
  display: flex;
  gap: 10px;
}
.page-home .review-controls[hidden] {
  display: none;
}
.page-home .review-controls button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}
.page-home .review-controls button:hover {
  background: var(--blue-hover);
}
.page-home .review-controls button:disabled {
  opacity: .35;
  cursor: default;
}
.page-home .review-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 20px;
  scrollbar-color: #ffffff40 transparent;
}
.page-home .review-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 clamp(300px,33vw,440px);
  min-height: 510px;
  overflow: hidden;
  scroll-snap-align: start;
  color: white;
  border-radius: 20px;
  background: var(--navy-soft);
}
.page-home .review-card>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-home .review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,#16182d00 30%,#16182d99 58%,#16182df2);
}
.page-home .review-content {
  padding: 30px;
  height: 100%;
  min-height: 510px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-home .review-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  margin-bottom: 18px;
  color: #ffffffb3;
}
.page-home .review-card blockquote {
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.035em;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
}
.page-home .review-card p span {
  display: block;
  font-size: 12px;
  margin-top: 5px;
  color: #ffffffb3;
  font-weight: 400;
}
.page-home .how {
  display: block;
  background: var(--white);
}
.page-home .how-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 48px;
}
.page-home .how-intro .eyebrow {
  grid-column: 1/-1;
}
.page-home .how-intro h2 {
  font-size: clamp(40px,4.7vw,72px);
  max-width: 800px;
}
.page-home .how-intro h2 br {
  display: none;
}
.page-home .how .steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 20px;
}
.page-home .how .steps article {
  display: block;
  border: 0;
  padding: 28px;
  background: var(--sand);
  border-radius: 20px;
}
.page-home .how .steps article>span {
  margin-bottom: 32px;
  border: 0;
  width: 44px;
  height: 44px;
  background: var(--baby-blue);
  color: var(--navy);
  font-weight: 600;
}
.page-home .how .steps h3 {
  font-size: 24px;
}
.page-home .how .steps p {
  font-size: 15px;
  color: var(--grey);
}
.page-home .start h2 {
  font-size: clamp(56px,7vw,108px);
}
.page-home .faq-list details {
  border: 0;
  padding: 4px 22px;
  margin-bottom: 12px;
  background: var(--sand);
  border-radius: 16px;
}
.page-home .faq-list details:last-child {
  border: 0;
}
.page-home .faq-list details p {
  padding-bottom: 20px;
  color: var(--grey);
}
.page-home .footer {
  padding-block: 55px;
  background: var(--navy);
  color: #fff;
  border-top: 0;
}
.page-home :is(a,button,summary,[tabindex]):focus-visible {
  outline-offset: 5px;
  outline: 3px solid var(--purple);
}
.page-home :is(.button.dark,.button-primary,.nav-links .nav-cta):hover {
  background: var(--blue-hover);
  color: #fff;
}
.page-home .start .button.dark:hover {
  background: var(--yellow-hover);
  color: var(--navy);
}
.page-home .hero .butter:hover {
  background: #ffd332;
  color: var(--ink);
}
@media (max-width: 1000px) {
  .page-home .how .steps {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .page-home .how-intro {
    grid-template-columns: 1fr;
  }
  .page-home .how-intro .button {
    justify-self: start;
    margin-top: 8px;
  }
}
@media (max-width: 900px) {
  .page-home .package-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .page-home :is(.package,.package-card).featured {
    min-height: 0;
  }
}
@media (max-width: 700px) {
  .page-home .section {
    padding-block: 64px;
  }
  .page-home .personal {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-home .personal-image>img {
    height: 380px;
  }
  .page-home :is(.package,.package-card) {
    padding: 28px;
    min-height: 0;
  }
  .page-home :is(.package,.package-card).featured {
    padding: 36px 32px;
    min-height: 0;
  }
  .page-home :is(.package,.package-card) .package-quote {
    font-size: 30px;
  }
  .page-home :is(.package,.package-card).featured .package-quote {
    font-size: 32px;
  }
  .page-home :is(.package,.package-card) .price {
    font-size: 60px;
  }
  .page-home :is(.package,.package-card).featured .price {
    font-size: 70px;
  }
  .page-home .package-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .page-home .review-card {
    flex-basis: 86%;
    min-height: 460px;
  }
  .page-home .review-content {
    padding: 24px;
    min-height: 460px;
  }
  .page-home .review-card blockquote {
    font-size: 27px;
  }
  .page-home .review-controls button {
    width: 44px;
    height: 44px;
  }
  .page-home .how .steps {
    grid-template-columns: 1fr;
  }
  .page-home .how .steps article {
    padding: 26px;
  }
  .page-home .how .steps article>span {
    margin-bottom: 22px;
  }
  .page-home .reviews-heading {
    align-items: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-home,
  html:has(.page-home) {
    scroll-behavior: auto;
  }
  .page-home * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   5. COLOURS
   ========================================================================= */

.page-home {
  --navy: #16182d;
  --navy-soft: #2e3042;
  --white: #fff;
  --sand: #fbf8f3;
  --yellow: #ffdc60;
  --yellow-hover: #ffd23a;
  --pink: #f3b1c5;
  --purple: #6642a6;
  --baby-blue: #8fd6fa;
  --lilac: #d4c6ef;
  --mint: #cde8d8;
  --tan: #caab89;
  --grey: #5c5e6c;
  --hairline: #16182d1f;
  --ink: var(--navy);
  --line: var(--hairline);
  --azure: var(--navy);
  --blue-hover: var(--navy-soft);
  --plan-yellow: var(--yellow);
  --plan-red: var(--pink);
  --coral: var(--pink);
  background: var(--white);
  color: var(--navy);
}

.page-home .skip {
  background: var(--yellow);
  color: var(--navy);
}
.page-home :is(.hero,.reviews,.start,.footer) :is(a,button,summary,[tabindex]):focus-visible {
  outline-color: var(--yellow);
}

/* Buttons: navy on light grounds, yellow on dark ones. */
.page-home :is(.button.dark,.button-primary) {
  background: var(--navy);
  color: #fff;
}
.page-home :is(.button.dark,.button-primary):hover {
  background: var(--navy-soft);
  color: #fff;
}
.page-home .button.butter {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 600;
}
.page-home .hero .button.butter:hover {
  background: var(--yellow-hover);
  color: var(--navy);
}

/* Navigation over the hero: glassy ghost pill. */
.page-home .nav-links .nav-cta {
  background: #ffffff33;
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.page-home .nav-links .nav-cta:hover {
  background: #fff;
  color: var(--navy);
}
.page-home .brand-mark {
  color: var(--pink);
}

/* The language switch reads like the one on the inner pages: small, spaced, the other language linked. */
.page-home .nav-links .language {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  opacity: .85;
}

/* Hero */
.page-home .hero-shade {
  background: linear-gradient(90deg,#16182dcc,#16182d59 60%,#16182d26),linear-gradient(0deg,#16182d99,transparent 45%,#16182d40);
}
.page-home .hero h1 em {
  color: var(--pink);
  font-style: italic;
}
.page-home .hero-bottom {
  border-color: #ffffff40;
}
.page-home .location-dot {
  background: var(--yellow);
}
.page-home .video-toggle {
  background: #16182d80;
  border-color: #ffffff50;
}

/* Eyebrows: purple on light grounds, pink on dark ones. */
.page-home :is(.personal,.packages,.how,.faq) .eyebrow {
  color: var(--purple);
}
.page-home :is(.reviews,.start) .eyebrow {
  color: var(--pink);
}

/* About: white */
.page-home .personal-image,
.page-home .personal-image>img {
  border-radius: 20px;
}
.page-home .personal-copy h2 em {
  color: var(--purple);
  font-style: italic;
}
.page-home .personal-copy>p:not(.eyebrow) {
  color: var(--grey);
}
.page-home .personal-facts {
  border-color: var(--hairline);
}
.page-home .personal-facts span {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--navy);
  font-weight: 500;
}

/* Packages: sand ground, white cards, navy featured card, pastel name pills. */
.page-home #packages {
  background: var(--sand);
}
.page-home .packages .section-heading>p {
  color: var(--grey);
}
.page-home .package.compact-package,
.page-home .package.compact-package:hover {
  background: #fff;
  color: var(--navy);
  border-radius: 20px;
}
.page-home .package.compact-package.featured,
.page-home .package.compact-package.featured:hover {
  background: var(--navy);
  color: #fff;
}
.page-home .package .package-name-pill {
  background: var(--baby-blue);
  color: var(--navy);
}
.page-home .package[data-plan=verified] .package-name-pill {
  background: var(--yellow);
}
.page-home .package[data-plan=concierge] .package-name-pill {
  background: var(--pink);
}
.page-home .package .compact-bottom {
  border-top-color: #16182d1f;
}
.page-home .package.featured .compact-bottom {
  border-top-color: #ffffff33;
}
.page-home .package .circle-arrow {
  background: var(--navy);
  color: #fff;
  transition: background-color .2s, color .2s, transform .2s;
}
.page-home .package.featured .circle-arrow {
  background: var(--yellow);
  color: var(--navy);
}
.page-home .package:hover .circle-arrow {
  background: var(--yellow);
  color: var(--navy);
  transform: translate(2px,-2px);
}
.page-home .package.featured:hover .circle-arrow {
  background: #fff;
}
.page-home .package-note {
  color: var(--grey);
}
.page-home .package-note a {
  color: var(--navy);
}
.page-home .packages .package-help {
  margin-top: 32px;
  padding: 28px 32px;
  border-radius: 20px;
  background: #fff;
}
.page-home .packages .package-help p {
  color: var(--grey);
}

/* Reviews: the one full-bleed navy band. */
.page-home .review-controls button {
  border: 1px solid #ffffff59;
  background: transparent;
  color: #fff;
  transition: background-color .2s, color .2s;
}
.page-home .review-controls button:hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
}
.page-home .review-card p {
  color: var(--tan);
  font-size: 16px;
  font-weight: 500;
}

/* How it works: white ground, sand cards, pastel step numbers. */
.page-home .how-intro h2 em {
  color: var(--purple);
  font-style: italic;
}
.page-home .how .steps article:nth-child(2)>span {
  background: var(--yellow);
}
.page-home .how .steps article:nth-child(3)>span {
  background: var(--lilac);
}
.page-home .how .steps article:nth-child(4)>span {
  background: var(--pink);
}

/* Contact: an inset photo card with a navy veil. */
.page-home .start {
  margin-inline: max(var(--gutter), calc((100% - 1520px) / 2));
  padding: clamp(56px,7vw,96px) clamp(28px,5vw,80px);
  border-radius: 24px;
  background: linear-gradient(90deg,#16182df2,#16182dcc 50%,#16182d80),url('../img/milan/darsena-milan-1200.webp') center/cover no-repeat,var(--navy);
  color: #fff;
}
.page-home .start h2 em {
  color: var(--yellow);
  font-style: italic;
}
.page-home .start-bottom {
  border-color: #ffffff40;
}
.page-home .start .button.dark {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 600;
}

/* FAQ: white ground, sand rows. */
.page-home .faq {
  background: var(--white);
}
.page-home .faq-list summary span {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  transition: transform .2s, background-color .2s;
}
.page-home .faq-list details[open] summary span {
  background: var(--yellow);
}

/* Footer */
.page-home .footer :is(.footer-top p,.footer-bottom,.credits) {
  color: #ffffffb3;
}
.page-home .footer-bottom {
  border-color: #ffffff26;
}

/* The four shared menu items no longer fit one line below 900px: the drop-down panel
   home.css opens at 640px now opens here, matching home.js, which closes it above 900px. */
@media (max-width: 900px) {
  .page-home .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 40px;
    background: #ffffff33;
    color: #fff;
    font-size: 12px;
  }
  .page-home .nav-links {
    display: none;
    position: absolute;
    top: 82px;
    left: 16px;
    right: 16px;
    padding: 20px 25px 25px;
    border-radius: 16px;
    background: #fff;
    color: var(--navy);
    font-size: 17px;
  }
  .page-home .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .page-home .nav-links > a:not(.nav-cta) {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .page-home .nav-links .language {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0;
  }
  .page-home .nav-links .nav-cta {
    margin-top: 8px;
    padding: 16px 20px;
    background: var(--navy);
    color: #fff;
    font-size: 15px;
  }
  .page-home .nav-links .nav-cta:hover {
    background: var(--navy-soft);
    color: #fff;
  }
}
@media (max-width: 760px) {
  .page-home .packages .package-help {
    padding: 24px;
  }
}
@media (max-width: 700px) {
  .page-home .start {
    padding: 56px 24px;
    border-radius: 20px;
  }
}
@media (max-width: 640px) {
  .page-home .review-controls {
    display: none;
  }
  .page-home .start {
    margin-inline: 16px;
    padding: 48px 24px;
  }

  /* On a phone: no text under 10px, and nothing to tap that is shorter than 44px. */
  .page-home .eyebrow,
  .page-home .hero .eyebrow,
  .page-home .review-label {
    font-size: 11px;
  }
  .page-home .hero-caption {
    font-size: 10px;
  }
  .page-home .menu-toggle {
    min-height: 44px;
  }
  .page-home .video-toggle {
    min-height: 44px;
    padding-inline: 16px;
    font-size: 11px;
  }
  /* the underline stays under the words: only the area that takes the tap grows */
  .page-home .text-link {
    position: relative;
  }
  .page-home .text-link::after {
    content: "";
    position: absolute;
    inset: -10px 0;
  }
  .page-home .footer-top {
    gap: 12px;
  }
  .page-home .footer-top > a:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .page-home .footer-bottom {
    gap: 8px;
  }
  .page-home .footer-bottom > div {
    gap: 0 22px;
    font-size: 13px;
  }
  .page-home .footer-bottom > div a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .page-home .credits {
    margin-top: 6px;
    font-size: 12px;
  }
  .page-home .credits summary {
    padding-block: 14px;
  }
}