/* Nymbus base styles. Tokens come from DESIGN.md: the logo's navy and blue.
   Light sections sit between a dark hero and a dark footer. */

/* Fonts are served from this site. Same files, weights and Latin range as
   Google Fonts, so nothing outside bynymbus.com holds up the first paint. */
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/atkinson-mono.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/atkinson-mono.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/atkinson-next.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/atkinson-next.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/barlow-semi-condensed-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/barlow-semi-condensed-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* light surfaces */
  --bg: #EEF4FF;
  --surface: #F8FAFF;
  --ink: #0C1226;
  --muted: #4A5D91;
  --line: #C6D6F5;
  --accent: #3B82F6;          /* the logo blue */
  --accent-ink: #0C1226;      /* navy text on blue: 5.05:1 */
  --link: #1D4ED8;            /* blue that passes on light: 6.07:1 */
  --signal: #FFA83A;          /* amber, one use per page */

  /* dark surfaces */
  --navy: #0C1226;
  --navy-2: #131B36;
  --navy-3: #1E2A4D;
  --paper-on-navy: #F5F8FF;
  --muted-on-navy: #93A9D8;
  --line-on-navy: #2C3C68;

  --font-head: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --t-hover: 200ms;
  --t-reveal: 450ms;
  --t-draw: 900ms;

  --maxw: 1200px;
  --measure: 62ch;
  --gutter: 24px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.dark { background: var(--navy); color: var(--paper-on-navy); }
.dark :focus-visible { outline-color: var(--signal); }
.hp { display: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--navy); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: 1.5rem; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.mono { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.dark .muted { color: var(--muted-on-navy); }
.eyebrow { color: var(--link); margin: 0 0 14px; }
.dark .eyebrow { color: var(--accent); }
.lede { font-size: 1.2rem; max-width: var(--measure); }
.fine { font-size: 14px; color: var(--muted); }

section { padding: 112px 0; }
section.tight { padding: 72px 0; }
.surface { background: var(--surface); }
.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head p { margin: 0; color: var(--muted); }
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }

