/* Site-level components on top of brand.css */

/* ---------- odometer ---------- */
[data-odo] { display: inline-flex; line-height: 1; }
/* R8: the mask is vertical only. Display digits are wider than their tight-tracked advance, so a box clip cut the
   right side of 0, 5 and + ; clip-path with negative side insets lets a glyph overlap its neighbour and still hides
   the strip above and below the cell while it rolls. */
.odo-cell { user-select: none; -webkit-user-select: none; position: relative; display: inline-block; height: 1.1em; overflow: visible; clip-path: inset(0 -.35em); line-height: 1.1; }
.odo-ghost { visibility: hidden; }
.odo-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; text-align: center; }
.odo-strip > span { height: 1.1em; display: block; }

/* ---------- scroll-lit words ---------- */
.lit-w { color: rgba(20,18,16,.16); transition: color .5s var(--ease-out); }
.lit-w.on { color: var(--ink); }
.on-dark .lit-w { color: rgba(246,243,236,.18); }
.on-dark .lit-w.on { color: var(--paper); }

/* ---------- glow card ---------- */
[data-glow] { position: relative; isolation: isolate; }
[data-glow]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .5s var(--ease-out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--a0, var(--apricot)) 38%, transparent), transparent 60%); }
/* R8: the cursor glow says "click me", so it only lights on a real link or button (on articles, list items and figures it was a false affordance) */
@media (hover:hover) and (pointer:fine) { :is(a, button)[data-glow]:hover::before { opacity: 1; } }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 60; }
.hdr-bar { position: relative; z-index: 2; margin: 12px auto 0; max-width: 1280px; padding: 0 16px; }
.hdr-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 10px 0 18px; border-radius: 20px; background: rgba(251,249,244,.0); border: 1px solid transparent;
  transition: background-color .5s var(--ease-spring), border-color .5s var(--ease-spring), box-shadow .5s var(--ease-spring), border-radius .5s var(--ease-spring); }
.hdr[data-scrolled] .hdr-inner, html[data-mega-open] .hdr-inner { background: rgba(251,249,244,.86); border-color: var(--line); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 12px 40px -24px rgba(20,18,16,.25); }
html[data-mega-open] .hdr-inner { border-radius: 20px 20px 0 0; border-bottom-color: transparent; box-shadow: none; }
.hdr-logo { display: inline-flex; color: var(--ink); }
.hdr-logo svg { height: 21px; width: auto; }
.hdr-nav { position: relative; display: flex; align-items: center; gap: 2px; }
.hdr-trig { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); background: none; border: 0; cursor: pointer; transition: color .3s var(--ease-spring); }
.hdr-trig:hover, .hdr-trig[aria-expanded="true"] { color: var(--ink); }
.hdr-trig svg { width: 10px; height: 10px; transition: transform .45s var(--ease-spring); }
.hdr-trig[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr-pill { position: absolute; left: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: 999px; background: rgba(20,18,16,.06); opacity: 0; transform-origin: center; pointer-events: none;
  transition: transform .45s var(--ease-spring), width .45s var(--ease-spring), opacity .25s; }
.hdr-pill[data-on] { opacity: 1; }
.hdr-link { height: 40px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }

/* sheet */
.mega-sheet { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.mega-clip { height: 0; overflow: hidden; border-radius: 0 0 24px 24px; background: rgba(251,249,244,.96); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid transparent; border-top: 0;
  transition: height .55s var(--ease-spring), border-color .3s; box-shadow: 0 40px 80px -40px rgba(20,18,16,.35); }
html[data-mega-open] .mega-clip { border-color: var(--line); }
.mega-panel { position: absolute; left: 16px; right: 16px; top: 0; padding: 8px 28px 28px; }
.mega-panel[hidden] { display: block !important; visibility: hidden; }
.mega-panel .mp-item { opacity: 0; transform: translateX(calc(var(--dir, 0) * 14px)) translateY(calc((1 - var(--dir, 0) * var(--dir, 0)) * 8px)); filter: blur(3px);
  transition: opacity .35s var(--ease-out), transform .55s var(--ease-spring), filter .35s var(--ease-out); transition-delay: calc(40ms + var(--i, 0) * 26ms); }
.mega-panel[data-on] .mp-item { opacity: 1; transform: none; filter: none; }
.mega-panel[data-leaving] .mp-item { opacity: 0; transform: translateX(calc(var(--dir, -1) * 8px)); filter: blur(2px); transition-duration: .14s; transition-delay: 0s; }
.mega-panel[data-on] { visibility: visible; }
.mega-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(20,18,16,.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out); }
html[data-mega-open] .mega-scrim { opacity: 1; pointer-events: auto; }

.mp-col-title { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 0 12px 10px; }
.mp-link { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 2px 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); transition: background-color .3s var(--ease-spring); }
.mp-link:hover, .mp-link:focus-visible { background: rgba(20,18,16,.045); outline: none; }
.mp-link .mp-dot { grid-row: span 2; width: 8px; height: 8px; margin-top: 7px; border-radius: 99px; background: linear-gradient(135deg, var(--a0), var(--a1)); transform: scale(.6); opacity: .55; transition: transform .45s var(--ease-spring), opacity .3s; }
.mp-link:hover .mp-dot, .mp-link:focus-visible .mp-dot { transform: scale(1.25); opacity: 1; }
.mp-link b { font-weight: 550; font-size: 15px; letter-spacing: -.005em; }
.mp-link span.d { font-size: 13.5px; color: var(--mute); }

