/* Nervv catalogue and shared styles. Day look by default; a night look (html.nt) after 10 pm or by choice. */

@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --ivory: #F7F2E7;
  --surface: #FFFDF8;
  --line: #E3DACA;
  --ink: #1D2A23;
  --muted: #5B6A60;
  --prana: #2E6A4A;
  --jal: #1F5F7A;
  --marigold: #E0A526;
  --obsidian: #0A0C0B;
  --night: #111614;
  --night-deep: #0B0E0D;
  --paper-warm: #E9E3D6;

  /* Fixed colours: the same in the day and night looks */
  --paper: #F7F2E7;
  --deep: #1D2A23;
  --charcoal: #2B2F2E;
  --charcoal-key: #343938;
  --charcoal-edge: #3F4543;
  --warm: #F2C46D;
  --warm-off: #555C59;
  --frame: #1D2A23;

  --marigold-hover: #D69B1C;
  --marigold-tint: #F6E3B9;
  --marigold-tint-line: #EDD394;
  --field-line: #5B6A60;

  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 68px;
  --sec-pad: clamp(80px, 12vh, 160px);
  --gap: clamp(32px, 5vw, 80px);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-1: 160ms;
  --t-2: 320ms;
  --t-3: 640ms;
  --t-4: 1200ms;

  color-scheme: light;
}

/* Night look: the page turns its lights down. Ivory gives way to Night; marigold stays the one
   thing to look at. Text on Night uses lighter tints of prana and jal (the brand greens and blues
   are kept for large shapes only on dark). */
html.nt {
  --ivory: #111614;
  --surface: #171D1A;
  --line: #2B3430;
  --ink: #EEE8DB;
  --muted: #A9B3AC;
  --prana: #6FA886;
  --jal: #79B0C8;
  --field-line: #7F8C84;
  --marigold-tint: #3A3019;
  --marigold-tint-line: #5A4A22;
  --frame: #2E3833;
  color-scheme: dark;
}

/* Base */

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

