/* Landing page (index.html, served at /). Feature layout and art only: buttons, links, status dots, the
   segmented switch, avatars and media tiles come from components.css and are composed here, never restyled.
   The page is an editorial arc between two night pieces, after blackroll.com and the BLACKROLL AI Lab: a night
   masthead in display capitals with the film on the same night, then where the context comes from, a carousel of what is inside, the
   teams on their night stage, a closing statement, and Roger AI's fluid in the footer. Sections open on a
   hairline rule with a mono index; layouts sit on a twelve-column grid with blackroll.com's 24 px margins.
   Sections: 1 frame and header · 2 masthead · 3 the film · 4 your tools and inside · 5 teams · 6 close and footer
   · 7 vignettes · motion · responsive. */

/* 1. Frame and header ------------------------------------------------------------- */
#landing{--night:var(--color-night-900);--gutter:var(--space-6);--header:calc(var(--space-16) + var(--space-2));--column-gap:var(--space-6)}
html:has(.landing-main){scroll-behavior:smooth;scroll-padding-top:calc(var(--space-16) + var(--space-6))}
.landing-main{display:block;overflow-x:clip}
.landing-container{width:min(1600px,100% - var(--gutter) * 2);margin-inline:auto}
.landing-noscript{padding:var(--space-10) var(--space-6);font-size:var(--text-m)}

/* As the AI Lab's header: page links left, the lockup centred, the way in right. Clear over the night masthead,
   frosted once the page moves, in the night or the day it is over. */
.landing-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);color:var(--ink);transition:background-color var(--motion-enter) var(--ease-out),color var(--motion-enter) var(--ease-out),box-shadow var(--motion-enter) var(--ease-out)}
.landing-header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-6);height:var(--header);width:min(1600px,100% - var(--gutter) * 2);margin-inline:auto}
.landing-header.is-scrolled{background:color-mix(in srgb,var(--page) 84%,transparent);box-shadow:inset 0 -1px 0 var(--line-soft);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.landing-header.is-on-night{color:var(--night-text)}
.landing-header.is-on-night.is-scrolled{background:color-mix(in srgb,var(--night) 80%,transparent);box-shadow:inset 0 -1px 0 var(--night-line)}
.landing-nav{display:flex;align-items:center;gap:var(--space-8);justify-self:start}
.landing-nav>a{font-size:var(--text-s);font-weight:var(--weight-medium);color:inherit;text-decoration:none;opacity:.78;transition:opacity var(--motion-fast) var(--ease-out)}
.landing-nav>a:is(:hover,:focus-visible){opacity:1}
.landing-brand{display:inline-flex;justify-self:center;color:inherit;text-decoration:none}
/* The lockup: the wordmark and the product's outlined mono tag, as the AI Lab pairs its own. */
.landing-lockup{display:inline-flex;align-items:center;gap:var(--space-3)}
.landing-logo{display:block;width:112px;aspect-ratio:2811/397;background:currentColor;-webkit-mask:url(/assets/blackroll.svg) center/contain no-repeat;mask:url(/assets/blackroll.svg) center/contain no-repeat}
.landing-tag{display:inline-flex;align-items:center;height:20px;padding:0 var(--space-2);border:1px solid;border-radius:var(--radius-full);font:var(--weight-regular) 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;opacity:.85}
.landing-header-cta{justify-self:end}
.is-on-night .landing-header-cta.secondary{background:var(--night-text);color:var(--ink)}
.is-on-night .landing-header-cta.secondary:hover{background:var(--color-white-00)}
.landing-auth-pending [data-landing-cta],.landing-auth-pending [data-hero-cta]{visibility:hidden}
.landing-account{position:relative;justify-self:end}
.landing-account-trigger{display:grid;place-items:center;width:var(--control-lg);height:var(--control-lg);padding:0;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--page);cursor:pointer}
.landing-account-trigger>.avatar{width:var(--space-10);height:var(--space-10)}
.landing-account-menu{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:1;display:grid;gap:var(--space-1);width:min(280px,calc(100vw - var(--space-5) * 2));padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--page);color:var(--ink);box-shadow:var(--shadow-float)}
.landing-account-menu[hidden]{display:none}
.landing-account-identity{display:grid;gap:2px;padding:var(--space-2) var(--space-3);overflow-wrap:anywhere}
.landing-account-identity strong{font-size:var(--text-s);font-weight:var(--weight-medium)}
.landing-account-identity small{font-size:var(--text-xs);color:var(--muted)}
.landing-account-menu>a,.landing-account-menu>button{display:block;width:100%;padding:var(--space-2) var(--space-3);border:0;border-radius:var(--radius-s);background:transparent;color:inherit;font:inherit;font-size:var(--text-s);text-align:left;text-decoration:none;cursor:pointer}
.landing-account-menu>:is(a,button):is(:hover,:focus-visible){background:var(--plate)}
.landing-account-menu>[role="alert"]{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--ink-alert)}
/* Reading progress: a mint hairline under the header that fills as the page is read. */
.landing-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline:scroll()){
  .landing-progress{animation:landing-progress linear both;animation-timeline:scroll(root)}
}
@keyframes landing-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Section rules: a hairline with the section's index and name in mono, and a quiet note on the right. */
.section-rule{display:flex;align-items:baseline;gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.section-rule-index{color:var(--ink)}
.section-rule-note{margin-left:auto;text-align:right}
[data-night] .section-rule{border-color:var(--night-line);color:var(--night-muted)}
[data-night] .section-rule-index{color:var(--night-text)}
/* Headings on blackroll.com's fluid scale: Söhne 500, snug tracking. */
.landing-title{font-size:clamp(34px,4.2vw,76px);font-weight:var(--weight-medium);line-height:1.02;letter-spacing:var(--tracking-title);text-wrap:balance}
.section-lead{max-width:34em;font-size:var(--text-l);line-height:var(--leading-normal);color:var(--muted);text-wrap:pretty}

/* 2. Masthead ----------------------------------------------------------------------- */
/* The AI Lab's night: a slow mint glow and four hairline columns behind the promise in display capitals, the
   line under it with the way in on a rule, then the film, which rises out of the night onto the page. */
.hero{position:relative;isolation:isolate;padding:calc(var(--header) + clamp(56px,10vh,136px)) 0 var(--space-24);background:var(--night);color:var(--night-text)}
.hero::before{content:'';position:absolute;z-index:-2;top:-12%;right:-10%;width:min(1100px,80vw);aspect-ratio:1;border-radius:var(--radius-full);background:radial-gradient(closest-side,color-mix(in srgb,var(--color-mint-700) 30%,transparent),transparent);pointer-events:none}
.hero::after{content:'';position:absolute;z-index:-2;inset:0 max(var(--gutter),(100% - 1600px) / 2);background:linear-gradient(90deg,var(--night-line) 0 1px,transparent 1px) 0 0/25% 100% repeat-x;border-right:1px solid var(--night-line);opacity:.35;-webkit-mask:linear-gradient(180deg,var(--color-black-00),transparent 62%);mask:linear-gradient(180deg,var(--color-black-00),transparent 62%);pointer-events:none}
.hero-copy{display:grid;gap:var(--space-8)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);margin:0;font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--night-muted)}
.hero-eyebrow>i{width:6px;height:6px;border-radius:var(--radius-full);background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.hero-title{max-width:16em;font-size:clamp(38px,6.1vw,118px);font-weight:var(--weight-medium);line-height:.98;letter-spacing:var(--tracking-display);text-transform:uppercase;text-wrap:balance}
/* Each word rises out of its own mask on arrival; at rest they are plain words. */
.hero-word,.statement-word{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;vertical-align:top}
.hero-word>span,.statement-word>span{display:inline-block}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-8);margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--night-line)}
.hero-lead{max-width:32em;font-size:var(--text-l);line-height:1.5;color:var(--night-muted);text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8)}
.hero-actions>.primary{gap:var(--space-3);min-height:var(--control-lg);padding-inline:var(--space-6) var(--space-5)}
.hero-watch{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--night-text);font-size:var(--text-m);font-weight:var(--weight-medium);text-decoration:none}
.hero-watch-icon{display:grid;place-items:center;width:var(--space-10);height:var(--space-10);border:1px solid var(--night-line);border-radius:var(--radius-full);transition:background-color var(--motion-enter) var(--ease-out),color var(--motion-enter) var(--ease-out)}
.hero-watch-icon>svg{width:12px;height:12px;margin-left:2px;fill:currentColor}
.hero-watch:is(:hover,:focus-visible) .hero-watch-icon{background:var(--night-text);color:var(--night)}
/* The film plays on the same night, with its steps under it in night colours. */
.hero-visual{margin-top:clamp(56px,9vh,112px)}
.film-stage{box-shadow:0 40px 90px -30px var(--color-black-80)}
.hero .film-step-line{background:var(--night-line)}
.hero .film-step-line>i{background:var(--night-text)}
.hero .film-step-number{color:var(--night-muted)}
.hero .film-step-label,.hero .film-captions{color:var(--night-text)}
.hero .film-toggle{border-color:var(--night-line);color:var(--night-text)}
.hero .film-toggle:hover{background:color-mix(in srgb,var(--night-text) 12%,transparent)}

