/* V12: her words in the V11 layout. Every chapter is a small-caps heading that carries the search term, a display
   line in her voice, and one plain sentence a person or an answer engine can quote. No numbers anywhere (her ruling).
   Paper and Ink carry the page; magenta for the button; cyan only for hairlines; the four inks appear only inside the
   hero animation, which pins for three screens. Galano only. Mobile first (390), desktop from 801 up. */
:root { --nav-h: 70px; --hair: 1px solid var(--n3); --frame: 1.5px solid var(--ink); --sec-pad: clamp(40px, 5vw, 72px); }
html { scroll-behavior: auto; }
body { overflow-x: clip; }
main { overflow-x: clip; }
img[width] { height: auto; }
figure { margin: 0; }
section { position: relative; }
/* skip link: invisible until a keyboard user tabs to it, then it sits over the nav */
.skip { position: absolute; left: 16px; top: -120px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none; }
.skip:focus { top: 12px; }
.eyebrow { margin-bottom: 18px; }
h2.eyebrow { line-height: 1.4; text-wrap: pretty; max-width: none; }
.link-arrow { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; font-size: 16px; text-decoration: none; padding: 8px 0; border-bottom: 1.5px solid currentColor; }
.link-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(6px); }
.btn-ghost { text-decoration: none; transition: background .25s, color .25s, transform .25s var(--ease); }
@media (hover: hover) { .btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); } }
.hl { font-weight: 300; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }

/* ---------- nav ---------- */
.nav { background: rgba(255,255,255,.92); height: var(--nav-h); padding-block: 0; transition: background .5s var(--ease); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.menu-btn { font: 600 14px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: none; border: 0; padding: 12px 0 12px 10px; cursor: pointer; }
.menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: var(--paper); padding: 32px var(--gutter); display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.menu li { border-bottom: var(--hair); }
.menu li a { display: block; padding: 16px 0; font-weight: 300; font-size: 32px; text-decoration: none; }
@media (min-width: 801px) { .menu-btn, .menu { display: none !important; } .nav-cta { padding: .8em 1.4em; } }
/* the quote button stays in reach on phones too: compact, beside Menu */
@media (max-width: 800px) { .nav-cta { padding: .6em 1em; font-size: 13px; white-space: nowrap; } }
/* the smallest phones (360 to 380 wide): a touch smaller so logo, button and Menu fit on one line */
@media (max-width: 380px) { .nav .logo { height: 30px; } .nav-right { gap: 8px; } .nav-cta { padding: .6em .85em; font-size: 12.5px; } .menu-btn { padding-left: 6px; } }
html.is-dark .nav { background: rgba(44,46,53,.9); color: var(--paper); }
/* the nav logo is the colour logo (her ruling 2026-10-01); on the dark beat main.js swaps in the same logo with white letters */
html.is-dark .menu-btn { color: var(--paper); }

/* ---------- 1. hero: full-bleed piece, then the dive ---------- */
.hero { height: 300vh; color: var(--ink); margin-top: calc(var(--nav-h) * -1); }   /* three screens, her call 2026-09-23 (was 520vh) */
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#heroScene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-piece { display: none; }
.hero-enter { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 5fr) 7fr; align-items: center; pointer-events: none; padding-top: var(--nav-h); }
.hero-copy { grid-column: 1; pointer-events: auto; position: relative; z-index: 2; max-width: 30rem; }
html.hero-ink .hero-copy { color: var(--ink); }
html.hero-paper .hero-copy { color: var(--paper); }
html.hero-paper .hero-sub, html.hero-paper .scroll-hint { color: var(--paper); }
html.hero-panel .hero-copy { background: var(--paper); padding: clamp(24px, 3vw, 44px); margin-left: calc(var(--gutter) * -1); padding-left: var(--gutter); border-radius: 0 6px 6px 0; }
.hero-h1 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; max-width: 12em; }
.hero-sub { margin-top: 18px; max-width: 22em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; margin-top: 26px; }
.hero-cta .link-arrow { padding: 4px 0; }
.hero-words { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); pointer-events: none; }
.dw { position: absolute; margin: 0; max-width: none; color: var(--paper); font-weight: 300; font-size: clamp(56px, 9vw, 150px); line-height: 1; opacity: 0; visibility: hidden; letter-spacing: -0.02em; }
/* the payoff line lands on the resolving sheet, which is white paper with dots, so it is set in Ink */
.dw-four { color: var(--ink); font-size: clamp(34px, 4.6vw, 72px); line-height: 1.15; max-width: 12em; }
.scroll-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--n5); margin: 0; }
@media (max-width: 800px) {
  .hero { height: 300vh; }   /* same three-screen pin as desktop */
  .hero-enter { grid-template-columns: 1fr; align-items: start; padding-top: calc(var(--nav-h) + 45svh + 18px); }
  html.hero-paper .hero-copy, html.hero-ink .hero-copy { color: var(--ink); }
  html.hero-paper .hero-sub { color: inherit; }
  html.hero-panel .hero-copy { background: none; padding: 0; margin: 0; }
  .hero-h1 { font-size: clamp(24px, 6.8vw, 28px); line-height: 1.1; }
  .hero-sub { margin-top: 10px; font-size: 16px; }
  .hero-cta { margin-top: 14px; gap: 12px 20px; }
  .hero-cta .btn { padding: .8em 1.3em; font-size: 15px; }
  .dw { font-size: clamp(44px, 14vw, 72px); }
  .dw-four { font-size: 30px; }
  .scroll-hint { display: none; }
}
/* static: reduced motion or no WebGL. The image, then the copy, in the flow. */
html.rm .hero, html.no-dive .hero { height: auto; margin-top: 0; }
html.rm .hero-sticky, html.no-dive .hero-sticky { position: static; height: auto; overflow: visible; }
html.rm #heroScene, html.no-dive #heroScene, html.rm .hero-words, html.no-dive .hero-words, html.rm .scroll-hint, html.no-dive .scroll-hint { display: none; }
html.rm .hero-piece, html.no-dive .hero-piece { display: block; }
html.rm .hero-piece img, html.no-dive .hero-piece img { width: 100%; height: min(62svh, 700px); object-fit: cover; object-position: 60% 50%; }
html.rm .hero-enter, html.no-dive .hero-enter { position: static; display: block; padding: clamp(24px, 4vw, 48px) var(--gutter); pointer-events: auto; }
html.rm .hero-copy, html.no-dive .hero-copy { color: var(--ink); background: none; padding: 0; margin: 0; }