.mp-feature { position: relative; border-radius: 22px; overflow: hidden; min-height: 300px; height: 100%; isolation: isolate; color: #fff; text-decoration: none; display: block; }
.mp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-out); }
.mp-slide[data-on] { opacity: 1; }
.mp-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease-out); }
.mp-slide[data-on] img { transform: scale(1); }
.mp-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(20,18,16,.72)); }
.mp-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.mp-cap p { font-family: var(--font-display); font-size: 22px; line-height: 1.12; letter-spacing: -.015em; }
.mp-cap span { display: inline-flex; margin-top: 10px; font-size: 13px; font-weight: 500; opacity: .85; }

/* burger */
.burger { width: 44px; height: 44px; border-radius: 999px; display: none; place-items: center; background: none; border: 0; cursor: pointer; color: var(--ink); }
.burger i { position: absolute; width: 20px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .5s var(--ease-spring), width .5s var(--ease-spring); }
.burger i:first-child { transform: translateY(-4px); } .burger i:last-child { transform: translateY(4px); }
html[data-msheet-open] .burger i:first-child { transform: rotate(45deg); width: 18px; }
html[data-msheet-open] .burger i:last-child { transform: rotate(-45deg); width: 18px; }
.burger > span { position: relative; width: 20px; height: 20px; display: grid; place-items: center; }

.msheet { position: fixed; inset: 0; z-index: 55; background: var(--paper); padding: 92px 20px 28px; overflow-y: auto; clip-path: inset(0 0 100% 0 round 0 0 28px 28px); transition: clip-path .6s var(--ease-spring); }
html[data-msheet-open] .msheet { clip-path: inset(0 0 0 0 round 0); }
.msheet .ms-i { opacity: 0; transform: translateY(12px); filter: blur(3px); transition: opacity .4s var(--ease-out), transform .55s var(--ease-spring), filter .4s; transition-delay: calc(80ms + var(--i, 0) * 40ms); }
html[data-msheet-open] .msheet .ms-i { opacity: 1; transform: none; filter: none; }
.mgroup-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-spring); }
.mgroup-body > div { overflow: hidden; }
[data-mgroup][data-open] .mgroup-body { grid-template-rows: 1fr; }
[data-mgroup] > button svg { transition: transform .45s var(--ease-spring); }
[data-mgroup][data-open] > button svg { transform: rotate(45deg); }