/* 3. The film --------------------------------------------------------------------- */
/* One campaign from the Brand Calendar to delivery, as a motion graphic (landing-film.js). The artboard is a
   fixed 1280 × 720 scene scaled to its tile; the film places and moves every element with Web Animations, so
   this section only draws them. Under the stage, the steps light as their chapter plays. */
.film-stage{aspect-ratio:16/9}
.film-stage>.media-label{z-index:3}
.film-art{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;opacity:0;transition:opacity var(--motion-reduced) var(--ease-out)}
.film-stage.is-ready .film-art{opacity:1}
.film-stage.is-ready .film-art.is-swapping{opacity:0}
.film-item{position:absolute;left:0;top:0;transform-origin:0 0;white-space:nowrap}
.film-box{position:relative}

/* The app window: its bar with the wordmark, the year and the place, and the screen the chapters play on. */
.film-window{position:absolute;left:72px;top:44px;display:flex;flex-direction:column;width:1136px;height:632px;overflow:hidden;border-radius:var(--radius-m);background:var(--page);box-shadow:var(--shadow-lift)}
.film-window-bar{display:flex;flex:0 0 52px;align-items:center;gap:var(--space-4);padding:0 var(--space-4) 0 var(--space-5);border-bottom:1px solid var(--line-soft)}
.film-logo{flex:0 0 auto;width:88px;aspect-ratio:2811/397;background:var(--ink);-webkit-mask:url(/assets/blackroll.svg) center/contain no-repeat;mask:url(/assets/blackroll.svg) center/contain no-repeat}
.film-crumbs{display:flex;align-items:center;padding-left:var(--space-4);border-left:1px solid var(--line);font-size:var(--text-s);color:var(--muted)}
.film-crumbs>i{width:1px;height:14px;margin:0 var(--space-3);background:var(--line);transform:rotate(20deg)}
.film-crumb-slot{position:relative;display:block;width:280px;height:20px;overflow:hidden}
.film-crumb{font-weight:var(--weight-medium);line-height:20px;color:var(--ink)}
.film-window-tools{display:flex;align-items:center;gap:var(--space-4);margin-left:auto}
.film-roger{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--space-8);padding:0 var(--space-3);border-radius:var(--radius-m);background:var(--plate);font-size:var(--text-s);font-weight:var(--weight-medium)}
.film-roger>i{width:var(--space-3);height:var(--space-3);border-radius:var(--radius-full);background:radial-gradient(circle at 35% 35%,var(--color-mint-200),var(--color-mint-500) 60%,var(--color-mint-700))}
.film-people{display:flex}
.film-people>.avatar{box-shadow:0 0 0 2px var(--page)}
.film-people>.avatar+.avatar{margin-left:2px}
.film-screen{position:relative;flex:1;overflow:hidden}
.film-over{position:absolute;inset:0;pointer-events:none}

/* Chapter 1 and the return: the Brand Calendar as the app draws it: tiers, a row per project, the tier in each bar's height. */
.film-calendar{width:1136px;height:580px}
.film-calendar>*{position:absolute}
.film-month{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);color:var(--muted)}
.film-gridline{width:1px;background:var(--line-soft);transform-origin:0 0}
.film-gridline.is-quarter{background:var(--line)}
.film-theme{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);overflow:hidden;border-radius:var(--radius-s);background:var(--plate);font-size:var(--text-xs);line-height:1;white-space:nowrap}
.film-theme>small{font-size:var(--text-xs);color:var(--muted)}
.film-theme>b{font-weight:var(--weight-medium);letter-spacing:var(--tracking-label)}
.film-tier-rule{height:1px;background:var(--line-soft);transform-origin:0 50%}
.film-tier{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--muted);white-space:nowrap}
.film-project{display:flex;align-items:center;overflow:hidden;font-size:var(--text-s);font-weight:var(--weight-medium);white-space:nowrap;text-overflow:ellipsis}
.film-bar{display:flex;gap:1px;overflow:hidden;border-radius:var(--radius-s)}
.film-bar>i,.film-strip-tones>i{flex:1 1 0;min-width:0;background:var(--tone-0)}
.film-bar>.tone-1,.film-strip-tones>.tone-1{background:var(--tone-1)}
.film-bar>.tone-2,.film-strip-tones>.tone-2{background:var(--tone-2)}
.film-bar>.tone-3,.film-strip-tones>.tone-3{background:var(--tone-3)}
.film-delivered{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--space-3) 0 6px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;transform-origin:0 50%;box-shadow:0 6px 14px -8px var(--color-black-40)}
.film-delivered>svg,.film-slot-tick>svg,.film-counter-tick>svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.film-delivered>small{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);opacity:.7}

/* The campaign bar that opens into the phase strip and becomes the channel plan's header. */
.film-strip>.film-box{overflow:hidden}
.film-strip-tones{position:absolute;inset:0;display:flex;gap:2px}
.film-strip-phases{position:absolute;inset:0;display:flex;gap:2px}
.film-strip-phases>span{display:flex;flex:1 1 0;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:0 var(--space-4);overflow:hidden}
.film-strip-phases b{font-size:var(--text-s);font-weight:var(--weight-medium)}
.film-strip-phases small{font-size:var(--text-xs);color:var(--subtle)}
.film-strip-lift{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--ink)}
.film-live-line>.film-box{background:var(--ink)}
.film-live-pill{display:inline-flex;align-items:center;justify-content:center;width:96px;height:22px;border-radius:var(--radius-full);background:var(--ink);color:var(--page);font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}

/* Chapter 2: the campaign plan. */
.film-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-full);background:var(--media-label);color:var(--media-label-ink);font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.film-title{font-size:48px;font-weight:var(--weight-medium);line-height:60px;letter-spacing:var(--tracking-title)}
.film-tagline{font-size:var(--text-l);color:var(--muted)}
.film-meta{display:grid;justify-items:end;gap:var(--space-1)}
.film-meta small{font-size:var(--text-xs);color:var(--muted)}
.film-meta strong{font-size:var(--text-2xl);font-weight:var(--weight-medium);line-height:1.1;letter-spacing:var(--tracking-title)}
.film-fact{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center}
.film-fact>i{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-soft);transform-origin:0 0}
.film-fact>b{font-size:var(--text-s);font-weight:var(--weight-medium)}
.film-fact>span{font-size:17px}
.film-rule{background:var(--line-soft)}