/* ---------- 4. the plant: why Lawton Connect, then the video montage ---------- */
.plant { background: var(--n1); padding-block: var(--sec-pad) clamp(24px, 3vw, 40px); position: relative; z-index: 3; }
.plant-top { display: grid; gap: 24px; margin-bottom: clamp(24px, 3vw, 44px); }
.plant-top .ch-head { margin-bottom: 0; }
.plant-top .eyebrow { margin-bottom: 14px; }
.plant-hl { max-width: 14ch; }
.why { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n4); }
.why li { padding: 11px 0; border-bottom: 1px solid var(--n4); font-size: 16px; line-height: 1.45; }
.why-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.why-cta p { font-weight: 300; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.01em; }
@media (min-width: 801px) { .plant-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; } }
.reels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
.reel { min-width: 0; }
.reel a { display: grid; grid-template-rows: 1fr auto; text-decoration: none; height: 100%; }
.reel-frame { aspect-ratio: 16 / 9; background: var(--n3); overflow: hidden; border-radius: 4px; }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.reel-lead { grid-column: 1 / -1; }
.reel-lead .reel-frame { aspect-ratio: 16 / 9; }
@media (min-width: 801px) {
  .reels { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
  .reel-lead { grid-column: 1 / 3; grid-row: 1 / 3; }
  .reel-lead .reel-frame { aspect-ratio: auto; height: 100%; min-height: 0; }
}

/* ---------- 3. full service: the 3D pieces ---------- */
.objects { position: relative; height: 320vh; }
.objects-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(ellipse 58% 52% at 62% 50%, #EDEDEA 0%, #F6F6F4 48%, #FFFFFF 78%); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.objects-poster { display: none; }
.beats { position: absolute; inset: 0; pointer-events: none; display: grid; align-items: center; }
.beats-col { width: min(32vw, 26rem); display: grid; gap: 16px; transition: opacity .5s var(--ease); pointer-events: auto; }
.beats-col.is-off { opacity: 0; pointer-events: none; }
.beats-col .eyebrow { margin-bottom: 0; }
.obj-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.beat a { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: baseline; padding: 11px 0; border-top: var(--hair); text-decoration: none; transition: opacity .45s var(--ease); }
.beat:last-child a { border-bottom: var(--hair); }
.beat-name { font-weight: 300; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.08; letter-spacing: -0.015em; }
/* the descriptive list is the sub-line under each service name, always in the flow so the row never jumps */
.beat-obj { font-size: 14px; line-height: 1.35; color: var(--n5); display: block; margin-top: 3px; }
.beat:not(.is-on) a { opacity: .45; }
.row-end { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.row-end.is-live { pointer-events: auto; opacity: 1; }
.row-labels { list-style: none; margin: 0; padding: 0; }
.row-labels li { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.row-labels a { text-decoration: none; padding: 8px 4px; border-bottom: 1px solid var(--n4); }
.row-labels a:hover { border-color: var(--ink); }
/* the link sits straight under the settled row and main.js pulls the next section (Our Work, the section after the
   stage in index.html) up over the empty tail of the pinned stage, so the row and that band are no more than 72px apart. */
.row-cta { position: absolute; left: 0; right: 0; top: var(--row-cta-top, auto); bottom: var(--row-cta-bottom, clamp(24px, 4.5vh, 52px)); display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (max-width: 800px) {
  .objects { height: 340vh; }
  .objects-sticky { background: radial-gradient(ellipse 70% 40% at 50% 50%, #EDEDEA 0%, #F6F6F4 48%, #FFFFFF 78%); }
  .beats { align-items: stretch; }
  .beats-col { width: 100%; height: 100%; grid-template-rows: auto auto 1fr auto; gap: 8px; padding-block: calc(var(--nav-h) + 12px) 4svh; }
  .beats-col .hl { font-size: 26px; }
  .obj-list { grid-row: 4; position: relative; min-height: 84px; margin: 0; }
  .beat { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity .45s var(--ease); }
  .beat.is-on { opacity: 1; }
  .beat:not(.is-on) { pointer-events: none; }   /* the hidden names sit stacked under the live one; only the live one takes a tap */
  .beat a, .beat:not(.is-on) a { opacity: 1; border-bottom: var(--hair); }
  .beat-name { font-size: 28px; }
  .beat-obj { display: block; }
  .row-end { display: none; }
}
/* fallback: no WebGL or reduced motion. Heading and list, the poster, the line. */
.no-3d .objects { height: auto; padding-block: var(--sec-pad); }
.no-3d .objects-sticky { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; }
.no-3d .beats { order: 1; } .no-3d .objects-poster { order: 2; } .no-3d .row-end { order: 3; }
.no-3d #scene { display: none; }
.no-3d .objects-poster { display: block; width: calc(100% - var(--gutter) * 2); max-width: 1200px; height: auto; margin: clamp(20px, 3vw, 40px) auto 0; }
.no-3d .beats { position: static; display: block; padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; pointer-events: auto; }
.no-3d .beats-col { width: auto; height: auto; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.no-3d .obj-list { position: static; min-height: 0; grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
.no-3d .beat, .no-3d .beat:not(.is-on) { position: static; opacity: 1; }
.no-3d .beat a, .no-3d .beat:not(.is-on) a { opacity: 1; border-bottom: var(--hair); }
.no-3d .beat-obj { display: block; }
.no-3d .row-end { display: block; position: static; opacity: 1; pointer-events: auto; margin-top: clamp(16px, 2.5vw, 32px); }
.no-3d .row-labels { display: none; }
.no-3d .row-cta { position: static; bottom: auto; align-items: flex-start; text-align: left; padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
@media (max-width: 800px) { .no-3d .obj-list { grid-template-columns: 1fr; } }

/* ---------- 10. the product index: the keyword layer, the directory before the footer ----------
   Her call 2026-09-23: at the bottom, not under the 3D stage. Still a real section inside <main>, so search engines
   read it as page content, not footer boilerplate. Four columns on desktop, two on phones. Quiet: 15px, no hairlines. */
.products { background: var(--paper); padding-block: var(--sec-pad); border-top: var(--hair); }
.products-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(18px, 2.2vw, 28px); }
.products-head .eyebrow { margin: 0; }
.dir-h2 { font-weight: 300; font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.015em; line-height: 1.06; }
.products-head p { font-size: 15px; color: var(--n5); max-width: none; }
.products-head p a { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--n4); }
.products-head p a:hover { border-color: var(--ink); }
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.products-col h3 { font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.015em; line-height: 1.1; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); text-wrap: pretty; }
.products-col h3 a { text-decoration: none; transition: color .2s; }
.products-col h3 a:hover { color: var(--magenta); }
.products-col ul { list-style: none; margin: 10px 0 0; padding: 0; }
.products-col li { font-size: 15px; line-height: 1.4; padding: 4px 0; color: var(--n6); text-wrap: pretty; }
.products-col li a { text-decoration: none; transition: color .2s; }
.products-col li a:hover { color: var(--magenta); }
@media (min-width: 801px) { .products-grid { grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 2.6vw, 40px); } }
/* phones: two columns, so a two-line heading beside a one-line heading shares the same rule and the lists start level */
@media (max-width: 800px) { .products-col h3 { min-height: calc(2.2em + 10px); display: flex; align-items: flex-end; } }

/* ---------- 2. brand band: the client ticker, straight under the hero ----------
   Its inner box is a fixed height (--band-h) so the band is exactly as tall whether the ticker is running or not.
   Logos are sized optically, by mark, not by pixel height, with max-height so they can shrink to fit the static row.
   The static row is the base state and the only state under reduced motion or with JS off; main.js adds .is-rolling
   and the loop takes over. The images are never lazy: the band must never render empty. */
.band { --band-h: 54px; background: var(--ink); padding-block: 30px; position: relative; z-index: 3; }
.marquee { overflow: hidden; height: var(--band-h); display: flex; align-items: center; }
.band-logos { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1440px; width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.band-logos li { flex: 0 1 auto; min-width: 0; display: grid; place-items: center; }
.band-logos img { width: auto; height: auto; max-width: 100%; object-fit: contain; opacity: .94; }
/* Optical sizing, by mark, not by pixel height: the very wide wordmarks sit lower, the emblems, the stacked mark and
   the glyphs sit taller, so every logo carries about the same weight on the strip. Sized by alt so the order of the
   list can change freely. A new logo with no rule here falls back to 36px. */
.band-logos img { max-height: 36px; }
.band-logos img[alt="Google"]    { max-height: 38px; }
.band-logos img[alt="Samsung"]   { max-height: 28px; }
.band-logos img[alt="Nike"]      { max-height: 44px; }
.band-logos img[alt="Mailchimp"] { max-height: 34px; }
.band-logos img[alt="Showtime"]  { max-height: 36px; }
.band-logos img[alt="AriZona"]   { max-height: 46px; }
.band-logos img[alt="Shopify"]   { max-height: 48px; }
.band-logos img[alt="Oribe"]     { max-height: 36px; }
.band-logos img[alt="USTA"]      { max-height: 29px; }
.band-logos img[alt="Hermes"]    { max-height: 54px; }
/* rolling state: main.js clones .band-logos until the row is wider than the viewport plus one track, sets --shift to
   one track's width and --dur from that width, so the speed is constant however many logos are on the list. Here the
   logos keep their natural width, nothing shrinks, and the row is clipped by .marquee. */
.marquee.is-rolling { display: flex; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.marquee.is-rolling .marquee-row { display: flex; flex: 0 0 auto; align-items: center; animation: lc-marquee var(--dur, 34s) linear infinite; will-change: transform; }
.marquee.is-rolling .band-logos { flex-wrap: nowrap; justify-content: flex-start; padding: 0; margin: 0; max-width: none; width: auto; gap: 0; flex: 0 0 auto; }
.marquee.is-rolling .band-logos li { flex: 0 0 auto; padding-inline: clamp(26px, 3.4vw, 52px); }
.marquee.is-rolling .band-logos img { max-width: none; }
@keyframes lc-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--shift, 0px) * -1), 0, 0); } }
.band:hover .marquee-row, .band:focus-within .marquee-row { animation-play-state: paused; }
/* If the setting is switched on after main.js has already built the loop, freeze it where it stands. */
@media (prefers-reduced-motion: reduce) { .marquee.is-rolling .marquee-row { animation: none; } }
@media (max-width: 800px) {
  .band { --band-h: 43px; }
  .band-logos img { max-height: 29px; }
  .band-logos img[alt="Google"] { max-height: 30px; } .band-logos img[alt="Samsung"] { max-height: 22px; }
  .band-logos img[alt="Nike"] { max-height: 35px; } .band-logos img[alt="Mailchimp"] { max-height: 27px; }
  .band-logos img[alt="Showtime"] { max-height: 29px; } .band-logos img[alt="AriZona"] { max-height: 37px; }
  .band-logos img[alt="Shopify"] { max-height: 35px; } .band-logos img[alt="Oribe"] { max-height: 27px; }
  .band-logos img[alt="USTA"] { max-height: 23px; } .band-logos img[alt="Hermes"] { max-height: 43px; }
  /* ten marks cannot share one 390px line, so the static phone fallback wraps and the box grows with it */
  .marquee:not(.is-rolling) { height: auto; display: block; }
  .marquee:not(.is-rolling) .band-logos { flex-wrap: wrap; justify-content: center; gap: 18px 26px; }
}

/* ---------- 5. heritage: the static two-photo band (ported from v8-partner) ---------- */
.heritage { background: var(--n1); padding-block: clamp(20px, 2.4vw, 32px) var(--sec-pad); }
.heritage-top { display: grid; gap: 28px; margin-top: clamp(26px, 3.2vw, 44px); }
.heritage-top .hl { max-width: 16ch; font-size: clamp(30px, 3.4vw, 50px); }
.heritage-lead { margin-top: 0; font-size: 18px; line-height: 1.5; color: var(--n6); max-width: 40ch; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n4); }
.facts li { padding: 14px 0; border-bottom: 1px solid var(--n4); font-size: 17px; line-height: 1.45; }
.more { margin-top: 20px; }
.photos { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
.photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.photos figure:first-child img { object-position: 62% 40%; filter: grayscale(1) contrast(1.02); }
.photos figure:last-child img { object-position: 50% 58%; }
.cap { display: flex; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--n5); margin-top: 12px; max-width: none; }
.cap-year { font-weight: 300; font-size: 24px; color: var(--ink); font-variant-numeric: lining-nums; }
@media (min-width: 801px) {
  .heritage-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
  .photos { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 0; }
}

/* ---------- 8. what clients say ---------- */
.quotes-band { background: var(--n1); padding-block: var(--sec-pad); border-top: var(--hair); }
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.quotes li { padding-top: 22px; border-top: 2px solid var(--magenta); }
.quotes blockquote { margin: 0; }
.quotes blockquote p { font-weight: 300; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.34; letter-spacing: -0.01em; color: var(--ink); max-width: 32ch; text-wrap: pretty; }
.quote-who { margin-top: 16px; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); }
@media (min-width: 801px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 48px); } }

