/* Soltryx Construction's site, version 3: the app's own look.
   Tokens are the app's (Company OS's Neutral greys with Construction's selective Orange), light and dark,
   value for value from its stylesheet at main 6729eaff. Orange appears only on the main button, the current
   place, an open tab's underline and the focus ring. System fonts; no picture from CSS. */

:root {
  --bg: #f6f6f6; --surface: #ffffff; --subtle: #f1f1f1; --nav: #efefef; --line: #dfdfdf;
  --sk: #e3e3e3;
  --ink: #2b2b2b; --muted: #6a6a6a; --secondary: #585858; --field-line: #8a8a8a; --dashed: #c9c9c9;
  --danger: #b42318;
  --action-fill: #f9cc9c; --action-text: #59300a; --action-border: #f0b276; --action-hover: #f5bf88;
  --accent-stroke: #d9782e; --focus: #b85f1c;
  --nav-active-bg: #fbe8d5; --nav-active-ink: #59300a;
  --mark-bg: #e4e4e4; --mark-line: #d8d8d8; --mark-ink: #565656;
  --card-shadow: 0 4px 18px #00000005;
  --float-shadow: 0 18px 50px #00000024, 0 2px 8px #0000000f;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151515; --surface: #1e1e1e; --subtle: #262626; --nav: #191919; --line: #333333;
    --sk: #2f2f2f;
    --ink: #ececec; --muted: #a3a3a3; --secondary: #c4c4c4; --field-line: #7c7c7c; --dashed: #595959;
    --danger: #ff8a80;
    --action-fill: #f2c393; --action-text: #45280c; --action-border: #f2c393; --action-hover: #f7d5b2;
    --accent-stroke: #e8955a; --focus: #eab489;
    --nav-active-bg: #3a2b1f; --nav-active-ink: #f6dcc2;
    --mark-bg: #2c2c2c; --mark-line: #3a3a3a; --mark-ink: #cfcfcf;
    --card-shadow: none;
    --float-shadow: 0 18px 50px #00000099, 0 2px 8px #00000066;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, main:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
img { display: block; max-width: 100%; }
strong { font-weight: 650; }
.wrap { width: 100%; max-width: 75rem; margin-inline: auto; padding-inline: 1.25rem; }
.skip { position: absolute; top: -6rem; left: 1rem; z-index: 100; padding: .75rem 1rem; border-radius: 6px; background: var(--ink); color: var(--surface); }
.skip:focus { top: .75rem; }
.eyebrow { font-size: .72rem; letter-spacing: .11em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
.secondary { color: var(--secondary); }
.section-space { padding-block: 4rem; }
section[id], [id="the-work"] { scroll-margin-top: 4.5rem; }

/* Buttons: the app's main button wears the Orange; a quiet one is outlined */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: .6rem 1.1rem; border: 1px solid var(--action-border); border-radius: 6px; background: var(--action-fill); color: var(--action-text); font: inherit; font-size: .95rem; font-weight: 560; line-height: 1.3; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.button:hover { background: var(--action-hover); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button.ghost:hover { border-color: var(--field-line); }

/* The top bar, as the app's */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.wordmark img { width: 2rem; height: 2rem; }
.wm-words { display: flex; flex-direction: column; line-height: 1.15; }
.wm-name { font-weight: 650; letter-spacing: -.01em; }
.wm-trade { font-size: .75rem; color: var(--muted); }
.header-nav { display: flex; align-items: center; gap: 1.5rem; font-size: .9rem; }
.header-nav a { text-decoration: none; color: var(--secondary); }
.header-nav a:hover { color: var(--ink); }
.desktop-link { display: none; }
.header-nav .signin { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-weight: 540; }
.header-nav .signin:hover { border-color: var(--field-line); }
/* His logo, one file for each look: dark pieces on a light page, light pieces on a dark one; the orange stays. */
.wordmark .mark-dark { display: none; }
@media (prefers-color-scheme: dark) { .wordmark .mark-light { display: none; } .wordmark .mark-dark { display: block; } }

/* The opening */
.hero { padding-block: 3rem 2.5rem; overflow: hidden; }
.hero-text { max-width: 46rem; }
.hero-text .eyebrow { margin-bottom: 1.1rem; }
.hero h1 { font-size: clamp(2.35rem, 7.6vw, 4.25rem); line-height: 1.04; letter-spacing: -.055em; font-weight: 650; text-wrap: balance; }
.lead { margin-top: 1.25rem; font-size: 1.12rem; line-height: 1.55; color: var(--secondary); max-width: 40rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.fine { margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.hero-figure { position: relative; margin-top: 2.75rem; }
.hero-figure figcaption, .place-figure figcaption { margin-top: .9rem; font-size: .8rem; color: var(--muted); }
/* A phone: the words, then the app's drawing starting right under them. The two buttons sit in a bar at the
   screen's foot, as the app's thumb bar does (Ask for early access on the right); it cuts the drawing off, so the page
   plainly goes on, and it stays at the foot until the form, where it comes to rest. */
.thumb-bar { display: none; }
@media (max-width: 39.99rem) {
  .hero { padding-block: 2rem 1.5rem; }
  .hero h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .hero-actions { display: none; }
  .hero-figure { margin-top: 1.75rem; }
  .thumb-bar { position: sticky; bottom: 0; z-index: 40; display: flex; gap: .55rem; padding: .7rem 1.25rem calc(.85rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .thumb-bar .button { flex: 1 1 auto; padding-inline: .75rem; font-size: .875rem; white-space: nowrap; }
  .thumb-bar .button.ghost { flex: 0 1 auto; }
}
@media (max-width: 22.2rem) {
  .thumb-bar .button.ghost { display: none; }
}

/* Drawn app screens: the app's frame, cards, pills and tables, at its own sizes */
.ui { font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--float-shadow); overflow: hidden; text-align: left; }
.ui p { margin: 0; }
.ui strong { font-weight: 650; }
.ui small { display: block; font-size: .78em; color: var(--muted); }
.ui-desk { display: none; }
/* The drawings show each screen's layout: grey bars stand in for secondary words, and only what matters is in words
   (his words of 12:20:52, and his pick of 12:28:52). */
.sk { display: block; height: .58em; border-radius: 999px; background: var(--sk); margin: .3em 0; }
.sk.in { display: inline-block; vertical-align: middle; margin: 0; }
.sk.w35 { width: 35%; } .sk.w45 { width: 45%; } .sk.w55 { width: 55%; } .sk.w65 { width: 65%; } .sk.w7em { width: 7em; } .sk.w9em { width: 9em; }
.ui-places li .sk { width: 60%; height: .7em; margin: .35em 0; }
.ui-project .sk { width: 9em; height: .7em; }
.ui-top .sk { width: 11em; }
.ui-tabs { align-items: center; }
.ui-tabs .sk { width: 4em; height: .6em; }
.ui-row .sk { width: 8em; }
.ui-tbl td .sk { width: 7em; margin: 0; }
.ui-blocker .sk { margin-top: .55em; }
.ui-list li .sk { margin: .25em 0; }
.ui-side { display: flex; flex-direction: column; gap: 1rem; padding: 1.1em .8em .8em; background: var(--nav); border-right: 1px solid var(--line); }
.ui-project { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: .6em; align-items: center; padding: .5em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.ui-project strong { display: block; font-size: .93em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mark, .ui-avatar { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 6px; background: var(--mark-bg); border: 1px solid var(--mark-line); color: var(--mark-ink); font-size: .8em; font-weight: 650; flex: none; }
.ui-avatar { border-radius: 50%; border: 0; }
.ui-places { display: grid; gap: .2em; }
.ui-places li { position: relative; padding: .55em .7em; border-radius: 6px; color: var(--secondary); }
.ui-places strong { display: block; font-weight: 570; line-height: 1.35; }
.ui-places .here { background: var(--nav-active-bg); color: var(--nav-active-ink); }
.ui-places .here small { color: inherit; opacity: .8; }
.ui-count { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border: 1px solid var(--ink); border-radius: 999px; font-size: .75em; font-weight: 650; color: var(--ink); }
.ui-places .ui-count { position: absolute; right: .7em; top: .8em; background: var(--surface); }
.ui-account { margin-top: auto; display: flex; align-items: center; gap: .6em; padding-top: .7em; border-top: 1px solid var(--line); font-size: .85em; }
.ui-account strong { display: block; }
.ui-main { display: flex; flex-direction: column; min-width: 0; }
.ui-top { display: flex; align-items: center; gap: .7em; min-height: 3.6em; padding: 0 1.4em; background: var(--surface); border-bottom: 1px solid var(--line); font-size: .9em; }
.ui-crumbs { color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-crumbs span { color: var(--muted); padding-inline: .3em; }
.ui-crumbs strong { color: var(--ink); font-weight: 600; }
.ui-page { display: flex; flex-direction: column; gap: 1em; padding: 1.5em 1.7em 1.8em; }
.ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.ui-title { font-size: 2.3em; line-height: 1.1; letter-spacing: -.055em; font-weight: 650; }
.ui-title-sm { font-size: 1.55em; line-height: 1.15; letter-spacing: -.05em; font-weight: 650; }
.ui-sub { margin-top: .2em; color: var(--secondary); }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6em; padding: 0 1em; border: 1px solid var(--action-border); border-radius: 6px; background: var(--action-fill); color: var(--action-text); font-weight: 560; white-space: nowrap; }
.ui-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.ui-stake { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: .75em 1em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: 24em; }
.ui-stake span { color: var(--muted); font-size: .9em; }
.ui-stake strong { font-size: 1.3em; letter-spacing: -.02em; }
.ui-work { display: grid; gap: .7em; }
.ui-card { display: flex; flex-direction: column; gap: .35em; min-width: 0; padding: 1em 1.15em; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--card-shadow); }
.ui-phase { font-size: .7em; letter-spacing: .1em; font-weight: 730; text-transform: uppercase; }
.ui-what { font-size: 1.07em; line-height: 1.35; letter-spacing: -.02em; font-weight: 650; }
.ui-crew, .ui-small { font-size: .86em; color: var(--secondary); }
.ui-causes { font-size: .86em; color: var(--muted); }
.ui-causes li::before { content: "·"; margin-right: .5em; }
.ui-flag { display: flex; justify-content: space-between; gap: 1em; align-items: flex-start; margin-top: .45em; padding: .8em .95em; border-radius: 8px; background: var(--subtle); }
.ui-flag-text { font-weight: 650; line-height: 1.4; }
.ui-flag strong { white-space: nowrap; }

/* Status: an outlined pill with a mark and words, never colour alone (the app's chips) */
.chip { display: inline-flex; align-items: center; gap: .3em; height: 1.7em; padding: 0 .6em; border: 1px solid var(--line); border-radius: 999px; font-size: .78em; font-weight: 650; line-height: 1; white-space: nowrap; color: var(--ink); background: transparent; vertical-align: middle; }
.chip.nr { border-color: var(--danger); color: var(--danger); }
.chip.nk { border-style: dashed; border-color: var(--dashed); color: var(--secondary); font-weight: 550; }
.chip.ok { border-color: var(--ink); }

/* The phone */
.ui-phone { position: relative; width: 100%; max-width: 22rem; margin-inline: auto; border-radius: 26px; display: flex; flex-direction: column; }
.ui-phone .ui-top { padding: 0 1em; min-height: 3.4em; }
.ui-phone .ui-top strong { font-weight: 600; }
.ui-burger { display: grid; gap: 3px; width: 1.1em; }
.ui-burger i { display: block; height: 2px; border-radius: 2px; background: var(--ink); }
.ui-phone .ui-page { padding: 1.2em 1.2em 1em; gap: .9em; }
.ui-phone .ui-title { font-size: 2em; }
.ui-group { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: .75em; }
.ui-group-h { display: flex; align-items: center; justify-content: space-between; font-weight: 650; margin-bottom: .3em; }
.ui-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .8em; padding: .55em 0; }
.ui-row + .ui-row { border-top: 1px solid var(--line); }
.ui-row-h { font-weight: 650; line-height: 1.35; }
.ui-row > strong { white-space: nowrap; }
.ui-chips { display: flex; flex-direction: column; align-items: flex-end; gap: .3em; }
.ui-thumb { display: flex; gap: .55em; padding: .75em 1em .95em; background: var(--surface); border-top: 1px solid var(--line); }
.ui-thumb .ui-btn { flex: 1; min-height: 3.2em; font-size: 1.02em; }
.ui-thumb .ui-btn.ghost { flex: 0 1 auto; }

/* Panels: one page's main card, with its underlined tabs */
.ui-panel { background: var(--surface); padding: 1.2em 1.3em 1.3em; display: flex; flex-direction: column; gap: .9em; }
.ui-panel-head { display: flex; flex-direction: column; gap: .5em; }
.ui-tabs { display: flex; gap: 1.3em; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.ui-tabs span { padding: .3em 1px .6em; border-bottom: 2px solid transparent; color: var(--muted); font-size: .92em; }
.ui-tabs .here { color: var(--ink); font-weight: 620; border-bottom-color: var(--accent-stroke); }
.ui-section-h { padding: 0 .3em .5em; border-bottom: 1px solid var(--line); font-size: .72em; letter-spacing: .11em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
.ui-blocker { display: flex; flex-direction: column; gap: .5em; padding: .85em 1em; border-radius: 8px; background: var(--subtle); }
.ui-blocker > p { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.ui-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2em 1em; font-size: .88em; }
.ui-facts dt { color: var(--muted); }
.ui-filters { display: flex; flex-wrap: wrap; gap: .4em; }
.ui-filters span { display: inline-flex; align-items: center; min-height: 2.1em; padding: 0 .8em; border: 1px solid var(--line); border-radius: 999px; color: var(--secondary); font-size: .85em; }
.ui-filters .here { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.ui-list li { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .6em .2em; border-top: 1px solid var(--line); }
.ui-list li:first-child { border-top: 0; }
.ui-file { min-width: 0; font-weight: 550; text-decoration: underline; text-decoration-color: var(--dashed); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ui-file::before { content: ""; display: inline-block; width: .75em; height: .95em; margin-right: .55em; vertical-align: -.1em; border: 1.5px solid var(--muted); border-radius: 2px; }
.ui-people li { justify-content: flex-start; }
.ui-people li > span:nth-child(2) { flex: 1; min-width: 0; }
.ui-people strong { display: block; }
.ui-sections { display: grid; gap: .55em; }
.ui-sections dt { font-size: .7em; letter-spacing: .1em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
.ui-sections dd { padding-bottom: .55em; border-bottom: 1px solid var(--line); }
.ui-sections dd:last-child { border-bottom: 0; }
.ui-sections .ui-small { display: block; margin-top: .2em; }
.ui-none { color: var(--muted); font-weight: 500; }
.ui-stack { display: flex; flex-direction: column; gap: .9em; }
.ui-stack .ui-title + .ui-small { margin-top: -.6em; }
.ui-photos-h { font-size: .7em; letter-spacing: .1em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
/* The update's three photos: the first large, the other two stacked beside it */
.ui-photos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .45em; margin-top: -.4em; }
.ui-photos li:first-child { grid-row: span 2; }
.ui-photos img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--subtle); color: var(--muted); font-size: .7em; overflow: hidden; }
.ui-photos li:first-child img { aspect-ratio: auto; }
.ui-stats, .ui-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .55em; }
.ui-stat { display: flex; flex-direction: column; gap: .1em; padding: .75em .9em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ui-stat > span { font-size: .8em; color: var(--muted); }
.ui-stat > strong { font-size: 1.28em; letter-spacing: -.02em; line-height: 1.25; }
.ui-stat > strong.ui-none { font-size: .95em; letter-spacing: 0; }
.ui-stat.is-lead { background: var(--action-fill); border-color: var(--action-border); color: var(--action-text); }
.ui-stat.is-lead > span { color: inherit; opacity: .8; }
.ui-stat.quiet { background: var(--subtle); border-color: transparent; }
.ui-tbl { width: 100%; border-collapse: collapse; font-size: .9em; }
.ui-tbl th { text-align: left; padding: .45em .5em; border-bottom: 1px solid var(--line); font-size: .72em; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ui-tbl td { padding: .6em .5em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ui-tbl tbody tr:last-child td { border-bottom: 0; }
.ui-tbl .num { text-align: right; }
.ui-tbl td:last-child { font-weight: 650; }
@media (max-width: 39.99rem) { .ui-tbl th:nth-child(3), .ui-tbl td:nth-child(3), .ui-tbl th:nth-child(4), .ui-tbl td:nth-child(4) { display: none; } }

/* Who it's for */
.sizes { padding-block: 1rem 3rem; }
.sizes .eyebrow { margin-bottom: 1rem; }
/* The size picker (his words of 12:48:20): three radios, each card and pill a label for one. The radios sit out of sight
   but fixed in the viewport, outside the animated cards, so a pill further down picks one without the page jumping. */
.sizes-ask { margin: .4rem 0 1rem; font-size: 1.05rem; color: var(--ink); }
.size { position: relative; display: flex; flex-direction: column; gap: .55rem; cursor: pointer; }
.size-inputs input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.size-h { font-size: 1.1rem; letter-spacing: -.02em; font-weight: 650; color: var(--ink); }
.size-p { color: var(--secondary); }
.size-pick { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .35rem; font-size: .85rem; font-weight: 600; color: var(--secondary); }
.size-pick i { width: 1rem; height: 1rem; border: 1.5px solid var(--field-line); border-radius: 999px; }
.pick-yes { display: none; }
.size:hover { border-color: var(--field-line); }
.lead-in:has(#size-small:checked) .size[for="size-small"] { border-color: var(--accent-stroke); background: var(--nav-active-bg); }
.lead-in:has(#size-small:checked) .size[for="size-small"] .size-pick { color: var(--nav-active-ink); }
.lead-in:has(#size-small:checked) .size[for="size-small"] .size-pick i { border: 5px solid var(--accent-stroke); }
.lead-in:has(#size-small:checked) .size[for="size-small"] .pick-no { display: none; }
.lead-in:has(#size-small:checked) .size[for="size-small"] .pick-yes { display: inline; }
.lead-in:has(#size-small:focus-visible) .size[for="size-small"] { outline: 3px solid var(--focus); outline-offset: 2px; }
.lead-in:has(#size-mid:checked) .size[for="size-mid"] { border-color: var(--accent-stroke); background: var(--nav-active-bg); }
.lead-in:has(#size-mid:checked) .size[for="size-mid"] .size-pick { color: var(--nav-active-ink); }
.lead-in:has(#size-mid:checked) .size[for="size-mid"] .size-pick i { border: 5px solid var(--accent-stroke); }
.lead-in:has(#size-mid:checked) .size[for="size-mid"] .pick-no { display: none; }
.lead-in:has(#size-mid:checked) .size[for="size-mid"] .pick-yes { display: inline; }
.lead-in:has(#size-mid:focus-visible) .size[for="size-mid"] { outline: 3px solid var(--focus); outline-offset: 2px; }
.lead-in:has(#size-large:checked) .size[for="size-large"] { border-color: var(--accent-stroke); background: var(--nav-active-bg); }
.lead-in:has(#size-large:checked) .size[for="size-large"] .size-pick { color: var(--nav-active-ink); }
.lead-in:has(#size-large:checked) .size[for="size-large"] .size-pick i { border: 5px solid var(--accent-stroke); }
.lead-in:has(#size-large:checked) .size[for="size-large"] .pick-no { display: none; }
.lead-in:has(#size-large:checked) .size[for="size-large"] .pick-yes { display: inline; }
.lead-in:has(#size-large:focus-visible) .size[for="size-large"] { outline: 3px solid var(--focus); outline-offset: 2px; }
@keyframes size-pop { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .size { animation: size-pop linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  .size:nth-child(2) { animation-range: entry 10% entry 100%; }
  .size:nth-child(3) { animation-range: entry 20% cover 40%; }
}
.size-grid { display: grid; gap: .75rem; }
.size { padding: 1.15rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--card-shadow); }

/* What it does: the app's sidebar beside its places */
/* Fitted to the pick: the places and the rail follow the size's order (his words of 12:48:20; no line saying so, by his
   words of 13:03:29, since the pick sits just above). */
.places { display: flex; flex-direction: column; }
#tomorrow, .r-tomorrow { order: 1; } #site, .r-site { order: 2; } #files, .r-files { order: 3; } #money, .r-money { order: 4; } #kinds, .r-kinds { order: 5; } #contacts, .r-contacts { order: 6; } #people, .r-people { order: 7; } #planned, .r-planned { order: 8; } 
.lead-in:has(#size-small:checked) :is(#money, .r-money) { order: 3; } .lead-in:has(#size-small:checked) :is(#files, .r-files) { order: 4; }
.lead-in:has(#size-large:checked) :is(#money, .r-money) { order: 1; } .lead-in:has(#size-large:checked) :is(#kinds, .r-kinds) { order: 2; } .lead-in:has(#size-large:checked) :is(#people, .r-people) { order: 3; } .lead-in:has(#size-large:checked) :is(#tomorrow, .r-tomorrow) { order: 4; } .lead-in:has(#size-large:checked) :is(#files, .r-files) { order: 5; } .lead-in:has(#size-large:checked) :is(#site, .r-site) { order: 6; } .lead-in:has(#size-large:checked) :is(#contacts, .r-contacts) { order: 7; } .lead-in:has(#size-large:checked) :is(#planned, .r-planned) { order: 8; } 
.tour { border-top: 1px solid var(--line); background: var(--bg); }
.rail { padding-block: 1.25rem .25rem; }
.rail-h { display: none; }
.rail ul { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .5rem; }
.rail ul::-webkit-scrollbar { display: none; }
.rail a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--secondary); font-size: .88rem; white-space: nowrap; text-decoration: none; }
.rail a strong { font-weight: 560; }
.rail a small { display: none; }
.rail a:hover { color: var(--ink); border-color: var(--field-line); }
.place { padding-block: 2.75rem; border-top: 1px solid var(--line); display: grid; gap: 1.75rem; align-content: start; }
#tomorrow, .lead-in:has(#size-large:checked) #money { border-top: 0; }
.lead-in:has(#size-large:checked) #tomorrow { border-top: 1px solid var(--line); }
.place-copy { max-width: 38rem; }
.place-copy .eyebrow { margin-bottom: .6rem; }
.place h2, .advice h2, .talk h2, .price h2 { font-size: clamp(1.75rem, 4.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.05em; font-weight: 650; margin-bottom: 1rem; text-wrap: balance; }
.place-copy p + p { margin-top: .7rem; }
.place-copy p { color: var(--ink); }
.place-copy .secondary { color: var(--secondary); font-size: .95rem; }
.place-figure { min-width: 0; }

.changes { grid-column: 1 / -1; padding-top: 1.75rem; border-top: 1px dashed var(--dashed); }
.changes-h { font-size: 1.3rem; letter-spacing: -.035em; font-weight: 650; margin-bottom: 1rem; }
.steps { display: grid; gap: .75rem; counter-reset: step; }
.steps li { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--card-shadow); }
.step-label { font-size: .7rem; letter-spacing: .1em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
.steps h4 { font-size: 1.15rem; letter-spacing: -.03em; font-weight: 650; }
.steps p { font-size: .95rem; }
.steps .secondary { font-size: .88rem; }

.access-grid { display: grid; gap: .75rem; }
.access-grid .ui-card, .advice-copy .ui-card { font-size: 1rem; padding: 1.15rem 1.25rem; gap: .4rem; }
.access-grid h3, .advice-copy h3, .planned-list h3 { font-size: 1.05rem; letter-spacing: -.02em; font-weight: 650; }
.access-grid p, .advice-copy p, .planned-list p { color: var(--secondary); font-size: .95rem; }
.planned-list { display: grid; gap: .75rem; }
.planned-list li { display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.25rem; border: 1px dashed var(--dashed); border-radius: 8px; background: var(--bg); }

/* Advice, price, the form */
.advice { border-top: 1px solid var(--line); background: var(--surface); }
.advice-grid { display: grid; gap: 1.75rem; }
.advice-grid > div:first-child p { color: var(--secondary); }
.advice .eyebrow { margin-bottom: .6rem; }
.advice-copy { display: grid; gap: .75rem; }
.advice-copy .ui-card { background: var(--bg); box-shadow: none; }
.price { border-top: 1px solid var(--line); background: var(--surface); }
.price-grid { display: grid; gap: 2rem; }
.price-copy { max-width: 36rem; }
.price-copy .eyebrow { margin-bottom: .6rem; }
.price-copy p + p { margin-top: .7rem; }
.price-copy .secondary { font-size: .95rem; }
.price-copy .button { margin-top: 1.5rem; }
.price-card { align-self: start; padding: 1.25rem; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.price-card-h { padding: 0 .3rem .6rem; border-bottom: 1px solid var(--line); font-size: .72rem; letter-spacing: .11em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
.price-steps li { display: flex; align-items: flex-start; gap: .85rem; padding: .9rem .3rem; border-top: 1px solid var(--line); }
.price-steps li:first-child { border-top: 0; }
.price-steps p { padding-top: .1rem; }
.price-no { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .8rem; font-weight: 650; }
.talk { border-top: 1px solid var(--line); }
.talk-grid { display: grid; gap: 2rem; }
.talk-intro .eyebrow { margin-bottom: .6rem; }
.talk-intro p { color: var(--secondary); max-width: 30rem; }
.reply-note { margin-top: .7rem; }
.talk-form { display: grid; gap: 1rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--card-shadow); }
.field { display: grid; gap: .35rem; min-width: 0; }
.field label { font-size: .9rem; font-weight: 550; }
.optional { color: var(--muted); font-weight: 400; }
.talk-form input, .talk-form select, .talk-form textarea { width: 100%; min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--field-line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.talk-form select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: linear-gradient(45deg, transparent 50%, var(--secondary) 50%), linear-gradient(135deg, var(--secondary) 50%, transparent 50%); background-position: right 1.25rem center, right .9rem center; background-size: .35rem .35rem; background-repeat: no-repeat; }
.talk-form textarea { resize: vertical; line-height: 1.55; }
.hint { font-size: .82rem; color: var(--muted); }
/* The form follows the size pick (his words of 12:56:49): Kind of business shows the pick (it isn't a form field, so
   nothing new is sent), and Company size shows only the sizes that fit it. */
.field-h, .crew legend { font-size: .9rem; font-weight: 550; padding: 0; }
.crew { border: 0; margin: 0; padding: 0; }
.crew legend { margin-bottom: .35rem; }
.kind-pills, .crew-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.kind-pills label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--secondary); font-size: .85rem; font-weight: 500; cursor: pointer; }
.kind-pills label:hover { border-color: var(--field-line); color: var(--ink); }
/* One row of three (his words of 13:52:43): each pill takes its words' width, and on a narrow screen its words wrap inside it. */
.kind-pills { flex-wrap: nowrap; }
.kind-pills label { flex: 1 1 auto; justify-content: center; text-align: center; padding: .45rem .55rem; line-height: 1.25; border-radius: 10px; }
@media (min-width: 60rem) { .kind-pills label { padding: .4rem .75rem; border-radius: 999px; } }
body:has(#size-small:checked) .kind-pills [for="size-small"], body:has(#size-mid:checked) .kind-pills [for="size-mid"],
body:has(#size-large:checked) .kind-pills [for="size-large"] { border-color: var(--accent-stroke); background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 600; }
.crew-opt { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--field-line); border-radius: 8px; font-size: .9rem; font-weight: 500; cursor: pointer; }
.talk-form .crew-opt input { width: 1.05rem; height: 1.05rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent-stroke); }
.crew-opt:has(input:checked) { border-color: var(--accent-stroke); background: var(--nav-active-bg); color: var(--nav-active-ink); }
.crew-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
body:has(#size-small:checked) .crew-opt:not(.c-small), body:has(#size-mid:checked) .crew-opt:not(.c-mid),
body:has(#size-large:checked) .crew-opt:not(.c-large) { display: none; }
.hint a { color: var(--ink); overflow-wrap: anywhere; }
/* Less between the message and Send (his words of 13:12:28): Turnstile shows only when Cloudflare needs the visitor to act;
   it shares a row with Legal's notice, the line for when it can't load sits under Send, and that line goes once it has loaded.
   Legal's notice keeps its words and its place, directly above Send in the form's body text size (SNIPPETS part 1). */
.spam-check { gap: .75rem; }
.spam-check:has(.cf-turnstile:empty) { gap: 0; }
.talk-form:has(.cf-turnstile:not(:empty)) .spam-line { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { font-size: .82rem; color: var(--secondary); }
.form-notice a { color: var(--ink); }
.button.submit { width: 100%; font-size: 1rem; }

/* The foot (his words of 2026-10-20 14:44:49, "make the footer look better"): the mark with the no-tracking line, two
   columns of links and the contact line, then Legal's line on a row of its own. Legal's words (SNIPPETS parts 2 and 5)
   are unchanged. */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); padding-block: 3rem 2rem; font-size: .88rem; color: var(--secondary); }
.site-foot a { color: var(--ink); }
.foot-top { display: grid; gap: 2.25rem; }
.foot-quiet { margin-top: 1rem; color: var(--muted); }
.foot-quiet span { display: block; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.foot-h { margin-bottom: .5rem; font-size: .72rem; letter-spacing: .11em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--secondary); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-contact p { max-width: 22rem; line-height: 1.6; }
.legal-line { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.6; color: var(--muted); }
.legal-line a { color: var(--secondary); }
@media (min-width: 60rem) {
  .site-foot { padding-block: 4rem 2.25rem; }
  .foot-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; }
  .foot-col a { min-height: 2rem; }
}

/* The short pages: thanks, the refusal, the 404 */
.short { padding-block: 4rem 5rem; min-height: 55vh; max-width: 44rem; }
.short h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 650; margin-bottom: 1.25rem; }
.short h1::before { content: ""; display: block; width: 2.25rem; height: 3px; margin-bottom: 1.5rem; border-radius: 2px; background: var(--accent-stroke); }
.short p { max-width: 38rem; color: var(--secondary); overflow-wrap: anywhere; }
.short p + p { margin-top: .8rem; }
.short a { color: var(--ink); }
.short > p:last-child { margin-top: 1.75rem; }

/* Legal's pages: their words as written, in the app's reading look */
.legal { max-width: 48rem; padding-block: 3rem 4rem; overflow-wrap: anywhere; }
.legal h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 650; margin-bottom: 1.25rem; }
.legal h1 + p { font-size: .85rem; color: var(--muted); padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.legal h2 { font-size: 1.3rem; letter-spacing: -.035em; line-height: 1.3; font-weight: 650; margin: 2.25rem 0 .8rem; }
.legal p { margin-top: .8rem; }
.legal p, .legal li { font-size: 1rem; color: var(--ink); }
.legal ul { padding-left: 1.25rem; margin: .9rem 0; list-style: disc; }
.legal li { margin-bottom: .5rem; }
.legal li::marker { color: var(--muted); }
.legal a { color: var(--ink); }
.table-wrap { margin-block: 1.25rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .75rem .8rem; border-bottom: 1px solid var(--line); }
.legal th { font-size: .72rem; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.legal tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 47.99rem) {
  .legal thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .legal table { border: 0; background: transparent; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal tr { border: 1px solid var(--line); border-radius: 8px; margin-bottom: .9rem; background: var(--surface); }
  .legal td { border-bottom: 1px solid var(--line); }
  .legal td:last-child { border-bottom: 0; }
  .legal td::before { content: attr(data-label); display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .25rem; }
}

/* Motion: the drawn screens rise in once; none for reduced motion */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-text { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.hero-figure .ui { animation: rise .8s cubic-bezier(.2, .7, .2, 1) .12s both; }
.hero-figure .ui-phone { animation-delay: .28s; }
.size, .steps li, .access-grid .ui-card, .planned-list li { transition: border-color .18s ease, transform .18s ease; }
@media (hover: hover) { .size:hover, .steps li:hover, .access-grid .ui-card:hover { border-color: var(--field-line); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The rail's lit place and the house behind it switch, without motion, so their scroll-driven animations stay. */
  *:not(.rail a):not(.tour-bg img), *::before, *::after { animation: none !important; transition: none !important; }
}

/* 640 px and up */
@media (min-width: 40rem) {
  .wrap { padding-inline: 2rem; }
  .size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .access-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planned-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-wide { grid-column: 1 / -1; }
}

/* What it does: one made-up house, drawn as its structure, goes up behind the section as you scroll, a phase for each
   place (his words of 12:02:00 and 12:12:52; his go of 12:36:34). Our own drawings (scripts/phases.py), decorative.
   Each place is "on" while it crosses a line 35% down the screen; the same line lights the rail on a desk. */
.tour { position: relative; isolation: isolate; }
/* A layer the section's full height, with the house pinned in it: it stays while you're in the section and leaves
   with its bottom edge, as the rail does (his words of 12:42:35). */
.tour-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tour-bg-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tour-bg img { position: absolute; right: -42vw; top: 60%; width: 120vw; max-width: none; height: auto; translate: 0 -50%; opacity: 0; --ph: .24; }
/* The building follows the pick: a kitchen for small builders and trades, the house for midsize (and before a pick),
   apartments for large builders and developers (his words of 12:48:20). Hidden ones never load. */
.tour-bg .b-kitchen, .tour-bg .b-apartments { display: none; }
.lead-in:has(#size-small:checked) .tour-bg .b-house, .lead-in:has(#size-large:checked) .tour-bg .b-house { display: none; }
.lead-in:has(#size-small:checked) .tour-bg .b-kitchen, .lead-in:has(#size-large:checked) .tour-bg .b-apartments { display: block; }
@media (prefers-color-scheme: dark) { .tour-bg img { --ph: .2; filter: invert(1) hue-rotate(180deg) brightness(1.08); } }
@media (min-width: 60rem) { .tour-bg img { right: -9vw; top: 55%; width: min(56vw, 820px); --ph: .3; } }
@media (min-width: 60rem) and (prefers-color-scheme: dark) { .tour-bg img { --ph: .26; } }
@media (min-width: 75rem) { .tour-bg img { --ph: .5; } }
@media (min-width: 75rem) and (prefers-color-scheme: dark) { .tour-bg img { --ph: .38; } }
@keyframes ph-on { from, to { opacity: var(--ph); } }
@supports (animation-timeline: view()) {
  .tour { timeline-scope: --at-tomorrow, --at-site, --at-files, --at-money, --at-kinds, --at-contacts, --at-people, --at-planned; }
  #tomorrow { view-timeline-name: --at-tomorrow; } #site { view-timeline-name: --at-site; }
  #files { view-timeline-name: --at-files; } #money { view-timeline-name: --at-money; }
  #kinds { view-timeline-name: --at-kinds; } #contacts { view-timeline-name: --at-contacts; }
  #people { view-timeline-name: --at-people; } #planned { view-timeline-name: --at-planned; }
  .place { view-timeline-inset: 0; }
  .tour-bg img { animation-name: ph-on; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: none; animation-range: cover 65vh cover calc(100% - 35vh); }
  .tour-bg .b-house.s1 { animation-timeline: --at-tomorrow; } .tour-bg .b-house.s2 { animation-timeline: --at-site; } .tour-bg .b-house.s3 { animation-timeline: --at-files; } .tour-bg .b-house.s4 { animation-timeline: --at-money; }
  .tour-bg .b-house.s5 { animation-timeline: --at-kinds; } .tour-bg .b-house.s6 { animation-timeline: --at-contacts; } .tour-bg .b-house.s7 { animation-timeline: --at-people; } .tour-bg .b-house.s8 { animation-timeline: --at-planned; }
  .tour-bg .b-kitchen.s1 { animation-timeline: --at-tomorrow; } .tour-bg .b-kitchen.s2 { animation-timeline: --at-site; } .tour-bg .b-kitchen.s3 { animation-timeline: --at-money; } .tour-bg .b-kitchen.s4 { animation-timeline: --at-files; }
  .tour-bg .b-kitchen.s5 { animation-timeline: --at-kinds; } .tour-bg .b-kitchen.s6 { animation-timeline: --at-contacts; } .tour-bg .b-kitchen.s7 { animation-timeline: --at-people; } .tour-bg .b-kitchen.s8 { animation-timeline: --at-planned; }
  .tour-bg .b-apartments.s1 { animation-timeline: --at-money; } .tour-bg .b-apartments.s2 { animation-timeline: --at-kinds; } .tour-bg .b-apartments.s3 { animation-timeline: --at-people; } .tour-bg .b-apartments.s4 { animation-timeline: --at-tomorrow; }
  .tour-bg .b-apartments.s5 { animation-timeline: --at-files; } .tour-bg .b-apartments.s6 { animation-timeline: --at-site; } .tour-bg .b-apartments.s7 { animation-timeline: --at-contacts; } .tour-bg .b-apartments.s8 { animation-timeline: --at-planned; }
  /* The finished building stays on past the last place's line, until the section has gone. */
  .tour-bg .s8 { animation-range: cover 65vh cover 100%; }
}
/* Layer by layer (his words of 13:07:02): through each place the next phase rises from the ground up over the last,
   from the drawing's base to its top, with a soft edge, and is whole 60% of the way through; no extra files, only two masks that follow the scroll. */
@keyframes ph-in {
  0% { opacity: var(--ph); -webkit-mask-image: linear-gradient(to top, #000 47.5%, transparent 52.5%); mask-image: linear-gradient(to top, #000 47.5%, transparent 52.5%); -webkit-mask-position: 0 0%; mask-position: 0 0%; }
  60%, 100% { opacity: var(--ph); -webkit-mask-image: linear-gradient(to top, #000 47.5%, transparent 52.5%); mask-image: linear-gradient(to top, #000 47.5%, transparent 52.5%); -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}
@keyframes ph-out {
  0% { opacity: var(--ph); -webkit-mask-image: linear-gradient(to top, transparent 47.5%, #000 52.5%); mask-image: linear-gradient(to top, transparent 47.5%, #000 52.5%); -webkit-mask-position: 0 0%; mask-position: 0 0%; }
  60%, 100% { opacity: var(--ph); -webkit-mask-image: linear-gradient(to top, transparent 47.5%, #000 52.5%); mask-image: linear-gradient(to top, transparent 47.5%, #000 52.5%); -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tour-bg img { -webkit-mask-size: 100% 204%; mask-size: 100% 204%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      animation-name: ph-in, ph-out; animation-duration: auto, auto; animation-timing-function: linear, linear; animation-fill-mode: none, none; animation-range: cover 65vh cover calc(100% - 35vh), cover 65vh cover calc(100% - 35vh); }
    .tour-bg .b-house.s1 { animation-timeline: --at-tomorrow, --at-site; } .tour-bg .b-house.s2 { animation-timeline: --at-site, --at-files; } .tour-bg .b-house.s3 { animation-timeline: --at-files, --at-money; } .tour-bg .b-house.s4 { animation-timeline: --at-money, --at-kinds; }
    .tour-bg .b-house.s5 { animation-timeline: --at-kinds, --at-contacts; } .tour-bg .b-house.s6 { animation-timeline: --at-contacts, --at-people; } .tour-bg .b-house.s7 { animation-timeline: --at-people, --at-planned; }
    .tour-bg .b-kitchen.s1 { animation-timeline: --at-tomorrow, --at-site; } .tour-bg .b-kitchen.s2 { animation-timeline: --at-site, --at-money; } .tour-bg .b-kitchen.s3 { animation-timeline: --at-money, --at-files; } .tour-bg .b-kitchen.s4 { animation-timeline: --at-files, --at-kinds; }
    .tour-bg .b-kitchen.s5 { animation-timeline: --at-kinds, --at-contacts; } .tour-bg .b-kitchen.s6 { animation-timeline: --at-contacts, --at-people; } .tour-bg .b-kitchen.s7 { animation-timeline: --at-people, --at-planned; }
    .tour-bg .b-apartments.s1 { animation-timeline: --at-money, --at-kinds; } .tour-bg .b-apartments.s2 { animation-timeline: --at-kinds, --at-people; } .tour-bg .b-apartments.s3 { animation-timeline: --at-people, --at-tomorrow; } .tour-bg .b-apartments.s4 { animation-timeline: --at-tomorrow, --at-files; }
    .tour-bg .b-apartments.s5 { animation-timeline: --at-files, --at-site; } .tour-bg .b-apartments.s6 { animation-timeline: --at-site, --at-contacts; } .tour-bg .b-apartments.s7 { animation-timeline: --at-contacts, --at-planned; }
    .tour-bg .s8 { animation-name: ph-in; animation-timeline: --at-planned; animation-range: cover 65vh cover 100%; }
  }
}
/* Without scroll-driven animations (Firefox today): the finished house, still. */
@supports not (animation-timeline: view()) { .tour-bg .s6 { opacity: var(--ph); } }

@property --rail-on { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes rail-here { from, to { --rail-on: 1; } }

/* A desk: 960 px and up, as the app's */
@media (min-width: 60rem) {
  .desktop-link { display: inline; }
  .hero { padding-block: 4.5rem 3.5rem; }
  .hero-figure { margin-top: 3.5rem; padding-bottom: 2rem; }
  .ui-desk { display: grid; grid-template-columns: 15.5em minmax(0, 1fr); width: 79%; min-height: 30em; }
  .ui-desk .ui-work { gap: .9em; } .ui-desk .ui-card { padding: 1.1em 1.2em; } .ui-desk .ui-places { gap: .45em; }
  .hero-figure .ui-phone { position: absolute; right: 0; bottom: 0; width: 20em; max-width: none; margin: 0; font-size: 12.5px; }
  .hero-figure figcaption { max-width: 60%; }
  .tour-grid { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 3rem; }
  .rail { position: sticky; top: 4rem; align-self: start; padding-block: 2.75rem; }
  .rail-h { display: block; margin: 0 0 .6rem .8rem; font-size: .72rem; letter-spacing: .11em; font-weight: 730; text-transform: uppercase; color: var(--muted); }
  .rail ul { display: grid; gap: .2rem; overflow: visible; padding: 0; }
  .rail a { display: block; min-height: 0; padding: .6rem .8rem; border: 1px solid transparent; border-radius: 6px; background: color-mix(in srgb, var(--nav-active-bg) calc(var(--rail-on) * 100%), transparent); white-space: normal; }
  .rail a strong { display: block; font-size: .95rem; font-weight: 570; color: color-mix(in srgb, var(--nav-active-ink) calc(var(--rail-on) * 100%), var(--secondary)); line-height: 1.35; }
  .rail a small { display: block; font-size: .78rem; color: color-mix(in srgb, var(--nav-active-ink) calc(var(--rail-on) * 100%), var(--muted)); margin-top: 1px; }
  .rail a:hover { background: color-mix(in srgb, var(--nav-active-bg) calc(var(--rail-on) * 100%), var(--subtle)); border-color: transparent; }
  .rail a:hover strong { color: color-mix(in srgb, var(--nav-active-ink) calc(var(--rail-on) * 100%), var(--ink)); }
  /* The place you're on lights up as you scroll: CSS scroll-driven animations, no script. A place is "on" while it
     crosses a line 35% down the screen. A browser without them lights the place you jumped to. */
  @supports not (animation-timeline: view()) {
    .tour:has(#tomorrow:target) .rail a[href="#tomorrow"], .tour:has(#site:target) .rail a[href="#site"],
    .tour:has(#files:target) .rail a[href="#files"], .tour:has(#money:target) .rail a[href="#money"],
    .tour:has(#kinds:target) .rail a[href="#kinds"], .tour:has(#contacts:target) .rail a[href="#contacts"],
    .tour:has(#people:target) .rail a[href="#people"], .tour:has(#planned:target) .rail a[href="#planned"] { --rail-on: 1; }
  }
  @supports (animation-timeline: view()) {
    .rail a { animation-name: rail-here; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: none; animation-range: cover 65vh cover calc(100% - 35vh); }
    .rail a[href="#tomorrow"] { animation-timeline: --at-tomorrow; } .rail a[href="#site"] { animation-timeline: --at-site; }
    .rail a[href="#files"] { animation-timeline: --at-files; } .rail a[href="#money"] { animation-timeline: --at-money; }
    .rail a[href="#kinds"] { animation-timeline: --at-kinds; } .rail a[href="#contacts"] { animation-timeline: --at-contacts; }
    .rail a[href="#people"] { animation-timeline: --at-people; } .rail a[href="#planned"] { animation-timeline: --at-planned; }
  }
  .place { padding-block: 3.5rem; }
  .advice-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; }
  .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .price-card { padding: 1.5rem; margin-top: 2rem; }
  .talk-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
  .talk-form { padding: 1.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .talk-form .field:nth-of-type(n+3), .talk-form .crew, .talk-form .spam-check, .talk-form .form-notice, .talk-form .button.submit, .talk-form .spam-line { grid-column: 1 / -1; }
  .button.submit { width: auto; justify-self: start; }
  .section-space { padding-block: 5rem; }
}

/* A wide desk: copy beside its drawing */
@media (min-width: 75rem) {
  .place { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; }
  .place-people, .place-planned { grid-template-columns: minmax(0, 1fr); }
  .place-people .access-grid, .place-planned .planned-list { grid-column: 1 / -1; }
}