/* The View, Highgate — v2 stylesheet, matched to reference design */

:root {
  --navy: #071E29;
  --navy-deep: #011A26;
  --cream: #F8F5EE;
  --cream-deep: #EDE5D9;
  --gold: #C4A521;
  --ink: #011A26;
  --muted: #726A62;
  --muted-on-dark: #AFC0C8;
  --line: #DAD2C2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
img { max-width: 100%; display: block; }

.eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow.on-dark { color: var(--gold); }

/* Logo (real logo file) */
.logo-mark { display: inline-block; line-height: 1; }
.logo-mark img { height: 72px; width: auto; display: block; }
footer .logo-mark img { height: 46px; }

/* Header — floats transparently over whatever section follows */
header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
nav { display: flex; gap: 40px; }
nav a {
  color: #e7e2d6;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
nav a:hover, nav a.active { color: var(--gold); border-color: var(--gold); }

/* Mobile menu — toggle and full-screen panel. Only takes over once nav.js has
   run (it adds .js to <html>); without JS the links simply wrap as before.
   Breakpoint is mirrored in assets/nav.js. */
.nav-toggle, .nav-panel-meta { display: none; }

@media (max-width: 760px) {
  header { padding: 24px 0; }
  header .logo-mark img { height: 56px; }

  .js header .logo-mark { position: relative; z-index: 2; }
  .js .nav-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
    padding: 13px 0;
    background: none;
    border: 0;
    color: #e7e2d6;
    font: 500 13px/18px 'Inter', Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }
  .nav-toggle-label { display: block; height: 18px; overflow: hidden; text-align: right; }
  .nav-toggle-label span { display: block; transition: transform 0.35s ease; }
  .nav-toggle-icon { position: relative; width: 26px; height: 9px; }
  .nav-toggle-icon::before, .nav-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1.5px;
    background: currentColor;
    transition: top 0.35s ease, transform 0.35s ease;
  }
  .nav-toggle-icon::before { top: 0; }
  .nav-toggle-icon::after { top: 7.5px; }

  .js .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 0 48px 40px;
    background: var(--navy-deep);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  /* Solid band behind the logo + toggle (header height: 24 + 56 + 24) so links
     scroll beneath it on short screens; its border lines up with the header rule */
  .js .nav-panel::before {
    content: '';
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    height: 104px;
    margin: 0 -48px 16px;
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  .js .nav-panel nav { flex-direction: column; gap: 0; }
  .js .nav-panel nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    color: #fdfbf6;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    opacity: 0;
    transform: translateY(14px);
    transition: color 0.2s ease, opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .js .nav-panel nav a::after {
    content: '';
    width: 18px;
    height: 18px;
    background: currentColor;
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .js .nav-panel nav a.active { color: var(--gold); }
  .js .nav-panel nav a.active::after { opacity: 1; }

  .js .nav-panel-meta {
    display: block;
    margin-top: auto;
    padding-top: 48px;
    color: var(--muted-on-dark);
    font-size: 15px;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .nav-panel-meta .eyebrow { margin-bottom: 12px; }
  .nav-panel-meta address { font-style: normal; margin-bottom: 6px; }
  .nav-panel-meta a { color: #e7e2d6; text-decoration: underline; text-decoration-color: rgba(231,226,214,0.4); text-underline-offset: 4px; }

  /* Open state */
  .nav-open, .nav-open body { overflow: hidden; }
  .nav-open header { position: fixed; }
  .nav-open .nav-panel { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
  .nav-open .nav-panel nav a, .nav-open .nav-panel-meta { opacity: 1; transform: none; }
  .nav-open .nav-panel nav a:nth-child(1) { transition-delay: 0s, 0.08s, 0.08s; }
  .nav-open .nav-panel nav a:nth-child(2) { transition-delay: 0s, 0.14s, 0.14s; }
  .nav-open .nav-panel nav a:nth-child(3) { transition-delay: 0s, 0.2s, 0.2s; }
  .nav-open .nav-panel-meta { transition-delay: 0.28s; }
  .nav-open .nav-toggle-label span { transform: translateY(-100%); }
  .nav-open .nav-toggle-icon::before { top: 3.75px; transform: rotate(45deg); }
  .nav-open .nav-toggle-icon::after { top: 3.75px; transform: rotate(-45deg); }
}
@media (max-width: 760px) and (hover: hover) {
  .js .nav-toggle:hover, .js .nav-panel nav a:hover { color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-panel nav a, .nav-panel-meta, .nav-toggle-label span,
  .nav-toggle-icon::before, .nav-toggle-icon::after { transition: none !important; }
}

/* Arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
}
.arrow-link.white { color: #fff; }
.arrow-link.navy-link { color: var(--navy); }
.arrow-link svg { width: 15px; height: 15px; }

/* Hero with photo (Home) */
.hero-photo {
  position: relative;
  color: #f4f1ea;
  padding: 300px 0 190px;
  background: linear-gradient(90deg, rgba(4,20,28,0.82) 0%, rgba(4,20,28,0.45) 55%, rgba(4,20,28,0.15) 100%), var(--navy);
  background-size: cover;
  background-position: center;
}
.hero-photo h1 { color: #fdfbf6; font-size: 74px; max-width: 860px; margin-bottom: 30px; }
.hero-photo .tagline-line { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--gold); font-size: 26px; margin-bottom: 22px; }
.hero-photo .sub { color: #e9e4d8; font-size: 19px; max-width: 580px; margin-bottom: 38px; line-height: 1.6; }


/* Plain navy hero (Vision / Contact / Plans) */
.hero-plain { background: var(--navy); padding: 190px 0 120px; position: relative; }
.hero-plain h1 { color: #fdfbf6; font-size: 52px; max-width: 900px; }
.hero-plain h1.xl { font-size: 58px; }

/* Two-column split section (cream) */
.split {
  padding: 110px 0;
  background: var(--cream);
}
.split .wrap { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 90px; align-items: start; }
@media (max-width: 900px) { .split .wrap { grid-template-columns: 1fr; gap: 40px; } }
.split .side-heading { font-size: 27px; line-height: 1.25; }
.split .main-heading { font-size: 36px; line-height: 1.2; margin-bottom: 24px; }
.split p { color: var(--muted); font-size: 17px; max-width: 620px; margin-bottom: 18px; }
.split p:last-child { margin-bottom: 0; }

/* Split panel: half photo, half navy text panel */
.split-panel { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split-panel { grid-template-columns: 1fr; } }
.split-panel .photo-half { min-height: 520px; background-size: cover; background-position: center; }
.split-panel .text-half {
  background: var(--navy-deep);
  color: #fff;
  padding: 90px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-panel .text-half h2 { color: #fdfbf6; font-size: 40px; margin-bottom: 22px; max-width: 480px; }
.split-panel .text-half p { color: var(--muted-on-dark); font-size: 16px; line-height: 1.7; max-width: 480px; margin-bottom: 32px; }

/* Full-bleed image band, no text */
.image-band img { width: 100%; display: block; }

/* Centered / split CTA band (cream) */
.cta-band { background: var(--cream); padding: 110px 0; text-align: center; }
.cta-band h2 { font-size: 38px; max-width: 700px; margin: 0 auto 30px; }
.cta-band .eyebrow { display: flex; justify-content: center; }

.cta-band-split { background: var(--cream); padding: 90px 0; }
.cta-band-split .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.cta-band-split h2 { font-size: 34px; max-width: 560px; }
.cta-band-split .eyebrow { margin-bottom: 10px; }

/* Deep cream band for updates (Contact page) */
.updates-band { background: var(--cream-deep); padding: 90px 0; }
.updates-band h2 { font-size: 30px; margin-bottom: 30px; max-width: 520px; }
.updates-band form { display: flex; gap: 12px; max-width: 520px; flex-wrap: wrap; }
.updates-band input { flex: 1; min-width: 220px; }

/* Contact info + form */
.contact-info h2 { font-size: 22px; margin-bottom: 4px; }
.contact-info address { font-style: normal; font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: var(--ink); margin: 18px 0 22px; line-height: 1.35; }
.contact-info a.contact-link {
  display: block;
  color: var(--ink);
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 10px;
}
.contact-info .note { color: var(--muted); font-size: 15px; max-width: 380px; margin-top: 20px; line-height: 1.6; }

.enquiry-form h2 { font-size: 30px; margin-bottom: 34px; }
.enquiry-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 28px; }
@media (max-width: 640px) { .enquiry-form .row2 { grid-template-columns: 1fr; } }
.enquiry-form label { display: block; font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.enquiry-form label .opt { color: var(--muted); font-weight: 400; }
.enquiry-form input, .enquiry-form textarea, .updates-band input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #c9c0ac;
  background: transparent;
  padding: 8px 2px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.enquiry-form input:focus, .enquiry-form textarea:focus, .updates-band input:focus { outline: none; border-color: var(--navy); }
.enquiry-form textarea { min-height: 100px; resize: vertical; margin-bottom: 30px; }
.enquiry-form .field { margin-bottom: 28px; }
button.solid-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 15px 30px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
button.solid-btn:hover { background: var(--navy-deep); }

/* Feature grid (used within The Vision page) */
.feature-grid { padding: 60px 0 110px; background: var(--cream); }
.feature-grid .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 70px;
}
@media (max-width: 900px) { .feature-grid .grid { grid-template-columns: 1fr; } }
.feature-card { border-top: 2px solid var(--gold); padding-top: 26px; }
.feature-card h3 { font-size: 24px; margin-bottom: 16px; line-height: 1.25; }
.feature-card p { color: var(--muted); font-size: 16px; line-height: 1.65; }

/* Footer */
footer { background: var(--navy); color: #cfc9ba; padding: 80px 0 40px; font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
footer .tagline { max-width: 340px; margin-top: 20px; color: #a9a294; font-size: 14px; }
footer .right-col { text-align: right; }
footer address { font-style: normal; margin-bottom: 20px; color: #cfc9ba; }
footer .copyright { color: #8b8577; font-size: 13px; }
@media (max-width: 640px) { footer .wrap { flex-direction: column; } footer .right-col { text-align: left; } }


@media (max-width: 900px) {
    .hero-photo { padding: 200px 0 120px; }
    .hero-photo h1 { font-size: 45px; max-width: 570px }

    .split-panel .text-half {
        padding-left: 48px;
        padding-right: 48px;
    }
}