/* Chapter 3: the channel plan. */
.film-channel{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-s);font-weight:var(--weight-medium)}
.film-channel>.br-icon{width:var(--space-4);height:var(--space-4);color:var(--muted)}
.film-owner>.avatar{width:var(--space-6);height:var(--space-6)}
.film-activity{display:flex;align-items:center;padding:0 10px;overflow:hidden;border-radius:var(--radius-s);background:var(--tone-0);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.film-activity>span{overflow:hidden;text-overflow:ellipsis}
.film-activity.tone-1{background:var(--tone-1)}
.film-activity.tone-2{background:var(--tone-2)}

/* Chapter 4: the consumer journey, as the app's journey page draws it: touchpoints by stage (a channel's square,
   larger with more activities), destinations as pills with what people do there, lines falling from one to the
   next in ink at 30 %, a follow-up landing on a dot, and the heart where people become people we know. */
.film-stage-title{display:grid;gap:2px}
.film-stage-title>b{font-size:var(--text-m);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}
.film-stage-title>small{font-size:var(--text-xs);color:var(--muted)}
.film-stage-title.is-lane>b{font-size:var(--text-s);font-weight:var(--weight-medium);letter-spacing:0}
.film-journey-line svg{display:block;overflow:visible}
.film-journey-line path{fill:none;stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1.5px;stroke-linecap:round}
.film-journey-line circle{fill:color-mix(in srgb,var(--ink) 45%,transparent)}
.film-touch{display:grid;grid-template-columns:24px minmax(0,1fr);align-content:center;column-gap:var(--space-3);row-gap:2px;padding:0 var(--space-8) 0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--page);transform-origin:50% 50%;--touch:var(--channel-other)}
.film-touch.has-slots{align-content:start;padding-top:var(--space-2)}
.film-touch.is-social{--touch:var(--channel-organic-social)}
.film-touch.is-paid{--touch:var(--channel-paid-social)}
.film-touch.is-email{--touch:var(--channel-email)}
.film-touch.is-pr{--touch:var(--channel-pr-partnerships)}
.film-touch.is-retail{--touch:var(--channel-b2b-retail)}
.film-touch-square{grid-row:1/3;justify-self:center;width:12px;height:12px;border-radius:var(--radius-xs);background:var(--touch)}
.film-touch.has-slots .film-touch-square{grid-row:1}
.film-touch.is-size-2 .film-touch-square{width:var(--space-4);height:var(--space-4)}
.film-touch.is-size-3 .film-touch-square{width:var(--space-5);height:var(--space-5)}
.film-touch-name{overflow:hidden;font-size:13px;font-weight:var(--weight-medium);line-height:1.2;text-overflow:ellipsis}
.film-touch>small{font-size:var(--text-xs);line-height:1.2;color:var(--muted)}
.film-touch-mark{position:absolute;top:50%;right:var(--space-3);display:flex;color:var(--muted);translate:0 -50%}
.film-touch.has-slots .film-touch-mark{top:var(--space-2);translate:none}
.film-glyph{width:var(--space-4);height:var(--space-4);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.film-dest{display:flex;align-items:center;gap:6px;padding:0 var(--space-3) 0 var(--space-2);border:1px solid var(--line);border-radius:var(--radius-full);background:var(--page);font-size:13px;font-weight:var(--weight-medium);transform-origin:50% 50%}
.film-dest-kind{display:flex;color:var(--muted)}
.film-dest-kind>.film-glyph,.film-dest-known>.film-glyph{width:14px;height:14px}
.film-dest-known{display:flex;margin-left:auto;color:var(--ink-positive);transform-origin:50% 50%}
.film-dest-known>.film-glyph{fill:var(--accent)}

/* Chapter 5: the AI review, as Roger reads a plan on the Analysis page: a light for each lens (stop, warning or go,
   each with its tint for a halo), Roger's tracked changes in fields beside the details they change (the old value
   struck through, the new one on mint, dashed until it is applied), a mint scan, and Roger's tile in the AI Lab's
   night: the orb with its turning ring, three lamps that count the lights, and Apply. */
.film-review-head{display:grid;font-size:36px;font-weight:var(--weight-medium);line-height:52px;letter-spacing:var(--tracking-title)}
.film-review-head>span{grid-area:1/1}
.film-scan{border-radius:var(--radius-s);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 14%,transparent) 55%,color-mix(in srgb,var(--accent) 30%,transparent) 88%,transparent)}
.film-light{display:grid;width:14px;height:14px}
.film-light>i{grid-area:1/1;border-radius:var(--radius-full);transform-origin:50% 50%}
.film-light>.is-off{box-shadow:inset 0 0 0 1.5px var(--line)}
.film-light>.is-stop{background:var(--ink-alert);box-shadow:0 0 0 4px var(--tint-alert)}
.film-light>.is-warn{background:var(--color-orange-500);box-shadow:0 0 0 4px var(--tint-attention)}
.film-light>.is-go{background:var(--accent);box-shadow:0 0 0 4px var(--tint-positive)}
.film-check-lens{font-size:var(--text-s);font-weight:var(--weight-medium);line-height:20px}
.film-check-text{display:grid;font-size:15px;line-height:22px}
.film-check-text>span{grid-area:1/1}
.film-field{display:flex;align-items:center;gap:6px;padding:0 10px;overflow:hidden;border-radius:var(--radius-s);background:var(--plate);font-size:13px;line-height:1;transform-origin:50% 50%}
.film-field>.film-glyph{flex:none;width:14px;height:14px;color:var(--muted)}
.film-field-value{position:relative;overflow:hidden;text-overflow:ellipsis}
.film-field-strike{position:absolute;top:50%;left:0;right:0;height:1.5px;margin-top:-.75px;background:var(--ink);transform-origin:0 50%}
.film-field.is-new{background:var(--tint-positive);color:var(--ink-positive)}
.film-field.is-new>.film-glyph{color:var(--ink-positive)}
.film-field-dash{position:absolute;inset:0;border:1px dashed var(--ink-positive);border-radius:inherit}
.film-field-arrow{display:flex;color:var(--muted)}
.film-field-arrow>.br-icon{width:16px;height:16px}
.film-review-tile{border-radius:18px;background:var(--media-night-gradient);color:var(--night-text);box-shadow:var(--shadow-lift)}
.film-review-tile>*{position:absolute}
.film-orb{width:20px;height:20px;border-radius:var(--radius-full);background:var(--orb);box-shadow:var(--orb-glow)}
.film-orb>i{position:absolute;inset:-5px;border-radius:var(--radius-full);background:conic-gradient(transparent 0 35%,var(--color-mint-400));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),var(--color-black-00) calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),var(--color-black-00) calc(100% - 1.5px))}
.film-review-who{font-size:var(--text-m);font-weight:var(--weight-medium);line-height:20px}
.film-lamp{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:var(--space-3);row-gap:2px}
.film-lamp.is-stop{--lamp:var(--color-red-500)}
.film-lamp.is-warn{--lamp:var(--color-orange-500)}
.film-lamp.is-go{--lamp:var(--color-mint-400)}
.film-lamp-light{position:relative;grid-row:1/3;width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-night-900);box-shadow:inset 0 0 0 1px var(--night-line)}
.film-lamp-light>i{position:absolute;inset:3px;border-radius:inherit;background:var(--lamp);box-shadow:0 0 16px 2px color-mix(in srgb,var(--lamp) 55%,transparent);transform-origin:50% 50%}
.film-lamp-count{display:block;height:26px;overflow:hidden;font-size:22px;font-weight:var(--weight-medium);line-height:26px;font-variant-numeric:tabular-nums}
.film-lamp-count>span{display:grid}
.film-lamp>small{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--night-muted)}
.film-apply{transform-origin:50% 50%}
.film-applied{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-sm);font-size:var(--text-s);font-weight:var(--weight-medium)}
.film-applied>svg{width:20px;height:20px;padding:3px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Chapter 6: the creative brief, as the Creative page's job. */
.film-job{border-radius:18px;background:var(--media-gradient),var(--media);transform-origin:50% 50%}
.film-headline{font-size:36px;font-weight:var(--weight-medium);line-height:52px;letter-spacing:var(--tracking-title)}
.film-underline{position:relative}
.film-underline>i{position:absolute;left:0;right:0;bottom:7px;height:2px;background:var(--ink);transform-origin:0 50%}
.film-brief-fact{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:baseline;padding-top:var(--space-4);border-top:1px solid var(--line-soft);white-space:normal}
.film-brief-fact>b{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--muted)}
.film-brief-fact>span{font-size:15px}
.film-side-title{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-s);font-weight:var(--weight-medium)}
.film-tally{font-size:13px;color:var(--muted);text-align:right}
.film-note{font-size:var(--text-xs);color:var(--muted);text-align:right}
.film-attention>.status-dot{display:block}
/* Brief and Assets: the labels invert where the dark thumb runs under them, mid-slide too. */
.film-segmented{display:grid;grid-template-columns:1fr 1fr;width:170px;height:36px;padding:var(--space-1);isolation:isolate;border-radius:var(--radius-m);background:var(--plate)}
.film-segmented>i{position:absolute;top:var(--space-1);left:var(--space-1);width:81px;height:28px;border-radius:var(--radius-s);background:var(--ink)}
.film-segmented>span{position:relative;display:grid;place-items:center;font-size:var(--text-s);font-weight:var(--weight-medium);color:var(--color-white-00);mix-blend-mode:difference}

/* Chapter 7: the asset list. */
.film-list-head{display:flex;align-items:baseline;gap:var(--space-4)}
.film-list-head>b{font-size:26px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-title)}
.film-list-head>span{font-size:13px;color:var(--muted)}
.film-list-head>[data-part="done"]{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.film-line{display:grid;gap:var(--space-1)}
.film-line>b{font-size:var(--text-s);font-weight:var(--weight-medium)}
.film-line>small{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);color:var(--muted)}
.film-line-state{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--muted)}

/* The slots: an empty square, a channel's tint, a format's frame, then the finished artwork with its tick. */
.film-slot{--slot-tint:var(--channel-other)}
.film-slot.is-social{--slot-tint:var(--channel-organic-social)}
.film-slot.is-paid{--slot-tint:var(--channel-paid-social)}
.film-slot.is-web{--slot-tint:var(--channel-web-shop)}
.film-slot.is-email{--slot-tint:var(--channel-email)}
.film-slot .film-box>*{position:absolute;inset:0;border-radius:inherit}
.film-slot-tint{background:color-mix(in srgb,var(--slot-tint) 50%,var(--page))}
.film-slot-line{border:1px dashed var(--line-dash)}
.film-slot .film-slot-progress{top:auto;height:3px;border-radius:0;background:var(--ink);transform-origin:0 50%}
.film-slot .film-slot-tick{inset:var(--space-2) var(--space-2) auto auto;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink);transform-origin:50% 50%;box-shadow:0 2px 6px -2px var(--color-black-40)}
/* Artwork, drawn in proportion to its frame with percentages and aspect ratios (container queries would re-run
   style and layout for every frame that resizes), so it reads from the wall down to the strip. It is the
   campaign's own photography and print, so it keeps the bright ink and paper on the night window. */