@media (max-width: 1023px) {
  .hdr-nav, .hdr-desk { display: none !important; }
  .burger { display: inline-grid; }
  .mega-sheet, .mega-scrim { display: none; }
}

/* ---------- accordion ---------- */
[data-acc-item] .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-spring); }
[data-acc-item] .acc-body > div { overflow: hidden; }
[data-acc-item] .acc-body p { opacity: 0; filter: blur(4px); transform: translateY(-4px); transition: opacity .4s var(--ease-out), filter .4s, transform .5s var(--ease-spring); }
[data-acc-item][data-open] .acc-body { grid-template-rows: 1fr; }
[data-acc-item][data-open] .acc-body p { opacity: 1; filter: none; transform: none; transition-delay: .08s; }
[data-acc-item] .acc-ic { transition: transform .5s var(--ease-spring), background-color .3s; }
[data-acc-item][data-open] .acc-ic { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
[data-acc-item] > button { transition: color .3s; }

/* ---------- tabs ---------- */
[data-tabs] { position: relative; }
[data-tab-pill] { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--ink); transition: transform .5s var(--ease-spring), width .5s var(--ease-spring); }
[data-tab] { position: relative; z-index: 1; transition: color .35s var(--ease-spring); }
[data-tab][aria-selected="true"] { color: var(--paper); }
[data-pane-of] { display: none; }
[data-pane-of][data-on] { display: block; animation: pane-in .6s var(--ease-out); }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- progress line ---------- */
[data-progress-bar] { transform-origin: top; transform: scaleY(0); }
[data-progress-step] .ps-dot { transition: background-color .4s var(--ease-spring), transform .5s var(--ease-spring), box-shadow .4s; }
[data-progress-step][data-on] .ps-dot { background: var(--ink); transform: scale(1.15); box-shadow: 0 0 0 6px rgba(20,18,16,.08); }
[data-progress-step] .ps-body { opacity: .4; transition: opacity .6s var(--ease-out); }
[data-progress-step][data-on] .ps-body { opacity: 1; }

/* ---------- hero brief builder ---------- */
.brief-sentence { font-family: var(--font-display); font-weight: 350; letter-spacing: -.02em; line-height: 1.32; font-size: clamp(26px, 3.1vw, 44px); color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 50; }
.chip { position: relative; display: inline-flex; align-items: center; gap: .28em; vertical-align: baseline; padding: .02em .42em .06em .5em; margin: 0 .04em; border-radius: 999px; background: rgba(255,255,255,.62); border: 1px solid rgba(20,18,16,.12); color: var(--ink); font: inherit; font-style: italic; cursor: pointer; line-height: 1.18;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px -16px rgba(20,18,16,.4);
  transition: background-color .35s var(--ease-spring), border-color .35s var(--ease-spring), transform .1s ease-out, box-shadow .35s var(--ease-spring); }
