/* Retail Spark v2, Mock A "The stack" (after TPG) on every page, with Mock B's crossfade hero and Mock C's logo
   marquee on the home page. Tokens, measured contrast and motion: DIRECTION-BUILD.md. Orange is text only on dark
   grounds; black labels on orange fills; red is never a design colour (it is the review marker). */

@font-face { font-family: Anton; src: url(/fonts/anton-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap }
@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-900-italic.woff2) format("woff2"); font-weight: 900; font-style: italic; font-display: swap }

/* ---------- tokens (from the logo: #F57D20 + black, gradient stops L7/L8/L10) ---------- */
:root {
  --orange: #F57D20;
  --pink: #FF4D5E;       /* the client's headline pink (11 Nov 2026, from Mock A's headline): every H1, dark grounds only */
  --night: #121110;      /* poster ground, warm black */
  --night-2: #1C1A19;    /* raised dark surfaces */
  --char: #252527;       /* logo stop L10: body text on light */
  --stone: #F3F0EE;      /* logo stop L7 at 10% over white */
  --muted-l: #60534A;    /* logo stop L8: secondary text on light */
  --muted-d: #BBB1A8;    /* secondary text on dark */
  --line-d: rgba(255, 255, 255, .22);
  --line-l: rgba(18, 17, 16, .22);
  --strip: clamp(40px, 5.6vh, 56px);
  --pad: clamp(16px, 5.6vw, 80px);
  --display: Anton, Impact, "Arial Narrow", sans-serif;
  --sans: Figtree, "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
.dark { --fg: #fff; --fg-2: var(--muted-d); --line: var(--line-d); --ghost: #3D3633; --focus: var(--orange); color: #fff }
.light { --fg: var(--char); --fg-2: var(--muted-l); --line: var(--line-l); --ghost: #D9D0C8; --focus: #121110; color: var(--char) }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px }
body { margin: 0; background: var(--night); color: #fff; font-family: var(--sans); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased }
img { display: block; max-width: 100%; height: auto }
a { color: inherit }
h1, h2, h3, p, ul, ol { margin: 0 }
ul, ol { padding: 0; list-style: none }
hr { margin: 0 }
:focus-visible { outline: 3px solid var(--focus, var(--orange)); outline-offset: 3px; border-radius: 2px }
[hidden] { display: none !important }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--pad) }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.skip { position: absolute; left: 16px; top: -80px; z-index: 400; background: #fff; color: #000; padding: 10px 16px; font-weight: 700; text-decoration: none; border-radius: 4px }
.skip:focus { top: 16px }
/* words for screen readers and link-text audits only, e.g. the destination after a shared "learn more" */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }

.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .002em; text-wrap: balance }
/* The accent is an inline block with room below its baseline (its bottom margin counts in the line box), so the line
   that carries it clears the descender of its "p" and the line below can't touch it. That is the known Mock A risk;
   the clearance is measured from the pixels: 6px or more at 1440, 4px or more at 1024 and 390. */
.accent { display: inline-block; font-family: var(--sans); font-style: italic; font-weight: 900; text-transform: none; color: var(--orange); letter-spacing: -.025em; font-size: 1.04em; line-height: 1.1; margin-bottom: .14em; padding-right: .06em }
.eyebrow { font: 700 15px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--orange) }
.light .eyebrow { color: var(--char) }
.rule { border: 0; border-top: 1px solid var(--line) }
.lede-h { font: 700 clamp(30px, 3.3vw, 48px)/1.12 var(--sans); letter-spacing: -.015em; color: var(--orange) }
.ico { width: 18px; height: 18px; flex: none }