.film-artwork{--ink:var(--color-black-00);--page:var(--color-stone-50);overflow:hidden;background:linear-gradient(7deg,var(--color-stone-50) 10%,var(--color-sepia-200) 66%)}
.film-artwork::before,.film-artwork::after{content:'';position:absolute}
.film-artwork.is-pillow::after,.film-artwork.is-night::after,.film-artwork.is-email::after,.film-artwork.is-banner::after{top:46%;right:18%;left:18%;height:20%;border-radius:42%;background:linear-gradient(180deg,var(--color-white-00),var(--color-stone-200));box-shadow:0 3px 6px -2px var(--color-black-30)}
.film-artwork.is-night{background:linear-gradient(180deg,var(--color-night-700),var(--color-night-900))}
.film-artwork.is-night::before{top:12%;right:14%;height:16%;aspect-ratio:1;border-radius:var(--radius-full);background:var(--color-sepia-200)}
.film-artwork.is-night::after{top:60%;background:linear-gradient(180deg,var(--color-stone-300),var(--color-stone-600));box-shadow:0 4px 10px -2px var(--color-black-80)}
.film-artwork.is-mint{background:var(--color-mint-400)}
.film-word{position:absolute;bottom:8%;left:8%;width:84%;height:auto;overflow:visible}
.film-word text{font-family:var(--font-brand);font-size:12px;font-weight:var(--weight-medium);letter-spacing:-.02em;fill:var(--ink)}
.film-artwork.is-roller{background:linear-gradient(160deg,var(--color-stone-200),var(--color-sepia-300))}
.film-artwork.is-roller::after{top:50%;left:50%;height:80%;aspect-ratio:3/8;border-radius:var(--radius-full);background:repeating-linear-gradient(0deg,var(--color-night-900) 0 8%,var(--color-stone-900) 8% 10%);translate:-50% -50%;rotate:-28deg;box-shadow:3px 5px 8px -2px var(--color-black-40)}
.film-artwork.is-copy{background:var(--page)}
.film-artwork.is-copy::before{top:14%;right:14%;left:14%;height:9%;border-radius:2px;background:var(--ink)}
.film-artwork.is-copy::after{top:32%;right:24%;bottom:22%;left:14%;background:repeating-linear-gradient(180deg,var(--color-black-20) 0 6%,transparent 6% 14%)}
.film-artwork.is-banner{background:linear-gradient(90deg,var(--color-sepia-100),var(--color-sepia-200))}
.film-artwork.is-banner::before,.film-artwork.is-email::before{top:30%;left:7%;width:34%;height:40%;background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 22% no-repeat,linear-gradient(var(--color-black-30),var(--color-black-30)) 0 52%/80% 12% no-repeat,linear-gradient(var(--color-mint-400),var(--color-mint-400)) 0 100%/42% 22% no-repeat}
.film-artwork.is-banner::after{top:38%;right:8%;left:56%;height:30%}
.film-artwork.is-banner.is-night{background:radial-gradient(7% 17% at 88% 24%,var(--color-sepia-200) 92%,transparent 100%),linear-gradient(90deg,var(--color-night-900),var(--color-night-700))}
.film-artwork.is-banner.is-night::before{background:linear-gradient(var(--color-sepia-200),var(--color-sepia-200)) 0 0/100% 22% no-repeat,linear-gradient(var(--night-line),var(--night-line)) 0 52%/80% 12% no-repeat,linear-gradient(var(--color-mint-400),var(--color-mint-400)) 0 100%/42% 22% no-repeat}
.film-artwork.is-email{background:linear-gradient(180deg,var(--color-sepia-200),var(--color-stone-100))}
.film-artwork.is-email::after{top:30%;right:9%;left:52%;height:26%}
.film-play{position:absolute;top:50%;left:50%;z-index:1;height:30%;aspect-ratio:1;border-radius:var(--radius-full);background:var(--color-white-80);translate:-50% -50%;box-shadow:0 2px 6px -2px var(--color-black-40)}
.film-play::after{content:'';position:absolute;top:30%;left:38%;width:32%;height:40%;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.film-sheen{border-radius:var(--radius-s);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 45%,transparent),transparent)}

/* Over the window: the pointer, the preview, the Creative hub at work and the delivery counter. */
.film-pointer>svg,.film-maker>svg{display:block;width:26px;height:26px;fill:var(--maker,var(--ink));stroke:var(--page);stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 3px 4px var(--color-black-20))}
.film-maker{--maker:var(--color-stone-200)}
.film-maker.is-mint{--maker:var(--color-mint-300)}
.film-maker.is-orange{--maker:var(--color-orange-300)}
.film-maker>span{position:absolute;top:22px;left:18px;padding:var(--space-1) var(--space-2);border-radius:0 var(--radius-s) var(--radius-s);background:var(--maker);color:var(--page);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-tight)}
.film-card{display:grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-m);background:var(--page);box-shadow:var(--shadow-lift);white-space:normal}
.film-row{display:flex;align-items:center;gap:var(--space-2)}
.film-preview{width:292px;transform-origin:0 100%}
.film-preview b{font-size:15px;font-weight:var(--weight-medium)}
.film-preview>small{font-size:var(--text-xs);color:var(--muted)}
.film-preview-foot{padding-top:var(--space-3);border-top:1px solid var(--line-soft);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.film-preview-slots{width:27px;height:10px;background:linear-gradient(90deg,var(--page) 0 1px,transparent 1px) 0 0/4px 4px,linear-gradient(var(--page) 0 1px,transparent 1px) 0 0/4px 4px,var(--line);background-repeat:repeat}
.film-preview-open{display:inline-flex;align-items:center;gap:2px;margin-left:auto}
.film-preview-open>.br-icon{width:14px;height:14px}
.film-counter{width:224px;gap:var(--space-1);transform-origin:50% 50%}
.film-counter>small{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.film-counter-value{display:flex;align-items:center;gap:var(--space-2);height:34px;font-size:28px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-title);font-variant-numeric:tabular-nums}
.film-odometer{display:block;height:34px;overflow:hidden}
.film-odometer>span{display:grid;justify-items:end}
.film-odometer>span>span{height:34px;line-height:34px}
.film-counter-tick{display:grid;place-items:center;width:24px;height:24px;margin-left:auto;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink);transform-origin:50% 50%}
.film-counter-bar{position:relative;height:4px;margin-top:var(--space-2);overflow:hidden;border-radius:var(--radius-full);background:var(--line-soft)}
.film-counter-bar>i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%}

/* The steps under the stage, and the one control: pause. */
.film-rail{display:flex;align-items:flex-start;gap:var(--space-6);margin-top:var(--space-5)}
.film-steps{display:grid;flex:1;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:var(--space-4);margin:0;padding:0;list-style:none}
.film-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3) var(--space-2);align-items:baseline;opacity:.42}
.film-step:first-child{opacity:1}
.film-step-line{position:relative;grid-column:1/-1;height:2px;overflow:hidden;border-radius:var(--radius-full);background:var(--line)}
.film-step-line>i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.film-step-number{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);color:var(--muted)}
.film-step-label{overflow:hidden;font-size:var(--text-s);font-weight:var(--weight-medium);white-space:nowrap;text-overflow:ellipsis}
.film-toggle{display:grid;flex:0 0 auto;place-items:center;width:var(--control-sm);height:var(--control-sm);margin-top:calc(var(--space-2) * -1);padding:0;border:1px solid var(--line);border-radius:var(--radius-full);background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out)}
.film-toggle:hover{background:var(--plate)}
.film-toggle>svg{width:14px;height:14px;fill:currentColor}
.film-toggle[aria-pressed="true"]>.is-pause,.film-toggle[aria-pressed="false"]>.is-play{display:none}
.film-captions{display:none}
.film-formats{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);color:var(--muted)}

/* The narrow film (390 × 560) for phones and small tablets: the same story, laid out for a portrait stage. Its
   breakpoint matches NARROW_QUERY in landing-film.js. */
.film-art.is-narrow{width:390px;height:560px}
.is-narrow .film-window{top:44px;left:12px;width:366px;height:502px}
.is-narrow .film-window-bar{flex-basis:40px;gap:var(--space-3);padding:0 var(--space-3)}
.is-narrow .film-logo{width:64px}
.is-narrow .film-crumbs{padding-left:var(--space-3);font-size:var(--text-xs)}
.is-narrow .film-crumbs>i{margin:0 var(--space-2)}
.is-narrow .film-crumb-slot{width:200px;height:16px}
.is-narrow .film-crumb{line-height:16px}
.is-narrow .film-calendar{width:366px;height:462px}
.is-narrow .film-project{font-size:var(--text-xs);line-height:1.25}
.is-narrow .film-title{font-size:30px;line-height:36px}
.is-narrow .film-tagline{font-size:var(--text-s)}
.is-narrow .film-strip-phases>span{padding:0 var(--space-2)}
.is-narrow .film-strip-phases b{font-size:var(--text-xs)}
.is-narrow .film-fact{grid-template-columns:minmax(0,1fr);align-content:center;gap:2px;white-space:normal}
.is-narrow .film-fact>b{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--muted)}
.is-narrow .film-fact>span{font-size:var(--text-s);line-height:var(--leading-snug)}
.is-narrow .film-activity{padding:0 var(--space-2)}
.is-narrow .film-channel{font-size:13px}
.is-narrow .film-channel>.br-icon{width:14px;height:14px}
.is-narrow .film-stage-title{display:flex;align-items:baseline;gap:var(--space-2);padding-right:var(--space-2);background:var(--page)}
.is-narrow .film-stage-title>b{font-size:var(--text-xs);letter-spacing:0}
.is-narrow .film-touch{grid-template-columns:var(--space-4) minmax(0,1fr);column-gap:var(--space-2);row-gap:0;padding:0 var(--space-6) 0 var(--space-2)}
.is-narrow .film-touch.has-slots{padding-top:5px}
.is-narrow .film-touch-name{font-size:var(--text-xs)}
.is-narrow .film-touch-square{width:var(--space-2);height:var(--space-2)}
.is-narrow .film-touch.is-size-2 .film-touch-square{width:11px;height:11px}
.is-narrow .film-touch.is-size-3 .film-touch-square{width:14px;height:14px}
.is-narrow .film-touch-mark{right:var(--space-2)}
.is-narrow .film-touch-mark>.film-glyph{width:14px;height:14px}
.is-narrow .film-dest{gap:var(--space-1);padding:0 var(--space-2) 0 6px;font-size:var(--text-xs)}
.is-narrow .film-dest-kind>.film-glyph,.is-narrow .film-dest-known>.film-glyph{width:var(--space-3);height:var(--space-3)}
.is-narrow .film-review-head{font-size:var(--text-l);line-height:26px;white-space:normal}
.is-narrow .film-check-lens{font-size:var(--text-xs)}
.is-narrow .film-check-text{font-size:var(--text-xs);line-height:20px}
.is-narrow .film-field{padding:0 var(--space-2);font-size:var(--text-xs)}
.is-narrow .film-review-tile{border-radius:var(--radius-m)}
.is-narrow .film-orb{width:18px;height:18px}
.is-narrow .film-review-who{font-size:var(--text-s)}
.is-narrow .film-lamp{column-gap:var(--space-2);row-gap:0}
.is-narrow .film-lamp-light{width:26px;height:26px}
.is-narrow .film-lamp-count{height:22px;font-size:var(--text-l);line-height:22px}
.is-narrow .film-job{border-radius:var(--radius-m)}
.is-narrow .film-headline{font-size:var(--text-xl);line-height:30px;white-space:normal}
.is-narrow .film-brief-fact{grid-template-columns:minmax(0,1fr);gap:2px;padding-top:var(--space-2)}
.is-narrow .film-brief-fact>span{font-size:var(--text-s);line-height:var(--leading-snug)}
.is-narrow .film-tally{font:var(--weight-regular) var(--text-xs)/20px var(--font-label)}
.is-narrow .film-segmented{width:144px;height:32px}
.is-narrow .film-segmented>i{width:68px;height:24px}
.is-narrow .film-segmented>span{font-size:13px}
.is-narrow .film-list-head>b{font-size:var(--text-l)}
.is-narrow .film-delivered>small{display:none}
.is-narrow .film-preview{width:240px;padding:var(--space-3)}
.is-narrow .film-counter{grid-template-columns:auto auto minmax(0,1fr);align-items:center;width:334px;gap:var(--space-3);padding:var(--space-2) var(--space-3);box-shadow:var(--shadow-float)}
.is-narrow .film-counter-value{height:28px;font-size:var(--text-l)}
.is-narrow .film-odometer,.is-narrow .film-odometer>span>span{height:28px;line-height:28px}
.is-narrow .film-counter-tick{width:20px;height:20px}
.is-narrow .film-counter-bar{margin:0}

/* 4. Works the way you do, and what is inside ------------------------------------------- */
/* The copy and its three ways in beside one picture of where the context comes from, half the width each. */
.idea{padding-block:var(--space-24) var(--space-30)}
.idea-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:var(--space-12) var(--column-gap);margin-top:var(--space-16)}
.idea-copy{display:grid;grid-column:1/6;gap:var(--space-6)}
.idea-lead{max-width:30em;font-size:var(--text-l);line-height:1.5;color:var(--muted);text-wrap:pretty}
.ways{display:grid;margin:var(--space-4) 0 0;padding:0;list-style:none}
.way{display:grid;grid-template-columns:var(--space-8) var(--space-6) minmax(0,1fr);align-items:baseline;column-gap:var(--space-3);row-gap:var(--space-1);padding:var(--space-4) 0;border-top:1px solid var(--line-soft)}
.way:last-child{border-bottom:1px solid var(--line-soft)}
.way-index{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);color:var(--muted)}
.way-icon{align-self:center;display:flex;color:var(--ink)}
.way-icon>.br-icon{width:18px;height:18px}
.way>strong{font-size:var(--text-l);font-weight:var(--weight-medium);line-height:var(--leading-tight)}
.way-text{grid-column:3;font-size:var(--text-s);line-height:var(--leading-snug);color:var(--muted)}
.idea-picture{grid-column:7/-1}
.idea-media{aspect-ratio:640/520}

/* Inside: a carousel of portrait tiles, as blackroll.com's product rows: the picture in its tile, then the name and
   one line under it, in the order a campaign meets them. It runs from the content edge to the window's edge and
   snaps tile by tile; the arrows page it. */
.inside{padding-block:0 var(--space-30)}
.inside-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);margin:var(--space-16) 0 var(--space-12)}
.inside-nav{display:flex;flex:none;gap:var(--space-2)}
.carousel-button{display:grid;place-items:center;width:var(--control);height:var(--control);padding:0;border:1px solid var(--line);border-radius:var(--radius-full);background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),opacity var(--motion-fast) var(--ease-out)}
.carousel-button[data-carousel="prev"]>.br-icon{transform:rotate(180deg)}
.carousel-button:hover:not(:disabled){background:var(--ink);color:var(--page)}
.carousel-button:disabled{opacity:.3;cursor:default}
.inside-list{--edge:max(var(--gutter),(100% - 1600px) / 2);display:grid;grid-auto-columns:clamp(248px,22vw,340px);grid-auto-flow:column;gap:var(--column-gap);margin:0;padding:0 var(--edge) var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);scrollbar-width:none;list-style:none}
.inside-list::-webkit-scrollbar{display:none}
.inside-card{min-width:0;scroll-snap-align:start}
.inside-link{display:block;border-radius:var(--radius-l);color:inherit;text-decoration:none}
.inside-media{aspect-ratio:4/5}
.inside-media .vig{transition:scale var(--motion-scene) var(--ease-glide)}
.inside-card:hover .inside-media .vig{scale:1.03}
.inside-copy{display:grid;gap:var(--space-1);margin-top:var(--space-4)}
.inside-copy>strong{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-l);font-weight:var(--weight-medium);line-height:var(--leading-tight)}
.inside-copy>strong>.br-icon{width:18px;height:18px;transition:transform var(--motion-enter) var(--ease-glide)}
.inside-copy>span{max-width:22em;font-size:var(--text-s);line-height:var(--leading-snug);color:var(--muted)}
.inside-link:is(:hover,:focus-visible) .inside-copy .br-icon{transform:translateX(var(--space-1))}
.inside-link:is(:hover,:focus-visible) .vig-cursor{translate:calc(var(--space-2) * -1) calc(var(--space-2) * -1)}

/* 5. Teams ------------------------------------------------------------------------- */
/* Back into the night. Scrolling places pale campaign cards into the empty year, team by team; then each team's
   part, on a hairline grid. */
