/* Branding: the page opens on a scattered field of square pixels; scrolling builds a brand mark from it. */

.hd-nav a[aria-current] { color: var(--fg); }
.crumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.crumb a { color: var(--fg-2); text-decoration: none; }
.crumb a:hover { color: var(--fg); }

.pg-h { font: 900 clamp(3rem, 6.4vw, 6.6rem)/.92 var(--f-display); letter-spacing: -0.04em; margin-left: -0.03em; max-width: 11ch; text-wrap: balance; }
.pg-lede { max-width: 50ch; margin-top: 28px; color: var(--fg-2); font-size: var(--t-s); }
.bx .actions { margin-top: 34px; }

/* THE BUILD (still by default: copy, then four panels) */
.bx { position: relative; }
.bx-stage { position: relative; padding-top: calc(var(--hd) + 48px); padding-bottom: clamp(64px, 10vh, 120px); }
.bx-canvas, .bx-crisp, .bx-tag, .bx-hint { display: none; }
.bx-fact { margin-top: clamp(72px, 12vh, 140px); max-width: 720px; }
.bx-fact-h { font: 700 var(--t-xl)/1.06 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch; }
.bx-steps { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.bx-steps li { display: flex; align-items: center; gap: 10px; transition: color .4s var(--ease); }
.bx-steps li::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--fg-3); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.bx-steps li.on { color: var(--fg); }
.bx-steps li.on::before { background: var(--accent); border-color: var(--accent); }
.bx-steps li.done::before { background: var(--fg-3); }
.bx-still { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.bx-still figure { background: var(--ink-1); border: 1px solid var(--rule-soft); }
.bx-still canvas { display: block; width: 100%; aspect-ratio: 4 / 3; }
.bx-still figcaption { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--rule-soft); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.bx-still figcaption::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
@media (min-width: 1024px) { .bx-still { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* GL: pinned for four screens, the copy swaps from the hero to the challenge, the mark builds on the right */
.gl .bx { height: 460vh; }
.gl .bx-stage { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; padding: 0; }
.gl .bx-canvas { display: block; position: absolute; inset: 0; }
.gl .bx-canvas canvas { display: block; width: 100%; height: 100%; }
.gl .bx-crisp { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.gl .bx-tag { display: block; position: absolute; opacity: 0; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 7px 9px; border: 1px solid var(--rule); transition: opacity .5s var(--ease); }
.gl .bx-tag.on { opacity: 1; }
.gl .bx-copy { position: relative; height: 100%; pointer-events: none; }
.gl .bx-copy > * { pointer-events: auto; }
.gl .bx-hero, .gl .bx-fact { position: absolute; left: var(--pad); width: min(44%, 600px); top: 50%; transform: translateY(-50%); margin: 0; will-change: opacity, transform; }
.gl .bx-hero { top: calc(50% + var(--hd) / 2); }
.gl .bx-fact { width: min(38%, 520px); opacity: 0; visibility: hidden; }
.gl .bx-hint { display: flex; align-items: center; gap: 12px; margin-top: 40px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.gl .bx-hint i { width: 8px; height: 8px; background: var(--accent); animation: hintStep 1.04s steps(1) infinite; }
@keyframes hintStep { 50% { transform: translateY(8px); } }
.gl .bx-still { display: none; }

/* SECTIONS */
.pg-sec { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.pg-h2 { font: 700 var(--t-2xl)/1 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; }
.pg-para { color: var(--fg-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; max-width: 62ch; }
.pg-split { display: grid; gap: 28px 64px; }
@media (min-width: 900px) { .pg-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

.ruled { margin-top: clamp(40px, 6vh, 64px); }
.ruled li { display: grid; gap: 12px 64px; padding-block: 30px; border-top: 1px solid var(--rule-soft); }
.ruled li:last-child { border-bottom: 1px solid var(--rule-soft); }
.ruled h3 { display: flex; align-items: baseline; gap: 16px; font: 700 var(--t-l)/1.1 var(--f-display); letter-spacing: -0.015em; }
.ruled h3::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--fg-3); transform: translateY(-3px); transition: background-color .4s var(--ease); }
.ruled li:hover h3::before { background: var(--accent); }
.ruled p { color: var(--fg-2); max-width: 60ch; }
@media (min-width: 900px) { .ruled li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.pg-paper { position: relative; isolation: isolate; background: var(--paper); color: var(--paper-ink); overflow: hidden; }
.pg-paper-img { position: absolute; inset: 0 0 0 42%; z-index: -1; background: var(--plate) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.pg-paper-in { padding-block: clamp(96px, 16vh, 180px); }
.pg-paper-in > * { max-width: 560px; }
.pg-paper .pg-para { color: var(--paper-ink-2); margin-top: 26px; }
.pg-cap { position: absolute; right: var(--pad); bottom: 22px; font: 400 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-2); background: var(--paper); padding: 6px 8px; }

.steps { display: grid; gap: 40px 28px; margin-top: clamp(40px, 6vh, 64px); }
.steps li { position: relative; padding-top: 30px; border-top: 1px solid var(--rule); }
.steps li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--accent); }
.steps li:not(:first-child)::before { background: var(--ink-0); outline: 1.5px solid var(--fg-3); outline-offset: -1.5px; }
.steps h3 { font: 700 var(--t-l)/1.1 var(--f-display); letter-spacing: -0.015em; }
.steps p { color: var(--fg-2); margin-top: 14px; font-size: 1rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pg-faq { display: grid; gap: 36px 64px; }
@media (min-width: 900px) { .pg-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.faq details { border-top: 1px solid var(--rule-soft); }
.faq details:last-child { border-bottom: 1px solid var(--rule-soft); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding-block: 18px; font: 600 var(--t-m)/1.3 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--fg), var(--fg)) center / 100% 2px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 2px 100% no-repeat; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: transparent; }
.faq details[open] summary { color: var(--fg); }
.faq summary:hover { color: var(--fg); }
.faq details p { color: var(--fg-2); max-width: 62ch; padding-bottom: 24px; }

.closing-stage { min-height: 88svh; }
.close-alt { display: flex; gap: 8px 32px; flex-wrap: wrap; }
.close-alt .link { margin-top: 18px; }

.pg-next { padding-block: 56px; border-top: 1px solid var(--rule-soft); }
.pg-next-h { font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 18px; }
.pg-next ul { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .pg-next ul { grid-template-columns: repeat(3, 1fr); } }
.pg-next a { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-top: 1px solid var(--rule-soft); font: 700 var(--t-m)/1.2 var(--f-display); text-decoration: none; }
.pg-next a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--ease); }
.pg-next a:hover::after { transform: translateX(5px) rotate(45deg); }

@media (max-width: 767px) {
  .pg-h { font-size: clamp(2.6rem, 12.4vw, 3.4rem); }
  .bx-still { grid-template-columns: minmax(0, 1fr); }
  .pg-paper-img { inset: auto 0 0 0; height: 46%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
  .pg-paper-in { padding-bottom: 62%; }
  .faq summary { font-size: 1.125rem; }
}
.no-gl .bx-steps { display: none; }
.bx-sample { margin-left: auto; padding: 5px 7px; border: 1px solid var(--rule); color: var(--fg-3); }

/* Hero banner (plates2): the page's own idea object sits right of the headline; the signature still draws on top */
.bx-stage { isolation: isolate; }
.hb-plate { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .8) 30%, oklch(0.135 0.006 358 / .1) 60%, oklch(0.135 0.006 358 / 0) 100%),
              linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / 0) 34%),
              var(--hb) var(--hb-x, 70%) center / cover no-repeat; }
