/* Long View · Headland.
   Values come from tokens.json and DESIGN.md. At 1440px wide and above the page
   matches reference/index.html; below that it scales down to 390px. */

:root {
  color-scheme: light;

  --ground: #eef2f5;
  --panel: #e2e9ee;
  --white: #f6f5f1;
  --ink: #0f1b2d;
  --muted: #4f5b69;
  --line: #cbd4dd;
  --accent: #24507c;
  --accent2: #b8402a;
  --dot: #7f8b98; /* inactive carousel dot: the line hue darkened to 3:1 on ground */

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Side gutter: 72px at 1440 (a 1296px column), 20px on phones. */
  --gutter: clamp(20px, 5vw, 72px);
  /* The hero's bar and text sit 52px in at 1440. */
  --edge: clamp(20px, calc(100vw * 52 / 1440), 52px);

  /* Type: the 1440 size at 1440 and above, falling linearly to the phone size at 390
     (MIN + (MAX - MIN) * (100vw - 390px) / 1050, exact at both ends).
     Display sizes scale by about 0.55, text by about 0.9 (DESIGN.md). */
  --fs-h1: clamp(44px, calc(44px + 40 * (100vw - 390px) / 1050), 84px);
  --fs-h2-closing: clamp(36px, calc(36px + 28 * (100vw - 390px) / 1050), 64px);
  --fs-h2-xl: clamp(34px, calc(34px + 26 * (100vw - 390px) / 1050), 60px);
  --fs-h2-calc: clamp(31px, calc(31px + 21 * (100vw - 390px) / 1050), 52px);
  --fs-h2: clamp(28px, calc(28px + 20 * (100vw - 390px) / 1050), 48px);
  --fs-quote: clamp(26px, calc(26px + 18 * (100vw - 390px) / 1050), 44px);
  --fs-case: clamp(24px, calc(24px + 20 * (100vw - 390px) / 1050), 44px);
  --fs-figure: clamp(56px, calc(56px + 36 * (100vw - 390px) / 1050), 92px);
  --fs-30: clamp(22px, calc(22px + 8 * (100vw - 390px) / 1050), 30px);
  --fs-h3: clamp(24px, calc(24px + 6 * (100vw - 390px) / 1050), 30px);
  --fs-statement: clamp(22px, calc(22px + 6 * (100vw - 390px) / 1050), 28px);
  --fs-acc: clamp(21px, calc(21px + 7 * (100vw - 390px) / 1050), 28px);
  --fs-wordmark: clamp(22px, calc(22px + 4 * (100vw - 390px) / 1050), 26px);
  --fs-lead: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px);
  --fs-body: clamp(15.5px, calc(15.5px + 1.5 * (100vw - 390px) / 1050), 17px);
  --fs-btn: clamp(15px, calc(15px + 1 * (100vw - 390px) / 1050), 16px);
  --fs-caption: clamp(14px, calc(14px + 1 * (100vw - 390px) / 1050), 15px);
}

/* Base */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, blockquote, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-photo :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 7px var(--ink); }

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

