/* ═══════════════════════════════════════════════════════════════════════
   LUMINA — Ultra Luxury Property Management
   Hand-authored. No framework, no build step, no dependencies.

   Design system
   ─────────────
   A light-ground, card-based layout: a soft grey page with white and near-
   black panels floating on it at a 24–28px radius, a photographic hero
   card with the navigation floating over it, and a bold geometric
   grotesque (General Sans) carrying the headlines.

   Rules that keep it consistent:
     · Two radii only — 28px for page-level cards, 14px for controls and
       inner panels. Pills only on the nav and buttons.
     · One shadow recipe, applied to floating elements only.
     · Ink is warm near-black; there is no pure black and no pure white.
     · Motion is a single reveal per block plus control transitions.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FONTS ─────────────────────────────────────────────────────────── */

@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/gs-400.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/gs-500.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/gs-600.woff2') format('woff2'); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/gs-700.woff2') format('woff2'); }

/* ── TOKENS ────────────────────────────────────────────────────────── */

:root {
  --bg:        #F1F1EF;   /* page ground */
  --surface:   #FFFFFF;   /* cards */
  --surface-2: #F7F7F5;   /* inner wells */
  --ink:       #16181A;   /* headings, buttons */
  --ink-2:     #5C6064;   /* body — 6.9:1 on white */
  --ink-3:     #83878C;   /* labels — 4.6:1 on white */
  --line:      #E3E3DF;
  --line-2:    #D3D3CD;

  --dark:      #16181A;
  --dark-2:    #202326;
  --dark-line: #32363A;
  --dark-ink:  #F3F3F1;
  --dark-ink-2:#A6ABAF;   /* 7.2:1 on --dark */

  --accent:    #9A7B45;   /* warm brass — used sparingly */
  --accent-lt: #C3A162;
  --danger:    #A33A1E;

  --font: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --r-card: 28px;
  --r-ui:   14px;
  --r-pill: 999px;

  /* One shadow recipe and its hover pair — nothing else casts a shadow. */
  --shadow:      0 1px 2px rgba(20,22,24,.04), 0 8px 24px -12px rgba(20,22,24,.14);
  --shadow-lift: 0 1px 2px rgba(20,22,24,.05), 0 18px 40px -18px rgba(20,22,24,.22);

  --gut:  20px;
  --wrap: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 768px)  { :root { --gut: 32px; } }
@media (min-width: 1200px) { :root { --gut: 40px; } }

/* ── BASE ──────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }

::selection { background: var(--ink); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.slab :focus-visible, .foot :focus-visible, .hero :focus-visible { outline-color: var(--accent-lt); }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.u-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  transform: translateY(-200%);
  background: var(--ink); color: #fff;
  padding: 13px 20px; border-radius: var(--r-ui);
  font-size: .875rem; font-weight: 500; text-decoration: none;
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ── TYPE PRIMITIVES ───────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 14px;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--light { color: var(--dark-ink-2); }

.h2 {
  font-size: clamp(1.95rem, 3.6vw, 3.15rem);
  line-height: 1.08;
  max-width: 18ch;
}
.h2--sm { font-size: clamp(1.65rem, 2.6vw, 2.35rem); max-width: 20ch; }
.h2--light { color: var(--dark-ink); }

.h3 { font-size: 1.3rem; line-height: 1.25; }

.link {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: var(--line-2);
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.link:hover, .link:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--dark-2); transform: translateY(-1px); }

.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover, .btn--light:focus-visible { background: #fff; color: var(--ink); opacity: .9; }

.btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255,255,255,.12); border-color: #fff; }

/* ═══ HERO ═════════════════════════════════════════════════════════════
   A photographic card inset from the page edge on all four sides, with
   the nav floating on it. The gradient is part of the hero card and does
   not appear anywhere else in the system.
   ═════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative; isolation: isolate;
  margin: 12px;
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: min(760px, calc(100svh - 24px));
  display: flex; flex-direction: column;
  padding: 18px 18px 24px;
  color: #fff;
}
@media (min-width: 768px) {
  .hero { margin: 16px; padding: 22px 30px 34px; min-height: min(820px, calc(100svh - 32px)); }
}
@media (min-width: 1200px) { .hero { padding: 24px 40px 44px; } }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (max-width: 767px) { .hero__media img { object-position: 55% 50%; } }

/* Three washes, each doing one job: a top scrim so the nav reads, a left
   wash so the headline holds contrast whatever the photograph does there,
   and a bottom lift under the buttons. Without the left wash the display
   type sits on a bright roofline and drops under 4.5:1. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10,12,14,.58) 0%, rgba(10,12,14,.12) 20%, rgba(10,12,14,0) 38%),
    linear-gradient(to right,  rgba(10,12,14,.78) 0%, rgba(10,12,14,.46) 34%, rgba(10,12,14,0) 68%),
    linear-gradient(to top,    rgba(10,12,14,.72) 0%, rgba(10,12,14,.26) 30%, rgba(10,12,14,0) 58%);
}
/* On a phone the headline, lede and both buttons stack over the lower two
   thirds of a bright white house. A left wash cannot help there — it needs
   a bottom-up one that is dense enough to hold 4.5:1 for the lede. */