html {
  background: var(--ivory);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.mf-still) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1024px) {
  body { font-size: 18px; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

figure { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

p, li { max-width: 65ch; text-wrap: pretty; }

/* Browser surfaces carry the brand: selection in a warm tint, the caret in prana, slim
   scrollbars in ink on ivory (and paper on Night in the night look). */
::selection { background: #F6E3B4; color: var(--deep); }
.on-dark ::selection, .night ::selection, .beat--dusk ::selection, .foot ::selection { background: #5A4A22; color: var(--paper); }
html { scrollbar-color: #9AA39C transparent; scrollbar-width: thin; }
html.nt { scrollbar-color: #4B5A50 transparent; }
input, textarea, select { caret-color: var(--ink); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  color: inherit;
  text-wrap: balance;
}

/* Premium edition: section openers in Fraunces Light, large (display: 72px, phone 40px). */
h1, h2 { font-weight: 300; }
h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

h3 {
  font-size: clamp(21px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.008em;
}

strong { font-weight: 600; }

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--t-1) var(--ease), text-decoration-color var(--t-1) var(--ease); }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .night :focus-visible, .foot :focus-visible, .beat--dusk :focus-visible, html.nt :focus-visible { outline-color: var(--marigold); }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* Logo (never retyped; geometry from the master svg) */

.logo { --logo-w: 112px; display: inline-flex; align-items: center; color: var(--ink); margin-left: calc(var(--logo-w) * -5.5 / 240); }
.logo svg { width: var(--logo-w); height: auto; overflow: visible; }
.logo .stroke { stroke: currentColor; }
.logo .node { fill: var(--marigold); }

/* Skip link */

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  border-radius: 2px;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* Buttons and text links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 2px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-1) var(--ease);
}
.btn--primary { background: var(--marigold); color: var(--deep); }
.btn--primary:hover { background: var(--marigold-hover); color: var(--deep); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: progress; }

.tlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.tlink--light, .tlink--light:hover { color: var(--paper); }
.tlink:hover { text-decoration-thickness: 2px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Nav: sits in flow right after the intro and sticks once reached */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav__logo { --logo-w: 104px; flex: none; min-height: 44px; text-decoration: none; }
.nav__menu { margin-left: auto; }
.nav__links { display: flex; gap: 4px; list-style: none; }
.nav__links li { max-width: none; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  white-space: nowrap;
}
.nav__links a:hover { text-decoration-color: var(--line); }
.nav__links a[aria-current="true"] { text-decoration-color: var(--ink); }
.nav__cta { min-height: 44px; padding: 0 20px; }
.nav.is-dark { background: var(--night); border-bottom-color: #1E2622; }
.nav.is-dark .nav__logo, .nav.is-dark .nav__links a { color: var(--paper); }
.nav.is-dark .look { color: var(--paper); border-color: #34403A; }
.nav.is-dark .nav__links a[aria-current="true"] { text-decoration-color: var(--paper); }
.nav.hide-mark .nav__logo { opacity: 0; visibility: hidden; }
.nav.cta-quiet .nav__cta { display: none; }

@media (max-width: 759px) {
  :root { --nav-h: 108px; }
  .nav { height: auto; }
  .nav__in { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .nav__menu { display: block; order: 5; width: 100%; margin: 0 0 0 -12px; }
  .nav__links a { font-size: 15px; padding: 0 10px; }
  .nav__cta { margin-left: 0; }
  .look { margin-left: auto; }
  .nav__logo { --logo-w: 96px; }
}

/* Hero (#range): one centred column on Night, straight after the intro: the headline, button and
   phone line. The wordmark is not repeated here (the intro opens and closes on it, and the bar
   carries it from here on). The night photograph opens below as you scroll on. */

.hero {
  position: relative;
  background: var(--night);
  color: var(--paper);
}
.hero__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-top: clamp(32px, 6vh, 80px);
  text-align: center;
}
.hero__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: auto;
  padding-bottom: 32px;
}
.hero h1 {
  max-width: 20ch;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero__sub {
  margin-top: clamp(16px, 2.4vh, 24px);
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.55;
  color: #F1ECE1;
  text-wrap: pretty;
}
.hero .actions { justify-content: center; margin-top: clamp(24px, 4vh, 40px); }
.hero__call { max-width: none; margin-top: 8px; font-size: 14px; color: #D6D0C2; }
.hero__call a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-decoration-color: rgba(247, 242, 231, 0.5); }
.faq .story a { display: inline-flex; align-items: center; min-height: 44px; }
.hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 40px;
  width: 100%;
  padding: clamp(8px, 2vh, 24px) var(--gutter, 24px) clamp(48px, 8vh, 96px);
  font-size: 14px;
  color: #BFC5BE;
}
.hero__facts li { max-width: none; }
.hero__photo { margin: 0; overflow: hidden; background: var(--night); }
.hero__photo img { display: block; width: 100%; aspect-ratio: 16 / 7; height: auto; object-fit: cover; object-position: 62% 46%; }

@media (max-width: 1023px) {
  .nav__links li:nth-child(3) { display: none; }
  .hero__photo img { aspect-ratio: 4 / 3; object-position: 64% 46%; }
}
@media (max-width: 759px) {
  .hero__stage { min-height: 0; padding-top: 28px; }
  .hero__in { padding-bottom: 20px; }
  .hero__sub { font-size: 17px; }
  .hero__facts { flex-direction: column; align-items: center; gap: 4px; padding-bottom: 48px; }
}
@media (max-width: 759px) and (max-height: 780px) {
  .hero__stage { padding-top: 20px; }
  .hero__sub { margin-top: 12px; line-height: 1.5; }
  .hero .actions { margin-top: 20px; }
}
@media (max-height: 780px) and (min-width: 1024px) {
  .hero h1 { font-size: clamp(44px, 5.4vw, 84px); }
}

/* Sections */

.sec { padding-block: var(--sec-pad); }
.sec--tight-top { padding-top: 0; }

.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 21ch;
  text-wrap: balance;
}

.ratio { position: relative; overflow: hidden; border-radius: 0; background: var(--line); }
.ratio > img, .ratio > svg { width: 100%; height: 100%; object-fit: cover; }
.ratio--4x5 { aspect-ratio: 4 / 5; }
.ratio--16x10 { aspect-ratio: 16 / 10; }
.ratio--1x1 { aspect-ratio: 1 / 1; }

.small { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Section head, promise line, story, points: the five parts every offering uses */

.sechead { max-width: 62ch; }
.sechead--wide { max-width: 72ch; }
.sechead--wide h2 { max-width: 22ch; }

.pl {
  margin-top: 16px;
  max-width: 32ch;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.on-dark .pl { color: var(--paper-warm); }
.hero__promise { margin-top: clamp(14px, 2vh, 22px); max-width: 30ch; font-size: clamp(21px, 1.8vw, 26px); }

.story { margin-top: 18px; max-width: 52ch; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; }

.pts { list-style: none; margin-top: 28px; }
.pts li { padding: 11px 0; color: var(--ink); max-width: none; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; }
.pts strong { color: var(--ink); }
.on-dark .pts li { color: #D6D0C2; }
.on-dark .pts strong { color: var(--paper); }

.pts--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
}
.pts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }

.note { margin-top: 24px; color: var(--muted); font-size: 16px; }

.sec--surface, .panels, .app { background: var(--surface); }

/* Statements: a sentence set large, as a paragraph */

.statement {
  margin-top: 18px;
  max-width: 34ch;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Scroll ink: lines draw and words ink in as you read. Scrubbed by position (site.js), so it
   runs both ways and never holds the page. Only when site.js adds html.sc, which it never does
   under reduced motion; without it everything shows in its finished state. */

html.sc [data-scrub] > li { border-top-color: var(--line); }
html.sc [data-scrub] > li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(var(--f, 0));
  transform-origin: left center;
}
html.sc .steps[data-scrub] > li { position: relative; }
html.sc [data-scrub] > li:not(.on), html.sc [data-scrub] > li:not(.on) strong, html.sc [data-scrub] > li:not(.on)::before { color: var(--muted); }
html.sc [data-ink] .w:not(.on) { color: var(--muted); }
html.sc .day__list > li.on .day__t { color: var(--ink); }
/* Statements are large text from 1100px up (24px and over), so the unread words can start
   lighter there: #7F8981 is 3.2:1 on ivory. Smaller screens keep muted (AA for body text). */
@media (min-width: 1100px) {
  html.sc:not(.nt) [data-ink] .w:not(.on) { color: #7F8981; }
}

@media (min-width: 1100px) {
  .app:not(.is-live) .screens { flex-wrap: nowrap; gap: 32px; }
  .app:not(.is-live) .phonebox { width: min(100%, 240px); }
}
.screen { height: 600px; overflow: hidden; }

/* The wiring diagram: every board joins the home controller, which joins your phone. Lines
   draw and keys light from scroll position (site.js); without it, everything is shown joined. */
.wire { margin-top: clamp(40px, 6vw, 72px); }
.wire__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wire--tall { display: none; }
.wire .wt { font-family: var(--f-text); font-size: 15px; font-weight: 600; fill: var(--ink); }
.wire .wt--s { font-size: 13px; }
.wire .wst { font-family: var(--f-text); font-size: 9px; font-weight: 600; fill: var(--paper); }
.wire .wl { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.wire .wb { fill: var(--charcoal); }
.wire .wk { fill: var(--charcoal-key); }
.wire .wo { fill: var(--warm-off); }
.wire .ww { fill: var(--warm); }
.wire .wkon { fill: none; stroke: var(--warm); stroke-width: 1.3; }
.wire .wd { fill: var(--marigold); }
.wire .wp { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.wire .ws { fill: var(--charcoal); }
html.sc .wire .wl[data-at] { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.sc .wire [data-on]:not(.on) { opacity: 0; }
@media (max-width: 759px) {
  .wire--wide { display: none; }
  .wire--tall { display: block; max-width: 360px; margin-inline: auto; }
}

/* App screens: numbers count and bars fill as each phone rises (site.js). */
html.sc .sbar2 i { transform-origin: left center; }
html.sc .snow__lines i:not(.on) { opacity: 0.25; }

/* Lights out, held: the section holds the screen while the round plays from scroll. The board
   is larger, the labels larger, and the room itself steps darker as each key goes off (the
   background is set by site.js from scroll position). Phones and short screens keep the
   in-flow version. */
.night.is-live { height: 240vh; height: 240svh; padding: 0; }
.night.is-live .night__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  display: grid;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 900px) {
  .night.is-live .night__stage > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--gap);
  }
  .night.is-live .night__head { grid-column: 1; grid-row: 1; align-self: end; }
  .night.is-live .night__cta { grid-column: 1; grid-row: 2; align-self: start; text-align: left; margin-top: 20px; }
  .night.is-live .lo { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; gap: 36px; }
  .night.is-live .lo__stage { width: clamp(220px, 21vw, 340px); }
  .night.is-live .lo__l { font-size: 19px; max-width: 12em; }
  .night.is-live .lo__s { font-size: 16px; }
  .night.is-live .lo__l--1, .night.is-live .lo__l--3 { right: calc(100% + 28px); }
  .night.is-live .lo__l--2, .night.is-live .lo__l--4 { left: calc(100% + 28px); }
  .night.is-live .lo__cap { font-size: clamp(22px, 1.9vw, 28px); }
  .night.is-live h2 { font-size: clamp(40px, 4.4vw, 64px); }
}

/* The app, held: one phone in the middle of the screen changes screens as you scroll, with
   the four captions beside it. Only on wide, tall screens; elsewhere the screens sit in a
   row (or a swipe strip on phones). */
.app__steps { display: none; }
.app.is-live { height: calc(100vh + 180vh); height: calc(100svh + 180svh); padding: 0; }
.app.is-live .app__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  display: grid;
  align-items: center;
  overflow: hidden;
}
.app.is-live .app__stage > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: clamp(48px, 8vw, 128px);
  align-items: center;
}
.app.is-live .app__steps {
  display: grid;
  gap: 0;
  margin-top: clamp(32px, 4vw, 48px);
  list-style: none;
  counter-reset: st;
}
.app.is-live .app__steps li {
  counter-increment: st;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  color: var(--muted);
  position: relative;
}
.app.is-live .app__steps li:last-child { border-bottom: 1px solid var(--line); }
.app.is-live .app__steps li::before { content: counter(st); font-family: var(--f-text); font-size: 14px; font-weight: 600; padding-top: 0.45em; }
.app.is-live .app__steps li::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--ink);
  transform: scaleX(var(--f, 0));
  transform-origin: left center;
}
.app.is-live .app__steps li.on { color: var(--ink); }
.app.is-live .screens { position: relative; display: block; width: 300px; height: 640px; margin: 0; overflow: visible; }
.app.is-live .phonebox { position: absolute; inset: 0; width: 100%; }
.app.is-live .phonecap { display: none; }
.app.is-live .phone { position: relative; overflow: hidden; }
.app.is-live .phonebox:first-child .phone::before { content: ""; position: absolute; inset: 9px; border-radius: 24px; background: var(--ivory); }
.app.is-live .screen { position: relative; z-index: 1; }
.app.is-live .phonebox:not(:first-child) .phone { background: transparent; }

/* The wiring diagram's signal: a small warm light that travels along each line as it draws. */
.wire .wsig { fill: var(--warm); }


/* The closing wordmark: the master mark set across the full width of the footer. Its node
   drops into place as the footer rises (site.js), vertical only. */
.foot__mark { grid-column: 1 / -1; margin-top: clamp(48px, 7vw, 96px); }
.foot__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.foot__mark .stroke { stroke: var(--paper); }
.foot__mark .node { fill: var(--marigold); transform-box: fill-box; }

/* Lights out ends on one quiet link to the visit. */
.night__cta { margin: 28px auto 0; max-width: none; text-align: center; }
.night__cta .tlink { min-height: 44px; display: inline-flex; align-items: center; }

/* Enquiry form: the optional fields sit behind one disclosure. */
.more { margin-top: 20px; border-top: 1px solid var(--line); }
.more > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ink); }
.more[open] > summary::after { content: "\2212"; }
.more__in { padding-bottom: 8px; }
.more__in .form__grid { margin-top: 4px; }

/* Photographs open like an aperture as they come into view, and the point lists ink line by
   line as each one reaches the reading line. Both set from scroll position (site.js). */
html.sc [data-unveil] img { will-change: clip-path; }
html.sc [data-read] > li:not(.on) { color: var(--muted); }
html.sc [data-read] > li:not(.on) strong { color: var(--muted); }

/* Time-of-day beats (dawn and dusk). The page reads as one day in a nervv home; two beats
   bookend it. As you scroll, the field changes through solid colours (site.js), a clock
   ticks, and two short lines tell the moment; the heading appears only where its contrast is
   safe. Without JavaScript or with reduced motion each beat is a plain band showing its end
   state: dawn on ivory, dusk on Night. */

.beat__stage { display: grid; align-items: center; padding-block: clamp(56px, 9vw, 120px); }
.beat__in { display: grid; }
.beat:not(.is-live) .beat__first { margin-bottom: clamp(20px, 3vw, 32px); }
.beat:not(.is-live) .beat__lines { gap: 8px; }
.beat:not(.is-live) .beat__first .beat__t { display: none; }
.beat:not(.is-live) .beat__line { font-size: clamp(20px, 2vw, 26px); color: var(--muted); }
.beat--dusk:not(.is-live) .beat__line { color: #A9B3AC; }
.beat.is-live .beat__first, .beat.is-live .beat__last { grid-area: 1 / 1; }
.beat__lines { display: grid; }
.beat.is-live .beat__line { grid-area: 1 / 1; }
.beat__line { font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -0.015em; max-width: 22ch; }
.beat.is-live .beat__line + .beat__line { opacity: 0; transform: translateY(12px); }
.beat__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.025em; max-width: none; }
.beat__t { margin-bottom: 10px; font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.beat__sub { margin-top: 16px; max-width: 40ch; font-size: clamp(18px, 1.5vw, 21px); }

.beat--dawn { background: var(--ivory); color: var(--ink); }
.beat--dusk { background: var(--night); color: var(--paper); }
.beat--dusk .beat__sub { color: #D6D0C2; }

.beat.is-live { height: 260vh; height: 260svh; padding: 0; }
/* The stage is as tall as the largest screen (address bar hidden), so no strip of the next
   section shows under it on phones; the section itself takes the same colour (site.js). */
.beat.is-live .beat__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 0; padding: 0; }
.beat.is-live .beat__first { display: block; }
.beat--dawn.is-live .beat__first { color: var(--paper); }
.beat--dawn.is-live .beat__first .beat__t { color: #A9B3AC; }
.beat--dawn.is-live .beat__last { color: var(--deep); }
.beat--dusk.is-live .beat__first { color: var(--deep); }
.beat--dusk.is-live .beat__first .beat__t { color: #4B5A50; }
.beat--dusk.is-live .beat__last { color: var(--paper); }
html.nt .beat.is-live .beat__first, html.nt .beat.is-live .beat__last { color: var(--paper); }
html.nt .beat.is-live .beat__first .beat__t { color: #A9B3AC; }

/* Good morning: night turns to day */

.morning { background: var(--ivory); padding-bottom: clamp(24px, 4vw, 48px); }
.morning.is-live .morning__img img { will-change: clip-path; }
.morning__img { aspect-ratio: 21 / 8; overflow: hidden; }
.morning__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.morning__in { padding-top: clamp(32px, 5vw, 64px); }
.morning__in h2 { font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -0.022em; }

/* Promise */


/* Image and text splits */

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: start;
}
.split--r { grid-template-columns: 7fr 5fr; }
.split--wide { grid-template-columns: 6fr 6fr; }
.split__media { position: sticky; top: calc(var(--nav-h) + 32px); }
.split__text .pts { margin-top: 28px; }

/* Home controller (text only until its own renders exist) */

.ctl__in { max-width: 46rem; }

.day { margin-top: clamp(64px, 9vw, 112px); }
.day .small { margin-top: 8px; }
.day__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 20px;
  margin-top: 36px;
}
.day__list li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  max-width: none;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.day__t { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--muted); }
.day__list strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.2; color: var(--ink); }

/* The app and its example screens */

.app .sechead + .pts { margin-top: 36px; }

.screens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px var(--gap);
  align-items: flex-start;
  margin-top: clamp(48px, 7vw, 88px);
}
.screens:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.phonebox { width: min(100%, 264px); }
.phone { background: var(--frame); border-radius: 32px; padding: 9px; }
.screen {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 580px;
  padding: 18px 14px 20px;
  border-radius: 24px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.screen p, .screen div { max-width: none; }
.sbar { display: flex; align-items: center; min-height: 20px; }
.logo--app { --logo-w: 60px; }
.stitle { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.sdot { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--marigold); }
.sk { font-size: 13px; }
.sv { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.2; }
.sgroup { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.sb--on { border: 2px solid var(--ink); }
.srow { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.srow strong { font-weight: 600; }
.srow span { color: var(--muted); font-size: 13px; }
.sadd { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px dashed var(--muted); border-radius: 6px; color: var(--muted); font-weight: 600; font-size: 13px; }
.phonecap { margin-top: 12px; text-align: center; color: var(--muted); font-size: 15px; }
.snow { position: relative; display: grid; gap: 2px; padding: 14px; border-radius: 6px; background: var(--charcoal); color: var(--paper); }
.snow .sk { color: #CFC9BC; }
.snow__lines { display: flex; gap: 6px; margin-top: 8px; }
.snow__lines i { width: 18px; height: 3px; border-radius: 2px; background: var(--warm); }
.snudge { position: relative; display: grid; gap: 2px; padding: 10px 34px 10px 12px; border: 1px solid var(--marigold-tint-line); border-radius: 6px; background: var(--marigold-tint); }
.snudge .sdot { top: 12px; right: 12px; width: 12px; height: 12px; }
.snudge strong { font-weight: 600; font-size: 13px; line-height: 1.35; }
.snudge span:last-child { font-size: 13px; color: var(--muted); }
.sboard { display: grid; justify-items: center; padding: 14px 0 6px; }
.sboard .bd { width: 112px; }
.srow--line { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.sbig { padding: 4px 0 2px; }
.sbig .sk { color: var(--muted); }
.sbig .sv { color: var(--jal); }
.sbar2 { display: grid; grid-template-columns: 76px 1fr 34px; align-items: center; gap: 8px; font-size: 13px; }
.sbar2 i { display: block; height: 8px; border-radius: 2px; background: var(--jal); }
.sbar2 b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sbar2 .w38 { width: 100%; }
.sbar2 .w31 { width: 82%; }
.sbar2 .w12 { width: 32%; }

/* Night look switch in the nav */

.look {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: -8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.look:hover { border-color: var(--ink); }
.look__i { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.look__sun { display: none; }
.look[aria-pressed="true"] .look__moon { display: none; }
.look[aria-pressed="true"] .look__sun { display: block; stroke: var(--marigold); }
html.nt .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23EEE8DB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html.nt .night, html.nt .visit__card { background: var(--night-deep); }


.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.trio__item { padding-top: 4px; }
.trio__item h4 { margin: 0 0 10px; font-family: var(--f-display); font-weight: 500; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.25; }
.trio__item p { color: var(--ink); font-size: 17px; }

/* The switch board drawing (satin charcoal, 2 x 4 frame, four keys) */

.bd { display: block; width: 100%; height: auto; overflow: visible; }
.bd-plate { fill: var(--charcoal); stroke: var(--charcoal-edge); stroke-width: 1; }
.bd-key { fill: var(--charcoal-key); }
.bd-off { fill: var(--warm-off); }
.bd-on { fill: none; stroke: var(--warm); stroke-width: 1.4; }
.bd-dot { fill: var(--marigold); }
.bd-mark .stroke { stroke: var(--paper); }
.bd-mark .node { fill: var(--marigold); }

.band { margin-top: 24px; aspect-ratio: 21 / 9; border-radius: 0; overflow: hidden; background: var(--line); }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.pics2 {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(48px, 7vw, 80px);
}
.pics2 li { max-width: none; }
.pics2 figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }


/* Lights out (night) */

.night { background: var(--night-deep); color: var(--paper); }
.night .lo { margin-top: clamp(48px, 7vw, 88px); }
.night .pl { color: var(--paper-warm); }
.night .story { color: #D6D0C2; }
.night__head { max-width: 62ch; }
.night .pts { margin-top: clamp(40px, 6vw, 72px); }

.lo { display: grid; justify-items: center; gap: 24px; margin-top: clamp(40px, 6vw, 72px); }
.lo__stage { position: relative; width: clamp(150px, 26vw, 240px); }
.lo__labels { list-style: none; }
.lo__l {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: min(11em, 30vw);
  font-size: 16px;
  line-height: 1.3;
  transform: translateY(-50%);
}
.lo__l--1, .lo__l--3 { right: calc(100% + 20px); text-align: right; align-items: flex-end; }
.lo__l--2, .lo__l--4 { left: calc(100% + 20px); }
.lo__l--1, .lo__l--2 { top: 27%; }
.lo__l--3, .lo__l--4 { top: 62%; }
.lo__n { font-weight: 600; color: var(--paper); }
.lo__s { display: grid; font-size: 14px; color: #BFC7C1; }
.lo__l--1 .lo__s, .lo__l--3 .lo__s { justify-items: end; }
.lo__s > span { grid-area: 1 / 1; }
.lo__s--stay { display: block; color: var(--warm); }
.s-on { opacity: 0; color: var(--warm); }
.lo__cap { display: grid; justify-items: center; text-align: center; text-wrap: balance; font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.6vw, 22px); color: var(--paper); }
.lo__c { grid-area: 1 / 1; }
.lo__c--before { opacity: 0; }

/* Without JavaScript or with reduced motion: the end of the round, only the porch light on.
   With JavaScript, site.js sets each key, label and caption from scroll position. */
.bd--night .bd-on { opacity: 1; }
.bd--night .k1, .bd--night .k2, .bd--night .k3 { opacity: 0; }
}

/* Questions people ask */

.faq { background: var(--surface); }
.faq__in { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap); align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq details { border-radius: 0; background: var(--ivory); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 21px);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--f-text); font-size: 22px; line-height: 1; color: var(--ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 20px 18px; color: var(--ink); font-size: 17px; max-width: 62ch; }

/* How we begin */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
}
.steps li {
  counter-increment: step;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
  text-wrap: balance;
}
.steps li::before {
  content: counter(step);
  display: block;
  min-width: 0.62em;
  margin-bottom: clamp(16px, 2.4vw, 32px);
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.how__line { margin-top: clamp(40px, 6vw, 72px); max-width: 30ch; }

/* Visit */

.visit__card {
  --bleed: min(40px, var(--gutter));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap);
  align-items: center;
  margin-inline: calc(var(--bleed) * -1);
  padding: var(--bleed);
  border-radius: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
}
.visit__cardtext h2 { font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -0.025em; }
.visit__line { margin: 14px 0 28px; max-width: 30ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: #F1ECE1; text-wrap: balance; }
.visit__pic { align-self: stretch; overflow: hidden; border-radius: 0; background: var(--night-deep); }
.visit__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }

.visit__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gap);
  margin-top: clamp(48px, 7vw, 88px);
  align-items: start;
}
.visit__contact { position: sticky; top: calc(var(--nav-h) + 32px); }
.contact { margin: 0; display: grid; gap: 24px; }
.contact div { padding-top: 16px; border-top: 1px solid var(--line); }
.contact dt { color: var(--muted); font-size: 15px; }
.contact dd { margin: 4px 0 0; }
.contact a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.01em; }
.tel { font-variant-numeric: tabular-nums; }

/* Form */

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 24px;
}
.field { display: flex; flex-direction: column; min-width: 0; }
.field + .field, .checks + .field { margin-top: 0; }
.form > .field, .form > .checks { margin-top: 28px; }
.field label, .checks legend { font-weight: 600; font-size: 16px; line-height: 1.4; margin-bottom: 8px; color: var(--ink); }
.opt { font-weight: 400; color: var(--muted); }
.field__hint { font-size: 14px; color: var(--muted); margin-top: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: 2px;
  transition: border-color var(--t-1) var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231D2A23' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field [aria-invalid="true"] { border: 2px solid var(--ink); padding: 10px 13px; background-color: var(--marigold-tint); }
.field select[aria-invalid="true"] { padding-right: 43px; }
.field__err { margin-top: 8px; font-weight: 600; font-size: 15px; color: var(--ink); }

.checks { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.checks legend { padding: 0; }
.checks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
}
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 16px;
}
.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.form__note { font-size: 15px; color: var(--muted); }

.form__summary {
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 2px;
}
.form__summary-h { font-weight: 600; margin-bottom: 6px; }
.form__summary ul { list-style: none; }
.form__summary a { display: inline-flex; align-items: center; min-height: 44px; }

.form__status:empty { display: none; }
.form__status {
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 18px;
}
.form__status.is-ok { border-color: var(--prana); }
.form__status.is-error { border-color: var(--ink); }
.form__status:focus { outline: none; }
.form__status:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.form.is-sent { display: none; }

/* Footer */

.foot {
  --ivory: #111614; --surface: #171D1A; --line: #2B3430; --ink: #EEE8DB; --muted: #A9B3AC; --prana: #6FA886;
  background: var(--night);
  color: var(--ink);
  padding-block: clamp(56px, 8vw, 96px) 40px;
}
.foot .logo { color: var(--paper); }
.foot__cta { margin-top: 24px; }
.foot__grid {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr;
  gap: 40px var(--gap);
}
.logo--foot { --logo-w: 120px; }
.foot__desc { margin-top: 14px; font-weight: 600; font-size: 16px; }
.foot__branch { color: var(--muted); font-size: 15px; }
.foot__h { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.foot__list { list-style: none; }
.foot__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration-color: var(--line); }
.foot__list a:hover { text-decoration-color: var(--ink); }
.foot__list--cols { columns: 2; column-gap: 24px; }
.foot__list--cols li { break-inside: avoid; }
.foot__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.foot__legal p:first-child { max-width: 80ch; }