.wrap { width: min(1296px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Shared type */

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.h1, .h2 {
  font-family: var(--serif);
  font-weight: 400;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 700px;
  color: var(--ink);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 520px;
}

.wordmark { display: flex; flex: none; align-items: center; gap: 10px; }
/* The mark is about two-thirds of the wordmark's size tall, and keeps its own width. */
.mark { width: auto; height: calc(var(--fs-wordmark) * .68); }
.wordmark-sm .mark { height: 15px; }
.wordmark-text {
  font-family: var(--serif);
  font-size: var(--fs-wordmark);
  line-height: 1.1539;
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

/* Buttons */

.btn {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  font-family: var(--sans);
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.btn-outline {
  padding: 11px 18px;
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 14px;
  line-height: 18px;
}
.hero .btn-outline { background: rgba(15, 27, 45, .45); }

.btn-solid, .btn-light {
  padding: 15px 24px;
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 20px;
}
button.btn { border: 0; cursor: pointer; }
.btn-solid { background: var(--ink); color: var(--ground); }
.btn-light { background: var(--white); color: var(--ink); }

/* Motion */

@keyframes lvUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lvKen { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes lvKenS { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes lvFogA { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes lvFogB { from { transform: translateX(5%); } to { transform: translateX(-7%); } }
@keyframes lvMarq { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
@keyframes lvBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes lvRoll {
  0%, 13% { transform: translateY(0); }
  16.667%, 29.667% { transform: translateY(-1.5em); }
  33.333%, 46.333% { transform: translateY(-3em); }
  50%, 63% { transform: translateY(-4.5em); }
  66.667%, 79.667% { transform: translateY(-6em); }
  83.333%, 96.667% { transform: translateY(-7.5em); }
  100% { transform: translateY(-9em); }
}
@keyframes lvSwell { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-6px) scaleY(1.03); } }

.up { animation: lvUp .9s var(--ease) both; }
.up1 { animation-delay: .1s; }
.up2 { animation-delay: .25s; }
.up4 { animation-delay: .55s; }

.ken { animation: lvKen 28s ease-in-out both alternate infinite; transform-origin: 50% 60%; }
.ken-slow { animation: lvKenS 28s ease-in-out alternate infinite; }
.bob { animation: lvBob 2.2s ease-in-out infinite; }
.swell { animation: lvSwell 6s ease-in-out infinite; }

.fog {
  position: absolute;
  inset: -10% -12%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.fog-a {
  background:
    radial-gradient(ellipse 60% 45% at 30% 70%, rgba(238, 242, 245, .55), rgba(238, 242, 245, 0) 70%),
    radial-gradient(ellipse 50% 35% at 80% 40%, rgba(238, 242, 245, .35), rgba(238, 242, 245, 0) 70%);
  animation: lvFogA 26s ease-in-out infinite alternate;
}
.fog-b {
  background:
    radial-gradient(ellipse 45% 40% at 60% 80%, rgba(238, 242, 245, .45), rgba(238, 242, 245, 0) 70%),
    radial-gradient(ellipse 40% 30% at 15% 30%, rgba(238, 242, 245, .3), rgba(238, 242, 245, 0) 70%);
  animation: lvFogB 34s ease-in-out infinite alternate;
}

/* Hover lifts only where there is a pointer that hovers. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}

/* 1. Hero */

.hero {
  position: relative;
  isolation: isolate;
  height: 780px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 32px var(--edge) 64px;
  background: var(--ink);
  color: var(--white);
}

.hero > picture { position: absolute; inset: 0; }

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 27, 45, .28) 0%, rgba(15, 27, 45, 0) 30%, rgba(15, 27, 45, .6) 65%, rgba(15, 27, 45, .6) 100%);
  pointer-events: none;
}

.hero-bar, .hero-foot { position: relative; z-index: 3; }

.hero-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 860px;
}

.h1 {
  max-width: calc(860em / 84);
  font-size: var(--fs-h1);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--white);
}

.hero-cta { display: flex; align-items: center; gap: 26px; }
.hero-cta .btn { flex: none; }

.hero-sub {
  max-width: 400px;
  font-size: var(--fs-body);
  line-height: 1.5295;
  color: rgba(246, 245, 241, .92);
}

.hero-roll {
  font-size: var(--fs-btn);
  line-height: 1.5;
  color: rgba(246, 245, 241, .9);
}

/* The rolling word: six words, about three seconds each. */
.roll {
  display: inline-block;
  height: 1.5em;
  line-height: 1.5em;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--white);
}
.roll > span { display: block; animation: lvRoll 18s cubic-bezier(.6, 0, .2, 1) infinite; }
.roll > span > span { display: block; height: 1.5em; line-height: 1.5em; }

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(246, 245, 241, .8);
}
.scroll-cue .label { color: inherit; }