/* ---------- 6. industries: one typographic slash statement, each name carrying its own descriptive line ----------
   The names and the descriptions are all real DOM text at page load. Each name is an inline-block aligned to the top,
   so the slashes still separate them and the whole thing wraps as one statement, not as eight boxes. */
.industries { background: var(--n2); padding-block: var(--sec-pad); border-top: var(--hair); }
.ind-lines { max-width: none; font-weight: 300; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -0.025em; }
.ind { position: relative; display: inline-block; vertical-align: top; max-width: 16.5rem; margin-bottom: clamp(24px, 2.6vw, 38px); }
.ind + .ind { margin-left: .62em; }
/* each industry name is a real H3 for search; visually it is the same word in the same statement */
.ind h3 { margin: 0; font: inherit; letter-spacing: inherit; text-wrap: inherit; }
.ind a { display: block; white-space: nowrap; text-decoration: none; background: linear-gradient(var(--magenta), var(--magenta)) 0 100% / 0 2px no-repeat; transition: color .25s, background-size .45s var(--ease); }
.ind a:hover, .ind a:focus-visible { color: var(--magenta); background-size: 100% 2px; }
.ind-desc { display: block; margin-top: 10px; font-weight: 400; font-size: 14px; line-height: 1.45; letter-spacing: 0; color: var(--n6); text-wrap: pretty; }
.ind .sl { position: absolute; left: -.4em; top: 0; color: var(--n3); }
@media (max-width: 800px) {
  /* phones: a clean two-column grid, no slashes, names wrap instead of running into the next one */
  .ind-lines:not(.is-small) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; font-size: 26px; }
  .ind-lines:not(.is-small) .ind { max-width: none; margin: 0; }
  .ind-lines:not(.is-small) .sl { display: none; }
  .ind-lines .ind a { white-space: normal; }
  .ind-desc { font-size: 13px; margin-top: 7px; }
}