/* buttons ("get in touch" is lowercase in the live HTML: the capitals are CSS, as on the live site) */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 20px; border-radius: 4px; border: 0; font: 700 15px/1.1 var(--sans); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s }
.btn .ico { transition: transform .2s }
.btn:hover .ico { transform: translateX(4px) }
.btn-fill { background: var(--orange); color: #000 }
.btn-fill:hover { background: #fff }
.light .btn-fill:hover { background: #121110; color: var(--orange) }
.btn-line { border: 1.5px solid currentColor; color: var(--fg); background: none }
.btn-line:hover { background: var(--fg); color: var(--night) }
.light .btn-line:hover { color: #fff }

/* glyphs: the brand-pack spark in a ghost tone with the service's rays lit */
.glyph { display: block; flex: none; overflow: visible; width: 56px; height: auto; aspect-ratio: 497 / 314 }
.glyph .g { fill: var(--ghost) }
.glyph .r { fill: var(--orange) }

/* ---------- header (TPG: transparent over the hero, not sticky) ---------- */
.site-head { position: absolute; inset: 0 0 auto 0; z-index: 50 }
.head-in { display: flex; align-items: center; gap: 32px; height: 104px }
.logo { display: block; flex: none; line-height: 0 }
.logo img { height: 62px; width: auto }
.nav { display: flex; align-items: center; gap: 6px; margin-inline: auto }
.nav > a, .dd-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font: 600 16px/1 var(--sans); color: #fff; text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 4px }
.nav > a:hover, .dd-btn:hover, .dd-btn[aria-expanded="true"], .nav > a[aria-current] { color: var(--orange) }
.chev { width: 14px; height: 14px; transition: transform .2s }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg) }
.head-cta { flex: none }
.burger, .menu { display: none }

/* the services dropdown: Mock A's card grid, one card per service plus the help box */
.dd { position: absolute; left: var(--pad); right: var(--pad); top: 96px; max-width: 1280px; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); padding: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s }
.dd.open, html:not(.js) .nav-group:focus-within .dd { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s }
.dd-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 6px; text-decoration: none; border: 1px solid #ECE6E1; transition: border-color .2s, background .2s }
.dd-card:hover, .dd-card[aria-current] { background: var(--stone); border-color: #D8CFC7 }
.dd-card .glyph { width: 52px }
.dd-card b { display: block; font: 400 22px/1 var(--display); text-transform: uppercase; color: #121110; margin-bottom: 8px; letter-spacing: .01em; text-wrap: balance }
.dd-card span span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 15px; line-height: 1.45; color: var(--muted-l) }
.dd-help { background: var(--night); border-radius: 6px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 12px }
.dd-overview { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 22px/1.05 var(--display); text-transform: uppercase; text-decoration: none; color: #fff }
.dd-overview .ico { color: var(--orange) }
.dd-overview:hover { color: var(--orange) }
.dd-help .tel { font: 700 22px/1.1 var(--sans); text-decoration: none; display: inline-flex; gap: 10px; align-items: center; min-height: 44px }
.dd-help .tel .ico { width: 22px; height: 22px; color: var(--orange) }

/* ---------- heroes ---------- */
.hero { position: relative; display: flex; overflow: hidden; isolation: isolate; background: var(--night) }
.hero-media { position: absolute; inset: -6% 0 -14% 0; z-index: -2; will-change: transform }
.hero-media picture, .hero-media img { width: 100%; height: 100% }
.hero-media img { object-fit: cover }
/* The veil is at least 80% night behind the whole headline (it ends by 1040px), so white, orange and the preview red
   keep their contrast over the brightest photo (measured from the pixels; DIRECTION-BUILD.md). */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40% 45% at 88% 12%, rgba(245, 125, 32, .18), transparent 70%),
  linear-gradient(90deg, rgba(18, 17, 16, .97) 0, rgba(18, 17, 16, .9) 560px, rgba(18, 17, 16, .82) 1040px, rgba(18, 17, 16, .4) 100%),
  linear-gradient(0deg, var(--night) 0%, rgba(18, 17, 16, 0) 34%) }
.hero-in { position: relative; padding-top: 150px; padding-bottom: 96px }
.hero .eyebrow { max-width: 880px; padding-bottom: 22px }
.hero .rule { max-width: 880px; margin-bottom: 34px }
.hero h1 { font-size: clamp(54px, 7vw, 104px); max-width: 920px }
/* Page headlines in the client's pink: the home hero (its accent word too, as in the mock the client chose from), the
   inner-page heroes and the article headers. All sit on --night or the photo veil; never put pink text on a light ground. */
.hero h1, .hero h1 .accent, .art-head h1 { color: var(--pink) }
.hero-sub { margin-top: 22px; max-width: 760px; font: 700 18px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--orange) }
.hero-text { font-size: 20px; line-height: 1.5; max-width: 640px; margin-top: 28px }
.hero-text + .hero-text { margin-top: 16px }
.hero .btn { margin-top: 34px }
.hero--home { min-height: 100vh; min-height: 100svh; align-items: center }
.hero--page { min-height: clamp(560px, 86svh, 860px); align-items: flex-end }
.page-contact .hero--page { min-height: clamp(460px, 60svh, 620px) }
.hero--plain { min-height: 0 }
.hero--plain::before { background: radial-gradient(50% 80% at 92% 0%, rgba(245, 125, 32, .22), transparent 70%) }
.hero--plain .hero-in { padding-top: 168px; padding-bottom: 72px }
.hero--plain h1 { font-size: clamp(48px, 6vw, 92px) }