/* 2. Engagements marquee */

.engage {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.engage-labels {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.marq-track { position: relative; overflow: hidden; }

.marq {
  display: flex;
  width: max-content;
  animation: lvMarq 40s linear infinite;
}
.marq:hover { animation-play-state: paused; }

.marq-set { display: flex; }

.marq-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 44px;
  white-space: nowrap;
}

.marq-name {
  font-family: var(--serif);
  font-size: var(--fs-30);
  line-height: 1.2;
  color: var(--ink);
}

.marq-dot {
  width: 6px;
  height: 6px;
  margin-left: 44px;
  align-self: center;
  border-radius: 50%;
  background: var(--accent2);
}

.marq-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
}
.marq-fade-l { left: 0; background: linear-gradient(90deg, var(--ground), rgba(238, 242, 245, 0)); }
.marq-fade-r { right: 0; background: linear-gradient(270deg, var(--ground), rgba(238, 242, 245, 0)); }

/* 3. Two lines and the fog slider */

.intro { padding: 88px 0 64px; }
.intro > .wrap { display: flex; flex-direction: column; gap: 40px; }

.intro-lines {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: end;
}

.h2-xl { font-size: var(--fs-h2-xl); max-width: 620px; }

.intro-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 6px;
}

.offer { display: flex; flex-direction: column; gap: 8px; }

.accent-line {
  max-width: 560px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-30);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--accent);
}

.fog-block { display: flex; flex-direction: column; gap: 18px; }

.fog-slider {
  --split: 46%;
  position: relative;
  aspect-ratio: 1296 / 600;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 30px 60px rgba(15, 27, 45, .14);
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.fog-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  pointer-events: none;
}

.fog-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  pointer-events: none;
}
.fog-before img { filter: blur(6px) brightness(1.25) contrast(.55) saturate(.5); }
.fog-wash { position: absolute; inset: 0; background: rgba(238, 242, 245, .35); }

.chip {
  position: absolute;
  top: 36px;
  padding: 10px 14px;
  border-radius: 6px;
  pointer-events: none;
}
.chip .label { color: inherit; }
.chip-before { left: 36px; background: rgba(238, 242, 245, .9); color: var(--ink); }
.chip-after { right: 36px; background: rgba(15, 27, 45, .75); color: var(--white); }

.fog-handle {
  position: absolute;
  top: 50%;
  left: var(--split);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(15, 27, 45, .3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fog-range { top: 50%; left: var(--split); }
.fog-range:focus-visible + .fog-handle {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 8px 24px rgba(15, 27, 45, .3), 0 0 0 3px var(--white);
}

.fog-labels { display: flex; justify-content: space-between; gap: 24px; }

/* 4. The calculator */

.calc { padding: 24px 0 72px; }

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.calc-form {
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 52px 56px 52px 0;
}

.h2-calc { font-size: var(--fs-h2-calc); max-width: 520px; }

.field { display: flex; flex-direction: column; gap: 12px; }

.field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.readout {
  flex: none;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.1334;
  color: var(--ink);
}

/* Range input. --p (0 to 1) is set by main.js; the fill ends under the thumb's centre. */
.range {
  --thumb: 26px;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--fill), var(--line) var(--fill));
  --fill: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, 0));
  cursor: pointer;
}
#people { --p: .098196; }
#hours { --p: .157895; }

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 2px 8px rgba(15, 27, 45, .25);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ground);
  cursor: pointer;
}
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--accent); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--accent); }

.calc-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  overflow: hidden;
  border-radius: 14px;
  color: var(--white);
}

.calc-media { position: absolute; inset: 0; overflow: hidden; }
.calc-media img { width: 100%; height: 100%; object-fit: cover; }

.calc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 27, 45, .15) 0%, rgba(15, 27, 45, .75) 100%);
  pointer-events: none;
}