.stage{position:relative;padding-block:var(--space-30);background:radial-gradient(ellipse 55% 45% at 82% 18%,color-mix(in srgb,var(--color-mint-700) 16%,transparent),transparent 70%),var(--night);color:var(--night-text)}
.stage[data-stage-motion] .stage-track{min-height:280svh}
.stage-pin{position:sticky;top:var(--header);display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--header));padding-block:var(--space-6)}
.stage:not([data-stage-motion]) .stage-pin{position:static;min-height:0}
.stage .section-heading{display:grid;gap:var(--space-8);margin-bottom:var(--space-8)}
.stage-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:var(--space-4) var(--column-gap)}
.stage-title{grid-column:1/8;font-size:clamp(34px,4.2vw,76px);font-weight:var(--weight-medium);line-height:1.02;letter-spacing:var(--tracking-title);text-wrap:balance}
.stage-head>.section-lead{grid-column:9/-1;font-size:var(--text-m);color:var(--night-muted)}
.stage-visual{min-width:0}
.stage-media{padding:var(--space-12) var(--space-6) var(--space-4);border:1px solid var(--night-line);background:linear-gradient(140deg,color-mix(in srgb,var(--night-text) 6%,transparent),transparent 60%);color:var(--night-text)}
.stage-media>.media-label{top:var(--space-4);left:var(--space-6);height:auto;padding:0;background:none;color:var(--night-muted);-webkit-backdrop-filter:none;backdrop-filter:none}
.stage-build-count{position:absolute;right:var(--space-6);top:var(--space-4);font:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-label);color:var(--night-muted);font-variant-numeric:tabular-nums}
.stage-frame{padding-top:var(--space-3);border-top:1px solid var(--stage-line-soft)}
.stage-svg{display:block;width:100%;height:auto}
.stage-svg text{font-family:var(--font-brand);dominant-baseline:central}
.stage-months line,.stage-row-line{stroke:var(--stage-line-soft);stroke-width:1;shape-rendering:crispEdges}
.stage-months text{font-family:var(--font-label);font-size:var(--text-xs);fill:var(--night-muted)}
.stage-lane-name{font-size:var(--text-s);font-weight:var(--weight-medium);fill:var(--night-text)}
.stage-lane-dot{fill:var(--accent)}
.stage-item{transform-box:fill-box;transform-origin:center center}
.stage-bar rect{fill:var(--night-text);stroke:var(--color-white-20);stroke-width:1}
.stage-bar-name{font-size:var(--text-xs);fill:var(--night);font-weight:var(--weight-medium)}
.stage-tile{fill:var(--accent);transform-origin:center bottom}
.stage-today line{stroke:var(--night-text);stroke-width:1;stroke-dasharray:3 5;opacity:.45}
.stage-today circle{fill:var(--night-text)}
.stage-build-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--stage-line-soft)}
.stage-build-line>span{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left center}
.stage-caption{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-4);font:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--night-muted)}
.stage-scroll-hint{display:inline-flex;align-items:center;gap:var(--space-2)}
.stage-scroll-hint>.br-icon{width:var(--space-4);height:var(--space-4);transform:rotate(90deg)}
.teams-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:var(--space-16) 0 0;padding:0;list-style:none;border-top:1px solid var(--night-line)}
.team{display:grid;align-content:start;gap:var(--space-2);padding:var(--space-6) var(--space-6) var(--space-10);border-bottom:1px solid var(--night-line)}
.team:not(:nth-child(4n)){border-right:1px solid var(--night-line)}
.team:nth-child(4n+1){padding-left:0}
.team>strong{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-l);font-weight:var(--weight-medium);line-height:var(--leading-tight)}
.team>span{max-width:20em;font-size:var(--text-s);line-height:var(--leading-snug);color:var(--night-muted)}
.team.is-hub>strong::after{content:'';width:6px;height:6px;border-radius:var(--radius-full);background:var(--accent)}

/* 6. Close and footer ------------------------------------------------------------------ */
/* The promise once more in display capitals, rising word by word, readable at rest; then the way in. */
.statement{padding-block:var(--space-30) var(--space-24)}
.statement-title{margin-top:var(--space-16);font-size:clamp(36px,6.1vw,118px);font-weight:var(--weight-medium);line-height:.98;letter-spacing:var(--tracking-display);text-transform:uppercase;text-wrap:balance}
.statement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-10);margin-top:var(--space-12)}
.statement-actions>.secondary{gap:var(--space-3);min-height:var(--control-lg);padding-inline:var(--space-6) var(--space-5)}

/* Roger AI, as the BLACKROLL AI Lab's footer: Roger's fluid filling a night tile (src/roger-fluid.js paints its own
   night, fading in once ready), a soft mint glow until then, top and bottom easing back into night, and the
   AI Lab lockup over it in sepia with a deep shadow. Then the site's footer: the lockup, links, a quiet bar. */
