/* Ocean Hideaways — oceanhideaways.com
   Every colour, type step, radius, gap and padding here was measured off the
   Framer site this replaced, either from its stylesheet or from computed
   styles in the browser. The three breakpoints are Framer's own:
   phone <=809px, tablet 810-1199px, desktop >=1200px. Keep them — the type
   scale steps at exactly those widths and nowhere else. */

/* ---------------------------------------------------------------- fonts -- */
/* Satoshi, self-hosted from Fontshare. The Framer site also declared Poppins
   and Inter but never applied either, so neither is carried over. */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --maho: #0040ff;
  --maho-soft: #699dff; /* the mid-blue dots on the About stats panel */
  --cream: #fff3e6;
  --ice: #edf3ff;
  --tag: #f2f7ff;
  --mist: #f7faff;
  --ink: #171717;
  --ink-soft: #1f1f1f; /* section eyebrows */
  --black: #000; /* nav links, island names */
  --gray: #808080;
  --gray-light: #ababab;
  --white: #fff;

  /* Type scale, by role rather than size because Framer's presets were.
     Desktop values; the media queries at the foot of the file step them. */
  --fs-display: 60px; /* home hero h1 */
  --fs-h1: 50px; /* inner-page h1 and the closing CTA */
  --fs-h2: 46px;
  --fs-h3: 36px;
  --fs-h4: 32px;
  --fs-lede: 26px; /* pull quotes and the services intro */
  --fs-xl: 24px;
  --fs-lg: 22px;
  --fs-md: 20px; /* body copy */
  --fs-sm: 18px;

  --shell: 1200px;
  --gutter: 25px;
  --section-y: 48px;

  --r-panel: 38px;
  --r-card: 34px;
  --r-tile: 28px;
  --r-photo: 24px;
  --r-input: 16px;
  --r-pill: 1000px;

  --ease: cubic-bezier(0.44, 0, 0.56, 1);

  /* Soft LTR veil: solid white of at least 100vw, with a long fade on each side. */
  --veil-fade: 90vw;
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------- page transitions -- */
/* Animsition-style overlay on a real page load. html::before is a wide white
   band with faded left/right edges that travels LTR. body fades and scales
   from the top centre so the header stays pinned (a viewport-centre origin
   grew the page past the html box and clipped the nav). Classes come from
   the boot script in each <head> and site.js (page-leave on click). */
html.js::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  width: calc(100vw + 2 * var(--veil-fade));
  pointer-events: none;
  visibility: hidden;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) calc(var(--veil-fade) * 0.4),
    rgba(255, 255, 255, 0.7) calc(var(--veil-fade) * 0.75),
    var(--white) var(--veil-fade),
    var(--white) calc(100% - var(--veil-fade)),
    rgba(255, 255, 255, 0.7) calc(100% - var(--veil-fade) * 0.75),
    rgba(255, 255, 255, 0.2) calc(100% - var(--veil-fade) * 0.4),
    rgba(255, 255, 255, 0) 100%
  );
  transform: translate3d(-100%, 0, 0);
}

html.js.page-leave,
html.js.page-enter,
html.js.page-onload {
  overflow-x: clip;
  background: var(--white);
}

html.js.page-leave::before,
html.js.page-enter::before,
html.js.page-onload::before {
  visibility: visible;
}

/* Cover LTR, then the next document paints already covered. */
html.js.page-leave::before {
  pointer-events: auto;
  animation: page-wipe-cover 0.6s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

html.js.page-enter::before,
html.js.page-onload::before {
  transform: translate3d(calc(-1 * var(--veil-fade)), 0, 0);
}

html.js.page-enter.page-ready::before,
html.js.page-onload.page-ready::before {
  animation: page-wipe-reveal 0.65s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@keyframes page-wipe-cover {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--veil-fade)), 0, 0);
  }
}