/* Mock B's crossfade: slow fade, slight zoom, progress bars and a pause button */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease }
.slide.is-on { opacity: 1 }
.motion .slide.is-on img { animation: kb 9s ease-out both }
@keyframes kb { from { transform: scale(1) } to { transform: scale(1.08) } }
/* bottom 108px: clear of the fixed WhatsApp button (60px at 20px from the corner) on the first screen */
.hero-ctrl { position: absolute; right: var(--pad); bottom: 108px; display: flex; align-items: center; gap: 16px; z-index: 2 }
.bars { display: flex; gap: 6px }
.bars li { width: 36px; height: 3px; background: rgba(255, 255, 255, .28); overflow: hidden }
.bars li i { display: block; height: 100%; width: 0; background: var(--orange) }
.bars li.done i { width: 100% }
.bars li.on i { width: 100%; transition: width var(--dwell, 6.5s) linear }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0 }
.round-btn svg { width: 16px; height: 16px }
.round-btn .i-play, .round-btn[aria-pressed="true"] .i-pause { display: none }
.round-btn[aria-pressed="true"] .i-play { display: block }
.round-btn--line { border-color: #121110; color: #121110 }

/* breadcrumbs */
.crumbs { margin-bottom: 22px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--muted-d) }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0 }
.crumbs li:not(:last-child)::after { content: "/"; padding: 0 10px; color: rgba(255, 255, 255, .4) }
.crumbs a { display: inline-block; text-decoration: none; padding: 4px 0 }
.crumbs a:hover { color: var(--orange) }
.crumbs [aria-current] { color: #fff; padding: 4px 0 }

/* ---------- home: intro ---------- */
.intro { padding: 40px 0 120px }
.intro .rule { margin-bottom: 56px }
.intro-grid { display: grid; grid-template-columns: minmax(0, 760px) auto; justify-content: space-between; align-items: end; gap: 40px }
.intro p { margin-top: 22px; max-width: 740px }

/* ---------- home: the stack (sticky full-height panels that collapse to tab strips) ---------- */
.svc-head { padding: 0 0 64px }
.svc-head-grid { display: grid; grid-template-columns: auto minmax(0, 520px); gap: 48px; justify-content: space-between; align-items: end }
.svc-head h2 { font-size: clamp(48px, 7vw, 104px) }
.svc-head p { color: var(--muted-d) }
.stack { position: relative }
.panel { position: sticky; top: calc(var(--i) * var(--strip)); min-height: calc(100vh - var(--i) * var(--strip)); background: var(--ground); overflow: hidden; isolation: isolate; box-shadow: 0 -1px 0 var(--line), 0 -24px 48px -24px rgba(0, 0, 0, .55) }
.panel.dark { --ground: var(--night) }
.panel.white { --ground: #fff }
.panel.stone { --ground: var(--stone) }
.panel-media { position: absolute; top: -36vh; right: 0; bottom: 0; width: 66%; z-index: -1; will-change: transform }
.panel-media picture, .panel-media img { width: 100%; height: 100% }
.panel-media img { object-fit: cover }
.panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 78%, transparent) 26%, color-mix(in srgb, var(--ground) 18%, transparent) 62%, transparent 100%) }
.panel.dark .panel-media img { filter: brightness(.72) saturate(.85) }
.panel.light .panel-media::after { background: linear-gradient(90deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 86%, transparent) 28%, color-mix(in srgb, var(--ground) 30%, transparent) 64%, transparent 100%) }
.strip { position: absolute; inset: 0 0 auto 0; height: var(--strip); display: flex; align-items: center; cursor: pointer; z-index: 2 }
.strip .wrap { display: flex; align-items: center; gap: 14px }
.strip .glyph { width: 40px }
.strip span { font: 400 clamp(18px, 2.4vh, 23px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--fg) }
.panel-body { position: relative; min-height: calc(100vh - var(--i) * var(--strip)); display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--strip) + 2vh); padding-bottom: 7vh }
/* a covered panel dims by up to 40% under a veil of its own ground (the text itself keeps its full contrast) */
.panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ground); opacity: calc(var(--cover, 0) * .4); pointer-events: none }
.panel-title { display: flex; align-items: center; gap: 22px }
.panel-title .glyph { width: clamp(60px, 5.6vw, 84px) }
.panel h3 { font-size: clamp(40px, 4.4vw, 64px); color: var(--fg) }
.panel h3.quiet { font-size: clamp(32px, 3.2vw, 46px) }
.panel h3 a { text-decoration: none }
.panel.dark h3 a:hover { color: var(--orange) }
.panel.light h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px }
.panel .lead { margin-top: 20px; max-width: 620px; font-size: 19px; color: var(--fg) }
.panel .rows { margin-top: 22px; width: min(460px, 100%) }
.panel .btn { margin-top: 28px; align-self: flex-start }

