/* Energia AI landing preview, V3: "one building, one day".
   Type: Satoshi, self-hosted. Light 300 for display, 400 for text, 700 only
   for emphasis. Palette: warm paper, ink and the stone of the renders, with
   the brand green measured on energiaigroup.com (#567740) kept for action.
   One left edge for every block. Selected direction B: paper headline over
   a panorama, with a vertical day list beside the desktop state image. */

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --paper: #f3f1ec;
  --stone: #e6e1d8;
  --ink: #16171a;
  --ink-soft: #4b4d4f;
  --line: rgba(22, 23, 26, 0.14);
  --night: #16171a;
  --night-soft: #b3b5b8;
  --night-line: rgba(255, 255, 255, 0.16);
  --green: #567740;
  --green-deep: #46632f;
  --green-light: #82c95e;
  --sun: #c98a3a;
  --error: #9b2a1d;

  --font: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1296px;
  --pad: clamp(20px, 5vw, 72px);
  --edge: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  --bar-h: 80px;
  --section: clamp(96px, 11vw, 160px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* H1 60px at 1440, 34px on phones. H2 44px and 30px. H3 22px.
     Ledes 18px desktop, 17px phone. Secondary text 16px everywhere. */
  --h1: clamp(34px, 1.2rem + 2.9vw, 60px);
  --h2: clamp(30px, 1.1rem + 2vw, 44px);
  --h3: clamp(20px, 1.15rem + 0.3vw, 22px);
  --body: clamp(17px, 1rem + 0.1vw, 18px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.limits :focus-visible { outline-color: var(--green-light); }
/* The header uses an ink ring on its paper background. */
.hero :focus-visible,
.bar:not(.is-scrolled):not(.is-open) :focus-visible { outline-color: var(--ink); }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}
.skip:focus { top: 12px; }
.skip:focus-visible { outline: 2px solid var(--white); outline-offset: -6px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap { padding-inline: var(--edge); }

.arrow { flex: none; transition: transform 0.3s var(--ease); }
a:hover > .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------ type */

.title {
  max-width: 16em;
  font-weight: 300;
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.title strong { font-weight: 700; letter-spacing: -0.03em; }
.lede {
  max-width: 40ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.note {
  font-size: 15px;
  color: var(--ink-soft);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 22px;
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.button:hover { background: var(--green-deep); }
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ------------------------------------------------------------------- bar */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--paper);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bar.is-scrolled,
.bar.is-open {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
}
.bar__inner {
  height: var(--bar-h);
  padding-inline: var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bar__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.bar__brand img { width: 132px; height: auto; }
.bar__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
}
.bar__nav a {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.bar__nav a:hover { text-decoration-color: currentColor; }
.bar__nav .bar__cta {
  gap: 12px;
  padding: 0 18px;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.bar__nav .bar__cta:hover { background: var(--green-deep); }

.bar__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0 0 8px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 15px/1 var(--font);
  cursor: pointer;
}
.bar__toggle-icon,
.bar__toggle-icon::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.bar__toggle-icon { position: relative; transform: translateY(-3px); }
.bar__toggle-icon::after { content: ""; position: absolute; top: 6px; }
.bar.is-open .bar__toggle-icon { transform: translateY(0) rotate(45deg); }
.bar.is-open .bar__toggle-icon::after { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 860px) {
  :root { --bar-h: 64px; }
  .bar__brand img { width: 112px; }
  .bar__toggle { display: inline-flex; }
  .bar__nav {
    position: absolute;
    top: var(--bar-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--edge) 28px;
    max-height: calc(100dvh - var(--bar-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    box-shadow: 0 1px 0 var(--line);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.01em;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .bar.is-open .bar__nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .bar__nav a { min-height: 60px; border-bottom: 1px solid var(--line); }
  .bar__nav .bar__cta {
    margin-top: 24px;
    min-height: 56px;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    border-bottom: 0;
  }
}
/* Without JS (or before main.js has wired the menu) the bar scrolls with the
   page. On narrow screens it sits in the flow above the hero with the menu
   open, so it never covers the headline. */
html:not(.js) .bar { position: absolute; }
@media (max-width: 860px) {
  html:not(.js) .bar { position: relative; background: var(--white); box-shadow: 0 1px 0 var(--line); }
  html:not(.js) .hero__copy { padding-top: 40px; }
  html:not(.js) .bar__inner { height: auto; flex-wrap: wrap; padding-block: 10px; }
  html:not(.js) .bar__nav {
    position: static;
    max-height: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    width: 100%;
    padding: 0 0 12px;
    background: none;
    box-shadow: none;
    font-size: 18px;
  }
  html:not(.js) .bar__toggle { display: none; }
}

/* ------------------------------------------------------------------ hero */
/* Selected B: type on paper, followed by the saved panorama. DOM order
   matches the visual order. No text or navigation overlays the artwork. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 16px 48px;
  align-items: end;
  padding: calc(var(--bar-h) + clamp(48px, 7vw, 104px)) var(--edge) clamp(40px, 4vw, 64px);
}
.hero__title {
  max-width: 12em;
  font-weight: 300;
  font-size: var(--h1);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Each promise on its own line, so a narrow wrap never lands mid sentence. */
.hero__title-line { display: block; }
/* Keep each short phrase intact as the two sentences wrap on phones. */
.hero__phrase { white-space: nowrap; }
.hero__line {
  max-width: 30ch;
  color: var(--ink-soft);
  font-size: var(--body);
  line-height: 1.5;
  text-wrap: pretty;
}
.hero__cta { display: none; margin-top: 14px; justify-self: start; }
.hero__art { display: block; height: clamp(360px, 58vh, 640px); }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 66%; }
.hero :focus-visible { outline-color: var(--green); }
@media (max-width: 860px) {
  .hero__copy { grid-template-columns: 1fr; }
  .hero__cta { display: inline-flex; }
}
@media (max-width: 700px) {
  .hero__copy { padding-top: calc(var(--bar-h) + 40px); }
  .hero__line { max-width: 28ch; }
  .hero__art { height: auto; aspect-ratio: 4 / 5; }
  .hero__art img { object-position: 50% 92%; }
}

@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {
  .hero__copy {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    padding-top: calc(var(--bar-h) + 24px);
    padding-bottom: 32px;
  }
}

/* ------------------------------------------------------------ benefits */
/* Three outcomes on the hero's paper, set like the model steps: a rule,
   an H3 sized term and 16px text. No cards. */
.benefits { padding-top: clamp(48px, 5vw, 72px); }
.benefits__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(32px, 3.4vw, 48px);
}
.benefits__list > div { padding: 22px 0 0; border-top: 1px solid var(--ink); }
.benefits dt {
  font-weight: 400;
  font-size: var(--h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.benefits dd {
  margin-top: 10px;
  max-width: 36ch;
  font-size: 16px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .benefits__list { grid-template-columns: 1fr; row-gap: 32px; }
  .benefits__list > div + div { border-top-color: var(--line); }
}
/* Tablet: a term column and a text column, like the limits ledger. */
@media (min-width: 600px) and (max-width: 860px) {
  .benefits__list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: start; }
  .benefits dd { margin-top: 0; }
}

/* --------------------------------------------------------- the day */

.day {
  padding-block: var(--section) calc(var(--section) * 0.8);
  background: var(--paper);
}
.day__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 48px;
  align-items: end;
}
.day__head .lede { justify-self: end; }
@media (max-width: 860px) {
  .day__head { grid-template-columns: 1fr; row-gap: 20px; }
  .day__head .lede { justify-self: start; }
}
/* Below 360 the heading would break inside "your building"; set the bold
   phrase on its own line, as it already falls from 360 up. */
@media (max-width: 359px) {
  #day-title strong { display: block; }
}

/* The four moments. Without JS every moment is shown in order; main.js turns
   them into tabs with a day line once it has wired the controls. */
.day__tabs { display: none; }
.day[data-ready] .day__tabs { display: block; }
.day__stage { margin-top: clamp(48px, 5vw, 72px); }
.moment + .moment { margin-top: 56px; }
.day[data-ready] .moment + .moment { margin-top: 0; }
.moment[hidden] { display: none; }
.moment__art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--stone);
}
.moment__art img { width: 100%; height: 100%; object-fit: cover; }
.moment__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin-top: 28px;
}
.moment__title {
  font-weight: 400;
  font-size: var(--h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.moment__title time { display: block; font-size: 15px; color: var(--ink-soft); letter-spacing: 0; margin-bottom: 6px; }
.moment__part h4,
.moment__action-label {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}
.moment__part p { font-size: 16px; max-width: 36ch; text-wrap: pretty; }
.moment__part--do p { color: var(--ink); }
/* One existing action, in source order before its art, stays beside the
   selector. The full conditions remain below the unchanged image. */
.moment > .moment__part--do { margin-bottom: 24px; }
.moment > .moment__part--do p { max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .day[data-ready] .moment:not([hidden]) .moment__art img { animation: moment-in 0.6s var(--ease); }
}
@keyframes moment-in { from { opacity: 0.25; } to { opacity: 1; } }

/* The day line: a 05:00 to 21:00 rule with the four moments placed at their
   time; the sun mark follows the selected one. */
.dayline {
  position: relative;
  padding-top: 26px;
}
.dayline__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 1px;
  background: var(--line);
}
.dayline__sun {
  position: absolute;
  top: 3px;
  left: calc(var(--at, 0.1) * 100%);
  width: 15px;
  height: 15px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px var(--paper);
  transition: left 0.5s var(--ease), background-color 0.5s var(--ease);
}
.dayline[data-dark] .dayline__sun { background: var(--ink); }
.dayline__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 12px;
}
.dayline__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
}
.dayline__tab .t { font-size: 15px; color: var(--ink-soft); }
.dayline__tab .l { font-size: 17px; line-height: 1.3; }
.dayline__tab:hover .l { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.dayline__tab[aria-selected="true"] { border-bottom-color: var(--ink); }
.dayline__tab[aria-selected="true"] .l { font-weight: 700; }

@media (max-width: 860px) {
  .moment__body { grid-template-columns: 1fr; row-gap: 18px; }
  .moment__art { aspect-ratio: 4 / 5; }
  .day[data-ready] .day__stage { margin-top: 20px; }
}
@media (max-width: 700px) {
  .dayline__list { column-gap: 6px; }
  .dayline__tab .l { font-size: 15px; }
  .dayline__tab .t { font-size: 14px; }
  /* Keep art inside its focusable panel so the ring sits on paper. */
}

/* Selected B: a vertical day list beside a large image. */
.day[data-ready] .day__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: 48px;
  align-items: start;
}
.day[data-ready] .day__stage { margin-top: 0; }
.day__layout { margin-top: clamp(48px, 5vw, 72px); }
.day[data-ready] .dayline { padding-top: 0; padding-left: 26px; }
.day[data-ready] .dayline__rule { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.day[data-ready] .dayline__sun { left: 0; top: calc(var(--at, 0.1) * 100%); margin: -7px 0 0; transition: top 0.5s var(--ease); }
.day[data-ready] .dayline__list { grid-template-columns: 1fr; row-gap: 4px; }
.day[data-ready] .dayline__tab { min-height: 72px; border-bottom: 1px solid var(--line); }
.day[data-ready] .dayline__tab[aria-selected="true"] { border-bottom-color: var(--ink); }
@media (max-width: 860px) {
  .day[data-ready] .day__layout { grid-template-columns: 1fr; row-gap: 20px; }
  .day[data-ready] .dayline { padding: 26px 0 0; }
  .day[data-ready] .dayline__rule { left: 0; right: 0; top: 10px; bottom: auto; width: auto; height: 1px; }
  .day[data-ready] .dayline__sun { top: 3px; left: calc(var(--at, 0.1) * 100%); margin: 0 0 0 -7px; transition: left 0.5s var(--ease); }
  .day[data-ready] .dayline__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .moment__body { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- the model */

.model {
  padding-block: var(--section);
  background: var(--white);
}
.model__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  column-gap: 56px;
  align-items: start;
  margin-top: clamp(48px, 5vw, 72px);
}
.plan { position: relative; }
.plan__frame { position: relative; aspect-ratio: 7 / 4; background: #1b1b1b; }
.plan__frame img { width: 100%; height: 100%; }
.plan__zones { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan__zones--phone { display: none; }
.plan__zones .z { fill: none; stroke: var(--white); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plan__zones .z--sun { fill: rgba(201, 138, 58, 0.18); stroke: #f0c27e; stroke-width: 2; }
.plan__zones .grid { stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.plan__label {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  padding: 3px 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}
.plan__label--sun { background: #f0c27e; }
/* Label positions in % of the plan frame, from the plan cameras (see SOURCES.md). */
.l-dw { --x: 25.8; --y: 30; }
.l-dc { --x: 25.8; --y: 70.6; }
.l-ds { --x: 62; --y: 70.6; }
.l-di { --x: 52; --y: 52; }
.l-pw { --x: 17.5; --y: 36; }
.l-pc { --x: 17.5; --y: 71.5; }
.l-ps { --x: 62; --y: 71.5; }
.l-pi { --x: 62; --y: 52; }
.plan__label[data-phone] { display: none; }
.plan figcaption { margin-top: 16px; max-width: 60ch; }
.steps { counter-reset: step; }
.step {
  padding: 22px 0 26px;
  border-top: 1px solid var(--ink);
}
.step + .step { border-top-color: var(--line); }
.step h3 {
  font-weight: 400;
  font-size: var(--h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.step p {
  margin-top: 10px;
  font-size: 16px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
@media (max-width: 960px) {
  .model__grid { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 700px) {
  .plan__frame { aspect-ratio: 4 / 5; margin-inline: calc(var(--edge) * -1); }
  .plan__zones--desktop { display: none; }
  .plan__zones--phone { display: block; }
  .plan__label[data-desktop] { display: none; }
  .plan__label[data-phone] { display: block; }
}

/* -------------------------------------------------------- operator limits */

.limits {
  padding-block: var(--section);
  background: var(--night);
  color: var(--white);
}
.limits .lede { color: var(--night-soft); }
.limits__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 48px;
  align-items: end;
}
.limits__head .lede { justify-self: end; }
.ledger { margin-top: clamp(48px, 5vw, 80px); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: 48px;
  padding: 22px 0;
  border-top: 1px solid var(--night-line);
}
.ledger__row:last-child { border-bottom: 1px solid var(--night-line); }
.ledger dt { font-size: var(--body); }
.ledger dd { max-width: 58ch; font-size: 16px; color: var(--night-soft); text-wrap: pretty; }
@media (max-width: 860px) {
  .limits__head { grid-template-columns: 1fr; row-gap: 20px; }
  .limits__head .lede { justify-self: start; }
  .ledger__row { grid-template-columns: 1fr; row-gap: 6px; }
}

/* -------------------------------------------------------- getting started */

.start {
  padding-block: var(--section);
  background: var(--paper);
}
.start__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px;
  align-items: start;
}
.start__lede { margin-top: 20px; }
.start__steps { counter-reset: start; }
.start__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
}
.start__steps li::before {
  counter-increment: start;
  content: counter(start);
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink-soft);
}
.start__steps h3 { font-weight: 400; font-size: var(--h3); line-height: 1.2; letter-spacing: -0.01em; }
.start__steps p { grid-column: 2; margin-top: 8px; font-size: 16px; color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; }

.faq { margin-top: clamp(56px, 6vw, 88px); }
.faq__title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 48px 16px 0;
  font-size: var(--body);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover { color: var(--green-deep); }
.faq__item p {
  max-width: 56ch;
  padding-bottom: 24px;
  font-size: 16px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
@media (max-width: 960px) {
  .start__grid { grid-template-columns: 1fr; row-gap: 40px; }
}

/* ---------------------------------------------------------------- contact */
/* The contact section holds the inquiry form: labels above fields, ink
   rules, the green button and the page's type scale. No cards. */

.contact {
  padding-block: var(--section);
  background: var(--stone);
}
.contact__title {
  max-width: 13em;
  font-weight: 300;
  font-size: clamp(36px, 1.2rem + 3.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.contact__title strong { display: block; font-weight: 700; }
/* Keep the noun phrase together once there is room for it (278px of 280 at 320). */
@media (min-width: 360px) { .contact__keep { white-space: nowrap; } }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px;
  align-items: start;
  margin-top: clamp(32px, 4vw, 56px);
}
.contact__alt {
  margin-top: 20px;
  font-size: 16px;
  color: var(--ink-soft);
}
.contact__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(22, 23, 26, 0.3);
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}
.contact__mail:hover { text-decoration-color: currentColor; }
/* Without JavaScript (or if the form could not start) the form stays out
   and the email link carries the conversation. */
.contact__fallback { font-size: var(--body); }
.js .contact__fallback { display: none; }
html:not(.js) .inquiry,
.contact[data-form-off] .inquiry { display: none; }
.contact[data-form-off] .contact__fallback { display: block; }
/* "Prefer email?" only makes sense next to a working form. */
html:not(.js) .contact__alt,
.contact[data-form-off] .contact__alt { display: none; }

.inquiry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.field { display: flex; flex-direction: column; min-width: 0; }
.field[hidden] { display: none; }
.field--wide { grid-column: 1 / -1; }
.field__label {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
}
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--ink-soft);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.4 var(--font);
  appearance: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field__input:hover { border-color: var(--ink); }
.field__input:focus-visible { outline-offset: 2px; border-color: var(--ink); }
.field__input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__input--area { min-height: 132px; resize: vertical; }
.field__select { position: relative; display: block; }
.field__select select { padding-right: 44px; cursor: pointer; }
.field__select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.field__hint {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-soft);
}
.field__error {
  padding-top: 8px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--error);
}
.field__error:empty { display: none; }

/* The optional questions wait behind one quiet line, so the first view is
   five fields and Send. Closed by default; an error inside opens it. */
.inquiry__more { margin-top: 32px; border-top: 1px solid var(--ink); }
.inquiry__more > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-height: 44px;
  padding: 14px 40px 14px 0;
  font-size: var(--body);
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.inquiry__more > summary::-webkit-details-marker { display: none; }
.inquiry__more > summary span { font-size: 15px; color: var(--ink-soft); }
.inquiry__more > summary::before,
.inquiry__more > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.inquiry__more > summary::after { transform: rotate(90deg); }
.inquiry__more[open] > summary::after { transform: rotate(0deg); }
.inquiry__more > summary:hover { color: var(--green-deep); }
.inquiry__more > fieldset {
  margin: 0;
  padding: 8px 0 8px;
  border: 0;
  min-width: 0;
}

/* Hidden from people and assistive tech; automated senders fill it. */
.inquiry__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.inquiry__trap input { width: 1px; height: 1px; padding: 0; border: 0; }

.inquiry__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 16px;
}
.inquiry .button { border: 0; cursor: pointer; font-family: var(--font); }
.inquiry .button:disabled { cursor: default; }
.inquiry[aria-busy="true"] .button { background: var(--green-deep); }
.inquiry__consent {
  flex: 1 1 18em;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* Inline in the sentence: a 44px target from padding, without stretching
   the line box where the sentence wraps. The ring is drawn inset, hugging
   the word, so it never crosses the line above or below. */
.inquiry__privacy {
  display: inline-block;
  min-width: 44px;
  padding: 12px;
  margin: -12px -12px -12px -8px;
  vertical-align: baseline;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.inquiry__privacy:focus-visible { outline-offset: -10px; }
.inquiry__status:empty,
.inquiry__failure:empty { display: none; }
.inquiry__status { margin-top: 16px; font-size: 16px; color: var(--ink-soft); }
.inquiry__failure {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--error);
  font-size: 16px;
  color: var(--ink);
  max-width: 52ch;
}
.inquiry__failure a { color: var(--ink); text-underline-offset: 5px; overflow-wrap: anywhere; }

.inquiry__done { padding-top: 22px; border-top: 1px solid var(--ink); }
/* Focus lands on the heading so it is announced; nothing here is
   interactive, and no ring frames the confirmation like a card. */
.inquiry__done-title:focus { outline: none; }
.inquiry__done-title {
  font-weight: 300;
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.inquiry__done p { margin-top: 16px; max-width: 46ch; font-size: 16px; color: var(--ink-soft); }
/* Inline in a sentence: a 44px target without stretching the line. */
.inquiry__done .contact__mail { display: inline-block; min-height: 0; padding: 12px 0; margin: -12px 0; }
.inquiry__done strong { color: var(--ink); font-weight: 700; letter-spacing: 0.02em; }

@media (min-width: 961px) {
  .contact__intro { position: sticky; top: calc(var(--bar-h) + 32px); }
}
@media (max-width: 960px) {
  .contact__grid { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 600px) {
  .inquiry__grid { grid-template-columns: 1fr; }
  .inquiry__send .button { width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------- legal */
/* The privacy page: the landing page's paper, wordmark and type scale. */
.legal-bar { display: flex; align-items: center; min-height: var(--bar-h); }
.legal { max-width: calc(var(--wrap) * 0.62 + var(--edge) * 2); padding-block: clamp(40px, 6vw, 88px) var(--section); }
.legal__title {
  font-weight: 300;
  font-size: var(--h1);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.legal > .lede { margin-top: 20px; max-width: 46ch; }
.legal__part { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.legal__part h2 {
  font-weight: 400;
  font-size: var(--h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.legal__part p { margin-top: 10px; max-width: 62ch; font-size: 16px; color: var(--ink-soft); text-wrap: pretty; }
.legal__part .contact__mail { min-height: 0; color: var(--ink); }
.legal__updated { margin-top: 48px; font-size: 15px; color: var(--ink-soft); }

/* ----------------------------------------------------------------- foot */

.foot {
  padding-block: 40px 48px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 15px;
  color: var(--ink-soft);
}
.foot__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 48px;
  row-gap: 16px;
}
.foot__mark { width: 112px; }
.foot__links { display: flex; gap: 24px; }
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 5px;
}
.foot__links a:hover { text-decoration-color: currentColor; }
@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- motion */

/* main.js sets "reveal-ready" only once the observer is running, so a
   blocked or failed script never leaves content hidden. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
}
/* Print everything: every moment of the day, every section. */
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bar { position: absolute; }
  .bar__toggle { display: none !important; }
  .bar__nav { display: none !important; }
  .day__tabs { display: none !important; }
  .day { padding-block: 40px; }
  .day[data-ready] .day__layout { display: block; margin-top: 24px; }
  .moment__art { aspect-ratio: auto; }
  .moment__art img { height: 100mm; object-fit: contain; }
  .moment[hidden] { display: block !important; }
  .day[data-ready] .moment + .moment { margin-top: 40px; }
  .moment { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Contextual guide link, using the existing landing type and spacing. */
.faq__guide { margin-top: 24px; font-size: 16px; }