/* ==========================================================================
   Orion Hillscape — layout and fonts follow the Wix draft; colours, logos and
   components come from the Orion Hillscape design system (tokens.json,
   bundle.css: oh-btn, oh-pill, oh-card).
   ========================================================================== */

/* ---------- Fonts ----------
   Matched to the Wix draft: headings in Schibsted Grotesk (free stand-in for Aether,
   loaded from Google Fonts in index.html), body in the device's Helvetica. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Brand */
  --brand-green: #556b2f;
  --brand-navy: #0d1b2a;
  --brand-sand: #c9b79f;
  --brand-cream: #fbeee6;
  --brand-terracotta: #a9552f;
  --brand-terracotta-deep: #8f4727; /* hover state of accent only */

  /* Semantic — light theme */
  --surface: #fbeee6;
  --surface-raised: #ffffff;
  --surface-inverse: #0d1b2a;
  --ink: #0d1b2a;
  --ink-muted: #4e5966;
  --ink-inverse: #fbeee6;
  --line: #e4d6c6;
  --accent: var(--brand-terracotta);
  --on-accent: var(--brand-cream);
  --link: #556b2f;
  --focus-ring: #a9552f;

  /* Type */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-weight: 500;
  --display-tracking: -.04em;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Layout */
  --gutter: var(--space-4);
  --section-pad: calc(var(--space-16) + var(--space-8));
  --header-h: 72px;
  --max: 1320px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 900px) {
  :root { --gutter: var(--space-12); --section-pad: calc(var(--space-16) * 2); }
}

/* Navy band (the system's dark theme values) */
.theme-dark {
  --surface: #0d1b2a;
  --surface-raised: #17283b;
  --surface-inverse: #fbeee6;
  --ink: #fbeee6;
  --ink-muted: #c9b79f;
  --ink-inverse: #0d1b2a;
  --line: #2a3b4f;
  --link: #c9b79f;
  --focus-ring: #c9b79f;
}
/* Sand band: navy text on sand (8.9:1) */
.theme-sand {
  --surface: #c9b79f;
  --ink: #0d1b2a;
  --ink-muted: #0d1b2a;
  --line: rgba(13, 27, 42, .25);
  --link: #0d1b2a;
  --focus-ring: #0d1b2a;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; }
section[id] { scroll-margin-top: var(--header-h); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--brand-sand); color: var(--brand-navy); }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); background: var(--surface); color: var(--ink); position: relative; }
.theme-dark, .theme-sand { background: var(--surface); color: var(--ink); }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--brand-navy); color: var(--brand-cream); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.skip-link:focus { top: var(--space-4); }

/* ---------- Type scale ---------- */
.display-1, .display-2, .display-3, .hero__title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-wrap: balance; }
.display-1 { font-size: clamp(38px, 5vw, 60px); line-height: 1; }
.display-2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; }
.display-3 { font-size: 32px; line-height: 1.1; }
.label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.section__head { max-width: 640px; margin-bottom: var(--space-12); }
.section__intro { margin-top: var(--space-4); color: var(--ink-muted); max-width: 52ch; }