/* ---------- top bar ---------- */
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 26px; letter-spacing: 0.01em;
  text-decoration: none;
}
.wordmark svg { width: 44px; height: 20px; fill: var(--accent); }
.topbar .coords { color: var(--muted-on-navy); margin-right: auto; margin-left: 20px; }
.topbar.light { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar.light .coords { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(59, 130, 246, 0.7); }
.btn-small { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.btn.secondary { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px var(--line); }
.dark .btn.secondary { box-shadow: inset 0 0 0 2px var(--line-on-navy); }
.btn.secondary:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.textlink {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: var(--line); transition: text-decoration-color var(--t-hover) var(--ease);
}
.dark .textlink { text-decoration-color: var(--line-on-navy); }
.textlink:hover { text-decoration-color: var(--accent); }
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* ---------- hero (home) ---------- */
.hero {
  padding: 24px 0 104px;
  background: radial-gradient(60% 70% at 78% 45%, rgba(59, 130, 246, 0.18), transparent 70%), var(--navy);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.kicker { color: var(--accent); margin: 0 0 20px; }
.hero h1 > span { display: block; }
/* The highlight is a real background (not a pseudo-element) so it survives a
   line wrap inside the mark; nowrap keeps a two-word mark on one line. */
.hero h1 mark, .room-hero h1 mark {
  color: var(--navy); padding: 0 0.12em; white-space: nowrap;
  background-color: transparent;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero .sub { margin: 28px 0 32px; max-width: 34em; color: var(--muted-on-navy); font-size: 19px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 32px 0 0; padding: 0; list-style: none; color: var(--muted-on-navy); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- the map ---------- */
.map {
  position: relative; margin: 0;
  border: 1px solid var(--line-on-navy); border-radius: var(--radius);
  background: var(--navy-2); padding: 44px 20px 40px;
  box-shadow: 0 30px 80px -40px rgba(59, 130, 246, 0.45);
}
.map-frame { position: relative; }
.map-svg { display: block; width: 100%; height: auto; }
.map-svg .water { fill: #0A1021; }
.map-svg .land { fill: #19264A; }
.map-svg .grid { fill: none; stroke: var(--accent); stroke-width: 0.5; opacity: 0.14; }
.map-svg .c { fill: none; stroke: #5B9BFF; stroke-linejoin: round; stroke-linecap: round; }
.map-svg .minor { stroke-width: 0.55; opacity: 0.5; }
.map-svg .index { stroke-width: 1; opacity: 0.85; }
.map-svg .coast { stroke-width: 1.4; stroke: #9CC4FF; }
.sheet-label { position: absolute; color: var(--muted-on-navy); font-size: 12px; margin: 0; }
.sheet-label.tl { top: 14px; left: 20px; }
.sheet-label.tr { top: 14px; right: 20px; }
.sheet-label.bl { bottom: 12px; left: 20px; }
.place {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted-on-navy);
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px var(--navy-2), 0 0 3px var(--navy-2), 0 0 6px var(--navy-2);
}
.place.water-label { font-style: italic; letter-spacing: 0.12em; color: #5B7FC4; text-shadow: 0 0 3px var(--navy), 0 0 6px var(--navy); }
.place.peak::before { content: "\25B2  "; font-size: 9px; color: var(--paper-on-navy); }
.pin { position: absolute; display: flex; align-items: flex-start; gap: 8px; text-decoration: none; transform: translate(-12px, -33px); }
.pin-mark { flex: none; width: 24px; height: 33px; filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.7)); }
.pin-mark path { fill: var(--accent); }
.pin-mark circle { fill: var(--navy); }
.pin-mark text { font-family: var(--font-mono); font-size: 10px; font-weight: 500; fill: var(--paper-on-navy); }
.pin-card {
  background: var(--paper-on-navy); color: var(--ink); border-radius: 4px; padding: 6px 10px 7px;
  line-height: 1.25; white-space: nowrap; box-shadow: 3px 3px 0 var(--accent);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.pin-card .where { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pin-card strong { display: block; font-family: var(--font-head); font-size: 20px; }
.pin:hover .pin-card, .pin:focus-visible .pin-card { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--signal); }
.pin.below { flex-direction: column; align-items: flex-start; gap: 4px; }
.map-key { display: none; }
.scale { position: absolute; right: 0; bottom: -30px; width: 16.7%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; color: var(--muted-on-navy); }
.scale .scale-bar { display: block; width: 100%; height: 6px; border: 1.5px solid var(--muted-on-navy); border-top: 0; }

/* ---------- legend (door menu) ---------- */
.legend-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: end; margin-bottom: 48px; }
.legend-head p { margin: 0; color: var(--muted); max-width: 34em; }
.rungs { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.rung a {
  position: relative; display: grid;
  grid-template-columns: 40px 32px minmax(0, 3fr) minmax(0, 5fr) minmax(220px, 2fr) 28px;
  gap: 20px; align-items: center; padding: 24px 4px;
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.rung a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--link); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-reveal) var(--ease);
}
.rung a:hover::after, .rung a:focus-visible::after { transform: scaleX(1); }
.rung .num { color: var(--muted); }
.rung .sym { width: 26px; height: 26px; }
.rung .sym * { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.rung .sym .fill { fill: var(--link); stroke: none; }
.rung h3 { font-size: 1.6rem; margin: 0; }
.tag {
  display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 99px;
  background: var(--signal); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; vertical-align: 0.4em;
}
.rung .benefit { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.rung .price { margin: 0; text-align: right; line-height: 1.3; }
.rung .price strong { display: block; font-family: var(--font-head); font-size: 1.6rem; }
.rung .price span { color: var(--muted); font-size: 12px; }
.rung .arrow { width: 22px; height: 22px; transition: transform var(--t-hover) var(--ease); }
.rung .arrow path { stroke: var(--ink); stroke-width: 2; fill: none; }
.rung a:hover .arrow, .rung a:focus-visible .arrow { transform: translateX(4px); }
.legend-foot { margin: 28px 0 0; color: var(--muted); font-size: 15px; }

/* ---------- "sounds familiar" problem cards ---------- */
.problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.problem {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  text-decoration: none; transition: transform var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.problem:hover { transform: translateY(-3px); border-color: var(--accent); }
.problem q { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.1; quotes: "\201C" "\201D"; }
.problem p { margin: 0; color: var(--muted); font-size: 16px; flex: 1; }
.problem .go { font-weight: 700; color: var(--link); }

/* ---------- route timeline: what to expect, and when ---------- */
.route { position: relative; }
/* One line segment per stop, drawn from its dot's centre to the next dot's centre
   (the column width plus the grid gap), so the line meets the dots at any width. */
.route-line { position: absolute; left: 12px; width: calc(100% + 32px); top: 32px; height: 32px; overflow: visible; pointer-events: none; }
.route-line path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stop { padding-top: 84px; position: relative; }
.stop::before {
  content: ""; position: absolute; z-index: 1; top: 36px; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 4px solid var(--accent); box-sizing: border-box;
}
.stop .when { display: block; color: var(--link); margin-bottom: 8px; }
.stop h3 { font-size: 1.5rem; margin-bottom: 8px; }
.stop p { margin: 0; color: var(--muted); font-size: 16px; }
.route-note { margin: 40px 0 0; padding: 20px 24px; border-left: 3px solid var(--signal); background: var(--surface); max-width: 60ch; }
.route-note p { margin: 0; }

/* ---------- results bento ---------- */
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.result {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
}
.result .where { color: var(--muted); }
.result .big { font-family: var(--font-head); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; }
.result p { margin: 0; color: var(--muted); font-size: 16px; }
.result .more { margin-top: auto; padding-top: 12px; font-weight: 700; color: var(--link); }
.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; height: 120px; margin: 8px 0 4px; }
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar i {
  display: block; height: calc(var(--v) * 100%); border-radius: 3px 3px 0 0; background: var(--line);
  transform-origin: bottom; transition: transform var(--t-draw) var(--ease);
}
.bar.hi i { background: var(--accent); }
.bar b { font-family: var(--font-head); font-size: 1.25rem; margin-top: 6px; }
.bar span { font-size: 12px; color: var(--muted); }
.js-reveal .bars:not(.in) i { transform: scaleY(0.02); }
.quote { margin: 48px 0 0; padding: 32px; background: var(--navy); color: var(--paper-on-navy); border-radius: var(--radius); }
.quote blockquote { margin: 0; font-family: var(--font-head); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; }
.quote figcaption { margin-top: 16px; color: var(--muted-on-navy); }
.quote figcaption a { color: var(--paper-on-navy); }

/* ---------- founder ---------- */
.founder { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: center; }
.founder img, .founder .photo-ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.founder .photo-ph { display: grid; place-items: center; background: var(--navy-2); color: var(--muted-on-navy); border: 1px dashed var(--line-on-navy); text-align: center; padding: 20px; }
.founder.solo { grid-template-columns: minmax(0, 1fr); }
.founder h2 { margin-bottom: 16px; }
.founder p { max-width: 54ch; }

/* ---------- FAQ as a conversation ---------- */
.faq { max-width: 820px; }
.faq details { margin: 0 0 14px; }
.faq summary {
  list-style: none; cursor: pointer; display: inline-block; max-width: 85%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px;
  padding: 12px 18px; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "You: "; color: var(--muted); font-weight: 400; }
.faq details[open] summary { border-color: var(--accent); }
.faq .answer { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 0 10%; }
.faq .avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--accent); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; }
.faq .answer p { margin: 0; background: var(--navy); color: var(--paper-on-navy); border-radius: 18px 18px 4px 18px; padding: 14px 18px; }
.faq .answer p a { color: var(--accent); }

/* ---------- guestbook ---------- */
.guestbook {
  border: 2px solid var(--accent); border-radius: var(--radius); padding: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--surface);
}
.guestbook h2 { font-size: 2rem; margin-bottom: 8px; }
.guestbook p { margin: 0 0 8px; color: var(--muted); }
.capture { display: grid; gap: 10px; }
.capture input, .capture select {
  font: inherit; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); width: 100%;
}
.capture input:focus, .capture select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); }
.capture .btn { width: 100%; }
.capture .fine { margin: 2px 0 0; }
.capture .sms-consent { display: flex; gap: 12px; align-items: flex-start; margin: 2px 0 4px; font-size: 15px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.capture .sms-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.capture .sms-consent input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.capture .sms-consent a { color: var(--ink); }

/* ---------- footer = navigation ---------- */
.site-footer { padding: 80px 0 40px; }
.site-footer .where { font-family: var(--font-head); font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.05; margin: 0 0 48px; max-width: 24ch; }
.site-footer .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.site-footer h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-navy); margin-bottom: 14px; font-family: var(--font-mono); font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.site-footer .price { color: var(--muted-on-navy); font-family: var(--font-mono); font-size: 13px; margin-left: 6px; }
.site-footer .fine { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--line-on-navy); color: var(--muted-on-navy); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- floating start pill ---------- */
.start-pill {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  box-shadow: 0 10px 30px -10px rgba(12, 18, 38, 0.6);
  transform: translateY(120%); opacity: 0; transition: transform var(--t-reveal) var(--ease), opacity var(--t-reveal) var(--ease);
}
.start-pill.show { transform: none; opacity: 1; }

/* ---------- rooms ---------- */
.room-hero { padding: 24px 0 88px; background: radial-gradient(50% 60% at 85% 30%, rgba(59, 130, 246, 0.16), transparent 70%), var(--navy); }
.room-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: end; }
.room-hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.room-hero .sub { color: var(--muted-on-navy); font-size: 19px; max-width: 34em; margin: 20px 0 28px; }
.price-card {
  background: var(--navy-2); border: 1px solid var(--line-on-navy); border-radius: var(--radius); padding: 28px;
}
.price-card .amount { font-family: var(--font-head); font-size: 3rem; line-height: 1; display: block; }
.price-card .terms { color: var(--muted-on-navy); display: block; margin: 6px 0 20px; }
.price-card .btn { width: 100%; }
.price-card .fine { color: var(--muted-on-navy); margin: 12px 0 0; }
.benefit-line { font-family: var(--font-head); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; max-width: 30ch; margin: 0; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fit div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.fit h3 { font-size: 1.25rem; }
.fit ul { margin: 0; padding-left: 20px; }
.fit li { margin-bottom: 8px; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 32px; }
.includes li { position: relative; padding-left: 32px; }
.includes li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); }
.includes li::after { content: ""; position: absolute; left: 5px; top: 12px; width: 8px; height: 5px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }
.includes strong { display: block; }
.includes span { color: var(--muted); font-size: 16px; }
.report { background: var(--navy); color: var(--paper-on-navy); border-radius: var(--radius); padding: 32px; }
.report h3 { color: var(--accent); font-size: 1.1rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.report ul { margin: 0; padding-left: 20px; }
.objections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.objection { padding: 24px 0 0; border-top: 2px solid var(--ink); }
.objection h3 { font-size: 1.3rem; }
.objection p { margin: 0; color: var(--muted); }
.cta-band { background: var(--navy); color: var(--paper-on-navy); padding: 80px 0; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { margin: 0; max-width: 20ch; }

/* ---------- lead magnet / utility ---------- */
.single { max-width: 720px; margin: 0 auto; padding: 64px var(--gutter) 96px; }
.single h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.steps-list { counter-reset: s; list-style: none; margin: 32px 0; padding: 0; }
.steps-list li { counter-increment: s; position: relative; padding: 0 0 20px 56px; }
.steps-list li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--font-mono); color: var(--link); }
.check-form fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.check-form legend { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.check-form .q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.check-form .q span { font-size: 17px; }
.check-form .yn { display: flex; gap: 6px; }
.check-form .yn label { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius); font-weight: 700; cursor: pointer; background: #fff; }
.check-form .yn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-form .yn input:checked + label { background: var(--navy); color: var(--paper-on-navy); border-color: var(--navy); }
.check-form .yn input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.score { margin: 24px 0; padding: 24px; border-radius: var(--radius); background: var(--navy); color: var(--paper-on-navy); }
.score .big { font-family: var(--font-head); font-size: 3rem; line-height: 1; }
.score ul { margin: 12px 0 0; padding-left: 20px; }
.score ul li { margin-bottom: 6px; }

/* ---------- work index + case studies ---------- */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.case-card { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.case-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.case-card img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.case-card .body { padding: 20px 24px 24px; }
.case-card .where { color: var(--muted); }
.case-card h3 { font-size: 1.4rem; margin: 6px 0; }
.case-card p { margin: 0; color: var(--muted); font-size: 16px; }
.case-card .big { font-family: var(--font-head); font-size: 1.6rem; color: var(--link); }
.case { max-width: 820px; }
.case h2 { font-size: 2rem; margin-top: 2.2em; }
.case figure { margin: 32px 0; }
.case figure img { border: 1px solid var(--line); border-radius: var(--radius); }
.case figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 24px; margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--line-on-navy); border-bottom: 1px solid var(--line-on-navy); }
.case-meta dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-on-navy); }
.case-meta dd { margin: 4px 0 0; }
.stat-row { display: flex; flex-wrap: wrap; gap: 32px 48px; margin: 32px 0; }
.stat-row div strong { display: block; font-family: var(--font-head); font-size: 2.5rem; line-height: 1; }
.stat-row div span { color: var(--muted); font-size: 15px; }

