/* YC page (2026-11-09). Figma "Supermega Design Website - v2" 747:1833: black ground, Instrument Sans chips,
   PT Serif headlines. The voxel field (yc-voxels.js) is fixed behind everything. */
:root {
  --bg: #000;
  --ink: #fff;
  --dim: rgba(255, 255, 255, .62);
  --faint: rgba(255, 255, 255, .38);
  --chip: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .14);
  --serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --accent: #FF5700;
  --gut: 20px;
  --col: 470px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.5 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: #F58A45; color: #000; }

/* the field */
.yc-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.yc-stage canvas { display: block; width: 100% !important; height: 100% !important; }
main, .yc-foot { position: relative; z-index: 1; }

/* ---------- header (Figma 747:1835) ---------- */
.yc-head {
  position: fixed; inset: 0 0 auto; z-index: 10; height: 72px; padding: 20px var(--gut);
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.yc-head > * { pointer-events: auto; }
/* words that scroll up under the header fade out behind it */
.yc-head__l { display: flex; align-items: center; gap: 12px; }
.yc-head__logo { display: block; width: 67px; height: 32px; }
.yc-head__logo img { width: 67px; height: 32px; }
.yc-chip--yc { gap: 6px; padding-left: 6px; }
.yc-ymark { display: block; flex: none; }
.yc-head__for { font: italic 400 15px/15px var(--sans); letter-spacing: .15px; }
.yc-head__r { display: flex; align-items: center; gap: 80px; }
.yc-head__nav { display: flex; gap: 4px; }
.yc-chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 2px;
  background: var(--chip); color: var(--ink); text-decoration: none; white-space: nowrap;
  font: 500 15px/15px var(--sans); letter-spacing: .15px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .2s ease, color .2s ease;
}
a.yc-chip:hover { background: rgba(255, 255, 255, .2); }
.yc-chip--cta { background: #fff; color: #000; }
.yc-chip--cta:hover { background: var(--accent) !important; color: #000; }

/* ---------- type ---------- */
.yc-h1 {
  margin: 0; font: 400 52px/1.1 var(--serif); letter-spacing: -.012em; text-align: center; text-wrap: balance; /* PT Serif runs a quarter wider than Apple Garamond did: 52 keeps the lines as long as the frame's 64 */
  font-size: clamp(32px, calc((100vw - 48px) / 17.2), 52px); /* the long line never runs off a narrow window */
}
.yc-h1 > span { display: block; }
.yc-h2 { margin: 0; font: 400 48px/1.04 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
/* eyebrows are the header's chip, smaller */
.yc-eyebrow { margin: 0 0 24px; font: 500 13px/1 var(--sans); letter-spacing: .15px; }
.yc-tag {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 2px;
  background: var(--chip); color: var(--ink);
}
.yc-tag i { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.yc-n { color: var(--accent); margin-right: 10px; font-variant-numeric: tabular-nums; }
.yc-p { margin: 22px 0 0; color: var(--dim); text-wrap: pretty; max-width: 30em; }
.yc-p--dim { color: var(--faint); font-size: 15px; }

/* ---------- sections ---------- */
.yc-s { position: relative; display: flow-root; min-height: 100vh; min-height: 100svh; }

.yc-hero { height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; }
.yc-hero .yc-h1 { padding: 0 var(--gut); }
/* hero block, Figma 750:2013: label, headline, subline, 40px apart, top at 152 */
.yc-hero { gap: 40px; padding-top: 152px; }
.yc-lab, .yc-sub { margin: 0; font: 500 20px/1.25 'General Sans', var(--sans); color: #fff; }
.yc-lab { display: inline-flex; align-items: center; gap: 40px; padding: 4px; border: 1px solid #fff; white-space: nowrap; }
.yc-lab__a, .yc-lab__b { padding: 4px 6px; }
.yc-lab__a { background: #fff; color: #000; }
.yc-lab__b { background: #FF5700; color: #fff; }
.yc-lab__for { line-height: 1; }
.yc-sub { min-width: 519px; max-width: calc(100% - 2 * var(--gut)); padding: 4px 12px; text-align: center; }
.yc-sub > span { display: block; white-space: nowrap; }
/* the companies row sits at the bottom of the first screen, quiet white marks on one line, and goes as soon as
   the page is scrolled (his words, 2026-11-11: "then it just disappears on scroll"); yc.js sets its opacity */
.yc-hero { position: relative; }
.yc-hero .yc-logos--hero { position: fixed; z-index: 2; left: var(--gut); right: var(--gut); bottom: 32px; margin: 0; max-width: none; flex-wrap: nowrap; justify-content: center; gap: 36px; }
.yc-hero .yc-logos--hero img { opacity: .5; height: calc(var(--h) * .9); }
@media (max-width: 760px) { .yc-hero .yc-logos--hero { flex-wrap: wrap; gap: 14px 22px; bottom: 20px; } .yc-hero .yc-logos--hero img { height: calc(var(--h) * .65); } }
/* the mark (Figma 750:2015): the logo holds in the middle and the words sit over it, lighting up as you scroll */
.yc-mark { min-height: 200vh; }
.yc-mark__in {
  position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gut); pointer-events: none;
}
.yc-reveal {
  margin: 0; width: 762px; max-width: 100%; text-align: center; text-wrap: balance;
  font: 500 35px/1.25 'General Sans', var(--sans); color: rgba(255, 255, 255, .2);
}
.yc-reveal .w { transition: color .35s ease; }
.yc-mark .yc-mark__in { text-shadow: none; }
.yc-reveal .w.is-lit { color: #fff; }

/* deliverable rows: text in a column at one side, the form on the other */
/* what you get (Figma 750:2018): four columns, top at 101px, 40px sides, 20px gaps */
.yc-offer { min-height: 100vh; padding: 38px max(40px, calc((100% - 1360px) / 2)) 96px; }
/* section label (Figma 774:2720): outlined box, 8px padding, 20px above the tiles */
.yc-label { display: table; margin: 0 0 20px; padding: 8px; border: 1px solid #fff; font: 500 25px/1 'General Sans', var(--sans); color: #fff; white-space: nowrap; }
.yc-offer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1360px; margin: 0 auto; }
.yc-item__media { position: relative; aspect-ratio: 1; background: #000; border: 1px solid #fff; overflow: hidden; }
.yc-item__media video, .yc-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the bar under each tile (Figma 753:2051): fills while that tile's film plays (yc.js) */
.yc-item__bar { height: 4px; background: rgba(255, 255, 255, .2); }
.yc-item__bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
/* the tile whose turn it is stays full; the other three step back (2026-11-11) */
.js .yc-item { opacity: .6; transition: opacity .5s ease; cursor: pointer; }
.js .yc-item:not(.is-on):hover { opacity: .8; }
.js .yc-item.is-on { opacity: 1; }
.yc-item__t { margin: 12px 0 0; font: 500 25px/1.25 'General Sans', var(--sans); color: #fff; text-wrap: balance; }
.yc-item__p { margin: 4px 0 0; font: 500 20px/1.25 'General Sans', var(--sans); color: #fff; opacity: .7; text-wrap: balance; }
.yc-row { min-height: 150vh; }
.yc-row__txt {
  position: sticky; top: calc(50vh - 150px); top: calc(50svh - 150px);
  width: var(--col); margin-top: 25vh;
}
.yc-row--l .yc-row__txt { margin-left: max(var(--gut), 9vw); }
.yc-row--r .yc-row__txt { margin-left: auto; margin-right: max(var(--gut), 9vw); }

/* add-ons (Figma 761:2705): the two groups hold a little above the middle, a 400px column of words centred on each.
   --add-dx (yc.js) is half the distance between the groups. */
.yc-add { min-height: 100vh; } /* a short hold: under half a screen of scroll before the groups start to close (his word, 2026-11-11) */
.yc-add__in { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut) 8vh; pointer-events: none; }
/* the section label (Figma 774:2727): centred; lowered from the frame's 64px on his word (2026-11-11) */
.yc-add__label { position: absolute; top: max(88px, 12vh); left: 50%; transform: translateX(-50%); margin: 0; }
.yc-add__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: max(24px, calc(2 * var(--add-dx, 260px) - 400px)); text-align: center; }
.yc-h3 { margin: 0; font: 500 35px/1.25 'General Sans', var(--sans); color: #fff; text-wrap: balance; }
.yc-add__p { margin: 20px 0 0; font: 500 20px/1.25 'General Sans', var(--sans); color: #fff; opacity: .7; text-wrap: balance; }

/* how it works (Figma 774:2730, second version): the block holds left of centre; the phases are pinned either side
   of it at the frame's places (left as a share of 1440, top as a share of the frame's 852) */
.yc-how { min-height: 170vh; }
.yc-how__in { position: fixed; inset: 0; pointer-events: none; }
/* the label keeps the left edge of What's included */
.yc-how .yc-label { position: absolute; left: max(40px, calc((100% - 1360px) / 2)); top: 84px; margin: 0; }
.yc-phases { list-style: none; margin: 0; padding: 0; }
/* The block is sized by the screen's height (about 21vh either side of its middle, which is at 46.67% across), so
   the phases are set from its edges and never run over it: left ones end 20px before it, right ones start 20px after.
   The four keep the frame's spacing (its px of 852, as vh) and are centred as a group on the block's middle, a
   little under the screen's (53vh): the frame's group runs 121–635, middle 378. */
.yc-phase { position: absolute; top: calc(53vh + (var(--y) - 378) / 852 * 100vh); width: 325px; opacity: .45; transition: opacity .4s ease; }
.yc-phase--l { right: calc(53.33% + 21vh + 20px); }
.yc-phase--r { left: calc(46.67% + 21vh + 20px); }
.yc-phase.is-on { opacity: 1; }
.yc-phase__h { display: flex; align-items: center; gap: 12px; margin: 0; white-space: nowrap; }
.yc-phase__h span { font: 400 20px/1.25 var(--serif); color: #fff; }
.yc-phase__h b { padding: 4px 6px; background: #fff; color: #000; font: 500 25px/1.25 'General Sans', var(--sans); }
.yc-phase__p { margin: 20px 0 0 79px; width: 246px; font: 500 20px/1.25 'General Sans', var(--sans); color: #fff; opacity: .7; text-wrap: balance; }
@media (max-width: 760px) {
  /* narrow screens: the block holds in the top part, the phases are a list under it */
  .yc-how .yc-label { left: var(--gut); top: 76px; }
  .yc-phases { position: absolute; left: var(--gut); right: var(--gut); top: 47vh; top: 47svh; }
  .yc-phase { position: static; margin-top: 14px; width: auto; }
  .yc-phase__h b { font-size: 18px; }
  .yc-phase__h span { font-size: 15px; }
  .yc-phase__p { margin: 6px 0 0; width: auto; max-width: 420px; font-size: 15px; }
}

/* price (Figma 774:2730): pinned like the two sections before it. The label is centred; the figure 10K is about
   36vh either side of the middle (it is sized by the screen's height), and the lists start 28px clear of it. */
.yc-price { min-height: 160vh; }
.yc-price__in { position: fixed; inset: 0; pointer-events: none; }
.yc-price__label { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); margin: 0; }
.yc-price__list { position: absolute; top: 52vh; transform: translateY(-50%); margin: 0; padding: 0 0 0 30px; width: max-content; max-width: min(393px, calc(50% - 36vh - 28px - var(--gut)));
  list-style: disc; font: 500 20px/1.25 'General Sans', var(--sans); color: #fff; text-wrap: balance; }
.yc-price__list--l { right: calc(50% + 36vh + 28px); }
.yc-price__list--r { left: calc(50% + 36vh + 28px); }
.yc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  /* narrow screens: the figure holds in the top part, the two lists run on as one under it */
  .yc-price__in { padding: 0 var(--gut); }
  .yc-price__label { top: 76px; }
  .yc-price__list { position: static; transform: none; width: auto; max-width: none; font-size: 16px; }
  .yc-price__list--l { margin-top: 52vh; margin-top: 52svh; }
}

/* work: cases one under another on solid black, in front of the floor. Same side margins as What's included. */
.yc-work { padding: 38px max(40px, calc((100% - 1360px) / 2)) 16vh; } /* no background on the section or its cases: the cubes show between the pieces (his word, 2026-11-12) */
.yc-work .yc-label { margin-bottom: 0; }
/* selected work (Figma 777:3100): label, then cases 80px apart; in a case everything is 40px apart */
.yc-wk { margin-top: 80px; }
.yc-wk__head { display: flex; align-items: center; gap: 70px; }
.yc-wk__name { margin: 0; font: 400 52px/1.1 var(--serif); letter-spacing: -.012em; color: #fff; white-space: nowrap; }
.yc-wk__p { margin: 0; width: 393px; max-width: 100%; font: 500 20px/1.25 'General Sans', var(--sans); color: #fff; text-wrap: balance; }
.yc-wk__tags { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.yc-wk__tags li { padding: 8px; border: 1px solid #fff; font: 500 20px/1 'General Sans', var(--sans); color: #fff; white-space: nowrap; }
.yc-wk__rows { display: grid; gap: 40px; margin-top: 40px; }
.yc-wk__row { display: grid; gap: 40px; }
.yc-wk__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yc-wk__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yc-wk__row--wide { grid-template-columns: minmax(0, 893fr) minmax(0, 427fr); }
.yc-wk__row--ask { grid-template-columns: minmax(0, 427fr) minmax(0, 893fr); }
.yc-wk__row--street { grid-template-columns: minmax(0, 1094fr) minmax(0, 1231fr) minmax(0, 1094fr); }
.yc-tile--line { background: #000; outline: .3px solid #EE6018; outline-offset: -.3px; }
.yc-tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a live piece of another page, seen through the tile (yc-work.js places the frame) */
.yc-embed { background: #000; }
.yc-embed iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.yc-embed.is-in iframe { opacity: 1; }
.yc-embed[data-live] iframe { pointer-events: auto; }
.yc-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.yc-tile { position: relative; margin: 0; aspect-ratio: var(--r, 1); overflow: hidden; background: #111; }
.yc-tile--6 { grid-column: span 6; } .yc-tile--3 { grid-column: span 3; } .yc-tile--2 { grid-column: span 2; }
.yc-tile img, .yc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .yc-work { padding: 88px var(--gut) 12vh; }
  .yc-wk { margin-top: 56px; }
  .yc-wk__head { flex-wrap: wrap; gap: 12px 20px; }
  .yc-wk__name { font-size: 32px; }
  .yc-wk__p { width: 100%; order: 3; font-size: 17px; }
  .yc-wk__tags li { font-size: 16px; padding: 6px; }
  .yc-wk__rows, .yc-wk__row { gap: 8px; }
  .yc-wk__rows { margin-top: 24px; }
  /* the rows stay rows on phones: three in a row is still three in a row, only small (his word, 2026-11-12) */
  .yc-mosaic { gap: 6px; }
  .yc-tile--2 { grid-column: span 3; } .yc-tile--2:nth-of-type(6) { grid-column: span 6; --r: 16/10; }
}
.yc-cards { margin-top: 96px; }
.yc-cards { max-width: 1400px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.yc-card { display: flex; flex-direction: column; text-decoration: none; background: #0B0B0B; border-radius: 2px; overflow: hidden; }
.yc-card__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.yc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.yc-card:hover .yc-card__img img { transform: scale(1.035); }
.yc-card__t { display: block; padding: 18px 18px 24px; }
.yc-card__t b { display: block; font: 400 30px/1 var(--serif); margin-bottom: 10px; }
.yc-card__t span { display: block; font-size: 15px; line-height: 1.45; color: var(--dim); }
.yc-logos {
  max-width: 1400px; margin: 72px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px;
}
.yc-logos img { height: var(--h); width: auto; opacity: .6; filter: brightness(0) invert(1); }

/* questions (Figma 775:2803): label centred at 137, a 640px column of bordered rows from 225; the rows share
   their borders. A closed row is the question with 8px round it; the open one has 12/20px and the answer under it. */
.yc-faq { min-height: 100vh; padding: 137px var(--gut) 140px; }
.yc-faq .yc-label { margin: 0 auto 45px; }
.yc-faq__list { width: 640px; max-width: 100%; margin: 0 auto; }
.yc-q { margin-top: -1px; padding: 8px; border: 1px solid #fff; font: 500 25px/1.25 'General Sans', var(--sans); color: #fff; }
.yc-q[open] { padding: 12px 20px; }
.yc-q summary { list-style: none; cursor: pointer; text-wrap: balance; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
/* plus at the right of each question; it turns to a cross while the row is open */
.yc-q summary::after {
  content: ''; flex: none; width: 17px; height: 17px; margin: 7px 2px 0 0;
  background: linear-gradient(#fff, #fff) center / 17px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 17px no-repeat;
  transition: transform .3s ease;
}
.yc-q[open] summary::after { transform: rotate(45deg); margin-right: -8px; }
.yc-q summary::-webkit-details-marker { display: none; }
.yc-q p { margin: 8px 0 0; opacity: .7; text-wrap: balance; } /* 8px between question and answer (his word; the frame had 20) */
.yc-q summary:focus:not(:focus-visible) { outline: none; } /* no ring after a mouse click; the keyboard keeps it */
@media (max-width: 760px) {
  .yc-faq { padding: 96px var(--gut) 96px; }
  .yc-faq .yc-label { margin-bottom: 28px; }
  .yc-q { font-size: 19px; }
  .yc-q[open] { padding: 12px 14px; }
}

/* close */
/* book a slot (Figma 777:2949): pinned like the sections before it; the label, the headline and the button in one
   centred column, 40px apart, inside the frame of cubes (yc.js gives the width of its opening as --slot-in) */
.yc-close { min-height: 150vh; }
.yc-close__in { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  padding: 0 var(--gut); text-align: center; pointer-events: none; }
.yc-close__in > * { max-width: var(--slot-in, 100%); }
.yc-close .yc-lab { font-size: 25px; text-shadow: none; }
.yc-h1--close { margin-bottom: 0; }
.yc-close .yc-btn { height: auto; padding: 8px 20px; border-radius: 0; font-size: 25px; line-height: 1.35; text-shadow: none; pointer-events: auto; }
.yc-btn {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 2px;
  background: #fff; color: #000; text-decoration: none; font: 500 17px/1 var(--sans); letter-spacing: .15px;
  transition: background-color .2s ease, transform .2s ease;
}
.yc-btn:hover { background: var(--accent); }
.yc-btn:active { transform: translateY(1px); }


.yc-foot {
  background: #000; display: flex; justify-content: space-between; gap: 16px; padding: 24px var(--gut) 28px;
  font-size: 13px; color: var(--faint);
}
.yc-foot a { text-decoration: none; }
.yc-foot a:hover { color: var(--ink); }

/* text over the field stays readable */
.yc-row__txt, .yc-mark__in, .yc-close__in {
  text-shadow: 0 0 24px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .6);
}

/* reveal: section text fades up when it arrives */
.js .yc-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .yc-rv.is-in { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .yc-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .yc-head__r { gap: 24px; }
  .yc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .yc-offer { padding: 88px var(--gut) 64px; }
  .yc-label { font-size: 22px; }
  .yc-offer__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .yc-item__t { font-size: 22px; }
  .yc-item__p { font-size: 17px; }
  :root { --gut: 16px; }
  .yc-head { height: 64px; padding: 16px var(--gut); }
  .yc-head__nav { display: none; }
  .yc-h1 { font-size: 32px; }
  .yc-hero { gap: 24px; padding-top: 112px; }
  .yc-lab, .yc-sub { font-size: 17px; }
  .yc-lab { gap: 20px; }
  .yc-lab__a, .yc-lab__b { padding: 3px 6px; }
  .yc-sub { text-wrap: balance; }
  .yc-sub { min-width: 0; }
  .yc-sub > span { display: inline; white-space: normal; }
  .yc-h2 { font-size: 32px; }
  .yc-add__in { align-items: flex-start; padding: 54vh var(--gut) 0; padding-top: 54svh; }
  .yc-add__label { top: 76px; }
  .yc-add__cols { grid-template-columns: 1fr; gap: 20px; }
  .yc-h3 { font-size: 24px; }
  .yc-add__p { margin-top: 6px; font-size: 16px; }
  .yc-card__img { aspect-ratio: 1; }
  /* phones: the form holds in the top half, the words pin under it for as long as the form holds */
  /* phones: the form holds in the top half and its words hold under it. The words are fixed and shown only
     while their form holds (yc.js fades them with the form), so they never run over it. */
  .yc-row__txt, .yc-row--l .yc-row__txt, .yc-row--r .yc-row__txt {
    position: fixed; left: 0; right: 0; top: 52vh; top: 52svh; bottom: auto; width: auto; margin: 0; padding: 0 var(--gut);
  }
  .yc-reveal { font-size: 24px; }
  .yc-row { min-height: 150vh; }
  .yc-cards { grid-template-columns: 1fr; }
  .yc-logos { justify-content: center; }
  .yc-close__in { gap: 28px; }
  .yc-close .yc-lab { font-size: 19px; gap: 20px; }
  .yc-close .yc-h1 { font-size: 25px; }
  .yc-close .yc-btn { font-size: 20px; }
  .yc-foot { flex-direction: column; }
}
/* short laptop screens: the pinned blocks have to fit between the header and the bottom edge */
@media (min-width: 761px) and (max-height: 800px) {
}
@media (prefers-reduced-motion: reduce) {
  .js .yc-item { opacity: 1; transition: none; }
  .js .yc-rv { opacity: 1; transform: none; transition: none; }
}

/* The pinned words of every section wait below the screen until the page has measured itself and yc.js places them.
   Without this they all sit on top of each other for the first moments of a load (seen live, 2026-11-12). They are
   moved, not hidden, so page readers and the agent twin still get their text. Without script they run in the page. */
.js .yc-mark__in, .js .yc-add__in, .js .yc-how__in, .js .yc-price__in, .js .yc-close__in { transform: translateY(200vh); }
html:not(.js) .yc-mark__in, html:not(.js) .yc-add__in, html:not(.js) .yc-how__in, html:not(.js) .yc-price__in, html:not(.js) .yc-close__in { position: static; }

/* ---- after the review of the live page, 2026-11-12 ---- */
.yc-tile--contain video { object-fit: contain; }
/* without script nothing hides the companies row on scroll, so it must not be pinned */
html:not(.js) .yc-hero .yc-logos--hero { position: static; margin-top: 48px; flex-wrap: wrap; }
.yc-foot { color: rgba(255, 255, 255, .6); }
@media (max-width: 760px) {
  /* phones: the add-ons hold a little longer because the next
     section's words now take a full screen to arrive (yc.js), so two sections' words never share the screen */
  .yc-price__list { font-size: 15px; }
  .yc-add { min-height: 150vh; }
}

/* ---- phones, his notes of 2026-11-12 ---- */
@media (max-width: 760px) {
  /* what's included: every tile at full strength, no progress bar */
  .js .yc-item { opacity: 1; cursor: default; }
  .yc-item__bar { display: none; }
  .yc-offer { padding-bottom: 30vh; } /* room before "Need more?" */
  /* need more: Website above, More product below, one group of cubes behind each */
  .yc-add__in { align-items: stretch; padding: 14vh var(--gut) 6vh; padding: 14svh var(--gut) 6svh; text-shadow: 0 0 18px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .7); }
  .yc-add__cols { width: 100%; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 0; align-items: center; }
  .yc-add__p { opacity: .85; }
  /* how it works: one big block behind the phases, which sit in the middle of the screen */
  .yc-phases { top: 50%; transform: translateY(-46%); text-shadow: 0 0 18px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .8); }
  .yc-phase { opacity: 1; }
  .yc-phase__h b { text-shadow: none; }
  .yc-phase__p { opacity: .9; }
}

/* The release adds a link to the page's agent twin as the first thing in <body>. It is for keyboards and agents:
   off screen until it has the focus, as site.css has it on every other page. This page does not load site.css,
   so the link sat in plain sight at the top left (seen live, 2026-11-12). */
.machine-skip { position: absolute; left: 20px; top: -120px; z-index: 1000; padding: 8px 10px; background: #000; color: #fff; font-size: 15px; text-decoration: none; }
.machine-skip:focus { top: 12px; }
/* The cubes come in as one soft fade once their first frame is drawn, not as a pop after the words */
.js .yc-stage { opacity: 0; transition: opacity 1.1s cubic-bezier(.2, .6, .2, 1); }
.js .yc-stage.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .yc-stage { transition: none; } }

/* the companies row runs the full width of the page on wide screens, edge to edge of the content (his word, 2026-11-12) */
@media (min-width: 761px) { .yc-hero .yc-logos--hero { justify-content: space-between; gap: 16px; } }

/* phones: the companies in two rows, five and four (nine cannot be split evenly), each logo in an equal fifth of the row (his word, 2026-11-12) */
@media (max-width: 760px) {
  .yc-hero .yc-logos--hero { flex-wrap: wrap; justify-content: center; gap: 14px 0; bottom: 24px; }
  .yc-hero .yc-logos--hero img { flex: 0 0 20%; width: 20%; max-width: 20%; height: calc(var(--h) * .6); object-fit: contain; padding: 0 5px; box-sizing: border-box; }
}

/* Phone Safari floats its toolbar over the page and paints what is behind it from the colour of a fixed element at
   the screen's edge, not from the page itself (the method is Josh Puckett's "fixed edge bar", after WebKit's own
   sampling). Without one, the bar sat on a black band under the orange first screen (seen on his phone,
   2026-11-12). A strip at the bottom edge carries the colour of what is there: the cubes' orange on the first
   screen, black once it is scrolled (--edge, set in yc.js). Five of its twelve pixels are on screen, which is what
   Safari needs to read it; a short fade above it joins it to the page. Touch phones only. */
.yc-edge, .yc-edge-fade { display: none; }
@media (max-width: 760px) and (hover: none) {
  /* The strip must be a real element that is itself fixed. Safari finds the element at a point 4px above the bottom
     edge and walks up from it looking for a fixed box wider than 90% of the screen and more than 10px thick, and
     takes that box's background colour (WebKit, LocalFrameView::fixedContainerEdges). A pseudo-element is resolved
     to its host first, so a strip drawn as ::after on a plain block is never seen: that was the first version here. */
  .yc-edge { display: block; position: fixed; left: 0; right: 0; bottom: -7px; height: 12px; z-index: 9; pointer-events: none; background-color: var(--edge, #000); }
  .yc-edge-fade { display: block; position: fixed; left: 0; right: 0; bottom: 5px; height: 48px; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--edge, #000), transparent); opacity: .85; } /* under the page's own things (the companies row), over the cubes */
}

/* ---- a piece of work, opened (the gallery's detail view, in this page's dress; his word, 2026-11-12) ---- */
.js .yc-wk .yc-tile { cursor: zoom-in; }
.js .yc-wk .yc-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.yc-view[hidden] { display: none; }
.yc-view { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(28px) saturate(1.1); backdrop-filter: blur(28px) saturate(1.1);
  opacity: 0; transition: opacity .3s ease; font: 500 15px/1.25 'General Sans', var(--sans); color: #fff; }
.yc-view.in { opacity: 1; }
.yc-view__top { position: absolute; top: 20px; right: var(--gut); z-index: 2; }
.yc-view__top .yc-chip { border: 0; cursor: pointer; }
.yc-view__keys { position: absolute; top: 20px; left: var(--gut); height: 32px; display: flex; align-items: center; gap: 20px; color: rgba(255, 255, 255, .6); }
.yc-view__keys > span { display: flex; align-items: center; gap: 6px; }
.yc-view kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; background: rgba(255, 255, 255, .14); font: inherit; font-size: 12px; color: #fff; }
.yc-view__stage { position: absolute; inset: 76px var(--gut) 96px; display: flex; align-items: center; justify-content: center; }
.yc-view__piece { position: relative; overflow: hidden; background: #000; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); transform: scale(.985); opacity: 0;
  transition: opacity .25s ease, transform .45s cubic-bezier(0, .01, .38, .95); }
.yc-view__piece.in { opacity: 1; transform: none; }
.yc-view__piece > img, .yc-view__piece > video, .yc-view__piece > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yc-view__piece.yc-tile--contain > video { object-fit: contain; }
.yc-view__piece.yc-embed iframe { pointer-events: auto; }
/* the left and right halves of the piece go back and on (touch screens swipe) */
.yc-view__nav { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; border: 0; padding: 0; background: none; }
.yc-view__nav--prev { left: 0; cursor: w-resize; } .yc-view__nav--next { right: 0; cursor: e-resize; }
.yc-view__meta { position: absolute; left: var(--gut); right: var(--gut); bottom: 28px; display: flex; align-items: center; gap: 12px; padding-right: 90px; }
.yc-view__meta b { flex: none; padding: 4px 8px; border: 1px solid #fff; font: 500 15px/1 'General Sans', var(--sans); }
.yc-view__meta span { min-width: 0; font-size: 17px; line-height: 1.25; text-wrap: balance; }
.yc-view__count { position: absolute; right: var(--gut); bottom: 30px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .yc-view__keys { display: none; }
  .yc-view__top { top: 16px; }
  .yc-view__stage { inset: 64px 12px 128px; }
  .yc-view__meta { bottom: 44px; align-items: flex-start; flex-direction: column; gap: 8px; padding-right: 0; }
  .yc-view__meta span { font-size: 15px; }
  .yc-view__count { bottom: 16px; left: 0; right: 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .yc-view, .yc-view__piece { transition: none; } }