/* Cabby OS homepage v5: page CSS. The kit (system.css, layout.css, cards.css, motion.css) owns the
   shell, grid, type scale, buttons, nav and hover layer; this file holds only the layout the kit lacks.
   Easing values follow the ClickUp teardown: state changes 0.5s cubic-bezier(.22,1,.36,1), reveals
   0.45s cubic-bezier(.33,1,.68,1). */

:root {
  --ease-state: cubic-bezier(.22, 1, .36, 1);
  --ease-reveal: cubic-bezier(.33, 1, .68, 1);
  --ground-bg: var(--surface);          /* the kit's card panels take the page's grey, never its sand */
  --ground-surface: var(--surface);
}
html { scroll-padding-top: 0; }
::selection { background: color-mix(in oklab, var(--accent) 24%, white); color: var(--ink); }

/* the skip link: the header's first child, hidden until focused (system.md) */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip-path: none; padding: 12px 16px;
  background: var(--ink); color: var(--bg); border-radius: var(--r-sm); font-weight: 500; }

/* headings: Archivo's width axis carries the display voice; the h1 steps to 600 (PLAN.md section 6) */
h1, h2, h3, .footer__lede, .close__word { font-stretch: var(--display-stretch); }
.hero h1 { font-weight: 600; letter-spacing: -0.03em; }
h2 { text-wrap: balance; }
.muted { color: var(--muted); }
.is-gold { color: var(--accent); }
.is-green { color: #047857; }
.ground-inverse .is-green { color: #5BD39A; }
b, strong { font-weight: 500; }

/* ---------------------------------------------------------------- 1. hero */
/* the product hero's head row, as layout.css lays it out for a picture on the stage: the h1 on
   seven columns over two rows, the lead and the buttons stacked on the right four */
@media (min-width: 1024px) {
  .hero--app .hero__head { grid-template-rows: auto auto; row-gap: var(--s-5); align-items: end; }
  .hero--app .hero__head > :first-child { display: contents; }
  .hero--app .hero__head h1 { grid-column: 1 / span 7; grid-row: 1 / span 2; align-self: end; margin: 0; }
  .hero--app .hero__head .hero__lead { grid-column: 9 / -1; grid-row: 1; align-self: end; margin: 0; max-width: none; font-size: 18px; line-height: 1.5; }
  .hero--app .hero__head > .btn-row { grid-column: 9 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--app .hero__head h1 { grid-column: 1 / span 6; }
  .hero--app .hero__head .hero__lead, .hero--app .hero__head > .btn-row { grid-column: 7 / -1; }
}
@media (max-width: 1023px) {
  .hero--app .hero__head { display: grid; grid-template-columns: 1fr; row-gap: var(--s-4); }
  .hero--app .hero__head .hero__lead { max-width: 52ch; }
}
/* the stage holds the live window, not a render: no lit box, no radius, down to 24px above the fold */
.hero--app .hero__stage--app { margin-top: var(--s-6); margin-bottom: calc(var(--s-5) - var(--hpadb, 64px)); background: none; border-radius: 0; overflow: visible; min-height: 0; display: flex; }
.hero--app .hero__stage--app > .app-window, .hero--app .hero__stage--app > .film { flex: 1 1 auto; min-height: 0; }
.hero-cards { display: none; }
@media (max-width: 639px) {
  .hero--app .hero__stage--app > .app-window { display: none; }
  .hero-cards { display: grid; gap: var(--s-3); align-content: start; width: 100%; }
  .hero--app .hero__stage--app { margin-bottom: 0; }
  .hero--app .hero__stage--app > .film { flex: none; }
}

/* ---------------------------------------------------------------- 2. the people band */
.people > video.layer { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.people > .wrap { justify-content: flex-end; }
.people__box { position: relative; max-width: 600px; padding: var(--s-7); background: var(--p-inv-bg); color: #fff; display: grid; gap: var(--s-4); border-radius: var(--r-md); }
.people__box h2 { color: #fff; max-width: 14ch; }
.people__box > p { font-size: 17px; line-height: 1.5; color: #fff; max-width: 52ch; }
.people__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid rgb(255 255 255 / .18); }
.people__facts dt { font-size: 13px; font-weight: 500; color: #CFC7B8; margin-bottom: 4px; }
.people__facts dd { font-size: 14px; line-height: 1.4; color: #fff; }
.people__pause { position: absolute; right: 0; bottom: 0; }
.people__pause.is-paused svg { display: none; }
.people__pause.is-paused::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
@media (max-width: 639px) {
  .people__box { padding: var(--s-5); }
  .people__facts { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ---------------------------------------------------------------- 3. the job scene: the kit's pinned-chapters moment (its CSS ships with it) */

/* ---------------------------------------------------------------- splits, facts, names */
.split__text { display: grid; gap: var(--s-5); align-content: start; }
.split__text > .link { justify-self: start; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink); }
.ground-inverse .facts li { border-color: rgb(255 255 255 / .16); }
.names { margin-top: var(--s-6); }
.names > div { display: grid; gap: 4px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.names b { font-weight: 500; font-size: 16px; }
.names span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.board { width: 100%; padding: 0; overflow: hidden; background: #FAF9F7; border: 1px solid var(--line); border-radius: var(--r-md); min-height: 360px; }
@media (max-width: 1023px) { .names { margin-top: var(--s-5); } .names > div { grid-column: span 6; } }
@media (max-width: 639px) { .names > div { grid-column: span 12; } .board { min-height: 300px; } }

/* ---------------------------------------------------------------- 6. tiles */
.tiles .card { gap: var(--s-2); }
.tiles .card h3 { font-size: 18px; }
.tiles .card > p { font-size: 15px; line-height: 1.45; color: var(--ink); }
.tiles .panel { --p-h: 212px; margin-top: var(--s-3); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.tiles .panel::before, .tiles .panel::after { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .tiles > .card { grid-column: span 6; } }
@media (max-width: 1023px) { .tiles > .card { grid-column: span 6; } }
@media (max-width: 639px) { .tiles > .card { grid-column: span 12; } .tools { --hm: 4; } }

/* ---------------------------------------------------------------- 8. crew */
.crew__photo { border-radius: var(--r-md); overflow: hidden; }
.crew__photo img { object-position: 60% 40%; }
@media (max-width: 1023px) {
  .crew .grid--top > .frame--portrait { grid-column: span 6; }
  .crew .grid--top > .split__text { grid-column: span 12; }
  .crew { --hm: 2; }
}
@media (max-width: 639px) { .crew .grid--top > .frame--portrait { grid-column: span 12; } .crew { --hm: 3; } }

/* ---------------------------------------------------------------- 10. works with, set-up */
.ic-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ic-rows li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.ic-rows .ic { width: 32px; height: auto; max-height: 32px; justify-self: center; }
.ic-rows .ic-stack { display: flex; gap: 2px; width: 40px; justify-content: center; }
.ic-rows .ic-stack .ic { width: 18px; }
.ic-rows b { display: block; font-weight: 500; font-size: 16px; }
.ic-rows span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.setup { display: grid; gap: var(--s-5); align-content: start; }
.setup__photo { --ratio: 56.25%; border-radius: var(--r-md); overflow: hidden; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step); font: 500 14px/24px var(--font-text); font-variant-numeric: tabular-nums; color: var(--accent); }
.steps b { display: block; font-weight: 500; font-size: 16px; }
.steps span { font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 639px) { #works { --hm: 2; } }

/* ---------------------------------------------------------------- 11. questions */
.faq .faq__item h3 { font-size: 18px; }

/* ---------------------------------------------------------------- 12. close and footer */
.closing__cta.close--type > .close__btn { align-self: flex-start; width: min(100%, 640px); }
.footer--dark .footer__col :is(h3, h4) { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: var(--s-2); }
.footer--dark .footer__col a { font-size: 14px; }
.footer--dark .nav__logo img { border-radius: 4px; }
.nav__logo img { border-radius: 4px; }

/* ---------------------------------------------------------------- menu card photo */
.menu-card .panel--photo { padding: 0; overflow: hidden; border: 1px solid var(--line); }
.menu-card .panel--photo::before, .menu-card .panel--photo::after { display: none; }
.menu-card .panel--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* icons keep their own colours; the kit's icon.css sizes them */
.ic { display: inline-block; vertical-align: middle; }

/* ---------------------------------------------------------------- the page's windows inside the kit's .frame
   system.css makes .frame a centred flex box with padding and a ::before ratio spacer, and gives its
   children position: relative. A window fills its frame instead. */
.frame.app-window, .frame.labour, .frame.feed, .frame.portal, .frame.tablet, .frame.board {
  padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  align-items: stretch; justify-items: stretch; align-content: stretch; justify-content: stretch;
}
.frame.app-window::before, .frame.labour::before, .frame.feed::before, .frame.portal::before, .frame.tablet::before, .frame.board::before { display: none; }
.frame.labour, .frame.feed, .frame.portal { aspect-ratio: 5 / 4; }
.frame.tablet, .frame.crew__photo { aspect-ratio: 4 / 5; }
.frame.app-window { grid-template-columns: 196px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.frame.app-window > .app-side, .frame.app-window > .app-body { grid-row: 1; }
.frame.app-window > .app-body { grid-column: 2; }
.frame.app-window > .app-rail { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 1199px) { .frame.app-window { grid-template-columns: minmax(0, 1fr); } .frame.app-window > .app-body { grid-column: 1; } }
.frame.board { grid-template-rows: auto auto minmax(0, 1fr); }
.frame > .lab, .frame > .feed__win, .frame > .po, .frame > .tablet__screen { height: 100%; width: 100%; max-width: none; }
/* a <picture> inside a photo frame fills it like a bare img would */
.frame--photo > picture { position: absolute; inset: 0; display: block; }
.frame--photo > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* set-up steps: the number sits beside both lines */
.steps li::before { grid-row: 1 / span 2; }
.steps li > b, .steps li > span { grid-column: 2; }
.frame.frame--photo > picture { position: absolute; inset: 0; z-index: 0; }

/* ---------------------------------------------------------------- phone screens (390x844) */
@media (max-width: 639px) {
  .hero--app .hero__head .hero__lead { font-size: 16px; }
  .hero-cards { gap: 8px; }
  .hero-card { padding: 10px 14px; gap: 2px; }
  .hero-card b { font-size: 15px; }
  .hero-card small { font-size: 12px; }
  /* the split sections hold one phone screen: the heading, the lead and the window */
  #quotes .facts, #email .facts, #portal .facts { display: none; }
  .split__text { gap: var(--s-4); }
  .split__text .t-lead { font-size: 16px; }
  /* the board keeps its height on a phone and shows two columns stacked */
  main > #stages > .wrap > .board.fill { flex: none; min-height: 600px; height: auto; }
  #stages { --hm: 2; }
  #stages .board__cols { grid-template-columns: minmax(0, 1fr); }
  #stages .board__cols .app-col:nth-child(2) { display: grid; }
  #stages .names > div { grid-column: span 12; }
  /* eight tiles take three phone screens */
  #tools { --hm: 3; }
  .tiles .panel { --p-h: 160px; }
  .tiles .card > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #crew { --hm: 2; }
  .setup__photo { --ratio: 100%; aspect-ratio: 1; }
}
/* type steps: card and FAQ titles one clear step above body */
.tiles .card h3, .faq .faq__item h3 { font-size: 20px; }
.footer--dark .footer__col :is(h3, h4) { font-size: 14px; }

/* ---------------------------------------------------------------- checker round 1 */
/* integrations as tiles: every text block starts on a column line */
.ic-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.ic-tiles li { display: grid; gap: 6px; align-content: start; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.ic-tiles .ic { width: 32px; height: auto; max-height: 32px; margin-bottom: 4px; }
.ic-tiles .ic-stack { display: flex; gap: 4px; height: 32px; align-items: center; margin-bottom: 4px; }
.ic-tiles .ic-stack .ic { width: 22px; margin: 0; }
.ic-tiles b { font-weight: 500; font-size: 16px; }
.ic-tiles span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.ic-tiles__more::before { content: ""; display: block; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 6px; background: var(--accent); }
@media (max-width: 639px) { .ic-tiles { grid-template-columns: 1fr; } .ic-tiles li { padding: var(--s-3) 0; } }
/* set-up steps: the number leads the heading on the same line, so the text starts on the line */
.steps li { grid-template-columns: 1fr; }
.steps li::before { display: none; }
.steps li > b, .steps li > span { grid-column: 1; }
/* definition lists carry no browser indent */
dd { margin: 0; }
/* the people band on a phone: the section's own ground is the ink, the film a band above the words */
/* phone overflow */
.app-strip { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 639px) {
  .feed__tabs span:nth-child(n+4) { display: none; }
  .po__arc li:not(.is-done, .po-s3, .po-s4) { font-size: 0; }
  #questions { --hm: 2; }
  #tools .section-head .muted { display: none; }
  .tiles .panel { --p-h: 150px; }
}
@media (max-width: 1279px) { .app-top__btn { display: none; } .app-tabs span:nth-child(n+6):not(.app-assist) { display: none; } }

/* ---------------------------------------------------------------- checker round 2 */
/* the hero stage ends --hpadb above the fold like every hero */
.hero--app .hero__stage--app { margin-bottom: 0; }
/* the people film: a head row, then the frame takes the rest of the screen */
.people__frame { width: 100%; margin-top: var(--s-7); border-radius: var(--r-md); overflow: hidden; background: #1a1814; min-height: 240px; }
.people__frame > .people__pause { position: absolute; right: 12px; bottom: 12px; }
/* the wide feed */
.frame.feed.frame--hero { aspect-ratio: auto; width: 100%; margin-top: var(--s-7); min-height: 300px; }
.feed__win--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.feed__win--wide .feed__tabs { grid-column: 1 / -1; }
.feed__win--wide .feed__item { align-self: start; }
.feed__win--wide .fd-1, .feed__win--wide .fd-2 { grid-column: 1; }
.feed__win--wide .fd-3, .feed__win--wide .fd-4 { grid-column: 2; }
.feed__win--wide .fd-3 { grid-row: 2; }
.feed__win--wide .fd-4 { grid-row: 3; }
.feed__win--wide .fd-5 { grid-column: 2; grid-row: 4; }
/* the two splits' frames reach the screen's foot */
.frame.labour, .frame.portal { aspect-ratio: 16 / 15; }
/* the crew row: three items of one height (the text column stretches) */
.crew__grid { align-items: stretch; }
.crew__grid > .split__text { align-content: start; }
/* set-up steps as plain blocks whose text starts on the line */
.steps li { display: block; }
.steps li > b, .steps li > span { display: block; }
/* body text people read is ink */
.ic-tiles span, .steps span, .names span { color: var(--ink); }
/* questions: the photograph under the button */
.q__photo { --ratio: 66.67%; border-radius: var(--r-md); overflow: hidden; margin-top: var(--s-2); }
#questions .split__text > .btn { justify-self: start; }
/* the job scene: the kit's pinned-chapters with the page's windows in the lit visuals */
#job .mo-pc__text h2 { max-width: 14ch; }
#job .mo-pc__visual--lit { --ground-bg: var(--surface); }
#job .mo-pc__visual--lit .mini { width: 100%; max-width: 560px; }
#job .mo-pc__step p { font-size: 16px; line-height: 1.5; }
#job .mo-pc__steps { counter-reset: none; }
/* phone */
@media (max-width: 639px) {
  .hero-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-card small { display: none; }
  .hero-card { padding: 12px; }
  #job .mo-pc__visual--lit { padding: 12px; }
  #job .mo-pc__visual--lit .mini { max-width: none; }
  .people__frame { margin-top: var(--s-5); aspect-ratio: 4 / 3; }
  .feed__win--wide { grid-template-columns: 1fr; }
  .feed__win--wide .fd-1, .feed__win--wide .fd-2, .feed__win--wide .fd-3, .feed__win--wide .fd-4 { grid-column: 1; grid-row: auto; }
  .frame.feed.frame--hero { aspect-ratio: auto; }
  #email { --hm: 2; }
  #email .names > div { grid-column: span 12; }
  .q__photo { --ratio: 56.25%; }
}
/* tablet (640 to 1023): every section one screen or two */
@media (min-width: 640px) and (max-width: 1023px) {
  .frame.labour, .frame.portal, .frame.feed.frame--hero { aspect-ratio: 16 / 10; }
  .frame.tablet, .frame.crew__photo { aspect-ratio: 1; }
  .tiles .panel { --p-h: 176px; }
  #works, #questions, #email, #crew { --h: 2; }
  .crew__grid > .split__text { grid-column: span 12; }
  .crew__grid > .frame--portrait { grid-column: span 6; }
  .crew__grid > .frame--portrait.tablet { grid-column: 7 / span 6; }
  .feed__win--wide { grid-template-columns: 1fr; }
  .feed__win--wide .fd-1, .feed__win--wide .fd-2, .feed__win--wide .fd-3, .feed__win--wide .fd-4 { grid-column: 1; grid-row: auto; }
  .q__photo { --ratio: 50%; }
}

/* ---------------------------------------------------------------- layout check round 1 */
/* the crew row: frames keep their own width; the text column takes the row's height */
.crew__grid > .frame--portrait { align-self: start; width: 100%; max-width: 100%; height: auto; }
.frame.tablet { grid-template-rows: minmax(0, 1fr); }
/* tiles stay four-up from 1024 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tiles > .card { grid-column: span 3; }
  .tiles .panel { --p-h: 200px; }
  .tl { padding: 10px; font-size: 12px; }
  .tl__nps { gap: 2px; font-size: 10px; }
  .tl__nps span { padding: 5px 0; }
}
/* phone: the hero ends inside its screen, the job's steps fit two screens, the tiles three */
@media (max-width: 639px) {
  .hero--app h1 { font-size: 30px; }
  .hero--app .hero__stage--app { margin-top: var(--s-5); }
  .hero-cards { gap: 6px; }
  .hero-card { padding: 10px 12px; }
  .hero-card b { font-size: 14px; }
  #job .mo-pc__steps { gap: var(--s-4); }
  #job .mo-pc__step p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #job .mo-pc__visual--lit { aspect-ratio: 4 / 3; max-height: 26svh; align-items: start; overflow: hidden; }
  #job .mo-pc__visual--lit .mini { align-self: start; }
  .tiles .panel { height: 150px; min-height: 0; }
}
/* tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  #crew { --h: 1; }
  .tiles .panel { --p-h: 150px; height: 150px; }
  #tools .section-head .muted { display: none; }
  .setup__photo { --ratio: 75%; }
}
@media (min-width: 1024px) and (max-width: 1279px) { #tools .section-head .muted { display: none; } .tiles .panel { --p-h: 180px; } }
/* phone: the eight tools as a two-column list on one screen; their windows are desktop and tablet pictures */
@media (max-width: 639px) {
  #tools { --hm: 1; }
  .tiles > .card { grid-column: span 6; gap: 4px; }
  .tiles .card h3 { font-size: 16px; }
  .tiles .card > p { font-size: 13px; -webkit-line-clamp: 3; }
  .tiles .panel { display: none; }
  #tools .group .section-head { margin-bottom: var(--s-5); }
}

/* ---------------------------------------------------------------- round 3 */
.people { color: var(--ink); }
.people__frame { color: #fff; }
/* the wide feed reads at full size */
.feed__win--wide { padding: 18px 20px; gap: 12px; align-content: start; }
.feed__win--wide .feed__item { padding: 14px 16px; font-size: 14px; }
.feed__win--wide .feed__item span { font-size: 12.5px; }
.feed__win--wide .feed__item em { font-size: 13px; }
.feed__win--wide .feed__tabs { font-size: 13px; }
@media (max-width: 639px) {
  .hero--app .hero__stage--app { flex: 0 0 auto; }
  #job .mo-pc__visual--lit { padding: 8px; }
  #job .mini { font-size: 12px; }
  #job .mini__form { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
  #job .mini__field { padding: 6px 8px; }
  .tiles { row-gap: var(--s-5); }
}
.ic-tiles__more::before { display: none; }
.ic-tiles__more { align-self: end; }
@media (max-width: 639px) { .frame.labour { aspect-ratio: 4 / 5; } .frame.portal { aspect-ratio: 4 / 5; } }

/* ---------------------------------------------------------------- round 4 */
.people__frame { padding: 0; border: 0; }
.app-h1--job small, .board__job small { font-size: 12px; color: var(--u-mut, #746F65); font-weight: 400; margin-left: 6px; }
/* the split frames keep their own height; the row does not stretch them */
.frame.labour, .frame.portal { align-self: start; max-width: 100%; }
/* the job moment's board mini: two columns below 1280, one on a phone; nothing cut */
@media (max-width: 1279px) { #job .mini__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } #job .mini__cols .app-col:nth-child(n+3) { display: none; } }
.closing__cta.close--type > .close__btn { width: 100%; }
@media (max-width: 639px) {
  h2 { font-size: 26px; }
  .hero-cards > .hero-card { animation: none; }
  .hero-card { padding: 10px 12px; }
  #job .mo-pc__step p { display: block; -webkit-line-clamp: unset; overflow: visible; }
  #job .mo-pc__visual--lit { aspect-ratio: auto; max-height: none; padding: 8px; }
  #job .mini__cols { grid-template-columns: minmax(0, 1fr); }
  #job .mini__cols .app-col:nth-child(2) { display: none; }
  #job .mini--quote .app-table tbody tr:nth-child(n+4) { display: none; }
  #job .mini__list { display: none; }
  #job .mini__result { font-size: 12px; }
  .ic-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-tiles b { font-size: 14px; }
  .ic-tiles span { font-size: 12px; }
  #tools { --hm: 2; }
  .tiles > .card.tile--lead { grid-column: span 12; }
  .tiles > .card.tile--lead .panel { display: block; height: 150px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #email { --h: 1; }
  #email .names { display: none; }
  .frame.feed.frame--hero { aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) {
  #job .mo-pc__visual--lit { aspect-ratio: auto; max-height: none; align-items: start; padding: 8px; }
  #job .mo-pc__steps { gap: 12px; }
  #job .mo-pc__step h3 { font-size: 17px; }
}
@media (max-width: 639px) { .tiles > .card.tile--lead .panel { height: auto; min-height: 0; } }

/* ---------------------------------------------------------------- round 5 */
.hero--app .hero__stage--app { min-height: 0; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .split__text { gap: var(--s-4); }
  .facts li { padding: 10px 0; }
  .ls-7 { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .frame.feed.frame--hero { aspect-ratio: 4 / 3; }
  .setup__photo { display: none; }
  .q__photo { display: none; }
  #works, #questions { --h: 1; }
  .faq .faq__item h3 { font-size: 18px; }
  .ls-7 { display: none; }
}
@media (max-width: 639px) {
  .tiles { align-items: start; }
  .tiles .card > p { display: block; -webkit-line-clamp: unset; overflow: visible; }
}

/* ---------------------------------------------------------------- round 6 */
@media (max-width: 639px) {
  .hero--product.hero--app .hero__stage--app { aspect-ratio: auto; min-height: 0; }
  .tiles { align-items: stretch; }
}
@media (max-width: 1279px) { .ls-7 { display: none; } }
.board .app-task { padding: 7px 10px 7px 30px; }
.board .app-task small { margin-top: 1px; }
.board .app-col { gap: 5px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .frame.feed.frame--hero { aspect-ratio: 5 / 4; }
  .setup__photo { display: block; --ratio: 42.86%; aspect-ratio: 21 / 9; }
  .q__photo { display: block; --ratio: 42.86%; aspect-ratio: 21 / 9; }
  .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; }
  .faq .faq__item h3 { font-size: 17px; }
}
/* the split frames reach the screen's foot at 1440 and 1024 */
.frame.labour, .frame.portal { aspect-ratio: 8 / 9; }
@media (min-width: 640px) and (max-width: 1023px) {
  .frame.labour, .frame.portal { aspect-ratio: 16 / 10; }
  .split__text { gap: var(--s-4); }
  .setup__photo, .q__photo { --ratio: 33.33%; aspect-ratio: 3 / 1; }
}
@media (max-width: 639px) { .frame.labour, .frame.portal { aspect-ratio: 4 / 5; } }
@media (min-width: 640px) and (max-width: 1023px) { .ic-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ic-tiles li { padding: var(--s-3) 0; } .ic-tiles b { font-size: 15px; } .ic-tiles span { font-size: 13px; } #works { --h: 1; } }
@media (min-width: 640px) and (max-width: 1023px) { .steps li { padding: 9px 0; } .setup { gap: var(--s-4); } }

/* ---------------------------------------------------------------- round 7 */
/* the board's columns clear the frame's foot */
.board__top { padding: 12px 18px 6px; }
.board__filters { padding-bottom: 10px; }
.board .app-task { padding: 6px 10px 6px 30px; font-size: 12px; }
.board .app-task small { font-size: 11px; }
.board .app-col { gap: 4px; padding: 5px; }
#stages .names { margin-top: var(--s-5); }
/* the labour strip only at 1280 and up (scenes.css sets its display, so the selector carries weight) */
@media (max-width: 1279px) { .lab .app-strip--lab.ls-7 { display: none; } }
/* the crew band reaches the screen's foot at 1440 */
@media (min-width: 1024px) { .frame.tablet, .frame.crew__photo { aspect-ratio: 5 / 7; } }
/* tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .frame.feed.frame--hero { aspect-ratio: 6 / 5; }
  .frame.labour, .frame.portal { aspect-ratio: 4 / 3; }
  .ic-tiles__more { display: none; }
  .tiles .panel { --p-h: 220px; height: 220px; }
}
/* phone */
@media (max-width: 639px) {
  #tools .group .section-head { margin-bottom: var(--s-4); }
  main > #stages > .wrap > .board.fill { min-height: 680px; }
}
@media (min-width: 640px) and (max-width: 799px) { .frame.labour, .frame.portal { aspect-ratio: 16 / 10; } }

/* ---------------------------------------------------------------- round 8 */
#stages .names { margin-top: var(--s-4); }
#stages .names b { font-size: 15px; }
#stages .names span { font-size: 13px; }
.board__top { padding: 10px 18px 4px; }
.board__filters { padding-bottom: 8px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .ic-tiles li.ic-tiles__more { display: none; }
  .feed__win--wide { padding: 14px 16px; gap: 10px; }
}

/* ================================================================ final: Fable with Codex's four ideas
   1 the hero's numbered step bar · 2 the full-bleed workshop band · 3 one tabbed section for the office,
   the workshop and the customer · 4 the real recording in a dialog. Motion answers on press, eases with
   the page's ClickUp-measured curve, and rests under reduced motion. */

/* ---------------------------------------------------------------- 1. hero: the step bar over the window */
.hero--app .hero__stage--app { flex-direction: column; gap: 12px; }
/* one bordered bar from line to line: the five steps, then Replay in its own cell */
.hero-steps { flex: none; display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); overflow: hidden; }
.hero-steps__list { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hero-step { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--muted); font: 500 14px/1.2 var(--font-text); text-align: left; cursor: pointer; transition: background-color .2s cubic-bezier(.22, 1, .36, 1), color .2s cubic-bezier(.22, 1, .36, 1); }
.hero-step + .hero-step { border-left: 1px solid var(--line); }
.hero-step__n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.hero-step:hover { color: var(--ink); background: var(--surface); }
.hero-step:active { background: var(--line); transition-duration: 0s; }
.hero-step[aria-pressed="true"] { color: #fff; background: var(--ink); }
.hero-step[aria-pressed="true"] .hero-step__n { color: #E8C878; }
.hero-step__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.hero-step__bar::after { content: ""; display: block; height: 100%; width: 0; background: #D4B96A; }
.hero-step[aria-pressed="true"] .hero-step__bar::after { width: calc(var(--fill, 0) * 100%); }
.hero-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.hero-steps__replay { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--muted); font: 500 14px/1 var(--font-text); cursor: pointer; transition: color .2s ease; }
.hero-steps__replay svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.hero-steps__replay:hover { color: var(--ink); }
.hero-steps__replay:active svg { transform: rotate(-90deg); transition-duration: .12s; }
.hero-steps__replay:hover { background: var(--surface); }
.hero-steps__replay:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 1023px) { .hero-step { padding: 0 12px; gap: 8px; font-size: 13px; } }
/* phone: the window plays here too, under five short steps */
@media (max-width: 639px) {
  .hero--app .hero__stage--app { flex: 1 1 auto; min-height: 0; margin-top: var(--s-4); gap: 8px; }
  .hero--app .hero__stage--app > .app-window { display: grid; flex: 1 1 auto; min-height: 220px; }
  .hero-steps__replay[data-hero-replay], .hero-step__n { display: none; }
  .hero-steps__replay[data-film-pause] { min-width: 0; padding: 0 10px; font-size: 12.5px; }
  .hero-step { justify-content: center; padding: 0 4px; min-height: 40px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- 2. the full-bleed workshop band */
.people--band { position: relative; overflow: hidden; color: #fff; background: #1a1814; }
.people--band > video.layer { z-index: 0; }
/* the scrim is the section's own layer (a pseudo-element), so the words read at 4.5:1 or better over any frame */
.people--band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(21 19 15 / .9) 0%, rgb(21 19 15 / .72) 30%, rgb(21 19 15 / .2) 56%, rgb(21 19 15 / .3) 70%, rgb(21 19 15 / .9) 100%); }
.people--band > .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.people__head { align-items: start; }
.people__head h2 { color: #fff; margin: 0; }
.people__head .t-lead { color: #fff; margin: 0; }
/* the band starts and ends with the page's air between sections (the film fills it) */
.people--band > .wrap { padding-top: clamp(48px, 12svh, 128px); }
.people__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.people__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-top: 1px solid rgb(255 255 255 / .45); color: #fff; font: 500 18px/1.3 var(--font-text); text-decoration: none; transition: border-color .2s ease; }
.people__links a:hover { border-color: #fff; }
.people__links a:focus-visible { outline: 2px solid #E8C878; outline-offset: 4px; }
.people__links .m-arrow { width: 14px; height: 14px; flex: none; }
.people--band .people__pause { position: absolute; top: 0; right: 0; bottom: auto; }
@media (max-width: 639px) {
  .people--band > video.layer { object-position: 62% 50%; }
  .people--band::before { background: linear-gradient(180deg, rgb(21 19 15 / .9) 0%, rgb(21 19 15 / .62) 50%, rgb(21 19 15 / .92) 100%); }
  .people__head { padding-right: 48px; row-gap: var(--s-4); }
  .people--band > .wrap { padding-top: 18svh; padding-bottom: 10svh; }
  /* stacked, the links are parted by air, not rules */
  .people__links { grid-template-columns: 1fr; row-gap: 4px; }
  .people__links a { min-height: 48px; font-size: 17px; border-top: 0; }
}

/* ---------------------------------------------------------------- 3. one job, three places: the tabs */
.team__head { align-items: start; row-gap: var(--s-5); }
#team .split__text h3 { font-size: 20px; line-height: 1.3; margin: 0; }
.team__switch { display: flex; justify-content: flex-end; }
.team__tabs { flex-wrap: nowrap; }
.team__tabs .tab { min-height: 44px; padding: 0 var(--s-5); font-size: 15px; }
.team__panel { margin-top: var(--s-7); align-items: center; row-gap: var(--s-5); }
.team__panel[hidden] { display: none; }
#team .team__panel > .split__text { grid-column: 1 / span 5; }
/* Henley Street Joinery's brand kit (a sample): the colours and logo mark every customer-facing screen in the films takes
   (the Power Portal, the Lead Launcher form, the Booking Bridge page, the Satis Survey page, the quote), as the app's brand
   profile does; one definition for the films and the labs */
.film { --hs-brand: #2F4A3E; --hs-brand-fg: #fff; --hs-accent: #C8A24A; --hs-surface: #EEEAE2; --hs-bg: #F8F6F1; --hs-text: #1F1D1A; --hs-brand-press: #243A30; --hs-subtle: rgb(47 74 62 / .08); --hs-glow: rgb(47 74 62 / .18); }
.film .hs-mark__bg { fill: var(--hs-brand); } .film .hs-mark__h { fill: var(--hs-accent); }
#team .team__panel > .film { grid-column: 7 / -1; width: 100%; max-width: none; margin: 0; align-self: start; }   /* the panel's film (film/team) */
#team .film__poster > .frame { width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; min-height: 0; }   /* the frame's CSS scene, the film's still */
/* no JavaScript, or a film that failed: the still is the picture again at its own height (the tablet scene is absolutely
   positioned and gives its frame no height; the feed scene is taller than 16:10) */
html:not(.mo-js) #team .film__frame, #team .film.is-failed .film__frame { aspect-ratio: auto; height: auto; }
html:not(.mo-js) #team .film__poster, #team .film.is-failed .film__poster { position: relative; inset: auto; }
html:not(.mo-js) #team .film__poster > .frame, #team .film.is-failed .film__poster > .frame { height: auto; min-height: 320px; }
#team .team__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: var(--r-sm); }
/* the feed reads as one column in a half-width window */
#team .feed__win--wide { grid-template-columns: minmax(0, 1fr); }
#team .feed__win--wide :is(.fd-1, .fd-2, .fd-3, .fd-4, .fd-5) { grid-column: 1; grid-row: auto; }
/* the tablet keeps a tablet's width inside the wider frame */
#team .tab__pin, #team .tab__work { max-width: 420px; margin: 0 auto; }
@media (max-width: 1023px) {
  .team__switch { justify-content: flex-start; }
  #team .team__panel > .split__text, #team .team__panel > .film { grid-column: 1 / -1; }
}
/* tablet: one screen; the facts give way to the window */
@media (min-width: 640px) and (max-width: 1023px) {
  #team { --h: 1; }
  #team .facts { display: none; }
  .team__panel { margin-top: var(--s-6); }
}
/* phone: one screen; the facts give way to the window */
@media (max-width: 639px) {
  #team .facts { display: none; }
  .team__switch { grid-column: 1 / -1; }
  .team__tabs { width: 100%; }
  .team__tabs .tab { flex: 1; padding: 0 var(--s-2); }
  .team__panel { margin-top: var(--s-5); }
}

/* ---------------------------------------------------------------- 4. the real recording in a dialog */
.rec { width: min(1040px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: var(--r-md); background: var(--bg); color: var(--ink); box-shadow: 0 40px 80px -24px rgb(26 24 20 / .45); overflow: auto; }
.rec::backdrop { background: rgb(26 24 20 / .72); }
.rec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 12px 12px 0 24px; }
.rec__head h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.rec__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; transition: background-color .15s ease; }
.rec__close svg { width: 18px; height: 18px; }
.rec__close:hover { background: var(--surface); }
.rec__close:active { background: var(--line); transition-duration: 0s; }
.rec__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rec__note { margin: 0; padding: 2px 24px 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rec__frame { position: relative; border-top: 1px solid var(--line); background: #FAF9F7; }
.rec__video { display: block; width: 100%; height: auto; max-height: calc(100svh - 190px); aspect-ratio: 1184 / 756; background: #FAF9F7; }
.rec__error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3); background: rgb(250 249 247 / .95); text-align: center; }
.rec__error[hidden] { display: none; }
.rec__error p { margin: 0; font-size: 16px; }
.rec[open] { animation: rec-in .32s cubic-bezier(.22, 1, .36, 1); }
.rec[open]::backdrop { animation: rec-fade .32s ease-out; }
@keyframes rec-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rec-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rec[open] { animation: rec-fade .2s ease-out; } }
html:has(.rec[open]) { overflow: hidden; }
@media (max-width: 639px) { .rec__head { padding-left: 16px; } .rec__head h2 { font-size: 17px; } .rec__note { padding: 2px 16px 12px; } }

/* ---------------------------------------------------------------- sections size to their content
   Owner feedback 2026-11-09: too much empty space inside sections. The kit pins every section to one
   or two screens and stretches frames and cards to fill them; here a section is as tall as what it
   holds. The hero, the workshop band and the live job story keep their screen heights. */
main > section.section:not(.hero, .people--band, .is-live) { height: auto; min-height: 0; }
main > section.section:not(.hero, .people--band, .is-live) > .wrap { height: auto; flex: none; }
main > section.section:not(.hero, .people--band, .is-live) .fill { flex: none; min-height: 0; height: auto; }
/* a two-group section: the second card row follows the first at a row's gap, not a screen apart */
main > section.section.g2 > .wrap { display: flex; flex-direction: column; row-gap: var(--s-7); }
main > section.section.g2 > .wrap .grid:last-child { flex: none; }
/* windows take their content's height, not the screen's */
.frame.labour { aspect-ratio: auto; }
#stages .board { margin-top: var(--s-6); min-height: 0; }
/* the tabs: the text starts at the top of its window, not in its middle */
.team__panel { align-items: start; }
@media (max-width: 639px) {
  main > #stages > .wrap > .board.fill { min-height: 0; }
  main > section.section.g2:not(.g2m) > .wrap { row-gap: var(--s-6); }
}
/* the job story at rest on a wide screen (reduced motion, a short window): each window sits in a
   panel its own height, not a 4:3 ground */
@media (min-width: 1024px) {
  #job:not(.is-live) .mo-pc__visual--lit { aspect-ratio: auto; max-height: none; padding: var(--s-6); }
}
/* subpage rows: a window on its ground and the customer portal take their content's height */
main > section.section .frame.litframe, main > section.section .frame.portal { aspect-ratio: auto; }
/* the live job story between 640 and 1279: the kit's flex column grows the sticky box to the whole
   track, so it never pins and the steps sit between two blank half-screens (seen at 1024); a block
   box keeps the sticky box one screen tall */
@media (min-width: 640px) and (max-width: 1279px) {
  main > #job.is-live { display: block; }
  main > #job.is-live > .wrap { flex: none; height: 100svh; }
}
/* the job story's figures at rest on a tablet: each window whole, not centred in a 4:3 box */
@media (min-width: 640px) and (max-width: 1023px) {
  #job:not(.is-live) .mo-pc__visual--lit { aspect-ratio: auto; align-items: start; }
}
/* the live ground is the height of its tallest window, so the enquiry card has a margin, not a field */
@media (min-width: 1024px) {
  #job.is-live .mo-pc__visuals { aspect-ratio: auto; height: min(440px, calc(100svh - 160px)); }
  #job.is-live .mo-pc__visual--lit { aspect-ratio: auto; padding: 24px; }
}

/* ---------------------------------------------------------------- the hero film (10 November 2026) */
.hero-steps__replay[data-film-pause] { min-width: 84px; justify-content: center; }
@media (max-width: 639px) {
  /* the hero grows with the film on a phone (head, step bar and a 56svh frame run past one screen) */
  main > .hero.hero--app { height: auto; min-height: var(--ly-hero-h, 100svh); }
}

/* ---------------------------------------------------------------- the tile films (10 November 2026, evening) */
/* a tile's panel holds its film (film/tiles, film.js): the panel takes the film's 3:2 height, not the fixed panel height */
.tiles > .card .panel:has(> .film--tile) { --p-h: 0; min-height: 0; height: auto; flex: none; margin-top: auto; }   /* at the card's foot (the card's own gap keeps it off the text), so a row's frames line up whatever the text's height */
/* the tiles name their feature in bold, heading and text alike (owner, 10 November 2026) */
.tiles .card h3 b { font-weight: 700; } .tiles .card > p b { font-weight: 600; }   /* the heading is already 500, so its name needs the heavier cut to read as bold */