.chip:hover { background: #fff; border-color: rgba(20,18,16,.25); }
.chip:active { transform: scale(.97); }
.chip[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chip-w { position: relative; display: inline-grid; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.chip-w > span { grid-area: 1/1; white-space: nowrap; }
.chip-old { animation: chip-out .5s var(--ease-out) forwards; }
.chip-in { animation: chip-in .6s var(--ease-out); }
@keyframes chip-out { to { transform: translateY(-105%); opacity: 0; } }
@keyframes chip-in { from { transform: translateY(105%); opacity: 0; } }
.chip svg { width: .42em; height: .42em; opacity: .55; transition: transform .45s var(--ease-spring); flex: none; margin-top: .08em; }
.chip[aria-expanded="true"] svg { transform: rotate(180deg); opacity: .9; }
.chip.ping { animation: ping 0.9s var(--ease-out); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(20,18,16,.25); } 100% { box-shadow: 0 0 0 14px rgba(20,18,16,0); } }

.brief-pop { position: fixed; z-index: 90; min-width: 260px; max-width: min(340px, calc(100vw - 24px)); max-height: min(420px, 60vh); overflow-y: auto; padding: 8px; border-radius: 20px; background: rgba(251,249,244,.97); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(20,18,16,.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: scale(.94) translateY(-4px); filter: blur(4px); transition: opacity .2s var(--ease-out), transform .45s var(--ease-spring), filter .25s; font-family: var(--font-ui); }
.brief-pop[data-on] { opacity: 1; transform: none; filter: none; }
.bp-title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 8px 10px 6px; }
.bp-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; outline: none;
  opacity: 0; transform: translateY(6px); transition: background-color .25s var(--ease-spring), opacity .3s var(--ease-out), transform .45s var(--ease-spring); transition-delay: 0s, calc(var(--i) * 18ms), calc(var(--i) * 18ms); }
.brief-pop[data-on] .bp-opt { opacity: 1; transform: none; }
.bp-opt:focus, .bp-opt:hover { background: rgba(20,18,16,.06); }
.bp-opt[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.bp-av { width: 18px; height: 18px; }
.bp-l { flex: 1; }
.bp-n { font-size: 12.5px; color: var(--mute); }
.bp-opt[aria-selected="true"] .bp-n { color: rgba(246,243,236,.6); }

.swap-out { opacity: 0; transform: translateY(-6px); filter: blur(3px); transition: opacity .2s, transform .25s, filter .2s; }
.swap-in { opacity: 0; transform: translateY(6px); filter: blur(3px); transition: none; }
[data-brief-sub] { transition: opacity .45s var(--ease-out), transform .55s var(--ease-spring), filter .45s; }

.bstack { position: relative; display: grid; gap: 10px; }
.bstack-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 22px; background: rgba(251,249,244,.9); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 20px 40px -26px rgba(20,18,16,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .45s var(--ease-out), transform .7s var(--ease-spring), filter .45s; }
.bstack-card.out { opacity: 0; transform: translateX(-24px) scale(.97); filter: blur(4px); }
.bstack-card.pre { opacity: 0; transform: translateX(28px) scale(.97); filter: blur(4px); transition: none; }
.bsc-ph { position: relative; width: 64px; height: 78px; overflow: hidden; isolation: isolate; }
.bsc-ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.bsc-aura { position: absolute; inset: 0; z-index: 0; }
.bsc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bsc-top b { font-weight: 600; font-size: 15px; }
.bsc-match { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.bsc-role { font-size: 13px; color: var(--mute); margin-top: 2px; }
.bsc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.bsc-tags span { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: rgba(20,18,16,.06); color: var(--ink-2); }
[data-brief-shuffle] svg { transition: transform .7s var(--ease-spring); }
[data-brief-shuffle].spin svg { transform: rotate(360deg); }

/* a headline is only shown once site.js has split it into line masks: the first paint can happen mid-parse,
   before site.js runs, and would otherwise show the headline whole, then hide it and rise it (a double reveal).
   html.pgt-js comes from the inline head snippet; the 2.5 s unhide is a failsafe if site.js never runs. */
html.pgt-js [data-lines]:not([data-split]) { visibility: hidden; animation: pgt-unhide 0s linear 2.5s forwards; }
@keyframes pgt-unhide { to { visibility: visible; } }
/* headlines below the fold wait for their own reveal */
[data-lines]:not(.in) .ln > span { transform: translateY(110%) rotate(1.5deg); }
/* cards that both reveal and react to hover keep both transitions */
.hover-card[data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out), box-shadow .5s var(--ease-spring); transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms; }
:is(a, button).hover-card[data-reveal].in:active { transform: scale(.99); transition-duration: .1s; transition-delay: 0ms; }

html[data-msheet-open] .hdr .btn-ink { opacity: 0; pointer-events: none; }

/* odometer: the rolling digit strips never end up in a text selection or a copy */
[data-odo-value] .odo-cell, [data-odo-value] .odo-strip { user-select: none; -webkit-user-select: none; }

.odo-sym::before, .odo-ghost::before, .odo-strip > span::before { content: attr(data-d); }
.odo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }