/* touchpoints (client tokens only; device and platform chrome neutral) */

/* ---------- display ads: 4:5 · 16:9 · 16:9 / 16:9 · 16:9 · 4:5 ---------- */
.tp-adgrid{ --rowh:min((var(--vw) - var(--fl) - 33px - 36px) / 4.356, 300px);   /* two rows fill the frame: 4:5 + 16:9 + 16:9 = 4.356 heights wide */
  display:flex; flex-wrap:wrap; gap:16px; align-content:center; justify-content:center; }
.tp-ad{ height:var(--rowh); flex:none; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.1), 0 10px 24px -14px rgba(0,0,0,.3); }
.tp-ad.r45{ aspect-ratio:4 / 5; } .tp-ad.r169{ aspect-ratio:16 / 9; }

/* ---------- IAB units at real proportions, scaled to fit ---------- */
.tp-iab{ display:grid; place-items:center; }
.tp-iab-board{ width:808px; display:grid; grid-template-columns:300px 160px 300px; grid-template-rows:auto 250px 250px; gap:24px;
  transform:scale(var(--iabs, 1)); transform-origin:50% 50%; }
.tp-unit{ margin:0; display:flex; flex-direction:column; gap:8px; }
.tp-unit-art{ overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 8px 20px -12px rgba(0,0,0,.35); }
.tp-unit figcaption{ font:500 12px/1 var(--c-body); opacity:.65; }
.tp-leaderboard{ grid-column:1 / -1; justify-self:center; width:728px; }
.tp-mpu{ grid-column:1; grid-row:2; } .tp-mpu2{ grid-row:3; }
.tp-sky{ grid-column:2; grid-row:2 / span 2; } .tp-half{ grid-column:3; grid-row:2 / span 2; }