@keyframes page-wipe-reveal {
  from {
    transform: translate3d(calc(-1 * var(--veil-fade)), 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}

html.js.page-onload body,
html.js.page-enter body {
  opacity: 0;
  transform: scale(0.95);
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

html.js.page-onload.page-ready body,
html.js.page-enter.page-ready body {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.6s var(--ease),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.15em;
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.15em;
  letter-spacing: -0.03em;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.2em;
  letter-spacing: -0.04em;
}
h4 {
  font-size: var(--fs-h4);
  line-height: 1.35em;
  letter-spacing: -0.03em;
}

p {
  margin: 0;
}

/* Framer highlighted phrases inside headings by recolouring them Maho. */
.hl {
  color: var(--maho);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-input) 0;
  background: var(--maho);
  color: var(--white);
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--maho);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- primitives -- */
.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections whose panel is itself the 1200px shell (features, testimonials,
   CTA) drop the gutter so the panel edge lands where Framer's did. */
.container--flush {
  padding-inline: 0;
}

.section {
  padding-block: var(--section-y);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55em;
  letter-spacing: -0.03em;
}

.muted {
  color: var(--gray);
}

/* Stacked paragraphs inside one rich-text block. */
.rich {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Pale-blue pill above a hero heading. */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--tag);
  color: var(--maho);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Dot + label that introduces most sections. Only the dot is Maho; the label
   is near-black. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--maho);
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn--lg {
  font-size: var(--fs-md);
}

.btn--primary {
  background: var(--maho);
  color: var(--white);
}
.btn--primary:hover {
  background: #0036d6;
}

/* Cream fill, blue label — Framer called this one "Coki Small". */
.btn--cream {
  background: var(--cream);
  color: var(--maho);
}
.btn--cream:hover {
  background: #ffe8d1;
}

/* Near-black fill, white label — the vision-section "Learn more". */
.btn--ink {
  background: var(--ink);
  color: var(--white);
  font-weight: 500;
}
.btn--ink:hover {
  background: #0d0d0d;
}

/* For use on a Maho panel, where the button has to invert. */
.btn--white {
  background: var(--white);
  color: var(--maho);
}
.btn--white:hover {
  background: var(--ice);
}

/* Text-only tertiary, used beside a primary on the About page. */
.btn--ghost {
  padding-inline: 4px;
  background: none;
  color: var(--maho);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.btn--ghost:hover {
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

/* --------------------------------------------------------------- header -- */
.header {
  position: relative;
  z-index: 10;
  background: var(--white);
  padding-block: 20px;
}

/* Three groups spread across the row: wordmark, links, button. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  overflow: hidden;
}

/* The wordmark's artboard is 165x64 with the ink inset top and bottom, so a
   48px row clips only empty space. Sizing it smaller shrinks the mark
   relative to the original. */
.header__logo {
  flex: none;
  display: block;
  line-height: 0;
}
.header__logo img {
  width: 165px;
  height: 64px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--black);
  transition: color 0.2s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--maho);
}

/* The row's third group. Matching the wordmark's 165px keeps the middle group
   optically centred, which is how the original balances it; on phones the
   group grows to hold the menu button beside the pill. */
.header__end {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 165px;
}
.header__end .btn {
  font-weight: 500;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-toggle svg {
  margin-inline: auto;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* ----------------------------------------------------------------- hero -- */
/* Two hero shapes. `.hero` is the home page's centred stack; `.hero--page`
   is the shorter inner-page version (centred heading above a rounded cover).
   Both carry the backdrop and a rounded cover photo. */
.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: var(--section-y);
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 94px;
}

.hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 650px;
  text-align: center;
}

.hero__head h1 {
  font-size: var(--fs-display);
  line-height: 1.1em;
  letter-spacing: -0.04em;
}

.hero__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  width: 100%;
  height: 60vh;
  padding: 28px 34px 48px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--ice);
}
.hero__cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inner pages: heading is centred above a full-width cover, matching live. */
.hero--page .hero__inner {
  gap: 54px;
  align-items: stretch;
}
.hero--page .hero__head {
  align-items: center;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.hero--page .hero__head h1 {
  font-size: var(--fs-h1);
  line-height: 1.15em;
  letter-spacing: -0.03em;
}
.hero--page .hero__cover {
  height: 52vh;
}

/* Lets the contact reach card hang 65px below the cover without being clipped
   by the hero's overflow:hidden. */
.hero--reach {
  overflow: visible;
}

/* -------------------------------------------------------- vision / pods -- */
.vision {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
}

.vision__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 38px;
  align-items: start;
}

.vision__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}

.vision__mark {
  width: 96px;
  height: 96px;
}

.vision__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vision__pods {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding: 10px 32px 0;
}

/* A pod is an icon tile beside a heading and a paragraph. */
.pod {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  max-width: 492px;
}

.pod__icon {
  flex: none;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 12px;
  background: var(--maho);
}
.pod__icon img {
  width: 22px;
  height: 22px;
}

.pod__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pod__text h3 {
  font-size: var(--fs-lg);
  line-height: 1.5em;
  letter-spacing: -0.03em;
}

/* ------------------------------------------------------------ locations -- */
.locations {
  padding-block: var(--section-y);
}

.locations__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: 1100px;
  margin-inline: auto;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section-head h2 {
  max-width: 650px;
}

