/* Documented MAC fallback tokens; the shared design-system checkout is absent. */
:root {
  color-scheme: dark;
  --mac-background: #0a0a0a;
  --mac-surface: #141414;
  --mac-text: #ffffff;
  --mac-text-secondary: #a3a3a3;
  --mac-border: #333333;
  --mac-accent: #3385ff;
  --mac-primary: #5200cc;
  --mac-space-1: 8px;
  --mac-space-2: 16px;
  --mac-space-3: 24px;
  --mac-space-4: 32px;
  --mac-space-5: 40px;
  --mac-space-6: 48px;
  --mac-space-8: 64px;
  --mac-space-10: 80px;
  --mac-space-12: 96px;
  --mac-font-body: Arial, Helvetica, sans-serif;
  --mac-font-display: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--mac-space-4); }
body { margin: 0; background: var(--mac-background); color: var(--mac-text); font: 300 16px/1.6 var(--mac-font-body); }
a { color: inherit; text-underline-offset: var(--mac-space-1); }
a:focus-visible { outline: 2px solid var(--mac-accent); outline-offset: var(--mac-space-1); }
::selection { background: var(--mac-accent); color: var(--mac-background); }
.wrap { width: min(100% - var(--mac-space-12), 1280px); margin-inline: auto; }
.border-border { border-color: var(--mac-border); border-style: solid; border-width: 0; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--mac-space-3); padding-block: var(--mac-space-4); border-bottom-width: 1px; }
.brand { font-size: 24px; letter-spacing: -.04em; text-decoration: none; }
.brand-dot { color: var(--mac-accent); }
.nav-link { font-size: 14px; text-decoration: none; padding-block: var(--mac-space-1); }
.nav-link span { margin-left: var(--mac-space-2); }
.intro { padding-block: var(--mac-space-10) var(--mac-space-8); }
.eyebrow { margin: 0; font: 300 14px/1.5 var(--mac-font-body); text-transform: uppercase; letter-spacing: .12em; }
.intro > .eyebrow { color: var(--mac-text-secondary); margin-bottom: var(--mac-space-4); }
h1, h2, h3, p, figure { margin: 0; }
h1 { font: 300 60px/1.04 var(--mac-font-display); letter-spacing: -.055em; }
h1 em { font-weight: 300; }
.intro-bottom { display: flex; align-items: end; justify-content: space-between; gap: var(--mac-space-4); margin-top: var(--mac-space-5); }
.intro-bottom p { color: var(--mac-text-secondary); font-size: 24px; line-height: 1.5; }
.text-link { padding-block: var(--mac-space-1); white-space: nowrap; }
.text-link span { margin-left: var(--mac-space-2); }
.panorama img { display: block; width: 100%; height: 320px; object-fit: cover; }
figcaption { color: var(--mac-text-secondary); font-size: 14px; padding-top: var(--mac-space-1); }
.houses { padding-block: var(--mac-space-10); }
.section-head { display: flex; justify-content: space-between; gap: var(--mac-space-3); margin-bottom: var(--mac-space-3); }
.muted { color: var(--mac-text-secondary); font-size: 14px; }
.house-grid { display: grid; grid-template-columns: 1fr 1fr; border-top-width: 1px; border-bottom-width: 1px; }
.house { display: flex; flex-direction: column; padding: var(--mac-space-5); text-decoration: none; transition: background-color .2s; }
.house:first-child { border-right-width: 1px; }
.house:hover { background: var(--mac-surface); }
.house-top { display: flex; justify-content: space-between; align-items: center; color: var(--mac-text-secondary); }
.arrow { font-size: 24px; color: var(--mac-text); }
h3 { font: 300 36px/1.2 var(--mac-font-display); letter-spacing: -.04em; margin-top: var(--mac-space-5); }
h3 span { display: block; font: 300 16px/1.5 var(--mac-font-body); letter-spacing: normal; margin-top: var(--mac-space-1); }
.house p { color: var(--mac-text-secondary); margin-top: var(--mac-space-4); margin-bottom: var(--mac-space-5); }
.house-link { margin-top: auto; display: flex; justify-content: space-between; }
.arrangement { display: grid; grid-template-columns: 1fr 2fr; gap: var(--mac-space-8); padding-bottom: var(--mac-space-10); border-bottom-width: 1px; }
h2:not(.eyebrow) { font: 300 36px/1.16 var(--mac-font-display); letter-spacing: -.04em; }
.arrangement p:not(.eyebrow) { max-width: 56ch; margin-top: var(--mac-space-3); color: var(--mac-text-secondary); }
.enquiry { padding-block: var(--mac-space-10); border-bottom-width: 1px; }
.enquiry h2 { margin-top: var(--mac-space-4); }
.enquiry > p:not(.eyebrow) { margin-block: var(--mac-space-3) var(--mac-space-4); color: var(--mac-text-secondary); }
.enquiry-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--mac-space-6); padding: var(--mac-space-2) var(--mac-space-3); background: var(--mac-primary); color: var(--mac-text); text-decoration: none; }
.enquiry-link:hover { text-decoration: underline; }
.footer { display: flex; gap: var(--mac-space-3); justify-content: space-between; padding-block: var(--mac-space-4); color: var(--mac-text-secondary); font-size: 14px; }
.skip { position: absolute; left: var(--mac-space-3); top: var(--mac-space-2); transform: translateY(-200%); padding: var(--mac-space-2); background: var(--mac-text); color: var(--mac-background); z-index: 1; }
.skip:focus { transform: translateY(0); }
@media (max-width: 800px) {
  .wrap { width: calc(100% - var(--mac-space-6)); }
  .intro-bottom { align-items: start; flex-direction: column; }
  .intro-bottom p { font-size: 24px; }
  .house { padding: var(--mac-space-4); }
  .arrangement { grid-template-columns: 1fr; gap: var(--mac-space-4); }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - var(--mac-space-6)); }
  .masthead { align-items: start; padding-block: var(--mac-space-3); }
  .brand { font-size: 24px; }
  .nav-link { max-width: 88px; text-align: right; line-height: 1.5; padding: 0; }
  .nav-link span { margin-left: 0; }
  .intro { padding-block: var(--mac-space-8) var(--mac-space-6); }
  .intro-bottom { margin-top: var(--mac-space-4); }
  .intro-bottom p { font-size: 16px; }
  .panorama img { height: 224px; object-position: 32% center; }
  .section-head { flex-direction: column; gap: var(--mac-space-1); }
  .houses { padding-block: var(--mac-space-8); }
  .house-grid { grid-template-columns: 1fr; }
  .house { padding: var(--mac-space-4) 0; }
  .house:first-child { border-right-width: 0; border-bottom-width: 1px; }
  .arrangement { padding-bottom: var(--mac-space-8); }
  .enquiry { padding-block: var(--mac-space-8); }
  .footer { flex-direction: column; gap: var(--mac-space-1); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .house { transition: none; } }