@media (max-width: 767px) {
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(10,12,14,.70) 0%, rgba(10,12,14,.30) 14%, rgba(10,12,14,0) 26%),
      linear-gradient(to top, rgba(10,12,14,.90) 0%, rgba(10,12,14,.78) 42%, rgba(10,12,14,.35) 66%, rgba(10,12,14,0) 82%);
  }
}

/* ── floating nav ── */

.topbar {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  flex: none;
}

.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; margin-right: auto; }
.brand__mark { width: 22px; height: 22px; flex: none; }
.brand__name { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; }

/* The logo is white, and the hero behind it is a bright house photo, so a
   soft shadow keeps its edge readable. The top scrim does most of the work;
   the shadow covers the frames where a white wall sits right behind it. */


/* ═══ RESIDENCE MOSAIC (About) ═══════════════════════════════════════
   The grid alone decides every tile's size; the photos are laid into those
   boxes absolutely and cropped with object-fit. Nothing depends on an
   image's own dimensions, so every engine — Safari included — produces the
   same geometry: one gutter, edges that line up, right-hand tiles that are
   always identical.

   Desktop: a large aerial beside two stacked interiors, the whole block at
   a fixed proportion so both columns end on the same line.
   Tablet/phone: the aerial full width, the interiors as a matched pair. */