/* Locations, features and testimonials centre their heading block. */
.section-head--center {
  align-items: center;
  text-align: center;
}
.section-head--center h2 {
  margin-inline: auto;
}

.locations__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 48px;
  align-items: start;
}

.locations__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Groups a row with its own panel so the list's 56px gap falls between
   islands, not between an island and its button. */
.place-group {
  display: flex;
  flex-direction: column;
}

/* Each island is a clickable row with a rule down its left edge. Picking one
   turns its rule Maho, recolours its name and reveals the booking button.
   On desktop every island keeps its description; only the button toggles.

   The row is a <button> holding spans rather than a heading: the original
   marks these names up as plain paragraphs, and phrasing-only content keeps
   the button valid while leaving the whole 526px row clickable. */
.place {
  display: flex;
  gap: 28px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Cream when idle, Maho when selected. The rule is the only thing that
   changes colour — the name and description stay put, which is why the list
   reads calmly while it cycles. */
.place__line {
  flex: none;
  align-self: stretch;
  width: 4px;
  border-radius: 2px;
  background: var(--cream);
  transition: background-color 0.3s var(--ease);
}
.place[aria-expanded="true"] .place__line {
  background: var(--maho);
}

.place__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 455px;
}

.place__title {
  font-size: var(--fs-lede);
  line-height: 1.55em;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.place__desc {
  color: var(--gray);
}

/* The panel animates on grid-template-rows so it sizes to its content
   without a hard-coded height. It sits beside the rule, not under it, so it
   is indented to clear the 4px line plus the row's 28px gap. */
.place__panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-left: 32px;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease), opacity 0.3s var(--ease);
}
.place__panel[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.place__panel > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  max-width: 455px;
  padding-top: 12px;
}

/* One photo per island, stacked and cross-faded. All three are in the markup
   so the swap has nothing to load mid-cycle. */
.locations__media {
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--ice);
  aspect-ratio: 16 / 11;
}
.locations__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.locations__media img[data-current] {
  opacity: 1;
}

/* ------------------------------------------------------------- features -- */
.features {
  padding-block: var(--section-y);
}

/* The panel is the 1200px shell itself — cream at 25% over white, exactly as
   the original composites it. */
.features__panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 48px 36px;
  border-radius: var(--r-card);
  background: rgb(255 243 230 / 25%);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 56px;
  align-items: start;
}

/* Icon tile stacked above the copy, filling its grid column. */
.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  padding-bottom: 18px;
}

.feature__icon {
  flex: none;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 14px;
  background: var(--cream);
}
.feature__icon img {
  width: 30px;
  height: 30px;
}

.feature__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.feature__text h3 {
  font-size: var(--fs-lg);
  line-height: 1.5em;
  letter-spacing: -0.03em;
}

.features__cta {
  display: flex;
  justify-content: center;
}

/* -------------------------------------------------------------- why us -- */
.whyus {
  padding-block: var(--section-y);
}

.whyus__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* The only section head that stays left-aligned, and the only one at 20px. */
.whyus .section-head {
  gap: 20px;
}
.whyus .section-head h2 {
  max-width: 700px;
}

/* A tall photo with a white card sitting inside its padding. */
.whyus__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 650px;
  padding: 58px;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--ice);
}
.whyus__panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whyus__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 365px;
  padding: 34px 28px;
  border-radius: var(--r-tile);
  background: var(--white);
}

.whyus__row {
  display: flex;
  gap: 18px;
}
.whyus__row svg {
  flex: none;
  width: 25px;
  height: 25px;
}
.whyus__row div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.whyus__row h3 {
  font-size: var(--fs-md);
  line-height: 1.5em;
  letter-spacing: -0.02em;
}
.whyus__row p {
  font-size: var(--fs-sm);
  color: var(--gray);
}

/* -------------------------------------------------------- testimonials -- */
.quotes {
  padding-block: var(--section-y);
}

.quotes__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 48px 24px;
  border-radius: var(--r-panel);
  overflow: hidden;
}
.quotes__panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quotes__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
/* Cream palm-pattern panel, so the type stays ink and the eyebrow
   dot stays Maho — the same treatment as Locations / Features. */
.quotes__head h2 {
  max-width: 575px;
  color: var(--ink);
}
.quotes__head .eyebrow {
  color: var(--ink-soft);
}
.quotes__head .eyebrow::before {
  background: var(--maho);
}

/* One card at a time in a 656px window, arrows overlapping its edges and
   pagination dots beneath — a manual carousel, no autoplay and no looping,
   matching the original. */