/* ---------- 7. doors: the primary call to action ----------
   Solid Ink field, headline in paper, two distinct cards. Magenta carries Request a Quote; Submit Artwork is a quiet
   raised card beside it. This is the loudest moment on the page below the hero, by design. */
.doors { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 104px); }
.doors h2 { color: var(--paper); font-weight: 300; font-size: clamp(38px, 5.2vw, 80px); text-align: center; margin-inline: auto; max-width: 11em; letter-spacing: -0.025em; line-height: 1.02; }
.door-row { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 4vw, 56px); max-width: 1040px; margin-inline: auto; }
.door { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 3.2vw, 46px); border-radius: 10px; text-decoration: none; color: var(--paper); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.door-primary { background: var(--magenta); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.door-secondary { background: #383B44; border: 1.5px solid rgba(255, 255, 255, .18); }
.door:hover { transform: translateY(-4px); }
.door .eyebrow { margin: 0; color: rgba(255, 255, 255, .7); }
.door-primary .eyebrow { color: rgba(255, 255, 255, .88); }
.door-title { font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.04; letter-spacing: -0.02em; }
.door-line { color: rgba(255, 255, 255, .76); font-size: 16px; line-height: 1.45; }
.door .btn { align-self: flex-start; margin-top: 16px; }
.btn-invert { background: var(--paper); color: var(--ink); }
.door-secondary .btn-ghost { border-color: rgba(255, 255, 255, .55); color: var(--paper); }
@media (hover: hover) { .door-secondary:hover .btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--paper); } }
@media (min-width: 801px) { .door-row { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }

/* ---------- 8. subsidiaries ---------- */
.subs { padding-block: var(--sec-pad); border-top: var(--hair); }
.sub-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 36px; }
/* contain on a paper tile: the subsidiary spreads are 7:4 and were being cut on the right by a 4:3 cover box.
   Nothing on this site crops a piece. */