/* 404 */

.nf__main { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.nf__in { padding-block: 96px; }
.logo--nf { --logo-w: 128px; min-height: 44px; text-decoration: none; }
.nf__h { margin-top: 48px; font-size: clamp(40px, 6vw, 80px); line-height: 1.04; letter-spacing: -0.025em; max-width: 14ch; }
.nf__actions { margin-top: 40px; }



/* Intro hidden when skipped */

html.mf-skip #intro, html.mf-skip #reel { display: none !important; }

/* Responsive */

@media (max-width: 1099px) {
  .day__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .day__list li { padding-top: 22px; }
}

@media (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .pts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__nav { grid-column: 1 / -1; }
  .foot__list--cols { columns: 3; }
}

@media (max-width: 899px) {
    .split, .split--r, .split--wide { grid-template-columns: 1fr; }
  .split__media { position: static; max-width: 520px; }
  .faq__in { grid-template-columns: 1fr; gap: 32px; }
  .split--wide .split__media, .split--r .split__media { max-width: none; }
  .trio { grid-template-columns: 1fr; gap: 0; }
  .trio__item { padding-block: 20px; }
  .visit__grid { grid-template-columns: 1fr; gap: 40px; }
  .visit__card { grid-template-columns: 1fr; }
  .visit__pic { aspect-ratio: 16 / 10; }
  .visit__contact { position: static; }
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
}

@media (max-width: 759px) {
  .morning__img { aspect-ratio: 4 / 3; }
  .morning__img img { object-position: 78% 50%; }
  .pics2 { grid-template-columns: 1fr; gap: 28px; }
  .band { aspect-ratio: 16 / 10; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: grid; grid-template-columns: 64px 1fr; align-items: start; padding-block: 20px; }
  .steps li:last-child { border-bottom: 1px solid var(--line); }
  .steps li::before { margin: -4px 0 0; font-size: 44px; line-height: 1; }
  .pts--grid, .pts--3, .pts--4 { grid-template-columns: 1fr; }
  .day__list { grid-template-columns: 1fr; gap: 0; }
  .day__list li { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; row-gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); }
  .day__list .day__t { grid-row: 1 / span 2; padding-top: 4px; }
  .day__list li:last-child { border-bottom: 1px solid var(--line); }
  .screens {
    display: grid;
    justify-content: stretch;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 264px);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .phonebox { width: 100%; scroll-snap-align: start; justify-self: stretch; }
  .form__grid { grid-template-columns: 1fr; }
  .checks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__list--cols { columns: 2; }
  .contact { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 599px) {
  .lo__stage { width: 140px; }
  .lo__l { max-width: 92px; }
  .lo__l--1, .lo__l--3 { right: calc(100% + 14px); }
  .lo__l--2, .lo__l--4 { left: calc(100% + 14px); }
  .visit__card { border-radius: 0; }
}

@media (max-width: 759px) and (max-height: 640px) {
  .hero__stage { padding-top: 16px; }
}
@media (max-width: 359px) and (max-height: 640px) {
  .hero h1 { font-size: 31px !important; }
  .hero__sub { font-size: 16px; line-height: 1.45; }
}

@media (max-width: 359px) {
  /* Narrow Android phones and the older iPhone SE: keep the top bar on two rows and the
     headline on two lines, so Book a visit stays in the first screen. */
  .nav__in { gap: 12px; }
  .nav__cta { padding: 0 14px; }
  .nav__links a { padding: 0 8px; }
  .hero h1 { font-size: 34px !important; }
  .hero__sub { font-size: 16px; }
}

@media (max-width: 759px) {
  .hero h1 { font-size: clamp(36px, 9.8vw, 44px); }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 35px; }
  .lo__l { font-size: 15px; }
  .checks__grid { grid-template-columns: 1fr; }
}

/* Phones turned sideways: one compact column, headline on one line. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero__stage { min-height: 0; padding-top: 12px; }
  .hero h1 { max-width: none; font-size: 32px !important; }
  .hero__sub { margin-top: 8px; max-width: 64ch; font-size: 16px; line-height: 1.45; }
  .hero .actions { margin-top: 14px; }
}

@media (max-height: 360px) and (orientation: landscape) {
  .hero__stage { padding-top: 8px; }
  .hero h1 { font-size: 30px !important; }
  .hero__sub { margin-top: 6px; font-size: 15px; line-height: 1.4; }
  .hero .actions { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  html { scroll-behavior: auto; }
}