.quotes__carousel {
  position: relative;
  width: 100%;
  max-width: 700px;
  padding: 0 22px 32px;
}

.quotes__viewport {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.quotes__viewport::-webkit-scrollbar {
  display: none;
}

.quote {
  flex: none;
  scroll-snap-align: center;
  display: flex;
  gap: 24px;
  width: 100%;
  padding: 64px 48px;
  border-radius: var(--r-tile);
  background: var(--maho);
  color: var(--white);
}

.quote__avatar {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--ice);
}
.quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 460px;
}
.quote__body blockquote {
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.55em;
  letter-spacing: -0.03em;
}
.quote__who cite {
  font-style: normal;
  font-size: var(--fs-md);
  font-weight: 700;
}

.quotes__arrow {
  position: absolute;
  top: calc(50% - 16px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.quotes__arrow:hover {
  background: var(--cream);
}
.quotes__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}
.quotes__arrow--prev {
  left: -6px;
}
.quotes__arrow--next {
  right: -6px;
}

.quotes__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.quotes__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 45%);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.quotes__dots button[aria-current="true"] {
  background: var(--white);
  transform: scale(1.35);
}

/* ---------------------------------------------------------------- stats -- */
.stats {
  display: flex;
  align-items: center;
  gap: 38px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat__num {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.1em;
  letter-spacing: -0.03em;
  color: var(--black);
}
/* Digits stay black; the trailing unit or symbol is Maho. */
.stat__num span {
  color: var(--maho);
}
.stat__label {
  font-size: var(--fs-lg);
  color: var(--gray);
}

.stats__divider {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ice);
}

/* ----------------------------------------------------------- about bits -- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 38px;
  align-items: start;
}

.about-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: end;
}
.about-shots figure {
  margin: 0;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--ice);
}
.about-shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The outer two are shorter so the middle shot rises out of the row. */
.about-shots figure:nth-child(1) img,
.about-shots figure:nth-child(3) img {
  aspect-ratio: 3 / 4;
}
.about-shots figure:nth-child(2) img {
  aspect-ratio: 3 / 4.6;
}

/* Pull-quote panel: copy on the left, photo on the right. */
.quotepanel {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 50px;
  align-items: center;
}
.quotepanel__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.quotepanel__media {
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--ice);
}
.quotepanel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* --------------------------------------------------- booking / contact -- */
/* Row of three island cards, each a photo, a place name and a booking button. */
.picker {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  gap: 28px;
}

.pick {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: var(--r-tile);
  background: var(--mist);
}
.pick__media {
  border-radius: var(--r-input);
  overflow: hidden;
  background: var(--ice);
}
.pick__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
.pick h3 {
  font-size: var(--fs-md);
  line-height: 1.5em;
  letter-spacing: -0.02em;
}
.pick .btn {
  align-self: flex-start;
}

/* Email / phone rows on the contact page. */
.reach {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.reach__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--r-tile);
  background: var(--mist);
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}
.reach__item:hover {
  background: var(--ice);
}
.reach__item img {
  flex: none;
  width: 32px;
  height: 32px;
}
.reach__item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
}
.reach__item strong {
  color: var(--maho);
  font-size: var(--fs-md);
  font-weight: 500;
}

/* ----------------------------------------------------------------- form -- */
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field > span {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ice);
  border-radius: var(--r-input);
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea {
  min-height: 160px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--maho);
  background: var(--white);
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--gray-light);
}

.form button[type="submit"] {
  padding: 16px 26px;
  border: 0;
  border-radius: var(--r-input);
  background: var(--maho);
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.form button[type="submit"]:hover {
  background: #0036d6;
}

/* Spam honeypot — must stay reachable to bots but invisible to people. */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.form__error {
  padding: 14px 18px;
  border-radius: var(--r-input);
  background: #fff1f1;
  color: #a4142b;
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------ CTA -- */
.cta {
  position: relative;
  z-index: 1;
  padding-block: 34px;
}

.cta__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding: 94px 25px;
  border-radius: var(--r-card);
  background: var(--maho);
  text-align: center;
}

.cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 700px;
}
.cta__mark {
  width: 96px;
  height: 96px;
}
.cta__kicker {
  font-size: var(--fs-xl);
  line-height: 1.5em;
  color: var(--white);
}
/* Cream, not white — the heading and the mark share the same ink. */
.cta__panel h2 {
  font-size: var(--fs-h1);
  line-height: 1.15em;
  letter-spacing: -0.03em;
  color: var(--cream);
}