.landing-footer{padding-bottom:var(--space-6)}
.roger-stage{display:grid;place-items:center;align-content:center;min-height:clamp(460px,42vw,600px);padding:var(--space-16) var(--space-6);text-align:center;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.roger-stage::before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(34% 46%,var(--night-glow) 0%,transparent 70%);pointer-events:none}
.roger-stage::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--media-night) 0%,transparent 24%,transparent 76%,var(--media-night) 100%);pointer-events:none}
.roger-canvas{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity 2.4s var(--ease-out)}
.roger-canvas[data-state=ready]{opacity:1}
/* The AI Lab lockup: the outlined label sits below the wordmark. */
.roger-mark{font-size:clamp(14px,1.9vw,30px);filter:drop-shadow(0 12px 40px var(--color-black-80));pointer-events:none}
.roger-lockup{display:flex;flex-direction:column;align-items:center;gap:.35em;color:var(--night-text)}
.roger-logo{display:block;height:2.4em;aspect-ratio:2811/397;background:currentColor;-webkit-mask:url(/assets/blackroll.svg) center/contain no-repeat;mask:url(/assets/blackroll.svg) center/contain no-repeat}
.roger-lab{display:inline-flex;align-items:center;height:1.5em;padding:0 .55em;border:1.5px solid;border-radius:var(--radius-full);font:var(--weight-regular) max(var(--text-xs),.62em)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;opacity:.9}
.footer-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-10) var(--column-gap);padding:var(--space-16) 0 var(--space-20)}
.footer-intro{display:grid;grid-column:1/6;align-content:start;gap:var(--space-5)}
.footer-intro>.landing-brand{justify-self:start}
.footer-intro>p{max-width:26em;font-size:var(--text-s);line-height:var(--leading-snug);color:var(--muted)}
.footer-intro+.footer-column{grid-column:7/10}
.footer-column:last-child{grid-column:10/-1}
.footer-heading{margin-bottom:var(--space-4);font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.footer-column ul{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.footer-column a{color:var(--ink);font-size:var(--text-m);font-weight:var(--weight-medium);text-decoration:none;text-underline-offset:.25em;text-decoration-thickness:1px}
.footer-column a:is(:hover,:focus-visible){text-decoration:underline}
.footer-column .footer-external{min-height:0;padding:0;font-size:var(--text-m)}
.footer-external>.br-icon{width:16px;height:16px}
.footer-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--line-soft)}
.footer-note,.footer-top{font:var(--weight-regular) var(--text-xs)/var(--leading-tight) var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.footer-top{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none}
.footer-top:is(:hover,:focus-visible){color:var(--ink)}
.footer-top>.br-icon{width:14px;height:14px}


/* 7. Vignettes: the pictures in the carousel's tiles ---------------------------------- */
/* Small scenes built from the app's components on a 360 × 450 portrait artboard, scaled to their tile by landing.js. */
.vig-fit{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.vig{position:relative;flex:none;width:360px;height:450px}
.vig-card{position:absolute;display:grid;align-content:start;gap:var(--space-2);border-radius:var(--radius-m);background:var(--page);box-shadow:var(--shadow-lift);color:var(--ink);font-size:var(--text-xs);line-height:var(--leading-tight)}
.vig-row{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.vig-row>b{flex:1;min-width:0;font-size:var(--text-s);font-weight:var(--weight-medium);white-space:nowrap}
.vig-muted{font-size:var(--text-xs);color:var(--muted)}
.vig-cursor{position:absolute;z-index:4;width:26px;height:26px;fill:var(--ink);stroke:var(--page);stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 3px 4px var(--color-black-20));transition:translate var(--motion-scene) var(--ease-glide)}
.vig-window{left:var(--space-4);right:var(--space-4);top:60px;overflow:hidden;padding:0 0 var(--space-3)}
.vig-window-bar{display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-4);border-bottom:1px solid var(--line-soft)}
.vig-logo{width:64px;aspect-ratio:2811/397;background:var(--ink);-webkit-mask:url(/assets/blackroll.svg) center/contain no-repeat;mask:url(/assets/blackroll.svg) center/contain no-repeat}
.vig-trail{display:flex;align-items:center;padding-left:var(--space-3);border-left:1px solid var(--line);color:var(--muted)}
.vig-trail>i{width:1px;height:12px;margin:0 var(--space-2);background:var(--line);transform:rotate(20deg)}
.vig-trail>b{font-weight:var(--weight-medium);color:var(--ink)}
.vig-months{display:grid;grid-template-columns:repeat(6,1fr);margin:var(--space-2) var(--space-4) 0 80px;font:var(--weight-regular) var(--text-xs)/1 var(--font-label);color:var(--muted)}
.vig-months>span{padding:var(--space-1) 0 var(--space-1) var(--space-1);border-left:1px solid var(--line-soft)}
.vig-lanes{position:relative;display:grid;gap:var(--space-1);padding:var(--space-2) var(--space-4) 0}
.vig-lane{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;min-height:30px}
.vig-lane-name{overflow:hidden;font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;text-overflow:ellipsis}
.vig-lane-track{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:0 2px}
.vig-bar{display:flex;align-items:center;gap:var(--space-1);min-width:0;height:22px;padding:0 var(--space-2);overflow:hidden;border-radius:var(--radius-s);background:var(--tone-0);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;text-overflow:ellipsis;box-shadow:0 2px 4px -2px var(--color-black-20)}
.vig-bar.tone-1{background:var(--tone-1)}
.vig-bar.tone-2{background:var(--tone-2)}
.vig-today{position:absolute;top:0;bottom:calc(var(--space-3) * -1);left:calc(80px + (100% - 96px) * (var(--col,8) - 1) / 16);width:1px;background:var(--ink)}
.vig-today::before{content:'';position:absolute;top:-3px;left:-3px;width:7px;height:7px;border-radius:var(--radius-full);background:var(--ink)}
/* Brand Calendar: the year window, the preview a campaign opens, and the pointer that opened it. */
.vig-preview{left:44px;top:262px;width:290px;padding:var(--space-4);rotate:2deg}
.vig-owner{padding-top:var(--space-2);border-top:1px solid var(--line-soft);font-weight:var(--weight-medium)}
.vig-owner>span:nth-child(2){flex:1}
.vig-link{display:inline-flex;align-items:center;gap:2px;font-weight:var(--weight-medium)}
.vig-link>.br-icon{width:14px;height:14px}
.is-year .vig-cursor{left:206px;top:232px}
/* New project: a short dialog, and the details it doesn't need yet waiting as dashed chips under it. */
.vig-later{left:16px;right:16px;top:330px;bottom:16px;gap:var(--space-2);padding:36px var(--space-4) var(--space-4);box-shadow:none;background:color-mix(in srgb,var(--page) 70%,transparent)}
.vig-later-chips{display:flex;flex-wrap:wrap;gap:6px}
.vig-later-chip{display:inline-flex;align-items:center;gap:var(--space-1);height:26px;padding:0 var(--space-3) 0 var(--space-2);border:1px dashed var(--line-dash);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--muted)}
.vig-later-chip>.br-icon{width:12px;height:12px}
.vig-dialog{left:24px;top:48px;width:312px;padding:var(--space-5);gap:var(--space-3);rotate:-1deg}
.vig-dialog-head>b{font-size:var(--text-l);font-weight:var(--weight-medium)}
.vig-dialog-head>.br-icon{width:18px;height:18px;color:var(--muted)}
.vig-field{display:grid;gap:var(--space-1);padding-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.vig-field>small{font-size:var(--text-xs);color:var(--muted)}
.vig-field>span{font-size:var(--text-s)}
.vig-field:has(.segmented){border-bottom:0}
.vig-dialog-foot{justify-content:flex-end;gap:var(--space-4);padding-top:var(--space-1)}
.vig-cancel{font-size:var(--text-s);font-weight:var(--weight-medium)}
.is-new .vig-cursor{left:280px;top:330px}
/* Budget: the rough number, its three-way split and a channel's share lifted out. */
.vig-window.is-budget{top:64px;gap:var(--space-3);padding:var(--space-5)}
.vig-amount{font-size:40px;font-weight:var(--weight-medium);line-height:1;letter-spacing:var(--tracking-title)}
.vig-split{display:flex;gap:3px;height:14px;margin:var(--space-2) 0}
.vig-split>i{flex:1 1 0;border-radius:var(--radius-xs)}
.vig-budget-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto 36px;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;border-top:1px solid var(--line-soft);font-size:var(--text-s)}
.vig-budget-row>i{width:10px;height:10px;border-radius:var(--radius-xs)}
.vig-budget-row>b{font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}
.vig-budget-row>small{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);color:var(--muted);text-align:right}
.vig .is-production{background:var(--color-mint-400)}
.vig .is-media{background:var(--color-orange-300)}
.vig .is-operations{background:var(--color-stone-400)}
.is-budget .vig-chip{right:18px;bottom:44px;rotate:-2deg}
.vig-chip>.br-icon{width:14px;height:14px;color:var(--muted)}
/* Overview: the leadership snapshot, a poster for the campaign over four numbers and its strategy. */
.vig-window.is-overview{gap:var(--space-3);padding:var(--space-3)}
.vig-hero{display:grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-s);background:var(--media-gradient),var(--media)}
.vig-hero>small{font:var(--weight-regular) var(--text-xs)/1 var(--font-label);letter-spacing:var(--tracking-label);color:var(--muted)}
.vig-hero .vig-row>b{font-size:var(--text-l);letter-spacing:var(--tracking-title)}
.vig-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:var(--space-2)}
.vig-path-step{position:relative;display:grid;justify-items:start;gap:6px;font-size:var(--text-xs);color:var(--muted)}
.vig-path-step::before{content:'';position:absolute;top:4px;left:0;right:0;height:2px;background:var(--line)}
.vig-path-step.is-done::before{background:var(--ink)}
.vig-path-step>i{position:relative;width:10px;height:10px;border-radius:var(--radius-full);background:var(--page);box-shadow:inset 0 0 0 1.5px var(--line)}
.vig-path-step.is-done>i{background:var(--ink);box-shadow:none}
.vig-path-step.is-now>i{background:var(--accent);box-shadow:0 0 0 3px var(--tint-positive)}
.vig-path-step:is(.is-done,.is-now){color:var(--ink);font-weight:var(--weight-medium)}
.vig-glances{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.vig-glance{display:grid;gap:2px;padding:var(--space-3);border-radius:var(--radius-s);background:var(--plate)}
.vig-glance>small{font-size:var(--text-xs);color:var(--muted)}
.vig-glance>b{font-size:var(--text-xl);font-weight:var(--weight-medium);line-height:1.1;letter-spacing:var(--tracking-title)}
.vig-fact{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-2);padding:var(--space-2) var(--space-1) 0;border-top:1px solid var(--line-soft);font-size:var(--text-xs)}
.vig-fact>small{color:var(--muted)}
.vig-fact>span{font-weight:var(--weight-medium)}
/* Marketing view: phases across the top, every channel's activity under them, one activity lifted out. */
.vig-window.is-timeline{padding:var(--space-3)}
.vig-phases{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 2px;margin:0 0 var(--space-2) 96px}
.vig-phase{overflow:hidden;padding:var(--space-1) 6px;border-radius:var(--radius-s);background:var(--tone-0);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap}
.vig-phase.tone-1{background:var(--tone-1)}
.vig-phase.tone-2{background:var(--tone-2)}
.is-timeline .vig-lane{grid-template-columns:18px 78px minmax(0,1fr);min-height:42px;border-top:1px solid var(--line-soft)}
.is-timeline .vig-lane>.br-icon{width:14px;height:14px;color:var(--muted)}
.is-timeline .vig-lane-track{grid-template-columns:repeat(12,minmax(0,1fr))}
.is-timeline .vig-bar{height:18px;padding:0}
.vig-chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full)}
.vig-chip>b{font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap}
.is-marketing .vig-chip{left:40px;top:306px;rotate:-2deg}
.is-marketing .vig-cursor{left:250px;top:330px}
/* Consumer journey: the stages stacked, the touchpoints in each with their channel's colour, the heart for people known. */
.vig-window.is-journey{gap:0;padding:var(--space-4)}
.vig-journey-head{padding-bottom:var(--space-3)}
.vig-stage{display:grid;gap:var(--space-2);padding:var(--space-3) 0;border-top:1px solid var(--line-soft)}
.vig-stage>b{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--muted)}
.vig-stage>div{display:flex;flex-wrap:wrap;gap:6px}
.vig-touch,.vig-known{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-3) 0 var(--space-2);border:1px solid var(--line);border-radius:var(--radius-full);background:var(--page);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap}
.vig-touch>i{width:10px;height:10px;border-radius:3px;background:var(--channel-other)}
.vig-touch.is-paid>i{background:var(--channel-paid-social)}
.vig-touch.is-pr>i{background:var(--channel-pr-partnerships)}
.vig-touch.is-web>i{background:var(--channel-web-shop)}
.vig-touch.is-email>i{background:var(--channel-email)}
.vig-known{border-color:var(--color-mint-500);background:var(--tint-positive);color:var(--ink-positive)}
.vig-known>.br-icon{width:14px;height:14px;fill:var(--accent)}
/* Where the context comes from (640 × 520): the calendar, each bar marked with its source, and the sources card
   lifted over it. While in view each source lights in turn with the bars it fed (an overlay's opacity, on the
   compositor); reduced motion keeps them still. */