.sub-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); border-radius: 4px; }
.sub-list h3 { margin-top: 16px; font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.015em; }
.sub-list p { margin-top: 8px; color: var(--n6); font-size: 16px; }
.sub-list .link-arrow { margin-top: 14px; }
@media (min-width: 801px) { .sub-list { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); } }

/* ---------- footer: tight ---------- */
.footer { border-top: var(--hair); padding-block: clamp(28px, 2.6vw, 38px) 14px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { margin-top: 8px; line-height: 1.4; }
.footer-brand .logo-foot { margin-bottom: 2px; }
.footer-brand .small { margin-top: 10px; color: var(--n5); }
.footer-tel { margin-top: 6px !important; }
.footer-tel a { text-decoration: none; border-bottom: 1px solid var(--n3); }
.footer-tel a:hover { border-color: var(--ink); }
.footer-tel-label { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: block; padding: 2px 0; text-decoration: none; font-size: 15px; line-height: 1.5; }
.footer-line { margin-top: 18px; padding-top: 12px; border-top: var(--hair); max-width: 1440px; color: var(--n5); }
@media (min-width: 801px) { .footer-grid { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 16px clamp(36px, 4.4vw, 68px); } .footer-brand { grid-column: auto; } }

/* ---------- quiet reveals ---------- */
html.js:not(.rm) .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js:not(.rm) .rv.is-in { opacity: 1; transform: none; }

/* ---------- chapter heads: small-caps H2 (the search term), her display line, then the quotable answer ---------- */
.ch-head { display: grid; gap: 10px 0; padding-top: 18px; border-top: 1.5px solid var(--ink); margin-bottom: clamp(24px, 3vw, 40px); }
.ch-head .eyebrow { margin-bottom: 0; }
.ch-q { font-weight: 300; font-size: clamp(30px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; max-width: 18ch; }
/* the no-break phrases keep their last words together on wide screens; on a phone they are wider than the screen */
@media (max-width: 480px) { .ch-q span[style*="nowrap"] { white-space: normal !important; } }
.ch-a { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink); max-width: 40rem; text-wrap: pretty; margin-top: 4px; }
.plant-hl { max-width: 18ch; }
/* inside the pinned 3D stage the head is compact: no rule, smaller display line, the answer in gray under it */
.beats-col .ch-head { border-top: 0; padding-top: 0; margin-bottom: 4px; gap: 8px 0; }
.beats-col .ch-q { font-size: clamp(26px, 2.6vw, 40px); max-width: none; }
.beats-col .ch-a { font-size: 15px; line-height: 1.45; color: var(--n6); margin-top: 2px; }
@media (max-width: 800px) { .beats-col .ch-q { font-size: 25px; } .beats-col .ch-a { font-size: 14px; } }

/* ---------- the facts strip: the entity in one line, matching the structured data ---------- */
.facts-strip { border-top: var(--hair); border-bottom: var(--hair); background: var(--paper); position: relative; z-index: 3; }
.facts-strip ul { list-style: none; margin: 0 auto; padding-block: 14px; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.facts-strip li { display: flex; align-items: center; }
.facts-strip li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--n4); margin: 0 14px; flex: 0 0 auto; }
@media (max-width: 800px) { .facts-strip ul { font-size: 13px; } .facts-strip li + li::before { margin: 0 10px; } }

/* ---------- the chapter rail: the outline as wayfinding, desktop only, live once the hero has passed ----------
   Dots at the right edge; the label shows for the active chapter and on hover. Every label is real link text. */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.rail.is-live { opacity: 1; visibility: visible; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: transparent; padding: 3px 0; white-space: nowrap; transition: color .25s; }