/* --------------------------------------------------------------- footer -- */
.footer {
  padding: 48px 0 28px;
}

.footer__top {
  display: flex;
  gap: 28px;
}

.footer__brand {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  padding-right: 26px;
}
.footer__brand > a {
  display: block;
  width: 64px;
}
.footer__brand h2 {
  font-size: var(--fs-h3);
  line-height: 1.2em;
  letter-spacing: -0.04em;
}

.socials {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--mist);
  transition: background-color 0.2s var(--ease);
}
.socials a:hover {
  background: var(--ice);
}
.socials img {
  width: 22px;
  height: 22px;
}

.footer__links {
  flex: 0 0 280px;
  min-width: 0;
}
.footer__links h2 {
  margin-bottom: 18px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: -0.02em;
}
.footer__links ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__links a {
  overflow-wrap: break-word;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--gray);
  transition: color 0.2s var(--ease);
}
.footer__links a:hover {
  color: var(--maho);
}

.footer__tagline {
  margin-top: -12px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--gray);
}

.footer__legal {
  margin-top: 48px;
  font-size: var(--fs-sm);
  color: var(--gray);
}

/* --------------------------------------------------------- success page -- */
.sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: 120px;
  text-align: center;
}
.sent img {
  width: 96px;
  height: 96px;
}
.sent h1,
.sent__title {
  max-width: 700px;
}
.sent__title {
  color: var(--maho);
  font-size: var(--fs-display);
  line-height: 1.1em;
  letter-spacing: -0.04em;
}
.sent__body {
  max-width: 560px;
  font-size: var(--fs-xl);
  line-height: 1.45em;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------ scroll reveals -- */
/* Framer fades and lifts most blocks in as they enter the viewport. site.js
   adds .is-in once seen; the `.js` prefix means no-JS visitors get everything
   visible, so content never depends on script running. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
.js .reveal-2 {
  transition-delay: 0.08s;
}
.js .reveal-3 {
  transition-delay: 0.16s;
}
.js .reveal-4 {
  transition-delay: 0.24s;
}

/* ---------------------------------------------------- tablet: <=1199px -- */
@media (max-width: 1199.98px) {
  :root {
    --fs-display: 56px;
    --fs-h1: 46px;
    --fs-h2: 40px;
    --fs-h3: 30px;
    --fs-h4: 30px;
    --fs-lede: 24px;
    --fs-xl: 22px;
    --fs-lg: 20px;
    --fs-md: 18px;
    --fs-sm: 17px;
    --section-y: 44px;
  }

  .nav {
    gap: 24px;
  }

  .features__panel {
    padding: 44px 36px;
  }
  .features__grid {
    gap: 44px;
  }

  .whyus__panel {
    padding: 44px;
  }
  .whyus__card {
    width: min(365px, 100%);
  }

  .cta__panel {
    padding: 72px 25px;
  }
}

/* ------------------------------------------------------ phone: <=809px -- */
@media (max-width: 809.98px) {
  :root {
    --fs-display: 42px;
    --fs-h1: 40px;
    --fs-h2: 36px;
    --fs-h3: 26px;
    --fs-h4: 26px;
    --fs-lede: 22px;
    --fs-xl: 20px;
    --fs-lg: 18px;
    --fs-md: 17px;
    --fs-sm: 16px;
    --gutter: 18px;
    --section-y: 44px;
  }

  /* The drawer starts here, not at the tablet step — the original keeps the
     full nav down to 810px. The wordmark and the "Book Now" pill both stay at
     their desktop size; only the links collapse. */
  .header {
    padding-block: 12px;
  }
  .header__inner {
    height: 60px;
  }
  .nav-toggle {
    display: block;
  }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 18px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--ice);
    box-shadow: 0 18px 40px rgb(0 0 0 / 8%);
  }
  .js .nav[data-collapsed] {
    display: none;
  }
  .nav__link {
    padding: 12px 4px;
    font-size: var(--fs-md);
  }

  .hero__inner {
    gap: 40px;
  }
  .hero--page .hero__inner {
    gap: 32px;
  }
  .hero__cover,
  .hero--page .hero__cover {
    height: 40vh;
    padding: 20px 20px 28px;
    border-radius: var(--r-tile);
  }

  .vision__grid,
  .locations__grid,
  .features__grid,
  .about-grid,
  .quotepanel {
    grid-template-columns: 1fr;
  }
  .vision__grid {
    gap: 60px;
  }
  .vision__pods {
    gap: 32px;
    padding: 0;
  }

  .locations__inner {
    gap: 56px;
  }
  .locations__grid {
    gap: 52px;
  }
  /* Photo above the list on phones, as in the original. */
  .locations__list {
    order: 1;
    gap: 32px;
  }
  /* Phones drop the description on collapsed islands too, leaving a compact
     list of names — desktop keeps all three descriptions. */
  .place[aria-expanded="false"] .place__desc {
    display: none;
  }

  .features__panel {
    padding: 32px 26px;
  }
  .features__grid {
    gap: 20px;
  }
  .feature {
    gap: 20px;
    width: 100%;
    padding-bottom: 0;
  }
  .feature__text,
  .pod__text {
    gap: 0;
  }

  .whyus__panel {
    height: 520px;
    padding: 58px 22px;
  }
  .whyus__card {
    width: 100%;
    padding: 28px 22px;
  }

  .quotes__panel {
    gap: 40px;
    padding: 34px 18px 32px;
    border-radius: var(--r-card);
  }
  .quotes__carousel {
    max-width: 100%;
    padding: 0 0 32px;
  }
  .quote {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 44px 36px 54px;
  }
  .quote__avatar {
    width: 80px;
    height: 80px;
  }
  .quote__body {
    max-width: none;
  }
  /* No room to hang the arrows outside the card on a phone. */
  .quotes__arrow {
    display: none;
  }

  .picker__grid {
    grid-template-columns: 1fr;
  }

  .stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .stat__num {
    font-size: 24px;
  }
  .stat__label {
    font-size: var(--fs-sm);
  }
  .stats__divider {
    display: none;
  }

  .about-shots {
    gap: 12px;
  }

  .cta {
    padding-block: 24px;
  }
  .cta__panel {
    padding: 56px 20px;
  }
  .cta__mark {
    width: 80px;
    height: 80px;
  }

  .footer__top {
    flex-direction: column;
    gap: 58px;
  }
  .footer__brand,
  .footer__links {
    flex: none;
  }
  .footer__brand {
    padding-right: 0;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .sent {
    padding-block: 72px;
  }
}