@media (max-width: 767px) {
  .hb-plate { bottom: auto; height: var(--hb-h, 60svh);
    background: linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .5) 30%, oklch(0.135 0.006 358 / 0) 60%),
                var(--hb-s) var(--hb-sx, 70%) var(--hb-sy, center) / var(--hb-sz, cover) no-repeat; }
}
/* phone: the copy starts below the banner's idea object, as on the Solutions pages */
@media (max-width: 767px) { .bx-stage { padding-top: 40svh; } }

/* ---------- White space (Ramy, 16 Oct 2026): the paper rhythm ----------
   .paper (../../c/css/plates.css) flips the role tokens to the brand kit's Mist/white ground with near-black ink.
   The rules below keep anything drawn for the dark world readable when it sits on paper. */
.paper .btn { color: oklch(0.99 0 0); }
.paper .pk { color: var(--accent-deep); }
.paper .link { color: var(--fg); }
/* ---------- Chapters (wave 3): rail + assembling plates. Same block in every page of this set. ---------- */
.chx { display: none; }
@media (min-width: 1024px) {
  .chx { display: block; position: fixed; right: 18px; top: 50%; z-index: 40; transform: translateY(-50%); }
  .chx ol { display: grid; gap: 4px; }
  .chx a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 26px; padding: 0 6px; text-decoration: none; }
  .chx i { flex: none; width: 7px; height: 7px; background: oklch(0.965 0.005 358 / .38); transition: background-color .4s var(--ease), transform .5s var(--ease); }
  .chx span { position: absolute; right: 26px; white-space: nowrap; padding: 6px 8px; font: 400 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
    color: var(--fg); background: var(--ink-0); opacity: 0; transform: translateX(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
  .chx a.on i { background: var(--accent); transform: scale(1.43); }
  .chx:hover span, .chx a:focus-visible span { opacity: 1; transform: none; }
  .chx a:hover i { background: var(--fg); }
  .chx a.on:hover i { background: var(--accent); }
  .chx.is-ink i { background: oklch(0.17 0.006 358 / .34); }
  .chx.is-ink a:hover i { background: oklch(0.17 0.006 358); }
  .chx.is-ink a.on i { background: var(--accent); }
  .chx.is-ink span { color: oklch(0.17 0.006 358); background: oklch(0.975 0.003 358); }
}

/* a chapter plate: the photograph as a CSS background; on desktop WebGL takes over and assembles it from square cells */
.chp { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--src) var(--px, 50%) var(--py, 50%) / cover no-repeat; }
.chp.is-gl { background-image: none; }
.chp-gl, .chp-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 767px) {
  .chp { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; background-image: var(--src-s, var(--src)); background-position: var(--sx, var(--px, 50%)) var(--sy, var(--py, 50%)); }
}