.gallery {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.gallery figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-card); background: var(--line);
  aspect-ratio: 1 / 1;
}
.gallery img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 760ms var(--ease);
}
.gallery figure:hover img { transform: scale(1.035); }
.gallery__main { grid-column: 1 / -1; aspect-ratio: 3 / 2 !important; }
@media (min-width: 600px) { .gallery figure { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
  .gallery {
    gap: 16px;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 2 / 1;
  }
  .gallery figure { aspect-ratio: auto; }
  .gallery__main { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto !important; }
}
/* Crops chosen per photo so each tile shows its subject, not its edge. */
.gallery__main img { object-position: 50% 55%; }
.gallery figure:nth-child(2) img { object-position: 40% 60%; }
.gallery figure:nth-child(3) img { object-position: 55% 55%; }

.pillnav {
  display: none;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.pillnav a {
  position: relative;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.9);
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  transition: background 170ms var(--ease), color 170ms var(--ease);
}
.pillnav a + a::before {
  content: ''; position: absolute; left: -1px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 15px; background: rgba(255,255,255,.24);
}
.pillnav a:hover, .pillnav a:focus-visible { background: rgba(255,255,255,.18); color: #fff; }
.pillnav a:hover::before, .pillnav a.is-current::before { opacity: 0; }
.pillnav a.is-current { background: #fff; color: var(--ink); }

.topbar__end { display: flex; align-items: center; gap: 10px; }

.langswitch {
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.langswitch button {
  appearance: none; border: 0; background: none;
  padding: 7px 12px; border-radius: var(--r-pill);
  font: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  color: rgba(255,255,255,.72); cursor: pointer;
  transition: background 170ms var(--ease), color 170ms var(--ease);
}
.langswitch button:hover { color: #fff; }
.langswitch button[aria-pressed='true'] { background: #fff; color: var(--ink); }

.burger {
  appearance: none; cursor: pointer;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.burger__box { display: block; width: 17px; }
.burger__box i {
  display: block; height: 1.5px; border-radius: 2px; background: #fff;
  transition: transform 240ms var(--ease), opacity 160ms var(--ease);
}
.burger__box i + i { margin-top: 4px; }
.burger[aria-expanded='true'] i:first-child { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] i:last-child  { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 20;
  min-width: 232px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(22,24,26,.90);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.14);
}
.drawer[hidden] { display: none; }
.drawer nav { display: flex; flex-direction: column; gap: 2px; }
.drawer a {
  padding: 12px 14px; border-radius: 12px;
  color: #fff; text-decoration: none;
  font-size: .9375rem; font-weight: 500;
}
.drawer a:hover, .drawer a:focus-visible { background: rgba(255,255,255,.12); }

@media (min-width: 1080px) {
  .pillnav { display: flex; }
  .burger { display: none; }
}

/* ── hero content ── */

.hero__body {
  margin-top: auto;
  padding-top: 60px;
  max-width: 52ch;
}
.hero__eyebrow {
  margin: 0 0 16px;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.hero__head {
  font-size: clamp(2.35rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.hero__lede {
  margin-top: 18px;
  max-width: 50ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Shrink-to-fit buttons stacked on a narrow screen read as two ragged
   pills; full width makes the stack deliberate. */
@media (max-width: 479px) { .hero__actions { display: grid; gap: 10px; } }

.hero__note {
  display: none;
  position: absolute; right: 30px; bottom: 34px; z-index: 2;
  width: 320px;
  padding: 22px 24px;
  border-radius: 22px;
  /* Dark glass, not light — white-on-light-glass over a bright photograph
     is the single most common contrast failure in this layout. */
  background: rgba(12,14,16,.46);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.20);
}
@supports not (backdrop-filter: blur(1px)) {
  .hero__note { background: rgba(12,14,16,.78); }
}
.hero__note-head { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.018em; }
.hero__note-body { margin-top: 9px; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.hero__note-meta {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.74);
}
/* The note card is absolutely positioned at the right, so the body only
   needs a measure — never a padding, which would net against max-width. */
@media (min-width: 1080px) { .hero__note { display: block; } }
@media (min-width: 1200px) { .hero__note { right: 40px; bottom: 44px; } }

/* ═══ PHILOSOPHY PILLARS ═══════════════════════════════════════════════ */

.pillars { padding-block: 72px 8px; }
@media (min-width: 900px) { .pillars { padding-block: 100px 16px; } }

.pillars__grid {
  display: grid; gap: 40px 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 44px 40px; } }
@media (min-width: 1080px) { .pillars__grid { grid-template-columns: repeat(4, 1fr); gap: 0 34px; } }

.pillar { max-width: 34ch; }
.pillar__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  margin-bottom: 20px;
}
.pillar__icon svg { width: 27px; height: 27px; }
.pillar h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.pillar p { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }

/* On the widest layout the four pillars read as one banded row. */
@media (min-width: 1080px) {
  .pillar { padding-left: 26px; border-left: 1px solid var(--line); }
  .pillar:first-child { padding-left: 0; border-left: 0; }
}

/* ═══ SECTION SCAFFOLD ═════════════════════════════════════════════════ */

.section { padding-block: 68px; }
.section--tight { padding-block: 48px; }
@media (min-width: 900px) {
  .section { padding-block: 96px; }
  .section--tight { padding-block: 64px; }
}

.section__head { margin-bottom: 40px; }
.section__lede {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.section__aside {
  max-width: 34ch;
  font-size: .9375rem; line-height: 1.6;
  color: var(--ink-2);
}
.section__aside--wide { max-width: 46ch; font-size: 1rem; line-height: 1.65; }
@media (min-width: 900px) {
  .section__head { margin-bottom: 52px; }
  .section__head--split {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,26ch);
    gap: 48px; align-items: end;
  }
  .section__head--split:has(.section__aside--wide) { grid-template-columns: minmax(0,1fr) minmax(0,42ch); }
}

.figure {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--line);
}
.figure img { width: 100%; }

.cols { margin-top: 40px; display: grid; gap: 18px; color: var(--ink-2); max-width: 62ch; }
.cols p { font-size: 1rem; line-height: 1.65; }
@media (min-width: 900px) {
  .cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px; max-width: none; }
}

/* ═══ OWNER VOICES ════════════════════════════════════════════════════
   A scroll-snap rail, not a slideshow: the browser does the scrolling, the
   buttons just nudge it, and nothing moves on its own. Swipe works natively
   on touch, arrow keys work once the rail has focus, and with JavaScript off
   it stays a readable, scrollable row.
   ═══════════════════════════════════════════════════════════════════════ */

.voices__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }

.voices__controls { display: none; gap: 10px; flex: none; }
@media (min-width: 720px) { .voices__controls { display: flex; } }

.voices__btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color 170ms var(--ease), background 170ms var(--ease), opacity 170ms var(--ease);
}
.voices__btn svg { width: 20px; height: 20px; }
.voices__btn:hover { border-color: var(--ink); }
.voices__btn[disabled] { opacity: .35; cursor: default; border-color: var(--line); }

.voices__track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.voices__track::-webkit-scrollbar { display: none; }
.voices__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-ui); }

.voice {
  flex: 0 0 100%; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 28px 24px 26px;
}
/* Two at a time from tablet up, never three: with four testimonials a
   three-up rail scrolls exactly once, which makes the controls look
   decorative. Two gives the rail three real positions and a comfortable
   measure for quotes this long. */
@media (min-width: 720px) { .voice { flex-basis: calc((100% - 16px) / 2); padding: 34px 32px 30px; } }

.voice figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.voice blockquote { margin: 0; flex: 1; }
.voice p {
  font-size: 1.0625rem; line-height: 1.55; color: var(--ink);
  letter-spacing: -0.008em;
}
.voice figcaption {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}

.voices__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.voices__dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--line-2); cursor: pointer;
  transition: background 170ms var(--ease), transform 170ms var(--ease);
}
.voices__dots button[aria-current="true"] { background: var(--ink); transform: scale(1.25); }
@media (min-width: 720px) { .voices__dots { display: none; } }