/* ==========================================================================
   Page-specific components

   Rules used by exactly one page. They live at the end, after the global
   breakpoint blocks, so each one can carry its own tablet/phone overrides
   without having to interleave them into the shared blocks above. Anything
   that ends up used by a second page belongs further up instead.
   ========================================================================== */

/* --- rentals — booking picker overlaid on the hero cover ----------------- */

/* Live Framer sits the white booking card on top of the 480px cover photo
   (`scroll-margin-top: 25px` on the cover, which is also `#book`). */
.hero--page .hero__cover--picker {
  height: 480px;
  justify-content: center;
  align-items: center;
  padding: 0;
  scroll-margin-top: 25px;
}

/* The live page marks this heading up as an h4 at desktop/tablet and an h5 at
   phone. We use one <h2> for document outline and pull it down to the h4 step
   so the visual size matches (32 / 30 / 26px vs the original 32 / 30 / 24px). */
.picker > h2,
.picker--overlay > h2 {
  font-size: var(--fs-h4);
  line-height: 1.35em;
  letter-spacing: -0.03em;
  text-align: center;
}

.picker--overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: max-content;
  max-width: calc(100% - 48px);
  padding: 34px;
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 0 15px 2px rgb(0 0 0 / 5%);
}

.picker--overlay .picker__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}

.picker--overlay .pick {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 312px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.picker--overlay .pick__media {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 12px;
}

.picker--overlay .pick__media img {
  aspect-ratio: 1;
  height: 80px;
}

.picker--overlay .pick__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.picker--overlay .pick h3 {
  font-size: var(--fs-md);
  font-weight: 500;
}

/* --- homeowner-services — the management services band ------------------- */

/* ------------------------------------------------------- services band -- */
/* The same two-column shell as .quotepanel, flipped: the photo leads, cropped
   taller than the 4:3 the pull-quote uses, and the copy column is inset. The
   photo comes first in the DOM, so the phone stack puts it above the copy —
   the order the original uses. */
/* The pull-quote centres its two columns; here the copy runs much taller than
   the photo, and the original top-aligns the pair. */
.quotepanel--flip {
  align-items: start;
}
.quotepanel--flip .quotepanel__media {
  max-width: 460px;
}
.quotepanel--flip .quotepanel__media img {
  aspect-ratio: 460 / 485;
}
.quotepanel--flip .quotepanel__text {
  gap: 30px;
  padding-left: 78px;
}

/* Maho tile carrying the cart-management icon, above the band's heading. */
.svc__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.svc__icon {
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 20px;
  background: var(--maho);
}
.svc__icon img {
  width: 32px;
  height: 32px;
}
/* An <h2> for the document outline, held at the h4 step the live page uses. */
.svc__head h2 {
  font-size: var(--fs-h4);
  line-height: 1.35em;
  letter-spacing: -0.03em;
}

/* Lead line, intro, "We Handle:" and the list, 20px apart — the paragraph
   spacing the original's rich-text block carries. The first two sit one step
   above body copy; "We Handle:" is body size, so it needs no rule. */
.svc__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.svc__lead,
.svc__intro {
  font-size: var(--fs-lg);
  line-height: 1.5em;
  letter-spacing: -0.03em;
}

/* The original is a plain bulleted list: a hanging "•" at a 2ch indent, body
   size, grey, with no extra space between items. */
.svc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gray);
}
.svc__list li {
  position: relative;
  padding-left: 2ch;
}
.svc__list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
}