/* rows: hairline list rows (arrowed links, plain points, or glyph bullets) */
.rows li { border-bottom: 1px solid var(--line) }
.rows > li > a, .rows li > span { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 10px 0; text-decoration: none; font-size: 17px; font-weight: 500; color: var(--fg) }
.rows > li > a .ico { color: var(--orange); transition: transform .2s }
.light .rows > li > a .ico { color: #121110 }
.rows > li > a:hover .ico { transform: translateX(5px) }
.dark .rows > li > a:hover { color: var(--orange) }
.light .rows > li > a:hover { text-decoration: underline; text-underline-offset: 4px }
.rows--glyph li { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0 }
.rows--glyph .glyph { width: 30px; margin-top: .3em }
.rows--glyph li > span { display: block; min-height: 0; padding: 0; font-size: 18px; line-height: 1.5 }
.rows--glyph strong { font-weight: 700 }
.rows--cols { columns: 2; column-gap: 48px }
.rows--cols li { break-inside: avoid }

/* ---------- home: print management (TPG's MediaHUB band: glow and orbiting rings) ---------- */
.how { position: relative; padding: 150px 0; text-align: center; overflow: hidden; isolation: isolate }
.how .eyebrow { margin-bottom: 22px }
.how h2 { font-size: clamp(42px, 5.4vw, 80px); line-height: .96; max-width: 1100px; margin: 0 auto }
.how .lead { max-width: 760px; margin: 30px auto 0; font-size: 19px }
.how-sub { margin: 84px 0 28px; font: 700 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d) }
.how-foot { position: relative; isolation: isolate }
.how-foot::before { content: ""; position: absolute; left: 50%; top: 0; width: 1100px; height: 1100px; margin-left: -550px; z-index: -2; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 125, 32, .4), rgba(245, 125, 32, .13) 45%, transparent 72%) }
.orbit { position: absolute; left: 50%; top: -40px; width: 1180px; height: 1180px; margin-left: -590px; z-index: -1; pointer-events: none }
.orbit i { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; animation: spin 90s linear infinite }
.orbit i:nth-child(2) { inset: 150px; animation-duration: 70s; animation-direction: reverse }
.orbit i:nth-child(3) { inset: 300px; animation-duration: 55s }
.orbit i::after { content: ""; position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; border-radius: 3px; background: var(--orange); transform: rotate(45deg) }
.orbit i:nth-child(2)::after { left: auto; right: -6px; width: 12px; height: 12px; background: #fff; opacity: .6 }
.orbit i:nth-child(3)::after { top: -6px; left: 50%; width: 10px; height: 10px }
@keyframes spin { to { transform: rotate(360deg) } }
.how .btn { margin-top: 56px }

/* steps: numbered dark cards, each with a ray glyph (dark cards on light bands too: the numbers stay orange on dark) */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; text-align: left; counter-reset: s }
.steps li { position: relative; background: var(--night-2); color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 14px; --focus: var(--orange) }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font: 400 54px/.9 var(--display); color: var(--orange) }
.steps .glyph { --ghost: #3D3633; position: absolute; top: 22px; right: 18px; width: 46px }
.steps span { font-weight: 600; font-size: 18px; line-height: 1.4 }
.steps strong { color: var(--orange) }
.steps a { text-underline-offset: 3px }
.steps--row { grid-template-columns: repeat(5, 1fr) }
.steps--row li { min-height: 200px }
.steps--row span { margin-top: auto }

/* ---------- home: why work with us + clients (the pale band) ---------- */
.why { background: var(--stone); padding: 130px 0 0 }
.why h2 { font-size: clamp(46px, 6.4vw, 96px); text-align: center; color: #121110 }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 72px }
.why-grid li { border-top: 2px solid #121110; padding-top: 22px }
.why-grid .glyph { width: 52px; margin-bottom: 18px }
.why-grid h3 { font-size: 28px; line-height: .95; color: #121110; margin-bottom: 14px }
@media (min-width: 1101px) { .why-grid h3 { min-height: 2lh } }
.why-grid p { font-size: 16px; line-height: 1.6 }
.clients { background: var(--stone); padding: 110px 0 120px; overflow: hidden }
.clients-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px }
.clients h2 { font: 700 15px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #121110 }
.clients .rule { margin-bottom: 34px }

/* Mock C's dual marquee on white rounded tiles; each tile is sized by area so the logos read evenly */
.marquee { overflow: hidden; padding-block: 8px }
.marquee-track { display: flex; gap: clamp(12px, 1.4vw, 18px); width: max-content }
.tile { flex: none; display: grid; place-items: center; width: clamp(150px, 15vw, 216px); aspect-ratio: 5 / 3; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(18, 17, 16, .06) }
.tile--dark { background: #151515 } /* the BHS file's own edge colour (measured), so its box disappears */
.tile picture { display: block } /* the grid item; its % width is the logo's share of the tile */
.tile img { width: 100%; height: auto }
.marquee[data-dir="right"] .marquee-track { margin-left: calc(-1 * clamp(75px, 7.5vw, 108px)) }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0) } }

/* ---------- Industry Updates cards (TPG's tall dark case-study card) ---------- */
.post { position: relative; aspect-ratio: 3 / 4.1; border-radius: 10px; overflow: hidden; background: var(--night-2); isolation: isolate; display: flex; flex-direction: column; padding: 34px; color: #fff; --focus: var(--orange) }
.post picture { position: absolute; inset: 0; z-index: -2 }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s }
.post:hover img { transform: scale(1.04) }
.post::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 17, 16, .5) 0%, rgba(18, 17, 16, .08) 24%, rgba(18, 17, 16, .8) 48%, rgba(18, 17, 16, .97) 68%) }
.pill { align-self: flex-start; background: #fff; color: #121110; border-radius: 4px; padding: 6px 10px; font: 700 13px/1.15 var(--sans) }
.post .meta { margin-top: auto; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #E9E1D9 }
.post-title { font-size: clamp(30px, 2.8vw, 42px); margin-top: 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .3) }
.post-title a { text-decoration: none }
.post-title a::after { content: ""; position: absolute; inset: 0; z-index: 3 }
.post .go { margin-top: 22px; width: 44px; height: 44px; border-radius: 4px; background: var(--orange); color: #000; display: grid; place-items: center }
.post .go .ico { width: 20px; height: 20px }
.post:hover .go { background: #fff }
.post:focus-within { outline: 3px solid var(--orange); outline-offset: 4px }
.post-title a:focus-visible { outline: none }

.updates { padding: 130px 0 120px; overflow-x: clip }
.updates .rule { margin-bottom: 56px }
.upd-head { display: grid; grid-template-columns: minmax(0, 760px) auto; justify-content: space-between; align-items: end; gap: 40px }
.upd-head p { margin-top: 18px }
.track { display: flex; gap: 32px; margin-top: 72px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--pad); scroll-padding-left: var(--pad) }
.track::-webkit-scrollbar { display: none }
@media (min-width: 1440px) { .track { padding-left: calc((100vw - 1440px) / 2 + var(--pad)) } }
.track .post { flex: 0 0 min(470px, 84vw); scroll-snap-align: start }
@media (min-width: 901px) {
  .updates--grid .track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); overflow: visible }
}
.car-ctl { display: flex; align-items: center; gap: 20px; margin-top: 40px }
.car-ctl button { width: 56px; height: 52px; background: none; border: 0; border-top: 1px solid #fff; color: #fff; cursor: pointer; display: grid; place-items: center }
.car-ctl button .ico { width: 22px; height: 22px }
.car-ctl .prev .ico { transform: scaleX(-1) }
.car-ctl button:hover { color: var(--orange); border-color: var(--orange) }
.car-ctl button:disabled { opacity: .35; cursor: default }
.progress { margin-left: auto; width: 180px; height: 2px; background: rgba(255, 255, 255, .22); position: relative }
.progress b { position: absolute; left: 0; top: 0; height: 100%; width: var(--p, 33%); background: var(--orange); transition: width .25s }

/* the Industry Updates index: filter pills, then a staggered two-column masonry */
.sec--articles { padding-top: 24px }
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px }
.filter button { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .5); background: none; color: #fff; font: 600 15px/1.2 var(--sans); cursor: pointer }
.filter button:hover { border-color: var(--orange) }
.filter button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #000 }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 32px }
.posts--masonry { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 48px; padding-bottom: 180px }
.posts--masonry .post { aspect-ratio: 4 / 4.5 }
.posts--masonry .is-right { transform: translateY(180px) }