/* ---------- Components (from the design system) ---------- */
.oh-btn {
  font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 20px;
  min-height: 44px; padding: 0 var(--space-8); border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.oh-btn-primary { background: var(--accent); color: var(--on-accent); }
.oh-btn-primary:hover { background: var(--brand-terracotta-deep); }
.oh-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.oh-btn-secondary:hover { background: var(--ink); color: var(--surface); }
/* Cream pill for use over photographs, as on the Wix draft */
.oh-btn-light { background: var(--brand-cream); color: var(--brand-navy); }
.oh-btn-light:hover { background: #ffffff; }
.oh-btn-light:focus-visible { outline-color: var(--brand-cream); }

.oh-pill { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-inverse); color: var(--ink-inverse); }
.oh-pill-sand { background: var(--brand-sand); color: var(--brand-navy); }

/* ---------- Image slots ---------- */
/* Placeholder shows when the image file is missing (img removed by ohMissing). */
.media {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: linear-gradient(160deg, #0d1b2a 0%, #1f3242 45%, #3c4d2f 100%);
}
.media picture { display: block; width: 100%; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Scroll reveal (motion only) ----------
   Content is hidden only after main.js has switched reveals on, so a script failure never hides it. */
.has-motion.reveals-on .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.has-motion.reveals-on .reveal-up.is-in { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding-inline: var(--gutter); color: var(--brand-cream);
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: var(--brand-cream); color: var(--brand-navy); border-bottom-color: #e4d6c6; }
.site-header__logo { position: relative; display: block; width: 150px; flex: none; }
.site-header__logo img { width: 100%; height: auto; transition: opacity .4s var(--ease); }
.site-header__logo .logo-on-cream { position: absolute; inset: 0; opacity: 0; }
.site-header.is-solid .logo-on-photo { opacity: 0; }
.site-header.is-solid .logo-on-cream { opacity: 1; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-2); }
.site-header__link, .site-header__contact {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-3);
  font: 500 15px/20px var(--font-body); text-decoration: none; color: inherit;
}
.site-header__link { text-underline-offset: 6px; }
.site-header__link:hover { text-decoration: underline; }
.site-header__link[hidden] { display: none; }
.site-header__contact { padding: 0 var(--space-6); border: 1.5px solid currentColor; border-radius: var(--radius-pill); margin-left: var(--space-2); }
.site-header__contact:hover { background: var(--brand-cream); color: var(--brand-navy); border-color: var(--brand-cream); }
.site-header.is-solid .site-header__contact:hover { background: var(--brand-navy); color: var(--brand-cream); border-color: var(--brand-navy); }
.site-header a:focus-visible { outline-color: currentColor; }
@media (max-width: 640px) {
  .site-header__link { display: none; }
  .site-header__logo { width: 140px; }
  .site-header__contact { padding: 0 var(--space-4); }
}
@media (min-width: 900px) { .site-header__logo { width: 180px; } }

/* ---------- Hero ---------- */
/* Expanding frame. The static layout (no JS, reduced motion) is the end state:
   the full-screen photo with the headline at the bottom. With motion, the photo
   starts as a small frame over a soft background and grows as you scroll. */
.hero { position: relative; min-height: 600px; height: 100vh; height: 100svh; color: var(--brand-cream); background: var(--brand-navy); overflow: hidden; }
.hero__bg, .hero__frame { position: absolute; inset: 0; border-radius: 0; }
.hero__bg { display: none; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(13, 27, 42, .45); }
.hero__frame img { object-position: 50% 45%; }
.hero__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 27, 42, .45) 0%, rgba(13, 27, 42, 0) 22%),
    linear-gradient(0deg, rgba(13, 27, 42, .78) 0%, rgba(13, 27, 42, .5) 35%, rgba(13, 27, 42, .15) 58%, rgba(13, 27, 42, 0) 72%);
}

.hero__split, .hero__hint { display: none; }
.hero__split {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  flex-direction: column; align-items: center; justify-content: center; gap: .08em;
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(28px, 7.4vw, 120px); line-height: .95; text-align: center;
}
.hero__line { display: block; white-space: nowrap; }
.hero__hint {
  position: absolute; left: 0; right: 0; bottom: var(--space-8); z-index: 2; text-align: center;
  font-size: 14px; line-height: 20px; letter-spacing: .02em;
}

.hero__end {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 var(--gutter) clamp(var(--space-16), 12vh, 128px);
}
.hero__heading { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: inherit; }
.hero__title { display: block; font-size: clamp(38px, 5.2vw, 76px); line-height: 1; max-width: 15ch; }
.hero__lead { margin: var(--space-6) 0 var(--space-8); max-width: 44ch; font-size: 17px; line-height: 27px; }
.hero__title, .hero__lead, .hero__kicker { text-shadow: 0 2px 24px rgba(13, 27, 42, .5); }
/* The first line of the story. With motion it is shown by the split headline, so here it stays
   readable to screen readers only; without motion it sits as a small line above the title. */