.rail a::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--n4); flex: 0 0 auto; transition: background .25s, transform .25s; }
.rail:hover a { color: var(--n5); }
/* the label shows for a moment when the chapter changes, and on hover; at rest the rail is dots only, so it never
   sits on top of content */
.rail a { padding: 3px 8px; border-radius: 999px; }
.rail.show a.is-on, .rail:hover a.is-on { color: var(--ink); background: rgba(255,255,255,.92); }
.rail:hover a { background: rgba(255,255,255,.92); }
.rail a.is-on::after { background: var(--magenta); transform: scale(1.5); }
@media (max-width: 800px) { .rail { display: none; } }
html.is-dark .rail { display: none; }

/* ---------- the questions (faq.html): each an H3 with a direct answer ---------- */
.faq { padding-block: var(--sec-pad); border-top: var(--hair); }
.faq-list { display: grid; grid-template-columns: 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.faq-item { padding: 18px 0; border-bottom: var(--hair); }
.faq-item h3 { font-weight: 300; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.015em; line-height: 1.15; }
.faq-item p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--n6); max-width: 36rem; }
.faq-item p a { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--n4); }
.faq-item p a:hover { border-color: var(--ink); }
@media (min-width: 801px) { .faq-list { grid-template-columns: 1fr 1fr; } }

/* no numbers on the beats (her ruling): the service name and its line fill the row */
.beat a { grid-template-columns: 1fr; }

/* ---------- our work: the montage. Pictures only, no captions, nothing clickable (her ruling) ----------
   Natural shapes in CSS columns, so nothing is ever cropped: a menu still reads as a menu. The panel behind the
   pieces is white, the same as most of the photographs, so a column that ends short simply disappears instead of
   leaving a hole. More columns means smaller pieces and more work in the same band, which is what she asked for. */
/* pulled up over the 3D stage tail by main.js, so it sits above the stage and its gray field makes the seam */
.work { background: var(--n2); padding-block: var(--sec-pad) 0; position: relative; z-index: 3; }
.montage { list-style: none; margin: 0 var(--gutter); padding: 10px; background: var(--paper);
  columns: 2; column-gap: 6px; }
.montage li { break-inside: avoid; margin: 0 0 6px; overflow: hidden; }
.montage img { width: 100%; height: auto; display: block; transition: transform .7s var(--ease); }
@media (hover: hover) { .montage li:hover img { transform: scale(1.05); } }
/* phones show her nine picks (.is-pick, her call 2026-09-28, revised 2026-09-29); the full wall is one tap away on Our Work */
@media (max-width: 600px) { .montage li:not(.is-pick) { display: none; } }
@media (min-width: 601px) { .montage li.is-phone { display: none; } }   /* canvas-02 on phones only: computers show canvas-01, never the same piece twice */
@media (min-width: 601px)  { .montage { columns: 4; } }
@media (min-width: 1001px) { .montage { columns: 6; column-gap: 8px; padding: 14px; } .montage li { margin-bottom: 8px; } }
.work-more { padding-block: clamp(20px, 2.6vw, 34px); }

/* ---------- the gallery page: a true montage, natural shapes, nothing cropped ----------
   CSS columns give a masonry wall without JavaScript and without forcing every piece into the same rectangle. */
/* the nav is sticky and takes its own space, so the page needs no allowance for it: the same top gap as the sub pages */
.gal-page { padding-block: clamp(24px, 3.6vw, 52px) var(--sec-pad); }
.gal-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 52px); }
.gal-head h1 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.02em; }
.gal-head p { margin-top: 16px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--n6); }
.gal { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 10px; }
.gal li { break-inside: avoid; margin: 0 0 10px; background: var(--n1); }
.gal img { width: 100%; height: auto; display: block; }
@media (min-width: 801px) { .gal { columns: 4; column-gap: 14px; } .gal li { margin-bottom: 14px; } }
/* With JS the wall fills row by row (each piece goes to the shortest column), so the first pieces in the list sit
   across the top instead of stacking down the first column. Without JS the CSS columns above still work. */