/* ═══ SERVICE CARDS ════════════════════════════════════════════════════ */

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 26px 32px;
  box-shadow: var(--shadow);
}
.card__num {
  display: inline-block;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin-bottom: 14px;
}
.card h3 {
  font-size: 1.1875rem; font-weight: 600; line-height: 1.24;
  letter-spacing: -0.02em;
  min-height: 2.5em;   /* keeps bullet lists aligned across a row */
}
.card ul { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.card li {
  position: relative; padding-left: 18px;
  font-size: .9063rem; line-height: 1.5; color: var(--ink-2);
}
.card li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 6px; height: 1.5px; border-radius: 2px; background: var(--line-2);
}

/* A photograph occupying one cell of the card grid, so the section is not
   six identical boxes. */
.card--media { padding: 0; overflow: hidden; border: 0; }
.card--media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
/* On phones the photo cell stays, as a landscape band between the cards,
   rather than disappearing and taking one of the five photographs with it. */
@media (max-width: 719px) {
  .card--media img { min-height: 0; aspect-ratio: 4 / 3; object-position: 50% 58%; }
}

/* ═══ WHY LUMINA — dark slab ═══════════════════════════════════════════ */

.slab {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--r-card);
  padding: 44px 24px 46px;
}
@media (min-width: 900px)  { .slab { padding: 64px 56px 66px; } }
@media (min-width: 1200px) { .slab { padding: 76px 72px 78px; } }

.slab__head { margin-bottom: 36px; }
@media (min-width: 900px) { .slab__head { margin-bottom: 48px; } }

.compare { width: 100%; border-collapse: collapse; text-align: left; font-size: .9375rem; }
.compare thead th {
  padding: 0 24px 14px 0;
  border-bottom: 1px solid var(--dark-line);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark-ink-2);
  vertical-align: bottom;
}
.compare thead th:last-child { color: var(--accent-lt); padding-right: 0; }

.compare tbody th {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--dark-line);
  font-weight: 500; color: var(--dark-ink-2);
  vertical-align: top; white-space: nowrap;
}
.compare tbody td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--dark-line);
  color: var(--dark-ink-2);
  vertical-align: top; line-height: 1.5;
}
.compare tbody td:last-child { color: var(--dark-ink); font-weight: 500; padding-right: 0; width: 34%; }

/* Below 800px the three columns cannot coexist. Each row becomes a block:
   the dimension as a heading, then the two positions stacked under their
   own short tags. */
