/* The approved original logo defines the white, navy and teal brand palette. */
:root {
  --ink: #124b70;
  --ink-soft: #506775;
  --blue: #287f9a;
  --blue-deep: #124b70;
  --blue-light: #dceef3;
  --gold: #287f9a;
  --paper: #fff;
  --paper-deep: #f0f7fa;
  --white: #fff;
  --line: rgba(18, 75, 112, .16);
}

body { background: #fff; }
.site-header {
  min-height: 92px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom-color: rgba(18, 75, 112, .1);
  background: #fff;
}
.brand { gap: 0; }
.brand-logo {
  display: block;
  width: 210px;
  height: auto;
  aspect-ratio: 2007 / 784;
  object-fit: contain;
}
.primary-nav { color: var(--ink); }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--blue); }
.nav-contact {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
}
.nav-contact span { color: #cbeaf1; }
.primary-nav .nav-contact:hover, .primary-nav .nav-contact:focus-visible {
  border-color: #0b3a59;
  color: #fff;
  background: #0b3a59;
}
.button-dark { background: var(--ink); }
.button-dark:hover { background: #0b3a59; }
.button-light:hover { background: #236e85; }
.core-label span, .floor-nav a[aria-current] span { color: var(--blue); }
.priority-dot { background: var(--blue); }
.status-dot {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(40, 127, 154, .12);
}
.drawing-orbit {
  border-color: rgba(40, 127, 154, .12);
  background: radial-gradient(circle, rgba(220, 238, 243, .7), rgba(240, 247, 250, .35) 55%, transparent 70%);
}
.drawing-orbit::after { border-color: rgba(40, 127, 154, .15); }
.house-scene::before { background: radial-gradient(ellipse, rgba(220, 238, 243, .48), transparent 70%); }
.focus-strip { background: var(--ink); }
.focus-number, .focus-strip h2 span { color: #a7dae7; }
.floor-story li { border-top-color: rgba(18, 75, 112, .1); }
.floor-story li::before { color: var(--blue); }
.story-link { border-bottom-color: rgba(40, 127, 154, .45); }
.about-card, .contact { background: var(--ink); }
.about h2 em, .contact h2 em, .about-points span, .contact-icon { color: #a7dae7; }
.about .eyebrow-line, .contact .eyebrow-line { background: #a7dae7; }
.contact-form { background: #fff; box-shadow: 0 20px 60px rgba(7, 37, 57, .18); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); }
.gallery-house { background: var(--paper-deep) !important; }
.illustration-sun { fill: #94cfdf; }
.illustration-hill { fill: #bddce5; }
.illustration-house { fill: #fff; }
.illustration-roof { fill: var(--ink); }
.illustration-door { fill: var(--blue); }
.illustration-window { fill: #b4dae5; stroke: #fff; }
.illustration-ground { stroke: var(--ink); }
.illustration-leaf { fill: var(--blue); }

.site-footer {
  padding-top: 30px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}
.brand-footer { color: var(--ink); }
.brand-footer .brand-logo { width: 240px; }
.site-footer > p { color: var(--ink-soft); }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--blue); }
.move-mini a { border-color: var(--line); color: var(--ink); }
.move-mini a:hover { border-color: var(--blue); background: var(--paper-deep); }
.move-mini svg { stroke: var(--blue); }
.move-mini small { color: var(--ink-soft); }
.move-mini i { color: var(--blue); }
.site-footer > small { border-top-color: var(--line); color: var(--ink-soft); }
:focus-visible { outline-color: var(--blue); }

@media (max-width: 1000px) and (min-width: 761px) {
  .site-header { gap: 15px; }
  .site-header .brand-logo { width: 190px; }
  .primary-nav { gap: 12px; font-size: 10px; }
  .nav-contact { padding-right: 12px; padding-left: 12px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  .site-header { min-height: 82px; }
  .site-header .brand-logo { width: 185px; }
  .primary-nav { top: 100%; background: #fff; }
  .primary-nav .nav-contact { border-color: var(--ink) !important; }
  .house-stage { top: 82px; }
  .brand-footer .brand-logo { width: 225px; }
  .site-footer { padding-top: 22px; }
}

/* Pin the opaque mobile header to the viewport, including iOS safe areas. */
@media(max-width:760px){
 :root{--mobile-header-height:calc(82px + env(safe-area-inset-top,0px));}
 body{padding-top:var(--mobile-header-height);}
 .site-header{position:fixed;inset:0 0 auto;z-index:100;min-height:var(--mobile-header-height);height:var(--mobile-header-height);padding-top:calc(4px + env(safe-area-inset-top,0px));background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;transform:translateZ(0);}
 .site-header::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:#fff;pointer-events:none;}
 .house-stage{top:var(--mobile-header-height);}
 html{scroll-padding-top:calc(var(--mobile-header-height) + 10px);}
 .hero-house{overflow:hidden;}
}