/* Look 1, "Title", for the inner pages (Jo's pick, 9 Nov 2026 09:32; prototype: Pablo's job 20261109-073137, look-1).
   Type is the frame: giant condensed Archivo carries every block, and films and stills play inside the letters (a knockout:
   the heading sits in ink on a paper layer blended with lighten over the film, so the film shows through the letters in its
   own colour and the paper stays paper). Every word is visible with scripts off; reveal states are set by title.js only.
   One red element per section (DESIGN.md): the button, a rule, or the step number you are on. Loaded after styles.css on
   the five pages built with tools/v2/title.html (part 1: Video production, Photography, Prices, Ads, Shoot and ads). */
.t1-main { --t1-g: clamp(16px, 3vw, 48px); --t1-ease: cubic-bezier(0.22, 1, 0.36, 1); overflow-x: clip; }
.t1-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--t1-g); position: relative; }
.t1-main a:focus-visible, .t1-pp:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* the knockout: one real heading in ink on paper, blended over the film; an outline copy keeps the letters on bright frames */
.ko { position: relative; isolation: isolate; overflow: clip; }
.ko-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); z-index: 0; }
/* .16em under the last line: the knockout cuts off anything outside its box, so the tails of p and g ("Cape", "together")
   need room of their own (at .07em they lost 2 to 12 px, job 20261109-113648) */
.ko-t { position: relative; z-index: 1; margin: 0; padding: .04em 0 .16em; background: var(--paper); color: var(--ink); mix-blend-mode: lighten;
  font-family: Archivo, sans-serif; font-weight: 900; font-stretch: 62%; line-height: .82; letter-spacing: -.01em; }
.ko-o { position: absolute; inset: 0; z-index: 2; background: transparent; color: transparent; mix-blend-mode: normal; -webkit-text-stroke: 1px var(--ink); pointer-events: none; }
.ko-a { display: inline-block; white-space: nowrap; }
.ko-br { display: block; }

/* the first screen */
.t1-hero { padding: 8px 0 clamp(56px, 7vw, 104px); }
/* the first screens' titles run .9 between lines, not .82: at .82 a tail met the line under it (the overlap check, job
   20261109-113708: the g of "Google" on the M of "Meta", the p of "product" on the t of "photography", the p of
   "production" on "in" and of "planned" on "together" on a phone) */