.hero__kicker { display: block; margin: 0 0 var(--space-4); font: 500 17px/1.3 var(--font-body); letter-spacing: .01em; }
.has-motion .hero__kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.has-motion .hero__bg { display: block; }
.has-motion .hero__split { display: flex; }
.has-motion .hero__hint { display: block; }
/* Starting state before the script runs, so there is no flash of the full photo. */
.has-motion .hero__frame { clip-path: inset(calc(50% - 220px) calc(50% - 170px) round 16px); }
.has-motion .hero__end { opacity: 0; }
@media (max-width: 767px) {
  .has-motion .hero__frame { clip-path: inset(calc(50% - 180px) calc(50% - 130px) round 16px); }
}
.hero__line-inner { display: block; text-shadow: 0 2px 28px rgba(13, 27, 42, .45); }
.has-motion .hero__line-inner { animation: heroText 1.2s var(--ease) both; }
.has-motion .hero__line--b .hero__line-inner { animation-delay: .12s; }
@keyframes heroText { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Clouds: drift slowly around the starting frame, then part as it expands (js/main.js).
   The textures are drawn once in JS; here they only slide. The centre is kept clear for the headline. */
.hero__clouds {
  display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 34% 30% at 50% 50%, transparent 25%, #000 80%);
  mask-image: radial-gradient(ellipse 34% 30% at 50% 50%, transparent 25%, #000 80%);
}
.has-motion .hero__clouds { display: block; animation: cloudsIn 2.4s var(--ease) both; }
@keyframes cloudsIn { from { opacity: 0; } to { opacity: 1; } }
.cloud { position: absolute; overflow: hidden; will-change: transform, opacity; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Fixed-size tiles so the texture never stretches. Sliding by exactly one tile loops seamlessly
   (the noise is stitched); the strip is wide enough to cover the cloud while it slides. */
.cloud { --tile: 1200px; }
.cloud__drift { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--tile) * 3); background-repeat: repeat; background-size: var(--tile) calc(var(--tile) / 2); animation: drift 120s linear infinite; }
@media (max-width: 767px) { .cloud { --tile: 800px; } }
.cloud--left  { left: -20%; top: -8%; width: 80%; height: 115%; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 35% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 35% 50%, #000 30%, transparent 75%); }
.cloud--right { right: -20%; top: 0; width: 80%; height: 115%; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 55%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 65% 55%, #000 30%, transparent 75%); }
.cloud--low   { left: -10%; bottom: -14%; width: 120%; height: 50%; -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 100%); mask-image: linear-gradient(0deg, #000 30%, transparent 100%); }
/* Depth: the far layer (right) is smaller, fainter and slower; the near low mist is larger. */
.cloud--left  { opacity: .72; }
.cloud--right { opacity: .55; --tile: 1000px; }
.cloud--low   { opacity: .75; --tile: 1600px; }
.cloud--right .cloud__drift { animation-duration: 200s; animation-direction: reverse; }
.cloud--low .cloud__drift { animation-duration: 160s; }
@media (max-width: 767px) {
  .cloud--right { --tile: 700px; }
  .cloud--low { --tile: 1000px; }
}
@keyframes drift { to { transform: translateX(calc(var(--tile) * -1)); } }

/* Phones: two cloud bands (top and bottom) with one soft edge each, no nested mask, no third layer.
   The frame starts as a card via the clip below (static, before the script runs); the script then
   switches it to a scale transform, so the phone never re-cuts the photo while scrolling. */
@media (max-width: 767px) {
  .hero__clouds { -webkit-mask-image: none; mask-image: none; }
  .cloud--right { display: none; }
  .cloud--left {
    left: -10%; top: -6%; width: 120%; height: 42%;
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  }
  .cloud--low { bottom: -8%; height: 42%; }
  .hero__frame, .hero__frame picture { transform-origin: 50% 50%; will-change: transform; }
  /* Ready-made graphics layers for everything that animates, so nothing is set up mid-swipe. */
  .hero__bg, .hero__end, .hero__line, .hero__hint, .cloud { will-change: transform, opacity; }
  .hero__line-inner { text-shadow: 0 1px 12px rgba(13, 27, 42, .45); }
}

/* Weather card: frosted glass over the photo, one large thin number, quiet labels. */
.weather {
  position: absolute; right: var(--gutter); bottom: var(--space-6); z-index: 3;
  width: 264px; padding: 18px 20px 16px; border-radius: 22px; color: var(--brand-cream);
  background:
    linear-gradient(155deg, rgba(251, 238, 230, .2) 0%, rgba(251, 238, 230, .05) 55%, rgba(251, 238, 230, .02) 100%),
    rgba(13, 27, 42, .34);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(251, 238, 230, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .weather { background: rgba(13, 27, 42, .82); }
}
.weather[hidden] { display: none; }
/* Own graphics layer: the animated icon and live dot then redraw only this card, not the page. */
.weather { will-change: transform; }
.weather__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.weather__place { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .01em; }
.weather__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #9cc46a; flex: none; }
.weather__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: livePulse 2.4s ease-out infinite; }
@keyframes livePulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.weather__icon { flex: none; width: 46px; height: 46px; margin: -4px -4px 0 0; color: var(--brand-cream); }
.weather__icon svg { width: 100%; height: 100%; overflow: visible; }

.weather__temp {
  display: flex; align-items: flex-start; margin-top: var(--space-1);
  font-family: var(--font-display); font-weight: 400; font-size: 68px; line-height: .95; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.weather__unit { margin: 8px 0 0 6px; font-size: 20px; line-height: 1; letter-spacing: 0; opacity: .7; }
.weather__sky { margin-top: 6px; font-size: 15px; line-height: 20px; color: rgba(251, 238, 230, .82); }

.weather__stats {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(251, 238, 230, .16);
}
.weather__stats dt { font-size: 11px; line-height: 14px; color: rgba(251, 238, 230, .62); }
.weather__stats dd { margin-top: 3px; font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Phones and small tablets: a compact pill under the header with the dot, icon, temperature and sky. */
@media (max-width: 900px) {
  .weather {
    top: calc(var(--header-h) + var(--space-2)); bottom: auto; right: var(--gutter);
    /* Solid instead of frosted: a blur here would be recalculated on every frame of the hero. */
    -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 27, 42, .78);
    display: flex; align-items: center; gap: var(--space-2); width: auto;
    padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
  }
  .weather__head { display: contents; }
  .weather__place { margin: 0; font-size: 0; gap: 0; }
  .weather__icon { order: 1; width: 26px; height: 26px; margin: 0; }
  .weather__temp { order: 2; margin: 0; font-size: 20px; line-height: 1; letter-spacing: -.02em; }
  .weather__unit { margin: 1px 0 0 2px; font-size: 11px; }
  .weather__sky { order: 3; margin: 0; font-size: 13px; line-height: 16px; }
  .weather__stats { display: none; }
  /* Animations inside an SVG can't be handed to the graphics chip, so keep the small pill icon still. */
  .weather__icon * { animation: none !important; }
}

/* Weather icons: one gentle, looping movement each, matched to the sky. */
.wx-rays { transform-origin: 24px 24px; animation: wxSpin 24s linear infinite; }
.wx-sun { animation: wxGlow 4s ease-in-out infinite; transform-origin: 24px 24px; }
.wx-cloud { animation: wxFloat 6s ease-in-out infinite; }
.wx-cloud--back { animation-duration: 8s; animation-direction: reverse; opacity: .55; }
.wx-mist line { animation: wxMist 5s ease-in-out infinite; }
.wx-mist line:nth-child(2) { animation-delay: -1.6s; }
.wx-mist line:nth-child(3) { animation-delay: -3.2s; }
.wx-drop { animation: wxRain 1.2s linear infinite; }
.wx-drop:nth-child(2) { animation-delay: -.4s; }
.wx-drop:nth-child(3) { animation-delay: -.8s; }
.wx-bolt { animation: wxFlash 3.2s ease-in-out infinite; }
.wx-moon { animation: wxGlow 5s ease-in-out infinite; transform-origin: 24px 24px; }
.wx-star { animation: wxTwinkle 3s ease-in-out infinite; }
.wx-star:nth-of-type(2) { animation-delay: -1.5s; }
@keyframes wxSpin { to { transform: rotate(360deg); } }
@keyframes wxGlow { 50% { transform: scale(1.06); opacity: .85; } }
@keyframes wxFloat { 50% { transform: translateX(3px); } }
@keyframes wxMist { 50% { transform: translateX(4px); opacity: .45; } }
@keyframes wxRain { from { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(8px); opacity: 0; } }
@keyframes wxFlash { 0%, 86%, 100% { opacity: .35; } 90%, 94% { opacity: 1; } }
@keyframes wxTwinkle { 50% { opacity: .2; } }

/* ---------- Place: statement + three cards ---------- */
.place__head { text-align: center; max-width: 1040px; margin: 0 auto var(--space-16); }
.place__intro { margin: var(--space-6) auto 0; max-width: 48ch; font-size: 18px; line-height: 30px; color: var(--ink-muted); }
.place__cards { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .place__cards { grid-template-columns: repeat(3, 1fr); } }

.pcard { border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; min-height: 420px; }
.pcard--green { background: var(--brand-green); color: var(--brand-cream); }
.pcard--sand { background: var(--brand-sand); color: var(--brand-navy); }
.pcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
.pcard__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 32px; line-height: 1.05; }
.pcard__text { padding: var(--space-6); margin-top: auto; max-width: 34ch; }

.pcard__media { flex: 1; min-height: 260px; border-radius: 0; }
.pcard__caption {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: rgba(13, 27, 42, .78); color: var(--brand-cream); font-size: 14px; line-height: 22px;
}

.pcard--potential { gap: var(--space-4); padding: var(--space-4); }
.pcard__side { aspect-ratio: 4 / 3; }
.pcard__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
@media (min-width: 640px) {
  .pcard--potential { flex-direction: row; padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); }
  .pcard__side { flex: 0 0 38%; aspect-ratio: auto; min-height: 360px; }
}
.pcard--potential .pcard__top { padding: var(--space-2) var(--space-2) 0; }
.pcard--potential .pcard__text { padding: var(--space-4) var(--space-2) var(--space-2); }
@media (min-width: 900px) and (max-width: 1180px) {
  .pcard__title { font-size: 26px; }
}

/* ---------- Expertise ---------- */
.expertise .display-2 { margin-bottom: var(--space-12); }
.expertise__grid { display: grid; gap: var(--space-8); }
.service { padding-top: var(--space-6); border-top: 1.5px solid var(--brand-navy); max-width: 40ch; }
.service__title { font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: var(--space-3); }
@media (min-width: 900px) { .expertise__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); } }

/* ---------- Why Orion Hillscape ---------- */
.why { position: relative; overflow: hidden; color: var(--brand-cream); background: var(--brand-navy); }
.why__bg { position: absolute; inset: -10% 0; border-radius: 0; }
.why__bg img { object-position: 50% 60%; }
.why::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 27, 42, .55) 0%, rgba(13, 27, 42, .15) 35%, rgba(13, 27, 42, 0) 60%);
}
.why__inner { position: relative; z-index: 2; padding-block: var(--section-pad) clamp(var(--space-16), 30vh, 360px); }
.why__title { text-align: center; margin-bottom: var(--space-12); }
.why__grid { display: grid; gap: var(--space-6); max-width: 1120px; margin-inline: auto; }
@media (min-width: 900px) {
  .why__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .wcard--tall { grid-column: 2; grid-row: 1 / span 2; }
}
.wcard { border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-8); min-height: 240px; }
.wcard--tall { justify-content: space-between; }
.wcard__title { font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: var(--space-2); }
.wcard p { max-width: 50ch; }
.wcard--green { background: var(--brand-green); color: var(--brand-cream); }
.wcard--navy { background: var(--brand-navy); color: var(--brand-cream); }
.wcard--cream { background: var(--brand-cream); color: var(--brand-navy); }
.wcard__chart { width: 100%; max-width: 420px; height: auto; margin: var(--space-4) auto; color: var(--brand-navy); }
.wcard__chart .hollow { fill: var(--brand-cream); }
.has-motion.reveals-on .wcard__chart polyline { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.has-motion.reveals-on .wcard__chart circle { opacity: 0; transition: opacity .5s var(--ease); }
.has-motion .is-in .wcard__chart polyline { stroke-dashoffset: 0; }
.has-motion .is-in .wcard__chart circle { opacity: 1; }
.has-motion .is-in .wcard__chart circle:nth-of-type(2) { transition-delay: .5s; }
.has-motion .is-in .wcard__chart circle:nth-of-type(3) { transition-delay: .8s; }
.has-motion .is-in .wcard__chart circle:nth-of-type(4) { transition-delay: 1.1s; }
.has-motion .is-in .wcard__chart circle:nth-of-type(5) { transition-delay: 1.4s; }

/* ---------- Properties ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filters[hidden] { display: none; }
.filter {
  min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 500 15px/20px var(--font-body);
}
.filter[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.properties__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.properties__grid:empty { display: none; }
.oh-card { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-6); }
.property { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.property[hidden] { display: none; }
.property .media { aspect-ratio: 4 / 3; border-radius: 0; }
.property__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
.property__body .oh-pill { align-self: flex-start; }
.property__body h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.property__meta { font-size: 14px; line-height: 22px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.property__body p { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.property__body .property__price { color: var(--ink); font-weight: 500; }
.property__body .oh-btn { margin-top: auto; align-self: flex-start; }


/* ---------- Founder ---------- */
.founder__grid { display: grid; gap: var(--space-8); }
.founder__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: var(--display-tracking); }
.founder__quote { margin: 0 0 var(--space-6); }
.founder__quote p { font-size: clamp(24px, 3vw, 40px); line-height: 1.25; letter-spacing: -.01em; max-width: 26ch; }
.founder__cite { font-weight: 500; }
@media (min-width: 900px) {
  .founder__grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
}