@media (max-width: 799px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare { border-top: 1px solid var(--dark-line); }
  .compare tbody tr { padding: 20px 0 22px; border-bottom: 1px solid var(--dark-line); }
  .compare tbody th {
    padding: 0 0 13px; border: 0; white-space: normal;
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em;
    color: var(--dark-ink);
  }
  .compare tbody td { padding: 0; border: 0; width: auto; }
  .compare tbody td + td { margin-top: 13px; }
  .compare tbody td::before {
    content: attr(data-head);
    display: block; margin-bottom: 3px;
    font-size: .625rem; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--dark-ink-2); opacity: .72;
  }
  /* width:auto must be restated here: the desktop `td:last-child { width:34% }`
     is more specific than the stacked `td` rule and was squeezing the Lumina
     value into a third of the block. */
  .compare tbody td:last-child { width: auto; padding-left: 14px; border-left: 1px solid var(--accent-lt); }
  .compare tbody td:last-child::before { color: var(--accent-lt); opacity: 1; }
}

.slab__pull {
  margin-top: 40px;
  max-width: 68ch;
  font-size: 1.0625rem; line-height: 1.62;
  color: var(--dark-ink-2);
}
@media (min-width: 900px) { .slab__pull { margin-top: 52px; } }

/* ═══ REFERRALS ════════════════════════════════════════════════════════ */

.refer { display: grid; gap: 36px; }
@media (min-width: 1000px) {
  .refer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
}
.refer__p { margin-top: 16px; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 58ch; }

/* The referral CTA is the one elevated button below the hero: a larger
   primary, placed in the argument rather than after it. */
.refer__cta { margin-top: 30px; }
.btn--lg { min-height: 58px; padding: 0 34px; font-size: 1rem; }

.refer__body .steps { margin-top: 0; }
@media (min-width: 1000px) { .refer__body { padding-top: 30px; } }

.refer__trust {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  font-size: .9688rem; line-height: 1.6;
  color: var(--ink);
}

/* ═══ ON THE GROUND ════════════════════════════════════════════════════ */

.presence { padding-block: 64px 12px; }
@media (min-width: 900px) { .presence { padding-block: 96px 28px; } }

.presence__grid { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .presence__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; align-items: start; }
  .presence__grid .eyebrow { padding-top: 8px; }
}
.presence__lead {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.4; font-weight: 500; letter-spacing: -0.018em;
  color: var(--ink); max-width: 44ch;
}
.presence__body p + p { margin-top: 18px; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 60ch; }

/* ═══ GUEST REVIEWS ═══════════════════════════════════════════════════
   A single figure, given room. It reuses the "On the ground" rhythm — an
   eyebrow in the narrow column, content in the wide one — so it reads as
   part of the page, not as a badge dropped onto it. */

.proof { padding-block: 26px 12px; }
@media (min-width: 900px) { .proof { padding-block: 40px 20px; } }

.proof__grid { display: grid; gap: 14px; padding-top: 34px; border-top: 1px solid var(--line-2); }
@media (min-width: 900px) {
  .proof__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: 10px 48px; padding-top: 44px; align-items: baseline;
  }
  .proof__grid .eyebrow { padding-top: 10px; }
  .proof__body { grid-column: 2; }
}

.proof__figure { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.proof__num {
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.proof__unit {
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink-2);
  padding-bottom: .25em;
}
.proof__body {
  margin-top: 10px;
  max-width: 58ch; font-size: 1rem; line-height: 1.65; color: var(--ink-2);
}

/* ═══ SPLIT (heading left, prose right) ═══════════════════════════════ */

.split { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
}
.split__body { max-width: 62ch; }
.split__body p { font-size: 1rem; line-height: 1.68; color: var(--ink-2); }
.split__body p + p { margin-top: 18px; }
.split__body .split__lead {
  font-size: 1.1875rem; line-height: 1.5; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
}

/* Light-ground pull paragraph: the brass rule is the only ornament. */
.pull {
  margin-top: 30px !important;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  color: var(--ink) !important;
}

.section__aside p + p { margin-top: 1em; }

/* ═══ TESTIMONIAL ══════════════════════════════════════════════════════ */

.quote { margin: 52px 0 0; padding-left: 24px; border-left: 2px solid var(--accent); max-width: 40ch; }
.quote blockquote { margin: 0; }
.quote p {
  font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.25;
  font-weight: 600; letter-spacing: -0.022em; color: var(--ink);
}
.quote figcaption {
  margin-top: 14px;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 900px) { .quote { margin-top: 72px; margin-left: calc(47% + 28px); } }

/* ═══ SERVICE 05 CLOSING LINE ══════════════════════════════════════════ */

.card__note {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .9063rem; line-height: 1.55; color: var(--ink);
}

/* ═══ WHERE WE MANAGE ══════════════════════════════════════════════════ */

.where { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: stretch; }
  .where__media img { height: 100%; object-fit: cover; }
}
.where__media { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--line); }
.where__media img { width: 100%; }

