/* Highest Roofing & Exteriors: the aerial survey.
   Mist ground, Blue Ridge slate for the dark third, their logo's hammer gold as the one accent.
   Manuale for display, Geologica for reading, Reddit Mono for the drone's instruments. */
:root {
  --mist: #E9EDE7;
  --sheet: #F6F7F3;
  --ink: #0C1721;
  --slate: #46535D;
  --ridge: #172B3A;
  --ridge-2: #20384A;
  --haze: #A9BCC9;
  --gold: #C69048;
  --gold-hi: #D8A560;
  --line: rgba(12, 23, 33, .14);
  --line-strong: rgba(12, 23, 33, .3);
  --line-dark: rgba(233, 237, 231, .16);
  --sa-accent: #C69048;
  --sa-accent-ink: #0C1721;
  --display: "Manuale", Georgia, "Times New Roman", serif;
  --sans: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Reddit Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --top: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mist); color: var(--ink);
  font: 400 18px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-weight: 300; letter-spacing: -.022em; line-height: .96; }
h2 { font-weight: 400; letter-spacing: -.016em; line-height: 1.04; }
h3 { font-weight: 500; letter-spacing: -.006em; line-height: 1.2; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- buttons: solid, rectangular, no icons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  background: var(--ink); color: #fff; border: 0; border-radius: 3px;
  font: 500 16px/1.1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { background: #1B2B38; }
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-hi); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.tel { font: 500 17px/1.2 var(--sans); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.tel:hover { border-bottom-width: 2px; }
.textlink { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.textlink:hover { text-decoration-thickness: 2px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }

/* ---------------------------------------------------------------- header: the flight strip */
.top {
  position: sticky; top: 0; z-index: 40; height: var(--top);
  display: flex; align-items: center; gap: 18px; padding: 0 var(--gutter);
  background: rgba(233, 237, 231, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand img { width: 52px; height: 52px; flex: none; }
.brand span { font: 500 17px/1.15 var(--sans); letter-spacing: -.005em; }
.brand small { display: block; font: 400 14px/1.3 var(--mono); color: var(--slate); letter-spacing: .01em; }
.top__tel { font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.top__tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-btn { min-width: 92px; }
.home .top { position: fixed; inset: 0 0 auto; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
.home .top .brand small { color: rgba(255, 255, 255, .78); }
.home .top.is-solid { background: rgba(23, 43, 58, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line-dark); }
.home .top .menu-btn { background: rgba(12, 23, 33, .72); }
.home .top .menu-btn:hover { background: var(--ink); }

/* the menu: a sheet index that drops from the strip */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--ridge); color: #fff; overflow-y: auto; padding: 22px var(--gutter) 48px; }
.menu[hidden] { display: none; }
.menu__bar { display: flex; align-items: center; gap: 18px; max-width: var(--max); margin: 0 auto 36px; }
.menu__bar .brand small { color: var(--haze); }
.menu__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; max-width: var(--max); margin: 0 auto; }
.menu h2 { font: 400 15px/1.3 var(--mono); color: var(--haze); letter-spacing: .02em; margin: 0 0 14px; }
.menu ul { list-style: none; }
.menu li a { display: inline-block; padding: 6px 0; font: 400 clamp(22px, 2.1vw, 28px)/1.15 var(--display); text-decoration: none; }
.menu li a:hover, .menu li a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.menu__visit { max-width: var(--max); margin: 44px auto 0; padding-top: 26px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; color: var(--haze); }
.menu__visit address { font-style: normal; }
.menu__visit a { color: #fff; }
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- the viewfinder: every photograph */
.vf { position: relative; margin: 0; }
.vf__img { position: relative; overflow: hidden; background: #cfd6cf; }
.vf__img img { width: 100%; height: 100%; object-fit: cover; }
.vf::before, .vf::after, .vf__img::before, .vf__img::after { content: ""; position: absolute; z-index: 3; width: 22px; height: 22px; pointer-events: none; }
.vf::before { left: -9px; top: -9px; border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); }
.vf::after { right: -9px; top: -9px; border-right: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); }
.vf__img::before { left: -9px; bottom: -9px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); position: absolute; }
.vf__img::after { right: -9px; bottom: -9px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.vf__img { overflow: visible; }
.vf__img > img { position: relative; z-index: 1; }
.vf__img .vf__crop { position: relative; overflow: hidden; z-index: 1; height: 100%; }
.vf figcaption { margin-top: 16px; font: 400 14px/1.45 var(--mono); color: var(--slate); letter-spacing: .01em; }
.vf figcaption b { font-weight: 500; color: var(--ink); }
/* the survey grid and scan line, laid over a photograph */
.vf__crop::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 48px 48px; transition: opacity .6s ease;
}
.vf__crop::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; opacity: 0;
  background: var(--gold); box-shadow: 0 0 18px 3px rgba(216, 165, 96, .75);
}
.vf--scan .vf__crop::before { animation: vf-scan 1.9s cubic-bezier(.55, .05, .35, 1) .35s 1 both; }
.vf--scan .vf__crop::after { animation: vf-grid 3.4s ease .45s 1 both; }
@keyframes vf-scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }
@keyframes vf-grid { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 50% { opacity: .55; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@media (hover: hover) {
  .vf--hover:hover .vf__crop::after { opacity: .42; }
}

/* ---------------------------------------------------------------- inner page opening: the plate */
.plate { padding: clamp(28px, 5vh, 56px) 0 clamp(40px, 7vh, 72px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 22px; list-style: none; font: 400 14px/1.4 var(--mono); color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plate h1 { font-size: clamp(46px, 7vw, 108px); max-width: 15ch; margin-bottom: clamp(26px, 4vh, 42px); }
.plate .vf__crop { aspect-ratio: 21 / 9; }
.plate .vf--native { max-width: 900px; }
.plate .vf--native .vf__crop { aspect-ratio: auto; }
.plate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: end; margin-top: 30px; }
.plate__lede { font-size: 21px; line-height: 1.55; max-width: 62ch; margin: 0; }

/* ---------------------------------------------------------------- survey plates: the section grid */
.sec { padding: clamp(56px, 9vh, 104px) 0; border-top: 1px solid var(--line); }
.sec--sheet { background: var(--sheet); }
.sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.sec__head { grid-column: 1 / span 5; }
.sec__head h2 { font-size: clamp(34px, 3.8vw, 56px); max-width: 13ch; }
.sec__head p { color: var(--slate); margin-top: 18px; max-width: 40ch; }
.sec__body { grid-column: 6 / span 7; }
.sec__body > p { max-width: 64ch; }
.sec__body h3 { font-size: clamp(22px, 2vw, 27px); margin: 34px 0 10px; }
.sec__body h3:first-child { margin-top: 0; }
.sec__full { grid-column: 1 / -1; }
.ticks { list-style: none; border-top: 1px solid var(--line); margin: 6px 0 28px; }
.ticks li { position: relative; padding: 13px 0 13px 30px; border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 13px; height: 7px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.ticks li b { font-weight: 500; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 34px 0 8px; }
.pair .vf__crop { aspect-ratio: 4 / 3; }
.pair .vf--tall .vf__crop { aspect-ratio: 3 / 4; }

/* the real sequence: their four steps */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; margin-top: 8px; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--line-strong); }
.steps li { position: relative; padding: 58px 24px 0 0; counter-increment: step; }
.sec__body .steps { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
.sec__body .steps::before { display: none; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mist); border: 1.5px solid var(--ink); font: 500 15px/1 var(--mono);
}
.sec--sheet .sec__body .steps { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
.sec__body .steps::before { display: none; }
.steps li::before { background: var(--sheet); }
.steps h3 { font-size: 24px; margin: 0 0 10px; }
.steps p { color: var(--slate); font-size: 17px; margin: 0; }

/* quotes: field notes in their customers' words */
.quote { margin: 0; padding: 24px 0 26px; border-top: 1px solid var(--line); }
.quote blockquote { margin: 0; font: 400 clamp(20px, 1.7vw, 23px)/1.5 var(--display); letter-spacing: -.004em; }
.quote blockquote p { margin: 0 0 .7em; }
.quote blockquote p:last-child { margin-bottom: 0; }
.quote figcaption { margin-top: 14px; font: 400 14px/1.4 var(--mono); color: var(--slate); }
.quote figcaption b { font: 500 15px/1.4 var(--sans); color: var(--ink); margin-right: 8px; }
.stars { letter-spacing: 2px; color: var(--ink); }

/* questions */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font: 500 clamp(19px, 1.6vw, 22px)/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq .answer { padding: 0 0 24px; max-width: 66ch; color: var(--slate); }
.faq .answer p:last-child { margin: 0; }

/* closing band */
.closing { background: var(--ridge); color: #fff; padding: clamp(64px, 11vh, 120px) 0; }
.closing__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.closing h2 { font-size: clamp(38px, 5vw, 76px); max-width: 17ch; }
.closing p { color: var(--haze); margin: 18px 0 0; max-width: 56ch; }
.closing .tel { color: #fff; }

/* credentials: a restrained monochrome row of the badges they hold */
.creds { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; list-style: none; }
.creds img { height: 76px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .9; }
.creds .wide img { height: 54px; }
.creds-text { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 30px; border-top: 1px solid var(--line); }
.creds-text li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.creds-text b { display: block; font-weight: 500; }
.creds-text span { color: var(--slate); font-size: 16px; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--ridge); color: #fff; padding: 72px 0 36px; border-top: 1px solid var(--line-dark); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr 1.25fr; gap: 36px; }
.foot__brand img { width: 88px; height: 88px; margin-bottom: 18px; }
.foot__brand p { color: var(--haze); font-size: 16px; max-width: 32ch; }
.foot h2 { font: 400 14px/1.3 var(--mono); color: var(--haze); letter-spacing: .02em; margin: 4px 0 14px; }
.foot ul { list-style: none; }
.foot li { padding: 4px 0; font-size: 16px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot address { font-style: normal; font-size: 16px; line-height: 1.7; }
.foot address span, .foot .muted { color: var(--haze); }
.foot__base { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: var(--haze); font-size: 14px; }
.foot__base a { color: #fff; }
.social { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ================================================================ HOME: the flight */
#survey { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.world-live #survey { opacity: 1; }
.home main { position: relative; z-index: 2; }
.hud, .scrim, .waypoints { display: none; }

/* the hero: static by default (no JS, no WebGL, reduced motion) over the still of the scene */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: start; justify-items: center; text-align: center; padding: calc(var(--top) + clamp(40px, 9vh, 110px)) var(--gutter) 64px; color: #fff; overflow: hidden; }
.hero__still { position: absolute; inset: 0; z-index: 0; background: #6E93B5; }
.hero__still img { width: 100%; height: 100%; object-fit: cover; }
.hero__still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 23, 33, .62) 0%, rgba(12, 23, 33, .34) 34%, rgba(12, 23, 33, 0) 58%); }
.world-live .hero__still { opacity: 0; transition: opacity 1.2s ease .25s; }
.hero__copy { position: relative; z-index: 2; max-width: 1100px; }
.hero h1 { font-size: clamp(54px, 8.8vw, 136px); letter-spacing: -.028em; text-shadow: 0 2px 24px rgba(12, 23, 33, .25); }
.hero h1 span { display: block; }
.hero__sub { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 44ch; margin: 26px auto 30px; color: #fff; text-shadow: 0 1px 12px rgba(12, 23, 33, .45); }
.hero .actions { justify-content: center; }
.hero .tel { color: #fff; }
.hero__cue { position: absolute; left: 50%; bottom: 28px; z-index: 2; transform: translateX(-50%); font: 400 14px/1 var(--mono); color: rgba(255, 255, 255, .86); letter-spacing: .04em; transition: opacity .4s ease; white-space: nowrap; }
.is-scrolled .hero__cue { opacity: 0; }
:root:not(.has-3d) .hero__cue { display: none; }   /* no flight (reduced motion, no WebGL): no promise of one */

/* the beats: without 3D they are plain sections with their photographs */
.journey { position: relative; }
.beat { position: relative; padding: clamp(64px, 11vh, 120px) 0; border-top: 1px solid var(--line); background: var(--mist); }
.beat:nth-of-type(odd) { background: var(--sheet); }
.beat__grid { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.beat h2 { font-size: clamp(36px, 3.7vw, 54px); margin-bottom: 18px; }
.beat__copy > p { font-size: 17px; line-height: 1.58; }
.beat__links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 26px; font-weight: 500; }
.beat__links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.beat .quote { border-top: 1px solid var(--line); padding: 16px 0 18px; margin-bottom: 16px; }
.beat .quote blockquote { font-size: 17px; line-height: 1.5; }
.beat__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.beat__figs .vf:first-child { grid-column: 1 / -1; }
.beat__figs .vf__crop { aspect-ratio: 16 / 10; }

/* ---------------- 3D mode ---------------- */
.has-3d .home-journey-bg { display: none; }
.has-3d .hero { background: transparent; }
.has-3d .hero__still::after { background: linear-gradient(180deg, rgba(12, 23, 33, .5) 0%, rgba(12, 23, 33, .2) 32%, rgba(12, 23, 33, 0) 52%); }
.has-3d .beat { background: transparent; border-top: 0; min-height: 175vh; padding: 0; }
.has-3d .beat__grid { display: block; max-width: none; padding: 0 var(--gutter); }
.has-3d .beat__copy { position: sticky; top: calc(var(--top) + 5vh); max-width: 450px; padding: 14px 0 32px; color: #fff; }
.has-3d .beat__copy .quote { border-color: rgba(255, 255, 255, .22); }
.has-3d .beat__copy .quote figcaption, .has-3d .beat__copy .quote figcaption b { color: rgba(255, 255, 255, .86); }
.has-3d .beat__copy .stars { color: #fff; }
.has-3d .beat__figs { display: none; }
.has-3d .beat .btn { background: var(--gold); color: var(--ink); }
.has-3d .beat .btn:hover { background: var(--gold-hi); }
.has-3d .beat .tel { color: #fff; }
.has-3d .scrim {
  display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--scrim, 0);
  background: linear-gradient(90deg, rgba(12, 23, 33, .88) 0%, rgba(12, 23, 33, .78) 30%, rgba(12, 23, 33, .28) 46%, rgba(12, 23, 33, 0) 58%);
}
.has-3d .hud { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.world-live .hud { opacity: 1; }
.hud__frame { position: absolute; left: 0; top: 0; width: 100px; height: 100px; opacity: var(--frame, 0); transform: translate3d(var(--fx, 0), var(--fy, 0), 0); will-change: transform; }
.hud__frame i { position: absolute; width: 18px; height: 18px; border-color: rgba(255, 255, 255, .92); border-style: solid; border-width: 0; }
.hud__frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.hud__frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.hud__frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.hud__frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.hud__tag { position: absolute; left: 0; top: -26px; font: 400 14px/1 var(--mono); color: #fff; white-space: nowrap; letter-spacing: .04em; text-shadow: 0 1px 6px rgba(12, 23, 33, .7); }
.hud__label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; opacity: 0; will-change: transform, opacity; white-space: nowrap; }
.hud__label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(198, 144, 72, .28), 0 0 14px rgba(216, 165, 96, .8); flex: none; }
.hud__label.is-left { flex-direction: row-reverse; }
.hud__label span { font: 400 14px/1 var(--mono); color: #fff; background: rgba(12, 23, 33, .72); padding: 7px 9px; border-radius: 2px; letter-spacing: .02em; }
.hud__label--town::before { width: 7px; height: 7px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.hud__label--town span { background: rgba(12, 23, 33, .6); }
.hud__label--office::before { width: 11px; height: 11px; background: var(--gold); }
.hud__label--office span { background: var(--gold); color: var(--ink); font-weight: 500; }
.hud__telemetry { position: absolute; right: var(--gutter); top: calc(var(--top) + 64px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; font: 400 14px/1.2 var(--mono); color: #fff; letter-spacing: .05em; text-shadow: 0 1px 6px rgba(12, 23, 33, .8); opacity: var(--tele, 1); }
.hud__telemetry span { background: rgba(12, 23, 33, .5); padding: 6px 8px; border-radius: 2px; }
.has-3d .waypoints { display: block; position: fixed; right: var(--gutter); top: calc(var(--top) + 16px); z-index: 3; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.has-3d .waypoints.is-on { pointer-events: auto; }
.has-3d .waypoints.is-on { opacity: 1; }
.waypoints ol { list-style: none; display: flex; align-items: center; gap: 0; }
.waypoints li { display: flex; align-items: center; }
.waypoints li + li::before { content: ""; width: 22px; height: 1px; background: rgba(255, 255, 255, .5); margin: 0 4px; }
.waypoints a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; font: 400 14px/1 var(--mono); color: rgba(255, 255, 255, .9); text-decoration: none; letter-spacing: .02em; background: rgba(12, 23, 33, .55); border-radius: 2px; }
.waypoints a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.waypoints a[aria-current="true"] { color: #fff; background: rgba(12, 23, 33, .82); }
.waypoints a[aria-current="true"]::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(216, 165, 96, .9); }
.waypoints a:hover { color: #fff; }

/* ---------------------------------------------------------------- after the flight: solid ground */
.after { position: relative; z-index: 3; background: var(--mist); }
.proof__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: 44px; }
.score { margin: 0; display: flex; align-items: flex-end; gap: 18px; }
.score__num { font: 300 clamp(110px, 13vw, 176px)/.8 var(--display); letter-spacing: -.04em; }
.score__of { font-size: 18px; line-height: 1.35; padding-bottom: 8px; }
.score__of .stars { display: block; font-size: 20px; margin-top: 6px; }
.proof__top h2 { font-size: clamp(34px, 3.6vw, 52px); max-width: 17ch; }
.proof__top p { color: var(--slate); margin: 14px 0 0; max-width: 56ch; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.notes .quote blockquote { font-size: 19px; }
.more-links { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; margin-top: 30px; }

.family { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.family .vf { grid-column: 1 / -1; margin-bottom: 38px; }
.family .vf__crop { aspect-ratio: 3000 / 866; }
.family__head { grid-column: 1 / span 5; }
.family__head h2 { font-size: clamp(34px, 3.8vw, 56px); max-width: 12ch; }
.family__body { grid-column: 6 / span 7; }
.family__body .quote { border-top: 0; padding-top: 0; }

.events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; list-style: none; }
.events .vf__crop { aspect-ratio: 4 / 3; }
.events h3 { font-size: 24px; margin: 22px 0 8px; }
.events p { color: var(--slate); font-size: 17px; margin: 0; }

.area { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.area__map { position: relative; background: var(--ridge); border-radius: 2px; overflow: hidden; }
.area__map svg { display: block; width: 100%; height: auto; }
.area__map figcaption { position: absolute; left: 16px; bottom: 12px; font: 400 14px/1.3 var(--mono); color: var(--haze); }
.towns { columns: 3 150px; column-gap: 24px; list-style: none; margin-top: 22px; font-size: 16px; }
.towns li { break-inside: avoid; padding: 3px 0; }
.counties { font-size: 18px; }

.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.visit dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 20px; margin: 22px 0 28px; }
.visit dt { font: 400 14px/1.6 var(--mono); color: var(--slate); padding-top: 2px; }
.visit dd { margin: 0; }
.visit address { font-style: normal; font-size: 20px; line-height: 1.5; }
.map { border: 1px solid var(--line-strong); background: var(--sheet); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(.35) contrast(1.02); }

/* ---------------------------------------------------------------- inner page pieces */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; list-style: none; }
.card { display: flex; flex-direction: column; text-decoration: none; }
.card .vf__crop { aspect-ratio: 4 / 3; }
.card h3 { font-size: clamp(24px, 2vw, 28px); margin: 22px 0 8px; }
.card p { color: var(--slate); font-size: 17px; margin: 0 0 14px; }
.card .more { margin-top: auto; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }

.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; list-style: none; }
.person .vf__crop { aspect-ratio: 4 / 5; }
.person .vf__crop img { object-position: 50% 22%; }
.person h3 { font-size: 24px; margin: 20px 0 4px; }
.person p { margin: 0; color: var(--slate); font-size: 16px; }
.person a { color: var(--ink); }
.person--text { border-top: 1px solid var(--line); padding-top: 18px; }
.lead-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.lead-person .vf__crop { aspect-ratio: 4 / 5; }
.lead-person .vf__crop img { object-position: 50% 25%; }

.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 26px; list-style: none; }
.gallery li { grid-column: span 4; }
.gallery li.w6 { grid-column: span 6; }
.gallery li.w8 { grid-column: span 8; }
.gallery .vf__crop { aspect-ratio: 4 / 3; }
.gallery li.w8 .vf__crop, .gallery li.w6 .vf__crop { aspect-ratio: 16 / 10; }
.gallery li.tall .vf__crop { aspect-ratio: 3 / 4; }

.reviews-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.review { border-top: 1px solid var(--line); padding: 26px 0 30px; }
.review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.review__head b { font: 500 17px/1.3 var(--sans); }
.review__head .mono { color: var(--slate); }
.review__text { font: 400 19px/1.55 var(--display); margin: 0; white-space: pre-line; }
.review__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review__more { margin-top: 10px; background: none; border: 0; padding: 8px 0; font: 500 16px/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; min-height: 44px; }
.review__reply { margin: 16px 0 0; padding: 14px 16px; background: var(--sheet); border-left: 2px solid var(--gold); font-size: 16px; }
.review__reply span { display: block; font: 400 14px/1.4 var(--mono); color: var(--slate); margin-bottom: 4px; }
.review__reply p { margin: 0; white-space: pre-line; }
.wall { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); margin-top: 18px; }
.wall li { padding: 16px 0 18px; display: grid; gap: 3px; align-content: start; border-bottom: 1px solid var(--line); }
.wall b { font-weight: 500; font-size: 16px; }
.wall span { color: var(--slate); font-size: 14px; }
.wall .mono { font-size: 14px; }

.links-big { list-style: none; border-top: 1px solid var(--line); }
.links-big li { border-bottom: 1px solid var(--line); }
.links-big a { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 22px 0; text-decoration: none; font: 400 clamp(24px, 2.4vw, 32px)/1.2 var(--display); }
.links-big a span { font: 400 14px/1.4 var(--mono); color: var(--slate); }
.links-big a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); }
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 8px; font-size: 16px; font-weight: 500; }
.form input, .form textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 3px; border: 1px solid var(--line-strong);
  background: var(--sheet); color: var(--ink); font: 400 17px/1.4 var(--sans);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.form__status { min-height: 1.6em; margin: 0; font-size: 16px; }
.form__status.is-err { color: #8A2A1B; }
.form__status.is-ok { color: #24533F; }
.note { font-size: 16px; color: var(--slate); }

/* the service-area map drawn from their own Google My Maps file */
.svgmap text { font-family: var(--mono); }

/* ================================================================ RESPONSIVE */
@media (max-width: 1100px) {
  .menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .notes { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .steps::before { display: none; }
}
@media (max-width: 860px) {
  .top__tel { display: none; }
}
@media (max-width: 760px) {
  :root { --top: 64px; }
  body { font-size: 17px; }
  .brand img { width: 44px; height: 44px; }
  .brand span { font-size: 15px; }
  .brand small { display: none; }
  .top .btn--book { display: none; }
  .menu__grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .menu__bar .btn--book { display: none; }
  .plate h1 { font-size: clamp(40px, 11vw, 56px); }
  .plate .vf__crop { aspect-ratio: 4 / 3; }
  .plate__row { grid-template-columns: 1fr; }
  .plate__lede { font-size: 18px; }
  .sec__head, .sec__body, .family__head, .family__body { grid-column: 1 / -1; }
  .sec__head h2 { max-width: none; }
  .pair { grid-template-columns: 1fr; }
  .steps, .sec__body .steps { grid-template-columns: 1fr; }
  .closing__grid { grid-template-columns: 1fr; }
  .creds img { height: 58px; }
  .creds .wide img { height: 42px; }
  .creds-text { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .foot__brand { grid-column: 1 / -1; }
  .proof__top { grid-template-columns: 1fr; }
  .notes, .events, .cards, .reviews-list { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .lead-person { grid-template-columns: 1fr; gap: 26px; }
  .gallery li, .gallery li.w6, .gallery li.w8 { grid-column: span 12; }
  .area, .visit, .contact { grid-template-columns: 1fr; }
  .map iframe { height: 320px; }
  .family .vf__crop { aspect-ratio: 16 / 10; }
  .hero { padding-top: calc(var(--top) + 36px); }
  .hero h1 { font-size: clamp(46px, 13.2vw, 62px); }
  .hero__cue { display: none; }
  .beat__grid { grid-template-columns: 1fr; }
  .beat__figs { grid-template-columns: 1fr; }

  /* 3D on a phone: the house rides in the top half, the words rise over an ink scrim below it */
  .has-3d .beat { min-height: 150vh; }
  .has-3d .beat__copy { position: relative; top: auto; padding-top: 50vh; max-width: none; }
  .has-3d .beat__copy::before { content: ""; position: absolute; inset: 44vh -16px -30px; z-index: -1; background: linear-gradient(180deg, rgba(12, 23, 33, 0), rgba(12, 23, 33, .9) 6vh, rgba(12, 23, 33, .94)); }
  .has-3d .scrim { background: linear-gradient(180deg, rgba(12, 23, 33, 0) 45%, rgba(12, 23, 33, .45) 72%, rgba(12, 23, 33, .7)); }
  .has-3d .waypoints { display: none; }
  .hud__telemetry { top: calc(var(--top) + 8px); bottom: auto; left: 16px; right: 16px; gap: 6px 8px; justify-content: flex-start; }
  .hud__telemetry [data-t="pos"] { display: none; }
}

/* QA only (?still=k): the scene alone, for the stills */
.still-mode .top, .still-mode main, .still-mode .foot, .still-mode .scrim, .still-mode .hud, .still-mode .waypoints { visibility: hidden !important; }
.still-mode #survey { transition: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .vf--scan .vf__crop::before, .vf--scan .vf__crop::after { animation: none; }
}