.vig.is-sources{width:640px;height:520px}
.is-sources .vig-window{left:196px;right:20px;top:36px}
.is-sources .vig-lane{min-height:34px}
.is-sources .vig-bar{position:relative;height:24px;padding-left:4px;overflow:visible}
.vig-source{display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:var(--radius-xs);background:var(--color-white-80);color:var(--ink)}
.vig-source>.br-icon{width:11px;height:11px}
.vig-sources{left:24px;top:248px;width:330px;gap:0;padding:var(--space-4) var(--space-4) var(--space-2);rotate:-1deg}
.vig-sources-head{padding-bottom:var(--space-3)}
.vig-source-row{position:relative;isolation:isolate;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-2);margin:0 calc(var(--space-2) * -1);border-top:1px solid var(--line-soft);border-radius:var(--radius-s)}
.vig-source-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-s);background:var(--plate)}
.vig-source-icon>.br-icon{width:16px;height:16px}
.vig-source-row b{display:block;font-size:var(--text-s);font-weight:var(--weight-medium);white-space:nowrap}
.vig-source-row small{font-size:var(--text-xs);color:var(--muted)}
.is-sources [data-step]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.is-sources .vig-bar[data-step]::after{box-shadow:0 0 0 2px var(--color-mint-500),0 6px 16px -6px var(--color-mint-500)}
.is-sources .vig-source-row::after{z-index:-1;background:var(--tint-positive)}
.is-playing .is-sources [data-step]::after{animation:source-light 8s var(--ease-out) infinite}
.is-playing .is-sources [data-step="2"]::after{animation-delay:2s}
.is-playing .is-sources [data-step="3"]::after{animation-delay:4s}
.is-playing .is-sources [data-step="4"]::after{animation-delay:6s}
@keyframes source-light{0%{opacity:0}4%,18%{opacity:1}26%,100%{opacity:0}}
/* Creative view: the brief's headline over a contact sheet of the assets it asks for. */
.vig-window.is-sheet{bottom:22px;gap:var(--space-1);padding:var(--space-4)}
.vig-headline{font-size:var(--text-l);font-weight:var(--weight-medium);line-height:var(--leading-tight)}
.vig-sheet{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-2);margin-top:var(--space-3)}
.vig-shot{display:grid;gap:var(--space-1);margin:0}
.vig-shot figcaption{display:flex;align-items:center;gap:var(--space-1);font:var(--weight-regular) var(--text-xs)/1 var(--font-label);color:var(--muted)}
.vig-art{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-s);background:linear-gradient(160deg,var(--color-stone-100),var(--color-sepia-200))}
.vig-shot.is-tall .vig-art{height:100px;aspect-ratio:9/16}
.vig-shot.is-portrait .vig-art{height:84px;aspect-ratio:4/5}
.vig-shot.is-square .vig-art{height:64px;aspect-ratio:1}
.vig-shot.is-wide .vig-art{height:50px;aspect-ratio:16/9}
.vig-art::before{content:''}
.vig-art.is-roller::before{width:34%;height:72%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-stone-900),var(--ink) 45%,var(--color-stone-800));box-shadow:0 10px 12px -8px var(--color-black-50);rotate:-22deg}
.vig-art.is-pillow::before{width:74%;height:38%;border-radius:40%;background:linear-gradient(180deg,var(--page),var(--color-stone-200));box-shadow:0 10px 14px -8px var(--color-black-30)}
.vig-art.is-ball::before{width:44%;aspect-ratio:1;border-radius:var(--radius-full);background:radial-gradient(circle at 35% 30%,var(--color-stone-700),var(--ink) 62%);box-shadow:0 8px 10px -6px var(--color-black-50)}
.vig-shot.is-doing .vig-art{opacity:.7}
.vig-shot.is-todo .vig-art{background:repeating-linear-gradient(135deg,transparent 0 7px,var(--line-soft) 7px 8px);box-shadow:inset 0 0 0 1.5px var(--line)}
.vig-shot.is-todo .vig-art::before{display:none}
.is-creative .vig-chip{right:14px;top:18px;rotate:2deg}
/* Ask Roger AI: a question about the plan and an answer that names what is missing. */
.vig-window.is-chat{gap:var(--space-3);padding:var(--space-4)}
.vig-chat-head{padding-bottom:var(--space-2);border-bottom:1px solid var(--line-soft)}
.vig-roger{width:24px;height:24px;border-radius:var(--radius-full);background:radial-gradient(circle,var(--color-night-850) 34%,var(--color-mint-500) 44%,var(--color-mint-200) 52%,var(--color-night-850) 66%)}
.vig-ask{justify-self:end;max-width:80%;padding:var(--space-2) var(--space-3);border-radius:14px 14px 4px 14px;background:var(--ink);color:var(--page);font-size:var(--text-s)}
.vig-answer{display:grid;gap:var(--space-2);max-width:94%;padding:var(--space-3);border-radius:14px 14px 14px 4px;background:var(--plate);font-size:var(--text-s)}
.vig-answer ul{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none}
.vig-answer li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs)}

/* Motion -------------------------------------------------------------------------------- */
/* Scroll reveals: content rises into place once, as it arrives. */
.has-motion [data-reveal]{opacity:0;transform:translateY(var(--space-4));transition:opacity var(--motion-scene) var(--ease-glide),transform var(--motion-scene) var(--ease-glide)}
.has-motion [data-reveal].is-in{opacity:1;transform:none}
.has-motion .has-motion .teams-grid>[data-reveal]:nth-child(4n+2){transition-delay:100ms}
.has-motion .has-motion .teams-grid>[data-reveal]:nth-child(4n+3){transition-delay:200ms}
.has-motion .teams-grid>[data-reveal]:nth-child(4n){transition-delay:300ms}
/* The closing words rise out of their masks in turn (landing.js staggers them). */
.has-motion .statement-word>span{transform:translateY(105%);transition:transform 1.1s var(--ease-glide)}
.has-motion .statement.is-in .statement-word>span{transform:none}
/* The wordmark rises out of its own mask, as on the AI Lab; the shadow stays outside the mask. */
.has-motion .roger-mark[data-reveal]{opacity:1;transform:none;transition:none}
.has-motion .roger-mark[data-reveal] .roger-lockup{clip-path:inset(0 0 100%);transform:translateY(35%);transition:clip-path 1.6s var(--ease-rise),transform 1.6s var(--ease-rise)}
.has-motion .roger-mark.is-in .roger-lockup{clip-path:inset(0);transform:none}
/* The masthead's glow drifts. */
.has-motion .hero::before{animation:hero-glow 16s ease-in-out infinite alternate}
@keyframes hero-glow{to{transform:translate(-14%,12%) scale(1.18)}}

/* Responsive -------------------------------------------------------------------------- */
/* Eight steps share the rail: below 1366 px each number goes above its name, so the names keep the step's width. */
@media(max-width:1365px){
  .film-step{grid-template-columns:minmax(0,1fr);row-gap:var(--space-2)}
}
@media(max-width:999px){
  .film-steps{gap:var(--space-3)}
  .landing-header-inner{grid-template-columns:1fr auto}
  .landing-nav{display:none}
  .landing-brand{justify-self:start}
  .hero-foot{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:899px){
  .idea,.statement{padding-block:var(--space-20)}
  .hero{padding-bottom:var(--space-20)}
  .inside{padding-bottom:var(--space-20)}
  .stage{padding-block:var(--space-20)}
  .idea-grid{margin-top:var(--space-10)}
  .idea-copy,.idea-picture{grid-column:1/-1}
  .inside-head{margin:var(--space-10) 0 var(--space-8)}
  .stage-head{grid-template-columns:minmax(0,1fr)}
  .stage-head>:is(.stage-title,.section-lead){grid-column:1/-1}
  .teams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team:not(:nth-child(4n)){border-right:0}
  .team:nth-child(odd){padding-left:0;border-right:1px solid var(--night-line)}
  .footer-intro{grid-column:1/-1}
  .footer-intro+.footer-column{grid-column:1/7}
  .footer-column:last-child{grid-column:7/-1}
}
@media(max-width:847px){
  .film-stage{aspect-ratio:390/560;max-height:calc(100svh - var(--space-24));margin-inline:auto}
  .film-rail{flex-wrap:wrap;gap:var(--space-3) var(--space-4)}
  .film-steps{gap:var(--space-2)}
  .film-step{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
  .film-step-label{display:none}
  .film-captions{display:grid;flex-basis:100%;order:1;margin:0;font-size:var(--text-m);font-weight:var(--weight-medium)}
  .film-captions>span{grid-area:1/1;opacity:0}
  .film-captions>span:first-child{opacity:1}
}
@media(max-width:599px){
  #landing{--gutter:var(--space-5);--header:var(--space-16)}
  .landing-header-inner{gap:var(--space-3)}
  .landing-logo{width:96px}
  .landing-header .landing-tag{display:none}
  .hero::after{display:none}
  .hero{padding-top:calc(var(--header) + var(--space-12));padding-bottom:var(--space-16)}
  .hero-copy{gap:var(--space-6)}
  .hero-foot{margin-top:var(--space-4);padding-top:var(--space-6)}
  .hero-lead{font-size:var(--text-m)}
  .hero-actions{gap:var(--space-4) var(--space-6)}
  .hero-visual{margin-top:var(--space-12)}
  .idea,.statement,.stage{padding-block:var(--space-16)}
  .inside{padding-bottom:var(--space-16)}
  .inside-head{align-items:flex-start;flex-direction:column;gap:var(--space-5)}
  .section-rule-note{display:none}
  .stage-pin{min-height:calc(100svh - var(--header))}
  .stage-media{padding:var(--space-10) var(--space-2) var(--space-2);border-radius:var(--radius-m)}
  .stage-media>.media-label{top:var(--space-3);left:var(--space-3)}
  .stage-build-count{top:var(--space-3);right:var(--space-3)}
  .stage-lane-name{font-size:var(--text-xs)}
  .stage-lane-dot{display:none}
  .stage-caption{gap:var(--space-2);flex-wrap:wrap}
  .stage-caption>span:last-child{display:none}
  .teams-grid{grid-template-columns:minmax(0,1fr);margin-top:var(--space-10)}
  .team,.team:nth-child(odd){padding:var(--space-5) 0 var(--space-6);border-right:0}
  .statement-title{margin-top:var(--space-10)}
  .roger-stage{min-height:380px;padding-inline:var(--space-4)}
  .footer-main{padding:var(--space-12) 0 var(--space-12)}
}
@media(prefers-reduced-motion:reduce){
  html:has(.landing-main){scroll-behavior:auto}
  .stage-pin{position:static;min-height:0;padding-block:0}
  .stage-scroll-hint{display:none}
  .stage-item{transform:none}
}