.calc-result {
  position: relative;
  flex: 1;
  margin: 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-result .label { color: rgba(246, 245, 241, .8); }

.figure {
  font-family: var(--serif);
  font-size: var(--fs-figure);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--white);
}

.calc-line {
  font-size: var(--fs-lead);
  line-height: 1.4445;
  color: rgba(246, 245, 241, .9);
}

/* 5. Three rooms: a deck of case-study cards. The cards share one grid cell; the
   front card slides out one way while the next slides in from the other, and the
   two behind peek out below so it reads as a stack. */

.rooms { padding: 24px 0 80px; overflow-x: clip; } /* cards slide out past the column */
.rooms > .wrap { display: flex; flex-direction: column; gap: 28px; }

.slides {
  /* Where a card waits before it comes in, and where it goes when it leaves.
     main.js sets data-dir="back" for the previous button and earlier dots. */
  --enter: calc(100% + var(--gutter));
  --exit: calc(-100% - var(--gutter));
  position: relative;
  display: grid;
  padding-bottom: 16px;
}
.slides::before, .slides::after {
  content: '';
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.slides::before { top: 16px; right: 32px; bottom: 0; left: 32px; }
.slides::after { top: 8px; right: 16px; bottom: 8px; left: 16px; }

.slide {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 16px 40px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 18px 40px rgba(15, 27, 45, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--enter));
}
.slide.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .5s ease;
}
.slide.off {
  transform: translateX(var(--exit));
  transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .5s ease .4s, visibility 0s linear .9s;
}
.slides[data-dir="back"] { --enter: calc(-100% - var(--gutter)); --exit: calc(100% + var(--gutter)); }

.slide-media {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 620 / 460;
  overflow: hidden;
  border-radius: 10px;
}
.slide-media img { width: 100%; height: 100%; object-fit: cover; }
.slide-media img.focus-left { object-position: 30% center; } /* keeps Hoover Tower in the Stanford crop */

.slide-text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.slide-meta { display: flex; flex-direction: column; gap: 6px; }
.slide-place { color: var(--accent); }

.case-title {
  font-family: var(--serif);
  font-size: var(--fs-case);
  font-weight: 400;
  line-height: 1.091;
  color: var(--ink);
}

.slide-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.statement {
  max-width: 520px;
  font-family: var(--serif);
  font-size: var(--fs-statement);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.rotation { display: flex; align-items: center; gap: 18px; }

.play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.rooms.is-auto .icon-play, .rooms:not(.is-auto) .icon-pause { display: none; }

.dots { display: flex; align-items: center; gap: 8px; }

.dot {
  position: relative;
  width: 12px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--dot);
  cursor: pointer;
  transition: width .4s ease, background .4s ease;
}
.dot::before { content: ''; position: absolute; inset: -8px -4px; }
.dot[aria-current="true"] { width: 36px; background: var(--ink); }

/* While the cards flip on their own, the current dot fills with ink over the
   six seconds before the next card (main.js keeps the same interval). */
@keyframes lvFill { from { width: 0; } to { width: 100%; } }
.rooms.is-auto .dot[aria-current="true"] { background: var(--dot); }
.rooms.is-auto .dot[aria-current="true"]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  background: var(--ink);
  animation: lvFill 6s linear forwards paused;
}
.rooms.is-running .dot[aria-current="true"]::after { animation-play-state: running; }

.arrows { display: flex; gap: 12px; }

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* 6. What we cover */

.cover { padding: 40px 0 88px; }

.cover-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.cover-intro { display: flex; flex-direction: column; gap: 20px; }
.cover-intro .h2 { max-width: 400px; }

.cover-media {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 440 / 300;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 10px;
}
.cover-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

.acc-list { border-bottom: 1px solid var(--line); }

.acc { padding: 20px 0; border-top: 1px solid var(--line); }

.acc-head { font: inherit; }

