/* JDLO v5 preview: the new components, in v4's grammar.
   Loads after v4's tokens.css, product.css, site.css and home4.css (copied unchanged from live 713a085),
   so --ink, --paper, --grey, --mist, --pad, .link, .btn and the h4-* hero, strip and contact rules come from v4.
   One ink on white, Schibsted Grotesk only, no radius, no shadow, no gradient. Shared motion loads after the first screen paints.
   Sizes are rem on v4's fluid root (1rem = 16px at 1440, 16.77px at 393). Touch targets are px. */

:root {
  --rule: rgba(10, 10, 10, .14);
  --quiet: #86868b;            /* inactive tabs only: large bold text */
  --on-ink: rgba(255, 255, 255, .7);
  --hit: 44px;
}

/* ---------- Tour slots (LANE-RULES 5.7): empty in this preview and take no space ---------- */
[data-slot]:empty { display: none; }

/* ---------- Header: v4's, with the 44 px phone targets (Mac1-Site-Help mobile-header-targets.css, R4) ---------- */
.v5 .head__name, .v5 .head__nav > a { min-height: var(--hit); display: inline-flex; align-items: center; padding-block: 0; margin-block: 0; }
.v5 .head__nav > a { min-width: var(--hit); justify-content: center; }
.v5 .head__nav .link::after { bottom: .5rem; }
.v5 .head__nav .link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
/* v4's scrolled header was 92% white; text behind it ghosted through in WebKit captures (mock finding). */
.v5 .head.is-scrolled { background: #fff; }   /* FINISH: solid, so big headings never ghost through */

/* Hero name breaks onto two lines like v4 ("Jordan / Lopez") without changing the text. */
.h4-name span { display: block; }

/* A text link padded to 44 px tall. The kit's .link draws its line under the padding, so this one
   uses a real underline that stays on the words. */
.u { display: inline-block; padding-block: .75rem; margin-block: -.75rem; color: var(--ink); font-size: 1rem; line-height: 1.3;
  min-height: var(--hit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(10, 10, 10, .45); }
@media (hover: hover) { .u:hover { text-decoration-color: var(--ink); } }
.u:focus-visible, .rows a:focus-visible, .wt__list a:focus-visible, .nextrel a:focus-visible, .now a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Footer links: 44 px tall on every screen. */
.v5 .site-foot__row { align-items: center; }
.v5 .site-foot__row .link { min-height: var(--hit); min-width: var(--hit); display: inline-flex; align-items: center; justify-content: center; }
.v5 .site-foot__row .link::after { bottom: .55rem; }

/* ---------- Motion tiles (adaptive.js contract, ADAPTIVE-LOADING.md 4.2) ---------- */
.tile__media { position: relative; overflow: hidden; background: #111; }
.tile__media img, .tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tile__media video { opacity: 0; transition: opacity .4s; }
.tile__media video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tile__media video { display: none; } }
/* Inside a sized frame the tile fills it. */
.rel__frame > .tile__media { position: absolute; inset: 0; }
/* Images carry width/height attributes (no layout shift); where v4 sets an aspect ratio, the height must follow it. */
.h4-strip img, .h4-contact__photo img { height: auto; }
.h4-strip img { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) { .h4-strip img { aspect-ratio: 3 / 2; } .h4-strip.is-roll img { aspect-ratio: 3 / 2; } }
/* A tile whose wide version is a poster only (Travelyt): the phone loop never runs on wide screens.
   display:none also keeps the loader's IntersectionObserver from ever starting it there. */
@media (min-width: 1024px) { .tile--still-wide video { display: none; } }

/* ---------- Relationship block: name, one role line, three points, then its own media ---------- */
.rel { padding: 4rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.rel__name { font-size: 2.5rem; line-height: .95; font-weight: 600; letter-spacing: -.052em; text-wrap: balance; }
.rel__role { margin-top: 1rem; max-width: 31ch; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.015em; }
.rel__points { margin-top: 1.5rem; display: grid; gap: .75rem; max-width: 36rem; list-style: none; padding: 0; }
.rel__points li { position: relative; padding-left: 1.25rem; font-size: 1rem; line-height: 1.45; }
.rel__points li::before { content: ""; position: absolute; left: 0; top: .7em; width: .625rem; height: 2px; background: var(--ink); }
.rel__media { margin: 2rem 0 0; }
.rel__frame { position: relative; display: block; overflow: hidden; background: #111; aspect-ratio: 1 / 1; }
.rel__media--bleed { margin-inline: calc(-1 * var(--pad)); }
.rel__media--bleed .rel__frame { aspect-ratio: 4 / 3; }
.rel__more { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; font-size: 1rem; }
.rel__deep { margin-top: 3rem; display: grid; gap: 3rem; }
.rel__text { margin-top: 1rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.45; }

/* ---------- Systems index: a contents page with dotted leaders, one line per system ---------- */
.sys { scroll-margin-top: var(--header-h); }
.sys__title, .log__title { font-size: 1.75rem; line-height: 1; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.sys__list { margin-top: 1rem; border-top: 2px solid var(--ink); list-style: none; padding: 0; }
.sys__row { display: flex; align-items: baseline; gap: .5rem; min-height: var(--hit); padding: .75rem 0 .4375rem; font-size: 1.0625rem; line-height: 1.25; color: var(--ink); }
.sys__name { flex: 0 1 auto; font-weight: 600; letter-spacing: -.02em; }
.sys__dots { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted rgba(10, 10, 10, .32); transform: translateY(-.2em); }
.sys__who { flex: 0 0 auto; max-width: 48%; color: var(--grey); font-size: .9375rem; text-align: right; }
a.sys__row .sys__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(10, 10, 10, .35); }
@media (hover: hover) { a.sys__row:hover .sys__name { text-decoration-color: var(--ink); } }
a.sys__row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sys__all { margin-top: 1.5rem; }

/* ---------- Progress log (Travelyt): Next, In progress, Done, newest first ---------- */
.log { scroll-margin-top: var(--header-h); }
.log__top { display: grid; grid-template-columns: minmax(0, 1fr) 36%; gap: 1rem; align-items: start; }
.log__top--plain { grid-template-columns: minmax(0, 1fr); }
.log__note { margin-top: .625rem; color: var(--grey); font-size: 1rem; line-height: 1.4; }
.log__tile { aspect-ratio: 4 / 5; }
.log__list { margin-top: 1.25rem; border-top: 2px solid var(--ink); list-style: none; padding: 0; }
.log__list li { display: grid; grid-template-columns: 5.75rem 1fr; gap: .75rem; padding: .625rem 0; font-size: 1rem; line-height: 1.38; }
.log__when { white-space: nowrap; color: var(--grey); font-size: .9375rem; }
.log__date { white-space: nowrap; color: var(--grey); font-variant-numeric: tabular-nums; }
.log__list .is-done + .is-done { padding-top: .25rem; }
.log__list .is-done .log__when { color: var(--ink); font-weight: 600; }
.log__list .is-next { color: var(--grey); }
.log__list .is-now { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); background: var(--ink); color: #fff; font-weight: 500; }
.log__list .is-now .log__when, .log__list .is-now .log__date { color: #fff; }
.log .rel__more { margin-top: 1.5rem; }

/* ---------- Flores: tap-to-play reels (T2 player cards), then the R8 camera roll ---------- */
.reelrow { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.reel { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 1rem; align-items: start; }
.reel .vcard__media { aspect-ratio: 9 / 16; }
.reel__title { font-size: 1.25rem; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.reel__text { color: var(--grey); font-size: .9375rem; line-height: 1.4; margin-top: .5rem; }
.reel--link .vcard__play { white-space: nowrap; max-width: 100%; }
.credit { margin-top: 1.25rem; color: var(--grey); font-size: .875rem; line-height: 1.45; max-width: 40rem; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: .18em; padding-block: .85rem; }

.rel__roll { margin: 3rem calc(-1 * var(--pad)) 0; padding: 0; scroll-margin-top: var(--header-h); }
.rel__rollhead { padding-inline: var(--pad); font-size: 1.1875rem; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; max-width: 30ch; }
.rel__roll .h4-strip { margin-top: 1rem; }
@media (max-width: 1023px) { .rel__roll .h4-strip figure, .sec--roll .h4-strip figure { flex-basis: 68vw; width: 68vw; } }

/* ---------- Sticker Smith: the loop sits on the page like a print proof, with crop marks ---------- */
.rel__media--proof { position: relative; padding: .875rem; margin-top: 2rem; }
.rel__media--proof .rel__frame { aspect-ratio: 3 / 2; }
.rel__media--proof .rel__frame img, .rel__media--proof .rel__frame video { object-position: center 55%; }
.crop { position: absolute; width: .875rem; height: .875rem; border: 0 solid var(--ink); }
.crop--tl { top: 0; left: 0; border-right-width: 1px; border-bottom-width: 1px; }
.crop--tr { top: 0; right: 0; border-left-width: 1px; border-bottom-width: 1px; }
.crop--bl { bottom: 0; left: 0; border-right-width: 1px; border-top-width: 1px; }
.crop--br { bottom: 0; right: 0; border-left-width: 1px; border-top-width: 1px; }
.rel--sticker .rel__points { margin-top: 1.75rem; }

/* ---------- Anything else that qualifies: one sentence, links inline ---------- */
.also { padding: 4rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.also__text { max-width: 44rem; font-size: 1.375rem; line-height: 1.27; font-weight: 500; letter-spacing: -.03em; text-wrap: pretty; }
.also__text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; padding-block: .55rem; }

/* ---------- Work by type (home): a tab row of big words, then a list made for that type ---------- */
.wt { padding: 4rem 0 0; scroll-margin-top: var(--header-h); position: relative; }
.wt__title { padding-inline: var(--pad); font-size: 2.5rem; line-height: .98; font-weight: 600; letter-spacing: -.05em; text-wrap: balance; }
.wt__tabs { display: flex; gap: 1.375rem; margin-top: 1.25rem; padding: 0 var(--pad); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--pad); border-bottom: 1px solid var(--rule); }
.wt__tabs::-webkit-scrollbar { display: none; }
.wt__tab { flex: none; min-height: var(--hit); padding: .5rem 0 .5625rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--quiet); font: inherit; font-size: 1.375rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
.wt__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.wt__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* The head bootstrap marks home before first paint. Match the default Sites-only
   layout until v5.js takes over; without JavaScript all four panels remain expanded. */
html:not(.wt-on):not(.jdlo-home4-font) .wt__tabs { display: none; }
html.jdlo-home4-font:not(.wt-on) .wt__panel:not(#panel-sites) { display: none; }
:is(.wt-on, .jdlo-home4-font) .wt__panelname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wt__panelname { font-size: 1.375rem; font-weight: 600; letter-spacing: -.035em; margin-top: 1.5rem; }
.wt__panel { padding: .25rem var(--pad) 0; }
.wt__panel[hidden] { display: none; }
.wt__list { list-style: none; padding: 0; }
.wt__list li > a, .wt__list li > div { display: grid; gap: .125rem; padding: .625rem 0; min-height: var(--hit); color: inherit; }
.wt__list b { font-size: 1.5rem; line-height: 1.05; font-weight: 600; letter-spacing: -.04em; }
.wt__list span { color: var(--grey); font-size: .9375rem; line-height: 1.35; }
.wt__list a b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: rgba(10, 10, 10, .3); }
@media (hover: hover) { .wt__list a:hover b { text-decoration-color: var(--ink); } }
.wt__panel .credit { margin-top: .5rem; }
.wt__all { margin-top: 1.25rem; }
.wt__every { padding: 2rem var(--pad) 0; }
.wt-preview { position: fixed; left: 0; top: 0; z-index: 120; width: 22rem; aspect-ratio: 16 / 10; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); display: none; background: #111; }
.wt-preview.is-on { opacity: 1; }

/* ---------- Offers: the inverted block on the rate card ---------- */
.ret { padding: 4rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.ret__title { font-size: 2.875rem; line-height: .95; font-weight: 600; letter-spacing: -.055em; }
.ret__line { margin-top: 1rem; max-width: 33ch; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.015em; }
.offer--main { margin: 2rem calc(-1 * var(--pad)) 0; padding: 1.75rem var(--pad) 2rem; background: var(--ink); color: #fff; }
.offer--main h2, .offer--main h3 { font-size: 2.25rem; line-height: 1; font-weight: 600; letter-spacing: -.05em; }
.offer--main p { margin-top: .625rem; max-width: 34rem; color: var(--on-ink); font-size: 1.0625rem; line-height: 1.45; }
.offer--main ul { margin-top: 1rem; display: grid; gap: .625rem; max-width: 36rem; list-style: none; padding: 0; }
.offer--main li { position: relative; padding-left: 1.25rem; color: #fff; font-size: 1.0625rem; line-height: 1.45; }
.offer--main li::before { content: ""; position: absolute; left: 0; top: .7em; width: .625rem; height: 2px; background: #fff; }
.offer--main .offer__terms { margin-top: 1rem; color: #fff; }
.offer--main .btn.offer__cta { margin-top: 1.5rem; background: #fff; color: var(--ink); min-height: var(--hit); }
.offer__terms { font-size: .75rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.offers__lead { margin-top: 2rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; }
.offers { margin-top: .75rem; border-top: 2px solid var(--ink); list-style: none; padding: 0; }
.offers .offer a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: var(--hit); padding: .8125rem 0 .6875rem; border-bottom: 1px solid var(--rule); color: inherit; }
.offer b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.offers .offer a .offer__terms { flex: none; color: var(--grey); }
@media (hover: hover) { .offers .offer a:hover b { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } }
.offers .offer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Relationship / inner pages ---------- */
.open { padding: 1.5rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.v5 .open.case { padding-bottom: 4.5rem; }                           /* T6-F4: case stand-ins ended flush against the ask block */
.open__name { font-size: 3.25rem; line-height: .92; font-weight: 600; letter-spacing: -.055em; text-wrap: balance; }
.open__role { margin-top: 1.25rem; max-width: 32ch; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.015em; }
.open__media { margin-top: 2rem; }
.open__back { margin-top: 1.5rem; }
.open__portrait { margin: 2rem calc(-1 * var(--pad)) 0; }
.open__portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* What they get: a short definition list, one kind of work per line */
.gets { padding: 4rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.gets__title, .month__title, .sec__title { font-size: 1.75rem; line-height: 1; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.gets__list { margin: 1.25rem 0 0; display: grid; gap: 1.125rem; max-width: 40rem; }
.gets__list dt { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }
.gets__list dd { margin: .125rem 0 0; font-size: 1.0625rem; line-height: 1.45; }

/* The full systems index: grouped by who uses it, a line of description under each name */
.sys--full { padding: 4rem var(--pad) 0; }
.sys__groups { margin-top: 1.25rem; display: grid; gap: 2rem; }
.sys__grouphead { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--grey); }
.sys--full .sys__list { margin-top: .5rem; }
.sys--full .sys__list li { padding-bottom: .625rem; border-bottom: 1px solid var(--rule); }
.sys__desc { margin-top: -.125rem; padding-right: 2rem; font-size: .9375rem; line-height: 1.4; color: var(--grey); }
.sys--full .sys__who { color: var(--ink); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.sys__shot { margin: 2rem 0 0; max-width: 20rem; }
.sys__shot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); }

.log--full { padding: 4rem var(--pad) 0; }
.month { padding: 4rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.month__text { margin-top: 1rem; max-width: 36rem; font-size: 1.1875rem; line-height: 1.4; letter-spacing: -.015em; }
.month__text + .month__text { margin-top: .75rem; }

.sec { padding: 4rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.sec__body { margin-top: 1rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.45; }
.sec .reelrow, .sec .h4-strip { margin-top: 1.5rem; }
.sec--roll { padding-inline: 0; overflow: clip; }
.sec--roll .sec__title { padding-inline: var(--pad); }

/* Plain rows: title, then one line (social, campaigns, systems, link-only videos) */
.rows { list-style: none; padding: 0; margin-top: 1.25rem; border-top: 2px solid var(--ink); max-width: 52rem; }
.rows li { border-bottom: 1px solid var(--rule); }
.rows li > a, .rows li > div { display: grid; gap: .25rem; padding: .875rem 0 .9375rem; min-height: var(--hit); color: inherit; }
.rows b { font-size: 1.25rem; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.rows span { color: var(--grey); font-size: .9375rem; line-height: 1.4; }
.rows a b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: rgba(10, 10, 10, .3); }
@media (hover: hover) { .rows a:hover b { text-decoration-color: var(--ink); } }

/* Next client: the name set big, the way v4's case pages hand off to the next project */
.nextrel { margin-top: 4.5rem; border-top: 1px solid var(--rule); }
.nextrel a { display: grid; gap: .25rem; padding: 1.5rem var(--pad) 1.75rem; color: inherit; }
.nextrel span { font-size: .9375rem; color: var(--grey); }
.nextrel b { font-size: 2.25rem; line-height: 1; font-weight: 600; letter-spacing: -.05em; text-wrap: balance; }
@media (hover: hover) { .nextrel a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }

.ask { padding: 3.5rem var(--pad) 2rem; background: var(--mist); }
.ask__line { font-size: 1.75rem; line-height: 1.1; font-weight: 600; letter-spacing: -.045em; max-width: 18ch; margin-bottom: 1.5rem; }
.ask .site-foot { padding: 0; border: 0; margin-top: 3.5rem; }
.ask .site-foot__row { margin-top: 0; }
.foot-only { padding: 3rem var(--pad) 2rem; }
.foot-only .site-foot { padding: 0; border: 0; }
.foot-only .site-foot__row { margin-top: 0; }
.btn.btn--ink { min-height: var(--hit); }

/* ---------- Services: the offers, each with its own anchor ---------- */
.svc { padding: 4rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.svc .offer--main { margin-top: 0; }
.svc__offers { list-style: none; padding: 0; margin-top: 1.25rem; border-top: 2px solid var(--ink); }
.svc__offer { padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--header-h); }
.svc__offer h3 { font-size: 1.625rem; line-height: 1.05; font-weight: 600; letter-spacing: -.045em; }
.svc__offer p { margin-top: .625rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.45; }
.svc__offer:target h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }

/* ---------- Work: an index of types, then one block per type ---------- */
.wk-index { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.wk-index a { display: inline-flex; align-items: center; min-height: var(--hit); font-size: 1.375rem; font-weight: 600; letter-spacing: -.035em; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: rgba(10, 10, 10, .3); }
.wk { padding: 4.5rem var(--pad) 0; scroll-margin-top: var(--header-h); }
.wk__title { font-size: 2.5rem; line-height: .98; font-weight: 600; letter-spacing: -.05em; }
.wk__body { margin-top: .875rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.45; }
.wk .h4-tiles { margin-top: 2rem; }
.wk .h4-tile a { min-height: var(--hit); }
.h4-tile__media.tile__media { margin-inline: calc(-1 * var(--pad)); }
.wk__textonly { list-style: none; padding: 0; margin-top: 2.5rem; border-top: 2px solid var(--ink); max-width: 52rem; }
.wk__textonly li { display: grid; gap: .25rem; padding: .875rem 0 .9375rem; border-bottom: 1px solid var(--rule); }
.wk__textonly b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.035em; }
.wk__textonly span { color: var(--grey); font-size: .9375rem; line-height: 1.4; }
.wk__sets { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: .75rem; max-width: 44rem; }
.wk__sets li { font-size: 1rem; line-height: 1.45; }
.wk__sets b { display: block; font-size: 1.125rem; letter-spacing: -.02em; }
.wk__sets span { color: var(--grey); }
.photos { list-style: none; padding: 0; margin: 2rem calc(-1 * var(--pad)) 0; display: grid; gap: 1.5rem; }
.photos img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #111; }
.photos figcaption { padding: .5rem var(--pad) 0; font-size: .875rem; line-height: 1.35; color: var(--ink); }
.wk .rel__more { margin-top: 2rem; }

/* ---------- Case stand-ins: the kept case pages' v5 copy fixes ---------- */
.case__lines { margin-top: 2rem; display: grid; gap: 1rem; max-width: 40rem; }
.case__lines p { font-size: 1.0625rem; line-height: 1.45; }
.case__lines .case__meta { color: var(--grey); font-size: .9375rem; }
.case__stats { margin: 2rem 0 0; display: grid; gap: .75rem; max-width: 40rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.case__stats div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; }
.case__stats dt { font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.case__stats dd { margin: 0; color: var(--grey); font-size: .9375rem; }
.ba { margin: 2.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.v5 .ba { padding: 0; }                                                /* T6-F4: v4 site.css .ba added 9rem/var(--pad) padding (double indent) */
.ba__item { margin: 0; }
.ba__item img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; object-position: center top; background: var(--mist); border: 1px solid var(--rule); }
.ba__item figcaption { margin-top: .5rem; font-size: .875rem; line-height: 1.4; color: var(--ink); }
.ba__cap { grid-column: 1 / -1; margin-top: .5rem; font-size: 1rem; line-height: 1.45; max-width: 40rem; }
.case__hero { margin: 2rem 0 0; max-width: 22rem; }
.case__hero img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.case__cap { padding: .75rem var(--pad) 0; font-size: .9375rem; line-height: 1.4; }
.case__cap .cap-d { display: none; }
@media (min-width: 1024px) { .case__cap { padding-inline: 0; } .case__cap .cap-d { display: inline; } .case__cap .cap-m { display: none; } }

/* ---------- About ---------- */
.now { list-style: none; padding: 0; margin-top: 1.25rem; border-top: 2px solid var(--ink); }
.now li { border-bottom: 1px solid var(--rule); }
.now a { display: grid; gap: .375rem; padding: 1.125rem 0 1.25rem; color: inherit; min-height: var(--hit); }
.now b { font-size: 1.75rem; line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.now span { color: var(--grey); font-size: 1rem; line-height: 1.45; max-width: 40rem; }
@media (hover: hover) { .now a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }
.story { display: grid; gap: 1rem; max-width: 40rem; }
.v5 .story { grid-template-columns: 1fr; padding: 0; }                 /* T6-F3: v4 site.css .story is a 2-column grid with its own padding; /about read as two 280 px columns */
.story p { font-size: 1.1875rem; line-height: 1.45; letter-spacing: -.015em; }

/* ---------- Contact page ---------- */
.choices { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: 1.25rem; }
.choices a { display: grid; gap: .25rem; min-height: var(--hit); color: inherit; }
.choices b { font-size: 1.75rem; line-height: 1; font-weight: 600; letter-spacing: -.045em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: rgba(10, 10, 10, .3); }
.choices span { color: var(--grey); font-size: 1rem; line-height: 1.4; }
.include { margin: 2rem 0 0; display: grid; gap: 1rem; max-width: 40rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.include dt { font-weight: 600; font-size: 1.0625rem; }
.include dd { margin: .125rem 0 0; color: var(--grey); font-size: 1rem; line-height: 1.45; }
.form { margin-top: 1.5rem; display: grid; gap: 1.125rem; max-width: 36rem; }
.form label { display: grid; gap: .375rem; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.form input, .form select, .form textarea { width: 100%; min-height: var(--hit); padding: .625rem .75rem; border: 1px solid rgba(10, 10, 10, .4); border-radius: 0; background: #fff; color: var(--ink);
  font: inherit; font-weight: 400; font-size: max(16px, 1rem); }
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.form .btn { justify-self: start; font-size: 1.0625rem; padding: .875rem 1.5rem; }
.form__after { color: var(--grey); font-size: .9375rem; line-height: 1.4; }

/* Contact block on inner pages without the v4 portrait */
.contact.h4-contact--plain .h4-contact__grid { grid-template-columns: 1fr; }
.links-inline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1.5rem; }

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  /* v4's desktop crop put the face below the first screen; this crop keeps it in view at 1440x900 */
  .h4-photo img { aspect-ratio: 12 / 5; object-position: 50% 28%; }

  .rel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; padding-top: 10rem; }
  .rel__head, .rel__points, .rel__more, .rel__text { grid-column: 1; }
  .rel__name { font-size: 5.5rem; line-height: .9; }
  .rel__role { font-size: 1.5rem; max-width: 30ch; margin-top: 1.5rem; }
  .rel__points { margin-top: 2rem; gap: 1rem; }
  .rel__points li { font-size: 1.125rem; }
  .rel__media { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .rel__media--bleed { margin: 0; }
  .rel__frame, .rel__media--bleed .rel__frame { aspect-ratio: 16 / 10; }
  .rel__deep { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; margin-top: 6rem; }
  .sys__title, .log__title { font-size: 2.5rem; }
  .sys__row { font-size: 1.375rem; min-height: 3.5rem; }
  .sys__who { font-size: 1.125rem; }
  .log__list li { grid-template-columns: 8rem 1fr; font-size: 1.125rem; }
  .log__when { font-size: 1rem; }
  .log__list .is-now { margin-inline: 0; padding-inline: .875rem; grid-template-columns: 7.125rem 1fr; }
  .log__top { grid-template-columns: minmax(0, 1fr) 9rem; gap: 1.5rem; }

  .rel--flores .reelrow { grid-column: 2; grid-row: 1 / span 3; margin: 0; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .reel { grid-template-columns: 1fr; gap: .875rem; }
  .reel__title { font-size: 1.5rem; }
  .reel__text { font-size: 1rem; }
  .rel--flores .credit { grid-column: 2; }
  .rel--flores .rel__roll { grid-column: 1 / -1; margin: 6rem calc(-1 * var(--pad)) 0; }
  .rel--flores .rel__more { grid-column: 1; }
  .sec .reelrow, .wk .reelrow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; max-width: none; }

  .rel--sticker { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rel--sticker .rel__head, .rel--sticker .rel__points, .rel--sticker .rel__more { grid-column: 2; }
  .rel--sticker .rel__media { grid-column: 1; grid-row: 1 / span 3; }
  .rel__media--proof { padding: 1.25rem; }
  .rel__media--proof .rel__frame { aspect-ratio: 16 / 10; }
  .crop { width: 1.25rem; height: 1.25rem; }

  .also { padding-top: 9rem; }
  .also__text { font-size: 2.75rem; line-height: 1.12; max-width: 60rem; letter-spacing: -.04em; }
  .also__text a { padding-block: .2rem; }

  .wt { padding-top: 10rem; }
  .wt__title { font-size: 5.5rem; }
  .wt__tabs { gap: 2.5rem; margin-top: 2.5rem; overflow: visible; }
  .wt__tab { font-size: 2.25rem; letter-spacing: -.045em; padding-bottom: .75rem; }
  .wt__panel { padding-top: 1rem; }
  .wt__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .wt__list li > a, .wt__list li > div { padding: 1.125rem 0; }
  .wt__list b { font-size: 2.25rem; }
  .wt__list span { font-size: 1.0625rem; }
  .wt-preview { display: block; }

  .ret { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; padding-top: 10rem; align-items: start; }
  .ret__title { grid-column: 1; grid-row: 1; font-size: 6rem; line-height: .9; }
  .ret__line { grid-column: 1; grid-row: 2; font-size: 1.5rem; max-width: 24ch; }
  .ret .offer--main { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; padding: 2.5rem 2.5rem 2.75rem; }
  .offer--main h2, .offer--main h3 { font-size: 3.5rem; }
  .offer--main p, .offer--main li { font-size: 1.25rem; }
  .ret .offers__lead { grid-column: 2; grid-row: 3; margin-top: 3.5rem; font-size: 1.5rem; }
  .ret .offers { grid-column: 2; grid-row: 4; margin-top: 1rem; }
  .offer b { font-size: 1.5rem; }
  .offers .offer a { min-height: 4rem; align-items: center; }
  .offer__terms { font-size: .8125rem; }

  .open { padding-top: 4rem; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 4rem; align-items: end; }
  .open__name { grid-column: 1 / -1; font-size: 9rem; line-height: .86; }
  .open__role { grid-column: 1; font-size: 1.5rem; max-width: 34ch; margin-top: 2.5rem; }
  .open__back { grid-column: 2; justify-self: start; }
  .open__media, .open .rel__media { grid-column: 1 / -1; grid-row: auto; margin-top: 3.5rem; }
  .open__media .rel__frame { aspect-ratio: 2 / 1; }
  .open--short .open__name { font-size: 7rem; }
  .open__portrait { grid-column: 2; grid-row: 2 / span 2; margin: 2.5rem 0 0; justify-self: end; width: 70%; }
  .open .case__lines, .open .case__stats { grid-column: 1; }
  .open .ba { grid-column: 1 / -1; margin: 3.5rem 0 0; gap: 1.25rem 2rem; }
  .ba__item img { aspect-ratio: 16 / 10; }
  .ba__item figcaption { font-size: 1rem; }
  .ba__cap { font-size: 1.25rem; }
  .open .case__hero { grid-column: 2; grid-row: 2 / span 3; justify-self: end; width: 70%; margin-top: 2.5rem; }
  .open .case__lines { margin-top: 2.5rem; }
  .open .case__cap { grid-column: 1 / -1; }
  .open .h4-tiles { grid-column: 1 / -1; }

  .gets { padding-top: 8rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; }
  .gets__title, .month__title, .sec__title { font-size: 2.5rem; }
  .gets__list { margin-top: 0; gap: 1.5rem; }
  .gets__list dt, .gets__list dd { font-size: 1.375rem; }
  .sys--full { padding-top: 8rem; }
  .sys--full .sys__groups { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; margin-top: 2rem; }
  .sys__desc { font-size: 1.0625rem; }
  .sys__shot { margin-top: 3rem; }
  .log--full { padding-top: 8rem; max-width: 64rem; }
  .log--full .log__top { grid-template-columns: minmax(0, 1fr) 12rem; }
  .month { padding-top: 8rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; }
  .month__text { margin-top: 0; font-size: 1.5rem; grid-column: 2; }
  .month__text + .month__text { margin-top: 1rem; }
  .sec { padding-top: 8rem; }
  .sec__body { font-size: 1.25rem; }
  .rows b { font-size: 1.75rem; }
  .rows span { font-size: 1.0625rem; }
  .nextrel { margin-top: 8rem; }
  .nextrel a { padding: 2.5rem var(--pad) 3rem; }
  .nextrel b { font-size: 6rem; }
  .ask { padding: 6rem var(--pad) 2.5rem; }
  .ask__line { font-size: 4rem; max-width: 16ch; }

  .svc { padding-top: 8rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .svc > .sec__title { grid-column: 1; }
  .svc > .offer--main, .svc > .svc__offers { grid-column: 2; }
  .svc .offer--main { padding: 2.5rem 2.5rem 2.75rem; }
  .svc__offers { margin-top: 0; }
  .svc__offer h3 { font-size: 2.25rem; }
  .svc__offer p { font-size: 1.25rem; }

  .wk-index { gap: .25rem 2.5rem; margin-top: 2.5rem; grid-column: 1 / -1; }
  .wk-index a { font-size: 2.25rem; letter-spacing: -.045em; }
  .wk { padding-top: 9rem; }
  .wk__title { font-size: 5.5rem; }
  .wk__body { font-size: 1.25rem; }
  .h4-tile__media.tile__media { margin-inline: 0; }
  .photos { margin-inline: 0; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
  .photos figcaption { padding-inline: 0; font-size: .9375rem; }
  .wk__sets { grid-template-columns: 1fr 1fr; gap: 2rem; max-width: none; }

  .case__stats div { grid-template-columns: 9rem 1fr; }
  .now b { font-size: 3rem; }
  .now span { font-size: 1.125rem; }
  .story p { font-size: 1.5rem; }
  .choices { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .choices b { font-size: 2.5rem; }
  .include { grid-template-columns: repeat(3, 1fr); }
  .form { grid-template-columns: 1fr 1fr; max-width: 52rem; }
  .form label.is-wide, .form .btn, .form .form__after { grid-column: 1 / -1; }
}

/* Phone footer row (v4 carry-over): name, then place, then the three links. */
@media (max-width: 1023px) {
  .site-foot__row { row-gap: 0; }
  .site-foot__row > span:first-child { order: -2; }
  .site-foot__row > span:not(:first-child) { order: -1; width: 100%; padding-block: .25rem .5rem; }
}

/* The player hides the cursor while a film is idle; the lane rule is that the computed cursor is never none. */
.vp.is-idle { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .wt-preview { transition: none; }
}

/* T6-F1/F2 (2026-10-16): two kept posters open mid-headline on phones. Crop the poster image only, never the file
   (cubic-m-poster.jpg is one of the 8 protected files and stays byte for byte). The playing loop keeps its framing. */
@media (max-width: 1023px) {
  .rel__frame .tile__media[data-tile="cubic"] > picture img { object-position: center 25%; }
  .rel__frame .tile__media[data-tile="sticker"] > picture img { object-position: center 66%; }
}
@media (min-width: 1024px) { .v5 .open.case { padding-bottom: 7rem; } }

/* The About frame matches live. Reserve its closed state before deferred motion mounts. */
.jdlo-v5.page-about .portrait-open img { height: 100%; object-position: 50% 30%; }
@media (prefers-reduced-motion: no-preference) {
  .hk-js .jdlo-v5.page-about [data-v5-portrait-open] { --open: 0; }
}

/* Cubic Ship and Travelyt: the one case page for the whole relationship (mac2-claude, 2026-10-16).
   Appended to the end of v5.css (no extra request); the classes are used on /clients/cubic only. v5's own grammar: ink on white, Schibsted Grotesk, square corners,
   no shadow, no gradient, no new colors. The projects reuse the systems index (name, dotted leader, status)
   and open up into a short proof under each name; before/after shots reuse v5's .ba pair. */

/* Top: the independent-operator line sits under the intro, then a one-line index of the page. */
.page-clients-cubic .open .wk-index { margin-top: 1.25rem; }

/* Projects: one systems-index row per project, with its proof under it. */
.sys--proof > .log__note { max-width: 36rem; }
.sys--proof .sys__list { margin-top: 1.25rem; }
.sys--proof .sys__list > li.proof__item { padding: 0 0 2.25rem; scroll-margin-top: var(--header-h); }
.sys--proof .sys__list > li.proof__item + li.proof__item { padding-top: .25rem; }
.proof__body { margin-top: .5rem; display: grid; gap: .75rem; max-width: 40rem; }
.proof__text { font-size: 1.0625rem; line-height: 1.45; }
.proof__item:target .sys__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
.v5 .proof__media.ba { margin-top: 1.25rem; }
/* Travelyt: the genuine recording with a poster fallback, framed at 4:5 so the original logo stays visible. */
.ba--one { grid-template-columns: minmax(0, 1fr); max-width: 20rem; }
.ba--one .ba__item img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }

/* .month__body: the text column of a .month section (/services pages). */
.month__body > .month__text:first-child { margin-top: 1rem; }

@media (min-width: 1024px) {
  .page-clients-cubic .open__index { grid-column: 1 / -1; }
  .sys--proof > .log__note { margin-top: 1rem; font-size: 1.125rem; }
  .sys--proof .sys__list { margin-top: 2rem; }
  .sys--proof .sys__list > li.proof__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; padding-bottom: 3.5rem; }
  .proof__item > .sys__row { grid-column: 1 / -1; }
  .proof__body { grid-column: 1; margin-top: 1rem; }
  .proof__text { font-size: 1.25rem; }
  .v5 .proof__media.ba { grid-column: 2; grid-row: 2 / span 2; margin-top: 1rem; }
  .v5 .proof__media--wide.ba { grid-column: 1 / -1; grid-row: auto; margin-top: 2rem; gap: 1.25rem 2rem; }
  /* cubicship.com pair: the earlier capture is cropped to its first screen (2880 x 1470), and the new one shares that box from the top. */
  .v5 .proof__media--wide .ba__item img { aspect-ratio: 2880 / 1470; object-fit: cover; object-position: center top; }
  .month__body { grid-column: 2; }
  .month__body > .month__text:first-child { margin-top: 0; }
}

/* Keep the genuine phone recording inside the combined Travelyt proof. */
.page-clients-cubic .proof__motion { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }

/* H12: a picture of each site in the home Sites tab (desktop 2x2, phone native swipe) */
.wt__frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; margin-bottom: .625rem; }
.wt__frame > .tile__media { position: absolute; inset: 0; }
@media (max-width: 1023px) {
  #panel-sites .wt__list { display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
  #panel-sites .wt__list::-webkit-scrollbar { display: none; }
  #panel-sites .wt__list > li { flex: 0 0 80%; scroll-snap-align: start; }
}
@media (min-width: 1024px) {
  #panel-sites .wt__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .wt__frame { aspect-ratio: 16 / 10; }
}

/* SV7: the live page's photo inside the last service row */
.svc__offer .svc__photo { margin-top: 1rem; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.svc__offer .svc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc__offer > a.u { margin-top: .5rem; }

/* A3: client names on /about read as links on phones too (same treatment as the home tabs, .wt__list a b) */
.now a b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: rgba(10, 10, 10, .3); }
@media (hover: hover) { .now a:hover b { text-decoration-color: var(--ink); } }

/* C7: client-page heroes show the whole 4:5 phone loop instead of a 4:3 or 3:2 crop */
@media (max-width: 1023px) { .open__media.rel__media--bleed .rel__frame, .open__media.rel__media--proof .rel__frame { aspect-ratio: 4 / 5; } }

/* ST5: gap under "What the shop’s campaigns run on" */
.sec > .gets__list { margin-top: 1.5rem; }

/* H15: all four work tabs fit at 393 */
@media (max-width: 430px) { .wt__tabs { gap: 1rem; } .wt__tab { font-size: 1.25rem; } }

/* H17: trim the empty bands at 1440 */
@media (min-width: 1024px) { .rel--flores .rel__roll { margin-top: 3rem; } .h4-contact:not(.h4-contact--plain) .h4-contact__grid { align-items: start; } }
.btn--big + .links-inline { margin-top: 1.25rem; }

/* W14: seven photos fill three full rows at desktop (first one full width) */
@media (min-width: 1024px) { #photos .photos > li:first-child { grid-column: 1 / -1; } }

/* W15: each /work photo opens its large file */
.photos .photos__open { display: block; }


/* FINISH (10/16, pass/FINISH.md): small fixes from the re-rating pass */

/* Home contact on laptops: the line, email button and form link sit right under the title, with the
   portrait in the right column, so "Start a project" lands with both in view at 1280x720 and up. */
@media (min-width: 1024px) {
  .h4-contact:not(.h4-contact--plain) { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 3rem; align-items: start; }
  .h4-contact:not(.h4-contact--plain) .h4-contact__grid { display: contents; }
  .h4-contact:not(.h4-contact--plain) .h4-contact__title { grid-column: 1; grid-row: 1; }
  .h4-contact:not(.h4-contact--plain) .h4-contact__photo { grid-column: 2; grid-row: 1 / span 4; }
  .h4-contact:not(.h4-contact--plain) > :not(.h4-contact__grid):not(.site-foot) { grid-column: 1; }
  .h4-contact:not(.h4-contact--plain) .h4-contact__line { margin-top: 2rem; }
  .h4-contact:not(.h4-contact--plain) .btn--big { justify-self: start; }
  .h4-contact:not(.h4-contact--plain) .site-foot { grid-column: 1 / -1; }
}

/* About closer: the email button no longer touches the headline */
.h4-contact--plain .h4-contact__grid + .btn { margin-top: 1.5rem; }


/* Next-client link reads as a link on phones (no hover there) */
.nextrel b::after { content: "\00a0\2192"; }

/* Section heads keep "fall 2026." together at desktop */
@media (min-width: 1024px) { .v5 .vband__head, .v5 .rel__rollhead { max-width: 48ch; } }

/* Desktop R8 roll: travel while the strip is fully in view, so the first and last photos are seen whole */
@media (min-width: 1024px) { .v5 .h4-strip.is-roll { animation-range: contain 0% contain 100%; } }

/* A site name linked inside body copy keeps the copy's size */
.u.u--inline { display: inline; padding-block: 0; margin-block: 0; min-height: 0; font-size: inherit; line-height: inherit; }

/* RAISE-HOME (10/17, raise/spec1/home.md H1-H6): results on the Sites tiles, framed screens, the "What I do." line, hover */
/* H1: the result reads in ink under the grey line */
.page-home .wt__list .wt__result { display: block; margin-top: .375rem; color: var(--ink); font-size: .9375rem; line-height: 1.35; max-width: 46ch; }
@media (min-width: 1024px) { .page-home .wt__list .wt__result { font-size: 1.0625rem; } }
/* H2: five sites = two big over three at desktop; four stay 2x2, six become three rows of two (ready for a fifth tile) */
@media (min-width: 1024px) {
  .page-home #panel-sites .wt__list:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3rem 2rem; }
  .page-home #panel-sites .wt__list:has(> li:nth-child(5):last-child) > li { grid-column: span 3; }
  .page-home #panel-sites .wt__list:has(> li:nth-child(5):last-child) > li:nth-child(n+3) { grid-column: span 2; }
  .page-home #panel-sites .wt__list:has(> li:nth-child(5):last-child) > li:nth-child(n+3) b { font-size: 1.75rem; }
  .page-home #panel-sites .wt__list:has(> li:nth-child(5):last-child) > li:nth-child(n+3) > a > span:not(.wt__frame) { font-size: 1rem; }
}
/* H3: every site frame gets an edge, so white and cream screens read as screens */
.page-home .wt__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; z-index: 1; }
/* H5: same grammar as the hero, title left and line right at desktop */
.page-home .wt__head { padding-inline: var(--pad); }
.page-home .wt__head .wt__title { padding-inline: 0; }
.page-home .wt__lede { margin-top: .875rem; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.015em; max-width: 30ch; }
@media (min-width: 1024px) {
  .page-home .wt__head { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: 3rem; align-items: end; }
  .page-home .wt__lede { margin: 0 0 .75rem; font-size: 1.5rem; }
}
/* H6: hover response on the site frames, desktop pointer only */
@media (hover: hover) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .page-home #panel-sites .wt__frame > .tile__media { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .page-home #panel-sites a:hover .wt__frame > .tile__media,
  .page-home #panel-sites a:focus-visible .wt__frame > .tile__media { transform: scale(1.025); }
}

/* RAISE-W (10/17, raise/spec1/work.md W2, W7, W9): /work only. W5's button pair is not used (NEXT-PLAN P0-6). */
/* W2: Music and brands, a black band; a native swipe strip on phones, a grid on desktop */
.page-work #music { margin-top: 4.5rem; padding-top: 3.5rem; padding-bottom: 3rem; background: #0a0a0a; color: #fff; }
.page-work #music .wk__title { color: #fff; }
.page-work #music .wk__body { color: rgba(255,255,255,.78); }
.page-work .mb-tiles { list-style: none; margin: 2rem calc(-1 * var(--pad)) 0; padding: 0 var(--pad); display: flex; gap: .75rem;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.page-work .mb-tiles::-webkit-scrollbar { display: none; }
.page-work .mb-tiles::after { content: ""; flex: 0 0 1px; }
.page-work .mb-tiles > .h4-tile { flex: 0 0 82vw; scroll-snap-align: start; }
.page-work .mb-tiles .h4-tile__media.tile__media { margin-inline: 0; aspect-ratio: 4 / 5; background: #000; }
.page-work .mb-tiles .h4-tile__text { grid-template-columns: 1fr; }
.page-work .mb-tiles .h4-tile__text h3 { color: #fff; }
.page-work .mb-tiles .h4-tile__text p { color: rgba(255,255,255,.68); }
.page-work .mb-tiles .h4-tile__go { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(255,255,255,.5); }
.page-work .mb-tiles .h4-tile a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.page-work #music .wk__ask { margin-top: 2.5rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.page-work #music .wk__ask .u { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.page-work #music .u:focus-visible { outline-color: #fff; }
@media (max-width: 1023px) { .page-work .h4-tile__media[data-tile="phathead"] video { display: none; } }  /* phone shows the 3x still; no loop request */
@media (min-width: 1024px) {
  .page-work #music { margin-top: 9rem; padding: 6rem var(--pad) 5rem; }
  .page-work .mb-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2rem; overflow: visible; margin: 3rem 0 0; padding: 0; }
  .page-work .mb-tiles::after { content: none; }
  .page-work .mb-tiles > .h4-tile { flex: none; }
  .page-work .mb-tiles .h4-tile__media.tile__media { aspect-ratio: 16 / 10; }
  .page-work #music + #photos { padding-top: 9rem; }
}
/* W7: a result line reads as ink, not grey */
.page-work .h4-tile__text p.h4-tile__proof { color: var(--ink); font-weight: 500; }
/* W9: Social, Campaigns and Systems as three columns at desktop */
@media (min-width: 1024px) {
  .page-work .wk-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; padding: 9rem var(--pad) 0; }
  .page-work .wk-trio > .wk { padding: 0; min-width: 0; }
  .page-work .wk-trio .wk__title { font-size: 3.5rem; }
  .page-work .wk-trio .wk__body { font-size: 1.0625rem; min-height: 4.4em; }
  .page-work .wk-trio .rows { max-width: none; }
  .page-work .wk-trio .rows b { font-size: 1.3125rem; }
  .page-work .wk-trio .rows span { font-size: .9375rem; }
}

/* RAISE-SERVICES (10/17, raise/spec1/services.md P0-4) */
/* /services (raise spec1, 10/16): the service names lead, every row shows real screens or footage and says what
   the work did. Scoped to .page-services. v5 grammar: ink on white, Schibsted Grotesk, square corners, no shadow. */
.page-services .svc__reach { margin: 1.25rem 0 0; }
.page-services .open .svc__index { margin-top: 1.25rem; }
.page-services .svc { display: block; padding: 2.5rem var(--pad) 0; }
.page-services .svc__offers { margin-top: 0; border-top: 2px solid var(--ink); }
.page-services .svc__offer { padding: 1.75rem 0 2.75rem; border-bottom: 1px solid var(--rule); }
.page-services .svc__name { font-size: 2.75rem; line-height: .95; font-weight: 600; letter-spacing: -.055em; margin-left: -.03em; text-wrap: balance; }
.page-services .svc__shots { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.page-services .svc__shots--one { grid-template-columns: minmax(0, 1fr); }
.page-services .svc__shot { display: block; color: var(--ink); text-decoration: none; }
.page-services .svc__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist, #f2f2f2); }
.page-services .svc__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; }
.page-services .svc__frame--photo, .page-services .svc__frame.tile__media { background: #111; }
.page-services .svc__frame img, .page-services .svc__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.page-services .svc__frame--photo img { object-position: center; }
.page-services .svc__cap { display: block; margin-top: .5rem; min-height: var(--hit); font-size: .875rem; line-height: 1.35; }
.page-services .svc__cap::after { content: "\00a0\2192"; }
.page-services .svc__body { margin-top: 1.25rem; }
.page-services .svc__lead { margin-top: 0; max-width: 36rem; font-size: 1.1875rem; line-height: 1.4; letter-spacing: -.015em; }
.page-services .svc__result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); max-width: 36rem; font-size: 1.0625rem; line-height: 1.45; }
.page-services .svc__result + .svc__result { margin-top: .875rem; padding-top: 0; border-top: 0; }
.page-services .svc__ask { margin-top: 1rem; }
@media (hover: hover) {
  .page-services .svc__frame:not([data-parallax]) img { transition: transform .9s cubic-bezier(.31, .13, .11, 1); }
  .page-services a.svc__shot:hover .svc__frame:not([data-parallax]) img { transform: scale(1.025); }
  .page-services a.svc__shot:hover .svc__cap { text-decoration: underline; text-underline-offset: .2em; }
}
@media (min-width: 1024px) {
  .page-services .svc__reach { grid-column: 2; grid-row: 2; align-self: end; justify-self: start; display: flex; flex-direction: column; gap: .25rem; margin: 0; }
  .page-services .svc__reach .u { font-size: 1.5rem; letter-spacing: -.02em; }
  .page-services .open .svc__index { margin-top: 3rem; }
  .page-services .svc { padding-top: 3.5rem; }
  .page-services .svc__offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 4rem; padding: 2.75rem 0 4.5rem; }
  .page-services .svc__name { grid-column: 1; grid-row: 1; font-size: 5rem; line-height: .92; }
  .page-services .svc__shots { grid-column: 1; grid-row: 2; margin-top: 2.25rem; gap: 1.25rem; }
  .page-services .svc__shots--one .svc__frame { aspect-ratio: 16 / 10; }
  .page-services .svc__body { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: .5rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .page-services .svc__lead { font-size: 1.5rem; line-height: 1.35; }
  .page-services .svc__result { font-size: 1.1875rem; }
  .page-services .svc__cap { font-size: .9375rem; min-height: 0; }
}

/* ABOUT-R1 (10/17, raise/spec1/about.md A1-A5, NEXT-PLAN P0-10): email and phone under the intro, a heading on the story,
   the client cards with real pictures. The story photo is not used (that frame is already on home, /work and /clients/pearls). */
.page-about .open__reach { margin: 1rem 0 1.75rem; }
@media (min-width: 1024px) {
  .page-about .open { align-items: start; grid-template-rows: auto auto auto 1fr; }
  .page-about .open__portrait { grid-row: 2 / span 3; }
  .page-about .open__reach { grid-column: 1; margin: 1.75rem 0 0; }
}
.page-about #how > .sec__title { margin-bottom: 1.25rem; }
.page-about .now--cards { border-top: 0; margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
.page-about .now--cards li { border-bottom: 0; }
.page-about .now--cards a { display: grid; gap: .5rem; padding: 0; align-content: start; }
.page-about .now--cards .now__frame { position: relative; display: block; max-width: none; aspect-ratio: 16 / 10; overflow: hidden; background: #111; margin-bottom: .375rem; }
.page-about .now__frame > .tile__media { position: absolute; inset: 0; }
.page-about .now__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; }
.page-about .now__frame--fit .tile__media { background: #070a1d; }
.page-about .now__frame--fit .tile__media img { object-fit: contain; object-position: center; }
.page-about .now--cards b { font-size: 1.5rem; line-height: 1.05; }
.page-about .now--cards b::after { content: "\2192"; display: inline-block; margin-left: .3em; text-decoration: none; }
.page-about .now--cards .now__ext b::after { content: "\2197"; }
.page-about .now--cards .now__line { max-width: 34rem; }
.page-about .now__more { margin: 2rem 0 0; }
@media (min-width: 640px) { .page-about .now--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 1024px) {
  .page-about .now--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 2rem; margin-top: 2.5rem; }
  .page-about .now--cards b { font-size: 1.875rem; }
  .page-about .now--cards .now__line { font-size: 1.0625rem; }
  .page-about .now__more { margin-top: 3rem; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page-about .now__frame img, .page-about .now__frame video { transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
  .page-about .now--cards a:hover .now__frame img, .page-about .now--cards a:hover .now__frame video { transform: scale(1.025); }
}
.page-about .h4-contact--plain .h4-contact__line { margin: 1.25rem 0 1.5rem; }

/* RAISE-CONTACT (10/17, raise/spec1/contact.md P0-3) */
/* /contact R1 (raise/spec1/contact.md): email, call, form link and Instagram on the first screen at every width,
   where I work, and the form beside its guidance on desktop. Replaces CT3 and the FINISH "/contact on desktop" block. */
.page-contact .open__role + .contact-ways { margin-top: 1.5rem; }
.page-contact .contact-ways { display: grid; gap: .75rem; }
.page-contact .contact-ways .btn { justify-content: center; }
.page-contact .contact-ways + .links-inline { margin: 1.25rem 0 0; }
.page-contact .open .links-inline .u { font-size: max(15px, 1.0625rem); }
.page-contact .open__place { margin-top: 1.25rem; max-width: 40ch; text-wrap: pretty; color: var(--grey); font-size: max(15px, 1.0625rem); line-height: 1.45; }
.page-contact .inquiry button { min-width: 10rem; justify-content: center; font-size: 1.125rem; }
@media (max-width: 1023px) {
  /* Phone/tablet: a 4:3 head-and-shoulders crop of the same photo, so the form is 344 px closer */
  .page-contact .open__portrait img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
}
@media (min-width: 1024px) {
  .page-contact .open { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto auto 1fr; align-items: start; }
  .page-contact .open > * { grid-column: 1; }
  .page-contact .open__name { grid-row: 1; }
  .page-contact .open__portrait { grid-column: 2; grid-row: 1 / -1; margin: 0; justify-self: end; width: min(100%, calc((100vh - 9rem) * .8)); }
  .page-contact .contact-ways { grid-template-columns: repeat(2, minmax(0, 20rem)); gap: 1rem; }
  .page-contact .contact-ways .btn { width: 100%; }
  .page-contact #form { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 4rem; align-items: start; }
  .page-contact #form > .sec__title { grid-column: 1; grid-row: 1; }
  .page-contact #form > .include { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; margin-top: 1.5rem; }
  .page-contact #form > .inquiry { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: none; }
  .page-contact .inquiry__grid > .inquiry__full:has(#lead-service) { grid-column: auto; }
}

/* CUBIC-R1 (raise spec 1, 10/16): /clients/cubic only. */

/* CU1 hero caption */
.page-clients-cubic .open__media figcaption { margin-top: .5rem; font-size: .875rem; line-height: 1.4; color: var(--ink); }
@media (min-width: 1024px) { .page-clients-cubic .open__media figcaption { font-size: 1rem; } }
/* CUBIC-R2 (raise spec 2, 10/17): the client's screen sits in the text column with a 1 px rule edge (About's card edge) */
@media (max-width: 1023px) {
  .page-clients-cubic .open > .open__media { margin: 1.5rem 0 0; }
}
.page-clients-cubic .open > .open__media .rel__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; z-index: 1; }

/* CU2 desktop first screen (R2): the client's screen opens the page at the top right, level with the name; caption above the fold */
@media (min-width: 1024px) {
  .page-clients-cubic .open { grid-template-columns: minmax(0, 1fr) 28rem; grid-template-rows: auto auto auto 1fr; column-gap: 4rem; align-items: start; }
  .page-clients-cubic .open > .open__name { grid-column: 1; grid-row: 1; }
  .page-clients-cubic .open > .open__media { grid-column: 2; grid-row: 1 / span 4; justify-self: stretch; align-self: start; width: auto; margin: .375rem 0 0; }
  .page-clients-cubic .open > .open__media .rel__frame { aspect-ratio: 4 / 5; }
  .page-clients-cubic .open > .open__role, .page-clients-cubic .open > .open__index { grid-column: 1; }
}

/* CU3 cubicship.com before and now: the laptop captures, stacked on phones */
@media (max-width: 1023px) {
  .page-clients-cubic #site .ba { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .page-clients-cubic #site .ba__item img { aspect-ratio: 2880 / 1470; object-fit: cover; object-position: center top; }
}

/* CU4 desktop: the text-only projects sit two to a row */
@media (min-width: 1024px) {
  .page-clients-cubic .sys--proof .sys__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; }
  .page-clients-cubic .sys--proof .sys__list > li.proof__item { grid-column: 1 / -1; }
  .page-clients-cubic .sys--proof .sys__list > li#translator,
  .page-clients-cubic .sys--proof .sys__list > li#travelyt-app { grid-column: 1; display: block; }
  .page-clients-cubic .sys--proof .sys__list > li#simulator,
  .page-clients-cubic .sys--proof .sys__list > li#travelyt-system { grid-column: 2; display: block; }
}

/* CU5 Travelyt still: full column on phones, same width and edge as the hero loop on desktop */
@media (max-width: 1023px) { .page-clients-cubic #travelyt-site .ba--one { max-width: none; } }
@media (min-width: 1024px) { .page-clients-cubic #travelyt-site .ba--one { justify-self: end; width: min(100%, 28rem); max-width: none; } }

/* RAISE-PEARLS (10/17, raise/spec1/pearls.md P0-1): what the site and posts brought in, with the live crew-request form.
   The view numbers and the Prosperando photos wait for Leo's / the family's OK (NEXT-PLAN 1B), so their rules are not here. */
.page-clients-pearls .res__shot { margin: 2rem 0 0; max-width: 16rem; }
.page-clients-pearls .res__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border: 1px solid var(--rule); background: var(--mist); }
.page-clients-pearls .res__shot figcaption { margin-top: .5rem; font-size: .875rem; line-height: 1.4; }
@media (min-width: 1024px) {
  .page-clients-pearls .res, .page-clients-pearls #prosperando { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .page-clients-pearls .res > .sec__title, .page-clients-pearls #prosperando > .sec__title { grid-column: 1; grid-row: 1; }
  .page-clients-pearls .res > .sec__body, .page-clients-pearls #prosperando > .sec__body { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1.375rem; max-width: 40rem; }
  .page-clients-pearls .res__shot { grid-column: 2; grid-row: 2; margin-top: 3rem; max-width: none; }
  .page-clients-pearls .res__shot img { aspect-ratio: 11 / 8; }
  .page-clients-pearls .res__shot figcaption { font-size: 1rem; }
}

/* RAISE-STICKER (10/17) */
/* raise spec1 (2026-10-16): /clients/sticker-smith only */
.page-clients-sticker .open__cap { margin-top: .75rem; font-size: .875rem; line-height: 1.4; color: var(--grey); max-width: 40rem; }
.page-clients-sticker .sec--found { margin-top: 4rem; padding: 3.5rem var(--pad) 3.75rem; background: var(--ink); color: #fff; }
.page-clients-sticker .sec--found .sec__title { font-size: 2.25rem; line-height: 1.02; letter-spacing: -.05em; max-width: 13ch; }
.page-clients-sticker .sec--found .sec__body { margin-top: 1.25rem; color: rgba(255, 255, 255, .8); }
.page-clients-sticker .sec--found .gets__list { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .2); max-width: none; }
.page-clients-sticker .sec--found .gets__list dd { color: rgba(255, 255, 255, .8); }
.page-clients-sticker .sec--found .links-inline { margin: 2rem 0 0; }
.page-clients-sticker .sec--found .u { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.page-clients-sticker .sec--found .u:focus-visible { outline-color: #fff; }
@media (hover: hover) { .page-clients-sticker .sec--found .u:hover { text-decoration-color: #fff; } }
.page-clients-sticker #store .ba__item img { object-fit: cover; object-position: center top; }
.page-clients-sticker #store .ba__item--wide { grid-column: 1 / -1; margin-top: 1.25rem; }
.page-clients-sticker #store .ba__item--wide img { aspect-ratio: 390 / 620; object-position: 50% 29%; }
.page-clients-sticker #store .links-inline { margin: 1.5rem 0 0; }
@media (min-width: 1024px) {
  .page-clients-sticker .open__media .rel__frame { aspect-ratio: 16 / 10; }
  .page-clients-sticker .open__cap { grid-column: 1 / -1; margin-top: 1rem; font-size: 1rem; }
  .page-clients-sticker .sec--found { margin-top: 8rem; padding: 7rem var(--pad) 7.5rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .page-clients-sticker .sec--found .sec__title { grid-column: 1 / -1; font-size: 5.5rem; line-height: .95; max-width: 15ch; }
  .page-clients-sticker .sec--found .sec__body { grid-column: 1; grid-row: 2; margin-top: 3rem; font-size: 1.375rem; max-width: 26rem; }
  .page-clients-sticker .sec--found .gets__list { grid-column: 2; grid-row: 2 / span 2; margin-top: 3rem; padding-top: 0; border-top: 0; grid-template-columns: 1fr 1fr; gap: 2.25rem 3rem; }
  .page-clients-sticker .sec--found .gets__list dt, .page-clients-sticker .sec--found .gets__list dd { font-size: 1.125rem; }
  .page-clients-sticker .sec--found .links-inline { grid-column: 1; grid-row: 3; margin-top: 2rem; }
  .page-clients-sticker #store .ba__item--wide { margin-top: 2rem; }
  .page-clients-sticker #store .ba__item--wide img { aspect-ratio: 1440 / 835; object-position: 50% 100%; }
}

/* Brian's Appliance Repair: /work/brians-appliance-repair on the v5 client-page grammar (raise/spec1/brian, 2026-10-16).
   Appended to the end of v5.css (no extra request). Every rule is scoped to .page-work-brian.
   Brian's site is white paper, so his captures sit on white and are framed from the top:
   the grey line under his buttons stays out of every frame. */
.page-work-brian .open__links { margin: 1.25rem 0 0; }
.page-work-brian .open__media.rel__media--proof .rel__frame { aspect-ratio: 786 / 940; background: #fff; }
.page-work-brian .open__media.rel__media--proof .rel__frame img { object-position: 50% 0; }
.page-work-brian .ba .ba__item img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; background: #fff; }
.page-work-brian .gets__list--nums { gap: 1.5rem; }
.page-work-brian .gets__list--nums dt { font-size: 3.5rem; line-height: .95; font-weight: 600; letter-spacing: -.05em; }
.page-work-brian .gets__list--nums dd { margin-top: .375rem; }
.page-work-brian .gets__note { margin-top: 1.5rem; max-width: 36rem; color: var(--grey); font-size: .9375rem; line-height: 1.4; }
@media (max-width: 1023px) {
  /* The two site shots swipe sideways on phones (native scroll-snap, nothing tied to scroll position). */
  .page-work-brian .proof__media.ba:not(.ba--one) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .page-work-brian .proof__media.ba:not(.ba--one)::-webkit-scrollbar { display: none; }
  .page-work-brian .proof__media.ba:not(.ba--one) > .ba__item { scroll-snap-align: start; }
}
@media (min-width: 1024px) {
  .page-work-brian .open__links { grid-column: 1; margin-top: 1.5rem; }
  .page-work-brian .open__media.rel__media--proof .rel__frame { aspect-ratio: 2880 / 1505; }
  .page-work-brian .ba--one { max-width: 23.5rem; }
  .page-work-brian .gets__list--nums { gap: 2.25rem; }
  .page-work-brian .gets__list--nums dt { font-size: 5rem; }
  .page-work-brian .gets__list--nums dd { font-size: 1.375rem; }
  .page-work-brian .gets__note { grid-column: 2; margin-top: 2rem; font-size: 1rem; }
}

/* RAISE-LEGAL (10/17, raise/spec1/legal.md Appendix B) */
/* L8 (raise/spec1/legal.md): /privacy and /terms in the v5 shell. One ink on white, v5 type and rules.
   The reading text stays still: .legal__title and .legal__rows are outside the motion runtime's selectors. */
.jdlo-v5:is(.page-privacy, .page-terms) .legal__date { margin-top: 1rem; font-size: .9375rem; line-height: 1.3; color: var(--grey); }
.jdlo-v5:is(.page-privacy, .page-terms) .legal { padding-top: 3rem; }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__index { display: none; }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__item { display: grid; gap: .875rem; padding: 1rem 0 2.5rem; border-top: 2px solid var(--ink); scroll-margin-top: calc(var(--header-h) + 1rem); }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__title { font-size: 1.5rem; line-height: 1.05; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__text { display: grid; gap: .875rem; max-width: 40rem; }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__text p { font-size: 1.0625rem; line-height: 1.5; letter-spacing: -.01em; }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__rows { list-style: none; padding: 0; margin: .25rem 0 0; border-top: 1px solid var(--rule); }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__rows li { display: grid; gap: .125rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__rows b { font-size: 1.125rem; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.jdlo-v5:is(.page-privacy, .page-terms) .legal__rows span { color: var(--grey); font-size: 1rem; line-height: 1.4; }
@media (min-width: 1024px) {
  .jdlo-v5:is(.page-privacy, .page-terms) .open > .legal__date { grid-column: 1; margin-top: 1.5rem; font-size: 1rem; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal { padding-top: 7rem; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; align-items: start; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__body { grid-column: 1; grid-row: 1; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__index { grid-column: 2; grid-row: 1; display: grid; justify-items: start; gap: .25rem; position: sticky; top: calc(var(--header-h) + 2rem); padding-top: 1rem; border-top: 2px solid var(--ink); }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__index .u { color: var(--grey); text-decoration-color: transparent; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__index .u:hover { color: var(--ink); text-decoration-color: var(--ink); }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__item { padding: 1.25rem 0 4.5rem; gap: 1.25rem; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__title { font-size: 2.25rem; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__text p { font-size: 1.25rem; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__rows b { font-size: 1.375rem; }
  .jdlo-v5:is(.page-privacy, .page-terms) .legal__rows span { font-size: 1.0625rem; }
}

/* L9: the 404 in the v5 shell, with three real site pictures (the desktop posters of the home Sites tiles). */
.jdlo-v5.page-notfound .open > .links-inline { margin-top: 1.5rem; }
.jdlo-v5.page-notfound .nf { padding-top: 2.5rem; }
.jdlo-v5.page-notfound .nf__list { margin-top: 1.25rem; border-top: 2px solid var(--ink); }
.jdlo-v5.page-notfound .nf__list li { border-bottom: 1px solid var(--rule); }
.jdlo-v5.page-notfound .nf__list li > a { grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .25rem; padding: .875rem 0; align-items: start; }
.jdlo-v5.page-notfound .nf__list .wt__frame { grid-row: 1 / span 2; aspect-ratio: 16 / 10; margin: 0; }
.jdlo-v5.page-notfound .nf__list .wt__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.jdlo-v5.page-notfound .nf__list b { font-size: 1.25rem; }
@media (min-width: 1024px) {
  .jdlo-v5.page-notfound .open > .links-inline { grid-column: 1; margin-top: 2rem; }
  .jdlo-v5.page-notfound .nf { padding-top: 6rem; }
  .jdlo-v5.page-notfound .nf__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; margin-top: 2rem; padding-top: 2rem; }
  .jdlo-v5.page-notfound .nf__list li { border-bottom: 0; }
  .jdlo-v5.page-notfound .nf__list li > a { grid-template-columns: 1fr; grid-template-rows: auto; padding: 0; }
  .jdlo-v5.page-notfound .nf__list .wt__frame { grid-row: auto; margin-bottom: .875rem; }
  .jdlo-v5.page-notfound .nf__list b { font-size: 1.75rem; }
}

/* Closers on these three pages: same block as /about, set smaller so it doesn't outweigh the page's own h1. */
@media (min-width: 1024px) {
  .jdlo-v5:is(.page-privacy, .page-terms, .page-notfound) .h4-contact__title { font-size: 4.5rem; }
  .jdlo-v5.page-notfound .open > .links-inline .u { font-size: 1.25rem; }
}

/* raise/spec1/seo S7 (10/17): service pages. Screenshots in a .photos grid keep their own shape; the websites list fills the desktop row. */
.photos > .photos__shot img { aspect-ratio: auto; object-fit: contain; background: none; border: 1px solid var(--rule); }
@media (max-width: 1023px) { .photos > .photos__shot figure { max-width: 17.5rem; margin-inline: auto; } }

/* Brian tiles (raise/spec1/brian.md P1-2 note): the captures are cropped above his grey booking line, so no
   "Vacaville Appliance" shows; the crop sits on his site's own white, anchored to the top of the frame. */
.jdlo-v5 img[src*="brian-tile-1440"] { object-fit: contain; object-position: 50% 0; background: #fff; }

/* /services: each big service name is now the link to its service page (SEO J4), so the link takes the heading's size */
.page-services .svc__name a.u { display: inline; padding-block: 0; margin-block: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-decoration-thickness: 2px; text-underline-offset: .12em; }

/* RAISE2-SW (10/17, raise/spec2/services-websites.md): /services/websites only. Every rule is scoped to .page-services-websites. */
/* SW1: Call and email in the first screen, placed as on /services */
.page-services-websites .open .svc__reach { margin: 1.25rem 0 0; }

/* SW2: the before and after sits right under the hero; its explanation moves under the pictures */
.page-services-websites #before-after { padding-top: 2.5rem; }
.page-services-websites #before-after .ba { margin-top: 1.25rem; }
.page-services-websites #before-after .sec__body { margin-top: 1.25rem; }
.page-services-websites .ba__item picture, .page-services-websites .ba__item img { display: block; }
.page-services-websites .ba__live { position: relative; }
.page-services-websites .ba__live video { display: none; }      /* phones keep the phone still; the loop is never requested */

/* SW3: "What the sites do" as picture cards. Phones: a native swipe strip (no scroll-linked motion). */
.page-services-websites .feats { list-style: none; display: flex; gap: .75rem; margin: 1.75rem calc(-1 * var(--pad)) 0; padding: 0 var(--pad);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.page-services-websites .feats::-webkit-scrollbar { display: none; }
.page-services-websites .feats::after { content: ""; flex: 0 0 1px; }
.page-services-websites .feats > .h4-tile { flex: 0 0 78vw; max-width: 22rem; scroll-snap-align: start; }
.page-services-websites .feats .h4-tile__media.tile__media { margin-inline: 0; aspect-ratio: 4 / 5; background: var(--mist, #f2f2f2); }
.page-services-websites .feats .h4-tile__media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; }
.page-services-websites .feats .h4-tile__media img, .page-services-websites .feats .h4-tile__media video { object-position: center top; }
.page-services-websites .feats .h4-tile__text { grid-template-columns: 1fr; gap: .375rem; padding-top: .875rem; }
.page-services-websites .feats .h4-tile__text h3 { font-size: 1.375rem; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.page-services-websites .feats .h4-tile__text p { font-size: .9375rem; line-height: 1.4; }
.page-services-websites .feats .h4-tile__go { justify-self: start; font-size: .9375rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* SW4: the two related services as real link rows, not run-on links after a paragraph */
.page-services-websites .month__next { margin-top: 1.75rem; }

@media (min-width: 1024px) {
  .page-services-websites .open .svc__reach { grid-column: 2; grid-row: 2; align-self: end; justify-self: start; display: flex; flex-direction: column; gap: .25rem; margin: 0; }
  .page-services-websites .open .svc__reach .u { font-size: 1.5rem; letter-spacing: -.02em; }
  .page-services-websites #before-after { padding-top: 3.5rem; }
  .page-services-websites #before-after .ba { margin-top: 1.75rem; gap: 1.25rem 2rem; }
  .page-services-websites #before-after .sec__body { max-width: 40rem; font-size: 1.25rem; }
  .page-services-websites .ba__live video { display: block; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); aspect-ratio: 16 / 10; height: auto;
    object-fit: cover; object-position: center top; opacity: 0; transition: opacity .4s; }
  .page-services-websites .ba__live video.is-on { opacity: 1; }
  .page-services-websites .feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 1.5rem; overflow: visible; margin: 3rem 0 0; padding: 0; scroll-snap-type: none; }
  .page-services-websites .feats::after { content: none; }
  .page-services-websites .feats > .h4-tile { flex: none; max-width: none; }
  .page-services-websites .feats .h4-tile__media.tile__media { aspect-ratio: 4 / 5; }
  .page-services-websites .feats .h4-tile__text h3 { font-size: 1.5rem; }
  .page-services-websites .feats .h4-tile__text p { font-size: 1rem; max-width: none; }
  .page-services-websites .month__next { max-width: none; }
}
@media (min-width: 1280px) { .page-services-websites .feats { gap: 3.5rem 2rem; } }
@media (min-width: 1024px) and (hover: hover) {
  .page-services-websites .feats .h4-tile__media :is(img, video) { transition: transform .9s cubic-bezier(.31, .13, .11, 1), opacity .4s; }
  .page-services-websites .feats a:hover .h4-tile__media :is(img, video) { transform: scale(1.025); }
  .page-services-websites .feats a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
}
@media (prefers-reduced-motion: reduce) { .page-services-websites .ba__live video { display: none; } }

/* SW5: the two pictures open with the hero, using entrance.css's own keyframes and the load-reveal hand-off (entrance.css itself is not edited) */
@media (prefers-reduced-motion: no-preference) {
  :is(.hk-js, .jdlo-home4-font) .jdlo-v5.page-services-websites:not([data-v5-restored]) #before-after .ba__item > :is(picture, .ba__live) {
    animation: jdlo-enter-photo .88s cubic-bezier(.31, .13, .11, 1) .2s both; }
  :is(.hk-js, .jdlo-home4-font) .jdlo-v5.page-services-websites:not([data-v5-restored]) #before-after .ba__item + .ba__item > :is(picture, .ba__live) { animation-delay: .28s; }
  html[data-jdlo-loader="on"] .jdlo-v5.page-services-websites:not([data-v5-entrance-ready]):not([data-v5-restored]) #before-after .ba__item > :is(picture, .ba__live) { animation-play-state: paused; }
}

/* raise/spec2/services-booking-quote-tools (10/17): a real screen for every request form, a two-column desktop instead of one
   narrow column, and Call + email in the first screen. Scoped to .page-services-tools (routeKey "services-tools"); v5 grammar:
   ink on white, Schibsted Grotesk, square corners, no shadow, no new colors. Motion: the tiles, rows and Brian's pair rise through
   the existing jdlo:motion groups (.h4-tiles>.h4-tile, .rows>li, .photos>li); no runtime change. */
.page-services-tools .bq-reach { margin: 1.25rem 0 0; }
.page-services-tools #requests { padding-top: 3.5rem; }
.page-services-tools .bq-tiles { margin-top: 1.5rem; gap: 2.5rem; }
.page-services-tools .bq-tiles .h4-tile__media { margin-inline: 0; aspect-ratio: 4 / 5; background: var(--mist, #f2f2f2); }
.page-services-tools .bq-tiles .h4-tile__media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; }
.page-services-tools .bq-tiles .h4-tile__media img,
.page-services-tools .bq-tiles .h4-tile__media video { object-position: center top; }
.page-services-tools .bq-tiles .h4-tile__text { grid-template-columns: 1fr; }
.page-services-tools .bq-tiles .h4-tile__text h3 { font-size: 1.625rem; }
.page-services-tools .bq-tiles .h4-tile__text p { color: var(--ink); }
.page-services-tools .bq-ask { margin: 2rem 0 0; }
.page-services-tools .bq-pair { margin: 1.5rem 0 0; grid-template-columns: 1fr 1fr; gap: .75rem; }
.page-services-tools .bq-pair a { display: block; color: inherit; min-height: var(--hit); }
.page-services-tools .bq-pair img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: #fff; border: 1px solid var(--rule); }
.page-services-tools .bq-pair figcaption { padding: .5rem 0 0; }
@media (hover: hover) {
  .page-services-tools .bq-tiles a:hover h3,
  .page-services-tools .bq-pair a:hover figcaption { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page-services-tools .bq-tiles .h4-tile__media > img,
  .page-services-tools .bq-pair img { transition: transform .9s cubic-bezier(.31, .13, .11, 1); }
  .page-services-tools .bq-tiles a:hover .h4-tile__media > img,
  .page-services-tools .bq-pair a:hover img { transform: scale(1.025); }
}
@media (min-width: 1024px) {
  .page-services-tools .bq-reach { grid-column: 2; grid-row: 2; align-self: end; justify-self: start; display: flex; flex-direction: column; gap: .25rem; margin: 0; }
  .page-services-tools .bq-reach .u { font-size: 1.5rem; letter-spacing: -.02em; }
  .page-services-tools #requests { padding-top: 5rem; }
  .page-services-tools .bq-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; margin-top: 2.5rem; }
  .page-services-tools .bq-tiles .h4-tile__media { aspect-ratio: 4 / 5; }
  .page-services-tools .bq-tiles .h4-tile__media img,
  .page-services-tools .bq-tiles .h4-tile__media video { object-position: center top; }
  .page-services-tools .bq-tiles .h4-tile__text h3 { font-size: 2rem; }
  .page-services-tools .bq-tiles .h4-tile__text p { max-width: none; }
  .page-services-tools .bq-ask { margin-top: 2.5rem; }
  .page-services-tools .bq-ask .u { font-size: 1.25rem; }
  /* Quotes and orders: the store screenshot left, the three rows right */
  .page-services-tools #quotes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: 4rem; align-items: start; }
  .page-services-tools #quotes > .wk__title { grid-column: 1 / -1; }
  .page-services-tools #quotes > .photos { grid-column: 1; grid-row: 2 / span 2; display: block; margin-top: 2.5rem; }
  .page-services-tools #quotes > .wk__body { grid-column: 2; grid-row: 2; margin-top: 2.5rem; }
  .page-services-tools #quotes > .rows { grid-column: 2; grid-row: 3; max-width: none; }
  /* The admin: three columns across the page */
  .page-services-tools #admin .rows { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  .page-services-tools #admin .rows b { font-size: 1.5rem; }
  /* Reviews and referrals: the words left, Brian's two pages right */
  .page-services-tools #reviews { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .page-services-tools #reviews > .wk__title { grid-column: 1 / -1; }
  .page-services-tools #reviews > .wk__body { grid-column: 1; grid-row: 2; margin-top: 2.5rem; font-size: 1.5rem; line-height: 1.35; letter-spacing: -.015em; }
  .page-services-tools #reviews > .bq-pair { grid-column: 2; grid-row: 2; margin-top: 2.5rem; gap: 1.5rem; }
}

/* #also: the three links get their own row (not run on after the sentence); the sharp tssprint.com format capture in #quotes. */
.page-services-tools #also .bq-more { margin: 1rem 0 0; }
@media (min-width: 1024px) { .page-services-tools #also .bq-more { grid-column: 2; margin-top: 1.25rem; } .page-services-tools #also .bq-more .u { font-size: 1.25rem; } }

/* raise/spec2/services-photo-video: picture + reach in the first screen, section heads well under the h1,
   photos as a 4:5 row (native swipe strip on phones), "Where it ran" in the v5 H2-left grid. */
.page-services-photo-video .open__name { font-size: 2.75rem; line-height: .94; }
.page-services-photo-video .open__role { max-width: 34ch; }
.page-services-photo-video .pv-reach { margin: 1.5rem 0 0; gap: 1.75rem 1.5rem; }
.page-services-photo-video .pv-hero { margin: 1.75rem calc(-1 * var(--pad)) 0; }
.page-services-photo-video .pv-hero > a { display: block; cursor: zoom-in; }
.page-services-photo-video .pv-hero img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; background: #111; }
.page-services-photo-video .pv-hero figcaption { padding: .5rem var(--pad) 0; font-size: .875rem; line-height: 1.35; }
.page-services-photo-video .wk { padding-top: 4.5rem; }
.page-services-photo-video .wk__title { font-size: 2rem; line-height: 1; letter-spacing: -.045em; max-width: 20ch; text-wrap: balance; }
.page-services-photo-video #photos .photos img { aspect-ratio: 4 / 5; }
.page-services-photo-video .photos__open { cursor: zoom-in; }
.page-services-photo-video #photos .pv-links, .page-services-photo-video #how .pv-links { margin: 1rem 0 0; }
.page-services-photo-video #where .rows { max-width: none; }
@media (max-width: 1023px) {
  .page-services-photo-video #photos .photos { grid-auto-flow: column; grid-auto-columns: 80%; gap: .75rem; padding: 0 var(--pad); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .page-services-photo-video #photos .photos::-webkit-scrollbar { display: none; }
  .page-services-photo-video #photos .photos > li { scroll-snap-align: start; }
  .page-services-photo-video #photos .photos figcaption { padding-inline: 0; }
}
@media (min-width: 1024px) {
  .page-services-photo-video .open { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; align-items: start; padding-top: 3rem; }
  .page-services-photo-video .open__name { grid-column: 1; grid-row: 1; font-size: 5.75rem; line-height: .9; }
  .page-services-photo-video .open__role { grid-column: 1; grid-row: 2; margin-top: 2rem; font-size: 1.375rem; }
  .page-services-photo-video .pv-reach { grid-column: 1; grid-row: 3; align-self: start; margin-top: 1.75rem; }
  .page-services-photo-video .pv-reach .u { font-size: 1.25rem; }
  .page-services-photo-video .pv-hero { grid-column: 2; grid-row: 1 / span 3; margin: .5rem 0 0; }
  .page-services-photo-video .pv-hero figcaption { padding-inline: 0; }
  .page-services-photo-video .wk { padding-top: 8rem; }
  .page-services-photo-video .wk__title { font-size: 3.5rem; }
  .page-services-photo-video #photos .photos > li:first-child { grid-column: auto; }
  .page-services-photo-video #where { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .page-services-photo-video #where .rows { margin-top: .25rem; }
  .page-services-photo-video #how .pv-links { grid-column: 2; }
  .page-services-photo-video .h4-contact__title { font-size: 4.5rem; }
}

/* Photo viewer (v5.js block "Photo viewer"): the large file on a dark stage inside the page. Square corners, no shadow. */
html.lb-lock { overflow: hidden; }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0a0a0a; color: #fff; }
.lb::backdrop { background: #0a0a0a; }
.lb [hidden] { display: none !important; }
.lb__fig { position: absolute; inset: 3.5rem 0 4.5rem; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; }
.lb__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb__cap { padding: .75rem var(--pad) 0; font-size: .9375rem; line-height: 1.35; color: rgba(255,255,255,.8); text-align: center; }
.lb__btn { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.lb__btn svg { width: 24px; height: 24px; fill: currentColor; }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__close { position: absolute; top: .375rem; right: .5rem; }
.lb__bar { position: absolute; left: 0; right: 0; bottom: .5rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; font-size: .875rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
@media (min-width: 1024px) { .lb__fig { inset: 4rem 5rem 4.5rem; } .lb__btn svg { width: 28px; height: 28px; } }
@keyframes jdlo-lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .lb[open] .lb__img { animation: jdlo-lb-in .32s cubic-bezier(.31,.13,.11,1) both; } }

/* ABOUT-R2 (raise/spec2/about.md): one of my R8 photos beside "How I work", and a card grid with no hole
   (6 cards = 3 + 3; if Miiir is held, 5 cards = 3 + 2 wide). Scoped to .page-about. v5 grammar: square corners, no shadow. */
.page-about .how__photo { margin: 2rem calc(-1 * var(--pad)) 0; }
.page-about .how__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #0b0b0b; }
.page-about .how__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.page-about .how__photo figcaption { padding: .625rem var(--pad) 0; color: var(--grey); font-size: .875rem; line-height: 1.4; }
.page-about #how > .links-inline { margin: 1.25rem 0 0; }
@media (min-width: 640px) and (max-width: 1023px) {
  .page-about .now--cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .page-about #how { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; column-gap: 4rem; align-items: start; }   /* same columns as the hero, so the photo sits under the portrait */
  .page-about #how > .sec__title, .page-about #how > .story, .page-about #how > .links-inline { grid-column: 1; }
  .page-about #how > .how__photo { grid-column: 2; grid-row: 1 / span 3; justify-self: end; width: 70%; margin: 0; }
  .page-about .how__frame { aspect-ratio: 4 / 5; }
  .page-about .how__photo figcaption { padding-inline: 0; font-size: .9375rem; }
  .page-about #how > .links-inline { margin-top: 1.5rem; }
  .page-about ul.now--cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-about .now--cards > li { grid-column: span 2; }
  .page-about .now--cards > li:nth-child(3n+1):nth-last-child(2),
  .page-about .now--cards > li:nth-child(3n+1):nth-last-child(2) + li,
  .page-about .now--cards > li:nth-child(3n+1):last-child { grid-column: span 3; }
}

/* joon11ee: /work/joon11ee on the v5 client-page grammar (raise/spec2/work-joon11ee, 2026-10-17).
   Appended to the end of v5.css (no extra request). Every rule is scoped to .page-work-joon.
   Phone: the full Urus card (1179 px capture) inside the crop marks, no loop.
   Desktop: the request-strip loop sits beside the lede, so the whole loop is above the fold. */
.page-work-joon .open__note { margin-top: 1rem; color: var(--grey); font-size: .9375rem; line-height: 1.4; }
.page-work-joon .open__cap { margin-top: .75rem; max-width: 40rem; color: var(--grey); font-size: .875rem; line-height: 1.4; }
.page-work-joon .open__media.rel__media--proof .rel__frame { aspect-ratio: 1179 / 2019; background: #0c0c0c; }
.page-work-joon .open__media.rel__media--proof .rel__frame img { object-position: 50% 0; }
.page-work-joon .ba--one .ba__item img { aspect-ratio: 1179 / 1548; object-position: 50% 0; background: #0c0c0c; }
@media (max-width: 1023px) {
  .page-work-joon .open__media.rel__media--proof { max-width: 26rem; max-width: min(26rem, 48svh); }  /* tablets: the tall card stays under half a screen wide */
  .page-work-joon .tile__media[data-tile="joon"] video { display: none; }  /* phone shows the 3x still; the loop is never requested */
  .page-work-joon .proof__media--wide .ba__item img { aspect-ratio: 780 / 1688; object-fit: cover; }
}
@media (min-width: 1024px) {
  .page-work-joon .open { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; align-items: start; }
  .page-work-joon .open > .open__role { grid-column: 1; grid-row: 2; }
  .page-work-joon .open > .open__note { grid-column: 1; grid-row: 3; margin-top: 1.25rem; font-size: 1.0625rem; }
  .page-work-joon .open > .open__media { grid-column: 2; grid-row: 2 / span 3; margin-top: 2.5rem; }
  .page-work-joon .open__media.rel__media--proof .rel__frame { aspect-ratio: 16 / 10; }
  .page-work-joon .open > .open__cap { grid-column: 2; grid-row: 5; margin-top: .25rem; padding-inline: 1.25rem; font-size: 1rem; }
  .page-work-joon .proof__media--wide .ba__item img { aspect-ratio: 16 / 10; }
  .page-work-joon .ba--one { justify-self: end; width: min(100%, 24rem); max-width: none; }
}

/* zz-location (JP 10/17 "just put napa"): one quiet place line under the home hero sentence, above the buttons. */
.jdlo-v5 .h4-hero__side .h4-place { margin-top: .5rem; font-size: .9375rem; line-height: 1.35; letter-spacing: -.005em; color: var(--grey); }
@media (min-width: 1024px) { .jdlo-v5 .h4-hero__side .h4-place { margin-top: .625rem; font-size: 1.0625rem; } }

/* CHECK2 Open 4 (10/17): the client-site link that opens a "What I do for them" row (pearlsfarminc.com, tssprint.com)
   gets a 44 px tall hit area. Inline padding doesn't move the line or the text around it. */
.gets__list .u.u--inline { padding-block: 11px; }