.places { margin-top: 26px; border-bottom: 1px solid var(--line-2); }
.places li {
  display: grid; gap: 2px;
  padding: 15px 0;
  border-top: 1px solid var(--line-2);
}
.places__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.places__note { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.where__outro { margin-top: 24px; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 56ch; }

/* ═══ PRICING NOTE (contact) ═══════════════════════════════════════════ */

.panel__pricing {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  font-size: .9063rem; line-height: 1.55; color: var(--ink);
  max-width: 60ch;
}

.steps { margin-top: 30px; display: grid; gap: 0; }
.steps li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--line-2);
}
.steps li:last-child { border-bottom: 1px solid var(--line-2); }
.steps__num {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; color: var(--accent); flex: none;
}
.steps p { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }

.refer__note { margin-top: 26px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }

/* ═══ CONTACT ══════════════════════════════════════════════════════════ */

.contact { display: grid; gap: 16px; }
@media (min-width: 1000px) {
  .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 24px 34px;
  box-shadow: var(--shadow);
}
@media (min-width: 768px) { .panel { padding: 40px 38px 42px; } }

.panel--form { scroll-margin-top: 100px; }
.panel__note { margin-top: 12px; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }

.form { margin-top: 28px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } }
.form__row + .form__row,
.form__row + .form__referral,
.form__row + .field,
.form__referral + .field { margin-top: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }

.field input, .field select, .field textarea {
  appearance: none; width: 100%; min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ui);
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color 170ms var(--ease), background 170ms var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%2383878C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  padding-right: 38px; cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--ink);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); }
.field__err { font-size: .8125rem; color: var(--danger); }
.field__err[hidden] { display: none; }
.form__referral[hidden] { display: none; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.form__status { font-size: .875rem; color: var(--ink-2); max-width: 42ch; }
.form__status.is-ok  { color: var(--accent); }
.form__status.is-err { color: var(--danger); }

.panel--form.is-sent .form { display: none; }
.enquiry__done { display: none; outline: none; }
.panel--form.is-sent .enquiry__done { display: block; margin-top: 24px; }
.enquiry__done p { margin-top: 12px; color: var(--ink-2); max-width: 50ch; font-size: .9375rem; line-height: 1.6; }

.panel--channels { background: var(--surface-2); }
.channel { padding: 17px 0; border-bottom: 1px solid var(--line); }
.channel:first-child { padding-top: 0; }
.channel:last-child { padding-bottom: 0; border-bottom: 0; }
.channel dt {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.channel dd { font-size: .9688rem; line-height: 1.5; color: var(--ink); }

/* ═══ FOOTER ═══════════════════════════════════════════════════════════ */

.foot { padding-bottom: 12px; }
@media (min-width: 768px) { .foot { padding-bottom: 16px; } }

.foot__card {
  background: var(--dark); color: var(--dark-ink-2);
  border-radius: var(--r-card);
  padding: 40px 24px 32px;
}
@media (min-width: 768px) { .foot__card { padding: 52px 44px 36px; } }

.foot__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.brand--foot { color: var(--dark-ink); margin-right: 0; }
.foot__tag {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--dark-ink-2);
}

.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 30px; }
.foot__nav a {
  color: var(--dark-ink-2); text-decoration: none; font-size: .9375rem;
  transition: color 160ms var(--ease);
}
.foot__nav a:hover, .foot__nav a:focus-visible { color: var(--dark-ink); }

.foot__note { margin-top: 26px; font-size: .9375rem; max-width: 44ch; }

/* Licence credit for the placeholder imagery. Deliberately the quietest
   type on the page — it is a legal obligation, not a design element. */
.foot__credit {
  margin-top: 28px;
  font-size: .75rem;
  color: var(--dark-ink-2);
  opacity: .78;
}
.foot__credit .link { text-decoration-color: var(--dark-line); }
.foot__credit .link:hover, .foot__credit .link:focus-visible { color: var(--accent-lt); text-decoration-color: var(--accent-lt); }