/* ---------- website ---------- */
.tp-web{ display:grid; place-items:center; }
.tp-browser{ width:100%; max-height:100%; aspect-ratio:16 / 10.4; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); display:flex; flex-direction:column; }
.tp-bar{ height:34px; flex:none; display:flex; align-items:center; gap:14px; padding:0 14px; background:#f2f2f4; border-bottom:1px solid #e3e3e7; }
.tp-url{ flex:1; max-width:340px; margin:0 auto; height:22px; border-radius:6px; background:#fff; font:500 11px/22px -apple-system, "Helvetica Neue", Arial, sans-serif; color:#555; text-align:center; }
.tp-browser-screen{ flex:1; overflow:hidden; container-type:inline-size; }
.tp-phone{ height:100%; max-height:572px; aspect-ratio:280 / 572; border-radius:46px; background:#0d0d0f; padding:10px; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); }
.tp-phone-screen{ height:100%; border-radius:37px; overflow:hidden; container-type:inline-size; background:var(--c-background); }
.ws{ font-family:var(--c-body); color:var(--c-text); background:var(--c-background); }
.ws-nav{ display:flex; align-items:center; gap:3cqw; height:6cqw; padding:0 4cqw; }
.ws-nav .ad-brand{ font-size:1.9cqw; gap:.7cqw; } .ws-nav .ad-sym{ width:2.3cqw; height:2.3cqw; }
.ws-links{ display:flex; gap:2.6cqw; margin-left:auto; font:500 1.2cqw/1 var(--c-body); }
.ws-cta{ display:inline-flex; align-items:center; padding:.9cqw 1.6cqw; border-radius:999px; background:var(--c-brand-1); color:var(--c-on-brand-1); font:600 1.15cqw/1 var(--c-body); }
.ws-hero{ position:relative; height:34cqw; margin:0 2cqw; border-radius:1.6cqw; overflow:hidden; }
.ws-hero .ph{ position:absolute; inset:0; }
.ws-hero-copy{ position:absolute; left:4cqw; bottom:4cqw; color:var(--c-on-photo); display:flex; flex-direction:column; align-items:flex-start; gap:1.4cqw; max-width:44cqw; }
.ws-hero h1{ margin:0; font:800 6cqw/.94 var(--c-display); letter-spacing:-.045em; }
.ws-hero p{ margin:0; font:500 1.4cqw/1.45 var(--c-body); opacity:.9; }
.ws-cta-lg{ background:var(--c-on-photo); color:var(--c-brand-1); font-size:1.3cqw; padding:1.1cqw 2cqw; }
.ws-features{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2cqw; padding:3cqw 4cqw; }
.ws-features div{ border-top:1px solid var(--c-line); padding-top:1.2cqw; display:flex; flex-direction:column; gap:.5cqw; }
.ws-features b{ font:700 1.6cqw/1.1 var(--c-display); letter-spacing:-.02em; }
.ws-features span{ font:400 1.1cqw/1.5 var(--c-body); color:var(--c-text-muted); }
.ws-band{ margin:0 2cqw; border-radius:1.6cqw; background:var(--c-brand-1); color:var(--c-on-brand-1); padding:4cqw; }
.ws-band p{ margin:0; font:800 3.6cqw/1 var(--c-display); letter-spacing:-.04em; }
/* mobile: the same homepage, one column */
.ws-m .ws-nav{ height:18cqw; padding:12cqw 6cqw 0; } .ws-m .ws-nav .ad-brand{ font-size:6cqw; gap:2cqw; } .ws-m .ws-nav .ad-sym{ width:7cqw; height:7cqw; }
.ws-burger{ margin-left:auto; display:flex; flex-direction:column; gap:1.6cqw; } .ws-burger i{ width:7cqw; height:.8cqw; border-radius:1cqw; background:currentColor; display:block; }
.ws-m .ws-hero{ height:110cqw; margin:6cqw 4cqw 0; border-radius:6cqw; }
.ws-m .ws-hero-copy{ left:6cqw; right:6cqw; bottom:7cqw; max-width:none; gap:3cqw; }
.ws-m .ws-hero h1{ font-size:15cqw; } .ws-m .ws-hero p{ font-size:4cqw; }
.ws-m .ws-cta-lg{ font-size:4cqw; padding:3cqw 5cqw; }
.ws-m .ws-features{ grid-template-columns:1fr; gap:4cqw; padding:8cqw 6cqw; }
.ws-m .ws-features b{ font-size:5cqw; } .ws-m .ws-features span{ font-size:3.6cqw; }
.ws-m .ws-features div{ padding-top:3cqw; gap:1.4cqw; }

/* ---------- in context (never flat) ----------
   The scene fills the stage under the glass rail; objects sit in .fm-view, the part the rail
   leaves clear. The root carries its format as .fm--billboard / --magazine / --card / --expo;
   parts inside are .fm-card, .fm-wall… (don't reuse those names for formats). */
.fm{ position:absolute; inset:0; overflow:clip; font-family:var(--c-body); }
.fm-art{ overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 16px 34px -18px rgba(0,0,0,.35); }
.fm-view{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:0; transition:left .7s var(--ease), width .7s var(--ease); }
.fm-scene{ position:absolute; inset:0; }
.fm-scene > .ph{ position:absolute; inset:0; }
.fm-bb{ position:absolute; left:17%; top:12%; width:60%; transform:perspective(1400px) rotateY(-16deg); transform-origin:0 50%; }
.fm-bb-frame{ padding:1.2%; background:#16181b; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.fm-bb-frame .fm-art{ box-shadow:none; }
.fm-leg{ position:absolute; left:28%; top:100%; width:2.4%; height:120%; background:linear-gradient(90deg, #202327, #3a3e44 60%, #202327); }
.fm-leg2{ left:70%; }
.fm-table{ background:radial-gradient(ellipse at 40% 30%, color-mix(in srgb, var(--c-brand-5) 60%, #fff), var(--c-brand-4) 70%); }
.fm-mag{ position:absolute; left:50%; top:50%; height:70%; aspect-ratio:420 / 297; transform:translate(-50%, -50%) rotate(-3deg); display:flex; box-shadow:0 30px 50px -24px rgba(0,0,0,.45); }
.fm-page{ flex:1; height:100%; background:#fafafa; position:relative; }
.fm-left{ padding:9% 8%; display:flex; flex-direction:column; gap:3.6%; box-shadow:inset -18px 0 24px -18px rgba(0,0,0,.25); }
.fm-left i{ display:block; height:1.2%; background:#d9dcdf; border-radius:2px; } .fm-left i:first-child{ height:5%; width:70%; background:#c3c7cc; margin-bottom:4%; }
.fm-right .fm-art{ width:100%; height:100%; box-shadow:inset 18px 0 24px -18px rgba(0,0,0,.25); }
.fm-counter{ background:linear-gradient(170deg, var(--c-brand-4), color-mix(in srgb, var(--c-brand-3) 70%, #000)); }
.fm-cards{ position:absolute; left:50%; top:52%; width:48%; transform:translate(-50%, -50%); }
.fm-card{ position:relative; aspect-ratio:85.6 / 54; border-radius:5% / 8%; overflow:hidden; box-shadow:0 30px 40px -20px rgba(0,0,0,.55); transform:rotate(-8deg); }
.fm-card .fm-art{ width:100%; height:100%; box-shadow:none; }
.fm-card-back{ position:absolute; inset:0; transform:translate(22%, -16%) rotate(6deg); opacity:.95; }
.fm-hall{ background:linear-gradient(180deg, color-mix(in srgb, var(--c-brand-4) 70%, #fff) 0 62%, color-mix(in srgb, var(--c-brand-3) 50%, #555) 62%); }
.fm-stand{ position:absolute; left:10%; right:10%; top:10%; bottom:10%; }
.fm-wall{ position:absolute; left:0; right:0; top:0; box-shadow:0 30px 50px -30px rgba(0,0,0,.5); }
.fm-wall .fm-art{ width:100%; box-shadow:none; }
.fm-counter-desk{ position:absolute; left:34%; width:32%; bottom:4%; height:30%; background:var(--c-brand-1); color:var(--c-on-brand-1); display:grid; place-items:center; box-shadow:0 20px 30px -16px rgba(0,0,0,.6); }
.fm-counter-desk .lg{ width:80%; height:50%; }
.fm-floor{ position:absolute; left:-8%; right:-8%; bottom:0; height:8%; background:rgba(0,0,0,.18); filter:blur(8px); border-radius:50%; }

/* ---------- campaign lines ---------- */
.cp{ display:grid; grid-template-columns:minmax(240px, 300px) 1fr; gap:48px; align-items:center; }
.cp-copy small{ font:500 12px/1 var(--c-body); color:var(--c-text-muted); }
.cp-line{ margin:10px 0 14px; font:800 30px/1.02 var(--c-display); letter-spacing:-.03em; text-wrap:balance; }
.cp-idea{ margin:0 0 20px; font:400 13px/1.5 var(--c-body); color:var(--c-text-muted); }
.cp-copy ul{ margin:0; padding:0; list-style:none; }
.cp-copy li{ padding:8px 0; border-top:1px solid var(--c-line); font:500 13px/1.4 var(--c-body); }
/* poster, story and post at true ratios, sized to the column: widths are 2/3 H + 9/16 × .88H + 4/5 × .62H = 1.658H, plus two gaps */
.cp-art{ display:flex; gap:14px; align-items:flex-end; justify-content:center; container-type:inline-size; min-width:0; }
.cp-art > div{ --H:min(440px, (100cqw - 28px) / 1.658); flex:none; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.1), 0 14px 30px -16px rgba(0,0,0,.35); }
.cp-poster{ aspect-ratio:2 / 3; height:var(--H); } .cp-story{ aspect-ratio:9 / 16; height:calc(var(--H) * .88); } .cp-post{ aspect-ratio:4 / 5; height:calc(var(--H) * .62); }

/* ---------- events ---------- */
.evt{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-content:center; }
.evt article{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.evt-art{ aspect-ratio:1; border-radius:12px; overflow:hidden; box-shadow:0 12px 26px -16px rgba(0,0,0,.35); }
.evt-photo{ aspect-ratio:16 / 6; border-radius:10px; overflow:hidden; }
.evt article > h3{ margin:4px 0 0; font:800 20px/1.1 var(--c-display); letter-spacing:-.02em; }
.evt article > p{ margin:0; font:400 13px/1.5 var(--c-body); color:var(--c-text-muted); }
.evt article > small{ font:500 12px/1.4 var(--c-body); opacity:.7; }