.gal.is-rows { columns: auto; display: flex; gap: 10px; align-items: flex-start; }
.gal.is-rows > .gal-col { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0; }
.gal.is-rows > li.gal-col { background: none; margin: 0; }
.gal ul.gal-col { list-style: none; margin: 0; padding: 0; }
@media (min-width: 801px) { .gal.is-rows { gap: 14px; } }
.gal-cta { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.gal-cta p { font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.015em; }

/* V12: the headline is set a touch smaller so its longest line clears the die-cut ring in the hero artwork.
   Measured at 1440: widest line ends at 474px, the artwork edge begins near 500px. */
.hero-h1 { font-size: clamp(30px, 3.05vw, 44px); max-width: 11em; }

/* V12: the industries band carries a magenta rule so the section reads as a moment, not a list. */
.industries .eyebrow { padding-top: 16px; border-top: 2px solid var(--magenta); display: inline-block; }
@media (max-width: 800px) { .montage { padding-inline: 12px; } }
/* the FAQ lives on its own page now; there it needs no band padding or top rule of its own */
.faq-standalone { padding-block: 0; border-top: 0; }
.faq-standalone .faq-item:first-child, .faq-standalone .faq-item:nth-child(2) { border-top: var(--hair); }

/* ---------- the nav dropdowns: the live site's structure, restored ----------
   The live nav opens a services panel and an industries list, and that is where most of the site's internal links
   live: every product page is one click from every page. The V10 to V12 nav was flat, which would have cut those
   links. The panels open on hover and on keyboard focus, take no room until then, and are real links in the DOM on
   every page. On phones the menu overlay carries the services and industries as nested lists. */
.nav ul li { position: relative; }
.nav ul li.is-wide { position: static; }
.nav ul li > a { display: block; padding: 25px 0; }
.nav .sub { position: absolute; top: 100%; left: 0; z-index: 60; display: none; background: var(--paper); border-top: var(--hair); box-shadow: 0 24px 48px rgba(44, 46, 53, .12); padding: 22px 26px 26px; min-width: 240px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; }
.nav li.is-wide .sub { right: 0; padding: 28px var(--gutter) 34px; }
.nav li.has-sub:hover .sub, .nav li.has-sub:focus-within .sub { display: block; }
.nav .sub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); max-width: 1440px; margin: 0 auto; }
.nav .sub-h { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); max-width: none; }
.nav .sub-h a { text-decoration: none; opacity: 1; color: var(--ink); }
.nav .sub ul { display: block; margin: 0; padding: 0; font: inherit; text-transform: none; letter-spacing: 0; }
.nav .sub ul li { position: static; }
.nav .sub ul li > a { display: block; padding: 5px 0; opacity: 1; font-size: 15px; font-weight: 400; text-decoration: none; transition: color .2s; }
.nav .sub ul li > a:hover { color: var(--magenta); }
html.is-dark .nav .sub { color: var(--ink); }
/* the phone menu: nested lists under Services and Industries, and the overlay scrolls */
.menu { overflow-y: auto; }
.menu-sub { list-style: none; margin: 0 0 6px; padding: 0 0 0 18px; }
.menu-sub li { border: 0; }
.menu-sub li a { font-size: 19px; font-weight: 400; padding: 7px 0; }

/* her CMYK ampersand, set in place of the & in a heading (home page H1; sub pages load it from sub.css too) */
img.amp { display: inline-block; height: .74em; width: auto; vertical-align: -.04em; margin-inline: .04em; }
.hero-h1 img.amp { height: .88em; vertical-align: -.1em; }

/* the closing line under a why-us list, in her live copy */
.why-close { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--n6); max-width: 42rem; text-wrap: pretty; }

/* a client logo under a testimonial. The trusted-by marks are white PNGs for the dark band, so they are
   inverted to ink here and held back slightly, to sit with the type rather than shout over the quote. */
img.quote-logo { height: 40px; width: auto; margin-top: 12px; filter: grayscale(1) invert(1); opacity: .68; }
/* a one-line wordmark (Southwest) reads larger than a stacked one (Dell) at the same height */
img.quote-logo.is-wide { height: 22px; margin-top: 16px; }
@media (max-width: 800px) { img.quote-logo { height: 34px; } }

/* the WBENC mark in the footer, so the certification is on every page */
img.wbenc-foot { width: 132px; height: auto; margin-top: 14px; display: block; }

/* ---------- how we run: the technology block (her ruling 2026-09-27), home and Our Equipment ---------- */
.run { margin-bottom: clamp(28px, 3.4vw, 48px); }
.run .ch-head { margin-bottom: clamp(18px, 2vw, 26px); }
.run-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; border-top: 1px solid var(--n4); }
.run-list li { padding-top: 16px; }
.run-list h3 { font-size: 17px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; max-width: none; }
.run-list p { font-size: 15px; line-height: 1.5; color: var(--n6); max-width: 22rem; }
.run-list a { color: var(--ink); text-underline-offset: 3px; }
@media (min-width: 801px) { .run-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }

/* ---------- ink.js: the four-ink signature on four pages ---------- */
.ink-host { position: relative; }
.ink-canvas, .ink-layer, .scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; }
.ink-layer { mix-blend-mode: multiply; will-change: transform, opacity; }
.register, .scrub { height: 220vh; position: relative; }
.register-sticky, .scrub-sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.register-grid, .scrub-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 801px) { .register-grid, .scrub-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); } }
.register-grid .ch-head, .scrub-grid .ch-head { margin-bottom: 0; }
.register-fig, .scrub-fig { margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: #fff; }
.register-fig { aspect-ratio: 3 / 2; }
.scrub-fig { aspect-ratio: 16 / 9; background: var(--n3); }
.register-fig img, .scrub-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.register-fig img { opacity: 0; }
.register-fig.is-set { box-shadow: 0 0 0 1px var(--n3); }
html.rm .register, html.rm .scrub, html.no-ink .register, html.no-ink .scrub { height: auto; }
html.rm .register-sticky, html.rm .scrub-sticky, html.no-ink .register-sticky, html.no-ink .scrub-sticky { position: static; height: auto; padding-block: var(--sec-pad); }
html.rm .register-fig img, html.no-ink .register-fig img { opacity: 1; }
@media (max-width: 800px) { .register, .scrub { height: 180vh; } }

/* ---------- the job window: five steps, draws itself in once (ink.js adds .is-live). Her yes 2026-09-27 ---------- */
.jw .eyebrow { margin-bottom: clamp(18px, 2.2vw, 28px); }
.jw-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.jw-track::before, .jw-track::after { content: ""; position: absolute; left: 10%; right: 10%; top: 30px; height: 1px; }
.jw-track::before { background: var(--n3); }
.jw-track::after { background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.22,.61,.36,1) .25s; }
.jw.is-live .jw-track::after { transform: scaleX(1); }
.jw-step { text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.jw.is-live .jw-step { opacity: 1; transform: none; }
.jw.is-live .jw-step:nth-child(2) { transition-delay: .35s; } .jw.is-live .jw-step:nth-child(3) { transition-delay: .7s; }
.jw.is-live .jw-step:nth-child(4) { transition-delay: 1.05s; } .jw.is-live .jw-step:nth-child(5) { transition-delay: 1.4s; }
.jw-dot { position: relative; z-index: 1; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: #fff; border: 1px solid var(--n3); display: grid; place-items: center; transition: border-color .4s, background .4s; }
.jw.is-live .jw-dot { border-color: var(--ink); }
.jw-step:last-child .jw-dot { transition-delay: 1.8s; }
.jw.is-live .jw-step:last-child .jw-dot { background: var(--magenta); border-color: var(--magenta); }
.jw-dot svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jw-step:last-child svg { transition: stroke .4s 1.8s; }
.jw.is-live .jw-step:last-child svg { stroke: #fff; }
.jw-dot svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1); }
.jw.is-live .jw-dot svg * { stroke-dashoffset: 0; }
.jw.is-live .jw-step:nth-child(1) svg * { transition-delay: .15s; } .jw.is-live .jw-step:nth-child(2) svg * { transition-delay: .5s; }
.jw.is-live .jw-step:nth-child(3) svg * { transition-delay: .85s; } .jw.is-live .jw-step:nth-child(4) svg * { transition-delay: 1.2s; }
.jw.is-live .jw-step:nth-child(5) svg * { transition-delay: 1.55s; }
.jw-word { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.jw-line { margin-top: clamp(20px, 2.6vw, 30px); font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.01em; max-width: 36rem; }
html.rm .jw-step, html.no-ink .jw-step { opacity: 1; transform: none; transition: none; }
html.rm .jw-track::after, html.no-ink .jw-track::after { transform: none; transition: none; }
html.rm .jw-dot svg *, html.no-ink .jw-dot svg * { stroke-dashoffset: 0; transition: none; }
/* stacked: a vertical track, for a narrow column and for phones */
.jw.is-stack .jw-track { grid-template-columns: 1fr; gap: 0; }
.jw.is-stack .jw-track::before, .jw.is-stack .jw-track::after { left: 21px; right: auto; top: 12%; bottom: 12%; width: 1px; height: auto; transform-origin: top; }
.jw.is-stack .jw-track::after { transform: scaleY(0); }
.jw.is-stack.is-live .jw-track::after { transform: scaleY(1); }
.jw.is-stack .jw-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; text-align: left; padding: 6px 0; }
.jw.is-stack .jw-dot { width: 44px; height: 44px; margin: 0; }
.jw.is-stack .jw-dot svg { width: 22px; height: 22px; }
.jw.is-stack .jw-line { font-size: 16px; line-height: 1.45; margin-top: 16px; }
@media (max-width: 800px) {
  .jw .jw-track { grid-template-columns: 1fr; gap: 0; }
  .jw .jw-track::before, .jw .jw-track::after { left: 21px; right: auto; top: 12%; bottom: 12%; width: 1px; height: auto; transform-origin: top; }
  .jw .jw-track::after { transform: scaleY(0); }
  .jw.is-live .jw-track::after { transform: scaleY(1); }
  .jw .jw-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; text-align: left; padding: 6px 0; }
  .jw .jw-dot { width: 44px; height: 44px; margin: 0; }
  .jw .jw-dot svg { width: 22px; height: 22px; }
}
.run .jw { margin-top: clamp(36px, 4.4vw, 60px); }
.run-more { margin-top: clamp(22px, 2.6vw, 32px); }

/* the register figure in the Upload Files column: plays once when it comes into view, not tied to scroll */
.aside-fig { margin: 0; }
.aside-fig .register-fig { aspect-ratio: 3 / 2; }
.aside-fig .eyebrow { display: block; margin-bottom: 10px; }

/* 404 */
.nf { display: grid; gap: 28px; align-items: center; padding-block: clamp(24px, 3.6vw, 52px) var(--sec-pad); }
@media (min-width: 801px) { .nf { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); } }
.nf h1 { font-size: clamp(34px, 3.9vw, 58px); line-height: 1.04; letter-spacing: -0.02em; }
.nf-links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.nf .ph-fig { aspect-ratio: 1400 / 933; }
.doors-note { margin-top: clamp(22px, 2.6vw, 32px); text-align: center; font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; color: rgba(255,255,255,.86); max-width: none; }
.doors-note a { color: #fff; text-underline-offset: 4px; }

/* the home facts strip sits centered (her note 2026-09-27); sub page strips stay left, under their own hero copy */
.facts-strip:not(.is-sub) ul { justify-content: center; }
.nf-clip { aspect-ratio: 16 / 9; }

/* gallery: pieces drop into place in a scattered order (ink.js adds .is-drop, then .is-down per piece) */
.gal.is-drop .gal-piece { opacity: 0; transform: translateY(-44px) scale(1.02); }
.gal.is-drop .gal-piece.is-down { opacity: 1; transform: none; transition: transform .62s cubic-bezier(.22, 1.28, .42, 1), opacity .28s ease-out; }
html.rm .gal.is-drop .gal-piece, html.no-ink .gal.is-drop .gal-piece { opacity: 1; transform: none; transition: none; }