.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  margin-top: 18px; padding-top: 22px;
  border-top: 1px solid var(--dark-line);
  font-size: .8125rem;
}

/* ═══ MOTION ═══════════════════════════════════════════════════════════
   Four moves, and deliberately no fifth:

     1. a staged hero entrance, once, on load
     2. hover response on the things that are actually interactive
     3. a short stagger inside the two grids, so a row of four does not
        snap into place as one slab
     4. a crossfade when the language changes

   Everything is opacity and transform only. No parallax, no scroll-linked
   scaling, no counters, no marquees — those read as effort, and effort is
   the opposite of what this brand is selling.
   ═════════════════════════════════════════════════════════════════════ */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; transition: none; }

/* ── 1 · hero entrance ──────────────────────────────────────────────
   Pure CSS, no JavaScript gate: with `both` fill the element ends in its
   final state whatever happens, so a blocked script can never leave the
   hero blank. Delays stay under a quarter second — this is a settle, not
   a performance. */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { transform: scale(1.045); }
  to   { transform: none; }
}

.hero__eyebrow { animation: rise 560ms var(--ease) both; }
.hero__head    { animation: rise 620ms 70ms  var(--ease) both; }
.hero__lede    { animation: rise 620ms 140ms var(--ease) both; }
.hero__actions { animation: rise 620ms 210ms var(--ease) both; }
.hero__note    { animation: rise 700ms 320ms var(--ease) both; }

/* Scale only — never opacity. The photograph is the LCP element and
   fading it in would delay the largest paint for no aesthetic gain. */
.hero__media img { animation: settle 1600ms var(--ease) both; }

/* ── 2 · hover ──────────────────────────────────────────────────────── */

.card {
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-lift); }
.card--media:hover { transform: translateY(-3px); }

/* Images ease up inside their own frame. The frame never moves. */
.figure, .refer__media, .card--media { overflow: hidden; }
.figure img, .refer__media img, .card--media img {
  transition: transform 760ms var(--ease);
  will-change: transform;
}
.figure:hover img, .refer__media:hover img, .card--media:hover img { transform: scale(1.035); }
.card--media:hover img { transform: scale(1.045); }

.pillar__icon { transition: transform 300ms var(--ease); }

/* ── 3 · grid stagger ───────────────────────────────────────────────
   Applied to two grids only, and capped at six steps. Any longer and it
   stops reading as craft and starts reading as a slideshow. */

.pillars__grid .reveal:nth-child(2) { transition-delay: 70ms; }
.pillars__grid .reveal:nth-child(3) { transition-delay: 140ms; }
.pillars__grid .reveal:nth-child(4) { transition-delay: 210ms; }

.cards .reveal:nth-child(2) { transition-delay: 60ms; }
.cards .reveal:nth-child(3) { transition-delay: 120ms; }
.cards .reveal:nth-child(4) { transition-delay: 180ms; }
.cards .reveal:nth-child(5) { transition-delay: 240ms; }
.cards .reveal:nth-child(6) { transition-delay: 300ms; }

/* ── 4 · language crossfade ─────────────────────────────────────────
   The swap itself is synchronous; this just stops it happening as a
   flicker. Applied to the content, never to the switch itself, so the
   control the visitor just pressed stays solid under their cursor. */

main, .foot__card { transition: opacity 180ms var(--ease); }
.is-swapping main, .is-swapping .foot__card { opacity: .38; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .is-swapping main, .is-swapping .foot__card { opacity: 1; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ═══ PRINT ════════════════════════════════════════════════════════════ */

@media print {
  .topbar, .drawer, .panel--form, .skip, .hero__note, .hero__actions { display: none !important; }
  body { background: #fff; }
  .hero { min-height: auto; color: #000; margin: 0; }
  .hero::after, .hero__media { display: none; }
  .hero__eyebrow, .hero__lede { color: #333; }
  .slab, .foot__card { background: #fff; color: #000; }
  .compare tbody th, .compare tbody td, .compare thead th { border-color: #ccc; color: #000; }
  .card, .panel { box-shadow: none; border-color: #ccc; }
  .reveal { opacity: 1; transform: none; }
  .section { break-inside: avoid; padding-block: 24px; }
}