/* ---------------------------------------------------- tablet: <=1199px -- */
@media (max-width: 1199.98px) {
  .quotepanel--flip {
    gap: 16px;
  }
  .quotepanel--flip .quotepanel__media {
    max-width: 240px;
  }
  .quotepanel--flip .quotepanel__media img {
    aspect-ratio: 240 / 385;
  }
  .quotepanel--flip .quotepanel__text {
    gap: 38px;
    padding-left: 32px;
  }

  .hero--page .hero__cover--picker {
    height: auto;
    min-height: 420px;
    padding: 28px;
  }
  .picker--overlay .picker__grid {
    flex-direction: column;
    gap: 32px;
  }
}

/* ------------------------------------------------------ phone: <=809px -- */
@media (max-width: 809.98px) {
  .quotepanel--flip .quotepanel__media {
    max-width: none;
  }
  /* Full-width band, fixed 385px crop — the portrait ratio would be a
     screenful tall at this width. */
  .quotepanel--flip .quotepanel__media img {
    aspect-ratio: auto;
    height: 385px;
  }
  .quotepanel--flip .quotepanel__text {
    gap: 38px;
    padding-left: 0;
  }

  .hero--page .hero__cover--picker {
    height: auto;
    min-height: 0;
    padding: 18px;
  }
  .picker--overlay {
    width: 100%;
    max-width: none;
    padding: 26px;
  }
  .picker--overlay .picker__grid {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .picker--overlay .pick {
    width: 100%;
  }
  .picker--overlay .pick__media,
  .picker--overlay .pick__media img {
    width: 96px;
    height: 96px;
  }
}

/* --- about — vision, stats panel and quote band -------------------------- */

/* ----------------------------------------------------------- stat counts -- */
/* site.js writes the counting digits into whichever element carries
   data-count, so the digits have to sit in their own <span>. The blanket
   `.stat__num span` rule would then paint them Maho alongside the trailing
   unit — put the counter back to black so only the unit is blue. */
.stat__num span[data-count] {
  color: var(--black);
}

/* ------------------------------------------------- about: vision + stats -- */
/* The "Vision and Mission" band stacks the two-column grid above the stats
   row, 84px apart (64px on phones), with the stats centred beneath it. */
.about-band {
  display: flex;
  flex-direction: column;
  gap: 84px;
}
.about-band > .stats {
  align-self: center;
  justify-content: space-between;
  width: 100%;
  max-width: 900px;
  padding: 46px;
  border-radius: 32px;
  background: var(--ice);
}
.about-band > .stats .stats__divider {
  background: rgb(0 64 255 / 22%);
}

/* -------------------------------------------- about: hero shots variant -- */
/* The live /about hero does not run its three photos across in a row: the
   first is a full-height portrait down the left and the other two stack
   beside it, so shot 1 is the tall one rather than the middle. Plain
   `.about-shots` stays the three-across arrangement. */
.about-shots--split {
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  height: 680px;
  padding-top: 28px;
}
.about-shots--split figure:nth-child(1) {
  grid-row: span 2;
}
.about-shots--split figure:nth-child(1) img,
.about-shots--split figure:nth-child(2) img,
.about-shots--split figure:nth-child(3) img {
  aspect-ratio: auto;
}
/* Shot 3 is a tall frame cropped into a wide slot — the original holds its
   focal point low so the houses stay in view. */
.about-shots--split figure:nth-child(3) img {
  object-position: 50% 70%;
}

/* --------------------------------------------------- about: pull-quote -- */
/* Framer washes the whole "Qoute" band in cream at 25%. */
.quoteband {
  background: rgb(255 243 230 / 25%);
}

/* ------------------------------------------------------ tablet: <=1199px -- */
@media (max-width: 1199.98px) {
  .about-shots--split {
    height: 650px;
  }
}

/* -------------------------------------------------------- phone: <=809px -- */
@media (max-width: 809.98px) {
  .about-band {
    gap: 64px;
  }
  .about-band > .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(50px, 1fr));
    align-items: start;
    gap: 32px;
    padding: 34px 24px;
    flex-direction: unset;
  }
  .about-shots--split {
    gap: 18px;
    height: 400px;
    padding-top: 28px;
  }
}