/* ---------- A view worth owning ---------- */
.view { position: relative; overflow: hidden; min-height: 640px; height: 92vh; max-height: 900px; color: var(--brand-navy); background: #b9c6d3; }
.view__bg { position: absolute; inset: -8% 0; border-radius: 0; }
.view__bg img { object-position: 70% 50%; }
.view::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 238, 230, .35) 0%, rgba(251, 238, 230, 0) 40%);
}
.view__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding-block: var(--space-16) var(--space-16); }
.view__lead { margin-top: var(--space-6); max-width: 36ch; font-size: 18px; line-height: 28px; font-weight: 500; }
/* Phones: a tall full-bleed crop would stretch this wide photo about 3x and hide the building,
   so show the text first and the photo below it at its own shape, centred on the building. */
@media (max-width: 767px) {
  .view { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; background: var(--brand-cream); }
  .view::before { display: none; }
  .view__inner { order: 0; height: auto; padding-block: var(--space-16) var(--space-8); }
  .view__bg { order: 1; position: relative; inset: auto; aspect-ratio: 4 / 3; width: 100%; }
  .view__bg img { object-position: 88% 50%; }
}

/* ---------- Contact ---------- */
.contact__grid { display: grid; gap: var(--space-12); align-items: center; }
.contact__lead { margin-top: var(--space-4); color: var(--ink-muted); font-size: 18px; line-height: 30px; max-width: 40ch; }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.contact__details { display: grid; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.contact__details dt { color: var(--ink-muted); margin-bottom: var(--space-2); }
.contact__details a { color: var(--link); text-underline-offset: 3px; }
.contact__media { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .contact__details { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-8) var(--space-6); font-size: 14px; line-height: 22px; border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; gap: var(--space-6); align-items: center; }
.site-footer__logo { width: 180px; height: auto; }
.site-footer a { text-underline-offset: 3px; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr auto auto; gap: var(--space-16); }
}

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-navy); color: var(--brand-cream); border: 1.5px solid var(--brand-sand);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .2s;
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { background: var(--brand-green); }
.wa-float:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 3px; }
@media (min-width: 900px) { .wa-float { right: var(--space-8); bottom: var(--space-8); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}