.acc-btn {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.acc-btn svg { flex: none; }

.acc-title {
  flex: 1;
  font-family: var(--serif);
  font-size: var(--fs-acc);
  line-height: 1.1429;
  color: var(--ink);
}

.chev {
  display: inline-block;
  font-family: var(--sans);
  font-size: 26px;
  line-height: 26px;
  color: var(--accent);
  transition: transform .35s ease;
}
.acc.open .chev { transform: rotate(45deg); }

.acc-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height .5s ease, opacity .4s ease, visibility 0s linear .5s;
}
.acc.open .acc-body {
  max-height: 140px;
  opacity: 1;
  visibility: visible;
  transition: max-height .5s ease, opacity .4s ease;
}

.acc-body-inner { padding: 12px 0 4px 52px; }
.acc-body p {
  max-width: 640px;
  font-size: var(--fs-body);
  line-height: 1.5295;
  color: var(--muted);
}

/* 7. Quote */

.quote { padding: 0 0 64px; }

.quote-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 72px 80px;
  text-align: center;
}

.quote blockquote {
  max-width: 940px;
  font-family: var(--serif);
  font-size: var(--fs-quote);
  font-style: italic;
  line-height: 1.15;
  color: var(--ink);
}

/* 8. Closing */

.closing {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 520px;
  padding-bottom: 56px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.closing-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.closing-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(238, 242, 245, 0) 0%, rgba(15, 27, 45, .7) 100%);
  pointer-events: none;
}

.closing-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.h2-closing { font-size: var(--fs-h2-closing); max-width: 640px; color: var(--white); }

.closing-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.closing-cta .label { color: rgba(246, 245, 241, .8); }

.founder { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; text-align: right; }
.founder-name {
  font-family: var(--serif);
  font-size: var(--fs-30);
  line-height: 1.2;
  color: var(--white);
}

/* 9. Footer */

.site-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 34px 0 44px;
  border-top: 1px solid var(--line);
}
.wordmark-sm .wordmark-text { font-size: 22px; line-height: 26px; }
.wordmark-link { color: var(--ink); text-decoration: none; }
.backing { flex: 1; text-align: center; }
.copyright { text-align: right; }
.copyright span { display: block; }

/* Contact page */

.contact-bar { padding: 32px 0; }

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding: 40px 0 88px;
}

.contact-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 560px;
}

.contact-form { display: flex; flex-direction: column; gap: 22px; }

.form-field { display: flex; flex-direction: column; gap: 10px; }

.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--dot);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
textarea.input { min-height: 168px; resize: vertical; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

.form-note {
  display: none;
  max-width: 520px;
  font-family: var(--serif);
  font-size: var(--fs-30);
  line-height: 1.2;
  color: var(--accent);
}
.form-note-error { color: var(--ink); }
.form-note:target, .form-note.is-shown { display: block; }
.form-note:focus { outline: none; }
#sent:target ~ .contact-form { display: none; }

/* The field people never see; a bot that fills it in is ignored. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
}
.contact-media img { width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }

/* Tablet: two columns become one, step cards go to two across. */

@media (max-width: 900px) {
  .intro-lines { grid-template-columns: 1fr; gap: 20px; align-items: start; }

  .calc-grid { grid-template-columns: 1fr; gap: 0; }
  .calc-form { padding: 40px 0; }
  .calc-panel { min-height: 420px; }

  .calc-result .label { color: var(--white); }

  .slide { grid-template-columns: 1fr; gap: 24px; align-items: start; align-content: start; padding: 12px 12px 24px; }
  .slide-media { max-width: none; }
  .slide-text { padding: 0 8px; }

  .contact { grid-template-columns: 1fr; padding-top: 16px; }
  .contact-media { display: none; }
  .slide-text { padding-right: 0; }

  .cover-grid { grid-template-columns: 1fr; gap: 40px; }

  .closing-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .closing-cta { align-items: flex-start; }
  .founder { text-align: left; }

  .site-foot-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .backing, .copyright { text-align: left; }
}

@media (max-width: 720px) {
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .engage-labels { flex-direction: column; gap: 6px; margin-bottom: 14px; }
  /* The text rises with the screen height, so the scrim is anchored to the bottom. */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(15, 27, 45, .28), rgba(15, 27, 45, 0) 25%),
      linear-gradient(0deg, rgba(15, 27, 45, .6), rgba(15, 27, 45, .6) 300px, rgba(15, 27, 45, .5) 480px, rgba(15, 27, 45, 0) 660px);
  }
}