/* --- contact — reach overlay on the hero cover, then a two-column form -- */

.hero--page .hero__cover--reach {
  height: 480px;
  overflow: visible;
}
.hero--page .hero__cover--reach > img {
  border-radius: inherit;
}

.reach--overlay {
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: -65px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  gap: 34px;
  padding: 34px;
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 0 15px 2px rgb(0 0 0 / 5%);
}

.reach--overlay .reach__item {
  padding: 0;
  background: transparent;
}
.reach--overlay .reach__item:hover {
  background: transparent;
}
.reach--overlay .reach__item img {
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 12px;
  background: var(--cream);
  box-sizing: border-box;
}

.hero--reach {
  padding-bottom: 80px;
}

.sms-note--reach {
  margin-top: -36px;
  margin-bottom: 56px;
  padding-inline: 64px;
  text-align: center;
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 450px) minmax(0, 550px);
  gap: 64px;
  align-items: start;
  padding-top: 27px;
}

.contact__head {
  width: 100%;
  max-width: 450px;
  text-align: left;
}

.contact .form {
  max-width: 550px;
  margin-inline: 0;
}

@media (max-width: 1199.98px) {
  .reach--overlay {
    left: 19px;
    right: 19px;
  }
  .sms-note--reach {
    padding-inline: 19px;
  }
  .contact__inner {
    gap: 38px;
  }
}

@media (max-width: 809.98px) {
  .sms-note--reach {
    padding-inline: 20px;
  }
  .hero--page .hero__cover--reach {
    height: 320px;
  }
  .reach--overlay {
    left: 20px;
    right: 20px;
    grid-template-columns: 1fr;
    padding: 26px;
  }
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 46px;
    padding-top: 40px;
  }
  .contact__head {
    max-width: none;
    text-align: center;
  }
  .contact .form {
    max-width: none;
  }
}

/* --- legal — privacy policy and terms of use prose ----------------------- */

/* Ported from the Whale Done Wash pages these two were copied from. That site
   runs on a dark ground, so the only real changes are the ink (--gray body on
   white, --ink for emphasis) and the bullet, which is a Maho square to match
   .eyebrow::before rather than WDW's round dot. */

.legal-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 48px;
}

.legal__updated {
  color: var(--gray);
  font-size: var(--fs-sm);
}

.legal {
  max-width: 74ch;
}

.legal > * + * {
  margin-top: 16px;
}

.legal h2 {
  margin-top: 52px;
  font-size: var(--fs-h4);
  line-height: 1.3em;
}

.legal > h2:first-child {
  margin-top: 0;
}

.legal h3 {
  margin-top: 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5em;
}

.legal p {
  color: var(--gray);
}

/* No global list reset in this stylesheet, unlike WDW's — so the marker and
   its indent have to be cleared here before li::before can stand in for it. */
.legal ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.legal li {
  position: relative;
  padding-left: 24px;
  color: var(--gray);
}

.legal li + li {
  margin-top: 10px;
}

.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--maho);
}

.legal a {
  color: var(--maho);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:hover {
  color: var(--ink);
}

.legal strong {
  color: var(--ink);
  font-weight: 700;
}

/* Talkroute asks that the privacy policy be reachable from every page, so the
   footer copyright line grows a pair of links beside it. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}

.footer__legal a {
  color: var(--gray);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer__legal a:hover {
  color: var(--maho);
}

/* The one-line SMS consent notice under the contact form's phone field, and
   its twin beside the phone number on /contact. Talkroute wants this wherever
   a visitor hands over a mobile number. */
.sms-note {
  color: var(--gray);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sms-note a {
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sms-note a:hover {
  color: var(--maho);
}

@media (max-width: 809.98px) {
  .legal-head {
    margin-bottom: 36px;
  }
  .legal h2 {
    margin-top: 40px;
  }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Reveals must not leave content stranded at opacity 0. */
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  html.js::before {
    content: none;
  }
  html.js.page-onload body,
  html.js.page-enter body {
    opacity: 1;
    transform: none;
  }
  .quotes__viewport {
    scroll-behavior: auto;
  }
}