/* ==========================================================================
   124 West — site styles

   Layout, rhythm and components follow the Shore to Summit Hospitality site
   (Sept 2026 export), which is the owner's established preference. Palette,
   typography and the logo mark follow the 124 West Brand & Style Book,
   colour direction 01 "Pacific Precision".

   The two systems map onto each other closely:
     cream   #F4F0E8 -> Warm Ivory  #F7F3EB
     forest  #173B34 -> Deep Navy   #183449
     clay    #A76D47 -> Copper      #B96945
     Georgia          -> DM Serif Display
     system sans      -> Manrope
   ========================================================================== */

:root {
  /* Brand book, colour direction 01 */
  --navy:      #183449;
  --teal:      #28646A;
  --sea-glass: #DCE8E2;
  --ivory:     #F7F3EB;
  --copper:    #B96945;

  /* Derived */
  --navy-deep:   #12283A;  /* footer, one step below the anchor */
  --navy-raised: #1E4059;  /* panels sitting on navy */
  --copper-text: #9A552F;  /* copper darkened for small text on ivory */
  --copper-soft: #E0B090;  /* copper lightened for text on navy */
  --teal-hover:  #1F5056;

  --ink:          var(--navy);
  --ink-muted:    #4A6374;
  --ink-soft:     #5F7686;
  --on-dark:      #F6F2E9;
  --on-dark-mute: rgba(246, 242, 233, 0.70);
  --on-dark-faint:rgba(246, 242, 233, 0.46);

  --rule:         rgba(24, 52, 73, 0.14);
  --rule-strong:  rgba(24, 52, 73, 0.26);
  --rule-dark:    rgba(246, 242, 233, 0.17);

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --shell: 76rem;
  --gutter: 1rem;
  --radius-lg: 2rem;
  --radius-md: 1.2rem;
  --radius-sm: 0.9rem;
}

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

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

@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;
  }
}

body { margin: 0; font-family: var(--font-body); }
img, svg { max-width: 100%; display: block; }

.site-shell {
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 15%, rgba(220, 232, 226, 0.55), transparent 28rem),
    var(--ivory);
  min-height: 100vh;
  overflow: hidden;
}

.shell {
  width: min(100% - 2rem, var(--shell));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- type -- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }

.eyebrow {
  color: var(--copper-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.section-heading h2,
.services-heading h2,
.insight-copy h2,
.market-copy h2,
.owner-fit h2,
.consultation h2 {
  letter-spacing: -0.035em;
  font-size: clamp(2.5rem, 4.6vw, 4.3rem);
  line-height: 1.02;
}

.section-intro {
  color: var(--ink-muted);
  align-self: end;
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------- buttons -- */

.cta-primary, .cta-header, .cta-light, .cta-guests {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.cta-primary:hover, .cta-header:hover, .cta-light:hover, .cta-guests:hover { transform: translateY(-2px); }

.cta-header {
  color: var(--on-dark);
  background: var(--teal);
  min-height: 2.9rem;
  padding: 0 1.15rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.cta-header:hover { background: var(--teal-hover); }

/* The guest site is the other half of the business, not one nav link among
   four, so it gets a button in the header. Copper marks it as the guest side
   and keeps it from competing with the teal owner call to action. */
.cta-guests {
  color: var(--copper-text);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(185, 105, 69, 0.5);
  min-height: 2.9rem;
  padding: 0 1.05rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Filling with --copper puts #FFF8ED on #B96945, which is 3.85:1 — short of
   AA for 12.8px text. The darkened copper clears it at 5.3:1. */
.cta-guests:hover {
  color: #FFF8ED;
  background: var(--copper-text);
  box-shadow: inset 0 0 0 1px var(--copper-text);
}

.cta-primary {
  color: #fff;
  background: var(--navy);
  min-height: 3.35rem;
  padding: 0 1.45rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.cta-primary:hover { background: var(--navy-raised); }

.cta-accent { background: var(--copper); }
.cta-accent:hover { background: #A2572F; }

.cta-light {
  color: var(--navy);
  background: var(--sea-glass);
  min-height: 3.5rem;
  padding: 0 1.35rem;
  font-size: 0.84rem;
  font-weight: 700;
}
.cta-light:hover { background: #EAF2EE; }

.text-link {
  color: var(--ink-muted);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}
.text-link:hover { color: var(--ink); }

.light-text-link {
  color: var(--on-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.light-text-link:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.75rem 1rem;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------- header -- */

.header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100% - 2rem, var(--shell));
  min-height: 5.75rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}

/* The Westward Bearing mark is close to 4:1, so it reads as a thin squiggle
   set beside the wordmark. It stacks above it, as the brand book draws it. */
.brand { color: inherit; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-decoration: none; }
.brand-mark {
  flex: none;
  width: 5.2rem; height: 1.37rem;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  background-image: url("/assets/img/logo-mark.png");
  background-image: -webkit-image-set(url("/assets/img/logo-mark.png") 1x, url("/assets/img/logo-mark@2x.png") 2x);
  background-image: image-set(url("/assets/img/logo-mark.png") 1x, url("/assets/img/logo-mark@2x.png") 2x);
}
.brand strong, .brand small { display: block; }
.brand strong {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.brand small {
  color: var(--teal);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 0.2rem;
  font-size: 0.56rem;
  font-weight: 700;
}
.brand--vacations small { color: var(--copper-text); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a { color: var(--ink-muted); font-size: 0.88rem; font-weight: 650; text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
  font: inherit; font-size: 0.78rem; font-weight: 700;
  padding: 0.62em 0.95em;
  cursor: pointer;
}

.mobile-nav { display: none; }
.mobile-nav[data-open="true"] {
  display: grid;
  width: min(100% - 2rem, var(--shell));
  margin: 0 auto;
  padding: 0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.mobile-nav a {
  color: var(--ink); text-decoration: none; font-weight: 650;
  padding: 0.75rem 0; border-bottom: 1px solid var(--rule);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.95fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  width: min(100% - 2rem, var(--shell));
  min-height: calc(100vh - 5.75rem);
  margin: 0 auto;
  padding: 5rem 0 6rem;
}

.hero h1 {
  max-width: 12ch;
  letter-spacing: -0.045em;
  font-size: clamp(3.4rem, 6.9vw, 6.3rem);
  line-height: 0.94;
}
.hero h1 span { color: var(--teal); font-style: italic; display: block; }

.hero-lead {
  color: var(--ink-muted);
  max-width: 37rem;
  margin: 2rem 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.hero-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }

.hero-proof {
  color: var(--ink-soft);
  display: flex;
  gap: 1.35rem;
  margin: 2rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  list-style: none;
}
.hero-proof li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-proof svg { color: var(--teal); }

.hero-visual {
  position: relative;
  min-height: 35rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255,255,255,0.07), transparent 48%), var(--navy);
  box-shadow: 0 2rem 5rem rgba(22, 44, 62, 0.22);
}
.visual-glow {
  position: absolute; top: 8%; right: -18%;
  width: 22rem; height: 22rem;
  border: 1px solid rgba(220, 232, 226, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(220, 232, 226, 0.035), 0 0 0 10rem rgba(220, 232, 226, 0.02);
}
.visual-horizon { position: absolute; inset: 0; width: 100%; height: 100%; }

.card-float {
  position: absolute;
  display: flex;
  gap: 0.9rem;
  max-width: 19rem;
  padding: 1.3rem;
  border-radius: var(--radius-md);
  box-shadow: 0 1.25rem 3rem rgba(7, 22, 34, 0.26);
}
.card-performance { color: var(--navy); background: #FBF8F2; top: 13%; left: -8%; }
.card-care { color: #FBF6EF; background: var(--copper); bottom: 14%; right: -6%; }
/* The guest hero carries one card, not two: pinned at 13% it left the panel
   bottom-heavy with empty navy, so it sits nearer the middle instead. */
.hero-visual--single .card-performance { top: 34%; }

.card-icon {
  flex: none; display: grid; place-items: center;
  width: 2.45rem; height: 2.45rem; border-radius: 0.8rem;
}
.card-performance .card-icon { color: var(--sea-glass); background: var(--teal); }
.card-care .card-icon { color: #A2572F; background: #F8EEE0; }

.card-float span {
  display: block; margin-bottom: 0.35rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.62rem; font-weight: 700; opacity: 0.72;
}
.card-float strong { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: 400; }
.card-float p { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.5; opacity: 0.8; }

.visual-caption {
  position: absolute; bottom: 1.5rem; left: 1.6rem;
  margin: 0;
  color: var(--on-dark-faint);
  font-family: var(--font-display); font-style: italic; font-size: 0.9rem;
}

/* ----------------------------------------------- shared section widths -- */

.statement, .host-section, .services, .process,
.markets, .owner-fit, .consultation, .footer {
  width: min(100% - 2rem, var(--shell));
  margin-inline: auto;
}

/* --------------------------------------------------------- statement -- */

.statement {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.65fr);
  gap: 3rem 6rem;
  padding: 8rem 0;
}

.principle-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.principle-grid article { border-right: 1px solid var(--rule); min-height: 17rem; padding: 2rem 2rem 1rem 0; }
.principle-grid article + article { padding-left: 2rem; }
.principle-grid article:last-child { border-right: 0; }

.principle-grid > article > span,
.process-grid > article > span {
  color: var(--copper-text);
  letter-spacing: 0.13em;
  font-size: 0.7rem;
  font-weight: 800;
}

.principle-grid h3, .service-grid h3, .process-grid h3 {
  letter-spacing: -0.015em;
  margin: 3.6rem 0 0.8rem;
  font-size: 1.4rem;
}
.principle-grid p, .service-grid p, .process-grid p {
  color: var(--ink-muted);
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ------------------------------------------------------- host section -- */

.host-section { padding-bottom: clamp(4rem, 8vw, 8rem); }
.host-section .section-intro { max-width: 48rem; margin-top: 1.5rem; }

.host-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.host-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.host-card h3 { font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.host-card .eyebrow { margin-bottom: 1rem; }
.host-tenure, .host-source { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.6; }
.host-tenure { margin: 0.75rem 0 0; }
.host-source { margin-top: 1.5rem; font-size: 0.8rem; max-width: 60rem; }

/* ------------------------------------------------------------ services -- */

.services {
  color: var(--on-dark);
  background: var(--navy);
  border-radius: 2.2rem;
  padding: 7rem 0;
}
.services-heading, .service-grid { width: calc(100% - 7rem); margin-inline: auto; }
.services-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; }
.services-heading > p { color: var(--on-dark-mute); max-width: 25rem; margin: 0 0 0.4rem; line-height: 1.65; }

.services .eyebrow, .insight-copy .eyebrow, .consultation .eyebrow { color: var(--copper-soft); }
.services h2, .insight-copy h2, .consultation h2 { color: var(--on-dark); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  border-top: 1px solid var(--rule-dark);
  border-left: 1px solid var(--rule-dark);
}
.service-grid article {
  border-bottom: 1px solid var(--rule-dark);
  border-right: 1px solid var(--rule-dark);
  min-height: 18rem;
  padding: 2rem;
}
.service-grid h3 { color: #FFFBF4; margin-top: 2.6rem; }
.service-grid p { color: var(--on-dark-mute); }
.service-icon {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--copper-soft);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

/* ------------------------------------------------------------- insight -- */

.insight-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
  margin-top: 7rem;
  color: var(--on-dark);
  background: var(--copper);
}
.insight-copy { align-self: center; padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 7vw, 7rem); }
.insight-copy .eyebrow { color: #FBE6D5; }
.insight-copy > p:not(.eyebrow) {
  color: rgba(255, 247, 235, 0.82);
  max-width: 34rem;
  margin: 1.5rem 0 0;
  line-height: 1.75;
}

.insight-panel {
  align-self: center;
  margin: 4rem clamp(2rem, 7vw, 7rem) 4rem 0;
  padding: clamp(2rem, 5vw, 4rem);
  background: rgba(24, 52, 73, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 1.6rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.panel-header span, .panel-header strong { display: block; }
.panel-header span {
  color: rgba(255, 247, 235, 0.68);
  letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 0.35rem; font-size: 0.65rem; font-weight: 800;
}
.panel-header strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }

.signal-list { display: grid; gap: 1.55rem; margin-top: 3rem; }
.signal-list div { display: grid; gap: 0.7rem; }
.signal-list span { font-size: 0.8rem; }
.signal-list i {
  position: relative; display: block; overflow: hidden;
  height: 0.25rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.signal-list i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--signal-width); border-radius: inherit; background: #FAE8D5;
}
.panel-note { color: rgba(255, 247, 235, 0.72); margin: 2.5rem 0 0; font-size: 0.7rem; line-height: 1.55; }

/* ------------------------------------------------------------- process -- */

.process { padding: 8rem 0; }
.process .section-heading { max-width: 48rem; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 4rem; }
.process-grid article {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  min-height: 20rem;
  padding: 2rem;
}
.process-grid article > svg { position: absolute; top: 1.8rem; right: 1.8rem; color: var(--teal); }
.process-grid h3 { margin-top: 6.2rem; }

/* ------------------------------------------------------------- markets -- */

.markets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--sea-glass);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.market-visual {
  position: relative; overflow: hidden; min-height: 37rem;
}

.market-copy { align-self: center; padding: clamp(3rem, 7vw, 6rem); }
.market-copy > p:not(.eyebrow) { color: var(--ink-muted); margin: 1.5rem 0 0; line-height: 1.75; }
.market-copy ul { display: grid; gap: 0.8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.market-copy li { color: var(--ink); display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 650; }
.market-copy li svg { color: var(--teal); flex: none; }

/* ----------------------------------------------------------- owner fit -- */

.owner-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1fr);
  gap: 5rem;
  padding: 8rem 0;
}
.fit-list { border-top: 1px solid var(--rule); }
.fit-list p {
  color: var(--ink-muted);
  display: grid; grid-template-columns: 2.5rem 1fr;
  margin: 0; padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.7;
}
.fit-list span { color: var(--copper-text); font-size: 0.68rem; font-weight: 800; }

/* -------------------------------------------------------- consultation -- */

.consultation {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.6fr);
  align-items: end;
  gap: 4rem;
  padding: clamp(3rem, 7vw, 6rem);
  color: var(--on-dark);
  background: var(--navy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.consultation > div:first-child > p:not(.eyebrow) {
  color: var(--on-dark-mute);
  max-width: 39rem;
  margin: 1.5rem 0 0;
  line-height: 1.75;
}
.consultation-action { display: grid; justify-items: start; gap: 1rem; }
.consultation-action span { color: var(--on-dark-faint); font-size: 0.72rem; }
.consultation-action span a { color: var(--sea-glass); }

/* -------------------------------------------------------------- footer -- */

.footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem clamp(2rem, 5vw, 4rem);
  color: var(--on-dark);
  background: var(--navy-deep);
}
.footer .brand { color: var(--on-dark); }
.footer .brand small { color: var(--sea-glass); }
.footer .brand-mark {
  background-image: url("/assets/img/logo-mark-light.png");
  background-image: -webkit-image-set(url("/assets/img/logo-mark-light.png") 1x, url("/assets/img/logo-mark-light@2x.png") 2x);
  background-image: image-set(url("/assets/img/logo-mark-light.png") 1x, url("/assets/img/logo-mark-light@2x.png") 2x);
}
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: var(--on-dark-mute); font-size: 0.78rem; text-decoration: none; }
.footer-links a:hover { color: var(--on-dark); }
.footer > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--on-dark-faint);
  font-size: 0.68rem;
}

/* ============================================ Vacations-only components == */

.homes-section { padding: 2rem 0 8rem; }
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.home-card {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.home-card__photo { position: relative; aspect-ratio: 3 / 2; }
.ph { background: linear-gradient(170deg, #CFDDE0 0%, #A9C2C6 42%, #7E9FA5 100%); }
.ph--warm { background: linear-gradient(170deg, #E4D9C6 0%, #CDBCA2 45%, #A98F74 100%); }
.ph--deep { background: linear-gradient(170deg, #45707A 0%, #2B5567 48%, #183449 100%); }
.ph--sea  { background: linear-gradient(170deg, #E8F0EC 0%, #C9DBD8 50%, #9DBCBC 100%); }
.ph__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(to top, rgba(24,52,73,0.66), transparent);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.home-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; }
.home-card__meta {
  color: var(--teal); letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.68rem; font-weight: 800;
}
.home-card h3 { font-size: 1.4rem; letter-spacing: -0.015em; }
.home-card p { color: var(--ink-muted); margin: 0; font-size: 0.9rem; line-height: 1.65; }
.home-card__facts {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem;
  margin-top: 0.4rem; padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 0.78rem;
}

.stay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
  margin-top: 4rem;
  list-style: none; padding: 0;
}
.stay-grid li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.9rem; align-items: start; }
.stay-grid .service-icon { width: 2.4rem; height: 2.4rem; }
.stay-grid b { display: block; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; color: #FFFBF4; }
.stay-grid span { color: var(--on-dark-mute); font-size: 0.85rem; line-height: 1.6; }

.arrival-grid { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.arrival-card {
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 2rem;
}
.arrival-card h3 { font-size: 1.3rem; margin-bottom: 0.7rem; letter-spacing: -0.015em; }
.arrival-card p { color: var(--ink-muted); margin: 0; font-size: 0.92rem; line-height: 1.7; }

.coast-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); margin-top: 3rem; }
.coast-grid article { border-right: 1px solid var(--rule); padding: 2rem 2rem 1rem 0; }
.coast-grid article + article { padding-left: 2rem; }
.coast-grid article:last-child { border-right: 0; }
.coast-grid h3 { font-size: 1.4rem; letter-spacing: -0.015em; margin-bottom: 0.8rem; }
.coast-grid p { color: var(--ink-muted); margin: 0; font-size: 0.92rem; line-height: 1.7; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero { grid-template-columns: 1fr; padding-top: 4rem; min-height: auto; }
  .hero-content { max-width: 42rem; }
  .hero-visual { width: min(100%, 36rem); margin: 0 auto; }
  .statement, .owner-fit { grid-template-columns: 1fr; }
  .services-heading { flex-direction: column; align-items: flex-start; }
  .service-grid, .process-grid { grid-template-columns: 1fr 1fr; }
  .insight-section { grid-template-columns: 1fr; }
  .insight-panel { margin: 0 2rem 4rem; }
  .markets { grid-template-columns: 1fr; }
  .market-visual { min-height: 30rem; }
  .consultation { grid-template-columns: 1fr; }
  .coast-grid { grid-template-columns: 1fr; }
  .coast-grid article, .coast-grid article + article {
    border-right: 0; border-bottom: 1px solid var(--rule); padding: 1.8rem 0;
  }
}

@media (max-width: 580px) {
  .header { min-height: 4.8rem; }
  /* Below 580px the header drops the owner call to action — it sits in the
     hero directly below and in the mobile menu. The guest button stays: it is
     the only route to the other site that does not need the menu opened. */
  .cta-header { display: none; }
  .cta-guests { min-height: 2.6rem; padding: 0 0.85rem; font-size: 0.74rem; }
  .hero { padding: 3.2rem 0 4rem; }
  .hero h1 { font-size: clamp(3rem, 14.5vw, 4.4rem); }
  .hero-actions, .hero-proof { flex-direction: column; align-items: flex-start; }
  .cta-primary { width: 100%; }
  .hero-visual { border-radius: 1.5rem; min-height: 29rem; }
  .card-performance { top: 10%; left: 1rem; }
  .hero-visual--single .card-performance { top: 30%; }
  .card-care { bottom: 15%; right: 1rem; }
  .statement, .process, .owner-fit { padding: 5.5rem 0; }
  .principle-grid, .service-grid, .process-grid { grid-template-columns: 1fr; }
  .principle-grid article, .principle-grid article + article {
    border-right: 0; border-bottom: 1px solid var(--rule); min-height: auto; padding: 1.8rem 0;
  }
  .principle-grid h3 { margin-top: 2rem; }
  .services { border-radius: 0; width: 100%; }
  .services-heading, .service-grid { width: calc(100% - 2rem); }
  .service-grid article { min-height: auto; }
  .insight-section { margin-top: 0; }
  .insight-copy { padding: 5rem 1rem 3rem; }
  .insight-panel { margin: 0 1rem 4rem; padding: 1.5rem; }
  .process-grid article { min-height: 17rem; }
  .markets { border-radius: 0; width: 100%; }
  .market-visual { min-height: 25rem; }
  .market-copy { padding: 4rem 1rem; }
  .owner-fit { gap: 3rem; }
  .consultation, .footer { width: 100%; }
  .consultation { border-radius: 0; padding: 4.5rem 1rem; }
  .consultation-action, .cta-light { width: 100%; }
  .footer { grid-template-columns: 1fr; padding: 2.5rem 1rem; }
  .brand strong { font-size: 1.05rem; }
}