/* Phone */

@media (max-width: 600px) {
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px var(--edge) 40px;
  }
  .scroll-cue { display: none; }
  .hero-text { gap: 22px; }

  .engage { padding: 26px 0; }
  .marq-item { gap: 10px; padding: 0 26px; }
  .marq-dot { margin-left: 26px; }
  .marq-fade { width: 36px; }

  .intro { padding: 56px 0 48px; }
  .intro > .wrap { gap: 28px; }
  .fog-slider { aspect-ratio: 4 / 3; border-radius: 12px; }
  .chip { top: 14px; padding: 8px 10px; }
  .chip-before { left: 14px; }
  .chip-after { right: 14px; }
  .fog-handle { width: 48px; height: 48px; }
  .fog-labels { flex-direction: column; gap: 6px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  .calc { padding: 16px 0 56px; }
  .calc-grid { padding-top: 16px; }
  .calc-form { gap: 28px; padding: 32px 0 32px; }
  .calc-panel { min-height: 340px; border-radius: 12px; }
  .calc-result { margin: 24px; }

  .rooms { padding: 16px 0 56px; }
  .rooms > .wrap { gap: 24px; }
  .slide { gap: 22px; }
  .slide-text { gap: 20px; }
  .slide-body { gap: 14px; padding-top: 18px; }
  .arrow { width: 48px; height: 48px; }

  .cover { padding: 32px 0 56px; }
  .cover-media { max-width: none; }
  .acc { padding: 16px 0; }
  .acc-btn { gap: 14px; }
  .acc-btn svg { width: 28px; height: 28px; }
  .acc-body-inner { padding: 10px 0 4px 42px; }

  .quote { padding: 0 0 48px; }
  .quote-inner { padding: 40px 0; }

  .closing { height: auto; min-height: 440px; padding: 120px 0 40px; }

  .site-foot-row { padding: 28px 0 36px; }
  .slides { padding-bottom: 12px; }
  .slides::before { top: 12px; right: 20px; left: 20px; }
  .slides::after { top: 6px; right: 10px; bottom: 6px; left: 10px; }
  .contact-bar { padding: 24px 0; }
  .contact { padding-bottom: 56px; }
}

/* Landscape phones: the hero fits the screen instead of standing 780px tall. */

@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 20px;
    padding-bottom: 28px;
    gap: 24px;
  }
  .scroll-cue { display: none; }
  .hero-text { gap: 16px; }
  .hero-cta { flex-direction: row; align-items: center; gap: 20px; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(15, 27, 45, .28), rgba(15, 27, 45, 0) 120px),
      linear-gradient(0deg, rgba(15, 27, 45, .6), rgba(15, 27, 45, .6) 280px, rgba(15, 27, 45, .5) 400px, rgba(15, 27, 45, 0) 500px);
  }
  .slide-media { max-height: 72svh; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  /* The marquee stands still, so show the three names once, wrapping if needed. */
  .marq { width: auto; }
  .marq-set { flex-wrap: wrap; }
  .marq-set[aria-hidden="true"] { display: none; }
  .marq-item { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1439px) {
  .marq-fade { display: none; }
}

@media (forced-colors: active) {
  .range { border: 1px solid CanvasText; }
  .dot { border: 1px solid ButtonText; }
  .dot[aria-current="true"] { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .dot[aria-current="true"]:focus-visible { outline-color: CanvasText; }
  .range:focus-visible { outline: 2px solid Highlight; outline-offset: 10px; }
}