/* ---------- reveal on scroll ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---------- motion ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drop { from { transform: translate(-12px, -62px); } }
@keyframes wipe { from { background-size: 0% 100%; } }
@keyframes paper-to-navy { from { color: var(--paper-on-navy); } }
@keyframes draw-route { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .map-svg .c { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw calc(var(--t-draw) * 1.6) var(--ease) forwards; animation-delay: calc(var(--i, 0) * 30ms); }
  .js-reveal .pin { animation: drop var(--t-reveal) var(--ease) both; animation-delay: calc(700ms + var(--p, 0) * 120ms); }
  .js-reveal h1 mark { animation: wipe var(--t-reveal) var(--ease) both, paper-to-navy var(--t-reveal) var(--ease) both; animation-delay: calc(200ms + var(--m, 0) * 150ms); }
  @supports (animation-timeline: view()) {
    .js-reveal .route-line path { stroke-dasharray: 1; animation: draw-route linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .bars:not(.in) i { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- phone ---------- */
@media (max-width: 880px) {
  :root { --gutter: 20px; }
  section { padding: 72px 0; }
  .topbar .coords { display: none; }
  .hero { padding-bottom: 64px; }
  .hero .wrap, .legend-head, .two-col, .room-hero .wrap, .guestbook, .founder, .fit { grid-template-columns: 1fr; gap: 32px; }
  .hero .sub { margin: 20px 0 24px; }
  .map { padding: 40px 12px 20px; box-shadow: none; }
  .pin-card, .wide-only { display: none; }
  .map-frame { margin-bottom: 40px; }
  .sheet-label.bl { position: static; margin-top: 8px; }
  .map-key { display: grid; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
  .map-key a { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
  .map-key .key-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--navy); font-size: 13px; }
  .map-key .where { display: block; font-size: 12px; color: var(--muted-on-navy); }
  .map-key strong { font-family: var(--font-head); font-size: 20px; line-height: 1.1; color: var(--paper-on-navy); }
  .rung a { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "sym name price" "benefit benefit benefit"; gap: 8px 12px; padding: 20px 0; align-items: start; }
  .rung .num, .rung .arrow { display: none; }
  .rung .sym { grid-area: sym; margin-top: 2px; }
  .rung h3 { grid-area: name; font-size: 1.35rem; }
  .rung .benefit { grid-area: benefit; font-size: 15px; }
  .rung .price { grid-area: price; }
  .rung .price strong { font-size: 1.3rem; }
  .rung .tag { display: table; margin: 6px 0 0; vertical-align: baseline; }
  .stops { grid-template-columns: 1fr; gap: 24px; }
  .stop { padding-top: 0; padding-left: 40px; }
  .stop::before { top: 4px; }
  .route-line { display: none; }
  .results { grid-template-columns: 1fr; }
  .guestbook { padding: 28px; }
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq summary { max-width: 100%; }
  .faq .answer { margin-left: 0; }
  .start-pill { right: 12px; bottom: 12px; left: 12px; }
  .start-pill .btn { width: 100%; }
  .founder { grid-template-columns: 1fr; }
  .founder img, .founder .photo-ph { max-width: 280px; }
}

/* ---------- sample audit tables ---------- */
.sample-note { margin: 0; padding: 16px 20px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; max-width: 820px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px; }
.sheet-table caption { text-align: left; color: var(--muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 8px; }
.sheet-table th, .sheet-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sheet-table thead th { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); border-bottom: 2px solid var(--ink); }
.sheet-table tbody th { font-weight: 700; }
.sheet-table tr.you { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* A long highlight is wider than a phone screen, so it wraps there. */
@media (max-width: 479px) {
  .hero h1 mark, .room-hero h1 mark { white-space: normal; }
}

/* A .sheet-narrow table shows every column on a phone, with no side-scrolling. */
.sheet-table.sheet-narrow { min-width: 0; }
@media (max-width: 479px) {
  .sheet-table.sheet-narrow { font-size: 15px; }
  .sheet-table.sheet-narrow th, .sheet-table.sheet-narrow td { padding: 10px 6px; }
  .sheet-table.sheet-narrow thead th { font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 359px) {
  .sheet-table.sheet-narrow th, .sheet-table.sheet-narrow td { padding: 8px 3px; }
}