.ko-hero .ko-t, .ko-photo .ko-t { line-height: .9; }
.t1-ads .ko-hero .ko-t { line-height: .95; }   /* at .9 the g of "Google" still met the M of "Meta" edge to edge */
.t1-hero .wk-crumb ol { margin-bottom: clamp(14px, 2vw, 26px); }
.ko-hero .ko-t { font-size: min(16.1vw, 238px); }
.t1-hero-foot { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: clamp(18px, 2.4vw, 34px); align-items: start; }
.t1-hero-foot .lead { grid-column: 6 / 13; margin: 0; max-width: 40em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.t1-hero-foot .ctas { grid-column: 6 / 13; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.t1-pp { position: absolute; left: 0; top: 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 14px/1 Archivo, sans-serif; cursor: pointer; }
.t1-pp:hover { background: var(--line); }
.t1-end .t1-pp { position: static; display: block; margin-top: 16px; }
.t1-end .t1-pp[hidden] { display: none; }
html.t1-motion .t1-wait { opacity: 0; }
.t1-h1 { margin: 0; font-family: Archivo, sans-serif; font-weight: 900; font-stretch: 62%; font-size: min(10.6vw, 156px); line-height: .84; letter-spacing: -.01em; color: var(--ink); }

/* block titles: giant condensed, split into letters by the script */
.t1-h2 { margin: 0 0 clamp(28px, 4vw, 56px); font-family: Archivo, sans-serif; font-weight: 900; font-stretch: 62%; font-size: clamp(60px, 9.2vw, 148px); line-height: .84; letter-spacing: -.01em; }
.t1-main .t1-h2, .t1-main .wk-h2 { color: var(--ink); letter-spacing: -.01em; text-transform: none; }
.t1-sec { padding: clamp(80px, 10vw, 168px) 0 0; }
.t1-rule { display: block; height: 2px; background: var(--red); transform-origin: 0 50%; margin-bottom: -1px; position: relative; z-index: 1; }
.t1-rule.gap { margin-top: clamp(24px, 3vw, 40px); }

/* Recent films (Video production): the credits roll; a still list with scripts off, under reduced motion and on a phone */
.t1-films { padding: clamp(48px, 6vw, 96px) 0 0; }
.roll-list { list-style: none; margin: 0; padding: 0; }
.roll-list li { border-top: 1px solid var(--line); }
.roll-list a { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 28px) 0; color: var(--ink); text-decoration: none; }
.roll-n { order: 1; font-weight: 900; font-stretch: 62%; font-size: clamp(56px, 7.4vw, 118px); line-height: .86; letter-spacing: -.01em; max-width: 13ch; }
.roll-f { order: 2; position: relative; z-index: 1; display: block; width: min(100%, 860px); aspect-ratio: 16 / 9; margin-top: -.28em; margin-left: auto; font-size: clamp(56px, 7.4vw, 118px); background: var(--surface); border-radius: 12px; overflow: hidden; }
.roll-f video, .roll-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.roll-s { order: 3; margin-top: 14px; font-size: 17px; line-height: 1.4; color: var(--grey); }
.roll-list a:hover .roll-n, .roll-list a:focus-visible .roll-n { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }
.roll-screen, .roll-bar, .roll-count { display: none; }
@media (min-width: 761px) {
  .roll-list a { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .roll-n { grid-column: 1; grid-row: 1; }
  .roll-s { grid-column: 1; grid-row: 2; }
  .roll-f { grid-column: 2; grid-row: 1 / 3; width: 100%; margin: 0; }
  /* desktop with motion: the pinned stage, names left, one film screen right, changed with Turn's diagonal wipe */
  html.t1-motion .roll-stage { height: 100vh; display: flex; flex-direction: column; padding-top: 72px; box-sizing: border-box; }
  html.t1-motion .roll-stage .t1-h2 { margin-bottom: 12px; font-size: clamp(40px, 4.4vw, 72px); }
  html.t1-motion .roll-view { position: relative; flex: 1; overflow: clip; }
  html.t1-motion .roll-list { position: absolute; left: 0; top: 0; width: calc(54% - clamp(24px, 3vw, 48px)); will-change: transform; }
  html.t1-motion .roll-list li { border-top: 0; }
  html.t1-motion .roll-list a { display: flex; padding: 2.2vh 0; }
  html.t1-motion .roll-f { display: none; }
  html.t1-motion .roll-n { color: var(--grey); max-width: none; font-size: clamp(56px, 8vw, 128px); transition: color .5s var(--t1-ease); }
  html.t1-motion .roll-s { order: 2; margin-top: 10px; }
  html.t1-motion .roll-list li.is-on .roll-n, html.t1-motion .roll-list li.is-on .roll-s { color: var(--ink); }
  html.t1-motion .roll-dock { position: absolute; right: 0; top: 50%; width: 46%; transform: translateY(-50%); z-index: 3; }
  html.t1-motion .roll-screen { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--surface); }
  html.t1-motion .rs-l { position: absolute; inset: 0; }
  html.t1-motion .rs-l:not(:first-child) { clip-path: polygon(0% 0%, 0% 0%, -24% 100%, 0% 100%); }
  html.t1-motion .rs-l video { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.t1-motion .roll-bar { display: block; height: 3px; margin-top: 16px; transform-origin: 0 50%; background: var(--red); }
  html.t1-motion .roll-count { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
}

/* What you get: big type rows under one red rule */
.get-list { list-style: none; margin: 0; padding: 0; position: relative; }
.get-list li { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: end; padding: clamp(18px, 2.2vw, 32px) 0; border-top: 1px solid var(--line); }
.get-list b { font-weight: 850; font-stretch: 62%; font-size: clamp(48px, 6.6vw, 104px); line-height: .88; letter-spacing: -.01em; }
.get-list span { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; max-width: 30em; padding-bottom: .3em; }

/* the steps: giant numbers in grey; the one red is the number of the step you are reading (step 1 without motion), as the
   looks re-check set it (job 20261109-092715) */
.how-list { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.how-list li { counter-increment: s; display: grid; grid-template-columns: minmax(80px, 2.2fr) 9.8fr; gap: 24px; align-items: start; padding: clamp(16px, 2vw, 28px) 0; border-top: 1px solid var(--line); }
.how-list li::before { content: counter(s); color: var(--grey); font-weight: 900; font-stretch: 62%; font-size: clamp(88px, 11vw, 176px); line-height: .78; transition: color .4s var(--t1-ease); }
html:not(.t1-motion) .how-list li:first-child::before, html.t1-motion .how-list li.is-on::before { color: var(--red); }
.how-list span { font-weight: 650; font-stretch: 82%; font-size: clamp(24px, 2.9vw, 46px); line-height: 1.1; letter-spacing: -.005em; max-width: 24em; padding-top: .1em; }
.how-list.named span { font-weight: 400; font-stretch: 100%; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; max-width: 34em; padding-top: 0; }
.how-list.named b { display: block; margin-bottom: .32em; font-weight: 900; font-stretch: 62%; font-size: clamp(40px, 5.2vw, 84px); line-height: .9; letter-spacing: -.01em; }

/* Shoot and ads, How it runs: on a desktop with motion one giant red number stays beside the steps and rolls to the one
   you are reading (an odometer), and the list's own numbers step aside */
.odo { display: none; }
@media (min-width: 761px) {
  html.t1-motion .odo-wrap { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
  html.t1-motion .odo { display: block; position: sticky; top: calc(50vh - .5 * min(26vw, 380px)); height: 1em; overflow: hidden; color: var(--red);
    font-weight: 900; font-stretch: 62%; font-size: min(26vw, 380px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  html.t1-motion .odo-strip { display: flex; flex-direction: column; will-change: transform; }
  html.t1-motion .odo-strip span { display: block; height: 1em; }
  html.t1-motion .odo-wrap .how-list li { grid-template-columns: 1fr; padding: clamp(28px, 4vh, 48px) 0 clamp(48px, 9vh, 96px); }
  html.t1-motion .odo-wrap .how-list li::before { display: none; }
  html.t1-motion .odo-wrap .how-list li b { transition: color .4s var(--t1-ease); color: var(--grey); }
  html.t1-motion .odo-wrap .how-list li.is-on b { color: var(--ink); }
}

/* Ads, What we do: on a desktop with motion the six verbs run sideways past a pinned frame, the one in the middle in ink,
   a red line filling under them; elsewhere a still list of giant verbs */
.trk-list { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.trk-list li { counter-increment: s; display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: end; padding: clamp(18px, 2.2vw, 32px) 0; border-top: 1px solid var(--line); }
.trk-list b { font-weight: 900; font-stretch: 62%; font-size: clamp(64px, 10vw, 168px); line-height: .84; letter-spacing: -.015em; }
.trk-list span { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; max-width: 26em; padding-bottom: .3em; }
.trk-bar { display: none; }
@media (min-width: 761px) {
  html.t1-motion .trk-stage { height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-top: 64px; }
  html.t1-motion .trk-view { overflow: clip; }
  html.t1-motion .trk-stage .t1-h2 { margin-bottom: clamp(16px, 3vh, 40px); font-size: clamp(40px, 4.4vw, 72px); }
  html.t1-motion .trk-list { display: flex; gap: clamp(40px, 5vw, 96px); width: max-content; will-change: transform; }
  html.t1-motion .trk-list li { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: clamp(320px, 30vw, 520px); padding: 24px 0 0; }
  /* the verbs sit tight at .84, so their descenders (the p of Report., the g of Go again.) get room of their own under them */
  html.t1-motion .trk-list b { font-size: clamp(96px, 15vw, 260px); padding-bottom: .2em; color: var(--grey); transition: color .45s var(--t1-ease); white-space: nowrap; }
  html.t1-motion .trk-list span { max-width: 26em; }
  html.t1-motion .trk-list li.is-on b { color: var(--ink); }
  html.t1-motion .trk-bar { display: block; height: 3px; margin-top: clamp(24px, 4vh, 48px); background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
}

/* the display paragraphs: What it costs, Why one team, How ad spend works, Ads Jo has made */
.cost-p { margin: 0; max-width: 24em; font-weight: 750; font-stretch: 72%; font-size: clamp(32px, 4.6vw, 74px); line-height: 1.02; letter-spacing: -.01em; }
.cost-p a, .t1-big a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .07em; text-underline-offset: .1em; }
.cost-p a:hover, .t1-big a:hover { color: var(--red); }
.t1-big { margin: 0 0 .6em; max-width: 30em; font-weight: 650; font-stretch: 82%; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.14; }
.t1-big b { font-weight: 900; font-stretch: 62%; font-size: 1.5em; line-height: .9; letter-spacing: -.01em; }
.proof .t1-big { padding: clamp(20px, 2.4vw, 34px) 0 0; border-top: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 44px); }

/* Questions: quiet, two columns, every answer showing */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 72px); }
.faq-grid > div { padding: 24px 0 28px; border-top: 1px solid var(--line); }
.faq-grid h3 { margin: 0 0 10px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; font-weight: 700; font-stretch: 90%; }
.faq-grid p { margin: 0; font-size: 17px; line-height: 1.55; max-width: 36em; }
.faq-grid a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* the call block */
.t1-end { padding: clamp(96px, 12vw, 200px) 0 clamp(72px, 8vw, 120px); }
.ko-end .ko-t { font-size: min(16.2vw, 236px); }
.t1-end .sv-end { margin: clamp(22px, 2.6vw, 36px) 0 0; max-width: 34em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; }
.t1-end .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.t1-more { margin-top: clamp(72px, 8vw, 128px); }
.t1-more .wk-h2 { margin: 0 0 8px; font-weight: 900; font-stretch: 62%; font-size: clamp(40px, 4.4vw, 72px); line-height: .9; }
.t1-more ul { list-style: none; margin: 0; padding: 0; }
.t1-more li { border-top: 1px solid var(--line); }
.t1-more a { display: block; padding: 14px 0; color: var(--ink); text-decoration: none; font-weight: 750; font-stretch: 72%; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; }
.t1-more a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }

/* Prices: each price row a giant type row */
.t1-price { width: 100%; border-collapse: collapse; }
.t1-price .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t1-price tr { border-top: 1px solid var(--line); }
.t1-price th, .t1-price td { padding: clamp(18px, 2vw, 30px) 0; vertical-align: bottom; text-align: left; }
.t1-price th { font-weight: 900; font-stretch: 62%; font-size: clamp(44px, 6vw, 96px); line-height: .88; letter-spacing: -.01em; width: 40%; padding-right: 24px; }
.t1-price td:nth-child(2) { font-size: 17px; line-height: 1.45; color: var(--ink); padding-right: 24px; max-width: 26em; padding-bottom: calc(clamp(18px, 2vw, 30px) + .2em); }
.t1-price td:nth-child(3) { font-weight: 900; font-stretch: 62%; font-size: clamp(36px, 4.6vw, 76px); line-height: .9; text-align: right; white-space: nowrap; }
.t1-intro { margin: 0; max-width: 40em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; }
.t1-note { margin: clamp(22px, 2.4vw, 32px) 0 0; max-width: 46em; font-size: 16px; line-height: 1.55; color: var(--grey); }
.t1-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Photography: "Recent photos" with stills breaking through, then the grid */
.ph-head { position: relative; }
/* the stills sit beside the title and drift there, never crossing it: drawn over it they covered letters (the overlap check,
   job 20261109-113708), drawn under it the letters sat on the food (that job's review, round 1). The title is only as wide
   as its words, a little smaller than before, so the three stills keep the right of the line to themselves */
.ph-head .t1-h2 { font-size: min(12.6vw, 184px); margin: 0; width: fit-content; position: relative; z-index: 1; }
.ph-cut { position: absolute; z-index: 2; margin: 0; border-radius: 12px; overflow: hidden; background: var(--surface); }
.ph-cut img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cut.c1 { width: 8.5%; aspect-ratio: 2 / 3; right: 18%; top: 0; }
.ph-cut.c2 { width: 8.5%; aspect-ratio: 2 / 3; right: 0; top: 10%; }
.ph-cut.c3 { width: 7.5%; aspect-ratio: 2 / 3; right: 9.5%; top: 15%; }
.ph-grid { list-style: none; margin: clamp(40px, 5vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1vw, 16px); }
.ph-grid li:nth-child(5n + 2), .ph-grid li:nth-child(5n + 4) { transform: translateY(clamp(24px, 4vw, 64px)); }
.ph-grid a { display: block; border-radius: 12px; overflow: hidden; background: var(--surface); }
.ph-grid img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.ph-credit { margin: clamp(48px, 6vw, 96px) 0 0; color: var(--grey); font-size: 15px; }
.ko-photo .ko-t { font-size: min(10.4vw, 152px); }
.ko-photo .ko-a { display: block; }

/* each page's first screen, sized so its longest line fills the width */
/* Video production stops at 226px: at 238px (and still at 232px) "production" left "Video" for a line of its own on wide
   screens, and its p came down on the i of "in" (the overlap check, job 20261109-113708) */
.t1-video-production .ko-hero .ko-t { font-size: min(16.1vw, 226px); }
.t1-ads .ko-hero .ko-t { font-size: min(14.6vw, 214px); }
.t1-shoot-and-ads .ko-hero .ko-t { font-size: min(12.6vw, 186px); }

/* the phone */
@media (max-width: 760px) {
  /* a little more ink on the outline at phone sizes, so pale frames keep the letters' shape */
  .ko-o { -webkit-text-stroke-width: 1.5px; }
  .ko-hero .ko-t { font-size: 20.2vw; }
  .ko-hero .ko-a { display: block; }
  .t1-ads .ko-hero .ko-t { font-size: 17.6vw; }
  /* on a phone "production" sits right over "in": its p needs a full line's room above the dot of the i */
  .t1-video-production .ko-hero .ko-t { line-height: 1; }
  .t1-shoot-and-ads .ko-hero .ko-t { font-size: 16.4vw; }
  .t1-hero-foot { display: flex; flex-direction: column; gap: 16px; }
  .t1-hero-foot.has-pp { padding-bottom: 60px; }
  .t1-hero-foot .t1-pp { top: auto; bottom: 0; }
  .t1-h1 { font-size: 12.4vw; }
  .t1-h2 { font-size: 17vw; }
  .get-list li, .trk-list li { grid-template-columns: 1fr; gap: 10px; }
  .get-list b { font-size: 15vw; }
  .trk-list b { font-size: 21vw; }
  .how-list li { grid-template-columns: 64px 1fr; gap: 14px; }
  .how-list li::before { font-size: 76px; }
  .how-list span { font-size: 22px; }
  .how-list.named span { font-size: 17px; }
  .how-list.named b { font-size: 11vw; }
  /* each film breaks into the bottom of its name, with the name on top, so no letter loses its tail (the y of OneDayOnly
     and Family read as v under the film; the looks re-check, job 20261109-092715, found it) */
  .roll-n { font-size: 15.4vw; position: relative; z-index: 2; }
  /* and a paper rim under each letter, seen only where it crosses the film, so a tail holds on the darkest frame (the y of
     Family on Backsberg's near-black poster, round 1 of job 20261109-113648) */
  @supports (paint-order: stroke fill) { .roll-n { -webkit-text-stroke: 4px var(--paper); paint-order: stroke fill; } }
  .roll-f { font-size: 15.4vw; width: 88%; margin-top: -.16em; }
  .faq-grid { grid-template-columns: 1fr; }
  .ko-end .ko-t { font-size: 16.4vw; }
  .t1-price, .t1-price tbody, .t1-price tr, .t1-price th, .t1-price td { display: block; width: auto; }
  .t1-price th { padding: 20px 0 6px; font-size: 13vw; }
  .t1-price td:nth-child(2) { padding: 0 0 10px; }
  .t1-price td:nth-child(3) { text-align: left; padding: 0 0 20px; font-size: 11vw; }
  .ko-photo .ko-t { font-size: 11.9vw; }
  .ph-head .t1-h2 { font-size: 21.5vw; }
  .ph-cut.c1 { width: 27%; left: auto; right: 2%; top: -8%; }
  .ph-cut.c2, .ph-cut.c3 { display: none; }
  .ph-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-grid li:nth-child(5n + 2), .ph-grid li:nth-child(5n + 4) { transform: none; }
  .ph-grid li:nth-child(2n) { transform: translateY(32px); }
}
@media (prefers-reduced-motion: reduce) { .roll-n, .how-list li::before { transition: none; } }

/* Part 2 (job 20261109-113708): Work, About, Contact and Made with AI on the same system */

/* Work: each client's name is its own knockout, its film (or still) playing inside the letters; the kind and tag beside it */
.t1-work .ko-hero .ko-t { font-size: min(22vw, 316px); }
.t1-index { padding-top: clamp(24px, 3vw, 48px); }
.t1-index .wk-key { margin: 0 0 clamp(28px, 3vw, 44px); max-width: 46em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: var(--ink); }
.ix-list { list-style: none; margin: 0; padding: 0; }
.ix-list li { border-top: 1px solid var(--line); }
.ix-list a { display: grid; grid-template-columns: 9fr 3fr; column-gap: clamp(24px, 3vw, 48px); align-items: end; padding: clamp(18px, 2.2vw, 32px) 0; color: var(--ink); text-decoration: none; }
.ko-ix .ko-t { font-size: clamp(64px, 8.6vw, 140px); }
.ix-n { display: block; }
.ix-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: .5em; }
.ix-meta small { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.4; color: var(--ink); }
.ix-meta .ptag { margin: 0; transition: background-color .3s var(--t1-ease), color .3s var(--t1-ease); }
.ix-list a:focus-visible { outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .ix-list a:hover .ptag { background: var(--ink); color: var(--paper); }
  .ix-list a:hover .ko-o { -webkit-text-stroke-width: 2px; }
}
.t1-index .wk-recs { margin: clamp(64px, 8vw, 128px) 0 0; padding-top: clamp(20px, 2.4vw, 34px); max-width: 30em; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.14; }
.t1-index .clients { margin-top: clamp(72px, 9vw, 144px); }
.t1-index .cl-line { font-weight: 900; font-stretch: 62%; font-size: clamp(44px, 5.6vw, 92px); line-height: .9; letter-spacing: -.01em; }
.t1-index .logos img { opacity: 1; }

/* About, as Pablo's sample: "You work with Jo." over the SCAPE fish, the lines at display size */
.ko-about .ko-t { font-size: min(15.6vw, 228px); }
.ab-body p { margin: 0 0 .8em; max-width: 30em; font-weight: 650; font-stretch: 82%; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.16; }
.ab-body p.fh { font-weight: 400; font-stretch: 100%; font-size: 17px; line-height: 1.5; margin-top: 1.6em; }
.ab-body p.fh a { color: var(--ink); }

/* Contact: the call is the heading, so it is the knockout; the steps in giant numbers; the form as built beside the lines */
.t1-contact .ko-hero .ko-t { font-size: min(16.2vw, 236px); }
.t1-contact .t1-hero-foot .ctas { gap: 16px; margin-top: 14px; }
.t1-form .t1-wrap { display: grid; grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 5vw, 96px); align-items: start; }
.t1-form .cform { margin: 0; max-width: none; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.t1-form .cform > .cf-title { margin-bottom: clamp(24px, 3vw, 40px); font-weight: 900; font-stretch: 62%; font-size: clamp(44px, 5vw, 80px); line-height: .9; letter-spacing: -.01em; }
.t1-direct { padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.t1-form .direct { display: block; margin: 0; }
.t1-form .direct li { border-bottom: 1px solid var(--line); }
.t1-form .direct a { display: block; padding: 16px 0; border: 0; color: var(--ink); text-decoration: none; font-weight: 750; font-stretch: 72%; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.t1-form .direct a::before { inset: 0; }
@media (hover: hover) and (pointer: fine) { .t1-form .direct a:hover { color: var(--red); } }
.t1-form .c-who { margin: 20px 0 0; }

/* Made with AI: the H1 over one of the 14; then the 14 in their own shapes, larger, each with its label as a tag */
.t1-ai .ko-hero .ko-t { font-size: min(20vw, 288px); }
.t1-gal { padding-top: clamp(40px, 5vw, 80px); }
.ai-grid.wk-mixed { gap: clamp(28px, 3vw, 44px) clamp(10px, 1vw, 16px); --rh: clamp(200px, 24vw, 360px); }
.ai-grid a { display: block; border-radius: 12px; overflow: hidden; background: var(--surface); }
.ai-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-grid.wk-mixed p { display: inline-block; margin: 12px 0 0; padding: 4px 7px 3px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; font-stretch: 125%; font-size: 12px; letter-spacing: .06em; line-height: 1; color: var(--ink); }

@media (max-width: 899px) {
  .t1-form .t1-wrap { grid-template-columns: 1fr; }
  .t1-direct { margin-top: 56px; }
}
@media (max-width: 760px) {
  .t1-work .ko-hero .ko-t { font-size: 25vw; }
  .ix-list a { grid-template-columns: 1fr; row-gap: 12px; }
  .ko-ix .ko-t { font-size: 13vw; }
  .ix-meta { padding-bottom: 0; }
  .ko-about .ko-t { font-size: 27vw; }
  .t1-contact .ko-hero .ko-t { font-size: 16.4vw; }
  .t1-ai .ko-hero .ko-t { font-size: 25vw; }
  /* What happens next: a one-line step was too short for the reading line to pass through it, so step 1 never lit red
     on a phone (part 1's red-step check, widened to Contact); each step is at least a quarter of the screen tall */
  .t1-next .how-list li { min-height: 26vh; align-items: center; }
}

/* the stills dialog as built: nothing inside it is drawn while it is closed */
.dwb-box:not([open]) { display: block; position: fixed; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); content-visibility: hidden; color: var(--ink); background: transparent; }
.dwb-box svg { fill: var(--ink); }

/* media that waits its turn: with scripts off the noscript copy shows instead */
html:not(.t1-js) img[data-src] { display: none; }
img[data-src] { color: transparent; }