/* ---------- Branding chapters (wave 3) ---------- */
/* What You Get: the swatch fan beside the deliverables */
.bx-get-grid { display: grid; gap: 40px 72px; }
@media (min-width: 1000px) { .bx-get-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .bx-get-side { position: sticky; top: calc(var(--hd) + 40px); } }
.bx-ruled { margin-top: 0; }
@media (min-width: 900px) { .bx-ruled li { grid-template-columns: minmax(0, 1fr); } }
.bx-ruled li { cursor: default; }
.bx-ruled li.on h3::before { background: var(--accent); }
.fan { position: relative; width: min(100%, 440px); aspect-ratio: 11 / 9; margin-top: clamp(32px, 6vh, 56px); }
.fan-blade { position: absolute; left: 6%; bottom: 14%; width: 82%; height: 19%; transform-origin: 9% 50%;
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6% 0 17%;
  background: oklch(0.995 0.002 358); border: 1px solid var(--rule); color: var(--fg);
  transform: rotate(calc(var(--a, 0) * 1deg)) translateX(calc(var(--x, 0) * 1px));
  transition: transform 1.1s var(--ease), background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.fan-blade span { font: 400 .75rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.fan-blade i { flex: none; width: 14px; height: 14px; border: 1.5px solid currentColor; }
.fan-blade::before { content: ""; position: absolute; left: 6.5%; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--rule); }
.fan-pin { position: absolute; left: calc(6% + 82% * .09 - 6px); bottom: calc(14% + 19% / 2 - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--fg); }
/* fanned (the still, and where the live fan rests): -54 to -6 degrees */
.fan-blade[data-blade="0"] { --a: -62; z-index: 1; } .fan-blade[data-blade="1"] { --a: -43; z-index: 2; }
.fan-blade[data-blade="2"] { --a: -24; z-index: 3; } .fan-blade[data-blade="3"] { --a: -6; z-index: 4; }
/* live: closed into one stack until the chapter arrives, then it opens */
.fan.fan-live:not(.is-open) .fan-blade { --a: -6; }
.fan-blade.on { z-index: 5; background: var(--accent); border-color: var(--accent); color: oklch(0.99 0 0); --x: 18; }
.fan-blade.on i { background: currentColor; }

/* Before Design: the mould plate, the copy in its empty right side */
.bx-dec { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; align-items: center; background: var(--ink-0); }
.bx-dec-in { position: relative; width: 100%; padding-block: clamp(110px, 16vh, 180px); }
.bx-dec-in > * { max-width: min(38vw, 560px); margin-left: auto; }
.bx-dec .chp { right: 40%; -webkit-mask-image: linear-gradient(270deg, transparent, #000 16%); mask-image: linear-gradient(270deg, transparent, #000 16%); }
.bx-dec .pg-para { margin-top: 22px; font-size: 1.0625rem; }
.bx-dec .eyebrow { justify-content: flex-start; }

@media (max-width: 767px) {
  .fan { width: 100%; }
  .fan-blade span { font-size: .625rem; letter-spacing: .08em; }
  .bx-dec { display: block; min-height: 0; }
  .bx-dec-in { padding-block: 40px 88px; }
  .bx-dec-in > * { max-width: none; margin-left: 0; }
  .bx-dec .chp { right: auto; -webkit-mask-image: none; mask-image: none; }
  .pg-paper-img { background-image: var(--plate-s, var(--plate)); background-position: 70% center; }
}

/* polish: 44px tap targets on touch for the small text links, without moving the layout */
@media (pointer: coarse) {
  .crumb a, .ft a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}