/* ---------- bands and generic sections ---------- */
.band { padding: clamp(72px, 9vw, 128px) 0 }
.band.light { background: var(--stone) }
.band.dark + .band.dark, .hero + .band.dark { padding-top: 24px }
.sec-grid { border-top: 1px solid var(--line); padding-top: 40px }
.sec-grid--bare { border-top: 0; padding-top: 0 }
.sec-head .display { font-size: clamp(36px, 4vw, 60px); color: var(--fg) }
.light .sec-head .display { color: #121110 }
.sec-head .eyebrow { margin-bottom: 16px }
.sec-grid:not(.sec-grid--split):not(.sec-grid--doc):not(.sec-grid--photo):not(.sec-grid--reels) .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 24px 64px; align-items: end; margin-bottom: 48px }
.sec-intro p + p, .sec-body > p + p { margin-top: 16px }
.sec-grid--doc .sec-intro, .sec-grid--photo .sec-intro { margin-top: 16px }
.sec-grid--photo .sec-head { margin-bottom: 32px }

/* the photo band: the service's stack photo bleeds in from the right through the band's own ground (Mock A's panels) */
.band.dark { --ground: var(--night) }
.band.light { --ground: var(--stone) }
.band--photo { position: relative; isolation: isolate; overflow: hidden }
.band-media { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: -1 }
.band-media picture, .band-media img { width: 100%; height: 100% }
.band-media img { object-fit: cover }
.band-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 12%, color-mix(in srgb, var(--ground) 70%, transparent) 30%, color-mix(in srgb, var(--ground) 15%, transparent) 62%, transparent 100%) }
.band.dark .band-media img { filter: brightness(.78) saturate(.9) }
.sec-grid--photo { max-width: 50% }
.sec-intro p { color: var(--fg-2) }
.sec-grid--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px }
.sec-grid--split .sec-head { position: sticky; top: 32px; align-self: start }
.sec-body > p { max-width: 760px }
.sec-body > p + .rows, .sec-body > p + .sub-h { margin-top: 28px }
.sec-body a:not(.btn) { text-underline-offset: 3px }
.sub-h { font: 700 15px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 10px }
.sec-body > .btn { margin-top: 40px }
.sec-grid--doc { max-width: 820px }
.sec-grid--doc .sec-head .display { font-size: clamp(30px, 3.2vw, 44px) }
.sec-grid--doc .sec-head { margin-bottom: 20px }
.sec-grid--doc .sec-body > p { max-width: 68ch }
.band.light + .band.light { padding-top: 0 }
.band--doc { padding-bottom: 40px }
.band--doc:has(+ .close) { padding-bottom: clamp(72px, 9vw, 128px) }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px }
.card { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 30px; border-radius: 8px; border: 1px solid #E2DAD3; background: #fff }
.dark .card { background: var(--night-2); border-color: rgba(255, 255, 255, .12) }
.card .glyph { width: 56px; margin-bottom: 6px }
.card-title { font-size: clamp(28px, 2.4vw, 36px); color: var(--fg) }
.light .card-title { color: #121110 }
.card-title a { text-decoration: none }
.dark .card-title a:hover { color: var(--orange) }
.light .card-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px }
.card-role { font: 700 14px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2) }
.card p { font-size: 16px; line-height: 1.6 }
.card .rows { margin-top: 4px }
.card .rows > li > a, .card .rows li > span { font-size: 16px; min-height: 46px }
.card .btn { align-self: flex-start; margin-top: auto }
.card .rows--links { margin-top: auto }
.card .rows li > span a { text-decoration-thickness: 1px; text-underline-offset: 3px }
.card .rows li > span a:hover { text-decoration-thickness: 2px }

/* WhatsApp click-to-chat (user, 12 Nov 2026). #1C9E4C, not WhatsApp's #25D366: the white mark needs 3:1 on it (3.47),
   and so does the button on stone (3.06) and night (5.43). Under the phone menu (z 100), which also makes it inert. */
.wa-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 90; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #1C9E4C; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .15s ease }
.wa-float:hover { transform: scale(1.06) }
.wa-float:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px }
.wa-float .wa-ico { width: 32px; height: 32px }
@media print { .wa-float { display: none } }

/* gallery: a captioned photo of each display type (Display & Fixtures, client 11 Nov 2026) */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px }
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 12px }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--night-2) }
.gallery figcaption { font: 700 15px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg) }
.gallery-note { margin-top: 22px; font-size: 14px; color: var(--fg-2) }

/* reels: the client's silent video loops beside a band's words (Print Management, 11 Nov 2026). 600px holds two
   9:16 clips at ~290px each, about half the 576px source, so they stay sharp on a 2x screen. */
.sec-grid--reels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 40px 64px; align-items: center }
.sec-grid--reels .sec-intro { margin-top: 16px }
.reels { display: grid; gap: 16px; justify-items: end }
.reels-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100% }
.reel { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: var(--night-2) }

/* offices */
.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px }
.offices li { border-top: 2px solid currentColor; padding-top: 24px }
.offices .glyph { width: 52px; margin-bottom: 18px }
.office-name { font-size: clamp(30px, 3vw, 44px); margin-bottom: 14px; color: var(--fg) }
.light .office-name { color: #121110 }
.offices p { font-size: 19px; line-height: 1.6; overflow-wrap: anywhere }
.offices a { text-underline-offset: 3px }

/* related services: Mock A's glyph-and-title strip as arrowed rows, one link per service */
.rel li { border-bottom: 1px solid var(--line) }
.rel-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 24px; padding: 24px 0; text-decoration: none; color: var(--fg) }
.rel-row .glyph { width: 64px; margin-top: -2px }
.rel-name { display: block; font: 400 clamp(26px, 2.4vw, 36px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--fg) }
.light .rel-name { color: #121110 }
.rel-line { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--fg-2) }
.rel-row .ico { width: 24px; height: 24px; align-self: center; color: var(--orange); transition: transform .2s }
.light .rel-row .ico { color: #121110 }
.rel-row:hover .ico { transform: translateX(5px) }
.light .rel-row:hover .rel-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px }
.dark .rel-row:hover .rel-name { color: var(--orange) }

/* ---------- articles: dark header band, light reading column ---------- */
.art-head { padding: 160px 0 72px; background: radial-gradient(50% 80% at 92% 0%, rgba(245, 125, 32, .2), transparent 70%), var(--night) }
.art-head .rule { margin-bottom: 30px }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #E9E1D9 }
.art-meta .pill { letter-spacing: 0; text-transform: none }
.art-head h1 { font-size: clamp(44px, 5.6vw, 84px); max-width: 1040px; margin-top: 26px }
.art-sum { margin-top: 26px; max-width: 760px; font-size: 20px; color: var(--muted-d) }
.art-body { background: #fff; padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px) }
.prose { max-width: 68ch; font-size: 19px; line-height: 1.65; color: var(--char) }
.prose > * + * { margin-top: 20px }
.prose h2 { margin-top: 56px; font: 400 clamp(32px, 3.2vw, 44px)/1 var(--display); text-transform: uppercase; color: #121110 }
.prose h2, .art-head h1, .lede-h { text-wrap: balance } /* no one-word last lines (Design Officer round 2) */
.prose h3 { margin-top: 36px; font: 700 22px/1.3 var(--sans); color: #121110 }
.prose ul { list-style: disc; padding-left: 1.3em }
.prose ol { list-style: decimal; padding-left: 1.4em }
.prose li + li { margin-top: 8px }
.prose li::marker { color: var(--muted-l) }
.prose a { color: #121110; text-decoration-thickness: 1px; text-underline-offset: 3px }
.prose a:hover { text-decoration-thickness: 2px }
.prose strong { color: #121110 }
.key-point { border-left: 4px solid var(--orange); padding: 4px 0 4px 22px; font-size: 21px; font-weight: 600; line-height: 1.5; color: #121110 }
.sources { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line-l) }
.sources h2 { margin-top: 0; font: 700 15px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--char) }
.sources ol { margin-top: 18px; font-size: 15px; line-height: 1.55 }
.sources li { overflow-wrap: anywhere }

/* ---------- close: TPG's split "talk to us", with the enquiry form ---------- */
.close { padding: 110px 0 120px; border-top: 1px solid var(--line-d) }
.close-grid { display: grid; grid-template-columns: 1fr 1fr }
.close-l { padding-right: 72px; border-right: 1px solid var(--line-d) }
.close h2 { font-size: clamp(46px, 5.4vw, 88px) }
.close h2 { text-wrap: wrap } /* its accent sits on a line of its own on purpose */
.close h2 .accent { display: block; font-size: 1.22em; line-height: .95; margin: .04em 0 .2em }
.close-text { margin-top: 30px; max-width: 560px }
.big-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 34px }
.close-r { padding-left: 72px; display: flex; flex-direction: column; justify-content: center; align-items: stretch }
.close-r .big-links { margin-top: 0 }
.big-link { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; font: 600 clamp(22px, 2.3vw, 34px)/1.15 var(--sans); text-decoration: none; letter-spacing: -.01em; overflow-wrap: anywhere }
.big-link .ico { width: clamp(26px, 2.2vw, 34px); height: clamp(26px, 2.2vw, 34px); color: var(--orange) }
.big-link:hover { color: var(--orange) }

/* the form (kit fields: name, email and/or phone, message, page) */
.form-h { font: 700 15px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); margin-bottom: 22px }
.enquiry { display: grid; gap: 18px }
.field { display: grid; gap: 8px }
.field label { font-weight: 600; font-size: 16px }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 4px; border: 1.5px solid #7A7068; background: var(--night-2); color: #fff; font: 400 17px/1.4 var(--sans) }
.field textarea { min-height: 140px; resize: vertical }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--orange) }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.field-hint, .enquiry-note { font-size: 14px; line-height: 1.5; color: var(--muted-d) }
.field-hint { margin-bottom: -8px }
.field .field-hint { margin: -2px 0 2px }
.enquiry-note a { text-underline-offset: 3px }
.enquiry .btn { justify-self: start }
.field label .opt { font-weight: 400; color: var(--muted-d) }
.field input[type=date] { color-scheme: dark } /* the picker's calendar icon must show on the dark field */

/* ---------- footer ---------- */
.foot { background: #0B0A0A; padding: 90px 0 80px; font-size: 16px }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1.2fr; gap: 40px }
.foot-logo img { height: 96px; width: auto }
.foot h2 { font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px }
.foot li a, .foot li > span { display: inline-flex; align-items: center; min-height: 44px; color: #E9E1D9; text-decoration: none; font-weight: 500 }
.foot li a:hover { color: var(--orange) }
.foot li a[href^="mailto"] { overflow-wrap: anywhere }
.lnkd { display: inline-grid !important; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); margin-top: 10px }
.lnkd svg { width: 20px; height: 20px; color: #000 }
.lnkd:hover { background: #fff }
.legal { margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--line-d); font-size: 14px; color: var(--muted-d) }

/* ---------- motion that is CSS-only; all of it stops under reduced motion (below) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee var(--dur, 40s) linear infinite }
  .marquee[data-dir="right"] .marquee-track { animation-direction: reverse }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .clients.is-paused .marquee-track { animation-play-state: paused }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .steps--row { grid-template-columns: repeat(3, 1fr) }
  .why-grid { grid-template-columns: repeat(2, 1fr) }
  .foot-grid { grid-template-columns: 1fr 1fr }
  .dd { grid-template-columns: repeat(3, 1fr) }
  .nav > a, .dd-btn { padding: 0 10px }
  .head-in { gap: 20px }
  .close-l { padding-right: 48px }
  .close-r { padding-left: 48px }
  .field-pair { grid-template-columns: 1fr }
  .sec-grid--split { gap: 40px }
}

/* ---------- phone and small tablet: the hamburger, and the stack becomes ordinary stacked sections (as TPG) ---------- */
@media (max-width: 900px) {
  body { font-size: 17px }
  .nav, .head-cta { display: none }
  .head-in { height: 84px }
  .logo img { height: 52px }
  .burger { display: grid; place-items: center; margin-left: auto; width: 48px; height: 48px; background: none; border: 0; color: var(--orange); cursor: pointer; padding: 0 }
  .burger svg { width: 34px; height: 34px }
  .menu { display: block; position: fixed; inset: 0; z-index: 100; background: var(--night); overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .3s ease, visibility 0s .3s }
  .menu.open, html:not(.js) .site-head:has(.burger:focus) .menu, html:not(.js) .menu:focus-within { visibility: visible; clip-path: inset(0); transition: clip-path .3s ease }
  .menu .head-in { justify-content: space-between }
  .menu nav { padding-top: 12px; padding-bottom: 48px }
  .m-label { font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); margin: 18px 0 6px }
  .m-svc a { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--line-d); text-decoration: none; font: 400 22px/1.05 var(--display); text-transform: uppercase; padding: 6px 0 }
  .m-svc .glyph { width: 40px }
  .m-main a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line-d); text-decoration: none; font: 400 36px/1 var(--display); text-transform: uppercase }
  .menu [aria-current] { color: var(--orange) }
  .menu .btn { margin-top: 30px }
  .m-tel { display: flex; width: max-content; gap: 10px; align-items: center; margin-top: 22px; min-height: 44px; font-weight: 700; font-size: 20px; text-decoration: none }
  .m-tel .ico { width: 20px; height: 20px; color: var(--orange) }
  .x { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer }
  .x svg { width: 30px; height: 30px }

  .hero { align-items: flex-end }
  .hero-media { inset: -4% 0 44% 0 }
  .hero-in { padding-top: 220px; padding-bottom: 64px }
  .hero::before { background:
    linear-gradient(180deg, rgba(18, 17, 16, .88) 0, rgba(18, 17, 16, .8) 100px, rgba(18, 17, 16, 0) 200px),
    radial-gradient(70% 30% at 85% 6%, rgba(245, 125, 32, .24), transparent 70%),
    linear-gradient(180deg, rgba(18, 17, 16, .45) 0%, rgba(18, 17, 16, .45) 18%, rgba(18, 17, 16, .9) 32%, var(--night) 44%) }
  .hero--home, .hero--page, .page-contact .hero--page { min-height: 0 }
  .hero--home .hero-in { padding-top: 300px }
  .hero--page .hero-in { padding-top: 260px }
  .hero--plain .hero-in { padding-top: 132px; padding-bottom: 56px }
  .hero--plain::before { background: radial-gradient(70% 40% at 90% 0%, rgba(245, 125, 32, .24), transparent 70%) }
  .hero .eyebrow { font-size: 13px; padding-bottom: 18px }
  .hero .rule { margin-bottom: 26px }
  .hero h1 { font-size: clamp(42px, 12vw, 64px) }
  .hero-text { font-size: 18px; margin-top: 24px }
  .hero .btn { margin-top: 28px }
  .hero-ctrl { top: 96px; bottom: auto }
  .crumbs { font-size: 13px }

  .intro { padding: 16px 0 80px }
  .intro .rule { margin-bottom: 36px }
  .intro-grid, .svc-head-grid, .upd-head { grid-template-columns: 1fr; gap: 28px }
  .intro-grid .btn, .upd-head .btn { justify-self: start }
  .svc-head { padding-bottom: 40px }

  .panel { position: relative; top: auto; min-height: 0; box-shadow: none; border-top: 1px solid var(--line) }
  .strip { display: none }
  .panel-media { position: relative; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden }
  .panel-media picture { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; will-change: transform }
  .panel-media::after { background: linear-gradient(0deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 40%, transparent) 34%, transparent 64%) !important }
  .panel-body { min-height: 0; padding-top: 0; padding-bottom: 72px; margin-top: -56px; opacity: 1 }
  .panel-title { gap: 14px; align-items: flex-start; flex-direction: column }
  .panel-title .glyph { width: 64px; padding: 6px 8px; box-sizing: content-box; border-radius: 6px; background: var(--ground) }
  .panel .lead { font-size: 17px }
  .panel h3.quiet { font-size: clamp(30px, 8.4vw, 40px) }

  .how { padding: 100px 0 96px }
  .how-sub { margin-top: 60px }
  .steps--row { grid-template-columns: 1fr; gap: 10px }
  .steps li { padding: 18px 70px 20px 18px }
  .steps--row li { min-height: 0; flex-direction: row; align-items: center; gap: 18px }
  .steps li::before { font-size: 44px; flex: none }
  .steps--row span { margin-top: 0; font-size: 17px }
  .steps--row .glyph { top: 50%; transform: translateY(-50%); width: 40px }
  .orbit { width: 760px; height: 760px; margin-left: -380px; top: auto; bottom: -520px }
  .how-foot::before { width: 760px; height: 760px; margin-left: -380px; top: auto; bottom: -420px }

  .why { padding-top: 96px }
  .why-grid { margin-top: 48px; gap: 34px }
  .clients { padding: 80px 0 90px }
  .updates { padding: 96px 0 90px }
  .track { gap: 16px; margin-top: 48px }
  .post { padding: 24px }
  .posts--masonry { grid-template-columns: 1fr; padding-bottom: 0; row-gap: 24px }
  .posts--masonry .is-right { transform: none }
  .posts--masonry .post { aspect-ratio: 3 / 3.6 }

  .sec-grid--split { grid-template-columns: 1fr; gap: 24px }
  .sec-grid--split .sec-head { position: static }
  .sec-grid:not(.sec-grid--split):not(.sec-grid--doc):not(.sec-grid--photo):not(.sec-grid--reels) .sec-head { grid-template-columns: 1fr; margin-bottom: 32px }
  .band--photo { padding-top: 0 }
  .band-media { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 8px }
  .band-media::after { background: linear-gradient(0deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 40%, transparent) 30%, transparent 60%) }
  .sec-grid--photo { max-width: none }
  .rows--cols { columns: 1 }
  .rel-row { gap: 16px; padding: 20px 0 }
  .rel-row .glyph { width: 46px }
  .art-head { padding: 124px 0 56px }

  .close { padding: 90px 0 96px }
  .close-grid { grid-template-columns: 1fr }
  .close-l { padding-right: 0; border-right: 0; padding-bottom: 48px; border-bottom: 1px solid var(--line-d) }
  .close-r { padding-left: 0; padding-top: 40px }
  .foot { padding: 70px 0 96px }
  .legal { margin-top: 48px }
}
@media (max-width: 900px) {
  .gallery { gap: 20px 14px }
  .gallery figcaption { font-size: 13px }
  .sec-grid--reels { grid-template-columns: 1fr }
  .reels { justify-items: start }
  .reels-row { max-width: 520px }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr }
  .gallery img { aspect-ratio: 1 }
  .wa-float { width: 54px; height: 54px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)) }
  .wa-float .wa-ico { width: 28px; height: 28px }
}
@media (max-width: 600px) {
  .why-grid, .foot-grid { grid-template-columns: 1fr }
  .big-link { font-size: 21px; gap: 12px }
  .filter { margin-bottom: 36px }
  .prose { font-size: 18px }
}
/* desktops too short for seven stacked strips: ordinary sections, as on phones */
@media (max-height: 700px) and (min-width: 901px) {
  .panel { position: relative; top: auto; min-height: 0 }
  .strip { display: none }
  .panel-body { min-height: 0; padding-top: 96px; padding-bottom: 96px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .hero-media, .panel-media, .panel-media picture { transform: none !important }
  /* still logos: both rows wrap and sit still, and the loop copies go */
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; margin-inline: auto !important; padding-inline: var(--pad) }
  .tile[aria-hidden="true"] { display: none }
}