/* Ads Video Creation hub + sub-pages (lane ads, site round 4, 26 Sep 2026). Part 1 = the round-3 UGC page rules (board, team, edit desk, hooks,
   ROAS, related) carried over so these pages no longer depend on v3-ugc.css. Part 2 = round-4 additions. Brand-book palette only (v2.css tokens). */
.ug .sr{position:absolute;left:0;top:0;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}
.ug .band-teal .h-l{color:#fff}
.ug .ug-note{font-size:14.5px;line-height:1.45;color:var(--mute);margin:14px 0 0}
.ug [data-count]{font-variant-numeric:tabular-nums}

/* Clash Display under ~24px sets its space at ~.13em ("Brandmanagers"); open the word gaps on every small Clash line on this page */
.ug .h-s,.ug-col h3,.ug-role h3,.ug-role b.nn,.ug-vrow-h h3,.ug-fields b,.ug-hk b,.ug-rl b,.av-dk h3,.av-nxt strong{word-spacing:.12em}

/* ---------- hero ---------- */
.ug-hero .hero-g{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.ug-hero h1{margin:18px 0 20px}
.ug-proof{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.ug-proof b{display:block;font:600 clamp(28px,2.6vw,36px)/1 var(--disp);letter-spacing:-.02em;color:var(--teal)}
.ug-proof div:nth-child(2) b{color:var(--rust)}
.ug-proof div:nth-child(3) b{color:var(--ink)}
.ug-proof span{display:block;margin-top:6px;font-size:14.5px;color:var(--mute)}
.ug-stage{position:relative;height:600px;border-radius:var(--r4);background:var(--tealT);overflow:hidden;isolation:isolate}
.ug-disc{position:absolute;border-radius:50%;z-index:0}
.ug-disc.d1{width:240px;height:240px;background:var(--yellow);right:-60px;top:-70px}
.ug-disc.d2{width:120px;height:120px;background:var(--rust);left:-34px;bottom:70px}
.ug-ph{position:absolute;top:50%;left:55%;z-index:2}
.ug-ph .phone{width:250px}
.ug-ph.c{transform:translate(-50%,-50%);z-index:3}
.ug-ph.l{transform:translate(-120%,-47%) rotate(-7deg) scale(.8)}
.ug-ph.r{transform:translate(20%,-47%) rotate(7deg) scale(.8)}
.ug-ph.l .reel,.ug-ph.r .reel{display:none}
.ug-ph.c .reel .top,.ug-ph.c .reel .who,.ug-ph.c .reel .cap,.ug-ph.c .reel .shop{visibility:hidden}
/* hook phone + this page's lightbox: no fake reel chrome over the ads' own burned-in captions */
.ug-hk-ph .reel .top,.ug-hk-ph .reel .who,.ug-hk-ph .reel .cap,.ug-hk-ph .reel .shop,.lb .reel .top,.lb .reel .who,.lb .reel .cap,.lb .reel .shop{display:none}
.ug-tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--ink);border-radius:999px;padding:10px 15px;font:600 14.5px/1 var(--text);box-shadow:var(--sh2);z-index:4}
.ug-ph.l .ug-tag,.ug-ph.r .ug-tag{font-size:16px;bottom:auto;top:-20px}
.ug-watch{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);white-space:nowrap;z-index:5;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 8px;border:0;border-radius:999px;background:rgba(13,13,13,.62);color:#fff;font:600 14.5px/1 var(--text);cursor:pointer;backdrop-filter:none;transition:background .2s,transform .2s}
.ug-watch svg{flex:none;box-sizing:border-box;width:32px;height:32px;padding:9px 8px 9px 10px;border-radius:50%;background:var(--yellow);color:var(--ink)}
.ug-watch:hover{background:rgba(13,13,13,.8);transform:translateX(-50%) scale(1.03)}

/* ---------- library wall ---------- */
.ug-wall{grid-template-columns:repeat(6,minmax(0,1fr))}
.ug-more-w{display:flex;justify-content:center;margin-top:26px}
.ug .chips button small{font:600 14px/1 var(--text);font-variant-numeric:tabular-nums}
.ug-wall .tile .ov{padding:36px 12px 12px}
.ug-wall .tile .ov b{font-size:14.5px;line-height:1.25}
.ug-more-w .btn[hidden]{display:none}

/* ---------- how a batch runs: stage flow (teal band), no volumes ---------- */
.ug-cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.ug-col{position:relative;display:flex;flex-direction:column;min-height:0;padding:16px 14px 16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);overflow:hidden;isolation:isolate}
.ug-col .n{font:600 14px/1 var(--text);font-variant-numeric:tabular-nums;color:var(--yellow)}
.ug-col h3{font:600 19px/1.15 var(--disp);color:#fff;margin:10px 0 6px}
.ug-col small{font-size:14.5px;line-height:1.35;color:rgba(255,255,255,.78)}
.ug-col.done{background:var(--yellow);border-color:var(--yellow)}
.ug-col.done .n,.ug-col.done h3{color:var(--ink)}
.ug-col.done small,.ug-col.done p{color:rgba(13,13,13,.82)}
.ug-col p{margin:auto 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);font-size:15px;line-height:1.45;color:rgba(255,255,255,.9)}
.ug-col small{margin-bottom:14px}
.ug-col.done p{border-top-color:rgba(13,13,13,.16)}
.ug-clock{margin-top:22px;display:grid;grid-template-columns:1fr;gap:22px;align-items:center;padding:20px 22px;border-radius:var(--r3);background:#fff;color:var(--ink)}
.ug-clock-h{display:flex;gap:14px;align-items:center}
.ug-clock-h .ic{flex:0 0 48px;height:48px;border-radius:14px;background:var(--rust);color:#fff;display:grid;place-items:center}
.ug-clock-h .ic svg{width:24px;height:24px}
.ug-clock-h p{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink2)}
.ug-clock-h b{color:var(--ink)}
.ug-ruler{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));position:relative}
.ug-ruler::before{content:"";position:absolute;left:6.25%;right:6.25%;top:6px;height:2px;background:var(--tealM)}
.ug-ruler li{position:relative;text-align:center;padding:0 4px}
.ug-ruler i{display:block;width:14px;height:14px;margin:0 auto 10px;border-radius:50%;background:#fff;border:3px solid var(--teal);position:relative}
.ug-ruler li:last-child i{background:var(--yellow);border-color:var(--gold)}
.ug-ruler b{display:block;font:600 14.5px/1 var(--text);font-variant-numeric:tabular-nums;color:var(--teal)}
.ug-ruler span{display:block;margin-top:6px;font-size:14.5px;line-height:1.3;color:var(--ink2)}

/* ---------- team ---------- */
.ug-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative}
.ug-roles::before{content:"";position:absolute;left:6%;right:6%;top:44px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px);z-index:0}
.ug-role{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:18px 18px 20px;box-shadow:var(--sh1)}
.ug-role .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px}
.ug-role .ic svg{width:24px;height:24px}
.ug-role .i-t{background:var(--teal);color:#fff}.ug-role .i-y{background:var(--yellow);color:var(--ink)}.ug-role .i-r{background:var(--rust);color:#fff}
.ug-role .i-g{background:var(--gold);color:var(--ink)}.ug-role .i-s{background:var(--teal3);color:#fff}.ug-role .i-k{background:var(--ink);color:#fff}
.ug-role b{display:block;margin-top:18px;font:600 44px/1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.ug-role b.nn{font-size:22px;line-height:44px;color:var(--teal)}
.ug-role h3{margin:8px 0 6px;font:600 16px/1.2 var(--disp)}
.ug-role p{margin:0;font-size:15px;line-height:1.45;color:var(--ink2)}
.ug-plan{margin-top:16px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:24px;align-items:center;padding:24px;border-radius:var(--r4);background:linear-gradient(135deg,var(--teal) 0%,var(--teal3) 100%);color:#fff}
.ug-plan-t small{display:block;font:600 14px/1 var(--text);color:var(--yellow);text-transform:uppercase;letter-spacing:.06em}
.ug-plan-t b{display:block;margin-top:12px;font:600 clamp(28px,2.6vw,38px)/1.1 var(--disp);letter-spacing:-.015em}
.ug-plan-t span{display:block;margin-top:6px;font-size:15.5px;color:rgba(255,255,255,.85)}
.ug-plan-t p{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.85);max-width:44ch}
.ug-vrow{background:#fff;color:var(--ink);border-radius:var(--r3);padding:20px;box-shadow:var(--sh3)}
.ug-vrow-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ug-vrow-h h3{margin:0;font:600 19px/1.2 var(--disp)}
.ug-vrow-h span{font-size:14.5px;color:var(--mute)}
.ug-fields{list-style:none;margin:0;padding:16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ug-fields li{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--grey)}
.ug-fields .ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px}
.ug-fields .ic svg{width:21px;height:21px}
.ug-fields .i-t{background:var(--teal);color:#fff}.ug-fields .i-y{background:var(--yellow);color:var(--ink)}
.ug-fields .i-r{background:var(--rust);color:#fff}.ug-fields .i-s{background:var(--teal3);color:#fff}
.ug-fields b{display:block;font:600 16px/1.2 var(--disp)}
.ug-fields small{display:block;margin-top:3px;font-size:14.5px;line-height:1.3;color:var(--ink2)}
.ug-life{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:14px;border-top:1px solid var(--line)}
.ug-life small{font:600 14px/1 var(--text);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.ug-life ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ug-life li{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1 var(--text);color:var(--ink2)}
.ug-life li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tealM);box-shadow:0 0 0 3px var(--tealT)}
.ug-life li:not(:last-child)::after{content:"";width:16px;height:2px;border-radius:1px;background:var(--line)}
.ug-life li.on{padding:8px 12px;border-radius:999px;background:var(--yellow);color:var(--ink)}
.ug-life li.on::before{background:var(--ink);box-shadow:none}


/* ---------- hooks ---------- */
.ug-hooks{display:grid;grid-template-columns:minmax(0,1.2fr) auto;grid-template-areas:"t ph" "b ph";column-gap:clamp(28px,5vw,80px);align-items:center}
.ug-hk-t{grid-area:t;align-self:end}.ug-hk-b{grid-area:b;align-self:start}.ug-hk-ph{grid-area:ph}
.ug-hks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin-top:26px}
.ug-hk{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;min-height:76px;padding:8px 14px 8px 8px;border-radius:16px;border:1.5px solid var(--line);background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.ug-hk img{width:52px;height:60px;object-fit:cover;border-radius:10px}
.ug-hk b{display:block;font:600 16px/1.2 var(--disp);color:var(--ink)}
.ug-hk small{display:block;margin-top:3px;font-size:14.5px;color:var(--mute)}
.ug-hk[aria-pressed="true"]{border-color:var(--teal);background:var(--tealT)}
.ug-hk:hover{border-color:var(--teal)}
.ug-hk-ph{position:relative;display:flex;justify-content:center;padding:26px 30px;border-radius:var(--r4);background:var(--rust)}
.ug-hk-ph::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:var(--yellow);right:-30px;top:-30px}
.ug-hk-ph .phone{position:relative;width:270px}
.ug-hk-ph{overflow:hidden}
.ug-hk-ph .snd{position:absolute;right:16px;bottom:74px;z-index:4;width:48px;height:48px;border-radius:50%;border:0;background:rgba(13,13,13,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.ug-hk-ph .snd svg{width:22px;height:22px}
.ug-hk-ph .snd[aria-pressed="true"]{background:var(--yellow);color:var(--ink)}

/* ---------- why UGC: ROAS by creative type ---------- */
.ug-why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:16px;align-items:stretch}
.ug-roas-c{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;padding:26px;border-radius:var(--r4);background:var(--teal);color:#fff}
.ug-roas-c::before{content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;background:var(--rust);right:-56px;top:-60px}
.ug-roas-c::after{content:"";position:absolute;z-index:-1;width:70px;height:70px;border-radius:50%;background:var(--yellow);right:92px;top:58px}
.ug-roas-c small{font:600 14px/1 var(--text);text-transform:uppercase;letter-spacing:.06em;color:var(--yellow)}
.ug-roas-c b{display:block;margin-top:12px;font:600 clamp(64px,6.4vw,96px)/.95 var(--disp);letter-spacing:-.03em}
.ug-roas-c span{display:block;margin-top:8px;font:600 17px/1.3 var(--text)}
.ug-roas-c p{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.86)}
.ug-roas{padding:24px 24px 20px}
.ug-roas ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ug-roas li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 72px;gap:16px;align-items:center;padding:10px 12px;border-radius:14px}
.ug-roas li.u{background:var(--tealT);box-shadow:inset 0 0 0 1.5px var(--teal)}
.ug-roas .l b{display:block;font:600 16px/1.2 var(--text);color:var(--ink)}
.ug-roas .l small{display:block;margin-top:3px;font-size:14px;color:var(--mute)}
.ug-roas .tr{position:relative;height:16px;border-radius:8px;background:var(--grey);overflow:hidden}
.ug-roas .tr i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 100%);border-radius:8px;background:rgba(89,89,89,.38);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.ug-roas li.u .tr{background:#fff}
.ug-roas li.u .tr i{background:var(--teal)}
.ug-roas ul.ug-a .tr i{width:0}
.ug-roas ul.ug-a.in .tr i{width:calc(var(--w) * 100%)}
.ug-roas .v{font:600 20px/1 var(--disp);text-align:right;color:var(--ink)}
.ug-roas li.u .v{color:var(--teal)}

/* ---------- related ---------- */
.ug-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ug-rl{display:grid;grid-template-columns:48px 1fr 20px;gap:14px;align-items:center;min-height:88px;padding:16px 18px;border-radius:var(--r3);border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--sh1);transition:border-color .2s,transform .2s}
.ug-rl:hover{border-color:var(--teal);transform:translateY(-2px)}
.ug-rl .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;font:600 15px/1 var(--disp);letter-spacing:.02em}
.ug-rl .ico.i-t{background:var(--teal);color:#fff}.ug-rl .ico.i-r{background:var(--rust);color:#fff}.ug-rl .ico.i-y{background:var(--yellow);color:var(--ink)}
.ug-rl b{display:block;font:600 17px/1.2 var(--disp)}
.ug-rl small{display:block;margin-top:4px;font-size:14.5px;color:var(--ink2);line-height:1.35}
.ug-rl .arr{width:20px;height:20px;color:var(--teal)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .ug-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ug-roles{grid-template-columns:repeat(3,minmax(0,1fr))}.ug-roles::before{display:none}
  .ug-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:980px){
  .ug-ruler{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px}
  .ug-ruler::before{display:none}
  .ug-hero .hero-g{grid-template-columns:1fr}
  .ug-stage{height:560px}
  .ug-clock{grid-template-columns:1fr}
  .ug-plan{grid-template-columns:1fr}
  .ug-hooks{grid-template-columns:1fr;grid-template-areas:"t" "ph" "b";row-gap:24px}
  .ug-rel{grid-template-columns:1fr}
  .ug-why{grid-template-columns:1fr}
  .ug-roas-c{min-height:0}
}
@media (max-width:700px){
  .ug-stage{height:470px}
  .ug-ph .phone{width:204px;border-radius:36px;padding:8px}
  .ug-ph .phone .scr{border-radius:28px}
  .ug-ph .phone .notch{width:74px;height:20px;top:8px}
  .ug-ph.l{transform:translate(-112%,-46%) rotate(-7deg) scale(.78)}
  .ug-ph.r{transform:translate(12%,-46%) rotate(7deg) scale(.78)}
  .ug-ph.l .ug-tag,.ug-ph.r .ug-tag{display:none}
  .ug-disc.d1{width:170px;height:170px;right:-50px;top:-50px}
  .ug-disc.d2{width:90px;height:90px;left:-30px;bottom:40px}
  .ug-proof{gap:14px 24px}
  .ug-proof>div{flex:1 1 90px}
  .ug-cols{grid-template-columns:1fr;gap:8px}
  .ug-col{min-height:0;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-areas:"n h" "n s" "n p";column-gap:10px;row-gap:4px;align-items:start;padding:14px}
  .ug-col .n{grid-area:n;padding-top:4px}
  .ug-col p{grid-area:p;margin:6px 0 0;padding-top:8px}
  .ug-col h3{grid-area:h;margin:0;font-size:18px}
  .ug-col small{grid-area:s;margin:0}
  .ug-ruler{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .ug-ruler::before{display:none}
  .ug-roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ug-role{padding:16px}
  .ug-role b{font-size:38px;margin-top:14px}
  .ug-role b.nn{font-size:19px;line-height:38px}
  .ug-role p{font-size:15px}
  .ug-role h3{font-size:15px}
  .ug-plan{padding:18px}
  .ug-vrow{padding:16px}
  .ug-fields{grid-template-columns:1fr;gap:8px}
  .ug-fields li{padding:10px}
  .ug-roas{padding:18px 14px 16px}
  .ug-roas li{grid-template-columns:minmax(0,1fr) 64px;grid-template-areas:"l v" "t t";gap:8px 12px;padding:10px}
  .ug-roas .l{grid-area:l}.ug-roas .tr{grid-area:t}.ug-roas .v{grid-area:v}
  .ug-roas-c{padding:22px}
  .ug-roas-c::before{width:130px;height:130px;right:-40px;top:-50px}
  .ug-roas-c::after{width:40px;height:40px;right:24px;top:24px}
  .ug-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ug-hks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ug-hk{grid-template-columns:36px 1fr;gap:10px;padding:8px 8px 8px 8px}
  .ug-hk img{width:36px;height:50px}
  .ug-hk small{font-size:14px;white-space:nowrap}
  .ug-hk-ph{padding:20px 16px}
  .ug-hk-ph .phone{width:220px}
  .ug-ph{left:50%}
}
@media (prefers-reduced-motion:reduce){.ug-roas .tr i{transition:none}}

/* ================= round 4 (26 Sep 2026): Ads Video Creation hub + performance / lifestyle sub-pages. Lane ads. Brand-book palette only. ================= */
.av [hidden]{display:none!important}
/* no fake reel chrome (or avatar mark) over the ads' own burned-in captions */
.av .phone .reel .top,.av .phone .reel .who,.av .phone .reel .cap,.av .phone .reel .shop{display:none}
.av .ug-ph.l .reel,.av .ug-ph.r .reel{display:none}
/* sound toggle: the icon and colour follow aria-pressed, so the state is always visible */
.av .phone .av-snd{position:absolute;right:14px;bottom:18px;top:auto;z-index:5;width:48px;height:48px;border-radius:50%;border:0;background:rgba(13,13,13,.62);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.av .av-snd span{display:grid;place-items:center}
.av .av-snd svg{width:22px;height:22px;padding:0}
.av .av-snd .on{display:none}
.av .av-snd[aria-pressed="true"]{background:var(--yellow);color:var(--ink)}
.av .av-snd[aria-pressed="true"] .on{display:grid}
.av .av-snd[aria-pressed="true"] .off{display:none}
.av .av-snd:focus-visible,.av .av-vt:focus-visible,.av .tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- tiles: style badge + category ---------- */
.av .tile .av-sty{position:absolute;left:10px;top:10px;z-index:2;padding:6px 9px;border-radius:999px;font:600 12px/1 var(--text);letter-spacing:.01em}
.av .tile .s-performance{background:var(--teal);color:#fff}
.av .tile .s-lifestyle{background:var(--black);color:var(--gold)}
.av .tile .ov{padding:36px 12px 12px}
.av .tile .ov b{font-size:14.5px;line-height:1.25}
.av .tile .ov span{font-size:13px}
.av .wall{margin-top:18px}

/* ---------- filter chips (style + category) ---------- */
.av-filt{display:grid;gap:10px}
.av .chips button small{font:600 13px/1 var(--text);font-variant-numeric:tabular-nums}
.av-cs button{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.av-cs i,.av-vgrp h3 i{flex:none;width:10px;height:10px;border-radius:50%}
.d-performance{background:var(--teal)}.d-lifestyle{background:var(--gold)}
.av-cs button[aria-pressed="true"] i{box-shadow:0 0 0 2px #fff}

/* ---------- two styles ---------- */
.av-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.av-pan{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:168px minmax(0,1fr);grid-template-areas:"v t" "v l" "v g";grid-template-rows:auto auto 1fr;column-gap:26px;row-gap:18px;padding:26px;border-radius:var(--r4);text-decoration:none;color:#fff;transition:transform .2s ease,box-shadow .2s ease}
.av-pan:hover{transform:translateY(-3px);box-shadow:var(--sh3)}
.av-pan-p{background:var(--teal)}
.av-pan-l{background:var(--black)}
.av-pan::after{content:"";position:absolute;z-index:-1;width:150px;height:150px;border-radius:50%;right:-60px;bottom:-70px}
.av-pan-p::after{background:var(--yellow)}.av-pan-l::after{background:var(--gold)}
.av-mph{grid-area:v;position:relative;align-self:start;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 0 0 6px #0b0f10,0 18px 40px -16px rgba(0,0,0,.6)}
.av-mph img,.av-mph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av-pan-t{grid-area:t}
.av-lb{display:inline-block;font:600 13px/1.2 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--yellow)}
.av-pan-l .av-lb{color:var(--gold)}
.av-pan h3{margin:12px 0 10px;font:600 clamp(24px,2.3vw,32px)/1.08 var(--disp);letter-spacing:-.015em;word-spacing:.08em;color:#fff}
.av-pan p{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88)}
.av-pills{grid-area:l;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.av-pills li{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font:500 14px/1.1 var(--text);color:#fff}
.av-go{grid-area:g;align-self:end;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:12px;background:var(--yellow);color:var(--ink);font:600 15px/1.2 var(--text)}
.av-pan-l .av-go{background:var(--gold)}
.av-go .arr{width:18px;height:18px;flex:none}

/* ---------- Vaseline spotlight (hub) ---------- */
.av-vas-g{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.av-vas-ph{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 34px 24px;border-radius:var(--r4);background:var(--teal);overflow:hidden;isolation:isolate}
.av-vas-ph::before{content:"";position:absolute;z-index:-1;width:170px;height:170px;border-radius:50%;background:var(--yellow);right:-50px;top:-60px}
.av-vas-ph::after{content:"";position:absolute;z-index:-1;width:90px;height:90px;border-radius:50%;background:var(--rust);left:-30px;bottom:90px}
.av-vas-ph .phone{width:270px}
.av-vcap{margin:4px 0 0;color:#fff;font:500 15.5px/1.3 var(--text);text-align:center}
.av-vcap b{font-weight:600}
.av-vas-ph .btn{margin:0;min-height:48px}
.av-vgrp+.av-vgrp{margin-top:26px}
.av-vgrp h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 19px/1.2 var(--disp);word-spacing:.12em}
.av-vth{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:640px}
.av-vt{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:0;padding:0;background:#111;cursor:pointer;box-shadow:var(--sh1);transition:box-shadow .2s}
.av-vt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.av-vt span{position:absolute;left:6px;bottom:6px;padding:4px 7px;border-radius:8px;background:rgba(13,13,13,.72);color:#fff;font:600 12px/1 var(--text)}
.av-vt:hover img{transform:scale(1.04)}
.av-vt[aria-pressed="true"]{box-shadow:0 0 0 3px var(--grey),0 0 0 6px var(--teal)}
.av-vt[aria-pressed="true"] span{background:var(--yellow);color:var(--ink)}
.av-vlinks{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:22px}

/* ---------- hooks (hub): six openings ---------- */
.av-hk-d{margin:14px 0 0;max-width:560px;min-height:2.9em;font-size:15.5px;line-height:1.45;color:var(--ink2)}
.av-hk-d b{color:var(--ink)}
.ug-hk-b .av-full{margin-top:14px}
.av .ug-hk b{word-spacing:.12em}

/* ---------- related ---------- */
.av-rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.av .ug-rl .ico svg{width:22px;height:22px}
.av .ug-rl .ico.i-k{background:var(--black);color:var(--gold)}
.av .ug-rl .ico.i-g{background:var(--gold);color:var(--ink)}
.av .ug-rl .ico.i-y{background:var(--yellow);color:var(--ink)}

/* ---------- performance: formats ---------- */
.av-fmt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.av-f{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:var(--r3);border:1px solid var(--line);background:#fff;box-shadow:var(--sh1)}
.av-f .ic,.av-m .ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px}
.av-f .ic svg,.av-m .ic svg{width:24px;height:24px}
.av-f .i-t{background:var(--teal);color:#fff}.av-f .i-y{background:var(--yellow);color:var(--ink)}.av-f .i-r{background:var(--rust);color:#fff}
.av-f .i-g{background:var(--gold);color:var(--ink)}.av-f .i-s{background:var(--teal3);color:#fff}.av-f .i-k{background:var(--yellow);color:var(--ink)}
.av-f h3,.av-m h3{margin:0 0 6px;font:600 19px/1.2 var(--disp);word-spacing:.12em}
.av-f p,.av-m p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.av-f:last-child{background:var(--black);border-color:var(--black)}
.av-f:last-child h3{color:#fff}.av-f:last-child p{color:rgba(255,255,255,.84)}

/* ---------- performance: anatomy ---------- */
.av-anat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.av-anat-ph{position:relative;display:flex;justify-content:center;padding:26px 30px 82px;border-radius:var(--r4);background:var(--teal);overflow:hidden;isolation:isolate}
.av-anat-ph::before{content:"";position:absolute;z-index:-1;width:170px;height:170px;border-radius:50%;background:var(--gold);left:-50px;bottom:-60px}
.av-anat-ph .phone{width:260px}
.av-anat-ph .ug-watch{bottom:18px}
.av-beats{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px;position:relative;max-width:560px}
.av-beats::before{content:"";position:absolute;left:21px;top:30px;bottom:30px;width:2px;background:var(--line)}
.av-beats li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:9px 0}
.av-beats .n{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:600 17px/1 var(--disp);color:#fff}
.av-beats .b0{background:var(--rust)}.av-beats .b1{background:var(--gold);color:var(--ink)}.av-beats .b2{background:var(--teal)}
.av-beats .b3{background:var(--teal3)}.av-beats .b4{background:var(--black);color:var(--yellow)}
.av-beats h3{margin:3px 0 4px;font:600 19px/1.2 var(--disp)}
.av-beats p{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink2)}

/* ---------- performance: test and scale (teal band) ---------- */
.av-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.av-steps li{position:relative;padding:18px 16px 20px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.av-steps li:not(:last-child)::after{content:"";position:absolute;right:-10px;top:50%;width:7px;height:7px;border-top:2px solid var(--yellow);border-right:2px solid var(--yellow);transform:translateY(-50%) rotate(45deg)}
.av-steps .n{font:600 14px/1 var(--text);color:var(--yellow);font-variant-numeric:tabular-nums}
.av-steps h3{margin:12px 0 6px;font:600 19px/1.2 var(--disp);color:#fff;word-spacing:.12em}
.av-steps p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.86)}
.av-sig{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center;padding:20px 22px;border-radius:var(--r3);background:#fff;color:var(--ink)}
.av-sig-l small{display:block;font:600 13px/1 var(--text);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.av-sig-l ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.av-sig-l li{padding:10px 12px;border-radius:10px;background:var(--grey);font:600 14.5px/1 var(--text)}
.av-sig .btn{margin:0}
.av .ug-roas li{grid-template-columns:minmax(0,190px) minmax(0,1fr) 72px}

/* ---------- Vaseline rows (sub-pages) ---------- */
.av-vw{display:grid;gap:14px}
.av-vw5{grid-template-columns:repeat(5,minmax(0,1fr))}
.av-vw4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:980px}

/* ---------- lifestyle: dark hero ---------- */
.av-lh{background:var(--black);color:#fff}
.av-lh .h-xl{color:#fff}
.av-lh .crumbs ol,.av-lh .crumbs a,.av-lh .crumbs li[aria-current]{color:rgba(255,255,255,.82)}
.av-lh .crumbs a:hover{color:var(--gold)}
.av-lh .crumbs li+li::before{color:rgba(255,255,255,.45)}
.av-lh .kick,.av-band-k .kick{background:rgba(219,158,54,.12);border-color:rgba(219,158,54,.45);color:var(--gold)}
.av-lh .kick i,.av-band-k .kick i{background:var(--gold);box-shadow:0 0 0 3px rgba(219,158,54,.25)}
.av-lh .lead{color:rgba(255,255,255,.86)}
.av-gold{color:var(--gold)}
.av-btn-d{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.av-btn-d:hover{border-color:#fff}
.av-lh .ug-proof{border-top-color:rgba(255,255,255,.18)}
.av-lh .ug-proof b,.av-lh .ug-proof div:nth-child(2) b{color:var(--gold)}
.av-lh .ug-proof span{color:rgba(255,255,255,.78)}
.av-lstage{background:#1f1f1f}
.av-lstage .ug-disc.d1{background:var(--gold)}
.av-lstage .ug-disc.d2{background:var(--teal)}
.av-lstage .ug-ph{left:60%}
.av-lstage .ug-ph.l{transform:translate(-118%,-48%) rotate(-6deg) scale(.84)}

/* ---------- lifestyle: what we make + process (black band) ---------- */
.av-make{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.av-m{padding:22px;border-radius:var(--r3);border:1px solid var(--line);background:#fff;box-shadow:var(--sh1)}
.av-m .ic{background:var(--black);color:var(--gold);margin-bottom:18px}
.av-band-k{background:var(--black);color:#fff}
.av-band-k .h-l{color:#fff}
.av-band-k .lead{color:rgba(255,255,255,.86)}
.av-proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.av-pr{border-radius:var(--r3);overflow:hidden;background:#1a1a1a;border:1px solid rgba(255,255,255,.12)}
.av-pr figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#111}
.av-pr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av-pr .n{position:absolute;left:10px;top:10px;display:grid;place-items:center;height:30px;padding:0 11px;border-radius:999px;background:var(--gold);color:var(--ink);font:600 14px/1 var(--text);font-variant-numeric:tabular-nums}
.av-pr div{padding:14px 14px 18px}
.av-pr h3{margin:0 0 6px;font:600 19px/1.2 var(--disp);color:#fff}
.av-pr p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.82)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .av-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .av-steps li::after{display:none}
  .av-proc{grid-template-columns:repeat(3,minmax(0,1fr))}
  .av-make{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-pan{grid-template-columns:132px minmax(0,1fr)}
}
@media (max-width:980px){
  .av-two{grid-template-columns:1fr}
  .av-vas-g{grid-template-columns:1fr}
  .av-vas-ph{justify-self:center;width:100%;max-width:520px}
  .av-anat{grid-template-columns:1fr}
  .av-anat-ph{order:2}
  .av-anat-ph{justify-self:center;width:100%;max-width:520px}
  .av-fmt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-sig{grid-template-columns:1fr}
}
@media (max-width:700px){
  .av-pan{grid-template-columns:100px minmax(0,1fr);grid-template-areas:"v t" "l l" "g g";grid-template-rows:auto;column-gap:16px;row-gap:16px;padding:18px}
  .av-mph{border-radius:18px;box-shadow:0 0 0 4px #0b0f10,0 12px 30px -14px rgba(0,0,0,.6)}
  .av-pan h3{font-size:22px;margin:8px 0 6px}
  .av-pan p{font-size:15px}
  .av-go{justify-self:stretch;justify-content:center}
  .av-vas-ph{padding:20px 16px}
  .av-vas-ph .phone{width:230px}
  .av-vth{gap:8px}
  .av-vt{border-radius:10px}
  .av-vt span{left:4px;bottom:4px;padding:3px 5px}
  .av-fmt{grid-template-columns:1fr;gap:10px}
  .av-f{flex-direction:row;align-items:flex-start;gap:14px;padding:16px}
  .av-f .ic{width:44px;height:44px;border-radius:13px}
  .av-steps{grid-template-columns:1fr;gap:8px}
  .av-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px;padding:14px}
  .av-steps .n{grid-row:span 2;padding-top:4px}
  .av-steps h3{margin:0 0 4px;font-size:18px}
  .av-sig{padding:16px}
  .av-sig .btn{width:100%}
  .av-proc{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .av-pr div{padding:12px 12px 14px}
  .av-pr h3{font-size:17px}
  .av-make{grid-template-columns:1fr;gap:10px}
  .av-m{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:16px}
  .av-m .ic{width:44px;height:44px;border-radius:13px;grid-row:span 2;margin:0}
  .av-rel{grid-template-columns:1fr}
  .av-vw5{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .av-vw5 .tile{width:calc(50% - 5px)}
  .av-vw4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .av-anat-ph{padding:20px 16px 78px}
  .av-anat-ph .phone{width:220px}
  .av-beats h3{font-size:18px}
  .av .tile .av-sty{left:8px;top:8px;padding:5px 8px}
  .av .tile .ov b{font-size:14px}
  .av-lstage .ug-ph{left:60%}
  .av-lstage .ug-ph.l{transform:translate(-104%,-46%) rotate(-6deg) scale(.8)}
  .av .ug-roas li{grid-template-columns:minmax(0,1fr) 64px}
  .av .ug-hk{grid-template-columns:34px minmax(0,1fr);gap:8px;padding:8px}
  .av .ug-hk img{width:34px;height:48px}
  .av .ug-hk b{font-size:15px}
  .av .ug-hk small{white-space:normal;font-size:13px;line-height:1.25}
  .av .ug-proof b.w{font-size:24px;line-height:28px}
}
@media (prefers-reduced-motion:reduce){.av-pan,.av-vt img{transition:none}}

/* ---------- review fix (26 Sep): edit desk without volumes, 3-up Vaseline row ---------- */
.av-desk{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:stretch}
.av-dks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.av-dk{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--r3)}
.av-dk .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.av-dk .ic svg{width:23px;height:23px}
.av-dk h3{margin:6px 0 0;font:600 20px/1.2 var(--disp)}
.av-dk p{margin:0;font-size:15.5px;line-height:1.5}
.av-dk.k-t{background:var(--teal);color:#fff}.av-dk.k-t .ic{background:rgba(255,255,255,.14);color:var(--yellow)}.av-dk.k-t p{color:rgba(255,255,255,.88)}
.av-dk.k-r{background:var(--rust);color:#fff}.av-dk.k-r .ic{background:rgba(255,255,255,.16);color:#fff}.av-dk.k-r p{color:rgba(255,255,255,.9)}
.av-dk.k-g{background:var(--gold);color:var(--ink)}.av-dk.k-g .ic{background:rgba(13,13,13,.1);color:var(--ink)}.av-dk.k-g p{color:rgba(13,13,13,.84)}
.av-dk.k-w{background:#fff;color:var(--ink);border:1px solid var(--line)}.av-dk.k-w .ic{background:var(--tealT);color:var(--teal)}.av-dk.k-w p{color:var(--ink2)}
.av-nxt{padding:22px}
.av-nxt ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0;position:relative}
.av-nxt ol::before{content:"";position:absolute;left:39px;top:22px;bottom:22px;width:2px;background:var(--line)}
.av-nxt li{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0}
.av-nxt li b{position:relative;z-index:1;justify-self:center;display:grid;place-items:center;min-width:72px;height:36px;padding:0 10px;border-radius:999px;background:var(--tealT);color:var(--teal);font:600 14px/1 var(--text);font-variant-numeric:tabular-nums}
.av-nxt li:last-child b{background:var(--yellow);color:var(--ink)}
.av-nxt strong{display:block;font:600 16.5px/1.2 var(--disp);color:var(--ink)}
.av-nxt small{display:block;margin-top:3px;font-size:14.5px;line-height:1.35;color:var(--ink2)}
.av-vw3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
/* lifestyle wall: the first film is featured 2x2 so the grid closes with no orphan row (6 cols: 4+8 cells; 4 cols: 4+8) */
.av-lwall{grid-auto-flow:dense}
.av-lwall .tile:not([hidden]):first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.av-lwall .tile:first-child .ov b{font-size:16px}
@media (max-width:980px){
  .av-desk{grid-template-columns:1fr}
}
@media (max-width:700px){
  .av-dks{grid-template-columns:1fr;gap:10px}
  .av-dk{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px}
  .av-dk .ic{width:44px;height:44px;border-radius:13px;grid-row:span 2}
  .av-dk h3{margin:0;font-size:18px}
  .av-nxt{padding:18px 16px}
  .av-nxt li{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .av-nxt ol::before{left:35px}
  .av-nxt li b{min-width:64px}
  .av-vw3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ug-plan-t b{font-size:26px}
  .av-lwall .tile:not([hidden]):first-child{grid-row:auto;aspect-ratio:4/5}
}